fix(wallet-setup): Preparing wallet state (#3217)

Emurgo · Apr 24, 2024 · 998bd9f · 998bd9f
1 parent a8cd63d
commit 998bd9f
Show file tree

Hide file tree

Showing 13 changed files with 437 additions and 354 deletions.
diff --git a/...wallet-mobile/src/features/SetupWallet/common/PreparingWallet/PreparingWallet.stories.tsx b/...wallet-mobile/src/features/SetupWallet/common/PreparingWallet/PreparingWallet.stories.tsx
@@ -0,0 +1,16 @@
+import {storiesOf} from '@storybook/react-native'
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+
+import {PreparingWallet} from './PreparingWallet'
+
+storiesOf('AddWallet PreparingWallet', module)
+  .addDecorator((story) => <View style={styles.container}>{story()}</View>)
+  .add('initial', () => <PreparingWallet />)
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+  },
+})
diff --git a/apps/wallet-mobile/src/features/SetupWallet/common/PreparingWallet/PreparingWallet.tsx b/apps/wallet-mobile/src/features/SetupWallet/common/PreparingWallet/PreparingWallet.tsx
@@ -0,0 +1,34 @@
+import {useTheme} from '@yoroi/theme'
+import * as React from 'react'
+import {StyleSheet, Text, View} from 'react-native'
+
+import {useStrings} from '../useStrings'
+
+export const PreparingWallet = () => {
+  const strings = useStrings()
+  const {styles} = useStyles()
+
+  return (
+    <View style={styles.root}>
+      <Text style={styles.title}>{strings.preparingWallet}</Text>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const {theme} = useTheme()
+  const styles = StyleSheet.create({
+    root: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    title: {
+      color: theme.color.primary[500],
+      textAlign: 'center',
+      ...theme.typography['heading-2-medium'],
+    },
+  })
+
+  return {styles} as const
+}
diff --git a/.../features/SetupWallet/common/contants.tsx → ...features/SetupWallet/common/constants.tsx b/.../features/SetupWallet/common/contants.tsx → ...features/SetupWallet/common/constants.tsx
diff --git a/apps/wallet-mobile/src/features/SetupWallet/common/useStrings.tsx b/apps/wallet-mobile/src/features/SetupWallet/common/useStrings.tsx
@@ -99,6 +99,7 @@ export const useStrings = () => {
     restoreDuplicatedWalletModalTitle: intl.formatMessage(messages.restoreDuplicatedWalletModalTitle),
     restoreDuplicatedWalletModalText: intl.formatMessage(messages.restoreDuplicatedWalletModalText),
     restoreDuplicatedWalletModalButton: intl.formatMessage(messages.restoreDuplicatedWalletModalButton),
+    preparingWallet: intl.formatMessage(messages.preparingWallet),
   }).current
 }
 
@@ -411,5 +412,9 @@ export const messages = Object.freeze(
       id: 'components.walletinit.restorewallet.restorewalletscreen.restoreDuplicatedWalletModalButton',
       defaultMessage: '!!!Open wallet',
     },
+    preparingWallet: {
+      id: 'components.walletinit.restorewallet.restorewalletscreen.preparingWallet',
+      defaultMessage: '!!!Preparing your wallet...',
+    },
   }),
 )
diff --git a/...allet-mobile/src/features/SetupWallet/useCases/CreateWallet/AboutRecoveryPhraseScreen.tsx b/...allet-mobile/src/features/SetupWallet/useCases/CreateWallet/AboutRecoveryPhraseScreen.tsx
@@ -9,7 +9,7 @@ import {Space} from '../../../../components/Space/Space'
 import {useMetrics} from '../../../../metrics/metricsManager'
 import {WalletInitRouteNavigation} from '../../../../navigation'
 import {CardAboutPhrase} from '../../common/CardAboutPhrase/CardAboutPhrase'
-import {YoroiZendeskLink} from '../../common/contants'
+import {YoroiZendeskLink} from '../../common/constants'
 import {LearnMoreButton} from '../../common/LearnMoreButton/LearnMoreButton'
 import {StepperProgress} from '../../common/StepperProgress/StepperProgress'
 import {useStrings} from '../../common/useStrings'

diff --git a/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/RecoveryPhraseScreen.tsx b/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/RecoveryPhraseScreen.tsx
@@ -22,7 +22,7 @@ import {useMetrics} from '../../../../metrics/metricsManager'
 import {WalletInitRouteNavigation} from '../../../../navigation'
 import {generateAdaMnemonic} from '../../../../yoroi-wallets/cardano/mnemonic'
 import {CardAboutPhrase} from '../../common/CardAboutPhrase/CardAboutPhrase'
-import {YoroiZendeskLink} from '../../common/contants'
+import {YoroiZendeskLink} from '../../common/constants'
 import {LearnMoreButton} from '../../common/LearnMoreButton/LearnMoreButton'
 import {StepperProgress} from '../../common/StepperProgress/StepperProgress'
 import {useStrings} from '../../common/useStrings'

