diff --git a/packages/app-claims/src/Claim.tsx b/packages/app-claims/src/Claim.tsx
index 1b573774132c..77f20412a196 100644
--- a/packages/app-claims/src/Claim.tsx
+++ b/packages/app-claims/src/Claim.tsx
@@ -4,7 +4,6 @@
 
 import { Option } from '@polkadot/types';
 import { BalanceOf, EthereumAddress } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
 
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
@@ -12,15 +11,17 @@ import { Button, Card } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 
-import translate from './translate';
+import { useTranslation } from './translate';
 import { addrToChecksum } from './util';
 
-interface Props extends I18nProps {
+interface Props {
   button: React.ReactNode;
+  className?: string;
   ethereumAddress: EthereumAddress | null;
 }
 
-function Claim ({ button, className, ethereumAddress, t }: Props): React.ReactElement<Props> | null {
+function Claim ({ button, className, ethereumAddress }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const { api } = useApi();
   const [claimValue, setClaimValue] = useState<BalanceOf | null>(null);
   const [claimAddress, setClaimAddress] = useState<EthereumAddress | null>(null);
@@ -77,31 +78,29 @@ function Claim ({ button, className, ethereumAddress, t }: Props): React.ReactEl
   );
 }
 
-export default translate(
-  styled(Claim)`
-    font-size: 1.15rem;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    min-height: 12rem;
-    align-items: center;
-    margin: 0 1rem;
+export default styled(Claim)`
+  font-size: 1.15rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 12rem;
+  align-items: center;
+  margin: 0 1rem;
 
-    h3 {
-      font-family: monospace;
-      font-size: 1.5rem;
-      max-width: 100%;
-      margin: 0.5rem;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
+  h3 {
+    font-family: monospace;
+    font-size: 1.5rem;
+    max-width: 100%;
+    margin: 0.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
-    h2 {
-      margin: 0.5rem 0 2rem;
-      font-family: monospace;
-      font-size: 2.5rem;
-      font-weight: 200;
-    }
-  `
-);
+  h2 {
+    margin: 0.5rem 0 2rem;
+    font-family: monospace;
+    font-size: 2.5rem;
+    font-weight: 200;
+  }
+`;
diff --git a/packages/app-contracts/src/Contracts/Call.tsx b/packages/app-contracts/src/Contracts/Call.tsx
index b827b59e0387..fcdcfff94bab 100644
--- a/packages/app-contracts/src/Contracts/Call.tsx
+++ b/packages/app-contracts/src/Contracts/Call.tsx
@@ -3,15 +3,13 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { ContractCallOutcome } from '@polkadot/api-contract/types';
-import { BareProps, I18nProps, StringOrNull } from '@polkadot/react-components/types';
-import { ContractExecResult } from '@polkadot/types/interfaces/contracts';
+import { BareProps, StringOrNull } from '@polkadot/react-components/types';
 
 import BN from 'bn.js';
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { Button, Dropdown, IconLink, InputAddress, InputBalance, InputNumber, Modal, Toggle, TxButton } from '@polkadot/react-components';
 import { PromiseContract as ApiContract } from '@polkadot/api-contract';
-import { withMulti } from '@polkadot/react-api/hoc';
 import { useApi } from '@polkadot/react-hooks';
 import { createValue } from '@polkadot/react-params/values';
 import { isNull } from '@polkadot/util';
@@ -19,14 +17,13 @@ import { isNull } from '@polkadot/util';
 import Params from '../Params';
 import Outcome from './Outcome';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import { GAS_LIMIT } from '../constants';
 import { getCallMessageOptions } from './util';
 
-interface Props extends BareProps, I18nProps {
+interface Props extends BareProps {
   callContract: ApiContract | null;
   callMessageIndex: number | null;
-  callResults: ContractExecResult[];
   isOpen: boolean;
   onChangeCallContractAddress: (callContractAddress: StringOrNull) => void;
   onChangeCallMessageIndex: (callMessageIndex: number) => void;
@@ -34,7 +31,8 @@ interface Props extends BareProps, I18nProps {
 }
 
 function Call (props: Props): React.ReactElement<Props> | null {
-  const { className, isOpen, callContract, callMessageIndex, onChangeCallContractAddress, onChangeCallMessageIndex, onClose, t } = props;
+  const { t } = useTranslation();
+  const { className, isOpen, callContract, callMessageIndex, onChangeCallContractAddress, onChangeCallMessageIndex, onClose } = props;
 
   if (isNull(callContract) || isNull(callMessageIndex)) {
     return null;
@@ -258,17 +256,14 @@ function Call (props: Props): React.ReactElement<Props> | null {
   );
 }
 
-export default withMulti(
-  styled(Call)`
-    .rpc-toggle {
-      margin-top: 1rem;
-      display: flex;
-      justify-content: flex-end;
-    }
+export default styled(Call)`
+  .rpc-toggle {
+    margin-top: 1rem;
+    display: flex;
+    justify-content: flex-end;
+  }
 
-    .clear-all {
-      float: right;
-    }
-  `,
-  translate
-);
+  .clear-all {
+    float: right;
+  }
+`;
diff --git a/packages/app-contracts/src/Contracts/Contract.tsx b/packages/app-contracts/src/Contracts/Contract.tsx
index 442dd82960b7..69c50282222f 100644
--- a/packages/app-contracts/src/Contracts/Contract.tsx
+++ b/packages/app-contracts/src/Contracts/Contract.tsx
@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { ActionStatus } from '@polkadot/react-components/Status/types';
-import { I18nProps } from '@polkadot/react-components/types';
 
 import React, { useState } from 'react';
 import styled from 'styled-components';
@@ -13,9 +12,9 @@ import keyring from '@polkadot/ui-keyring';
 import { PromiseContract as ApiContract } from '@polkadot/api-contract';
 import { AddressRow, Button, Card, Forget, Messages } from '@polkadot/react-components';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps, RouteComponentProps {
+interface Props extends RouteComponentProps {
   basePath: string;
   contract: ApiContract;
   onCall: (_?: number) => () => void;
@@ -29,7 +28,8 @@ const ContractCard = styled(Card)`
 `;
 
 function Contract (props: Props): React.ReactElement<Props> | null {
-  const { contract: { abi, address }, onCall, t } = props;
+  const { t } = useTranslation();
+  const { contract: { abi, address }, onCall } = props;
 
   if (!address || !abi) {
     return null;
@@ -114,4 +114,4 @@ function Contract (props: Props): React.ReactElement<Props> | null {
   );
 }
 
-export default translate(withRouter(Contract));
+export default withRouter(Contract);
diff --git a/packages/app-contracts/src/Contracts/ValidateAddr.tsx b/packages/app-contracts/src/Contracts/ValidateAddr.tsx
index 779dd6724f53..bfcdfd9ac919 100644
--- a/packages/app-contracts/src/Contracts/ValidateAddr.tsx
+++ b/packages/app-contracts/src/Contracts/ValidateAddr.tsx
@@ -4,7 +4,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { ContractInfo } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
 import { ApiProps } from '@polkadot/react-api/types';
 
 import React, { useEffect, useState } from 'react';
@@ -13,15 +12,16 @@ import { withCalls } from '@polkadot/react-api/hoc';
 import { InfoForInput } from '@polkadot/react-components';
 import keyring from '@polkadot/ui-keyring';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends ApiProps, I18nProps {
+interface Props extends ApiProps {
   address?: string | null;
   contracts_contractInfoOf?: Option<ContractInfo>;
   onChange: (isValid: boolean) => void;
 }
 
-function ValidateAddr ({ address, contracts_contractInfoOf, onChange, t }: Props): React.ReactElement<Props> | null {
+function ValidateAddr ({ address, contracts_contractInfoOf, onChange }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const [isAddress, setIsAddress] = useState(false);
   const [isStored, setIsStored] = useState(false);
 
@@ -57,11 +57,9 @@ function ValidateAddr ({ address, contracts_contractInfoOf, onChange, t }: Props
   );
 }
 
-export default translate(
-  withCalls<Props>(
-    ['query.contracts.contractInfoOf', {
-      fallbacks: ['query.contract.contractInfoOf'],
-      paramName: 'address'
-    }]
-  )(ValidateAddr)
-);
+export default withCalls<Props>(
+  ['query.contracts.contractInfoOf', {
+    fallbacks: ['query.contract.contractInfoOf'],
+    paramName: 'address'
+  }]
+)(ValidateAddr);
diff --git a/packages/app-contracts/src/Contracts/index.tsx b/packages/app-contracts/src/Contracts/index.tsx
index de646bc8264b..e5e05f1ad1d1 100644
--- a/packages/app-contracts/src/Contracts/index.tsx
+++ b/packages/app-contracts/src/Contracts/index.tsx
@@ -3,21 +3,21 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { ApiProps } from '@polkadot/react-api/types';
-import { I18nProps, StringOrNull } from '@polkadot/react-components/types';
+import { StringOrNull } from '@polkadot/react-components/types';
 import { ComponentProps } from '../types';
 
 import React, { useState, useEffect } from 'react';
 import { PromiseContract as ApiContract } from '@polkadot/api-contract';
-import { withApi, withMulti } from '@polkadot/react-api/hoc';
+import { withApi } from '@polkadot/react-api/hoc';
 import { Button, CardGrid } from '@polkadot/react-components';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import Add from './Add';
 import ContractCard from './Contract';
 import Call from './Call';
 import { getContractForAddress } from './util';
 
-interface Props extends ComponentProps, I18nProps, ApiProps {}
+interface Props extends ComponentProps, ApiProps {}
 
 function filterContracts ({ api, accounts, contracts: keyringContracts }: Props): ApiContract[] {
   return accounts && keyringContracts && Object.keys(keyringContracts)
@@ -26,7 +26,8 @@ function filterContracts ({ api, accounts, contracts: keyringContracts }: Props)
 }
 
 function Contracts (props: Props): React.ReactElement<Props> {
-  const { accounts, basePath, contracts: keyringContracts, hasCode, showDeploy, t } = props;
+  const { t } = useTranslation();
+  const { accounts, basePath, contracts: keyringContracts, hasCode, showDeploy } = props;
   // const { callAddress, callMessage, isAddOpen, isCallOpen } = this.state;
 
   const [contracts, setContracts] = useState<ApiContract[]>(filterContracts(props));
@@ -125,8 +126,4 @@ function Contracts (props: Props): React.ReactElement<Props> {
   );
 }
 
-export default withMulti(
-  Contracts,
-  translate,
-  withApi
-);
+export default withApi(Contracts);
diff --git a/packages/app-contracts/src/RemoveABI.tsx b/packages/app-contracts/src/RemoveABI.tsx
index b3395f13e717..c012ca700844 100644
--- a/packages/app-contracts/src/RemoveABI.tsx
+++ b/packages/app-contracts/src/RemoveABI.tsx
@@ -2,25 +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 { CodeStored } from '@polkadot/app-contracts/types';
 
 import React from 'react';
 import { Button, CodeRow, Modal } from '@polkadot/react-components';
 
-import translate from './translate';
+import { useTranslation } from './translate';
 
-interface Props extends I18nProps {
+interface Props {
   code: CodeStored;
   onClose: () => void;
   onRemove: () => void;
 }
 
-function RemoveABI ({ code, onClose, onRemove, t }: Props): React.ReactElement<Props> {
+export default function RemoveABI ({ code, onClose, onRemove }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+
   const _onRemove = (): void => {
     onClose && onClose();
     onRemove();
   };
+
   return (
     <Modal
       className='app--accounts-Modal'
@@ -57,5 +59,3 @@ function RemoveABI ({ code, onClose, onRemove, t }: Props): React.ReactElement<P
     </Modal>
   );
 }
-
-export default translate(RemoveABI);
diff --git a/packages/app-council/src/Motions/Motion.tsx b/packages/app-council/src/Motions/Motion.tsx
index d0e42bff5117..5a167c0e7c58 100644
--- a/packages/app-council/src/Motions/Motion.tsx
+++ b/packages/app-council/src/Motions/Motion.tsx
@@ -3,21 +3,23 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DerivedCollectiveProposal } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
 import { AddressMini, Voting } from '@polkadot/react-components';
 import ProposalCell from '@polkadot/app-democracy/Overview/ProposalCell';
 import { formatNumber } from '@polkadot/util';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   isMember: boolean;
   motion: DerivedCollectiveProposal;
 }
 
-function Motion ({ className, isMember, motion: { hash, proposal, votes }, t }: Props): React.ReactElement<Props> | null {
+export default function Motion ({ className, isMember, motion: { hash, proposal, votes } }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
+
   if (!votes) {
     return null;
   }
@@ -68,5 +70,3 @@ function Motion ({ className, isMember, motion: { hash, proposal, votes }, t }:
     </tr>
   );
 }
-
-export default translate(Motion);
diff --git a/packages/app-council/src/Motions/index.tsx b/packages/app-council/src/Motions/index.tsx
index b41093a2c97d..02ee17695c95 100644
--- a/packages/app-council/src/Motions/index.tsx
+++ b/packages/app-council/src/Motions/index.tsx
@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DerivedCollectiveProposals, DerivedCollectiveProposal } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
 import { AccountId, Balance } from '@polkadot/types/interfaces';
 
 import React, { useEffect, useState } from 'react';
@@ -13,13 +12,15 @@ import { useApi, useAccounts, useCall } from '@polkadot/react-hooks';
 import Motion from './Motion';
 import Propose from './Propose';
 import Slashing from './Slashing';
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   motions?: DerivedCollectiveProposals;
 }
 
-function Proposals ({ className, motions, t }: Props): React.ReactElement<Props> {
+export default function Proposals ({ className, motions }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { api } = useApi();
   const { allAccounts } = useAccounts();
   const members = useCall<[AccountId, Balance][]>(api.query.electionsPhragmen?.members || api.query.elections.members, []);
@@ -61,5 +62,3 @@ function Proposals ({ className, motions, t }: Props): React.ReactElement<Props>
     </div>
   );
 }
-
-export default translate(Proposals);
diff --git a/packages/app-council/src/Overview/Candidate.tsx b/packages/app-council/src/Overview/Candidate.tsx
index effba7836d4b..bfbc43bbc4b6 100644
--- a/packages/app-council/src/Overview/Candidate.tsx
+++ b/packages/app-council/src/Overview/Candidate.tsx
@@ -2,23 +2,24 @@
 // 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 } from '@polkadot/types/interfaces';
 
 import React from 'react';
 import { AddressSmall } from '@polkadot/react-components';
 import { FormatBalance } from '@polkadot/react-query';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import Voters from './Voters';
 
-interface Props extends I18nProps {
+interface Props {
   address: AccountId;
   balance?: Balance;
   voters?: AccountId[];
 }
 
-function Candidate ({ address, balance, t, voters }: Props): React.ReactElement<Props> {
+export default function Candidate ({ address, balance, voters }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+
   return (
     <tr>
       <td className='top'>
@@ -37,5 +38,3 @@ function Candidate ({ address, balance, t, voters }: Props): React.ReactElement<
     </tr>
   );
 }
-
-export default translate(Candidate);
diff --git a/packages/app-council/src/Overview/Candidates.tsx b/packages/app-council/src/Overview/Candidates.tsx
index 65f2b2285387..4899602ce2b6 100644
--- a/packages/app-council/src/Overview/Candidates.tsx
+++ b/packages/app-council/src/Overview/Candidates.tsx
@@ -4,21 +4,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 { ComponentProps } from './types';
 
 import React from 'react';
 import { Table } from '@polkadot/react-components';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import Candidate from './Candidate';
 
-interface Props extends I18nProps, ComponentProps {
+interface Props extends ComponentProps {
   allVotes?: Record<string, AccountId[]>;
   className?: string;
 }
 
-function Candidates ({ allVotes = {}, className, electionsInfo: { candidates, runnersUp }, t }: Props): React.ReactElement<Props> {
+export default function Candidates ({ allVotes = {}, className, electionsInfo: { candidates, runnersUp } }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+
   return (
     <div className={className}>
       <h1>{t('runners up')}</h1>
@@ -59,5 +60,3 @@ function Candidates ({ allVotes = {}, className, electionsInfo: { candidates, ru
     </div>
   );
 }
-
-export default translate(Candidates);
diff --git a/packages/app-council/src/Overview/Members.tsx b/packages/app-council/src/Overview/Members.tsx
index 7252f97d6b03..c4dde01307db 100644
--- a/packages/app-council/src/Overview/Members.tsx
+++ b/packages/app-council/src/Overview/Members.tsx
@@ -1,24 +1,24 @@
-/* eslint-disable @typescript-eslint/camelcase */
 // Copyright 2017-2020 @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 { AccountId } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
 import { ComponentProps } from './types';
 
 import React from 'react';
 import { Table } from '@polkadot/react-components';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import Candidate from './Candidate';
 
-interface Props extends I18nProps, ComponentProps {
+interface Props extends ComponentProps {
   allVotes?: Record<string, AccountId[]>;
   className?: string;
 }
 
-function Members ({ allVotes = {}, className, electionsInfo: { members }, t }: Props): React.ReactElement<Props> {
+export default function Members ({ allVotes = {}, className, electionsInfo: { members } }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+
   return (
     <div className={className}>
       {members.length
@@ -41,5 +41,3 @@ function Members ({ allVotes = {}, className, electionsInfo: { members }, t }: P
     </div>
   );
 }
-
-export default translate(Members);
diff --git a/packages/app-council/src/Overview/Summary.tsx b/packages/app-council/src/Overview/Summary.tsx
index 331ec34f562a..14c69e44796f 100644
--- a/packages/app-council/src/Overview/Summary.tsx
+++ b/packages/app-council/src/Overview/Summary.tsx
@@ -1,9 +1,7 @@
-/* eslint-disable @typescript-eslint/camelcase */
 // Copyright 2017-2020 @polkadot/app-democracy authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps } from '@polkadot/react-components/types';
 import { BlockNumber } from '@polkadot/types/interfaces';
 import { ComponentProps } from './types';
 
@@ -11,13 +9,16 @@ import React from 'react';
 import { SummaryBox, CardSummary } from '@polkadot/react-components';
 import { formatNumber } from '@polkadot/util';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps, ComponentProps {
+interface Props extends ComponentProps {
   bestNumber?: BlockNumber;
+  className?: string;
 }
 
-function Summary ({ bestNumber, className, electionsInfo: { members, candidateCount, desiredSeats, runnersUp, termDuration, voteCount }, t }: Props): React.ReactElement<Props> {
+export default function Summary ({ bestNumber, className, electionsInfo: { members, candidateCount, desiredSeats, runnersUp, termDuration, voteCount } }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+
   return (
     <SummaryBox className={className}>
       <section>
@@ -52,5 +53,3 @@ function Summary ({ bestNumber, className, electionsInfo: { members, candidateCo
     </SummaryBox>
   );
 }
-
-export default translate(Summary);
diff --git a/packages/app-council/src/Overview/VoteValue.tsx b/packages/app-council/src/Overview/VoteValue.tsx
index 9bb6af6fc7d9..72a61c77f351 100644
--- a/packages/app-council/src/Overview/VoteValue.tsx
+++ b/packages/app-council/src/Overview/VoteValue.tsx
@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DerivedBalances } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
 
 import BN from 'bn.js';
 import React, { useEffect, useState } from 'react';
@@ -12,9 +11,9 @@ import { useApi, useCall } from '@polkadot/react-hooks';
 import { BalanceVoting } from '@polkadot/react-query';
 import { formatBalance, isBn } from '@polkadot/util';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
+interface Props {
   accountId?: string | null;
   onChange: (value: BN) => void;
 }
@@ -24,7 +23,8 @@ interface ValueState {
   value?: BN | string;
 }
 
-function VoteValue ({ accountId, onChange, t }: Props): React.ReactElement<Props> | null {
+export default function VoteValue ({ accountId, onChange }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const { api } = useApi();
   const allBalances = useCall<DerivedBalances>(api.derive.balances.all as any, [accountId]);
   const [{ selectedId, value }, setValue] = useState<ValueState>({});
@@ -69,5 +69,3 @@ function VoteValue ({ accountId, onChange, t }: Props): React.ReactElement<Props
     />
   );
 }
-
-export default translate(VoteValue);
diff --git a/packages/app-council/src/Overview/Voters.tsx b/packages/app-council/src/Overview/Voters.tsx
index 44681942d336..4518e8938870 100644
--- a/packages/app-council/src/Overview/Voters.tsx
+++ b/packages/app-council/src/Overview/Voters.tsx
@@ -2,19 +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 { AccountId } from '@polkadot/types/interfaces';
 
 import React from 'react';
 import { AddressMini } from '@polkadot/react-components';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
+interface Props {
   voters: AccountId[];
 }
 
-function Voters ({ voters, t }: Props): React.ReactElement<Props> | null {
+export default function Voters ({ voters }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
+
   return (
     <details>
       <summary>
@@ -34,5 +35,3 @@ function Voters ({ voters, t }: Props): React.ReactElement<Props> | null {
     </details>
   );
 }
-
-export default translate(Voters);
diff --git a/packages/app-dashboard/src/Entry.tsx b/packages/app-dashboard/src/Entry.tsx
index 9db7b1194b35..661d8de607db 100644
--- a/packages/app-dashboard/src/Entry.tsx
+++ b/packages/app-dashboard/src/Entry.tsx
@@ -3,20 +3,22 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { Route } from '@polkadot/apps-routing/types';
-import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { Icon } from '@polkadot/react-components';
 
-import translate from './translate';
+import { useTranslation } from './translate';
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   route: Route;
 }
 
-function Entry ({ className, route: { i18n, icon, name }, t }: Props): React.ReactElement<Props> {
+function Entry ({ className, route: { i18n, icon, name } }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+
   return (
     <div className={className}>
       <Link to={`/${name}`}>
@@ -32,8 +34,8 @@ function Entry ({ className, route: { i18n, icon, name }, t }: Props): React.Rea
   );
 }
 
-export default translate(styled(Entry)`
+export default styled(Entry)`
   .name {
     margin-top: 0.75rem;
   }
-`);
+`;
diff --git a/packages/react-signer/src/Checks/Proposal.tsx b/packages/react-signer/src/Checks/Proposal.tsx
index 679078c4bc93..457d50f09c6d 100644
--- a/packages/react-signer/src/Checks/Proposal.tsx
+++ b/packages/react-signer/src/Checks/Proposal.tsx
@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DerivedFees } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
 import { ExtraFees } from './types';
 
 import BN from 'bn.js';
@@ -13,9 +12,9 @@ import { Icon } 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 {
   deposit: BN | Compact<UInt>;
   fees: DerivedFees;
   democracy_minimumDeposit?: BN;
@@ -28,7 +27,8 @@ interface State extends ExtraFees {
 
 const ZERO = new BN(0);
 
-export function Proposal ({ deposit, onChange, t }: Props): React.ReactElement<Props> {
+export default function Proposal ({ deposit, onChange }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { api } = useApi();
   const minDeposit = api.consts.democracy.minimumDeposit || useCall<BN>(api.query.democracy.minimumDeposit, []);
   const [{ extraAmount, isBelowMinimum }, setState] = useState<State>({
@@ -84,5 +84,3 @@ export function Proposal ({ deposit, onChange, t }: Props): React.ReactElement<P
     </>
   );
 }
-
-export default translate(Proposal);
diff --git a/packages/react-signer/src/Checks/Transfer.tsx b/packages/react-signer/src/Checks/Transfer.tsx
index 5e88a18cde35..cabe98b38c16 100644
--- a/packages/react-signer/src/Checks/Transfer.tsx
+++ b/packages/react-signer/src/Checks/Transfer.tsx
@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DerivedBalances, DerivedFees } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
 import { AccountId } from '@polkadot/types/interfaces';
 import { ExtraFees } from './types';
 
@@ -14,9 +13,9 @@ import { Icon } 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 {
   amount: BN | Compact<UInt>;
   fees: DerivedFees;
   recipientId: string | AccountId;
@@ -28,7 +27,8 @@ interface State extends ExtraFees {
   isNoEffect: boolean;
 }
 
-export function Transfer ({ amount, fees, onChange, recipientId, t }: Props): React.ReactElement<Props> {
+export default function Transfer ({ amount, fees, onChange, recipientId }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { api } = useApi();
   const allBalances = useCall<DerivedBalances>(api.derive.balances.all as any, [recipientId]);
   const [{ isCreation, isNoEffect }, setState] = useState<State>({
@@ -88,5 +88,3 @@ export function Transfer ({ amount, fees, onChange, recipientId, t }: Props): Re
     </>
   );
 }
-
-export default translate(Transfer);
diff --git a/packages/react-signer/src/PasswordCheck.tsx b/packages/react-signer/src/PasswordCheck.tsx
index 3a48248ed2f7..9297235d5565 100644
--- a/packages/react-signer/src/PasswordCheck.tsx
+++ b/packages/react-signer/src/PasswordCheck.tsx
@@ -2,27 +2,25 @@
 // 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 from 'react';
 import styled from 'styled-components';
 
-import translate from './translate';
+import { useTranslation } from './translate';
 
-interface Props extends I18nProps {
+interface Props {
   className?: string;
   unlockError?: string | null;
 }
 
-function PasswordCheck ({ className, unlockError, t }: Props): React.ReactElement<Props> | null {
+function PasswordCheck ({ className, unlockError }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
+
   return unlockError
     ? <div className={className}>{t('wrong password')}</div>
     : null;
 }
 
-export default translate(
-  styled(PasswordCheck)`
-    margin-left: 15em;
-    color: #9f3a38;
-  `
-);
+export default styled(PasswordCheck)`
+  margin-left: 15em;
+  color: #9f3a38;
+`;
diff --git a/packages/react-signer/src/Qr.tsx b/packages/react-signer/src/Qr.tsx
index 2726f92390e9..666900d849df 100644
--- a/packages/react-signer/src/Qr.tsx
+++ b/packages/react-signer/src/Qr.tsx
@@ -2,16 +2,15 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps, BareProps } from '@polkadot/react-components/types';
+import { BareProps } from '@polkadot/react-components/types';
 
 import React from 'react';
 import styled from 'styled-components';
 import { QrDisplayPayload, QrScanSignature } from '@polkadot/react-qr';
 
-import translate from './translate';
-
-interface Props extends I18nProps, BareProps {
+interface Props extends BareProps {
   address: string;
+  className?: string;
   isScanning: boolean;
   onSignature: (signature: { signature: string }) => void;
   payload: Uint8Array;
@@ -35,9 +34,7 @@ function Qr ({ address, className, isScanning, onSignature, payload }: Props): R
   );
 }
 
-export default translate(
-  styled(Qr)`
-    margin: 0 auto;
-    max-width: 30rem;
-  `
-);
+export default styled(Qr)`
+  margin: 0 auto;
+  max-width: 30rem;
+`;
diff --git a/packages/react-signer/src/Transaction.tsx b/packages/react-signer/src/Transaction.tsx
index 8a8fca830f22..5edf325a7a5f 100644
--- a/packages/react-signer/src/Transaction.tsx
+++ b/packages/react-signer/src/Transaction.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 { QueueTx } from '@polkadot/react-components/Status/types';
 
 import BN from 'bn.js';
@@ -11,9 +10,9 @@ import { registry } from '@polkadot/react-api';
 import { Call, InputAddress, Modal } from '@polkadot/react-components';
 
 import Checks from './Checks';
-import translate from './translate';
+import { useTranslation } from './translate';
 
-interface Props extends I18nProps {
+interface Props {
   children?: React.ReactNode;
   hideDetails?: boolean;
   isSendable: boolean;
@@ -22,7 +21,9 @@ interface Props extends I18nProps {
   value: QueueTx;
 }
 
-function Transaction ({ children, hideDetails, isSendable, onError, value: { accountId, extrinsic, isUnsigned }, t, tip }: Props): React.ReactElement<Props> | null {
+export default function Transaction ({ children, hideDetails, isSendable, onError, value: { accountId, extrinsic, isUnsigned }, tip }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
+
   if (!extrinsic) {
     return null;
   }
@@ -67,5 +68,3 @@ function Transaction ({ children, hideDetails, isSendable, onError, value: { acc
     </>
   );
 }
-
-export default translate(Transaction);
diff --git a/packages/react-signer/src/Unlock.tsx b/packages/react-signer/src/Unlock.tsx
index 8a3132aae690..d9479d046f43 100644
--- a/packages/react-signer/src/Unlock.tsx
+++ b/packages/react-signer/src/Unlock.tsx
@@ -2,16 +2,15 @@
 // 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 { KeyringPair } from '@polkadot/keyring/types';
 
 import React, { useState } from 'react';
 import { Password } from '@polkadot/react-components';
 import keyring from '@polkadot/ui-keyring';
 
-import translate from './translate';
+import { useTranslation } from './translate';
 
-interface Props extends I18nProps {
+interface Props {
   autoFocus?: boolean;
   error?: string;
   onChange: (password: string) => void;
@@ -29,7 +28,8 @@ function getPair (address?: string | null): KeyringPair | null {
   }
 }
 
-function Unlock ({ autoFocus, error, onChange, onEnter, password, t, tabIndex, value }: Props): React.ReactElement<Props> | null {
+export default function Unlock ({ autoFocus, error, onChange, onEnter, password, tabIndex, value }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const [pair] = useState<KeyringPair | null>(getPair(value));
 
   if (!pair || !(pair.isLocked) || pair.meta.isInjected) {
@@ -50,5 +50,3 @@ function Unlock ({ autoFocus, error, onChange, onEnter, password, t, tabIndex, v
     </div>
   );
 }
-
-export default translate(Unlock);