diff --git a/packages/extension-ui/src/Popup/CreateAccount/AccountName.tsx b/packages/extension-ui/src/Popup/CreateAccount/AccountName.tsx index 5c0a4aa7..e0f7b9ea 100644 --- a/packages/extension-ui/src/Popup/CreateAccount/AccountName.tsx +++ b/packages/extension-ui/src/Popup/CreateAccount/AccountName.tsx @@ -12,9 +12,10 @@ interface Props { isBusy: boolean; onBackClick: () => void; onCreate: (name: string, password: string) => void | Promise; + onNameChange: (name: string) => void; } -function AccountName ({ isBusy, onBackClick, onCreate }: Props): React.ReactElement { +function AccountName ({ isBusy, onBackClick, onCreate, onNameChange }: Props): React.ReactElement { const { t } = useTranslation(); const [name, setName] = useState(null); const [password, setPassword] = useState(null); @@ -24,11 +25,16 @@ function AccountName ({ isBusy, onBackClick, onCreate }: Props): React.ReactElem [name, password, onCreate] ); + const _onNameChange = useCallback((name: string | null) => { + onNameChange(name || ''); + setName(name); + }, [onNameChange]); + return ( <> diff --git a/packages/extension-ui/src/Popup/CreateAccount/CreateAccount.test.tsx b/packages/extension-ui/src/Popup/CreateAccount/CreateAccount.test.tsx index 8c9e6b2a..1bc9f68c 100644 --- a/packages/extension-ui/src/Popup/CreateAccount/CreateAccount.test.tsx +++ b/packages/extension-ui/src/Popup/CreateAccount/CreateAccount.test.tsx @@ -120,6 +120,13 @@ describe('Create Account', () => { expect(wrapper.find(InputWithLabel).find('[data-input-name]').find(Input).prop('withError')).toBe(true); }); + it('after typing 3 characters into name input, the name is reflected in the account card', async () => { + const NAME = 'abc'; + + await enterName(NAME); + expect(wrapper.find('[data-field="name"]').first().text()).toBe(NAME); + }); + it('after typing 3 characters into name input, first password input is visible', async () => { await enterName('abc'); expect(wrapper.find(InputWithLabel).find('[data-input-name]').find(Input).first().prop('withError')).toBe(false); diff --git a/packages/extension-ui/src/Popup/CreateAccount/index.tsx b/packages/extension-ui/src/Popup/CreateAccount/index.tsx index 6a28d536..13dae479 100644 --- a/packages/extension-ui/src/Popup/CreateAccount/index.tsx +++ b/packages/extension-ui/src/Popup/CreateAccount/index.tsx @@ -16,6 +16,7 @@ export default function CreateAccount (): React.ReactElement { const [isBusy, setIsBusy] = useState(false); const [step, setStep] = useState(1); const [account, setAccount] = useState(null); + const [name, setName] = useState(''); useEffect((): void => { createSeed() @@ -52,7 +53,10 @@ export default function CreateAccount (): React.ReactElement { />
-
+
{account && ( step === 1 @@ -68,6 +72,7 @@ export default function CreateAccount (): React.ReactElement { isBusy={isBusy} onBackClick={_onPreviousStep} onCreate={_onCreate} + onNameChange={setName} /> ) )}