Parity Signer

common/actions/wallet/actionCreators.ts

@@ -1,3 +1,4 @@
+import EthTx from 'ethereumjs-tx';
 import { Wei, TokenValue } from 'libs/units';
 import { IWallet, WalletConfig } from 'libs/wallet';
 import * as types from './actionTypes';
@@ -166,3 +167,28 @@ export function setAccountBalance(): types.SetAccountBalanceAction {
     type: TypeKeys.WALLET_SET_ACCOUNT_BALANCE
   };
 }
+
+export type TSetWalletQrTransaction = typeof setWalletQrTransaction;
+export function setWalletQrTransaction(
+  tx: EthTx,
+  from: string,
+  onSignature: (signature: string) => void,
+  onCancel: () => void
+): types.SetWalletQrTransactionAction {
+  return {
+    type: TypeKeys.WALLET_SET_QR_TRANSACTION,
+    payload: {
+      tx,
+      from,
+      onSignature,
+      onCancel
+    }
+  };
+}
+
+export type TFinalizeQrTransaction = typeof finalizeQrTransaction;
+export function finalizeQrTransaction(): types.FinalizeWalletQrTransactionAction {
+  return {
+    type: TypeKeys.WALLET_FINALIZE_QR_TX
+  };
+}

common/actions/wallet/actionTypes.ts

@@ -1,5 +1,6 @@
 import { Wei, TokenValue } from 'libs/units';
 import { IWallet, WalletConfig } from 'libs/wallet';
+import { QrSignatureState } from 'reducers/wallet';
 import { TypeKeys } from './constants';
 
 /*** Unlock Private Key ***/
@@ -129,6 +130,15 @@ export interface SetAccountBalanceAction {
   type: TypeKeys.WALLET_SET_ACCOUNT_BALANCE;
 }
 
+export interface SetWalletQrTransactionAction {
+  type: TypeKeys.WALLET_SET_QR_TRANSACTION;
+  payload: QrSignatureState;
+}
+
+export interface FinalizeWalletQrTransactionAction {
+  type: TypeKeys.WALLET_FINALIZE_QR_TX;
+}
+
 /*** Union Type ***/
 export type WalletAction =
   | UnlockPrivateKeyAction
@@ -148,4 +158,6 @@ export type WalletAction =
   | SetWalletTokensAction
   | SetWalletConfigAction
   | SetPasswordPendingAction
-  | SetAccountBalanceAction;
+  | SetAccountBalanceAction
+  | SetWalletQrTransactionAction
+  | FinalizeWalletQrTransactionAction;

common/actions/wallet/constants.ts

@@ -20,5 +20,7 @@ export enum TypeKeys {
   WALLET_SET_CONFIG = 'WALLET_SET_CONFIG',
   WALLET_RESET = 'WALLET_RESET',
   WALLET_SET_PASSWORD_PENDING = 'WALLET_SET_PASSWORD_PENDING',
-  WALLET_SET_ACCOUNT_BALANCE = 'WALLET_SET_ACCOUNT_BALANCE'
+  WALLET_SET_ACCOUNT_BALANCE = 'WALLET_SET_ACCOUNT_BALANCE',
+  WALLET_SET_QR_TRANSACTION = 'WALLET_SET_QR_TRANSACTION',
+  WALLET_FINALIZE_QR_TX = 'WALLET_FINALIZE_QR_TX'
 }

common/components/Footer/index.tsx

@@ -12,6 +12,7 @@ import React from 'react';
 import PreFooter from './PreFooter';
 import DisclaimerModal from './DisclaimerModal';
 import { NewTabLink } from 'components/ui';
+import QrSignerModal from 'containers/QrSignerModal';
 import OnboardModal from 'containers/OnboardModal';
 import './index.scss';
 import { translateRaw } from 'translations';
