fix(restore): duplicated wallet feature and plate display

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

@@ -1,20 +1,25 @@
+import {WalletChecksum, walletChecksum} from '@emurgo/cip4-js'
 import {useNavigation} from '@react-navigation/native'
+import {Blockies} from '@yoroi/identicon'
 import {useSetupWallet} from '@yoroi/setup-wallet'
 import {useTheme} from '@yoroi/theme'
 import {HW, Wallet} from '@yoroi/types'
 import React from 'react'
 import {useIntl} from 'react-intl'
-import {StyleSheet, View} from 'react-native'
+import {StyleSheet, Text, View} from 'react-native'
 import {SafeAreaView} from 'react-native-safe-area-context'
 
+import {Button, Icon, useModal} from '../../../../components'
+import {Space} from '../../../../components/Space/Space'
 import {StepperProgress} from '../../../../components/StepperProgress/StepperProgress'
 import {showErrorDialog} from '../../../../kernel/dialogs'
 import {errorMessages} from '../../../../kernel/i18n/global-messages'
 import LocalizableError from '../../../../kernel/i18n/LocalizableError'
-import {SetupWalletRouteNavigation} from '../../../../kernel/navigation'
+import {SetupWalletRouteNavigation, useWalletNavigation} 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'
 
 export type Params = {
@@ -30,16 +35,45 @@ 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 {resetToTxHistory} = useWalletNavigation()
   const navigation = useNavigation<SetupWalletRouteNavigation>()
 
   const {hwDeviceInfoChanged, walletImplementation, useUSB} = useSetupWallet()
 
   const onSuccess = (hwDeviceInfo: HW.DeviceInfo) => {
     hwDeviceInfoChanged(hwDeviceInfo)
+    const plate = walletChecksum(hwDeviceInfo.bip44AccountPublic)
+
+    const duplicatedWalletMeta = Array.from(walletManager.walletMetas.values()).find(
+      (walletMeta) => walletMeta.plate === plate.TextPart,
+    )
+
+    if (duplicatedWalletMeta) {
+      openModal(
+        strings.restoreDuplicatedWalletModalTitle,
+        <Modal
+          walletName={duplicatedWalletMeta.name}
+          plate={plate}
+          onPress={() => handleOpenWalletWithDuplicatedName(duplicatedWalletMeta)}
+        />,
+      )
+
+      return
+    }
     navigation.navigate('setup-wallet-save-nano-x')
   }
 
+  const handleOpenWalletWithDuplicatedName = React.useCallback(
+    (walletMeta: Wallet.Meta) => {
+      walletManager.setSelectedWalletId(walletMeta.id)
+      resetToTxHistory()
+    },
+    [walletManager, resetToTxHistory],
+  )
+
   const onError = (error: Error) => {
     if (error instanceof LocalizableError) {
       showErrorDialog(errorMessages.generalLocalizableError, intl, {
@@ -76,6 +110,41 @@ export const ConnectNanoXScreen = ({defaultDevices}: Props) => {
   )
 }
 
+const Modal = ({onPress, plate, walletName}: {onPress: () => void; plate: WalletChecksum; walletName: string}) => {
+  const {styles} = useStyles()
+  const strings = useStrings()
+
+  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: plate.ImagePart}).asBase64()}
+          style={styles.walletChecksum}
+          size={38}
+        />
+
+        <Space width="sm" />
+
+        <View>
+          <Text style={styles.plateName}>{walletName}</Text>
+
+          <Text style={styles.plateText}>{plate.TextPart}</Text>
+        </View>
+      </View>
+
+      <Space fill />
+
+      <Button title={strings.restoreDuplicatedWalletModalButton} style={styles.button} onPress={onPress} />
+
+      <Space height="xl" />
+    </View>
+  )
+}
+
 const useStyles = () => {
   const {color, atoms} = useTheme()
   const styles = StyleSheet.create({
@@ -90,6 +159,37 @@ const useStyles = () => {
       flex: 1,
       ...atoms.px_lg,
     },
+    plateName: {
+      ...atoms.body_2_md_medium,
+      color: color.gray_900,
+    },
+    modal: {
+      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.gray_900,
+    },
   })
-  return styles
+  return {styles} as const
 }

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

