Browse Source

added money formatter & loading spinner

Ian Fung 1 year ago
parent
commit
b279bd8e30
1 changed files with 17 additions and 3 deletions
  1. 17 3
      component/accountPages/walletPageComponent.tsx

+ 17 - 3
component/accountPages/walletPageComponent.tsx

@@ -3,7 +3,8 @@ import {
     Text,
     ScrollView,
     Pressable,
-    ImageBackground
+    ImageBackground,
+    ActivityIndicator
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { router } from 'expo-router';
@@ -104,6 +105,7 @@ const WalletPageComponent = () => {
     useEffect(() => {
         const fetchWalletBalance = async () => {
             if (token) {
+                await new Promise((resolve) => setTimeout(resolve, 2000));
                 const balance = await walletService.getWalletBalance(token);
                 setWalletBalance(balance);
             }
@@ -111,7 +113,12 @@ const WalletPageComponent = () => {
         fetchWalletBalance();
     }, [token]);
 
-
+    const formatMoney = (amount: any) => {
+        if (typeof amount !== 'number') {
+            amount = Number(amount);
+        }
+        return amount.toLocaleString('en-US');
+    };
 
     return (
         <SafeAreaView
@@ -152,7 +159,14 @@ const WalletPageComponent = () => {
                                         style={{ fontSize: 52 }}
                                         className=" text-white font-bold"
                                     >
-                                        {walletBalance}
+                                        {walletBalance ? (
+                                            formatMoney(walletBalance)
+                                        ) : (
+                                            <View className="items-center">
+                                                <ActivityIndicator />
+                                            </View>
+                                        )}
+                                        {/* Format the wallet balance */}
                                     </Text>
                                     <Pressable
                                         className="rounded-2xl items-center justify-center p-3 px-5 pr-6 "