From 6fb8916e6fc84a160e00573a347cce5f8baf9e89 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Fri, 20 Sep 2019 16:08:37 +0200 Subject: [PATCH] More functional component conversions (#1640) * More functional component conversions * Expose systemVersion on api * Signer checks * KeyRing uses local IdentityIcon --- packages/app-123code/src/SummaryBar.tsx | 30 +-- packages/app-claims/src/index.tsx | 14 +- packages/app-dashboard/src/index.tsx | 4 +- .../src/Actions/Account/BondExtra.tsx | 10 +- .../Actions/Account/SetControllerAccount.tsx | 109 ++++------ packages/app-staking/src/Actions/NewStake.tsx | 71 +++---- packages/apps/src/SideBar/index.tsx | 7 +- packages/react-api/src/Api.tsx | 37 ++-- packages/react-api/src/types.ts | 4 +- packages/react-components/src/AddressRow.tsx | 15 +- packages/react-components/src/ChainImg.tsx | 33 +-- .../react-components/src/IdentityIcon.tsx | 140 +++++-------- packages/react-components/src/Input.tsx | 193 +++++++----------- .../src/InputAddress/KeyPair.tsx | 3 +- .../src/InputAddressSimple.tsx | 62 +++--- packages/react-components/src/InputTags.tsx | 82 ++++---- packages/react-components/src/Inset.tsx | 108 ++++------ .../react-components/src/LinkPolkascan.tsx | 4 +- .../react-components/src/TreasuryProposal.tsx | 156 ++++++-------- packages/react-params/src/Param/Bytes.tsx | 96 +++------ packages/react-params/src/Param/Null.tsx | 14 +- packages/react-params/src/Param/index.tsx | 72 +++---- packages/react-query/src/Chain.tsx | 18 +- packages/react-query/src/NodeName.tsx | 18 +- packages/react-query/src/NodeVersion.tsx | 18 +- packages/react-signer/src/Checks/Proposal.tsx | 80 ++++---- packages/react-signer/src/Checks/Transfer.tsx | 74 +++---- packages/react-signer/src/Checks/index.tsx | 23 +-- packages/react-signer/src/Unlock.tsx | 72 +++---- 29 files changed, 621 insertions(+), 946 deletions(-) diff --git a/packages/app-123code/src/SummaryBar.tsx b/packages/app-123code/src/SummaryBar.tsx index 82a2791f1d..348b02577d 100644 --- a/packages/app-123code/src/SummaryBar.tsx +++ b/packages/app-123code/src/SummaryBar.tsx @@ -3,12 +3,12 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. -import { AccountId, RuntimeVersion } from '@polkadot/types/interfaces'; +import { AccountId } from '@polkadot/types/interfaces'; import { BareProps, I18nProps } from '@polkadot/react-components/types'; import BN from 'bn.js'; -import React, { useState, useEffect } from 'react'; -import { withCalls } from '@polkadot/react-api/with'; +import React, { useContext, useState, useEffect } from 'react'; +import { ApiContext, withCalls } from '@polkadot/react-api'; import { Bubble, IdentityIcon } from '@polkadot/react-components'; import { formatBalance, formatNumber } from '@polkadot/util'; @@ -20,13 +20,10 @@ interface Props extends BareProps, I18nProps { chain_bestNumberLag?: BN; session_validators?: AccountId[]; staking_intentions?: AccountId[]; - state_getRuntimeVersion?: RuntimeVersion; - system_chain?: string; - system_name?: string; - system_version?: string; } -function SummaryBar ({ balances_totalIssuance, chain_bestNumber, chain_bestNumberLag, staking_intentions = [], session_validators = [], state_getRuntimeVersion, system_chain, system_name, system_version }: Props): React.ReactElement { +function SummaryBar ({ balances_totalIssuance, chain_bestNumber, chain_bestNumberLag, staking_intentions = [], session_validators = [] }: Props): React.ReactElement { + const { api, systemChain, systemName, systemVersion } = useContext(ApiContext); const [nextUp, setNextUp] = useState([]); useEffect((): void => { @@ -43,15 +40,14 @@ function SummaryBar ({ balances_totalIssuance, chain_bestNumber, chain_bestNumbe
- {system_name} v{system_version} + {systemName} v{systemVersion} - {system_chain} + {systemChain} + + + {api.runtimeVersion.implName} v{api.runtimeVersion.implVersion} - { - state_getRuntimeVersion && - `${state_getRuntimeVersion.implName} v${state_getRuntimeVersion.implVersion}` - } {formatNumber(chain_bestNumber)} ({formatNumber(chain_bestNumberLag)} lag) @@ -79,10 +75,6 @@ export default translate( 'derive.chain.bestNumber', 'derive.chain.bestNumberLag', 'query.balances.totalIssuance', - 'query.session.validators', - 'rpc.state.getRuntimeVersion', - 'rpc.system.chain', - 'rpc.system.name', - 'rpc.system.version' + 'query.session.validators' )(SummaryBar) ); diff --git a/packages/app-claims/src/index.tsx b/packages/app-claims/src/index.tsx index 68a442d258..62aa293b46 100644 --- a/packages/app-claims/src/index.tsx +++ b/packages/app-claims/src/index.tsx @@ -3,7 +3,7 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. -import { Compact, Text } from '@polkadot/types'; +import { Compact } from '@polkadot/types'; import { Balance, EcdsaSignature, EthereumAddress } from '@polkadot/types/interfaces'; import { AppProps, I18nProps } from '@polkadot/react-components/types'; import { ApiProps } from '@polkadot/react-api/types'; @@ -12,7 +12,7 @@ import React from 'react'; import { Trans } from 'react-i18next'; import styled from 'styled-components'; import CopyToClipboard from 'react-copy-to-clipboard'; -import { withCalls, withMulti } from '@polkadot/react-api'; +import { withApi, withMulti } from '@polkadot/react-api'; import { Button, Card, Columar, Column, InputAddress, Tooltip } from '@polkadot/react-components'; import { InputNumber } from '@polkadot/react-components/InputNumber'; import TxModal, { TxModalState, TxModalProps } from '@polkadot/react-components/TxModal'; @@ -30,9 +30,7 @@ enum Step { Claim = 2, } -interface Props extends AppProps, ApiProps, I18nProps, TxModalProps { - system_chain?: Text; -} +interface Props extends AppProps, ApiProps, I18nProps, TxModalProps {} interface State extends TxModalState { didCopy: boolean; @@ -100,7 +98,7 @@ class App extends TxModal { } public render (): React.ReactNode { - const { api, system_chain = '', t } = this.props; + const { api, systemChain = '', t } = this.props; const { accountId, didCopy, ethereumAddress, signature, step } = this.state; const payload = accountId @@ -121,7 +119,7 @@ class App extends TxModal {

{t('1. Select your {{chain}} account', { replace: { - chain: system_chain.toString() + chain: systemChain } })}

{ export default withMulti( App, translate, - withCalls('rpc.system.chain') + withApi ); diff --git a/packages/app-dashboard/src/index.tsx b/packages/app-dashboard/src/index.tsx index 5b848e1945..f2ceef5471 100644 --- a/packages/app-dashboard/src/index.tsx +++ b/packages/app-dashboard/src/index.tsx @@ -25,8 +25,8 @@ function renderEntry (route: Route): React.ReactNode { ); } -// NOTE: This _looks_ weird and it looks weird, because it is weird. Basically we want all -// the entries of an equal width. So here we add a non-content spacers at the end that just +// NOTE: This _looks_ weird, because it is weird. Basically we want all the entries +// of an equal width. So here we add a non-content spacers at the end that just // ensures flex has enough items to render something usable to the user. Since we don't // quite know how many items per row, we just render a bunch, n === routes.length function renderSpacer (route: Route, index: number): React.ReactNode { diff --git a/packages/app-staking/src/Actions/Account/BondExtra.tsx b/packages/app-staking/src/Actions/Account/BondExtra.tsx index 2f1bba492c..30d49113c2 100644 --- a/packages/app-staking/src/Actions/Account/BondExtra.tsx +++ b/packages/app-staking/src/Actions/Account/BondExtra.tsx @@ -22,7 +22,6 @@ import detectUnsafe from '../../unsafeChains'; interface Props extends I18nProps, ApiProps, CalculateBalanceProps { controllerId: string; isOpen: boolean; - isUnsafeChain: boolean; onClose: () => void; stashId: string; } @@ -96,9 +95,10 @@ class BondExtra extends TxComponent { } private renderContent (): React.ReactNode { - const { isUnsafeChain, stashId, t } = this.props; + const { stashId, systemChain, t } = this.props; const { maxBalance } = this.state; const available = {t('available ')}; + const isUnsafeChain = detectUnsafe(systemChain); return ( <> @@ -186,10 +186,6 @@ export default withMulti( withCalls( 'derive.balances.fees', ['derive.balances.all', { paramName: 'stashId' }], - ['query.system.accountNonce', { paramName: 'stashId' }], - ['rpc.system.chain', { - propName: 'isUnsafeChain', - transform: detectUnsafe - }] + ['query.system.accountNonce', { paramName: 'stashId' }] ) ); diff --git a/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx b/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx index e955e5609f..2ba3740674 100644 --- a/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx +++ b/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx @@ -2,19 +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 { ApiProps } from '@polkadot/react-api/types'; import { I18nProps } from '@polkadot/react-components/types'; import React from 'react'; import { Button, Icon, InputAddress, Modal, TxButton, TxComponent } from '@polkadot/react-components'; -import { withCalls, withMulti } from '@polkadot/react-api'; +import { withApi, withMulti } from '@polkadot/react-api'; import translate from '../../translate'; import detectUnsafe from '../../unsafeChains'; import InputValidationController from '../Account/InputValidationController'; -interface Props extends I18nProps { +interface Props extends ApiProps, I18nProps { defaultControllerId: string; - isUnsafeChain?: boolean; isValidating?: boolean; onClose: () => void; stashId: string; @@ -36,8 +36,9 @@ class SetControllerAccount extends TxComponent { } public render (): React.ReactNode { - const { defaultControllerId, isUnsafeChain, onClose, stashId, t } = this.props; + const { defaultControllerId, isValidating, onClose, stashId, systemChain, t } = this.props; const { controllerError, controllerId } = this.state; + const isUnsafeChain = detectUnsafe(systemChain); const canSubmit = isUnsafeChain || (!controllerError && !!controllerId && (defaultControllerId !== controllerId)); return ( @@ -47,7 +48,42 @@ class SetControllerAccount extends TxComponent { open size='small' > - {this.renderContent()} + + {t('Change controller account')} + + + {isValidating && ( +
+
+ + {t('Warning - Changing the controller while validating will modify the associated session account. It is advised to stop validating before changing the controller account.')} +
+
+ )} + + + +