Style the bridge transaction confirmation (#145)

Author: dguenther

README.md

@@ -45,6 +45,8 @@ Targets can be defined in the `package.json` or `projects.json`. Learn more [in
 
 ### New Build
 
+- Update the Version and Build numbers in `app.json`. If you're pushing an update, you'll probably just want to increment the build.
+
 ```shell
 nx prebuild mobile-app -- --platform ios
 nx cargo-ios ironfish-native-module -- --target='ios'
@@ -61,7 +63,8 @@ open .
 - Double Click "mobileapp"
 - Signing & Capabilities tab
 - Under signing select "IF Labs" for team (must be added to team in App Store Connect, ask Derek)
-- Bundle identifier should be prepopulated but should read "com.ironfish.mobileapp"
+- Bundle identifier should be prepopulated but should read "network.ironfish.mobilewallet"
+- Double-check Version and Build numbers match those in `app.json`.
 - In the scheme bar (top center of editor), select Any iOS Device (arm64)
 - Mac menu bar - click Product -> Archive, wait for build (might take a minute or two)
 - Click Distribute App button in popup

packages/mobile-app/app.json

@@ -16,6 +16,8 @@
     "ios": {
       "icon": "./assets/icon.png",
       "bundleIdentifier": "network.ironfish.mobilewallet",
+      "appleTeamId": "9WR79D873L",
+      "buildNumber": "2",
       "infoPlist": {
         "NSAppTransportSecurity": {
           "NSAllowsArbitraryLoads": false,

packages/mobile-app/app/(drawer)/account/bridge/index.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, View } from "react-native";
 import { Button, Card, Layout, Text } from "@ui-kitten/components";
 import { oreoWallet } from "@/data/wallet/oreowalletWallet";
 import { Network } from "@/data/constants";
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import * as Uint8ArrayUtils from "@/utils/uint8Array";
 import { useFacade } from "@/data/facades";
 import { Output } from "@/data/facades/wallet/types";
@@ -219,15 +219,13 @@ export default function MenuDebugBrowser() {
     },
   );
 
-  const handlePresentModalPress = useCallback(() => {
-    bottomSheetModalRef.current?.present();
-    setAccountModalVisible(true);
-  }, []);
-
-  const handleDismissModalPress = useCallback(() => {
-    bottomSheetModalRef.current?.dismiss();
-    setAccountModalVisible(false);
-  }, []);
+  useEffect(() => {
+    if (accountModalVisible) {
+      bottomSheetModalRef.current?.present();
+    } else {
+      bottomSheetModalRef.current?.dismiss();
+    }
+  }, [accountModalVisible]);
 
   const renderBackdrop = useCallback(
     (props: any) => (
@@ -379,7 +377,10 @@ export default function MenuDebugBrowser() {
             enablePanDownToClose
             backdropComponent={renderBackdrop}
             onDismiss={() => {
-              messageHandler.current.updateActiveAccount(null);
+              if (messageHandler.current.connectRequest) {
+                messageHandler.current.connectRequest.resolve(null);
+                messageHandler.current.connectRequest = null;
+              }
               setAccountModalVisible(false);
             }}
             backgroundStyle={styles.bottomSheetModal}
@@ -391,7 +392,7 @@ export default function MenuDebugBrowser() {
                   style={{ width: 48, height: 48 }}
                 />
                 <Layout style={{ gap: 2 }}>
-                  <Text category="h5">Iron Fish Bridge</Text>
+                  <Text category="h5">Connect Account</Text>
                   <Text category="s2" appearance="hint">
                     {network}
                   </Text>
@@ -412,34 +413,36 @@ export default function MenuDebugBrowser() {
               >
                 <Button
                   onPress={() => {
+                    messageHandler.current.updateActiveAccount(null);
+                    setAccountModalVisible(false);
+                  }}
+                  style={{ flex: 1 }}
+                  appearance="outline"
+                >
+                  Cancel
+                </Button>
+                <Button
+                  onPress={async () => {
                     if (!account.data) {
                       console.error("No account loaded");
                       return;
                     }
-                    messageHandler.current.updateActiveAccount({
+                    await messageHandler.current.updateActiveAccount({
                       name: account.data.name,
                       address: account.data.publicAddress,
                     });
-                    handleDismissModalPress();
+                    setAccountModalVisible(false);
                   }}
                   style={{ flex: 1 }}
                 >
                   Confirm
                 </Button>
-                <Button
-                  onPress={() => {
-                    messageHandler.current.updateActiveAccount(null);
-                    handleDismissModalPress();
-                  }}
-                  style={{ flex: 1 }}
-                  appearance="outline"
-                >
-                  Cancel
-                </Button>
               </Layout>
             </BottomSheetView>
           </BottomSheetModal>
           <SendTransactionModal
+            network={network}
+            renderBackdrop={renderBackdrop}
             sendTransactionData={sendTransactionData}
             cancel={() => {
               messageHandler.current.rejectSendTransactionRequest();
@@ -457,7 +460,7 @@ export default function MenuDebugBrowser() {
             onMessage={(event) => {
               messageHandler.current.handleMessage(
                 event.nativeEvent.data,
-                handlePresentModalPress,
+                () => setAccountModalVisible(true),
                 (data) => {
                   setSendTransactionData(data);
                 },

packages/mobile-app/app/(drawer)/account/transaction/[hash].tsx

@@ -65,6 +65,16 @@ export default function TransactionDetails() {
     },
   );
 
+  const explorer = facade.getExplorerUrl.useQuery(
+    {
+      type: "transaction",
+      hash: hash,
+    },
+    {
+      enabled: !!hash,
+    },
+  );
+
   // Get assets for all balance deltas
   const assetQueries = useQueries({
     queries:
@@ -76,7 +86,8 @@ export default function TransactionDetails() {
   });
 
   const openInExplorer = () => {
-    Linking.openURL(`https://explorer.ironfish.network/transaction/${hash}`);
+    if (!explorer.data) return;
+    Linking.openURL(explorer.data);
   };
 
   if (transactionQuery.isLoading || assetQueries.some((q) => q.isLoading)) {