[beta] UI backports

js/src/mobx/hardwareStore.js

@@ -120,20 +120,22 @@ export default class HardwareStore {
       });
   }
 
-  createAccountInfo (entry) {
+  createAccountInfo (entry, original = {}) {
     const { address, manufacturer, name } = entry;
 
     return Promise
       .all([
-        this._api.parity.setAccountName(address, name),
-        this._api.parity.setAccountMeta(address, {
+        original.name
+          ? Promise.resolve(true)
+          : this._api.parity.setAccountName(address, name),
+        this._api.parity.setAccountMeta(address, Object.assign({
           description: `${manufacturer} ${name}`,
           hardware: {
             manufacturer
           },
           tags: ['hardware'],
           timestamp: Date.now()
-        })
+        }, original.meta || {}))
       ])
       .catch((error) => {
         console.warn('HardwareStore::createEntry', error);

js/src/mobx/hardwareStore.spec.js

@@ -130,25 +130,58 @@ describe('mobx/HardwareStore', () => {
 
   describe('operations', () => {
     describe('createAccountInfo', () => {
-      beforeEach(() => {
-        return store.createAccountInfo({
-          address: 'testAddr',
-          manufacturer: 'testMfg',
-          name: 'testName'
+      describe('when not existing', () => {
+        beforeEach(() => {
+          return store.createAccountInfo({
+            address: 'testAddr',
+            manufacturer: 'testMfg',
+            name: 'testName'
+          });
         });
-      });
 
-      it('calls into parity_setAccountName', () => {
-        expect(api.parity.setAccountName).to.have.been.calledWith('testAddr', 'testName');
+        it('calls into parity_setAccountName', () => {
+          expect(api.parity.setAccountName).to.have.been.calledWith('testAddr', 'testName');
+        });
+
+        it('calls into parity_setAccountMeta', () => {
+          expect(api.parity.setAccountMeta).to.have.been.calledWith('testAddr', sinon.match({
+            description: 'testMfg testName',
+            hardware: {
+              manufacturer: 'testMfg'
+            },
+            tags: ['hardware']
+          }));
+        });
       });
 
-      it('calls into parity_setAccountMeta', () => {
-        expect(api.parity.setAccountMeta).to.have.been.calledWith('testAddr', sinon.match({
-          description: 'testMfg testName',
-          hardware: {
-            manufacturer: 'testMfg'
-          }
-        }));
+      describe('when already exists', () => {
+        beforeEach(() => {
+          return store.createAccountInfo({
+            address: 'testAddr',
+            manufacturer: 'testMfg',
+            name: 'testName'
+          }, {
+            name: 'originalName',
+            meta: {
+              description: 'originalDescription',
+              tags: ['tagA', 'tagB']
+            }
+          });
+        });
+
+        it('does not call into parity_setAccountName', () => {
+          expect(api.parity.setAccountName).not.to.have.been.called;
+        });
+
+        it('calls into parity_setAccountMeta', () => {
+          expect(api.parity.setAccountMeta).to.have.been.calledWith('testAddr', sinon.match({
+            description: 'originalDescription',
+            hardware: {
+              manufacturer: 'testMfg'
+            },
+            tags: ['tagA', 'tagB']
+          }));
+        });
       });
     });
 

js/src/modals/FirstRun/Welcome/welcome.js

@@ -49,7 +49,7 @@ export default class FirstRun extends Component {
             defaultMessage='As part of a new installation, the next few steps will guide you through the process of setting up you Parity instance and your associated accounts. Our aim is to make it as simple as possible and to get you up and running in record-time, so please bear with us. Once completed you will have -'
           />
         </p>
-        <p>
+        <div>
           <ul>
             <li>
               <FormattedMessage
@@ -70,7 +70,7 @@ export default class FirstRun extends Component {
               />
             </li>
           </ul>
-        </p>
+        </div>
         <p>
           <FormattedMessage
             id='firstRun.welcome.next'

js/src/modals/PasswordManager/passwordManager.css

@@ -77,7 +77,8 @@
 }
 
 .form {
+  box-sizing: border-box;
   margin-top: 0;
-  padding: 0.75rem 1.5rem 1.5rem 1.5rem;
+  padding: 0.75rem 1.5rem 1.5rem;
   background-color: rgba(255, 255, 255, 0.05);
 }

js/src/secureApi.js

@@ -92,6 +92,26 @@ export default class SecureApi extends Api {
     return this._transport.token;
   }
 
+  /**
+   * Configure the current API with the given values
+   * (`signerPort`, `dappsInterface`, `dappsPort`, ...)
+   */
+  configure (configuration) {
+    const { dappsInterface, dappsPort, signerPort } = configuration;
+
+    if (dappsInterface) {
+      this._dappsInterface = dappsInterface;
+    }
+
+    if (dappsPort) {
+      this._dappsPort = dappsPort;
+    }
+
+    if (signerPort) {
+      this._signerPort = signerPort;
+    }
+  }
+
   connect () {
     if (this._isConnecting) {
       return;

js/src/ui/Portal/portal.css

@@ -68,12 +68,13 @@ $popoverZ: 3600;
   }
 
   &.modal {
+    z-index: $modalZ;
+
     &:not(.small) {
       bottom: $modalBottom;
       left: $modalLeft;
       right: $modalRight;
       top: $modalTop;
-      z-index: $modalZ;
     }
 
     /* TODO: Small Portals don't adjust their overall height like we have with the

js/src/ui/Portal/portal.js

@@ -18,6 +18,7 @@ import React, { Component, PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import ReactPortal from 'react-portal';
 import keycode from 'keycode';
+import { noop } from 'lodash';
 
 import { nodeOrStringProptype } from '~/util/proptypes';
 import { CloseIcon } from '~/ui/Icons';
@@ -29,7 +30,6 @@ import styles from './portal.css';
 
 export default class Portal extends Component {
   static propTypes = {
-    onClose: PropTypes.func.isRequired,
     open: PropTypes.bool.isRequired,
     activeStep: PropTypes.number,
     busy: PropTypes.bool,
@@ -45,11 +45,16 @@ export default class Portal extends Component {
     isChildModal: PropTypes.bool,
     isSmallModal: PropTypes.bool,
     onClick: PropTypes.func,
+    onClose: PropTypes.func,
     onKeyDown: PropTypes.func,
     steps: PropTypes.array,
     title: nodeOrStringProptype()
   };
 
+  static defaultProps = {
+    onClose: noop
+  };
+
   componentDidMount () {
     this.setBodyOverflow(this.props.open);
   }

js/src/views/Accounts/accounts.js

@@ -394,8 +394,12 @@ class Accounts extends Component {
 
     Object
       .keys(wallets)
-      .filter((address) => !accountsInfo[address])
-      .forEach((address) => this.hwstore.createAccountInfo(wallets[address]));
+      .filter((address) => {
+        const account = accountsInfo[address];
+
+        return !account || !account.meta || !account.meta.hardware;
+      })
+      .forEach((address) => this.hwstore.createAccountInfo(wallets[address], accountsInfo[address]));
 
     this.setVisibleAccounts();
   }

js/src/views/Accounts/accounts.spec.js

@@ -0,0 +1,122 @@
+// 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 { shallow } from 'enzyme';
+import React from 'react';
+import sinon from 'sinon';
+
+import Accounts from './';
+
+let api;
+let component;
+let hwstore;
+let instance;
+let redux;
+
+function createApi () {
+  api = {};
+
+  return api;
+}
+
+function createHwStore (walletAddress = '0x456') {
+  hwstore = {
+    wallets: {
+      [walletAddress]: {
+        address: walletAddress
+      }
+    },
+    createAccountInfo: sinon.stub()
+  };
+
+  return hwstore;
+}
+
+function createRedux () {
+  redux = {
+    dispatch: sinon.stub(),
+    subscribe: sinon.stub(),
+    getState: () => {
+      return {
+        personal: {
+          accounts: {},
+          accountsInfo: {
+            '0x123': { meta: '1' },
+            '0x999': { meta: { hardware: {} } }
+          }
+        },
+        balances: {
+          balances: {}
+        }
+      };
+    }
+  };
+
+  return redux;
+}
+
+function render (props = {}) {
+  component = shallow(
+    <Accounts { ...props } />,
+    {
+      context: {
+        store: createRedux()
+      }
+    }
+  ).find('Accounts').shallow({
+    context: {
+      api: createApi()
+    }
+  });
+  instance = component.instance();
+
+  return component;
+}
+
+describe('views/Accounts', () => {
+  beforeEach(() => {
+    render();
+  });
+
+  it('renders defaults', () => {
+    expect(component).to.be.ok;
+  });
+
+  describe('instance event methods', () => {
+    describe('onHardwareChange', () => {
+      it('detects completely new entries', () => {
+        instance.hwstore = createHwStore();
+        instance.onHardwareChange();
+
+        expect(hwstore.createAccountInfo).to.have.been.calledWith({ address: '0x456' });
+      });
+
+      it('detects addressbook entries', () => {
+        instance.hwstore = createHwStore('0x123');
+        instance.onHardwareChange();
+
+        expect(hwstore.createAccountInfo).to.have.been.calledWith({ address: '0x123' }, { meta: '1' });
+      });
+
+      it('ignores existing hardware entries', () => {
+        instance.hwstore = createHwStore('0x999');
+        instance.onHardwareChange();
+
+        expect(hwstore.createAccountInfo).not.to.have.been.called;
+      });
+    });
+  });
+});