Merge branch 'master' into ui-2

# Conflicts: # js/package-lock.json # js/src/Application/application.js # js/src/api/rpc/parity/parity.js # js/src/api/subscriptions/manager.spec.js # js/src/api/subscriptions/personal.spec.js # js/src/jsonrpc/interfaces/parity.js # js/src/mobx/hardwareStore.js # js/src/mobx/hardwareStore.spec.js # js/src/modals/index.js # js/src/redux/providers/signerMiddleware.spec.js # js/src/ui/SelectionList/selectionList.css # js/src/views/Account/account.spec.js # js/src/views/Accounts/accounts.spec.js # js/src/views/Application/Extension/store.js # js/src/views/Signer/components/SignRequest/signRequest.spec.js
2017-09-18 11:44:09 +02:00
parent afec8358d3 25b35ebddd
commit db9a70d008
234 changed files with 3871 additions and 1918 deletions
--- a/js/src/Application/application.js
+++ b/js/src/Application/application.js
@@ -20,6 +20,7 @@ import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';

+import HardwareStore from '@parity/shared/mobx/hardwareStore';
 import UpgradeStore from '@parity/shared/mobx/upgradeParity';
 import Errors from '@parity/ui/Errors';

@@ -28,6 +29,7 @@ import DappRequests from '../DappRequests';
 import Extension from '../Extension';
 import FirstRun from '../FirstRun';
 import ParityBar from '../ParityBar';
+import PinMatrix from '../PinMatrix';
 import Requests from '../Requests';
 import Snackbar from '../Snackbar';
 import Status from '../Status';
@@ -54,11 +56,13 @@ class Application extends Component {
  }

  store = new Store(this.context.api);