@@ -219,6 +220,7 @@ export default class Footer extends React.PureComponent<Props, State> {
           </div>
         </footer>
 
+        <QrSignerModal />
         <OnboardModal />
         <DisclaimerModal isOpen={this.state.isDisclaimerOpen} handleClose={this.toggleModal} />
       </div>

common/components/WalletDecrypt/WalletDecrypt.tsx

@@ -31,6 +31,7 @@ import {
   WalletButton,
   InsecureWalletWarning
 } from './components';
+import ParitySignerDecrypt from 'containers/ParitySignerDecrypt';
 import { AppState } from 'reducers';
 import { showNotification, TShowNotification } from 'actions/notifications';
 import { getDisabledWallets } from 'selectors/wallet';
@@ -49,6 +50,7 @@ import LedgerIcon from 'assets/images/wallets/ledger.svg';
 import MetamaskIcon from 'assets/images/wallets/metamask.svg';
 import MistIcon from 'assets/images/wallets/mist.svg';
 import TrezorIcon from 'assets/images/wallets/trezor.svg';
+import ParitySignerIcon from 'assets/images/wallets/paritysigner.svg';
 import './WalletDecrypt.scss';
 import { withRouter, RouteComponentProps } from 'react-router';
 
@@ -168,6 +170,15 @@ const WalletDecrypt = withRouter<Props>(
         unlock: this.props.setWallet,
         helpLink: 'https://doc.satoshilabs.com/trezor-apps/mew.html'
       },
+      [SecureWalletName.PARITY_SIGNER]: {
+        lid: 'X_PARITYSIGNER',
+        icon: ParitySignerIcon,
+        description: 'ADD_PARITY_DESC',
+        component: ParitySignerDecrypt,
+        initialParams: {},
+        unlock: this.props.setWallet,
+        helpLink: 'https://github.com/paritytech/parity-signer/blob/master/README.md'
+      },
       [InsecureWalletName.KEYSTORE_FILE]: {
         lid: 'X_KEYSTORE2',
         example: 'UTC--2017-12-15T17-35-22.547Z--6be6e49e82425a5aa56396db03512f2cc10e95e8',

common/components/WalletDecrypt/disables.ts

@@ -22,9 +22,10 @@ export const DISABLE_WALLETS: { [key in WalletMode]: DisabledWallets } = {
     }
   },
   [WalletMode.UNABLE_TO_SIGN]: {
-    wallets: [SecureWalletName.TREZOR, MiscWalletName.VIEW_ONLY],
+    wallets: [SecureWalletName.TREZOR, SecureWalletName.PARITY_SIGNER, MiscWalletName.VIEW_ONLY],
     reasons: {
       [SecureWalletName.TREZOR]: 'This wallet can’t sign messages',
+      [SecureWalletName.PARITY_SIGNER]: 'This wallet can’t sign messages',
       [MiscWalletName.VIEW_ONLY]: 'This wallet can’t sign messages'
     }
   }

common/components/ui/Modal/ModalBody.tsx

@@ -28,8 +28,10 @@ export default class ModalBody extends React.Component<Props> {
       this.modal.querySelectorAll(focusableElementsString)
     );
 
+    const first = focusableElements[0];
+
     // Convert NodeList to Array
-    this.firstTabStop = focusableElements[0];
+    this.firstTabStop = first;
     this.lastTabStop = focusableElements[focusableElements.length - 1];
 
     this.modal.addEventListener('keydown', this.keyDownListener);

common/config/data.tsx

@@ -62,7 +62,8 @@ export const ethercardReferralURL =
 export enum SecureWalletName {
   WEB3 = 'web3',
   LEDGER_NANO_S = 'ledgerNanoS',
-  TREZOR = 'trezor'
+  TREZOR = 'trezor',
+  PARITY_SIGNER = 'paritySigner'
 }
 
 export enum HardwareWalletName {

common/containers/ParitySignerDecrypt/index.scss

@@ -0,0 +1,14 @@
+.ParitySignerUnlock {
+    a img {
+        display: inline-block;
+        height: 3em;
+        margin: 0 0.4em;
+    }
+
+    .qr-bounds {
+        width: 300px;
+        height: 300px;
+        display: inline-block;
+        margin-bottom: 1.5em;
+    }
+}

common/containers/ParitySignerDecrypt/index.tsx

@@ -0,0 +1,67 @@
+import React, { PureComponent } from 'react';
+import { connect } from 'react-redux';
+import translate from 'translations';
+import QrSigner from '@parity/qr-signer';
+import { isValidETHAddress } from 'libs/validators';
+import { ParitySignerWallet } from 'libs/wallet';
+import {
+  setWalletQrTransaction,
+  TSetWalletQrTransaction,
+  finalizeQrTransaction,
+  TFinalizeQrTransaction
+} from 'actions/wallet';
+import './index.scss';
+import AppStoreBadge from 'assets/images/mobile/app-store-badge.png';
+import GooglePlayBadge from 'assets/images/mobile/google-play-badge.png';
+
+interface Props {
+  setWalletQrTransaction: TSetWalletQrTransaction;
+  finalizeQrTransaction: TFinalizeQrTransaction;
+  onUnlock(param: any): void;
+}
+
+class ParitySignerDecrypt extends PureComponent<Props> {
+  public render() {
+    return (
+      <div className="ParitySignerUnlock">
+        <div className="qr-bounds">
+          <QrSigner
+            size={300}
+            scan={true}
+            onScan={this.unlockAddress}
+            styles={{ display: 'inline-block' }}
+          />
+        </div>
+        <p>{translate('ADD_PARITY_2')}</p>
+        <p>
+          <a href="https://itunes.apple.com/us/app/parity-signer/id1218174838" rel="nofollow">
+            <img src={AppStoreBadge} alt="App Store" />
+          </a>
+          <a href="https://play.google.com/store/apps/details?id=com.nativesigner" rel="nofollow">
+            <img src={GooglePlayBadge} alt="Google Play" />
+          </a>
+        </p>
+      </div>
+    );
+  }
+
+  private unlockAddress = (address: string) => {
+    if (!isValidETHAddress(address)) {
+      console.error('Invalid address!');
+      return;
+    }
+
+    this.props.onUnlock(
+      new ParitySignerWallet(
+        address,
+        this.props.setWalletQrTransaction,
+        this.props.finalizeQrTransaction
+      )
+    );
+  };
+}
+
+export default connect(() => ({}), {
+  setWalletQrTransaction,
+  finalizeQrTransaction
+})(ParitySignerDecrypt);

common/containers/QrSignerModal/index.scss

@@ -0,0 +1,8 @@
+.QrSignerModal {
+  .qr-bounds {
+    width: 300px;
+    height: 300px;
+    display: inline-block;
+    margin: 0.3em 0;
+  }
+}

common/containers/QrSignerModal/index.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import translate, { translateRaw } from 'translations';
+import EthTx from 'ethereumjs-tx';
+import QrSigner from '@parity/qr-signer';
+import { AppState } from 'reducers';
+import Modal, { IButton } from 'components/ui/Modal';
+import './index.scss';
+
+interface State {
+  scan: boolean;
+}
+
+interface PropsClosed {
+  isOpen: false;
+}
+
+interface PropsOpen {
+  isOpen: true;
+  from: string;
+  tx: EthTx;
+  onSignature(signature: string): void;
+  onCancel(): void;
+}
+
+type Props = PropsClosed | PropsOpen;
+
+class QrSignerModal extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      scan: false
+    };
+  }
+
+  public render() {
+    if (!this.props.isOpen) {
+      return null;
+    }
+
+    const { scan } = this.state;
+    const { tx, from } = this.props;
+
+    // Poor man's serialize without signature.
+    // All those values are later overriden by actual signature
+    // values in: wallets/non-deterministic/parity.ts
+    tx.v = Buffer.from([tx._chainId]);
+    tx.r = Buffer.from([0]);
+    tx.s = Buffer.from([0]);
+
+    const rlp = '0x' + tx.serialize().toString('hex');
+    const buttons: IButton[] = [
+      {
+        disabled: false,
+        text: translate(scan ? 'ACTION_4' : 'ADD_PARITY_3'),
+        type: 'primary',
+        onClick: () => this.setState({ scan: !scan })
+      },
+      {
+        disabled: false,
+        text: translate('ACTION_2'),
+        type: 'default',
+        onClick: this.onClose
+      }
+    ];
+
+    return (
+      <div className="QrSignerModal">
+        <Modal
+          title={translateRaw('DEP_SIGNTX')}
+          isOpen={true}
+          buttons={buttons}
+          handleClose={this.onClose}
+        >
+          <div className="qr-bounds">
+            <QrSigner size={300} scan={scan} account={from} rlp={rlp} onScan={this.onScan} />
+          </div>
+        </Modal>
+      </div>
+    );
+  }
+
+  private onClose = () => {
+    if (!this.props.isOpen) {
+      return;
+    }
+
+    this.props.onCancel();
+    this.setState({ scan: false });
+  };
+
+  private onScan = (signature: string) => {
+    if (!this.props.isOpen) {
+      return;
+    }
+
+    this.props.onSignature(signature);
+    this.setState({ scan: false });
+  };
+}
+
+function mapStateToProps(state: AppState) {
+  const { signViaQr } = state.wallet;
+
+  if (!signViaQr) {
+    return { isOpen: false };
+  }
+
+  const { tx, from, onSignature, onCancel } = signViaQr;
+
+  return {
+    isOpen: true,
+    tx,
+    from,
+    onSignature,
+    onCancel
+  };
+}
+
+export default connect(mapStateToProps, {})(QrSignerModal);