Allow voting on treasury page (#2019)

* Allow voting on treasury page

* More re-usable voting components (a start)

* Ficup imports

* Adjust modals

* Bump API

package.json

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

packages/app-accounts/src/modals/Backup.tsx

@@ -67,7 +67,6 @@ export default function ({ address, onClose }: Props): React.ReactElement<Props>
   return (
     <Modal
       className='app--accounts-Modal'
-      dimmer='inverted'
       open
     >
       <Modal.Header>{t('Backup account')}</Modal.Header>

packages/app-accounts/src/modals/ChangePass.tsx

@@ -37,7 +37,6 @@ class ChangePass extends TxComponent<Props, State> {
     return (
       <Modal
         className='app--accounts-Modal'
-        dimmer='inverted'
         open
       >
         <Modal.Header>{t('Change account password')}</Modal.Header>

packages/app-accounts/src/modals/Create.tsx

@@ -189,7 +189,6 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, t, type:
   return (
     <Modal
       className={className}
-      dimmer='inverted'
       open
     >
       <Modal.Header>{t('Add an account via seed')}</Modal.Header>

packages/app-accounts/src/modals/CreateConfirmation.tsx

@@ -18,10 +18,7 @@ interface Props extends I18nProps {
 
 function CreateConfirmation ({ address, name, onClose, onCommit, t }: Props): React.ReactElement<Props> | null {
   return (
-    <Modal
-      dimmer='inverted'
-      open
-    >
+    <Modal open>
       <Modal.Header>
         {t('Important notice')}
       </Modal.Header>

packages/app-accounts/src/modals/Derive.tsx

@@ -136,7 +136,6 @@ function Derive ({ className, from, onClose, t }: Props): React.ReactElement {
   return (
     <Modal
       className={className}
-      dimmer='inverted'
       open
     >
       <Modal.Header>{t('Derive account from pair')}</Modal.Header>

packages/app-accounts/src/modals/Import.tsx

@@ -38,10 +38,7 @@ class Import extends TxComponent<Props, State> {
     const { isFileValid, isPassValid } = this.state;
 
     return (
-      <Modal
-        dimmer='inverted'
-        open
-      >
+      <Modal open>
         <Modal.Header>{t('Add via backup file')}</Modal.Header>
         {this.renderInput()}
         <Modal.Actions>

packages/app-accounts/src/modals/Qr.tsx

@@ -49,7 +49,6 @@ function QrModal ({ className, onClose, onStatusChange, t }: Props): React.React
   return (
     <Modal
       className={className}
-      dimmer='inverted'
       open
     >
       <Modal.Header>{t('Add account via Qr')}</Modal.Header>

packages/app-accounts/src/modals/Transfer.tsx

@@ -89,7 +89,6 @@ function Transfer ({ className, onClose, recipientId: propRecipientId, senderId:
   return (
     <Modal
       className='app--accounts-Modal'
-      dimmer='inverted'
       open
     >
       <Modal.Header>{t('Send funds')}</Modal.Header>

packages/app-address-book/src/modals/Create.tsx

@@ -77,10 +77,7 @@ function Create ({ onClose, onStatusChange, t }: Props): React.ReactElement<Prop
   };
 
   return (
-    <Modal
-      dimmer='inverted'
-      open
-    >
+    <Modal open>
       <Modal.Header>{t('Add an address')}</Modal.Header>
       <Modal.Content>
         <AddressRow

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.7",
+    "@polkadot/api-contract": "^0.99.0-beta.9",
     "@polkadot/react-components": "^0.38.0-beta.51"
   }
 }

packages/app-contracts/src/Contracts/Call.tsx

@@ -113,7 +113,6 @@ function Call (props: Props): React.ReactElement<Props> | null {
   return (
     <Modal
       className={[className || '', 'app--contracts-Modal'].join(' ')}
-      dimmer='inverted'
       onClose={onClose}
       open={isOpen}
     >

packages/app-contracts/src/Modal.tsx

@@ -54,7 +54,6 @@ class ContractModal<P extends ContractModalProps, S extends ContractModalState>
     return (
       <Modal
         className='app--contracts-Modal'
-        dimmer='inverted'
         onClose={this.onClose}
         open={isOpen}
       >

packages/app-contracts/src/RemoveABI.tsx

@@ -24,7 +24,6 @@ function RemoveABI ({ code, onClose, onRemove, t }: Props): React.ReactElement<P
   return (
     <Modal
       className='app--accounts-Modal'
-      dimmer='inverted'
       onClose={onClose}
       open
     >

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

@@ -2,29 +2,23 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { Proposal as ProposalType, Votes } from '@polkadot/types/interfaces';
+import { DerivedCouncilProposal } from '@polkadot/api-derive/types';
 import { I18nProps } from '@polkadot/react-components/types';
 
-import BN from 'bn.js';
 import React from 'react';
-import { Option } from '@polkadot/types';
 
 import { AddressMini, Voting } from '@polkadot/react-components';
-import { withCalls, withMulti } from '@polkadot/react-api';
 import ProposalCell from '@polkadot/app-democracy/Overview/ProposalCell';
 import { formatNumber } from '@polkadot/util';
 
 import translate from '../translate';
 
 interface Props extends I18nProps {
-  chain_bestNumber?: BN;
-  hash: string;
-  proposal: ProposalType | null;
-  votes: Votes | null;
+  motion: DerivedCouncilProposal;
 }
 
-function Motion ({ className, hash, proposal, t, votes }: Props): React.ReactElement<Props> | null {
-  if (!proposal || !votes) {
+function Motion ({ className, motion: { hash, proposal, votes }, t }: Props): React.ReactElement<Props> | null {
+  if (!votes) {
     return null;
   }
 
@@ -33,7 +27,11 @@ function Motion ({ className, hash, proposal, t, votes }: Props): React.ReactEle
   return (
     <tr className={className}>
       <td className='number top'><h1>{formatNumber(index)}</h1></td>
-      <ProposalCell className='top' proposalHash={hash} proposal={proposal} />
+      <ProposalCell
+        className='top'
+        proposalHash={hash}
+        proposal={proposal}
+      />
       <td className='number top'>
         <label>{t('threshold')}</label>
         {formatNumber(ayes.length)}/{formatNumber(threshold)}
@@ -70,21 +68,4 @@ function Motion ({ className, hash, proposal, t, votes }: Props): React.ReactEle
   );
 }
 
-export default withMulti(
-  Motion,
-  translate,
-  withCalls<Props>(
-    ['query.council.proposalOf', {
-      paramName: 'hash',
-      propName: 'proposal',
-      transform: (value: Option<ProposalType>): ProposalType | null =>
-        value.unwrapOr(null)
-    }],
-    ['query.council.voting', {
-      paramName: 'hash',
-      propName: 'votes',
-      transform: (value: Option<Votes>): Votes | null =>
-        value.unwrapOr(null)
-    }]
-  )
-);
+export default translate(Motion);

packages/app-council/src/Motions/index.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 { Hash } from '@polkadot/types/interfaces';
+import { DerivedCouncilProposals, DerivedCouncilProposal } from '@polkadot/api-derive/types';
 import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
@@ -13,7 +13,7 @@ import Propose from './Propose';
 import translate from '../translate';
 
 interface Props extends I18nProps {
-  motions?: Hash[];
+  motions?: DerivedCouncilProposals;
 }
 
 function Proposals ({ className, motions, t }: Props): React.ReactElement<Props> {
@@ -24,10 +24,10 @@ function Proposals ({ className, motions, t }: Props): React.ReactElement<Props>
         ? (
           <Table>
             <Table.Body>
-              {motions?.map((hash: Hash): React.ReactNode => (
+              {motions?.map((motion: DerivedCouncilProposal): React.ReactNode => (
                 <Motion
-                  hash={hash.toHex()}
-                  key={hash.toHex()}
+                  key={motion.hash.toHex()}
+                  motion={motion}
                 />
               ))}
             </Table.Body>

packages/app-council/src/Overview/Summary.tsx

@@ -38,7 +38,7 @@ function Summary ({ bestNumber, className, electionsInfo: { members, candidateCo
           </CardSummary>
         </section>
       )}
-      {bestNumber && termDuration && termDuration.gtn(0) && (
+      {bestNumber && termDuration?.gtn(0) && (
         <section>
           <CardSummary
             label={t('term progress')}

packages/app-council/src/index.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 { Hash } from '@polkadot/types/interfaces';
+import { DerivedCouncilProposals } from '@polkadot/api-derive/types';
 import { AppProps, BareProps, I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
@@ -23,7 +23,7 @@ interface Props extends AppProps, BareProps, I18nProps {}
 function App ({ basePath, className, t }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const { pathname } = useLocation();
-  const motions = useCall<Hash[]>(api.query.council.proposals, []);
+  const motions = useCall<DerivedCouncilProposals>(api.derive.council.proposals, []);
 
   return (
     <main className={className}>

packages/app-council/src/useCounter.ts

@@ -2,14 +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 { Hash } from '@polkadot/types/interfaces';
+import { DerivedCouncilProposals } from '@polkadot/api-derive/types';
 
 import { useState, useEffect } from 'react';
 import { useApi, useCall } from '@polkadot/react-hooks';
 
 export default function useCounter (): number {
   const { api, isApiReady } = useApi();
-  const motions = useCall<Hash[]>(isApiReady ? api.query.council?.proposals : undefined, []);
+  const motions = useCall<DerivedCouncilProposals>(isApiReady ? api.derive.council.proposals : undefined, []);
   const [counter, setCounter] = useState(0);
 
   useEffect((): void => {

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

@@ -43,7 +43,10 @@ function DispatchEntry ({ blockNumber, hash, referendumIndex, t }: Props): React
           </>
         )}
       </td>
-      <ProposalCell proposalHash={hash} proposal={proposal} />
+      <ProposalCell
+        proposalHash={hash}
+        proposal={proposal}
+      />
     </tr>
   );
 }

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

@@ -61,7 +61,11 @@ function Externals ({ className, t }: Props): React.ReactElement<Props> | null {
             <td className='number together top'>
               {expanded && <FormatBalance label={<label>{t('locked')}</label>} value={expanded.balance} />}
             </td>
-            <ProposalCell className='top' proposalHash={hash} proposal={expanded?.proposal} />
+            <ProposalCell
+              className='top'
+              proposalHash={hash}
+              proposal={expanded?.proposal}
+            />
           </tr>
         </Table.Body>
       </Table>

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

@@ -39,7 +39,6 @@ function PreImage ({ className, onClose, t }: Props): React.ReactElement<Props>
   return (
     <Modal
       className={className}
-      dimmer='inverted'
       open
     >
       <Modal.Header>{t('Submit preimage')}</Modal.Header>

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

@@ -31,7 +31,11 @@ function Proposal ({ className, t, value: { balance, hash, index, proposal, prop
       <td className='number together top'>
         <FormatBalance label={<label>{t('locked')}</label>} value={balance} />
       </td>
-      <ProposalCell className='top' proposalHash={hash} proposal={proposal} />
+      <ProposalCell
+        className='top'
+        proposalHash={hash}
+        proposal={proposal}
+      />
       <td className='top seconding'>
         {seconding.length !== 0 && (
           <details>

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

@@ -29,7 +29,6 @@ function Propose ({ className, onClose, t }: Props): React.ReactElement<Props> {
   return (
     <Modal
       className={className}
-      dimmer='inverted'
       open
     >
       <Modal.Header>{t('Submit proposal')}</Modal.Header>

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

@@ -84,7 +84,11 @@ function Referendum ({ chain_bestNumber, className, democracy_referendumVotesFor
   return (
     <tr className={className}>
       <td className='number top'><h1>{formatNumber(value.index)}</h1></td>
-      <ProposalCell className='top' proposalHash={value.hash} proposal={value.proposal} />
+      <ProposalCell
+        className='top'
+        proposalHash={value.hash}
+        proposal={value.proposal}
+      />
       <td className='number together top'>
         <label>{t('remaining')}</label>
         {formatNumber(value.info.end.sub(chain_bestNumber).subn(1))} blocks

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

@@ -33,7 +33,6 @@ function Seconding ({ depositors, proposalId, t }: Props): React.ReactElement<Pr
     <>
       {isSecondingOpen && (
         <Modal
-          dimmer='inverted'
           open
           size='small'
         >

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

@@ -6,7 +6,7 @@ import { I18nProps } from '@polkadot/react-components/types';
 
 import BN from 'bn.js';
 import React, { useState } from 'react';
-import { Button, Dropdown, InputAddress, Modal, TxButton } from '@polkadot/react-components';
+import { Button, Modal, VoteAccount, VoteActions, VoteToggle } from '@polkadot/react-components';
 import { useAccounts } from '@polkadot/react-hooks';
 import { isBoolean } from '@polkadot/util';
 
@@ -33,61 +33,31 @@ function Voting ({ referendumId, t }: Props): React.ReactElement<Props> | null {
     <>
       {isVotingOpen && (
         <Modal
-          dimmer='inverted'
           open
           size='small'
         >
           <Modal.Header>{t('Vote on proposal')}</Modal.Header>
           <Modal.Content>
-            <InputAddress
-              help={t('Select the account you wish to vote with. You can approve "aye" or deny "nay" the proposal.')}
-              label={t('vote with account')}
-              onChange={setAccountId}
-              type='account'
-              withLabel
-            />
-            <Dropdown
-              help={t('Select your vote preferences for this proposal, either to approve or disapprove')}
-              label={t('record my vote as')}
-              options={[
-                { text: t('Aye, I approve'), value: true },
-                { text: t('Nay, I do not approve'), value: false }
-              ]}
+            <VoteAccount onChange={setAccountId} />
+            <VoteToggle
               onChange={_onChangeVote}
               value={voteValue}
             />
           </Modal.Content>
-          <Modal.Actions>
-            <Button.Group>
-              <Button
-                icon='cancel'
-                isNegative
-                label={t('Cancel')}
-                onClick={_toggleVoting}
-              />
-              <Button.Or />
-              <TxButton
-                accountId={accountId}
-                icon='check'
-                isDisabled={!accountId}
-                isPrimary
-                label={t('Vote')}
-                onClick={_toggleVoting}
-                params={[referendumId, voteValue]}
-                tx='democracy.vote'
-              />
-            </Button.Group>
-          </Modal.Actions>
+          <VoteActions
+            accountId={accountId}
+            onClick={_toggleVoting}
+            params={[referendumId, voteValue]}
+            tx='democracy.vote'
+          />
         </Modal>
       )}
-      <div className='ui--Row-buttons'>
-        <Button
-          icon='check'
-          isPrimary
-          label={t('Vote')}
-          onClick={_toggleVoting}
-        />
-      </div>
+      <Button
+        icon='check'
+        isPrimary
+        label={t('Vote')}
+        onClick={_toggleVoting}
+      />
     </>
   );
 }

packages/app-explorer/src/BlockInfo/Logs.tsx

@@ -7,7 +7,7 @@ import { Codec, TypeDef } from '@polkadot/types/types';
 import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
-import { Struct, Tuple, U8a, Vec, getTypeDef } from '@polkadot/types';
+import { Struct, Tuple, Raw, Vec, getTypeDef } from '@polkadot/types';
 import { Column } from '@polkadot/react-components';
 import Params from '@polkadot/react-params';
 
@@ -17,7 +17,7 @@ interface Props extends I18nProps {
   value?: DigestItem[];
 }
 
-function formatU8a (value: U8a): React.ReactNode {
+function formatU8a (value: Raw): React.ReactNode {
   return (
     <Params
       isDisabled
@@ -96,7 +96,7 @@ function renderItem ({ t }: Props): (item: DigestItem, index: number) => React.R
       content = formatTuple(item.value);
     } else if (item.value instanceof Vec) {
       content = formatVector(item.value);
-    } else if (item.value instanceof U8a) {
+    } else if (item.value instanceof Raw) {
       content = formatU8a(item.value);
     } else {
       content = <div>{item.value.toString().split(',').join(', ')}</div>;

packages/app-generic-asset/src/modals/Create.tsx

@@ -28,10 +28,7 @@ function Create ({ onClose, onRegister, t }: Props): React.ReactElement<Props> {
   };
 
   return (
-    <Modal
-      dimmer='inverted'
-      open
-    >
+    <Modal open>
       <Modal.Header>{t('Register an Asset')}</Modal.Header>
       <Modal.Content>
         <InputNumber

packages/app-staking/src/Actions/Account/BondExtra.tsx

@@ -67,7 +67,6 @@ class BondExtra extends TxComponent<Props, State> {
     return (
       <Modal
         className='staking--BondExtra'
-        dimmer='inverted'
         open
         size='small'
       >

packages/app-staking/src/Actions/Account/InjectKeys.tsx

@@ -71,7 +71,6 @@ function InjectKeys ({ isOpen = true, onClose, t }: Props): React.ReactElement<P
 
   return (
     <Modal
-      dimmer='inverted'
       open
       size='small'
     >

packages/app-staking/src/Actions/Account/Nominate.tsx

@@ -72,7 +72,6 @@ function Nominate ({ className, controllerId, nominees, onClose, stashId, stashO
   return (
     <Modal
       className={`staking--Nominating ${className}`}
-      dimmer='inverted'
       open
     >
       <Modal.Header>

packages/app-staking/src/Actions/Account/SetControllerAccount.tsx

@@ -44,7 +44,6 @@ class SetControllerAccount extends TxComponent<Props, State> {
     return (
       <Modal
         className='staking--SetControllerAccount'
-        dimmer='inverted'
         open
         size='small'
       >

packages/app-staking/src/Actions/Account/SetRewardDestination.tsx

@@ -38,7 +38,6 @@ class SetRewardDestination extends TxComponent<Props, State> {
     return (
       <Modal
         className='staking--Bonding'
-        dimmer='inverted'
         open
         size='small'
       >

packages/app-staking/src/Actions/Account/SetSessionKey.tsx

@@ -41,7 +41,6 @@ function SetSessionKey ({ controllerId, isOpen, onClose, sessionIds, stashId, t
   return (
     <Modal
       className='staking--SetSessionAccount'
-      dimmer='inverted'
       open
       size='small'
     >

packages/app-staking/src/Actions/Account/Unbond.tsx

@@ -62,7 +62,6 @@ class Unbond extends TxComponent<Props, State> {
     return (
       <Modal
         className='staking--Unbond'
-        dimmer='inverted'
         open
         size='small'
       >

packages/app-staking/src/Actions/Account/Validate.tsx

@@ -83,7 +83,6 @@ class Validate extends TxComponent<Props, State> {
     return (
       <Modal
         className='staking--Staking'
-        dimmer='inverted'
         open
         size='small'
       >

packages/app-staking/src/Actions/NewStake.tsx

@@ -58,7 +58,6 @@ class NewStake extends TxComponent<Props, State> {
     return (
       <Modal
         className='staking--Bonding'
-        dimmer='inverted'
         open
         size='small'
       >

packages/app-storage/src/Query.tsx

@@ -13,7 +13,7 @@ import { unwrapStorageType } from '@polkadot/types/primitive/StorageKey';
 import { Button, Labelled } from '@polkadot/react-components';
 import { withCallDiv } from '@polkadot/react-api';
 import valueToText from '@polkadot/react-params/valueToText';
-import { Compact, Data, Option } from '@polkadot/types';
+import { Compact, Option, Raw } from '@polkadot/types';
 import { isU8a, u8aToHex, u8aToString } from '@polkadot/util';
 
 import translate from './translate';
@@ -96,7 +96,7 @@ function getCachedComponent (query: QueryTypes): CacheInstance {
           paramName: 'params',
           paramValid: true,
           params: [[key]],
-          transform: ([data]: Option<Data>[]): Option<Data> => data,
+          transform: ([data]: Option<Raw>[]): Option<Raw> => data,
           withIndicator: true
         });
       } else {
@@ -111,7 +111,7 @@ function getCachedComponent (query: QueryTypes): CacheInstance {
 
       type = key.creator && key.creator.meta
         ? typeToString(key)
-        : 'Data';
+        : 'Raw';
     }
 
     const defaultProps = { className: 'ui--output' };
@@ -150,7 +150,7 @@ function Query ({ className, onRemove, value }: Props): React.ReactElement<Props
     setIsSpreadable(
       (value.key as StorageEntryPromise).creator &&
       (value.key as StorageEntryPromise).creator.meta &&
-      ['Bytes', 'Data'].includes((value.key as StorageEntryPromise).creator.meta.type.toString())
+      ['Bytes', 'Raw'].includes((value.key as StorageEntryPromise).creator.meta.type.toString())
     );
   }, [value]);
 
@@ -158,7 +158,7 @@ function Query ({ className, onRemove, value }: Props): React.ReactElement<Props
   const type = isConst
     ? (key as unknown as ConstValue).meta.type.toString()
     : isU8a(key)
-      ? 'Data'
+      ? 'Raw'
       : typeToString(key as StorageEntryPromise);
 
   if (!Component) {

packages/app-tech-comm/src/Proposals/Proposal.tsx

@@ -34,7 +34,11 @@ function Proposal ({ className, hash, t }: Props): React.ReactElement<Props> | n
   return (
     <tr className={className}>
       <td className='number top'><h1>{formatNumber(index)}</h1></td>
-      <ProposalCell className='top' proposalHash={hash} proposal={proposal} />
+      <ProposalCell
+        className='top'
+        proposalHash={hash}
+        proposal={proposal}
+      />
       <td className='number top'>
         <label>{t('threshold')}</label>
         {formatNumber(ayes.length)}/{formatNumber(threshold)}

packages/app-tech-comm/src/Proposals/Voting.tsx

@@ -6,7 +6,7 @@ import { I18nProps } from '@polkadot/react-components/types';
 
 import BN from 'bn.js';
 import React, { useState } from 'react';
-import { Button, Dropdown, InputAddress, Modal, TxButton } from '@polkadot/react-components';
+import { Button, Modal, VoteAccount, VoteActions, VoteToggle } from '@polkadot/react-components';
 import { useAccounts } from '@polkadot/react-hooks';
 import { isBoolean } from '@polkadot/util';
 
@@ -34,61 +34,31 @@ function Voting ({ hash, proposalId, t }: Props): React.ReactElement<Props> | nu
     <>
       {isVotingOpen && (
         <Modal
-          dimmer='inverted'
           open
           size='small'
         >
           <Modal.Header>{t('Vote on proposal')}</Modal.Header>
           <Modal.Content>
-            <InputAddress
-              help={t('Select the account you wish to vote with. You can approve "aye" or deny "nay" the proposal.')}
-              label={t('vote with account')}
-              onChange={setAccountId}
-              type='account'
-              withLabel
-            />
-            <Dropdown
-              help={t('Select your vote preferences for this proposal, either to approve or disapprove')}
-              label={t('record my vote as')}
-              options={[
-                { text: t('Aye, I approve'), value: true },
-                { text: t('Nay, I do not approve'), value: false }
-              ]}
+            <VoteAccount onChange={setAccountId} />
+            <VoteToggle
               onChange={_onChangeVote}
               value={voteValue}
             />
           </Modal.Content>
-          <Modal.Actions>
-            <Button.Group>
-              <Button
-                icon='cancel'
-                isNegative
-                label={t('Cancel')}
-                onClick={_toggleVoting}
-              />
-              <Button.Or />
-              <TxButton
-                accountId={accountId}
-                icon='check'
-                isDisabled={!accountId}
-                isPrimary
-                label={t('Vote')}
-                onClick={_toggleVoting}
-                params={[hash, proposalId, voteValue]}
-                tx='technicalCommittee.vote'
-              />
-            </Button.Group>
-          </Modal.Actions>
+          <VoteActions
+            accountId={accountId}
+            onClick={_toggleVoting}
+            params={[hash, proposalId, voteValue]}
+            tx='technicalCommittee.vote'
+          />
         </Modal>
       )}
-      <div className='ui--Row-buttons'>
-        <Button
-          icon='check'
-          isPrimary
-          label={t('Vote')}
-          onClick={_toggleVoting}
-        />
-      </div>
+      <Button
+        icon='check'
+        isPrimary
+        label={t('Vote')}
+        onClick={_toggleVoting}
+      />
     </>
   );
 }

packages/app-toolbox/src/Unlock.tsx

@@ -45,7 +45,6 @@ class Unlock extends TxComponent<Props, State> {
     return (
       <Modal
         className='toolbox--Unlock'
-        dimmer='inverted'
         open
       >
         <Modal.Header>

packages/app-treasury/src/Overview/Proposal.tsx

@@ -2,45 +2,28 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { TreasuryProposal } from '@polkadot/types/interfaces';
+import { DerivedTreasuryProposal } from '@polkadot/api-derive/types';
 import { I18nProps } from '@polkadot/react-components/types';
 
-import BN from 'bn.js';
-import React, { useEffect } from 'react';
-import { Option } from '@polkadot/types';
+import React from 'react';
 import { AddressMini, AddressSmall } from '@polkadot/react-components';
-import { useApi, useCall } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
 import translate from '../translate';
+import Voting from './Voting';
 
 interface Props extends I18nProps {
   isApproved?: boolean;
-  proposalId: BN;
-  onPopulate: () => void;
+  proposal: DerivedTreasuryProposal;
   onRespond: () => void;
 }
 
-function ProposalDisplay ({ className, onPopulate, proposalId, t }: Props): React.ReactElement<Props> | null {
-  const { api } = useApi();
-  const proposal = useCall<TreasuryProposal | null>(api.query.treasury.proposals, [proposalId], {
-    transform: (value: Option<TreasuryProposal>): TreasuryProposal | null =>
-      value.unwrapOr(null)
-  });
-
-  useEffect((): void => {
-    proposal && onPopulate();
-  }, [proposal]);
-
-  if (!proposal) {
-    return null;
-  }
-
+function ProposalDisplay ({ className, proposal: { council, id, proposal }, t }: Props): React.ReactElement<Props> | null {
   return (
     <tr className={className}>
       <td className='number top'>
-        <h1>{formatNumber(proposalId)}</h1>
+        <h1>{formatNumber(id)}</h1>
       </td>
       <td>
         <AddressSmall value={proposal.proposer} />
@@ -63,6 +46,9 @@ function ProposalDisplay ({ className, onPopulate, proposalId, t }: Props): Reac
           value={proposal.value}
         />
       </td>
+      <td className='top number together'>
+        <Voting proposals={council} />
+      </td>
     </tr>
   );
 }

packages/app-treasury/src/Overview/Proposals.tsx

@@ -3,10 +3,10 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { DerivedTreasuryProposal } from '@polkadot/api-derive/types';
 import { I18nProps } from '@polkadot/react-components/types';
 
-import BN from 'bn.js';
-import React, { useState } from 'react';
+import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { Table } from '@polkadot/react-components';
 
@@ -14,36 +14,30 @@ import Proposal from './Proposal';
 import translate from '../translate';
 
 interface Props extends I18nProps {
-  ids?: BN[];
+  proposals?: DerivedTreasuryProposal[];
   isApprovals?: boolean;
 }
 
-function ProposalsBase ({ className, ids, isApprovals, t }: Props): React.ReactElement<Props> {
+function ProposalsBase ({ className, isApprovals, proposals, t }: Props): React.ReactElement<Props> {
   const history = useHistory();
-  const [isEmpty, setIsEmpty] = useState(true);
-
   const _onRespond = (): void => {
     history.push('/council/motions');
   };
-  const _onPopulateProposal = (): void => {
-    isEmpty && setIsEmpty(false);
-  };
 
   return (
     <div className={className}>
       <h1>{isApprovals ? t('Approved') : t('Proposals')}</h1>
-      {isEmpty && (
+      {!(proposals?.length) && (
         isApprovals ? t('No approved proposals') : t('No pending proposals')
       )}
       <Table>
         <Table.Body>
-          {ids?.map((proposalId): React.ReactNode => (
+          {proposals?.map((proposal): React.ReactNode => (
             <Proposal
               isApproved={isApprovals}
-              onPopulate={_onPopulateProposal}
               onRespond={_onRespond}
-              proposalId={proposalId}
-              key={proposalId.toString()}
+              proposal={proposal}
+              key={proposal.id.toString()}
             />
           ))}
         </Table.Body>

packages/app-treasury/src/Overview/Propose.tsx

@@ -1,106 +1,94 @@
-// Copyright 2017-2019 @polkadot/ui-staking authors & contributors
+// Copyright 2017-2019 @polkadot/app-treasury 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 BN from 'bn.js';
-import React from 'react';
+import { I18nProps as Props } from '@polkadot/react-components/types';
 
-import { Button, InputAddress, InputBalance } from '@polkadot/react-components';
-import TxModal, { TxModalState, TxModalProps as Props } from '@polkadot/react-components/TxModal';
+import BN from 'bn.js';
+import React, { useState } from 'react';
+import { Button, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
+import { useAccounts } from '@polkadot/react-hooks';
 
 import translate from '../translate';
 
-interface State extends TxModalState {
-  beneficiary?: string | null;
-  value: BN;
-}
-
-class Propose extends TxModal<Props, State> {
-  public state: State = {
-    ...this.defaultState,
-    value: new BN(0)
-  };
-
-  protected headerText = (): string => this.props.t('Submit a spend proposal');
-
-  protected txMethod = (): string => 'treasury.proposeSpend';
-
-  protected txParams = (): [BN, string | null | undefined] => {
-    const { beneficiary, value } = this.state;
-
-    return [value, beneficiary];
-  }
-
-  protected isDisabled = (): boolean => {
-    const { accountId, beneficiary, value } = this.state;
-    const hasValue = !!value && value.gtn(0);
-    const hasBeneficiary = !!beneficiary;
-
-    return !accountId || !hasValue || !hasBeneficiary;
-  }
-
-  protected renderTrigger = (): React.ReactNode => {
-    const { t } = this.props;
-
-    return (
-      <Button.Group>
-        <Button
-          isPrimary
-          label={t('Submit a spend proposal')}
-          icon='add'
-          onClick={this.showModal}
-        />
-      </Button.Group>
-    );
-  }
-
-  protected renderContent = (): React.ReactNode => {
-    const { t } = this.props;
-    const { value } = this.state;
-    const hasValue = !!value && value.gtn(0);
+function Propose ({ className, t }: Props): React.ReactElement<Props> | null {
+  const { hasAccounts } = useAccounts();
+  const [accountId, setAccountId] = useState<string | null>(null);
+  const [beneficiary, setBeneficiary] = useState<string | null>(null);
+  const [isProposeOpen, setIsProposeOpen] = useState(false);
+  const [value, setValue] = useState<BN | undefined>();
 
-    return (
-      <>
-        <InputAddress
-          className='medium'
-          label={t('beneficiary')}
-          help={t('The account to which the proposed balance will be transferred if approved')}
-          type='allPlus'
-          onChange={this.onChangeBeneficiary}
-        />
-        <InputBalance
-          className='medium'
-          isError={!hasValue}
-          help={t('The amount that will be allocated from the treasury pot')}
-          label={t('value')}
-          onChange={this.onChangeValue}
-          onEnter={this.sendTx}
-        />
-      </>
-    );
+  if (!hasAccounts) {
+    return null;
   }
 
-  private nextState (newState: Partial<State>): void {
-    this.setState(
-      (prevState: State): Pick<State, never> => {
-        const { accountId = prevState.accountId, beneficiary = prevState.beneficiary, value = prevState.value } = newState;
-
-        return {
-          accountId,
-          beneficiary,
-          value
-        };
-      }
-    );
-  }
-
-  private onChangeBeneficiary = (beneficiary: string | null): void => {
-    this.nextState({ beneficiary });
-  }
-
-  private onChangeValue = (value?: BN): void => {
-    this.nextState({ value });
-  }
+  const _togglePropose = (): void => setIsProposeOpen(!isProposeOpen);
+
+  const hasValue = value?.gtn(0);
+
+  return (
+    <>
+      {isProposeOpen && (
+        <Modal
+          className={className}
+          header={t('Submit treasury proposal')}
+          open
+          size='small'
+        >
+          <Modal.Content>
+            <InputAddress
+              help={t('Select the account you wish to submit the proposal from.')}
+              label={t('submit with account')}
+              onChange={setAccountId}
+              type='account'
+              withLabel
+            />
+            <InputAddress
+              className='medium'
+              label={t('beneficiary')}
+              help={t('The account to which the proposed balance will be transferred if approved')}
+              type='allPlus'
+              onChange={setBeneficiary}
+            />
+            <InputBalance
+              className='medium'
+              isError={!hasValue}
+              help={t('The amount that will be allocated from the treasury pot')}
+              label={t('value')}
+              onChange={setValue}
+            />
+          </Modal.Content>
+          <Modal.Actions>
+            <Button.Group>
+              <Button
+                icon='cancel'
+                isNegative
+                label={t('Cancel')}
+                onClick={_togglePropose}
+              />
+              <Button.Or />
+              <TxButton
+                accountId={accountId}
+                icon='add'
+                isDisabled={!accountId || !hasValue}
+                isPrimary
+                label={t('Submit proposal')}
+                onClick={_togglePropose}
+                params={[value, beneficiary]}
+                tx='treasury.proposeSpend'
+              />
+            </Button.Group>
+          </Modal.Actions>
+        </Modal>
+      )}
+      <Button
+        icon='check'
+        isPrimary
+        label={t('Submit proposal')}
+        onClick={_togglePropose}
+      />
+    </>
+  );
 }
 
 export default translate(Propose);

packages/app-treasury/src/Overview/Summary.tsx

@@ -22,6 +22,8 @@ interface Props extends I18nProps {
 function Summary ({ approvalCount, proposalCount, t }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const pot = useCall<BN>(api.query.treasury.pot, []);
+  const bestNumber = useCall<BN>(api.derive.chain.bestNumber as any, []);
+  const spendPeriod = api.consts.treasury.spendPeriod;
   const treasuryBalance = useCall<BN>(api.query.balances.freeBalance, [TREASURY_ACCOUNT]);
 
   const value = treasuryBalance?.gtn(0)
@@ -47,6 +49,17 @@ function Summary ({ approvalCount, proposalCount, t }: Props): React.ReactElemen
           </CardSummary>
         )}
       </section>
+      {bestNumber && spendPeriod?.gtn(0) && (
+        <section>
+          <CardSummary
+            label={t('spend period')}
+            progress={{
+              total: spendPeriod,
+              value: bestNumber.mod(spendPeriod)
+            }}
+          />
+        </section>
+      )}
     </SummaryBox>
   );
 }

packages/app-treasury/src/Overview/Voting.tsx

@@ -0,0 +1,110 @@
+// Copyright 2017-2019 @polkadot/app-treasury 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 { DerivedCouncilProposal } from '@polkadot/api-derive/types';
+import { ProposalIndex, Hash } from '@polkadot/types/interfaces';
+import { I18nProps } from '@polkadot/react-components/types';
+
+import React, { useEffect, useState } from 'react';
+import { Button, Dropdown, Input, Modal, VoteAccount, VoteActions, VoteToggle } from '@polkadot/react-components';
+import { useAccounts } from '@polkadot/react-hooks';
+import { isBoolean } from '@polkadot/util';
+
+import translate from '../translate';
+
+interface Props extends I18nProps {
+  proposals: DerivedCouncilProposal[];
+}
+
+interface Option {
+  text: React.ReactNode;
+  value: number;
+}
+
+function Voting ({ proposals, t }: Props): React.ReactElement<Props> | null {
+  const { hasAccounts } = useAccounts();
+  const [councilOpts, setCouncilOpts] = useState<Option[]>([]);
+  const [councilOptId, setCouncilOptId] = useState<number>(0);
+  const [accountId, setAccountId] = useState<string | null>(null);
+  const [{ councilId, councilHash }, setCouncilInfo] = useState<{ councilId: ProposalIndex | null; councilHash: Hash | null }>({ councilId: null, councilHash: null });
+  const [isVotingOpen, setIsVotingOpen] = useState(false);
+  const [voteValue, setVoteValue] = useState(true);
+
+  useEffect((): void => {
+    const available = proposals
+      .map(({ proposal: { methodName, sectionName }, votes }): Option => ({
+        text: `Council #${votes?.index.toNumber()}: ${sectionName}.${methodName} `,
+        value: votes ? votes?.index.toNumber() : -1
+      }))
+      .filter(({ value }): boolean => value !== -1);
+
+    setCouncilOptId(available.length ? available[0].value : 0);
+    setCouncilOpts(available);
+  }, [proposals]);
+
+  if (!hasAccounts || !councilOpts.length) {
+    return null;
+  }
+
+  const _toggleVoting = (): void => setIsVotingOpen(!isVotingOpen);
+  const _onChangeVote = (vote?: boolean): void => setVoteValue(isBoolean(vote) ? vote : true);
+  const _onChangeProposal = (optionId: number): void => {
+    const councilProp = proposals.find(({ votes }): boolean => !!(votes?.index.eq(optionId)));
+
+    if (councilProp && councilProp.votes) {
+      setCouncilInfo({ councilId: councilProp.votes.index, councilHash: councilProp.hash });
+      setCouncilOptId(councilOptId);
+    } else {
+      setCouncilInfo({ councilId: null, councilHash: null });
+    }
+  };
+
+  return (
+    <>
+      {isVotingOpen && (
+        <Modal
+          open
+          size='small'
+        >
+          <Modal.Header>{t('Vote on proposal')}</Modal.Header>
+          <Modal.Content>
+            <VoteAccount onChange={setAccountId} />
+            <Dropdown
+              help={t('The council proposal to make the vote on')}
+              label={t('council proposal')}
+              onChange={_onChangeProposal}
+              options={councilOpts}
+              value={councilOptId}
+            />
+            <Input
+              help={t('The hash for the proposal this vote applies to')}
+              isDisabled
+              label={t('proposal hash')}
+              value={councilHash}
+            />
+            <VoteToggle
+              onChange={_onChangeVote}
+              value={voteValue}
+            />
+          </Modal.Content>
+          <VoteActions
+            accountId={accountId}
+            isDisabled={!councilHash}
+            onClick={_toggleVoting}
+            params={[councilHash, councilId, voteValue]}
+            tx='council.vote'
+          />
+        </Modal>
+      )}
+      <Button
+        icon='check'
+        isPrimary
+        label={t('Vote')}
+        onClick={_toggleVoting}
+      />
+    </>
+  );
+}
+
+export default translate(Voting);

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

@@ -2,10 +2,11 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { DerivedTreasuryProposals } from '@polkadot/api-derive/types';
 import { AppProps, BareProps, I18nProps } from '@polkadot/react-components/types';
 
-import BN from 'bn.js';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
+import { Button } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 
 import Summary from './Summary';
@@ -16,33 +17,19 @@ interface Props extends AppProps, BareProps, I18nProps {}
 
 export default function Overview ({ className }: Props): React.ReactElement<Props> {
   const { api } = useApi();
-  const approvalIds = useCall<BN[]>(api.query.treasury.approvals, []);
-  const proposalCount = useCall<BN>(api.query.treasury.proposalCount, []);
-  const [proposalIds, setProposalIds] = useState<BN[]>([]);
-
-  useEffect((): void => {
-    if (approvalIds && proposalCount) {
-      const proposalIds: BN[] = [];
-
-      for (let i = 0; i < proposalCount.toNumber(); i++) {
-        if (!approvalIds.find((index): boolean => index.eqn(i))) {
-          proposalIds.push(new BN(i));
-        }
-      }
-
-      setProposalIds(proposalIds);
-    }
-  }, [approvalIds, proposalCount]);
+  const info = useCall<DerivedTreasuryProposals>(api.derive.treasury.proposals, []);
 
   return (
     <div className={className}>
       <Summary
-        approvalCount={approvalIds?.length}
-        proposalCount={proposalIds?.length}
+        approvalCount={info?.proposals.length}
+        proposalCount={info?.approvals.length}
       />
-      <Propose />
-      <Proposals ids={proposalIds} />
-      <Proposals ids={approvalIds} isApprovals />
+      <Button.Group>
+        <Propose />
+      </Button.Group>
+      <Proposals proposals={info?.proposals} />
+      <Proposals proposals={info?.approvals} isApprovals />
     </div>
   );
 }

packages/app-treasury/src/Settings.tsx

@@ -1,212 +0,0 @@
-// Copyright 2017-2019 @polkadot/ui-staking 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, BalanceOf, Permill } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
-import { ApiProps } from '@polkadot/react-api/types';
-
-import BN from 'bn.js';
-import React from 'react';
-import { RouteComponentProps } from 'react-router';
-
-import { Button, InputAddress, InputBalance, InputNumber, TxButton, TxComponent } from '@polkadot/react-components';
-import { withCalls, withMulti } from '@polkadot/react-api';
-
-import translate from './translate';
-
-interface Props extends I18nProps, ApiProps, RouteComponentProps {
-  basePath: string;
-  proposalBond: Permill;
-  proposalBondMinimum: BalanceOf;
-  spendPeriod: BlockNumber;
-  burn: Permill;
-  pot: BalanceOf;
-}
-
-interface State {
-  accountId?: string | null;
-  proposalBond?: BN;
-  proposalBondMinimum?: BN;
-  spendPeriod?: BN;
-  burn?: BN;
-  pot?: BN;
-}
-
-class Settings extends TxComponent<Props, State> {
-  public state: State = {};
-
-  public static getDerivedStateFromProps ({ proposalBond, proposalBondMinimum, spendPeriod, burn, pot }: Props, state: State): State {
-    const newState: State = {};
-
-    if (proposalBond && !state.proposalBond) {
-      newState.proposalBond = new BN(proposalBond);
-    }
-
-    if (proposalBondMinimum && !state.proposalBondMinimum) {
-      newState.proposalBondMinimum = new BN(proposalBondMinimum);
-    }
-
-    if (spendPeriod && !state.spendPeriod) {
-      newState.spendPeriod = new BN(spendPeriod);
-    }
-
-    if (burn && !state.burn) {
-      newState.burn = new BN(burn);
-    }
-
-    if (pot && !state.pot) {
-      newState.pot = new BN(pot);
-    }
-
-    return newState;
-  }
-
-  public render (): React.ReactNode {
-    const { t } = this.props;
-    const { accountId, proposalBond, proposalBondMinimum, spendPeriod, burn, pot } = this.state;
-
-    const hasConfig = !!proposalBond && !!proposalBondMinimum && !!spendPeriod && !!burn;
-    const hasPot = !!pot;
-
-    return (
-      <>
-        <section>
-          <InputAddress
-            className='medium'
-            label={t('using my account')}
-            help={t('The account used to change your settings')}
-            type='account'
-            onChange={this.onChangeAccount}
-          />
-        </section>
-        {hasConfig && proposalBond && proposalBondMinimum && (
-          <section>
-            <h1>
-              {t('configuration')}
-            </h1>
-            <InputBalance
-              className='medium'
-              value={proposalBond}
-              help={t('Proposal bond')}
-              label={t('proposal bond')}
-              onChange={this.onChangeProposalBond}
-            />
-            <InputBalance
-              className='medium'
-              value={proposalBondMinimum}
-              help={t('Proposal bond minimum')}
-              label={t('proposal bond minimum')}
-              onChange={this.onChangeProposalBondMinimum}
-            />
-            <InputNumber
-              className='medium'
-              help={t('Spend period')}
-              label={t('spend period')}
-              onChange={this.onChangeSpendPeriod}
-              value={spendPeriod}
-            />
-            <InputNumber
-              className='medium'
-              help={t('Burn percentage')}
-              label={t('burn percentage')}
-              onChange={this.onChangeBurn}
-              value={burn}
-            />
-            <Button.Group>
-              <TxButton
-                accountId={accountId}
-                label={t('Submit')}
-                icon='sign-in'
-                tx='treasury.configure'
-                params={[
-                  proposalBond.toString(),
-                  proposalBondMinimum.toString(),
-                  spendPeriod,
-                  burn
-                ]}
-              />
-            </Button.Group>
-          </section>
-        )}
-        {hasPot && (
-          <section>
-            <h1>
-              {t('pot')}
-            </h1>
-            <InputBalance
-              className='medium'
-              defaultValue={pot}
-              help={t('Pot')}
-              label={t('pot size')}
-              onChange={this.onChangePot}
-            />
-            <Button.Group>
-              <TxButton
-                accountId={accountId}
-                label={t('Submit')}
-                icon='sign-in'
-                tx='treasury.setPot'
-                params={[pot]}
-              />
-            </Button.Group>
-          </section>
-        )}
-      </>
-    );
-  }
-
-  private nextState (newState: State): void {
-    this.setState(
-      (prevState: State): State => {
-        const { accountId = prevState.accountId, proposalBond = prevState.proposalBond, proposalBondMinimum = prevState.proposalBondMinimum, spendPeriod = prevState.spendPeriod, burn = prevState.burn, pot = prevState.pot } = newState;
-        // const isValid = !!beneficiary && !!value && value.gt(new BN(0)) && !!accountId && accountId.length > 0;
-
-        return {
-          accountId,
-          proposalBond,
-          proposalBondMinimum,
-          spendPeriod,
-          burn,
-          pot
-        };
-      }
-    );
-  }
-
-  private onChangeAccount = (accountId: string | null): void => {
-    this.nextState({ accountId });
-  }
-
-  private onChangeProposalBond = (proposalBond?: BN): void => {
-    this.nextState({ proposalBond });
-  }
-
-  private onChangeProposalBondMinimum = (proposalBondMinimum?: BN): void => {
-    this.nextState({ proposalBondMinimum });
-  }
-
-  private onChangeSpendPeriod = (spendPeriod?: BN): void => {
-    this.nextState({ spendPeriod });
-  }
-
-  private onChangeBurn = (burn?: BN): void => {
-    this.nextState({ burn });
-  }
-
-  private onChangePot = (pot?: BN): void => {
-    this.nextState({ pot });
-  }
-}
-
-export default withMulti(
-  Settings,
-  translate,
-  withCalls<Props>(
-    ['consts.treasury.proposalBond', { fallbacks: ['query.treasury.proposalBond'], propName: 'proposalBond' }],
-    ['consts.treasury.proposalBondMinimum', { fallbacks: ['query.treasury.proposalBondMinimum'], propName: 'proposalBondMinimum' }],
-    ['consts.treasury.spendPeriod', { fallbacks: ['query.treasury.spendPeriod'], propName: 'spendPeriod' }],
-    ['consts.treasury.burn', { fallbacks: ['query.treasury.burn'], propName: 'burn' }],
-    ['query.treasury.pot', { propName: 'pot' }]
-  )
-);

packages/app-treasury/src/index.tsx

@@ -10,10 +10,11 @@ import { HelpOverlay, Tabs } from '@polkadot/react-components';
 
 import basicMd from './md/basic.md';
 import Overview from './Overview';
-// import Settings from './Settings';
 
 import translate from './translate';
 
+export { default as useCounter } from './useCounter';
+
 interface Props extends AppProps, BareProps, I18nProps {}
 
 function App ({ basePath, t }: Props): React.ReactElement<Props> {
@@ -29,15 +30,10 @@ function App ({ basePath, t }: Props): React.ReactElement<Props> {
               name: 'overview',
               text: t('Treasury overview')
             }
-            // {
-            //   name: 'settings',
-            //   text: t('Edit settings')
-            // }
           ]}
         />
       </header>
       <Switch>
-        {/* <Route path={`${basePath}/settings`} component={Settings} /> */}
         <Route component={Overview} />
       </Switch>
     </main>

packages/app-treasury/src/useCounter.ts

@@ -0,0 +1,20 @@
+// 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 { DerivedTreasuryProposals } from '@polkadot/api-derive/types';
+
+import { useState, useEffect } from 'react';
+import { useApi, useCall } from '@polkadot/react-hooks';
+
+export default function useCounter (): number {
+  const { api, isApiReady } = useApi();
+  const proposals = useCall<DerivedTreasuryProposals>(isApiReady ? api.derive.treasury.proposals : undefined, []);
+  const [counter, setCounter] = useState(0);
+
+  useEffect((): void => {
+    setCounter(proposals?.proposals.length || 0);
+  }, [proposals]);
+
+  return counter;
+}

packages/apps-routing/src/treasury.ts

@@ -4,11 +4,12 @@
 
 import { Routes } from './types';
 
-import Treasury from '@polkadot/app-treasury';
+import Treasury, { useCounter } from '@polkadot/app-treasury';
 
 export default ([
   {
     Component: Treasury,
+    useCounter,
     display: {
       needsAccounts: true,
       needsApi: [

packages/apps/src/modals/Network.tsx

@@ -18,7 +18,6 @@ function NetworkModal ({ className, onClose, t }: Props): React.ReactElement<Pro
   return (
     <Modal
       className={className}
-      dimmer='inverted'
       open
     >
       <Modal.Header>{t('Select Network')}</Modal.Header>

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

packages/react-components/src/Forget.tsx

@@ -98,7 +98,6 @@ function Forget (props: Props): React.ReactElement<Props> {
   return (
     <Modal
       className='app--accounts-Modal'
-      dimmer='inverted'
       onClose={onClose}
       open
     >

packages/react-components/src/Modal.tsx

@@ -11,15 +11,24 @@ import { classes } from './util';
 
 interface Props extends BareProps {
   children: React.ReactNode;
+  header?: React.ReactNode;
   [index: string]: any;
 }
 
 function Modal (props: Props): React.ReactElement<Props> {
+  const { className, children, header } = props;
+
   return (
     <SUIModal
       {...props}
-      className={classes('theme--default', 'ui--Modal', props.className)}
-    />
+      className={classes('theme--default', 'ui--Modal', className)}
+      dimmer='inverted'
+    >
+      {header && (
+        <SUIModal.Header>{header}</SUIModal.Header>
+      )}
+      {children}
+    </SUIModal>
   );
 }
 

packages/react-components/src/TxModal.tsx

@@ -37,7 +37,6 @@ export default class TxModal<P extends TxModalProps, S extends TxModalState> ext
         {this.renderTrigger && this.renderTrigger()}
         <Modal
           className='ui--Modal'
-          dimmer='inverted'
           onClose={this.hideModal}
           open={isOpen}
         >

packages/react-components/src/VoteAccount.tsx

@@ -0,0 +1,29 @@
+// Copyright 2017-2019 @polkadot/react-components 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 './types';
+
+import React from 'react';
+
+import InputAddress from './InputAddress';
+import translate from './translate';
+
+interface Props extends I18nProps {
+  onChange: (value: string | null) => void;
+}
+
+function VoteAccount ({ className, onChange, t }: Props): React.ReactElement<Props> {
+  return (
+    <InputAddress
+      className={className}
+      help={t('Select the account you wish to vote with. You can approve "aye" or deny "nay" the proposal.')}
+      label={t('vote with account')}
+      onChange={onChange}
+      type='account'
+      withLabel
+    />
+  );
+}
+
+export default translate(VoteAccount);

packages/react-components/src/VoteActions.tsx

@@ -0,0 +1,48 @@
+// Copyright 2017-2019 @polkadot/react-components 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 './types';
+
+import React from 'react';
+
+import Button from './Button';
+import Modal from './Modal';
+import TxButton from './TxButton';
+import translate from './translate';
+
+interface Props extends I18nProps {
+  accountId: string | null;
+  isDisabled?: boolean;
+  onClick: () => void;
+  params: any[];
+  tx: string;
+}
+
+function VoteActions ({ accountId, className, isDisabled, onClick, params, t, tx }: Props): React.ReactElement<Props> {
+  return (
+    <Modal.Actions>
+      <Button.Group className={className}>
+        <Button
+          icon='cancel'
+          isNegative
+          label={t('Cancel')}
+          onClick={onClick}
+        />
+        <Button.Or />
+        <TxButton
+          accountId={accountId}
+          icon='check'
+          isDisabled={!accountId || isDisabled}
+          isPrimary
+          label={t('Vote')}
+          onClick={onClick}
+          params={params}
+          tx={tx}
+        />
+      </Button.Group>
+    </Modal.Actions>
+  );
+}
+
+export default translate(VoteActions);

packages/react-components/src/VoteToggle.tsx

@@ -0,0 +1,33 @@
+// Copyright 2017-2019 @polkadot/react-components 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 './types';
+
+import React from 'react';
+
+import Dropdown from './Dropdown';
+import translate from './translate';
+
+interface Props extends I18nProps {
+  onChange: (value: boolean) => void;
+  value: boolean;
+}
+
+function VoteToggle ({ className, onChange, t, value }: Props): React.ReactElement<Props> {
+  return (
+    <Dropdown
+      className={className}
+      help={t('Select your vote preferences for this proposal, either to approve or disapprove')}
+      label={t('record my vote as')}
+      options={[
+        { text: t('Aye, I approve'), value: true },
+        { text: t('Nay, I do not approve'), value: false }
+      ]}
+      onChange={onChange}
+      value={value}
+    />
+  );
+}
+
+export default translate(VoteToggle);

packages/react-components/src/Voting.tsx

@@ -13,9 +13,9 @@ import { withMulti, withObservable } from '@polkadot/react-api';
 
 import translate from './translate';
 import Button from './Button';
-import Dropdown from './Dropdown';
 import ProposedAction from './ProposedAction';
 import TxModal, { TxModalProps, TxModalState } from './TxModal';
+import VoteToggle from './VoteToggle';
 import { isTreasuryProposalVote } from './util';
 
 interface Props extends I18nProps, TxModalProps {
@@ -28,7 +28,6 @@ interface Props extends I18nProps, TxModalProps {
 }
 
 interface State extends TxModalState {
-  voteOptions: { text: React.ReactNode; value: boolean }[];
   voteValue: boolean;
 }
 
@@ -63,14 +62,8 @@ class Voting extends TxModal<Props, State> {
   constructor (props: Props) {
     super(props);
 
-    const { t } = props;
-
     this.state = {
       ...this.defaultState,
-      voteOptions: [
-        { text: t('Aye, I approve'), value: true },
-        { text: t('Nay, I do not approve'), value: false }
-      ],
       voteValue: true
     };
   }
@@ -93,14 +86,10 @@ class Voting extends TxModal<Props, State> {
   }
 
   protected renderContent = (): React.ReactNode => {
-    const { t } = this.props;
-    const { voteOptions, voteValue } = this.state;
+    const { voteValue } = this.state;
 
     return (
-      <Dropdown
-        help={t('Select your vote preferences for this proposal, either to approve or disapprove')}
-        label={t('record my vote as')}
-        options={voteOptions}
+      <VoteToggle
         onChange={this.onChangeVote}
         value={voteValue}
       />

packages/react-components/src/index.tsx

@@ -79,6 +79,9 @@ export { default as TxButton } from './TxButton';
 export { default as TxComponent } from './TxComponent';
 export { default as TxModal } from './TxModal';
 export { default as TxModalNew } from './TxModalNew';
+export { default as VoteAccount } from './VoteAccount';
+export { default as VoteActions } from './VoteActions';
+export { default as VoteToggle } from './VoteToggle';
 export { default as Voting } from './Voting';
 
 export { default as media } from './media';

packages/react-params/src/Param/Data.tsx → packages/react-params/src/Param/Raw.tsx

@@ -20,7 +20,7 @@ function onChange ({ onChange }: Props): (_: string) => void {
   };
 }
 
-export default function Data (props: Props): React.ReactElement<Props> {
+export default function Raw (props: Props): React.ReactElement<Props> {
   const { className, defaultValue: { value }, isDisabled, isError, label, onEnter, onEscape, style, withLabel } = props;
   const defaultValue = value
     ? (value.toHex ? value.toHex() : value)

packages/react-params/src/Param/findComponent.ts

@@ -15,7 +15,6 @@ import Balance from './Balance';
 import Bool from './Bool';
 import Bytes from './Bytes';
 import Code from './Code';
-import Data from './Data';
 import Enum from './Enum';
 import Hash256 from './Hash256';
 import Hash512 from './Hash512';
@@ -25,6 +24,7 @@ import KeyValue from './KeyValue';
 import KeyValueArray from './KeyValueArray';
 import Null from './Null';
 import Option from './Option';
+import Raw from './Raw';
 import Struct from './Struct';
 import Text from './Text';
 import Tuple from './Tuple';
@@ -45,7 +45,7 @@ const components: ComponentMap = ([
   { c: Bool, t: ['bool'] },
   { c: Bytes, t: ['Bytes'] },
   { c: Code, t: ['Code'] },
-  { c: Data, t: ['Data', 'Keys'] },
+  { c: Raw, t: ['Raw', 'Keys'] },
   { c: Enum, t: ['Enum'] },
   { c: Hash256, t: ['BlockHash', 'CodeHash', 'Hash', 'H256', 'SeedOf'] },
   { c: Hash512, t: ['H512', 'Signature'] },

packages/react-params/src/initValue.ts

@@ -7,7 +7,7 @@ import { RawParamValue } from './types';
 
 import BN from 'bn.js';
 import { registry } from '@polkadot/react-api';
-import { Bytes, U8a, createType, getTypeDef } from '@polkadot/types';
+import { Bytes, Raw, createType, getTypeDef } from '@polkadot/types';
 
 export default function getInitValue (def: TypeDef): RawParamValue | RawParamValue[] {
   if (def.info === TypeDefInfo.Vec) {
@@ -88,7 +88,7 @@ export default function getInitValue (def: TypeDef): RawParamValue | RawParamVal
     case 'H512':
       return createType(registry, 'H512');
 
-    case 'Data':
+    case 'Raw':
     case 'Keys':
       return '';
 
@@ -109,7 +109,7 @@ export default function getInitValue (def: TypeDef): RawParamValue | RawParamVal
       return undefined;
 
     case 'Extrinsic':
-      return new U8a(registry);
+      return new Raw(registry);
 
     case 'Null':
       return null;

packages/react-params/src/valueToText.tsx

@@ -9,7 +9,7 @@ import './Params.css';
 import React from 'react';
 import { classes } from '@polkadot/react-components/util';
 import { isNull, isUndefined, u8aToHex } from '@polkadot/util';
-import { Option, U8a } from '@polkadot/types';
+import { Option, Raw } from '@polkadot/types';
 
 interface DivProps {
   className?: string;
@@ -36,7 +36,7 @@ function valueToText (type: string, value: any, swallowError = true, contentShor
   // FIXME dont' even ask, nested ?: ... really?
   return div(
     {},
-    ['Bytes', 'Data', 'Option<Keys>', 'Keys'].includes(type)
+    ['Bytes', 'Raw', 'Option<Keys>', 'Keys'].includes(type)
       ? u8aToHex(value.toU8a(true), contentShorten ? 512 : -1)
       : (
         // HACK Handle Keys as hex-only (this should go away once the node value is
@@ -48,7 +48,7 @@ function valueToText (type: string, value: any, swallowError = true, contentShor
             ])
           )
           : (
-            value instanceof U8a
+            value instanceof Raw
               ? (
                 value.isEmpty
                   ? '<empty>'

packages/react-signer/src/Modal.tsx

@@ -162,7 +162,6 @@ class Signer extends React.PureComponent<Props, State> {
     return (
       <Modal
         className='ui--signer-Signer'
-        dimmer='inverted'
         open
       >
         {this.renderContent()}

yarn.lock

@@ -2044,35 +2044,35 @@
   dependencies:
     "@types/node" ">= 8"
 
-"@polkadot/api-contract@^0.99.0-beta.7":
-  version "0.99.0-beta.7"
-  resolved "https://registry.yarnpkg.com/@polkadot/api-contract/-/api-contract-0.99.0-beta.7.tgz#86c46d87af1094312dc92d3b3aa26ace69196fcf"
-  integrity sha512-88Etd3F7erP0rLoO3vnUYiDO3uZTeCo4pswGhnDpRzkmRMp/LiyvHzmIJjFsY6nOU4nFVVQ1gSA5xvvzfxEczg==
+"@polkadot/api-contract@^0.99.0-beta.9":
+  version "0.99.0-beta.9"
+  resolved "https://registry.yarnpkg.com/@polkadot/api-contract/-/api-contract-0.99.0-beta.9.tgz#61eec2a1653bd233721c01621485301737d80d93"
+  integrity sha512-7O8TSgFG2x7Zq+ajeYKzb1AcMfYvHA+pTWyI04UTu2PdGVNoHGHfELAAXWD7mJprqrfDGeGhTSHDwpaYq+DFjQ==
   dependencies:
     "@babel/runtime" "^7.7.5"
-    "@polkadot/types" "^0.99.0-beta.7"
+    "@polkadot/types" "^0.99.0-beta.9"
 
-"@polkadot/api-derive@^0.99.0-beta.7":
-  version "0.99.0-beta.7"
-  resolved "https://registry.yarnpkg.com/@polkadot/api-derive/-/api-derive-0.99.0-beta.7.tgz#90fb3172f665f4e9253d9f209cc5acbb03341b6a"
-  integrity sha512-RdRGOzy3VUY1Bt0XeGSH4l4MgXTlokgtBANlL4BkCYKqpk9VTzOIgTr9km8rveDU+S4EoqT7nL/YuQikm/buGA==
+"@polkadot/api-derive@^0.99.0-beta.9":
+  version "0.99.0-beta.9"
+  resolved "https://registry.yarnpkg.com/@polkadot/api-derive/-/api-derive-0.99.0-beta.9.tgz#43c762be8385827a56659aafdb6dacca51c65ec4"
+  integrity sha512-sBU2wK/24Yat9p1WMWdHj/uYn1NONir8dBZC5Nv2As3hASjncxJ3jYJn2Kb+v7PW+MczXjsZ9E4Q1UML+WrfRw==
   dependencies:
     "@babel/runtime" "^7.7.5"
-    "@polkadot/api" "^0.99.0-beta.7"
-    "@polkadot/types" "^0.99.0-beta.7"
+    "@polkadot/api" "^0.99.0-beta.9"
+    "@polkadot/types" "^0.99.0-beta.9"
 
-"@polkadot/api@^0.99.0-beta.7":
-  version "0.99.0-beta.7"
-  resolved "https://registry.yarnpkg.com/@polkadot/api/-/api-0.99.0-beta.7.tgz#2ea03b2e27d28cbb6af5cca45c226b0db63c685b"
-  integrity sha512-y7lDN4YqAxTwmBlynBWQKBJJVaUPc9cWZyjfLMYY3cp4KcvAxtuAFKmxON4pdGfNdo4bAPvTJZGoEy9oWOJ6Kw==
+"@polkadot/api@^0.99.0-beta.9":
+  version "0.99.0-beta.9"
+  resolved "https://registry.yarnpkg.com/@polkadot/api/-/api-0.99.0-beta.9.tgz#1179a8cb6a4f6f558061915a125939938c670619"
+  integrity sha512-PlvgGmEl7lp949Tu8otTAmSWa5K+gXvK/f9/U09LaibY69ntoPvwKWNmc9PJjw9mGjpcfTgPbB1rJ0UaoTv6Zw==
   dependencies:
     "@babel/runtime" "^7.7.5"
-    "@polkadot/api-derive" "^0.99.0-beta.7"
+    "@polkadot/api-derive" "^0.99.0-beta.9"
     "@polkadot/keyring" "^1.7.1"
-    "@polkadot/metadata" "^0.99.0-beta.7"
-    "@polkadot/rpc-core" "^0.99.0-beta.7"
-    "@polkadot/rpc-provider" "^0.99.0-beta.7"
-    "@polkadot/types" "^0.99.0-beta.7"
+    "@polkadot/metadata" "^0.99.0-beta.9"
+    "@polkadot/rpc-core" "^0.99.0-beta.9"
+    "@polkadot/rpc-provider" "^0.99.0-beta.9"
+    "@polkadot/types" "^0.99.0-beta.9"
     "@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.7":
-  version "0.99.0-beta.7"
-  resolved "https://registry.yarnpkg.com/@polkadot/jsonrpc/-/jsonrpc-0.99.0-beta.7.tgz#31599ae85fa0288bed669c648e4d034c73344be2"
-  integrity sha512-yVPv9/o5AYPbKYSmjuSybCSclBKgc+yGjRHBBZpFXk8ZNLWXeXbpfBIHsW51MMCbrfF2wz/dg1KuZH10/jlJYw==
+"@polkadot/jsonrpc@^0.99.0-beta.9":
+  version "0.99.0-beta.9"
+  resolved "https://registry.yarnpkg.com/@polkadot/jsonrpc/-/jsonrpc-0.99.0-beta.9.tgz#4b4dcfb78ade6db25ef89514ea3e35db89843f53"
+  integrity sha512-GC0Y5qEFcZ3WaAulPTA9l1NagwkkLOBv3DQBCG4vIfUJ5GW/R1LYg5TRJZ94pyPbZQ1GFiYblIhdaDKXH1VVbQ==
   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.7":
-  version "0.99.0-beta.7"
-  resolved "https://registry.yarnpkg.com/@polkadot/metadata/-/metadata-0.99.0-beta.7.tgz#02e6c469b42b57aeebf404ddbe3f2b0aaabefb29"
-  integrity sha512-2ONCv+Qv/0yG61j3zsVgj9vibUbO6cEUp7XS37QOMvr2n3M4Mn4lrqIQkizkgh81aUQf4p9zL4kFMF3dYphc6Q==
+"@polkadot/metadata@^0.99.0-beta.9":
+  version "0.99.0-beta.9"
+  resolved "https://registry.yarnpkg.com/@polkadot/metadata/-/metadata-0.99.0-beta.9.tgz#2b1ac328c5957e222478520dbe55d1c184680cd3"
+  integrity sha512-+4eEmycT55adRrpVHp7bL9msQVpybRND3UMjOA+CBd/lr9WcngBM0Lvx7q0g0EpQy6FvtRPw8DTkI3d61kanqg==
   dependencies:
     "@babel/runtime" "^7.7.5"
-    "@polkadot/types" "^0.99.0-beta.7"
+    "@polkadot/types" "^0.99.0-beta.9"
     "@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.7":
-  version "0.99.0-beta.7"
-  resolved "https://registry.yarnpkg.com/@polkadot/rpc-core/-/rpc-core-0.99.0-beta.7.tgz#245e40be36b2b98ebb7a3052e0613741559a668f"
-  integrity sha512-l8o9NLuSSMlbg0mSl9kQ4ouRwOdgk4XDs77srkAk6vApmVT1B2UBhPitOHzrbsvS3INCIpzH086la4U7daiPQw==
+"@polkadot/rpc-core@^0.99.0-beta.9":
+  version "0.99.0-beta.9"
+  resolved "https://registry.yarnpkg.com/@polkadot/rpc-core/-/rpc-core-0.99.0-beta.9.tgz#52812ff952595bf2ddbef5158530c65889de5041"
+  integrity sha512-NETVGTmpA/VC6MxBtGu85ctInGbcMnBA1ZhT1gveLgUMAiIBve/qj2bRGwC9Orig1Yy/C9/O5e/VkDsBAanmLg==
   dependencies:
     "@babel/runtime" "^7.7.5"
-    "@polkadot/jsonrpc" "^0.99.0-beta.7"
-    "@polkadot/rpc-provider" "^0.99.0-beta.7"
-    "@polkadot/types" "^0.99.0-beta.7"
+    "@polkadot/jsonrpc" "^0.99.0-beta.9"
+    "@polkadot/rpc-provider" "^0.99.0-beta.9"
+    "@polkadot/types" "^0.99.0-beta.9"
     "@polkadot/util" "^1.7.1"
     rxjs "^6.5.3"
 
-"@polkadot/rpc-provider@^0.99.0-beta.7":
-  version "0.99.0-beta.7"
-  resolved "https://registry.yarnpkg.com/@polkadot/rpc-provider/-/rpc-provider-0.99.0-beta.7.tgz#c4f533dfeaa782672ffd2425797c86ec72945de2"
-  integrity sha512-266vHWCvVLs3zIHGAqlGp026CMGrHD/FKfHeLDpMPm9Qx/MyGWlm5f89+B6hlrD/RzNy/Hx2r46BGN+zgtp3yw==
+"@polkadot/rpc-provider@^0.99.0-beta.9":
+  version "0.99.0-beta.9"
+  resolved "https://registry.yarnpkg.com/@polkadot/rpc-provider/-/rpc-provider-0.99.0-beta.9.tgz#c21946d20db3fa55e7409b90eafe04fb986b4db1"
+  integrity sha512-lA7z8rupzkn32A85VrHGvklWPZn2HbYIbQyMVQNvM/TNvZ218ykoTLT+Il+qdLSg2u9cb0R4aqMmcmS6xpv70w==
   dependencies:
     "@babel/runtime" "^7.7.5"
-    "@polkadot/metadata" "^0.99.0-beta.7"
+    "@polkadot/metadata" "^0.99.0-beta.9"
     "@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.7":
-  version "0.99.0-beta.7"
-  resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-0.99.0-beta.7.tgz#fe8c22a39ba46b7dc384cf49342b14a7ac03cdbb"
-  integrity sha512-v70tU4jomd69eRo40nXPwlElVZbk3jWa3Nzn9HJ8C/hm7sowdOlznJ1+WErjYiQynmLJkXPRXCD8+XT2JJeGPg==
+"@polkadot/types@^0.99.0-beta.9":
+  version "0.99.0-beta.9"
+  resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-0.99.0-beta.9.tgz#890fae2448056ca977cd44eb38dcc425973a64b5"
+  integrity sha512-Biak9up5KFoazWixfYc7vkUFOYcP86vt7uSK76Hfysv6Dtq0R2Bz0mHvxOE+plxixUwcjumEJ0njDWE1NeHEyA==
   dependencies:
     "@babel/runtime" "^7.7.5"
-    "@polkadot/metadata" "^0.99.0-beta.7"
+    "@polkadot/metadata" "^0.99.0-beta.9"
     "@polkadot/util" "^1.7.1"
     "@polkadot/util-crypto" "^1.7.1"
     "@types/memoizee" "^0.4.3"