merge main

Author: cgjohn

package-lock.json

@@ -10,8 +10,10 @@ import {
   Icon,
   IconProps,
   Spinner,
+  Modal,
 } from "@ui-kitten/components";
 import { StyleSheet } from "react-native";
+import { setStringAsync } from "expo-clipboard";
 import Animated, {
   useAnimatedScrollHandler,
   useSharedValue,
@@ -22,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) => (
@@ -48,11 +51,18 @@ export default function Balances() {
   const { account, accountName, isLoading } = useAccount();
   const scrollYOffset = useSharedValue(0);
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const [addressModalVisible, setAddressModalVisible] = useState(false);
 
   const scrollHandler = useAnimatedScrollHandler((event) => {
     scrollYOffset.value = event.contentOffset.y;
   });
 
+  const copyAddressToClipboard = async () => {
+    if (account) {
+      await setStringAsync(account.publicAddress);
+    }
+  };
+
   const getTransactionsResult = facade.getTransactions.useQuery(
     { accountName },
     {
@@ -96,7 +106,7 @@ export default function Balances() {
     },
   );
 
-  if (isLoading) {
+  if (isLoading || !account) {
     return (
       <SafeAreaView>
         <Layout style={[styles.container, styles.loadingContainer]}>
@@ -115,6 +125,30 @@ export default function Balances() {
 
   return (
     <SafeAreaView>
+      <Modal
+        visible={addressModalVisible}
+        backdropStyle={styles.backdrop}
+        onBackdropPress={() => setAddressModalVisible(false)}
+      >
+        <Card disabled style={styles.modalCard}>
+          <Text category="h6" style={styles.modalTitle}>
+            Your Iron Fish Address
+          </Text>
+          <Text selectable style={styles.address}>
+            {account.publicAddress}
+          </Text>
+          <Button onPress={copyAddressToClipboard} style={{ marginBottom: 8 }}>
+            Copy Address
+          </Button>
+          <Button
+            appearance="ghost"
+            onPress={() => setAddressModalVisible(false)}
+          >
+            Close
+          </Button>
+        </Card>
+      </Modal>
+
       <Animated.ScrollView
         scrollEventThrottle={16}
         onScroll={scrollHandler}
@@ -144,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"
@@ -157,7 +191,7 @@ export default function Balances() {
                   appearance="ghost"
                   accessoryLeft={ReceiveIcon}
                   style={styles.actionButton}
-                  onPress={() => router.push("/address/")}
+                  onPress={() => setAddressModalVisible(true)}
                 >
                   Receive
                 </Button>
@@ -173,6 +207,7 @@ export default function Balances() {
                   appearance="ghost"
                   accessoryLeft={BridgeIcon}
                   style={styles.actionButton}
+                  onPress={() => router.push("/menu/debug/browser")}
                 >
                   Bridge
                 </Button>
@@ -224,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"
                     }
@@ -241,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"}
                       />
                     );
@@ -401,4 +445,21 @@ const styles = StyleSheet.create({
   transactionCard: {
     marginVertical: 4,
   },
+  backdrop: {
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+  },
+  modalCard: {
+    margin: 16,
+    paddingHorizontal: 16,
+    paddingTop: 16,
+  },
+  modalTitle: {
+    textAlign: "center",
+    marginBottom: 16,
+  },
+  address: {
+    textAlign: "center",
+    marginBottom: 16,
+    fontSize: 30,
+  },
 });

packages/mobile-app/app/(tabs)/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/" />

packages/mobile-app/app/account-select/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" />
@@ -25,10 +26,6 @@ const ACCOUNT_SETTINGS_ROUTES = {
     title: "Account Name",
     href: "account-settings/account-name",
   },
-  address: {
-    title: "Address",
-    href: "address",
-  },
   exportAccount: {
     title: "Export Account",
     href: "account-settings/export-account",
@@ -96,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) => {