feat(mobile): add generic AmountFormat component (#149)

apps/mobile/components/common/amount-format.tsx

@@ -0,0 +1,66 @@
+import { cn } from '@/lib/utils'
+import { type VariantProps, cva } from 'class-variance-authority'
+import { Text } from '../ui/text'
+
+const amountVariants = cva('font-semibold shrink-0', {
+  variants: {
+    size: {
+      xl: 'text-4xl',
+      lg: 'text-3xl',
+      md: 'text-2xl',
+      sm: 'text-base',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+const currencyVariants = cva('text-muted-foreground font-normal', {
+  variants: {
+    size: {
+      xl: 'text-base',
+      lg: 'text-sm',
+      md: 'text-sm',
+      sm: 'text-[10px]',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+type AmountFormatProps = {
+  amount?: number
+  currency?: string
+  className?: string
+  displayNegativeSign?: boolean
+  displayPositiveColor?: boolean
+} & VariantProps<typeof amountVariants>
+
+export function AmountFormat({
+  amount = 0,
+  currency = 'VND',
+  className,
+  size,
+  displayNegativeSign,
+  displayPositiveColor,
+}: AmountFormatProps) {
+  return (
+    <Text
+      className={cn(
+        amountVariants({ size }),
+        amount >= 0
+          ? displayPositiveColor
+            ? 'text-amount-positive'
+            : 'text-foreground'
+          : 'text-amount-negative',
+        className,
+      )}
+    >
+      {(displayNegativeSign ? amount : Math.abs(amount)).toLocaleString() ||
+        '0.00'}{' '}
+      <Text className={cn(currencyVariants({ size }))}>{currency}</Text>
+    </Text>
+  )
+}

apps/mobile/components/home/wallet-statistics.tsx

@@ -2,6 +2,7 @@ import { useWallets } from '@/queries/wallet'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import { Pressable, View } from 'react-native'
+import { AmountFormat } from '../common/amount-format'
 import { Skeleton } from '../ui/skeleton'
 import { Text } from '../ui/text'
 
@@ -28,10 +29,7 @@ export function WalletStatistics() {
       {isLoading ? (
         <Skeleton className="w-44 h-10" />
       ) : (
-        <Text className="font-semibold text-4xl">
-          {currentBalance?.toLocaleString() || '0.00'}{' '}
-          <Text className="text-muted-foreground font-normal">VND</Text>
-        </Text>
+        <AmountFormat amount={currentBalance} size="xl" displayNegativeSign />
       )}
     </View>
   )

apps/mobile/components/transaction/transaction-item.tsx

@@ -1,11 +1,11 @@
 import { TRANSACTION_ICONS } from '@/lib/icons/category-icons'
-import { cn } from '@/lib/utils'
 import type { TransactionPopulated } from '@6pm/validation'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import { Link } from 'expo-router'
 import { type FC, useMemo } from 'react'
 import { Pressable, View } from 'react-native'
+import { AmountFormat } from '../common/amount-format'
 import GenericIcon from '../common/generic-icon'
 import { Text } from '../ui/text'
 
@@ -52,18 +52,12 @@ export const TransactionItem: FC<TransactionItemProps> = ({ transaction }) => {
             {transactionName}
           </Text>
         </View>
-        <Text
-          className={cn(
-            'font-semibold shrink-0',
-            transaction.amount > 0 && 'text-amount-positive',
-            transaction.amount < 0 && 'text-amount-negative',
-          )}
-        >
-          {Math.abs(transaction.amount).toLocaleString()}{' '}
-          <Text className="text-muted-foreground text-[10px] font-normal">
-            {transaction.currency}
-          </Text>
-        </Text>
+        <AmountFormat
+          amount={transaction.amount}
+          currency={transaction.currency}
+          size="sm"
+          displayPositiveColor
+        />
       </Pressable>
     </Link>
   )

apps/mobile/components/wallet/wallet-account-item.tsx

@@ -3,9 +3,9 @@ import { Link } from 'expo-router'
 import { ChevronRightIcon } from 'lucide-react-native'
 import type { FC } from 'react'
 import { View } from 'react-native'
+import { AmountFormat } from '../common/amount-format'
 import GenericIcon from '../common/generic-icon'
 import { MenuItem } from '../common/menu-item'
-import { Text } from '../ui/text'
 
 type WalletAccountItemProps = {
   data: WalletAccountWithBalance
@@ -32,10 +32,7 @@ export const WalletAccountItem: FC<WalletAccountItemProps> = ({ data }) => {
         )}
         rightSection={
           <View className="flex-row items-center gap-4">
-            <Text className="text-muted-foreground">
-              {Number(data.balance ?? '0')?.toLocaleString?.()}{' '}
-              {data.preferredCurrency}
-            </Text>
+            <AmountFormat amount={data.balance} displayNegativeSign size="sm" />
             <ChevronRightIcon className="w-5 h-5 text-primary" />
           </View>
         }