@@ -68,8 +68,11 @@ 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 {walletImplementation, hwDeviceInfo, accountVisual, walletIdChanged} = useSetupWallet()
+
+  if (!hwDeviceInfo) throw new Error('no hwDeviceInfo')
+  const plate = walletChecksum(hwDeviceInfo.bip44AccountPublic)
+
   const walletNames = Array.from(walletManager.walletMetas.values()).map(({name}) => name)
 
   const {createWallet, isLoading} = useCreateWalletXPub({
@@ -97,8 +100,6 @@ export const SaveNanoXScreen = () => {
     },
   })
 
-  if (!hwDeviceInfo) throw new Error('no hwDeviceInfo')
-
   const nameErrors = validateWalletName(name, null, !isLoading ? walletNames : [])
   const walletNameErrorText = getWalletNameError(
     {tooLong: strings.tooLong, nameAlreadyTaken: strings.nameAlreadyTaken, mustBeFilled: strings.mustBeFilled},

apps/wallet-mobile/translations/messages/src/features/Nfts/useCases/Nfts.json

@@ -4,119 +4,119 @@
     "defaultMessage": "!!!NFT count",
     "file": "src/features/Nfts/useCases/Nfts.tsx",
     "start": {
-      "line": 173,
+      "line": 164,
       "column": 12,
-      "index": 4852
+      "index": 4478
     },
     "end": {
-      "line": 176,
+      "line": 167,
       "column": 3,
-      "index": 4925
+      "index": 4551
     }
   },
   {
     "id": "nft.gallery.errorTitle",
     "defaultMessage": "!!!Oops!",
     "file": "src/features/Nfts/useCases/Nfts.tsx",
     "start": {
-      "line": 177,
+      "line": 168,
       "column": 14,
-      "index": 4941
+      "index": 4567
     },
     "end": {
-      "line": 180,
+      "line": 171,
       "column": 3,
-      "index": 5012
+      "index": 4638
     }
   },
   {
     "id": "nft.gallery.errorDescription",
     "defaultMessage": "!!!Something went wrong.",
     "file": "src/features/Nfts/useCases/Nfts.tsx",
     "start": {
-      "line": 181,
+      "line": 172,
       "column": 20,
-      "index": 5034
+      "index": 4660
     },
     "end": {
-      "line": 184,
+      "line": 175,
       "column": 3,
-      "index": 5127
+      "index": 4753
     }
   },
   {
     "id": "nft.gallery.reloadApp",
     "defaultMessage": "!!!Try to restart the app.",
     "file": "src/features/Nfts/useCases/Nfts.tsx",
     "start": {
-      "line": 185,
+      "line": 176,
       "column": 13,
-      "index": 5142
+      "index": 4768
     },
     "end": {
-      "line": 188,
+      "line": 179,
       "column": 3,
-      "index": 5230
+      "index": 4856
     }
   },
   {
     "id": "nft.gallery.noNftsFound",
     "defaultMessage": "!!!No NFTs found",
     "file": "src/features/Nfts/useCases/Nfts.tsx",
     "start": {
-      "line": 189,
+      "line": 180,
       "column": 15,
-      "index": 5247
+      "index": 4873
     },
     "end": {
-      "line": 192,
+      "line": 183,
       "column": 3,
-      "index": 5327
+      "index": 4953
     }
   },
   {
     "id": "nft.gallery.noNftsInWallet",
     "defaultMessage": "!!!No NFTs added to your wallet yet",
     "file": "src/features/Nfts/useCases/Nfts.tsx",
     "start": {
-      "line": 193,
+      "line": 184,
       "column": 18,
-      "index": 5347
+      "index": 4973
     },
     "end": {
-      "line": 196,
+      "line": 187,
       "column": 3,
-      "index": 5449
+      "index": 5075
     }
   },
   {
     "id": "nft.navigation.title",
     "defaultMessage": "!!!NFT Gallery",
     "file": "src/features/Nfts/useCases/Nfts.tsx",
     "start": {
-      "line": 197,
+      "line": 188,
       "column": 9,
-      "index": 5460
+      "index": 5086
     },
     "end": {
-      "line": 200,
+      "line": 191,
       "column": 3,
-      "index": 5535
+      "index": 5161
     }
   },
   {
     "id": "nft.navigation.search",
     "defaultMessage": "!!!Search NFT",
     "file": "src/features/Nfts/useCases/Nfts.tsx",
     "start": {
-      "line": 201,
+      "line": 192,
       "column": 10,
-      "index": 5547
+      "index": 5173
     },
     "end": {
-      "line": 204,
+      "line": 195,
       "column": 3,
-      "index": 5622
+      "index": 5248
     }
   }
 ]