From 653c2a505f2154a12f11db706ec52d077af8e0ab Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Sun, 27 Jan 2019 12:50:47 +0100 Subject: [PATCH] Basic info display for 123-code (#641) * Add withCalls * withCalls operational * Basic header display & cleanups * Global account selector for app * Remove errant debug log * Simple transfer applet working * Update Upgrade.tsx * Update InputNumber.tsx * Update Transfer.tsx * Move TxButton back to 123code (for the time being) * Good enough for a v1 --- packages/app-123code/src/AccountSelector.tsx | 53 +++++++++ packages/app-123code/src/SummaryBar.tsx | 102 ++++++++++++++++++ packages/app-123code/src/Transfer.tsx | 62 +++++++++++ packages/app-123code/src/TxButton.tsx | 68 ++++++++++++ packages/app-123code/src/index.css | 22 ++++ packages/app-123code/src/index.tsx | 33 +++++- packages/app-123code/src/translate.ts | 2 +- packages/app-accounts/src/Backup.tsx | 4 +- packages/app-accounts/src/ChangePass.tsx | 4 +- packages/app-accounts/src/Creator.tsx | 8 +- packages/app-accounts/src/Editor.tsx | 10 +- packages/app-accounts/src/Forgetting.tsx | 4 +- packages/app-accounts/src/Restore.tsx | 2 +- packages/app-accounts/src/Vanity/index.tsx | 2 +- packages/app-addresses/src/Creator.tsx | 4 +- packages/app-addresses/src/Editor.tsx | 6 +- packages/app-addresses/src/Forgetting.tsx | 4 +- packages/app-democracy/src/Item.tsx | 6 +- packages/app-democracy/src/Proposal.tsx | 4 +- packages/app-democracy/src/Referendum.tsx | 28 ++--- packages/app-democracy/src/Referendums.tsx | 14 +-- packages/app-democracy/src/Summary.tsx | 28 ++--- packages/app-democracy/src/Voting.tsx | 2 +- packages/app-democracy/src/VotingButtons.tsx | 4 +- .../src/BlockByHash/BlockByHash.tsx | 14 +-- .../src/BlockByHash/Extrinsics.tsx | 6 +- .../app-explorer/src/BlockHeader/index.tsx | 4 +- packages/app-explorer/src/Events.tsx | 4 +- packages/app-explorer/src/SummarySession.tsx | 16 +-- packages/app-extrinsics/src/Selection.tsx | 4 +- packages/app-nodeinfo/src/Peers.tsx | 4 +- packages/app-nodeinfo/src/Summary.tsx | 4 +- packages/app-settings/src/index.tsx | 2 +- .../app-staking/src/Overview/CurrentList.tsx | 4 +- packages/app-staking/src/Overview/Summary.tsx | 12 +-- .../app-staking/src/StakeList/Account.tsx | 23 ++-- .../app-staking/src/StakeList/Nominating.tsx | 4 +- .../app-staking/src/StakeList/Preferences.tsx | 4 +- .../src/StakeList/UnnominateButton.tsx | 2 +- packages/app-staking/src/index.tsx | 17 +-- packages/app-toolbox/src/Rpc/Selection.tsx | 2 +- packages/app-toolbox/src/Sign.tsx | 2 +- packages/app-toolbox/src/Unlock.tsx | 4 +- packages/app-transfer/src/Submit.tsx | 2 +- packages/app-transfer/src/Transfer.tsx | 11 +- packages/apps/src/Content/index.tsx | 16 +-- packages/apps/src/index.tsx | 2 +- packages/ui-api/src/Api.tsx | 4 +- packages/ui-api/src/with/call.tsx | 8 +- packages/ui-api/src/with/calls.ts | 25 +++++ packages/ui-api/src/with/index.ts | 19 ++-- packages/ui-app/src/AddressMini.tsx | 17 ++- packages/ui-app/src/AddressRow.tsx | 14 +-- packages/ui-app/src/AddressSummary.tsx | 12 +-- packages/ui-app/src/Balance.tsx | 6 +- packages/ui-app/src/Bubble.tsx | 49 +++++++++ packages/ui-app/src/Button/Button.tsx | 6 +- packages/ui-app/src/Button/Or.tsx | 2 +- packages/ui-app/src/Button/types.ts | 4 +- packages/ui-app/src/Dropdown.tsx | 4 +- packages/ui-app/src/IdentityIcon.tsx | 19 +++- packages/ui-app/src/Input.tsx | 4 +- packages/ui-app/src/InputBalance.tsx | 48 +++++++++ packages/ui-app/src/InputNumber.tsx | 20 ++-- packages/ui-app/src/InputRpc/index.tsx | 4 +- packages/ui-app/src/InputStorage/index.tsx | 4 +- packages/ui-app/src/Tabs.tsx | 4 +- packages/ui-app/src/index.tsx | 2 + packages/ui-app/src/styles/components.css | 41 +++++++ packages/ui-app/src/styles/semantic.css | 2 +- .../src/util/formatBalance.spec.ts} | 28 ++--- .../src/util/formatBalance.ts} | 20 ++-- .../src/util/formatDecimal.ts} | 2 +- .../src/util/formatNumber.ts} | 6 +- packages/ui-app/src/util/index.ts | 10 ++ packages/ui-params/src/Param/Amount.tsx | 4 +- packages/ui-params/src/Param/Balance.tsx | 12 +-- packages/ui-params/src/Param/Bare.tsx | 2 +- packages/ui-params/src/Param/Proposal.tsx | 2 +- packages/ui-params/src/Param/Vector.tsx | 4 +- packages/ui-params/src/Param/index.tsx | 2 +- packages/ui-params/src/index.tsx | 2 +- packages/ui-params/src/valueToText.tsx | 6 +- packages/ui-reactive/src/AccountIndex.tsx | 37 +++++++ packages/ui-reactive/src/Balance.tsx | 7 +- packages/ui-reactive/src/BestFinalised.tsx | 5 +- packages/ui-reactive/src/BestNumber.tsx | 5 +- packages/ui-reactive/src/Nonce.tsx | 7 +- packages/ui-reactive/src/TimePeriod.tsx | 5 +- packages/ui-reactive/src/index.ts | 1 + packages/ui-reactive/src/util/index.ts | 14 --- packages/ui-signer/src/Fees/Proposal.tsx | 6 +- packages/ui-signer/src/Fees/Transfer.tsx | 4 +- packages/ui-signer/src/Fees/index.tsx | 22 ++-- packages/ui-signer/src/Modal.tsx | 4 +- 95 files changed, 859 insertions(+), 315 deletions(-) create mode 100644 packages/app-123code/src/AccountSelector.tsx create mode 100644 packages/app-123code/src/SummaryBar.tsx create mode 100644 packages/app-123code/src/Transfer.tsx create mode 100644 packages/app-123code/src/TxButton.tsx create mode 100644 packages/ui-api/src/with/calls.ts create mode 100644 packages/ui-app/src/Bubble.tsx create mode 100644 packages/ui-app/src/InputBalance.tsx rename packages/{ui-reactive/src/util/balanceFormat.spec.js => ui-app/src/util/formatBalance.spec.ts} (73%) rename packages/{ui-reactive/src/util/balanceFormat.ts => ui-app/src/util/formatBalance.ts} (80%) rename packages/{ui-reactive/src/util/decimalFormat.ts => ui-app/src/util/formatDecimal.ts} (83%) rename packages/{ui-reactive/src/util/numberFormat.ts => ui-app/src/util/formatNumber.ts} (75%) create mode 100644 packages/ui-app/src/util/index.ts create mode 100644 packages/ui-reactive/src/AccountIndex.tsx delete mode 100644 packages/ui-reactive/src/util/index.ts diff --git a/packages/app-123code/src/AccountSelector.tsx b/packages/app-123code/src/AccountSelector.tsx new file mode 100644 index 0000000000..5e6000891e --- /dev/null +++ b/packages/app-123code/src/AccountSelector.tsx @@ -0,0 +1,53 @@ +// Copyright 2017-2019 @polkadot/app-123code 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 { Bubble, InputAddress } from '@polkadot/ui-app/index'; +import { AccountIndex, Balance, Nonce } from '@polkadot/ui-reactive/index'; + +type Props = { + onChange: (accountId?: string) => void +}; + +type State = { + accountId?: string +}; + +export default class AccountSelector extends React.PureComponent { + state: State = {}; + + render () { + const { accountId } = this.state; + + return ( +
+ +
+ + + + + + + + + +
+
+ ); + } + + private onChange = (accountId?: string): void => { + const { onChange } = this.props; + + this.setState({ accountId }, () => + onChange(accountId) + ); + } +} diff --git a/packages/app-123code/src/SummaryBar.tsx b/packages/app-123code/src/SummaryBar.tsx new file mode 100644 index 0000000000..a9ad76e58f --- /dev/null +++ b/packages/app-123code/src/SummaryBar.tsx @@ -0,0 +1,102 @@ +// Copyright 2017-2019 @polkadot/app-123code 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 { ApiProps } from '@polkadot/ui-api/types'; +import { BareProps, I18nProps } from '@polkadot/ui-app/types'; + +import BN from 'bn.js'; +import React from 'react'; +import { AccountId, RuntimeVersion } from '@polkadot/types'; +import { withCalls } from '@polkadot/ui-api/with'; +import { Bubble, IdentityIcon } from '@polkadot/ui-app/index'; +import { formatBalance, formatNumber } from '@polkadot/ui-app/util'; + +import translate from './translate'; + +type Props = ApiProps & BareProps & I18nProps & { + balances_totalIssuance?: BN, + chain_bestNumber?: BN, + chain_bestNumberLag?: BN, + chain_getRuntimeVersion?: RuntimeVersion, + session_validators?: Array, + staking_intentions?: Array, + system_chain?: string, + system_name?: string, + system_version?: string +}; +type State = { + nextUp: Array +}; + +class SummaryBar extends React.PureComponent { + state: State = { + nextUp: [] + }; + + static getDerivedStateFromProps ({ staking_intentions, session_validators }: Props): State | null { + if (!staking_intentions || !session_validators) { + return null; + } + + return { + nextUp: staking_intentions.filter((accountId) => + !session_validators.find((validatorId) => validatorId.eq(accountId)) + ) + }; + } + + render () { + const { balances_totalIssuance, chain_bestNumber, chain_bestNumberLag, chain_getRuntimeVersion, session_validators = [], system_chain, system_name, system_version } = this.props; + const { nextUp } = this.state; + + return ( + +
+ + {system_name} v{system_version} + + + {system_chain} + + { + chain_getRuntimeVersion + ? `${chain_getRuntimeVersion.implName} v${chain_getRuntimeVersion.implVersion}` + : undefined + } + + {formatNumber(chain_bestNumber)} ({formatNumber(chain_bestNumberLag)} lag) + + { + session_validators.map((accountId, index) => ( + + )) + } + { + nextUp.map((accountId, index) => ( + + )) + } + + {formatBalance(balances_totalIssuance)} + +
+ + ); + } +} + +// inject the actual API calls automatically into props +export default translate( + withCalls( + 'derive.chain.bestNumber', + 'derive.chain.bestNumberLag', + 'query.balances.totalIssuance', + 'query.session.validators', + 'query.staking.intentions', + 'rpc.chain.getRuntimeVersion', + 'rpc.system.chain', + 'rpc.system.name', + 'rpc.system.version' + )(SummaryBar) +); diff --git a/packages/app-123code/src/Transfer.tsx b/packages/app-123code/src/Transfer.tsx new file mode 100644 index 0000000000..001e3dff68 --- /dev/null +++ b/packages/app-123code/src/Transfer.tsx @@ -0,0 +1,62 @@ +// Copyright 2017-2019 @polkadot/app-123code 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 BN from 'bn.js'; +import React from 'react'; +import { Button, InputAddress, InputBalance } from '@polkadot/ui-app/index'; + +import TxButton from './TxButton'; + +type Props = { + accountId?: string +}; +type State = { + amount?: BN; + recipientId?: string; +}; + +export default class Transfer extends React.PureComponent { + state: State = {}; + + render () { + const { accountId } = this.props; + const { amount, recipientId } = this.state; + + return ( +
+

