Additional useTranslation usage (#2133)

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

@@ -1,10 +1,8 @@
-/* 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 { DerivedTreasuryProposal } 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,14 +11,16 @@ import { Table } from '@polkadot/react-components';
 import { useApi, useAccounts, useCall } from '@polkadot/react-hooks';
 
 import Proposal from './Proposal';
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
-  proposals?: DerivedTreasuryProposal[];
+interface Props {
+  className?: string;
   isApprovals?: boolean;
+  proposals?: DerivedTreasuryProposal[];
 }
 
-function ProposalsBase ({ className, isApprovals, proposals, t }: Props): React.ReactElement<Props> {
+export default function ProposalsBase ({ className, isApprovals, proposals }: 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, []);
@@ -62,5 +62,3 @@ function ProposalsBase ({ className, isApprovals, proposals, t }: Props): React.
     </div>
   );
 }
-
-export default translate(ProposalsBase);

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

@@ -2,16 +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 as Props } from '@polkadot/react-components/types';
-
 import BN from 'bn.js';
 import React, { useState } from 'react';
 import { Button, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
 import { useAccounts } from '@polkadot/react-hooks';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-function Propose ({ className, t }: Props): React.ReactElement<Props> | null {
+interface Props {
+  className?: string;
+}
+
+export default function Propose ({ className }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const { hasAccounts } = useAccounts();
   const [accountId, setAccountId] = useState<string | null>(null);
   const [beneficiary, setBeneficiary] = useState<string | null>(null);
@@ -90,5 +93,3 @@ function Propose ({ className, t }: Props): React.ReactElement<Props> | null {
     </>
   );
 }
-
-export default translate(Propose);

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

@@ -2,24 +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 from 'react';
 import { SummaryBox, CardSummary } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 import { formatBalance, formatNumber, stringToU8a } from '@polkadot/util';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
 const TREASURY_ACCOUNT = stringToU8a('modlpy/trsry'.padEnd(32, '\0'));
 
-interface Props extends I18nProps {
+interface Props {
   approvalCount?: number;
   proposalCount?: number;
 }
 
-function Summary ({ approvalCount, proposalCount, t }: Props): React.ReactElement<Props> {
+export default function Summary ({ approvalCount, proposalCount }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { api } = useApi();
   const pot = useCall<BN>(api.query.treasury.pot, []);
   const bestNumber = useCall<BN>(api.derive.chain.bestNumber as any, []);
@@ -63,5 +62,3 @@ function Summary ({ approvalCount, proposalCount, t }: Props): React.ReactElemen
     </SummaryBox>
   );
 }
-
-export default translate(Summary);

packages/app-treasury/src/index.tsx

@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { AppProps, BareProps, I18nProps } from '@polkadot/react-components/types';
+import { AppProps, BareProps } from '@polkadot/react-components/types';
 
 import React from 'react';
 import { Route, Switch } from 'react-router';
@@ -11,13 +11,15 @@ import { HelpOverlay, Tabs } from '@polkadot/react-components';
 import basicMd from './md/basic.md';
 import Overview from './Overview';
 
-import translate from './translate';
+import { useTranslation } from './translate';
 
 export { default as useCounter } from './useCounter';
 
-interface Props extends AppProps, BareProps, I18nProps {}
+interface Props extends AppProps, BareProps {}
+
+export default function TreasuryApp ({ basePath }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
 
-function TreasuryApp ({ basePath, t }: Props): React.ReactElement<Props> {
   return (
     <main className='treasury--App'>
       <HelpOverlay md={basicMd} />
@@ -39,5 +41,3 @@ function TreasuryApp ({ basePath, t }: Props): React.ReactElement<Props> {
     </main>
   );
 }
-
-export default translate(TreasuryApp);

packages/apps/src/SideBar/Item.tsx

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { ApiProps } from '@polkadot/react-api/types';
-import { I18nProps } from '@polkadot/react-components/types';
 import { Route } from '@polkadot/apps-routing/types';
 import { AccountId } from '@polkadot/types/interfaces';
 
@@ -14,11 +13,11 @@ import { Badge, Icon, Menu, Tooltip } from '@polkadot/react-components';
 import { useAccounts, useApi, useCall } from '@polkadot/react-hooks';
 import { isFunction } from '@polkadot/util';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
 const DUMMY_COUNTER = (): number => 0;
 
-interface Props extends I18nProps {
+interface Props {
   isCollapsed: boolean;
   onClick: () => void;
   route: Route;
@@ -74,7 +73,8 @@ function checkVisible (name: string, { api, isApiReady, isApiConnected }: ApiPro
   return notFound.length === 0;
 }
 
-function Item ({ route: { Modal, useCounter = DUMMY_COUNTER, display, i18n, icon, name }, t, isCollapsed, onClick }: Props): React.ReactElement<Props> | null {
+export default function Item ({ route: { Modal, useCounter = DUMMY_COUNTER, display, i18n, icon, name }, isCollapsed, onClick }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const { allAccounts, hasAccounts } = useAccounts();
   const apiProps = useApi();
   const sudoKey = useCall<AccountId>(apiProps.isApiReady ? apiProps.api.query.sudo?.key : undefined, []);
@@ -141,5 +141,3 @@ function Item ({ route: { Modal, useCounter = DUMMY_COUNTER, display, i18n, icon
     </Menu.Item>
   );
 }
-
-export default translate(Item);

packages/apps/src/modals/Network.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 React from 'react';
 import { Modal } from '@polkadot/react-components';
 import General from '@polkadot/app-settings/General';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   onClose: () => void;
 }
 
-function NetworkModal ({ className, onClose, t }: Props): React.ReactElement<Props> {
+export default function NetworkModal ({ className, onClose }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+
   return (
     <Modal
       className={className}
@@ -30,5 +31,3 @@ function NetworkModal ({ className, onClose, t }: Props): React.ReactElement<Pro
     </Modal>
   );
 }
-
-export default translate(NetworkModal);

packages/apps/src/overlays/Accounts.tsx

@@ -2,17 +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 as Props } from '@polkadot/react-components/types';
-
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { useAccounts, useApi } from '@polkadot/react-hooks';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import BaseOverlay from './Base';
 
-function Accounts ({ className, t }: Props): React.ReactElement<Props> | null {
+interface Props {
+  className?: string;
+}
+
+function Accounts ({ className }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const { hasAccounts } = useAccounts();
   const { isApiReady } = useApi();
   const [isHidden, setIsHidden] = useState(false);
@@ -41,10 +44,8 @@ function Accounts ({ className, t }: Props): React.ReactElement<Props> | null {
   );
 }
 
-export default translate(
-  styled(Accounts)`
-    background: #fff6cb;
-    border-color: #e7c000;
-    color: #6b5900;
-  `
-);
+export default styled(Accounts)`
+  background: #fff6cb;
+  border-color: #e7c000;
+  color: #6b5900;
+`;

packages/react-components/src/Button/Or.tsx

@@ -2,19 +2,21 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps } from '../types';
-
 import React from 'react';
 import SUIButton from 'semantic-ui-react/dist/commonjs/elements/Button/Button';
 import { isUndefined } from '@polkadot/util';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
+  style?: any;
   text?: string;
 }
 
-function ButtonOr ({ className, style, t, text }: Props): React.ReactElement<Props> {
+export default function ButtonOr ({ className, style, text }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+
   return (
     <SUIButton.Or
       className={className}
@@ -27,5 +29,3 @@ function ButtonOr ({ className, style, t, text }: Props): React.ReactElement<Pro
     />
   );
 }
-
-export default translate(ButtonOr);

packages/react-components/src/ErrorBoundary.tsx

@@ -18,6 +18,7 @@ interface State {
   hasError: boolean;
 }
 
+// NOTE: This is the only way to do an error boundary, via extend
 class ErrorBoundary extends React.Component<Props> {
   state: State = { hasError: false };
 

packages/react-components/src/InputConsts/index.tsx

@@ -4,7 +4,6 @@
 
 import { ConstantCodec } from '@polkadot/metadata/Decorated/types';
 import { DropdownOptions } from '../util/types';
-import { I18nProps } from '../types';
 import { ConstValue, ConstValueBase } from './types';
 
 import '../InputExtrinsic/InputExtrinsic.css';
@@ -14,18 +13,19 @@ import { ApiPromise } from '@polkadot/api';
 import { useApi } from '@polkadot/react-hooks';
 
 import Labelled from '../Labelled';
-import translate from '../translate';
 import SelectKey from './SelectKey';
 import SelectSection from './SelectSection';
 import keyOptions from './options/key';
 import sectionOptions from './options/section';
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   defaultValue: ConstValueBase;
   help?: React.ReactNode;
   isError?: boolean;
   label: React.ReactNode;
   onChange?: (value: ConstValue) => void;
+  style?: any;
   withLabel?: boolean;
 }
 
@@ -42,7 +42,7 @@ function getValue (api: ApiPromise, { method, section }: ConstValueBase): ConstV
   };
 }
 
-function InputConsts ({ className, defaultValue, help, label, onChange, style, withLabel }: Props): React.ReactElement<Props> {
+export default function InputConsts ({ className, defaultValue, help, label, onChange, style, withLabel }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const [optionsMethod, setOptionsMethod] = useState<DropdownOptions>(keyOptions(api, defaultValue.section));
   const [optionsSection] = useState<DropdownOptions>(sectionOptions(api));
@@ -99,5 +99,3 @@ function InputConsts ({ className, defaultValue, help, label, onChange, style, w
     </div>
   );
 }
-
-export default translate(InputConsts);

packages/react-components/src/InputExtrinsic/index.tsx

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { CallFunction } from '@polkadot/types/types';
-import { I18nProps } from '../types';
 import { DropdownOptions } from '../util/types';
 
 import './InputExtrinsic.css';
@@ -12,13 +11,13 @@ import React, { useState } from 'react';
 import { useApi } from '@polkadot/react-hooks';
 
 import Labelled from '../Labelled';
-import translate from '../translate';
 import SelectMethod from './SelectMethod';
 import SelectSection from './SelectSection';
 import methodOptions from './options/method';
 import sectionOptions from './options/section';
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   defaultValue: CallFunction;
   help?: React.ReactNode;
   isDisabled?: boolean;
@@ -26,10 +25,11 @@ interface Props extends I18nProps {
   isPrivate?: boolean;
   label: React.ReactNode;
   onChange: (value: CallFunction) => void;
+  style?: any;
   withLabel?: boolean;
 }
 
-function InputExtrinsic ({ className, defaultValue, help, label, onChange, style, withLabel }: Props): React.ReactElement<Props> {
+export default function InputExtrinsic ({ className, defaultValue, help, label, onChange, style, withLabel }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const [optionsMethod, setOptionsMethod] = useState<DropdownOptions>(methodOptions(api, defaultValue.section));
   const [optionsSection] = useState<DropdownOptions>(sectionOptions(api));
@@ -84,5 +84,3 @@ function InputExtrinsic ({ className, defaultValue, help, label, onChange, style
     </div>
   );
 }
-
-export default translate(InputExtrinsic);

packages/react-components/src/InputRpc/index.tsx

@@ -6,7 +6,6 @@
 
 import { RpcMethod } from '@polkadot/jsonrpc/types';
 import { DropdownOptions } from '../util/types';
-import { I18nProps } from '../types';
 
 import '../InputExtrinsic/InputExtrinsic.css';
 
@@ -15,22 +14,23 @@ import map from '@polkadot/jsonrpc';
 import { useApi } from '@polkadot/react-hooks';
 
 import Labelled from '../Labelled';
-import translate from '../translate';
 import SelectMethod from './SelectMethod';
 import SelectSection from './SelectSection';
 import methodOptions from './options/method';
 import sectionOptions from './options/section';
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   defaultValue: RpcMethod;
   help?: React.ReactNode;
   isError?: boolean;
   label: React.ReactNode;
   onChange?: (value: RpcMethod) => void;
+  style?: any;
   withLabel?: boolean;
 }
 
-function InputRpc ({ className, defaultValue, help, label, onChange, style, withLabel }: Props): React.ReactElement<Props> {
+export default function InputRpc ({ className, defaultValue, help, label, onChange, style, withLabel }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const [optionsMethod, setOptionsMethod] = useState<DropdownOptions>(methodOptions(api, defaultValue.section));
   const [optionsSection] = useState<DropdownOptions>(sectionOptions(api));
@@ -84,5 +84,3 @@ function InputRpc ({ className, defaultValue, help, label, onChange, style, with
     </div>
   );
 }
-
-export default translate(InputRpc);

packages/react-components/src/InputStorage/index.tsx

@@ -5,7 +5,6 @@
 // TODO: We have a lot shared between this and InputExtrinsic
 
 import { DropdownOptions } from '../util/types';
-import { I18nProps } from '../types';
 import { StorageEntryPromise } from './types';
 
 import '../InputExtrinsic/InputExtrinsic.css';
@@ -14,22 +13,23 @@ import React, { useState } from 'react';
 import { useApi } from '@polkadot/react-hooks';
 
 import Labelled from '../Labelled';
-import translate from '../translate';
 import SelectKey from './SelectKey';
 import SelectSection from './SelectSection';
 import keyOptions from './options/key';
 import sectionOptions from './options/section';
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   defaultValue: StorageEntryPromise;
   help?: React.ReactNode;
   isError?: boolean;
   label: React.ReactNode;
   onChange?: (value: StorageEntryPromise) => void;
+  style?: any;
   withLabel?: boolean;
 }
 
-function InputStorage ({ className, defaultValue, help, label, onChange, style, withLabel }: Props): React.ReactElement<Props> {
+export default function InputStorage ({ className, defaultValue, help, label, onChange, style, withLabel }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const [optionsMethod, setOptionsMethod] = useState<DropdownOptions>(keyOptions(api, defaultValue.creator.section));
   const [optionsSection] = useState<DropdownOptions>(sectionOptions(api));
@@ -83,5 +83,3 @@ function InputStorage ({ className, defaultValue, help, label, onChange, style,
     </div>
   );
 }
-
-export default translate(InputStorage);