From e3400f7206aae60e6b77b8d1d1115b6390f0cd6b Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Fri, 24 Apr 2020 20:30:08 +0200
Subject: [PATCH] Multisig support (#2623)

* Multisig support

* Testing, sorting with timepoints

* Re-add

* lint (import fix)

* case-sensitive import
---
 package.json                                  |  12 +-
 .../apps/public/locales/en/app-accounts.json  |  11 +-
 .../apps/public/locales/en/react-signer.json  |   5 +-
 packages/apps/public/locales/en/ui.json       |  14 +-
 packages/page-accounts/package.json           |   2 +-
 packages/page-accounts/src/Accounts/index.tsx |  14 +
 .../src/Accounts/modals/Multisig.tsx          | 161 ++++++++++++
 packages/page-contracts/package.json          |   2 +-
 packages/react-api/package.json               |   2 +-
 packages/react-components/package.json        |   8 +-
 packages/react-components/src/CryptoType.tsx  |   4 +-
 packages/react-hooks/src/types.ts             |   1 +
 packages/react-hooks/src/useAccountInfo.ts    |   4 +-
 packages/react-signer/package.json            |   2 +-
 packages/react-signer/src/Modal.tsx           | 150 +++++++----
 packages/react-signer/src/Unlock.tsx          |   8 +-
 yarn.lock                                     | 242 +++++++++---------
 17 files changed, 455 insertions(+), 187 deletions(-)
 create mode 100644 packages/page-accounts/src/Accounts/modals/Multisig.tsx

diff --git a/package.json b/package.json
index 06d61ede50..855ea22f96 100644
--- a/package.json
+++ b/package.json
@@ -8,12 +8,12 @@
     "packages/*"
   ],
   "resolutions": {
-    "@polkadot/api": "^1.12.0-beta.4",
-    "@polkadot/api-contract": "^1.12.0-beta.4",
-    "@polkadot/keyring": "^2.8.1",
-    "@polkadot/types": "^1.12.0-beta.4",
-    "@polkadot/util": "^2.8.1",
-    "@polkadot/util-crypto": "^2.8.1",
+    "@polkadot/api": "^1.12.0-beta.6",
+    "@polkadot/api-contract": "^1.12.0-beta.6",
+    "@polkadot/keyring": "^2.9.0-beta.1",
+    "@polkadot/types": "^1.12.0-beta.6",
+    "@polkadot/util": "^2.9.0-beta.1",
+    "@polkadot/util-crypto": "^2.9.0-beta.1",
     "babel-core": "^7.0.0-bridge.0",
     "typescript": "^3.8.3"
   },
diff --git a/packages/apps/public/locales/en/app-accounts.json b/packages/apps/public/locales/en/app-accounts.json
index 6a4c90086f..93a5dfaa1b 100644
--- a/packages/apps/public/locales/en/app-accounts.json
+++ b/packages/apps/public/locales/en/app-accounts.json
@@ -188,5 +188,14 @@
   "registrar index": "registrar index",
   "invalid/unknown registrar account": "invalid/unknown registrar account",
   "judgement": "judgement",
-  "Judge": "Judge"
+  "Judge": "Judge",
+  "Multisig": "Multisig",
+  "created multisig": "created multisig",
+  "Add multisig": "Add multisig",
+  "Name given to this multisig. You can edit it it any later point in time.": "Name given to this multisig. You can edit it it any later point in time.",
+  "multisig name": "multisig name",
+  "The threshold for this multisig": "The threshold for this multisig",
+  "signatory {{index}}/{{length}}": "signatory {{index}}/{{length}}",
+  "Less": "Less",
+  "More": "More"
 }
diff --git a/packages/apps/public/locales/en/react-signer.json b/packages/apps/public/locales/en/react-signer.json
index 85a4671b98..68e9c2719c 100644
--- a/packages/apps/public/locales/en/react-signer.json
+++ b/packages/apps/public/locales/en/react-signer.json
@@ -37,5 +37,8 @@
   "Set to 0 to make transaction immortal": "Set to 0 to make transaction immortal",
   "Signed transaction": "Signed transaction",
   "Authorize transaction": "Authorize transaction",
-  "Sending transaction": "Sending transaction"
+  "Sending transaction": "Sending transaction",
+  "Sign for multisig": "Sign for multisig",
+  "The multisig signatory for this transaction.": "The multisig signatory for this transaction.",
+  "signatory": "signatory"
 }
diff --git a/packages/apps/public/locales/en/ui.json b/packages/apps/public/locales/en/ui.json
index a41f079ca6..30c76d51b1 100644
--- a/packages/apps/public/locales/en/ui.json
+++ b/packages/apps/public/locales/en/ui.json
@@ -1108,5 +1108,17 @@
   "Low quality": "",
   "No judgments": "",
   "website": "",
-  "Add identity judgment": ""
+  "Add identity judgment": "",
+  "Multisig": "",
+  "created multisig": "",
+  "Add multisig": "",
+  "Name given to this multisig. You can edit it it any later point in time.": "",
+  "multisig name": "",
+  "The threshold for this multisig": "",
+  "signatory {{index}}/{{length}}": "",
+  "Less": "",
+  "More": "",
+  "Sign for multisig": "",
+  "The multisig signatory for this transaction.": "",
+  "signatory": ""
 }
diff --git a/packages/page-accounts/package.json b/packages/page-accounts/package.json
index 5cfd112930..5c29cdb45f 100644
--- a/packages/page-accounts/package.json
+++ b/packages/page-accounts/package.json
@@ -13,7 +13,7 @@
   "dependencies": {
     "@babel/runtime": "^7.9.2",
     "@polkadot/react-components": "0.42.0-beta.27",
-    "@polkadot/react-qr": "^0.52.1",
+    "@polkadot/react-qr": "^0.53.0-beta.1",
     "@polkadot/vanitygen": "^0.11.1",
     "detect-browser": "^5.0.0",
     "file-saver": "^2.0.2"
diff --git a/packages/page-accounts/src/Accounts/index.tsx b/packages/page-accounts/src/Accounts/index.tsx
index 9ca2e30a33..01f6cac295 100644
--- a/packages/page-accounts/src/Accounts/index.tsx
+++ b/packages/page-accounts/src/Accounts/index.tsx
@@ -18,6 +18,7 @@ import { Button, Input, Table } from '@polkadot/react-components';
 import { useTranslation } from '../translate';
 import CreateModal from './modals/Create';
 import ImportModal from './modals/Import';
+import Multisig from './modals/Multisig';
 import QrModal from './modals/Qr';
 import Account from './Account';
 import Banner from './Banner';
@@ -94,6 +95,7 @@ function Overview ({ className, onStatusChange }: Props): React.ReactElement<Pro
   const { allAccounts } = useAccounts();
   const [isCreateOpen, toggleCreate] = useToggle();
   const [isImportOpen, toggleImport] = useToggle();
+  const [isMultisigOpen, toggleMultisig] = useToggle();
   const [isQrOpen, toggleQr] = useToggle();
   const [favorites, toggleFavorite] = useFavorites(STORE_FAVS);
   const [{ balanceTotal }, setBalances] = useState<Balances>({ accounts: {} });
@@ -166,6 +168,12 @@ function Overview ({ className, onStatusChange }: Props): React.ReactElement<Pro
           onStatusChange={onStatusChange}
         />
       )}
