Show the account's name typed in on Account creation screen (#593)

* show name on account card

* with useCallback

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<void | boolean>;
+  onNameChange: (name: string) => void;
 }
 
-function AccountName ({ isBusy, onBackClick, onCreate }: Props): React.ReactElement<Props> {
+function AccountName ({ isBusy, onBackClick, onCreate, onNameChange }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [name, setName] = useState<string | null>(null);
   const [password, setPassword] = useState<string | null>(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 (
     <>
       <Name
         isFocused
-        onChange={setName}
+        onChange={_onNameChange}
       />
       <Password onChange={setPassword} />
       <VerticalSpace />

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);

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 | { address: string; seed: string }>(null);
+  const [name, setName] = useState('');
 
   useEffect((): void => {
     createSeed()
@@ -52,7 +53,10 @@ export default function CreateAccount (): React.ReactElement {
       />
       <Loading>
         <div>
-          <Address address={account?.address} />
+          <Address
+            address={account?.address}
+            name={name}
+          />
         </div>
         {account && (
           step === 1
@@ -68,6 +72,7 @@ export default function CreateAccount (): React.ReactElement {
                 isBusy={isBusy}
                 onBackClick={_onPreviousStep}
                 onCreate={_onCreate}
+                onNameChange={setName}
               />
             )
         )}