useTranslation Suspense fallback (#2158)

* useTranslation Suspense fallback

* import path

* Some small useTranslation conversions

packages/app-parachains/src/index.tsx

@@ -2,18 +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 { 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';
 import { Tabs } from '@polkadot/react-components';
 
 import Overview from './Overview';
-import translate from './translate';
+import { useTranslation } from './translate';
 
-interface Props extends AppProps, BareProps, I18nProps {}
+interface Props extends AppProps, BareProps {}
+
+export default function ParachainsApp ({ basePath }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
 
-function ParachainsApp ({ basePath, t }: Props): React.ReactElement<Props> {
   return (
     <main>
       <header>
@@ -34,5 +36,3 @@ function ParachainsApp ({ basePath, t }: Props): React.ReactElement<Props> {
     </main>
   );
 }
-
-export default translate(ParachainsApp);

packages/app-society/src/index.tsx

@@ -5,6 +5,7 @@
 import { AppProps, BareProps } from '@polkadot/react-components/types';
 
 import React from 'react';
+import { Route, Switch } from 'react-router';
 import { Tabs } from '@polkadot/react-components';
 
 import Overview from './Overview';
@@ -29,7 +30,9 @@ export default function SocietyApp ({ basePath, className }: Props): React.React
           ]}
         />
       </header>
-      <Overview />
+      <Switch>
+        <Route component={Overview} />
+      </Switch>
     </main>
   );
 }

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

@@ -2,20 +2,19 @@
 // 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, { useEffect, useState } from 'react';
 import { Icon } from '@polkadot/react-components';
 
-import translate from '../../translate';
+import { useTranslation } from '../../translate';
 
