diff --git a/package.json b/package.json
index 9b2d88449f..7213f63aab 100644
--- a/package.json
+++ b/package.json
@@ -8,10 +8,10 @@
     "packages/*"
   ],
   "resolutions": {
-    "@polkadot/api": "^1.9.0-beta.16",
-    "@polkadot/api-contract": "^1.9.0-beta.16",
+    "@polkadot/api": "^1.9.0-beta.18",
+    "@polkadot/api-contract": "^1.9.0-beta.18",
     "@polkadot/keyring": "^2.7.0-beta.8",
-    "@polkadot/types": "^1.9.0-beta.16",
+    "@polkadot/types": "^1.9.0-beta.18",
     "@polkadot/util": "^2.7.0-beta.8",
     "@polkadot/util-crypto": "^2.7.0-beta.8",
     "babel-core": "^7.0.0-bridge.0",
diff --git a/packages/page-contracts/package.json b/packages/page-contracts/package.json
index b1e22ae726..22481b4bbc 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.9.0-beta.16"
+    "@polkadot/api-contract": "^1.9.0-beta.18"
   }
 }
diff --git a/packages/page-council/src/Motions/Motion.tsx b/packages/page-council/src/Motions/Motion.tsx
index 69898cb667..d52df9ba43 100644
--- a/packages/page-council/src/Motions/Motion.tsx
+++ b/packages/page-council/src/Motions/Motion.tsx
@@ -40,7 +40,7 @@ function Motion ({ className, isMember, members, motion: { hash, proposal, votes
       <td className='number top'><h1>{formatNumber(index)}</h1></td>
       <ProposalCell
         className='top'
-        proposalHash={hash}
+        imageHash={hash}
         proposal={proposal}
       />
       <td className='number top'>
diff --git a/packages/page-democracy/src/Overview/DispatchBlock.tsx b/packages/page-democracy/src/Overview/DispatchBlock.tsx
deleted file mode 100644
index 0e48bcdc19..0000000000
--- a/packages/page-democracy/src/Overview/DispatchBlock.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-// Copyright 2017-2020 @polkadot/app-democracy 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 { BlockNumber, Hash, ReferendumIndex } from '@polkadot/types/interfaces';
-import { ITuple } from '@polkadot/types/types';
-
-import React, { useEffect, useState } from 'react';
-import { registry } from '@polkadot/react-api';
-import { Option, StorageKey, Vec, createType } from '@polkadot/types';
-import { hexToU8a } from '@polkadot/util';
-
-import DispatchEntry from './DispatchEntry';
-
-interface Props {
-  entries: Option<Vec<Option<ITuple<[Hash, ReferendumIndex]>>>>;
-  keyPrefix: string;
-  storageKey: StorageKey;
-}
-
-interface Entry {
-  blockNumber?: BlockNumber;
-  hash: Hash;
-  referendumIndex: ReferendumIndex;
-}
-
-function DispatchBlock ({ entries, keyPrefix, storageKey }: Props): React.ReactElement<Props> | null {
-  const [blockNumber, setBlockNumber] = useState<BlockNumber | undefined>();
-  const [expanded, setExpanded] = useState<Entry[]>([]);
-
-  useEffect((): void => {
-    keyPrefix && storageKey && setBlockNumber(
-      createType(registry, 'BlockNumber', hexToU8a(
-        `0x${storageKey.toHex().replace(keyPrefix, '').substr(16)}`)
-      )
-    );
-  }, [keyPrefix, storageKey]);
-
-  useEffect((): void => {
-    setExpanded(
-      entries?.isSome
-        ? entries
-          .unwrap()
-          .map((entry): [Hash, ReferendumIndex] | null => entry.unwrapOr(null))
-          .filter((entry): boolean => !!entry)
-          .map(([hash, referendumIndex]: any): Entry => ({
-            blockNumber, hash, referendumIndex
-          }))
-        : []
-    );
-  }, [blockNumber, entries]);
-
-  if (!expanded.length) {
-    return null;
-  }
-
-  return (
-    <>
-      {expanded.map(({ blockNumber, hash, referendumIndex }): React.ReactNode => (
-        <DispatchEntry
-          blockNumber={blockNumber}
-          hash={hash}
-          key={referendumIndex.toString()}
-          referendumIndex={referendumIndex}
-        />
-      ))}
-    </>
-  );
-}
-
-export default React.memo(DispatchBlock);
diff --git a/packages/page-democracy/src/Overview/DispatchEntry.tsx b/packages/page-democracy/src/Overview/DispatchEntry.tsx
index 8a37cd5566..49f11304c2 100644
--- a/packages/page-democracy/src/Overview/DispatchEntry.tsx
+++ b/packages/page-democracy/src/Overview/DispatchEntry.tsx
@@ -2,15 +2,14 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { AccountId, Balance, BlockNumber, Hash, Proposal, ReferendumIndex } from '@polkadot/types/interfaces';
-import { ITuple } from '@polkadot/types/types';
+import { DeriveDispatch } from '@polkadot/api-derive/types';
+import { BlockNumber } from '@polkadot/types/interfaces';
 
 import BN from 'bn.js';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { LinkExternal } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 import { BlockToTime } from '@polkadot/react-query';
-import { Bytes, Option } from '@polkadot/types';
 import { formatNumber } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
@@ -18,48 +17,39 @@ import ProposalCell from './ProposalCell';
 import PreImageButton from './PreImageButton';
 
 interface Props {
-  blockNumber?: BlockNumber;
-  hash: Hash;
-  referendumIndex: ReferendumIndex;
+  value: DeriveDispatch;
 }
 
-function DispatchEntry ({ blockNumber, hash, referendumIndex }: Props): React.ReactElement<Props> {
+function DispatchEntry ({ value: { at, image, imageHash, index } }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber, []) || new BN(0);
-  const preimage = useCall<Option<ITuple<[Bytes, AccountId, Balance, BlockNumber]>>
-  >(api.query.democracy.preimages, [hash]);
-  const [proposal, setProposal] = useState<Proposal | undefined>();
-
-  useEffect((): void => {
-    preimage?.isSome && setProposal(api.createType('Proposal', preimage.unwrap()[0].toU8a(true)));
-  }, [api, preimage]);
 
   return (
     <tr>
-      <td className='number top'><h1>{formatNumber(referendumIndex)}</h1></td>
+      <td className='number top'><h1>{formatNumber(index)}</h1></td>
       <td className='number together top'>
-        {blockNumber && (
+        {bestNumber && (
           <>
             <label>{t('enact')}</label>
-            <BlockToTime blocks={blockNumber.sub(bestNumber)} />
-            #{formatNumber(blockNumber)}
+            <BlockToTime blocks={at.sub(bestNumber)} />
+            #{formatNumber(at)}
           </>
         )}
       </td>
       <ProposalCell
-        proposalHash={hash}
-        proposal={proposal}
+        imageHash={imageHash}
+        proposal={image?.proposal}
       />
       <td className='together number top'>
-        {!proposal && (
+        {!image?.proposal && (
           <PreImageButton
-            hash={hash}
+            imageHash={imageHash}
             isImminent
           />
         )}
         <LinkExternal
-          data={referendumIndex}
+          data={index}
           type='referendum'
         />
       </td>
diff --git a/packages/page-democracy/src/Overview/DispatchQueue.tsx b/packages/page-democracy/src/Overview/DispatchQueue.tsx
index bbe619d18d..ffba0abb5e 100644
--- a/packages/page-democracy/src/Overview/DispatchQueue.tsx
+++ b/packages/page-democracy/src/Overview/DispatchQueue.tsx
@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { BlockNumber, Hash, ReferendumIndex } from '@polkadot/types/interfaces';
+import { DeriveDispatch } from '@polkadot/api-derive/types';
 
 import React from 'react';
 import { Spinner, Table } from '@polkadot/react-components';
@@ -18,11 +18,7 @@ interface Props {
 function DispatchQueue ({ className }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
-  const queued = useCall<[BlockNumber, Hash, ReferendumIndex][]>(api.query.democracy.dispatchQueue, []);
-
-  if (!queued?.length) {
-    return null;
-  }
+  const queued = useCall<DeriveDispatch[]>(api.derive.democracy.dispatchQueue as any, []);
 
   return (
     <div className={className}>
@@ -32,18 +28,16 @@ function DispatchQueue ({ className }: Props): React.ReactElement<Props> | null
           ? (
             <Table>
               <Table.Body>
-                {queued.map(([blockNumber, hash, referendumIndex]): React.ReactNode => (
+                {queued.map((entry): React.ReactNode => (
                   <DispatchEntry
-                    blockNumber={blockNumber}
-                    hash={hash}
-                    key={referendumIndex.toString()}
-                    referendumIndex={referendumIndex}
+                    key={entry.index.toString()}
+                    value={entry}
                   />
                 ))}
               </Table.Body>
             </Table>
           )
-          : t('nothing queued to be executed')
+          : t('nothing queued for execution')
         : <Spinner />
       }
     </div>
diff --git a/packages/page-democracy/src/Overview/External.tsx b/packages/page-democracy/src/Overview/External.tsx
new file mode 100644
index 0000000000..b14d8c249e
--- /dev/null
+++ b/packages/page-democracy/src/Overview/External.tsx
@@ -0,0 +1,62 @@
+// Copyright 2017-2020 @polkadot/app-democracy 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 { DeriveProposalExternal } from '@polkadot/api-derive/types';
+
+import React from 'react';
+import { AddressSmall, Button } from '@polkadot/react-components';
+import { FormatBalance } from '@polkadot/react-query';
+
+import { useTranslation } from '../translate';
+import PreImageButton from './PreImageButton';
+import ProposalCell from './ProposalCell';
+import Fasttrack from './Fasttrack';
+
+interface Props {
+  className?: string;
+  value: DeriveProposalExternal;
+}
+
+function External ({ className, value: { image, imageHash, threshold } }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
+
+  return (
+    <tr className={className}>
+      <td className='top'>
+        {image && <AddressSmall value={image.proposer} />}
+      </td>
+      <td className='number together top'>
+        {image && <FormatBalance label={<label>{t('locked')}</label>} value={image.balance} />}
+      </td>
+      <ProposalCell
+        className='top'
+        imageHash={imageHash}
+        proposal={image?.proposal}
+      />
+      <td className='together number top'>
+        <Button.Group>
+          {!image?.proposal && (
+            <PreImageButton
+              imageHash={imageHash}
+              withoutOr
+            />
+          )}
+          {threshold && (
+            <>
+              {!image?.proposal && (
+                <Button.Or />
+              )}
+              <Fasttrack
+                imageHash={imageHash}
+                threshold={threshold}
+              />
+            </>
+          )}
+        </Button.Group>
+      </td>
+    </tr>
+  );
+}
+
+export default React.memo(External);
diff --git a/packages/page-democracy/src/Overview/Externals.tsx b/packages/page-democracy/src/Overview/Externals.tsx
index 203497c7c7..74c0cdf3a2 100644
--- a/packages/page-democracy/src/Overview/Externals.tsx
+++ b/packages/page-democracy/src/Overview/Externals.tsx
@@ -2,19 +2,14 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { AccountId, Balance, BlockNumber, Hash, Proposal, VoteThreshold } from '@polkadot/types/interfaces';
-import { ITuple } from '@polkadot/types/types';
+import { DeriveProposalExternal } from '@polkadot/api-derive/types';
 
-import React, { useEffect, useState } from 'react';
-import { AddressSmall, Table, Button } from '@polkadot/react-components';
+import React from 'react';
+import { Spinner } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
-import { FormatBalance } from '@polkadot/react-query';
-import { Bytes, Option } from '@polkadot/types';
 
 import { useTranslation } from '../translate';
-import PreImageButton from './PreImageButton';
-import ProposalCell from './ProposalCell';
-import Fasttrack from './Fasttrack';
+import External from './External';
 
 interface Props {
   className?: string;
@@ -23,79 +18,17 @@ interface Props {
 function Externals ({ className }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
-  const external = useCall<Option<ITuple<[Hash, VoteThreshold]>>>(api.query.democracy.nextExternal, []);
-  const [[hash, threshold], setInfo] = useState<[Hash | null, VoteThreshold | null]>([null, null]);
-  const [expanded, setExpanded] = useState<{ at: BlockNumber; balance: Balance; proposer: AccountId; proposal: Proposal } | null>(null);
-  const preimage = useCall<Option<ITuple<[Bytes, AccountId, Balance, BlockNumber]>>>(api.query.democracy.preimages, [hash]);
-
-  useEffect((): void => {
-    setInfo(
-      external
-        ? external.unwrapOr([null, null])
-        : [null, null]
-    );
-  }, [external]);
-
-  useEffect((): void => {
-    if (preimage?.isSome) {
-      const preImage = preimage.unwrap();
-
-      setExpanded({
-        at: preImage[3],
-        balance: preImage[2],
-        proposer: preImage[1],
-        proposal: api.createType('Proposal', preImage[0].toU8a(true))
-      });
-    } else {
-      setExpanded(null);
-    }
-  }, [api, preimage]);
-
-  if (!hash) {
-    return null;
-  }
+  const external = useCall<DeriveProposalExternal | null>(api.derive.democracy.nextExternal, []);
 
   return (
     <div className={`proposalSection ${className}`}>
-      <h1>{t('externals')}</h1>
-      <Table>
-        <Table.Body>
-          <tr className={className}>
-            <td className='top'>
-              {expanded && <AddressSmall value={expanded.proposer} />}
-            </td>
-            <td className='number together top'>
-              {expanded && <FormatBalance label={<label>{t('locked')}</label>} value={expanded.balance} />}
-            </td>
-            <ProposalCell
-              className='top'
-              proposalHash={hash}
-              proposal={expanded?.proposal}
-            />
-            <td className='together number top'>
-              <Button.Group>
-                {!expanded?.proposal && (
-                  <PreImageButton
-                    hash={hash}
-                    withoutOr
-                  />
-                )}
-                {hash && threshold && (
-                  <>
-                    {!expanded?.proposal && (
-                      <Button.Or />
-                    )}
-                    <Fasttrack
-                      hash={hash}
-                      threshold={threshold}
-                    />
-                  </>
-                )}
-              </Button.Group>
-            </td>
-          </tr>
-        </Table.Body>
-      </Table>
+      <h1>{t('external')}</h1>
+      {!external
+        ? external === null
+          ? t('No external proposal')
+          : <Spinner />
+        : <External value={external} />
+      }
     </div>
   );
 }
diff --git a/packages/page-democracy/src/Overview/Fasttrack.tsx b/packages/page-democracy/src/Overview/Fasttrack.tsx
index 038e4c59f5..e5d0c422f9 100644
--- a/packages/page-democracy/src/Overview/Fasttrack.tsx
+++ b/packages/page-democracy/src/Overview/Fasttrack.tsx
@@ -13,7 +13,7 @@ import { useApi, useMembers, useToggle } from '@polkadot/react-hooks';
 import { useTranslation } from '../translate';
 
 interface Props {
-  hash: Hash;
+  imageHash: Hash;
   threshold: VoteThreshold;
 }
 
@@ -21,7 +21,7 @@ const ONE_MIN = (1 * 60) / 6;
 const DEF_DELAY = new BN(ONE_MIN);
 const DEF_VOTING = new BN(ONE_MIN * 60 * 3);
 
-function Fasttrack ({ hash, threshold }: Props): React.ReactElement<Props> | null {
+function Fasttrack ({ imageHash, threshold }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
   const { isMember, members } = useMembers('technicalCommittee');
@@ -43,10 +43,10 @@ function Fasttrack ({ hash, threshold }: Props): React.ReactElement<Props> | nul
   useEffect((): void => {
     setProposal(
       () => delayBlocks?.gtn(0) && votingBlocks?.gtn(0)
-        ? api.tx.democracy.fastTrack(hash, votingBlocks, delayBlocks)
+        ? api.tx.democracy.fastTrack(imageHash, votingBlocks, delayBlocks)
         : null
     );
-  }, [api, delayBlocks, hash, votingBlocks]);
+  }, [api, delayBlocks, imageHash, votingBlocks]);
 
   return (
     <>
@@ -67,8 +67,8 @@ function Fasttrack ({ hash, threshold }: Props): React.ReactElement<Props> | nul
             <Input
               help={t('The external proposal to send to the technical committee')}
               isDisabled
-              label={t('external hash')}
-              value={hash}
+              label={t('preimage hash')}
+              value={imageHash}
             />
             <InputNumber
               autoFocus
diff --git a/packages/page-democracy/src/Overview/PreImage.tsx b/packages/page-democracy/src/Overview/PreImage.tsx
index 39a69fa0fb..78c08448f9 100644
--- a/packages/page-democracy/src/Overview/PreImage.tsx
+++ b/packages/page-democracy/src/Overview/PreImage.tsx
@@ -17,13 +17,13 @@ import { useTranslation } from '../translate';
 interface Props {
   className?: string;
   isImminent?: boolean;
-  matchHash?: Hash;
+  imageHash?: Hash;
   onClose: () => void;
 }
 
 const ZERO_HASH = blake2AsHex('');
 
-function PreImage ({ className, isImminent: propsIsImminent, matchHash, onClose }: Props): React.ReactElement<Props> {
+function PreImage ({ className, isImminent: propsIsImminent, imageHash, onClose }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { apiDefaultTxSudo } = useApi();
   const [accountId, setAccountId] = useState<string | null>(null);
@@ -37,8 +37,8 @@ function PreImage ({ className, isImminent: propsIsImminent, matchHash, onClose
     setHash({ encodedProposal, encodedHash: blake2AsHex(encodedProposal) });
   }, [proposal]);
 
-  const isMatched = matchHash
-    ? matchHash.eq(encodedHash)
+  const isMatched = imageHash
+    ? imageHash.eq(encodedHash)
     : true;
 
   return (
diff --git a/packages/page-democracy/src/Overview/PreImageButton.tsx b/packages/page-democracy/src/Overview/PreImageButton.tsx
index 798362aaca..50c6026eca 100644
--- a/packages/page-democracy/src/Overview/PreImageButton.tsx
+++ b/packages/page-democracy/src/Overview/PreImageButton.tsx
@@ -12,12 +12,12 @@ import { useTranslation } from '../translate';
 import PreImage from './PreImage';
 
 interface Props {
-  hash: Hash;
+  imageHash: Hash;
   isImminent?: boolean;
   withoutOr?: boolean;
 }
 
-function PreImageButton ({ hash, isImminent, withoutOr }: Props): React.ReactElement<Props> | null {
+function PreImageButton ({ imageHash, isImminent, withoutOr }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const [isPreimageOpen, togglePreimage] = useToggle();
 
@@ -32,7 +32,7 @@ function PreImageButton ({ hash, isImminent, withoutOr }: Props): React.ReactEle
       {isPreimageOpen && (
         <PreImage
           isImminent={isImminent}
-          matchHash={hash}
+          imageHash={imageHash}
           onClose={togglePreimage}
         />
       )}
diff --git a/packages/page-democracy/src/Overview/Proposal.tsx b/packages/page-democracy/src/Overview/Proposal.tsx
index 29a34d6168..19c35db347 100644
--- a/packages/page-democracy/src/Overview/Proposal.tsx
+++ b/packages/page-democracy/src/Overview/Proposal.tsx
@@ -20,7 +20,7 @@ interface Props {
   value: DeriveProposal;
 }
 
-function Proposal ({ className, value: { balance, hash, index, proposal, proposer, seconds } }: Props): React.ReactElement<Props> {
+function Proposal ({ className, value: { balance, index, image, imageHash, proposer, seconds } }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const seconding = seconds.filter((_address, index): boolean => index !== 0);
 
@@ -35,8 +35,8 @@ function Proposal ({ className, value: { balance, hash, index, proposal, propose
       </td>
       <ProposalCell
         className='top'
-        proposalHash={hash}
-        proposal={proposal}
+        imageHash={imageHash}
+        proposal={image?.proposal}
       />
       <td className='top padtop'>
         {seconding.length !== 0 && (
@@ -57,11 +57,11 @@ function Proposal ({ className, value: { balance, hash, index, proposal, propose
         <Button.Group>
           <Seconding
             depositors={seconds || []}
+            image={image}
             proposalId={index}
-            proposal={proposal}
           />
-          {!proposal && (
-            <PreImageButton hash={hash} />
+          {!image?.proposal && (
+            <PreImageButton imageHash={imageHash} />
           )}
         </Button.Group>
         <LinkExternal
diff --git a/packages/page-democracy/src/Overview/ProposalCell.tsx b/packages/page-democracy/src/Overview/ProposalCell.tsx
index 7c78f6df5d..b3b90817c1 100644
--- a/packages/page-democracy/src/Overview/ProposalCell.tsx
+++ b/packages/page-democracy/src/Overview/ProposalCell.tsx
@@ -12,18 +12,18 @@ import { useTranslation } from '../translate';
 
 interface Props {
   className?: string;
+  imageHash: Hash | string;
   proposal?: Proposal | null;
-  proposalHash: Hash | string;
 }
 
-function ProposalCell ({ className, proposal, proposalHash }: Props): React.ReactElement<Props> {
+function ProposalCell ({ className, imageHash, proposal }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   if (!proposal) {
     return (
       <td className={`${className} all top`}>
         <label>{t('preimage hash')}</label>
-        {proposalHash.toString()}
+        {imageHash.toString()}
       </td>
     );
   }
diff --git a/packages/page-democracy/src/Overview/Referendum.tsx b/packages/page-democracy/src/Overview/Referendum.tsx
index d963d8bd15..380d33e37a 100644
--- a/packages/page-democracy/src/Overview/Referendum.tsx
+++ b/packages/page-democracy/src/Overview/Referendum.tsx
@@ -22,30 +22,29 @@ interface Props {
   value: DeriveReferendumExt;
 }
 
-function Referendum ({ className, value }: Props): React.ReactElement<Props> | null {
+function Referendum ({ className, value: { allAye, allNay, image, imageHash, index, status, isPassing, voteCountAye, voteCountNay, votedAye, votedNay } }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
   const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber, []);
   const threshold = useMemo(
-    () => value.status.threshold.type.toString().replace('majority', ' majority '),
-    [value]
+    () => status.threshold.type.toString().replace('majority', ' majority '),
+    [status]
   );
 
-  if (!bestNumber || value.status.end.sub(bestNumber).lten(0)) {
+  if (!bestNumber || status.end.sub(bestNumber).lten(0)) {
     return null;
   }
 
-  const enactBlock = value.status.end.add(value.status.delay);
-  const remainBlock = value.status.end.sub(bestNumber).subn(1);
-  const { allAye, allNay, isPassing, voteCountAye, voteCountNay, votedAye, votedNay } = value;
+  const enactBlock = status.end.add(status.delay);
+  const remainBlock = status.end.sub(bestNumber).subn(1);
 
   return (
     <tr className={className}>
-      <td className='number top'><h1>{formatNumber(value.index)}</h1></td>
+      <td className='number top'><h1>{formatNumber(index)}</h1></td>
       <ProposalCell
         className='top'
-        proposalHash={value.hash}
-        proposal={value.proposal}
+        imageHash={imageHash}
+        proposal={image?.proposal}
       />
       <td className='number together top'>
         <label>{t('remaining')}</label>
@@ -91,15 +90,15 @@ function Referendum ({ className, value }: Props): React.ReactElement<Props> | n
       <td className='number together top'>
         <Button.Group>
           <Voting
-            proposal={value.proposal}
-            referendumId={value.index}
+            proposal={image?.proposal}
+            referendumId={index}
           />
-          {!value.proposal && (
-            <PreImageButton hash={value.hash} />
+          {!image?.proposal && (
+            <PreImageButton imageHash={imageHash} />
           )}
         </Button.Group>
         <LinkExternal
-          data={value.index}
+          data={index}
           type='referendum'
         />
       </td>
diff --git a/packages/page-democracy/src/Overview/Seconding.tsx b/packages/page-democracy/src/Overview/Seconding.tsx
index 07e8bb0729..c62c316f65 100644
--- a/packages/page-democracy/src/Overview/Seconding.tsx
+++ b/packages/page-democracy/src/Overview/Seconding.tsx
@@ -2,7 +2,8 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { AccountId, Proposal } from '@polkadot/types/interfaces';
+import { DeriveProposalImage } from '@polkadot/api-derive/types';
+import { AccountId } from '@polkadot/types/interfaces';
 
 import BN from 'bn.js';
 import React, { useState } from 'react';
@@ -14,11 +15,11 @@ import { useTranslation } from '../translate';
 interface Props {
   className?: string;
   depositors: AccountId[];
-  proposal?: Proposal;
+  image?: DeriveProposalImage;
   proposalId: BN | number;
 }
 
-function Seconding ({ depositors, proposal, proposalId }: Props): React.ReactElement<Props> | null {
+function Seconding ({ depositors, image, proposalId }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { hasAccounts } = useAccounts();
   const [accountId, setAccountId] = useState<string | null>(null);
@@ -40,7 +41,7 @@ function Seconding ({ depositors, proposal, proposalId }: Props): React.ReactEle
           <Modal.Content>
             <ProposedAction
               idNumber={proposalId}
-              proposal={proposal}
+              proposal={image?.proposal}
             />
             <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/page-democracy/src/Overview/index.tsx b/packages/page-democracy/src/Overview/index.tsx
index a9fa4c6a6f..7af0f40cf9 100644
--- a/packages/page-democracy/src/Overview/index.tsx
+++ b/packages/page-democracy/src/Overview/index.tsx
@@ -49,8 +49,8 @@ function Overview ({ className }: Props): React.ReactElement {
       )}
       <Referendums />
       <Proposals />
-      <Externals />
       <DispatchQueue />
+      <Externals />
     </div>
   );
 }
diff --git a/packages/page-tech-comm/src/Proposals/Proposal.tsx b/packages/page-tech-comm/src/Proposals/Proposal.tsx
index 2f0d5ccb3d..98a028ec7a 100644
--- a/packages/page-tech-comm/src/Proposals/Proposal.tsx
+++ b/packages/page-tech-comm/src/Proposals/Proposal.tsx
@@ -16,15 +16,15 @@ import Voting from './Voting';
 
 interface Props {
   className?: string;
-  hash: string;
+  imageHash: string;
   prime?: AccountId | null;
 }
 
-function Proposal ({ className, hash, prime }: Props): React.ReactElement<Props> | null {
+function Proposal ({ className, imageHash, prime }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
-  const optProposal = useCall<Option<ProposalType>>(api.query.technicalCommittee.proposalOf, [hash]);
-  const votes = useCall<Option<Votes>>(api.query.technicalCommittee.voting, [hash]);
+  const optProposal = useCall<Option<ProposalType>>(api.query.technicalCommittee.proposalOf, [imageHash]);
+  const votes = useCall<Option<Votes>>(api.query.technicalCommittee.voting, [imageHash]);
 
   if (!optProposal?.isSome || !votes?.isSome) {
     return null;
@@ -38,7 +38,7 @@ function Proposal ({ className, hash, prime }: Props): React.ReactElement<Props>
       <td className='number top'><h1>{formatNumber(index)}</h1></td>
       <ProposalCell
         className='top'
-        proposalHash={hash}
+        imageHash={imageHash}
         proposal={proposal}
       />
       <td className='number top'>
@@ -67,7 +67,7 @@ function Proposal ({ className, hash, prime }: Props): React.ReactElement<Props>
       </td>
       <td className='number top together'>
         <Voting
-          hash={hash}
+          hash={imageHash}
           prime={prime}
           proposalId={index}
         />
diff --git a/packages/page-tech-comm/src/Proposals/index.tsx b/packages/page-tech-comm/src/Proposals/index.tsx
index 133f7d670d..eab8c6eaa9 100644
--- a/packages/page-tech-comm/src/Proposals/index.tsx
+++ b/packages/page-tech-comm/src/Proposals/index.tsx
@@ -6,7 +6,7 @@ import { Hash } from '@polkadot/types/interfaces';
 import { ComponentProps as Props } from '../types';
 
 import React from 'react';
-import { Table, Button } from '@polkadot/react-components';
+import { Button, Spinner, Table } from '@polkadot/react-components';
 
 import { useTranslation } from '../translate';
 import Proposal from './Proposal';
@@ -23,21 +23,23 @@ function Proposals ({ className, isMember, members, prime, proposals }: Props):
           members={members}
         />
       </Button.Group>
-      {proposals?.length
-        ? (
-          <Table>
-            <Table.Body>
-              {proposals?.map((hash: Hash): React.ReactNode => (
-                <Proposal
-                  hash={hash.toHex()}
-                  key={hash.toHex()}
-                  prime={prime}
-                />
-              ))}
-            </Table.Body>
-          </Table>
-        )
-        : t('No committee proposals')
+      {proposals
+        ? proposals.length
+          ? (
+            <Table>
+              <Table.Body>
+                {proposals?.map((hash: Hash): React.ReactNode => (
+                  <Proposal
+                    imageHash={hash.toHex()}
+                    key={hash.toHex()}
+                    prime={prime}
+                  />
+                ))}
+              </Table.Body>
+            </Table>
+          )
+          : t('No committee proposals')
+        : <Spinner />
       }
     </div>
   );
diff --git a/packages/react-api/package.json b/packages/react-api/package.json
index 119d3fcdf9..4363eadd54 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.9.0-beta.16",
+    "@polkadot/api": "^1.9.0-beta.18",
     "@polkadot/extension-dapp": "^0.24.0-beta.0",
     "rxjs-compat": "^6.5.4"
   }
diff --git a/packages/react-components/src/Tooltip.tsx b/packages/react-components/src/Tooltip.tsx
index 3670bd7bfa..9ca2ec5a7c 100644
--- a/packages/react-components/src/Tooltip.tsx
+++ b/packages/react-components/src/Tooltip.tsx
@@ -12,7 +12,7 @@ import styled from 'styled-components';
 import { classes } from './util';
 
 const rootElement = typeof document === 'undefined'
-  ? null // This hack is required for server side renreding
+  ? null // This hack is required for server side rendering
   : document.getElementById('tooltips');
 
 interface Props extends BareProps {
@@ -30,24 +30,19 @@ interface Props extends BareProps {
 }
 
 function Tooltip ({ className, effect = 'solid', offset, place = 'top', text, trigger }: Props): React.ReactElement<Props> | null {
-  const defaultTooltipContainer = typeof document === 'undefined'
-    ? {} as HTMLElement // This hack is required for server side renreding
-    : document.createElement('div');
-
-  const [tooltipContainer] = useState(defaultTooltipContainer);
+  const [tooltipContainer] = useState(
+    typeof document === 'undefined'
+      ? {} as HTMLElement // This hack is required for server side rendering
+      : document.createElement('div')
+  );
 
   useEffect((): () => void => {
-    if (rootElement !== null) {
-      rootElement.appendChild(tooltipContainer);
-    }
+    rootElement && rootElement.appendChild(tooltipContainer);
 
     return (): void => {
-      if (rootElement !== null) {
-        rootElement.removeChild(tooltipContainer);
-      }
+      rootElement && rootElement.removeChild(tooltipContainer);
     };
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [tooltipContainer]);
 
   return ReactDOM.createPortal(
     <ReactTooltip
diff --git a/packages/react-hooks/src/useAccounts.ts b/packages/react-hooks/src/useAccounts.ts
index 3adc7af312..734e7ce1b3 100644
--- a/packages/react-hooks/src/useAccounts.ts
+++ b/packages/react-hooks/src/useAccounts.ts
@@ -13,12 +13,12 @@ interface UseAccounts {
 }
 
 export default function useAccounts (): UseAccounts {
-  const mounted = useIsMountedRef();
+  const mountedRef = useIsMountedRef();
   const [state, setState] = useState<UseAccounts>({ allAccounts: [], hasAccounts: false });
 
   useEffect((): () => void => {
     const subscription = accountObservable.subject.subscribe((accounts): void => {
-      if (mounted.current) {
+      if (mountedRef.current) {
         const allAccounts = accounts ? Object.keys(accounts) : [];
         const hasAccounts = allAccounts.length !== 0;
 
diff --git a/packages/react-hooks/src/useAddresses.ts b/packages/react-hooks/src/useAddresses.ts
index 013e0c3b94..af9f95f440 100644
--- a/packages/react-hooks/src/useAddresses.ts
+++ b/packages/react-hooks/src/useAddresses.ts
@@ -13,12 +13,12 @@ interface UseAccounts {
 }
 
 export default function useAccounts (): UseAccounts {
-  const mounted = useIsMountedRef();
+  const mountedRef = useIsMountedRef();
   const [state, setState] = useState<UseAccounts>({ allAddresses: [], hasAddresses: false });
 
   useEffect((): () => void => {
     const subscription = addressObservable.subject.subscribe((addresses): void => {
-      if (mounted.current) {
+      if (mountedRef.current) {
         const allAddresses = addresses ? Object.keys(addresses) : [];
         const hasAddresses = allAddresses.length !== 0;
 
diff --git a/packages/react-query/src/Events.tsx b/packages/react-query/src/Events.tsx
index 783688d359..ec6041f881 100644
--- a/packages/react-query/src/Events.tsx
+++ b/packages/react-query/src/Events.tsx
@@ -2,8 +2,6 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { Codec } from '@polkadot/types/types';
-
 import React, { useEffect, useState } from 'react';
 import { useApi } from '@polkadot/react-hooks';
 import { EventRecord } from '@polkadot/types/interfaces';
@@ -33,18 +31,18 @@ function EventsBase ({ children }: Props): React.ReactElement<Props> {
     // TODO We should really unsub - but since this should just be used once,
     // atm I'm rather typing this than doing it the way it is supposed to be
     api.isReady.then((): void => {
-      const prevEventHash = '';
-      let events: Events = [];
+      let prevEventHash = '';
 
-      api.query.system.events((records: EventRecord[] & Codec): void => {
+      api.query.system.events((records): void => {
         const newEvents = records
           .filter(({ event }): boolean => event.section !== 'system')
           .map((record, index): KeyedEvent => ({ key: `${Date.now()}-${index}`, record }));
         const newEventHash = xxhashAsHex(stringToU8a(JSON.stringify(newEvents)));
 
         if (newEventHash !== prevEventHash) {
-          events = [...newEvents, ...events].slice(0, MAX_EVENTS);
-          setState(events);
+          prevEventHash = newEventHash;
+
+          setState((events) => [...newEvents, ...events].slice(0, MAX_EVENTS));
         }
       });
     });
diff --git a/yarn.lock b/yarn.lock
index a988901344..6b1510950f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2836,56 +2836,56 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/api-contract@npm:^1.9.0-beta.16":
-  version: 1.9.0-beta.16
-  resolution: "@polkadot/api-contract@npm:1.9.0-beta.16"
+"@polkadot/api-contract@npm:^1.9.0-beta.18":
+  version: 1.9.0-beta.18
+  resolution: "@polkadot/api-contract@npm:1.9.0-beta.18"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/api": 1.9.0-beta.16
-    "@polkadot/rpc-core": 1.9.0-beta.16
-    "@polkadot/types": 1.9.0-beta.16
+    "@polkadot/api": 1.9.0-beta.18
+    "@polkadot/rpc-core": 1.9.0-beta.18
+    "@polkadot/types": 1.9.0-beta.18
     "@polkadot/util": ^2.7.0-beta.8
     bn.js: ^5.1.1
     rxjs: ^6.5.4
-  checksum: 2/cc696c9ff873960519c7957fa20badece865f1ced3fb344427b2276ca50f1e739b94daa6ff09f94a8f2790c4058d0d9a8264dbc11098ebf71e51f8c6eb0d14ed
+  checksum: 2/fd13019310c6cbaf97bd13d5ab7168991cede9a645311c2f90abb39110e1f4f5e299e98630519f241f84822d55fa7427409961dd257e94dd68f05f0168819b36
   languageName: node
   linkType: hard
 
-"@polkadot/api-derive@npm:1.9.0-beta.16":
-  version: 1.9.0-beta.16
-  resolution: "@polkadot/api-derive@npm:1.9.0-beta.16"
+"@polkadot/api-derive@npm:1.9.0-beta.18":
+  version: 1.9.0-beta.18
+  resolution: "@polkadot/api-derive@npm:1.9.0-beta.18"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/api": 1.9.0-beta.16
-    "@polkadot/rpc-core": 1.9.0-beta.16
-    "@polkadot/rpc-provider": 1.9.0-beta.16
-    "@polkadot/types": 1.9.0-beta.16
+    "@polkadot/api": 1.9.0-beta.18
+    "@polkadot/rpc-core": 1.9.0-beta.18
+    "@polkadot/rpc-provider": 1.9.0-beta.18
+    "@polkadot/types": 1.9.0-beta.18
     "@polkadot/util": ^2.7.0-beta.8
     "@polkadot/util-crypto": ^2.7.0-beta.8
     bn.js: ^5.1.1
     memoizee: ^0.4.14
     rxjs: ^6.5.4
-  checksum: 2/993cf50b7fd6fb5882287e00d20d496f4c8cc8cb054f9fbca44992ea471bfb92b7463f8794dec2590aef8578e63c62f1f491fc42683793176f62db539e80edeb
+  checksum: 2/fa132b727b4367c9ad237f1ba7384740ae9a6e140aca32684c2738cb7dd9492d82735998c55da34dd518844bc4d87d3c0a611f0a501e0ae8257aa9bff0542ec5
   languageName: node
   linkType: hard
 
-"@polkadot/api@npm:^1.9.0-beta.16":
-  version: 1.9.0-beta.16
-  resolution: "@polkadot/api@npm:1.9.0-beta.16"
+"@polkadot/api@npm:^1.9.0-beta.18":
+  version: 1.9.0-beta.18
+  resolution: "@polkadot/api@npm:1.9.0-beta.18"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/api-derive": 1.9.0-beta.16
+    "@polkadot/api-derive": 1.9.0-beta.18
     "@polkadot/keyring": ^2.7.0-beta.8
-    "@polkadot/metadata": 1.9.0-beta.16
-    "@polkadot/rpc-core": 1.9.0-beta.16
-    "@polkadot/rpc-provider": 1.9.0-beta.16
-    "@polkadot/types": 1.9.0-beta.16
+    "@polkadot/metadata": 1.9.0-beta.18
+    "@polkadot/rpc-core": 1.9.0-beta.18
+    "@polkadot/rpc-provider": 1.9.0-beta.18
+    "@polkadot/types": 1.9.0-beta.18
     "@polkadot/util": ^2.7.0-beta.8
     "@polkadot/util-crypto": ^2.7.0-beta.8
     bn.js: ^5.1.1
     eventemitter3: ^4.0.0
     rxjs: ^6.5.4
-  checksum: 2/b5f3ac2f8b06017ca4c5e8c4bf20a62d05ae4e8e6ab4b88a9969fefa2a9eb616b77a71ef971ade855f55649f961357d13c30106a147f50db9e066411f57ca9ef
+  checksum: 2/30fdb5b77de613942eea947d2b1461ff819bb5f95145b546828a38efcd58795afb090b13bdeee35257bacfb763f356131793aa83f83aff9c31ac14f2f0dfdfe5
   languageName: node
   linkType: hard
 
@@ -2926,7 +2926,7 @@ __metadata:
   resolution: "@polkadot/app-contracts@workspace:packages/page-contracts"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/api-contract": ^1.9.0-beta.16
+    "@polkadot/api-contract": ^1.9.0-beta.18
   languageName: unknown
   linkType: soft
 
@@ -3250,16 +3250,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/metadata@npm:1.9.0-beta.16":
-  version: 1.9.0-beta.16
-  resolution: "@polkadot/metadata@npm:1.9.0-beta.16"
+"@polkadot/metadata@npm:1.9.0-beta.18":
+  version: 1.9.0-beta.18
+  resolution: "@polkadot/metadata@npm:1.9.0-beta.18"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/types": 1.9.0-beta.16
+    "@polkadot/types": 1.9.0-beta.18
     "@polkadot/util": ^2.7.0-beta.8
     "@polkadot/util-crypto": ^2.7.0-beta.8
     bn.js: ^5.1.1
-  checksum: 2/f22e564a1f686744e53332e3f72e14e61624bca8d6f7d42c0a2c6e51cc613001cec03fb967cd58ea66097f0b9d2027f3645a5c64442726def75e16a946a50969
+  checksum: 2/134de6a920e88b896da748a860b970e55c106ee6785ae5f71a73c8a69de35f6a34840529149dcf0ed196f662dc454ae53109ef1c3a0226144e449a07b87d80ee
   languageName: node
   linkType: hard
 
@@ -3268,7 +3268,7 @@ __metadata:
   resolution: "@polkadot/react-api@workspace:packages/react-api"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/api": ^1.9.0-beta.16
+    "@polkadot/api": ^1.9.0-beta.18
     "@polkadot/extension-dapp": ^0.24.0-beta.0
     rxjs-compat: ^6.5.4
   languageName: unknown
@@ -3385,35 +3385,35 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@polkadot/rpc-core@npm:1.9.0-beta.16":
-  version: 1.9.0-beta.16
-  resolution: "@polkadot/rpc-core@npm:1.9.0-beta.16"
+"@polkadot/rpc-core@npm:1.9.0-beta.18":
+  version: 1.9.0-beta.18
+  resolution: "@polkadot/rpc-core@npm:1.9.0-beta.18"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/metadata": 1.9.0-beta.16
-    "@polkadot/rpc-provider": 1.9.0-beta.16
-    "@polkadot/types": 1.9.0-beta.16
+    "@polkadot/metadata": 1.9.0-beta.18
+    "@polkadot/rpc-provider": 1.9.0-beta.18
+    "@polkadot/types": 1.9.0-beta.18
     "@polkadot/util": ^2.7.0-beta.8
     memoizee: ^0.4.14
     rxjs: ^6.5.4
-  checksum: 2/caba2f0e5c7bcea77e090e7474e6f5a13ea3ea170cdf624b42944cf05b409f661fb9b9154e5eb60c1f235fc8fa16641643073077e1ee336b035e6277bfcbd4c2
+  checksum: 2/950388dd9bb321d9ffa51a0b1b6a5dd9465372e84878f15473ab327393564487acff1b759732117a60f2a5b9fe19238aa343cc06f559f0e2c95229d3d724b7ab
   languageName: node
   linkType: hard
 
-"@polkadot/rpc-provider@npm:1.9.0-beta.16":
-  version: 1.9.0-beta.16
-  resolution: "@polkadot/rpc-provider@npm:1.9.0-beta.16"
+"@polkadot/rpc-provider@npm:1.9.0-beta.18":
+  version: 1.9.0-beta.18
+  resolution: "@polkadot/rpc-provider@npm:1.9.0-beta.18"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/metadata": 1.9.0-beta.16
-    "@polkadot/types": 1.9.0-beta.16
+    "@polkadot/metadata": 1.9.0-beta.18
+    "@polkadot/types": 1.9.0-beta.18
     "@polkadot/util": ^2.7.0-beta.8
     "@polkadot/util-crypto": ^2.7.0-beta.8
     bn.js: ^5.1.1
     eventemitter3: ^4.0.0
     isomorphic-fetch: ^2.2.1
     websocket: ^1.0.31
-  checksum: 2/b0236848e3801cf433c34ca0c7e68166eff2060a7708c15de3385522e6d044d3e5a1cc364a966af4c0f54b7319dd83fc14b4b696e4b1d8aa7cc2bcdcc2d07f83
+  checksum: 2/f49729515d67650aa661395a76f69f7fc744ee569357c4b208b9bfd5f69fe57c7362e69d9aa285eaa9add12d8770af1ea2160010a8751aa23b6b3c6e8b59ac15
   languageName: node
   linkType: hard
 
@@ -3426,19 +3426,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/types@npm:^1.9.0-beta.16":
-  version: 1.9.0-beta.16
-  resolution: "@polkadot/types@npm:1.9.0-beta.16"
+"@polkadot/types@npm:^1.9.0-beta.18":
+  version: 1.9.0-beta.18
+  resolution: "@polkadot/types@npm:1.9.0-beta.18"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/metadata": 1.9.0-beta.16
+    "@polkadot/metadata": 1.9.0-beta.18
     "@polkadot/util": ^2.7.0-beta.8
     "@polkadot/util-crypto": ^2.7.0-beta.8
     "@types/bn.js": ^4.11.6
     bn.js: ^5.1.1
     memoizee: ^0.4.14
     rxjs: ^6.5.4
-  checksum: 2/d21269b1917450448a3cc3ff6ac176b7e56b07dbcff2c3de7be84102d81e9ba93cfe6ff7709e59f0b67cb7659a622f0bb5b28965695f338016f9c8bd6ef9c5ca
+  checksum: 2/5774694b7f1bdcc0203a4a8e127a9a5d1b3d53d279cdc361f114b844ede77af3d4b337eb11469345d76fee65ed4465b05587fc0b48404286daca60cd17dbc80b
   languageName: node
   linkType: hard