+  hwstore = HardwareStore.get(this.context.api);
  upgradeStore = UpgradeStore.get(this.context.api);

  render () {
    const [root] = (window.location.hash || '').replace('#/', '').split('/');
    const isMinimized = root !== '';
+    const { pinMatrixRequest } = this.hwstore;

    if (inFrame) {
      return (
@@ -85,6 +89,16 @@ class Application extends Component {
        }
        <Connection />
        <DappRequests />
+        {
+          (pinMatrixRequest.length > 0)
+            ? (
+              <PinMatrix
+                device={ pinMatrixRequest[0] }
+                store={ this.hwstore }
+              />
+            )
+            : null
+        }
        <Requests />
        <ParityBar dapp={ isMinimized } />
      </div>
--- a/js/src/PinMatrix/index.js
+++ b/js/src/PinMatrix/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './pinMatrix';
--- a/js/src/PinMatrix/pinMatrix.css
+++ b/js/src/PinMatrix/pinMatrix.css
@@ -0,0 +1,142 @@
+/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(255, 255, 255, 0.75);
+  z-index: 20000;
+}
+
+.body {
+  margin: 0 auto;
+  padding: 2em 4em;
+  text-align: center;
+  max-width: 30em;
+  min-height: 200px;
+  background: rgba(25, 25, 25, 0.75);
+  color: rgb(208, 208, 208);
+  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 45px, rgba(0, 0, 0, 0.22) 0px 10px 18px;
+}
+
+.passcodeBoxes {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  width: 100px;
+  padding: 20px 0;
+  margin: auto;
+}
+
+.passcodeBox {
+  position: relative;
+  width: 25px;
+  height: 25px;
+  line-height: 25px;
+  margin: 2px;
+  background-color: rgba(0, 0, 0, 0.5);
+  transition: background-color 400ms;
+  cursor: pointer;
+  border: none;
+  outline: none;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.25);
+  }
+}
+
+.passcodeBall {
+  position: absolute;
+  width: 3px;
+  height: 3px;
+  border-radius: 100%;
+  background-color: rgba(208, 208, 208, 0.5);
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.pin {
+  margin-left: 2px;
+  min-height: 20px;
+  position: relative;
+  letter-spacing: 2px;
+}
+
+.clearThik {
+  color: rgba(0, 0, 0, 0.5);
+  font: 14px/100% arial, sans-serif;
+  position: absolute;
+  right: 150px;
+  text-decoration: none;
+  top: -5px;
+  border: solid 3px rgba(0, 0, 0, 0.5);
+  width: 18px;
+  height: 18px;
+  border-bottom-right-radius: 3px;
+  border-top-right-radius: 3px;
+  position: absolute;
+  line-height: 20px;
+  cursor: pointer;
+
+  &:after {
+    right: 100%;
+    top: 50%;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-right-color: rgba(0, 0, 0, 0.5);
+    border-width: 12px;
+    margin-top: -12px;
+    margin-right: 3px;
+  }
+
+  &:before {
+    content: '\2716';
+    padding-left: 2px;
+  }
+}
+
+.button {
+  padding: 7px;
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 3px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.25);
+  }
+}
+
+.cancel {
+  float: left;
+}
+
+.submit {
+  float: right;
+}
+
+.error {
+  color: rgba(218, 39, 39, 0.85);
+  padding-top: 7px;
+}
--- a/js/src/PinMatrix/pinMatrix.js
+++ b/js/src/PinMatrix/pinMatrix.js
@@ -0,0 +1,135 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import GradientBg from '@parity/ui/GradientBg';
+
+import styles from './pinMatrix.css';
+
+export default class PinMatrix extends Component {
+  static propTypes = {
+    store: PropTypes.object.isRequired,
+    device: PropTypes.object.isRequired
+  }
+
+  state = {
+    passcode: '',
+    failureMessage: ''
+  }
+
+  pinMatrix = [7, 8, 9, 4, 5, 6, 1, 2, 3]
+
+  render () {
+    const { passcode, failureMessage } = this.state;
+    const { device } = this.props;
+
+    return (
+      <div className={ styles.overlay }>
+        <GradientBg className={ styles.body }>
+          <FormattedMessage
+            id='pinMatrix.enterPin'
+            defaultMessage='Please enter the pin for your {manufacturer} hardware wallet'
+            values={ {
+              manufacturer: device.manufacturer
+            } }
+          />
+          <div className={ styles.passcodeBoxes }>
+            {this.renderPasscodeBox()}
+          </div>
+
+          <div className={ styles.pin }>
+            {passcode.replace(/./g, '*')}
+            {
+              passcode.length
+                ? <div className={ styles.clearThik } onClick={ this.handleRemoveDigit } />
+                : null
+            }
+          </div>
+          <span
+            className={ `${styles.button} ${styles.submit}` }
+            onClick={ this.handleSubmit }
+          >
+            Submit
+          </span>
+          <div className={ styles.error }>
+            { failureMessage }
+          </div>
+        </GradientBg>
+      </div>
+    );
+  }
+
+  handleAddDigit = (ev) => {
+    const index = ev.currentTarget.getAttribute('data-index');
+    const digit = this.pinMatrix[index];
+    const { passcode } = this.state;
+
+    if (passcode.length > 8) {
+      return;
+    }
+
+    this.setState({
+      passcode: passcode + digit
+    });
+  }
+
+  renderPasscodeBox () {
+    return Array.apply(null, Array(9)).map((box, index) => {
+      return (
+        <button
+          className={ styles.passcodeBox }
+          onClick={ this.handleAddDigit }
+          data-index={ index }
+          key={ index }
+        >
+          <div className={ styles.passcodeBall } />
+        </button>
+      );
+    });
+  }
+
+  handleRemoveDigit = () => {
+    this.setState({
+      passcode: this.state.passcode.slice(0, -1)
+    });
+  }
+
+  handleSubmit = () => {
+    const { device, store } = this.props;
+    const { passcode } = this.state;
+
+    store.pinMatrixAck(device, passcode)
+      .then((status) => {
+        const passcode = '';
+        const failureMessage = status ? '' : (
+          <FormattedMessage
+            id='pinMatrix.label.failureMessage'
+            defaultMessage='Wrong pin, try again.'
+          />
+        );
+
+        this.setState({ passcode, failureMessage });
+      })
+      .catch(err => {
+        this.setState({
+          failureMessage: err.toString()
+        });
+      });
+  }
+}