Democracy with useTranslation (#2153)

* Democracy with useTranslation

* Remove isSuspended display

* One isSubstrateV2 less

* Linting

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

@@ -2,7 +2,6 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps } from '@polkadot/react-components/types';
 import { AccountId, Balance, BlockNumber, Hash, Proposal, ReferendumIndex } from '@polkadot/types/interfaces';
 import { ITuple } from '@polkadot/types/types';
 
@@ -11,16 +10,17 @@ import { useApi, useCall } from '@polkadot/react-hooks';
 import { Bytes, Option } from '@polkadot/types';
 import { formatNumber } from '@polkadot/util';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import ProposalCell from './ProposalCell';
 
-interface Props extends I18nProps {
+interface Props {
   blockNumber?: BlockNumber;
   hash: Hash;
   referendumIndex: ReferendumIndex;
 }
 
-function DispatchEntry ({ blockNumber, hash, referendumIndex, t }: Props): React.ReactElement<Props> {
+export default function DispatchEntry ({ blockNumber, hash, referendumIndex }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { api } = useApi();
   const preimage = useCall<Option<ITuple<[Bytes, AccountId, Balance, BlockNumber]>>
   >(api.query.democracy.preimages, [hash]);
@@ -50,5 +50,3 @@ function DispatchEntry ({ blockNumber, hash, referendumIndex, t }: Props): React
     </tr>
   );
 }
-
-export default translate(DispatchEntry);

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

@@ -2,17 +2,21 @@
 // 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 { BlockNumber, Hash, ReferendumIndex } from '@polkadot/types/interfaces';
 
 import React from 'react';
 import { Table } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import DispatchEntry from './DispatchEntry';
 
-function DispatchQueue ({ className, t }: Props): React.ReactElement<Props> | null {
+interface Props {
+  className?: string;
+}
+
+export default function DispatchQueue ({ className }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const { api } = useApi();
   const queued = useCall<[BlockNumber, Hash, ReferendumIndex][]>(api.query.democracy.dispatchQueue, []);
 
@@ -43,5 +47,3 @@ function DispatchQueue ({ className, t }: Props): React.ReactElement<Props> | nu
     </div>
   );
 }
-
-export default translate(DispatchQueue);

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

@@ -4,7 +4,6 @@
 
 import { AccountId, Balance, BlockNumber, Hash, Proposal, VoteThreshold } from '@polkadot/types/interfaces';
 import { ITuple } from '@polkadot/types/types';
-import { I18nProps as Props } from '@polkadot/react-components/types';
 
 import React, { useEffect, useState } from 'react';
 import { AddressSmall, Table } from '@polkadot/react-components';
@@ -12,10 +11,15 @@ import { useApi, useCall } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 import { Bytes, Option } from '@polkadot/types';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import ProposalCell from './ProposalCell';
 
-function Externals ({ className, t }: Props): React.ReactElement<Props> | null {
+interface Props {
+  className?: string;
+}
+
+export default function Externals ({ className }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const { api } = useApi();
   const external = useCall<Option<ITuple<[Hash, VoteThreshold]>>>(api.query.democracy.nextExternal, []);
   const [hash, setHash] = useState<Hash | null>(null);
@@ -72,5 +76,3 @@ function Externals ({ className, t }: Props): React.ReactElement<Props> | null {
     </div>
   );
 }
-
-export default translate(Externals);

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

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DeriveProposal } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
 import styled from 'styled-components';
@@ -11,15 +10,17 @@ import { AddressMini, AddressSmall } from '@polkadot/react-components';
 import { FormatBalance } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import ProposalCell from './ProposalCell';
 import Seconding from './Seconding';
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   value: DeriveProposal;
 }
 