diff --git a/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/WalletDetailsScreen.tsx b/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/WalletDetailsScreen.tsx
@@ -41,8 +41,9 @@ import {debugWalletInfo, features} from '../../..'
 import {useSetSelectedWallet} from '../../../WalletManager/Context/SelectedWalletContext'
 import {useSetSelectedWalletMeta} from '../../../WalletManager/Context/SelectedWalletMetaContext'
 import {CardAboutPhrase} from '../../common/CardAboutPhrase/CardAboutPhrase'
-import {YoroiZendeskLink} from '../../common/contants'
+import {YoroiZendeskLink} from '../../common/constants'
 import {LearnMoreButton} from '../../common/LearnMoreButton/LearnMoreButton'
+import {PreparingWallet} from '../../common/PreparingWallet/PreparingWallet'
 import {StepperProgress} from '../../common/StepperProgress/StepperProgress'
 import {useStrings} from '../../common/useStrings'
 import {Info as InfoIllustration} from '../../illustrations/Info'
@@ -110,6 +111,7 @@ export const WalletDetailsScreen = () => {
 
   const {
     openWallet,
+    data: openWalletData,
     isLoading: isOpenWalletLoading,
     isSuccess: isOpenWalletSuccess,
   } = useOpenWallet({
@@ -158,8 +160,6 @@ export const WalletDetailsScreen = () => {
     nameErrors,
   )
 
-  const isLoading = isCreateWalletLoading || isOpenWalletLoading
-
   const handleCreateWallet = React.useCallback(() => {
     track.createWalletDetailsSubmitted()
 
@@ -275,6 +275,12 @@ export const WalletDetailsScreen = () => {
     )
   }
 
+  const isLoading = isCreateWalletLoading || isOpenWalletLoading || !!openWalletData
+
+  if (isLoading) {
+    return <PreparingWallet />
+  }
+
   return (
     <SafeAreaView edges={['left', 'right', 'bottom']} style={styles.root}>
       <View>

diff --git a/...let-mobile/src/features/SetupWallet/useCases/RestoreWallet/RestoreWalletDetailsScreen.tsx b/...let-mobile/src/features/SetupWallet/useCases/RestoreWallet/RestoreWalletDetailsScreen.tsx
@@ -42,8 +42,9 @@ import {debugWalletInfo, features} from '../../..'
 import {useSetSelectedWallet} from '../../../WalletManager/Context/SelectedWalletContext'
 import {useSetSelectedWalletMeta} from '../../../WalletManager/Context/SelectedWalletMetaContext'
 import {CardAboutPhrase} from '../../common/CardAboutPhrase/CardAboutPhrase'
-import {YoroiZendeskLink} from '../../common/contants'
+import {YoroiZendeskLink} from '../../common/constants'
 import {LearnMoreButton} from '../../common/LearnMoreButton/LearnMoreButton'
+import {PreparingWallet} from '../../common/PreparingWallet/PreparingWallet'
 import {StepperProgress} from '../../common/StepperProgress/StepperProgress'
 import {useStrings} from '../../common/useStrings'
 import {Info as InfoIllustration} from '../../illustrations/Info'
@@ -99,6 +100,7 @@ export const RestoreWalletDetailsScreen = () => {
 
   const {
     openWallet,
+    data: openWalletData,
     isLoading: isOpenWalletLoading,
     isSuccess: isOpenWalletSuccess,
   } = useOpenWallet({
@@ -142,20 +144,24 @@ export const RestoreWalletDetailsScreen = () => {
     },
   })
 
-  const nameErrors = validateWalletName(name, null, walletNames && !isCreateWalletSuccess ? walletNames : [])
-  const walletNameErrorText = getWalletNameError(
-    {tooLong: strings.tooLong, nameAlreadyTaken: strings.nameAlreadyTaken, mustBeFilled: strings.mustBeFilled},
-    nameErrors,
-  )
-
-  const isLoading = isCreateWalletLoading || isOpenWalletLoading
-
   useFocusEffect(
     React.useCallback(() => {
       track.restoreWalletDetailsStepViewed()
     }, [track]),
   )
 
+  const isLoading = isCreateWalletLoading || isOpenWalletLoading || !!openWalletData
+
+  if (isLoading) {
+    return <PreparingWallet />
+  }
+
+  const nameErrors = validateWalletName(name, null, walletNames && !isCreateWalletSuccess ? walletNames : [])
+  const walletNameErrorText = getWalletNameError(
+    {tooLong: strings.tooLong, nameAlreadyTaken: strings.nameAlreadyTaken, mustBeFilled: strings.mustBeFilled},
+    nameErrors,
+  )
+
   const showModalTipsPassword = () => {
     Keyboard.dismiss()
     openModal(

diff --git a/apps/wallet-mobile/src/i18n/locales/en-US.json b/apps/wallet-mobile/src/i18n/locales/en-US.json
@@ -599,6 +599,7 @@
   "components.walletinit.restorewallet.restorewalletscreen.restoreDuplicatedWalletModalTitle": "This wallet is already added",
   "components.walletinit.restorewallet.restorewalletscreen.restoreDuplicatedWalletModalButton": "Open wallet",
   "components.walletinit.restorewallet.restorewalletscreen.restoreWalletScreenTitle": "Add the <b>recovery phrase</b> you received upon your wallet creation process.",
+  "components.walletinit.restorewallet.restorewalletscreen.preparingWallet": "Preparing your wallet...",
   "components.walletinit.restorewallet.upgradeconfirmmodal.balanceLabel": "Recovered balance",
   "components.walletinit.restorewallet.upgradeconfirmmodal.finalBalanceLabel": "Final balance",
   "components.walletinit.restorewallet.upgradeconfirmmodal.fromLabel": "From",

diff --git a/...t-mobile/translations/messages/src/features/Settings/RemoveWallet/RemoveWalletScreen.json b/...t-mobile/translations/messages/src/features/Settings/RemoveWallet/RemoveWalletScreen.json
@@ -4,104 +4,104 @@
     "defaultMessage": "!!!If you wish to permanently delete the wallet make sure you have written down the mnemonic.",
     "file": "src/features/Settings/RemoveWallet/RemoveWalletScreen.tsx",
     "start": {
-      "line": 106,
+      "line": 110,
       "column": 25,
-      "index": 3392
+      "index": 3480
     },
     "end": {
-      "line": 109,
+      "line": 113,
       "column": 3,
-      "index": 3586
+      "index": 3674
     }
   },
   {
     "id": "components.settings.removewalletscreen.descriptionParagraph2",
     "defaultMessage": "!!!To confirm this operation type the wallet name below.",
     "file": "src/features/Settings/RemoveWallet/RemoveWalletScreen.tsx",
     "start": {
-      "line": 110,
+      "line": 114,
       "column": 25,
-      "index": 3613
+      "index": 3701
     },
     "end": {
-      "line": 113,
+      "line": 117,
       "column": 3,
-      "index": 3770
+      "index": 3858
     }
   },
   {
     "id": "components.settings.removewalletscreen.walletName",
     "defaultMessage": "!!!Wallet name",
     "file": "src/features/Settings/RemoveWallet/RemoveWalletScreen.tsx",
     "start": {
-      "line": 114,
+      "line": 118,
       "column": 14,
-      "index": 3786
+      "index": 3874
     },
     "end": {
-      "line": 117,
+      "line": 121,
       "column": 3,
-      "index": 3890
+      "index": 3978
     }
   },
   {
     "id": "components.settings.removewalletscreen.walletNameInput",
     "defaultMessage": "!!!Wallet name",
     "file": "src/features/Settings/RemoveWallet/RemoveWalletScreen.tsx",
     "start": {
-      "line": 118,
+      "line": 122,
       "column": 19,
-      "index": 3911
+      "index": 3999
     },
     "end": {
-      "line": 121,
+      "line": 125,
       "column": 3,
-      "index": 4020
+      "index": 4108
     }
   },
   {
     "id": "components.settings.removewalletscreen.walletNameMismatchError",
     "defaultMessage": "!!!Wallet name does not match",
     "file": "src/features/Settings/RemoveWallet/RemoveWalletScreen.tsx",
     "start": {
-      "line": 122,
+      "line": 126,
       "column": 27,
-      "index": 4049
+      "index": 4137
     },
     "end": {
-      "line": 125,
+      "line": 129,
       "column": 3,
-      "index": 4181
+      "index": 4269
     }
   },
   {
     "id": "components.settings.removewalletscreen.remove",
     "defaultMessage": "!!!Remove wallet",
     "file": "src/features/Settings/RemoveWallet/RemoveWalletScreen.tsx",
     "start": {
-      "line": 126,
+      "line": 130,
       "column": 10,
-      "index": 4193
+      "index": 4281
     },
     "end": {
-      "line": 129,
+      "line": 133,
       "column": 3,
-      "index": 4295
+      "index": 4383
     }
   },
   {
     "id": "components.settings.removewalletscreen.hasWrittenDownMnemonic",
     "defaultMessage": "!!!I have written down mnemonic of this wallet and understand that I cannot recover the wallet without it.",
     "file": "src/features/Settings/RemoveWallet/RemoveWalletScreen.tsx",
     "start": {
-      "line": 130,
+      "line": 134,
       "column": 26,
-      "index": 4323
+      "index": 4411
     },
     "end": {
-      "line": 134,
+      "line": 138,
       "column": 3,
-      "index": 4537
+      "index": 4625
     }
   }
 ]