Receive button displays address as modal (#112)

* Receive button displays address as modal

* Bump up font size

Author: dgca

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,
@@ -48,11 +50,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 +105,7 @@ export default function Balances() {
     },
   );
 
-  if (isLoading) {
+  if (isLoading || !account) {
     return (
       <SafeAreaView>
         <Layout style={[styles.container, styles.loadingContainer]}>
@@ -115,6 +124,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}
@@ -157,7 +190,7 @@ export default function Balances() {
                   appearance="ghost"
                   accessoryLeft={ReceiveIcon}
                   style={styles.actionButton}
-                  onPress={() => router.push("/address/")}
+                  onPress={() => setAddressModalVisible(true)}
                 >
                   Receive
                 </Button>
@@ -401,4 +434,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

@@ -25,10 +25,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",

packages/mobile-app/app/account-settings/index.tsx

@@ -42,7 +42,8 @@
     "react-native-screens": "~4.4.0",
     "react-native-svg": "9.13.6",
     "react-native-webview": "13.13.2",
-    "zod": "^3.22.4"
+    "zod": "^3.22.4",
+    "expo-clipboard": "~7.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

packages/mobile-app/app/address/index.tsx

@@ -3,23 +3,7 @@ import { useRouter, useSegments } from "expo-router";
 import { useFacade } from "../data/facades";
 import { ActivityIndicator, SafeAreaView, Text } from "react-native";
 import { StyleSheet } from "react-native";
-
-interface Balance {
-  assetId: string;
-  confirmed: string;
-  available: string;
-}
-
-interface Account {
-  name: string;
-  balances: {
-    iron: Balance;
-    custom: Balance[];
-  };
-  head?: {
-    sequence: number;
-  };
-}
+import { Account } from "../data/facades/wallet/types";
 
 interface AccountContextType {
   isLoading: boolean;