diff --git a/package.json b/package.json
index 0b5581147be3..a0f421d58141 100644
--- a/package.json
+++ b/package.json
@@ -10,10 +10,10 @@
     "packages/*"
   ],
   "resolutions": {
-    "@polkadot/api": "^0.99.0-beta.11",
-    "@polkadot/api-contract": "^0.99.0-beta.11",
+    "@polkadot/api": "^0.99.0-beta.13",
+    "@polkadot/api-contract": "^0.99.0-beta.13",
     "@polkadot/keyring": "^1.7.1",
-    "@polkadot/types": "^0.99.0-beta.11",
+    "@polkadot/types": "^0.99.0-beta.13",
     "@polkadot/util": "^1.7.1",
     "@polkadot/util-crypto": "^1.7.1",
     "babel-core": "^7.0.0-bridge.0",
diff --git a/packages/app-accounts/src/modals/Backup.tsx b/packages/app-accounts/src/modals/Backup.tsx
index 240d7ce9e93c..7366f2e84894 100644
--- a/packages/app-accounts/src/modals/Backup.tsx
+++ b/packages/app-accounts/src/modals/Backup.tsx
@@ -67,9 +67,9 @@ export default function ({ address, onClose }: Props): React.ReactElement<Props>
   return (
     <Modal
       className='app--accounts-Modal'
+      header={t('Backup account')}
       open
     >
-      <Modal.Header>{t('Backup account')}</Modal.Header>
       <Content
         address={address}
         doBackup={_doBackup}
diff --git a/packages/app-accounts/src/modals/ChangePass.tsx b/packages/app-accounts/src/modals/ChangePass.tsx
index f89b0812dcaa..6bf2034fb141 100644
--- a/packages/app-accounts/src/modals/ChangePass.tsx
+++ b/packages/app-accounts/src/modals/ChangePass.tsx
@@ -37,9 +37,9 @@ class ChangePass extends TxComponent<Props, State> {
     return (
       <Modal
         className='app--accounts-Modal'
+        header={t('Change account password')}
         open
       >
-        <Modal.Header>{t('Change account password')}</Modal.Header>
         {this.renderContent()}
         {this.renderButtons()}
       </Modal>
diff --git a/packages/app-accounts/src/modals/Create.tsx b/packages/app-accounts/src/modals/Create.tsx
index e59bedb72026..263d29bf9509 100644
--- a/packages/app-accounts/src/modals/Create.tsx
+++ b/packages/app-accounts/src/modals/Create.tsx
@@ -189,9 +189,9 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, t, type:
   return (
     <Modal
       className={className}
+      header={t('Add an account via seed')}
       open
     >
-      <Modal.Header>{t('Add an account via seed')}</Modal.Header>
       {address && isConfirmationOpen && (
         <CreateConfirmation
           address={address}
diff --git a/packages/app-accounts/src/modals/CreateConfirmation.tsx b/packages/app-accounts/src/modals/CreateConfirmation.tsx
index a778b1979b47..cddeed3bb9cd 100644
--- a/packages/app-accounts/src/modals/CreateConfirmation.tsx
+++ b/packages/app-accounts/src/modals/CreateConfirmation.tsx
@@ -18,10 +18,10 @@ interface Props extends I18nProps {
 
 function CreateConfirmation ({ address, name, onClose, onCommit, t }: Props): React.ReactElement<Props> | null {
   return (
-    <Modal open>
-      <Modal.Header>
-        {t('Important notice')}
-      </Modal.Header>
+    <Modal
+      header={t('Important notice')}
+      open
+    >
       <Modal.Content>
         <AddressRow
           defaultName={name}
diff --git a/packages/app-accounts/src/modals/Derive.tsx b/packages/app-accounts/src/modals/Derive.tsx
index e02056f3685d..797159263e8a 100644
--- a/packages/app-accounts/src/modals/Derive.tsx
+++ b/packages/app-accounts/src/modals/Derive.tsx
@@ -136,9 +136,9 @@ function Derive ({ className, from, onClose, t }: Props): React.ReactElement {
   return (
     <Modal
       className={className}
+      header={t('Derive account from pair')}
       open
     >
-      <Modal.Header>{t('Derive account from pair')}</Modal.Header>
       {address && isConfirmationOpen && (
         <CreateConfirmation
           address={address}
diff --git a/packages/app-accounts/src/modals/Import.tsx b/packages/app-accounts/src/modals/Import.tsx
index 886a80ea877e..7467e6f6fcea 100644
--- a/packages/app-accounts/src/modals/Import.tsx
+++ b/packages/app-accounts/src/modals/Import.tsx
@@ -38,8 +38,10 @@ class Import extends TxComponent<Props, State> {
     const { isFileValid, isPassValid } = this.state;
 
     return (
-      <Modal open>
-        <Modal.Header>{t('Add via backup file')}</Modal.Header>
+      <Modal
+        header={t('Add via backup file')}
+        open
+      >
         {this.renderInput()}
         <Modal.Actions>
           <Button.Group>
diff --git a/packages/app-accounts/src/modals/Qr.tsx b/packages/app-accounts/src/modals/Qr.tsx
index 69a69581ebb5..61bf73df6f21 100644
--- a/packages/app-accounts/src/modals/Qr.tsx
+++ b/packages/app-accounts/src/modals/Qr.tsx
@@ -49,9 +49,9 @@ function QrModal ({ className, onClose, onStatusChange, t }: Props): React.React
   return (
     <Modal
       className={className}
+      header={t('Add account via Qr')}
       open
     >
-      <Modal.Header>{t('Add account via Qr')}</Modal.Header>
       <Modal.Content>
         {
           scanned
diff --git a/packages/app-accounts/src/modals/Transfer.tsx b/packages/app-accounts/src/modals/Transfer.tsx
index 46c04e3d8260..d8f32ebc514f 100644
--- a/packages/app-accounts/src/modals/Transfer.tsx
+++ b/packages/app-accounts/src/modals/Transfer.tsx
@@ -89,9 +89,9 @@ function Transfer ({ className, onClose, recipientId: propRecipientId, senderId:
   return (
     <Modal
       className='app--accounts-Modal'
+      header={t('Send funds')}
       open
     >
-      <Modal.Header>{t('Send funds')}</Modal.Header>
       <Modal.Content>
         <div className={className}>
           <InputAddress
diff --git a/packages/app-address-book/src/modals/Create.tsx b/packages/app-address-book/src/modals/Create.tsx
index 83974806fb57..f2c3e6261bfc 100644
--- a/packages/app-address-book/src/modals/Create.tsx
+++ b/packages/app-address-book/src/modals/Create.tsx
@@ -77,8 +77,10 @@ function Create ({ onClose, onStatusChange, t }: Props): React.ReactElement<Prop
   };
 
   return (
-    <Modal open>
-      <Modal.Header>{t('Add an address')}</Modal.Header>
+    <Modal
+      header={t('Add an address')}
+      open
+    >
       <Modal.Content>
         <AddressRow
           defaultName={name}
diff --git a/packages/app-contracts/package.json b/packages/app-contracts/package.json
index a5d6fa7119ca..4c0255ba3660 100644
--- a/packages/app-contracts/package.json
+++ b/packages/app-contracts/package.json
@@ -11,7 +11,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.7.5",
-    "@polkadot/api-contract": "^0.99.0-beta.11",
+    "@polkadot/api-contract": "^0.99.0-beta.13",
     "@polkadot/react-components": "^0.38.0-beta.54"
   }
 }
diff --git a/packages/app-contracts/src/Contracts/Call.tsx b/packages/app-contracts/src/Contracts/Call.tsx
index b357fa53d55c..c53cf6f3dfab 100644
--- a/packages/app-contracts/src/Contracts/Call.tsx
+++ b/packages/app-contracts/src/Contracts/Call.tsx
@@ -113,12 +113,10 @@ function Call (props: Props): React.ReactElement<Props> | null {
   return (
     <Modal
       className={[className || '', 'app--contracts-Modal'].join(' ')}
+      header={t('Call a contract')}
       onClose={onClose}
       open={isOpen}
     >
-      <Modal.Header>
-        {t('Call a contract')}
-      </Modal.Header>
       <Modal.Content>
         {callContract && (
           <div className='contracts--CallControls'>
diff --git a/packages/app-contracts/src/Modal.tsx b/packages/app-contracts/src/Modal.tsx
index 379e311c8967..989988ca39be 100644
--- a/packages/app-contracts/src/Modal.tsx
+++ b/packages/app-contracts/src/Modal.tsx
@@ -54,12 +54,10 @@ class ContractModal<P extends ContractModalProps, S extends ContractModalState>
     return (
       <Modal
         className='app--contracts-Modal'
+        header={t(this.headerText)}
         onClose={this.onClose}
         open={isOpen}
       >
-        <Modal.Header>
-          {t(this.headerText)}
-        </Modal.Header>
         <Modal.Content>
           {this.renderContent()}
         </Modal.Content>
diff --git a/packages/app-contracts/src/RemoveABI.tsx b/packages/app-contracts/src/RemoveABI.tsx
index 42ecf9b6b7a5..3e740f7db886 100644
--- a/packages/app-contracts/src/RemoveABI.tsx
+++ b/packages/app-contracts/src/RemoveABI.tsx
@@ -24,12 +24,10 @@ function RemoveABI ({ code, onClose, onRemove, t }: Props): React.ReactElement<P
   return (
     <Modal
       className='app--accounts-Modal'
+      header={t('Confirm ABI removal')}
       onClose={onClose}
       open
     >
-      <Modal.Header>
-        {t('Confirm ABI removal')}
-      </Modal.Header>
       <Modal.Content>
         <CodeRow
           code={code}
diff --git a/packages/app-council/src/Overview/Vote.tsx b/packages/app-council/src/Overview/Vote.tsx
index b011169c0b11..1e603e67a8d5 100644
--- a/packages/app-council/src/Overview/Vote.tsx
+++ b/packages/app-council/src/Overview/Vote.tsx
@@ -2,17 +2,15 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { ApiProps } from '@polkadot/react-api/types';
 import { AccountId, VoteIndex } from '@polkadot/types/interfaces';
 import { Codec } from '@polkadot/types/types';
-import { DerivedVoterPositions } from '@polkadot/api-derive/types';
-import { ApiProps } from '@polkadot/react-api/types';
 import { ComponentProps } from './types';
 
 import BN from 'bn.js';
 import React from 'react';
+import { withApi } from '@polkadot/react-api';
 import styled from 'styled-components';
-import { createType } from '@polkadot/types';
-import { registry, withCalls, withMulti } from '@polkadot/react-api';
 import { AddressMini, Button, Toggle } from '@polkadot/react-components';
 import TxModal, { TxModalState, TxModalProps } from '@polkadot/react-components/TxModal';
 
@@ -21,32 +19,15 @@ import VoteValue from './VoteValue';
 
 type VoteType = 'member' | 'runnerup' | 'candidate';
 
-interface Props extends ApiProps, ComponentProps, TxModalProps {
-  voterPositions?: DerivedVoterPositions;
-}
+interface Props extends ApiProps, ComponentProps, TxModalProps {}
 
 interface State extends TxModalState {
   votes: Record<string, boolean>;
   voteValue: BN;
-  // voterPositions: DerivedVoterPositions;
 }
 
 // const MAX_VOTES = 16;
 
-// const AlreadyVoted = styled.article`
-//   display: flex;
-//   align-items: center;
-//   margin: 0.5rem 0;
-
-//   & > :first-child {
-//     flex: 1 1;
-//   }
-
-//   & > :not(:first-child) {
-//     margin: 0;
-//   }
-// `;
-
 const Candidates = styled.div`
   display: flex;
   flex-wrap: wrap;
@@ -121,29 +102,17 @@ class Vote extends TxModal<Props, State> {
   protected txMethod = (): string =>
     this.props.api.tx.electionsPhragmen
       ? 'electionsPhragmen.vote'
-      : 'elections.setApprovals';
+      : 'elections.vote';
 
   protected txParams = (): [boolean[] | null, VoteIndex, BN | null] | [string[], BN] => {
-    const { api, electionsInfo: { candidates, nextVoterSet, voteCount }, voterPositions } = this.props;
-    const { accountId, votes, voteValue } = this.state;
-
-    if (api.tx.electionsPhragmen) {
-      return [
-        Object.entries(votes).filter(([, vote]): boolean => vote).map(([accountId]): string => accountId),
-        voteValue
-      ];
-    }
-
-    const approvals = candidates.map((accountId): boolean => votes[accountId.toString()] === true);
+    const { votes, voteValue } = this.state;
 
     return [
-      approvals
-        ? approvals.slice(0, 1 + approvals.lastIndexOf(true))
-        : [],
-      createType(registry, 'VoteIndex', voteCount),
-      voterPositions && accountId && voterPositions[accountId]
-        ? voterPositions[accountId].setIndex
-        : nextVoterSet || null
+      Object
+        .entries(votes)
+        .filter(([, vote]): boolean => vote)
+        .map(([accountId]): string => accountId),
+      voteValue
     ];
   }
 
@@ -155,13 +124,11 @@ class Vote extends TxModal<Props, State> {
   }
 
   protected renderTrigger = (): React.ReactNode => {
-    const { api, electionsInfo: { candidates, members, runnersUp }, t } = this.props;
-    const available = api.tx.electionsPhragmen
-      ? members
-        .map(([accountId]): AccountId => accountId)
-        .concat(runnersUp.map(([accountId]): AccountId => accountId))
-        .concat(candidates)
-      : candidates;
+    const { electionsInfo: { candidates, members, runnersUp }, t } = this.props;
+    const available = members
+      .map(([accountId]): AccountId => accountId)
+      .concat(runnersUp.map(([accountId]): AccountId => accountId))
+      .concat(candidates);
 
     return (
       <Button
@@ -175,43 +142,20 @@ class Vote extends TxModal<Props, State> {
   }
 
   protected renderContent = (): React.ReactNode => {
-    const { api, electionsInfo: { candidates, members, runnersUp }, t } = this.props;
+    const { electionsInfo: { candidates, members, runnersUp }, t } = this.props;
     const { accountId, votes } = this.state;
     const _candidates = candidates.map((accountId): [AccountId, VoteType] => [accountId, 'candidate']);
-    const available = api.tx.electionsPhragmen
-      ? members
-        .map(([accountId]): [AccountId, VoteType] => [accountId, 'member'])
-        .concat(runnersUp.map(([accountId]): [AccountId, VoteType] => [accountId, 'runnerup']))
-        .concat(_candidates)
-      : _candidates;
+    const available = members
+      .map(([accountId]): [AccountId, VoteType] => [accountId, 'member'])
+      .concat(runnersUp.map(([accountId]): [AccountId, VoteType] => [accountId, 'runnerup']))
+      .concat(_candidates);
 
     return (
       <>
-        {api.tx.electionsPhragmen && (
-          <VoteValue
-            accountId={accountId}
-            onChange={this.setVoteValue}
-          />
-        )}
-        {/* {(oldApprovals && accountId && voterPositions && voterPositions[accountId]) && (
-          <AlreadyVoted className='warning padded'>
-            <div>
-              <Icon name='warning sign' />
-              {t('You have already voted in this round')}
-            </div>
-            <Button.Group>
-              <TxButton
-                accountId={accountId}
-                isNegative
-                label={t('Retract vote')}
-                icon='delete'
-                onSuccess={this.onRetractVote}
-                params={[voterPositions[accountId].globalIndex]}
-                tx='elections.retractVoter'
-              />
-            </Button.Group>
-          </AlreadyVoted>
-        )} */}
+        <VoteValue
+          accountId={accountId}
+          onChange={this.setVoteValue}
+        />
         <Candidates>
           {available.map(([accountId, type]): React.ReactNode => {
             const key = accountId.toString();
@@ -246,50 +190,20 @@ class Vote extends TxModal<Props, State> {
     this.setState({ voteValue });
   }
 
-  private fetchApprovals = (accountId: string | null): void => {
-    const { api, electionsInfo: { candidates, voteCount } } = this.props;
-
-    if (!accountId || !voteCount) {
-      return;
-    }
-
-    // FIXME This any is a mismatch in api-derive
-    api.derive.elections
-      .approvalsOfAt(accountId as any, voteCount)
-      .then((approvals: boolean[]): void => {
-        this.setState({
-          votes: candidates.reduce((votes: Record<string, boolean>, accountId, index): Record<string, boolean> => ({
-            ...votes,
-            [accountId.toString()]: approvals[index] || false
-          }), {})
-        });
-      });
-  }
-
-  private fetchVotes = (accountId: string | null): void => {
-    const { api } = this.props;
-
-    if (!accountId || !api.tx.electionsPhragmen) {
-      return;
-    }
-
-    api.query.electionsPhragmen
-      .votesOf<[AccountId[]] & Codec>(accountId)
-      .then(([existingVotes]): void => {
-        existingVotes.forEach((accountId): void => {
-          this.onChangeVote(accountId.toString())(true);
-        });
-      });
-  }
-
   protected onChangeAccount = (accountId: string | null): void => {
     const { api } = this.props;
 
     this.setState({ accountId });
 
-    api.tx.electionsPhragmen
-      ? this.fetchVotes(accountId)
-      : this.fetchApprovals(accountId);
+    if (accountId) {
+      (api.query.electionsPhragmen || api.query.elections)
+        .votesOf<[AccountId[]] & Codec>(accountId)
+        .then(([existingVotes]): void => {
+          existingVotes.forEach((accountId): void => {
+            this.onChangeVote(accountId.toString())(true);
+          });
+        });
+    }
   }
 
   private onChangeVote = (accountId: string): (isChecked: boolean) => void =>
@@ -303,10 +217,4 @@ class Vote extends TxModal<Props, State> {
     }
 }
 
-export default withMulti(
-  Vote,
-  translate,
-  withCalls<Props>(
-    ['derive.elections.voterPositions', { propName: 'voterPositions' }]
-  )
-);
+export default translate(withApi(Vote));
diff --git a/packages/app-democracy/src/Overview/PreImage.tsx b/packages/app-democracy/src/Overview/PreImage.tsx
index 9d0443a611ed..145a129cb2e4 100644
--- a/packages/app-democracy/src/Overview/PreImage.tsx
+++ b/packages/app-democracy/src/Overview/PreImage.tsx
@@ -39,9 +39,9 @@ function PreImage ({ className, onClose, t }: Props): React.ReactElement<Props>
   return (
     <Modal
       className={className}
+      header={t('Submit preimage')}
       open
     >
-      <Modal.Header>{t('Submit preimage')}</Modal.Header>
       <Modal.Content>
         <InputAddress
           help={t('The account you want to register the preimage from')}
diff --git a/packages/app-democracy/src/Overview/ProposalCell.tsx b/packages/app-democracy/src/Overview/ProposalCell.tsx
index 757148e32b10..ce3d3811c157 100644
--- a/packages/app-democracy/src/Overview/ProposalCell.tsx
+++ b/packages/app-democracy/src/Overview/ProposalCell.tsx
@@ -32,11 +32,7 @@ function ProposalCell ({ className, proposal, proposalHash, t }: Props): React.R
     <td className={`${className} all`}>
       <div>{section}.{method}</div>
       <details>
-        <summary>{
-          meta && meta.documentation
-            ? meta.documentation.join(' ')
-            : t('Details')
-        }</summary>
+        <summary>{meta?.documentation.join(' ') || t('Details')}</summary>
         <Call
           labelHash={t('proposal hash')}
           value={proposal}
diff --git a/packages/app-democracy/src/Overview/Propose.tsx b/packages/app-democracy/src/Overview/Propose.tsx
index cb690a28672e..3bfb22894a2c 100644
--- a/packages/app-democracy/src/Overview/Propose.tsx
+++ b/packages/app-democracy/src/Overview/Propose.tsx
@@ -29,9 +29,9 @@ function Propose ({ className, onClose, t }: Props): React.ReactElement<Props> {
   return (
     <Modal
       className={className}
+      header={t('Submit proposal')}
       open
     >
-      <Modal.Header>{t('Submit proposal')}</Modal.Header>
       <Modal.Content>
         <InputAddress
           help={t('The account you want to register the proposal from')}
diff --git a/packages/app-democracy/src/Overview/Seconding.tsx b/packages/app-democracy/src/Overview/Seconding.tsx
index 250b6648b9a5..ab3474c75ede 100644
--- a/packages/app-democracy/src/Overview/Seconding.tsx
+++ b/packages/app-democracy/src/Overview/Seconding.tsx
@@ -33,10 +33,10 @@ function Seconding ({ depositors, proposalId, t }: Props): React.ReactElement<Pr
     <>
       {isSecondingOpen && (
         <Modal
+          header={t('Second proposal')}
           open
           size='small'
         >
-          <Modal.Header>{t('Second proposal')}</Modal.Header>
           <Modal.Content>
             <InputAddress
               help={t('Select the account you wish to second with. This will lock your funds until the proposal is either approved or rejected')}
diff --git a/packages/app-democracy/src/Overview/Voting.tsx b/packages/app-democracy/src/Overview/Voting.tsx
index 5e06cffafc8e..9544fc99e699 100644
--- a/packages/app-democracy/src/Overview/Voting.tsx
+++ b/packages/app-democracy/src/Overview/Voting.tsx
@@ -33,10 +33,10 @@ function Voting ({ referendumId, t }: Props): React.ReactElement<Props> | null {
     <>
       {isVotingOpen && (
         <Modal
+          header={t('Vote on proposal')}
           open
           size='small'
         >
-          <Modal.Header>{t('Vote on proposal')}</Modal.Header>
           <Modal.Content>
             <VoteAccount onChange={setAccountId} />
             <VoteToggle
diff --git a/packages/app-explorer/src/BlockInfo/Extrinsics.tsx b/packages/app-explorer/src/BlockInfo/Extrinsics.tsx
index 73c2f50d7ebd..2ef52c91f41d 100644
--- a/packages/app-explorer/src/BlockInfo/Extrinsics.tsx
+++ b/packages/app-explorer/src/BlockInfo/Extrinsics.tsx
@@ -19,24 +19,6 @@ interface Props extends I18nProps {
   value?: Extrinsic[] | null;
 }
 
-function renderSigner ({ t }: Props, extrinsic: Extrinsic): React.ReactNode {
-  if (!extrinsic.isSigned) {
-    return null;
-  }
-
-  return (
-    <div className='explorer--BlockByHash-header'>
-      <div>
-        <AddressMini value={extrinsic.signer} />
-      </div>
-      <div className='explorer--BlockByHash-nonce'>
-        {t('index')} {formatNumber(extrinsic.nonce)}
-      </div>
-    </div>
-  );
-}
-
-// FIXME This is _very_ similar to what we have in democracy/Item
 function renderExtrinsic (props: Props, extrinsic: Extrinsic, index: number): React.ReactNode {
   const { blockNumber, t } = props;
   const { meta, method, section } = registry.findMetaCall(extrinsic.callIndex);
@@ -57,14 +39,19 @@ function renderExtrinsic (props: Props, extrinsic: Extrinsic, index: number): Re
         <h3>
           {section}.{method}&nbsp;(#{formatNumber(index)})
         </h3>
-        {renderSigner(props, extrinsic)}
+        {extrinsic.isSigned && (
+          <div className='explorer--BlockByHash-header'>
+            <div>
+              <AddressMini value={extrinsic.signer} />
+            </div>
+            <div className='explorer--BlockByHash-nonce'>
+              {t('index')} {formatNumber(extrinsic.nonce)}
+            </div>
+          </div>
+        )}
       </div>
       <details>
-        <summary>{
-          meta && meta.documentation
-            ? meta.documentation.join(' ')
-            : t('Details')
-        }</summary>
+        <summary>{meta?.documentation.join(' ') || t('Details')}</summary>
         <Call
           className='details'
           mortality={
@@ -93,22 +80,8 @@ function renderExtrinsic (props: Props, extrinsic: Extrinsic, index: number): Re
   );
 }
 
-function renderContent (props: Props): React.ReactNode {
-  const { value = [] } = props;
-
-  return (value || []).map((extrinsic, index): React.ReactNode => {
-    try {
-      return renderExtrinsic(props, extrinsic, index);
-    } catch (error) {
-      console.error(error);
-
-      return props.t('Unable to render extrinsic');
-    }
-  });
-}
-
 function Extrinsics (props: Props): React.ReactElement<Props> {
-  const { className, label, t } = props;
+  const { className, label, t, value } = props;
 
   return (
     <Column
@@ -116,7 +89,15 @@ function Extrinsics (props: Props): React.ReactElement<Props> {
       emptyText={t('No pending extrinsics are in the queue')}
       headerText={label || t('extrinsics')}
     >
-      {renderContent(props)}
+      {value?.map((extrinsic, index): React.ReactNode => {
+        try {
+          return renderExtrinsic(props, extrinsic, index);
+        } catch (error) {
+          console.error(error);
+
+          return props.t('Unable to render extrinsic');
+        }
+      })}
     </Column>
   );
 }
diff --git a/packages/app-generic-asset/src/modals/Create.tsx b/packages/app-generic-asset/src/modals/Create.tsx
index 556dfc826915..5feb01f592b8 100644
--- a/packages/app-generic-asset/src/modals/Create.tsx
+++ b/packages/app-generic-asset/src/modals/Create.tsx
@@ -28,8 +28,10 @@ function Create ({ onClose, onRegister, t }: Props): React.ReactElement<Props> {
   };
 
   return (
-    <Modal open>
-      <Modal.Header>{t('Register an Asset')}</Modal.Header>
+    <Modal
+      header={t('Register an Asset')}
+      open
+    >
       <Modal.Content>
         <InputNumber
           help={t('Enter the Asset ID of the token you want to manage.')}
diff --git a/packages/app-staking/src/Actions/Account/BondExtra.tsx b/packages/app-staking/src/Actions/Account/BondExtra.tsx
index 42a0d94d4519..f8ab68745b1b 100644
--- a/packages/app-staking/src/Actions/Account/BondExtra.tsx
+++ b/packages/app-staking/src/Actions/Account/BondExtra.tsx
@@ -67,6 +67,7 @@ class BondExtra extends TxComponent<Props, State> {
     return (
       <Modal
         className='staking--BondExtra'
+        header= {t('Bond more funds')}
         open
         size='small'
       >
@@ -103,36 +104,31 @@ class BondExtra extends TxComponent<Props, State> {
     const isUnsafeChain = detectUnsafe(systemChain);
 
     return (
-      <>
-        <Modal.Header>
-          {t('Bond more funds')}
-        </Modal.Header>
-        <Modal.Content className='ui--signer-Signer-Content'>
-          <InputAddress
-            className='medium'
-            defaultValue={stashId}
-            isDisabled
-            label={t('stash account')}
-            labelExtra={<Available label={transferrable} params={stashId} />}
-          />
-          <InputBalance
-            autoFocus
-            className='medium'
-            help={t('Amount to add to the currently bonded funds. This is adjusted using the available funds on the account.')}
-            isError={!!amountError || !maxAdditional || maxAdditional.eqn(0)}
-            label={t('additional bonded funds')}
-            maxValue={maxBalance}
-            onChange={this.onChangeValue}
-            onEnter={this.sendTx}
-            withMax={!isUnsafeChain}
-          />
-          <ValidateAmount
-            accountId={stashId}
-            onError={this.setAmountError}
-            value={maxAdditional}
-          />
-        </Modal.Content>
-      </>
+      <Modal.Content className='ui--signer-Signer-Content'>
+        <InputAddress
+          className='medium'
+          defaultValue={stashId}
+          isDisabled
+          label={t('stash account')}
+          labelExtra={<Available label={transferrable} params={stashId} />}
+        />
+        <InputBalance
+          autoFocus
+          className='medium'
+          help={t('Amount to add to the currently bonded funds. This is adjusted using the available funds on the account.')}
+          isError={!!amountError || !maxAdditional || maxAdditional.eqn(0)}
+          label={t('additional bonded funds')}
+          maxValue={maxBalance}
+          onChange={this.onChangeValue}
+          onEnter={this.sendTx}
+          withMax={!isUnsafeChain}
+        />
+        <ValidateAmount
+          accountId={stashId}
+          onError={this.setAmountError}
+          value={maxAdditional}
+        />
+      </Modal.Content>
     );
   }
 
diff --git a/packages/app-staking/src/Actions/Account/InjectKeys.tsx b/packages/app-staking/src/Actions/Account/InjectKeys.tsx
index 6662fe57fee3..5bd68a3bcf24 100644
--- a/packages/app-staking/src/Actions/Account/InjectKeys.tsx
+++ b/packages/app-staking/src/Actions/Account/InjectKeys.tsx
@@ -71,12 +71,10 @@ function InjectKeys ({ isOpen = true, onClose, t }: Props): React.ReactElement<P
 
   return (
     <Modal
+      header={t('Inject Keys')}
       open
       size='small'
     >
-      <Modal.Header>
-        {t('Inject Keys')}
-      </Modal.Header>
       <Modal.Content>
         <Input
           isError={publicKey.length !== 66}
diff --git a/packages/app-staking/src/Actions/Account/Nominate.tsx b/packages/app-staking/src/Actions/Account/Nominate.tsx
index 264a5734dd62..da6580bae923 100644
--- a/packages/app-staking/src/Actions/Account/Nominate.tsx
+++ b/packages/app-staking/src/Actions/Account/Nominate.tsx
@@ -72,11 +72,9 @@ function Nominate ({ className, controllerId, nominees, onClose, stashId, stashO
   return (
     <Modal
       className={`staking--Nominating ${className}`}
+      header={t('Nominate Validators')}
       open
     >
-      <Modal.Header>
-        {t('Nominate Validators')}
-      </Modal.Header>
       <Modal.Content className='ui--signer-Signer-Content'>
         <InputAddress
           className='medium'
diff --git a/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx b/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx
index e54d57af6f0a..2bd41939c789 100644
--- a/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx
+++ b/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx
@@ -44,12 +44,10 @@ class SetControllerAccount extends TxComponent<Props, State> {
     return (
       <Modal
         className='staking--SetControllerAccount'
+        header={t('Change controller account')}
         open
         size='small'
       >
-        <Modal.Header>
-          {t('Change controller account')}
-        </Modal.Header>
         <Modal.Content className='ui--signer-Signer-Content'>
           {isValidating && (
             <article className='warning'>
diff --git a/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx b/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx
index 8df6102a73a8..16c9faa820e3 100644
--- a/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx
+++ b/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx
@@ -38,6 +38,7 @@ class SetRewardDestination extends TxComponent<Props, State> {
     return (
       <Modal
         className='staking--Bonding'
+        header={t('Bonding Preferences')}
         open
         size='small'
       >
@@ -73,29 +74,24 @@ class SetRewardDestination extends TxComponent<Props, State> {
     const { destination } = this.state;
 
     return (
-      <>
-        <Modal.Header>
-          {t('Bonding Preferences')}
-        </Modal.Header>
-        <Modal.Content className='ui--signer-Signer-Content'>
-          <InputAddress
-            className='medium'
-            isDisabled
-            defaultValue={controllerId}
-            help={t('The controller is the account that is be used to control any nominating or validating actions. I will sign this transaction.')}
-            label={t('controller account')}
-          />
-          <Dropdown
-            className='medium'
-            defaultValue={defaultDestination}
-            help={t('The destination account for any payments as either a nominator or validator')}
-            label={t('payment destination')}
-            onChange={this.onChangeDestination}
-            options={rewardDestinationOptions}
-            value={destination}
-          />
-        </Modal.Content>
-      </>
+      <Modal.Content className='ui--signer-Signer-Content'>
+        <InputAddress
+          className='medium'
+          isDisabled
+          defaultValue={controllerId}
+          help={t('The controller is the account that is be used to control any nominating or validating actions. I will sign this transaction.')}
+          label={t('controller account')}
+        />
+        <Dropdown
+          className='medium'
+          defaultValue={defaultDestination}
+          help={t('The destination account for any payments as either a nominator or validator')}
+          label={t('payment destination')}
+          onChange={this.onChangeDestination}
+          options={rewardDestinationOptions}
+          value={destination}
+        />
+      </Modal.Content>
     );
   }
 
diff --git a/packages/app-staking/src/Actions/Account/SetSessionKey.tsx b/packages/app-staking/src/Actions/Account/SetSessionKey.tsx
index 23471518c30c..d69dfcee8daa 100644
--- a/packages/app-staking/src/Actions/Account/SetSessionKey.tsx
+++ b/packages/app-staking/src/Actions/Account/SetSessionKey.tsx
@@ -41,12 +41,10 @@ function SetSessionKey ({ controllerId, isOpen, onClose, sessionIds, stashId, t
   return (
     <Modal
       className='staking--SetSessionAccount'
+      header={t('Set Session Key')}
       open
       size='small'
     >
-      <Modal.Header>
-        {t('Set Session Key')}
-      </Modal.Header>
       <Modal.Content className='ui--signer-Signer-Content'>
         <InputAddress
           className='medium'
diff --git a/packages/app-staking/src/Actions/Account/Unbond.tsx b/packages/app-staking/src/Actions/Account/Unbond.tsx
index 570193ca7d15..0b321b171ba6 100644
--- a/packages/app-staking/src/Actions/Account/Unbond.tsx
+++ b/packages/app-staking/src/Actions/Account/Unbond.tsx
@@ -62,6 +62,7 @@ class Unbond extends TxComponent<Props, State> {
     return (
       <Modal
         className='staking--Unbond'
+        header={t('Unbond funds')}
         open
         size='small'
       >
@@ -97,37 +98,32 @@ class Unbond extends TxComponent<Props, State> {
     const { maxBalance } = this.state;
 
     return (
-      <>
-        <Modal.Header>
-          {t('Unbond funds')}
-        </Modal.Header>
-        <Modal.Content className='ui--signer-Signer-Content'>
-          <InputAddress
-            className='medium'
-            defaultValue={controllerId}
-            isDisabled
-            label={t('controller account')}
+      <Modal.Content className='ui--signer-Signer-Content'>
+        <InputAddress
+          className='medium'
+          defaultValue={controllerId}
+          isDisabled
+          label={t('controller account')}
+        />
+        <BalanceWrapper>
+          <AddressInfo
+            accountId={stashId}
+            withBalance={{
+              bonded: true
+            }}
           />
-          <BalanceWrapper>
-            <AddressInfo
-              accountId={stashId}
-              withBalance={{
-                bonded: true
-              }}
-            />
-          </BalanceWrapper>
-          <InputBalance
-            autoFocus
-            className='medium'
-            help={t('The amount of funds to unbond, this is adjusted using the bonded funds on the stash account.')}
-            label={t('unbond amount')}
-            maxValue={maxBalance}
-            onChange={this.onChangeValue}
-            onEnter={this.sendTx}
-            withMax
-          />
-        </Modal.Content>
-      </>
+        </BalanceWrapper>
+        <InputBalance
+          autoFocus
+          className='medium'
+          help={t('The amount of funds to unbond, this is adjusted using the bonded funds on the stash account.')}
+          label={t('unbond amount')}
+          maxValue={maxBalance}
+          onChange={this.onChangeValue}
+          onEnter={this.sendTx}
+          withMax
+        />
+      </Modal.Content>
     );
   }
 
diff --git a/packages/app-staking/src/Actions/Account/Validate.tsx b/packages/app-staking/src/Actions/Account/Validate.tsx
index 6aa29bccb640..f6e8137650db 100644
--- a/packages/app-staking/src/Actions/Account/Validate.tsx
+++ b/packages/app-staking/src/Actions/Account/Validate.tsx
@@ -74,7 +74,7 @@ class Validate extends TxComponent<Props, State> {
   // }
 
   public render (): React.ReactNode {
-    const { isOpen } = this.props;
+    const { isOpen, t } = this.props;
 
     if (!isOpen) {
       return null;
@@ -83,6 +83,7 @@ class Validate extends TxComponent<Props, State> {
     return (
       <Modal
         className='staking--Staking'
+        header={t('Set validator preferences')}
         open
         size='small'
       >
@@ -134,65 +135,60 @@ class Validate extends TxComponent<Props, State> {
     const defaultThreshold = validatorPrefs && (validatorPrefs as ValidatorPrefsTo145).unstakeThreshold && (validatorPrefs as ValidatorPrefsTo145).unstakeThreshold.toBn();
 
     return (
-      <>
-        <Modal.Header>
-          {t('Set validator preferences')}
-        </Modal.Header>
-        <Modal.Content className='ui--signer-Signer-Content'>
-          <InputAddress
-            className='medium'
-            defaultValue={stashId.toString()}
-            isDisabled
-            label={t('stash account')}
-          />
-          <InputAddress
-            className='medium'
-            defaultValue={controllerId}
-            isDisabled
-            label={t('controller account')}
-          />
-          {!isSubstrateV2 && (
-            <>
-              <InputNumber
-                autoFocus
-                bitLength={32}
-                className='medium'
-                defaultValue={defaultThreshold}
-                help={t('The number of time this validator can get slashed before being automatically unstaked (maximum of 10 allowed)')}
-                isError={!!unstakeThresholdError}
-                label={t('automatic unstake threshold')}
-                onChange={this.onChangeThreshold}
-                onEnter={this.sendTx}
-              />
-              <InputValidationUnstakeThreshold
-                onError={this.onUnstakeThresholdError}
-                unstakeThreshold={unstakeThreshold}
-              />
-            </>
-          )}
-          {
-            hasCommission
-              ? <InputNumber
-                className='medium'
-                help={t('The percentage reward (0-100) that should be applied for the validator')}
-                isZeroable
-                label={t('reward commission percentage')}
-                maxValue={MAX_COMM}
-                onChange={this.onChangeCommission}
-                onEnter={this.sendTx}
-              />
-              : <InputBalance
-                className='medium'
-                defaultValue={(validatorPrefs as ValidatorPrefsTo196)?.validatorPayment?.toBn()}
-                help={t('Amount taken up-front from the reward by the validator before splitting the remainder between themselves and the nominators')}
-                isZeroable
-                label={t('validator payment')}
-                onChange={this.onChangePayment}
-                onEnter={this.sendTx}
-              />
-          }
-        </Modal.Content>
-      </>
+      <Modal.Content className='ui--signer-Signer-Content'>
+        <InputAddress
+          className='medium'
+          defaultValue={stashId.toString()}
+          isDisabled
+          label={t('stash account')}
+        />
+        <InputAddress
+          className='medium'
+          defaultValue={controllerId}
+          isDisabled
+          label={t('controller account')}
+        />
+        {!isSubstrateV2 && (
+          <>
+            <InputNumber
+              autoFocus
+              bitLength={32}
+              className='medium'
+              defaultValue={defaultThreshold}
+              help={t('The number of time this validator can get slashed before being automatically unstaked (maximum of 10 allowed)')}
+              isError={!!unstakeThresholdError}
+              label={t('automatic unstake threshold')}
+              onChange={this.onChangeThreshold}
+              onEnter={this.sendTx}
+            />
+            <InputValidationUnstakeThreshold
+              onError={this.onUnstakeThresholdError}
+              unstakeThreshold={unstakeThreshold}
+            />
+          </>
+        )}
+        {
+          hasCommission
+            ? <InputNumber
+              className='medium'
+              help={t('The percentage reward (0-100) that should be applied for the validator')}
+              isZeroable
+              label={t('reward commission percentage')}
+              maxValue={MAX_COMM}
+              onChange={this.onChangeCommission}
+              onEnter={this.sendTx}
+            />
+            : <InputBalance
+              className='medium'
+              defaultValue={(validatorPrefs as ValidatorPrefsTo196)?.validatorPayment?.toBn()}
+              help={t('Amount taken up-front from the reward by the validator before splitting the remainder between themselves and the nominators')}
+              isZeroable
+              label={t('validator payment')}
+              onChange={this.onChangePayment}
+              onEnter={this.sendTx}
+            />
+        }
+      </Modal.Content>
     );
   }
 
diff --git a/packages/app-staking/src/Actions/NewStake.tsx b/packages/app-staking/src/Actions/NewStake.tsx
index 3039bbcf4d9b..81482ffcee61 100644
--- a/packages/app-staking/src/Actions/NewStake.tsx
+++ b/packages/app-staking/src/Actions/NewStake.tsx
@@ -58,12 +58,10 @@ class NewStake extends TxComponent<Props, State> {
     return (
       <Modal
         className='staking--Bonding'
+        header={t('Bonding Preferences')}
         open
         size='small'
       >
-        <Modal.Header>
-          {t('Bonding Preferences')}
-        </Modal.Header>
         <Modal.Content className='ui--signer-Signer-Content'>
           <InputAddress
             className='medium'
diff --git a/packages/app-storage/src/Selection/Consts.tsx b/packages/app-storage/src/Selection/Consts.tsx
index 580277c48498..d661db37871c 100644
--- a/packages/app-storage/src/Selection/Consts.tsx
+++ b/packages/app-storage/src/Selection/Consts.tsx
@@ -41,7 +41,7 @@ function Consts ({ onAdd, t }: Props): React.ReactElement<Props> {
           defaultValue={defaultValue}
           label={t('selected constant query')}
           onChange={setValue}
-          help={meta && meta.documentation && meta.documentation.join(' ')}
+          help={meta?.documentation.join(' ')}
         />
       </div>
       <div className='storage--actionrow-buttons'>
diff --git a/packages/app-storage/src/Selection/Modules.tsx b/packages/app-storage/src/Selection/Modules.tsx
index f8b15c46df7e..5654c20fc754 100644
--- a/packages/app-storage/src/Selection/Modules.tsx
+++ b/packages/app-storage/src/Selection/Modules.tsx
@@ -91,7 +91,7 @@ function Modules ({ onAdd, t }: Props): React.ReactElement<Props> {
           defaultValue={api.query.timestamp.now}
           label={t('selected state query')}
           onChange={_onChangeKey}
-          help={meta && meta.documentation && meta.documentation.join(' ')}
+          help={meta?.documentation.join(' ')}
         />
         <Params
           key={`${section}.${method}:params` /* force re-render on change */}
diff --git a/packages/app-tech-comm/src/Proposals/Voting.tsx b/packages/app-tech-comm/src/Proposals/Voting.tsx
index c123e4635def..1644ef951084 100644
--- a/packages/app-tech-comm/src/Proposals/Voting.tsx
+++ b/packages/app-tech-comm/src/Proposals/Voting.tsx
@@ -34,10 +34,10 @@ function Voting ({ hash, proposalId, t }: Props): React.ReactElement<Props> | nu
     <>
       {isVotingOpen && (
         <Modal
+          header={t('Vote on proposal')}
           open
           size='small'
         >
-          <Modal.Header>{t('Vote on proposal')}</Modal.Header>
           <Modal.Content>
             <VoteAccount onChange={setAccountId} />
             <VoteToggle
diff --git a/packages/app-toolbox/src/Unlock.tsx b/packages/app-toolbox/src/Unlock.tsx
index 7aa43c3f65c6..32314ab62553 100644
--- a/packages/app-toolbox/src/Unlock.tsx
+++ b/packages/app-toolbox/src/Unlock.tsx
@@ -45,11 +45,9 @@ class Unlock extends TxComponent<Props, State> {
     return (
       <Modal
         className='toolbox--Unlock'
+        header={t('Unlock account')}
         open
       >
-        <Modal.Header>
-          {t('Unlock account')}
-        </Modal.Header>
         {this.renderContent()}
         {this.renderActions()}
       </Modal>
diff --git a/packages/app-treasury/src/Overview/Voting.tsx b/packages/app-treasury/src/Overview/Voting.tsx
index de4521d8c28d..fe662ec5b28b 100644
--- a/packages/app-treasury/src/Overview/Voting.tsx
+++ b/packages/app-treasury/src/Overview/Voting.tsx
@@ -64,10 +64,10 @@ function Voting ({ proposals, t }: Props): React.ReactElement<Props> | null {
     <>
       {isVotingOpen && (
         <Modal
+          header={t('Vote on proposal')}
           open
           size='small'
         >
-          <Modal.Header>{t('Vote on proposal')}</Modal.Header>
           <Modal.Content>
             <VoteAccount onChange={setAccountId} />
             <Dropdown
diff --git a/packages/apps/src/modals/Network.tsx b/packages/apps/src/modals/Network.tsx
index 15d1c9a586a4..080b361aaf1d 100644
--- a/packages/apps/src/modals/Network.tsx
+++ b/packages/apps/src/modals/Network.tsx
@@ -18,9 +18,9 @@ function NetworkModal ({ className, onClose, t }: Props): React.ReactElement<Pro
   return (
     <Modal
       className={className}
+      header={t('Select Network')}
       open
     >
-      <Modal.Header>{t('Select Network')}</Modal.Header>
       <Modal.Content>
         <General
           isModalContent
diff --git a/packages/react-api/package.json b/packages/react-api/package.json
index a5a4ca3170bd..008a7cc11441 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.7.5",
-    "@polkadot/api": "^0.99.0-beta.11",
+    "@polkadot/api": "^0.99.0-beta.13",
     "@polkadot/extension-dapp": "^0.14.0-beta.9",
     "edgeware-node-types": "^1.0.10",
     "rxjs-compat": "^6.5.3"
diff --git a/packages/react-api/src/with/call.tsx b/packages/react-api/src/with/call.tsx
index eb42ed29771a..9f28db1feb89 100644
--- a/packages/react-api/src/with/call.tsx
+++ b/packages/react-api/src/with/call.tsx
@@ -190,7 +190,7 @@ export default function withCall<P extends ApiProps> (endpoint: string, {
 
         const meta = apiSection[method].meta;
 
-        if (area === 'query' && meta && meta.type.isMap) {
+        if (area === 'query' && meta?.type.isMap) {
           const arg = newParams[0];
 
           assert((!isUndefined(arg) && !isNull(arg)) || meta.type.asMap.kind.isLinkedMap, `${meta.name} expects one argument`);
diff --git a/packages/react-components/src/Extrinsic.tsx b/packages/react-components/src/Extrinsic.tsx
index 9ab0e8a4d6f0..34c87cc5816e 100644
--- a/packages/react-components/src/Extrinsic.tsx
+++ b/packages/react-components/src/Extrinsic.tsx
@@ -77,7 +77,7 @@ export default function ExtrinsicDisplay ({ defaultValue, isDisabled, isError, i
         label={label}
         onChange={_onChangeMethod}
         withLabel={withLabel}
-        help={meta && meta.documentation && meta.documentation.join(' ')}
+        help={meta?.documentation.join(' ')}
       />
       <Params
         key={`${section}.${method}:params` /* force re-render on change */}
diff --git a/packages/react-components/src/Forget.tsx b/packages/react-components/src/Forget.tsx
index 70577b2ae013..e8d4594e8a4d 100644
--- a/packages/react-components/src/Forget.tsx
+++ b/packages/react-components/src/Forget.tsx
@@ -98,15 +98,11 @@ function Forget (props: Props): React.ReactElement<Props> {
   return (
     <Modal
       className='app--accounts-Modal'
+      header={getHeaderText(props)}
       onClose={onClose}
       open
     >
-      <Modal.Header>
-        {getHeaderText(props)}
-      </Modal.Header>
-      <Modal.Content>
-        {renderContent(props)}
-      </Modal.Content>
+      <Modal.Content>{renderContent(props)}</Modal.Content>
       <Modal.Actions>
         <Button.Group>
           <Button
diff --git a/packages/react-components/src/Modal.tsx b/packages/react-components/src/Modal.tsx
index b1bbcdb7153e..461917fe87cf 100644
--- a/packages/react-components/src/Modal.tsx
+++ b/packages/react-components/src/Modal.tsx
@@ -23,6 +23,7 @@ function Modal (props: Props): React.ReactElement<Props> {
       {...props}
       className={classes('theme--default', 'ui--Modal', className)}
       dimmer='inverted'
+      header={undefined}
     >
       {header && (
         <SUIModal.Header>{header}</SUIModal.Header>
diff --git a/packages/react-components/src/ProposedAction.tsx b/packages/react-components/src/ProposedAction.tsx
index 9726e2c83301..4a6416a0dbdd 100644
--- a/packages/react-components/src/ProposedAction.tsx
+++ b/packages/react-components/src/ProposedAction.tsx
@@ -55,7 +55,7 @@ function ProposedAction (props: Props): React.ReactElement<Props> {
   const { meta, method, section } = registry.findMetaCall(proposal.callIndex);
 
   const header = `#${idNumber}: ${section}.${method}`;
-  const documentation = (meta && meta.documentation)
+  const documentation = meta?.documentation
     ? (
       <summary>{meta.documentation.join(' ')}</summary>
     )
diff --git a/packages/react-components/src/TxModal.tsx b/packages/react-components/src/TxModal.tsx
index 376f45d319ee..8e617f955b39 100644
--- a/packages/react-components/src/TxModal.tsx
+++ b/packages/react-components/src/TxModal.tsx
@@ -37,12 +37,10 @@ export default class TxModal<P extends TxModalProps, S extends TxModalState> ext
         {this.renderTrigger && this.renderTrigger()}
         <Modal
           className='ui--Modal'
+          header={this.headerText()}
           onClose={this.hideModal}
           open={isOpen}
         >
-          <Modal.Header>
-            {this.headerText()}
-          </Modal.Header>
           <Modal.Content>
             {this.renderPreContent()}
             {this.renderInputAccount()}
diff --git a/packages/react-components/src/TxModalNew.tsx b/packages/react-components/src/TxModalNew.tsx
index 761581dc919f..2a641a8e6d4b 100644
--- a/packages/react-components/src/TxModalNew.tsx
+++ b/packages/react-components/src/TxModalNew.tsx
@@ -88,6 +88,7 @@ function TxModal<P extends Props> ({
   const allModalProps = {
     className: ['ui--Modal', modalProps.className || ''].join(' '),
     dimmer: 'inverted',
+    header,
     ...modalProps,
     onClose,
     open: isOpen
@@ -97,9 +98,6 @@ function TxModal<P extends Props> ({
     <>
       {Trigger ? <Trigger onOpen={onOpen} /> : null}
       <Modal {...allModalProps}>
-        <Modal.Header>
-          {header}
-        </Modal.Header>
         <Modal.Content>
           {preContent}
           <InputAddress
diff --git a/packages/react-signer/src/Transaction.tsx b/packages/react-signer/src/Transaction.tsx
index b92c64ba5a4a..7c55be9147e7 100644
--- a/packages/react-signer/src/Transaction.tsx
+++ b/packages/react-signer/src/Transaction.tsx
@@ -33,11 +33,7 @@ function Transaction ({ children, hideDetails, isSendable, value: { accountId, e
       <>
         <Modal.Header>
           {section}.{method}
-          <label><details><summary>{
-            meta && meta.documentation
-              ? meta.documentation.join(' ')
-              : ''
-          }</summary></details></label>
+          <label><details><summary>{meta?.documentation.join(' ') || t('Details')}</summary></details></label>
         </Modal.Header>
         <Modal.Content className='ui--signer-Signer-Content'>
           {!hideDetails && (
diff --git a/yarn.lock b/yarn.lock
index da861f3630ef..2dd6975abd78 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2044,35 +2044,35 @@
   dependencies:
     "@types/node" ">= 8"
 
-"@polkadot/api-contract@^0.99.0-beta.11":
-  version "0.99.0-beta.11"
-  resolved "https://registry.yarnpkg.com/@polkadot/api-contract/-/api-contract-0.99.0-beta.11.tgz#0cd0ae086df816331e5b23bed444ce0ac0dc17f5"
-  integrity sha512-uj8azbdTr6M75QVQhVKeOOc+u4MMnJv02MsU1V30VHuSVlcjSqJeLgGTNKA/YkchaZGgd2jk59mtaisI/mtclg==
+"@polkadot/api-contract@^0.99.0-beta.13":
+  version "0.99.0-beta.13"
+  resolved "https://registry.yarnpkg.com/@polkadot/api-contract/-/api-contract-0.99.0-beta.13.tgz#6020d04034c1f6c309d514aa2a661f26235f2f0b"
+  integrity sha512-eGFJ9LdOzbKmQzbxI3NLrF4Rnwe7P/MImq7MtmKBNOWD9mf+Bxg81+74EHCu4ijizuUjTAmtLIf9C2w+r1vaqQ==
   dependencies:
     "@babel/runtime" "^7.7.5"
-    "@polkadot/types" "^0.99.0-beta.11"
+    "@polkadot/types" "^0.99.0-beta.13"
 
-"@polkadot/api-derive@^0.99.0-beta.11":
-  version "0.99.0-beta.11"
-  resolved "https://registry.yarnpkg.com/@polkadot/api-derive/-/api-derive-0.99.0-beta.11.tgz#b4d7a6df49d960d4b29be16a1d5b15b09764e2d2"
-  integrity sha512-pLQkIPO7Z1zBuE1TX6Lerb39itYRs41wm5lE+yGFVvlCprwXr6Z9WXQRo80gIbYJDA+PUNXGyoblGKFuGCvmCg==
+"@polkadot/api-derive@^0.99.0-beta.13":
+  version "0.99.0-beta.13"
+  resolved "https://registry.yarnpkg.com/@polkadot/api-derive/-/api-derive-0.99.0-beta.13.tgz#347ebc6ad7ca8a5491e2bff8c9045b8709484189"
+  integrity sha512-0D9dr3+KsFPvUZ3uQkL7a4nbfdtI3cmcIqGYXqPxmsiTacn0FQR1rN3j9yQa+rIHLIKPjBlpcQXXFAm2xxrPtA==
   dependencies:
     "@babel/runtime" "^7.7.5"
-    "@polkadot/api" "^0.99.0-beta.11"
-    "@polkadot/types" "^0.99.0-beta.11"
+    "@polkadot/api" "^0.99.0-beta.13"
+    "@polkadot/types" "^0.99.0-beta.13"
 
-"@polkadot/api@^0.99.0-beta.11":
-  version "0.99.0-beta.11"
-  resolved "https://registry.yarnpkg.com/@polkadot/api/-/api-0.99.0-beta.11.tgz#781dc1405adceca52cd17afdfeeed90fc243e1da"
-  integrity sha512-gM0rov3xYEox3NoVRnmWfm6cLHRKvsSrr8RnO9xyDiWKcUH1f6CfOSHN49Bsxcin6MlhYoL80N5RvRVJQYg4MQ==
+"@polkadot/api@^0.99.0-beta.13":
+  version "0.99.0-beta.13"
+  resolved "https://registry.yarnpkg.com/@polkadot/api/-/api-0.99.0-beta.13.tgz#eab4ee8d838f7fa000b14cb279b9aa50dd62f904"
+  integrity sha512-GOrvZvRkoiYIJy8I+9wGHdMsg7A4p5gsPphkTSViy0umeiKbGPg3yxLAm82DJsPoFiXaU1lf+CKQbT40YBYpyQ==
   dependencies:
     "@babel/runtime" "^7.7.5"
-    "@polkadot/api-derive" "^0.99.0-beta.11"
+    "@polkadot/api-derive" "^0.99.0-beta.13"
     "@polkadot/keyring" "^1.7.1"
-    "@polkadot/metadata" "^0.99.0-beta.11"
-    "@polkadot/rpc-core" "^0.99.0-beta.11"
-    "@polkadot/rpc-provider" "^0.99.0-beta.11"
-    "@polkadot/types" "^0.99.0-beta.11"
+    "@polkadot/metadata" "^0.99.0-beta.13"
+    "@polkadot/rpc-core" "^0.99.0-beta.13"
+    "@polkadot/rpc-provider" "^0.99.0-beta.13"
+    "@polkadot/types" "^0.99.0-beta.13"
     "@polkadot/util-crypto" "^1.7.1"
 
 "@polkadot/dev-react@^0.32.0-beta.17":
@@ -2177,10 +2177,10 @@
   dependencies:
     "@babel/runtime" "^7.7.5"
 
-"@polkadot/jsonrpc@^0.99.0-beta.11":
-  version "0.99.0-beta.11"
-  resolved "https://registry.yarnpkg.com/@polkadot/jsonrpc/-/jsonrpc-0.99.0-beta.11.tgz#43f0849f395a5e012629bf0ef65ca3e9d8d9771c"
-  integrity sha512-wZ8vl2feOuOOi8gghnlIjdCfbCW8MbXXgUgC6SEQAn1UhlxE3OFvSLhjzHA1oKNXnBmvtxdLvKwh5w16McubCA==
+"@polkadot/jsonrpc@^0.99.0-beta.13":
+  version "0.99.0-beta.13"
+  resolved "https://registry.yarnpkg.com/@polkadot/jsonrpc/-/jsonrpc-0.99.0-beta.13.tgz#8c92b9a7b3449601a6175fbfb0ab6aaa652bb580"
+  integrity sha512-mVfSWAeCihBj50IoNGPsPglqtPdE2ahy7dSbOoEhmHhnoOxnbmyd/izt/Nj0OakDWMeXOphXAfX/C9c5HM9KhQ==
   dependencies:
     "@babel/runtime" "^7.7.5"
 
@@ -2193,13 +2193,13 @@
     "@polkadot/util" "^1.7.1"
     "@polkadot/util-crypto" "^1.7.1"
 
-"@polkadot/metadata@^0.99.0-beta.11":
-  version "0.99.0-beta.11"
-  resolved "https://registry.yarnpkg.com/@polkadot/metadata/-/metadata-0.99.0-beta.11.tgz#c2e7fdba62b336b20178b633ce1092d7b5eb4190"
-  integrity sha512-Li6xi+KK7muvzOBib2s830na+PhbAuG4Mti9TrUgWK/hk7JxYZGBw3RwHvXT7P1kaYXrCIexQVEYP+B5W34q4A==
+"@polkadot/metadata@^0.99.0-beta.13":
+  version "0.99.0-beta.13"
+  resolved "https://registry.yarnpkg.com/@polkadot/metadata/-/metadata-0.99.0-beta.13.tgz#1f370a34aac9d1a03367659735ffc11b66a470ae"
+  integrity sha512-tTN3x+wmomq/bKxBEB0sJJCkiqr2nCymDDx9W/UbI+kPBhlWpdJ6OO3AGkDmdYwV8RSSK+71q3A57kTntB3n3Q==
   dependencies:
     "@babel/runtime" "^7.7.5"
-    "@polkadot/types" "^0.99.0-beta.11"
+    "@polkadot/types" "^0.99.0-beta.13"
     "@polkadot/util" "^1.7.1"
     "@polkadot/util-crypto" "^1.7.1"
 
@@ -2228,25 +2228,25 @@
     qrcode-generator "^1.4.4"
     react-qr-reader "^2.2.1"
 
-"@polkadot/rpc-core@^0.99.0-beta.11":
-  version "0.99.0-beta.11"
-  resolved "https://registry.yarnpkg.com/@polkadot/rpc-core/-/rpc-core-0.99.0-beta.11.tgz#7a4ef79f00387a337e5da0b24367aadd44f0df31"
-  integrity sha512-dri7vdrSlRtUNERNxshH3hFyX5aHfB+TtjYP0rmYWwsWkdI0c+RdvTkgdM/I3bsdjU5622G2qm+w9RDXSO1NhQ==
+"@polkadot/rpc-core@^0.99.0-beta.13":
+  version "0.99.0-beta.13"
+  resolved "https://registry.yarnpkg.com/@polkadot/rpc-core/-/rpc-core-0.99.0-beta.13.tgz#d2edcc86f35360c85b782951f5d2e5bcc2fd21cb"
+  integrity sha512-uORlJKZh4PvkLgiWcuZmsVYrSuXF04jd95wFzaB8VIxm60q0c7tu40rs9QyPkggSE/rj6xdhu4syjP58iD18cw==
   dependencies:
     "@babel/runtime" "^7.7.5"
-    "@polkadot/jsonrpc" "^0.99.0-beta.11"
-    "@polkadot/rpc-provider" "^0.99.0-beta.11"
-    "@polkadot/types" "^0.99.0-beta.11"
+    "@polkadot/jsonrpc" "^0.99.0-beta.13"
+    "@polkadot/rpc-provider" "^0.99.0-beta.13"
+    "@polkadot/types" "^0.99.0-beta.13"
     "@polkadot/util" "^1.7.1"
     rxjs "^6.5.3"
 
-"@polkadot/rpc-provider@^0.99.0-beta.11":
-  version "0.99.0-beta.11"
-  resolved "https://registry.yarnpkg.com/@polkadot/rpc-provider/-/rpc-provider-0.99.0-beta.11.tgz#d3b022c0489c13bf52213fdc521609dbcf87681e"
-  integrity sha512-ssR9sTicJvvkV60Fq9P5wHWo2gYHtOCBiA0v96PquZVyu2f5hZepatSlGSO7Rx72Z2Nr+ntvEfivQo2ue9r+/w==
+"@polkadot/rpc-provider@^0.99.0-beta.13":
+  version "0.99.0-beta.13"
+  resolved "https://registry.yarnpkg.com/@polkadot/rpc-provider/-/rpc-provider-0.99.0-beta.13.tgz#00de8fab8b6c4089a95e9faf299246c9b32e0b35"
+  integrity sha512-yQxPtiLID9N4rjWjKg67UFpUzyZVH7ms3RQ82fVBfNXo7/y3N8e8P8o/6ny+yzMdkQ4Bz1J6jTwYjW2hx+CEGw==
   dependencies:
     "@babel/runtime" "^7.7.5"
-    "@polkadot/metadata" "^0.99.0-beta.11"
+    "@polkadot/metadata" "^0.99.0-beta.13"
     "@polkadot/util" "^1.7.1"
     "@polkadot/util-crypto" "^1.7.1"
     eventemitter3 "^4.0.0"
@@ -2260,13 +2260,13 @@
   dependencies:
     "@types/chrome" "^0.0.91"
 
-"@polkadot/types@^0.99.0-beta.11":
-  version "0.99.0-beta.11"
-  resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-0.99.0-beta.11.tgz#eed812c1ef9c315394cafc6fc06f94a82a3898bf"
-  integrity sha512-Fb2aJ0xUuVQUUFpur8AwK0QgGBakVWjruhbWKFYo2xSUT9xVelpgUhF+7PUYAhL6w/uXaiuSPSeTX3L0KTHqsg==
+"@polkadot/types@^0.99.0-beta.13":
+  version "0.99.0-beta.13"
+  resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-0.99.0-beta.13.tgz#a7332127109f3d9b09561622cd79f90519418d26"
+  integrity sha512-8hr6azJuqttDA1InDrTJDgLZbtplE7Fo2Dtfkm+YR7O6QosCKoBRxTZB62whqy9xc4vAv4wcR4ymdcGpIpXhyQ==
   dependencies:
     "@babel/runtime" "^7.7.5"
-    "@polkadot/metadata" "^0.99.0-beta.11"
+    "@polkadot/metadata" "^0.99.0-beta.13"
     "@polkadot/util" "^1.7.1"
     "@polkadot/util-crypto" "^1.7.1"
     "@types/memoizee" "^0.4.3"