Tokens list

package.json

@@ -15,7 +15,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@alephium/sdk": "0.1.0",
+    "@alephium/sdk": "0.2.0-rc.0",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-navigation/bottom-tabs": "^6.3.2",
     "@react-navigation/native": "^6.0.10",

src/components/AddressCard.tsx

@@ -19,7 +19,7 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 import { NavigationProp, useNavigation } from '@react-navigation/native'
 import { colord } from 'colord'
 import { Pressable, StyleProp, ViewStyle } from 'react-native'
-import styled, { css, useTheme } from 'styled-components/native'
+import styled, { useTheme } from 'styled-components/native'
 
 import { useAppSelector } from '../hooks/redux'
 import RootStackParamList from '../navigation/rootStackRoutes'
@@ -60,8 +60,7 @@ const AddressCard = ({ style, addressHash }: AddressCardProps) => {
           }}
         />
       </Header>
-      {/* Replace ℵ with SVG or use dollar value instead */}
-      <AmountStyled value={BigInt(address.networkData.details.balance)} suffix="ℵ" color={textColor} />
+      <AmountStyled value={BigInt(address.networkData.details.balance)} color={textColor} size={17} />
     </Pressable>
   )
 }
@@ -85,13 +84,7 @@ const AddressBadgeStyled = styled(AddressBadge)`
   margin-right: 18px;
 `
 
-const AmountStyled = styled(Amount)<{ color?: string }>`
+const AmountStyled = styled(Amount)`
   font-weight: 700;
   font-size: 26px;
-
-  ${({ color }) =>
-    color &&
-    css`
-      color: ${color};
-    `}
 `

src/components/Amount.tsx

@@ -18,54 +18,56 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 
 import { formatAmountForDisplay } from '@alephium/sdk'
 import { StyleProp, ViewStyle } from 'react-native'
-import styled from 'styled-components/native'
+import styled, { useTheme } from 'styled-components/native'
 
 import { useAppSelector } from '../hooks/redux'
-import { Currency } from '../types/settings'
-import { currencies } from '../utils/currencies'
+import Alef from '../images/icons/Alef'
 import { formatFiatAmountForDisplay } from '../utils/numbers'
 import AppText from './AppText'
 
 interface AmountProps {
-  value?: bigint
+  value?: bigint | number
   fadeDecimals?: boolean
   fullPrecision?: boolean
   prefix?: string
   suffix?: string
-  fiat?: number
-  fiatCurrency?: Currency
+  isFiat?: boolean
   showOnDiscreetMode?: boolean
+  color?: string
+  size?: number
   style?: StyleProp<ViewStyle>
 }
 
 const Amount = ({
   value,
-  style,
   fadeDecimals,
   fullPrecision = false,
   prefix,
   suffix = '',
   showOnDiscreetMode = false,
-  fiatCurrency,
-  fiat
+  isFiat = false,
+  color,
+  size,
+  style
 }: AmountProps) => {
+  const theme = useTheme()
+
   let integralPart = ''
   let fractionalPart = ''
-  let moneySymbol = ''
+  let quantitySymbol = ''
   const discreetMode = useAppSelector((state) => state.settings.discreetMode)
 
   if (!discreetMode || showOnDiscreetMode) {
-    let amount = ''
-
-    if (fiat) {
-      amount = formatFiatAmountForDisplay(fiat)
-    } else if (value !== undefined) {
-      amount = formatAmountForDisplay(value, fullPrecision)
-    }
+    let amount =
+      value !== undefined
+        ? isFiat && typeof value === 'number'
+          ? formatFiatAmountForDisplay(value)
+          : formatAmountForDisplay(value as bigint, fullPrecision)
+        : ''
 
     if (amount) {
       if (fadeDecimals && ['K', 'M', 'B', 'T'].some((char) => amount.endsWith(char))) {
-        moneySymbol = amount.slice(-1)
+        quantitySymbol = amount.slice(-1)
         amount = amount.slice(0, -1)
       }
       const amountParts = amount.split('.')
@@ -74,23 +76,22 @@ const Amount = ({
     }
   }
 
-  const displaySuffix = moneySymbol + suffix ? ` ${suffix}` : fiatCurrency ? ` ${currencies[fiatCurrency].symbol}` : ''
-
   return (
     <AppText style={style}>
       {discreetMode && !showOnDiscreetMode ? (
         '•••'
       ) : integralPart ? (
-        fadeDecimals ? (
-          <>
-            {prefix && <AppText>{prefix}</AppText>}
-            <AppText>{integralPart}</AppText>
-            <Decimals>.{fractionalPart}</Decimals>
-            {displaySuffix && <AppText>{displaySuffix}</AppText>}
-          </>
-        ) : (
-          `${integralPart}.${fractionalPart}${displaySuffix}`
-        )
+        <>
+          {prefix && <AppText style={{ color }}>{prefix}</AppText>}
+          <AppText style={{ color }}>{integralPart}</AppText>
+          <AppText color={fadeDecimals ? theme.font.secondary : color}>.{fractionalPart} </AppText>
+          {quantitySymbol && <Suffix color={color} bold>{` ${quantitySymbol}`}</Suffix>}
+          {!suffix ? (
+            <Alef size={size} color={color ?? theme.font.secondary} />
+          ) : (
+            <Suffix color={color}>{suffix}</Suffix>
+          )}
+        </>
       ) : (
         '-'
       )}
@@ -102,7 +103,7 @@ export default styled(Amount)`
   font-weight: 500;
 `
 
-const Decimals = styled(AppText)`
-  color: ${({ theme }) => theme.font.secondary};
-  font-weight: 500;
+const Suffix = styled(AppText)`
+  color: ${({ theme, color }) => color ?? theme.font.secondary};
+  font-weight: normal;
 `

