Use SDK currency rendering functions (#115)

dguenther · web-flow · commit a38dc9f657f9 · 2025-02-10T17:12:12.000-05:00
diff --git a/packages/mobile-app/app/(tabs)/index.tsx b/packages/mobile-app/app/(tabs)/index.tsx
@@ -24,6 +24,7 @@ import { Asset } from "../../data/facades/chain/types";
 import { useAccount } from "../../providers/AccountProvider";
 import { router } from "expo-router";
 import { SafeAreaView } from "react-native-safe-area-context";
+import { CurrencyUtils } from "@ironfish/sdk";
 
 const MenuIcon = (props: IconProps) => <Icon {...props} name="menu-outline" />;
 const SettingsIcon = (props: IconProps) => (
@@ -177,7 +178,7 @@ export default function Balances() {
             </Layout>
             <Layout style={styles.headerBalance}>
               <Text category="h1" style={styles.balanceAmount}>
-                {account?.balances.iron.confirmed ?? "0.00"}
+                {CurrencyUtils.render(account?.balances.iron.confirmed ?? "0")}
               </Text>
               <Text category="s1" appearance="hint">
                 {getIronAsset.data?.verification.status === "verified"
@@ -258,7 +259,9 @@ export default function Balances() {
                         ? getIronAsset.data.verification.symbol
                         : (getIronAsset.data?.name ?? "IRON")
                     }
-                    amount={account.balances.iron.confirmed}
+                    amount={CurrencyUtils.render(
+                      account.balances.iron.confirmed,
+                    )}
                     verified={
                       getIronAsset.data?.verification.status === "verified"
                     }
@@ -275,7 +278,14 @@ export default function Balances() {
                             ? asset.verification.symbol
                             : (asset?.name ?? balance.assetId)
                         }
-                        amount={balance.confirmed}
+                        amount={CurrencyUtils.render(
+                          balance.confirmed,
+                          false,
+                          balance.assetId,
+                          asset?.verification.status === "verified"
+                            ? asset.verification
+                            : undefined,
+                        )}
                         verified={asset?.verification.status === "verified"}
                       />
                     );
diff --git a/packages/mobile-app/app/account-select/index.tsx b/packages/mobile-app/app/account-select/index.tsx
@@ -3,6 +3,7 @@ import { Button, StyleSheet, Text, View } from "react-native";
 import { useRouter } from "expo-router";
 import { LinkButton } from "../../components/LinkButton";
 import { useFacade } from "../../data/facades";
+import { CurrencyUtils } from "@ironfish/sdk";
 
 export default function AccountSelect() {
   const router = useRouter();
@@ -31,7 +32,9 @@ export default function AccountSelect() {
             title={account.name}
           />
           {account.active && <Text>Active</Text>}
-          <Text>{`${account.balances.iron.confirmed} $IRON`}</Text>
+          <Text>
+            {`${CurrencyUtils.render(account.balances.iron.confirmed)} $IRON`}
+          </Text>
         </View>
       ))}
       <LinkButton title="Add Account" href="/add-account/" />
diff --git a/packages/mobile-app/app/account-settings/index.tsx b/packages/mobile-app/app/account-settings/index.tsx
@@ -11,6 +11,7 @@ import { StyleSheet } from "react-native";
 import { Stack, useLocalSearchParams, useRouter } from "expo-router";
 import { useState } from "react";
 import { useFacade } from "../../data/facades";
+import { CurrencyUtils } from "@ironfish/sdk";
 
 const ForwardIcon = (props: any): IconElement => (
   <Icon {...props} name="arrow-ios-forward" />
@@ -92,8 +93,9 @@ export default function AccountSettings() {
 
   const menuItems = getMenuItems({
     currentAccountName: getAccountResult.data?.name ?? "Unknown",
-    currentAccountBalance:
+    currentAccountBalance: CurrencyUtils.render(
       getAccountResult.data?.balances.iron.confirmed ?? "0",
+    ),
   });
 
   const handleSelect = (index: number) => {
diff --git a/packages/mobile-app/app/send/index.tsx b/packages/mobile-app/app/send/index.tsx
@@ -3,6 +3,10 @@ import { StyleSheet, View, Text, Button, TextInput } from "react-native";
 import { useFacade } from "../../data/facades";
 import { useState } from "react";
 import { IRON_ASSET_ID_HEX } from "../../data/constants";
+import { CurrencyUtils } from "@ironfish/sdk";
+import { useQueries } from "@tanstack/react-query";
+import { Asset } from "@/data/facades/chain/types";
+import { AccountBalance } from "@/data/facades/wallet/types";
 
 const isValidBigInt = (num: string) => {
   if (num.length === 0) return false;
@@ -22,9 +26,9 @@ export default function Send() {
   const [selectedRecipient, setSelectedRecipient] = useState<string>("");
   const [amount, setAmount] = useState<string>("");
   const [customFee, setCustomFee] = useState<string>("");
-  const [selectedFee, setSelectedFee] = useState<
-    "slow" | "average" | "fast" | "custom"
-  >("average");
+  const [selectedFee, setSelectedFee] = useState<"default" | "custom">(
+    "default",
+  );
 
   const getAccountResult = facade.getAccount.useQuery(
     {},
@@ -42,38 +46,44 @@ export default function Send() {
     },
   );
 
-  const estimatedFees = facade.getEstimatedFees.useQuery(
-    {
-      accountName: getAccountResult.data?.name ?? "",
-      outputs: [{ amount, assetId: selectedAssetId }],
-    },
-    {
-      enabled: () => {
-        return !!getAccountResult.data && isValidBigInt(amount);
-      },
-    },
-  );
+  const getCustomAssets = useQueries({
+    queries:
+      getAccountResult.data?.balances.custom.map((b: AccountBalance) => {
+        return {
+          refetchInterval: 1000,
+          queryFn: () => facade.getAsset.resolver({ assetId: b.assetId }),
+          queryKey: facade.getAsset.buildQueryKey({ assetId: b.assetId }),
+        };
+      }) ?? [],
+  });
+
+  const assetMap = new Map<string, Asset>();
+  for (const asset of getCustomAssets) {
+    if (asset.data) {
+      assetMap.set(asset.data.id, asset.data);
+    }
+  }
 
   const sendTransaction = facade.sendTransaction.useMutation();
 
   return (
     <View style={styles.container}>
       {isValidPublicAddress.data === false && <Text>Invalid recipient</Text>}
-      {estimatedFees.isError && (
-        <Text>Error: {estimatedFees.error.message}</Text>
-      )}
       <Text>Select asset</Text>
       <Button
-        title={`IRON (${getAccountResult.data?.balances.iron.available ?? 0}) ${selectedAssetId === IRON_ASSET_ID_HEX ? "(selected)" : ""}`}
+        title={`IRON (${CurrencyUtils.render(getAccountResult.data?.balances.iron.available ?? "0")}) ${selectedAssetId === IRON_ASSET_ID_HEX ? "(selected)" : ""}`}
         onPress={() => setSelectedAssetId(IRON_ASSET_ID_HEX)}
       />
-      {getAccountResult.data?.balances.custom.map((b) => (
-        <Button
-          key={b.assetId}
-          title={`${b.assetId} (${b.confirmed ?? 0}) ${selectedAssetId === b.assetId ? "(selected)" : ""}`}
-          onPress={() => setSelectedAssetId(b.assetId)}
-        />
-      ))}
+      {getAccountResult.data?.balances.custom.map((b) => {
+        const asset = assetMap.get(b.assetId);
+        return (
+          <Button
+            key={b.assetId}
+            title={`${asset?.name} (${CurrencyUtils.render(b.available, false, b.assetId, asset?.verification.status === "verified" ? asset.verification : undefined)}) ${selectedAssetId === b.assetId ? "(selected)" : ""}`}
+            onPress={() => setSelectedAssetId(b.assetId)}
+          />
+        );
+      })}
       <TextInput
         placeholder="Recipient"
         value={selectedRecipient}
@@ -82,16 +92,8 @@ export default function Send() {
       <TextInput placeholder="Amount" value={amount} onChangeText={setAmount} />
       <Text style={{ fontSize: 20 }}>Fees</Text>
       <Button
-        title={`Slow: ${estimatedFees.data?.slow ?? ""}${selectedFee === "slow" ? " (selected)" : ""}`}
-        onPress={() => setSelectedFee("slow")}
-      />
-      <Button
-        title={`Average: ${estimatedFees.data?.average ?? ""}${selectedFee === "average" ? " (selected)" : ""}`}
-        onPress={() => setSelectedFee("average")}
-      />
-      <Button
-        title={`Fast: ${estimatedFees.data?.fast ?? ""}${selectedFee === "fast" ? " (selected)" : ""}`}
-        onPress={() => setSelectedFee("fast")}
+        title={`Default${selectedFee === "default" ? " (selected)" : ""}`}
+        onPress={() => setSelectedFee("default")}
       />
       <TextInput
         placeholder="Custom fee"
@@ -107,7 +109,6 @@ export default function Send() {
         title="Send"
         disabled={
           isValidPublicAddress.data !== true ||
-          !estimatedFees.isSuccess ||
           (selectedFee === "custom" && !isValidBigInt(customFee))
         }
         onPress={() => {
@@ -121,7 +122,7 @@ export default function Send() {
                 assetId: selectedAssetId,
               },
             ],
-            fee: "1",
+            fee: selectedFee === "default" ? undefined : customFee,
           });
         }}
       />
