diff --git a/packages/app-accounts/src/Address.tsx b/packages/app-accounts/src/Address.tsx deleted file mode 100644 index d0a11e9e7e..0000000000 --- a/packages/app-accounts/src/Address.tsx +++ /dev/null @@ -1,110 +0,0 @@ -// Copyright 2017-2018 @polkadot/app-accounts authors & contributors -// This software may be modified and distributed under the terms -// of the ISC license. See the LICENSE file for details. - -import { I18nProps } from '@polkadot/ui-app/types'; - -import React from 'react'; - -import CopyButton from '@polkadot/ui-app/CopyButton'; -import classes from '@polkadot/ui-app/util/classes'; -import IdentityIcon from '@polkadot/ui-react/IdentityIcon'; -import Balance from '@polkadot/ui-react-rx/Balance'; -import Nonce from '@polkadot/ui-react-rx/Nonce'; -import addressDecode from '@polkadot/util-keyring/address/decode'; -import addressEncode from '@polkadot/util-keyring/address/encode'; - -import translate from './translate'; - -type Props = I18nProps & { - value: string; -}; - -type State = { - address: string, - isValid: boolean, - publicKey: Uint8Array | null, - shortValue: string -}; - -const DEFAULT_ADDR = '5'.padEnd(16, 'x'); -const DEFAULT_SHORT = `${DEFAULT_ADDR.slice(0, 7)}…${DEFAULT_ADDR.slice(-7)}`; - -class Address extends React.PureComponent { - state: State = {} as State; - - static getDerivedStateFromProps ({ value }: Props, { address, publicKey, shortValue }: State): State { - try { - publicKey = addressDecode(value); - address = addressEncode(publicKey); - shortValue = `${address.slice(0, 7)}…${address.slice(-7)}`; - } catch (error) { - publicKey = null; - } - - const isValid = !!publicKey && publicKey.length === 32; - - return { - address: isValid ? address : DEFAULT_ADDR, - isValid, - publicKey, - shortValue: isValid ? shortValue : DEFAULT_SHORT - }; - } - - render () { - const { className, style } = this.props; - const { address, isValid, shortValue } = this.state; - - return ( -
- -
-
- {shortValue} -
- -
- {this.renderBalance()} -
- ); - } - - renderBalance () { - const { t } = this.props; - const { isValid, publicKey } = this.state; - - if (!isValid) { - return null; - } - - return [ - , - - {t('address.transactions', { - defaultValue: ' transactions' - })} - - ]; - } -} - -export default translate(Address); diff --git a/packages/app-accounts/src/Creator.tsx b/packages/app-accounts/src/Creator.tsx index edad000b68..fdab594d3b 100644 --- a/packages/app-accounts/src/Creator.tsx +++ b/packages/app-accounts/src/Creator.tsx @@ -19,7 +19,7 @@ import keypairFromSeed from '@polkadot/util-crypto/nacl/keypair/fromSeed'; import randomBytes from '@polkadot/util-crypto/random/asU8a'; import addressEncode from '@polkadot/util-keyring/address/encode'; -import Address from './Address'; +import AddressSummary from '@polkadot/ui-app/AddressSummary'; import translate from './translate'; type Props = I18nProps & { @@ -70,7 +70,7 @@ class Creator extends React.PureComponent { style={style} >
-
{ return (
-
diff --git a/packages/app-accounts/src/index.css b/packages/app-accounts/src/index.css index cbd3f7bf9a..a43f7dcf35 100644 --- a/packages/app-accounts/src/index.css +++ b/packages/app-accounts/src/index.css @@ -10,47 +10,3 @@ margin-bottom: 2em; text-align: center; } - -.accounts--Address { - padding: 0 2em; - text-align: center; -} - -.accounts--Address .rx--updated { - background: transparent !important; -} - -.accounts--Address.invalid { - filter: grayscale(100); - opacity: 0.45; -} - -.accounts--Address-icon { - display: block -} - -.accounts--Address-balance, -.accounts--Address-nonce { - opacity: 0.45; -} - -.accounts--Address-balance.rx--updated, -.accounts--Address-nonce.rx--updated { - opacity: 1; -} - -.accounts--Address-data { - padding: 0.5em 0; -} - -.accounts--Address-data * { - margin: 0 0.25rem !important; - vertical-align: middle; -} - -.accounts--Address-address { - display: inline-block; - font-family: monospace; - font-size: 1.5em; - padding: 0; -} diff --git a/packages/app-addresses/package.json b/packages/app-addresses/package.json index a8937a6f0d..2b96894807 100644 --- a/packages/app-addresses/package.json +++ b/packages/app-addresses/package.json @@ -16,7 +16,6 @@ }, "dependencies": { "@babel/runtime": "^7.0.0-beta.51", - "@polkadot/app-accounts": "^0.19.17", "@polkadot/ui-app": "^0.19.17" } } diff --git a/packages/app-addresses/src/Creator.tsx b/packages/app-addresses/src/Creator.tsx index 649f26137d..ff48476f20 100644 --- a/packages/app-addresses/src/Creator.tsx +++ b/packages/app-addresses/src/Creator.tsx @@ -13,7 +13,7 @@ import keyring from '@polkadot/ui-keyring/index'; import addressDecode from '@polkadot/util-keyring/address/decode'; import addressEncode from '@polkadot/util-keyring/address/encode'; -import Address from '@polkadot/app-accounts/Address'; +import AddressSummary from '@polkadot/ui-app/AddressSummary'; import translate from './translate'; type Props = I18nProps & { @@ -47,7 +47,7 @@ class Creator extends React.PureComponent { style={style} >
-
diff --git a/packages/app-addresses/src/Editor.tsx b/packages/app-addresses/src/Editor.tsx index cea12135ef..73254eac52 100644 --- a/packages/app-addresses/src/Editor.tsx +++ b/packages/app-addresses/src/Editor.tsx @@ -13,7 +13,7 @@ import InputAddress from '@polkadot/ui-app/InputAddress'; import classes from '@polkadot/ui-app/util/classes'; import keyring from '@polkadot/ui-keyring/index'; -import Address from '@polkadot/app-accounts/Address'; +import AddressSummary from '@polkadot/ui-app/AddressSummary'; import translate from './translate'; type Props = I18nProps & { @@ -107,7 +107,7 @@ class Editor extends React.PureComponent { return (
-
diff --git a/packages/app-staking/src/Account.tsx b/packages/app-staking/src/Account.tsx index 99dc6af31b..0ff0a95ccd 100644 --- a/packages/app-staking/src/Account.tsx +++ b/packages/app-staking/src/Account.tsx @@ -12,39 +12,34 @@ import BN from 'bn.js'; import React from 'react'; import extrinsics from '@polkadot/extrinsics'; import storage from '@polkadot/storage'; +import AddressMini from '@polkadot/ui-app/AddressMini'; +import AddressSummary from '@polkadot/ui-app/AddressSummary'; import Button from '@polkadot/ui-app/Button'; import Icon from '@polkadot/ui-app/Icon'; -import Input from '@polkadot/ui-app/Input'; import classes from '@polkadot/ui-app/util/classes'; -import IdentityIcon from '@polkadot/ui-react/IdentityIcon'; -import RxBalance from '@polkadot/ui-react-rx/Balance'; -import RxNonce from '@polkadot/ui-react-rx/Nonce'; import withMulti from '@polkadot/ui-react-rx/with/multi'; import withStorage from '@polkadot/ui-react-rx/with/storage'; import decodeAddress from '@polkadot/util-keyring/address/decode'; import encodeAddress from '@polkadot/util-keyring/address/encode'; +import Nominating from './Nominating'; import UnnominateButton from './UnnominateButton'; import translate from './translate'; type Props = I18nProps & { + accountIndex?: BN, address: string, name: string, - nonce?: BN, nominating?: string, nominatorsFor?: Array, - intentionPosition: number, - isIntending: boolean, + intentions: Array, isValidator: boolean, queueExtrinsic: QueueTx$ExtrinsicAdd, validators: Array }; type State = { - isInNominate: boolean, - isNomineeValid: boolean, - nominee: string, - nonce: BN + isNominateOpen: boolean }; class Account extends React.PureComponent { @@ -52,79 +47,44 @@ class Account extends React.PureComponent { super(props); this.state = { - isInNominate: false, - isNomineeValid: false, - nonce: new BN(0), - nominee: '' + isNominateOpen: false }; } render () { - const { className, style } = this.props; + const { address, className, intentions, isValidator, name, nominating, style } = this.props; + const { isNominateOpen } = this.state; return (
- {this.renderAccount()} - {this.renderButtons()} - {this.renderNominate()} -
- ); - } - - private renderAccount () { - const { address, isValidator, name, t } = this.props; - // TODO: Still now sure what the best layout is, so just keeping the shortened around - // const addrShort = `${address.slice(0, 7)}…${address.slice(-7)}`; - - return ( -
-
+ + - -
-
{name}
-
{address}
-
-
- - - {t('account.transactions', { - defaultValue: ' transactions' - })} - + {this.renderButtons()} + +
); } private renderButtons () { - const { isInNominate } = this.state; - - if (isInNominate) { - return null; - } - - const { address, isIntending, nominating, t } = this.props; + const { address, intentions, nominating, t } = this.props; + const isIntending = intentions.includes(address); const isNominating = !!nominating; const canStake = !isIntending && !isNominating; @@ -181,60 +141,13 @@ class Account extends React.PureComponent { ); } - private renderNominate () { - const { isInNominate, isNomineeValid, nominee } = this.state; - - if (!isInNominate) { - return null; - } - - const { t } = this.props; - - return ( -
-
- -
-
-
- -
-
-
- ); - } - private send (extrinsic: SectionItem, values: Array) { - const { address, queueExtrinsic } = this.props; - const { nonce } = this.state; + const { accountIndex = new BN(0), address, queueExtrinsic } = this.props; const publicKey = decodeAddress(address); queueExtrinsic({ extrinsic, - nonce, + nonce: accountIndex, publicKey, values }); @@ -242,24 +155,13 @@ class Account extends React.PureComponent { private toggleNominate = () => { this.setState( - ({ isInNominate }: State) => ({ - isInNominate: !isInNominate + ({ isNominateOpen }: State) => ({ + isNominateOpen: !isNominateOpen }) ); } - private onChangeNominee = (nominee: string) => { - const { validators } = this.props; - - this.setState({ - isNomineeValid: validators.includes(nominee), - nominee - }); - } - - private nominate = () => { - const { nominee } = this.state; - + private nominate = (nominee: string) => { this.send(extrinsics.staking.public.nominate, [nominee]); this.toggleNominate(); @@ -274,13 +176,9 @@ class Account extends React.PureComponent { } private unstake = () => { - const { intentionPosition } = this.props; + const { address, intentions } = this.props; - this.send(extrinsics.staking.public.unstake, [intentionPosition]); - } - - private onChangeNonce = (nonce: BN) => { - this.setState({ nonce }); + this.send(extrinsics.staking.public.unstake, [intentions.indexOf(address)]); } } @@ -303,5 +201,12 @@ export default withMulti( paramProp: 'address', transform: encodeAddress } + ), + withStorage( + storage.system.public.accountIndexOf, + { + propName: 'accountIndex', + paramProp: 'address' + } ) ); diff --git a/packages/app-staking/src/Nominating.tsx b/packages/app-staking/src/Nominating.tsx new file mode 100644 index 0000000000..310fdbce5d --- /dev/null +++ b/packages/app-staking/src/Nominating.tsx @@ -0,0 +1,133 @@ +// Copyright 2017-2018 @polkadot/ui-signer authors & contributors +// This software may be modified and distributed under the terms +// of the ISC license. See the LICENSE file for details. + +import { I18nProps } from '@polkadot/ui-app/types'; + +import React from 'react'; + +import Button from '@polkadot/ui-app/Button'; +import Input from '@polkadot/ui-app/Input'; +import Modal from '@polkadot/ui-app/Modal'; +import classes from '@polkadot/ui-app/util/classes'; + +import translate from './translate'; + +type Props = I18nProps & { + isOpen: boolean, + onClose: () => void, + onNominate: (nominee: string) => void, + intentions: Array +}; + +type State = { + isNomineeValid: boolean, + nominee: string +}; + +class Nominating extends React.PureComponent { + state: State; + + constructor (props: Props) { + super(props); + + this.state = { + isNomineeValid: false, + nominee: '' + }; + } + + render () { + const { className, isOpen, style } = this.props; + + if (!isOpen) { + return null; + } + + return ( + + {this.renderContent()} + {this.renderButtons()} + + ); + } + + renderButtons () { + const { onClose, t } = this.props; + const { isNomineeValid } = this.state; + + return ( + + +