Merge branch 'master' into ng-webpack-update

.gitlab-ci.yml

@@ -468,6 +468,21 @@ test-rust-stable:
   tags:
     - rust
     - rust-stable
+js-test:
+  stage: test
+  image: ethcore/rust:stable
+  before_script:
+    - git submodule update --init --recursive
+    - export JS_FILES_MODIFIED=$(git --no-pager diff --name-only $CI_BUILD_REF^ $CI_BUILD_REF | grep \.js | wc -l)
+    - echo $JS_FILES_MODIFIED
+    - if [ "$JS_FILES_MODIFIED" = 0 ]; then echo "skip js test"; else ./js/scripts/install-deps.sh;fi
+  script:
+    - export RUST_BACKTRACE=1
+    - echo $JS_FILES_MODIFIED
+    - if [ "$JS_FILES_MODIFIED" = 0 ]; then echo "skip js test"; else echo "skip rust test"&./js/scripts/lint.sh&./js/scripts/test.sh&./js/scripts/build.sh; fi
+  tags:
+    - rust
+    - rust-stable
 test-rust-beta:
   stage: test
   only:
@@ -475,13 +490,10 @@ test-rust-beta:
   image: ethcore/rust:beta
   before_script:
     - git submodule update --init --recursive
-    - export JS_FILES_MODIFIED=$(git --no-pager diff --name-only $CI_BUILD_REF^ $CI_BUILD_REF | grep \.js | wc -l)
-    - echo $JS_FILES_MODIFIED
-    - if [ "$JS_FILES_MODIFIED" = 0  ]; then echo "skip js test"; else ./js/scripts/install-deps.sh;fi
   script:
     - export RUST_BACKTRACE=1
     - echo $JS_FILES_MODIFIED
-    - if [ "$JS_FILES_MODIFIED" = 0 ]; then echo "skip js test"&./test.sh $CARGOFLAGS --no-release; else echo "skip rust test"&./js/scripts/lint.sh&./js/scripts/test.sh&./js/scripts/build.sh; fi
+    - ./test.sh $CARGOFLAGS --no-release
   tags:
     - rust
     - rust-beta
@@ -493,13 +505,9 @@ test-rust-nightly:
   image: ethcore/rust:nightly
   before_script:
     - git submodule update --init --recursive
-    - export JS_FILES_MODIFIED=$(git --no-pager diff --name-only $CI_BUILD_REF^ $CI_BUILD_REF | grep \.js | wc -l)
-    - echo $JS_FILES_MODIFIED
-    - if [ "$JS_FILES_MODIFIED" = 0  ]; then echo "skip js test"; else ./js/scripts/install-deps.sh;fi
   script:
     - export RUST_BACKTRACE=1
-    - echo $JS_FILES_MODIFIED
-    - if [ "$JS_FILES_MODIFIED" = 0 ]; then echo "skip js test"&./test.sh $CARGOFLAGS --no-release; else echo "skip rust test"&./js/scripts/lint.sh&./js/scripts/test.sh&./js/scripts/build.sh; fi
+    - ./test.sh $CARGOFLAGS --no-release
   tags:
     - rust
     - rust-nightly
@@ -517,6 +525,6 @@ js-release:
     - if [ "$JS_FILES_MODIFIED" = 0  ]; then echo "skip js build"; else ./js/scripts/install-deps.sh;fi
   script:
     - echo $JS_FILES_MODIFIED
-    - if [ "$JS_FILES_MODIFIED" = 0 ]; then echo "skip js build"; else ./js/scripts/build.sh&./js/scripts/release.sh; fi
+    - if [ "$JS_FILES_MODIFIED" = 0 ]; then echo "skip js build"; else ./js/scripts/build.sh&&./js/scripts/release.sh; fi
   tags:
     - javascript

ethcore/res/ethereum/tests

@@ -1 +1 @@
-Subproject commit e8f4624b7f1a15c63674eecf577c7ab76c3b16be
+Subproject commit d509c75936ec6cbba683ee1916aa0bca436bc376

