diff --git a/i18next-scanner.config.js b/i18next-scanner.config.js index eea325d2bcd1..eede4f95c1ca 100644 --- a/i18next-scanner.config.js +++ b/i18next-scanner.config.js @@ -1,7 +1,38 @@ +// Copyright 2017-2020 @polkadot/apps authors & contributors +// This software may be modified and distributed under the terms +// of the Apache-2.0 license. See the LICENSE file for details. + const fs = require('fs'); const path = require('path'); const typescript = require('typescript'); +const findPackages = require('./scripts/findPackages'); + +function transform (file, enc, done) { + const { ext } = path.parse(file.path); + + if (ext === '.tsx') { + const content = fs.readFileSync(file.path, enc); + + const { outputText } = typescript.transpileModule(content, { + compilerOptions: { + target: 'es2018' + }, + fileName: path.basename(file.path) + }); + + const parserHandler = (key, options) => { + options.defaultValue = key; + options.ns = /packages\/(.*?)\/src/g.exec(file.path)[1]; + this.parser.set(key, options); + }; + + this.parser.parseFuncFromString(outputText, parserHandler); + } + + done(); +} + module.exports = { input: [ 'packages/*/src/**/*.{ts,tsx}', @@ -22,37 +53,7 @@ module.exports = { }, lngs: ['en'], defaultLng: 'en', - ns: [ - 'app-123code', - 'app-accounts', - 'app-address-book', - 'app-claims', - 'app-contracts', - 'app-council', - 'app-dashboard', - 'app-democracy', - 'app-explorer', - 'app-extrinsics', - 'app-generic-asset', - 'app-js', - 'app-parachains', - 'app-settings', - 'app-staking', - 'app-storage', - 'app-sudo', - 'app-tech-comm', - 'app-toolbox', - 'app-transfer', - 'app-treasury', - 'apps', - 'apps-routing', - 'react-api', - 'react-components', - 'react-params', - 'react-query', - 'react-signer', - 'ui' - ], + ns: findPackages().map(({ dir }) => dir), defaultNs: 'ui', resource: { loadPath: 'packages/apps/public/locales/{{lng}}/{{ns}}.json', @@ -63,28 +64,5 @@ module.exports = { nsSeparator: false, // namespace separator keySeparator: false // key separator }, - transform: function transform (file, enc, done) { - const { ext } = path.parse(file.path); - - if (ext === '.tsx') { - const content = fs.readFileSync(file.path, enc); - - const { outputText } = typescript.transpileModule(content, { - compilerOptions: { - target: 'es2018' - }, - fileName: path.basename(file.path) - }); - - const parserHandler = (key, options) => { - options.defaultValue = key; - options.ns = /packages\/(.*?)\/src/g.exec(file.path)[1]; - this.parser.set(key, options); - }; - - this.parser.parseFuncFromString(outputText, parserHandler); - } - - done(); - } + transform }; diff --git a/lerna.json b/lerna.json index dd8f5688fce8..b749b98b894a 100644 --- a/lerna.json +++ b/lerna.json @@ -10,5 +10,5 @@ "packages": [ "packages/*" ], - "version": "0.39.0-beta.43" + "version": "0.39.0-beta.74" } diff --git a/package.json b/package.json index 9287404e190d..16510a35c0d0 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "0.39.0-beta.43", + "version": "0.39.0-beta.74", "private": true, "engines": { "node": ">=10.13.0", @@ -10,12 +10,12 @@ "packages/*" ], "resolutions": { - "@polkadot/api": "^0.100.0-beta.28", - "@polkadot/api-contract": "^0.100.0-beta.28", - "@polkadot/keyring": "^1.8.1", - "@polkadot/types": "^0.100.0-beta.28", - "@polkadot/util": "^1.8.1", - "@polkadot/util-crypto": "^1.8.1", + "@polkadot/api": "^1.0.0-beta.13", + "@polkadot/api-contract": "^1.0.0-beta.13", + "@polkadot/keyring": "^2.0.0-beta.4", + "@polkadot/types": "^1.0.0-beta.13", + "@polkadot/util": "^2.0.0-beta.4", + "@polkadot/util-crypto": "^2.0.0-beta.4", "babel-core": "^7.0.0-bridge.0", "typescript": "^3.7.4" }, diff --git a/packages/app-123code/package.json b/packages/app-123code/package.json index f001dfc60fd3..76de5320ddb0 100644 --- a/packages/app-123code/package.json +++ b/packages/app-123code/package.json @@ -1,6 +1,6 @@ { "name": "@polkadot/app-123code", - "version": "0.39.0-beta.43", + "version": "0.39.0-beta.74", "description": "A basic app that shows the ropes on customisation", "main": "index.js", "scripts": {}, @@ -11,6 +11,6 @@ "license": "Apache-2.0", "dependencies": { "@babel/runtime": "^7.7.7", - "@polkadot/react-components": "^0.39.0-beta.43" + "@polkadot/react-components": "^0.39.0-beta.74" } } diff --git a/packages/app-accounts/package.json b/packages/app-accounts/package.json index d65fd451d4e8..f52f6d71134b 100644 --- a/packages/app-accounts/package.json +++ b/packages/app-accounts/package.json @@ -1,6 +1,6 @@ { "name": "@polkadot/app-accounts", - "version": "0.39.0-beta.43", + "version": "0.39.0-beta.74", "main": "index.js", "repository": "https://github.com/polkadot-js/apps.git", "author": "Jaco Greeff ", @@ -11,8 +11,8 @@ "license": "Apache-2.0", "dependencies": { "@babel/runtime": "^7.7.7", - "@polkadot/react-components": "^0.39.0-beta.43", - "@polkadot/react-qr": "^0.48.0-beta.8", + "@polkadot/react-components": "^0.39.0-beta.74", + "@polkadot/react-qr": "^0.48.0-beta.12", "@types/file-saver": "^2.0.0", "@types/yargs": "^13.0.2", "detect-browser": "^4.8.0", diff --git a/packages/app-accounts/src/Overview.tsx b/packages/app-accounts/src/Overview.tsx index 244bc1a28670..5d7b659efe9e 100644 --- a/packages/app-accounts/src/Overview.tsx +++ b/packages/app-accounts/src/Overview.tsx @@ -122,6 +122,7 @@ function Overview ({ className, onStatusChange }: Props): React.ReactElement
{ {this.renderContent()} {this.renderButtons()} diff --git a/packages/app-accounts/src/modals/Create.tsx b/packages/app-accounts/src/modals/Create.tsx index 8bad72a16261..16b2ed917680 100644 --- a/packages/app-accounts/src/modals/Create.tsx +++ b/packages/app-accounts/src/modals/Create.tsx @@ -191,7 +191,6 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, type: pr {address && isConfirmationOpen && ( + {address && isConfirmationOpen && ( { const { isFileValid, isPassValid } = this.state; return ( - + {this.renderInput()} diff --git a/packages/app-accounts/src/modals/Qr.tsx b/packages/app-accounts/src/modals/Qr.tsx index 593ef76fee05..0b4f2ad8e55a 100644 --- a/packages/app-accounts/src/modals/Qr.tsx +++ b/packages/app-accounts/src/modals/Qr.tsx @@ -50,7 +50,6 @@ function QrModal ({ className, onClose, onStatusChange }: Props): React.ReactEle { diff --git a/packages/app-accounts/src/modals/Transfer.tsx b/packages/app-accounts/src/modals/Transfer.tsx index 513e073e30d5..90915e34cf4c 100644 --- a/packages/app-accounts/src/modals/Transfer.tsx +++ b/packages/app-accounts/src/modals/Transfer.tsx @@ -87,7 +87,6 @@ function Transfer ({ className, onClose, recipientId: propRecipientId, senderId:
diff --git a/packages/app-address-book/package.json b/packages/app-address-book/package.json index 1374a871bdb4..6052dfb68b32 100644 --- a/packages/app-address-book/package.json +++ b/packages/app-address-book/package.json @@ -1,6 +1,6 @@ { "name": "@polkadot/app-address-book", - "version": "0.39.0-beta.43", + "version": "0.39.0-beta.74", "main": "index.js", "repository": "https://github.com/polkadot-js/apps.git", "author": "Jaco Greeff ", @@ -11,6 +11,6 @@ "license": "Apache-2.0", "dependencies": { "@babel/runtime": "^7.7.7", - "@polkadot/react-components": "^0.39.0-beta.43" + "@polkadot/react-components": "^0.39.0-beta.74" } } diff --git a/packages/app-address-book/src/Overview.tsx b/packages/app-address-book/src/Overview.tsx index b0a52a4198bd..c8f60212aef7 100644 --- a/packages/app-address-book/src/Overview.tsx +++ b/packages/app-address-book/src/Overview.tsx @@ -62,6 +62,7 @@ function Overview ({ className, onStatusChange }: Props): React.ReactElement
+ | null { +function Claim ({ button, className, ethereumAddress }: Props): React.ReactElement | null { + const { t } = useTranslation(); const { api } = useApi(); const [claimValue, setClaimValue] = useState(null); const [claimAddress, setClaimAddress] = useState(null); @@ -77,31 +78,29 @@ function Claim ({ button, className, ethereumAddress, t }: Props): React.ReactEl ); } -export default translate( - styled(Claim)` - font-size: 1.15rem; - display: flex; - flex-direction: column; - justify-content: center; - min-height: 12rem; - align-items: center; - margin: 0 1rem; +export default styled(Claim)` + font-size: 1.15rem; + display: flex; + flex-direction: column; + justify-content: center; + min-height: 12rem; + align-items: center; + margin: 0 1rem; - h3 { - font-family: monospace; - font-size: 1.5rem; - max-width: 100%; - margin: 0.5rem; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } + h3 { + font-family: monospace; + font-size: 1.5rem; + max-width: 100%; + margin: 0.5rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } - h2 { - margin: 0.5rem 0 2rem; - font-family: monospace; - font-size: 2.5rem; - font-weight: 200; - } - ` -); + h2 { + margin: 0.5rem 0 2rem; + font-family: monospace; + font-size: 2.5rem; + font-weight: 200; + } +`; diff --git a/packages/app-claims/src/translate.ts b/packages/app-claims/src/translate.ts index 0f305e89edd3..7fd3ffee7377 100644 --- a/packages/app-claims/src/translate.ts +++ b/packages/app-claims/src/translate.ts @@ -1,4 +1,4 @@ -// Copyright 2017-2020 @polkadot/app-123code authors & contributors +// Copyright 2017-2020 @polkadot/app-claims authors & contributors // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. diff --git a/packages/app-contracts/package.json b/packages/app-contracts/package.json index 6edefe5c1d5d..893c270a700a 100644 --- a/packages/app-contracts/package.json +++ b/packages/app-contracts/package.json @@ -1,6 +1,6 @@ { "name": "@polkadot/app-contracts", - "version": "0.39.0-beta.43", + "version": "0.39.0-beta.74", "description": "Deployment and management of substrate contracts", "main": "index.js", "scripts": {}, @@ -11,6 +11,6 @@ "license": "Apache-2.0", "dependencies": { "@babel/runtime": "^7.7.7", - "@polkadot/api-contract": "^0.100.0-beta.28" + "@polkadot/api-contract": "^1.0.0-beta.13" } } diff --git a/packages/app-contracts/src/Contracts/Call.tsx b/packages/app-contracts/src/Contracts/Call.tsx index b827b59e0387..fcdcfff94bab 100644 --- a/packages/app-contracts/src/Contracts/Call.tsx +++ b/packages/app-contracts/src/Contracts/Call.tsx @@ -3,15 +3,13 @@ // of the Apache-2.0 license. See the LICENSE file for details. import { ContractCallOutcome } from '@polkadot/api-contract/types'; -import { BareProps, I18nProps, StringOrNull } from '@polkadot/react-components/types'; -import { ContractExecResult } from '@polkadot/types/interfaces/contracts'; +import { BareProps, StringOrNull } from '@polkadot/react-components/types'; import BN from 'bn.js'; import React, { useState, useEffect } from 'react'; import styled from 'styled-components'; import { Button, Dropdown, IconLink, InputAddress, InputBalance, InputNumber, Modal, Toggle, TxButton } from '@polkadot/react-components'; import { PromiseContract as ApiContract } from '@polkadot/api-contract'; -import { withMulti } from '@polkadot/react-api/hoc'; import { useApi } from '@polkadot/react-hooks'; import { createValue } from '@polkadot/react-params/values'; import { isNull } from '@polkadot/util'; @@ -19,14 +17,13 @@ import { isNull } from '@polkadot/util'; import Params from '../Params'; import Outcome from './Outcome'; -import translate from '../translate'; +import { useTranslation } from '../translate'; import { GAS_LIMIT } from '../constants'; import { getCallMessageOptions } from './util'; -interface Props extends BareProps, I18nProps { +interface Props extends BareProps { callContract: ApiContract | null; callMessageIndex: number | null; - callResults: ContractExecResult[]; isOpen: boolean; onChangeCallContractAddress: (callContractAddress: StringOrNull) => void; onChangeCallMessageIndex: (callMessageIndex: number) => void; @@ -34,7 +31,8 @@ interface Props extends BareProps, I18nProps { } function Call (props: Props): React.ReactElement | null { - const { className, isOpen, callContract, callMessageIndex, onChangeCallContractAddress, onChangeCallMessageIndex, onClose, t } = props; + const { t } = useTranslation(); + const { className, isOpen, callContract, callMessageIndex, onChangeCallContractAddress, onChangeCallMessageIndex, onClose } = props; if (isNull(callContract) || isNull(callMessageIndex)) { return null; @@ -258,17 +256,14 @@ function Call (props: Props): React.ReactElement | null { ); } -export default withMulti( - styled(Call)` - .rpc-toggle { - margin-top: 1rem; - display: flex; - justify-content: flex-end; - } +export default styled(Call)` + .rpc-toggle { + margin-top: 1rem; + display: flex; + justify-content: flex-end; + } - .clear-all { - float: right; - } - `, - translate -); + .clear-all { + float: right; + } +`; diff --git a/packages/app-contracts/src/Contracts/Contract.tsx b/packages/app-contracts/src/Contracts/Contract.tsx index 442dd82960b7..69c50282222f 100644 --- a/packages/app-contracts/src/Contracts/Contract.tsx +++ b/packages/app-contracts/src/Contracts/Contract.tsx @@ -3,7 +3,6 @@ // of the Apache-2.0 license. See the LICENSE file for details. import { ActionStatus } from '@polkadot/react-components/Status/types'; -import { I18nProps } from '@polkadot/react-components/types'; import React, { useState } from 'react'; import styled from 'styled-components'; @@ -13,9 +12,9 @@ import keyring from '@polkadot/ui-keyring'; import { PromiseContract as ApiContract } from '@polkadot/api-contract'; import { AddressRow, Button, Card, Forget, Messages } from '@polkadot/react-components'; -import translate from '../translate'; +import { useTranslation } from '../translate'; -interface Props extends I18nProps, RouteComponentProps { +interface Props extends RouteComponentProps { basePath: string; contract: ApiContract; onCall: (_?: number) => () => void; @@ -29,7 +28,8 @@ const ContractCard = styled(Card)` `; function Contract (props: Props): React.ReactElement | null { - const { contract: { abi, address }, onCall, t } = props; + const { t } = useTranslation(); + const { contract: { abi, address }, onCall } = props; if (!address || !abi) { return null; @@ -114,4 +114,4 @@ function Contract (props: Props): React.ReactElement | null { ); } -export default translate(withRouter(Contract)); +export default withRouter(Contract); diff --git a/packages/app-contracts/src/Contracts/ValidateAddr.tsx b/packages/app-contracts/src/Contracts/ValidateAddr.tsx index 779dd6724f53..b0065dac1d2e 100644 --- a/packages/app-contracts/src/Contracts/ValidateAddr.tsx +++ b/packages/app-contracts/src/Contracts/ValidateAddr.tsx @@ -1,27 +1,26 @@ -/* eslint-disable @typescript-eslint/camelcase */ // Copyright 2017-2020 @polkadot/app-contracts 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 { ContractInfo } from '@polkadot/types/interfaces'; -import { I18nProps } from '@polkadot/react-components/types'; -import { ApiProps } from '@polkadot/react-api/types'; import React, { useEffect, useState } from 'react'; import { Option } from '@polkadot/types'; -import { withCalls } from '@polkadot/react-api/hoc'; +import { useApi, useCall } from '@polkadot/react-hooks'; import { InfoForInput } from '@polkadot/react-components'; import keyring from '@polkadot/ui-keyring'; -import translate from '../translate'; +import { useTranslation } from '../translate'; -interface Props extends ApiProps, I18nProps { +interface Props { address?: string | null; - contracts_contractInfoOf?: Option; onChange: (isValid: boolean) => void; } -function ValidateAddr ({ address, contracts_contractInfoOf, onChange, t }: Props): React.ReactElement | null { +export default function ValidateAddr ({ address, onChange }: Props): React.ReactElement | null { + const { t } = useTranslation(); + const { api } = useApi(); + const contractInfo = useCall>(api.query.contracts.contractInfoOf, [address]); const [isAddress, setIsAddress] = useState(false); const [isStored, setIsStored] = useState(false); @@ -35,8 +34,8 @@ function ValidateAddr ({ address, contracts_contractInfoOf, onChange, t }: Props }, [address]); useEffect((): void => { - setIsStored(!!contracts_contractInfoOf && contracts_contractInfoOf.isSome); - }, [contracts_contractInfoOf]); + setIsStored(!!contractInfo?.isSome); + }, [contractInfo]); useEffect((): void => { onChange(isAddress && isStored); @@ -48,20 +47,10 @@ function ValidateAddr ({ address, contracts_contractInfoOf, onChange, t }: Props return ( - { - isAddress - ? t('Unable to find deployed contract code at the specified address') - : t('The value is not in a valid address format') + {isAddress + ? t('Unable to find deployed contract code at the specified address') + : t('The value is not in a valid address format') } ); } - -export default translate( - withCalls( - ['query.contracts.contractInfoOf', { - fallbacks: ['query.contract.contractInfoOf'], - paramName: 'address' - }] - )(ValidateAddr) -); diff --git a/packages/app-contracts/src/Contracts/index.tsx b/packages/app-contracts/src/Contracts/index.tsx index de646bc8264b..104b409ec862 100644 --- a/packages/app-contracts/src/Contracts/index.tsx +++ b/packages/app-contracts/src/Contracts/index.tsx @@ -2,42 +2,40 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. -import { ApiProps } from '@polkadot/react-api/types'; -import { I18nProps, StringOrNull } from '@polkadot/react-components/types'; -import { ComponentProps } from '../types'; +import { StringOrNull } from '@polkadot/react-components/types'; +import { ComponentProps as Props } from '../types'; import React, { useState, useEffect } from 'react'; +import { ApiPromise } from '@polkadot/api'; import { PromiseContract as ApiContract } from '@polkadot/api-contract'; -import { withApi, withMulti } from '@polkadot/react-api/hoc'; import { Button, CardGrid } from '@polkadot/react-components'; +import { useApi } from '@polkadot/react-hooks'; -import translate from '../translate'; +import { useTranslation } from '../translate'; import Add from './Add'; import ContractCard from './Contract'; import Call from './Call'; import { getContractForAddress } from './util'; -interface Props extends ComponentProps, I18nProps, ApiProps {} - -function filterContracts ({ api, accounts, contracts: keyringContracts }: Props): ApiContract[] { +function filterContracts (api: ApiPromise, { accounts, contracts: keyringContracts }: Props): ApiContract[] { return accounts && keyringContracts && Object.keys(keyringContracts) .map((address): ApiContract | null => getContractForAddress(api, address)) .filter((contract: ApiContract | null): boolean => !!contract) as ApiContract[]; } -function Contracts (props: Props): React.ReactElement { - const { accounts, basePath, contracts: keyringContracts, hasCode, showDeploy, t } = props; - // const { callAddress, callMessage, isAddOpen, isCallOpen } = this.state; - - const [contracts, setContracts] = useState(filterContracts(props)); +export default function Contracts (props: Props): React.ReactElement { + const { t } = useTranslation(); + const { api } = useApi(); + const { accounts, basePath, contracts: keyringContracts, hasCode, showDeploy } = props; + const [contracts, setContracts] = useState(filterContracts(api, props)); const [callContractIndex, setCallContractIndex] = useState(0); const [callMessageIndex, setCallMessageIndex] = useState(0); const [isAddOpen, setIsAddOpen] = useState(false); const [isCallOpen, setIsCallOpen] = useState(false); useEffect((): void => { - setContracts(filterContracts(props)); - }, [accounts, keyringContracts]); + setContracts(filterContracts(api, props)); + }, [accounts, api, keyringContracts]); let callContract = contracts[callContractIndex] || null; @@ -97,16 +95,14 @@ function Contracts (props: Props): React.ReactElement { } > - {contracts.map((contract: ApiContract, index): React.ReactNode => { - return ( - - ); - })} + {contracts.map((contract: ApiContract, index): React.ReactNode => ( + + ))} { ); } - -export default withMulti( - Contracts, - translate, - withApi -); diff --git a/packages/app-contracts/src/RemoveABI.tsx b/packages/app-contracts/src/RemoveABI.tsx index b3395f13e717..ba08bb4f47c3 100644 --- a/packages/app-contracts/src/RemoveABI.tsx +++ b/packages/app-contracts/src/RemoveABI.tsx @@ -2,31 +2,32 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. -import { I18nProps } from '@polkadot/react-components/types'; import { CodeStored } from '@polkadot/app-contracts/types'; import React from 'react'; import { Button, CodeRow, Modal } from '@polkadot/react-components'; -import translate from './translate'; +import { useTranslation } from './translate'; -interface Props extends I18nProps { +interface Props { code: CodeStored; onClose: () => void; onRemove: () => void; } -function RemoveABI ({ code, onClose, onRemove, t }: Props): React.ReactElement { +export default function RemoveABI ({ code, onClose, onRemove }: Props): React.ReactElement { + const { t } = useTranslation(); + const _onRemove = (): void => { onClose && onClose(); onRemove(); }; + return ( ); } - -export default translate(RemoveABI); diff --git a/packages/app-council/package.json b/packages/app-council/package.json index ce36aa11c82a..5c06c548bab0 100644 --- a/packages/app-council/package.json +++ b/packages/app-council/package.json @@ -1,6 +1,6 @@ { "name": "@polkadot/app-council", - "version": "0.39.0-beta.43", + "version": "0.39.0-beta.74", "description": "Council", "main": "index.js", "scripts": {}, @@ -11,7 +11,7 @@ "license": "Apache-2.0", "dependencies": { "@babel/runtime": "^7.7.7", - "@polkadot/react-components": "^0.39.0-beta.43", - "@polkadot/react-query": "^0.39.0-beta.43" + "@polkadot/react-components": "^0.39.0-beta.74", + "@polkadot/react-query": "^0.39.0-beta.74" } } diff --git a/packages/app-council/src/Motions/Motion.tsx b/packages/app-council/src/Motions/Motion.tsx index d0e42bff5117..5a167c0e7c58 100644 --- a/packages/app-council/src/Motions/Motion.tsx +++ b/packages/app-council/src/Motions/Motion.tsx @@ -3,21 +3,23 @@ // of the Apache-2.0 license. See the LICENSE file for details. import { DerivedCollectiveProposal } from '@polkadot/api-derive/types'; -import { I18nProps } from '@polkadot/react-components/types'; import React from 'react'; import { AddressMini, Voting } from '@polkadot/react-components'; import ProposalCell from '@polkadot/app-democracy/Overview/ProposalCell'; import { formatNumber } from '@polkadot/util'; -import translate from '../translate'; +import { useTranslation } from '../translate'; -interface Props extends I18nProps { +interface Props { + className?: string; isMember: boolean; motion: DerivedCollectiveProposal; } -function Motion ({ className, isMember, motion: { hash, proposal, votes }, t }: Props): React.ReactElement | null { +export default function Motion ({ className, isMember, motion: { hash, proposal, votes } }: Props): React.ReactElement | null { + const { t } = useTranslation(); + if (!votes) { return null; } @@ -68,5 +70,3 @@ function Motion ({ className, isMember, motion: { hash, proposal, votes }, t }: ); } - -export default translate(Motion); diff --git a/packages/app-council/src/Motions/Slashing.tsx b/packages/app-council/src/Motions/Slashing.tsx index da3f7451c30b..1c66bdb67b3b 100644 --- a/packages/app-council/src/Motions/Slashing.tsx +++ b/packages/app-council/src/Motions/Slashing.tsx @@ -33,7 +33,7 @@ export default function Slashing ({ className, isMember }: Props): React.ReactEl const [proposal, setProposal] = useState(null); const [eras, setEras] = useState([]); const [selectedEra, setSelectedEra] = useState(0); - const threshold = Math.ceil((members?.length || 0) * 0.75); + const threshold = Math.ceil((members?.length || 0) * 0.5); useEffect((): void => { if (accountId && members) { @@ -86,7 +86,6 @@ export default function Slashing ({ className, isMember }: Props): React.ReactEl { +export default function Proposals ({ className, motions }: 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, []); @@ -61,5 +62,3 @@ function Proposals ({ className, motions, t }: Props): React.ReactElement
); } - -export default translate(Proposals); diff --git a/packages/app-council/src/Overview/Candidate.tsx b/packages/app-council/src/Overview/Candidate.tsx index effba7836d4b..bfbc43bbc4b6 100644 --- a/packages/app-council/src/Overview/Candidate.tsx +++ b/packages/app-council/src/Overview/Candidate.tsx @@ -2,23 +2,24 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. -import { I18nProps } from '@polkadot/react-components/types'; import { AccountId, Balance } from '@polkadot/types/interfaces'; import React from 'react'; import { AddressSmall } from '@polkadot/react-components'; import { FormatBalance } from '@polkadot/react-query'; -import translate from '../translate'; +import { useTranslation } from '../translate'; import Voters from './Voters'; -interface Props extends I18nProps { +interface Props { address: AccountId; balance?: Balance; voters?: AccountId[]; } -function Candidate ({ address, balance, t, voters }: Props): React.ReactElement { +export default function Candidate ({ address, balance, voters }: Props): React.ReactElement { + const { t } = useTranslation(); + return ( @@ -37,5 +38,3 @@ function Candidate ({ address, balance, t, voters }: Props): React.ReactElement< ); } - -export default translate(Candidate); diff --git a/packages/app-council/src/Overview/Candidates.tsx b/packages/app-council/src/Overview/Candidates.tsx index 65f2b2285387..4899602ce2b6 100644 --- a/packages/app-council/src/Overview/Candidates.tsx +++ b/packages/app-council/src/Overview/Candidates.tsx @@ -4,21 +4,22 @@ // of the Apache-2.0 license. See the LICENSE file for details. import { AccountId } from '@polkadot/types/interfaces'; -import { I18nProps } from '@polkadot/react-components/types'; import { ComponentProps } from './types'; import React from 'react'; import { Table } from '@polkadot/react-components'; -import translate from '../translate'; +import { useTranslation } from '../translate'; import Candidate from './Candidate'; -interface Props extends I18nProps, ComponentProps { +interface Props extends ComponentProps { allVotes?: Record; className?: string; } -function Candidates ({ allVotes = {}, className, electionsInfo: { candidates, runnersUp }, t }: Props): React.ReactElement { +export default function Candidates ({ allVotes = {}, className, electionsInfo: { candidates, runnersUp } }: Props): React.ReactElement { + const { t } = useTranslation(); + return (

{t('runners up')}

@@ -59,5 +60,3 @@ function Candidates ({ allVotes = {}, className, electionsInfo: { candidates, ru
); } - -export default translate(Candidates); diff --git a/packages/app-council/src/Overview/Members.tsx b/packages/app-council/src/Overview/Members.tsx index 7252f97d6b03..c4dde01307db 100644 --- a/packages/app-council/src/Overview/Members.tsx +++ b/packages/app-council/src/Overview/Members.tsx @@ -1,24 +1,24 @@ -/* eslint-disable @typescript-eslint/camelcase */ // Copyright 2017-2020 @polkadot/app-democracy authors & contributors // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. import { AccountId } from '@polkadot/types/interfaces'; -import { I18nProps } from '@polkadot/react-components/types'; import { ComponentProps } from './types'; import React from 'react'; import { Table } from '@polkadot/react-components'; -import translate from '../translate'; +import { useTranslation } from '../translate'; import Candidate from './Candidate'; -interface Props extends I18nProps, ComponentProps { +interface Props extends ComponentProps { allVotes?: Record; className?: string; } -function Members ({ allVotes = {}, className, electionsInfo: { members }, t }: Props): React.ReactElement { +export default function Members ({ allVotes = {}, className, electionsInfo: { members } }: Props): React.ReactElement { + const { t } = useTranslation(); + return (
{members.length @@ -41,5 +41,3 @@ function Members ({ allVotes = {}, className, electionsInfo: { members }, t }: P
); } - -export default translate(Members); diff --git a/packages/app-council/src/Overview/Summary.tsx b/packages/app-council/src/Overview/Summary.tsx index 331ec34f562a..14c69e44796f 100644 --- a/packages/app-council/src/Overview/Summary.tsx +++ b/packages/app-council/src/Overview/Summary.tsx @@ -1,9 +1,7 @@ -/* eslint-disable @typescript-eslint/camelcase */ // Copyright 2017-2020 @polkadot/app-democracy authors & contributors // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. -import { I18nProps } from '@polkadot/react-components/types'; import { BlockNumber } from '@polkadot/types/interfaces'; import { ComponentProps } from './types'; @@ -11,13 +9,16 @@ import React from 'react'; import { SummaryBox, CardSummary } from '@polkadot/react-components'; import { formatNumber } from '@polkadot/util'; -import translate from '../translate'; +import { useTranslation } from '../translate'; -interface Props extends I18nProps, ComponentProps { +interface Props extends ComponentProps { bestNumber?: BlockNumber; + className?: string; } -function Summary ({ bestNumber, className, electionsInfo: { members, candidateCount, desiredSeats, runnersUp, termDuration, voteCount }, t }: Props): React.ReactElement { +export default function Summary ({ bestNumber, className, electionsInfo: { members, candidateCount, desiredSeats, runnersUp, termDuration, voteCount } }: Props): React.ReactElement { + const { t } = useTranslation(); + return (
@@ -52,5 +53,3 @@ function Summary ({ bestNumber, className, electionsInfo: { members, candidateCo ); } - -export default translate(Summary); diff --git a/packages/app-council/src/Overview/VoteValue.tsx b/packages/app-council/src/Overview/VoteValue.tsx index 9bb6af6fc7d9..72a61c77f351 100644 --- a/packages/app-council/src/Overview/VoteValue.tsx +++ b/packages/app-council/src/Overview/VoteValue.tsx @@ -3,7 +3,6 @@ // of the Apache-2.0 license. See the LICENSE file for details. import { DerivedBalances } from '@polkadot/api-derive/types'; -import { I18nProps } from '@polkadot/react-components/types'; import BN from 'bn.js'; import React, { useEffect, useState } from 'react'; @@ -12,9 +11,9 @@ import { useApi, useCall } from '@polkadot/react-hooks'; import { BalanceVoting } from '@polkadot/react-query'; import { formatBalance, isBn } from '@polkadot/util'; -import translate from '../translate'; +import { useTranslation } from '../translate'; -interface Props extends I18nProps { +interface Props { accountId?: string | null; onChange: (value: BN) => void; } @@ -24,7 +23,8 @@ interface ValueState { value?: BN | string; } -function VoteValue ({ accountId, onChange, t }: Props): React.ReactElement | null { +export default function VoteValue ({ accountId, onChange }: Props): React.ReactElement | null { + const { t } = useTranslation(); const { api } = useApi(); const allBalances = useCall(api.derive.balances.all as any, [accountId]); const [{ selectedId, value }, setValue] = useState({}); @@ -69,5 +69,3 @@ function VoteValue ({ accountId, onChange, t }: Props): React.ReactElement ); } - -export default translate(VoteValue); diff --git a/packages/app-council/src/Overview/Voters.tsx b/packages/app-council/src/Overview/Voters.tsx index 44681942d336..4518e8938870 100644 --- a/packages/app-council/src/Overview/Voters.tsx +++ b/packages/app-council/src/Overview/Voters.tsx @@ -2,19 +2,20 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. -import { I18nProps } from '@polkadot/react-components/types'; import { AccountId } from '@polkadot/types/interfaces'; import React from 'react'; import { AddressMini } from '@polkadot/react-components'; -import translate from '../translate'; +import { useTranslation } from '../translate'; -interface Props extends I18nProps { +interface Props { voters: AccountId[]; } -function Voters ({ voters, t }: Props): React.ReactElement | null { +export default function Voters ({ voters }: Props): React.ReactElement | null { + const { t } = useTranslation(); + return (
@@ -34,5 +35,3 @@ function Voters ({ voters, t }: Props): React.ReactElement | null {
); } - -export default translate(Voters); diff --git a/packages/app-dashboard/package.json b/packages/app-dashboard/package.json index 96e3d4e8e85a..ddf06c3a3ee0 100644 --- a/packages/app-dashboard/package.json +++ b/packages/app-dashboard/package.json @@ -1,6 +1,6 @@ { "name": "@polkadot/app-dashboard", - "version": "0.39.0-beta.43", + "version": "0.39.0-beta.74", "description": "Dashboard for all apps, allowing for an overview and quick navigation", "main": "index.js", "scripts": {}, @@ -11,7 +11,7 @@ "license": "Apache-2.0", "dependencies": { "@babel/runtime": "^7.7.7", - "@polkadot/apps-routing": "^0.39.0-beta.43", - "@polkadot/react-components": "^0.39.0-beta.43" + "@polkadot/apps-routing": "^0.39.0-beta.74", + "@polkadot/react-components": "^0.39.0-beta.74" } } diff --git a/packages/app-dashboard/src/Entry.tsx b/packages/app-dashboard/src/Entry.tsx index 9db7b1194b35..661d8de607db 100644 --- a/packages/app-dashboard/src/Entry.tsx +++ b/packages/app-dashboard/src/Entry.tsx @@ -3,20 +3,22 @@ // of the Apache-2.0 license. See the LICENSE file for details. import { Route } from '@polkadot/apps-routing/types'; -import { I18nProps } from '@polkadot/react-components/types'; import React from 'react'; import { Link } from 'react-router-dom'; import styled from 'styled-components'; import { Icon } from '@polkadot/react-components'; -import translate from './translate'; +import { useTranslation } from './translate'; -interface Props extends I18nProps { +interface Props { + className?: string; route: Route; } -function Entry ({ className, route: { i18n, icon, name }, t }: Props): React.ReactElement { +function Entry ({ className, route: { i18n, icon, name } }: Props): React.ReactElement { + const { t } = useTranslation(); + return (
@@ -32,8 +34,8 @@ function Entry ({ className, route: { i18n, icon, name }, t }: Props): React.Rea ); } -export default translate(styled(Entry)` +export default styled(Entry)` .name { margin-top: 0.75rem; } -`); +`; diff --git a/packages/app-democracy/package.json b/packages/app-democracy/package.json index 1a15ccb31102..bcd5ee3c7065 100644 --- a/packages/app-democracy/package.json +++ b/packages/app-democracy/package.json @@ -1,6 +1,6 @@ { "name": "@polkadot/app-democracy", - "version": "0.39.0-beta.43", + "version": "0.39.0-beta.74", "description": "A referendum & proposal app", "main": "index.js", "scripts": {}, @@ -11,7 +11,7 @@ "license": "Apache-2.0", "dependencies": { "@babel/runtime": "^7.7.7", - "@polkadot/react-components": "^0.39.0-beta.43", - "@polkadot/react-query": "^0.39.0-beta.43" + "@polkadot/react-components": "^0.39.0-beta.74", + "@polkadot/react-query": "^0.39.0-beta.74" } } diff --git a/packages/app-democracy/src/Overview/DispatchEntry.tsx b/packages/app-democracy/src/Overview/DispatchEntry.tsx index df3f61ef2cb1..0656a34953ac 100644 --- a/packages/app-democracy/src/Overview/DispatchEntry.tsx +++ b/packages/app-democracy/src/Overview/DispatchEntry.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 { AccountId, Balance, BlockNumber, Hash, Proposal, ReferendumIndex } from '@polkadot/types/interfaces'; import { ITuple } from '@polkadot/types/types'; @@ -11,16 +10,17 @@ import { useApi, useCall } from '@polkadot/react-hooks'; import { Bytes, Option } from '@polkadot/types'; import { formatNumber } from '@polkadot/util'; -import translate from '../translate'; +import { useTranslation } from '../translate'; import ProposalCell from './ProposalCell'; -interface Props extends I18nProps { +interface Props { blockNumber?: BlockNumber; hash: Hash; referendumIndex: ReferendumIndex; } -function DispatchEntry ({ blockNumber, hash, referendumIndex, t }: Props): React.ReactElement { +export default function DispatchEntry ({ blockNumber, hash, referendumIndex }: Props): React.ReactElement { + const { t } = useTranslation(); const { api } = useApi(); const preimage = useCall> >(api.query.democracy.preimages, [hash]); @@ -50,5 +50,3 @@ function DispatchEntry ({ blockNumber, hash, referendumIndex, t }: Props): React ); } - -export default translate(DispatchEntry); diff --git a/packages/app-democracy/src/Overview/DispatchQueue.tsx b/packages/app-democracy/src/Overview/DispatchQueue.tsx index adaca2d7c010..073fd91c22b4 100644 --- a/packages/app-democracy/src/Overview/DispatchQueue.tsx +++ b/packages/app-democracy/src/Overview/DispatchQueue.tsx @@ -2,17 +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 as Props } from '@polkadot/react-components/types'; import { BlockNumber, Hash, ReferendumIndex } from '@polkadot/types/interfaces'; import React from 'react'; import { Table } from '@polkadot/react-components'; import { useApi, useCall } from '@polkadot/react-hooks'; -import translate from '../translate'; +import { useTranslation } from '../translate'; import DispatchEntry from './DispatchEntry'; -function DispatchQueue ({ className, t }: Props): React.ReactElement | null { +interface Props { + className?: string; +} + +export default function DispatchQueue ({ className }: Props): React.ReactElement | null { + const { t } = useTranslation(); const { api } = useApi(); const queued = useCall<[BlockNumber, Hash, ReferendumIndex][]>(api.query.democracy.dispatchQueue, []); @@ -43,5 +47,3 @@ function DispatchQueue ({ className, t }: Props): React.ReactElement | nu
); } - -export default translate(DispatchQueue); diff --git a/packages/app-democracy/src/Overview/Externals.tsx b/packages/app-democracy/src/Overview/Externals.tsx index 7b229fbe206e..3744e457cf6b 100644 --- a/packages/app-democracy/src/Overview/Externals.tsx +++ b/packages/app-democracy/src/Overview/Externals.tsx @@ -4,7 +4,6 @@ import { AccountId, Balance, BlockNumber, Hash, Proposal, VoteThreshold } from '@polkadot/types/interfaces'; import { ITuple } from '@polkadot/types/types'; -import { I18nProps as Props } from '@polkadot/react-components/types'; import React, { useEffect, useState } from 'react'; import { AddressSmall, Table } from '@polkadot/react-components'; @@ -12,10 +11,15 @@ import { useApi, useCall } from '@polkadot/react-hooks'; import { FormatBalance } from '@polkadot/react-query'; import { Bytes, Option } from '@polkadot/types'; -import translate from '../translate'; +import { useTranslation } from '../translate'; import ProposalCell from './ProposalCell'; -function Externals ({ className, t }: Props): React.ReactElement | null { +interface Props { + className?: string; +} + +export default function Externals ({ className }: Props): React.ReactElement | null { + const { t } = useTranslation(); const { api } = useApi(); const external = useCall>>(api.query.democracy.nextExternal, []); const [hash, setHash] = useState(null); @@ -72,5 +76,3 @@ function Externals ({ className, t }: Props): React.ReactElement | null {
); } - -export default translate(Externals); diff --git a/packages/app-democracy/src/Overview/PreImage.tsx b/packages/app-democracy/src/Overview/PreImage.tsx index 437c273e907e..761a043ea2a5 100644 --- a/packages/app-democracy/src/Overview/PreImage.tsx +++ b/packages/app-democracy/src/Overview/PreImage.tsx @@ -3,29 +3,27 @@ // of the Apache-2.0 license. See the LICENSE file for details. import { SubmittableExtrinsic } from '@polkadot/api/promise/types'; -import { I18nProps } from '@polkadot/react-components/types'; -import BN from 'bn.js'; import React, { useEffect, useState } from 'react'; import styled from 'styled-components'; -import { Button, Input, InputAddress, InputNumber, Extrinsic, Modal, Toggle, TxButton } from '@polkadot/react-components'; +import { Button, Input, InputAddress, Extrinsic, Modal, Toggle, TxButton } from '@polkadot/react-components'; import { useApi } from '@polkadot/react-hooks'; import { Available } from '@polkadot/react-query'; import { blake2AsHex } from '@polkadot/util-crypto'; -import translate from '../translate'; +import { useTranslation } from '../translate'; -interface Props extends I18nProps { +interface Props { + className?: string; onClose: () => void; } const ZERO_HASH = blake2AsHex(''); -function PreImage ({ className, onClose, t }: Props): React.ReactElement { +function PreImage ({ className, onClose }: Props): React.ReactElement { + const { t } = useTranslation(); const { apiDefaultTxSudo } = useApi(); const [accountId, setAccountId] = useState(null); - const [atBlock, setAtBlock] = useState(); - const [forProposal, setForProposal] = useState(); const [isImminent, setIsImminent] = useState(false); const [{ hex, hash }, setHash] = useState<{ hex: string; hash: string }>({ hex: '', hash: ZERO_HASH }); const [proposal, setProposal] = useState(); @@ -40,7 +38,6 @@ function PreImage ({ className, onClose, t }: Props): React.ReactElement onChange={setIsImminent} value={isImminent} /> - {isImminent && ( - <> - - - - )} @@ -93,18 +76,12 @@ function PreImage ({ className, onClose, t }: Props): React.ReactElement @@ -114,11 +91,9 @@ function PreImage ({ className, onClose, t }: Props): React.ReactElement ); } -export default translate( - styled(PreImage)` - .toggleImminent { - margin: 0.5rem 0; - text-align: right; - } - ` -); +export default styled(PreImage)` + .toggleImminent { + margin: 0.5rem 0; + text-align: right; + } +`; diff --git a/packages/app-democracy/src/Overview/Proposal.tsx b/packages/app-democracy/src/Overview/Proposal.tsx index 06360e5fcf4a..893ad89db613 100644 --- a/packages/app-democracy/src/Overview/Proposal.tsx +++ b/packages/app-democracy/src/Overview/Proposal.tsx @@ -3,7 +3,6 @@ // of the Apache-2.0 license. See the LICENSE file for details. import { DeriveProposal } from '@polkadot/api-derive/types'; -import { I18nProps } from '@polkadot/react-components/types'; import React from 'react'; import styled from 'styled-components'; @@ -11,15 +10,17 @@ import { AddressMini, AddressSmall } from '@polkadot/react-components'; import { FormatBalance } from '@polkadot/react-query'; import { formatNumber } from '@polkadot/util'; -import translate from '../translate'; +import { useTranslation } from '../translate'; import ProposalCell from './ProposalCell'; import Seconding from './Seconding'; -interface Props extends I18nProps { +interface Props { + className?: string; value: DeriveProposal; } -function Proposal ({ className, t, value: { balance, hash, index, proposal, proposer, seconds } }: Props): React.ReactElement { +function Proposal ({ className, value: { balance, hash, index, proposal, proposer, seconds } }: Props): React.ReactElement { + const { t } = useTranslation(); const seconding = seconds.filter((_address, index): boolean => index !== 0); return ( @@ -64,20 +65,18 @@ function Proposal ({ className, t, value: { balance, hash, index, proposal, prop ); } -export default translate( - styled(Proposal)` - .identityIcon { - &:first-child { - padding-top: 0; - } - - &:last-child { - margin-bottom: 4px; - } +export default styled(Proposal)` + .identityIcon { + &:first-child { + padding-top: 0; } - .seconding { - padding-top: 1.1rem; + &:last-child { + margin-bottom: 4px; } - ` -); + } + + .seconding { + padding-top: 1.1rem; + } +`; diff --git a/packages/app-democracy/src/Overview/ProposalCell.tsx b/packages/app-democracy/src/Overview/ProposalCell.tsx index 399a33c7a96c..fa19454d7947 100644 --- a/packages/app-democracy/src/Overview/ProposalCell.tsx +++ b/packages/app-democracy/src/Overview/ProposalCell.tsx @@ -3,20 +3,22 @@ // of the Apache-2.0 license. See the LICENSE file for details. import { Hash, Proposal } from '@polkadot/types/interfaces'; -import { I18nProps } from '@polkadot/react-components/types'; import React from 'react'; import { registry } from '@polkadot/react-api'; import { Call } from '@polkadot/react-components'; -import translate from '../translate'; +import { useTranslation } from '../translate'; -interface Props extends I18nProps { +interface Props { + className?: string; proposal?: Proposal | null; proposalHash: Hash | string; } -function ProposalCell ({ className, proposal, proposalHash, t }: Props): React.ReactElement { +export default function ProposalCell ({ className, proposal, proposalHash }: Props): React.ReactElement { + const { t } = useTranslation(); + if (!proposal) { return ( @@ -42,5 +44,3 @@ function ProposalCell ({ className, proposal, proposalHash, t }: Props): React.R ); } - -export default translate(ProposalCell); diff --git a/packages/app-democracy/src/Overview/Proposals.tsx b/packages/app-democracy/src/Overview/Proposals.tsx index 15ab65914ee7..e18fa6ab8ae3 100644 --- a/packages/app-democracy/src/Overview/Proposals.tsx +++ b/packages/app-democracy/src/Overview/Proposals.tsx @@ -3,16 +3,20 @@ // of the Apache-2.0 license. See the LICENSE file for details. import { DeriveProposal } from '@polkadot/api-derive/types'; -import { I18nProps as Props } from '@polkadot/react-components/types'; import React from 'react'; import { Table } from '@polkadot/react-components'; import { useApi, useCall } from '@polkadot/react-hooks'; import ProposalDisplay from './Proposal'; -import translate from '../translate'; +import { useTranslation } from '../translate'; -function Proposals ({ className, t }: Props): React.ReactElement { +interface Props { + className?: string; +} + +export default function Proposals ({ className }: Props): React.ReactElement { + const { t } = useTranslation(); const { api } = useApi(); const proposals = useCall(api.derive.democracy.proposals, []); @@ -37,5 +41,3 @@ function Proposals ({ className, t }: Props): React.ReactElement {
); } - -export default translate(Proposals); diff --git a/packages/app-democracy/src/Overview/Propose.tsx b/packages/app-democracy/src/Overview/Propose.tsx index c37b0204b0b7..5d83394f062b 100644 --- a/packages/app-democracy/src/Overview/Propose.tsx +++ b/packages/app-democracy/src/Overview/Propose.tsx @@ -2,21 +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 '@polkadot/react-components/types'; - import BN from 'bn.js'; import React, { useState } from 'react'; import { Button, Input, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components'; import { Available } from '@polkadot/react-query'; import { isHex } from '@polkadot/util'; -import translate from '../translate'; +import { useTranslation } from '../translate'; -interface Props extends I18nProps { +interface Props { + className?: string; onClose: () => void; } -function Propose ({ className, onClose, t }: Props): React.ReactElement { +export default function Propose ({ className, onClose }: Props): React.ReactElement { + const { t } = useTranslation(); const [accountId, setAccountId] = useState(null); const [balance, setBalance] = useState(); const [{ isHashValid, hash }, setHash] = useState<{ isHashValid: boolean; hash?: string }>({ isHashValid: false, hash: '' }); @@ -30,7 +30,6 @@ function Propose ({ className, onClose, t }: Props): React.ReactElement { { ); } - -export default translate(Propose); diff --git a/packages/app-democracy/src/Overview/Referendum.tsx b/packages/app-democracy/src/Overview/Referendum.tsx index 9d42bee6dfd9..6cd171371ac5 100644 --- a/packages/app-democracy/src/Overview/Referendum.tsx +++ b/packages/app-democracy/src/Overview/Referendum.tsx @@ -4,7 +4,6 @@ // of the Apache-2.0 license. See the LICENSE file for details. import { DerivedReferendumVote, DerivedReferendum } from '@polkadot/api-derive/types'; -import { I18nProps } from '@polkadot/react-components/types'; import { BlockNumber } from '@polkadot/types/interfaces'; import BN from 'bn.js'; @@ -14,11 +13,12 @@ import { formatNumber } from '@polkadot/util'; import { useApi, useCall } from '@polkadot/react-hooks'; import { FormatBalance } from '@polkadot/react-query'; -import translate from '../translate'; +import { useTranslation } from '../translate'; import ProposalCell from './ProposalCell'; import Voting from './Voting'; -interface Props extends I18nProps { +interface Props { + className?: string; idNumber: BN; value: DerivedReferendum; } @@ -32,7 +32,8 @@ interface State { votedTotal: BN; } -function Referendum ({ className, idNumber, t, value }: Props): React.ReactElement | null { +function Referendum ({ className, idNumber, value }: Props): React.ReactElement | null { + const { t } = useTranslation(); const { api } = useApi(); const bestNumber = useCall(api.derive.chain.bestNumber, []); const votesFor = useCall(api.derive.democracy.referendumVotesFor as any, [idNumber]); @@ -114,14 +115,12 @@ function Referendum ({ className, idNumber, t, value }: Props): React.ReactEleme ); } -export default translate( - styled(Referendum)` - .democracy--Referendum-results { - margin-bottom: 1em; +export default styled(Referendum)` + .democracy--Referendum-results { + margin-bottom: 1em; - &.chart { - text-align: center; - } + &.chart { + text-align: center; } - ` -); + } +`; diff --git a/packages/app-democracy/src/Overview/Referendums.tsx b/packages/app-democracy/src/Overview/Referendums.tsx index 18b0a533ac41..e933e9e0fbde 100644 --- a/packages/app-democracy/src/Overview/Referendums.tsx +++ b/packages/app-democracy/src/Overview/Referendums.tsx @@ -3,16 +3,20 @@ // of the Apache-2.0 license. See the LICENSE file for details. import { DerivedReferendum } from '@polkadot/api-derive/types'; -import { I18nProps as Props } from '@polkadot/react-components/types'; import React from 'react'; import { Table } from '@polkadot/react-components'; import { useApi, useCall } from '@polkadot/react-hooks'; import Referendum from './Referendum'; -import translate from '../translate'; +import { useTranslation } from '../translate'; -function Referendums ({ className, t }: Props): React.ReactElement { +interface Props { + className?: string; +} + +export default function Referendums ({ className }: Props): React.ReactElement { + const { t } = useTranslation(); const { api } = useApi(); const referendums = useCall(api.derive.democracy.referendums, []); @@ -38,5 +42,3 @@ function Referendums ({ className, t }: Props): React.ReactElement { ); } - -export default translate(Referendums); diff --git a/packages/app-democracy/src/Overview/Seconding.tsx b/packages/app-democracy/src/Overview/Seconding.tsx index f97317ccf295..cbdad556be5c 100644 --- a/packages/app-democracy/src/Overview/Seconding.tsx +++ b/packages/app-democracy/src/Overview/Seconding.tsx @@ -3,21 +3,22 @@ // of the Apache-2.0 license. See the LICENSE file for details. import { AccountId } from '@polkadot/types/interfaces'; -import { I18nProps } from '@polkadot/react-components/types'; import BN from 'bn.js'; import React, { useState } from 'react'; import { Button, InputAddress, Modal, TxButton } from '@polkadot/react-components'; import { useAccounts } from '@polkadot/react-hooks'; -import translate from '../translate'; +import { useTranslation } from '../translate'; -interface Props extends I18nProps { +interface Props { + className?: string; depositors: AccountId[]; proposalId: BN | number; } -function Seconding ({ depositors, proposalId, t }: Props): React.ReactElement | null { +export default function Seconding ({ depositors, proposalId }: Props): React.ReactElement | null { + const { t } = useTranslation(); const { hasAccounts } = useAccounts(); const [accountId, setAccountId] = useState(null); const [isSecondingOpen, setIsSecondingOpen] = useState(false); @@ -34,7 +35,6 @@ function Seconding ({ depositors, proposalId, t }: Props): React.ReactElement @@ -78,5 +78,3 @@ function Seconding ({ depositors, proposalId, t }: Props): React.ReactElement ); } - -export default translate(Seconding); diff --git a/packages/app-democracy/src/Overview/Voting.tsx b/packages/app-democracy/src/Overview/Voting.tsx index 910bfd4371f0..a8e5a29ed359 100644 --- a/packages/app-democracy/src/Overview/Voting.tsx +++ b/packages/app-democracy/src/Overview/Voting.tsx @@ -2,21 +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 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 { isBoolean } from '@polkadot/util'; -import translate from '../translate'; +import { useTranslation } from '../translate'; -interface Props extends I18nProps { +interface Props { referendumId: BN | number; } -function Voting ({ referendumId, t }: Props): React.ReactElement | null { +export default function Voting ({ referendumId }: Props): React.ReactElement | null { + const { t } = useTranslation(); const { hasAccounts } = useAccounts(); const [accountId, setAccountId] = useState(null); const [isVotingOpen, setIsVotingOpen] = useState(false); @@ -34,7 +33,6 @@ function Voting ({ referendumId, t }: Props): React.ReactElement | null { {isVotingOpen && ( @@ -61,5 +59,3 @@ function Voting ({ referendumId, t }: Props): React.ReactElement | null { ); } - -export default translate(Voting); diff --git a/packages/app-democracy/src/Overview/index.tsx b/packages/app-democracy/src/Overview/index.tsx index ea3f5b610667..a53a4e5a11ca 100644 --- a/packages/app-democracy/src/Overview/index.tsx +++ b/packages/app-democracy/src/Overview/index.tsx @@ -2,13 +2,11 @@ // 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 styled from 'styled-components'; import { Button } from '@polkadot/react-components'; -import translate from '../translate'; +import { useTranslation } from '../translate'; import DispatchQueue from './DispatchQueue'; import Externals from './Externals'; import Proposals from './Proposals'; @@ -17,7 +15,12 @@ import Summary from './Summary'; import PreImage from './PreImage'; import Propose from './Propose'; -function Overview ({ className, t }: Props): React.ReactElement { +interface Props { + className?: string; +} + +function Overview ({ className }: Props): React.ReactElement { + const { t } = useTranslation(); const [isPreimageOpen, setIsPreimageOpen] = useState(false); const [isProposeOpen, setIsProposeOpen] = useState(false); @@ -56,10 +59,8 @@ function Overview ({ className, t }: Props): React.ReactElement { ); } -export default translate( - styled(Overview)` - .proposalSection { - margin-bottom: 1.5rem; - } - ` -); +export default styled(Overview)` + .proposalSection { + margin-bottom: 1.5rem; + } +`; diff --git a/packages/app-democracy/src/index.tsx b/packages/app-democracy/src/index.tsx index bea9a5ffb29d..b2c9b3b20251 100644 --- a/packages/app-democracy/src/index.tsx +++ b/packages/app-democracy/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,17 +11,19 @@ import uiSettings from '@polkadot/ui-settings'; 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 {} const hidden = uiSettings.uiMode === 'full' ? [] : ['propose']; -function DemocracyApp ({ basePath, t }: Props): React.ReactElement { +export default function DemocracyApp ({ basePath }: Props): React.ReactElement { + const { t } = useTranslation(); + return (
@@ -44,5 +46,3 @@ function DemocracyApp ({ basePath, t }: Props): React.ReactElement {
); } - -export default translate(DemocracyApp); diff --git a/packages/app-explorer/package.json b/packages/app-explorer/package.json index 7bb5817e6dd4..f3d337098439 100644 --- a/packages/app-explorer/package.json +++ b/packages/app-explorer/package.json @@ -1,6 +1,6 @@ { "name": "@polkadot/app-explorer", - "version": "0.39.0-beta.43", + "version": "0.39.0-beta.74", "main": "index.js", "repository": "https://github.com/polkadot-js/apps.git", "author": "Jaco Greeff ", @@ -11,6 +11,6 @@ "license": "Apache-2.0", "dependencies": { "@babel/runtime": "^7.7.7", - "@polkadot/react-components": "^0.39.0-beta.43" + "@polkadot/react-components": "^0.39.0-beta.74" } } diff --git a/packages/app-extrinsics/package.json b/packages/app-extrinsics/package.json index d7fb90d39174..54a9eb9ca7f1 100644 --- a/packages/app-extrinsics/package.json +++ b/packages/app-extrinsics/package.json @@ -1,6 +1,6 @@ { "name": "@polkadot/app-extrinsics", - "version": "0.39.0-beta.43", + "version": "0.39.0-beta.74", "main": "index.js", "repository": "https://github.com/polkadot-js/apps.git", "author": "Jaco Greeff ", @@ -11,8 +11,8 @@ "license": "Apache-2.0", "dependencies": { "@babel/runtime": "^7.7.7", - "@polkadot/react-components": "^0.39.0-beta.43", - "@polkadot/react-params": "^0.39.0-beta.43", - "@polkadot/react-signer": "^0.39.0-beta.43" + "@polkadot/react-components": "^0.39.0-beta.74", + "@polkadot/react-params": "^0.39.0-beta.74", + "@polkadot/react-signer": "^0.39.0-beta.74" } } diff --git a/packages/app-generic-asset/package.json b/packages/app-generic-asset/package.json index eaa2cce58dcc..a846b62f85ac 100644 --- a/packages/app-generic-asset/package.json +++ b/packages/app-generic-asset/package.json @@ -1,6 +1,6 @@ { "name": "@polkadot/app-generic-asset", - "version": "0.39.0-beta.43", + "version": "0.39.0-beta.74", "description": "A basic GenericAsset transfer app", "main": "index.js", "scripts": {}, @@ -11,6 +11,6 @@ "license": "Apache-2.0", "dependencies": { "@babel/runtime": "^7.7.7", - "@polkadot/react-components": "^0.39.0-beta.43" + "@polkadot/react-components": "^0.39.0-beta.74" } } diff --git a/packages/app-generic-asset/src/modals/Create.tsx b/packages/app-generic-asset/src/modals/Create.tsx index ff4636524953..f409c6581397 100644 --- a/packages/app-generic-asset/src/modals/Create.tsx +++ b/packages/app-generic-asset/src/modals/Create.tsx @@ -28,10 +28,7 @@ function Create ({ onClose, onRegister, t }: Props): React.ReactElement { }; return ( - + void; removeSnippet: () => void; runJs: () => void; saveSnippet: (snippetName: string) => void; @@ -22,18 +20,11 @@ interface Props extends BareProps, I18nProps { stopJs: () => void; } -function ActionButtons ({ className, generateLink, isCustomExample, isRunning, removeSnippet, runJs, saveSnippet, stopJs, t }: Props): React.ReactElement { +export default function ActionButtons ({ className, isCustomExample, isRunning, removeSnippet, runJs, saveSnippet, stopJs }: Props): React.ReactElement { + const { t } = useTranslation(); const [isOpen, setIsOpen] = useState(false); - const [shareText, setShareText] = useState(t('Generate link to share code example')); const [snippetName, setSnippetName] = useState(''); - const _generateLink = (): void => { - setShareText(t('Copied to clipboard')); - generateLink(); - }; - const _onShareClose = (): void => { - setShareText(t('Generate link to share code example')); - }; const _onChangeName = (snippetName: string): void => { setSnippetName(snippetName); }; @@ -51,19 +42,6 @@ function ActionButtons ({ className, generateLink, isCustomExample, isRunning, r return (
- - } - wide='very' - /> { // FIXME: The event trigger on='hover' does not work together with the ui-app' //
); } - -export default translate( - styled(ActionButtons)`` -); diff --git a/packages/app-js/src/Playground.tsx b/packages/app-js/src/Playground.tsx index db38bd1d4613..7745715133f6 100644 --- a/packages/app-js/src/Playground.tsx +++ b/packages/app-js/src/Playground.tsx @@ -4,13 +4,10 @@ import { ApiPromise } from '@polkadot/api'; import { KeyringInstance } from '@polkadot/keyring/types'; -import { AppProps, I18nProps } from '@polkadot/react-components/types'; +import { AppProps as Props } from '@polkadot/react-components/types'; import { Log, LogType, Snippet } from './types'; import React, { useRef, useState, useEffect } from 'react'; -import { useHistory, useParams } from 'react-router-dom'; -import { Transition } from 'semantic-ui-react'; -import snappy from 'snappyjs'; import styled from 'styled-components'; import { Button, Dropdown, Editor } from '@polkadot/react-components'; import { useApi } from '@polkadot/react-hooks'; @@ -19,10 +16,10 @@ import * as types from '@polkadot/types'; import * as util from '@polkadot/util'; import * as hashing from '@polkadot/util-crypto'; +import { STORE_EXAMPLES, STORE_SELECTED, CUSTOM_LABEL } from './constants'; import makeWrapper from './snippets/wrapping'; import allSnippets from './snippets'; -import translate from './translate'; -import { STORE_EXAMPLES, STORE_SELECTED, CUSTOM_LABEL } from './constants'; +import { useTranslation } from './translate'; import Output from './Output'; import ActionButtons from './ActionButtons'; @@ -36,66 +33,33 @@ interface Injected { global: null; hashing: typeof hashing; keyring: KeyringInstance | null; + localStorage: null; + location: null; + setIsRunning: (isRunning: boolean) => void; types: typeof types; util: typeof util; window: null; } -interface Props extends AppProps, I18nProps { -} - const snippets: Snippet[] = JSON.parse(JSON.stringify(allSnippets)); let hasSnippetWrappers = false; -function decodeBase64 (base64: string): Snippet { - const sharedExample: Snippet = { - code: '', - label: { basic: true, children: 'URL', size: 'tiny' }, - text: 'Shared code example (unsaved)', - type: 'shared', - value: `custom-${Date.now()}` - }; - - try { - const compStr = atob(base64); - const compU8a = new Uint8Array(compStr.length); - - compU8a.forEach((_, i): void => { - compU8a[i] = compStr.charCodeAt(i); - }); - - const u8a = snappy.uncompress(compU8a); - const code = util.u8aToString(u8a); - - sharedExample.code = code; - } catch (error) { - const errorMessage = 'ERROR: Unable to decode code example from URL'; - - console.error(`${errorMessage}: \n${error}`); - sharedExample.code = `// ${errorMessage}`; - } - - return sharedExample; -} - // FIXME This... ladies & gentlemen, is a mess that should be untangled -function Playground ({ className, t }: Props): React.ReactElement { +function Playground ({ className }: Props): React.ReactElement { + const { t } = useTranslation(); const { api, isDevelopment } = useApi(); - const history = useHistory(); - const { base64 } = useParams(); const injectedRef = useRef(null); const [code, setCode] = useState(''); - const [isAnimated, setIsAnimated] = useState(true); const [isCustomExample, setIsCustomExample] = useState(false); const [isRunning, setIsRunning] = useState(false); const [customExamples, setCustomExamples] = useState([]); const [logs, setLogs] = useState([]); const [options, setOptions] = useState([]); const [selected, setSelected] = useState(snippets[0]); - const [sharedExample, setSharedExample] = useState(); - // add snippet wrappers + // initialize all options useEffect((): void => { + // add snippets if not already available (global) if (!hasSnippetWrappers) { snippets.forEach((snippet): void => { snippet.code = `${makeWrapper(isDevelopment)}${snippet.code}`; @@ -103,28 +67,19 @@ function Playground ({ className, t }: Props): React.ReactElement { hasSnippetWrappers = true; } - }, []); - // initialize all options - useEffect((): void => { - const sharedExample = base64 ? decodeBase64(base64) : undefined; const localData = { examples: localStorage.getItem(STORE_EXAMPLES), selectedValue: localStorage.getItem(STORE_SELECTED) }; const customExamples = localData.examples ? JSON.parse(localData.examples) : []; - - const options: Snippet[] = sharedExample - ? [sharedExample, ...customExamples, ...snippets] - : [...customExamples, ...snippets]; - + const options: Snippet[] = [...customExamples, ...snippets]; const selected = options.find((option): boolean => option.value === localData.selectedValue); setCustomExamples(customExamples); setIsCustomExample((selected && selected.type === 'custom') || false); setOptions(options); - setSelected(sharedExample || selected || snippets[0]); - setSharedExample(sharedExample); + setSelected(selected || snippets[0]); }, []); useEffect((): void => { @@ -136,32 +91,6 @@ function Playground ({ className, t }: Props): React.ReactElement { logs.push({ args, type }); setLogs(logs.slice(0)); }; - const _copyToClipboard = (link: string): void => { - // See https://hackernoon.com/copying-text-to-clipboard-with-javascript-df4d4988697f - const el = document.createElement('textarea'); - - el.value = link; - el.setAttribute('readonly', ''); - el.style.position = 'absolute'; - el.style.left = '-9999px'; - document.body.appendChild(el); - - const existingSelection = document.getSelection(); - const selected = existingSelection && existingSelection.rangeCount > 0 - ? existingSelection.getRangeAt(0) - : undefined; - - el.select(); - document.execCommand('copy'); - document.body.removeChild(el); - - if (existingSelection && selected) { - existingSelection.removeAllRanges(); - existingSelection.addRange(selected); - } - - setIsAnimated(!isAnimated); - }; const _stopJs = (): void => { if (injectedRef.current) { injectedRef.current.api.disconnect(); @@ -185,6 +114,9 @@ function Playground ({ className, t }: Props): React.ReactElement { keyring: isDevelopment ? uiKeyring.keyring : null, + location: null, + localStorage: null, + setIsRunning, types, util, window: null @@ -192,12 +124,17 @@ function Playground ({ className, t }: Props): React.ReactElement { await injectedRef.current.api.isReady; - // squash into a single line so exceptions (with line numbers) maps to the same line/origin - // as we have in the editor view (TODO: Make the console.error here actually return the full stack) - const exec = `(async ({${Object.keys(injectedRef.current).join(',')}}) => { try { ${code} \n } catch (error) { console.error(error); } })(injected);`; + try { + // squash into a single line so exceptions (with line numbers) maps to the + // same line/origin as we have in the editor view + // TODO: Make the console.error here actually return the full stack + const exec = `(async ({${Object.keys(injectedRef.current).join(',')}}) => { try { ${code} \n } catch (error) { console.error(error); setIsRunning(false); } })(injected);`; - // eslint-disable-next-line no-new-func - new Function('injected', exec)(injectedRef.current); + // eslint-disable-next-line no-new-func + new Function('injected', exec).bind({}, injectedRef.current)(); + } catch (error) { + injectedRef.current.console.error(error); + } setIsRunning(false); }; @@ -216,34 +153,13 @@ function Playground ({ className, t }: Props): React.ReactElement { } } }; - const _generateLink = (): void => { - const u8a = util.stringToU8a(code); - const compU8a = snappy.compress(u8a); - const compStr = compU8a.reduce((str: string, ch: number): string => { - return str + String.fromCharCode(ch); - }, ''); - - const base64code = btoa(compStr); - const path = `/js/share/${base64code}`; - - if (base64code !== base64) { - history.push(path); - } - - const basePath = window.location.pathname.replace('/', '').length > 0 - ? `${window.location.origin}/${window.location.pathname.replace('/', '')}` - : `${window.location.origin}`; - - _copyToClipboard(`${basePath}/#${path}`); - }; const _removeSnippet = (): void => { const filtered = customExamples.filter((value): boolean => value.value !== selected.value); const nextOptions = [...filtered, ...snippets]; setCustomExamples(filtered); setIsCustomExample(nextOptions[0].type === 'custom'); - setOptions(sharedExample ? [sharedExample, ...nextOptions] : nextOptions); - + setOptions(nextOptions); _selectExample(nextOptions[0].value); localStorage.setItem(STORE_EXAMPLES, JSON.stringify(filtered)); }; @@ -257,20 +173,13 @@ function Playground ({ className, t }: Props): React.ReactElement { type: 'custom', value: `custom-${Date.now()}` }; - const nextOptions = [snapshot, ...customExamples, ...snippets]; - const options = selected.type === 'shared' - ? nextOptions - : sharedExample - ? [sharedExample, ...nextOptions] - : nextOptions; + const options = [snapshot, ...customExamples, ...snippets]; localStorage.setItem(STORE_EXAMPLES, JSON.stringify([snapshot, ...customExamples])); - setCustomExamples([snapshot, ...customExamples]); setIsCustomExample(true); setOptions(options); setSelected(snapshot); - setSharedExample(selected.type === 'shared' ? undefined : sharedExample); }; const snippetName = selected.type === 'custom' ? selected.text : undefined; @@ -280,6 +189,7 @@ function Playground ({ className, t }: Props): React.ReactElement {
{ />
- -
- - -
- +
+ + +
{ ); } -export default translate( - styled(Playground)` +export default styled(Playground)` + display: flex; + flex-direction: column; + height: 100vh; + padding: 1rem 0 0; + + .js--Content { + align-content: stretch; + align-items: stretch; display: flex; - flex-direction: column; - height: 100vh; - padding: 1rem 0 0; + height: 100%; + justify-content: space-between; + margin-bottom: 0; + } + + .js--Dropdown { + position: relative; + z-index: 200; - .js--Content { - align-content: stretch; - align-items: stretch; + .dropdown .menu > .item { display: flex; - height: 100%; + flex-direction: row-reverse; justify-content: space-between; - margin-bottom: 0; } + } - .js--Dropdown { - margin-right: 100px; - position: relative; - z-index: 200; + .js--Editor, + .js--Output { + min-width: 200px; - .dropdown .menu > .item { - display: flex; - flex-direction: row-reverse; - justify-content: space-between; - } + .action-button { + position: absolute; + right: 0.25rem; + top: 0.5rem; + z-index: 100; } + } - .js--Editor, - .js--Output { - min-width: 200px; + .js--Editor { + flex-grow: 1; + overflow: auto; + padding: 0; + position: relative; + resize: horizontal; + width: 60%; - .action-button { - position: absolute; - right: 0.25rem; - top: 0.5rem; - z-index: 100; - } + textarea { + outline: 0; } - .js--Editor { - flex-grow: 1; - overflow: auto; - padding: 0; - position: relative; - resize: horizontal; - width: 60%; - - textarea { - outline: 0; - } - - .codeflask { - background: transparent; - } + .codeflask { + background: transparent; + } - .codeflask--has-line-numbers { - z-index: 0; - } + .codeflask--has-line-numbers { + z-index: 0; + } - .codeflask--has-line-numbers .codeflask__flatten { - font-size: 12px; - line-height: 18px; - min-width: calc(100% - 40px); - padding-top: 50px; - width: auto; - } + .codeflask--has-line-numbers .codeflask__flatten { + font-size: 12px; + line-height: 18px; + min-width: calc(100% - 40px); + padding-top: 50px; + width: auto; + } - .codeflask__lines { - background: #fafafa; - line-height: 18px; - padding-top: 50px; - z-index: 100; - } + .codeflask__lines { + background: #fafafa; + line-height: 18px; + padding-top: 50px; + z-index: 100; + } - &::after { - bottom: 0; - content: '↔'; - cursor: col-resize; - font-size: 20px; - height: 20px; - line-height: 18px; - position: absolute; - right: 0; - width: 22px; - z-index: 1; - } + &::after { + bottom: 0; + content: '↔'; + cursor: col-resize; + font-size: 20px; + height: 20px; + line-height: 18px; + position: absolute; + right: 0; + width: 22px; + z-index: 1; } + } - .ui.popup.popup-local { - display: flex; - flex: 1 1 100%; - max-width: 300px; + .ui.popup.popup-local { + display: flex; + flex: 1 1 100%; + max-width: 300px; - .button { - margin: 0; - } + .button { + margin: 0; } - ` -); + } +`; diff --git a/packages/app-js/src/index.tsx b/packages/app-js/src/index.tsx index 6becd8c08835..0261bb1387ce 100644 --- a/packages/app-js/src/index.tsx +++ b/packages/app-js/src/index.tsx @@ -2,20 +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 { AppProps, BareProps } from '@polkadot/react-components/types'; +import { AppProps as Props } from '@polkadot/react-components/types'; import React from 'react'; -import { Route, Switch } from 'react-router'; import Playground from './Playground'; -interface Props extends AppProps, BareProps {} - -export default function ScriptingApp ({ basePath }: Props): React.ReactElement { - return ( - - - - - ); +export default function JsApp (props: Props): React.ReactElement { + return ; } diff --git a/packages/app-parachains/package.json b/packages/app-parachains/package.json index 237cc6e831f6..6817708ad4b8 100644 --- a/packages/app-parachains/package.json +++ b/packages/app-parachains/package.json @@ -1,6 +1,6 @@ { "name": "@polkadot/app-parachains", - "version": "0.39.0-beta.43", + "version": "0.39.0-beta.74", "description": "Parachains", "main": "index.js", "scripts": {}, @@ -11,7 +11,7 @@ "license": "Apache-2.0", "dependencies": { "@babel/runtime": "^7.7.7", - "@polkadot/react-components": "^0.39.0-beta.43", - "@polkadot/react-query": "^0.39.0-beta.43" + "@polkadot/react-components": "^0.39.0-beta.74", + "@polkadot/react-query": "^0.39.0-beta.74" } } 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-settings/package.json b/packages/app-settings/package.json index 02fb16e21ac6..5e5ead800a77 100644 --- a/packages/app-settings/package.json +++ b/packages/app-settings/package.json @@ -1,6 +1,6 @@ { "name": "@polkadot/app-settings", - "version": "0.39.0-beta.43", + "version": "0.39.0-beta.74", "description": "Settings management", "main": "index.js", "scripts": {}, @@ -11,8 +11,8 @@ "license": "Apache-2.0", "dependencies": { "@babel/runtime": "^7.7.7", - "@polkadot/react-components": "^0.39.0-beta.43", - "@polkadot/react-query": "^0.39.0-beta.43", + "@polkadot/react-components": "^0.39.0-beta.74", + "@polkadot/react-query": "^0.39.0-beta.74", "query-string": "^6.8.3" } } diff --git a/packages/app-settings/src/SelectUrl.tsx b/packages/app-settings/src/SelectUrl.tsx index 4c31a830bb54..1d8ed5d96cb6 100644 --- a/packages/app-settings/src/SelectUrl.tsx +++ b/packages/app-settings/src/SelectUrl.tsx @@ -28,7 +28,7 @@ interface State extends StateUrl { isCustom: boolean; } -const hijackSettings = () => { +const hijackSettings = (): void => { const ENDPOINT_DEFAULT = 'wss://testnet-node-1.acala.laminar.one/ws'; const ENDPOINTS = [ { text: 'Acala Alpha Testnet', value: ENDPOINT_DEFAULT, info: 'substrate' }, diff --git a/packages/app-society/LICENSE b/packages/app-society/LICENSE new file mode 100644 index 000000000000..0d381b2e97dc --- /dev/null +++ b/packages/app-society/LICENSE @@ -0,0 +1,201 @@ + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + +TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + +1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + +2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + +3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + +4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + +5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + +6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + +7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + +8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + +9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + +END OF TERMS AND CONDITIONS + +APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + +Copyright [yyyy] [name of copyright owner] + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. diff --git a/packages/app-society/README.md b/packages/app-society/README.md new file mode 100644 index 000000000000..1b410883198f --- /dev/null +++ b/packages/app-society/README.md @@ -0,0 +1 @@ +# @polkadot/app-society diff --git a/packages/app-society/package.json b/packages/app-society/package.json new file mode 100644 index 000000000000..5b2e5d8159fe --- /dev/null +++ b/packages/app-society/package.json @@ -0,0 +1,13 @@ +{ + "name": "@polkadot/app-society", + "version": "0.39.0-beta.74", + "description": "A society", + "main": "index.js", + "scripts": {}, + "author": "Jaco Greeff ", + "license": "Apache-2.0", + "dependencies": { + "@babel/runtime": "^7.7.7", + "@polkadot/react-components": "^0.39.0-beta.74" + } +} diff --git a/packages/app-society/src/Overview/Candidate.tsx b/packages/app-society/src/Overview/Candidate.tsx new file mode 100644 index 000000000000..6a99d25acc52 --- /dev/null +++ b/packages/app-society/src/Overview/Candidate.tsx @@ -0,0 +1,37 @@ +// Copyright 2017-2020 @polkadot/app-society 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 { DeriveSocietyCandidate } from '@polkadot/api-derive/types'; + +import React from 'react'; +import { AddressSmall } from '@polkadot/react-components'; +import { FormatBalance } from '@polkadot/react-query'; + +import { useTranslation } from '../translate'; + +interface Props { + value: DeriveSocietyCandidate; +} + +export default function Candidate ({ value: { accountId, kind, value } }: Props): React.ReactElement { + const { t } = useTranslation(); + + return ( + + + + + + + {kind.toString()} + + + + + + ); +} diff --git a/packages/app-society/src/Overview/Candidates.tsx b/packages/app-society/src/Overview/Candidates.tsx new file mode 100644 index 000000000000..e20112d68cb8 --- /dev/null +++ b/packages/app-society/src/Overview/Candidates.tsx @@ -0,0 +1,43 @@ +// Copyright 2017-2020 @polkadot/app-society 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 { DeriveSocietyCandidate } from '@polkadot/api-derive/types'; + +import React from 'react'; +import { Table } from '@polkadot/react-components'; +import { useApi, useCall } from '@polkadot/react-hooks'; + +import { useTranslation } from '../translate'; +import Candidate from './Candidate'; + +interface Props { + className?: string; +} + +export default function Candidates ({ className }: Props): React.ReactElement { + const { t } = useTranslation(); + const { api } = useApi(); + const candidates = useCall(api.derive.society.candidates, []); + + return ( +
+

{t('candidates')}

+ {candidates?.length + ? ( + + + {candidates.map((candidate): React.ReactNode => ( + + ))} + +
+ ) + : t('No candidates') + } +
+ ); +} diff --git a/packages/app-society/src/Overview/Member.tsx b/packages/app-society/src/Overview/Member.tsx new file mode 100644 index 000000000000..3a5a23e5af80 --- /dev/null +++ b/packages/app-society/src/Overview/Member.tsx @@ -0,0 +1,30 @@ +// Copyright 2017-2020 @polkadot/app-society 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 { DeriveSocietyMember } from '@polkadot/api-derive/types'; + +import React from 'react'; +import { AddressSmall } from '@polkadot/react-components'; + +import { useTranslation } from '../translate'; + +interface Props { + value: DeriveSocietyMember; +} + +export default function Member ({ value: { accountId, strikes } }: Props): React.ReactElement { + const { t } = useTranslation(); + + return ( + + + + + + + {strikes.toString()} + + + ); +} diff --git a/packages/app-society/src/Overview/Members.tsx b/packages/app-society/src/Overview/Members.tsx new file mode 100644 index 000000000000..8d0875dfeb70 --- /dev/null +++ b/packages/app-society/src/Overview/Members.tsx @@ -0,0 +1,43 @@ +// Copyright 2017-2020 @polkadot/app-society 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 { DeriveSocietyMember } from '@polkadot/api-derive/types'; + +import React from 'react'; +import { Table } from '@polkadot/react-components'; +import { useApi, useCall } from '@polkadot/react-hooks'; + +import { useTranslation } from '../translate'; +import Member from './Member'; + +interface Props { + className?: string; +} + +export default function Members ({ className }: Props): React.ReactElement { + const { t } = useTranslation(); + const { api } = useApi(); + const members = useCall(api.derive.society.members, []); + + return ( +
+

{t('members')}

+ {members?.length + ? ( + + + {members.map((member): React.ReactNode => ( + + ))} + +
+ ) + : t('No active members') + } +
+ ); +} diff --git a/packages/app-society/src/Overview/Summary.tsx b/packages/app-society/src/Overview/Summary.tsx new file mode 100644 index 000000000000..d6083894d6cd --- /dev/null +++ b/packages/app-society/src/Overview/Summary.tsx @@ -0,0 +1,92 @@ +// Copyright 2017-2020 @polkadot/app-society 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 { DeriveSociety } from '@polkadot/api-derive/types'; +import { AccountId } from '@polkadot/types/interfaces'; + +import React from 'react'; +import styled from 'styled-components'; +import { AccountName, IdentityIcon, SummaryBox, CardSummary } from '@polkadot/react-components'; +import { useApi, useCall } from '@polkadot/react-hooks'; +import { formatBalance } from '@polkadot/util'; + +import { useTranslation } from '../translate'; + +interface Props { + className?: string; +} + +interface NameProps { + label: string; + value?: AccountId; +} + +function Name ({ label, value }: NameProps): React.ReactElement | null { + if (!value) { + return null; + } + + return ( + +
+ + +
+ + ); +} + +function Summary ({ className }: Props): React.ReactElement { + const { t } = useTranslation(); + const { api } = useApi(); + const info = useCall(api.derive.society.info, []); + const members = useCall(api.derive.society.members, []); + + const pot = info?.pot.gtn(0) + ? info.pot.toString() + : null; + + return ( + +
+ +
+
+ {info && members && ( + + {members.length}/{info.maxMembers.toString()} + + )} +
+
+ {pot && ( + + {formatBalance(pot, false)}{formatBalance.calcSi(pot).value} + + )} +
+ + ); +} + +export default styled(Summary)` + .society--header--account { + white-space: nowrap; + + .ui--AccountName, + .ui--IdentityIcon { + display: inline-block; + } + + .ui--IdentityIcon { + margin-right: 0.5rem; + } + } +`; diff --git a/packages/app-society/src/Overview/index.tsx b/packages/app-society/src/Overview/index.tsx new file mode 100644 index 000000000000..554379b0f933 --- /dev/null +++ b/packages/app-society/src/Overview/index.tsx @@ -0,0 +1,30 @@ +// Copyright 2017-2020 @polkadot/app-society 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 React from 'react'; +import styled from 'styled-components'; + +import Candidates from './Candidates'; +import Members from './Members'; +import Summary from './Summary'; + +interface Props { + className?: string; +} + +function Overview ({ className }: Props): React.ReactElement { + return ( +
+ + + +
+ ); +} + +export default styled(Overview)` + .overviewSection { + margin-bottom: 1.5rem; + } +`; diff --git a/packages/app-society/src/index.tsx b/packages/app-society/src/index.tsx new file mode 100644 index 000000000000..fa14442f4c20 --- /dev/null +++ b/packages/app-society/src/index.tsx @@ -0,0 +1,38 @@ +// Copyright 2017-2020 @polkadot/app-society 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 { 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 { useTranslation } from './translate'; + +interface Props extends AppProps, BareProps {} + +export default function SocietyApp ({ basePath, className }: Props): React.ReactElement { + const { t } = useTranslation(); + + return ( +
+
+ +
+ + + +
+ ); +} diff --git a/packages/app-society/src/translate.ts b/packages/app-society/src/translate.ts new file mode 100644 index 000000000000..e1216aa50f1d --- /dev/null +++ b/packages/app-society/src/translate.ts @@ -0,0 +1,11 @@ +// Copyright 2017-2020 @polkadot/app-society 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 { useTranslation as useTranslationBase, UseTranslationResponse, withTranslation } from 'react-i18next'; + +export function useTranslation (): UseTranslationResponse { + return useTranslationBase('app-society'); +} + +export default withTranslation(['app-society']); diff --git a/packages/app-staking/package.json b/packages/app-staking/package.json index f1c365ce8312..63606338772f 100644 --- a/packages/app-staking/package.json +++ b/packages/app-staking/package.json @@ -1,6 +1,6 @@ { "name": "@polkadot/app-staking", - "version": "0.39.0-beta.43", + "version": "0.39.0-beta.74", "description": "A basic staking app", "main": "index.js", "scripts": {}, @@ -11,8 +11,8 @@ "license": "Apache-2.0", "dependencies": { "@babel/runtime": "^7.7.7", - "@polkadot/app-explorer": "^0.39.0-beta.43", - "@polkadot/react-components": "^0.39.0-beta.43", - "@polkadot/react-query": "^0.39.0-beta.43" + "@polkadot/app-explorer": "^0.39.0-beta.74", + "@polkadot/react-components": "^0.39.0-beta.74", + "@polkadot/react-query": "^0.39.0-beta.74" } } diff --git a/packages/app-staking/src/Actions/Account/BondExtra.tsx b/packages/app-staking/src/Actions/Account/BondExtra.tsx index 66e56cc2a2f2..8a27e24f7132 100644 --- a/packages/app-staking/src/Actions/Account/BondExtra.tsx +++ b/packages/app-staking/src/Actions/Account/BondExtra.tsx @@ -68,7 +68,6 @@ class BondExtra extends TxComponent { {this.renderContent()} diff --git a/packages/app-staking/src/Actions/Account/InjectKeys.tsx b/packages/app-staking/src/Actions/Account/InjectKeys.tsx index 370cf72a4968..87cafd106e1e 100644 --- a/packages/app-staking/src/Actions/Account/InjectKeys.tsx +++ b/packages/app-staking/src/Actions/Account/InjectKeys.tsx @@ -72,7 +72,6 @@ function InjectKeys ({ isOpen = true, onClose, t }: Props): React.ReactElement

diff --git a/packages/app-staking/src/Actions/Account/InputValidationController.tsx b/packages/app-staking/src/Actions/Account/InputValidationController.tsx index ea0d30700a4a..c06e8b134cd8 100644 --- a/packages/app-staking/src/Actions/Account/InputValidationController.tsx +++ b/packages/app-staking/src/Actions/Account/InputValidationController.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 { AccountId, StakingLedger } from '@polkadot/types/interfaces'; import React, { useEffect, useState } from 'react'; @@ -10,9 +9,9 @@ import { Icon } from '@polkadot/react-components'; import { Option } from '@polkadot/types'; import { useApi, useCall } from '@polkadot/react-hooks'; -import translate from '../../translate'; +import { useTranslation } from '../../translate'; -interface Props extends I18nProps { +interface Props { accountId: string | null; controllerId: string | null; defaultController?: string; @@ -22,25 +21,20 @@ interface Props extends I18nProps { const DISTINCT = 'Distinct stash and controller accounts are recommended to ensure fund security.'; -function ValidateController ({ accountId, controllerId, defaultController, isUnsafeChain, onError, t }: Props): React.ReactElement | null { +export default function ValidateController ({ accountId, controllerId, defaultController, isUnsafeChain, onError }: Props): React.ReactElement | null { + const { t } = useTranslation(); const { api } = useApi(); const bondedId = useCall(api.query.staking.bonded, [controllerId], { - transform: (value: Option): string | null => { - const extracted = value.unwrapOr(null); - - return extracted - ? extracted.toString() - : null; - } + transform: (value: Option): string | null => + value.isSome + ? value.unwrap().toString() + : null }); - const stashId = useCall(api.query.staking.ledger, [controllerId], { - transform: (value: Option): string | null => { - const extracted = value.unwrapOr({ stash: null }).stash; - - return extracted - ? extracted.toString() - : null; - } + const stashId = useCall(controllerId ? api.query.staking.ledger : null, [controllerId], { + transform: (value: Option): string | null => + value.isSome + ? value.unwrap().stash.toString() + : null }); const [error, setError] = useState(null); @@ -77,5 +71,3 @@ function ValidateController ({ accountId, controllerId, defaultController, isUns ); } - -export default translate(ValidateController); 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 84e6dba49c6e..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([]); @@ -38,7 +39,7 @@ function Nominate ({ className, controllerId, nominees, onClose, next, stakingOv useEffect((): void => { if (stakingOverview) { - setValidators((stakingOverview.currentElected || []).map((acc): string => acc.toString())); + setValidators(stakingOverview.validators.map((acc): string => acc.toString())); } }, [stakingOverview]); @@ -61,7 +62,6 @@ function Nominate ({ className, controllerId, nominees, onClose, next, stakingOv { diff --git a/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx b/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx index 9439e694abc5..631d38f44a8d 100644 --- a/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx +++ b/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx @@ -39,7 +39,6 @@ class SetRewardDestination extends TxComponent { {this.renderContent()} diff --git a/packages/app-staking/src/Actions/Account/SetSessionKey.tsx b/packages/app-staking/src/Actions/Account/SetSessionKey.tsx index 857e97ce07ff..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( @@ -42,7 +41,6 @@ function SetSessionKey ({ controllerId, isOpen, onClose, sessionIds, stashId, t @@ -114,5 +112,3 @@ function SetSessionKey ({ controllerId, isOpen, onClose, sessionIds, stashId, t ); } - -export default translate(SetSessionKey); diff --git a/packages/app-staking/src/Actions/Account/Unbond.tsx b/packages/app-staking/src/Actions/Account/Unbond.tsx index 7bb36dc77331..88274ba9907a 100644 --- a/packages/app-staking/src/Actions/Account/Unbond.tsx +++ b/packages/app-staking/src/Actions/Account/Unbond.tsx @@ -63,7 +63,6 @@ class Unbond extends TxComponent { {this.renderContent()} diff --git a/packages/app-staking/src/Actions/Account/Validate.tsx b/packages/app-staking/src/Actions/Account/Validate.tsx index 619a3c354278..f70eaf2e29c0 100644 --- a/packages/app-staking/src/Actions/Account/Validate.tsx +++ b/packages/app-staking/src/Actions/Account/Validate.tsx @@ -85,7 +85,6 @@ class Validate extends TxComponent { {this.renderContent()} diff --git a/packages/app-staking/src/Actions/Account/index.tsx b/packages/app-staking/src/Actions/Account/index.tsx index ec3e64ecb4c1..65e32c965775 100644 --- a/packages/app-staking/src/Actions/Account/index.tsx +++ b/packages/app-staking/src/Actions/Account/index.tsx @@ -3,17 +3,16 @@ // of the Apache-2.0 license. See the LICENSE file for details. import { DerivedBalances, DerivedStakingAccount, DerivedStakingOverview, DerivedHeartbeats } from '@polkadot/api-derive/types'; -import { I18nProps } from '@polkadot/react-components/types'; import { AccountId, Exposure, StakingLedger, ValidatorPrefs } from '@polkadot/types/interfaces'; import { Codec, ITuple } from '@polkadot/types/types'; import React, { useEffect, useState } from 'react'; import styled from 'styled-components'; import { AddressInfo, AddressMini, AddressSmall, Button, Menu, Popup, TxButton } from '@polkadot/react-components'; -import { useApi, useCall, useToggle } from '@polkadot/react-hooks'; +import { useAccounts, useApi, useCall, useToggle } from '@polkadot/react-hooks'; import { u8aConcat, u8aToHex } from '@polkadot/util'; -import translate from '../../translate'; +import { useTranslation } from '../../translate'; import BondExtra from './BondExtra'; import InjectKeys from './InjectKeys'; import Nominate from './Nominate'; @@ -22,11 +21,13 @@ import SetRewardDestination from './SetRewardDestination'; import SetSessionKey from './SetSessionKey'; import Unbond from './Unbond'; import Validate from './Validate'; +import useInactives from './useInactives'; type ValidatorInfo = ITuple<[ValidatorPrefs, Codec]>; -interface Props extends I18nProps { +interface Props { allStashes?: string[]; + className?: string; isOwnStash: boolean; next: string[]; onUpdateType: (stashId: string, type: 'validator' | 'nominator' | 'started' | 'other') => void; @@ -41,6 +42,7 @@ interface StakeState { hexSessionIdNext: string | null; hexSessionIdQueue: string | null; isLoading: boolean; + isOwnController: boolean; isStashNominating: boolean; isStashValidating: boolean; nominees?: string[]; @@ -56,18 +58,20 @@ function toIdString (id?: AccountId | null): string | null { : null; } -function getStakeState (allStashes: string[] | undefined, { controllerId, nextSessionIds, nominators, rewardDestination, sessionIds, stakers, stakingLedger, validatorPrefs }: DerivedStakingAccount, stashId: string, validateInfo: ValidatorInfo): StakeState { +function getStakeState (allAccounts: string[], allStashes: string[] | undefined, { controllerId: _controllerId, nextSessionIds, nominators, rewardDestination, sessionIds, stakers, stakingLedger, validatorPrefs }: DerivedStakingAccount, stashId: string, validateInfo: ValidatorInfo): StakeState { const isStashNominating = !!(nominators?.length); const isStashValidating = !validateInfo[1].isEmpty || !!allStashes?.includes(stashId); const nextConcat = u8aConcat(...nextSessionIds.map((id): Uint8Array => id.toU8a())); const currConcat = u8aConcat(...sessionIds.map((id): Uint8Array => id.toU8a())); + const controllerId = toIdString(_controllerId); return { - controllerId: toIdString(controllerId), + controllerId, destination: rewardDestination?.toNumber() || 0, hexSessionIdNext: u8aToHex(nextConcat, 48), hexSessionIdQueue: u8aToHex(currConcat.length ? currConcat : nextConcat, 48), isLoading: false, + isOwnController: allAccounts.includes(controllerId || ''), isStashNominating, isStashValidating, // we assume that all ids are non-null @@ -83,12 +87,15 @@ function getStakeState (allStashes: string[] | undefined, { controllerId, nextSe }; } -function Account ({ allStashes, className, isOwnStash, next, onUpdateType, stakingOverview, stashId, t }: Props): React.ReactElement { - const { api, isSubstrateV2 } = useApi(); +function Account ({ allStashes, className, isOwnStash, next, onUpdateType, stakingOverview, stashId }: Props): React.ReactElement { + const { t } = useTranslation(); + const { api } = useApi(); + const { allAccounts } = useAccounts(); const validateInfo = useCall(api.query.staking.validators, [stashId]); const balancesAll = useCall(api.derive.balances.all as any, [stashId]); const stakingAccount = useCall(api.derive.staking.account as any, [stashId]); - const [{ controllerId, destination, hexSessionIdQueue, hexSessionIdNext, isLoading, isStashNominating, isStashValidating, nominees, sessionIds, validatorPrefs }, setStakeState] = useState({ controllerId: null, destination: 0, hexSessionIdNext: null, hexSessionIdQueue: null, isLoading: true, isStashNominating: false, isStashValidating: false, sessionIds: [] }); + const [{ controllerId, destination, hexSessionIdQueue, hexSessionIdNext, isLoading, isOwnController, isStashNominating, isStashValidating, nominees, sessionIds, validatorPrefs }, setStakeState] = useState({ controllerId: null, destination: 0, hexSessionIdNext: null, hexSessionIdQueue: null, isLoading: true, isOwnController: false, isStashNominating: false, isStashValidating: false, sessionIds: [] }); + const inactives = useInactives(stashId, nominees); const [isBondExtraOpen, toggleBondExtra] = useToggle(); const [isInjectOpen, toggleInject] = useToggle(); const [isNominateOpen, toggleNominate] = useToggle(); @@ -101,7 +108,7 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, staki useEffect((): void => { if (stakingAccount && validateInfo) { - const state = getStakeState(allStashes, stakingAccount, stashId, validateInfo); + const state = getStakeState(allAccounts, allStashes, stakingAccount, stashId, validateInfo); setStakeState(state); @@ -202,7 +209,7 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, staki @@ -210,17 +217,32 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, staki : ( {isStashNominating && nominees && ( -

- {t('Nominating ({{count}})', { replace: { count: nominees.length } })} - {nominees.map((nomineeId, index): React.ReactNode => ( - - ))} -
+ <> +
+ {t('All Nominations ({{count}})', { replace: { count: nominees.length } })} + {nominees.map((nomineeId, index): React.ReactNode => ( + + ))} +
+ {inactives.length !== 0 && ( +
+ {t('Inactive nominations ({{count}})', { replace: { count: inactives.length } })} + {inactives.map((nomineeId, index): React.ReactNode => ( + + ))} +
+ )} + )} ) @@ -247,7 +269,7 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, staki ) : ( - {(!sessionIds.length || (isSubstrateV2 && hexSessionIdNext === '0x')) + {(!sessionIds.length || hexSessionIdNext === '0x') ? (