Import: Enhancement - add import progress messages

gabrielbazan7 · gabrielbazan7 · commit 5d043d5c293e · 2026-04-13T14:32:57.000-03:00
diff --git a/src/components/modal/ongoing-process/OngoingProcess.tsx b/src/components/modal/ongoing-process/OngoingProcess.tsx
@@ -25,50 +25,6 @@ const {height: SCREEN_HEIGHT, width: SCREEN_WIDTH} = Dimensions.get(
   Platform.OS === 'android' ? 'screen' : 'window',
 );
 
-export type OnGoingProcessMessages =
-  | 'GENERAL_AWAITING'
-  | 'CREATING_KEY'
-  | 'LOGGING_IN'
-  | 'LOGGING_OUT'
-  | 'PAIRING'
-  | 'CREATING_ACCOUNT'
-  | 'UPDATING_ACCOUNT'
-  | 'IMPORTING'
-  | 'IMPORT_SCANNING_FUNDS'
-  | 'DELETING_KEY'
-  | 'ADDING_WALLET'
-  | 'ADDING_ACCOUNT'
-  | 'ADDING_EVM_CHAINS'
-  | 'ADDING_SPL_CHAINS'
-  | 'LOADING'
-  | 'FETCHING_PAYMENT_OPTIONS'
-  | 'FETCHING_PAYMENT_INFO'
-  | 'JOIN_WALLET'
-  | 'SENDING_PAYMENT'
-  | 'ACCEPTING_PAYMENT'
-  | 'GENERATING_ADDRESS'
-  | 'GENERATING_GIFT_CARD'
-  | 'SYNCING_WALLETS'
-  | 'REJECTING_CALL_REQUEST'
-  | 'SAVING_LAYOUT'
-  | 'SAVING_ADDRESSES'
-  | 'EXCHANGE_GETTING_DATA'
-  | 'CALCULATING_FEE'
-  | 'CONNECTING_COINBASE'
-  | 'FETCHING_COINBASE_DATA'
-  | 'UPDATING_TXP'
-  | 'CREATING_TXP'
-  | 'SENDING_EMAIL'
-  | 'REDIRECTING'
-  | 'REMOVING_BILL'
-  | 'BROADCASTING_TXP'
-  | 'SWEEPING_WALLET'
-  | 'SCANNING_FUNDS'
-  | 'SCANNING_FUNDS_WITH_PASSPHRASE'
-  | 'CREATING_PASSKEY'
-  | 'DELETING_PASSKEY'
-  | 'WAITING_FOR_MAX_AMOUNT';
-
 const Row = styled.View`
   background-color: ${({theme}) => (theme.dark ? LightBlack : White)};
   border-radius: 10px;
diff --git a/src/contexts/OngoingProcessContext.tsx b/src/contexts/OngoingProcessContext.tsx
@@ -6,6 +6,7 @@ import React, {
   useEffect,
 } from 'react';
 import {
+  OngoingProcessData,
   ongoingProcessManager,
   OnGoingProcessMessages,
   OngoingProcessState,
@@ -15,7 +16,10 @@ import {logManager} from '../managers/LogManager';
 interface OngoingProcessContextType {
   isVisible: boolean;
   message: string | undefined;
-  showOngoingProcess: (key: OnGoingProcessMessages) => void;
+  showOngoingProcess: (
+    key: OnGoingProcessMessages,
+    data?: OngoingProcessData,
+  ) => void;
   hideOngoingProcess: () => void;
 }
 
@@ -65,8 +69,11 @@ export const OngoingProcessProvider: React.FC<{children: ReactNode}> = ({
   const contextValue: OngoingProcessContextType = {
     isVisible: state.isVisible,
     message: state.message,
-    showOngoingProcess: (key: OnGoingProcessMessages) => {
-      ongoingProcessManager.show(key);
+    showOngoingProcess: (
+      key: OnGoingProcessMessages,
+      data?: OngoingProcessData,
+    ) => {
+      ongoingProcessManager.show(key, data);
     },
     hideOngoingProcess: () => {
       ongoingProcessManager.hide();
diff --git a/src/managers/OngoingProcessManager.tsx b/src/managers/OngoingProcessManager.tsx
@@ -1,7 +1,7 @@
 import i18n from 'i18next';
 import {logManager} from './LogManager';
 
-export type OnGoingProcessMessages =
+export type BaseOnGoingProcessMessages =
   | 'GENERAL_AWAITING'
   | 'CREATING_KEY'
   | 'LOGGING_IN'
@@ -45,12 +45,71 @@ export type OnGoingProcessMessages =
   | 'DELETING_PASSKEY'
   | 'WAITING_FOR_MAX_AMOUNT';
 
+export type ImportProgressMessages =
+  | 'keyConfig.count'
+  | 'keyConfig.start'
+  | 'keyConfig.keyCreated'
+  | 'keyConfig.noCopayersFound'
+  | 'chainPermutations.count'
+  | 'chainPermutations.getKey'
+  | 'findingCopayers'
+  | 'foundCopayers'
+  | 'foundCopayers.count'
+  | 'creatingCredentials'
+  | 'gettingStatuses'
+  | 'gatheringWalletsInfos'
+  | 'walletInfo.gatheringTokens'
+  | 'walletInfo.gatheringTokens.error'
+  | 'walletInfo.importingToken'
+  | 'walletInfo.gatheringMultisig'
+  | 'walletInfo.multisig.creatingCredentials'
+  | 'walletInfo.multisig.importingToken';
+
+export type OnGoingProcessMessages =
+  | BaseOnGoingProcessMessages
+  | ImportProgressMessages;
+
 export interface OngoingProcessState {
   isVisible: boolean;
   message: string | undefined;
 }
 
-const translations: Record<OnGoingProcessMessages, () => string> = {
+export type OngoingProcessObjectData = {
+  chain?: string;
+  tokenName?: string;
+  walletName?: string;
+  count?: number;
+  iteration?: number;
+};
+
+export type OngoingProcessData = number | OngoingProcessObjectData | undefined;
+
+const isNumberData = (data: OngoingProcessData): data is number =>
+  typeof data === 'number';
+
+const getChain = (data?: OngoingProcessData): string | undefined =>
+  typeof data === 'object' && data !== null ? data.chain : undefined;
+
+const getTokenName = (data?: OngoingProcessData): string | undefined =>
+  typeof data === 'object' && data !== null ? data.tokenName : undefined;
+
+const getWalletName = (data?: OngoingProcessData): string | undefined =>
+  typeof data === 'object' && data !== null ? data.walletName : undefined;
+
+const getIteration = (data?: OngoingProcessData): number =>
+  typeof data === 'object' && data !== null ? data.iteration ?? 1 : 1;
+
+const getCount = (data?: OngoingProcessData): number =>
+  typeof data === 'object' && data !== null
+    ? data.count ?? 0
+    : isNumberData(data)
+    ? data
+    : 0;
+
+const translations: Record<
+  OnGoingProcessMessages,
+  (data?: OngoingProcessData) => string
+> = {
   GENERAL_AWAITING: () =>
     i18n.t("Just a second, we're setting a few things up"),
   CREATING_KEY: () =>
@@ -97,13 +156,114 @@ const translations: Record<OnGoingProcessMessages, () => string> = {
   CREATING_PASSKEY: () => i18n.t('Creating Passkey...'),
   DELETING_PASSKEY: () => i18n.t('Deleting Passkey...'),
   WAITING_FOR_MAX_AMOUNT: () => i18n.t('Calculating maximum amount...'),
+  'keyConfig.count': data =>
+    i18n.t('Checking {{count}} key configurations...', {
+      count: isNumberData(data) ? data : 0,
+    }),
+  'keyConfig.start': data =>
+    i18n.t('Checking key configuration {{index}}...', {
+      index: isNumberData(data) ? data + 1 : 1,
+    }),
+  'keyConfig.keyCreated': () => i18n.t('Key created, searching for wallets...'),
+  'keyConfig.noCopayersFound': () =>
+    i18n.t('No wallets found for this configuration, trying next...'),
+  'chainPermutations.count': data =>
+    i18n.t('Checking {{count}} chain permutations...', {
+      count: isNumberData(data) ? data : 0,
+    }),
+  'chainPermutations.getKey': data =>
+    i18n.t('Deriving key for chain permutation {{index}}...', {
+      index: isNumberData(data) ? data + 1 : 1,
+    }),
+  findingCopayers: data =>
+    getIteration(data) > 1
+      ? i18n.t('Checking for additional wallets...')
+      : i18n.t('Searching for your wallets...'),
+  foundCopayers: data => {
+    const iteration = getIteration(data);
+    const count = getCount(data);
+    if (iteration > 1 && count === 0) {
+      return i18n.t('No more wallets found...');
+    }
+    if (iteration > 1) {
+      return i18n.t('{{count}} more wallets found! Loading details...', {
+        count,
+      });
+    }
+    if (iteration === 1 && count === 0) {
+      return i18n.t('No wallets found...');
+    }
+    return count === 1
+      ? i18n.t('Found 1 wallet! Loading details...')
+      : i18n.t('Found {{count}} wallets! Loading details...', {count});
+  },
+  'foundCopayers.count': data => {
+    const count = getCount(data);
+    return count === 1
+      ? i18n.t('Found 1 wallet! Loading details...')
+      : i18n.t('Found {{count}} wallets! Loading details...', {count});
+  },
+  creatingCredentials: () => i18n.t('Almost there...'),
+  gettingStatuses: () => i18n.t('Getting wallet info...'),
+  gatheringWalletsInfos: data => {
+    const count = getCount(data);
+    return count === 1
+      ? i18n.t('Loading 1 wallet...')
+      : i18n.t('Loading {{count}} wallets...', {count});
+  },
+  'walletInfo.gatheringTokens': data => {
+    const chain = getChain(data);
+    return i18n.t('Loading {{chain}} tokens...', {chain});
+  },
+  'walletInfo.gatheringTokens.error': () =>
+    i18n.t('Some tokens could not be loaded, continuing...'),
+  'walletInfo.importingToken': data => {
+    const tokenName = getTokenName(data);
+    return i18n.t('Adding {{tokenName}}...', {tokenName});
+  },
+  'walletInfo.gatheringMultisig': data => {
+    const chain = getChain(data);
+    return i18n.t('Loading {{chain}} shared wallets...', {chain});
+  },
+  'walletInfo.multisig.creatingCredentials': data => {
+    const walletName = getWalletName(data);
+    return i18n.t('Setting up {{walletName}}...', {walletName});
+  },
+
+  'walletInfo.multisig.importingToken': data => {
+    const tokenName = getTokenName(data);
+    return i18n.t('Adding {{tokenName}}...', {tokenName});
+  },
 };
 
+export const importProgressEvents: ImportProgressMessages[] = [
+  'keyConfig.count',
+  'keyConfig.start',
+  'keyConfig.keyCreated',
+  'keyConfig.noCopayersFound',
+  'chainPermutations.count',
+  'chainPermutations.getKey',
+  'findingCopayers',
+  'foundCopayers',
+  'foundCopayers.count',
+  'creatingCredentials',
+  'gettingStatuses',
+  'gatheringWalletsInfos',
+  'walletInfo.gatheringTokens',
+  'walletInfo.gatheringTokens.error',
+  'walletInfo.importingToken',
+  'walletInfo.gatheringMultisig',
+  'walletInfo.multisig.creatingCredentials',
+  'walletInfo.multisig.importingToken',
+];
+
 const LONG_RUNNING_PROCESSES: OnGoingProcessMessages[] = [
   'IMPORTING',
   'IMPORT_SCANNING_FUNDS',
   'SCANNING_FUNDS_WITH_PASSPHRASE',
   'CREATING_KEY',
+  'SYNCING_WALLETS',
+  ...importProgressEvents,
 ];
 
 class OngoingProcessManager {
@@ -124,23 +284,21 @@ class OngoingProcessManager {
     return OngoingProcessManager.instance;
   }
 
-  /**
-   * Obtiene el estado actual
-   */
   getState(): OngoingProcessState {
     return {
       isVisible: this.state.isVisible,
       message: this.state.message,
     };
   }
 
-  show(key: OnGoingProcessMessages): void {
+  show(key: OnGoingProcessMessages, data?: OngoingProcessData): void {
     if (this.timeoutRef) {
       clearTimeout(this.timeoutRef);
       this.timeoutRef = null;
     }
 
-    const translatedMessage = translations[key]();
+    const translatedMessage = translations[key]?.(data) ?? i18n.t('Loading');
+
     this.state = {
       isVisible: true,
       message: translatedMessage,
diff --git a/src/navigation/wallet/components/FileOrText.tsx b/src/navigation/wallet/components/FileOrText.tsx
@@ -1,6 +1,6 @@
 import React, {useEffect, useRef, useState} from 'react';
 import {ScreenGutter} from '../../../components/styled/Containers';
-import Button from '../../../components/button/Button';
+import Button, {ButtonState} from '../../../components/button/Button';
 import BoxInput, {INPUT_HEIGHT} from '../../../components/form/BoxInput';
 import styled, {css} from 'styled-components/native';
 import {yupResolver} from '@hookform/resolvers/yup';
@@ -239,6 +239,7 @@ const FileOrText = () => {
   const plainTextRef = useRef<TextInput>(null);
   const {clearSensitive} = useSensitiveRefClear([plainTextRef]);
 
+  const [importButtonState, setImportButtonState] = useState<ButtonState>();
   const [uploadedFileName, setUploadedFileName] = useState<string>('');
   const [isFromClipboard, setIsFromClipboard] = useState(false);
   const [fileFocused, setFileFocused] = useState(false);
@@ -255,6 +256,7 @@ const FileOrText = () => {
     opts: Partial<KeyOptions>,
   ) => {
     try {
+      setImportButtonState('loading');
       showOngoingProcess('IMPORTING');
       await sleep(1000);
       // @ts-ignore
@@ -282,6 +284,11 @@ const FileOrText = () => {
 
       dispatch(setHomeCarouselConfig({id: key.id, show: true}));
 
+      setImportButtonState('success');
+      await sleep(500);
+      setImportButtonState(undefined);
+      hideOngoingProcess();
+
       backupRedirect({
         context: route.params?.context,
         navigation,
@@ -296,10 +303,12 @@ const FileOrText = () => {
         }),
       );
 
-      hideOngoingProcess();
     } catch (err: any) {
       const errMsg = err instanceof Error ? err.message : JSON.stringify(err);
       logger.error(errMsg);
+      setImportButtonState('failed');
+      await sleep(500);
+      setImportButtonState(undefined);
       hideOngoingProcess();
       await sleep(1000);
       showErrorModal(errMsg);
@@ -618,6 +627,7 @@ const FileOrText = () => {
           testID="import-wallet-button"
           accessibilityLabel="Import wallet"
           buttonStyle={'primary'}
+          state={importButtonState}
           onPress={onSubmit}>
           {t('Import Wallet')}
         </Button>
diff --git a/src/navigation/wallet/components/RecoveryPhrase.tsx b/src/navigation/wallet/components/RecoveryPhrase.tsx
diff --git a/src/store/wallet/effects/import/import.ts b/src/store/wallet/effects/import/import.ts