js/src/modals/CreateAccount/RecoveryPhrase/recoveryPhrase.js

@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import { Checkbox } from 'material-ui';
 
 import { Form, Input } from '../../../ui';
 
@@ -37,6 +38,7 @@ export default class RecoveryPhrase extends Component {
     password1Error: ERRORS.invalidPassword,
     password2: '',
     password2Error: ERRORS.noMatchPassword,
+    windowsPhrase: false,
     isValidPass: false,
     isValidName: false,
     isValidPhrase: false
@@ -47,7 +49,7 @@ export default class RecoveryPhrase extends Component {
   }
 
   render () {
-    const { accountName, accountNameError, passwordHint, password1, password1Error, password2, password2Error, recoveryPhrase } = this.state;
+    const { accountName, accountNameError, passwordHint, password1, password1Error, password2, password2Error, recoveryPhrase, windowsPhrase } = this.state;
 
     return (
       <Form>
@@ -86,20 +88,26 @@ export default class RecoveryPhrase extends Component {
               value={ password2 }
               onChange={ this.onEditPassword2 } />
           </div>
+          <Checkbox
+            className={ styles.checkbox }
+            label='Key was created with Parity <1.4.5 on Windows'
+            checked={ windowsPhrase }
+            onCheck={ this.onToggleWindowsPhrase } />
         </div>
       </Form>
     );
   }
 
   updateParent = () => {
-    const { isValidName, isValidPass, isValidPhrase, accountName, passwordHint, password1, recoveryPhrase } = this.state;
+    const { isValidName, isValidPass, isValidPhrase, accountName, passwordHint, password1, recoveryPhrase, windowsPhrase } = this.state;
     const isValid = isValidName && isValidPass && isValidPhrase;
 
     this.props.onChange(isValid, {
       name: accountName,
       passwordHint,
       password: password1,
-      phrase: recoveryPhrase
+      phrase: recoveryPhrase,
+      windowsPhrase
     });
   }
 
@@ -109,6 +117,12 @@ export default class RecoveryPhrase extends Component {
     });
   }
 
