diff --git a/packages/app-treasury/src/Overview/Proposals.tsx b/packages/app-treasury/src/Overview/Proposals.tsx index 026b4dca60..22dbd49de6 100644 --- a/packages/app-treasury/src/Overview/Proposals.tsx +++ b/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 { +export default function ProposalsBase ({ className, isApprovals, proposals }: Props): React.ReactElement { + 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. ); } - -export default translate(ProposalsBase); diff --git a/packages/app-treasury/src/Overview/Propose.tsx b/packages/app-treasury/src/Overview/Propose.tsx index 1d40dff093..1b1a862b9f 100644 --- a/packages/app-treasury/src/Overview/Propose.tsx +++ b/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 | null { +interface Props { + className?: string; +} + +export default function Propose ({ className }: Props): React.ReactElement | null { + const { t } = useTranslation(); const { hasAccounts } = useAccounts(); const [accountId, setAccountId] = useState(null); const [beneficiary, setBeneficiary] = useState(null); @@ -90,5 +93,3 @@ function Propose ({ className, t }: Props): React.ReactElement | null { ); } - -export default translate(Propose); diff --git a/packages/app-treasury/src/Overview/Summary.tsx b/packages/app-treasury/src/Overview/Summary.tsx index 057bf91942..39d99049f5 100644 --- a/packages/app-treasury/src/Overview/Summary.tsx +++ b/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 { +export default function Summary ({ approvalCount, proposalCount }: Props): React.ReactElement { + const { t } = useTranslation(); const { api } = useApi(); const pot = useCall(api.query.treasury.pot, []); const bestNumber = useCall(api.derive.chain.bestNumber as any, []); @@ -63,5 +62,3 @@ function Summary ({ approvalCount, proposalCount, t }: Props): React.ReactElemen ); } - -export default translate(Summary); diff --git a/packages/app-treasury/src/index.tsx b/packages/app-treasury/src/index.tsx index 8632bb4127..c65891684c 100644 --- a/packages/app-treasury/src/index.tsx +++ b/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 { + const { t } = useTranslation(); -function TreasuryApp ({ basePath, t }: Props): React.ReactElement { return (
@@ -39,5 +41,3 @@ function TreasuryApp ({ basePath, t }: Props): React.ReactElement {
); } - -export default translate(TreasuryApp); diff --git a/packages/apps/src/SideBar/Item.tsx b/packages/apps/src/SideBar/Item.tsx index 4081d58f2e..2c2cdd4ceb 100644 --- a/packages/apps/src/SideBar/Item.tsx +++ b/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 | null { +export default function Item ({ route: { Modal, useCounter = DUMMY_COUNTER, display, i18n, icon, name }, isCollapsed, onClick }: Props): React.ReactElement | null { + const { t } = useTranslation(); const { allAccounts, hasAccounts } = useAccounts(); const apiProps = useApi(); const sudoKey = useCall(apiProps.isApiReady ? apiProps.api.query.sudo?.key : undefined, []); @@ -141,5 +141,3 @@ function Item ({ route: { Modal, useCounter = DUMMY_COUNTER, display, i18n, icon ); } - -export default translate(Item); diff --git a/packages/apps/src/modals/Network.tsx b/packages/apps/src/modals/Network.tsx index aed9842b64..b38c68bfbb 100644 --- a/packages/apps/src/modals/Network.tsx +++ b/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 { +export default function NetworkModal ({ className, onClose }: Props): React.ReactElement { + const { t } = useTranslation(); + return ( ); } - -export default translate(NetworkModal); diff --git a/packages/apps/src/overlays/Accounts.tsx b/packages/apps/src/overlays/Accounts.tsx index 9f3d481b7a..f15c66decc 100644 --- a/packages/apps/src/overlays/Accounts.tsx +++ b/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 | null { +interface Props { + className?: string; +} + +function Accounts ({ className }: Props): React.ReactElement | 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 | null { ); } -export default translate( - styled(Accounts)` - background: #fff6cb; - border-color: #e7c000; - color: #6b5900; - ` -); +export default styled(Accounts)` + background: #fff6cb; + border-color: #e7c000; + color: #6b5900; +`; diff --git a/packages/react-components/src/Button/Or.tsx b/packages/react-components/src/Button/Or.tsx index 9476ac68e1..8dd0d537c8 100644 --- a/packages/react-components/src/Button/Or.tsx +++ b/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 { +export default function ButtonOr ({ className, style, text }: Props): React.ReactElement { + const { t } = useTranslation(); + return ( ); } - -export default translate(ButtonOr); diff --git a/packages/react-components/src/ErrorBoundary.tsx b/packages/react-components/src/ErrorBoundary.tsx index 1e4b69b0d6..49b69be894 100644 --- a/packages/react-components/src/ErrorBoundary.tsx +++ b/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 { state: State = { hasError: false }; diff --git a/packages/react-components/src/InputConsts/index.tsx b/packages/react-components/src/InputConsts/index.tsx index dc67774cd4..be8b352a3f 100644 --- a/packages/react-components/src/InputConsts/index.tsx +++ b/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 { +export default function InputConsts ({ className, defaultValue, help, label, onChange, style, withLabel }: Props): React.ReactElement { const { api } = useApi(); const [optionsMethod, setOptionsMethod] = useState(keyOptions(api, defaultValue.section)); const [optionsSection] = useState(sectionOptions(api)); @@ -99,5 +99,3 @@ function InputConsts ({ className, defaultValue, help, label, onChange, style, w ); } - -export default translate(InputConsts); diff --git a/packages/react-components/src/InputExtrinsic/index.tsx b/packages/react-components/src/InputExtrinsic/index.tsx index 76c56eb240..776c5ffb2f 100644 --- a/packages/react-components/src/InputExtrinsic/index.tsx +++ b/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 { +export default function InputExtrinsic ({ className, defaultValue, help, label, onChange, style, withLabel }: Props): React.ReactElement { const { api } = useApi(); const [optionsMethod, setOptionsMethod] = useState(methodOptions(api, defaultValue.section)); const [optionsSection] = useState(sectionOptions(api)); @@ -84,5 +84,3 @@ function InputExtrinsic ({ className, defaultValue, help, label, onChange, style ); } - -export default translate(InputExtrinsic); diff --git a/packages/react-components/src/InputRpc/index.tsx b/packages/react-components/src/InputRpc/index.tsx index 958e975fcc..f5d9646b47 100644 --- a/packages/react-components/src/InputRpc/index.tsx +++ b/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 { +export default function InputRpc ({ className, defaultValue, help, label, onChange, style, withLabel }: Props): React.ReactElement { const { api } = useApi(); const [optionsMethod, setOptionsMethod] = useState(methodOptions(api, defaultValue.section)); const [optionsSection] = useState(sectionOptions(api)); @@ -84,5 +84,3 @@ function InputRpc ({ className, defaultValue, help, label, onChange, style, with ); } - -export default translate(InputRpc); diff --git a/packages/react-components/src/InputStorage/index.tsx b/packages/react-components/src/InputStorage/index.tsx index c2213202cb..7cd2e7dcf0 100644 --- a/packages/react-components/src/InputStorage/index.tsx +++ b/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 { +export default function InputStorage ({ className, defaultValue, help, label, onChange, style, withLabel }: Props): React.ReactElement { const { api } = useApi(); const [optionsMethod, setOptionsMethod] = useState(keyOptions(api, defaultValue.creator.section)); const [optionsSection] = useState(sectionOptions(api)); @@ -83,5 +83,3 @@ function InputStorage ({ className, defaultValue, help, label, onChange, style, ); } - -export default translate(InputStorage);