Merge pull request #2 from MyCryptoHQ/paritysigner-adjustments

Paritysigner adjustments

common/actions/paritySigner/actionCreators.ts

@@ -12,10 +12,10 @@ export function requestSignature(from: string, rlp: string): types.RequestSignat
   };
 }
 
-export type TFinalize = typeof finalize;
-export function finalize(signature: string | null): types.FinalizeAction {
+export type TFinalizeSignature = typeof finalizeSignature;
+export function finalizeSignature(signature: string | null): types.FinalizeSignatureAction {
   return {
-    type: TypeKeys.PARITY_SIGNER_FINALIZE,
+    type: TypeKeys.PARITY_SIGNER_FINALIZE_SIGNATURE,
     payload: signature
   };
 }

common/actions/paritySigner/actionTypes.ts

@@ -8,10 +8,10 @@ export interface RequestSignatureAction {
   };
 }
 
-export interface FinalizeAction {
-  type: TypeKeys.PARITY_SIGNER_FINALIZE;
+export interface FinalizeSignatureAction {
+  type: TypeKeys.PARITY_SIGNER_FINALIZE_SIGNATURE;
   payload: string | null;
 }
 
 /*** Union Type ***/
-export type ParitySignerAction = RequestSignatureAction | FinalizeAction;
+export type ParitySignerAction = RequestSignatureAction | FinalizeSignatureAction;

common/actions/paritySigner/constants.ts

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

common/api/shapeshift.ts

@@ -118,26 +118,20 @@ class ShapeshiftService {
 
   public getAllRates = async () => {
     const marketInfo = await this.getMarketInfo();
-    const pairRates = await this.getPairRates(marketInfo);
+    const pairRates = await this.filterPairs(marketInfo);
     const checkAvl = await this.checkAvl(pairRates);
     const mappedRates = this.mapMarketInfo(checkAvl);
     return mappedRates;
   };
 
-  private getPairRates(marketInfo: ShapeshiftMarketInfo[]) {
-    const filteredMarketInfo = marketInfo.filter(obj => {
+  private filterPairs(marketInfo: ShapeshiftMarketInfo[]) {
+    return marketInfo.filter(obj => {
       const { pair } = obj;
       const pairArr = pair.split('_');
       return this.whitelist.includes(pairArr[0]) && this.whitelist.includes(pairArr[1])
         ? true
         : false;
     });
-    const pairRates = filteredMarketInfo.map(p => {
-      const { pair } = p;
-      const singlePair = Promise.resolve(this.getSinglePairRate(pair));
-      return { ...p, ...singlePair };
-    });
-    return pairRates;
   }
 
   private async checkAvl(pairRates: IPairData[]) {
@@ -174,12 +168,6 @@ class ShapeshiftService {
       .then(parseJSON);
   }
 
-  private getSinglePairRate(pair: string) {
-    return fetch(`${this.url}/rate/${pair}`)
-      .then(checkHttpStatus)
-      .then(parseJSON);
-  }
-
   private getMarketInfo() {
     return fetch(`${this.url}/marketinfo`)
       .then(checkHttpStatus)

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,9 +29,9 @@ import {
   ViewOnlyDecrypt,
   Web3Decrypt,
   WalletButton,
+  ParitySignerDecrypt,
   InsecureWalletWarning
 } from './components';
-import ParitySignerDecrypt from 'containers/ParitySignerDecrypt';
 import { AppState } from 'reducers';
 import { showNotification, TShowNotification } from 'actions/notifications';
 import { getDisabledWallets } from 'selectors/wallet';

common/components/WalletDecrypt/components/ParitySigner.scss

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

common/containers/ParitySignerDecrypt/index.tsx → common/components/WalletDecrypt/components/ParitySigner.tsx

@@ -1,35 +1,27 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import translate from 'translations';
+import { ParityQrSigner } from 'components';
 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 { wikiLink } from 'libs/wallet/non-deterministic/parity';
-import './index.scss';
 import AppStoreBadge from 'assets/images/mobile/app-store-badge.png';
 import GooglePlayBadge from 'assets/images/mobile/google-play-badge.png';
+import './ParitySigner.scss';
 
 interface Props {
   showNotification: TShowNotification;
   onUnlock(param: any): void;
 }
 
-class ParitySignerDecrypt extends PureComponent<Props> {
+class ParitySignerDecryptClass extends PureComponent<Props> {
   public render() {
     return (
       <div className="ParitySignerUnlock">
-        <p>{translate('ADD_PARITY_4')}</p>
-        <p>{translate('ADD_PARITY_5', { $wiki_link: wikiLink })}</p>
-        <div className="ParitySignerUnlock-qr-bounds">
-          <QrSigner
-            size={300}
-            scan={true}
-            onScan={this.unlockAddress}
-            styles={{ display: 'inline-block' }}
-          />
-        </div>
+        <ParityQrSigner scan={true} onScan={this.unlockAddress} />
+        <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">
@@ -53,4 +45,6 @@ class ParitySignerDecrypt extends PureComponent<Props> {
   };
 }
 
-export default connect(() => ({}), { showNotification })(ParitySignerDecrypt);
+export const ParitySignerDecrypt = connect(() => ({}), { showNotification })(
+  ParitySignerDecryptClass
+);

common/components/WalletDecrypt/components/index.tsx

@@ -4,6 +4,7 @@ export * from './InsecureWalletWarning';
 export * from './Keystore';
 export * from './LedgerNano';
 export * from './Mnemonic';
+export * from './ParitySigner';
 export * from './PrivateKey';
 export * from './Trezor';
 export * from './ViewOnly';

common/components/index.ts

@@ -19,3 +19,4 @@ export { default as WalletDecrypt } from './WalletDecrypt';
 export { default as TogglablePassword } from './TogglablePassword';
 export { default as GenerateKeystoreModal } from './GenerateKeystoreModal';
 export { default as TransactionStatus } from './TransactionStatus';
+export { default as ParityQrSigner } from './ParityQrSigner';