+      {isMultisigOpen && (
+        <Multisig
+          onClose={toggleMultisig}
+          onStatusChange={onStatusChange}
+        />
+      )}
       {isQrOpen && (
         <QrModal
           onClose={toggleQr}
@@ -200,6 +208,12 @@ function Overview ({ className, onStatusChange }: Props): React.ReactElement<Pro
             />
           </>
         )}
+        <Button.Or />
+        <Button
+          icon='add'
+          label={t('Multisig')}
+          onClick={toggleMultisig}
+        />
       </Button.Group>
       <Table
         empty={t('no accounts yet, create or import an existing')}
diff --git a/packages/page-accounts/src/Accounts/modals/Multisig.tsx b/packages/page-accounts/src/Accounts/modals/Multisig.tsx
new file mode 100644
index 0000000000..557d9ce59d
--- /dev/null
+++ b/packages/page-accounts/src/Accounts/modals/Multisig.tsx
@@ -0,0 +1,161 @@
+// Copyright 2017-2020 @polkadot/app-accounts authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { ActionStatus } from '@polkadot/react-components/Status/types';
+import { ModalProps } from '../../types';
+
+import BN from 'bn.js';
+import React, { useCallback, useMemo, useState } from 'react';
+import { Button, Input, InputAddress, InputNumber, Modal } from '@polkadot/react-components';
+import { useApi } from '@polkadot/react-hooks';
+import keyring from '@polkadot/ui-keyring';
+
+import { useTranslation } from '../../translate';
+
+interface Props extends ModalProps {
+  className?: string;
+  onClose: () => void;
+}
+
+interface CreateOptions {
+  genesisHash?: string;
+  name: string;
+  tags?: string[];
+}
+
+type Setter = (address: string| null) => void;
+
+const MAX_SIGNATORIES = 16;
+
+function createAccount (signatories: string[], threshold: BN | number, { genesisHash, name, tags = [] }: CreateOptions, success: string): ActionStatus {
+  // we will fill in all the details below
+  const status = { action: 'create' } as ActionStatus;
+
+  try {
+    const result = keyring.addMultisig(signatories, threshold, { genesisHash, name, tags });
+    const { address } = result.pair;
+
+    status.account = address;
+    status.status = 'success';
+    status.message = success;
+  } catch (error) {
+    status.status = 'error';
+    status.message = error.message;
+  }
+
+  return status;
+}
+
+function Multisig ({ className, onClose, onStatusChange }: Props): React.ReactElement<Props> {
+  const { api, isDevelopment } = useApi();
+  const { t } = useTranslation();
+  const [{ isNameValid, name }, setName] = useState({ isNameValid: false, name: '' });
+  const [signatories, setSignatories] = useState<string[]>(['']);
+  const [{ isThresholdValid, threshold }, setThreshold] = useState({ isThresholdValid: true, threshold: new BN(1) });
+  const setSignatory = useMemo((): Setter[] => {
+    return Array(MAX_SIGNATORIES).fill(0).map((_, index): Setter =>
+      (address: string | null): void => {
+        setSignatories((signatories: string[]): string[] => {
+          if (address) {
+            signatories[index] = address;
+          }
+
+          return signatories;
+        });
+      }
+    );
+  }, []);
+  const isValid = isNameValid && isThresholdValid;
+
+  const _createMultisig = useCallback(
+    (): void => {
+      const options = { genesisHash: isDevelopment ? undefined : api.genesisHash.toString(), name: name.trim() };
+      const status = createAccount(signatories, threshold, options, t('created multisig'));
+
+      onStatusChange(status);
+      onClose();
+    },
+    [api.genesisHash, isDevelopment, name, onClose, onStatusChange, signatories, t, threshold]
+  );
+
+  const _onChangeName = useCallback(
+    (name: string) => setName({ isNameValid: (name.trim().length >= 3), name }),
+    []
+  );
+
+  const _onChangeThreshold = useCallback(
+    (threshold: BN | undefined) =>
+      threshold && setThreshold({ isThresholdValid: threshold.gtn(0) && threshold.lten(signatories.length), threshold }),
+    [signatories]
+  );
+
+  const _onLess = useCallback(
+    () => setSignatories((signatories) => signatories.slice(0, signatories.length - 1)),
+    []
+  );
+
+  const _onMore = useCallback(
+    () => setSignatories((signatories) => signatories.concat('')),
+    []
+  );
+
+  return (
+    <Modal
+      className={className}
+      header={t('Add multisig')}
+    >
+      <Modal.Content>
+        <Input
+          autoFocus
+          className='full'
+          help={t('Name given to this multisig. You can edit it it any later point in time.')}
+          isError={!isNameValid}
+          label={t('name')}
+          onChange={_onChangeName}
+          placeholder={t('multisig name')}
+        />
+        <InputNumber
+          help={t('The threshold for this multisig')}
+          isError={!isThresholdValid}
+          label={t('threshold')}
+          onChange={_onChangeThreshold}
+        />
+        {signatories.map((_, index) => (
+          <InputAddress
+            key={index}
+            label={t('signatory {{index}}/{{length}}', { replace: { index: index + 1, length: signatories.length } })}
+            onChange={setSignatory[index]}
+            value={signatories[index]}
+          />
+        ))}
+        <Button.Group>
+          <Button
+            icon='minus'
+            isDisabled={signatories.length === 1}
+            label={t('Less')}
+            onClick={_onLess}
+          />
+          <Button.Or />
+          <Button
+            icon='plus'
+            isDisabled={signatories.length === MAX_SIGNATORIES}
+            label={t('More')}
+            onClick={_onMore}
+          />
+        </Button.Group>
+      </Modal.Content>
+      <Modal.Actions onCancel={onClose}>
+        <Button
+          icon='plus'
+          isDisabled={!isValid}
+          isPrimary
+          label={t('Create')}
+          onClick={_createMultisig}
+        />
+      </Modal.Actions>
+    </Modal>
+  );
+}
+
+export default React.memo(Multisig);
diff --git a/packages/page-contracts/package.json b/packages/page-contracts/package.json
index d4951d70c5..f206503a55 100644
--- a/packages/page-contracts/package.json
+++ b/packages/page-contracts/package.json
@@ -12,6 +12,6 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.9.2",
-    "@polkadot/api-contract": "^1.12.0-beta.4"
+    "@polkadot/api-contract": "^1.12.0-beta.6"
   }
 }
diff --git a/packages/react-api/package.json b/packages/react-api/package.json
index ce6de72988..f962d09432 100644
--- a/packages/react-api/package.json
+++ b/packages/react-api/package.json
@@ -31,7 +31,7 @@
   "homepage": "https://github.com/polkadot-js/ui/tree/master/packages/ui-reactive#readme",
   "dependencies": {
     "@babel/runtime": "^7.9.2",
-    "@polkadot/api": "^1.12.0-beta.4",
+    "@polkadot/api": "^1.12.0-beta.6",
     "@polkadot/extension-dapp": "^0.25.0-beta.3",
     "rxjs-compat": "^6.5.5"
   }
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
index b3f664fb70..1c542eabcc 100644
--- a/packages/react-components/package.json
+++ b/packages/react-components/package.json
@@ -11,12 +11,12 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.9.2",
-    "@polkadot/keyring": "^2.8.1",
+    "@polkadot/keyring": "^2.9.0-beta.1",
     "@polkadot/react-api": "0.42.0-beta.27",
