Merge pull request #2220 from fckt/develop

[Parity Signer] Do not ask to scan an address twice for a known account
MyCryptoHQ · Dec 5, 2018 · f5d56eb · f5d56eb
2 parents c213287 + aefaded
commit f5d56eb
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 15 deletions.
diff --git a/common/components/ParityQrSigner.scss b/common/components/ParityQrSigner.scss
@@ -2,6 +2,7 @@
 
 .ParityQrSigner {
   display: flex;
+  z-index: 0;
   align-items: center;
   justify-content: center;
   width: 300px;

diff --git a/common/components/WalletDecrypt/WalletDecrypt.tsx b/common/components/WalletDecrypt/WalletDecrypt.tsx
@@ -277,7 +277,7 @@ const WalletDecrypt = withRouter<Props>(
             <i className="fa fa-arrow-left" /> {translate('CHANGE_WALLET')}
           </button>
           <h2 className="WalletDecrypt-decrypt-title">
-            {!selectedWallet.isReadOnly &&
+            {!(selectedWallet.isReadOnly || selectedWallet.lid === 'X_PARITYSIGNER') &&
               translate('UNLOCK_WALLET', {
                 $wallet: translateRaw(selectedWallet.lid)
               })}

diff --git a/common/components/WalletDecrypt/components/ParitySigner.scss b/common/components/WalletDecrypt/components/ParitySigner.scss
@@ -1,7 +1,37 @@
-.ParitySignerUnlock {
+@import 'common/sass/variables';
+
+.ParitySigner {
   &-badge {
     display: inline-block;
     height: 3em;
     margin: 0 0.4em;
   }
+  &-fields {
+    display: flex;
+    flex-direction: column;
+
+    &-field {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      flex: 1;
+
+      &-margin {
+        margin-bottom: calc(1rem + 15px);
+        font-size: 1.2rem;
+      }
+
+      & .AddressField {
+        width: 100%;
+      }
+    }
+  }
+  &-title {
+    text-align: center;
+    line-height: 1;
+    margin: $space 0 2rem;
+    font-weight: normal;
+    animation: decrypt-enter 500ms ease 1;
+  }
 }
diff --git a/common/components/WalletDecrypt/components/ParitySigner.tsx b/common/components/WalletDecrypt/components/ParitySigner.tsx
@@ -1,22 +1,29 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 
-import translate from 'translations';
-import { isValidETHAddress } from 'libs/validators';
+import translate, { translateRaw } from 'translations';
+import { AppState } from 'features/reducers';
+import { configSelectors } from 'features/config';
 import { ParitySignerWallet } from 'libs/wallet';
 import { wikiLink } from 'libs/wallet/non-deterministic/parity';
 import { notificationsActions } from 'features/notifications';
 import AppStoreBadge from 'assets/images/mobile/app-store-badge.png';
 import GooglePlayBadge from 'assets/images/mobile/google-play-badge.png';
-import { ParityQrSigner } from 'components';
+import { ParityQrSigner, AddressField } from 'components';
 import { NewTabLink } from 'components/ui';
+
 import './ParitySigner.scss';
+interface OwnProps {
+  onUnlock(param: any): void;
+}
 
-interface Props {
+interface StateProps {
   showNotification: notificationsActions.TShowNotification;
-  onUnlock(param: any): void;
+  isValidAddress: ReturnType<typeof configSelectors.getIsValidAddressFn>;
 }
 
+type Props = OwnProps & StateProps;
+
 interface SignerAddress {
   address: string;
   chainId: number;
@@ -25,26 +32,56 @@ interface SignerAddress {
 type SignerQrContent = SignerAddress | string;
 
 class ParitySignerDecryptClass extends PureComponent<Props> {
+  public state = {
+    addressFromBook: ''
+  };
+
   public render() {
+    const { addressFromBook } = this.state;
     return (
-      <div className="ParitySignerUnlock">
-        <ParityQrSigner scan={true} onScan={this.unlockAddress} />
+      <div className="ParitySigner">
+        <h3 className="ParitySigner-title">{translate('SIGNER_SELECT_WALLET')}</h3>
+        <section className="ParitySigner-fields">
+          <section className="ParitySigner-fields-field">
+            <AddressField
+              value={addressFromBook}
+              showInputLabel={false}
+              showIdenticon={false}
+              placeholder={translateRaw('SIGNER_SELECT_WALLET_LIST')}
+              onChangeOverride={this.handleSelectAddressFromBook}
+              dropdownThreshold={0}
+            />
+          </section>
+          <section className="ParitySigner-fields-field-margin">
+            {translate('SIGNER_SELECT_WALLET_QR')}
+          </section>
+          <section className="ParitySigner-fields-field">
+            <ParityQrSigner scan={true} onScan={this.unlockAddress} />
+          </section>
+        </section>
         <p>{translate('ADD_PARITY_4', { $wiki_link: wikiLink })}</p>
         <p>{translate('ADD_PARITY_2')}</p>
         <p>
           <NewTabLink href="https://itunes.apple.com/us/app/parity-signer/id1218174838">
-            <img className="ParitySignerUnlock-badge" src={AppStoreBadge} alt="App Store" />
+            <img className="ParitySigner-badge" src={AppStoreBadge} alt="App Store" />
           </NewTabLink>
           <NewTabLink href="https://play.google.com/store/apps/details?id=com.nativesigner">
-            <img className="ParitySignerUnlock-badge" src={GooglePlayBadge} alt="Google Play" />
+            <img className="ParitySigner-badge" src={GooglePlayBadge} alt="Google Play" />
           </NewTabLink>
         </p>
       </div>
     );
   }
 
+  private handleSelectAddressFromBook = (ev: React.FormEvent<HTMLInputElement>) => {
+    const { currentTarget: { value: addressFromBook } } = ev;
+    this.setState({ addressFromBook }, () => {
+      this.props.onUnlock(new ParitySignerWallet(addressFromBook));
+    });
+  };
+
   private unlockAddress = (content: SignerQrContent) => {
-    if (typeof content === 'string' || !isValidETHAddress(content.address)) {
+    if (typeof content === 'string' || !this.props.isValidAddress(content.address)) {
       this.props.showNotification('danger', 'Not a valid address!');
       return;
     }
@@ -53,6 +90,7 @@ class ParitySignerDecryptClass extends PureComponent<Props> {
   };
 }
 
-export const ParitySignerDecrypt = connect(() => ({}), {
-  showNotification: notificationsActions.showNotification
-})(ParitySignerDecryptClass);
+export const ParitySignerDecrypt = connect((state: AppState): StateProps => ({
+  showNotification: notificationsActions.showNotification,
+  isValidAddress: configSelectors.getIsValidAddressFn(state)
+}))(ParitySignerDecryptClass);
diff --git a/common/translations/lang/en.json b/common/translations/lang/en.json
@@ -81,6 +81,9 @@
     "HOWTO_TREZOR": "How to use TREZOR with MyCrypto",
     "X_KEEPKEY": "KeepKey",
     "UNLOCK_WALLET": "Unlock your $wallet",
+    "SIGNER_SELECT_WALLET": "Select an account from your Parity Signer",
+    "SIGNER_SELECT_WALLET_QR": "or scan a QR code with an address to use a new account",
+    "SIGNER_SELECT_WALLET_LIST": "Use a recent account",
     "X_SAFE_T": "Safe-T mini ",
     "ADD_SAFE_T_SCAN": "Connect to Safe-T mini ",
     "ORDER_SAFE_T": "Don’t have a Safe-T mini? Order one now!",