From 434b7bb6e95a64d7c6b4953b34aaf8d4cd1cca65 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Tue, 4 Jun 2019 13:30:49 +0200 Subject: [PATCH] Add AddressCard (#1269) * Add AddressCard * Simplify AddressCard rendering --- packages/app-accounts/src/Account.tsx | 30 +++++------ packages/app-address-book/src/Address.tsx | 30 +++++------ .../app-council/src/Overview/Candidate.tsx | 12 ++--- packages/app-council/src/Overview/Member.tsx | 14 +++-- packages/app-staking/src/Account/index.tsx | 32 ++++++----- packages/app-staking/src/Overview/Address.tsx | 19 +++---- packages/ui-app/src/AddressCard.tsx | 53 +++++++++++++++++++ packages/ui-app/src/AddressRow.tsx | 40 +++----------- packages/ui-app/src/index.tsx | 1 + 9 files changed, 122 insertions(+), 109 deletions(-) create mode 100644 packages/ui-app/src/AddressCard.tsx diff --git a/packages/app-accounts/src/Account.tsx b/packages/app-accounts/src/Account.tsx index fb9b9e97fe..d0acda03fb 100644 --- a/packages/app-accounts/src/Account.tsx +++ b/packages/app-accounts/src/Account.tsx @@ -6,7 +6,7 @@ import { ActionStatus } from '@polkadot/ui-app/Status/types'; import { I18nProps } from '@polkadot/ui-app/types'; import React from 'react'; -import { AddressInfo, AddressRow, Button, Card, Icon } from '@polkadot/ui-app'; +import { AddressCard, AddressInfo, Button, Icon } from '@polkadot/ui-app'; import keyring from '@polkadot/ui-keyring'; import Backup from './modals/Backup'; @@ -50,23 +50,21 @@ class Account extends React.PureComponent { // FIXME It is a bit heavy-handled switching of being editable here completely // (and removing the tags, however the keyring cannot save these) return ( - + {this.renderModals()} - - - - + /> + ); } diff --git a/packages/app-address-book/src/Address.tsx b/packages/app-address-book/src/Address.tsx index e9172f7043..797e62da64 100644 --- a/packages/app-address-book/src/Address.tsx +++ b/packages/app-address-book/src/Address.tsx @@ -7,7 +7,7 @@ import { ActionStatus } from '@polkadot/ui-app/Status/types'; import { I18nProps } from '@polkadot/ui-app/types'; import React from 'react'; -import { AddressInfo, AddressRow, Button, Card, Icon } from '@polkadot/ui-app'; +import { AddressCard, AddressInfo, Button, Icon } from '@polkadot/ui-app'; import keyring from '@polkadot/ui-keyring'; import Transfer from '@polkadot/app-accounts/modals/Transfer'; @@ -47,23 +47,21 @@ class Address extends React.PureComponent { const { isEditable } = this.state; return ( - + {this.renderModals()} - - - - + /> + ); } diff --git a/packages/app-council/src/Overview/Candidate.tsx b/packages/app-council/src/Overview/Candidate.tsx index ebfb0b5d33..f742fe1793 100644 --- a/packages/app-council/src/Overview/Candidate.tsx +++ b/packages/app-council/src/Overview/Candidate.tsx @@ -3,7 +3,7 @@ // of the Apache-2.0 license. See the LICENSE file for details. import React from 'react'; -import { AddressRow, Card } from '@polkadot/ui-app'; +import { AddressCard } from '@polkadot/ui-app'; type Props = { address: string @@ -14,12 +14,10 @@ export default class Candidate extends React.PureComponent { const { address } = this.props; return ( - - - + ); } } diff --git a/packages/app-council/src/Overview/Member.tsx b/packages/app-council/src/Overview/Member.tsx index 933145daa3..b2c2264726 100644 --- a/packages/app-council/src/Overview/Member.tsx +++ b/packages/app-council/src/Overview/Member.tsx @@ -6,7 +6,7 @@ import { I18nProps } from '@polkadot/ui-app/types'; import BN from 'bn.js'; import React from 'react'; -import { AddressRow, Card } from '@polkadot/ui-app'; +import { AddressCard } from '@polkadot/ui-app'; import { formatNumber } from '@polkadot/util'; import translate from '../translate'; @@ -21,13 +21,11 @@ class Member extends React.PureComponent { const { address, block, t } = this.props; return ( - - #{formatNumber(block)}} - defaultName='council member' - value={address} - /> - + #{formatNumber(block)}} + defaultName='council member' + value={address} + /> ); } } diff --git a/packages/app-staking/src/Account/index.tsx b/packages/app-staking/src/Account/index.tsx index fa88dbc399..a6fe401a65 100644 --- a/packages/app-staking/src/Account/index.tsx +++ b/packages/app-staking/src/Account/index.tsx @@ -10,7 +10,7 @@ import { I18nProps } from '@polkadot/ui-app/types'; import { KeyringSectionOption } from '@polkadot/ui-keyring/options/types'; import React from 'react'; -import { AddressInfo, AddressMini, AddressRow, Button, Card, TxButton } from '@polkadot/ui-app'; +import { AddressCard, AddressInfo, AddressMini, Button, TxButton } from '@polkadot/ui-app'; import { withCalls } from '@polkadot/ui-api'; import Bond from './Bond'; @@ -107,30 +107,28 @@ class Account extends React.PureComponent { // This is deliberate in order to display the Component modals in a performant matter later on // because their state will already be loaded. return ( - + {this.renderBond()} {this.renderBondExtra()} {this.renderNominating()} {this.renderSessionKey()} {this.renderUnbond()} {this.renderValidating()} - - -
- {this.renderControllerId()} - {this.renderStashId()} - {this.renderSessionId()} - {this.renderNominee()} -
- - - +
+ {this.renderControllerId()} + {this.renderStashId()} + {this.renderSessionId()} + {this.renderNominee()} +
+ + ); } diff --git a/packages/app-staking/src/Overview/Address.tsx b/packages/app-staking/src/Overview/Address.tsx index 5d96618a50..de9982a3bd 100644 --- a/packages/app-staking/src/Overview/Address.tsx +++ b/packages/app-staking/src/Overview/Address.tsx @@ -10,7 +10,7 @@ import React from 'react'; import styled from 'styled-components'; import { AccountId, Balance, Exposure } from '@polkadot/types'; import { withCalls, withMulti } from '@polkadot/ui-api/with'; -import { AddressMini, AddressRow, Card, RecentlyOffline } from '@polkadot/ui-app'; +import { AddressCard, AddressMini, RecentlyOffline } from '@polkadot/ui-app'; import keyring from '@polkadot/ui-keyring'; import { formatBalance } from '@polkadot/util'; @@ -92,25 +92,22 @@ class Address extends React.PureComponent { } return ( - - - {this.renderNominators()} - + {this.renderNominators()} {this.renderOffline()} { isAuthor && stashId ?
#{lastBlock}
: null } - + ); } diff --git a/packages/ui-app/src/AddressCard.tsx b/packages/ui-app/src/AddressCard.tsx new file mode 100644 index 0000000000..895f127811 --- /dev/null +++ b/packages/ui-app/src/AddressCard.tsx @@ -0,0 +1,53 @@ +// Copyright 2017-2019 @polkadot/ui-app 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 AddressRow, { RowProps } from './AddressRow'; +import Card from './Card'; +import LinkPolkascan from './LinkPolkascan'; + +type Props = RowProps & { + withExplorer?: boolean +}; + +class AddressCard extends React.PureComponent { + render () { + const { className, value, withExplorer } = this.props; + + return ( + + + {withExplorer && ( +
+ +
+ )} + + ); + } +} + +export default styled(AddressCard)` + display: flex; + flex-direction: column; + justify-content: space-between; + + .ui--AddressCard-explorer { + margin: 0 -0.25rem -0.5rem 0; + text-align: right; + + .ui--AddressCard-exporer-link { + display: inline-block; + } + } +`; diff --git a/packages/ui-app/src/AddressRow.tsx b/packages/ui-app/src/AddressRow.tsx index 45db1e7a87..758af57d78 100644 --- a/packages/ui-app/src/AddressRow.tsx +++ b/packages/ui-app/src/AddressRow.tsx @@ -17,27 +17,29 @@ import keyring from '@polkadot/ui-keyring'; import AddressInfo, { BalanceActiveType } from './AddressInfo'; import CopyButton from './CopyButton'; import IdentityIcon from './IdentityIcon'; -import LinkPolkascan from './LinkPolkascan'; import translate from './translate'; import { classes, getAddrName, getAddrTags, toShortAddress } from './util'; -export type Props = I18nProps & { - accounts_idAndIndex?: [AccountId?, AccountIndex?], +export type RowProps = { bonded?: BN | Array, buttons?: React.ReactNode, children?: React.ReactNode, + className?: string, defaultName?: string, extraInfo?: React.ReactNode, isEditable?: boolean, isInline?: boolean, value: AccountId | AccountIndex | Address | string | null, withBalance?: boolean | BalanceActiveType, - withExplorer?: boolean, withIcon?: boolean, withIndex?: boolean, withTags?: boolean }; +type Props = I18nProps & RowProps & { + accounts_idAndIndex?: [AccountId?, AccountIndex?] +}; + type State = { address: string, isEditingName: boolean, @@ -112,7 +114,6 @@ class AddressRow extends React.PureComponent { {this.renderChildren()} - {this.renderExplorer()} ); } @@ -159,24 +160,6 @@ class AddressRow extends React.PureComponent { : null; } - protected renderExplorer () { - const { value, withExplorer } = this.props; - - if (!withExplorer) { - return null; - } - - return ( -
- -
- ); - } - protected renderName () { const { isEditable } = this.props; const { isEditingName, name } = this.state; @@ -497,17 +480,6 @@ export default withMulti( white-space: nowrap; } - .ui--AddressRow-explorer { - content: ' '; - margin-top: 1rem; - - .polkascan { - position: absolute; - bottom: 0.75rem; - right: 1rem; - } - } - .ui--AddressRow-icon { margin-right: 1em; } diff --git a/packages/ui-app/src/index.tsx b/packages/ui-app/src/index.tsx index 58838514e9..4859873b20 100644 --- a/packages/ui-app/src/index.tsx +++ b/packages/ui-app/src/index.tsx @@ -2,6 +2,7 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. +export { default as AddressCard } from './AddressCard'; export { default as AddressInfo } from './AddressInfo'; export { default as AddressMini } from './AddressMini'; export { default as AddressRow } from './AddressRow';