transfer

+
+
+ + + + + +
+
Make a transfer from any account you control to another account. Transfer fees and per-transaction feed apply.
+
+
+ ); + } + + private onChangeAmount = (amount?: BN): void => { + this.setState({ amount }); + } + + private onChangeRecipient = (recipientId?: string): void => { + this.setState({ recipientId }); + } +} diff --git a/packages/app-123code/src/TxButton.tsx b/packages/app-123code/src/TxButton.tsx new file mode 100644 index 0000000000..ee219618b0 --- /dev/null +++ b/packages/app-123code/src/TxButton.tsx @@ -0,0 +1,68 @@ +// Copyright 2017-2019 @polkadot/app-123code 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 { ApiProps } from '@polkadot/ui-api/types'; +import { QueueTx$ExtrinsicAdd } from '@polkadot/ui-app/Status/types'; + +import React from 'react'; +import { Button } from '@polkadot/ui-app/index'; +import { QueueConsumer } from '@polkadot/ui-app/Status/Context'; +import { withApi } from '@polkadot/ui-api/index'; +import { assert } from '@polkadot/util'; + +type InjectedProps = { + queueExtrinsic: QueueTx$ExtrinsicAdd; +}; + +type Props = ApiProps & { + accountId?: string, + isDisabled?: boolean, + label: React.ReactNode, + params: Array, + tx: string +}; + +class TxButtonInner extends React.PureComponent { + render () { + const { accountId, isDisabled, label } = this.props; + + return ( +