diff --git a/packages/extension-ui/src/Popup/CreateAccount/CreateAccount.test.tsx b/packages/extension-ui/src/Popup/CreateAccount/CreateAccount.test.tsx index 1e935e96..f41b2c8a 100644 --- a/packages/extension-ui/src/Popup/CreateAccount/CreateAccount.test.tsx +++ b/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('/'); }); }); diff --git a/packages/extension-ui/src/Popup/CreateAccount/index.tsx b/packages/extension-ui/src/Popup/CreateAccount/index.tsx index c990060c..dad669cb 100644 --- a/packages/extension-ui/src/Popup/CreateAccount/index.tsx +++ b/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); 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 {
@@ -68,16 +77,33 @@ export default function CreateAccount (): React.ReactElement { /> ) : ( - ('Add the account with the generated seed')} - isBusy={isBusy} - onBackClick={_onPreviousStep} - onCreate={_onCreate} - onNameChange={setName} - /> + <> + ('Network')} + onChange={setGenesis} + options={options} + value={genesis} + /> + ('Add the account with the generated seed')} + isBusy={isBusy} + onBackClick={_onPreviousStep} + onCreate={_onCreate} + onNameChange={setName} + /> + ) )} ); } + +export default styled(CreateAccount)` + margin-bottom: 16px; + + label::after { + right: 36px; + } +`; diff --git a/packages/extension-ui/src/hooks/useGenesisHashOptions.ts b/packages/extension-ui/src/hooks/useGenesisHashOptions.ts index 88e9a78b..4927be3c 100644 --- a/packages/extension-ui/src/hooks/useGenesisHashOptions.ts +++ b/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([]); @@ -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(