+  onToggleWindowsPhrase = (event) => {
+    this.setState({
+      windowsPhrase: !this.state.windowsPhrase
+    }, this.updateParent);
+  }
+
   onEditPhrase = (event) => {
     const recoveryPhrase = event.target.value
       .toLowerCase() // wordlists are lowercase
@@ -116,15 +130,18 @@ export default class RecoveryPhrase extends Component {
       .replace(/\s/g, ' ') // replace any whitespace with single space
       .replace(/ +/g, ' '); // replace multiple spaces with a single space
 
-    const parts = recoveryPhrase.split(' ');
+    const phraseParts = recoveryPhrase
+      .split(' ')
+      .map((part) => part.trim())
+      .filter((part) => part.length);
     let recoveryPhraseError = null;
 
-    if (!recoveryPhrase || recoveryPhrase.length < 25 || parts.length < 8) {
+    if (!recoveryPhrase || recoveryPhrase.length < 25 || phraseParts.length < 8) {
       recoveryPhraseError = ERRORS.noPhrase;
     }
 
     this.setState({
-      recoveryPhrase,
+      recoveryPhrase: phraseParts.join(' '),
       recoveryPhraseError,
       isValidPhrase: !recoveryPhraseError
     }, this.updateParent);

js/src/modals/CreateAccount/createAccount.css

@@ -14,6 +14,7 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
 .spaced {
   line-height: 1.618em;
 }
@@ -67,3 +68,7 @@
 .upload>div {
   margin-right: 0.5em;
 }
+
+.checkbox {
+  margin-top: 2em;
+}

js/src/modals/CreateAccount/createAccount.js

@@ -59,6 +59,7 @@ export default class CreateAccount extends Component {
     passwordHint: null,
     password: null,
     phrase: null,
+    windowsPhrase: false,
     rawKey: null,
     json: null,
     canCreate: false,
@@ -200,7 +201,7 @@ export default class CreateAccount extends Component {
   }
 
   onCreate = () => {
-    const { createType } = this.state;
+    const { createType, windowsPhrase } = this.state;
     const { api } = this.context;
 
     this.setState({
@@ -208,8 +209,16 @@ export default class CreateAccount extends Component {
     });
 
     if (createType === 'fromNew' || createType === 'fromPhrase') {
+      let phrase = this.state.phrase;
+      if (createType === 'fromPhrase' && windowsPhrase) {
+        phrase = phrase
+          .split(' ') // get the words
+          .map((word) => word === 'misjudged' ? word : `${word}\r`) // add \r after each (except last in dict)
+          .join(' '); // re-create string
+      }
+
       return api.parity
-        .newAccountFromPhrase(this.state.phrase, this.state.password)
+        .newAccountFromPhrase(phrase, this.state.password)
         .then((address) => {
           this.setState({ address });
           return api.parity
@@ -326,7 +335,7 @@ export default class CreateAccount extends Component {
     });
   }
 
-  onChangeDetails = (canCreate, { name, passwordHint, address, password, phrase, rawKey }) => {
+  onChangeDetails = (canCreate, { name, passwordHint, address, password, phrase, rawKey, windowsPhrase }) => {
     this.setState({
       canCreate,
       name,
@@ -334,6 +343,7 @@ export default class CreateAccount extends Component {
       address,
       password,
       phrase,
+      windowsPhrase: windowsPhrase || false,
       rawKey
     });
   }

js/src/redux/providers/index.js

@@ -27,3 +27,4 @@ export signerReducer from './signerReducer';
 export statusReducer from './statusReducer';
 export blockchainReducer from './blockchainReducer';
 export compilerReducer from './compilerReducer';
+export snackbarReducer from './snackbarReducer';

js/src/redux/providers/snackbarActions.js

@@ -0,0 +1,34 @@
+// Copyright 2015, 2016 Ethcore (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 function showSnackbar (message, cooldown) {
+  return (dispatch, getState) => {
+    dispatch(openSnackbar(message, cooldown));
+  };
+}
+
+function openSnackbar (message, cooldown) {
+  return {
+    type: 'openSnackbar',
+    message, cooldown
+  };
+}
+
+export function closeSnackbar () {
+  return {
+    type: 'closeSnackbar'
+  };
+}

js/src/redux/providers/snackbarReducer.js

@@ -0,0 +1,44 @@
+// Copyright 2015, 2016 Ethcore (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 { handleActions } from 'redux-actions';
+
+const initialState = {
+  open: false,
+  message: '',
+  cooldown: 1000
+};
+
+export default handleActions({
+  openSnackbar (state, action) {
+    const { message, cooldown } = action;
+
+    return {
+      ...state,
+      open: true,
+      cooldown: cooldown || state.cooldown,
+      message
+    };
+  },
+
+  closeSnackbar (state) {
+    return {
+      ...state,
+      open: false,
+      cooldown: initialState.cooldown
+    };
+  }
+}, initialState);

js/src/redux/reducers.js

@@ -17,7 +17,7 @@
 import { combineReducers } from 'redux';
 import { routerReducer } from 'react-router-redux';
 
-import { apiReducer, balancesReducer, blockchainReducer, compilerReducer, imagesReducer, personalReducer, signerReducer, statusReducer as nodeStatusReducer } from './providers';
+import { apiReducer, balancesReducer, blockchainReducer, compilerReducer, imagesReducer, personalReducer, signerReducer, statusReducer as nodeStatusReducer, snackbarReducer } from './providers';
 
 import errorReducer from '../ui/Errors/reducers';
 import settingsReducer from '../views/Settings/reducers';
@@ -37,6 +37,7 @@ export default function () {
     images: imagesReducer,
     nodeStatus: nodeStatusReducer,
     personal: personalReducer,
-    signer: signerReducer
+    signer: signerReducer,
+    snackbar: snackbarReducer
   });
 }

js/src/ui/CopyToClipboard/copyToClipboard.js

@@ -15,19 +15,25 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
 import { IconButton } from 'material-ui';
-import Snackbar from 'material-ui/Snackbar';
 import Clipboard from 'react-copy-to-clipboard';
 import CopyIcon from 'material-ui/svg-icons/content/content-copy';
 import Theme from '../Theme';
-import { darkBlack } from 'material-ui/styles/colors';
+
+import { showSnackbar } from '../../redux/providers/snackbarActions';
+
 const { textColor, disabledTextColor } = Theme.flatButton;
 
 import styles from './copyToClipboard.css';
 
-export default class CopyToClipboard extends Component {
+class CopyToClipboard extends Component {
   static propTypes = {
+    showSnackbar: PropTypes.func.isRequired,
     data: PropTypes.string.isRequired,
+
     onCopy: PropTypes.func,
     size: PropTypes.number, // in px
     cooldown: PropTypes.number // in ms
@@ -42,11 +48,12 @@ export default class CopyToClipboard extends Component {
 
   state = {
     copied: false,
-    timeout: null
+    timeoutId: null
   };
 
   componentWillUnmount () {
     const { timeoutId } = this.state;
+
     if (timeoutId) {
       window.clearTimeout(timeoutId);
     }
@@ -59,14 +66,6 @@ export default class CopyToClipboard extends Component {
     return (
       <Clipboard onCopy={ this.onCopy } text={ data }>
         <div className={ styles.wrapper }>
-          <Snackbar
-            open={ copied }
-            message={
-              <div>copied <code className={ styles.data }>{ data }</code> to clipboard</div>
-            }
-            autoHideDuration={ 2000 }
-            bodyStyle={ { backgroundColor: darkBlack } }
-          />
           <IconButton
             disableTouchRipple
             style={ { width: size, height: size, padding: '0' } }
@@ -80,14 +79,28 @@ export default class CopyToClipboard extends Component {
   }
 
   onCopy = () => {
-    const { cooldown, onCopy } = this.props;
+    const { data, onCopy, cooldown, showSnackbar } = this.props;
+    const message = (<div>copied <code className={ styles.data }>{ data }</code> to clipboard</div>);
 
     this.setState({
       copied: true,
-      timeout: setTimeout(() => {
-        this.setState({ copied: false, timeout: null });
+      timeoutId: setTimeout(() => {
+        this.setState({ copied: false, timeoutId: null });
       }, cooldown)
     });
+
+    showSnackbar(message, cooldown);
     onCopy();
   }
 }
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({
+    showSnackbar
+  }, dispatch);
+}
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(CopyToClipboard);

js/src/views/Application/Snackbar/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (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 './snackbar';

js/src/views/Application/Snackbar/snackbar.js

@@ -0,0 +1,68 @@
+// Copyright 2015, 2016 Ethcore (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, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import { Snackbar as SnackbarMUI } from 'material-ui';
+import { darkBlack } from 'material-ui/styles/colors';
+
+import { closeSnackbar } from '../../../redux/providers/snackbarActions';
+
+class Snackbar extends Component {
+  static propTypes = {
+    closeSnackbar: PropTypes.func.isRequired,
+
+    open: PropTypes.bool,
+    cooldown: PropTypes.number,
+    message: PropTypes.any
+  };
+
+  render () {
+    const { open, message, cooldown } = this.props;
+
+    return (
+      <SnackbarMUI
+        open={ open }
+        message={ message }
+        autoHideDuration={ cooldown }
+        bodyStyle={ { backgroundColor: darkBlack } }
+        onRequestClose={ this.handleClose }
+      />
+    );
+  }
+
+  handleClose = () => {
+    this.props.closeSnackbar();
+  }
+}
+
+function mapStateToProps (state) {
+  const { open, message, cooldown } = state.snackbar;
+  return { open, message, cooldown };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({
+    closeSnackbar
+  }, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Snackbar);

js/src/views/Application/application.js

@@ -17,21 +17,24 @@
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import { observer } from 'mobx-react';
 
 import Connection from '../Connection';
 import ParityBar from '../ParityBar';
 
+import Snackbar from './Snackbar';
 import Container from './Container';
 import DappContainer from './DappContainer';
 import FrameError from './FrameError';
 import Status from './Status';
+import Store from './store';
 import TabBar from './TabBar';
 
 import styles from './application.css';
 
 const inFrame = window.parent !== window && window.parent.frames.length !== 0;
-const showFirstRun = window.localStorage.getItem('showFirstRun') === '1';
 
+@observer
 class Application extends Component {
   static contextTypes = {
     api: PropTypes.object.isRequired,
@@ -46,13 +49,7 @@ class Application extends Component {
     blockNumber: PropTypes.object
   }
 
-  state = {
-    showFirstRun: false
-  }
-
-  componentWillMount () {
-    this.checkAccounts();
-  }
+  store = new Store(this.context.api);
 
   render () {
     const [root] = (window.location.hash || '').replace('#/', '').split('/');
@@ -75,18 +72,18 @@ class Application extends Component {
 
   renderApp () {
     const { children, pending, netChain, isTest, blockNumber } = this.props;
-    const { showFirstRun } = this.state;
 
     return (
       <Container
-        showFirstRun={ showFirstRun }
-        onCloseFirstRun={ this.onCloseFirstRun }>
+        showFirstRun={ this.store.firstrunVisible }
+        onCloseFirstRun={ this.store.closeFirstrun }>
         <TabBar
           netChain={ netChain }
           isTest={ isTest }
           pending={ pending } />
         { children }
         { blockNumber ? (<Status />) : null }
+        <Snackbar />
       </Container>
     );
   }
@@ -100,28 +97,6 @@ class Application extends Component {
       </DappContainer>
     );
   }
-
-  checkAccounts () {
-    const { api } = this.context;
-
-    api.eth
-      .accounts()
-      .then((accounts) => {
-        this.setState({
-          showFirstRun: showFirstRun || accounts.length === 0
-        });
-      })
-      .catch((error) => {
-        console.error('checkAccounts', error);
-      });
-  }
-
-  onCloseFirstRun = () => {
-    window.localStorage.setItem('showFirstRun', '0');
-    this.setState({
-      showFirstRun: false
-    });
-  }
 }
 
 function mapStateToProps (state) {

js/src/views/Application/store.js

@@ -0,0 +1,51 @@
+// Copyright 2015, 2016 Ethcore (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 { action, observable } from 'mobx';
+
+const showFirstRun = window.localStorage.getItem('showFirstRun') !== '0';
+
+export default class Store {
+  @observable firstrunVisible = showFirstRun;
+
+  constructor (api) {
+    this._api = api;
+
+    this._checkAccounts();
+  }
+
+  @action closeFirstrun = () => {
+    this.toggleFirstrun(false);
+  }
+
+  @action toggleFirstrun = (visible = false) => {
+    this.firstrunVisible = visible;
+    window.localStorage.setItem('showFirstRun', visible ? '1' : '0');
+  }
+
+  _checkAccounts () {
+    this._api.parity
+      .accountsInfo()
+      .then((info) => {
+        const accounts = Object.keys(info).filter((address) => info[address].uuid);
+
+        this.toggleFirstrun(this.firstrunVisible || !accounts || !accounts.length);
+      })
+      .catch((error) => {
+        console.error('checkAccounts', error);
+      });
+  }
+}

js/src/views/ParityBar/parityBar.css

@@ -14,6 +14,7 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
 .bar, .expanded {
   position: fixed;
   bottom: 0;
@@ -42,8 +43,7 @@
 
 .expanded {
   right: 16px;
-  width: 964px;
-  height: 300px;
+  max-height: 300px;
   border-radius: 4px 4px 0 0;
   overflow-y: auto;
   display: flex;

js/src/views/Signer/_layout.css

@@ -0,0 +1,24 @@
+/* Copyright 2015, 2016 Ethcore (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/>.
+*/
+
+$pendingHeight: 190px;
+$finishedHeight: 120px;
+
+$embedWidth: 920px;
+$statusWidth: 260px;
+
+$accountPadding: 75px;

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

@@ -14,31 +14,35 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
+@import '../../_layout.css';
+
 .container {
-  position: relative;
-  padding: 25px 0 15px;
+  display: flex;
+  padding: 1.5em 0 1em;
 }
 
 .actions, .signDetails {
-  display: inline-block;
   vertical-align: middle;
-  min-height: 120px;
+  min-height: $pendingHeight;
 }
 
 .signDetails {
-  border-right: 1px solid #eee;
-  margin-right: 2rem;
-  /* TODO [todr] mess - just to align with transaction */
-  width:  430px;
+  flex: 1;
 }
 
 .address, .info {
+  box-sizing: border-box;
   display: inline-block;
+  width: 50%;
+}
+
+.address {
+  padding-right: $accountPadding;
 }
 
 .info {
   padding: 0 30px;
-  width: 250px;
   color: #E53935;
   vertical-align: top;
 }
@@ -63,7 +67,7 @@
 
 .actions {
   display: inline-block;
-  min-height: 120px;
+  min-height: $finishedHeight;
 }
 
 .signDetails img {

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

@@ -15,31 +15,26 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+@import '../../_layout.css';
+
 .container {
-  padding: 25px 0 15px;
-}
+  display: flex;
+  padding: 1.5em 0 1em;
 
-.mainContainer {
-  position: relative;
-}
-
-.mainContainer > * {
-  vertical-align: middle;
-  min-height: 120px;
+  & > * {
+    vertical-align: middle;
+    min-height: $finishedHeight;
+  }
 }
 
 .statusContainer {
-  width: 220px;
-  padding: 0 40px 0 40px;
-  /*border-left: 1px solid #aaa;*/
-  position: absolute;
-  top: 0;
-  right: 0;
-  box-sizing: content-box;
+  box-sizing: border-box;
+  float: right;
+  padding: 0 1em;
+  flex: 0 0 $statusWidth;
 }
 
 .transactionDetails {
-  padding-right: 321px;
   width: 100%;
   box-sizing: border-box;
 }

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

@@ -63,22 +63,20 @@ export default class TransactionFinished extends Component {
 
     return (
       <div className={ `${styles.container} ${className || ''}` }>
-        <div className={ styles.mainContainer }>
-          <TransactionMainDetails
-            { ...this.props }
-            { ...this.state }
-            fromBalance={ fromBalance }
-            toBalance={ toBalance }
-            className={ styles.transactionDetails }
-          >
-            <TransactionSecondaryDetails
-              id={ id }
-              date={ date }
-            />
-          </TransactionMainDetails>
-          <div className={ styles.statusContainer }>
-            { this.renderStatus() }
-          </div>
+        <TransactionMainDetails
+          { ...this.props }
+          { ...this.state }
+          fromBalance={ fromBalance }
+          toBalance={ toBalance }
+          className={ styles.transactionDetails }
+        >
+          <TransactionSecondaryDetails
+            id={ id }
+            date={ date }
+          />
+        </TransactionMainDetails>
+        <div className={ styles.statusContainer }>
+          { this.renderStatus() }
         </div>
       </div>
     );

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

@@ -14,7 +14,11 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
+@import '../../_layout.css';
+
 .transaction {
+  flex: 1;
 }
 
 .transaction > * {
@@ -30,11 +34,11 @@
 }
 
 .from .account {
-  padding-right: 75px;
+  padding-right: $accountPadding;
 }
 
 .to .account {
-  padding-left: 75px;
+  padding-left: $accountPadding;
 }
 
 .from img, .to img {

js/src/views/Signer/components/TransactionMainDetails/TransactionMainDetails.js

@@ -33,7 +33,6 @@ export default class TransactionMainDetails extends Component {
     isTest: PropTypes.bool.isRequired,
     to: PropTypes.string, // undefined if it's a contract
     toBalance: PropTypes.object, // eth BigNumber - undefined if it's a contract or until it's fetched
-    className: PropTypes.string,
     children: PropTypes.node
   };
 
@@ -60,23 +59,15 @@ export default class TransactionMainDetails extends Component {
   }
 
   render () {
-    const { className, children } = this.props;
+    const { to } = this.props;
 
-    return (
-      <div className={ className }>
-        { this.renderTransfer() }
-        { this.renderContract() }
-        { children }
-      </div>
-    );
+    return to
+      ? this.renderTransfer()
+      : this.renderContract();
   }
 
   renderTransfer () {
-    const { from, fromBalance, to, toBalance, isTest } = this.props;
-
-    if (!to) {
-      return;
-    }
+    const { children, from, fromBalance, to, toBalance, isTest } = this.props;
 
     return (
       <div className={ styles.transaction }>
@@ -101,16 +92,13 @@ export default class TransactionMainDetails extends Component {
               isTest={ isTest } />
           </div>
         </div>
+        { children }
       </div>
     );
   }
 
   renderContract () {
-    const { from, fromBalance, to, isTest } = this.props;
-
-    if (to) {
-      return;
-    }
+    const { children, from, fromBalance, isTest } = this.props;
 
     return (
       <div className={ styles.transaction }>
@@ -134,6 +122,7 @@ export default class TransactionMainDetails extends Component {
             Contract
           </div>
         </div>
+        { children }
       </div>
     );
   }

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

@@ -14,33 +14,14 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
+@import '../../_layout.css';
+
 .container {
-  padding: 25px 0 15px;
-}
+  display: flex;
+  padding: 1.5em 0 1em;
 
-.transactionDetails {
-  padding-right: 321px;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.mainContainer {
-  position: relative;
-}
-
-.mainContainer:after {
-  clear: both;
-}
-
-.mainContainer > * {
-  vertical-align: middle;
-  min-height: 190px;
-}
-
-.inputs {
-  margin-right: 30px;
-  margin-left: 30px;
-  width: 180px;
-  position: relative;
-  top: -15px; /* due to material ui weird styling */
+  & > * {
+    vertical-align: middle;
+  }
 }

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

@@ -70,29 +70,27 @@ export default class TransactionPending extends Component {
 
     return (
       <div className={ `${styles.container} ${className || ''}` }>
-        <div className={ styles.mainContainer }>
-          <TransactionMainDetails
-            { ...this.props }
-            { ...this.state }
-            fromBalance={ fromBalance }
-            toBalance={ toBalance }
-            className={ styles.transactionDetails }
-            totalValue={ totalValue }>
-            <TransactionSecondaryDetails
-              id={ id }
-              date={ date }
-              data={ data }
-              gasPriceEthmDisplay={ gasPriceEthmDisplay }
-              gasToDisplay={ gasToDisplay }
-            />
-          </TransactionMainDetails>
-          <TransactionPendingForm
-            address={ from }
-            isSending={ this.props.isSending }
-            onConfirm={ this.onConfirm }
-            onReject={ this.onReject }
+        <TransactionMainDetails
+          { ...this.props }
+          { ...this.state }
+          fromBalance={ fromBalance }
+          toBalance={ toBalance }
+          className={ styles.transactionDetails }
+          totalValue={ totalValue }>
+          <TransactionSecondaryDetails
+            id={ id }
+            date={ date }
+            data={ data }
+            gasPriceEthmDisplay={ gasPriceEthmDisplay }
+            gasToDisplay={ gasToDisplay }
           />
-        </div>
+        </TransactionMainDetails>
+        <TransactionPendingForm
+          address={ from }
+          isSending={ this.props.isSending }
+          onConfirm={ this.onConfirm }
+          onReject={ this.onReject }
+        />
       </div>
     );
   }

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

@@ -14,14 +14,13 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
+@import '../../_layout.css';
+
 .container {
-  width: 220px;
-  padding: 20px 40px 0 40px;
-  /*border-left: 1px solid #aaa;*/
-  position: absolute;
-  top: 0;
-  right: 0;
-  box-sizing: content-box;
+  box-sizing: border-box;
+  padding: 1em 1em 0 1em;
+  flex: 0 0 $statusWidth;
 }
 
 .rejectToggle {

js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormConfirm/TransactionPendingFormConfirm.css

@@ -15,7 +15,7 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 .confirmForm {
-  margin-top: -45px;
+  margin-top: -2em;
 }
 
 .confirmButton {

js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormReject/TransactionPendingFormReject.css

@@ -14,6 +14,7 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
 /* the rejection button itself, once .reject has been pressed */
 .rejectButton {
   display: block !important;

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

@@ -1,3 +1,24 @@
+/* Copyright 2015, 2016 Ethcore (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/>.
+*/
+
+.container {
+  display: block;
+}
+
 .iconsContainer {
   display: block;
   text-align: center;
@@ -67,4 +88,3 @@
 .expandedContainer:empty {
   padding: 0;
 }
-

js/src/views/Signer/components/TransactionSecondaryDetails/TransactionSecondaryDetails.js

@@ -27,7 +27,6 @@ import styles from './TransactionSecondaryDetails.css';
 import * as tUtil from '../util/transaction';
 
 export default class TransactionSecondaryDetails extends Component {
-
   static propTypes = {
     id: PropTypes.object.isRequired,
     date: PropTypes.instanceOf(Date),
@@ -45,7 +44,7 @@ export default class TransactionSecondaryDetails extends Component {
     const className = this.props.className || '';
 
     return (
-      <div className={ className }>
+      <div className={ `${styles.container} ${className}` }>
         <div className={ styles.iconsContainer }>
           { this.renderGasPrice() }
           { this.renderData() }

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

@@ -14,8 +14,13 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
+@import '../../_layout.css';
+
 .signer {
-  width: 916px;
+  box-sizing: border-box;
+  padding: 0;
+  width: $embedWidth;
 }
 
 .pending {

js/src/views/Signer/containers/RequestsPage/RequestsPage.css

@@ -14,6 +14,7 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
 .request {
 }
 

parity/cli/config.full.toml

@@ -66,7 +66,7 @@ reseal_on_txs = "all"
 reseal_min_period = 4000
 work_queue_size = 20
 relay_set = "cheap"
-usd_per_tx = "0"
+usd_per_tx = "0.0025"
 usd_per_eth = "auto"
 price_update_period = "hourly"
 gas_floor_target = "4700000"

parity/cli/mod.rs

@@ -190,7 +190,7 @@ usage! {
 			or |c: &Config| otry!(c.mining).tx_time_limit.clone().map(Some),
 		flag_relay_set: String = "cheap",
 			or |c: &Config| otry!(c.mining).relay_set.clone(),
-		flag_usd_per_tx: String = "0",
+		flag_usd_per_tx: String = "0.0025",
 			or |c: &Config| otry!(c.mining).usd_per_tx.clone(),
 		flag_usd_per_eth: String = "auto",
 			or |c: &Config| otry!(c.mining).usd_per_eth.clone(),
@@ -568,7 +568,7 @@ mod tests {
 			flag_tx_gas_limit: Some("6283184".into()),
 			flag_tx_time_limit: Some(100u64),
 			flag_relay_set: "cheap".into(),
-			flag_usd_per_tx: "0".into(),
+			flag_usd_per_tx: "0.0025".into(),
 			flag_usd_per_eth: "auto".into(),
 			flag_price_update_period: "hourly".into(),
 			flag_gas_floor_target: "4700000".into(),

parity/params.rs

@@ -177,7 +177,7 @@ pub enum GasPricerConfig {
 impl Default for GasPricerConfig {
 	fn default() -> Self {
 		GasPricerConfig::Calibrated {
-			usd_per_tx: 0f32,
+			usd_per_tx: 0.0025f32,
 			recalibration_period: Duration::from_secs(3600),
 		}
 	}