-    "@polkadot/react-identicon": "^0.52.1",
+    "@polkadot/react-identicon": "^0.53.0-beta.1",
     "@polkadot/react-query": "0.42.0-beta.27",
-    "@polkadot/ui-keyring": "^0.52.1",
-    "@polkadot/ui-settings": "^0.52.1",
+    "@polkadot/ui-keyring": "^0.53.0-beta.1",
+    "@polkadot/ui-settings": "^0.53.0-beta.1",
     "chart.js": "^2.9.3",
     "codeflask": "^1.4.1",
     "i18next": "^19.4.2",
diff --git a/packages/react-components/src/CryptoType.tsx b/packages/react-components/src/CryptoType.tsx
index a14d2facad..973c2cff73 100644
--- a/packages/react-components/src/CryptoType.tsx
+++ b/packages/react-components/src/CryptoType.tsx
@@ -31,7 +31,9 @@ function CryptoType ({ accountId, className, label = '' }: Props): React.ReactEl
             : current.meta.isHardware
               ? current.meta.hardwareType || 'hardware'
               : current.meta.isExternal
-                ? 'external'
+                ? current.meta.isMultisig
+                  ? 'multisig'
+                  : 'external'
                 : current.type
         );
       }
diff --git a/packages/react-hooks/src/types.ts b/packages/react-hooks/src/types.ts
index 1d80625397..8eaab0ede7 100644
--- a/packages/react-hooks/src/types.ts
+++ b/packages/react-hooks/src/types.ts
@@ -80,6 +80,7 @@ export interface AddressFlags extends DeriveAccountFlags {
   isExternal: boolean;
   isFavorite: boolean;
   isInContacts: boolean;
+  isMultisig: boolean;
   isOwned: boolean;
 }
 
