polkadot-js · jacogr · Dec 2, 2019 · Dec 2, 2019 · Dec 2, 2019 · Dec 2, 2019
diff --git a/packages/app-democracy/src/Overview/Proposal.tsx b/packages/app-democracy/src/Overview/Proposal.tsx
@@ -6,44 +6,63 @@ import { DeriveProposal } from '@polkadot/api-derive/types';
 import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
-import { ActionItem, InputAddress, Static } from '@polkadot/react-components';
+import styled from 'styled-components';
+import { AddressMini, AddressSmall } from '@polkadot/react-components';
 import { FormatBalance } from '@polkadot/react-query';
+import { formatNumber } from '@polkadot/util';
 
 import translate from '../translate';
+import ProposalCell from './ProposalCell';
 import Seconding from './Seconding';
 
 interface Props extends I18nProps {
   value: DeriveProposal;
 }
 
-function Proposal ({ className, t, value: { balance, index, proposal, seconds } }: Props): React.ReactElement<Props> {
+function Proposal ({ className, t, value: { balance, index, proposal, proposer, seconds } }: Props): React.ReactElement<Props> {
   return (
-    <ActionItem
-      className={className}
-      idNumber={index}
-      proposal={proposal}
-    >
-      <Seconding
-        depositors={seconds || []}
-        proposalId={index}
-      />
-      {balance && seconds && (
-        <div>
-          {seconds.map((address, count): React.ReactNode => (
-            <InputAddress
-              isDisabled
-              label={count === 0 ? t('proposer') : t('depositor {{count}}', { replace: { count } })}
+    <tr className={className}>
+      <td className='number toppad'>{formatNumber(index)}</td>
+      <td className='top'>
+        <AddressSmall value={proposer} />
+      </td>
+      <td className='number together top'>
+        <FormatBalance label={<label>{t('locked')}</label>} value={balance} />
+      </td>
+      <ProposalCell className='top' proposal={proposal} />
+      <td className='top'>
+        {seconds
+          .filter((_address, index): boolean => index !== 0)
+          .map((address, count): React.ReactNode => (
+            <AddressMini
+              className='identityIcon'
               key={`${count}:${address}`}
-              defaultValue={address}
+              label={count ? undefined : t('seconds')}
+              value={address}
+              withBalance={false}
             />
           ))}
-          <Static label={t('balance')}>
-            <FormatBalance value={balance} />
-          </Static>
-        </div>
-      )}
-    </ActionItem>
+      </td>
+      <td className='together number top'>
+        <Seconding
+          depositors={seconds || []}
+          proposalId={index}
+        />
+      </td>
+    </tr>
   );
 }
 
-export default translate(Proposal);
+export default translate(
+  styled(Proposal)`
+    .identityIcon {
+      &:first-child {
+        padding-top: 0;
+      }
+
+      &:last-child {
+        margin-bottom: 4px;
+      }
+    }
+  `
+);
diff --git a/packages/app-democracy/src/Overview/ProposalCell.tsx b/packages/app-democracy/src/Overview/ProposalCell.tsx
@@ -0,0 +1,39 @@
+// 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 { Proposal } from '@polkadot/types/interfaces';
+import { I18nProps } from '@polkadot/react-components/types';
+
+import React from 'react';
+import { registry } from '@polkadot/react-api';
+import { Call } from '@polkadot/react-components';
+
+import translate from '../translate';
+
+interface Props extends I18nProps {
+  proposal: Proposal;
+}
+
+function ProposalCell ({ className, proposal, t }: Props): React.ReactElement<Props> {
+  const { meta, method, section } = registry.findMetaCall(proposal.callIndex);
+
+  return (
+    <td className={`${className} all`}>
+      <div>{section}.{method}</div>
+      <details>
+        <summary>{
+          meta && meta.documentation
+            ? meta.documentation.join(' ')
+            : t('Details')
+        }</summary>
+        <Call
+          value={proposal}
+          withHash
+        />
+      </details>
+    </td>
+  );
+}
+
+export default translate(ProposalCell);
diff --git a/packages/app-democracy/src/Overview/Proposals.tsx b/packages/app-democracy/src/Overview/Proposals.tsx
@@ -6,6 +6,7 @@ import { DeriveProposal } from '@polkadot/api-derive/types';
 import { I18nProps as Props } from '@polkadot/react-components/types';
 
 import React from 'react';
+import { Table } from '@polkadot/react-components';
 import { useApi, trackStream } from '@polkadot/react-hooks';
 
 import ProposalDisplay from './Proposal';
@@ -18,15 +19,20 @@ function Proposals ({ className, t }: Props): React.ReactElement<Props> {
   return (
     <div className={`proposalSection ${className}`}>
       <h1>{t('proposals')}</h1>
-      {
-        proposals?.length
-          ? proposals.map((proposal): React.ReactNode => (
-            <ProposalDisplay
-              key={proposal.index.toString()}
-              value={proposal}
-            />
-          ))
-          : t('No active proposals')
+      {proposals?.length
+        ? (
+          <Table>
+            <Table.Body>
+              {proposals.map((proposal): React.ReactNode => (
+                <ProposalDisplay
+                  key={proposal.index.toString()}
+                  value={proposal}
+                />
+              ))}
+            </Table.Body>
+          </Table>
+        )
+        : t('No active proposals')
       }
     </div>
   );

diff --git a/packages/app-democracy/src/Overview/Referendum.tsx b/packages/app-democracy/src/Overview/Referendum.tsx
@@ -9,15 +9,13 @@ import { I18nProps } from '@polkadot/react-components/types';
 import BN from 'bn.js';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { ActionItem, Chart, Static, Voting } from '@polkadot/react-components';
-import { formatBalance, formatNumber } from '@polkadot/util';
-import VoteThreshold from '@polkadot/react-params/Param/VoteThreshold';
+import { formatNumber } from '@polkadot/util';
 import { withCalls, withMulti } from '@polkadot/react-api';
+import { FormatBalance } from '@polkadot/react-query';
 
 import translate from '../translate';
-
-const COLORS_AYE = ['#64bebe', '#5badad'];
-const COLORS_NAY = ['#d75ea1', '#e189ba'];
+import ProposalCell from './ProposalCell';
+import Voting from './Voting';
 
 interface Props extends I18nProps {
   idNumber: BN;
@@ -37,7 +35,7 @@ interface State {
 }
 
 function Referendum ({ chain_bestNumber, className, democracy_enactmentPeriod, democracy_referendumVotesFor, t, value }: Props): React.ReactElement<Props> | null {
-  const [{ voteCount, voteCountAye, voteCountNay, votedAye, votedNay, votedTotal }, setState] = useState<State>({
+  const [{ voteCountAye, voteCountNay, votedAye, votedNay }, setState] = useState<State>({
     voteCount: 0,
     voteCountAye: 0,
     voteCountNay: 0,
@@ -85,63 +83,29 @@ function Referendum ({ chain_bestNumber, className, democracy_enactmentPeriod, d
   const enactBlock = (democracy_enactmentPeriod || new BN(0)).add(value.info.end);
 
   return (
-    <ActionItem
-      className={className}
-      idNumber={value.index}
-      proposal={value.proposal}
-      accessory={
-        <Voting
-          idNumber={value.index}
-          proposal={value.proposal}
-        />
-      }
-    >
-      <div>
-        <Static label={t('ending at')}>
-          {t('block #{{blockNumber}}, {{remaining}} blocks remaining', {
-            replace: {
-              blockNumber: formatNumber(value.info.end),
-              remaining: formatNumber(value.info.end.sub(chain_bestNumber).subn(1))
-            }
-          })}
-        </Static>
-        <Static label={t('activate at (if passed)')}>
-          {t('block #{{blockNumber}}', {
-            replace: {
-              blockNumber: formatNumber(enactBlock)
-            }
-          })}
-        </Static>
-        <VoteThreshold
-          isDisabled
-          defaultValue={{ isValid: true, value: value.info.threshold }}
-          label={t('vote threshold')}
-          name='voteThreshold'
-          type={{
-            info: 0,
-            type: 'VoteThreshold'
-          }}
-        />
-        {voteCount !== 0 && votedTotal.gtn(0) && (
-          <div className='democracy--Referendum-results chart'>
-            <Chart.HorizBar
-              values={[
-                {
-                  colors: COLORS_AYE,
-                  label: `Aye, ${formatBalance(votedAye, { forceUnit: '-' })} (${formatNumber(voteCountAye)})`,
-                  value: votedAye.muln(10000).div(votedTotal).toNumber() / 100
-                },
-                {
-                  colors: COLORS_NAY,
-                  label: `Nay, ${formatBalance(votedNay, { forceUnit: '-' })} (${formatNumber(voteCountNay)})`,
-                  value: votedNay.muln(10000).div(votedTotal).toNumber() / 100
-                }
-              ]}
-            />
-          </div>
-        )}
-      </div>
-    </ActionItem>
+    <tr className={className}>
+      <td className='number toppad'>{formatNumber(value.index)}</td>
+      <ProposalCell className='top' proposal={value.proposal} />
+      <td className='number together top'>
+        <label>{t('remaining')}</label>
+        {formatNumber(value.info.end.sub(chain_bestNumber).subn(1))} blocks
+      </td>
+      <td className='number together top'>
+        <label>{t('activate at')}</label>
+        {formatNumber(enactBlock)}
+      </td>
+      <td className='number together top'>
+        <label>{t('Aye ({{count}})', { replace: { count: formatNumber(voteCountAye) } })}</label>
+        <FormatBalance value={votedAye} />
+      </td>
+      <td className='number together top'>
+        <label>{t('Nay ({{count}})', { replace: { count: formatNumber(voteCountNay) } })}</label>
+        <FormatBalance value={votedNay} />
+      </td>
+      <td className='number together top'>
+        <Voting referendumId={value.index} />
+      </td>
+    </tr>
   );
 }
 

diff --git a/packages/app-democracy/src/Overview/Referendums.tsx b/packages/app-democracy/src/Overview/Referendums.tsx
@@ -6,6 +6,7 @@ import { DerivedReferendum } from '@polkadot/api-derive/types';
 import { I18nProps as Props } from '@polkadot/react-components/types';
 
 import React from 'react';
+import { Table } from '@polkadot/react-components';
 import { useApi, trackStream } from '@polkadot/react-hooks';
 
 import Referendum from './Referendum';
@@ -18,16 +19,21 @@ function Referendums ({ className, t }: Props): React.ReactElement<Props> {
   return (
     <div className={`proposalSection ${className}`}>
       <h1>{t('referenda')}</h1>
-      {
-        referendums?.length
-          ? referendums.map((referendum): React.ReactNode => (
-            <Referendum
-              idNumber={referendum.index}
-              key={referendum.index.toString()}
-              value={referendum}
-            />
-          ))
-          : t('No active referendums')
+      {referendums?.length
+        ? (
+          <Table>
+            <Table.Body>
+              {referendums.map((referendum): React.ReactNode => (
+                <Referendum
+                  idNumber={referendum.index}
+                  key={referendum.index.toString()}
+                  value={referendum}
+                />
+              ))}
+            </Table.Body>
+          </Table>
+        )
+        : t('No active referendums')
       }
     </div>
   );

diff --git a/packages/app-democracy/src/Overview/Seconding.tsx b/packages/app-democracy/src/Overview/Seconding.tsx
@@ -62,22 +62,20 @@ function Seconding ({ depositors, proposalId, t }: Props): React.ReactElement<Pr
                 isPrimary
                 label={t('Second')}
                 icon='sign-in'
-                onClick={_toggleSeconding}
+                onStart={_toggleSeconding}
                 params={[proposalId]}
                 tx='democracy.second'
               />
             </Button.Group>
           </Modal.Actions>
         </Modal>
       )}
-      <Button.Group>
-        <Button
-          isPrimary
-          label={t('Second proposal')}
-          icon='toggle off'
-          onClick={_toggleSeconding}
-        />
-      </Button.Group>
+      <Button
+        isPrimary
+        label={t('Second')}
+        icon='toggle off'
+        onClick={_toggleSeconding}
+      />
     </>
   );
 }

diff --git a/packages/app-staking/src/Actions/Account/index.tsx b/packages/app-staking/src/Actions/Account/index.tsx
@@ -573,7 +573,7 @@ export default withMulti(
       }
 
       .staking--label {
-        margin: 0 1.75rem -0.75rem 0;
+        margin: 0 0 -0.75rem 1.75rem;
       }
     }
 
@@ -602,10 +602,10 @@ export default withMulti(
     }
 
     .staking--Account-Nominee {
-      text-align: right;
+      text-align: left;
 
       .staking--label {
-        margin: 0 2.25rem -.75rem 0;
+        margin: 0 0 -.75rem 2.25rem;
       }
     }
 

diff --git a/packages/app-staking/src/Overview/Address.tsx b/packages/app-staking/src/Overview/Address.tsx
@@ -10,12 +10,11 @@ import { ValidatorFilter } from '../types';
 import BN from 'bn.js';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { AddressMini, Badge, Icon } from '@polkadot/react-components';
+import { AddressMini, AddressSmall, Badge, Icon } from '@polkadot/react-components';
 import { trackStream, useApi } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
-import AddressSmall from '../AddressSmall';
 import translate from '../translate';
 
 interface Props extends I18nProps {