From a71868f8fbd7bb4a64ce4dac0174c98439c3670b Mon Sep 17 00:00:00 2001 From: devchenyan Date: Wed, 3 Jul 2024 10:41:03 +0800 Subject: [PATCH 1/3] feat: Optimize the process of importing wallets via phrase seeds --- packages/neuron-ui/package.json | 1 + .../src/components/WalletWizard/hooks.ts | 11 +++ .../src/components/WalletWizard/index.tsx | 62 +++++++++---- .../WalletWizard/walletWizard.module.scss | 29 +++++- packages/neuron-ui/src/locales/en.json | 13 ++- packages/neuron-ui/src/locales/es.json | 13 ++- packages/neuron-ui/src/locales/fr.json | 13 ++- packages/neuron-ui/src/locales/zh-tw.json | 13 ++- packages/neuron-ui/src/locales/zh.json | 13 ++- .../widgets/MnemonicInput/index.module.scss | 40 +++++++- .../src/widgets/MnemonicInput/index.tsx | 91 ++++++++++++++++++- 11 files changed, 247 insertions(+), 52 deletions(-) diff --git a/packages/neuron-ui/package.json b/packages/neuron-ui/package.json index 82ca18157c..c832d47fd1 100644 --- a/packages/neuron-ui/package.json +++ b/packages/neuron-ui/package.json @@ -54,6 +54,7 @@ "@ckb-lumos/rpc": "0.21.1", "@ckb-lumos/base": "0.21.1", "@ckb-lumos/codec": "0.21.1", + "@ckb-lumos/hd": "0.21.1", "@ckb-lumos/helpers": "0.21.1", "@ckb-lumos/config-manager": "0.21.1", "@ckb-lumos/common-scripts": "0.21.1", diff --git a/packages/neuron-ui/src/components/WalletWizard/hooks.ts b/packages/neuron-ui/src/components/WalletWizard/hooks.ts index c52c3867bd..fbc838288a 100644 --- a/packages/neuron-ui/src/components/WalletWizard/hooks.ts +++ b/packages/neuron-ui/src/components/WalletWizard/hooks.ts @@ -7,6 +7,17 @@ export const useInputWords = () => { const idx = Number(e.target.dataset.idx) if (Number.isNaN(idx)) return const { value } = e.target + if (Number(idx) === 0) { + const list = value + .trim() + .replace(/[^0-9a-z]+/g, ' ') + .split(' ') + if (list.length === 12) { + setInputsWords(list) + return + } + } + setInputsWords(v => { const newWords = [...v] newWords[idx] = value diff --git a/packages/neuron-ui/src/components/WalletWizard/index.tsx b/packages/neuron-ui/src/components/WalletWizard/index.tsx index 384492854a..507678b82a 100644 --- a/packages/neuron-ui/src/components/WalletWizard/index.tsx +++ b/packages/neuron-ui/src/components/WalletWizard/index.tsx @@ -20,7 +20,7 @@ import i18n from 'utils/i18n' import MnemonicInput from 'widgets/MnemonicInput' import ReplaceDuplicateWalletDialog, { useReplaceDuplicateWallet } from 'components/ReplaceDuplicateWalletDialog' import Alert from 'widgets/Alert' -import { Loading } from 'widgets/Icons/icon' +import { Loading, SuccessInfo, Error as ErrorIcon } from 'widgets/Icons/icon' import TextField from 'widgets/TextField' import { showGlobalAlertDialog, useDispatch } from 'states' import { importedWalletDialogShown } from 'services/localCache' @@ -182,19 +182,17 @@ const Welcome = ({ rootPath = '/wizard/', wallets = [], dispatch }: WizardElemen Welcome.displayName = 'Welcome' -const typeHits: Record = { - [MnemonicAction.Create]: 'wizard.write-down-seed', - [MnemonicAction.Verify]: 'wizard.input-seed-verify', - [MnemonicAction.Import]: '', -} - const Mnemonic = ({ state = initState, rootPath = '/wizard/', dispatch }: WizardElementProps) => { const { generated, imported } = state const navigate = useNavigate() const { type = MnemonicAction.Create } = useParams<{ type: MnemonicAction }>() const [t] = useTranslation() const isCreate = type === MnemonicAction.Create - const message = isCreate ? 'wizard.your-wallet-seed-is' : 'wizard.input-your-seed' + const message = { + [MnemonicAction.Create]: 'wizard.your-wallet-seed-is', + [MnemonicAction.Verify]: 'wizard.replenish-your-seed', + [MnemonicAction.Import]: 'wizard.input-your-seed', + }[type] const { inputsWords, onChangeInput, setInputsWords } = useInputWords() const [searchParams] = useSearchParams() const disableNext = @@ -202,6 +200,8 @@ const Mnemonic = ({ state = initState, rootPath = '/wizard/', dispatch }: Wizard (type === MnemonicAction.Verify && generated !== inputsWords.join(' ')) const [step, changeStep] = useState(0) + const [blankIndexes, setBlankIndexes] = useState([]) + useEffect(() => { if (type === MnemonicAction.Create) { generateMnemonic().then(res => { @@ -210,7 +210,15 @@ const Mnemonic = ({ state = initState, rootPath = '/wizard/', dispatch }: Wizard type: 'generated', payload: res.result, }) - setInputsWords(new Array(12).fill('')) + const uniqueRandomArray = new Set() + while (uniqueRandomArray.size < 3) { + const randomInt = Math.floor(Math.random() * 12) + uniqueRandomArray.add(randomInt) + } + const nums = [...uniqueRandomArray] + const list = res.result.split(' ').map((item: string, index: number) => (nums.includes(index) ? '' : item)) + setBlankIndexes(nums) + setInputsWords(list) } }) } else { @@ -219,7 +227,7 @@ const Mnemonic = ({ state = initState, rootPath = '/wizard/', dispatch }: Wizard payload: '', }) } - }, [dispatch, type, navigate]) + }, [dispatch, type, navigate, setBlankIndexes]) const globalDispatch = useDispatch() @@ -285,17 +293,35 @@ const Mnemonic = ({ state = initState, rootPath = '/wizard/', dispatch }: Wizard )}
{t(message)}
+ {type === MnemonicAction.Import ? : null} + {type === MnemonicAction.Create ? ( +
+
+ + {t('wizard.handwritten-recommended')} +
+
+ + {t('wizard.do-not-copy')} +
+
+ + {t('wizard.do-not-save-scrrenshots')} +
+
+ ) : null} + {type === MnemonicAction.Verify ?
{t('wizard.input-seed-verify')}
: null} {type === MnemonicAction.Import ? ( - + ) : ( -
{t(typeHits[type])}
+ )} -
+ ))} +
+ ) : null} ))} From 0dcc57f735ee132119826b6d640ee866fb57c902 Mon Sep 17 00:00:00 2001 From: devchenyan Date: Sat, 6 Jul 2024 17:25:42 +0800 Subject: [PATCH 2/3] feat: update --- .../src/components/WalletWizard/hooks.ts | 11 ++++++++++- .../src/components/WalletWizard/index.tsx | 19 +++++++++---------- .../WalletWizard/walletWizard.module.scss | 6 ++++++ packages/neuron-ui/src/locales/en.json | 1 + packages/neuron-ui/src/locales/es.json | 1 + packages/neuron-ui/src/locales/fr.json | 1 + packages/neuron-ui/src/locales/zh-tw.json | 1 + packages/neuron-ui/src/locales/zh.json | 1 + .../src/widgets/MnemonicInput/index.tsx | 15 ++++++++++++--- 9 files changed, 42 insertions(+), 14 deletions(-) diff --git a/packages/neuron-ui/src/components/WalletWizard/hooks.ts b/packages/neuron-ui/src/components/WalletWizard/hooks.ts index fbc838288a..b8352cc286 100644 --- a/packages/neuron-ui/src/components/WalletWizard/hooks.ts +++ b/packages/neuron-ui/src/components/WalletWizard/hooks.ts @@ -3,7 +3,16 @@ import { useState, useCallback } from 'react' export const useInputWords = () => { const [inputsWords, setInputsWords] = useState(new Array(12).fill('')) const onChangeInput = useCallback( - (e: React.ChangeEvent) => { + ( + e: + | React.ChangeEvent + | { + target: { + dataset: { idx: string } + value: string + } + } + ) => { const idx = Number(e.target.dataset.idx) if (Number.isNaN(idx)) return const { value } = e.target diff --git a/packages/neuron-ui/src/components/WalletWizard/index.tsx b/packages/neuron-ui/src/components/WalletWizard/index.tsx index 507678b82a..6fb44aeb7d 100644 --- a/packages/neuron-ui/src/components/WalletWizard/index.tsx +++ b/packages/neuron-ui/src/components/WalletWizard/index.tsx @@ -311,17 +311,16 @@ const Mnemonic = ({ state = initState, rootPath = '/wizard/', dispatch }: Wizard ) : null} {type === MnemonicAction.Verify ?
{t('wizard.input-seed-verify')}
: null} + {type === MnemonicAction.Import ? ( - - ) : ( - - )} +
{t('wizard.input-seed-first-empty-space')}
+ ) : null}
)}
{t(message)}
- {type === MnemonicAction.Import ? : null} - {type === MnemonicAction.Create ? ( + {type === MnemonicAction.Import && } + {type === MnemonicAction.Create && (
@@ -309,8 +309,8 @@ const Mnemonic = ({ state = initState, rootPath = '/wizard/', dispatch }: Wizard {t('wizard.do-not-save-scrrenshots')}
- ) : null} - {type === MnemonicAction.Verify ?
{t('wizard.input-seed-verify')}
: null} + )} + {type === MnemonicAction.Verify &&
{t('wizard.input-seed-verify')}
} - {type === MnemonicAction.Import ? ( -
{t('wizard.input-seed-first-empty-space')}
- ) : null} + {type === MnemonicAction.Import &&
{t('wizard.input-seed-first-empty-space')}
}