Parity Signer

common/actions/paritySigner/actionCreators.ts

@@ -0,0 +1,21 @@
+import * as types from './actionTypes';
+import { TypeKeys } from './constants';
+
+export type TRequestSignature = typeof requestSignature;
+export function requestSignature(from: string, rlp: string): types.RequestSignatureAction {
+  return {
+    type: TypeKeys.PARITY_SIGNER_REQUEST_SIGNATURE,
+    payload: {
+      from,
+      rlp
+    }
+  };
+}
+
+export type TFinalize = typeof finalize;
+export function finalize(signature: string | null): types.FinalizeAction {
+  return {
+    type: TypeKeys.PARITY_SIGNER_FINALIZE,
+    payload: signature
+  };
+}

common/actions/paritySigner/actionTypes.ts

@@ -0,0 +1,17 @@
+import { TypeKeys } from './constants';
+
+export interface RequestSignatureAction {
+  type: TypeKeys.PARITY_SIGNER_REQUEST_SIGNATURE;
+  payload: {
+    rlp: string;
+    from: string;
+  };
+}
+
+export interface FinalizeAction {
+  type: TypeKeys.PARITY_SIGNER_FINALIZE;
+  payload: string | null;
+}
+
+/*** Union Type ***/
+export type ParitySignerAction = RequestSignatureAction | FinalizeAction;

common/actions/paritySigner/constants.ts

@@ -0,0 +1,4 @@
+export enum TypeKeys {
+  PARITY_SIGNER_REQUEST_SIGNATURE = 'PARITY_SIGNER_REQUEST_SIGNATURE',
+  PARITY_SIGNER_FINALIZE = 'PARITY_SIGNER_FINALIZE'
+}

common/actions/paritySigner/index.ts

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './actionTypes';
+export * from './actionCreators';

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/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 {
+    &-badge {
+        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,53 @@
+import React, { PureComponent } from 'react';
+import { connect } from 'react-redux';
+import translate from 'translations';
+import { NewTabLink } from 'components/ui';
+import QrSigner from '@parity/qr-signer';
+import { isValidETHAddress } from 'libs/validators';
+import { ParitySignerWallet } from 'libs/wallet';
+import { showNotification, TShowNotification } from 'actions/notifications';
+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 {
+  showNotification: TShowNotification;
+  onUnlock(param: any): void;
+}
+
+class ParitySignerDecrypt extends PureComponent<Props> {
+  public render() {
+    return (
+      <div className="ParitySignerUnlock">
+        <div className="ParitySignerUnlock-qr-bounds">
+          <QrSigner
+            size={300}
+            scan={true}
+            onScan={this.unlockAddress}
+            styles={{ display: 'inline-block' }}
+          />
+        </div>
+        <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" />
+          </NewTabLink>
+          <NewTabLink href="https://play.google.com/store/apps/details?id=com.nativesigner">
+            <img className="ParitySignerUnlock-badge" src={GooglePlayBadge} alt="Google Play" />
+          </NewTabLink>
+        </p>
+      </div>
+    );
+  }
+
+  private unlockAddress = (address: string) => {
+    if (!isValidETHAddress(address)) {
+      this.props.showNotification('danger', 'Not a valid address!');
+      return;
+    }
+
+    this.props.onUnlock(new ParitySignerWallet(address));
+  };
+}
+
+export default connect(() => ({}), { showNotification })(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,110 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import translate, { translateRaw } from 'translations';
+import QrSigner from '@parity/qr-signer';
+import { AppState } from 'reducers';
+import Modal, { IButton } from 'components/ui/Modal';
+import { TFinalize, finalize } from 'actions/paritySigner';
+import './index.scss';
+
+interface State {
+  scan: boolean;
+}
+
+interface PropsClosed {
+  isOpen: false;
+  finalize: TFinalize;
+}
+
+interface PropsOpen {
+  isOpen: true;
+  rlp: string;
+  from: string;
+  finalize: TFinalize;
+}
+
+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 { from, rlp } = this.props;
+
+    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="QrSignerModal-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.finalize(null);
+    this.setState({ scan: false });
+  };
+
+  private onScan = (signature: string) => {
+    if (!this.props.isOpen) {
+      return;
+    }
+
+    this.props.finalize(signature);
+    this.setState({ scan: false });
+  };
+}
+
+function mapStateToProps(state: AppState) {
+  const { requested } = state.paritySigner;
+
+  if (!requested) {
+    return { isOpen: false };
+  }
+
+  const { from, rlp } = requested;
+
+  return {
+    isOpen: true,
+    from,
+    rlp
+  };
+}
+
+export default connect(mapStateToProps, { finalize })(QrSignerModal);

common/containers/Tabs/SendTransaction/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import translate from 'translations';
 import TabSection from 'containers/TabSection';
+import QrSignerModal from 'containers/QrSignerModal';
 import { UnlockHeader } from 'components/ui';
 import { getWalletInst } from 'selectors/wallet';
 import { AppState } from 'reducers';
@@ -108,6 +109,7 @@ class SendTransaction extends React.Component<Props> {
             </div>
           )}
         </section>
+        <QrSignerModal />
       </TabSection>
     );
   }

common/libs/wallet/non-deterministic/parity.ts

@@ -0,0 +1,19 @@
+import { IFullWallet } from '../IWallet';
+
+export default class ParitySignerWallet implements IFullWallet {
+  public address: string;
+
+  constructor(address: string) {
+    this.address = address;
+  }
+
+  public signRawTransaction = () =>
+    Promise.reject(new Error('Web3 wallets cannot sign raw transactions.'));
+
+  public signMessage = () =>
+    Promise.reject(new Error('Signing via Parity Signer not yet supported.'));
+
+  public getAddressString() {
+    return this.address;
+  }
+}

common/libs/wallet/non-deterministic/wallets.ts

@@ -5,6 +5,7 @@ import { decryptPrivKey } from 'libs/decrypt';
 import { fromV3 } from 'libs/web-workers';
 import Web3Wallet from './web3';
 import AddressOnlyWallet from './address';
+import ParitySignerWallet from './parity';
 
 const EncryptedPrivateKeyWallet = (encryptedPrivateKey: string, password: string) =>
   signWrapper(fromPrivateKey(decryptPrivKey(encryptedPrivateKey, password)));
@@ -26,5 +27,6 @@ export {
   PrivKeyWallet,
   UtcWallet,
   Web3Wallet,
-  AddressOnlyWallet
+  AddressOnlyWallet,
+  ParitySignerWallet
 };

common/reducers/index.ts

@@ -12,6 +12,7 @@ import { State as TransactionState, transaction } from './transaction';
 import { State as GasState, gas } from './gas';
 import { onboardStatus, State as OnboardStatusState } from './onboardStatus';
 import { State as TransactionsState, transactions } from './transactions';
+import { State as ParitySignerState, paritySigner } from './paritySigner';
 
 export interface AppState {
   // Custom reducers
@@ -26,6 +27,7 @@ export interface AppState {
   swap: SwapState;
   transaction: TransactionState;
   transactions: TransactionsState;
+  paritySigner: ParitySignerState;
   gas: GasState;
   // Third party reducers (TODO: Fill these out)
   routing: any;
@@ -43,6 +45,7 @@ export default combineReducers<AppState>({
   deterministicWallets,
   transaction,
   transactions,
+  paritySigner,
   gas,
   routing: routerReducer
 });