feat(mobile): exchange rates (#260)

Resolves #209

apps/mobile/app/(app)/(tabs)/index.tsx

@@ -143,6 +143,7 @@ export default function HomeScreen() {
               className="font-semibold text-md text-muted-foreground"
               displayNegativeSign
               displayPositiveSign
+              convertToDefaultCurrency
             />
           </View>
         )}

apps/mobile/app/(app)/budget/[budgetId]/index.tsx

@@ -62,7 +62,7 @@ export default function BudgetDetailScreen() {
     remainingAmount,
     remainingAmountPerDays,
     averageAmountPerDay,
-  } = useBudgetPeriodStats(currentPeriod!)
+  } = useBudgetPeriodStats(currentPeriod!, budget?.preferredCurrency ?? 'VND')
 
   const transactionsGroupByDate = useMemo(() => {
     const groupedByDay = groupBy(transactions, (transaction) =>
@@ -73,7 +73,7 @@ export default function BudgetDetailScreen() {
       key,
       title: formatDateShort(new Date(key)),
       data: orderBy(transactions, 'date', 'desc'),
-      sum: sumBy(transactions, 'amount'),
+      sum: sumBy(transactions, 'amountInVnd'),
     }))
 
     return Object.values(sectionDict)
@@ -261,6 +261,7 @@ export default function BudgetDetailScreen() {
               className="font-semibold text-md text-muted-foreground"
               displayNegativeSign
               displayPositiveSign
+              convertToDefaultCurrency
             />
           </View>
         )}

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

@@ -36,7 +36,7 @@ export const BudgetItem: FC<BudgetItemProps> = ({ budget }) => {
     remainingAmountPerDays,
     remainingDays,
     isExceeded,
-  } = useBudgetPeriodStats(latestPeriodConfig!)
+  } = useBudgetPeriodStats(latestPeriodConfig!, budget.preferredCurrency)
 
   const isDefault = defaultBudgetId === budget.id
 