src/components/AppText.tsx

@@ -16,12 +16,19 @@ You should have received a copy of the GNU Lesser General Public License
 along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
 
-import styled from 'styled-components/native'
+import styled, { css } from 'styled-components/native'
 
-interface TextProps {
-  isSecondary?: boolean
+export interface AppTextProps {
+  bold?: boolean
+  color?: string
 }
 
-export default styled.Text<TextProps>`
-  color: ${({ theme, isSecondary }) => (isSecondary ? theme.font.secondary : theme.font.primary)};
+export default styled.Text<AppTextProps>`
+  color: ${({ theme, color }) => color ?? theme.font.primary};
+
+  ${({ bold }) =>
+    bold &&
+    css`
+      font-weight: 700;
+    `}
 `

src/components/BalanceSummary.tsx

@@ -21,6 +21,7 @@ import styled, { useTheme } from 'styled-components/native'
 
 import { useAppSelector } from '../hooks/redux'
 import { selectAllAddresses } from '../store/addressesSlice'
+import { currencies } from '../utils/currencies'
 import { attoAlphToFiat } from '../utils/numbers'
 import Amount from './Amount'
 
@@ -45,8 +46,8 @@ const BalanceSummary = ({ style }: BalanceSummaryProps) => {
         <ActivityIndicator size="large" color={theme.font.primary} />
       ) : (
         <>
-          <AmountInFiat fiat={balance} fadeDecimals fiatCurrency={currency} />
-          <AmountStyled value={totalBalance} fadeDecimals />
+          <AmountInFiat value={balance} isFiat fadeDecimals suffix={currencies[currency].symbol} />
+          <AmountStyled value={totalBalance} fadeDecimals size={14} />
         </>
       )}
     </View>

src/components/Carousel.tsx

@@ -16,42 +16,53 @@ You should have received a copy of the GNU Lesser General Public License
 along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { ReactElement } from 'react'
-import { Dimensions, StyleProp, View, ViewProps } from 'react-native'
+import { ReactElement, useState } from 'react'
+import { Dimensions, LayoutChangeEvent, StyleProp, View, ViewProps } from 'react-native'
 import Animated, { Extrapolate, interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
 import RNCarousel from 'react-native-reanimated-carousel'
-import styled, { useTheme } from 'styled-components/native'
+import styled, { css, useTheme } from 'styled-components/native'
 
 interface CarouselProps<T> {
   data: Array<T>
   renderItem: (itemInfo: { item: T }) => ReactElement
   width?: number
+  padding?: number
   height?: number
+  distance?: number
   onScrollStart?: () => void
   onScrollEnd?: (index: number) => void
 }
 
-function Carousel<T>({ data, renderItem, width, height, onScrollStart, onScrollEnd }: CarouselProps<T>) {
+function Carousel<T>({
+  data,
+  renderItem,
+  width,
+  height,
+  padding = 0,
+  distance = 0,
+  onScrollStart,
+  onScrollEnd
+}: CarouselProps<T>) {
   const progressValue = useSharedValue<number>(0)
   const theme = useTheme()
+  const [_width, setWidth] = useState(width ?? Dimensions.get('window').width - padding * 2)
 
-  const defaultWidth = Dimensions.get('window').width
+  const onLayout = (event: LayoutChangeEvent) => {
+    setWidth(width ?? event.nativeEvent.layout.width - padding * 2)
+  }
 
   return (
-    <View>
+    <View onLayout={onLayout}>
       <RNCarousel
-        style={{
-          width: '100%',
-          justifyContent: 'center'
-        }}
-        width={width ?? defaultWidth}
+        style={{ width: '100%', justifyContent: 'center' }}
+        width={_width}
         height={height}
         loop={false}
         onProgressChange={(_, absoluteProgress) => (progressValue.value = absoluteProgress)}
         mode="parallax"
         modeConfig={{
           parallaxScrollingScale: 1,
-          parallaxScrollingOffset: -17
+          parallaxScrollingOffset: distance * -1
         }}
         data={data}
         renderItem={renderItem}
@@ -60,12 +71,12 @@ function Carousel<T>({ data, renderItem, width, height, onScrollStart, onScrollE
       />
       {!!progressValue && data.length > 1 && (
         <CarouselPagination>
-          {data.map((hash, index) => (
+          {data.map((_, index) => (
             <CarouselPaginationItem
               backgroundColor={theme.font.primary}
               animValue={progressValue}
               index={index}
-              key={`pagination-${hash}`}
+              key={`pagination-${index}`}
               length={data.length}
             />
           ))}
@@ -79,8 +90,6 @@ export default Carousel
 
 const CarouselPagination = styled.View`
   flex-direction: row;
-  justify-content: center;
-  width: 100px;
   align-self: center;
   margin-top: 36px;
 `
@@ -114,13 +123,13 @@ const CarouselPaginationItem = ({ animValue, index, length, size = 12, style }:
   }, [animValue, index, length])
 
   return (
-    <Circle style={style} size={size}>
+    <Circle style={style} size={size} isLast={index === length - 1}>
       <Dot style={animStyle} size={size - 3} />
     </Circle>
   )
 }
 
-const Circle = styled.View<{ size: number }>`
+const Circle = styled.View<{ size: number; isLast: boolean }>`
   background-color: ${({ theme }) => theme.font.contrast};
   width: ${({ size }) => size}px;
   height: ${({ size }) => size}px;
@@ -130,7 +139,12 @@ const Circle = styled.View<{ size: number }>`
   overflow: hidden;
   align-items: center;
   justify-content: center;
-  margin: 0 ${({ size }) => size / 2}px;
+
+  ${({ isLast }) =>
+    !isLast &&
+    css`
+      margin-right: 8px;
+    `}
 `
 
 const Dot = styled(Animated.View)<{ size: number }>`

src/components/HighlightRow.tsx

@@ -18,7 +18,7 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 
 import { ReactNode } from 'react'
 import { Pressable, StyleProp, View, ViewStyle } from 'react-native'
-import styled, { css } from 'styled-components/native'
+import styled, { css, useTheme } from 'styled-components/native'
 
 import { BORDER_RADIUS, INPUTS_HEIGHT, INPUTS_PADDING } from '../style/globalStyle'
 import AppText from './AppText'
@@ -41,10 +41,12 @@ export interface HighlightRowProps extends BorderOptions {
 }
 
 const HighlightRow = ({ title, subtitle, children, onPress, style }: HighlightRowProps) => {
+  const theme = useTheme()
+
   const componentContent = title ? (
     <>
       <LeftContent>
-        <AppText isSecondary>{title}</AppText>
+        <AppText color={theme.font.secondary}>{title}</AppText>
         {subtitle && <Subtitle>{subtitle}</Subtitle>}
       </LeftContent>
       <RightContent>{children}</RightContent>