merge master into sms-verification-modal

js/src/views/Accounts/accounts.js

@@ -22,7 +22,7 @@ import { uniq } from 'lodash';
 
 import List from './List';
 import { CreateAccount } from '../../modals';
-import { Actionbar, ActionbarSearch, ActionbarSort, Button, Page, Tooltip } from '../../ui';
+import { Actionbar, ActionbarExport, ActionbarSearch, ActionbarSort, Button, Page, Tooltip } from '../../ui';
 
 import styles from './accounts.css';
 
@@ -90,12 +90,15 @@ class Accounts extends Component {
     return (
       <ActionbarSort
         key='sortAccounts'
+        id='sortAccounts'
         order={ this.state.sortOrder }
         onChange={ onChange } />
     );
   }
 
   renderActionbar () {
+    const { accounts } = this.props;
+
     const buttons = [
       <Button
         key='newAccount'
@@ -103,6 +106,11 @@ class Accounts extends Component {
         label='new account'
         onClick={ this.onNewAccountClick } />,
 
+      <ActionbarExport
+        key='exportAccounts'
+        content={ accounts }
+        filename='accounts' />,
+
       this.renderSearchButton(),
       this.renderSortButton()
     ];

js/src/views/Addresses/addresses.js

@@ -75,6 +75,7 @@ class Addresses extends Component {
     return (
       <ActionbarSort
         key='sortAccounts'
+        id='sortAddresses'
         order={ this.state.sortOrder }
         onChange={ onChange } />
     );
@@ -106,7 +107,7 @@ class Addresses extends Component {
       <ActionbarExport
         key='exportAddressbook'
         content={ contacts }
-        filename='addressbook.json' />,
+        filename='addressbook' />,
 
       <ActionbarImport
         key='importAddressbook'

js/src/views/Contract/Queries/inputQuery.js

@@ -19,7 +19,7 @@ import React, { Component, PropTypes } from 'react';
 import LinearProgress from 'material-ui/LinearProgress';
 import { Card, CardActions, CardTitle, CardText } from 'material-ui/Card';
 
-import { Button, Input, InputAddressSelect } from '../../../ui';
+import { Button, Input, InputAddress, InputAddressSelect } from '../../../ui';
 
 import styles from './queries.css';
 
@@ -96,32 +96,48 @@ export default class InputQuery extends Component {
     }
 
     if (!results || results.length < 1) return null;
-
     return outputs
       .map((out, index) => ({
         name: out.name,
+        type: out.type,
         value: results[index],
         display: this.renderValue(results[index])
       }))
       .sort((outA, outB) => outA.display.length - outB.display.length)
-      .map((out, index) => (
-        <div key={ index }>
-          <div className={ styles.queryResultName }>
-            { out.name }
-          </div>
+      .map((out, index) => {
+        let input = null;
+        if (out.type === 'address') {
+          input = (
+            <InputAddress
+              className={ styles.queryValue }
+              disabled
+              value={ out.display }
+            />
+          );
+        } else {
+          input = (
+            <Input
+              className={ styles.queryValue }
+              readOnly
+              allowCopy
+              value={ out.display }
+            />
+          );
+        }
 
-          <Input
-            className={ styles.queryValue }
-            readOnly
-            allowCopy
-            value={ out.display }
-          />
-          <br />
-        </div>
-      ));
+        return (
+          <div key={ index }>
+            <div className={ styles.queryResultName }>
+              { out.name }
+            </div>
+            { input }
+          </div>
+        );
+      });
   }
 
   renderInput (input) {
+    const { values } = this.state;
     const { name, type } = input;
     const label = `${name ? `${name}: ` : ''}${type}`;
 
@@ -143,6 +159,7 @@ export default class InputQuery extends Component {
           <InputAddressSelect
             hint={ type }
             label={ label }
+            value={ values[name] }
             required
             onChange={ onChange }
           />
@@ -155,6 +172,7 @@ export default class InputQuery extends Component {
         <Input
           hint={ type }
           label={ label }
+          value={ values[name] }
           required
           onChange={ onChange }
         />

js/src/views/Contract/Queries/queries.css

@@ -56,18 +56,10 @@
 }
 
 .methodResults {
-  display: flex;
-  flex-wrap: wrap;
-  max-width: 24rem;
-  justify-content: space-around;
 }
 
 .methodResults > div {
   padding: 0.25rem 0.5rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex: 1 1 50%;
   box-sizing: border-box;
 
   & > div {

js/src/views/Contract/Queries/queries.js

@@ -19,7 +19,7 @@ import React, { Component, PropTypes } from 'react';
 import { Card, CardTitle, CardText } from 'material-ui/Card';
 
 import InputQuery from './inputQuery';
-import { Container, ContainerTitle, Input } from '../../../ui';
+import { Container, ContainerTitle, Input, InputAddress } from '../../../ui';
 
 import styles from './queries.css';
 
@@ -100,14 +100,14 @@ export default class Queries extends Component {
           <CardText
             className={ styles.methodContent }
           >
-            { this.renderValue(values[fn.name]) }
+            { this.renderValue(values[fn.name], fn.outputs[0].kind.type) }
           </CardText>
         </Card>
       </div>
     );
   }
 
-  renderValue (value) {
+  renderValue (value, type) {
     if (typeof value === 'undefined') {
       return null;
     }
@@ -125,6 +125,16 @@ export default class Queries extends Component {
       valueToDisplay = value.toString();
     }
 
+    if (type === 'address') {
+      return (
+        <InputAddress
+          className={ styles.queryValue }
+          value={ valueToDisplay }
+          disabled
+        />
+      );
+    }
+
     return (
       <Input
         className={ styles.queryValue }

js/src/views/Contracts/contracts.js

@@ -82,6 +82,7 @@ class Contracts extends Component {
     return (
       <ActionbarSort
         key='sortAccounts'
+        id='sortContracts'
         order={ this.state.sortOrder }
         metas={ [
           { key: 'timestamp', label: 'date' }

js/src/views/Signer/components/Account/Account.css

@@ -17,6 +17,9 @@
 .acc {
   text-align: center;
   display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
 }
 
 .acc > * {
@@ -35,10 +38,13 @@
 }
 
 .name {
-  text-overflow: ellipsis;
-  overflow: hidden;
   white-space: nowrap;
-  display: lock;
+  display: block;
   vertical-align: middle;
   text-transform: uppercase;
+
+  span {
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
 }

js/src/views/Signer/components/TransactionFinished/TransactionFinished.css

@@ -38,7 +38,9 @@
 }
 
 .transactionDetails {
-  margin-right: 321px;
+  padding-right: 321px;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .isConfirmed {

js/src/views/Signer/components/TransactionPending/TransactionPending.css

@@ -19,7 +19,9 @@
 }
 
 .transactionDetails {
-  margin-right: 321px;
+  padding-right: 321px;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .mainContainer {

js/src/views/Signer/containers/Embedded/embedded.css

@@ -15,6 +15,7 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 .signer {
+  width: 916px;
 }
 
 .pending {