Show democracy dispatch queue (#1997)

* Show democracy dispatch queue

* Bump API

package.json

@@ -10,10 +10,10 @@
     "packages/*"
   ],
   "resolutions": {
-    "@polkadot/api": "^0.98.0-beta.3",
-    "@polkadot/api-contract": "^0.98.0-beta.3",
+    "@polkadot/api": "^0.99.0-beta.0",
+    "@polkadot/api-contract": "^0.99.0-beta.0",
     "@polkadot/keyring": "^1.7.1",
-    "@polkadot/types": "^0.98.0-beta.3",
+    "@polkadot/types": "^0.99.0-beta.0",
     "@polkadot/util": "^1.7.1",
     "@polkadot/util-crypto": "^1.7.1",
     "babel-core": "^7.0.0-bridge.0",

packages/app-contracts/package.json

@@ -11,7 +11,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.7.4",
-    "@polkadot/api-contract": "^0.98.0-beta.3",
+    "@polkadot/api-contract": "^0.99.0-beta.0",
     "@polkadot/react-components": "^0.38.0-beta.29"
   }
 }

packages/app-council/src/Motions/Motion.tsx

@@ -52,7 +52,7 @@ function Motion ({ className, hash, proposal, t, votes }: Props): React.ReactEle
         {nays.map((address, index): React.ReactNode => (
           <AddressMini
             key={`${index}:${address}`}
-            label={t('Nay')}
+            label={index === 0 ? t('Nay') : undefined}
             value={address}
             withBalance={false}
           />

packages/app-democracy/src/Overview/DispatchBlock.tsx

@@ -0,0 +1,69 @@
+// Copyright 2017-2019 @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;
+}
+
+export default function DispatchBlock ({ entries, keyPrefix, storageKey }: Props): React.ReactElement<Props> | null {
+  const [blockNumber, setBlockNumber] = useState<BlockNumber | undefined>();
+  const [expanded, setExpanded] = useState<Entry[]>([]);
+
+  useEffect((): void => {
+    if (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}
+        />
+      ))}
+    </>
+  );
+}

packages/app-democracy/src/Overview/DispatchEntry.tsx

@@ -0,0 +1,51 @@
+// Copyright 2017-2019 @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 { I18nProps } from '@polkadot/react-components/types';
+import { AccountId, Balance, BlockNumber, Hash, Proposal, ReferendumIndex } from '@polkadot/types/interfaces';
+import { ITuple } from '@polkadot/types/types';
+
+import React, { useEffect, useState } from 'react';
+import { useApi, trackStream } from '@polkadot/react-hooks';
+import { Bytes, Option } from '@polkadot/types';
+import { formatNumber } from '@polkadot/util';
+
+import translate from '../translate';
+import ProposalCell from './ProposalCell';
+
+interface Props extends I18nProps {
+  blockNumber?: BlockNumber;
+  hash: Hash;
+  referendumIndex: ReferendumIndex;
+}
+
+function DispatchEntry ({ blockNumber, hash, referendumIndex, t }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const preimage = trackStream<Option<ITuple<[Bytes, AccountId, Balance, BlockNumber]>>
+  >(api.query.democracy.preimages, [hash]);
+  const [proposal, setProposal] = useState<Proposal | undefined>();
+
+  useEffect((): void => {
+    if (preimage?.isSome) {
+      setProposal(api.createType('Proposal', preimage.unwrap()[0].toU8a(true)));
+    }
+  }, [preimage]);
+
+  return (
+    <tr>
+      <td className='number top'><h1>{formatNumber(referendumIndex)}</h1></td>
+      <td className='number top'>
+        {blockNumber && (
+          <>
+            <label>{t('enact at')}</label>
+            {formatNumber(blockNumber)}
+          </>
+        )}
+      </td>
+      <ProposalCell proposalHash={hash} proposal={proposal} />
+    </tr>
+  );
+}
+
+export default translate(DispatchEntry);

packages/app-democracy/src/Overview/DispatchQueue.tsx

@@ -0,0 +1,52 @@
+// Copyright 2017-2019 @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 { I18nProps as Props } from '@polkadot/react-components/types';
+import { Hash, ReferendumIndex } from '@polkadot/types/interfaces';
+import { ITuple } from '@polkadot/types/types';
+
+import React, { useState } from 'react';
+import { Table } from '@polkadot/react-components';
+import { useApi, trackStream } from '@polkadot/react-hooks';
+import { Option, StorageKey, Vec } from '@polkadot/types';
+import { u8aToHex } from '@polkadot/util';
+
+import translate from '../translate';
+import DispatchBlock from './DispatchBlock';
+
+function DispatchQueue ({ className, t }: Props): React.ReactElement<Props> | null {
+  const { api } = useApi();
+  const [keyPrefix] = useState(u8aToHex(api.query.democracy.dispatchQueue.creator.iterKey));
+  const queued = trackStream<[StorageKey, Option<Vec<Option<ITuple<[Hash, ReferendumIndex]>>>>
+  ][]>(api.query.democracy.dispatchQueue.entries as any, []);
+
+  if (!queued?.length) {
+    return null;
+  }
+
+  return (
+    <div className={className}>
+      <h1>{t('dispatch queue')}</h1>
+      {queued?.length
+        ? (
+          <Table>
+            <Table.Body>
+              {queued.map(([storageKey, entries]): React.ReactNode => (
+                <DispatchBlock
+                  entries={entries}
+                  key={storageKey.toString()}
+                  keyPrefix={keyPrefix}
+                  storageKey={storageKey}
+                />
+              ))}
+            </Table.Body>
+          </Table>
+        )
+        : t('nothing queued to be executed')
+      }
+    </div>
+  );
+}
+
+export default translate(DispatchQueue);

packages/app-democracy/src/Overview/index.tsx

@@ -9,6 +9,7 @@ import styled from 'styled-components';
 import { Button } from '@polkadot/react-components';
 
 import translate from '../translate';
+import DispatchQueue from './DispatchQueue';
 import Externals from './Externals';
 import Proposals from './Proposals';
 import Referendums from './Referendums';
@@ -50,6 +51,7 @@ function Overview ({ className, t }: Props): React.ReactElement {
       <Referendums />
       <Proposals />
       <Externals />
+      <DispatchQueue />
     </div>
   );
 }

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.4",
-    "@polkadot/api": "^0.98.0-beta.3",
+    "@polkadot/api": "^0.99.0-beta.0",
     "@polkadot/extension-dapp": "^0.14.0-beta.6",
     "edgeware-node-types": "^1.0.10",
     "rxjs-compat": "^6.5.3"

packages/react-components/src/Call.tsx

@@ -43,6 +43,11 @@ function Call ({ children, className, labelHash, style, mortality, tip, value, w
       className={classes('ui--Extrinsic', className)}
       style={style}
     >
+      <Params
+        isDisabled
+        params={params}
+        values={values}
+      />
       {children}
       {hash && (
         <Static
@@ -68,11 +73,6 @@ function Call ({ children, className, labelHash, style, mortality, tip, value, w
           <FormatBalance value={tip} />
         </Static>
       )}
-      <Params
-        isDisabled
-        params={params}
-        values={values}
-      />
     </div>
   );
 }

packages/react-components/src/Card.tsx

@@ -30,7 +30,7 @@ export default styled(Card)`
   justify-content: space-around;
 
   label {
-    opacity: 0.25;
+    opacity: 0.42;
   }
 
   &:hover {

packages/react-components/src/Table.tsx

@@ -72,7 +72,7 @@ export default styled(Table)`
       }
 
       label {
-        opacity: 0.25;
+        opacity: 0.42;
       }
 
       &:hover {