From 0eb050c4305ef11474cfb91182791a3d4185de6d Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Tue, 28 May 2019 07:25:49 +0200 Subject: [PATCH] Swap Addresses to grid layout (as in accounts) (#1224) * Swap Addresses to grid layout (as in accounts) * Failsafe in cryptotype * Edit works. Needs to be made generic. * Address overview + create dialog --- packages/app-accounts/src/Account.tsx | 1 + packages/app-address-book/src/Address.tsx | 183 +++++++++++ packages/app-address-book/src/Creator.tsx | 223 -------------- packages/app-address-book/src/Editor.tsx | 284 ------------------ packages/app-address-book/src/Overview.tsx | 88 ++++++ packages/app-address-book/src/index.tsx | 38 +-- .../src/{ => modals}/Forgetting.tsx | 33 +- packages/ui-app/src/AddressSummary.tsx | 49 +-- packages/ui-app/src/CryptoType.tsx | 15 +- 9 files changed, 327 insertions(+), 587 deletions(-) create mode 100644 packages/app-address-book/src/Address.tsx delete mode 100644 packages/app-address-book/src/Creator.tsx delete mode 100644 packages/app-address-book/src/Editor.tsx create mode 100644 packages/app-address-book/src/Overview.tsx rename packages/app-address-book/src/{ => modals}/Forgetting.tsx (64%) diff --git a/packages/app-accounts/src/Account.tsx b/packages/app-accounts/src/Account.tsx index f8a3133ee7..a5714c3fde 100644 --- a/packages/app-accounts/src/Account.tsx +++ b/packages/app-accounts/src/Account.tsx @@ -29,6 +29,7 @@ type State = { isTransferOpen: boolean }; +// FIXME This is duplicated in app-ddresses const Wrapper = styled.article` position: relative; flex: 1 1; diff --git a/packages/app-address-book/src/Address.tsx b/packages/app-address-book/src/Address.tsx new file mode 100644 index 0000000000..7f4955fff5 --- /dev/null +++ b/packages/app-address-book/src/Address.tsx @@ -0,0 +1,183 @@ +// Copyright 2017-2019 @polkadot/app-staking 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 { KeyringAddress } from '@polkadot/ui-keyring/types'; +import { ActionStatus } from '@polkadot/ui-app/Status/types'; +import { I18nProps } from '@polkadot/ui-app/types'; + +import React from 'react'; +import styled from 'styled-components'; +import { AddressInfo, AddressRow, Button } from '@polkadot/ui-app'; +import keyring from '@polkadot/ui-keyring'; + +import Forgetting from './modals/Forgetting'; + +import translate from './translate'; + +type Props = I18nProps & { + address: string +}; + +type State = { + current: KeyringAddress, + isEditable: boolean, + isForgetOpen: boolean +}; + +// FIXME This is duplicated in app-accounts +const Wrapper = styled.article` + position: relative; + flex: 1 1; + min-width: 24%; + max-width: 24%; + justify-content: space-around; + + .accounts--Account-buttons { + text-align: right; + margin-bottom: 2em; + } + + .ui--AddressSummary-base { + flex: 1; + padding: 0; + } + + .accounts--Account-buttons > button { + margin: .2em; + } + + @media (max-width: 2060px) { + min-width: 32%; + max-width: 32%; + } + + @media (max-width: 1580px) { + min-width: 49%; + max-width: 49%; + } + + @media (max-width: 1100px) { + min-width: 100%; + max-width: 100%; + } +`; + +class Address extends React.PureComponent { + state: State; + + constructor (props: Props) { + super(props); + + const { address } = this.props; + + this.state = { + current: keyring.getAddress(address), + isEditable: true, + isForgetOpen: false + }; + } + + render () { + const { address } = this.props; + const { isEditable } = this.state; + + return ( + + {this.renderModals()} + + + + + ); + } + + private renderModals () { + const { address } = this.props; + const { isForgetOpen, current } = this.state; + + if (!address) { + return null; + } + + const modals = []; + + if (isForgetOpen) { + modals.push( + + ); + } + + return modals; + } + + private toggleForget = (): void => { + const { isForgetOpen } = this.state; + + this.setState({ + isForgetOpen: !isForgetOpen + }); + } + + private onForget = (): void => { + const { address, t } = this.props; + + if (!address) { + return; + } + + const status = { + account: address, + action: 'forget' + } as ActionStatus; + + try { + keyring.forgetAddress(address); + status.status = 'success'; + status.message = t('address forgotten'); + } catch (error) { + status.status = 'error'; + status.message = error.message; + } + } + + private renderButtons () { + const { t } = this.props; + const { isEditable } = this.state; + + return ( +
+ {isEditable && ( + <> +
+ ); + } +} + +export default translate(Address); diff --git a/packages/app-address-book/src/Creator.tsx b/packages/app-address-book/src/Creator.tsx deleted file mode 100644 index f078ae6301..0000000000 --- a/packages/app-address-book/src/Creator.tsx +++ /dev/null @@ -1,223 +0,0 @@ -// Copyright 2017-2019 @polkadot/app-address-book 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/ui-app/types'; -import { ComponentProps } from './types'; - -import React from 'react'; - -import { AddressRow, Button, Input, InputTags, TxComponent } from '@polkadot/ui-app'; -import { ActionStatus } from '@polkadot/ui-app/Status/types'; -import { InputAddress } from '@polkadot/ui-app/InputAddress'; -import keyring from '@polkadot/ui-keyring'; - -import translate from './translate'; - -type Props = ComponentProps & I18nProps; - -type State = { - address: string, - isAddressExisting: boolean, - isAddressValid: boolean, - isNameValid: boolean, - isValid: boolean, - name: string, - tags: Array -}; - -class Creator extends TxComponent { - state: State; - - constructor (props: Props) { - super(props); - - this.state = this.emptyState(); - } - - render () { - const { address, name } = this.state; - - return ( -
-
- {this.renderInput()} - -
-
- ); - } - - renderButtons () { - const { t } = this.props; - const { isValid } = this.state; - - return ( - -