add modal for scanning qr codes

src/actions/ModalActions.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-named-as-default-member */
 /* @flow */
 
 import TrezorConnect, { UI } from 'trezor-connect';
@@ -9,6 +10,10 @@ import type {
     ThunkAction, AsyncAction, Action, GetState, Dispatch, TrezorDevice,
 } from 'flowtype';
 import type { State } from 'reducers/ModalReducer';
+import type { parsedURI } from 'utils/cryptoUriParser';
+
+import sendEthereumFormActions from './ethereum/SendFormActions';
+import sendRippleFormActions from './ripple/SendFormActions';
 
 export type ModalAction = {
     type: typeof MODAL.CLOSE
@@ -16,8 +21,11 @@ export type ModalAction = {
     type: typeof MODAL.OPEN_EXTERNAL_WALLET,
     id: string,
     url: string,
+} | {
+    type: typeof MODAL.OPEN_SCAN_QR,
 };
 
+
 export const onPinSubmit = (value: string): Action => {
     TrezorConnect.uiResponse({ type: UI.RECEIVE_PIN, payload: value });
     return {
@@ -139,6 +147,29 @@ export const gotoExternalWallet = (id: string, url: string): ThunkAction => (dis
     });
 };
 
+export const openQrModal = (): ThunkAction => (dispatch: Dispatch): void => {
+    dispatch({
+        type: MODAL.OPEN_SCAN_QR,
+    });
+};
+
+export const onQrScan = (parsedUri: parsedURI, networkType: string): ThunkAction => (dispatch: Dispatch): void => {
+    const { address = '', amount } = parsedUri;
+    switch (networkType) {
+        case 'ethereum':
+            dispatch(sendEthereumFormActions.onAddressChange(address));
+            if (amount) dispatch(sendEthereumFormActions.onAmountChange(amount));
+            break;
+        case 'ripple':
+            dispatch(sendRippleFormActions.onAddressChange(address));
+            if (amount) dispatch(sendRippleFormActions.onAmountChange(amount));
+            break;
+        default:
+            break;
+    }
+};
+
+
 export default {
     onPinSubmit,
     onPassphraseSubmit,
@@ -149,4 +180,6 @@ export default {
     onDuplicateDevice,
     onWalletTypeRequest,
     gotoExternalWallet,
+    openQrModal,
+    onQrScan,
 };

src/actions/constants/modal.js

@@ -5,3 +5,5 @@ export const OPEN_EXTERNAL_WALLET: 'modal__external_wallet' = 'modal__external_w
 export const CONTEXT_NONE: 'modal_ctx_none' = 'modal_ctx_none';
 export const CONTEXT_DEVICE: 'modal_ctx_device' = 'modal_ctx_device';
 export const CONTEXT_EXTERNAL_WALLET: 'modal_ctx_external-wallet' = 'modal_ctx_external-wallet';
+export const OPEN_SCAN_QR: 'modal__open_scan_qr' = 'modal__open_scan_qr';
+export const CONTEXT_SCAN_QR: 'modal__ctx_scan_qr' = 'modal__ctx_scan_qr';

src/components/modals/QrModal/index.js

@@ -0,0 +1,160 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* @flow */
+
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import QrReader from 'react-qr-reader';
+import styled from 'styled-components';
+
+import colors from 'config/colors';
+import icons from 'config/icons';
+
+import { H2 } from 'components/Heading';
+import P from 'components/Paragraph';
+import Icon from 'components/Icon';
+import Link from 'components/Link';
+
+import { parseUri } from 'utils/cryptoUriParser';
+import type { parsedURI } from 'utils/cryptoUriParser';
+import type { Props as BaseProps } from '../Container';
+
+const Wrapper = styled.div`
+    width: 100%;
+    max-width: 620px;
+    padding: 40px 0px 20px 0px;
+`;
+
+const Padding = styled.div`
+    padding: 0px 48px;
+`;
+
+const CloseLink = styled(Link)`
+    position: absolute;
+    right: 15px;
+    top: 15px;
+`;
+
+const CameraPlaceholder = styled(P)`
+    text-align: center;
+    padding: 10px 0;
+`;
+
+const Error = styled(P)`
+    text-align: center;
+    padding: 10px 0;
+    color: ${colors.ERROR_PRIMARY};
+`;
+
+const StyledQrReader = styled(QrReader)`
+    padding: 10px 0;
+`;
+
+// TODO fix types
+type Props = {
+    onScan: (data: parsedURI) => any,
+    onError?: (error: any) => any,
+    onCancel?: $ElementType<$ElementType<BaseProps, 'modalActions'>, 'onCancel'>;
+}
+
+type State = {
+    readerLoaded: boolean,
+    error: any,
+};
+
+class QrModal extends React.Component<Props, State> {
+    constructor(props: Props) {
+        super(props);
+        this.state = {
+            readerLoaded: false,
+            error: null,
+        };
+    }
+
+    onLoad = () => {
+        this.setState({
+            readerLoaded: true,
+        });
+    }
+
+    handleScan = (data: string) => {
+        if (data) {
+            try {
+                const parsedUri = parseUri(data);
+                if (parsedUri) {
+                    this.props.onScan(parsedUri);
+                    // reset error
+                    this.setState({
+                        error: null,
+                    });
+                    // close window
+                    this.handleCancel();
+                }
+            } catch (error) {
+                this.handleError(error);
+            }
+        }
+    }
+
+    handleError = (err: any) => {
+        console.log(err);
+        this.setState({
+            error: err,
+        });
+
+        if (this.props.onError) {
+            this.props.onError(err);
+        }
+    }
+
+    handleCancel = () => {
+        if (this.props.onCancel) {
+            this.props.onCancel();
+        }
+    }
+
+
+    render() {
+        return (
+            <Wrapper>
+                <CloseLink onClick={this.handleCancel}>
+                    <Icon
+                        size={24}
+                        color={colors.TEXT_SECONDARY}
+                        icon={icons.CLOSE}
+                    />
+                </CloseLink>
+                <Padding>
+                    <H2>Scan an address from a QR code</H2>
+                    {!this.state.readerLoaded && (
+                        <CameraPlaceholder>
+                            Waiting for camera...
+                        </CameraPlaceholder>)
+                    }
+                </Padding>
+                <StyledQrReader
+                    delay={500}
+                    onError={this.handleError}
+                    onScan={this.handleScan}
+                    onLoad={this.onLoad}
+                    style={{ width: '100%' }}
+                    showViewFinder={false}
+                />
+                <Padding>
+                    {this.state.error && (
+                        <Error>
+                            {this.state.error.toString()}
+                        </Error>
+                    )}
+                </Padding>
+            </Wrapper>
+        );
+    }
+}
+
+QrModal.propTypes = {
+    onScan: PropTypes.func.isRequired,
+    onError: PropTypes.func,
+    onCancel: PropTypes.func,
+};
+
+export default QrModal;

src/components/modals/index.js

@@ -29,6 +29,8 @@ import Nem from 'components/modals/external/Nem';
 import Cardano from 'components/modals/external/Cardano';
 import Stellar from 'components/modals/external/Stellar';
 
+import QrModal from 'components/modals/QrModal';
+
 import type { Props } from './Container';
 
 const ModalContainer = styled.div`
@@ -166,6 +168,20 @@ const getExternalContextModal = (props: Props) => {
     }
 };
 
+const getQrModal = (props: Props) => {
+    const { modalActions, selectedAccount } = props;
+
+    if (!selectedAccount.network) return null;
+    const networkType = selectedAccount.network.type;
+
+    return (
+        <QrModal
+            onCancel={modalActions.onCancel}
+            onScan={parsedUri => modalActions.onQrScan(parsedUri, networkType)}
+        />
+    );
+};
+
 // modal container component
 const Modal = (props: Props) => {
     const { modal } = props;
@@ -179,6 +195,9 @@ const Modal = (props: Props) => {
         case MODAL.CONTEXT_EXTERNAL_WALLET:
             component = getExternalContextModal(props);
             break;
+        case MODAL.CONTEXT_SCAN_QR:
+            component = getQrModal(props);
+            break;
         default:
             break;
     }

src/reducers/ModalReducer.js

@@ -18,6 +18,8 @@ export type State = {
 } | {
     context: typeof MODAL.CONTEXT_EXTERNAL_WALLET,
     windowType?: string;
+} | {
+    context: typeof MODAL.CONTEXT_SCAN_QR,
 }
 
 const initialState: State = {
@@ -91,6 +93,11 @@ export default function modal(state: State = initialState, action: Action): Stat
                 windowType: action.id,
             };
 
+        case MODAL.OPEN_SCAN_QR:
+            return {
+                context: MODAL.CONTEXT_SCAN_QR,
+            };
+
         default:
             return state;
     }