feat(mobile): allow change currency in transaction form and correct total amount statistic with currency exchange

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

@@ -9,11 +9,7 @@ export function WalletStatistics() {
   const { i18n } = useLingui()
   const { transactions } = useTransactionStore()
 
-  /**
-   * TODO: Calculate correct amount with currency exchange rate
-   * base on the user's preferred currency
-   */
-  const currentBalance = transactions.reduce((acc, t) => acc + t.amount, 0)
+  const currentBalance = transactions.reduce((acc, t) => acc + t.amountInVnd, 0)
 
   return (
     <View className="gap-3">

apps/mobile/components/text-ticker/text-ticker.tsx

@@ -1,6 +1,6 @@
 import { cn } from '@/lib/utils'
 import React, { useState } from 'react'
-import type { TextStyle } from 'react-native'
+import { type TextStyle, TouchableOpacity } from 'react-native'
 import Animated, {
   LinearTransition,
   SlideInDown,
@@ -38,6 +38,7 @@ type TextTickerProps = {
   autoFocus?: boolean
   suffix?: string
   suffixClassName?: string
+  onPressSuffix?: () => void
 }
 
 export function TextTicker({
@@ -47,6 +48,7 @@ export function TextTicker({
   formatter = new Intl.NumberFormat('en-US'),
   suffix,
   suffixClassName,
+  onPressSuffix,
 }: TextTickerProps) {
   const initialFontSize = style?.fontSize ?? 68
   const animationDuration = 300
@@ -115,12 +117,14 @@ export function TextTicker({
             layout={LinearTransition.duration(animationDuration)}
             style={{ marginBottom: fontSize / 6 }}
           >
-            <Animated.Text
-              style={{ fontSize: fontSize / 3 }}
-              className={suffixClassName}
-            >
-              {suffix}
-            </Animated.Text>
+            <TouchableOpacity activeOpacity={0.8} onPress={onPressSuffix}>
+              <Animated.Text
+                style={{ fontSize: fontSize / 3 }}
+                className={suffixClassName}
+              >
+                {suffix}
+              </Animated.Text>
+            </TouchableOpacity>
           </Animated.View>
         )}
       </Animated.View>

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

@@ -1,19 +1,27 @@
+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 { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import * as Haptics from 'expo-haptics'
 import { ScanTextIcon, Trash2Icon, XIcon } from 'lucide-react-native'
+import { useRef } from 'react'
 import {
   Controller,
   FormProvider,
   type UseFormReturn,
+  useController,
   useWatch,
 } from 'react-hook-form'
 import { ScrollView, View } from 'react-native'
 import Animated, {
   useAnimatedKeyboard,
   useAnimatedStyle,
 } from 'react-native-reanimated'
+import { FullWindowOverlay } from 'react-native-screens'
+import { CurrencySheetList } from '../common/currency-sheet'
 import { DatePicker } from '../common/date-picker'
 import { InputField } from '../form-fields/input-field'
 import { SubmitButton } from '../form-fields/submit-button'
@@ -35,14 +43,54 @@ type TransactionFormProps = {
 }
 
 function TransactionAmount() {
-  const [amount, currency] = useWatch({ name: ['amount', 'currency'] })
+  const { colorScheme } = useColorScheme()
+  const sheetRef = useRef<BottomSheetModal>(null)
+  const [amount] = useWatch({ name: ['amount'] })
+  const {
+    field: { onChange, value: currency },
+  } = useController({ name: 'currency' })
+
   return (
-    <TextTicker
-      value={amount}
-      className="text-center font-bold text-6xl text-foreground leading-tight"
-      suffix={currency}
-      suffixClassName="font-bold ml-2 text-muted-foreground overflow-visible"
-    />
+    <>
+      <TextTicker
+        value={amount}
+        className="text-center font-bold text-6xl text-foreground leading-tight"
+        suffix={currency}
+        suffixClassName="font-bold ml-2 text-muted-foreground overflow-visible"
+        onPressSuffix={() => {
+          Haptics.selectionAsync()
+          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>
+        )}
+      >
+        <CurrencySheetList
+          value={currency}
+          onSelect={async (selected) => {
+            sheetRef.current?.close()
+            await sleep(500)
+            onChange?.(selected.code)
+          }}
+        />
+      </BottomSheetModal>
+    </>
   )
 }