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 = () => {