Allow signing via Qr

js/.npmrc

@@ -1 +1,2 @@
 save-prefix=''
+unsafe-perm=true

js/package.json

@@ -26,6 +26,7 @@
     "Promise"
   ],
   "scripts": {
+    "install": "napa",
     "analize": "npm run analize:lib && npm run analize:dll && npm run analize:app",
     "analize:app": "WPANALIZE=1 webpack --config webpack/app --json > .build/analize.app.json && cat .build/analize.app.json | webpack-bundle-size-analyzer",
     "analize:lib": "WPANALIZE=1 webpack --config webpack/libraries --json > .build/analize.lib.json && cat .build/analize.lib.json | webpack-bundle-size-analyzer",
@@ -63,6 +64,9 @@
     "test:npm": "(cd .npmjs && npm i) && node test/npmParity && node test/npmJsonRpc && (rm -rf .npmjs/node_modules)",
     "prepush": "npm run lint:cached"
   },
+  "napa": {
+    "qrcode-generator": "kazuhikoarase/qrcode-generator"
+  },
   "devDependencies": {
     "babel-cli": "6.23.0",
     "babel-core": "6.23.1",
@@ -181,10 +185,10 @@
     "mobx-react": "4.0.3",
     "mobx-react-devtools": "4.2.10",
     "moment": "2.17.0",
+    "napa": "2.3.0",
     "phoneformat.js": "1.0.3",
     "promise-worker": "1.1.1",
     "push.js": "0.0.11",
-    "qrcode-npm": "0.0.3",
     "qs": "6.3.0",
     "react": "15.4.2",
     "react-ace": "4.1.0",
@@ -197,6 +201,7 @@
     "react-intl": "2.1.5",
     "react-markdown": "2.4.4",
     "react-portal": "3.0.0",
+    "react-qr-reader": "1.0.3",
     "react-redux": "4.4.6",
     "react-router": "3.0.0",
     "react-router-redux": "4.0.7",

js/src/api/rpc/eth/eth.js

@@ -288,9 +288,9 @@ export default class Eth {
       .execute('eth_sign', inAddress(address), inHash(hash));
   }
 
-  signTransaction () {
+  signTransaction (options) {
     return this._transport
-      .execute('eth_signTransaction');
+      .execute('eth_signTransaction', inOptions(options));
   }
 
   submitHashrate (hashrate, clientId) {

js/src/modals/CreateAccount/AccountDetails/accountDetails.js

@@ -25,11 +25,11 @@ import styles from '../createAccount.css';
 @observer
 export default class AccountDetails extends Component {
   static propTypes = {
-    store: PropTypes.object.isRequired
+    createStore: PropTypes.object.isRequired
   }
 
   render () {
-    const { address, description, name } = this.props.store;
+    const { address, description, name } = this.props.createStore;
 
     return (
       <div className={ styles.details }>
@@ -79,7 +79,7 @@ export default class AccountDetails extends Component {
   }
 
   renderPhrase () {
-    const { phrase } = this.props.store;
+    const { phrase } = this.props.createStore;
 
     if (!phrase) {
       return null;

js/src/modals/CreateAccount/AccountDetails/accountDetails.spec.js

@@ -28,7 +28,7 @@ function render () {
   store = createStore();
   component = shallow(
     <AccountDetails
-      store={ store }
+      createStore={ store }
     />
   );
 

js/src/modals/CreateAccount/AccountDetailsGeth/accountDetailsGeth.js

@@ -26,11 +26,11 @@ import styles from '../createAccount.css';
 @observer
 export default class AccountDetailsGeth extends Component {
   static propTypes = {
-    store: PropTypes.object.isRequired
+    createStore: PropTypes.object.isRequired
   }
 
   render () {
-    const { gethAccountsAvailable, gethImported } = this.props.store;
+    const { gethAccountsAvailable, gethImported } = this.props.createStore;
 
     const accounts = gethAccountsAvailable.filter((account) => gethImported.includes(account.address));
 

js/src/modals/CreateAccount/AccountDetailsGeth/accountDetailsGeth.spec.js

@@ -28,7 +28,7 @@ function render () {
   store = createStore();
   component = shallow(
     <AccountDetailsGeth
-      store={ store }
+      createStore={ store }
     />
   );
 

js/src/modals/CreateAccount/ChangeVault/changeVault.js

@@ -22,13 +22,13 @@ import { VaultSelect } from '~/ui';
 @observer
 export default class ChangeVault extends Component {
   static propTypes = {
-    store: PropTypes.object.isRequired,
+    createStore: PropTypes.object.isRequired,
     vaultStore: PropTypes.object
   }
 
   render () {
-    const { store, vaultStore } = this.props;
-    const { vaultName } = store;
+    const { createStore, vaultStore } = this.props;
+    const { vaultName } = createStore;
 
     if (!vaultStore || vaultStore.vaultsOpened.length === 0) {
       return null;
@@ -44,8 +44,8 @@ export default class ChangeVault extends Component {
   }
 
   onSelect = (vaultName) => {
-    const { store } = this.props;
+    const { createStore } = this.props;
 
-    store.setVaultName(vaultName);
+    createStore.setVaultName(vaultName);
   }
 }

js/src/modals/CreateAccount/ChangeVault/changeVault.spec.js

@@ -45,7 +45,7 @@ function createVaultStore () {
 function render () {
   component = shallow(
     <ChangeVault
-      store={ createStore() }
+      createStore={ createStore() }
       vaultStore={ createVaultStore() }
     />
   );

js/src/modals/CreateAccount/CreationType/creationType.js

@@ -54,6 +54,21 @@ const TYPES = [
     ),
     key: 'fromPhrase'
   },
+  {
+    description: (
+      <FormattedMessage
+        id='createAccount.creationType.fromQr.description'
+        defaultMessage='Attach an externally managed account via QR code'
+      />
+    ),
+    label: (
+      <FormattedMessage
+        id='createAccount.creationType.fromQr.label'
+        defaultMessage='External Account'
+      />
+    ),
+    key: 'fromQr'
+  },
   {
     description: (
       <FormattedMessage
@@ -87,43 +102,43 @@ const TYPES = [
   {
     description: (
       <FormattedMessage
-        id='createAccount.creationType.fromPresale.description'
-        defaultMessage='Import an Ethereum presale wallet file with the original password'
+        id='createAccount.creationType.fromRaw.description'
+        defaultMessage='Enter a previously created raw private key with a new password'
       />
     ),
     label: (
       <FormattedMessage
-        id='createAccount.creationType.fromPresale.label'
-        defaultMessage='Presale wallet'
+        id='createAccount.creationType.fromRaw.label'
+        defaultMessage='Private key'
       />
     ),
-    key: 'fromPresale'
+    key: 'fromRaw'
   },
   {
     description: (
       <FormattedMessage
-        id='createAccount.creationType.fromRaw.description'
-        defaultMessage='Enter a previously created raw private key with a new password'
+        id='createAccount.creationType.fromPresale.description'
+        defaultMessage='Import an Ethereum presale wallet file with the original password'
       />
     ),
     label: (
       <FormattedMessage
-        id='createAccount.creationType.fromRaw.label'
-        defaultMessage='Private key'
+        id='createAccount.creationType.fromPresale.label'
+        defaultMessage='Presale wallet'
       />
     ),
-    key: 'fromRaw'
+    key: 'fromPresale'
   }
 ];
 
 @observer
 export default class CreationType extends Component {
   static propTypes = {
-    store: PropTypes.object.isRequired
+    createStore: PropTypes.object.isRequired
   }
 
   render () {
-    const { createType } = this.props.store;
+    const { createType } = this.props.createStore;
 
     return (
       <div>
@@ -157,7 +172,7 @@ export default class CreationType extends Component {
         <div className={ styles.selectItem }>
           <TypeIcon
             className={ styles.icon }
-            store={ this.props.store }
+            createStore={ this.props.createStore }
             type={ item.key }
           />
           <Title
@@ -171,21 +186,21 @@ export default class CreationType extends Component {
   }
 
   isSelected = (item) => {
-    const { createType } = this.props.store;
+    const { createType } = this.props.createStore;
 
     return item.key === createType;
   }
 
   onChange = (item) => {
-    const { store } = this.props;
+    const { createStore } = this.props;
 
-    store.setCreateType(item.key);
+    createStore.setCreateType(item.key);
   }
 
   onSelect = (item) => {
-    const { store } = this.props;
+    const { createStore } = this.props;
 
-    store.setCreateType(item.key);
-    store.nextStage();
+    createStore.setCreateType(item.key);
+    createStore.nextStage();
   }
 }

js/src/modals/CreateAccount/CreationType/creationType.spec.js

@@ -29,7 +29,7 @@ function render () {
   store = createStore();
   component = shallow(
     <CreationType
-      store={ store }
+      createStore={ store }
     />
   );
   instance = component.instance();

js/src/modals/CreateAccount/NewAccount/newAccount.js

@@ -31,7 +31,7 @@ import styles from '../createAccount.css';
 export default class CreateAccount extends Component {
   static propTypes = {
     newError: PropTypes.func.isRequired,
-    store: PropTypes.object.isRequired,
+    createStore: PropTypes.object.isRequired,
     vaultStore: PropTypes.object
   }
 
@@ -45,7 +45,7 @@ export default class CreateAccount extends Component {
   }
 
   render () {
-    const { name, nameError, password, passwordRepeat, passwordRepeatError, passwordHint } = this.props.store;
+    const { name, nameError, password, passwordRepeat, passwordRepeatError, passwordHint } = this.props.createStore;
 
     return (
       <Form>
@@ -126,7 +126,7 @@ export default class CreateAccount extends Component {
         </div>
         <PasswordStrength input={ password } />
         <ChangeVault
-          store={ this.props.store }
+          createStore={ this.props.createStore }
           vaultStore={ this.props.vaultStore }
         />
         { this.renderIdentitySelector() }
@@ -203,16 +203,16 @@ export default class CreateAccount extends Component {
   }
 
   createIdentities = () => {
-    const { store } = this.props;
+    const { createStore } = this.props;
 
-    return store
+    return createStore
       .createIdentities()
       .then((accounts) => {
         const selectedAddress = Object.keys(accounts)[0];
         const { phrase } = accounts[selectedAddress];
 
-        store.setAddress(selectedAddress);
-        store.setPhrase(phrase);
+        createStore.setAddress(selectedAddress);
+        createStore.setPhrase(phrase);
 
         this.setState({
           accounts,
@@ -225,7 +225,7 @@ export default class CreateAccount extends Component {
   }
 
   onChangeIdentity = (event) => {
-    const { store } = this.props;
+    const { createStore } = this.props;
     const selectedAddress = event.target.value || event.target.getAttribute('value');
 
     if (!selectedAddress) {
@@ -235,32 +235,32 @@ export default class CreateAccount extends Component {
     this.setState({ selectedAddress }, () => {
       const { phrase } = this.state.accounts[selectedAddress];
 
-      store.setAddress(selectedAddress);
-      store.setPhrase(phrase);
+      createStore.setAddress(selectedAddress);
+      createStore.setPhrase(phrase);
     });
   }
 
   onEditPasswordHint = (event, passwordHint) => {
-    const { store } = this.props;
+    const { createStore } = this.props;
 
-    store.setPasswordHint(passwordHint);
+    createStore.setPasswordHint(passwordHint);
   }
 
   onEditAccountName = (event, name) => {
-    const { store } = this.props;
+    const { createStore } = this.props;
 
-    store.setName(name);
+    createStore.setName(name);
   }
 
   onEditPassword = (event, password) => {
-    const { store } = this.props;
+    const { createStore } = this.props;
 
-    store.setPassword(password);
+    createStore.setPassword(password);
   }
 
   onEditPasswordRepeat = (event, password) => {
-    const { store } = this.props;
+    const { createStore } = this.props;
 
-    store.setPasswordRepeat(password);
+    createStore.setPasswordRepeat(password);
   }
 }

js/src/modals/CreateAccount/NewAccount/newAccount.spec.js

@@ -32,7 +32,7 @@ function render () {
   store = createStore();
   component = shallow(
     <NewAccount
-      store={ store }
+      createStore={ store }
     />,
     {
       context: { api }