Allow ethereum format for ethereum chains (#776)

* allow ethereum format for ethereum chains

* remove logs

* remove load event

* lint

* add ethereum and handle ethereum format

* Moves onChangeNetwork outside of rendering

* Restore window load event

* Lint

* Updates create account test

Co-authored-by: Crystalin <alan@purestake.com>

packages/extension-base/src/utils/canDerive.ts

@@ -4,5 +4,5 @@
 import type { KeypairType } from '@polkadot/util-crypto/types';
 
 export function canDerive (type?: KeypairType): boolean {
-  return !!type && ['ed25519', 'sr25519', 'ecdsa'].includes(type);
+  return !!type && ['ed25519', 'sr25519', 'ecdsa', 'ethereum'].includes(type);
 }

packages/extension-dapp/src/index.ts

@@ -30,7 +30,7 @@ function throwError (method: string): never {
 // internal helper to map from Array<InjectedAccount> -> Array<InjectedAccountWithMeta>
 function mapAccounts (source: string, list: InjectedAccount[], ss58Format?: number): InjectedAccountWithMeta[] {
   return list.map(({ address, genesisHash, name }): InjectedAccountWithMeta => {
-    const encodedAddress = encodeAddress(decodeAddress(address), ss58Format);
+    const encodedAddress = address.length === 42 ? address : encodeAddress(decodeAddress(address), ss58Format);
 
     return ({
       address: encodedAddress,
@@ -108,6 +108,7 @@ export async function web3Accounts ({ ss58Format }: Web3AccountsOptions = {}): P
 
   const accounts: InjectedAccountWithMeta[] = [];
   const injected = await web3EnablePromise;
+
   const retrieved = await Promise.all(
     injected.map(async ({ accounts, name: source }): Promise<InjectedAccountWithMeta[]> => {
       try {

packages/extension-inject/src/types.ts

@@ -54,6 +54,7 @@ export interface MetadataDefBase {
   genesisHash: string;
   icon: string;
   ss58Format: number;
+  chainType?: 'substrate' | 'ethereum'
 }
 
 export interface MetadataDef extends MetadataDefBase {

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

@@ -105,7 +105,7 @@ describe('Create Account', () => {
       wrapper.find('[data-button-action="add new root"] button').simulate('click');
       await act(flushAllPromises);
 
-      expect(messaging.createAccountSuri).toBeCalledWith('abc', 'abcdef', exampleAccount.seed, undefined, kusamaGenesis);
+      expect(messaging.createAccountSuri).toBeCalledWith('abc', 'abcdef', exampleAccount.seed, 'sr25519', kusamaGenesis);
       expect(onActionStub).toBeCalledWith('/');
     });
   });

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

@@ -23,10 +23,10 @@ function CreateAccount ({ className }: Props): React.ReactElement {
   const [isBusy, setIsBusy] = useState(false);
   const [step, setStep] = useState(1);
   const [account, setAccount] = useState<null | { address: string; seed: string }>(null);
-  const type = DEFAULT_TYPE;
+  const [type, setType] = useState(DEFAULT_TYPE);
   const [name, setName] = useState('');
   const options = useGenesisHashOptions();
-  const [genesis, setGenesis] = useState('');
+  const [genesisHash, setGenesis] = useState('');
 
   useEffect((): void => {
     createSeed(undefined, type)
@@ -40,7 +40,7 @@ function CreateAccount ({ className }: Props): React.ReactElement {
       if (name && password && account) {
         setIsBusy(true);
 
-        createAccountSuri(name, password, account.seed, undefined, genesis)
+        createAccountSuri(name, password, account.seed, type, genesisHash)
           .then(() => onAction('/'))
           .catch((error: Error): void => {
             setIsBusy(false);
@@ -48,12 +48,24 @@ function CreateAccount ({ className }: Props): React.ReactElement {
           });
       }
     },
-    [account, genesis, onAction]
+    [account, genesisHash, onAction, type]
   );
 
   const _onNextStep = useCallback(() => setStep((step) => step + 1), []);
   const _onPreviousStep = useCallback(() => setStep((step) => step - 1), []);
 
+  const _onChangeNetwork = useCallback((newGenesisHash: string) => {
+    const chain = options.find(({ value }) => {
+      return newGenesisHash === value;
+    });
+
+    if (chain?.text === 'Moonbase Alpha') { // TODO: use list
+      setType('ethereum');
+    }
+
+    setGenesis(newGenesisHash);
+  }, [options]);
+
   return (
     <>
       <HeaderWithSteps
@@ -64,7 +76,7 @@ function CreateAccount ({ className }: Props): React.ReactElement {
         <div>
           <Address
             address={account?.address}
-            genesisHash={genesis}
+            genesisHash={genesisHash}
             name={name}
           />
         </div>
@@ -81,9 +93,9 @@ function CreateAccount ({ className }: Props): React.ReactElement {
                 <Dropdown
                   className={className}
                   label={t<string>('Network')}
-                  onChange={setGenesis}
+                  onChange={_onChangeNetwork}
                   options={options}
-                  value={genesis}
+                  value={genesisHash}
                 />
                 <AccountNamePasswordCreation
                   buttonLabel={t<string>('Add the account with the generated seed')}

packages/extension-ui/src/components/Address.tsx

@@ -99,6 +99,7 @@ function Address ({ actions, address, children, className, genesisHash, isExtern
   const settings = useContext(SettingsContext);
   const [{ account, formatted, genesisHash: recodedGenesis, prefix, type }, setRecoded] = useState<Recoded>(defaultRecoded);
   const chain = useMetadata(genesisHash || recodedGenesis, true);
+
   const [showActionsMenu, setShowActionsMenu] = useState(false);
   const [moveMenuUp, setIsMovedMenu] = useState(false);
   const actionsRef = useRef<HTMLDivElement>(null);
@@ -114,7 +115,8 @@ function Address ({ actions, address, children, className, genesisHash, isExtern
     }
 
     const accountByAddress = findAccountByAddress(accounts, address);
-    const recoded = (accountByAddress?.type === 'ethereum' || (!accountByAddress && givenType === 'ethereum'))
+
+    const recoded = (chain?.definition.chainType === 'ethereum' || accountByAddress?.type === 'ethereum' || (!accountByAddress && givenType === 'ethereum'))
       ? { account: accountByAddress, formatted: address, type: 'ethereum' } as Recoded
       : recodeAddress(address, accounts, chain, settings);