diff --git a/packages/react-hooks/src/useAccountInfo.ts b/packages/react-hooks/src/useAccountInfo.ts
index e5ca20b69f..23796e1821 100644
--- a/packages/react-hooks/src/useAccountInfo.ts
+++ b/packages/react-hooks/src/useAccountInfo.ts
@@ -23,6 +23,7 @@ const IS_NONE = {
   isExternal: false,
   isFavorite: false,
   isInContacts: false,
+  isMultisig: false,
   isOwned: false,
   isSociety: false,
   isSudo: false,
@@ -99,9 +100,10 @@ export default function useAccountInfo (_value: AccountId | Address | string | U
     setFlags((flags) => ({
       ...flags,
       isDevelopment: accountOrAddress?.meta.isTesting || false,
-      isEditable: (!identity?.display && (isInContacts || (accountOrAddress && !(accountOrAddress.meta.isInjected || accountOrAddress.meta.isHardware)))) || false,
+      isEditable: (!identity?.display && (isInContacts || accountOrAddress?.meta.isMultisig || (accountOrAddress && !(accountOrAddress.meta.isInjected || accountOrAddress.meta.isHardware)))) || false,
       isExternal: accountOrAddress?.meta.isExternal || false,
       isInContacts,
+      isMultisig: accountOrAddress?.meta.isMultisig || false,
       isOwned
     }));
     setName(accountOrAddress?.meta.name || '');
diff --git a/packages/react-signer/package.json b/packages/react-signer/package.json
index b8e150970e..217f684dd7 100644
--- a/packages/react-signer/package.json
+++ b/packages/react-signer/package.json
@@ -12,6 +12,6 @@
   "dependencies": {
     "@babel/runtime": "^7.9.2",
     "@polkadot/react-components": "0.42.0-beta.27",
-    "@polkadot/react-qr": "^0.52.1"
+    "@polkadot/react-qr": "^0.53.0-beta.1"
   }
 }
diff --git a/packages/react-signer/src/Modal.tsx b/packages/react-signer/src/Modal.tsx
index a8a9f3fb1c..1c11f94428 100644
--- a/packages/react-signer/src/Modal.tsx
+++ b/packages/react-signer/src/Modal.tsx
@@ -9,6 +9,7 @@ import { I18nProps, BareProps } from '@polkadot/react-components/types';
 import { KeyringPair } from '@polkadot/keyring/types';
 import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
 import { QueueTx, QueueTxMessageSetStatus, QueueTxResult, QueueTxStatus } from '@polkadot/react-components/Status/types';
+import { Timepoint } from '@polkadot/types/interfaces';
 import { DefinitionRpcExt, SignerPayloadJSON } from '@polkadot/types/types';
 
 import BN from 'bn.js';
@@ -16,7 +17,7 @@ import React from 'react';
 import { SubmittableResult } from '@polkadot/api';
 import { web3FromSource } from '@polkadot/extension-dapp';
 import { createType } from '@polkadot/types';
-import { Button, InputBalance, Modal, Toggle, Output, ErrorBoundary, InputNumber } from '@polkadot/react-components';
+import { Button, InputBalance, Modal, Toggle, Output, ErrorBoundary, InputNumber, InputAddress } from '@polkadot/react-components';
 import { registry } from '@polkadot/react-api';
 import { withApi, withMulti, withObservable } from '@polkadot/react-api/hoc';
 import keyring from '@polkadot/ui-keyring';
@@ -53,19 +54,27 @@ interface State {
   qrPayload: Uint8Array;
   qrResolve?: (result: SignerResult) => void;
   qrReject?: (error: Error) => void;
+  signatory?: string | null;
   showTip: boolean;
   signedTx?: string;
   tip?: BN;
   unlockError?: string | null;
 }
 
+interface AccountFlags {
+  hardwareType?: string;
+  isExternal: boolean;
+  isHardware: boolean;
+  isMultisig: boolean;
+  threshold: number;
+  who: string[];
+}
+
 let qrId = 0;
 
-function extractExternal (
-  accountId?: string | null
-): { isExternal: boolean; isHardware: boolean; hardwareType?: string } {
+function extractExternal (accountId?: string | null): AccountFlags {
   if (!accountId) {
-    return { isExternal: false, isHardware: false };
+    return { isExternal: false, isHardware: false, isMultisig: false, threshold: 0, who: [] };
   }
 
   let publicKey;
@@ -75,7 +84,7 @@ function extractExternal (
   } catch (error) {
     console.error(error);
 
-    return { isExternal: false, isHardware: false };
+    return { isExternal: false, isHardware: false, isMultisig: false, threshold: 0, who: [] };
   }
 
   const pair = keyring.getPair(publicKey);
@@ -83,7 +92,10 @@ function extractExternal (
   return {
     hardwareType: pair.meta.hardwareType,
     isExternal: !!pair.meta.isExternal,
-    isHardware: !!pair.meta.isHardware
+    isHardware: !!pair.meta.isHardware,
+    isMultisig: !!pair.meta.isMultisig,
+    threshold: pair.meta.threshold || 0,
+    who: pair.meta.who || []
   };
 }
 
@@ -183,13 +195,13 @@ class Signer extends React.PureComponent<Props, State> {
 
   private renderButtons (): React.ReactNode {
     const { t } = this.props;
-    const { currentItem, isQrScanning, isQrVisible, isRenderError, isSendable, isSubmit, signedTx } = this.state;
+    const { currentItem, isQrScanning, isQrVisible, isRenderError, isSendable, isSubmit, signatory, signedTx } = this.state;
 
     if (!currentItem) {
       return null;
     }
 
-    const { hardwareType, isExternal, isHardware } = extractExternal(currentItem.accountId);
+    const { hardwareType, isExternal, isHardware, isMultisig } = extractExternal(currentItem.accountId);
 
     return (
       <Modal.Actions
@@ -209,8 +221,8 @@ class Signer extends React.PureComponent<Props, State> {
             <Button.Or />
             <Button
               className='ui--signer-Signer-Submit'
-              icon={isQrVisible ? 'qrcode' : currentItem.isUnsigned ? 'sign-in' : isExternal ? 'qrcode' : 'sign-in'}
-              isDisabled={!isSendable}
+              icon={isQrVisible ? 'qrcode' : currentItem.isUnsigned ? 'sign-in' : (isExternal && !isMultisig) ? 'qrcode' : 'sign-in'}
+              isDisabled={!isSendable || (isMultisig && !signatory)}
               isPrimary
               label={
                 isQrVisible
@@ -220,7 +232,9 @@ class Signer extends React.PureComponent<Props, State> {
                     : isHardware
                       ? t('Sign via {{hardwareType}}', { replace: { hardwareType: hardwareType || 'hardware' } })
                       : isExternal
-                        ? t('Sign via Qr')
+                        ? isMultisig
+                          ? t('Sign for multisig')
+                          : t('Sign via Qr')
                         : isSubmit
                           ? t('Sign and Submit')
                           : t('Sign (no submission)')
@@ -261,6 +275,7 @@ class Signer extends React.PureComponent<Props, State> {
           : (
             <>
               {this.renderTip()}
+              {this.renderSignatory()}
               {this.renderUnlock()}
               {!isSubmit && this.renderSignFields()}
             </>
@@ -269,6 +284,28 @@ class Signer extends React.PureComponent<Props, State> {
     );
   }
 
+  private renderSignatory (): React.ReactNode {
+    const { t } = this.props;
+    const { currentItem } = this.state;
+    const { isMultisig, who } = currentItem
+      ? extractExternal(currentItem.accountId)
+      : { isMultisig: false, who: [] };
+
+    if (!currentItem || !isMultisig) {
+      return null;
+    }
+
+    return (
+      <InputAddress
+        filter={who}
+        help={t('The multisig signatory for this transaction.')}
+        label={t('signatory')}
+        onChange={this.onChangeSignatory}
+        type='account'
+      />
+    );
+  }
+
   private renderTip (): React.ReactNode {
     const { t } = this.props;
     const { currentItem, isSendable, showTip, signedTx } = this.state;
@@ -308,17 +345,19 @@ class Signer extends React.PureComponent<Props, State> {
     const { t } = this.props;
     const { isQrScanning, isQrVisible, isSubmit } = this.state;
 
-    return <Toggle
-      className='signToggle'
-      isDisabled={isQrVisible || isQrScanning}
-      label={
-        isSubmit
-          ? t('Sign and Submit')
-          : t('Sign (no submission)')
-      }
-      onChange={this.onToggleSign}
-      value={isSubmit}
-    />;
+    return (
+      <Toggle
+        className='signToggle'
+        isDisabled={isQrVisible || isQrScanning}
+        label={
+          isSubmit
+            ? t('Sign and Submit')
+            : t('Sign (no submission)')
+        }
+        onChange={this.onToggleSign}
+        value={isSubmit}
+      />
+    );
   }
 
   private renderSignFields (): React.ReactNode {
@@ -379,13 +418,17 @@ class Signer extends React.PureComponent<Props, State> {
     this.setState({ blocks: value ? value.toString() : '0' });
   }
 
-  private renderUnlock (): React.ReactNode {
-    const { currentItem, isSendable, password, unlockError } = this.state;
-    const { isExternal } = currentItem
-      ? extractExternal(currentItem.accountId)
-      : { isExternal: false };
+  private onChangeSignatory = (signatory?: string | null): void => {
+    this.setState({ signatory });
+  }
 
-    if (!isSendable || !currentItem || currentItem.isUnsigned || isExternal) {
+  private renderUnlock (): React.ReactNode {
+    const { currentItem, isSendable, password, signatory, unlockError } = this.state;
+    const { isExternal, isMultisig } = currentItem
+      ? extractExternal(currentItem.accountId)
+      : { isExternal: false, isMultisig: false };
+
+    if (!isSendable || !currentItem || currentItem.isUnsigned || (isExternal && !isMultisig)) {
       return null;
     }
 
@@ -397,7 +440,7 @@ class Signer extends React.PureComponent<Props, State> {
         onEnter={this.onSend}
         password={password}
         tabIndex={1}
-        value={currentItem.accountId}
+        value={isMultisig ? signatory : currentItem.accountId}
       />
     );
   }
@@ -415,7 +458,7 @@ class Signer extends React.PureComponent<Props, State> {
 
     const pair = keyring.getPair(publicKey);
 
-    if (!pair.isLocked || pair.meta.isInjected || pair.meta.isExternal) {
+    if (!pair.isLocked || pair.meta.isInjected || (pair.meta.isExternal && !pair.meta.isMultisig)) {
       return null;
     }
 
@@ -561,14 +604,14 @@ class Signer extends React.PureComponent<Props, State> {
   };
 
   private async sendExtrinsic (queueTx: QueueTx, password?: string): Promise<void> {
-    const { queueSetTxStatus } = this.props;
-    const { isSubmit, showTip, tip } = this.state;
+    const { api, queueSetTxStatus } = this.props;
+    const { isSubmit, showTip, signatory, tip } = this.state;
     const { accountId, extrinsic, id, isUnsigned, payload } = queueTx;
 
     if (!isUnsigned) {
       assert(accountId, 'Expected an accountId with signed transactions');
 
-      const unlockError = this.unlockAccount(accountId, password);
+      const unlockError = this.unlockAccount((signatory || accountId), password);
 
       if (unlockError) {
         this.setState({ unlockError });
@@ -586,7 +629,7 @@ class Signer extends React.PureComponent<Props, State> {
           ...(showTip && tip && !payload.tip ? { tip: tip.toString() } : {})
         },
         queueTx,
-        keyring.getPair(accountId as string)
+        keyring.getPair((signatory || accountId) as string)
       );
     }
 
@@ -594,11 +637,32 @@ class Signer extends React.PureComponent<Props, State> {
 
     assert(submittable, 'Expected an extrinsic to be supplied to sendExtrinsic');
 
-    return isUnsigned
-      ? this.makeExtrinsicCall(submittable, queueTx, submittable.send.bind(submittable))
-      : isSubmit
-        ? this.makeExtrinsicCall(submittable, queueTx, submittable.signAndSend.bind(submittable), keyring.getPair(accountId as string))
-        : this.makeSignedTransaction(submittable, queueTx, keyring.getPair(accountId as string));
+    if (isUnsigned) {
+      return this.makeExtrinsicCall(submittable, queueTx, submittable.send.bind(submittable));
+    }
+
+    const basePair = keyring.getPair(accountId as string);
+    let pair = basePair;
+    let tx = submittable;
+
+    if (basePair.meta.isMultisig) {
+      const others = basePair.meta.who.filter((who: string) => who !== signatory);
+      const info = await api.query.utility.multisigs(accountId as string, submittable.method.hash);
+      let timepoint: Timepoint | null = null;
+
+      if (info.isSome) {
+        timepoint = info.unwrap().when;
+      }
+
+      pair = keyring.getPair(signatory as string);
+      tx = api.tx.utility.asMulti(basePair.meta.threshold, others, timepoint, submittable.method);
+    }
+
+    console.log('sendExtrinsic::', JSON.stringify(tx.method.toHuman()));
+
+    return isSubmit
+      ? this.makeExtrinsicCall(tx, queueTx, tx.signAndSend.bind(tx), pair)
+      : this.makeSignedTransaction(tx, queueTx, pair);
   }
 
   private async submitRpc ({ method, section }: DefinitionRpcExt, values: any[]): Promise<QueueTxResult> {
@@ -716,11 +780,7 @@ class Signer extends React.PureComponent<Props, State> {
     }
   }
 
-  private async makeSignedTransaction (
-    extrinsic: SubmittableExtrinsic,
-    { id, txFailedCb, txStartCb }: QueueTx,
-    pair: KeyringPair
-  ): Promise<void> {
+  private async makeSignedTransaction (extrinsic: SubmittableExtrinsic, { id, txFailedCb, txStartCb }: QueueTx, pair: KeyringPair): Promise<void> {
     const { queueSetTxStatus } = this.props;
     const { blocks, nonce, showTip, tip } = this.state;
 
diff --git a/packages/react-signer/src/Unlock.tsx b/packages/react-signer/src/Unlock.tsx
index b11e2df113..6513ff9459 100644
--- a/packages/react-signer/src/Unlock.tsx
+++ b/packages/react-signer/src/Unlock.tsx
@@ -4,7 +4,7 @@
 
 import { KeyringPair } from '@polkadot/keyring/types';
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Password } from '@polkadot/react-components';
 import keyring from '@polkadot/ui-keyring';
@@ -31,7 +31,11 @@ function getPair (address?: string | null): KeyringPair | null {
 
 function Unlock ({ className, error, onChange, onEnter, password, tabIndex, value }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
-  const [pair] = useState<KeyringPair | null>(getPair(value));
+  const [pair, setPair] = useState<KeyringPair | null>(null);
+
+  useEffect((): void => {
+    setPair(getPair(value));
+  }, [value]);
 
   if (!pair || !(pair.isLocked) || pair.meta.isInjected) {
     return null;
diff --git a/yarn.lock b/yarn.lock
index db8189f51f..0bd4f9769d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1790,7 +1790,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ledgerhq/hw-transport-node-hid@npm:^5.12.0":
+"@ledgerhq/hw-transport-node-hid@npm:^5.13.1":
   version: 5.13.1
   resolution: "@ledgerhq/hw-transport-node-hid@npm:5.13.1"
   dependencies:
@@ -1806,7 +1806,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ledgerhq/hw-transport-u2f@npm:^5.12.0":
+"@ledgerhq/hw-transport-u2f@npm:^5.13.1":
   version: 5.13.1
   resolution: "@ledgerhq/hw-transport-u2f@npm:5.13.1"
   dependencies:
@@ -1818,7 +1818,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ledgerhq/hw-transport-webusb@npm:^5.12.0":
+"@ledgerhq/hw-transport-webusb@npm:^5.13.1":
   version: 5.13.1
   resolution: "@ledgerhq/hw-transport-webusb@npm:5.13.1"
   dependencies:
@@ -2837,57 +2837,57 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/api-contract@npm:^1.12.0-beta.4":
-  version: 1.12.0-beta.4
-  resolution: "@polkadot/api-contract@npm:1.12.0-beta.4"
+"@polkadot/api-contract@npm:^1.12.0-beta.6":
+  version: 1.12.0-beta.6
+  resolution: "@polkadot/api-contract@npm:1.12.0-beta.6"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/api": 1.12.0-beta.4
-    "@polkadot/rpc-core": 1.12.0-beta.4
-    "@polkadot/types": 1.12.0-beta.4
-    "@polkadot/util": ^2.8.1
+    "@polkadot/api": 1.12.0-beta.6
+    "@polkadot/rpc-core": 1.12.0-beta.6
+    "@polkadot/types": 1.12.0-beta.6
+    "@polkadot/util": ^2.9.0-beta.0
     bn.js: ^5.1.1
     rxjs: ^6.5.5
-  checksum: 2/ae95d2463beb91a2cf66bfd608dcf0d5d954d48589bc55ec7e09703e8d606261e4a3a25401fdd572abdf4f5c9e3f9c7c97e398ecdc454d14ec1139bf9ef321e3
+  checksum: 2/c77582663494e766865ec8a14d2257ace43cac99b879d3cecfa16cfe5bcd67d9b468e2495fd732bb03459e91d5d1707b2f4f67b228377eb19824c4d00e1f7ef4
   languageName: node
   linkType: hard
 
-"@polkadot/api-derive@npm:1.12.0-beta.4":
-  version: 1.12.0-beta.4
-  resolution: "@polkadot/api-derive@npm:1.12.0-beta.4"
+"@polkadot/api-derive@npm:1.12.0-beta.6":
+  version: 1.12.0-beta.6
+  resolution: "@polkadot/api-derive@npm:1.12.0-beta.6"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/api": 1.12.0-beta.4
-    "@polkadot/rpc-core": 1.12.0-beta.4
-    "@polkadot/rpc-provider": 1.12.0-beta.4
-    "@polkadot/types": 1.12.0-beta.4
-    "@polkadot/util": ^2.8.1
-    "@polkadot/util-crypto": ^2.8.1
+    "@polkadot/api": 1.12.0-beta.6
+    "@polkadot/rpc-core": 1.12.0-beta.6
+    "@polkadot/rpc-provider": 1.12.0-beta.6
+    "@polkadot/types": 1.12.0-beta.6
+    "@polkadot/util": ^2.9.0-beta.0
+    "@polkadot/util-crypto": ^2.9.0-beta.0
     bn.js: ^5.1.1
     memoizee: ^0.4.14
     rxjs: ^6.5.5
-  checksum: 2/9f015cc6d140612c26f58c1abf6ddbaafa5f923623dd019c504e24d471f11a32d4023f7bb77ad2bb6af6d264ee0f4ade41554152e1718d5f5d873635fbd9f634
+  checksum: 2/8d0388e70fe041fddf92c87628ecb4088e1dff4a5c1a9e17c1abf653e86c8d3d77857f306a51b477576ff843e344aee9c1547f78462d70bf4f233fe9f515f952
   languageName: node
   linkType: hard
 
-"@polkadot/api@npm:^1.12.0-beta.4":
-  version: 1.12.0-beta.4
-  resolution: "@polkadot/api@npm:1.12.0-beta.4"
+"@polkadot/api@npm:^1.12.0-beta.6":
+  version: 1.12.0-beta.6
+  resolution: "@polkadot/api@npm:1.12.0-beta.6"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/api-derive": 1.12.0-beta.4
-    "@polkadot/keyring": ^2.8.1
-    "@polkadot/metadata": 1.12.0-beta.4
-    "@polkadot/rpc-core": 1.12.0-beta.4
-    "@polkadot/rpc-provider": 1.12.0-beta.4
-    "@polkadot/types": 1.12.0-beta.4
-    "@polkadot/types-known": 1.12.0-beta.4
-    "@polkadot/util": ^2.8.1
-    "@polkadot/util-crypto": ^2.8.1
+    "@polkadot/api-derive": 1.12.0-beta.6
+    "@polkadot/keyring": ^2.9.0-beta.0
+    "@polkadot/metadata": 1.12.0-beta.6
+    "@polkadot/rpc-core": 1.12.0-beta.6
+    "@polkadot/rpc-provider": 1.12.0-beta.6
+    "@polkadot/types": 1.12.0-beta.6
+    "@polkadot/types-known": 1.12.0-beta.6
+    "@polkadot/util": ^2.9.0-beta.0
+    "@polkadot/util-crypto": ^2.9.0-beta.0
     bn.js: ^5.1.1
     eventemitter3: ^4.0.0
     rxjs: ^6.5.5
-  checksum: 2/d12fc872f2450fb378b9633474ca02c819ec3183d2e05cd4284ce621021002abbc300a1096751b9c258965ffbc6e1c23e238f475b7fc00637249a4b3e2e1e9e9
+  checksum: 2/faa390f4020a69fa68d5727cca000f7f48363f1ed8bdcf36c756dcf435d735abf34d3868fc0c7d17ece717c80963caebdf2ecb3e7d8da653e074b86243d3c325
   languageName: node
   linkType: hard
 
@@ -2906,7 +2906,7 @@ __metadata:
   dependencies:
     "@babel/runtime": ^7.9.2
     "@polkadot/react-components": 0.42.0-beta.27
-    "@polkadot/react-qr": ^0.52.1
+    "@polkadot/react-qr": ^0.53.0-beta.1
     "@polkadot/vanitygen": ^0.11.1
     detect-browser: ^5.0.0
     file-saver: ^2.0.2
@@ -2928,7 +2928,7 @@ __metadata:
   resolution: "@polkadot/app-contracts@workspace:packages/page-contracts"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/api-contract": ^1.12.0-beta.4
+    "@polkadot/api-contract": ^1.12.0-beta.6
   languageName: unknown
   linkType: soft
 
@@ -3243,28 +3243,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/keyring@npm:^2.8.1":
-  version: 2.8.1
-  resolution: "@polkadot/keyring@npm:2.8.1"
+"@polkadot/keyring@npm:^2.9.0-beta.1":
+  version: 2.9.0-beta.1
+  resolution: "@polkadot/keyring@npm:2.9.0-beta.1"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/util": 2.8.1
-    "@polkadot/util-crypto": 2.8.1
-  checksum: 2/3c6e4be89b5e50ba4c57cc79f1c47d0927d092ac9937345037c18568fec070f873d977e289ef4d563036c1174fc25f0b6f4037c1ef70888957ee5288ad6c28e6
+    "@polkadot/util": 2.9.0-beta.1
+    "@polkadot/util-crypto": 2.9.0-beta.1
+  checksum: 2/e250a3c1a7b556d3d47f12c353dab99bceda512872b21ad22804d19c5ce2f279dcd30b506406819dae8c9eda57d90ada0ab98e7142ff75095a0d60f6d7c1b500
   languageName: node
   linkType: hard
 
-"@polkadot/metadata@npm:1.12.0-beta.4":
-  version: 1.12.0-beta.4
-  resolution: "@polkadot/metadata@npm:1.12.0-beta.4"
+"@polkadot/metadata@npm:1.12.0-beta.6":
+  version: 1.12.0-beta.6
+  resolution: "@polkadot/metadata@npm:1.12.0-beta.6"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/types": 1.12.0-beta.4
-    "@polkadot/types-known": 1.12.0-beta.4
-    "@polkadot/util": ^2.8.1
-    "@polkadot/util-crypto": ^2.8.1
+    "@polkadot/types": 1.12.0-beta.6
+    "@polkadot/types-known": 1.12.0-beta.6
+    "@polkadot/util": ^2.9.0-beta.0
+    "@polkadot/util-crypto": ^2.9.0-beta.0
     bn.js: ^5.1.1
-  checksum: 2/6be58e793ad023a544296d37d4032d77f5702c9d0ee71e15d1cecdbc3b8b07c74bb41ddcfee62f873132378026c618984874c7b58c7f6e341b40297dc3efc804
+  checksum: 2/ce2c36b797fae5884222b2b2c0648f7d84ed8fea4a550704d6e21c09fddf6291697526829b9847e7875f8acaefb6bf42f8f26e5c33e11e2fa0fb4c420ead4773
   languageName: node
   linkType: hard
 
@@ -3273,7 +3273,7 @@ __metadata:
   resolution: "@polkadot/react-api@workspace:packages/react-api"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/api": ^1.12.0-beta.4
+    "@polkadot/api": ^1.12.0-beta.6
     "@polkadot/extension-dapp": ^0.25.0-beta.3
     rxjs-compat: ^6.5.5
   languageName: unknown
@@ -3284,12 +3284,12 @@ __metadata:
   resolution: "@polkadot/react-components@workspace:packages/react-components"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/keyring": ^2.8.1
+    "@polkadot/keyring": ^2.9.0-beta.1
     "@polkadot/react-api": 0.42.0-beta.27
-    "@polkadot/react-identicon": ^0.52.1
+    "@polkadot/react-identicon": ^0.53.0-beta.1
     "@polkadot/react-query": 0.42.0-beta.27
-    "@polkadot/ui-keyring": ^0.52.1
-    "@polkadot/ui-settings": ^0.52.1
+    "@polkadot/ui-keyring": ^0.53.0-beta.1
+    "@polkadot/ui-settings": ^0.53.0-beta.1
     chart.js: ^2.9.3
     codeflask: ^1.4.1
     i18next: ^19.4.2
@@ -3324,17 +3324,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@polkadot/react-identicon@npm:^0.52.1":
-  version: 0.52.1
-  resolution: "@polkadot/react-identicon@npm:0.52.1"
+"@polkadot/react-identicon@npm:^0.53.0-beta.1":
+  version: 0.53.0-beta.1
+  resolution: "@polkadot/react-identicon@npm:0.53.0-beta.1"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/ui-settings": 0.52.1
-    "@polkadot/ui-shared": 0.52.1
+    "@polkadot/ui-settings": 0.53.0-beta.1
+    "@polkadot/ui-shared": 0.53.0-beta.1
     color: ^3.1.2
     jdenticon: 2.2.0
     react-copy-to-clipboard: ^5.0.2
-    styled-components: ^5.0.1
+    styled-components: ^5.1.0
   peerDependencies:
     "@polkadot/keyring": "*"
     "@polkadot/util": "*"
@@ -3342,7 +3342,7 @@ __metadata:
     react: "*"
     react-dom: "*"
     react-is: "*"
-  checksum: 2/88d76f424f9a930830b401e3bf558a0d3b46d49ed57f040d1d358b520faf560d9d368740ac69eed3107df8abeda5e7d25690a64a6c02b24bef049daf60a19d5d
+  checksum: 2/a691b86d53c68d33ca2530fcc8e8ae4dfce4a929918ab03c16042c91db1328a398d1be6f58aa79a596a7fb538fc1b284cc294651f71ac12aae6baf48f03845cf
   languageName: node
   linkType: hard
 
@@ -3355,9 +3355,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@polkadot/react-qr@npm:^0.52.1":
-  version: 0.52.1
-  resolution: "@polkadot/react-qr@npm:0.52.1"
+"@polkadot/react-qr@npm:^0.53.0-beta.1":
+  version: 0.53.0-beta.1
+  resolution: "@polkadot/react-qr@npm:0.53.0-beta.1"
   dependencies:
     "@babel/runtime": ^7.9.2
     qrcode-generator: ^1.4.4
@@ -3368,7 +3368,7 @@ __metadata:
     react: "*"
     react-dom: "*"
     styled-components: "*"
-  checksum: 2/00471bd109b9f56b487e3ff698c7d61f6a351ed25acdf6ceacd1e143b848615255dc62b1cde7668e0e30c0cd96189a863d6278e2c87095c39e7959d7f4c7896d
+  checksum: 2/a599551f91419bd26c4a33ca8c40860e542cb47354d6a17d279bef67e2d955c09efe7aec08926ef03c4feeba2a0358fc2fa3322098bfb49772eec299537d289b
   languageName: node
   linkType: hard
 
@@ -3386,39 +3386,39 @@ __metadata:
   dependencies:
     "@babel/runtime": ^7.9.2
     "@polkadot/react-components": 0.42.0-beta.27
-    "@polkadot/react-qr": ^0.52.1
+    "@polkadot/react-qr": ^0.53.0-beta.1
   languageName: unknown
   linkType: soft
 
-"@polkadot/rpc-core@npm:1.12.0-beta.4":
-  version: 1.12.0-beta.4
-  resolution: "@polkadot/rpc-core@npm:1.12.0-beta.4"
+"@polkadot/rpc-core@npm:1.12.0-beta.6":
+  version: 1.12.0-beta.6
+  resolution: "@polkadot/rpc-core@npm:1.12.0-beta.6"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/metadata": 1.12.0-beta.4
-    "@polkadot/rpc-provider": 1.12.0-beta.4
-    "@polkadot/types": 1.12.0-beta.4
-    "@polkadot/util": ^2.8.1
+    "@polkadot/metadata": 1.12.0-beta.6
+    "@polkadot/rpc-provider": 1.12.0-beta.6
+    "@polkadot/types": 1.12.0-beta.6
+    "@polkadot/util": ^2.9.0-beta.0
     memoizee: ^0.4.14
     rxjs: ^6.5.5
-  checksum: 2/88c651a96e1908b6043cfc919144dc7ae1633b2b51a5536f9339135dec3d62c8c4adf58a69ee7dafbe6e6c5cda9489ea0f8b296751c984a201dfcc631972b3ed
+  checksum: 2/9ff4abb1f95979e7d4b8a2ab02b50dba4f2bf35c206ad37e6009651a2b6d8f7ed6804560ca5d6c550c4b0945903961cc7475c9a90f78e72c81c95576794350db
   languageName: node
   linkType: hard
 
-"@polkadot/rpc-provider@npm:1.12.0-beta.4":
-  version: 1.12.0-beta.4
-  resolution: "@polkadot/rpc-provider@npm:1.12.0-beta.4"
+"@polkadot/rpc-provider@npm:1.12.0-beta.6":
+  version: 1.12.0-beta.6
+  resolution: "@polkadot/rpc-provider@npm:1.12.0-beta.6"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/metadata": 1.12.0-beta.4
-    "@polkadot/types": 1.12.0-beta.4
-    "@polkadot/util": ^2.8.1
-    "@polkadot/util-crypto": ^2.8.1
+    "@polkadot/metadata": 1.12.0-beta.6
+    "@polkadot/types": 1.12.0-beta.6
+    "@polkadot/util": ^2.9.0-beta.0
+    "@polkadot/util-crypto": ^2.9.0-beta.0
     bn.js: ^5.1.1
     eventemitter3: ^4.0.0
     isomorphic-fetch: ^2.2.1
     websocket: ^1.0.31
-  checksum: 2/20a4d8206ba27973911d5072bc45b496df476d538324cda2884d06e16e84c8b6f837427f1896138bde4f9e64cecda75a70a465b2fd7742236e7f43fae1c21863
+  checksum: 2/a95807dc02908c317e047076378b0fa39bb8f2cb1b43927f1d3cf9d9ce2a2dd0120c02c58db83343ec4a745f72de5f0efd93306b1dca54b2495aa96fa1b7c366
   languageName: node
   linkType: hard
 
@@ -3431,42 +3431,42 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/types-known@npm:1.12.0-beta.4":
-  version: 1.12.0-beta.4
-  resolution: "@polkadot/types-known@npm:1.12.0-beta.4"
+"@polkadot/types-known@npm:1.12.0-beta.6":
+  version: 1.12.0-beta.6
+  resolution: "@polkadot/types-known@npm:1.12.0-beta.6"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/types": 1.12.0-beta.4
-    "@polkadot/util": ^2.8.1
+    "@polkadot/types": 1.12.0-beta.6
+    "@polkadot/util": ^2.9.0-beta.0
     bn.js: ^5.1.1
-  checksum: 2/51c1a94c72fa31aade4652c5740108b9d3307d3273f8cd527b21fc956dc86ee4b5a2e2ef8714b2170b1e63b89d5b9ba7ccf7d8c39fa234f4c76f6b352c0dce47
+  checksum: 2/9005884779cef7a5cef0afe830dc620fd33dd3bb69af6b8b27474734f832678b49bbc087182cf01b4c3b3489c227c57d20eeb79fd7b55af8cb2082eb71e84343
   languageName: node
   linkType: hard
 
-"@polkadot/types@npm:^1.12.0-beta.4":
-  version: 1.12.0-beta.4
-  resolution: "@polkadot/types@npm:1.12.0-beta.4"
+"@polkadot/types@npm:^1.12.0-beta.6":
+  version: 1.12.0-beta.6
+  resolution: "@polkadot/types@npm:1.12.0-beta.6"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/metadata": 1.12.0-beta.4
-    "@polkadot/util": ^2.8.1
-    "@polkadot/util-crypto": ^2.8.1
+    "@polkadot/metadata": 1.12.0-beta.6
+    "@polkadot/util": ^2.9.0-beta.0
+    "@polkadot/util-crypto": ^2.9.0-beta.0
     "@types/bn.js": ^4.11.6
     bn.js: ^5.1.1
     memoizee: ^0.4.14
     rxjs: ^6.5.5
-  checksum: 2/95070b1dfe89ad4944965db8bc890c1358c3a593f08c842e621b525d9ebba91032b2e9e1878e5fbad6a2c8ff641777811e3fb2f2399bbfa76ca89e991a7cde95
+  checksum: 2/137318edd0be51ef7abe7618a684b20ca0d93c49107601447ad32086519dbc2180d5ec67d8a544bb28c7106e9c870cdc36f580f95967def9d19e5d0c3af0990a
   languageName: node
   linkType: hard
 
-"@polkadot/ui-keyring@npm:^0.52.1":
-  version: 0.52.1
-  resolution: "@polkadot/ui-keyring@npm:0.52.1"
+"@polkadot/ui-keyring@npm:^0.53.0-beta.1":
+  version: 0.53.0-beta.1
+  resolution: "@polkadot/ui-keyring@npm:0.53.0-beta.1"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@ledgerhq/hw-transport-node-hid": ^5.12.0
-    "@ledgerhq/hw-transport-u2f": ^5.12.0
-    "@ledgerhq/hw-transport-webusb": ^5.12.0
+    "@ledgerhq/hw-transport-node-hid": ^5.13.1
+    "@ledgerhq/hw-transport-u2f": ^5.13.1
+    "@ledgerhq/hw-transport-webusb": ^5.13.1
     ledger-polkadot: ^0.7.0
     mkdirp: ^1.0.4
     rxjs: ^6.5.5
@@ -3478,42 +3478,42 @@ __metadata:
   dependenciesMeta:
     "@ledgerhq/hw-transport-node-hid":
       optional: true
-  checksum: 2/555ce23da92c8cf4e00f01a3c83ecd4adac2c6b40b5cc20a3e2dc53f8b27ab419dfba7b7f83b073dafc58f237208e10943bd83405372babe052bc8ea6df4c04f
+  checksum: 2/e9ee54a491a98348e0c0aa78ac4109a0d15d72dc01cac89aaabcd57c9e3d494e4b690e5db0238aed62b8838a2c69b1145650fde5736c63665e1de4a0951957d8
   languageName: node
   linkType: hard
 
-"@polkadot/ui-settings@npm:0.52.1, @polkadot/ui-settings@npm:^0.52.1":
-  version: 0.52.1
-  resolution: "@polkadot/ui-settings@npm:0.52.1"
+"@polkadot/ui-settings@npm:0.53.0-beta.1, @polkadot/ui-settings@npm:^0.53.0-beta.1":
+  version: 0.53.0-beta.1
+  resolution: "@polkadot/ui-settings@npm:0.53.0-beta.1"
   dependencies:
     "@babel/runtime": ^7.9.2
     eventemitter3: ^4.0.0
     store: ^2.0.12
   peerDependencies:
     "@polkadot/util": "*"
-  checksum: 2/bed528b174fe5a6460b372e06f35cfb970a1e6f75c9721696b0b00724786b3d5ddf1f7f45ce864f688752ec3f054f8dcc84eaa35e4df6414c4165074005dcfe0
+  checksum: 2/55a2ed177279f512a7f8022455ee7cc37809e871032ba383bac7538f170f11ae12cf53a56a5d795c89130a1334b7dc6e0de5667536130d2f09f6df1763913f54
   languageName: node
   linkType: hard
 
-"@polkadot/ui-shared@npm:0.52.1":
-  version: 0.52.1
-  resolution: "@polkadot/ui-shared@npm:0.52.1"
+"@polkadot/ui-shared@npm:0.53.0-beta.1":
+  version: 0.53.0-beta.1
+  resolution: "@polkadot/ui-shared@npm:0.53.0-beta.1"
   dependencies:
     "@babel/runtime": ^7.9.2
     color: ^3.1.2
   peerDependencies:
     "@polkadot/util": "*"
     "@polkadot/util-crypto": "*"
-  checksum: 2/90b5e46d481856d85c348868f8bf1189bbc491ae1e6b7fba590f5e710565d445f07afcc0dc700573869d85a124a526f8f34ddac720fb5b294b45f8bc5810ff87
+  checksum: 2/6dc9f164f1217bef2dbe640b5ff696425372f02455bf94400a0cf4c82c06df16bd7c598c0b6ffaeba46dde2ddf6803dfe77fc3595198a1e25b7ef5390436e0ba
   languageName: node
   linkType: hard
 
-"@polkadot/util-crypto@npm:^2.8.1":
-  version: 2.8.1
-  resolution: "@polkadot/util-crypto@npm:2.8.1"
+"@polkadot/util-crypto@npm:^2.9.0-beta.1":
+  version: 2.9.0-beta.1
+  resolution: "@polkadot/util-crypto@npm:2.9.0-beta.1"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/util": 2.8.1
+    "@polkadot/util": 2.9.0-beta.1
     "@polkadot/wasm-crypto": ^1.2.1
     base-x: ^3.0.8
     bip39: ^3.0.2
@@ -3525,13 +3525,13 @@ __metadata:
     pbkdf2: ^3.0.17
     tweetnacl: ^1.0.3
     xxhashjs: ^0.2.2
-  checksum: 2/2cbbf5d084695ea901a29013f4a607b04c90e290709ac7c5633d854b602344c11adb154cbfd97a1a0caf40aaa9811c24b5470b335ddf4a17696b832686c84e0f
+  checksum: 2/ec3339cce2808102cf6c645a522f08d844e1010d504e9cf3ee8f67a4fea249cd90b3d9acb7dc0c0f63bb16ecf8812a6ec1986c666c00d84a3f8a0adb0f1e7bd2
   languageName: node
   linkType: hard
 
-"@polkadot/util@npm:^2.8.1":
-  version: 2.8.1
-  resolution: "@polkadot/util@npm:2.8.1"
+"@polkadot/util@npm:^2.9.0-beta.1":
+  version: 2.9.0-beta.1
+  resolution: "@polkadot/util@npm:2.9.0-beta.1"
   dependencies:
     "@babel/runtime": ^7.9.2
     "@types/bn.js": ^4.11.6
@@ -3539,7 +3539,7 @@ __metadata:
     camelcase: ^5.3.1
     chalk: ^4.0.0
     ip-regex: ^4.1.0
-  checksum: 2/30f5e0f4cd352a6258e3fc134b047c680fcfab5e0efd694bad5076ef71a95065f203a9a48ece4c7aa77e50e930de1e47ba2f28283a2d0134c6e2258305be47c1
+  checksum: 2/4d2d9f16413ae2b23c49dab1681907563196db3e41c0a926e72b0aa8f689ac860a2066f16be78d1301edf7d5ef176024f6a3776d49920386fb85eb992189734f
   languageName: node
   linkType: hard
 
@@ -20241,7 +20241,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"styled-components@npm:^5.0.1":
+"styled-components@npm:^5.1.0":
   version: 5.1.0
   resolution: "styled-components@npm:5.1.0"
   dependencies: