Network dropdown at account creation (#640)

* network dropdown at account creation

* lint

packages/extension-ui/src/Popup/CreateAccount/CreateAccount.test.tsx

@@ -94,12 +94,18 @@ describe('Create Account', () => {
       wrapper.update();
     });
 
-    it('saves account with provided name and password', async () => {
+    it('saves account with provided network, name and password', async () => {
+      const kusamaGenesis = '0xb0a8d493285c2df73290dfb7e61f870f17b41801197a149ca93654499ea3dafe';
+
+      wrapper.find('select').simulate('change', { target: { value: kusamaGenesis } });
+      await act(flushAllPromises);
+      wrapper.update();
+
       await enterName('abc').then(password('abcdef')).then(repeat('abcdef'));
       wrapper.find('[data-button-action="add new root"] button').simulate('click');
       await act(flushAllPromises);
 
-      expect(messaging.createAccountSuri).toBeCalledWith('abc', 'abcdef', exampleAccount.seed);
+      expect(messaging.createAccountSuri).toBeCalledWith('abc', 'abcdef', exampleAccount.seed, undefined, kusamaGenesis);
       expect(onActionStub).toBeCalledWith('/');
     });
   });

packages/extension-ui/src/Popup/CreateAccount/index.tsx

@@ -2,16 +2,22 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React, { useCallback, useContext, useEffect, useState } from 'react';
+import styled from 'styled-components';
 
-import { ActionContext, Address, Loading } from '../../components';
+import { ActionContext, Address, Dropdown, Loading } from '../../components';
 import AccountNamePasswordCreation from '../../components/AccountNamePasswordCreation';
+import useGenesisHashOptions from '../../hooks/useGenesisHashOptions';
 import useTranslation from '../../hooks/useTranslation';
 import { createAccountSuri, createSeed } from '../../messaging';
 import { HeaderWithSteps } from '../../partials';
 import { DEFAULT_TYPE } from '../../util/defaultType';
 import Mnemonic from './Mnemonic';
 
-export default function CreateAccount (): React.ReactElement {
+interface Props {
+  className?: string;
+}
+
+function CreateAccount ({ className }: Props): React.ReactElement {
   const { t } = useTranslation();
   const onAction = useContext(ActionContext);
   const [isBusy, setIsBusy] = useState(false);
@@ -19,6 +25,8 @@ export default function CreateAccount (): React.ReactElement {
   const [account, setAccount] = useState<null | { address: string; seed: string }>(null);
   const type = DEFAULT_TYPE;
   const [name, setName] = useState('');
+  const options = useGenesisHashOptions();
+  const [genesis, setGenesis] = useState('');
 
   useEffect((): void => {
     createSeed(undefined, type)
@@ -32,7 +40,7 @@ export default function CreateAccount (): React.ReactElement {
       if (name && password && account) {
         setIsBusy(true);
 
-        createAccountSuri(name, password, account.seed)
+        createAccountSuri(name, password, account.seed, undefined, genesis)
           .then(() => onAction('/'))
           .catch((error: Error): void => {
             setIsBusy(false);
@@ -40,7 +48,7 @@ export default function CreateAccount (): React.ReactElement {
           });
       }
     },
-    [account, onAction]
+    [account, genesis, onAction]
   );
 
   const _onNextStep = useCallback(() => setStep((step) => step + 1), []);
@@ -56,6 +64,7 @@ export default function CreateAccount (): React.ReactElement {
         <div>
           <Address
             address={account?.address}
+            genesisHash={genesis}
             name={name}
           />
         </div>
@@ -68,16 +77,33 @@ export default function CreateAccount (): React.ReactElement {
               />
             )
             : (
-              <AccountNamePasswordCreation
-                buttonLabel={t<string>('Add the account with the generated seed')}
-                isBusy={isBusy}
-                onBackClick={_onPreviousStep}
-                onCreate={_onCreate}
-                onNameChange={setName}
-              />
+              <>
+                <Dropdown
+                  className={className}
+                  label={t<string>('Network')}
+                  onChange={setGenesis}
+                  options={options}
+                  value={genesis}
+                />
+                <AccountNamePasswordCreation
+                  buttonLabel={t<string>('Add the account with the generated seed')}
+                  isBusy={isBusy}
+                  onBackClick={_onPreviousStep}
+                  onCreate={_onCreate}
+                  onNameChange={setName}
+                />
+              </>
             )
         )}
       </Loading>
     </>
   );
 }
+
+export default styled(CreateAccount)`
+  margin-bottom: 16px;
+
+  label::after {
+    right: 36px;
+  }
+`;

packages/extension-ui/src/hooks/useGenesisHashOptions.ts

@@ -12,6 +12,8 @@ interface Option {
   value: string;
 }
 
+const RELAY_CHAIN = 'Relay Chain';
+
 export default function (): Option[] {
   const { t } = useTranslation();
   const [metadataChains, setMetadatachains] = useState<Option[]>([]);
@@ -29,10 +31,18 @@ export default function (): Option[] {
       text: t('Allow use on any chain'),
       value: ''
     },
+    // put the relay chains at the top
+    ...chains.filter(({ chain }) => chain.includes(RELAY_CHAIN))
+      .map(({ chain, genesisHash }) => ({
+        text: chain,
+        value: genesisHash
+      })),
     ...chains.map(({ chain, genesisHash }) => ({
       text: chain,
       value: genesisHash
     }))
+      // remove the relay chains, they are at the top already
+      .filter(({ text }) => !text.includes(RELAY_CHAIN))
       .concat(
       // get any chain present in the metadata and not already part of chains
         ...metadataChains.filter(