fix(restore): duplicated wallet feature and plate display (#3590)

Signed-off-by: banklesss <[email protected]>
Co-authored-by: Juliano Lazzarotto <[email protected]>

apps/wallet-mobile/src/features/Settings/RenameWalletScreen/RenameWalletScreen.tsx

@@ -8,7 +8,7 @@ import {SafeAreaView} from 'react-native-safe-area-context'
 import {Button, KeyboardAvoidingView, Spacer, TextInput} from '../../../components'
 import globalMessages from '../../../kernel/i18n/global-messages'
 import {isEmptyString} from '../../../kernel/utils'
-import {getWalletNameError, validateWalletName} from '../../../yoroi-wallets/utils/validators'
+import {getWalletNameError} from '../../../yoroi-wallets/utils/validators'
 import {useSelectedWallet} from '../../WalletManager/common/hooks/useSelectedWallet'
 import {useWalletManager} from '../../WalletManager/context/WalletManagerProvider'
 
@@ -23,9 +23,8 @@ export const RenameWalletScreen = () => {
   } = useSelectedWallet()
 
   const {walletManager} = useWalletManager()
-  const walletNames = Array.from(walletManager.walletMetas.values()).map(({name}) => name)
   const [newWalletName, setNewWalletName] = React.useState(walletName)
-  const validationErrors = validateWalletName(newWalletName, walletName, walletNames)
+  const validationErrors = walletManager.validateWalletName(newWalletName, walletName)
   const hasErrors = Object.keys(validationErrors).length > 0
   const errorText = getWalletNameError(
     {

apps/wallet-mobile/src/features/SetupWallet/common/WalletDuplicatedModal/WalletDuplicatedModal.tsx

@@ -0,0 +1,101 @@
+import {Blockies} from '@yoroi/identicon'
+import {useTheme} from '@yoroi/theme'
+import * as React from 'react'
+import {StyleSheet, Text, View} from 'react-native'
+
+import {Button, Icon} from '../../../../components'
+import {Space} from '../../../../components/Space/Space'
+import {useWalletNavigation} from '../../../../kernel/navigation'
+import {useWalletManager} from '../../../WalletManager/context/WalletManagerProvider'
+import {useStrings} from '../useStrings'
+
+export const WalletDuplicatedModal = ({
+  plate,
+  seed,
+  duplicatedAccountWalletMetaId,
+  duplicatedAccountWalletMetaName,
+}: {
+  plate: string
+  seed: string
+  duplicatedAccountWalletMetaId: string
+  duplicatedAccountWalletMetaName: string
+}) => {
+  const {styles} = useStyles()
+  const strings = useStrings()
+
+  const {resetToTxHistory} = useWalletNavigation()
+  const {walletManager} = useWalletManager()
+
+  const handleOpenWalletWithDuplicatedName = React.useCallback(() => {
+    walletManager.setSelectedWalletId(duplicatedAccountWalletMetaId)
+    resetToTxHistory()
+  }, [walletManager, duplicatedAccountWalletMetaId, resetToTxHistory])
+
+  return (
+    <View style={styles.modal}>
+      <Text style={styles.modalText}>{strings.restoreDuplicatedWalletModalText}</Text>
+
+      <Space height="lg" />
+
+      <View style={styles.checksum}>
+        <Icon.WalletAvatar image={new Blockies({seed}).asBase64()} style={styles.walletChecksum} size={38} />
+
+        <Space width="sm" />
+
+        <View>
+          <Text style={styles.plateName}>{duplicatedAccountWalletMetaName}</Text>
+
+          <Text style={styles.plateText}>{plate}</Text>
+        </View>
+      </View>
+
+      <Space fill />
+
+      <Button
+        title={strings.restoreDuplicatedWalletModalButton}
+        style={styles.button}
+        onPress={handleOpenWalletWithDuplicatedName}
+      />
+
+      <Space height="xl" />
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const {color, atoms} = useTheme()
+  const styles = StyleSheet.create({
+    plateName: {
+      ...atoms.body_2_md_medium,
+      color: color.text_gray_medium,
+    },
+    modal: {
+      ...atoms.flex_1,
+      ...atoms.px_lg,
+    },
+    walletChecksum: {
+      width: 38,
+      height: 38,
+      borderRadius: 8,
+    },
+    checksum: {
+      ...atoms.flex_row,
+      ...atoms.align_center,
+      textAlignVertical: 'center',
+    },
+    plateText: {
+      ...atoms.body_3_sm_regular,
+      ...atoms.text_center,
+      ...atoms.justify_center,
+      color: color.gray_600,
+    },
+    button: {
+      backgroundColor: color.primary_500,
+    },
+    modalText: {
+      ...atoms.body_1_lg_regular,
+      color: color.text_gray_low,
+    },
+  })
+  return {styles} as const
+}

apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/VerifyRecoveryPhraseScreen.tsx

@@ -12,8 +12,7 @@ import {Space} from '../../../../components/Space/Space'
 import {StepperProgress} from '../../../../components/StepperProgress/StepperProgress'
 import {useMetrics} from '../../../../kernel/metrics/metricsManager'
 import {SetupWalletRouteNavigation} from '../../../../kernel/navigation'
-import {keyManager} from '../../../../yoroi-wallets/cardano/key-manager/key-manager'
-import {wrappedCsl} from '../../../../yoroi-wallets/cardano/wrappedCsl'
+import {walletManager} from '../../../WalletManager/wallet-manager'
 import {useStrings} from '../../common/useStrings'
 import {Alert as AlertIllustration} from '../../illustrations/Alert'
 import {Check2 as Check2Illustration} from '../../illustrations/Check2'
@@ -103,10 +102,13 @@ export const VerifyRecoveryPhraseScreen = () => {
           title={strings.next}
           disabled={disabled}
           onPress={async () => {
-            const {csl, release} = wrappedCsl()
-            const {accountPubKeyHex} = await keyManager(walletImplementation)({mnemonic, csl, accountVisual})
+            const {accountPubKeyHex} = await walletManager.generateWalletKeys(
+              walletImplementation,
+              mnemonic,
+              accountVisual,
+            )
             publicKeyHexChanged(accountPubKeyHex)
-            release()
+
             navigation.navigate('setup-wallet-details-form')
           }}
           testId="setup-next-button"

apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/WalletDetailsScreen.tsx

@@ -1,4 +1,3 @@
-import {walletChecksum} from '@emurgo/cip4-js'
 import {useFocusEffect, useNavigation} from '@react-navigation/native'
 import {useAsyncStorage} from '@yoroi/common'
 import {Blockies} from '@yoroi/identicon'
@@ -83,7 +82,7 @@ export const WalletDetailsScreen = () => {
     walletIdChanged,
     accountVisual,
   } = useSetupWallet()
-  const plate = walletChecksum(publicKeyHex)
+  const {plate, seed} = walletManager.checksum(publicKeyHex)
   const [name, setName] = React.useState(features.prefillWalletInfo ? debugWalletInfo.WALLET_NAME : '')
   const passwordRef = React.useRef<RNTextInput>(null)
   const [password, setPassword] = React.useState(features.prefillWalletInfo ? debugWalletInfo.PASSWORD : '')
@@ -222,11 +221,11 @@ export const WalletDetailsScreen = () => {
         <ScrollView bounces={false}>
           <CardAboutPhrase
             title={strings.walletChecksumModalCardTitle}
-            checksumImage={plate.ImagePart}
+            checksumImage={seed}
             checksumLine={1}
             linesOfText={[
               strings.walletChecksumModalCardFirstItem,
-              strings.walletChecksumModalCardSecondItem(plate.TextPart),
+              strings.walletChecksumModalCardSecondItem(plate),
               strings.walletChecksumModalCardThirdItem,
             ]}
           />
@@ -311,15 +310,11 @@ export const WalletDetailsScreen = () => {
           />
 
           <View style={styles.checksum}>
-            <Icon.WalletAvatar
-              image={new Blockies({seed: plate.ImagePart}).asBase64()}
-              style={styles.walletChecksum}
-              size={24}
-            />
+            <Icon.WalletAvatar image={new Blockies({seed}).asBase64()} style={styles.walletChecksum} size={24} />
 
             <Space width="sm" />
 
-            <Text style={styles.plateNumber}>{plate.TextPart}</Text>
+            <Text style={styles.plateNumber}>{plate}</Text>
 
             <Space width="sm" />
 

apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreHwWallet/ConnectNanoXScreen.tsx

@@ -7,6 +7,7 @@ import {useIntl} from 'react-intl'
 import {StyleSheet, View} from 'react-native'
 import {SafeAreaView} from 'react-native-safe-area-context'
 
+import {useModal} from '../../../../components'
 import {StepperProgress} from '../../../../components/StepperProgress/StepperProgress'
 import {showErrorDialog} from '../../../../kernel/dialogs'
 import {errorMessages} from '../../../../kernel/i18n/global-messages'
@@ -15,7 +16,9 @@ import {SetupWalletRouteNavigation} from '../../../../kernel/navigation'
 import {LedgerConnect} from '../../../../legacy/HW'
 import {getHWDeviceInfo} from '../../../../yoroi-wallets/cardano/hw'
 import {Device, NetworkId} from '../../../../yoroi-wallets/types'
+import {useWalletManager} from '../../../WalletManager/context/WalletManagerProvider'
 import {useStrings} from '../../common/useStrings'
+import {WalletDuplicatedModal} from '../../common/WalletDuplicatedModal/WalletDuplicatedModal'
 
 export type Params = {
   useUSB?: boolean
@@ -30,13 +33,34 @@ type Props = {
 export const ConnectNanoXScreen = ({defaultDevices}: Props) => {
   const intl = useIntl()
   const strings = useStrings()
-  const styles = useStyles()
+  const {styles} = useStyles()
+  const {walletManager} = useWalletManager()
+  const {openModal} = useModal()
+
   const navigation = useNavigation<SetupWalletRouteNavigation>()
 
   const {hwDeviceInfoChanged, walletImplementation, useUSB} = useSetupWallet()
 
   const onSuccess = (hwDeviceInfo: HW.DeviceInfo) => {
     hwDeviceInfoChanged(hwDeviceInfo)
+
+    const duplicatedAccountWalletMeta = walletManager.findWalletMetadataByPublicKeyHex(hwDeviceInfo.bip44AccountPublic)
+
+    if (duplicatedAccountWalletMeta) {
+      const {plate, seed} = walletManager.checksum(hwDeviceInfo.bip44AccountPublic)
+
+      openModal(
+        strings.restoreDuplicatedWalletModalTitle,
+        <WalletDuplicatedModal
+          plate={plate}
+          seed={seed}
+          duplicatedAccountWalletMetaId={duplicatedAccountWalletMeta.id}
+          duplicatedAccountWalletMetaName={duplicatedAccountWalletMeta.name}
+        />,
+      )
+      return
+    }
+
     navigation.navigate('setup-wallet-save-nano-x')
   }
 
@@ -80,16 +104,16 @@ const useStyles = () => {
   const {color, atoms} = useTheme()
   const styles = StyleSheet.create({
     safeAreaView: {
-      flex: 1,
+      ...atoms.flex_1,
       backgroundColor: color.bg_color_max,
     },
     stepper: {
       ...atoms.p_lg,
     },
     content: {
-      flex: 1,
+      ...atoms.flex_1,
       ...atoms.px_lg,
     },
   })
-  return styles
+  return {styles} as const
 }

apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreHwWallet/SaveNanoXScreen.tsx

@@ -1,4 +1,3 @@
-import {walletChecksum} from '@emurgo/cip4-js'
 import {useNavigation} from '@react-navigation/native'
 import {useAsyncStorage} from '@yoroi/common'
 import {Blockies} from '@yoroi/identicon'
@@ -29,7 +28,7 @@ import {logger} from '../../../../kernel/logger/logger'
 import {useMetrics} from '../../../../kernel/metrics/metricsManager'
 import {SetupWalletRouteNavigation} from '../../../../kernel/navigation'
 import {isEmptyString} from '../../../../kernel/utils'
-import {getWalletNameError, validateWalletName} from '../../../../yoroi-wallets/utils'
+import {getWalletNameError} from '../../../../yoroi-wallets/utils'
 import {useCreateWalletXPub} from '../../../WalletManager/common/hooks/useCreateWalletXPub'
 import {parseWalletMeta} from '../../../WalletManager/common/validators/wallet-meta'
 import {useWalletManager} from '../../../WalletManager/context/WalletManagerProvider'
@@ -68,9 +67,10 @@ export const SaveNanoXScreen = () => {
   const {HEIGHT_MODAL_NAME_PASSWORD, HEIGHT_MODAL_CHECKSUM} = useSizeModal()
   const [name, setName] = React.useState(features.prefillWalletInfo ? debugWalletInfo.WALLET_NAME : '')
 
-  const {walletImplementation, hwDeviceInfo, accountVisual, walletIdChanged, publicKeyHex} = useSetupWallet()
-  const plate = walletChecksum(publicKeyHex)
-  const walletNames = Array.from(walletManager.walletMetas.values()).map(({name}) => name)
+  const {walletImplementation, hwDeviceInfo, accountVisual, walletIdChanged} = useSetupWallet()
+
+  if (!hwDeviceInfo) throw new Error('no hwDeviceInfo')
+  const {plate, seed} = walletManager.checksum(hwDeviceInfo.bip44AccountPublic)
 
   const {createWallet, isLoading} = useCreateWalletXPub({
     onSuccess: async (wallet) => {
@@ -97,14 +97,14 @@ export const SaveNanoXScreen = () => {
     },
   })
 
-  if (!hwDeviceInfo) throw new Error('no hwDeviceInfo')
-
-  const nameErrors = validateWalletName(name, null, !isLoading ? walletNames : [])
+  const nameErrors = !isLoading ? walletManager.validateWalletName(name) : null
   const walletNameErrorText = getWalletNameError(
     {tooLong: strings.tooLong, nameAlreadyTaken: strings.nameAlreadyTaken, mustBeFilled: strings.mustBeFilled},
     nameErrors,
   )
 
+  const disabled = isLoading || Object.keys(nameErrors ?? {}).length > 0
+
   const handleOnSubmit = React.useCallback(() => {
     createWallet({
       name,
@@ -161,11 +161,11 @@ export const SaveNanoXScreen = () => {
           <View>
             <CardAboutPhrase
               title={strings.walletChecksumModalCardTitle}
-              checksumImage={plate.ImagePart}
+              checksumImage={seed}
               checksumLine={1}
               linesOfText={[
                 strings.walletChecksumModalCardFirstItem,
-                strings.walletChecksumModalCardSecondItem(plate.TextPart),
+                strings.walletChecksumModalCardSecondItem(plate),
                 strings.walletChecksumModalCardThirdItem,
               ]}
             />
@@ -223,16 +223,12 @@ export const SaveNanoXScreen = () => {
           <Space height="lg" />
 
           <View style={styles.checksum}>
-            <Icon.WalletAvatar
-              image={new Blockies({seed: plate.ImagePart}).asBase64()}
-              style={styles.walletChecksum}
-              size={24}
-            />
+            <Icon.WalletAvatar image={new Blockies({seed}).asBase64()} style={styles.walletChecksum} size={24} />
 
             <Space width="sm" />
 
             <Text style={styles.plateNumber} testID="wallet-plate-number">
-              {plate.TextPart}
+              {plate}
             </Text>
 
             <Space width="sm" />
@@ -247,7 +243,7 @@ export const SaveNanoXScreen = () => {
             title={strings.next}
             onPress={handleOnSubmit}
             testId="setup-restore-step2-next-button"
-            disabled={isLoading || Object.keys(nameErrors).length > 0}
+            disabled={disabled}
           />
         </View>
       </SafeAreaView>