From ae5ac71040e969a6ec9570018399e71748ecd3c6 Mon Sep 17 00:00:00 2001
From: banklesss <105349292+banklesss@users.noreply.github.com>
Date: Tue, 16 Apr 2024 23:47:37 +0200
Subject: [PATCH] fix(setup wallet): wallet plate hardcode issue, redirects and
mnemonic button (#3203)
---
.../SetupWallet/common/useStrings.tsx | 5 +-
.../VerifyRecoveryPhraseScreen.tsx | 135 ++--
.../CreateWallet/WalletDetailsScreen.tsx | 86 ++-
.../RestoreWalletDetailsScreen.tsx | 77 ++-
.../wallet-mobile/src/i18n/locales/en-US.json | 2 +-
.../messages/src/AppNavigator.json | 16 +-
.../ApplicationSettingsScreen.json | 68 +--
.../SetupWallet/common/useStrings.json | 578 +++++++++---------
.../messages/src/yoroi-wallets/auth/auth.json | 12 +-
9 files changed, 520 insertions(+), 459 deletions(-)
diff --git a/apps/wallet-mobile/src/features/SetupWallet/common/useStrings.tsx b/apps/wallet-mobile/src/features/SetupWallet/common/useStrings.tsx
index 274fb40154..f62fb8d52b 100644
--- a/apps/wallet-mobile/src/features/SetupWallet/common/useStrings.tsx
+++ b/apps/wallet-mobile/src/features/SetupWallet/common/useStrings.tsx
@@ -72,7 +72,8 @@ export const useStrings = () => {
walletPasswordModalCardSecondItem: intl.formatMessage(messages.walletPasswordModalCardSecondItem),
walletChecksumModalCardTitle: intl.formatMessage(messages.walletChecksumModalCardTitle),
walletChecksumModalCardFirstItem: intl.formatMessage(messages.walletChecksumModalCardFirstItem),
- walletChecksumModalCardSecondItem: intl.formatMessage(messages.walletChecksumModalCardSecondItem),
+ walletChecksumModalCardSecondItem: (checksum: string) =>
+ intl.formatMessage(messages.walletChecksumModalCardSecondItem, {checksum}),
walletChecksumModalCardThirdItem: intl.formatMessage(messages.walletChecksumModalCardThirdItem),
stepWalletDetails: intl.formatMessage(messages.stepWalletDetails),
walletDetailsTitle: (options: {b: (content: React.ReactNode[]) => React.ReactNode}) =>
@@ -320,7 +321,7 @@ export const messages = Object.freeze(
},
walletChecksumModalCardSecondItem: {
id: 'components.walletinit.walletDetails.walletChecksumModalCardItem.second',
- defaultMessage: '!!!Plate number BONE-0770 is a auto-generated sign of four letters and four digits.',
+ defaultMessage: '!!!Plate number {checksum} is a auto-generated sign of four letters and four digits.',
},
walletChecksumModalCardThirdItem: {
id: 'components.walletinit.walletDetails.walletChecksumModalCardItem.third',
diff --git a/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/VerifyRecoveryPhraseScreen.tsx b/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/VerifyRecoveryPhraseScreen.tsx
index 25eb005156..0fc006188e 100644
--- a/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/VerifyRecoveryPhraseScreen.tsx
+++ b/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/VerifyRecoveryPhraseScreen.tsx
@@ -198,46 +198,44 @@ const MnemonicInput = ({defaultMnemonic, userEntries, onPress}: MnemonicInputPro
const recoveryWordError = !isLastWordValid() && lastUserEntry?.id === entry.id
return (
-
-
-
-
- {!recoveryWordError && (
-
- )}
-
+
+
+
+ {!recoveryWordError && (
+
+ )}
+
+
+
-
+
)
})}
@@ -293,32 +291,26 @@ const WordBadges = ({
const usedError = isUsed && !isLastWordValid() && lastUserEntry?.id === entry.id
return (
- selectWord(entry)}
>
-
-
- {isUsed && }
-
- selectWord(entry)}
- disabled={isUsed}
- used={isUsed}
- usedError={usedError}
- testID={isUsed ? `wordBadgeTapped-${entry.word}` : `wordBadgeNonTapped-${entry.word}`}
- defaultMnemonic={defaultMnemonic}
- />
-
+
+
+
+ {isUsed && }
+
+
+
+
)
})}
@@ -327,34 +319,23 @@ const WordBadges = ({
type WordBadgeProps = {
word: string
- disabled?: boolean
used?: boolean
usedError?: boolean
recoveryWordError?: boolean
- onPress?: () => void
- testID?: string
defaultMnemonic: Array
}
-const WordBadge = ({word, onPress, disabled, testID, used, usedError, recoveryWordError}: WordBadgeProps) => {
+const WordBadge = ({word, used, usedError, recoveryWordError}: WordBadgeProps) => {
const {styles} = useStyles()
return (
-
-
+
-
- {word}
-
-
+ {word}
+
)
}
diff --git a/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/WalletDetailsScreen.tsx b/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/WalletDetailsScreen.tsx
index 613953ef2a..47b014cfb4 100644
--- a/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/WalletDetailsScreen.tsx
+++ b/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/WalletDetailsScreen.tsx
@@ -1,5 +1,5 @@
import {useFocusEffect} from '@react-navigation/native'
-import {NetworkError} from '@yoroi/common'
+import {NetworkError, useAsyncStorage} from '@yoroi/common'
import {useSetupWallet} from '@yoroi/setup-wallet'
import {useTheme} from '@yoroi/theme'
import * as React from 'react'
@@ -26,8 +26,10 @@ import {useMetrics} from '../../../../metrics/metricsManager'
import {useWalletNavigation} from '../../../../navigation'
import {isEmptyString} from '../../../../utils'
import {AddressMode} from '../../../../wallet-manager/types'
+import {parseWalletMeta} from '../../../../wallet-manager/validators'
import {useWalletManager} from '../../../../wallet-manager/WalletManagerContext'
-import {useCreateWallet, usePlate, useWalletNames} from '../../../../yoroi-wallets/hooks'
+import {InvalidState} from '../../../../yoroi-wallets/cardano/errors'
+import {useCreateWallet, useOpenWallet, usePlate, useWalletNames} from '../../../../yoroi-wallets/hooks'
import {WalletImplementationId} from '../../../../yoroi-wallets/types'
import {
getWalletNameError,
@@ -36,6 +38,7 @@ import {
validateWalletName,
} from '../../../../yoroi-wallets/utils'
import {debugWalletInfo, features} from '../../..'
+import {useSetSelectedWallet, useSetSelectedWalletMeta} from '../../../WalletManager/Context'
import {CardAboutPhrase} from '../../common/CardAboutPhrase/CardAboutPhrase'
import {YoroiZendeskLink} from '../../common/contants'
import {LearnMoreButton} from '../../common/LearnMoreButton/LearnMoreButton'
@@ -63,11 +66,20 @@ export const WalletDetailsScreen = () => {
const {styles} = useStyles()
const {HEIGHT_MODAL_NAME_PASSWORD, HEIGHT_MODAL_CHECKSUM} = useSizeModal()
const {openModal, closeModal} = useModal()
- const {resetToWalletSelection} = useWalletNavigation()
+ const {navigateToTxHistory} = useWalletNavigation()
const strings = useStrings()
const walletManager = useWalletManager()
const {walletNames} = useWalletNames(walletManager)
const {track} = useMetrics()
+ const intl = useIntl()
+ const selectWalletMeta = useSetSelectedWalletMeta()
+ const selectWallet = useSetSelectedWallet()
+ const storage = useAsyncStorage()
+ const {mnemonic, networkId, publicKeyHex, walletImplementationId} = useSetupWallet()
+ const plate = usePlate({networkId, publicKeyHex})
+ const [name, setName] = React.useState(features.prefillWalletInfo ? debugWalletInfo.WALLET_NAME : '')
+ const passwordRef = React.useRef(null)
+ const [password, setPassword] = React.useState(features.prefillWalletInfo ? debugWalletInfo.PASSWORD : '')
useFocusEffect(
React.useCallback(() => {
@@ -75,20 +87,6 @@ export const WalletDetailsScreen = () => {
}, [track]),
)
- const {mnemonic, networkId, publicKeyHex, walletImplementationId} = useSetupWallet()
- const plate = usePlate({networkId, publicKeyHex})
-
- const [name, setName] = React.useState(features.prefillWalletInfo ? debugWalletInfo.WALLET_NAME : '')
-
- const nameErrors = validateWalletName(name, null, walletNames ?? [])
- const walletNameErrorText = getWalletNameError(
- {tooLong: strings.tooLong, nameAlreadyTaken: strings.nameAlreadyTaken, mustBeFilled: strings.mustBeFilled},
- nameErrors,
- )
-
- const passwordRef = React.useRef(null)
- const [password, setPassword] = React.useState(features.prefillWalletInfo ? debugWalletInfo.PASSWORD : '')
-
const passwordConfirmationRef = React.useRef(null)
const [passwordConfirmation, setPasswordConfirmation] = React.useState(
features.prefillWalletInfo ? debugWalletInfo.PASSWORD : '',
@@ -101,11 +99,40 @@ export const WalletDetailsScreen = () => {
? strings.repeatPasswordInputError
: undefined
- const intl = useIntl()
- const {createWallet, isLoading, isSuccess} = useCreateWallet({
- onSuccess: () => {
+ const {
+ openWallet,
+ isLoading: isOpenWalletLoading,
+ isSuccess: isOpenWalletSuccess,
+ } = useOpenWallet({
+ onSuccess: ([wallet, walletMeta]) => {
+ selectWalletMeta(walletMeta)
+ selectWallet(wallet)
+ navigateToTxHistory()
+ },
+ onError: (error) => {
+ InteractionManager.runAfterInteractions(() => {
+ return error instanceof InvalidState
+ ? showErrorDialog(errorMessages.walletStateInvalid, intl)
+ : error instanceof NetworkError
+ ? showErrorDialog(errorMessages.networkError, intl)
+ : showErrorDialog(errorMessages.generalError, intl, {message: error.message})
+ })
+ },
+ })
+
+ const {
+ createWallet,
+ isLoading: isCreateWalletLoading,
+ isSuccess: isCreateWalletSuccess,
+ } = useCreateWallet({
+ onSuccess: async (wallet) => {
+ const walletStorage = storage.join('wallet/')
+ const walletMeta = await walletStorage.getItem(wallet.id, parseWalletMeta)
+
+ if (!walletMeta) throw new Error('invalid wallet meta')
+
+ openWallet(walletMeta)
track.createWalletDetailsSettled()
- resetToWalletSelection()
},
onError: (error) => {
InteractionManager.runAfterInteractions(() => {
@@ -116,6 +143,14 @@ export const WalletDetailsScreen = () => {
},
})
+ 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
+
const handleCreateWallet = React.useCallback(() => {
track.createWalletDetailsSubmitted()
@@ -181,7 +216,7 @@ export const WalletDetailsScreen = () => {
checksumLine={1}
linesOfText={[
strings.walletChecksumModalCardFirstItem,
- strings.walletChecksumModalCardSecondItem,
+ strings.walletChecksumModalCardSecondItem(plate.accountPlate.TextPart),
strings.walletChecksumModalCardThirdItem,
]}
/>
@@ -233,6 +268,7 @@ export const WalletDetailsScreen = () => {
onSubmitEditing={() => passwordRef.current?.focus()}
testID="walletNameInput"
autoComplete="off"
+ disabled={isLoading}
showErrorOnBlur
/>
@@ -249,6 +285,7 @@ export const WalletDetailsScreen = () => {
onSubmitEditing={() => passwordConfirmationRef.current?.focus()}
testID="walletPasswordInput"
autoComplete="off"
+ disabled={isLoading}
showErrorOnBlur
/>
@@ -265,6 +302,7 @@ export const WalletDetailsScreen = () => {
errorText={passwordConfirmationErrorText}
testID="walletRepeatPasswordInput"
autoComplete="off"
+ disabled={isLoading}
showErrorOnBlur
/>
@@ -289,8 +327,8 @@ export const WalletDetailsScreen = () => {