Bump dev (incl. lint fixes) (#304)

jest.config.js

@@ -5,9 +5,10 @@ module.exports = Object.assign({}, config, {
   browser: true,
   moduleNameMapper: {
     '@polkadot/extension-(base|chains|dapp|inject|ui)(.*)$': '<rootDir>/packages/extension-$1/src/$2',
+    // eslint-disable-next-line sort-keys
     '@polkadot/extension(.*)$': '<rootDir>/packages/extension/src/$1',
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
+    '\\.(css|less)$': 'empty/object',
-    '\\.(css|less)$': 'empty/object'
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js'
   },
   modulePathIgnorePatterns: [
     '<rootDir>/packages/extension/build',

package.json

@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
-    "@polkadot/dev": "^0.52.1",
+    "@polkadot/dev": "^0.52.3",
     "@polkadot/typegen": "^1.9.1",
     "@types/jest": "^25.1.4",
     "copy-webpack-plugin": "^5.1.1",

packages/extension-base/package.json

@@ -8,7 +8,7 @@
     "@babel/runtime": "^7.9.2",
     "@polkadot/api": "^1.9.1",
     "@polkadot/keyring": "^2.7.1",
-    "@polkadot/ui-keyring": "^0.52.0-beta.21",
+    "@polkadot/ui-keyring": "^0.52.0-beta.22",
     "extensionizer": "^1.0.1"
   }
 }

packages/extension-base/src/background/handlers/Extension.test.ts

@@ -56,8 +56,8 @@ describe('Extension', () => {
     test('pri(derivation.validate) passes for valid suri', async () => {
       const result = await extension.handle('id', 'pri(derivation.validate)', {
         parentAddress: address,
-        suri: '//path',
+        parentPassword: password,
-        parentPassword: password
+        suri: '//path'
       }, {} as chrome.runtime.Port);
       expect(result).toStrictEqual({
         address: '5FP3TT3EruYBNh8YM8yoxsreMx7uZv1J1zNX7fFhoC5enwmN',
@@ -68,37 +68,37 @@ describe('Extension', () => {
     test('pri(derivation.validate) throws for invalid suri', async () => {
       await expect(extension.handle('id', 'pri(derivation.validate)', {
         parentAddress: address,
-        suri: 'invalid-path',
+        parentPassword: password,
-        parentPassword: password
+        suri: 'invalid-path'
       }, {} as chrome.runtime.Port)).rejects.toStrictEqual(new Error('"invalid-path" is not a valid derivation path'));
     });
 
     test('pri(derivation.validate) throws for invalid password', async () => {
       await expect(extension.handle('id', 'pri(derivation.validate)', {
         parentAddress: address,
-        suri: '//path',
+        parentPassword: 'invalid-password',
-        parentPassword: 'invalid-password'
+        suri: '//path'
       }, {} as chrome.runtime.Port)).rejects.toStrictEqual(new Error('invalid password'));
     });
 
     test('pri(derivation.create) adds a derived account', async () => {
       await extension.handle('id', 'pri(derivation.create)', {
-        parentAddress: address,
         name: 'child',
-        suri: '//path',
+        parentAddress: address,
         parentPassword: password,
-        password
+        password,
+        suri: '//path'
       }, {} as chrome.runtime.Port);
       expect(keyring.getAccounts()).toHaveLength(2);
     });
 
     test('pri(derivation.create) saves parent address in meta', async () => {
       await extension.handle('id', 'pri(derivation.create)', {
-        parentAddress: address,
         name: 'child',
-        suri: '//path',
+        parentAddress: address,
         parentPassword: password,
-        password
+        password,
+        suri: '//path'
       }, {} as chrome.runtime.Port);
       expect(keyring.getAccount('5FP3TT3EruYBNh8YM8yoxsreMx7uZv1J1zNX7fFhoC5enwmN')?.meta.parentAddress).toEqual(address);
     });

packages/extension-base/src/background/handlers/Extension.ts

@@ -67,7 +67,7 @@ export default class Extension {
   }
 
   private accountsCreateExternal ({ address, genesisHash, name }: RequestAccountCreateExternal): boolean {
-    keyring.addExternal(address, { name, genesisHash });
+    keyring.addExternal(address, { genesisHash, name });
 
     return true;
   }
@@ -166,7 +166,7 @@ export default class Extension {
 
     assert(queued, 'Unable to find request');
 
-    const { resolve, request } = queued;
+    const { request, resolve } = queued;
 
     this.#state.saveMetadata(request);
 
@@ -236,7 +236,7 @@ export default class Extension {
 
     assert(queued, 'Unable to find request');
 
-    const { request, resolve, reject } = queued;
+    const { reject, request, resolve } = queued;
     const pair = keyring.getPair(request.inner.address);
 
     if (!pair) {
@@ -319,7 +319,7 @@ export default class Extension {
     }
   }
 
-  private derivationValidate ({ parentAddress, suri, parentPassword }: RequestDeriveValidate): ResponseDeriveValidate {
+  private derivationValidate ({ parentAddress, parentPassword, suri }: RequestDeriveValidate): ResponseDeriveValidate {
     const childPair = this.derive(parentAddress, suri, parentPassword, {});
 
     return {
@@ -328,7 +328,7 @@ export default class Extension {
     };
   }
 
-  private derivationCreate ({ parentAddress, suri, parentPassword, genesisHash, name, password }: RequestDeriveCreate): boolean {
+  private derivationCreate ({ genesisHash, name, parentAddress, parentPassword, password, suri }: RequestDeriveCreate): boolean {
     const childPair = this.derive(parentAddress, suri, parentPassword, { genesisHash, name, parentAddress });
     keyring.addPair(childPair, password);
 

packages/extension-base/src/background/handlers/State.ts

@@ -252,9 +252,9 @@ export default class State {
       this.#authRequests[id] = {
         id,
         idStr,
+        reject: this.authComplete(id, reject),
         request,
         resolve: this.authComplete(id, resolve),
-        reject: this.authComplete(id, reject),
         url
       };
 
@@ -278,9 +278,9 @@ export default class State {
 
       this.#metaRequests[id] = {
         id,
+        reject: this.metaComplete(id, reject),
         request,
         resolve: this.metaComplete(id, resolve),
-        reject: this.metaComplete(id, reject),
         url
       };
 
@@ -382,9 +382,9 @@ export default class State {
       this.#signRequests[id] = {
         account,
         id,
+        reject: this.signComplete(id, reject),
         request,
         resolve: this.signComplete(id, resolve),
-        reject: this.signComplete(id, reject),
         url
       };
 

packages/extension-base/src/background/handlers/index.ts

@@ -44,7 +44,7 @@ export default function handler<TMessageType extends MessageTypes> ({ id, messag
 
       // only send message back to port if it's still connected
       if (port) {
-        port.postMessage({ id, error: error.message });
+        port.postMessage({ error: error.message, id });
       }
     });
 }

packages/extension-base/src/page/PostMessageProvider.ts

@@ -106,7 +106,7 @@ export default class PostMessageProvider implements InjectedProvider {
 
       return sendRequest(
         'pub(rpc.subscribe)',
-        { type, method, params },
+        { method, params, type },
         (res) => {
           subscription.callback(null, res);
         }
@@ -147,7 +147,7 @@ export default class PostMessageProvider implements InjectedProvider {
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   public async subscribe (type: string, method: string, params: any[], callback: AnyFunction): Promise<number> {
-    const id = await this.send(method, params, { type, callback });
+    const id = await this.send(method, params, { callback, type });
 
     return id as number;
   }

packages/extension-base/src/page/index.ts

@@ -36,7 +36,7 @@ export function sendMessage<TMessageType extends MessageTypes> (message: TMessag
   return new Promise((resolve, reject): void => {
     const id = `${Date.now()}.${++idCounter}`;
 
-    handlers[id] = { resolve, reject, subscriber };
+    handlers[id] = { reject, resolve, subscriber };
 
     const transportRequestMessage: TransportRequestMessage<TMessageType> = {
       id,

packages/extension-chains/src/index.ts

@@ -39,8 +39,8 @@ function metadataExpand (definition: MetadataDef): Chain {
       ? undefined
       : genesisHash,
     hasMetadata: !!metadata,
-    isUnknown,
     icon: icon || 'substrate',
+    isUnknown,
     name: chain,
     registry,
     specVersion,

packages/extension-chains/src/kusama.ts

@@ -4,14 +4,16 @@
 
 // Generated via 'yarn run chain:info --ws wss://kusama-rpc.polkadot.io'
 
+/* eslint-disable sort-keys */
+
 export default {
   chain: 'Kusama',
   genesisHash: '0xb0a8d493285c2df73290dfb7e61f870f17b41801197a149ca93654499ea3dafe',
+  icon: 'polkadot',
   specVersion: 1055,
   ss58Format: 2,
   tokenDecimals: 12,
   tokenSymbol: 'KSM',
-  icon: 'polkadot',
   types: {
     Address: 'AccountId',
     Keys: 'SessionKeys5'

packages/extension-dapp/src/index.ts

@@ -200,5 +200,5 @@ export async function web3UseRpcProvider (source: string, key: string): Promise<
 
   const meta = await provider.startProvider(key);
 
-  return { provider, meta };
+  return { meta, provider };
 }

packages/extension-ui/package.json

@@ -7,8 +7,8 @@
   "dependencies": {
     "@babel/runtime": "^7.9.2",
     "@polkadot/keyring": "^2.7.1",
-    "@polkadot/react-identicon": "^0.52.0-beta.21",
+    "@polkadot/react-identicon": "^0.52.0-beta.22",
-    "@polkadot/react-qr": "^0.52.0-beta.21",
+    "@polkadot/react-qr": "^0.52.0-beta.22",
     "@polkadot/util": "^2.7.1",
     "@polkadot/util-crypto": "^2.7.1",
     "react": "^16.13.1",

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

@@ -11,7 +11,7 @@ interface Props {
   address: string;
 }
 
-function AccountName ({ onCreate, address }: Props): React.ReactElement<Props> {
+function AccountName ({ address, onCreate }: Props): React.ReactElement<Props> {
   const [name, setName] = useState<string | null>(null);
   const [password, setPassword] = useState<string | null>(null);
 

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

@@ -27,8 +27,8 @@ describe('Create Account', () => {
   let wrapper: ReactWrapper;
   let onActionStub: jest.Mock;
   const exampleAccount = {
-    seed: 'horse battery staple correct',
+    address: 'HjoBp62cvsWDA3vtNMWxz6c9q13ReEHi9UGHK7JbZweH5g5',
-    address: 'HjoBp62cvsWDA3vtNMWxz6c9q13ReEHi9UGHK7JbZweH5g5'
+    seed: 'horse battery staple correct'
   };
   const mountComponent = (): ReactWrapper => mount(
     <ActionContext.Provider value={onActionStub}>

packages/extension-ui/src/Popup/Derive/Step.tsx

@@ -7,11 +7,11 @@ import styled from 'styled-components';
 import { Header } from '@polkadot/extension-ui/components';
 
 interface Props {
-  step: number;
   className?: string;
+  step: number;
 }
 
-function Step ({ step, className }: Props): React.ReactElement<Props> {
+function Step ({ className, step }: Props): React.ReactElement<Props> {
   return (
     <Header
       className={className}

packages/extension-ui/src/Popup/Signing/Request.tsx

@@ -29,7 +29,7 @@ interface Props {
 // keep it global, we can and will re-use this across requests
 const registry = new TypeRegistry();
 
-export default function Request ({ account: { isExternal }, request, signId, url, isFirst, buttonText }: Props): React.ReactElement<Props> | null {
+export default function Request ({ account: { isExternal }, buttonText, isFirst, request, signId, url }: Props): React.ReactElement<Props> | null {
   const onAction = useContext(ActionContext);
   const [hexBytes, setHexBytes] = useState<string | null>(null);
   const [extrinsic, setExtrinsic] = useState<ExtrinsicPayload | null>(null);

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

@@ -71,10 +71,8 @@ describe.skip('Signing requests', () => {
         address: '5D4bqjQRPgdMBK8bNvhX4tSuCtSGZS7rZjD5XH5SoKcFeKn5',
         name: 'acc1'
       },
-      url: 'polkadot.js',
       id: '1574174715509.78',
       request: {
-        sign: jest.fn(),
         inner: {
           address: '5D4bqjQRPgdMBK8bNvhX4tSuCtSGZS7rZjD5XH5SoKcFeKn5',
           blockHash: '0xc288fbc472dab27d13ce58212eeb1243f460c5b0f9a65e9de97cbbf9bc761cb0',
@@ -86,17 +84,17 @@ describe.skip('Signing requests', () => {
           specVersion: '0x00000070',
           tip: '0x00000000000000000000000000000000',
           version: 1
-        }
+        },
-      }
+        sign: jest.fn()
+      },
+      url: 'polkadot.js'
     }, { // 10000000000 nDOT -> 5D1ss3KFnzNtLzRDfUhqLivzVvt5BDrBnK21dMf1si2twPuj
       account: {
         address: '5E9nq1yGJJFiP8C75ryD9J2R62q2cesz6NumLnuXRgmuN5DG',
         name: 'acc2'
       },
-      url: 'polkadot.js',
       id: '1574174306604.76',
       request: {
-        sign: jest.fn(),
         inner: {
           address: '5E9nq1yGJJFiP8C75ryD9J2R62q2cesz6NumLnuXRgmuN5DG',
           blockHash: '0xf3b92cf71c84762ba1cb59dc4fd192f1824171a96b43bce44ceb0671b378d15a',
@@ -108,8 +106,10 @@ describe.skip('Signing requests', () => {
           specVersion: '0x00000070',
           tip: '0x00000000000000000000000000000000',
           version: 1
-        }
+        },
-      }
+        sign: jest.fn()
+      },
+      url: 'polkadot.js'
     }];
     onActionStub = jest.fn();
     await mountComponent();
@@ -157,10 +157,8 @@ describe.skip('Signing requests', () => {
           isExternal: true,
           name: 'external'
         },
-        url: 'polkadot.js',
         id: '1574174306604.76',
         request: {
-          sign: jest.fn(),
           inner: {
             address: '5Cf1CGZas62RWwce3d2EPqUvSoi1txaXKd9M5w9bEFSsQtRe',
             blockHash: '0xf3b92cf71c84762ba1cb59dc4fd192f1824171a96b43bce44ceb0671b378d15a',
@@ -172,8 +170,10 @@ describe.skip('Signing requests', () => {
             specVersion: '0x00000070',
             tip: '0x00000000000000000000000000000000',
             version: 1
-          }
+          },
-        }
+          sign: jest.fn()
+        },
+        url: 'polkadot.js'
       }];
       await mountComponent();
       expect(wrapper.find(Extrinsic)).toHaveLength(0);

packages/extension-ui/src/Popup/Signing/TransactionIndex.tsx

@@ -15,7 +15,7 @@ interface Props {
   className?: string;
 }
 
-function TransactionIndex ({ index, totalItems, onNextClick, onPreviousClick }: Props): React.ReactElement<Props> {
+function TransactionIndex ({ index, onNextClick, onPreviousClick, totalItems }: Props): React.ReactElement<Props> {
   const previousClickActive = index !== 0;
   const nextClickActive = index < totalItems - 1;
 

packages/extension-ui/src/Popup/Signing/Unlock.tsx

@@ -12,7 +12,7 @@ interface Props {
   buttonText?: string;
 }
 
-export default function Unlock ({ className, onSign, buttonText = 'Sign the transaction' }: Props): React.ReactElement<Props> {
+export default function Unlock ({ buttonText = 'Sign the transaction', className, onSign }: Props): React.ReactElement<Props> {
   const [error, setError] = useState('');
   const [password, setPassword] = useState('');
 

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

@@ -7,13 +7,13 @@ import Svg from '@polkadot/extension-ui/components/Svg';
 import styled from 'styled-components';
 
 interface Props {
-  icon?: string;
-  text: string;
-  onClick: MouseEventHandler<HTMLDivElement>;
   className?: string;
+  icon?: string;
+  onClick: MouseEventHandler<HTMLDivElement>;
+  text: string;
 }
 
-function ActionText ({ icon, className, text, onClick }: Props): React.ReactElement<Props> {
+function ActionText ({ className, icon, onClick, text }: Props): React.ReactElement<Props> {
   return (
     <div
       className={className}

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

@@ -12,11 +12,11 @@ import React from 'react';
 import styled from 'styled-components';
 
 interface Props {
-  onClick: () => void;
   className?: string;
+  onClick: () => void;
 }
 
-function AddAccountImage ({ onClick, className }: Props): React.ReactElement<Props> {
+function AddAccountImage ({ className, onClick }: Props): React.ReactElement<Props> {
   return (
     <svg className={className} width='265' height='265' viewBox='0 0 265 265' fill='none' xmlns='http://www.w3.org/2000/svg'>
       <mask id='mask0' mask-type='alpha' maskUnits='userSpaceOnUse' x='40' y='40' width='185' height='185'>

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

@@ -62,7 +62,7 @@ function recodeAddress (address: string, accounts: AccountJson[], chain: Chain |
 
 const ACCOUNTS_SCREEN_HEIGHT = 500;
 
-function Address ({ address, className, children, genesisHash, name, actions }: Props): React.ReactElement<Props> {
+function Address ({ actions, address, children, className, genesisHash, name }: Props): React.ReactElement<Props> {
   const accounts = useContext(AccountContext);
   const chain = useMetadata(genesisHash);
   const [{ account, formatted, prefix }, setRecoded] = useState<Recoded>({ account: null, formatted: null, prefix: 42 });

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

@@ -13,7 +13,7 @@ interface ButtonWithSubtitleProps {
   to: string;
 }
 
-export default function ButtonWithSubtitle ({ title, subTitle, children, to }: ButtonWithSubtitleProps): React.ReactElement<ButtonWithSubtitleProps> {
+export default function ButtonWithSubtitle ({ children, subTitle, title, to }: ButtonWithSubtitleProps): React.ReactElement<ButtonWithSubtitleProps> {
   return (
     <StyledButton to={to}>
       <p>{title}</p>

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

@@ -13,7 +13,7 @@ interface Props {
   className?: string;
 }
 
-function Checkbox ({ onChange, label, className, checked }: Props): React.ReactElement<Props> {
+function Checkbox ({ checked, className, label, onChange }: Props): React.ReactElement<Props> {
   return (
     <div className={className}>
       <label>

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

@@ -25,7 +25,7 @@ interface Props {
   value?: string;
 }
 
-function Dropdown ({ className, defaultValue, label, isFocussed, onBlur, onChange, options, value }: Props): React.ReactElement<Props> {
+function Dropdown ({ className, defaultValue, isFocussed, label, onBlur, onChange, options, value }: Props): React.ReactElement<Props> {
   const _onChange = ({ target: { value } }: React.ChangeEvent<HTMLSelectElement>): void => {
     onChange && onChange(value.trim());
   };

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

@@ -21,7 +21,7 @@ interface Props {
   showBackArrow?: boolean;
 }
 
-function Header ({ children, className, showSettings, text, showBackArrow }: Props): React.ReactElement<Props> {
+function Header ({ children, className, showBackArrow, showSettings, text }: Props): React.ReactElement<Props> {
   const [showActionsMenu, setShowActionsMenu] = useState(false);
   const actionsRef = useRef(null);
 
@@ -112,7 +112,7 @@ const Gear = styled(Svg).attrs(() => ({
   width: 18px;
   margin-right: 24px;
   align-self: center;
-  background: ${({ theme, isSelected }): string => isSelected ? theme.primaryColor : theme.iconNeutralColor};
+  background: ${({ isSelected, theme }): string => isSelected ? theme.primaryColor : theme.iconNeutralColor};
 `;
 
 Gear.displayName = 'Gear';

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

@@ -13,7 +13,7 @@ interface Props {
   value?: string | null;
 }
 
-function Identicon ({ iconTheme, className, prefix, value }: Props): React.ReactElement<Props> {
+function Identicon ({ className, iconTheme, prefix, value }: Props): React.ReactElement<Props> {
   return (
     <div className={className}>
       <Icon

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

@@ -22,7 +22,7 @@ interface Props {
   placeholder?: string;
 }
 
-function InputWithLabel ({ className, defaultValue, label, isError, isFocused, isReadOnly, onBlur, onChange, placeholder, type = 'text', value }: Props): React.ReactElement<Props> {
+function InputWithLabel ({ className, defaultValue, isError, isFocused, isReadOnly, label, onBlur, onChange, placeholder, type = 'text', value }: Props): React.ReactElement<Props> {
   const _onChange = ({ target: { value } }: React.ChangeEvent<HTMLInputElement>): void => {
     onChange && onChange(value.trim());
   };

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

@@ -14,7 +14,7 @@ interface Props {
   className?: string;
 }
 
-function MnemonicSeed ({ seed, onCopy, className }: Props): React.ReactElement<Props> {
+function MnemonicSeed ({ className, onCopy, seed }: Props): React.ReactElement<Props> {
   return (
     <div className={className}>
       <MnemonicText value={seed} />
@@ -31,8 +31,8 @@ function MnemonicSeed ({ seed, onCopy, className }: Props): React.ReactElement<P
 }
 
 const MnemonicText = styled(TextAreaWithLabel).attrs(() => ({
-  label: 'Generated 12-word mnemonic seed:',
+  isReadOnly: true,
-  isReadOnly: true
+  label: 'Generated 12-word mnemonic seed:'
 }))`
   textarea {
     font-size: ${({ theme }): string => theme.fontSize};

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

@@ -9,7 +9,7 @@ interface Props {
   className?: string;
 }
 
-function Switch ({ onChange, uncheckedLabel, checkedLabel, className, checked }: Props): React.ReactElement<Props> {
+function Switch ({ checked, checkedLabel, className, onChange, uncheckedLabel }: Props): React.ReactElement<Props> {
   return (
     <div className={className}>
       <span>{uncheckedLabel}</span>

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

@@ -18,7 +18,7 @@ interface Props {
   value?: string;
 }
 
-export default function TextAreaWithLabel ({ className, isFocused, isReadOnly, label, onChange, value, rowsCount, isError }: Props): React.ReactElement<Props> {
+export default function TextAreaWithLabel ({ className, isError, isFocused, isReadOnly, label, onChange, rowsCount, value }: Props): React.ReactElement<Props> {
   const _onChange = ({ target: { value } }: React.ChangeEvent<HTMLTextAreaElement>): void => {
     onChange && onChange(value.trim());
   };

packages/extension-ui/src/components/themes.ts

@@ -3,67 +3,67 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 const darkTheme = {
-  id: 'dark',
+  accountBackground: '#1A1B20',
+  accountDotsIconColor: '#8E8E8E',
+  addAccountImageBackground: '#1A1B20',
   background: '#26272C',
   bodyColor: '#20222A',
-  highlightedAreaBackground: '#212226',
+  borderRadius: '4px',
-  popupBackground: '#38393F',
+  boxBorderColor: '#43444B',
-  accountBackground: '#1A1B20',
+  boxMargin: '0.75rem 0',
+  boxPadding: '0 0.25rem',
+  boxShadow: 'rgba(0, 0, 0, 0.86)',
   buttonBackground: '#E86F00',
-  buttonBackgroundHover: '#ED9329',
   buttonBackgroundDanger: '#AF1111',
   buttonBackgroundDangerHover: '#D93B3B',
+  buttonBackgroundHover: '#ED9329',
   buttonTextColor: '#FFFFFF',
-  textColor: '#FFFFFF',
-  subTextColor: '#DDD',
-  textColorDanger: '#FF8686',
   errorBorderColor: '#7E3530',
   errorColor: '#E42F2F',
-  primaryColor: '#FF7D01',
-  inputBackground: '#111218',
-  inputBorderColor: '#43444B',
-  readonlyInputBackground: '#1A1B20',
-  boxBorderColor: '#43444B',
-  identiconBackground: '#F4F5F8',
-  accountDotsIconColor: '#8E8E8E',
-  iconWarningColor: '#FF7D01',
-  iconDangerColor: '#AF1111',
-  iconNeutralColor: '#8E8E8E',
-  labelColor: '#9F9E99',
-  addAccountImageBackground: '#1A1B20',
-  boxShadow: 'rgba(0, 0, 0, 0.86)',
   fontFamily: 'Nunito, sans-serif',
   fontSize: '16px',
-  lineHeight: '26px',
+  highlightedAreaBackground: '#212226',
+  iconDangerColor: '#AF1111',
+  iconNeutralColor: '#8E8E8E',
+  iconWarningColor: '#FF7D01',
+  id: 'dark',
+  identiconBackground: '#F4F5F8',
+  inputBackground: '#111218',
+  inputBorderColor: '#43444B',
+  labelColor: '#9F9E99',
   labelFontSize: '13px',
   labelLineHeight: '18px',
-  borderRadius: '4px',
+  lineHeight: '26px',
-  boxMargin: '0.75rem 0',
+  popupBackground: '#38393F',
-  boxPadding: '0 0.25rem'
+  primaryColor: '#FF7D01',
+  readonlyInputBackground: '#1A1B20',
+  subTextColor: '#DDD',
+  textColor: '#FFFFFF',
+  textColorDanger: '#FF8686'
 };
 
 const lightTheme: Theme = {
   ...darkTheme,
-  id: 'light',
+  accountBackground: '#FFFFFF',
+  addAccountImageBackground: '#FFF',
   background: '#FAFAFA',
   bodyColor: '#FFFFFF',
-  highlightedAreaBackground: '#EFEFEF',
+  boxBorderColor: '#DADFEA',
-  accountBackground: '#FFFFFF',
+  boxShadow: 'rgba(0, 0, 0, 0.06)',
-  popupBackground: '#FFFFFF',
-  textColor: '#242529',
-  subTextColor: '#454545',
-  errorBorderColor: '#E42F2F',
-  textColorDanger: '#F24A4A',
   buttonBackgroundDanger: '#DC2222',
+  errorBorderColor: '#E42F2F',
+  highlightedAreaBackground: '#EFEFEF',
   iconDangerColor: '#DC2222',
+  iconNeutralColor: '#939CB1',
+  id: 'light',
   inputBackground: '#FFFFFF',
   inputBorderColor: '#DDE1EB',
-  readonlyInputBackground: '#FFF',
-  boxBorderColor: '#DADFEA',
-  iconNeutralColor: '#939CB1',
   labelColor: '#333333',
-  addAccountImageBackground: '#FFF',
+  popupBackground: '#FFFFFF',
-  boxShadow: 'rgba(0, 0, 0, 0.06)'
+  readonlyInputBackground: '#FFF',
+  subTextColor: '#454545',
+  textColor: '#242529',
+  textColorDanger: '#F24A4A'
 };
 
 export function chooseTheme (): AvailableThemes {

packages/extension-ui/src/messaging.ts

@@ -68,7 +68,7 @@ function sendMessage<TMessageType extends MessageTypes> (message: TMessageType,
   return new Promise((resolve, reject): void => {
     const id = `${Date.now()}.${++idCounter}`;
 
-    handlers[id] = { resolve, reject, subscriber };
+    handlers[id] = { reject, resolve, subscriber };
 
     port.postMessage({ id, message, request: request || {} });
   });
@@ -161,9 +161,9 @@ export async function windowOpen (): Promise<boolean> {
 }
 
 export async function validateDerivationPath (parentAddress: string, suri: string, parentPassword: string): Promise<ResponseDeriveValidate> {
-  return sendMessage('pri(derivation.validate)', { parentAddress, suri, parentPassword });
+  return sendMessage('pri(derivation.validate)', { parentAddress, parentPassword, suri });
 }
 
 export async function deriveAccount (parentAddress: string, suri: string, parentPassword: string, name: string, password: string): Promise<boolean> {
-  return sendMessage('pri(derivation.create)', { parentAddress, suri, parentPassword, name, password });
+  return sendMessage('pri(derivation.create)', { name, parentAddress, parentPassword, password, suri });
 }

packages/extension/package.json

@@ -10,7 +10,7 @@
     "@polkadot/extension-ui": "0.24.0-beta.4"
   },
   "devDependencies": {
-    "@polkadot/dev": "^0.52.1",
+    "@polkadot/dev": "^0.52.3",
     "@types/chrome": "^0.0.103",
     "@types/firefox-webext-browser": "^70.0.1",
     "babel-loader": "^8.1.0",

packages/extension/webpack.config.js

@@ -34,21 +34,11 @@ function createWebpack ({ alias = {}, context }) {
       page: './src/page.ts'
     },
     mode: ENV,
-    output: {
-      chunkFilename: '[name].js',
-      filename: '[name].js',
-      globalObject: '(typeof self !== \'undefined\' ? self : this)',
-      path: path.join(context, 'build')
-    },
-    resolve: {
-      alias,
-      extensions: ['.js', '.jsx', '.ts', '.tsx']
-    },
     module: {
       rules: [
         {
-          test: /\.(js|ts|tsx)$/,
           exclude: /(node_modules)/,
+          test: /\.(js|ts|tsx)$/,
           use: [
             require.resolve('thread-loader'),
             {
@@ -79,6 +69,12 @@ function createWebpack ({ alias = {}, context }) {
       net: 'empty',
       tls: 'empty'
     },
+    output: {
+      chunkFilename: '[name].js',
+      filename: '[name].js',
+      globalObject: '(typeof self !== \'undefined\' ? self : this)',
+      path: path.join(context, 'build')
+    },
     performance: {
       hints: false
     },
@@ -101,15 +97,19 @@ function createWebpack ({ alias = {}, context }) {
         }
       })
     ].filter((entry) => entry),
+    resolve: {
+      alias,
+      extensions: ['.js', '.jsx', '.ts', '.tsx']
+    },
     watch: !isProd
   };
 }
 
 module.exports = createWebpack({
-  context: __dirname,
   alias: packages.reduce((alias, pkg) => {
     alias[`@polkadot/${pkg}`] = path.resolve(__dirname, `../${pkg}/src`);
 
     return alias;
-  }, {})
+  }, {}),
+  context: __dirname
 });

yarn.lock

@@ -2786,9 +2786,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/dev@npm:^0.52.1":
+"@polkadot/dev@npm:^0.52.3":
-  version: 0.52.1
+  version: 0.52.3
-  resolution: "@polkadot/dev@npm:0.52.1"
+  resolution: "@polkadot/dev@npm:0.52.3"
   dependencies:
     "@babel/cli": ^7.8.4
     "@babel/core": ^7.9.0
@@ -2829,6 +2829,7 @@ __metadata:
     eslint-plugin-promise: ^4.2.1
     eslint-plugin-react: ^7.19.0
     eslint-plugin-react-hooks: ^3.0.0
+    eslint-plugin-sort-destructure-keys: ^1.3.3
     eslint-plugin-standard: ^4.0.1
     fs-extra: ^9.0.0
     gh-pages: ^2.2.0
@@ -2868,7 +2869,7 @@ __metadata:
     polkadot-exec-typedoc: scripts/polkadot-exec-typedoc.js
     polkadot-exec-vuepress: scripts/polkadot-exec-vuepress.js
     polkadot-exec-webpack: scripts/polkadot-exec-webpack.js
-  checksum: 2/40526b91020c188986c6828e3a2ad373d32e581a5852c36193ae11adb3100482943bfeea3fd5d7d149279176ea69575da2e6255f395305c50e1cd70272b97bd5
+  checksum: 2/aeb6078c70026ea90323925491fe3f6d09ec69d7336655779e56480950013bff880ee64f2a917d0f9850aeb2fc837c7dfa7e717c67b5c237ddfce4ae76aee5a0
   languageName: node
   linkType: hard
 
@@ -2879,7 +2880,7 @@ __metadata:
     "@babel/runtime": ^7.9.2
     "@polkadot/api": ^1.9.1
     "@polkadot/keyring": ^2.7.1
-    "@polkadot/ui-keyring": ^0.52.0-beta.21
+    "@polkadot/ui-keyring": ^0.52.0-beta.22
     extensionizer: ^1.0.1
   languageName: unknown
   linkType: soft
@@ -2921,8 +2922,8 @@ __metadata:
   dependencies:
     "@babel/runtime": ^7.9.2
     "@polkadot/keyring": ^2.7.1
-    "@polkadot/react-identicon": ^0.52.0-beta.21
+    "@polkadot/react-identicon": ^0.52.0-beta.22
-    "@polkadot/react-qr": ^0.52.0-beta.21
+    "@polkadot/react-qr": ^0.52.0-beta.22
     "@polkadot/util": ^2.7.1
     "@polkadot/util-crypto": ^2.7.1
     "@types/bn.js": ^4.11.6
@@ -2950,7 +2951,7 @@ __metadata:
   resolution: "@polkadot/extension@workspace:packages/extension"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/dev": ^0.52.1
+    "@polkadot/dev": ^0.52.3
     "@polkadot/extension-base": 0.24.0-beta.4
     "@polkadot/extension-ui": 0.24.0-beta.4
     "@types/chrome": ^0.0.103
@@ -2992,13 +2993,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/react-identicon@npm:^0.52.0-beta.21":
+"@polkadot/react-identicon@npm:^0.52.0-beta.22":
-  version: 0.52.0-beta.21
+  version: 0.52.0-beta.22
-  resolution: "@polkadot/react-identicon@npm:0.52.0-beta.21"
+  resolution: "@polkadot/react-identicon@npm:0.52.0-beta.22"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/ui-settings": 0.52.0-beta.21
+    "@polkadot/ui-settings": 0.52.0-beta.22
-    "@polkadot/ui-shared": 0.52.0-beta.21
+    "@polkadot/ui-shared": 0.52.0-beta.22
     color: ^3.1.2
     jdenticon: 2.2.0
     react-copy-to-clipboard: ^5.0.2
@@ -3010,13 +3011,13 @@ __metadata:
     react: "*"
     react-dom: "*"
     react-is: "*"
-  checksum: 2/11e637d80acf0d8131ac386e70bbcdc884120f87c1a8472ee1759d63c17cf0101770d936bead8ccfeb334c1b88754dc3cd4cee8aa52fab46169a3e7d92705080
+  checksum: 2/963edf7bac80a7c18f9d17532e7652ab3dadf9dcc43e1a3d6ff1bf1dc39c7dcc27835f9fb917d4edcf4b4f115c48cfb52ed304e9356e79bfcee2c9636c403b0d
   languageName: node
   linkType: hard
 
-"@polkadot/react-qr@npm:^0.52.0-beta.21":
+"@polkadot/react-qr@npm:^0.52.0-beta.22":
-  version: 0.52.0-beta.21
+  version: 0.52.0-beta.22
-  resolution: "@polkadot/react-qr@npm:0.52.0-beta.21"
+  resolution: "@polkadot/react-qr@npm:0.52.0-beta.22"
   dependencies:
     "@babel/runtime": ^7.9.2
     qrcode-generator: ^1.4.4
@@ -3027,7 +3028,7 @@ __metadata:
     react: "*"
     react-dom: "*"
     styled-components: "*"
-  checksum: 2/d5328a9ce41be1ad8fc79072d81357d8982cb87d6828350162f006cbf6a8b6a2eef31d2df67fa1fd74de65676d31a68e5da46283539a3a8fce8c66eaefcbd819
+  checksum: 2/eb6e7985e17fadb9a13e67c182b566b811bd659d993b5bd3d216aa7e781c545836b7603c62324abfdd4d02731ea1fb447b851ca831b2ff02156538098927139d
   languageName: node
   linkType: hard
 
@@ -3115,9 +3116,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/ui-keyring@npm:^0.52.0-beta.21":
+"@polkadot/ui-keyring@npm:^0.52.0-beta.22":
-  version: 0.52.0-beta.21
+  version: 0.52.0-beta.22
-  resolution: "@polkadot/ui-keyring@npm:0.52.0-beta.21"
+  resolution: "@polkadot/ui-keyring@npm:0.52.0-beta.22"
   dependencies:
     "@babel/runtime": ^7.9.2
     "@ledgerhq/hw-transport-node-hid": ^5.11.0
@@ -3135,33 +3136,33 @@ __metadata:
   dependenciesMeta:
     "@ledgerhq/hw-transport-node-hid":
       optional: true
-  checksum: 2/ec29d4ecf91df1ee10dfb3e5e0db1a61310733a647f9b5ec7dd9413b2bd4bc467b8e31f72d1004ca6ca74a02fe4424f11969c61bba36cef951db224d7f568d8e
+  checksum: 2/62d5057054476cfb31c1c0ae13efc28e62d3304cdfc21ce1d1f63082d31552a4ce577459f01367a3a3e3c60779274535c493270f913c06b86d1b01e09b7162af
   languageName: node
   linkType: hard
 
-"@polkadot/ui-settings@npm:0.52.0-beta.21":
+"@polkadot/ui-settings@npm:0.52.0-beta.22":
-  version: 0.52.0-beta.21
+  version: 0.52.0-beta.22
-  resolution: "@polkadot/ui-settings@npm:0.52.0-beta.21"
+  resolution: "@polkadot/ui-settings@npm:0.52.0-beta.22"
   dependencies:
     "@babel/runtime": ^7.9.2
     eventemitter3: ^4.0.0
     store: ^2.0.12
   peerDependencies:
     "@polkadot/util": "*"
-  checksum: 2/8c345dba7fb5ebb2a1876d2703092c7e93a729d358416cd3e117cb73c1d98fea10bbe74d6641a15379bf07525922f8787093490da909b628d8e6321c8a33783e
+  checksum: 2/1fcb73c13a199039efcf3204fff3ca9041f1224f4215dffbbe2eabf4c59fc40ba6804b26f0577dcd43785e04266cbe2d462b1c5d4fe12526595978b3e7cb0fac
   languageName: node
   linkType: hard
 
-"@polkadot/ui-shared@npm:0.52.0-beta.21":
+"@polkadot/ui-shared@npm:0.52.0-beta.22":
-  version: 0.52.0-beta.21
+  version: 0.52.0-beta.22
-  resolution: "@polkadot/ui-shared@npm:0.52.0-beta.21"
+  resolution: "@polkadot/ui-shared@npm:0.52.0-beta.22"
   dependencies:
     "@babel/runtime": ^7.9.2
     color: ^3.1.2
   peerDependencies:
     "@polkadot/util": "*"
     "@polkadot/util-crypto": "*"
-  checksum: 2/cc9e5caae0c3596530fe0006eb95be0c7c5104727b229bf9a8ac1fa9ba032d6223d5e8257b5bef27bb2657dfed61e56a3ab74062db9dc6c857ada3299a861ec4
+  checksum: 2/41a54f53229b96d8a75cbe5d62c3ab61f4c48b4098366a09bbfdf0af1c8f98378d562d8e3ae5298823b6869bd03201a1eb87a51055e81cf628b941b96907c5f0
   languageName: node
   linkType: hard
 
@@ -8823,6 +8824,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-sort-destructure-keys@npm:^1.3.3":
+  version: 1.3.3
+  resolution: "eslint-plugin-sort-destructure-keys@npm:1.3.3"
+  dependencies:
+    natural-compare-lite: ^1.4.0
+  peerDependencies:
+    eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0
+  checksum: 2/bcf1e4c8d9ebd692269cfbec29fbd321eec86f13273b313c46d5cff6c9434873941db4dfa117f7b71a60e247c3be5df2cdc324d4216b824ac19e3fad259370fd
+  languageName: node
+  linkType: hard
+
 "eslint-plugin-standard@npm:^4.0.1":
   version: 4.0.1
   resolution: "eslint-plugin-standard@npm:4.0.1"
@@ -14064,6 +14076,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"natural-compare-lite@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "natural-compare-lite@npm:1.4.0"
+  checksum: 2/18c1c37b8523b08e9ea51043f3f6a7a50c9354fcc0b3ff4ec3437f017f766325e935cf427fd3b39657491f6174a8701c498235acb642c752537ddca5d378ff1f
+  languageName: node
+  linkType: hard
+
 "natural-compare@npm:^1.4.0":
   version: 1.4.0
   resolution: "natural-compare@npm:1.4.0"
@@ -17350,7 +17369,7 @@ __metadata:
   resolution: "root-workspace-0b6124@workspace:."
   dependencies:
     "@babel/core": ^7.9.0
-    "@polkadot/dev": ^0.52.1
+    "@polkadot/dev": ^0.52.3
     "@polkadot/typegen": ^1.9.1
     "@types/jest": ^25.1.4
     copy-webpack-plugin: ^5.1.1