@@ -91,6 +91,7 @@ export const BudgetItem: FC<BudgetItemProps> = ({ budget }) => {
               amount={remainingAmount?.toNumber() ?? 0}
               displayNegativeSign
               className="text-xl"
+              currency={budget.preferredCurrency}
             />
             <Text
               numberOfLines={1}
@@ -104,6 +105,7 @@ export const BudgetItem: FC<BudgetItemProps> = ({ budget }) => {
               amount={remainingAmountPerDays?.toNumber() ?? 0}
               displayNegativeSign
               className="text-xl"
+              currency={budget.preferredCurrency}
             />
             <Text
               numberOfLines={1}

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

@@ -1,4 +1,5 @@
 import { cn } from '@/lib/utils'
+import { useExchangeRate } from '@/stores/exchange-rates/hooks'
 import { useDefaultCurrency } from '@/stores/user-settings/hooks'
 import { type VariantProps, cva } from 'class-variance-authority'
 import { useMemo } from 'react'
@@ -55,6 +56,19 @@ export function AmountFormat({
   convertToDefaultCurrency,
 }: AmountFormatProps) {
   const defaultCurrency = useDefaultCurrency()
+  const { exchangeRate, isLoading } = useExchangeRate({
+    fromCurrency: currency || 'VND',
+    toCurrency: defaultCurrency,
+  })
+
+  const formatter = new Intl.NumberFormat('en-US', {
+    currency: currency || defaultCurrency,
+    maximumFractionDigits: SHOULD_ROUND_VALUE_CURRENCIES.includes(
+      currency || defaultCurrency,
+    )
+      ? 0
+      : 2,
+  })
 
   const sign = useMemo(() => {
     if (amount < 0) {
@@ -67,34 +81,32 @@ export function AmountFormat({
   }, [amount, displayNegativeSign, displayPositiveSign])
 
   const displayAmount = useMemo(() => {
-    const roundedAmount = SHOULD_ROUND_VALUE_CURRENCIES.includes(
-      currency || defaultCurrency,
-    )
-      ? Math.round(amount)
-      : amount
-
     if (!convertToDefaultCurrency) {
-      return Math.abs(roundedAmount).toLocaleString()
+      return formatter.format(Math.abs(amount))
     }
 
-    // TODO: correct amount with currency exchange rate
-    return Math.abs(roundedAmount).toLocaleString()
-  }, [amount, convertToDefaultCurrency, currency, defaultCurrency])
+    const exchangedAmount = exchangeRate
+      ? Math.abs(amount) * (exchangeRate.rate || 1)
+      : Math.abs(amount)
+
+    return formatter.format(exchangedAmount)
+  }, [amount, convertToDefaultCurrency, exchangeRate, formatter])
 
   return (
     <Text
       className={cn(
         amountVariants({ size }),
+        isLoading && 'opacity-25',
         amount >= 0
-          ? displayPositiveColor
+          ? displayPositiveColor && amount > 0
             ? 'text-amount-positive'
             : 'text-foreground'
           : 'text-amount-negative',
         className,
       )}
     >
       {sign}
-      {displayAmount}{' '}
+      {displayAmount === '0' ? '0.00' : displayAmount}{' '}
       <Text className={cn(currencyVariants({ size }))}>
         {convertToDefaultCurrency
           ? defaultCurrency

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

@@ -123,7 +123,7 @@ export function WalletStatistics({
           //   '!h-10 !px-2.5 flex-row items-center gap-2',
           //   value !== HomeFilter.All && 'border-primary bg-primary',
           // )}
-          className="!border-0 h-auto flex-col items-center gap-3 native:h-auto"
+          className="!border-0 h-auto native:h-auto flex-col items-center gap-3"
         >
           <View className="self-center border-primary border-b">
             <Text className="w-fit self-center text-center leading-tight">
@@ -135,6 +135,7 @@ export function WalletStatistics({
             size="xl"
             displayNegativeSign
             displayPositiveColor
+            convertToDefaultCurrency
           />
         </SelectTrigger>
         <SelectContent sideOffset={6} align="center">

apps/mobile/components/transaction/select-budget-field.tsx

@@ -24,6 +24,7 @@ function BudgetItem({ budgetId }: { budgetId: string }) {
   const latestPeriodConfig = getLatestPeriodConfig(budget?.periodConfigs ?? [])
   const { usagePercentage, isExceeded } = useBudgetPeriodStats(
     latestPeriodConfig!,
+    budget?.preferredCurrency ?? 'VND',
   )
 
   return (

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

@@ -1,8 +1,6 @@
-import { useColorScheme } from '@/hooks/useColorScheme'
-import { theme } from '@/lib/theme'
 import { sleep } from '@/lib/utils'
 import type { TransactionFormValues } from '@6pm/validation'
-import { BottomSheetBackdrop, BottomSheetModal } from '@gorhom/bottom-sheet'
+import type { BottomSheetModal } from '@gorhom/bottom-sheet'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import * as Haptics from 'expo-haptics'
@@ -20,7 +18,7 @@ import Animated, {
   useAnimatedKeyboard,
   useAnimatedStyle,
 } from 'react-native-reanimated'
-import { FullWindowOverlay } from 'react-native-screens'
+import { BottomSheet } from '../common/bottom-sheet'
 import { CurrencySheetList } from '../common/currency-sheet'
 import { DatePicker } from '../common/date-picker'
 import { InputField } from '../form-fields/input-field'
@@ -43,7 +41,6 @@ type TransactionFormProps = {
 }
 
 export function TransactionAmount() {
-  const { colorScheme } = useColorScheme()
   const sheetRef = useRef<BottomSheetModal>(null)
   const [amount] = useWatch({ name: ['amount'] })
   const {
@@ -62,25 +59,7 @@ export function TransactionAmount() {
           sheetRef.current?.present()
         }}
       />
-      <BottomSheetModal
-        ref={sheetRef}
-        index={0}
-        snapPoints={['50%', '87%']}
-        enablePanDownToClose
-        backgroundStyle={{ backgroundColor: theme[colorScheme].background }}
-        keyboardBehavior="extend"
-        backdropComponent={(props) => (
-          <BottomSheetBackdrop
-            {...props}
-            appearsOnIndex={0}
-            disappearsOnIndex={-1}
-            enableTouchThrough
-          />
-        )}
-        containerComponent={(props) => (
-          <FullWindowOverlay>{props.children}</FullWindowOverlay>
-        )}
-      >
+      <BottomSheet ref={sheetRef} index={0} enableDynamicSizing>
         <CurrencySheetList
           value={currency}
           onSelect={async (selected) => {
@@ -89,7 +68,7 @@ export function TransactionAmount() {
             onChange?.(selected.code)
           }}
         />
-      </BottomSheetModal>
+      </BottomSheet>
     </>
   )
 }
@@ -118,9 +97,9 @@ function FormSubmitButton({
 export const TransactionForm = ({
   form,
   onSubmit,
-  onCancel,
+  // onCancel,
   onDelete,
-  onOpenScanner,
+  // onOpenScanner,
   sideOffset,
 }: TransactionFormProps) => {
   const { i18n } = useLingui()

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

@@ -32,7 +32,12 @@ export const WalletAccountItem: FC<WalletAccountItemProps> = ({ data }) => {
         )}
         rightSection={
           <View className="flex-row items-center gap-4">
-            <AmountFormat amount={data.balance} displayNegativeSign size="sm" />
+            <AmountFormat
+              amount={data.balance}
+              displayNegativeSign
+              size="sm"
+              convertToDefaultCurrency
+            />
             <ChevronRightIcon className="h-5 w-5 text-primary" />
           </View>
         }

apps/mobile/stores/budget/hooks.tsx

@@ -15,6 +15,7 @@ import { first, keyBy, orderBy } from 'lodash-es'
 import { useMemo } from 'react'
 import { Alert } from 'react-native'
 import { z } from 'zod'
+import { useExchangeRate } from '../exchange-rates/hooks'
 import { useTransactionList } from '../transaction/hooks'
 import { budgetQueries } from './queries'
 import { type BudgetItem, useBudgetStore } from './store'
@@ -46,6 +47,7 @@ export const useBudgetList = () => {
     )
     const debtBudgets = budgets.filter((budget) => budget.type === 'DEBT')
 
+    // TODO: Correct this with exchange rate
     const totalBudget = budgets.reduce((acc, budget) => {
       const latestPeriodConfig = first(
         orderBy(budget.periodConfigs, 'startDate', 'desc'),
@@ -236,13 +238,22 @@ export function getLatestPeriodConfig(periodConfigs: BudgetPeriodConfig[]) {
   return first(orderBy(periodConfigs, 'startDate', 'desc'))
 }
 
-export function useBudgetPeriodStats(periodConfig: BudgetPeriodConfig) {
+export function useBudgetPeriodStats(
+  periodConfig: BudgetPeriodConfig,
+  currency: string,
+) {
+  const { exchangeRate: exchangeToBudgetCurrency } = useExchangeRate({
+    fromCurrency: 'VND',
+    toCurrency: currency,
+  })
+
+  // in budget currency
   const budgetAmount = useMemo(() => {
     if (periodConfig?.amount instanceof Decimal) {
       return periodConfig?.amount
     }
 
-    return new Decimal(periodConfig?.amount || 0)
+    return new Decimal(periodConfig?.amount ?? 0)
   }, [periodConfig])
 
   const { transactions, totalExpense, totalIncome } = useTransactionList({
@@ -251,7 +262,10 @@ export function useBudgetPeriodStats(periodConfig: BudgetPeriodConfig) {
     budgetId: periodConfig.budgetId,
   })
 
-  const totalBudgetUsage = new Decimal(totalExpense).plus(totalIncome).abs()
+  const totalBudgetUsage = new Decimal(totalExpense)
+    .plus(totalIncome)
+    .abs()
+    .mul(exchangeToBudgetCurrency?.rate ?? 1)
 
   const remainingAmount = budgetAmount.sub(totalBudgetUsage)
 

apps/mobile/stores/exchange-rates/hooks.tsx

@@ -0,0 +1,36 @@
+import { useQuery } from '@tanstack/react-query'
+import { exchangeRatesQueries } from './queries'
+import { useExchangeRatesStore } from './store'
+
+export function useExchangeRate({
+  fromCurrency,
+  toCurrency,
+  date,
+}: {
+  fromCurrency: string
+  toCurrency: string
+  date?: string
+}) {
+  const { exchangeRates, updateExchangeRate } = useExchangeRatesStore()
+
+  const { data, isLoading } = useQuery({
+    ...exchangeRatesQueries.detail({
+      fromCurrency,
+      toCurrency,
+      date,
+      updateExchangeRate,
+    }),
+    initialData: exchangeRates.find(
+      (e) =>
+        e.fromCurrency === fromCurrency &&
+        e.toCurrency === toCurrency &&
+        e.date === date,
+    ),
+    enabled: fromCurrency !== toCurrency,
+  })
+
+  return {
+    exchangeRate: data,
+    isLoading,
+  }
+}

apps/mobile/stores/exchange-rates/queries.ts

@@ -0,0 +1,46 @@
+import { getHonoClient } from '@/lib/client'
+import { createQueryKeys } from '@lukemorales/query-key-factory'
+import type { ExchangeRate } from './store'
+
+export const exchangeRatesQueries = createQueryKeys('exchange-rates', {
+  detail: ({
+    fromCurrency,
+    toCurrency,
+    date,
+    updateExchangeRate,
+  }: {
+    fromCurrency: string
+    toCurrency: string
+    date?: string
+    updateExchangeRate: (exchangeRate: ExchangeRate) => void
+  }) => ({
+    queryKey: [fromCurrency, toCurrency, date],
+    queryFn: async () => {
+      const hc = await getHonoClient()
+      const res = await hc.v1['exchange-rates'][':fromCurrency'][
+        ':toCurrency'
+      ].$get({
+        param: { fromCurrency, toCurrency },
+        query: { date },
+      })
+      if (!res.ok) {
+        throw new Error(await res.text())
+      }
+
+      const result = await res.json()
+      if (result.date) {
+        updateExchangeRate({
+          date: result.date,
+          fromCurrency: result.fromCurrency,
+          toCurrency: result.toCurrency,
+          rate: result.rate,
+          rateDecimal: result.rate.toString(),
+          [result.fromCurrency]: 1,
+          [result.toCurrency]: result.rate,
+        })
+      }
+
+      return result
+    },
+  }),
+})