TxQrCode.js

// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause

import React, { Component } from 'react';
import { Header } from 'fether-ui';
import { inject, observer } from 'mobx-react';
import { Link, Redirect } from 'react-router-dom';
import QrSigner from '@parity/qr-signer';
import { withProps } from 'recompose';

import RequireHealth from '../../RequireHealthOverlay';
import withAccount from '../../utils/withAccount.js';
import withTokens from '../../utils/withTokens';

@inject('sendStore')
@withAccount
@withTokens
@withProps(({ match: { params: { tokenAddress } }, tokens }) => ({
  token: tokens[tokenAddress]
}))
@observer
class TxQrCode extends Component {
  handleNextStep = () => {
    const {
      history,
      token,
      account: { address: accountAddress }
    } = this.props;
    history.push(`/send/${token.address}/from/${accountAddress}/scansignedtx`);
  };

  render () {
    const {
      account: { address },
      history,
      sendStore: { tx, getRlp },
      token
    } = this.props;

    if (!Object.keys(tx).length || !token) {
      return <Redirect to='/' />;
    }

    return (
      <div>
        <Header
          left={
            <Link to={`/tokens/${address}`} className='icon -back'>
              Close
            </Link>
          }
          title={token && <h1>Send {token.name}</h1>}
        />

        <RequireHealth require='sync'>
          <div className='window_content'>
            <div className='box -padded'>
              Please scan the QR code of the transaction on Parity Signer
              <QrSigner
                scan={false}
                onScan={() => {}}
                account={address}
                rlp={getRlp()}
              />
              <nav className='form-nav -binary'>
                <button
                  className='button -cancel'
                  onClick={history.goBack}
                  type='button'
                >
                  Back
                </button>

                <button
                  className='button -submit'
                  onClick={this.handleNextStep}
                >
                  Next step
                </button>
              </nav>
            </div>
          </div>
        </RequireHealth>
      </div>
    );
  }
}

export default TxQrCode;