From b785c8acf2534dd7042f3c918b0fb025f26db0d7 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Tue, 3 Sep 2019 16:26:03 +0200
Subject: [PATCH] genesisHash accounts toggle (#1573)

* genesisHash accounts toggle

* Bump deps

* Adjust toggle colors

* Use Api context

* Add genesisHash to addresses (on by default)
---
 packages/app-accounts/src/Account.tsx         | 103 ++++++++++++------
 packages/app-address-book/src/Address.tsx     |  82 ++++++++++----
 .../app-address-book/src/modals/Create.tsx    |   2 +-
 packages/apps/package.json                    |   2 +-
 packages/react-components/package.json        |   6 +-
 packages/react-components/src/AddressCard.tsx |   1 +
 packages/react-components/src/ChainLock.tsx   |  47 ++++++++
 packages/react-components/src/index.tsx       |   1 +
 packages/react-components/src/styles/app.css  |   5 +
 .../src/styles/theme/polkadot.css             |   5 +
 yarn.lock                                     |  44 ++++----
 11 files changed, 214 insertions(+), 84 deletions(-)
 create mode 100644 packages/react-components/src/ChainLock.tsx

diff --git a/packages/app-accounts/src/Account.tsx b/packages/app-accounts/src/Account.tsx
index d7cadb785a..bc7d0272e6 100644
--- a/packages/app-accounts/src/Account.tsx
+++ b/packages/app-accounts/src/Account.tsx
@@ -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;
+      }
+    }
+  `
+);
diff --git a/packages/app-address-book/src/Address.tsx b/packages/app-address-book/src/Address.tsx
index 4841721698..dea538098c 100644
--- a/packages/app-address-book/src/Address.tsx
+++ b/packages/app-address-book/src/Address.tsx
@@ -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;
+      }
+    }`
+);
diff --git a/packages/app-address-book/src/modals/Create.tsx b/packages/app-address-book/src/modals/Create.tsx
index eb4f04cb98..4adbd48b19 100644
--- a/packages/app-address-book/src/modals/Create.tsx
+++ b/packages/app-address-book/src/modals/Create.tsx
@@ -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';
diff --git a/packages/apps/package.json b/packages/apps/package.json
index 801b31cab6..56da247817 100644
--- a/packages/apps/package.json
+++ b/packages/apps/package.json
@@ -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"
   }
 }
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
index 85b2a71dba..2baa2af133 100644
--- a/packages/react-components/package.json
+++ b/packages/react-components/package.json
@@ -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",
diff --git a/packages/react-components/src/AddressCard.tsx b/packages/react-components/src/AddressCard.tsx
index fba31aefa8..9caedf1fe4 100644
--- a/packages/react-components/src/AddressCard.tsx
+++ b/packages/react-components/src/AddressCard.tsx
@@ -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
diff --git a/packages/react-components/src/ChainLock.tsx b/packages/react-components/src/ChainLock.tsx
new file mode 100644
index 0000000000..fbcdc5ed4b
--- /dev/null
+++ b/packages/react-components/src/ChainLock.tsx
@@ -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);
diff --git a/packages/react-components/src/index.tsx b/packages/react-components/src/index.tsx
index 6b79e70632..37250e8303 100644
--- a/packages/react-components/src/index.tsx
+++ b/packages/react-components/src/index.tsx
@@ -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';
diff --git a/packages/react-components/src/styles/app.css b/packages/react-components/src/styles/app.css
index b8cafa7b4a..ccdb5db857 100644
--- a/packages/react-components/src/styles/app.css
+++ b/packages/react-components/src/styles/app.css
@@ -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;
     }
diff --git a/packages/react-components/src/styles/theme/polkadot.css b/packages/react-components/src/styles/theme/polkadot.css
index 3acb5bcd15..abc6c024cf 100644
--- a/packages/react-components/src/styles/theme/polkadot.css
+++ b/packages/react-components/src/styles/theme/polkadot.css
@@ -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;
diff --git a/yarn.lock b/yarn.lock
index ded50d820b..1dcb71e1a7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -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"