neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

genesisHash accounts toggle (#1573)

Browse Source 
* genesisHash accounts toggle

* Bump deps

* Adjust toggle colors

* Use Api context

* Add genesisHash to addresses (on by default)
This commit is contained in:
Jaco Greeff 2019-09-03 16:26:03 +02:00 committed by GitHub
parent c72f3385a6
commit b785c8acf2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 214 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
packages/app-accounts/src/Account.tsx
View File

@ -6,20 +6,22 @@ import { ActionStatus } from '@polkadot/react-components/Status/types';
import { I18nProps } from '@polkadot/react-components/types';
import React from 'react';
import { AddressCard, AddressInfo, Button, Forget, Icon } from '@polkadot/react-components';
import styled from 'styled-components';
import { AddressCard, AddressInfo, Button, ChainLock, Forget, Icon } from '@polkadot/react-components';
import keyring from '@polkadot/ui-keyring';
import Backup from './modals/Backup';
import ChangePass from './modals/ChangePass';
import Transfer from './modals/Transfer';
import translate from './translate';
interface Props extends I18nProps {
address: string;
className?: string;
}
interface State {
genesisHash: string | null;
isBackupOpen: boolean;
isEditable: boolean;
isForgetOpen: boolean;
@ -36,6 +38,7 @@ class Account extends React.PureComponent<Props, State> {
const account = keyring.getAccount(props.address);
this.state = {
genesisHash: (account && account.meta.genesisHash) || null,
isBackupOpen: false,
isEditable: account
? !(account.meta.isInjected)
@ -47,7 +50,7 @@ class Account extends React.PureComponent<Props, State> {
}
public render (): React.ReactNode {
const { address } = this.props;
const { address, className } = this.props;
const { isEditable } = this.state;
// FIXME It is a bit heavy-handled switching of being editable here completely
@ -55,6 +58,7 @@ class Account extends React.PureComponent<Props, State> {
return (
<AddressCard
buttons={this.renderButtons()}
className={className}
isEditable={isEditable}
type='account'
value={address}
@ -172,47 +176,78 @@ class Account extends React.PureComponent<Props, State> {
}
}
private onGenesisChange = (genesisHash: string | null): void => {
const { address } = this.props;
this.setState({ genesisHash }, (): void => {
const account = keyring.getPair(address);
account && keyring.saveAccountMeta(account, { ...account.meta, genesisHash });
});
}
private renderButtons (): React.ReactNode {
const { t } = this.props;
const { isEditable } = this.state;
const { genesisHash, isEditable } = this.state;
return (
<div className='accounts--Account-buttons buttons'>
<div className='actions'>
{isEditable && (
<>
<Button
isNegative
onClick={this.toggleForget}
icon='trash'
size='small'
tooltip={t('Forget this account')}
/>
<Button
icon='cloud download'
isPrimary
onClick={this.toggleBackup}
size='small'
tooltip={t('Create a backup file for this account')}
/>
<Button
icon='key'
isPrimary
onClick={this.togglePass}
size='small'
tooltip={t("Change this account's password")}
/>
</>
)}
<Button
isPrimary
label={<><Icon name='paper plane' /> {t('send')}</>}
onClick={this.toggleTransfer}
size='small'
tooltip={t('Send funds from this account')}
/>
</div>
{isEditable && (
<>
<Button
isNegative
onClick={this.toggleForget}
icon='trash'
size='small'
tooltip={t('Forget this account')}
<div className='others'>
<ChainLock
genesisHash={genesisHash}
onChange={this.onGenesisChange}
/>
<Button
icon='cloud download'
isPrimary
onClick={this.toggleBackup}
size='small'
tooltip={t('Create a backup file for this account')}
/>
<Button
icon='key'
isPrimary
onClick={this.togglePass}
size='small'
tooltip={t("Change this account's password")}
/>
</>
</div>
)}
<Button
isPrimary
label={<><Icon name='paper plane' /> {t('send')}</>}
onClick={this.toggleTransfer}
size='small'
tooltip={t('Send funds from this account')}
/>
</div>
);
}
}
export default translate(Account);
export default translate(
styled(Account)`
.accounts--Account-buttons {
text-align: right;
.others {
margin-right: 0.125rem;
margin-top: 0.25rem;
}
}
`
);

82
packages/app-address-book/src/Address.tsx
View File

@ -7,7 +7,8 @@ import { ActionStatus } from '@polkadot/react-components/Status/types';
import { I18nProps } from '@polkadot/react-components/types';
import React from 'react';
import { AddressCard, AddressInfo, Button, Forget, Icon } from '@polkadot/react-components';
import styled from 'styled-components';
import { AddressCard, AddressInfo, Button, ChainLock, Forget, Icon } from '@polkadot/react-components';
import keyring from '@polkadot/ui-keyring';
import Transfer from '@polkadot/app-accounts/modals/Transfer';
@ -16,10 +17,12 @@ import translate from './translate';
interface Props extends I18nProps {
address: string;
className?: string;
}
interface State {
current?: KeyringAddress;
genesisHash: string | null;
isEditable: boolean;
isForgetOpen: boolean;
isTransferOpen: boolean;
@ -32,9 +35,11 @@ class Address extends React.PureComponent<Props, State> {
super(props);
const { address } = this.props;
const current = keyring.getAddress(address);
this.state = {
current: keyring.getAddress(address),
current,
genesisHash: (current && current.meta.genesisHash) || null,
isEditable: true,
isForgetOpen: false,
isTransferOpen: false
@ -42,12 +47,13 @@ class Address extends React.PureComponent<Props, State> {
}
public render (): React.ReactNode {
const { address } = this.props;
const { address, className } = this.props;
const { isEditable } = this.state;
return (
<AddressCard
buttons={this.renderButtons()}
className={className}
isEditable={isEditable}
type='address'
value={address}
@ -134,35 +140,65 @@ class Address extends React.PureComponent<Props, State> {
}
}
private onGenesisChange = (genesisHash: string | null): void => {
const { address } = this.props;
this.setState({ genesisHash }, (): void => {
const account = keyring.getAddress(address);
account && keyring.saveAddress(address, { ...account.meta, genesisHash });
});
}
private renderButtons (): React.ReactNode {
const { t } = this.props;
const { isEditable } = this.state;
const { genesisHash, isEditable } = this.state;
return (
<div className='accounts--Account-buttons buttons'>
<div className='addresses--Address-buttons buttons'>
<div className='actions'>
{isEditable && (
<>
<Button
isNegative
onClick={this.toggleForget}
icon='trash'
key='forget'
size='small'
tooltip={t('Forget this address')}
/>
</>
)}
<Button
isPrimary
key='deposit'
label={<><Icon name='paper plane' /> {t('deposit')}</>}
onClick={this.toggleTransfer}
size='small'
tooltip={t('Send funds to this address')}
/>
</div>
{isEditable && (
<>
<Button
isNegative
onClick={this.toggleForget}
icon='trash'
key='forget'
size='small'
tooltip={t('Forget this address')}
<div className='others'>
<ChainLock
genesisHash={genesisHash}
onChange={this.onGenesisChange}
/>
</>
</div>
)}
<Button
isPrimary
key='deposit'
label={<><Icon name='paper plane' /> {t('deposit')}</>}
onClick={this.toggleTransfer}
size='small'
tooltip={t('Send funds to this address')}
/>
</div>
);
}
}
export default translate(Address);
export default translate(
styled(Address)`
.addresses--Address-buttons {
text-align: right;
.others {
margin-right: 0.125rem;
margin-top: 0.25rem;
}
}`
);

2
packages/app-address-book/src/modals/Create.tsx
View File

@ -183,7 +183,7 @@ class Create extends React.PureComponent<Props, State> {
}
try {
keyring.saveAddress(address, { name, tags });
keyring.saveAddress(address, { name, genesisHash: keyring.genesisHash, tags });
status.account = address;
status.status = address ? 'success' : 'error';

2
packages/apps/package.json
View File

@ -15,7 +15,7 @@
"@babel/runtime": "^7.5.5",
"@polkadot/react-components": "^0.35.0-beta.29",
"@polkadot/react-signer": "^0.35.0-beta.29",
"@polkadot/ui-assets": "^0.43.0-beta.8",
"@polkadot/ui-assets": "^0.43.0-beta.9",
"query-string": "^6.8.2"
}
}

6
packages/react-components/package.json
View File

@ -13,10 +13,10 @@
"@babel/runtime": "^7.5.5",
"@polkadot/keyring": "^1.2.0-beta.6",
"@polkadot/react-api": "^0.35.0-beta.29",
"@polkadot/react-identicon": "^0.43.0-beta.8",
"@polkadot/react-identicon": "^0.43.0-beta.9",
"@polkadot/react-query": "^0.35.0-beta.29",
"@polkadot/ui-keyring": "^0.43.0-beta.8",
"@polkadot/ui-settings": "^0.43.0-beta.8",
"@polkadot/ui-keyring": "^0.43.0-beta.9",
"@polkadot/ui-settings": "^0.43.0-beta.9",
"@types/chart.js": "^2.8.4",
"@types/i18next": "^13.0.0",
"@types/react-copy-to-clipboard": "^4.2.6",

1
packages/react-components/src/AddressCard.tsx
View File

@ -22,6 +22,7 @@ interface Props extends AddressProps {
function AddressCard (props: Props): React.ReactElement<Props> {
const { className, value, withExplorer } = props;
return (
<Card className={className}>
<AddressRow

47
packages/react-components/src/ChainLock.tsx Normal file
View File

@ -0,0 +1,47 @@
// Copyright 2017-2019 @polkadot/app-accounts 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/react-components/types';
import React, { useContext } from 'react';
import { ApiContext } from '@polkadot/react-api';
import translate from './translate';
import Toggle from './Toggle';
interface Props extends I18nProps {
className?: string;
genesisHash: string | null;
onChange: (genesisHash: string | null) => void;
}
function ChainLock ({ genesisHash, onChange, t }: Props): React.ReactElement<Props> | null {
const { isDevelopment, api } = useContext(ApiContext);
if (isDevelopment) {
return null;
}
const isTiedToChain = api.genesisHash.eq(genesisHash);
const _onChange = (isTiedToChain: boolean): void =>
onChange(
isTiedToChain
? api.genesisHash.toHex()
: null
);
return (
<Toggle
defaultValue={isTiedToChain}
label={
isTiedToChain
? t('only this network')
: t('use on any network')
}
onChange={_onChange}
/>
);
}
export default translate(ChainLock);

1
packages/react-components/src/index.tsx
View File

@ -17,6 +17,7 @@ export { default as Card } from './Card';
export { default as CardGrid } from './CardGrid';
export { default as CardSummary } from './CardSummary';
export { default as ChainImg } from './ChainImg';
export { default as ChainLock } from './ChainLock';
export { default as Chart } from './Chart';
export { default as Columar } from './Columar';
export { default as Column } from './Column';

5
packages/react-components/src/styles/app.css
View File

@ -118,6 +118,11 @@ article {
color: #555 !important;
}
.ui.toggle.checkbox input:checked~.box:before,
.ui.toggle.checkbox input:checked~label:before {
background-color: #eee !important;
}
.ui.button.mini {
visibility: hidden;
}

5
packages/react-components/src/styles/theme/polkadot.css
View File

@ -19,6 +19,11 @@
background-color: $button-primary-color-hover;
}
.ui.toggle.checkbox input:checked~.box:before,
.ui.toggle.checkbox input:checked~label:before {
background-color: $button-primary-color !important;
}
.ui.basic.negative.button {
box-shadow: 0 0 0 1px rgba(215, 94, 161, 1) inset !important;
color: rgba(215, 94, 161, 1) !important;

44
yarn.lock
View File

@ -2082,14 +2082,14 @@
"@polkadot/util" "^1.2.0-beta.6"
"@polkadot/util-crypto" "^1.2.0-beta.6"
"@polkadot/react-identicon@^0.43.0-beta.8":
version "0.43.0-beta.8"
resolved "https://registry.yarnpkg.com/@polkadot/react-identicon/-/react-identicon-0.43.0-beta.8.tgz#c50a625019a88972c0dfe03c9cd2d4c233b9c255"
integrity sha512-YUdZMIyamHDvvVb8PCDPTEAjFzytQzD6ZpPVhc4FKEkVsV4AAn6tOeRwCvRZgKV2/of/vTmZ/eshHfo5wO79nQ==
"@polkadot/react-identicon@^0.43.0-beta.9":
version "0.43.0-beta.9"
resolved "https://registry.yarnpkg.com/@polkadot/react-identicon/-/react-identicon-0.43.0-beta.9.tgz#29fcaa5586699f2a8bff9976fb74cfa94c083c51"
integrity sha512-bOhIqwr7YMuw8ZPDGL0OJmKFWGVxS4voQI2Q6dYq/9CmTi9vUQ8oWbCmb/+TOZp6963GXGMecDqfBqA6qGW65w==
dependencies:
"@babel/runtime" "^7.5.5"
"@polkadot/ui-settings" "^0.43.0-beta.8"
"@polkadot/ui-shared" "^0.43.0-beta.8"
"@polkadot/ui-settings" "^0.43.0-beta.9"
"@polkadot/ui-shared" "^0.43.0-beta.9"
"@types/color" "^3.0.0"
"@types/react-copy-to-clipboard" "^4.2.6"
color "^3.1.2"
@ -2141,17 +2141,17 @@
"@types/memoizee" "^0.4.2"
memoizee "^0.4.14"
"@polkadot/ui-assets@^0.43.0-beta.8":
version "0.43.0-beta.8"
resolved "https://registry.yarnpkg.com/@polkadot/ui-assets/-/ui-assets-0.43.0-beta.8.tgz#dfd3d34e739852006869df8a6ee2b1e97bc48894"
integrity sha512-nbZzUBmGc2QOIFNYcXLLEuvrbk+TEPB6KSv26vmquuulPCjuyM5AcNm1xnNwLrZef+sBU/mQokwFkFCTEPZK5A==
"@polkadot/ui-assets@^0.43.0-beta.9":
version "0.43.0-beta.9"
resolved "https://registry.yarnpkg.com/@polkadot/ui-assets/-/ui-assets-0.43.0-beta.9.tgz#6d0e4b852926dc10ba925337bb6beb387456d915"
integrity sha512-WohtCLwySQEepZkUCxn8RIR/Zcs7Vjpp8dURhNDPE3ubTtH6v4u9IlrJ/dT1J03t0LaieNF+CQR6kMVivPeAfg==
dependencies:
"@babel/runtime" "^7.5.5"
"@polkadot/ui-keyring@^0.43.0-beta.8":
version "0.43.0-beta.8"
resolved "https://registry.yarnpkg.com/@polkadot/ui-keyring/-/ui-keyring-0.43.0-beta.8.tgz#6f2cfcc7e19667e34b81ecc4a1407e9df86c46f7"
integrity sha512-LNegxaxOfMTpkEWi6L1V5lAnFVzRx5zAjsqZumV299qgxQLAHlb7PGPZ9l9VhsMSIbdFMoPf+YJ8MIDNJVuGzg==
"@polkadot/ui-keyring@^0.43.0-beta.9":
version "0.43.0-beta.9"
resolved "https://registry.yarnpkg.com/@polkadot/ui-keyring/-/ui-keyring-0.43.0-beta.9.tgz#a3e66df5784f8a035b32c7096faa521fd34dec43"
integrity sha512-1lyRGSxRwAU37PNITGuxYt4pADWbPDThXBiehCw7cNLTm37YukiFyBR7IzTMxLvEc3xCvXJqSVSGEAKeW1xYpg==
dependencies:
"@babel/runtime" "^7.5.5"
"@types/mkdirp" "^0.5.2"
@ -2161,19 +2161,19 @@
store "^2.0.12"
styled-components "^4.3.1"
"@polkadot/ui-settings@^0.43.0-beta.8":
version "0.43.0-beta.8"
resolved "https://registry.yarnpkg.com/@polkadot/ui-settings/-/ui-settings-0.43.0-beta.8.tgz#471974d58a4ea4f6f2dbe401efb4c82ca6fa6d31"
integrity sha512-u4kWxMxrBtWNINnYWl2l7Z32J+gv1VMwuyM0so8yIR3GwtIfEzpf0vBPzGoSuBlVQf6O+EB+kuUE03kuFHigAw==
"@polkadot/ui-settings@^0.43.0-beta.9":
version "0.43.0-beta.9"
resolved "https://registry.yarnpkg.com/@polkadot/ui-settings/-/ui-settings-0.43.0-beta.9.tgz#23f207dc50c13d4e79195dc32869149829a63d3f"
integrity sha512-3DzaL2jyl4tBQbhfscySqdaQqZ03JLTwo1N/pFjRb0vOOSFL9opp1X4muJVO5rznOB/o9EZoiWRfmdQ4l76J+w==
dependencies:
"@babel/runtime" "^7.5.5"
"@types/store" "^2.0.2"
store "^2.0.12"
"@polkadot/ui-shared@^0.43.0-beta.8":
version "0.43.0-beta.8"
resolved "https://registry.yarnpkg.com/@polkadot/ui-shared/-/ui-shared-0.43.0-beta.8.tgz#b1249301f04604d818a822ba0997374de63b2de1"
integrity sha512-c4Wcpm3iR+iARc6xVsJcXpkO7oAlN5pOL/7YrA/b5qGEiHcIVebEcmYMzG6kDQX6/ZCqQ/8gwKhIJoncqpEDcg==
"@polkadot/ui-shared@^0.43.0-beta.9":
version "0.43.0-beta.9"
resolved "https://registry.yarnpkg.com/@polkadot/ui-shared/-/ui-shared-0.43.0-beta.9.tgz#11626a8fcedc18e71a2afebb8f01af71a30e26d6"
integrity sha512-pEJSQmbtl59+Keq9vGEBdH/9yWtJJsIJThZca4VGB7KjcZ4yxYBFu/nS35fKyz5QNdbPg+r05+Kq57idz+XOUw==
dependencies:
"@babel/runtime" "^7.5.5"
"@types/color" "^3.0.0"