Additional useTranslation

packages/app-claims/src/Claim.tsx

@@ -4,23 +4,24 @@
 
 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';
 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;
+  }
+`;

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

@@ -3,38 +3,36 @@
 // 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';
 
 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;
   onClose: () => void;
 }
 
 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;
+  }
+`;

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);

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);

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);

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);

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);

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);