-function Proposal ({ className, t, value: { balance, hash, index, proposal, proposer, seconds } }: Props): React.ReactElement<Props> {
+function Proposal ({ className, value: { balance, hash, index, proposal, proposer, seconds } }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const seconding = seconds.filter((_address, index): boolean => index !== 0);
 
   return (
@@ -64,20 +65,18 @@ function Proposal ({ className, t, value: { balance, hash, index, proposal, prop
   );
 }
 
-export default translate(
-  styled(Proposal)`
-    .identityIcon {
-      &:first-child {
-        padding-top: 0;
-      }
-
-      &:last-child {
-        margin-bottom: 4px;
-      }
+export default styled(Proposal)`
+  .identityIcon {
+    &:first-child {
+      padding-top: 0;
     }
 
-    .seconding {
-      padding-top: 1.1rem;
+    &:last-child {
+      margin-bottom: 4px;
     }
-  `
-);
+  }
+
+  .seconding {
+    padding-top: 1.1rem;
+  }
+`;

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

@@ -3,20 +3,22 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { Hash, 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';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   proposal?: Proposal | null;
   proposalHash: Hash | string;
 }
 
-function ProposalCell ({ className, proposal, proposalHash, t }: Props): React.ReactElement<Props> {
+export default function ProposalCell ({ className, proposal, proposalHash }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+
   if (!proposal) {
     return (
       <td className={`${className} all`}>
@@ -42,5 +44,3 @@ function ProposalCell ({ className, proposal, proposalHash, t }: Props): React.R
     </td>
   );
 }
-
-export default translate(ProposalCell);

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

@@ -3,16 +3,20 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 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, useCall } from '@polkadot/react-hooks';
 
 import ProposalDisplay from './Proposal';
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-function Proposals ({ className, t }: Props): React.ReactElement<Props> {
+interface Props {
+  className?: string;
+}
+
+export default function Proposals ({ className }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { api } = useApi();
   const proposals = useCall<DeriveProposal[]>(api.derive.democracy.proposals, []);
 
@@ -37,5 +41,3 @@ function Proposals ({ className, t }: Props): React.ReactElement<Props> {
     </div>
   );
 }
-
-export default translate(Proposals);

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

@@ -2,21 +2,21 @@
 // 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 BN from 'bn.js';
 import React, { useState } from 'react';
 import { Button, Input, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
 import { Available } from '@polkadot/react-query';
 import { isHex } from '@polkadot/util';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   onClose: () => void;
 }
 
-function Propose ({ className, onClose, t }: Props): React.ReactElement<Props> {
+export default function Propose ({ className, onClose }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const [accountId, setAccountId] = useState<string | null>(null);
   const [balance, setBalance] = useState<BN | undefined>();
   const [{ isHashValid, hash }, setHash] = useState<{ isHashValid: boolean; hash?: string }>({ isHashValid: false, hash: '' });
@@ -78,5 +78,3 @@ function Propose ({ className, onClose, t }: Props): React.ReactElement<Props> {
     </Modal>
   );
 }
-
-export default translate(Propose);

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

@@ -4,7 +4,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DerivedReferendumVote, DerivedReferendum } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
 import { BlockNumber } from '@polkadot/types/interfaces';
 
 import BN from 'bn.js';
@@ -14,11 +13,12 @@ import { formatNumber } from '@polkadot/util';
 import { useApi, useCall } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import ProposalCell from './ProposalCell';
 import Voting from './Voting';
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   idNumber: BN;
   value: DerivedReferendum;
 }
@@ -32,7 +32,8 @@ interface State {
   votedTotal: BN;
 }
 
-function Referendum ({ className, idNumber, t, value }: Props): React.ReactElement<Props> | null {
+function Referendum ({ className, idNumber, value }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const { api } = useApi();
   const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber, []);
   const votesFor = useCall<DerivedReferendumVote[]>(api.derive.democracy.referendumVotesFor as any, [idNumber]);
@@ -114,14 +115,12 @@ function Referendum ({ className, idNumber, t, value }: Props): React.ReactEleme
   );
 }
 
-export default translate(
-  styled(Referendum)`
-    .democracy--Referendum-results {
-      margin-bottom: 1em;
+export default styled(Referendum)`
+  .democracy--Referendum-results {
+    margin-bottom: 1em;
 
-      &.chart {
-        text-align: center;
-      }
+    &.chart {
+      text-align: center;
     }
-  `
-);
+  }
+`;

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

@@ -3,16 +3,20 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 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, useCall } from '@polkadot/react-hooks';
 
 import Referendum from './Referendum';
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-function Referendums ({ className, t }: Props): React.ReactElement<Props> {
+interface Props {
+  className?: string;
+}
+
+export default function Referendums ({ className }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { api } = useApi();
   const referendums = useCall<DerivedReferendum[]>(api.derive.democracy.referendums, []);
 
@@ -38,5 +42,3 @@ function Referendums ({ className, t }: Props): React.ReactElement<Props> {
     </div>
   );
 }
-
-export default translate(Referendums);

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

@@ -3,21 +3,22 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { AccountId } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
 
 import BN from 'bn.js';
 import React, { useState } from 'react';
 import { Button, InputAddress, Modal, TxButton } from '@polkadot/react-components';
 import { useAccounts } from '@polkadot/react-hooks';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   depositors: AccountId[];
   proposalId: BN | number;
 }
 
-function Seconding ({ depositors, proposalId, t }: Props): React.ReactElement<Props> | null {
+export default function Seconding ({ depositors, proposalId }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const { hasAccounts } = useAccounts();
   const [accountId, setAccountId] = useState<string | null>(null);
   const [isSecondingOpen, setIsSecondingOpen] = useState(false);
@@ -78,5 +79,3 @@ function Seconding ({ depositors, proposalId, t }: Props): React.ReactElement<Pr
     </>
   );
 }
-
-export default translate(Seconding);

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

@@ -2,21 +2,20 @@
 // 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 BN from 'bn.js';
 import React, { useState } from 'react';
 import { Button, Modal, VoteAccount, VoteActions, VoteToggle } from '@polkadot/react-components';
 import { useAccounts } from '@polkadot/react-hooks';
 import { isBoolean } from '@polkadot/util';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
+interface Props {
   referendumId: BN | number;
 }
 
-function Voting ({ referendumId, t }: Props): React.ReactElement<Props> | null {
+export default function Voting ({ referendumId }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const { hasAccounts } = useAccounts();
   const [accountId, setAccountId] = useState<string | null>(null);
   const [isVotingOpen, setIsVotingOpen] = useState(false);
@@ -61,5 +60,3 @@ function Voting ({ referendumId, t }: Props): React.ReactElement<Props> | null {
     </>
   );
 }
-
-export default translate(Voting);

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

@@ -2,13 +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 { I18nProps as Props } from '@polkadot/react-components/types';
-
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { Button } from '@polkadot/react-components';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import DispatchQueue from './DispatchQueue';
 import Externals from './Externals';
 import Proposals from './Proposals';
@@ -17,7 +15,12 @@ import Summary from './Summary';
 import PreImage from './PreImage';
 import Propose from './Propose';
 
-function Overview ({ className, t }: Props): React.ReactElement {
+interface Props {
+  className?: string;
+}
+
+function Overview ({ className }: Props): React.ReactElement {
+  const { t } = useTranslation();
   const [isPreimageOpen, setIsPreimageOpen] = useState(false);
   const [isProposeOpen, setIsProposeOpen] = useState(false);
 
@@ -56,10 +59,8 @@ function Overview ({ className, t }: Props): React.ReactElement {
   );
 }
 
-export default translate(
-  styled(Overview)`
-    .proposalSection {
-      margin-bottom: 1.5rem;
-    }
-  `
-);
+export default styled(Overview)`
+  .proposalSection {
+    margin-bottom: 1.5rem;
+  }
+`;

packages/app-democracy/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 { AppProps, BareProps, I18nProps } from '@polkadot/react-components/types';
+import { AppProps, BareProps } from '@polkadot/react-components/types';
 
 import React from 'react';
 import { Route, Switch } from 'react-router';
@@ -11,17 +11,19 @@ import uiSettings from '@polkadot/ui-settings';
 
 import basicMd from './md/basic.md';
 import Overview from './Overview';
-import translate from './translate';
+import { useTranslation } from './translate';
 
 export { default as useCounter } from './useCounter';
 
-interface Props extends AppProps, BareProps, I18nProps {}
+interface Props extends AppProps, BareProps {}
 
 const hidden = uiSettings.uiMode === 'full'
   ? []
   : ['propose'];
 
-function DemocracyApp ({ basePath, t }: Props): React.ReactElement<Props> {
+export default function DemocracyApp ({ basePath }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+
   return (
     <main className='democracy--App'>
       <HelpOverlay md={basicMd} />
@@ -44,5 +46,3 @@ function DemocracyApp ({ basePath, t }: Props): React.ReactElement<Props> {
     </main>
   );
 }
-
-export default translate(DemocracyApp);

packages/app-society/src/Overview/Candidate.tsx

@@ -14,7 +14,7 @@ interface Props {
   value: DeriveSocietyCandidate;
 }
 
-export default function Candidate ({ value: { accountId, isSuspended, kind, value } }: Props): React.ReactElement<Props> {
+export default function Candidate ({ value: { accountId, kind, value } }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   return (
@@ -32,10 +32,6 @@ export default function Candidate ({ value: { accountId, isSuspended, kind, valu
           value={value}
         />
       </td>
-      <td className='number top'>
-        <label>{t('suspended')}</label>
-        {isSuspended ? t('Yes') : t('No')}
-      </td>
     </tr>
   );
 }

packages/app-society/src/Overview/Member.tsx

@@ -13,7 +13,7 @@ interface Props {
   value: DeriveSocietyMember;
 }
 
-export default function Member ({ value: { accountId, isSuspended, strikes } }: Props): React.ReactElement<Props> {
+export default function Member ({ value: { accountId, strikes } }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   return (
@@ -25,10 +25,6 @@ export default function Member ({ value: { accountId, isSuspended, strikes } }:
         <label>{t('strikes')}</label>
         {strikes.toString()}
       </td>
-      <td className='number top'>
-        <label>{t('suspended')}</label>
-        {isSuspended ? t('Yes') : t('No')}
-      </td>
     </tr>
   );
 }

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

@@ -89,7 +89,7 @@ function getStakeState (allAccounts: string[], allStashes: string[] | undefined,
 
 function Account ({ allStashes, className, isOwnStash, next, onUpdateType, stakingOverview, stashId }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const { api, isSubstrateV2 } = useApi();
+  const { api } = useApi();
   const { allAccounts } = useAccounts();
   const validateInfo = useCall<ValidatorInfo>(api.query.staking.validators, [stashId]);
   const balancesAll = useCall<DerivedBalances>(api.derive.balances.all as any, [stashId]);
@@ -209,7 +209,7 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, staki
             <AddressInfo
               address={stashId}
               withBalance={false}
-              withHexSessionId={isSubstrateV2 && hexSessionIdNext !== '0x' && [hexSessionIdQueue, hexSessionIdNext]}
+              withHexSessionId={hexSessionIdNext !== '0x' && [hexSessionIdQueue, hexSessionIdNext]}
               withValidatorPrefs
             />
           </td>
@@ -269,7 +269,7 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, staki
                 )
                 : (
                   <Button.Group>
-                    {(!sessionIds.length || (isSubstrateV2 && hexSessionIdNext === '0x'))
+                    {(!sessionIds.length || hexSessionIdNext === '0x')
                       ? (
                         <Button
                           isPrimary
@@ -356,7 +356,7 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, staki
                       disabled={!isOwnController}
                       onClick={toggleSetSession}
                     >
-                      {isSubstrateV2 ? t('Change session keys') : t('Change session account')}
+                      {t('Change session keys')}
                     </Menu.Item>
                   }
                   {isStashNominating &&
@@ -367,7 +367,7 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, staki
                       {t('Set nominees')}
                     </Menu.Item>
                   }
-                  {!isStashNominating && isSubstrateV2 &&
+                  {!isStashNominating &&
                     <Menu.Item onClick={toggleInject}>
                       {t('Inject session keys (advanced)')}
                     </Menu.Item>