-interface Props extends I18nProps {
+interface Props {
   unstakeThreshold: BN | undefined;
   onError: (error: string | null) => void;
 }
 
-function InputValidationUnstakeThreshold ({ onError, t, unstakeThreshold }: Props): React.ReactElement<Props> | null {
+export default function InputValidationUnstakeThreshold ({ onError, unstakeThreshold }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const [error, setError] = useState<string | null>(null);
 
   useEffect((): void => {
@@ -45,5 +44,3 @@ function InputValidationUnstakeThreshold ({ onError, t, unstakeThreshold }: Prop
     </article>
   );
 }
-
-export default translate(InputValidationUnstakeThreshold);

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

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DerivedStakingOverview } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
 
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
@@ -11,9 +10,10 @@ import { AddressMulti, Button, InputAddress, Modal, TxButton } from '@polkadot/r
 import { useFavorites } from '@polkadot/react-hooks';
 
 import { STORE_FAVS_BASE } from '../../constants';
-import translate from '../../translate';
+import { useTranslation } from '../../translate';
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   controllerId: string;
   next: string[];
   nominees?: string[];
@@ -24,7 +24,8 @@ interface Props extends I18nProps {
 
 const MAX_NOMINEES = 16;
 
-function Nominate ({ className, controllerId, nominees, onClose, next, stakingOverview, stashId, t }: Props): React.ReactElement<Props> | null {
+function Nominate ({ className, controllerId, nominees, onClose, next, stakingOverview, stashId }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const [favorites] = useFavorites(STORE_FAVS_BASE);
   const [validators, setValidators] = useState<string[]>([]);
   const [selection, setSelection] = useState<string[]>([]);
@@ -110,53 +111,51 @@ function Nominate ({ className, controllerId, nominees, onClose, next, stakingOv
   );
 }
 
-export default translate(
-  styled(Nominate)`
-    .shortlist {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
+export default styled(Nominate)`
+  .shortlist {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
 
-      .candidate {
-        border: 1px solid #eee;
-        border-radius: 0.25rem;
-        margin: 0.25rem;
-        padding-bottom: 0.25rem;
-        padding-right: 0.5rem;
-        position: relative;
+    .candidate {
+      border: 1px solid #eee;
+      border-radius: 0.25rem;
+      margin: 0.25rem;
+      padding-bottom: 0.25rem;
+      padding-right: 0.5rem;
+      position: relative;
 
-        &::after {
-          content: '';
-          position: absolute;
-          top: 0;
-          right: 0;
-          border-color: transparent;
-          border-style: solid;
-          border-radius: 0.25em;
-          border-width: 0.25em;
-        }
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        border-color: transparent;
+        border-style: solid;
+        border-radius: 0.25em;
+        border-width: 0.25em;
+      }
 
-        &.isAye {
-          background: #fff;
-          border-color: #ccc;
-        }
+      &.isAye {
+        background: #fff;
+        border-color: #ccc;
+      }
 
-        &.member::after {
-          border-color: green;
-        }
+      &.member::after {
+        border-color: green;
+      }
 
-        &.runnerup::after {
-          border-color: steelblue;
-        }
+      &.runnerup::after {
+        border-color: steelblue;
+      }
 
-        .ui--AddressMini-icon {
-          z-index: 1;
-        }
+      .ui--AddressMini-icon {
+        z-index: 1;
+      }
 
-        .candidate-right {
-          text-align: right;
-        }
+      .candidate-right {
+        text-align: right;
       }
     }
-  `
-);
+  }
+`;

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

@@ -2,16 +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 { I18nProps } from '@polkadot/react-components/types';
-
 import React, { useState } from 'react';
 import { Button, InputAddress, Input, Modal, TxButton } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 
 import ValidationSessionKey from './InputValidationSessionKey';
-import translate from '../../translate';
+import { useTranslation } from '../../translate';
 
-interface Props extends I18nProps {
+interface Props {
   controllerId: string;
   isOpen: boolean;
   onClose: () => void;
@@ -21,7 +19,8 @@ interface Props extends I18nProps {
 
 const EMPTY_PROOF = new Uint8Array();
 
-function SetSessionKey ({ controllerId, isOpen, onClose, sessionIds, stashId, t }: Props): React.ReactElement<Props> | null {
+export default function SetSessionKey ({ controllerId, isOpen, onClose, sessionIds, stashId }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const { isSubstrateV2 } = useApi();
   const [keysError, setKeysError] = useState<string | null>(null);
   const [keys, setKeys] = useState<string | null>(
@@ -113,5 +112,3 @@ function SetSessionKey ({ controllerId, isOpen, onClose, sessionIds, stashId, t
     </Modal>
   );
 }
-
-export default translate(SetSessionKey);

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

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DerivedHeartbeats, DerivedStakingOverview } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
 import { AccountId, StakingLedger } from '@polkadot/types/interfaces';
 
 import React, { useEffect, useState } from 'react';
@@ -13,10 +12,11 @@ import { Option } from '@polkadot/types';
 
 import Account from './Account';
 import StartStaking from './NewStake';
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
+interface Props {
   allStashes: string[];
+  className?: string;
   isVisible: boolean;
   recentlyOnline?: DerivedHeartbeats;
   next: string[];
@@ -47,7 +47,8 @@ function getStashes (allAccounts: string[], stashTypes: Record<string, number>,
   );
 }
 
-function Actions ({ allStashes, className, isVisible, next, recentlyOnline, stakingOverview, t }: Props): React.ReactElement<Props> {
+export default function Actions ({ allStashes, className, isVisible, next, recentlyOnline, stakingOverview }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { api } = useApi();
   const { allAccounts } = useAccounts();
   const queryBonded = useCall<Option<AccountId>[]>(api.query.staking.bonded.multi as any, [allAccounts]);
@@ -109,5 +110,3 @@ function Actions ({ allStashes, className, isVisible, next, recentlyOnline, stak
     </div>
   );
 }
-
-export default translate(Actions);

packages/app-staking/src/Overview/Address.tsx

@@ -4,7 +4,6 @@
 
 import { AccountId, Balance, Points, ValidatorPrefsTo196 } from '@polkadot/types/interfaces';
 import { DeriveAccountInfo, DerivedStakingQuery, DerivedHeartbeats } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
 import { ValidatorFilter } from '../types';
 
 import BN from 'bn.js';
@@ -16,9 +15,9 @@ import { FormatBalance } from '@polkadot/react-query';
 import keyring from '@polkadot/ui-keyring';
 import { formatNumber } from '@polkadot/util';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
+interface Props {
   address: AccountId | string;
   authorsMap: Record<string, string>;
   className?: string;
@@ -50,7 +49,8 @@ interface StakingState {
   validatorPayment?: BN;
 }
 
-function Address ({ address, authorsMap, className, filter, filterName, hasQueries, isElected, isFavorite, lastAuthors, myAccounts, points, recentlyOnline, t, toggleFavorite, withNominations = true }: Props): React.ReactElement<Props> | null {
+function Address ({ address, authorsMap, className, filter, filterName, hasQueries, isElected, isFavorite, lastAuthors, myAccounts, points, recentlyOnline, toggleFavorite, withNominations = true }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const { api } = useApi();
   // FIXME Any horrors, caused by derive type mismatches
   const info = useCall<DeriveAccountInfo>(api.derive.accounts.info as any, [address]);
@@ -239,76 +239,74 @@ function Address ({ address, authorsMap, className, filter, filterName, hasQueri
   );
 }
 
-export default translate(
-  styled(Address)`
-    .extras {
-      display: inline-block;
-      margin-bottom: 0.75rem;
+export default styled(Address)`
+  .extras {
+    display: inline-block;
+    margin-bottom: 0.75rem;
 
-      .favorite {
-        cursor: pointer;
-        display: inline-block;
-        margin-left: 0.5rem;
-        margin-right: -0.25rem;
-
-        &.isSelected {
-          color: darkorange;
-        }
-      }
-    }
-
-    .blockNumberV1,
-    .blockNumberV2 {
-      border-radius: 0.25rem;
-      font-size: 1.5rem;
-      font-weight: 100;
-      line-height: 1.5rem;
-      opacity: 0.5;
-      vertical-align: middle;
-      z-index: 1;
-
-      &.isCurrent {
-        background: #3f3f3f;
-        box-shadow: 0 3px 3px rgba(0,0,0,.2);
-        color: #eee;
-        opacity: 1;
-      }
-    }
-
-    .blockNumberV2 {
-      display: inline-block;
-      padding: 0.25rem 0;
-
-      &.isCurrent {
-        margin-right: -0.25rem;
-        padding: 0.25rem 0.75rem;
-      }
-    }
-
-    .blockNumberV1 {
-      padding: 0.25rem 0.5rem;
-      position: absolute;
-      right: 0;
-    }
-
-    .staking--Address-info {
-      margin-right: 0.25rem;
-      text-align: right;
-
-      .staking--label {
-        margin: 0 2.25rem -0.75rem 0;
-      }
-    }
-
-    .staking--label.controllerSpacer {
-      margin-top: 0.5rem;
-    }
-
-    .staking--stats {
-      bottom: 0.75rem;
+    .favorite {
       cursor: pointer;
-      position: absolute;
-      right: 0.5rem;
+      display: inline-block;
+      margin-left: 0.5rem;
+      margin-right: -0.25rem;
+
+      &.isSelected {
+        color: darkorange;
+      }
     }
-  `
-);
+  }
+
+  .blockNumberV1,
+  .blockNumberV2 {
+    border-radius: 0.25rem;
+    font-size: 1.5rem;
+    font-weight: 100;
+    line-height: 1.5rem;
+    opacity: 0.5;
+    vertical-align: middle;
+    z-index: 1;
+
+    &.isCurrent {
+      background: #3f3f3f;
+      box-shadow: 0 3px 3px rgba(0,0,0,.2);
+      color: #eee;
+      opacity: 1;
+    }
+  }
+
+  .blockNumberV2 {
+    display: inline-block;
+    padding: 0.25rem 0;
+
+    &.isCurrent {
+      margin-right: -0.25rem;
+      padding: 0.25rem 0.75rem;
+    }
+  }
+
+  .blockNumberV1 {
+    padding: 0.25rem 0.5rem;
+    position: absolute;
+    right: 0;
+  }
+
+  .staking--Address-info {
+    margin-right: 0.25rem;
+    text-align: right;
+
+    .staking--label {
+      margin: 0 2.25rem -0.75rem 0;
+    }
+  }
+
+  .staking--label.controllerSpacer {
+    margin-top: 0.5rem;
+  }
+
+  .staking--stats {
+    bottom: 0.75rem;
+    cursor: pointer;
+    position: absolute;
+    right: 0.5rem;
+  }
+`;

packages/app-staking/src/Overview/CurrentList.tsx

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DerivedHeartbeats, DerivedStakingOverview } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
 import { AccountId, EraPoints, Points } from '@polkadot/types/interfaces';
 import { ValidatorFilter } from '../types';
 
@@ -12,10 +11,10 @@ import { Dropdown, FilterOverlay, Input, Table } from '@polkadot/react-component
 import { useAccounts, useApi, useFavorites } from '@polkadot/react-hooks';
 
 import { STORE_FAVS_BASE } from '../constants';
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import Address from './Address';
 
-interface Props extends I18nProps {
+interface Props {
   authorsMap: Record<string, string>;
   hasQueries: boolean;
   isIntentions: boolean;
@@ -57,7 +56,8 @@ function accountsToString (accounts: AccountId[]): string[] {
   return accounts.map((accountId): string => accountId.toString());
 }
 
-function CurrentList ({ authorsMap, hasQueries, isIntentions, isVisible, lastAuthors, next, recentlyOnline, stakingOverview, t }: Props): React.ReactElement<Props> | null {
+export default function CurrentList ({ authorsMap, hasQueries, isIntentions, isVisible, lastAuthors, next, recentlyOnline, stakingOverview }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const { isSubstrateV2 } = useApi();
   const { allAccounts } = useAccounts();
   const [favorites, toggleFavorite] = useFavorites(STORE_FAVS_BASE);
@@ -143,5 +143,3 @@ function CurrentList ({ authorsMap, hasQueries, isIntentions, isVisible, lastAut
     </div>
   );
 }
-
-export default translate(CurrentList);

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

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DerivedStakingOverview } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
 
 import React, { useContext } from 'react';
 import styled from 'styled-components';
@@ -11,16 +10,18 @@ import SummarySession from '@polkadot/app-explorer/SummarySession';
 import { CardSummary, IdentityIcon, SummaryBox } from '@polkadot/react-components';
 import { BlockAuthorsContext } from '@polkadot/react-query';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
+interface Props {
   className?: string;
   isVisible: boolean;
   next: string[];
   stakingOverview?: DerivedStakingOverview;
+  style?: any;
 }
 
-function Summary ({ className, isVisible, next, stakingOverview, style, t }: Props): React.ReactElement<Props> {
+function Summary ({ className, isVisible, next, stakingOverview, style }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { lastBlockAuthors, lastBlockNumber } = useContext(BlockAuthorsContext);
 
   return (
@@ -63,18 +64,16 @@ function Summary ({ className, isVisible, next, stakingOverview, style, t }: Pro
   );
 }
 
-export default translate(
-  styled(Summary)`
-    .validator--Account-block-icon {
-      margin-right: 0.75rem;
-      margin-top: -0.25rem;
-      vertical-align: middle;
-    }
+export default styled(Summary)`
+  .validator--Account-block-icon {
+    margin-right: 0.75rem;
+    margin-top: -0.25rem;
+    vertical-align: middle;
+  }
 
-    .validator--Summary-authors {
-      .validator--Account-block-icon+.validator--Account-block-icon {
-        margin-left: -1.5rem;
-      }
+  .validator--Summary-authors {
+    .validator--Account-block-icon+.validator--Account-block-icon {
+      margin-left: -1.5rem;
     }
-  `
-);
+  }
+`;

packages/app-staking/src/Query/Validator.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 { Balance, Hash, Exposure } from '@polkadot/types/interfaces';
 import { SessionRewards, Slash } from '../types';
 
@@ -14,10 +13,10 @@ import { getHistoric } from '@polkadot/react-api/util';
 import { useApi } from '@polkadot/react-hooks';
 import { formatBalance, formatNumber } from '@polkadot/util';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import useBlockCounts from '../useBlockCounts';
 
-interface Props extends I18nProps {
+interface Props {
   className?: string;
   sessionRewards: SessionRewards[];
   validatorId: string;
@@ -100,7 +99,8 @@ function extractEraSlash (validatorId: string, slashes: Slash[]): BN {
   }, new BN(0));
 }
 
-function Validator ({ className, sessionRewards, t, validatorId }: Props): React.ReactElement<Props> {
+export default function Validator ({ className, sessionRewards, validatorId }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { api } = useApi();
   const blockCounts = useBlockCounts(validatorId, sessionRewards);
   const [blocksLabels, setBlocksLabels] = useState<string[]>([]);
@@ -269,5 +269,3 @@ function Validator ({ className, sessionRewards, t, validatorId }: Props): React
     </Columar>
   );
 }
-
-export default translate(Validator);

packages/app-staking/src/Query/index.tsx

@@ -2,21 +2,22 @@
 // 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 { SessionRewards } from '../types';
 
 import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { Button, InputAddressSimple } from '@polkadot/react-components';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import Validator from './Validator';
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   sessionRewards: SessionRewards[];
 }
 
-function Query ({ className, sessionRewards, t }: Props): React.ReactElement<Props> {
+export default function Query ({ className, sessionRewards }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { value } = useParams();
   const [validatorId, setValidatorId] = useState<string | null>(value || null);
 
@@ -51,5 +52,3 @@ function Query ({ className, sessionRewards, t }: Props): React.ReactElement<Pro
     </div>
   );
 }
-
-export default translate(Query);

packages/app-staking/src/Targets/Summary.tsx

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { Balance } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
 
 import BN from 'bn.js';
 import React, { useEffect, useState } from 'react';
@@ -11,9 +10,9 @@ import { SummaryBox, CardSummary } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 import { formatBalance } from '@polkadot/util';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
+interface Props {
   lastReward: BN;
   totalStaked: BN;
 }
@@ -23,7 +22,8 @@ interface StakeInfo {
   staked: string | null;
 }
 
-function Summary ({ lastReward, t, totalStaked }: Props): React.ReactElement<Props> {
+export default function Summary ({ lastReward, totalStaked }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { api } = useApi();
   const totalInsurance = useCall<Balance>(api.query.balances.totalIssuance, []);
   const [{ percentage, staked }, setStakeInfo] = useState<StakeInfo>({ percentage: '-', staked: null });
@@ -70,5 +70,3 @@ function Summary ({ lastReward, t, totalStaked }: Props): React.ReactElement<Pro
     </SummaryBox>
   );
 }
-
-export default translate(Summary);

packages/app-staking/src/Targets/Validator.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.v
 
-import { I18nProps } from '@polkadot/react-components/types';
 import { ValidatorInfo } from './types';
 
 import React from 'react';
@@ -10,14 +9,15 @@ import { AddressSmall, Icon } from '@polkadot/react-components';
 import { FormatBalance } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
+interface Props {
   info: ValidatorInfo;
   toggleFavorite: (accountId: string) => void;
 }
 
-function Validator ({ info: { accountId, bondOther, bondOwn, bondTotal, commissionPer, isCommission, isFavorite, isNominating, key, numNominators, rankOverall, rewardPayout, validatorPayment }, t, toggleFavorite }: Props): React.ReactElement<Props> {
+export default function Validator ({ info: { accountId, bondOther, bondOwn, bondTotal, commissionPer, isCommission, isFavorite, isNominating, key, numNominators, rankOverall, rewardPayout, validatorPayment }, toggleFavorite }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const _onFavorite = (): void => toggleFavorite(key);
   const _onQueryStats = (): void => {
     window.location.hash = `/staking/query/${key}`;
@@ -57,5 +57,3 @@ function Validator ({ info: { accountId, bondOther, bondOwn, bondTotal, commissi
     </tr>
   );
 }
-
-export default translate(Validator);

packages/app-staking/src/Targets/index.tsx

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DerivedStakingElected } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
 import { ValidatorPrefs, ValidatorPrefsTo196 } from '@polkadot/types/interfaces';
 import { SessionRewards } from '../types';
 import { ValidatorInfo } from './types';
@@ -17,13 +16,14 @@ import { useAccounts, useApi, useDebounce, useFavorites, useCall } from '@polkad
 import { createType } from '@polkadot/types';
 
 import { STORE_FAVS_BASE } from '../constants';
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import Summary from './Summary';
 import Validator from './Validator';
 
 const PERBILL = new BN(1000000000);
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   sessionRewards: SessionRewards[];
 }
 
@@ -140,7 +140,8 @@ function extractInfo (allAccounts: string[], amount: BN = new BN(0), electedInfo
   return { totalStaked, validators };
 }
 
-function Targets ({ className, sessionRewards, t }: Props): React.ReactElement<Props> {
+function Targets ({ className, sessionRewards }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { api } = useApi();
   const { allAccounts } = useAccounts();
   const [_amount, setAmount] = useState<BN | undefined>(new BN(1000));
@@ -207,13 +208,11 @@ function Targets ({ className, sessionRewards, t }: Props): React.ReactElement<P
   );
 }
 
-export default translate(
-  styled(Targets)`
-    text-align: center;
+export default styled(Targets)`
+  text-align: center;
 
-    .balanceInput {
-      padding-right: 2rem;
-      margin-bottom: 1.5rem;
-    }
-  `
-);
+  .balanceInput {
+    padding-right: 2rem;
+    margin-bottom: 1.5rem;
+  }
+`;

packages/app-storage/src/Query.tsx

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { RenderFn, DefaultProps, ComponentRenderer } from '@polkadot/react-api/hoc/types';
-import { I18nProps } from '@polkadot/react-components/types';
 import { ConstValue } from '@polkadot/react-components/InputConsts/types';
 import { QueryTypes, StorageEntryPromise, StorageModuleQuery } from './types';
 
@@ -16,9 +15,8 @@ import valueToText from '@polkadot/react-params/valueToText';
 import { Compact, Option, Raw } from '@polkadot/types';
 import { isU8a, u8aToHex, u8aToString } from '@polkadot/util';
 
-import translate from './translate';
-
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   onRemove: (id: number) => void;
   value: QueryTypes;
 }
@@ -214,22 +212,20 @@ function Query ({ className, onRemove, value }: Props): React.ReactElement<Props
   );
 }
 
-export default translate(
-  styled(Query)`
-    margin-bottom: 0.25em;
+export default styled(Query)`
+  margin-bottom: 0.25em;
 
-    label {
-      text-transform: none !important;
-    }
+  label {
+    text-transform: none !important;
+  }
 
-    .ui.disabled.dropdown.selection {
-      color: #aaa;
-      opacity: 1;
-    }
+  .ui.disabled.dropdown.selection {
+    color: #aaa;
+    opacity: 1;
+  }
 
-    .ui--IdentityIcon {
-      margin: -10px 0;
-      vertical-align: middle;
-    }
-  `
-);
+  .ui--IdentityIcon {
+    margin: -10px 0;
+    vertical-align: middle;
+  }
+`;

packages/app-storage/src/Selection/Consts.tsx

@@ -3,19 +3,17 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { ConstantCodec } from '@polkadot/metadata/Decorated/types';
-import { I18nProps } from '@polkadot/react-components/types';
 import { ConstValue } from '@polkadot/react-components/InputConsts/types';
-import { ComponentProps } from '../types';
+import { ComponentProps as Props } from '../types';
 
 import React, { useState } from 'react';
 import { Button, InputConsts } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends ComponentProps, I18nProps {}
-
-function Consts ({ onAdd, t }: Props): React.ReactElement<Props> {
+export default function Consts ({ onAdd }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { api } = useApi();
   const [defaultValue] = useState<ConstValue>((): ConstValue => {
     const section = Object.keys(api.consts)[0];
@@ -54,5 +52,3 @@ function Consts ({ onAdd, t }: Props): React.ReactElement<Props> {
     </section>
   );
 }
-
-export default translate(Consts);

packages/app-storage/src/Selection/Raw.tsx

@@ -2,19 +2,17 @@
 // 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 { ComponentProps } from '../types';
+import { ComponentProps as Props } from '../types';
 
 import React, { useState } from 'react';
 import { Button, Input } from '@polkadot/react-components';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import { u8aToU8a } from '@polkadot/util';
 import { Compact } from '@polkadot/types';
 
-interface Props extends ComponentProps, I18nProps {}
-
-function Raw ({ onAdd, t }: Props): React.ReactElement<Props> {
+export default function Raw ({ onAdd }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const [{ isValid, key }, setValue] = useState<{ isValid: boolean; key: Uint8Array }>({ isValid: false, key: new Uint8Array([]) });
 
   const _onAdd = (): void => {
@@ -51,5 +49,3 @@ function Raw ({ onAdd, t }: Props): React.ReactElement<Props> {
     </section>
   );
 }
-
-export default translate(Raw);

packages/app-storage/src/Selection/index.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 { ComponentProps, QueryTypes, ParitalQueryTypes } from '../types';
 
 import React from 'react';
@@ -13,16 +12,17 @@ import { useApi } from '@polkadot/react-hooks';
 import Consts from './Consts';
 import Modules from './Modules';
 import Raw from './Raw';
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
+interface Props {
   basePath: string;
   onAdd: (query: QueryTypes) => void;
 }
 
 let id = -1;
 
-function Selection ({ basePath, onAdd, t }: Props): React.ReactElement<Props> {
+export default function Selection ({ basePath, onAdd }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { isSubstrateV2 } = useApi();
   const _onAdd = (query: ParitalQueryTypes): void => onAdd({ ...query, id: ++id });
   const _renderComponent = (Component: React.ComponentType<ComponentProps>): () => React.ReactNode =>
@@ -64,5 +64,3 @@ function Selection ({ basePath, onAdd, t }: Props): React.ReactElement<Props> {
     </>
   );
 }
-
-export default translate(Selection);

packages/app-storage/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, I18nProps } from '@polkadot/react-components/types';
+import { AppProps as Props } from '@polkadot/react-components/types';
 import { QueryTypes } from './types';
 
 import './index.css';
@@ -11,11 +11,8 @@ import React, { useState } from 'react';
 
 import Queries from './Queries';
 import Selection from './Selection';
-import translate from './translate';
 
-interface Props extends AppProps, I18nProps {}
-
-function StorageApp ({ basePath }: Props): React.ReactElement<Props> {
+export default function StorageApp ({ basePath }: Props): React.ReactElement<Props> {
   const [queue, setQueue] = useState<QueryTypes[]>([]);
 
   const _onAdd = (query: QueryTypes): void => setQueue([query, ...queue]);
@@ -34,5 +31,3 @@ function StorageApp ({ basePath }: Props): React.ReactElement<Props> {
     </main>
   );
 }
-
-export default translate(StorageApp);

packages/app-sudo/src/SetKey.tsx

@@ -9,11 +9,12 @@ import { ComponentProps } from './types';
 
 import styled from 'styled-components';
 
-import translate from './translate';
+import { useTranslation } from './translate';
 
 interface Props extends I18nProps, ComponentProps {}
 
-function SetKey ({ allAccounts, className, isMine, sudoKey, t }: Props): React.ReactElement<Props> {
+function SetKey ({ allAccounts, className, isMine, sudoKey }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const [selected, setSelected] = useState<string | null>(null);
 
   useEffect((): void => {
@@ -75,21 +76,19 @@ function SetKey ({ allAccounts, className, isMine, sudoKey, t }: Props): React.R
   );
 }
 
-export default translate(
-  styled(SetKey)`
-    align-items: flex-end;
-    justify-content: center;
+export default styled(SetKey)`
+  align-items: flex-end;
+  justify-content: center;
 
-    .summary {
-      text-align: center;
-    }
+  .summary {
+    text-align: center;
+  }
 
-    .sudoInputAddress {
-      margin: -0.25rem 0.5rem -0.25rem 0;
-    }
+  .sudoInputAddress {
+    margin: -0.25rem 0.5rem -0.25rem 0;
+  }
 
-    .sudoLabelled {
-      align-items: center;
-    }
-  `
-);
+  .sudoLabelled {
+    align-items: center;
+  }
+`;

packages/app-sudo/src/index.tsx

@@ -3,7 +3,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, I18nProps } from '@polkadot/react-components/types';
+import { AppProps as Props } from '@polkadot/react-components/types';
 import { ComponentProps } from './types';
 
 import React, { useEffect, useState } from 'react';
@@ -14,12 +14,10 @@ import { useCall, useAccounts, useApi } from '@polkadot/react-hooks';
 import SetKey from './SetKey';
 import Sudo from './Sudo';
 
-import translate from './translate';
+import { useTranslation } from './translate';
 
-interface Props extends AppProps, I18nProps {
-}
-
-function SudoApp ({ basePath, t }: Props): React.ReactElement<Props> {
+export default function SudoApp ({ basePath }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { api } = useApi();
   const sudoKey = useCall<string>(api.query.sudo.key, [], { transform: (k): string => k.toString() });
   const { allAccounts } = useAccounts();
@@ -79,5 +77,3 @@ function SudoApp ({ basePath, t }: Props): React.ReactElement<Props> {
     </main>
   );
 }
-
-export default translate(SudoApp);

packages/app-tech-comm/src/Overview/Members.tsx

@@ -3,19 +3,20 @@
 // 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 React from 'react';
 import { AddressSmall, Table } from '@polkadot/react-components';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
-  members?: AccountId[];
+interface Props {
   className?: string;
+  members?: AccountId[];
 }
 
-function Members ({ className, members, t }: Props): React.ReactElement<Props> {
+export default function Members ({ className, members }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+
   return (
     <div className={className}>
       {members?.length
@@ -37,5 +38,3 @@ function Members ({ className, members, t }: Props): React.ReactElement<Props> {
     </div>
   );
 }
-
-export default translate(Members);

packages/app-tech-comm/src/Overview/Summary.tsx

@@ -3,8 +3,7 @@
 // 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 { ComponentProps } from '../types';
+import { ComponentProps as Props } from '../types';
 
 import React from 'react';
 import { SummaryBox, CardSummary } from '@polkadot/react-components';
@@ -12,11 +11,10 @@ import { useApi, useCall } from '@polkadot/react-hooks';
 import { u32 } from '@polkadot/types';
 import { formatNumber } from '@polkadot/util';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends ComponentProps, I18nProps {}
-
-function Summary ({ className, members, proposals, t }: Props): React.ReactElement<Props> {
+export default function Summary ({ className, members, proposals }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { api } = useApi();
   const proposalCount = useCall<u32>(api.query.technicalCommittee.proposalCount, []);
 
@@ -36,5 +34,3 @@ function Summary ({ className, members, proposals, t }: Props): React.ReactEleme
     </SummaryBox>
   );
 }
-
-export default translate(Summary);

packages/app-tech-comm/src/Overview/index.tsx

@@ -2,18 +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 { I18nProps } from '@polkadot/react-components/types';
-import { ComponentProps } from '../types';
+import { ComponentProps as Props } from '../types';
 
 import React from 'react';
 
-import translate from '../translate';
 import Members from './Members';
 import Summary from './Summary';
 
-interface Props extends I18nProps, ComponentProps {}
-
-function Overview ({ className, members, proposals }: Props): React.ReactElement<Props> {
+export default function Overview ({ className, members, proposals }: Props): React.ReactElement<Props> {
   return (
     <div className={className}>
       <Summary
@@ -24,5 +20,3 @@ function Overview ({ className, members, proposals }: Props): React.ReactElement
     </div>
   );
 }
-
-export default translate(Overview);

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

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { Proposal as ProposalType, Votes } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
 import { AddressMini } from '@polkadot/react-components';
@@ -12,14 +11,16 @@ import ProposalCell from '@polkadot/app-democracy/Overview/ProposalCell';
 import { Option } from '@polkadot/types';
 import { formatNumber } from '@polkadot/util';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import Voting from './Voting';
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   hash: string;
 }
 
-function Proposal ({ className, hash, t }: Props): React.ReactElement<Props> | null {
+export default function Proposal ({ className, hash }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const { api } = useApi();
   const optProposal = useCall<Option<ProposalType>>(api.query.technicalCommittee.proposalOf, [hash]);
   const votes = useCall<Option<Votes>>(api.query.technicalCommittee.voting, [hash]);
@@ -72,5 +73,3 @@ function Proposal ({ className, hash, t }: Props): React.ReactElement<Props> | n
     </tr>
   );
 }
-
-export default translate(Proposal);

packages/app-tech-comm/src/Proposals/Propose.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 { TxSource, TxDef } from '@polkadot/react-hooks/types';
 import { Call, Proposal } from '@polkadot/types/interfaces';
 
@@ -13,17 +12,15 @@ import { Extrinsic, InputNumber, TxModalNew as TxModal } from '@polkadot/react-c
 import { useApi, useTx } from '@polkadot/react-hooks';
 import { createType } from '@polkadot/types';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
+interface Props {
   memberCount?: number;
   onClose: () => void;
 }
 
-function Propose ({ t, onClose, memberCount = 0 }: Props): React.ReactElement<Props> {
-  const _hasThreshold = (threshold?: BN | null): boolean =>
-    !!threshold && !threshold.isZero() && threshold.lten(memberCount);
-
+export default function Propose ({ onClose, memberCount = 0 }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { apiDefaultTxSudo } = useApi();
   const [proposal, setProposal] = useState<Proposal | null>(null);
   const [[threshold, hasThreshold], setThreshold] = useState<[BN | null, boolean]>([
@@ -44,6 +41,9 @@ function Propose ({ t, onClose, memberCount = 0 }: Props): React.ReactElement<Pr
     {}
   );
 
+  const _hasThreshold = (threshold?: BN | null): boolean =>
+    !!threshold && !threshold.isZero() && threshold.lten(memberCount);
+
   useEffect((): void => {
     setThreshold([threshold, _hasThreshold(threshold)]);
   }, [memberCount]);
@@ -79,5 +79,3 @@ function Propose ({ t, onClose, memberCount = 0 }: Props): React.ReactElement<Pr
     </TxModal>
   );
 }
-
-export default translate(Propose);

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

@@ -2,32 +2,30 @@
 // 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 { useAccounts, useToggle } from '@polkadot/react-hooks';
 import { isBoolean } from '@polkadot/util';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
+interface Props {
   hash: string;
   proposalId: BN | number;
 }
 
-function Voting ({ hash, proposalId, t }: Props): React.ReactElement<Props> | null {
+export default function Voting ({ hash, proposalId }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const { hasAccounts } = useAccounts();
   const [accountId, setAccountId] = useState<string | null>(null);
-  const [isVotingOpen, setIsVotingOpen] = useState(false);
+  const [isVotingOpen, toggleVoting] = useToggle();
   const [voteValue, setVoteValue] = useState(true);
 
   if (!hasAccounts) {
     return null;
   }
 
-  const _toggleVoting = (): void => setIsVotingOpen(!isVotingOpen);
   const _onChangeVote = (vote?: boolean): void => setVoteValue(isBoolean(vote) ? vote : true);
 
   return (
@@ -46,7 +44,7 @@ function Voting ({ hash, proposalId, t }: Props): React.ReactElement<Props> | nu
           </Modal.Content>
           <VoteActions
             accountId={accountId}
-            onClick={_toggleVoting}
+            onClick={toggleVoting}
             params={[hash, proposalId, voteValue]}
             tx='technicalCommittee.vote'
           />
@@ -56,10 +54,8 @@ function Voting ({ hash, proposalId, t }: Props): React.ReactElement<Props> | nu
         icon='check'
         isPrimary
         label={t('Vote')}
-        onClick={_toggleVoting}
+        onClick={toggleVoting}
       />
     </>
   );
 }
-
-export default translate(Voting);

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

@@ -2,29 +2,27 @@
 // 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 { Hash } from '@polkadot/types/interfaces';
-import { ComponentProps } from '../types';
+import { ComponentProps as Props } from '../types';
 
-import React, { useState } from 'react';
+import React from 'react';
 import { Button, Table } from '@polkadot/react-components';
+import { useToggle } from '@polkadot/react-hooks';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import Proposal from './Proposal';
 import Propose from './Propose';
 
-interface Props extends ComponentProps, I18nProps {}
-
-function Proposals ({ className, members, proposals, t }: Props): React.ReactElement<Props> {
-  const [isProposeOpen, setIsProposeOpen] = useState(false);
-  const _toggleProposal = (): void => setIsProposeOpen(!isProposeOpen);
+export default function Proposals ({ className, members, proposals }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const [isProposeOpen, togglePropose] = useToggle(false);
 
   return (
     <div className={className}>
       {isProposeOpen && (
         <Propose
           memberCount={members?.length}
-          onClose={_toggleProposal}
+          onClose={togglePropose}
         />
       )}
       <Button.Group>
@@ -32,7 +30,7 @@ function Proposals ({ className, members, proposals, t }: Props): React.ReactEle
           isPrimary
           label={t('Submit proposal')}
           icon='add'
-          onClick={_toggleProposal}
+          onClick={togglePropose}
         />
       </Button.Group>
       {proposals?.length
@@ -53,5 +51,3 @@ function Proposals ({ className, members, proposals, t }: Props): React.ReactEle
     </div>
   );
 }
-
-export default translate(Proposals);

packages/app-tech-comm/src/index.tsx

@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { AccountId, Hash } from '@polkadot/types/interfaces';
-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';
@@ -12,13 +12,14 @@ import { Tabs } from '@polkadot/react-components';
 
 import Overview from './Overview';
 import Proposals from './Proposals';
-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 {}
 
-function TechCommApp ({ basePath, className, t }: Props): React.ReactElement<Props> {
+export default function TechCommApp ({ basePath, className }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { api } = useApi();
   const members = useCall<AccountId[]>(api.query.technicalCommittee.members, []);
   const proposals = useCall<Hash[]>(api.query.technicalCommittee.proposals, []);
@@ -58,5 +59,3 @@ function TechCommApp ({ basePath, className, t }: Props): React.ReactElement<Pro
     </main>
   );
 }
-
-export default translate(TechCommApp);

packages/app-toolbox/src/Hash.tsx

@@ -2,14 +2,12 @@
 // 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 { Input, Output, Static } from '@polkadot/react-components';
 import { hexToU8a, isHex, stringToU8a } from '@polkadot/util';
 import { blake2AsHex } from '@polkadot/util-crypto';
 
-import translate from './translate';
+import { useTranslation } from './translate';
 
 interface State {
   data: string;
@@ -17,7 +15,8 @@ interface State {
   isHexData: boolean;
 }
 
-function Hash ({ t }: Props): React.ReactElement<Props> {
+export default function Hash (): React.ReactElement<{}> {
+  const { t } = useTranslation();
   const [{ data, hash, isHexData }, setState] = useState<State>({
     data: '',
     hash: blake2AsHex(stringToU8a(''), 256),
@@ -77,5 +76,3 @@ function Hash ({ t }: Props): React.ReactElement<Props> {
     </div>
   );
 }
-
-export default translate(Hash);

packages/app-toolbox/src/Rpc/Account.tsx

@@ -2,23 +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 { I18nProps } from '@polkadot/react-components/types';
-
 import BN from 'bn.js';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { InputAddress, Labelled } from '@polkadot/react-components';
 import { Nonce } from '@polkadot/react-query';
 
-import translate from './translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   defaultValue?: string | null;
   isError?: boolean;
   onChange: (accountId: string | undefined | null, accountNonce: BN) => void;
 }
 
-function Account ({ className, defaultValue, isError, onChange, t }: Props): React.ReactElement<Props> {
+function Account ({ className, defaultValue, isError, onChange }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const [accountId, setAccountId] = useState<string | null | undefined>(defaultValue);
   const [accountNonce, setAccountNonce] = useState(new BN(0));
 
@@ -59,9 +59,7 @@ function Account ({ className, defaultValue, isError, onChange, t }: Props): Rea
   );
 }
 
-export default translate(
-  styled(Account)`
-    box-sizing: border-box;
-    padding-left: 2em;
-  `
-);
+export default styled(Account)`
+  box-sizing: border-box;
+  padding-left: 2em;
+`;

packages/app-toolbox/src/Rpc/Selection.tsx

@@ -14,7 +14,7 @@ import Params from '@polkadot/react-params';
 import { getTypeDef } from '@polkadot/types';
 import { isNull } from '@polkadot/util';
 
-import translate from './translate';
+import translate from '../translate';
 
 interface Props extends I18nProps {
   queueRpc: QueueTxRpcAdd;

packages/app-toolbox/src/Rpc/translate.ts

@@ -1,7 +0,0 @@
-// Copyright 2017-2020 @polkadot/app-toolbox 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 { withTranslation } from 'react-i18next';
-
-export default withTranslation(['app-toolbox']);

packages/app-toolbox/src/Sign.tsx

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { Signer } from '@polkadot/api/types';
-import { I18nProps } from '@polkadot/react-components/types';
 import { KeyringPair } from '@polkadot/keyring/types';
 
 import React, { useEffect, useState } from 'react';
@@ -13,10 +12,10 @@ import { Button, Input, InputAddress, Output, Static } from '@polkadot/react-com
 import keyring from '@polkadot/ui-keyring';
 import { hexToU8a, isFunction, isHex, stringToHex, stringToU8a, u8aToHex } from '@polkadot/util';
 
-import translate from './translate';
+import { useTranslation } from './translate';
 import Unlock from './Unlock';
 
-interface Props extends I18nProps {
+interface Props {
   className?: string;
 }
 
@@ -26,7 +25,8 @@ interface AccountState {
   isInjected: boolean;
 }
 
-function Sign ({ className, t }: Props): React.ReactElement<Props> {
+function Sign ({ className }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const [currentPair, setCurrentPair] = useState<KeyringPair | null>(keyring.getPairs()[0] || null);
   const [{ data, isHexData }, setData] = useState<{ data: string; isHexData: boolean }>({ data: '', isHexData: false });
   const [{ isInjected }, setAccountState] = useState<AccountState>({
@@ -205,38 +205,36 @@ function Sign ({ className, t }: Props): React.ReactElement<Props> {
   );
 }
 
-export default translate(
-  styled(Sign)`
-    .toolbox--Sign-input {
-      position: relative;
+export default styled(Sign)`
+  .toolbox--Sign-input {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .unlock-overlay {
+      position: absolute;
       width: 100%;
       height: 100%;
+      top:0;
+      left:0;
+      background-color: #0f0e0e7a;
+    }
 
-      .unlock-overlay {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        top:0;
-        left:0;
-        background-color: #0f0e0e7a;
-      }
+    .unlock-overlay-warning {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height:100%;
+    }
 
-      .unlock-overlay-warning {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height:100%;
-      }
+    .unlock-overlay-content {
+      color:#fff;
+      padding: 0 2.5rem;
+      text-align:center;
 
-      .unlock-overlay-content {
-        color:#fff;
-        padding: 0 2.5rem;
-        text-align:center;
-
-        .ui--Button-Group {
-          text-align: center;
-        }
+      .ui--Button-Group {
+        text-align: center;
       }
     }
-  `
-);
+  }
+`;

packages/app-toolbox/src/Verify.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 as Props } from '@polkadot/react-components/types';
 import { KeypairType } from '@polkadot/util-crypto/types';
 
 import React, { useEffect, useState } from 'react';
@@ -13,7 +12,7 @@ import { isHex } from '@polkadot/util';
 import { naclVerify, schnorrkelVerify } from '@polkadot/util-crypto';
 import styled from 'styled-components';
 
-import translate from './translate';
+import { useTranslation } from './translate';
 
 type CryptoTypes = KeypairType | 'unknown';
 
@@ -34,7 +33,8 @@ const AlignedIcon = styled(Icon)`
   }
 `;
 
-function Verify ({ t }: Props): React.ReactElement<Props> {
+export default function Verify (): React.ReactElement<{}> {
+  const { t } = useTranslation();
   const [{ cryptoType, isValid }, setValidity] = useState<{ cryptoType: CryptoTypes; isValid: boolean }>({ cryptoType: 'unknown', isValid: false });
   const [{ data, isHexData }, setData] = useState<{ data: string; isHexData: boolean }>({ data: '', isHexData: false });
   const [{ publicKey, isValidPk }, setPublicKey] = useState<{ publicKey: Uint8Array | null; isValidPk: boolean }>({ publicKey: null, isValidPk: false });
@@ -157,5 +157,3 @@ function Verify ({ t }: Props): React.ReactElement<Props> {
     </div>
   );
 }
-
-export default translate(Verify);

packages/app-toolbox/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, I18nProps } from '@polkadot/react-components/types';
+import { AppProps as Props } from '@polkadot/react-components/types';
 
 import React from 'react';
 import { Route, Switch } from 'react-router';
@@ -13,12 +13,10 @@ import Hash from './Hash';
 import Rpc from './Rpc';
 import Sign from './Sign';
 import Verify from './Verify';
-import translate from './translate';
+import { useTranslation } from './translate';
 
-interface Props extends AppProps, I18nProps {
-}
-
-function ToolboxApp ({ basePath, t }: Props): React.ReactElement<Props> {
+export default function ToolboxApp ({ basePath }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { hasAccounts } = useAccounts();
   const tabs = [
     {
@@ -60,5 +58,3 @@ function ToolboxApp ({ basePath, t }: Props): React.ReactElement<Props> {
     </main>
   );
 }
-
-export default translate(ToolboxApp);

packages/apps-routing/src/techcomm.ts

@@ -11,7 +11,9 @@ export default ([
     Component: TechComm,
     useCounter,
     display: {
-      needsApi: ['query.technicalCommittee.members']
+      needsApi: [
+        'query.technicalCommittee.members'
+      ]
     },
     i18n: {
       defaultValue: 'Tech. comm.'

packages/apps/src/Apps.tsx

@@ -24,7 +24,7 @@ import SideBar from './SideBar';
 interface SidebarState {
   isCollapsed: boolean;
   isMenu: boolean;
-  menuOpen: boolean;
+  isMenuOpen: boolean;
   transition: SideBarTransition;
 }
 
@@ -48,20 +48,19 @@ function WarmUp (): React.ReactElement {
 function Apps ({ className }: Props): React.ReactElement<Props> {
   const [sidebar, setSidebar] = useState<SidebarState>({
     isCollapsed: false,
+    isMenuOpen: false,
     transition: SideBarTransition.COLLAPSED,
     ...store.get('sidebar', {}),
-    menuOpen: false,
     isMenu: window.innerWidth < SIDEBAR_MENU_THRESHOLD
   });
-
-  const { isCollapsed, isMenu, menuOpen } = sidebar;
+  const { isCollapsed, isMenu, isMenuOpen } = sidebar;
 
   const _setSidebar = (update: Partial<SidebarState>): void =>
     setSidebar(store.set('sidebar', { ...sidebar, ...update }));
   const _collapse = (): void =>
     _setSidebar({ isCollapsed: !isCollapsed });
   const _toggleMenu = (): void =>
-    _setSidebar({ isCollapsed: false, menuOpen: true });
+    _setSidebar({ isCollapsed: false, isMenuOpen: true });
   const _handleResize = (): void => {
     const transition = window.innerWidth < SIDEBAR_MENU_THRESHOLD
       ? SideBarTransition.MINIMISED_AND_EXPANDED
@@ -69,7 +68,7 @@ function Apps ({ className }: Props): React.ReactElement<Props> {
 
     _setSidebar({
       isMenu: transition === SideBarTransition.MINIMISED_AND_EXPANDED,
-      menuOpen: false,
+      isMenuOpen: false,
       transition
     });
   };
@@ -77,16 +76,16 @@ function Apps ({ className }: Props): React.ReactElement<Props> {
   return (
     <>
       <GlobalStyle />
-      <div className={`apps-Wrapper ${isCollapsed ? 'collapsed' : 'expanded'} ${isMenu && 'fixed'} ${menuOpen && 'menu-open'} theme--default ${className}`}>
+      <div className={`apps-Wrapper ${isCollapsed ? 'collapsed' : 'expanded'} ${isMenu && 'fixed'} ${isMenuOpen && 'menu-open'} theme--default ${className}`}>
         <div
-          className={`apps-Menu-bg ${menuOpen ? 'open' : 'closed'}`}
+          className={`apps-Menu-bg ${isMenuOpen ? 'open' : 'closed'}`}
           onClick={_handleResize}
         />
         <SideBar
           collapse={_collapse}
           handleResize={_handleResize}
-          menuOpen={menuOpen}
           isCollapsed={isCollapsed}
+          isMenuOpen={isMenuOpen}
           toggleMenu={_toggleMenu}
         />
         <Signer>

packages/apps/src/Content/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 React, { useContext } from 'react';
+import React, { Suspense, useContext } from 'react';
 import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 import routing from '@polkadot/apps-routing';
@@ -41,11 +41,13 @@ function Content ({ className }: Props): React.ReactElement<Props> {
         ? <div className='connecting'>{t('Waiting for API to be connected and ready.')}</div>
         : (
           <>
-            <Component
-              basePath={`/${name}`}
-              location={location}
-              onStatusChange={queueAction}
-            />
+            <Suspense fallback='...'>
+              <Component
+                basePath={`/${name}`}
+                location={location}
+                onStatusChange={queueAction}
+              />
+            </Suspense>
             <Status
               queueAction={queueAction}
               stqueue={stqueue}

packages/apps/src/SideBar/index.tsx

@@ -26,11 +26,11 @@ interface Props {
   collapse: () => void;
   handleResize: () => void;
   isCollapsed: boolean;
-  menuOpen: boolean;
+  isMenuOpen: boolean;
   toggleMenu: () => void;
 }
 
-function SideBar ({ className, collapse, handleResize, isCollapsed, toggleMenu, menuOpen }: Props): React.ReactElement<Props> {
+function SideBar ({ className, collapse, handleResize, isCollapsed, isMenuOpen, toggleMenu }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const runtimeVersion = useCall<RuntimeVersion>(api.rpc.state.subscribeRuntimeVersion, []);
@@ -53,7 +53,7 @@ function SideBar ({ className, collapse, handleResize, isCollapsed, toggleMenu,
       className={classes(className, 'apps-SideBar-Wrapper', isCollapsed ? 'collapsed' : 'expanded')}
     >
       <ChainImg
-        className={`toggleImg ${menuOpen ? 'closed' : 'open delayed'}`}
+        className={`toggleImg ${isMenuOpen ? 'closed' : 'open delayed'}`}
         onClick={toggleMenu}
       />
       {routing.routes.map((route): React.ReactNode => (

packages/apps/src/index.tsx

@@ -15,7 +15,6 @@ import { HashRouter } from 'react-router-dom';
 import store from 'store';
 import { ThemeProvider } from 'styled-components';
 import { Api, registry } from '@polkadot/react-api';
-import { QueueConsumer } from '@polkadot/react-components/Status/Context';
 import Queue from '@polkadot/react-components/Status/Queue';
 import { BlockAuthors, Events } from '@polkadot/react-query';
 
@@ -62,27 +61,19 @@ if (!rootElement) {
 
 ReactDOM.render(
   <Suspense fallback='...'>
-    <Queue>
-      <QueueConsumer>
-        {({ queuePayload, queueSetTxStatus }): React.ReactNode => (
-          <Api
-            queuePayload={queuePayload}
-            queueSetTxStatus={queueSetTxStatus}
-            url={wsEndpoint}
-          >
-            <BlockAuthors>
-              <Events>
-                <HashRouter>
-                  <ThemeProvider theme={theme}>
-                    <Apps />
-                  </ThemeProvider>
-                </HashRouter>
-              </Events>
-            </BlockAuthors>
-          </Api>
-        )}
-      </QueueConsumer>
-    </Queue>
+    <ThemeProvider theme={theme}>
+      <Queue>
+        <Api url={wsEndpoint}>
+          <BlockAuthors>
+            <Events>
+              <HashRouter>
+                <Apps />
+              </HashRouter>
+            </Events>
+          </BlockAuthors>
+        </Api>
+      </Queue>
+    </ThemeProvider>
   </Suspense>,
   rootElement
 );

packages/react-api/src/Api.tsx

@@ -2,13 +2,13 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { QueueTxPayloadAdd, QueueTxMessageSetStatus } from '@polkadot/react-components/Status/types';
 import { ApiState } from './types';
 
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import ApiPromise from '@polkadot/api/promise';
 import { isWeb3Injected, web3Accounts, web3Enable } from '@polkadot/extension-dapp';
 import { WsProvider } from '@polkadot/rpc-provider';
+import { StatusContext } from '@polkadot/react-components/Status';
 import { TokenUnit } from '@polkadot/react-components/InputNumber';
 import keyring from '@polkadot/ui-keyring';
 import uiSettings from '@polkadot/ui-settings';
@@ -24,8 +24,6 @@ import registry from './typeRegistry';
 
 interface Props {
   children: React.ReactNode;
-  queuePayload: QueueTxPayloadAdd;
-  queueSetTxStatus: QueueTxMessageSetStatus;
   url?: string;
 }
 
@@ -110,11 +108,12 @@ async function loadOnReady (api: ApiPromise): Promise<State> {
   } as State;
 }
 
-export default function Api ({ children, queuePayload, queueSetTxStatus, url }: Props): React.ReactElement<Props> | null {
+export default function Api ({ children, url }: Props): React.ReactElement<Props> | null {
+  const { queuePayload, queueSetTxStatus } = useContext(StatusContext);
   const [state, setState] = useState<State>({ isApiReady: false } as Partial<State> as State);
   const [isApiConnected, setIsApiConnected] = useState(false);
-  const [isApiLoading, setIsApiLoading] = useState(true);
   const [isWaitingInjected, setIsWaitingInjected] = useState(isWeb3Injected);
+  const [isInitialized, setIsInitialized] = useState(false);
 
   // initial initialization
   useEffect((): void => {
@@ -137,10 +136,10 @@ export default function Api ({ children, queuePayload, queueSetTxStatus, url }:
       .then((): void => setIsWaitingInjected(false))
       .catch((error: Error) => console.error(error));
 
-    setIsApiLoading(false);
+    setIsInitialized(true);
   }, []);
 
-  if (isApiLoading) {
+  if (!isInitialized) {
     return null;
   }
 

packages/react-components/src/Status/index.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 '../types';
 import { QueueStatus, QueueTx, QueueTxStatus } from './types';
 
 import React from 'react';
@@ -12,14 +11,15 @@ import { registry } from '@polkadot/react-api';
 import AddressMini from '../AddressMini';
 import Button from '../Button';
 import Icon from '../Icon';
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import { classes } from '../util';
 import StatusContext from './Context';
 import { STATUS_COMPLETE } from './constants';
 
 export { StatusContext };
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   stqueue?: QueueStatus[];
   txqueue?: QueueTx[];
 }
@@ -145,7 +145,8 @@ function renderItem ({ id, extrinsic, error, removeItem, rpc, status }: QueueTx)
   );
 }
 
-function Status ({ className, stqueue = [], txqueue = [], t }: Props): React.ReactElement<Props> | null {
+function Status ({ className, stqueue = [], txqueue = [] }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const allst: QueueStatus[] = stqueue.filter(({ isCompleted }): boolean => !isCompleted);
   const alltx: QueueTx[] = txqueue.filter(({ status }): boolean =>
     !['completed', 'incomplete'].includes(status)
@@ -180,99 +181,97 @@ function Status ({ className, stqueue = [], txqueue = [], t }: Props): React.Rea
   );
 }
 
-export default translate(
-  styled(Status)`
-    display: inline-block;
-    position: fixed;
-    right: 0.25rem;
-    top: 0.25rem;
-    width: 20rem;
-    z-index: 1001;
+export default styled(Status)`
+  display: inline-block;
+  position: fixed;
+  right: 0.25rem;
+  top: 0.25rem;
+  width: 20rem;
+  z-index: 1001;
 
-    .dismiss {
+  .dismiss {
+    margin-bottom: 0.25rem;
+  }
+
+  .item {
+    display: block;
+
+    > .wrapper > .container {
+      align-items: center;
+      background: #00688b;
+      border-radius: $small-corner;
+      color: white;
+      display: flex;
+      justify-content: space-between;
       margin-bottom: 0.25rem;
+      padding: 0 0.5rem;
+      opacity: 0.95;
+      vertical-align: middle;
+      position: relative;
+
+      .desc {
+        flex: 1;
+        overflow: hidden;
+        padding: 0.5rem 1rem;
+
+        .status {
+          font-weight: 700;
+        }
+
+        .ui--AddressMini {
+          .ui--AddressMini-address {
+            min-width: 0;
+            text-align: left;
+          }
+        }
+      }
+
+      .header {
+        opacity: 0.66;
+      }
+
+      .short {
+        font-size: 2.5rem;
+        opacity:  0.75;
+        padding: 0.5rem;
+
+        i.icon {
+          line-height: 1;
+        }
+      }
+
+      .padded {
+        padding: 0.25rem 0 0 0 !important;
+      }
+
+      i.close {
+        position: absolute;
+        top: 0.25rem;
+        right: 0rem;
+        cursor: pointer;
+      }
     }
 
-    .item {
-      display: block;
-
-      > .wrapper > .container {
-        align-items: center;
-        background: #00688b;
-        border-radius: $small-corner;
-        color: white;
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 0.25rem;
-        padding: 0 0.5rem;
-        opacity: 0.95;
-        vertical-align: middle;
-        position: relative;
-
-        .desc {
-          flex: 1;
-          overflow: hidden;
-          padding: 0.5rem 1rem;
-
-          .status {
-            font-weight: 700;
-          }
-
-          .ui--AddressMini {
-            .ui--AddressMini-address {
-              min-width: 0;
-              text-align: left;
-            }
-          }
-        }
-
-        .header {
-          opacity: 0.66;
-        }
-
-        .short {
-          font-size: 2.5rem;
-          opacity:  0.75;
-          padding: 0.5rem;
-
-          i.icon {
-            line-height: 1;
-          }
-        }
-
-        .padded {
-          padding: 0.25rem 0 0 0 !important;
-        }
-
-        i.close {
-          position: absolute;
-          top: 0.25rem;
-          right: 0rem;
-          cursor: pointer;
-        }
-      }
-
-      &.cancelled > .wrapper > .container {
-        background: #cd9b1d
-      }
-
-      &.event > .wrapper > .container {
-        background: teal;
-      }
-
-      &.completed > .wrapper > .container,
-      &.finalized > .wrapper > .container,
-      &.sent > .wrapper > .container,
-      &.success > .wrapper > .container {
-        background: green;
-      }
-
-      &.dropped > .wrapper > .container,
-      &.error > .wrapper > .container,
-      &.invalid > .wrapper > .container,
-      &.usurped > .wrapper > .container {
-        background: red;
-      }
+    &.cancelled > .wrapper > .container {
+      background: #cd9b1d
     }
-  `
-);
+
+    &.event > .wrapper > .container {
+      background: teal;
+    }
+
+    &.completed > .wrapper > .container,
+    &.finalized > .wrapper > .container,
+    &.sent > .wrapper > .container,
+    &.success > .wrapper > .container {
+      background: green;
+    }
+
+    &.dropped > .wrapper > .container,
+    &.error > .wrapper > .container,
+    &.invalid > .wrapper > .container,
+    &.usurped > .wrapper > .container {
+      background: red;
+    }
+  }
+`;

packages/react-hooks/src/useTx.ts

@@ -8,7 +8,7 @@ import { ExtrinsicAndSenders, TxDef, TxDefs, TxSource, TxProps, TxState } from '
 
 import { useContext, useMemo, useState } from 'react';
 import { ApiPromise } from '@polkadot/api';
-import { StatusContext } from '@polkadot/react-components';
+import { StatusContext } from '@polkadot/react-components/Status';
 import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
 import { assert, isFunction } from '@polkadot/util';
 import useApi from './useApi';
@@ -43,11 +43,9 @@ function getExtrinsic<T extends TxDefs> (api: ApiPromise, txDef: T): Submittable
 }
 
 export default function useTx<T extends TxDef> (memoFn: (...args: any[]) => TxSource<T>, memoArr: any[], { accountId: anAccountId, onChangeAccountId, onStart, onSuccess, onFailed, onUpdate }: TxProps = {}): TxState {
-  const { api } = useApi();
   const { queueExtrinsic } = useContext(StatusContext);
-
+  const { api } = useApi();
   const txSource = useMemo(memoFn, memoArr);
-
   const [accountId, setAccountId] = useState<StringOrNull>(anAccountId || null);
   const [isSending, setIsSending] = useState(false);