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 TFinalizeSignature = typeof finalizeSignature;
+export function finalizeSignature(signature: string | null): types.FinalizeSignatureAction {
+  return {
+    type: TypeKeys.PARITY_SIGNER_FINALIZE_SIGNATURE,
+    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 FinalizeSignatureAction {
+  type: TypeKeys.PARITY_SIGNER_FINALIZE_SIGNATURE;
+  payload: string | null;
+}
+
+/*** Union Type ***/
+export type ParitySignerAction = RequestSignatureAction | FinalizeSignatureAction;

common/actions/paritySigner/constants.ts

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

common/actions/paritySigner/index.ts

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

common/components/ParityQrSigner.scss

@@ -0,0 +1,30 @@
+@import 'common/sass/variables';
+
+.ParityQrSigner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 300px;
+  height: 300px;
+  text-align: center;
+  margin: 0 auto 1.5em;
+  border-radius: 4px;
+  overflow: hidden;
+
+  &.is-disabled {
+    background: $gray-lighter;
+  }
+
+  &-error {
+    padding: $space;
+    font-size: $font-size-small;
+    color: $gray-light;
+
+    &-icon {
+      display: block;
+      font-size: 60px;
+      margin-bottom: $space-md;
+      opacity: 0.8;
+    }
+  }
+}

common/components/ParityQrSigner.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import classnames from 'classnames';
+import translate from 'translations';
+import { Spinner } from 'components/ui';
+import QrSigner from '@parity/qr-signer';
+import './ParityQrSigner.scss';
+
+interface State {
+  webcamError: null | React.ReactElement<any>;
+  isLoading: boolean;
+}
+
+interface ScanProps {
+  scan: true;
+  onScan(data: string): void;
+}
+
+interface ShowProps {
+  scan: false;
+  account: string;
+  rlp: string;
+}
+
+interface SharedProps {
+  size?: number;
+}
+
+type Props = (ScanProps | ShowProps) & SharedProps;
+
+export default class ParityQrSigner extends React.PureComponent<Props, State> {
+  public state: State = {
+    webcamError: null,
+    isLoading: true
+  };
+
+  public componentDidMount() {
+    this.checkForWebcam();
+    if (navigator.mediaDevices) {
+      navigator.mediaDevices.addEventListener('devicechange', this.checkForWebcam);
+    }
+  }
+
+  public componentWillUnmount() {
+    if (navigator.mediaDevices && navigator.mediaDevices.ondevicechange) {
+      navigator.mediaDevices.removeEventListener('devicechange', this.checkForWebcam);
+    }
+  }
+
+  public checkForWebcam = async () => {
+    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+      try {
+        await navigator.mediaDevices.getUserMedia({ video: true });
+        this.setState({
+          webcamError: null,
+          isLoading: false
+        });
+      } catch (e) {
+        const err = e as DOMException;
+        let errorMessage;
+        switch (err.name) {
+          case 'NotAllowedError':
+          case 'SecurityError':
+            errorMessage = translate('ADD_PARITY_ERROR_DISABLED');
+            break;
+          case 'NotFoundError':
+          case 'OverconstrainedError':
+            errorMessage = translate('ADD_PARITY_ERROR_NO_CAM');
+            break;
+          default:
+            errorMessage = translate('ADD_PARITY_ERROR_UNKNOWN');
+        }
+        this.setState({
+          webcamError: errorMessage,
+          isLoading: false
+        });
+      }
+    }
+  };
+
+  public render() {
+    const { webcamError, isLoading } = this.state;
+    const size = this.props.size || 300;
+
+    return (
+      <div
+        className={classnames({
+          ParityQrSigner: true,
+          'is-disabled': !!webcamError || isLoading
+        })}
+        style={{
+          width: size,
+          height: size
+        }}
+      >
+        {isLoading ? (
+          <div className="ParityQrSigner-loader">
+            <Spinner size="x3" light={true} />
+          </div>
+        ) : webcamError ? (
+          <div className="ParityQrSigner-error">
+            <i className="ParityQrSigner-error-icon fa fa-exclamation-circle" />
+            {webcamError}
+          </div>
+        ) : (
+          <QrSigner {...this.props} size={size} />
+        )}
+      </div>
+    );
+  }
+}

common/components/WalletDecrypt/WalletDecrypt.tsx

@@ -29,6 +29,7 @@ import {
   ViewOnlyDecrypt,
   Web3Decrypt,
   WalletButton,
+  ParitySignerDecrypt,
   InsecureWalletWarning
 } from './components';
 import { AppState } from 'reducers';
@@ -49,6 +50,8 @@ 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/parity-signer.svg';
+import { wikiLink as paritySignerHelpLink } from 'libs/wallet/non-deterministic/parity';
 import './WalletDecrypt.scss';
 import { withRouter, RouteComponentProps } from 'react-router';
 
@@ -168,6 +171,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: paritySignerHelpLink
+      },
       [InsecureWalletName.KEYSTORE_FILE]: {
         lid: 'X_KEYSTORE2',
         example: 'UTC--2017-12-15T17-35-22.547Z--6be6e49e82425a5aa56396db03512f2cc10e95e8',

common/components/WalletDecrypt/components/ParitySigner.scss

@@ -0,0 +1,7 @@
+.ParitySignerUnlock {
+  &-badge {
+    display: inline-block;
+    height: 3em;
+    margin: 0 0.4em;
+  }
+}