From 4600a38bb36df3ffa7e58dc4dd8c699c249b7e4c Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Mon, 20 Jan 2020 17:20:04 +0100 Subject: [PATCH] useTranslation Suspense fallback (#2158) * useTranslation Suspense fallback * import path * Some small useTranslation conversions --- packages/app-parachains/src/index.tsx | 12 +- packages/app-society/src/index.tsx | 5 +- .../InputValidationUnstakeThreshold.tsx | 11 +- .../src/Actions/Account/Nominate.tsx | 103 ++++++----- .../src/Actions/Account/SetSessionKey.tsx | 11 +- packages/app-staking/src/Actions/index.tsx | 11 +- packages/app-staking/src/Overview/Address.tsx | 120 +++++++------ .../app-staking/src/Overview/CurrentList.tsx | 10 +- packages/app-staking/src/Overview/Summary.tsx | 33 ++-- packages/app-staking/src/Query/Validator.tsx | 10 +- packages/app-staking/src/Query/index.tsx | 11 +- packages/app-staking/src/Targets/Summary.tsx | 10 +- .../app-staking/src/Targets/Validator.tsx | 10 +- packages/app-staking/src/Targets/index.tsx | 25 ++- packages/app-storage/src/Query.tsx | 36 ++-- packages/app-storage/src/Selection/Consts.tsx | 12 +- packages/app-storage/src/Selection/Raw.tsx | 12 +- packages/app-storage/src/Selection/index.tsx | 10 +- packages/app-storage/src/index.tsx | 9 +- packages/app-sudo/src/SetKey.tsx | 33 ++-- packages/app-sudo/src/index.tsx | 12 +- .../app-tech-comm/src/Overview/Members.tsx | 13 +- .../app-tech-comm/src/Overview/Summary.tsx | 12 +- packages/app-tech-comm/src/Overview/index.tsx | 10 +- .../app-tech-comm/src/Proposals/Proposal.tsx | 11 +- .../app-tech-comm/src/Proposals/Propose.tsx | 16 +- .../app-tech-comm/src/Proposals/Voting.tsx | 20 +-- .../app-tech-comm/src/Proposals/index.tsx | 22 +-- packages/app-tech-comm/src/index.tsx | 11 +- packages/app-toolbox/src/Hash.tsx | 9 +- packages/app-toolbox/src/Rpc/Account.tsx | 20 +-- packages/app-toolbox/src/Rpc/Selection.tsx | 2 +- packages/app-toolbox/src/Rpc/translate.ts | 7 - packages/app-toolbox/src/Sign.tsx | 62 ++++--- packages/app-toolbox/src/Verify.tsx | 8 +- packages/app-toolbox/src/index.tsx | 12 +- packages/apps-routing/src/techcomm.ts | 4 +- packages/apps/src/Apps.tsx | 17 +- packages/apps/src/Content/index.tsx | 14 +- packages/apps/src/SideBar/index.tsx | 6 +- packages/apps/src/index.tsx | 35 ++-- packages/react-api/src/Api.tsx | 15 +- .../react-components/src/Status/index.tsx | 163 +++++++++--------- packages/react-hooks/src/useTx.ts | 6 +- 44 files changed, 453 insertions(+), 548 deletions(-) delete mode 100644 packages/app-toolbox/src/Rpc/translate.ts diff --git a/packages/app-parachains/src/index.tsx b/packages/app-parachains/src/index.tsx index 05efbee11e23..1d2115801cb6 100644 --- a/packages/app-parachains/src/index.tsx +++ b/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 { + const { t } = useTranslation(); -function ParachainsApp ({ basePath, t }: Props): React.ReactElement { return (
@@ -34,5 +36,3 @@ function ParachainsApp ({ basePath, t }: Props): React.ReactElement {
); } - -export default translate(ParachainsApp); diff --git a/packages/app-society/src/index.tsx b/packages/app-society/src/index.tsx index 0a98761879cd..fa14442f4c20 100644 --- a/packages/app-society/src/index.tsx +++ b/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 ]} /> - + + + ); } diff --git a/packages/app-staking/src/Actions/Account/InputValidationUnstakeThreshold.tsx b/packages/app-staking/src/Actions/Account/InputValidationUnstakeThreshold.tsx index 754c49d4adaa..7f78f64337ac 100644 --- a/packages/app-staking/src/Actions/Account/InputValidationUnstakeThreshold.tsx +++ b/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 | null { +export default function InputValidationUnstakeThreshold ({ onError, unstakeThreshold }: Props): React.ReactElement | null { + const { t } = useTranslation(); const [error, setError] = useState(null); useEffect((): void => { @@ -45,5 +44,3 @@ function InputValidationUnstakeThreshold ({ onError, t, unstakeThreshold }: Prop ); } - -export default translate(InputValidationUnstakeThreshold); diff --git a/packages/app-staking/src/Actions/Account/Nominate.tsx b/packages/app-staking/src/Actions/Account/Nominate.tsx index be2bd35022a9..0d73da15b935 100644 --- a/packages/app-staking/src/Actions/Account/Nominate.tsx +++ b/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 | null { +function Nominate ({ className, controllerId, nominees, onClose, next, stakingOverview, stashId }: Props): React.ReactElement | null { + const { t } = useTranslation(); const [favorites] = useFavorites(STORE_FAVS_BASE); const [validators, setValidators] = useState([]); const [selection, setSelection] = useState([]); @@ -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; - - .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; - } - - &.isAye { - background: #fff; - border-color: #ccc; - } - - &.member::after { - border-color: green; - } - - &.runnerup::after { - border-color: steelblue; - } - - .ui--AddressMini-icon { - z-index: 1; - } - - .candidate-right { - text-align: right; - } +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; + + &::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; + } + + &.member::after { + border-color: green; + } + + &.runnerup::after { + border-color: steelblue; + } + + .ui--AddressMini-icon { + z-index: 1; + } + + .candidate-right { + text-align: right; } } - ` -); + } +`; diff --git a/packages/app-staking/src/Actions/Account/SetSessionKey.tsx b/packages/app-staking/src/Actions/Account/SetSessionKey.tsx index a68c5400a4e7..89a9f9ff0d66 100644 --- a/packages/app-staking/src/Actions/Account/SetSessionKey.tsx +++ b/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 | null { +export default function SetSessionKey ({ controllerId, isOpen, onClose, sessionIds, stashId }: Props): React.ReactElement | null { + const { t } = useTranslation(); const { isSubstrateV2 } = useApi(); const [keysError, setKeysError] = useState(null); const [keys, setKeys] = useState( @@ -113,5 +112,3 @@ function SetSessionKey ({ controllerId, isOpen, onClose, sessionIds, stashId, t ); } - -export default translate(SetSessionKey); diff --git a/packages/app-staking/src/Actions/index.tsx b/packages/app-staking/src/Actions/index.tsx index 62b625811398..5e1936b12d5e 100644 --- a/packages/app-staking/src/Actions/index.tsx +++ b/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, ); } -function Actions ({ allStashes, className, isVisible, next, recentlyOnline, stakingOverview, t }: Props): React.ReactElement { +export default function Actions ({ allStashes, className, isVisible, next, recentlyOnline, stakingOverview }: Props): React.ReactElement { + const { t } = useTranslation(); const { api } = useApi(); const { allAccounts } = useAccounts(); const queryBonded = useCall[]>(api.query.staking.bonded.multi as any, [allAccounts]); @@ -109,5 +110,3 @@ function Actions ({ allStashes, className, isVisible, next, recentlyOnline, stak ); } - -export default translate(Actions); diff --git a/packages/app-staking/src/Overview/Address.tsx b/packages/app-staking/src/Overview/Address.tsx index acdaeea33629..d50cf2fc9950 100644 --- a/packages/app-staking/src/Overview/Address.tsx +++ b/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; 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 | null { +function Address ({ address, authorsMap, className, filter, filterName, hasQueries, isElected, isFavorite, lastAuthors, myAccounts, points, recentlyOnline, toggleFavorite, withNominations = true }: Props): React.ReactElement | null { + const { t } = useTranslation(); const { api } = useApi(); // FIXME Any horrors, caused by derive type mismatches const info = useCall(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; + .favorite { + cursor: pointer; + display: inline-block; + margin-left: 0.5rem; + margin-right: -0.25rem; - &.isSelected { - color: darkorange; - } + &.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; + .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; - } + &.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; + .blockNumberV2 { + display: inline-block; + padding: 0.25rem 0; - &.isCurrent { - margin-right: -0.25rem; - padding: 0.25rem 0.75rem; - } + &.isCurrent { + margin-right: -0.25rem; + padding: 0.25rem 0.75rem; } + } - .blockNumberV1 { - padding: 0.25rem 0.5rem; - position: absolute; - right: 0; - } + .blockNumberV1 { + padding: 0.25rem 0.5rem; + position: absolute; + right: 0; + } - .staking--Address-info { - margin-right: 0.25rem; - text-align: right; + .staking--Address-info { + margin-right: 0.25rem; + text-align: right; - .staking--label { - margin: 0 2.25rem -0.75rem 0; - } + .staking--label { + margin: 0 2.25rem -0.75rem 0; } + } - .staking--label.controllerSpacer { - margin-top: 0.5rem; - } + .staking--label.controllerSpacer { + margin-top: 0.5rem; + } - .staking--stats { - bottom: 0.75rem; - cursor: pointer; - position: absolute; - right: 0.5rem; - } - ` -); + .staking--stats { + bottom: 0.75rem; + cursor: pointer; + position: absolute; + right: 0.5rem; + } +`; diff --git a/packages/app-staking/src/Overview/CurrentList.tsx b/packages/app-staking/src/Overview/CurrentList.tsx index df0447668812..a31852d15ff1 100644 --- a/packages/app-staking/src/Overview/CurrentList.tsx +++ b/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; 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 | null { +export default function CurrentList ({ authorsMap, hasQueries, isIntentions, isVisible, lastAuthors, next, recentlyOnline, stakingOverview }: Props): React.ReactElement | 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 ); } - -export default translate(CurrentList); diff --git a/packages/app-staking/src/Overview/Summary.tsx b/packages/app-staking/src/Overview/Summary.tsx index a2fc65e5eae5..d6c937189b22 100644 --- a/packages/app-staking/src/Overview/Summary.tsx +++ b/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 { +function Summary ({ className, isVisible, next, stakingOverview, style }: Props): React.ReactElement { + 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; } - ` -); + } +`; diff --git a/packages/app-staking/src/Query/Validator.tsx b/packages/app-staking/src/Query/Validator.tsx index bde688c322d1..5f39b80283e5 100644 --- a/packages/app-staking/src/Query/Validator.tsx +++ b/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 { +export default function Validator ({ className, sessionRewards, validatorId }: Props): React.ReactElement { + const { t } = useTranslation(); const { api } = useApi(); const blockCounts = useBlockCounts(validatorId, sessionRewards); const [blocksLabels, setBlocksLabels] = useState([]); @@ -269,5 +269,3 @@ function Validator ({ className, sessionRewards, t, validatorId }: Props): React ); } - -export default translate(Validator); diff --git a/packages/app-staking/src/Query/index.tsx b/packages/app-staking/src/Query/index.tsx index 5cf610c2caaf..ea3d2ba360b8 100644 --- a/packages/app-staking/src/Query/index.tsx +++ b/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 { +export default function Query ({ className, sessionRewards }: Props): React.ReactElement { + const { t } = useTranslation(); const { value } = useParams(); const [validatorId, setValidatorId] = useState(value || null); @@ -51,5 +52,3 @@ function Query ({ className, sessionRewards, t }: Props): React.ReactElement ); } - -export default translate(Query); diff --git a/packages/app-staking/src/Targets/Summary.tsx b/packages/app-staking/src/Targets/Summary.tsx index b91f58e8c29b..0bbf4e8bf51c 100644 --- a/packages/app-staking/src/Targets/Summary.tsx +++ b/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 { +export default function Summary ({ lastReward, totalStaked }: Props): React.ReactElement { + const { t } = useTranslation(); const { api } = useApi(); const totalInsurance = useCall(api.query.balances.totalIssuance, []); const [{ percentage, staked }, setStakeInfo] = useState({ percentage: '-', staked: null }); @@ -70,5 +70,3 @@ function Summary ({ lastReward, t, totalStaked }: Props): React.ReactElement ); } - -export default translate(Summary); diff --git a/packages/app-staking/src/Targets/Validator.tsx b/packages/app-staking/src/Targets/Validator.tsx index 9caf4e849445..be9300a58069 100644 --- a/packages/app-staking/src/Targets/Validator.tsx +++ b/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 { +export default function Validator ({ info: { accountId, bondOther, bondOwn, bondTotal, commissionPer, isCommission, isFavorite, isNominating, key, numNominators, rankOverall, rewardPayout, validatorPayment }, toggleFavorite }: Props): React.ReactElement { + 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 ); } - -export default translate(Validator); diff --git a/packages/app-staking/src/Targets/index.tsx b/packages/app-staking/src/Targets/index.tsx index 8f6afd457669..9719bf1f288f 100644 --- a/packages/app-staking/src/Targets/index.tsx +++ b/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 { +function Targets ({ className, sessionRewards }: Props): React.ReactElement { + const { t } = useTranslation(); const { api } = useApi(); const { allAccounts } = useAccounts(); const [_amount, setAmount] = useState(new BN(1000)); @@ -207,13 +208,11 @@ function Targets ({ className, sessionRewards, t }: Props): React.ReactElement

void; value: QueryTypes; } @@ -214,22 +212,20 @@ function Query ({ className, onRemove, value }: Props): React.ReactElement { +export default function Consts ({ onAdd }: Props): React.ReactElement { + const { t } = useTranslation(); const { api } = useApi(); const [defaultValue] = useState((): ConstValue => { const section = Object.keys(api.consts)[0]; @@ -54,5 +52,3 @@ function Consts ({ onAdd, t }: Props): React.ReactElement { ); } - -export default translate(Consts); diff --git a/packages/app-storage/src/Selection/Raw.tsx b/packages/app-storage/src/Selection/Raw.tsx index 65a9b322eaf2..c566e16d3c18 100644 --- a/packages/app-storage/src/Selection/Raw.tsx +++ b/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 { +export default function Raw ({ onAdd }: Props): React.ReactElement { + 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 { ); } - -export default translate(Raw); diff --git a/packages/app-storage/src/Selection/index.tsx b/packages/app-storage/src/Selection/index.tsx index 03595350bd0c..d77da5b8edfa 100644 --- a/packages/app-storage/src/Selection/index.tsx +++ b/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 { +export default function Selection ({ basePath, onAdd }: Props): React.ReactElement { + const { t } = useTranslation(); const { isSubstrateV2 } = useApi(); const _onAdd = (query: ParitalQueryTypes): void => onAdd({ ...query, id: ++id }); const _renderComponent = (Component: React.ComponentType): () => React.ReactNode => @@ -64,5 +64,3 @@ function Selection ({ basePath, onAdd, t }: Props): React.ReactElement { ); } - -export default translate(Selection); diff --git a/packages/app-storage/src/index.tsx b/packages/app-storage/src/index.tsx index 8c3f9a5096ee..7cb8c8add04f 100644 --- a/packages/app-storage/src/index.tsx +++ b/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 { +export default function StorageApp ({ basePath }: Props): React.ReactElement { const [queue, setQueue] = useState([]); const _onAdd = (query: QueryTypes): void => setQueue([query, ...queue]); @@ -34,5 +31,3 @@ function StorageApp ({ basePath }: Props): React.ReactElement { ); } - -export default translate(StorageApp); diff --git a/packages/app-sudo/src/SetKey.tsx b/packages/app-sudo/src/SetKey.tsx index 89051acb7fb1..72e0cf82eb37 100644 --- a/packages/app-sudo/src/SetKey.tsx +++ b/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 { +function SetKey ({ allAccounts, className, isMine, sudoKey }: Props): React.ReactElement { + const { t } = useTranslation(); const [selected, setSelected] = useState(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; + } +`; diff --git a/packages/app-sudo/src/index.tsx b/packages/app-sudo/src/index.tsx index d97f56164379..d3cbcb789cf3 100644 --- a/packages/app-sudo/src/index.tsx +++ b/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 { +export default function SudoApp ({ basePath }: Props): React.ReactElement { + const { t } = useTranslation(); const { api } = useApi(); const sudoKey = useCall(api.query.sudo.key, [], { transform: (k): string => k.toString() }); const { allAccounts } = useAccounts(); @@ -79,5 +77,3 @@ function SudoApp ({ basePath, t }: Props): React.ReactElement { ); } - -export default translate(SudoApp); diff --git a/packages/app-tech-comm/src/Overview/Members.tsx b/packages/app-tech-comm/src/Overview/Members.tsx index 2302f9144259..92395ad9b171 100644 --- a/packages/app-tech-comm/src/Overview/Members.tsx +++ b/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 { +export default function Members ({ className, members }: Props): React.ReactElement { + const { t } = useTranslation(); + return (

{members?.length @@ -37,5 +38,3 @@ function Members ({ className, members, t }: Props): React.ReactElement {
); } - -export default translate(Members); diff --git a/packages/app-tech-comm/src/Overview/Summary.tsx b/packages/app-tech-comm/src/Overview/Summary.tsx index 79dcaaa69639..9f2dc426deb5 100644 --- a/packages/app-tech-comm/src/Overview/Summary.tsx +++ b/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 { +export default function Summary ({ className, members, proposals }: Props): React.ReactElement { + const { t } = useTranslation(); const { api } = useApi(); const proposalCount = useCall(api.query.technicalCommittee.proposalCount, []); @@ -36,5 +34,3 @@ function Summary ({ className, members, proposals, t }: Props): React.ReactEleme ); } - -export default translate(Summary); diff --git a/packages/app-tech-comm/src/Overview/index.tsx b/packages/app-tech-comm/src/Overview/index.tsx index 3549b117d299..3f484cd82959 100644 --- a/packages/app-tech-comm/src/Overview/index.tsx +++ b/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 { +export default function Overview ({ className, members, proposals }: Props): React.ReactElement { return (
); } - -export default translate(Overview); diff --git a/packages/app-tech-comm/src/Proposals/Proposal.tsx b/packages/app-tech-comm/src/Proposals/Proposal.tsx index f08676b696c4..09e1f3ead011 100644 --- a/packages/app-tech-comm/src/Proposals/Proposal.tsx +++ b/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 | null { +export default function Proposal ({ className, hash }: Props): React.ReactElement | null { + const { t } = useTranslation(); const { api } = useApi(); const optProposal = useCall>(api.query.technicalCommittee.proposalOf, [hash]); const votes = useCall>(api.query.technicalCommittee.voting, [hash]); @@ -72,5 +73,3 @@ function Proposal ({ className, hash, t }: Props): React.ReactElement | n ); } - -export default translate(Proposal); diff --git a/packages/app-tech-comm/src/Proposals/Propose.tsx b/packages/app-tech-comm/src/Proposals/Propose.tsx index 64651415b8a8..c64c0a2c3563 100644 --- a/packages/app-tech-comm/src/Proposals/Propose.tsx +++ b/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 { - const _hasThreshold = (threshold?: BN | null): boolean => - !!threshold && !threshold.isZero() && threshold.lten(memberCount); - +export default function Propose ({ onClose, memberCount = 0 }: Props): React.ReactElement { + const { t } = useTranslation(); const { apiDefaultTxSudo } = useApi(); const [proposal, setProposal] = useState(null); const [[threshold, hasThreshold], setThreshold] = useState<[BN | null, boolean]>([ @@ -44,6 +41,9 @@ function Propose ({ t, onClose, memberCount = 0 }: Props): React.ReactElement + !!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 ); } - -export default translate(Propose); diff --git a/packages/app-tech-comm/src/Proposals/Voting.tsx b/packages/app-tech-comm/src/Proposals/Voting.tsx index 30ce6d9ff946..faabad1dbb56 100644 --- a/packages/app-tech-comm/src/Proposals/Voting.tsx +++ b/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 | null { +export default function Voting ({ hash, proposalId }: Props): React.ReactElement | null { + const { t } = useTranslation(); const { hasAccounts } = useAccounts(); const [accountId, setAccountId] = useState(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 | nu @@ -56,10 +54,8 @@ function Voting ({ hash, proposalId, t }: Props): React.ReactElement | nu icon='check' isPrimary label={t('Vote')} - onClick={_toggleVoting} + onClick={toggleVoting} /> ); } - -export default translate(Voting); diff --git a/packages/app-tech-comm/src/Proposals/index.tsx b/packages/app-tech-comm/src/Proposals/index.tsx index f67f0811dc2b..437c6e6ec7ae 100644 --- a/packages/app-tech-comm/src/Proposals/index.tsx +++ b/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 { - const [isProposeOpen, setIsProposeOpen] = useState(false); - const _toggleProposal = (): void => setIsProposeOpen(!isProposeOpen); +export default function Proposals ({ className, members, proposals }: Props): React.ReactElement { + const { t } = useTranslation(); + const [isProposeOpen, togglePropose] = useToggle(false); return (
{isProposeOpen && ( )} @@ -32,7 +30,7 @@ function Proposals ({ className, members, proposals, t }: Props): React.ReactEle isPrimary label={t('Submit proposal')} icon='add' - onClick={_toggleProposal} + onClick={togglePropose} /> {proposals?.length @@ -53,5 +51,3 @@ function Proposals ({ className, members, proposals, t }: Props): React.ReactEle
); } - -export default translate(Proposals); diff --git a/packages/app-tech-comm/src/index.tsx b/packages/app-tech-comm/src/index.tsx index b9cdf0e32c8d..1109f03d74db 100644 --- a/packages/app-tech-comm/src/index.tsx +++ b/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 { +export default function TechCommApp ({ basePath, className }: Props): React.ReactElement { + const { t } = useTranslation(); const { api } = useApi(); const members = useCall(api.query.technicalCommittee.members, []); const proposals = useCall(api.query.technicalCommittee.proposals, []); @@ -58,5 +59,3 @@ function TechCommApp ({ basePath, className, t }: Props): React.ReactElement ); } - -export default translate(TechCommApp); diff --git a/packages/app-toolbox/src/Hash.tsx b/packages/app-toolbox/src/Hash.tsx index 8d1d8c121799..8882bfd5233b 100644 --- a/packages/app-toolbox/src/Hash.tsx +++ b/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 { +export default function Hash (): React.ReactElement<{}> { + const { t } = useTranslation(); const [{ data, hash, isHexData }, setState] = useState({ data: '', hash: blake2AsHex(stringToU8a(''), 256), @@ -77,5 +76,3 @@ function Hash ({ t }: Props): React.ReactElement {
); } - -export default translate(Hash); diff --git a/packages/app-toolbox/src/Rpc/Account.tsx b/packages/app-toolbox/src/Rpc/Account.tsx index d350afda015c..5cf9a58bd708 100644 --- a/packages/app-toolbox/src/Rpc/Account.tsx +++ b/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 { +function Account ({ className, defaultValue, isError, onChange }: Props): React.ReactElement { + const { t } = useTranslation(); const [accountId, setAccountId] = useState(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; +`; diff --git a/packages/app-toolbox/src/Rpc/Selection.tsx b/packages/app-toolbox/src/Rpc/Selection.tsx index d3bb3f42d377..7346f48a4f87 100644 --- a/packages/app-toolbox/src/Rpc/Selection.tsx +++ b/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; diff --git a/packages/app-toolbox/src/Rpc/translate.ts b/packages/app-toolbox/src/Rpc/translate.ts deleted file mode 100644 index f6efe823cdda..000000000000 --- a/packages/app-toolbox/src/Rpc/translate.ts +++ /dev/null @@ -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']); diff --git a/packages/app-toolbox/src/Sign.tsx b/packages/app-toolbox/src/Sign.tsx index 29082b837e41..f8dbda94e293 100644 --- a/packages/app-toolbox/src/Sign.tsx +++ b/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 { +function Sign ({ className }: Props): React.ReactElement { + const { t } = useTranslation(); const [currentPair, setCurrentPair] = useState(keyring.getPairs()[0] || null); const [{ data, isHexData }, setData] = useState<{ data: string; isHexData: boolean }>({ data: '', isHexData: false }); const [{ isInjected }, setAccountState] = useState({ @@ -205,38 +205,36 @@ function Sign ({ className, t }: Props): React.ReactElement { ); } -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; } } - ` -); + } +`; diff --git a/packages/app-toolbox/src/Verify.tsx b/packages/app-toolbox/src/Verify.tsx index 682d41ed0b26..1e91e21ad711 100644 --- a/packages/app-toolbox/src/Verify.tsx +++ b/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 { +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 { ); } - -export default translate(Verify); diff --git a/packages/app-toolbox/src/index.tsx b/packages/app-toolbox/src/index.tsx index c9f4e772788f..89bfa73b7a7e 100644 --- a/packages/app-toolbox/src/index.tsx +++ b/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 { +export default function ToolboxApp ({ basePath }: Props): React.ReactElement { + const { t } = useTranslation(); const { hasAccounts } = useAccounts(); const tabs = [ { @@ -60,5 +58,3 @@ function ToolboxApp ({ basePath, t }: Props): React.ReactElement { ); } - -export default translate(ToolboxApp); diff --git a/packages/apps-routing/src/techcomm.ts b/packages/apps-routing/src/techcomm.ts index 7352cc8003a9..fd49398200ff 100644 --- a/packages/apps-routing/src/techcomm.ts +++ b/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.' diff --git a/packages/apps/src/Apps.tsx b/packages/apps/src/Apps.tsx index 46711e74d486..b1312d2c4213 100644 --- a/packages/apps/src/Apps.tsx +++ b/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 { const [sidebar, setSidebar] = useState({ 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): 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 { _setSidebar({ isMenu: transition === SideBarTransition.MINIMISED_AND_EXPANDED, - menuOpen: false, + isMenuOpen: false, transition }); }; @@ -77,16 +76,16 @@ function Apps ({ className }: Props): React.ReactElement { return ( <> -
+
diff --git a/packages/apps/src/Content/index.tsx b/packages/apps/src/Content/index.tsx index 7c70b8e4d3f3..ffe5be61ce3b 100644 --- a/packages/apps/src/Content/index.tsx +++ b/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 { ?
{t('Waiting for API to be connected and ready.')}
: ( <> - + + + void; handleResize: () => void; isCollapsed: boolean; - menuOpen: boolean; + isMenuOpen: boolean; toggleMenu: () => void; } -function SideBar ({ className, collapse, handleResize, isCollapsed, toggleMenu, menuOpen }: Props): React.ReactElement { +function SideBar ({ className, collapse, handleResize, isCollapsed, isMenuOpen, toggleMenu }: Props): React.ReactElement { const { t } = useTranslation(); const { api } = useApi(); const runtimeVersion = useCall(api.rpc.state.subscribeRuntimeVersion, []); @@ -53,7 +53,7 @@ function SideBar ({ className, collapse, handleResize, isCollapsed, toggleMenu, className={classes(className, 'apps-SideBar-Wrapper', isCollapsed ? 'collapsed' : 'expanded')} > {routing.routes.map((route): React.ReactNode => ( diff --git a/packages/apps/src/index.tsx b/packages/apps/src/index.tsx index 65a2020d0509..97efb60624dc 100644 --- a/packages/apps/src/index.tsx +++ b/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( - - - {({ queuePayload, queueSetTxStatus }): React.ReactNode => ( - - - - - - - - - - - - )} - - + + + + + + + + + + + + + , rootElement ); diff --git a/packages/react-api/src/Api.tsx b/packages/react-api/src/Api.tsx index 3181b714f1a1..1c4bdf312316 100644 --- a/packages/react-api/src/Api.tsx +++ b/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 { } as State; } -export default function Api ({ children, queuePayload, queueSetTxStatus, url }: Props): React.ReactElement | null { +export default function Api ({ children, url }: Props): React.ReactElement | null { + const { queuePayload, queueSetTxStatus } = useContext(StatusContext); const [state, setState] = useState({ isApiReady: false } as Partial 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; } diff --git a/packages/react-components/src/Status/index.tsx b/packages/react-components/src/Status/index.tsx index dc8ea5efba0a..2f3baefccfdf 100644 --- a/packages/react-components/src/Status/index.tsx +++ b/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 | null { +function Status ({ className, stqueue = [], txqueue = [] }: Props): React.ReactElement | 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 { - margin-bottom: 0.25rem; - } + .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; - } + .item { + display: block; - .ui--AddressMini { - .ui--AddressMini-address { - min-width: 0; - text-align: left; - } - } - } - - .header { - opacity: 0.66; + > .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; } - .short { - font-size: 2.5rem; - opacity: 0.75; - padding: 0.5rem; - - i.icon { - line-height: 1; + .ui--AddressMini { + .ui--AddressMini-address { + min-width: 0; + text-align: left; } } + } - .padded { - padding: 0.25rem 0 0 0 !important; - } + .header { + opacity: 0.66; + } + + .short { + font-size: 2.5rem; + opacity: 0.75; + padding: 0.5rem; - i.close { - position: absolute; - top: 0.25rem; - right: 0rem; - cursor: pointer; + i.icon { + line-height: 1; } } - &.cancelled > .wrapper > .container { - background: #cd9b1d + .padded { + padding: 0.25rem 0 0 0 !important; } - &.event > .wrapper > .container { - background: teal; + i.close { + position: absolute; + top: 0.25rem; + right: 0rem; + cursor: pointer; } + } - &.completed > .wrapper > .container, - &.finalized > .wrapper > .container, - &.sent > .wrapper > .container, - &.success > .wrapper > .container { - background: green; - } + &.cancelled > .wrapper > .container { + background: #cd9b1d + } - &.dropped > .wrapper > .container, - &.error > .wrapper > .container, - &.invalid > .wrapper > .container, - &.usurped > .wrapper > .container { - background: red; - } + &.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; + } + } +`; diff --git a/packages/react-hooks/src/useTx.ts b/packages/react-hooks/src/useTx.ts index e6eca2cdf93e..9a81836324c0 100644 --- a/packages/react-hooks/src/useTx.ts +++ b/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 (api: ApiPromise, txDef: T): Submittable } export default function useTx (memoFn: (...args: any[]) => TxSource, 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(anAccountId || null); const [isSending, setIsSending] = useState(false);