Merge pull request #10 from parity-js/am-send-tx

Signer

electron/cli/index.js

@@ -3,11 +3,12 @@
 //
 // SPDX-License-Identifier: MIT
 
-// eslint-disable-next-line
+/* eslint-disable */
 const dynamicRequire =
   typeof __non_webpack_require__ === 'undefined'
     ? require
     : __non_webpack_require__; // Dynamic require https://github.com/yargs/yargs/issues/781
+/* eslint-enable */
 
 const { app } = require('electron');
 const fs = require('fs');

electron/index.js

@@ -21,7 +21,7 @@ let mainWindow;
 // Get arguments from cli
 const [argv] = cli();
 
-function createWindow() {
+function createWindow () {
   // If cli() returns false, then it means that the arguments are stopping the
   // app (e.g. --help or --version). We don't do anything more in this case.
   if (!argv) {
@@ -67,7 +67,7 @@ function createWindow() {
     },
     (details, callback) => {
       details.requestHeaders.Origin = `parity://${mainWindow.id}.ui.parity`;
-      callback({ requestHeaders: details.requestHeaders });
+      callback({ requestHeaders: details.requestHeaders }); // eslint-disable-line
     }
   );
 

electron/menu/index.js

@@ -44,7 +44,7 @@ module.exports = mainWindow => {
       submenu: [
         {
           label: 'Learn More',
-          click() {
+          click () {
             shell.openExternal('https://parity.io');
           }
         }

electron/messages/index.js

@@ -3,7 +3,6 @@
 //
 // SPDX-License-Identifier: MIT
 
-const { runParity } = require('../operations/runParity');
 const signerNewToken = require('../operations/signerNewToken');
 
 /**

electron/operations/fetchParity.js

@@ -3,7 +3,7 @@
 //
 // SPDX-License-Identifier: MIT
 
-const { app, dialog } = require('electron');
+const { app } = require('electron');
 const axios = require('axios');
 const { download } = require('electron-dl');
 const fs = require('fs');
@@ -15,7 +15,6 @@ const {
 } = require('../../package.json');
 const parityPath = require('../utils/parityPath');
 
-const fsExists = util.promisify(fs.stat);
 const fsChmod = util.promisify(fs.chmod);
 
 const getArch = () => {

electron/operations/handleError.js

@@ -3,11 +3,12 @@
 //
 // SPDX-License-Identifier: MIT
 
-const { dialog } = require('electron');
+const { app, dialog } = require('electron');
 
 const {
   parity: { channel }
 } = require('../../package.json');
+const parityPath = require('../utils/parityPath');
 
 module.exports = (err, message = 'An error occurred.') => {
   console.error(err);

electron/operations/runParity.js

@@ -3,7 +3,6 @@
 //
 // SPDX-License-Identifier: MIT
 
-const { app, dialog, webContents } = require('electron');
 const flatten = require('lodash/flatten');
 const fs = require('fs');
 const { spawn } = require('child_process');
@@ -21,7 +20,7 @@ const fsUnlink = util.promisify(fs.unlink);
 let parity = null; // Will hold the running parity instance
 
 module.exports = {
-  runParity(mainWindow) {
+  runParity (mainWindow) {
     // Create a logStream to save logs
     const logFile = `${parityPath()}.log`;
 
@@ -72,7 +71,7 @@ module.exports = {
         handleError(err, 'An error occured while running parity.');
       });
   },
-  killParity() {
+  killParity () {
     if (parity) {
       console.log('Stopping parity.');
       parity.kill();

package.json

@@ -32,7 +32,7 @@
     "build-electron": "webpack --config electron/webpack.config.js",
     "build-js": "react-app-rewired build",
     "electron": "npm run build && electron build/electron.js",
-    "lint": "semistandard 'src/**/*.js' --parser babel-eslint",
+    "lint": "semistandard 'src/**/*.js' 'electron/**/*.js' --parser babel-eslint",
     "prebuild": "rimraf build/",
     "start": "npm-run-all -p watch-css start-js",
     "start-electron": "electron electron/ --ui-dev --ws-origins all",

src/App/App.js

@@ -12,6 +12,7 @@ import ProtectedRoute from './ProtectedRoute';
 import Receive from '../Receive';
 import Send from '../Send';
 import Settings from '../Settings';
+import Signer from '../Signer';
 import Tokens from '../Tokens';
 import './App.css';
 
@@ -36,11 +37,15 @@ class App extends Component {
               <ProtectedRoute exact path='/' component={Tokens} />
               <ProtectedRoute path='/settings' component={Settings} />
               <ProtectedRoute path='/send' component={Send} />
+              <ProtectedRoute path='/signer' component={Signer} />
               <ProtectedRoute path='/receive' component={Receive} />
               <ProtectedRoute path='/accounts/new' component={CreateAccount} />
 
               <nav className='primary-nav'>
                 <Link to='/'>Home</Link>
+                {/* @brian Putting a <Link> here for ease of use for us,
+                but I'll let you decided how/when to show the Signer component */}
+                <Link to='/signer'>Signer</Link>
                 <Link to='/receive' className='icon -receive'>
                   Receive
                 </Link>

src/Send/Send.js

@@ -4,11 +4,58 @@
 // SPDX-License-Identifier: MIT
 
 import React, { Component } from 'react';
+import { defaultAccount$, post$ } from '@parity/light.js';
+import { Redirect } from 'react-router-dom';
+import { toWei } from '@parity/api/lib/util/wei';
 
 import ethereumIcon from '../assets/img/tokens/ethereum.png';
+import light from '../hoc';
 
+@light({
+  me: defaultAccount$
+})
 class Send extends Component {
+  state = {
+    amount: 0.01, // In Ether
+    gas: 21000,
+    to: '0x00Ae02834e91810B223E54ce3f9B7875258a1747',
+    txStatus: null
+  };
+
+  componentWillUnmount () {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+  }
+
+  handleChangeAmount = ({ target: { value } }) =>
+    this.setState({ amount: value });
+
+  handleChangeGas = ({ target: { value } }) => this.setState({ gas: value });
+
+  handleChangeTo = ({ target: { value } }) => this.setState({ to: value });
+
+  handleSubmit = e => {
+    e.preventDefault();
+    const { me } = this.props;
+    const { amount, gas, to } = this.state;
+
+    this.subscription = post$({
+      from: me,
+      gas,
+      to,
+      value: toWei(amount)
+    }).subscribe(status => this.setState({ status }));
+  };
+
   render () {
+    const { amount, gas, status, to } = this.state;
+
+    if (status && status.requested) {
+      // Redirect to signer when needed
+      return <Redirect to={`/signer/${+status.requested}`} />;
+    }
+
     return (
       <div>
         <div className='box -card'>
@@ -20,19 +67,36 @@ class Send extends Component {
             <div className='token-header_balance'>42.89</div>
           </header>
 
-          <form className='send-form'>
+          <form className='send-form' onSubmit={this.handleSubmit}>
+            {/* @brian can we not use ul/li here? Not really semantic. I could
+            change it but I'm scared it'll break the layout */}
             <ul className='send-form_fields'>
               <li>
                 <label>Address</label>
-                <input type='tel' />
+                <input
+                  onChange={this.handleChangeTo}
+                  required
+                  type='tel'
+                  value={to}
+                />
               </li>
               <li>
                 <label>Amount</label>
-                <input type='tel' />
+                <input
+                  onChange={this.handleChangeAmount}
+                  required
+                  type='tel'
+                  value={amount}
+                />
               </li>
               <li>
                 <label>Gas</label>
-                <input type='tel' />
+                <input
+                  onChange={this.handleChangeGas}
+                  required
+                  type='tel'
+                  value={gas}
+                />
               </li>
             </ul>
             <div className='send-form_action'>

src/Signer/Signer.js

@@ -0,0 +1,24 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import React, { Component } from 'react';
+import { Route } from 'react-router-dom';
+
+import SignerDetails from './SignerDetails';
+import SignerList from './SignerList';
+
+class Signer extends Component {
+  render () {
+    return (
+      <div>
+        <SignerList />
+        <hr />
+        <Route path='/signer/:requestId' component={SignerDetails} />
+      </div>
+    );
+  }
+}
+
+export default Signer;

src/Signer/SignerDetails/SignerDetails.js

@@ -0,0 +1,92 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import React, { Component } from 'react';
+import { fromWei } from '@parity/api/lib/util/wei';
+import { inject, observer } from 'mobx-react';
+
+@inject('signerStore')
+@observer
+class SignerDetails extends Component {
+  state = {
+    password: ''
+  };
+
+  handleAccept = () => {
+    const {
+      match: {
+        params: { requestId }
+      },
+      signerStore
+    } = this.props;
+    const { password } = this.state;
+    signerStore.acceptRequest(requestId, password);
+  };
+
+  handleChangePassword = ({ target: { value } }) => {
+    this.setState({ password: value });
+  };
+
+  handleReject = () => {
+    const {
+      match: {
+        params: { requestId }
+      },
+      signerStore
+    } = this.props;
+    signerStore.rejectRequest(requestId);
+  };
+
+  handleSubmit = e => {
+    e.preventDefault();
+  };
+
+  render () {
+    const {
+      match: {
+        params: { requestId }
+      },
+      signerStore: { requests }
+    } = this.props;
+    const { password } = this.state;
+    const request = requests[requestId];
+
+    if (!request) {
+      // This happens after we accept/reject a request
+      return null;
+    }
+
+    const transaction = request.payload.sendTransaction;
+
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <h3>Request number {requestId}</h3>
+        <p>From: {transaction.from}</p>
+        <p>To: {transaction.to}</p>
+        <p>Amount: {+fromWei(transaction.value)}ETH</p>
+        <p>Gas: {+transaction.gas}</p>
+        <label>
+          Enter your password to confirm:<br />
+          <input
+            onChange={this.handleChangePassword}
+            required
+            type='password'
+            value={password}
+          />
+        </label>
+        <br />
+        <button onClick={this.handleAccept}>Accept</button>{' '}
+        <button onClick={this.handleReject}>Reject (no pw needed)</button>
+        <br />
+        <em style={{ fontSize: 10 }}>
+          @brian, for now for errors look in console, e.g. when nothing happens
+          when you click on Accept
+        </em>
+      </form>
+    );
+  }
+}
+
+export default SignerDetails;

src/Signer/SignerDetails/index.js

@@ -0,0 +1,8 @@
+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: MIT
+
+import SignerDetails from './SignerDetails';
+
+export default SignerDetails;