FIX: ExportMultisigCoordinationSetup modal would take too long to be presented

navigation/DetailViewScreensStack.tsx

@@ -32,7 +32,6 @@ import WalletsList from '../screen/wallets/WalletsList';
 import { NavigationDefaultOptions, NavigationFormModalOptions, StatusBarLightOptions, DetailViewStack } from './index'; // Importing the navigator
 import AddWalletStack from './AddWalletStack';
 import AztecoRedeemStackRoot from './AztecoRedeemStack';
-import ExportMultisigCoordinationSetupStackRoot from './ExportMultisigCoordinationSetupStack';
 import {
   AboutComponent,
   CurrencyComponent,
@@ -66,6 +65,7 @@ import WalletExportStack from './WalletExportStack';
 import WalletXpubStackRoot from './WalletXpubStack';
 import PlusIcon from '../components/icons/PlusIcon';
 import SettingsButton from '../components/icons/SettingsButton';
+import ExportMultisigCoordinationSetupStack from './ExportMultisigCoordinationSetupStack';
 
 const DetailViewStackScreensStack = () => {
   const theme = useTheme();
@@ -263,7 +263,7 @@ const DetailViewStackScreensStack = () => {
       />
       <DetailViewStack.Screen
         name="ExportMultisigCoordinationSetupRoot"
-        component={ExportMultisigCoordinationSetupStackRoot}
+        component={ExportMultisigCoordinationSetupStack}
         options={NavigationDefaultOptions}
       />
       <DetailViewStack.Screen

navigation/ExportMultisigCoordinationSetupStack.tsx

@@ -1,22 +1,27 @@
 import React from 'react';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import navigationStyle, { CloseButtonPosition } from '../components/navigationStyle';
+import navigationStyle from '../components/navigationStyle';
 import { useTheme } from '../components/themes';
 import loc from '../loc';
 import { ExportMultisigCoordinationSetupComponent } from './LazyLoadExportMultisigCoordinationSetupStack';
 
-const Stack = createNativeStackNavigator();
+export type ExportMultisigCoordinationSetupStackRootParamList = {
+  ExportMultisigCoordinationSetup: {
+    walletID: string;
+  };
+};
 
-const ExportMultisigCoordinationSetupStackRoot = () => {
+const Stack = createNativeStackNavigator<ExportMultisigCoordinationSetupStackRootParamList>();
+
+const ExportMultisigCoordinationSetupStack = () => {
   const theme = useTheme();
 
   return (
-    <Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
+    <Stack.Navigator initialRouteName="ExportMultisigCoordinationSetup">
       <Stack.Screen
         name="ExportMultisigCoordinationSetup"
         component={ExportMultisigCoordinationSetupComponent}
         options={navigationStyle({
-          closeButtonPosition: CloseButtonPosition.Right,
           headerBackVisible: false,
           statusBarStyle: 'light',
           title: loc.multisig.export_coordination_setup,
@@ -26,4 +31,4 @@ const ExportMultisigCoordinationSetupStackRoot = () => {
   );
 };
 
-export default ExportMultisigCoordinationSetupStackRoot;
+export default ExportMultisigCoordinationSetupStack;

screen/wallets/ExportMultisigCoordinationSetup.tsx

@@ -1,6 +1,6 @@
-import { RouteProp, useFocusEffect, useRoute } from '@react-navigation/native';
+import { RouteProp, useFocusEffect, useNavigation, useRoute } from '@react-navigation/native';
 import React, { useCallback, useMemo, useReducer, useRef } from 'react';
-import { ActivityIndicator, InteractionManager, ScrollView, StyleSheet, View } from 'react-native';
+import { ActivityIndicator, InteractionManager, ScrollView, StyleSheet, TextInput, View } from 'react-native';
 import { BlueSpacing20, BlueText } from '../../BlueComponents';
 import { TWallet } from '../../class/wallets/types';
 import { DynamicQRCode } from '../../components/DynamicQRCode';
@@ -10,32 +10,33 @@ import { useTheme } from '../../components/themes';
 import usePrivacy from '../../hooks/usePrivacy';
 import loc from '../../loc';
 import { useStorage } from '../../hooks/context/useStorage';
-
-type RootStackParamList = {
-  ExportMultisigCoordinationSetup: {
-    walletID: string;
-  };
-};
+import { ExportMultisigCoordinationSetupStackRootParamList } from '../../navigation/ExportMultisigCoordinationSetupStack';
 
 const enum ActionType {
   SET_LOADING = 'SET_LOADING',
   SET_SHARE_BUTTON_TAPPED = 'SET_SHARE_BUTTON_TAPPED',
   SET_ERROR = 'SET_ERROR',
   SET_QR_CODE_CONTENTS = 'SET_QR_CODE_CONTENTS',
+  SET_XPUB = 'SET_XPUB',
+  SET_CLOSE_BUTTON_STATE = 'SET_CLOSE_BUTTON_STATE',
 }
 
 type State = {
   isLoading: boolean;
   isShareButtonTapped: boolean;
   qrCodeContents?: string;
+  xpub?: string;
   error: string | null;
+  closeButtonState: boolean;
 };
 
 type Action =
   | { type: ActionType.SET_LOADING; isLoading: boolean }
   | { type: ActionType.SET_SHARE_BUTTON_TAPPED; isShareButtonTapped: boolean }
   | { type: ActionType.SET_ERROR; error: string | null }
-  | { type: ActionType.SET_QR_CODE_CONTENTS; qrCodeContents: string };
+  | { type: ActionType.SET_QR_CODE_CONTENTS; qrCodeContents: string }
+  | { type: ActionType.SET_XPUB; xpub: string }
+  | { type: ActionType.SET_CLOSE_BUTTON_STATE; closeButtonState: boolean };
 
 function reducer(state: State, action: Action): State {
   switch (action.type) {
@@ -44,9 +45,13 @@ function reducer(state: State, action: Action): State {
     case ActionType.SET_SHARE_BUTTON_TAPPED:
       return { ...state, isShareButtonTapped: action.isShareButtonTapped };
     case ActionType.SET_ERROR:
-      return { ...state, error: action.error, isLoading: false };
+      return { ...state, error: action.error, isLoading: false, closeButtonState: true };
     case ActionType.SET_QR_CODE_CONTENTS:
-      return { ...state, qrCodeContents: action.qrCodeContents, isLoading: false };
+      return { ...state, qrCodeContents: action.qrCodeContents, isLoading: false, closeButtonState: true };
+    case ActionType.SET_XPUB:
+      return { ...state, xpub: action.xpub, isLoading: false };
+    case ActionType.SET_CLOSE_BUTTON_STATE:
+      return { ...state, closeButtonState: action.closeButtonState };
     default:
       return state;
   }
@@ -56,19 +61,22 @@ const initialState: State = {
   isLoading: true,
   isShareButtonTapped: false,
   qrCodeContents: undefined,
+  xpub: undefined,
   error: null,
+  closeButtonState: false,
 };
 
 const ExportMultisigCoordinationSetup: React.FC = () => {
   const [state, dispatch] = useReducer(reducer, initialState);
-  const { isLoading, isShareButtonTapped, qrCodeContents } = state;
-  const { params } = useRoute<RouteProp<RootStackParamList, 'ExportMultisigCoordinationSetup'>>();
+  const { isLoading, isShareButtonTapped, qrCodeContents, xpub, closeButtonState } = state;
+  const { params } = useRoute<RouteProp<ExportMultisigCoordinationSetupStackRootParamList, 'ExportMultisigCoordinationSetup'>>();
   const walletID = params.walletID;
   const { wallets } = useStorage();
   const wallet: TWallet | undefined = wallets.find(w => w.getID() === walletID);
   const dynamicQRCode = useRef<any>();
   const { colors } = useTheme();
   const { enableBlur, disableBlur } = usePrivacy();
+  const navigation = useNavigation();
   const stylesHook = StyleSheet.create({
     scrollViewContent: {
       backgroundColor: colors.elevated,
@@ -81,7 +89,6 @@ const ExportMultisigCoordinationSetup: React.FC = () => {
   });
 
   const label = useMemo(() => wallet?.getLabel(), [wallet]);
-  const xpub = useMemo(() => wallet?.getXpub(), [wallet]);
 
   const setIsShareButtonTapped = (value: boolean) => {
     dispatch({ type: ActionType.SET_SHARE_BUTTON_TAPPED, isShareButtonTapped: value });
@@ -91,22 +98,28 @@ const ExportMultisigCoordinationSetup: React.FC = () => {
     useCallback(() => {
       dispatch({ type: ActionType.SET_LOADING, isLoading: true });
 
-      const task = InteractionManager.runAfterInteractions(async () => {
+      const task = InteractionManager.runAfterInteractions(() => {
         enableBlur();
         if (wallet) {
-          try {
-            if (typeof xpub === 'string') {
-              const value = Buffer.from(xpub, 'ascii').toString('hex');
-              dispatch({ type: ActionType.SET_QR_CODE_CONTENTS, qrCodeContents: value });
-            } else {
-              throw new Error('Expected getXpub() to return a string.');
+          setTimeout(async () => {
+            try {
+              const walletXpub = await wallet.getXpub();
+              if (walletXpub) {
+                const value = Buffer.from(walletXpub, 'ascii').toString('hex');
+                dispatch({ type: ActionType.SET_XPUB, xpub: walletXpub });
+                dispatch({ type: ActionType.SET_QR_CODE_CONTENTS, qrCodeContents: value });
+              } else {
+                dispatch({ type: ActionType.SET_ERROR, error: 'xpub not found' });
+              }
+            } catch (error) {
+              const errorMessage = error instanceof Error ? error.message : 'An unknown error occurred';
+              dispatch({ type: ActionType.SET_ERROR, error: errorMessage });
             }
-          } catch (error) {
-            const errorMessage = error instanceof Error ? error.message : 'An unknown error occurred';
-            dispatch({ type: ActionType.SET_ERROR, error: errorMessage });
-          }
+            dispatch({ type: ActionType.SET_CLOSE_BUTTON_STATE, closeButtonState: true });
+          }, 0);
         } else {
           dispatch({ type: ActionType.SET_ERROR, error: 'Wallet not found' });
+          dispatch({ type: ActionType.SET_CLOSE_BUTTON_STATE, closeButtonState: true });
         }
       });
 
@@ -118,6 +131,14 @@ const ExportMultisigCoordinationSetup: React.FC = () => {
     }, [walletID]),
   );
 
+  useFocusEffect(
+    useCallback(() => {
+      if (closeButtonState) {
+        navigation.setOptions({ closeButtonState: 'Enabled' });
+      }
+    }, [closeButtonState, navigation]),
+  );
+
   const exportTxtFileBeforeOnPress = async () => {
     setIsShareButtonTapped(true);
     dynamicQRCode.current?.stopAutoMove();
@@ -131,7 +152,7 @@ const ExportMultisigCoordinationSetup: React.FC = () => {
   const renderView = wallet ? (
     <>
       <View>
-        <BlueText style={[styles.type, stylesHook.type]}>{wallet.getLabel()}</BlueText>
+        <BlueText style={[styles.type, stylesHook.type]}>{label}</BlueText>
       </View>
       <BlueSpacing20 />
       {qrCodeContents && <DynamicQRCode value={qrCodeContents} ref={dynamicQRCode} />}
@@ -154,14 +175,17 @@ const ExportMultisigCoordinationSetup: React.FC = () => {
       )}
 
       <BlueSpacing20 />
-      <BlueText style={[styles.secret, stylesHook.secret]}>{wallet.getXpub()}</BlueText>
+      <TextInput multiline editable={false} style={[styles.secret, stylesHook.secret]}>
+        {xpub}
+      </TextInput>
     </>
   ) : null;
 
   return (
     <ScrollView
+      style={stylesHook.scrollViewContent}
       contentContainerStyle={[styles.scrollViewContent, stylesHook.scrollViewContent]}
-      centerContent={isLoading}
+      centerContent
       automaticallyAdjustContentInsets
       contentInsetAdjustmentBehavior="automatic"
     >
@@ -172,9 +196,8 @@ const ExportMultisigCoordinationSetup: React.FC = () => {
 
 const styles = StyleSheet.create({
   scrollViewContent: {
-    alignItems: 'center',
     justifyContent: 'center',
-    flexGrow: 1,
+    alignItems: 'center',
   },
   type: {
     fontSize: 17,
@@ -189,7 +212,6 @@ const styles = StyleSheet.create({
   exportButton: {
     height: 48,
     borderRadius: 8,
-    flex: 1,
     justifyContent: 'center',
     paddingHorizontal: 16,
     width: '80%',

screen/wallets/details.js

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useRoute } from '@react-navigation/native';
 import {
   ActivityIndicator,
   Alert,
@@ -48,6 +47,7 @@ import { BitcoinUnit, Chain } from '../../models/bitcoinUnits';
 import { useSettings } from '../../hooks/context/useSettings';
 import { useStorage } from '../../hooks/context/useStorage';
 import { popToTop } from '../../NavigationService';
+import { useRoute } from '@react-navigation/native';
 
 const styles = StyleSheet.create({
   scrollViewContent: {
@@ -252,7 +252,7 @@ const WalletDetails = () => {
     navigate('WalletExportRoot', {
       screen: 'WalletExport',
       params: {
-        walletID: wallet.getID(),
+        walletID,
       },
     });
   };
@@ -260,7 +260,7 @@ const WalletDetails = () => {
     navigate('ExportMultisigCoordinationSetupRoot', {
       screen: 'ExportMultisigCoordinationSetup',
       params: {
-        walletID: wallet.getID(),
+        walletID,
       },
     });
   };
@@ -283,7 +283,7 @@ const WalletDetails = () => {
     navigate('SignVerifyRoot', {
       screen: 'SignVerify',
       params: {
-        walletID: wallet.getID(),
+        walletID,
         address: wallet.getAllExternalAddresses()[0], // works for both single address and HD wallets
       },
     });
@@ -295,7 +295,7 @@ const WalletDetails = () => {
 
   const navigateToAddresses = () =>
     navigate('WalletAddresses', {
-      walletID: wallet.getID(),
+      walletID,
     });
 
   const navigateToContacts = () => navigate('PaymentCodeList', { walletID });