Merge branch 'ui-2' into menu

Cargo.lock

@@ -1781,7 +1781,7 @@ dependencies = [
 [[package]]
 name = "parity-ui-precompiled"
 version = "1.4.0"
-source = "git+https://github.com/paritytech/js-precompiled.git#0826776d9190ee6945bfe481e10b19ec05b3a049"
+source = "git+https://github.com/paritytech/js-precompiled.git#cff0aec1877a4b75f51de3facee9fe439a41a90d"
 dependencies = [
  "parity-dapps-glue 1.7.0 (registry+https://github.com/rust-lang/crates.io-index)",
 ]

js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "parity.js",
-  "version": "1.7.69",
+  "version": "1.7.70",
   "main": "release/index.js",
   "jsnext:main": "src/index.js",
   "author": "Parity Team <admin@parity.io>",
@@ -161,61 +161,33 @@
   "dependencies": {
     "@parity/abi": "file:src/abi",
     "@parity/api": "file:src/api",
+    "@parity/dapps": "file:src/dapps",
     "@parity/jsonrpc": "file:src/jsonrpc",
     "@parity/shared": "file:src/shared",
+    "@parity/shell": "file:src/shell",
     "@parity/ui": "file:src/ui",
+    "@parity/views": "file:src/views",
     "@parity/wordlist": "1.0.1",
-    "base32.js": "0.1.0",
-    "bignumber.js": "3.0.1",
-    "bytes": "2.4.0",
-    "date-difference": "1.0.0",
-    "debounce": "1.0.0",
-    "es6-error": "4.0.0",
     "es6-promise": "4.0.5",
-    "ethereumjs-tx": "1.2.5",
-    "eventemitter3": "2.0.2",
     "flat": "2.0.1",
-    "format-json": "1.0.3",
-    "format-number": "2.0.1",
     "isomorphic-fetch": "2.2.1",
-    "js-sha3": "0.5.5",
     "lodash": "4.17.2",
     "loglevel": "1.4.1",
-    "marked": "0.3.6",
-    "material-ui": "0.16.5",
-    "mobx": "2.6.4",
-    "mobx-react": "4.0.3",
     "moment": "2.17.0",
     "napa": "2.3.0",
-    "phoneformat.js": "1.0.3",
     "promise-worker": "1.1.1",
-    "push.js": "0.0.11",
-    "qs": "6.3.0",
     "react": "15.4.2",
-    "react-addons-css-transition-group": "15.4.2",
     "react-dom": "15.4.2",
-    "react-element-to-jsx-string": "6.0.0",
     "react-intl": "2.1.5",
-    "react-markdown": "2.4.4",
-    "react-redux": "4.4.6",
     "react-router": "3.0.0",
     "react-router-redux": "4.0.7",
     "react-tap-event-plugin": "2.0.1",
     "react-tooltip": "3.2.2",
-    "redux": "3.6.0",
-    "redux-actions": "1.1.0",
-    "redux-thunk": "2.1.0",
-    "rlp": "2.0.0",
-    "scryptsy": "2.0.0",
-    "solc": "ngotchac/solc-js",
     "store": "1.3.20",
     "sw-toolbox": "^3.6.0",
     "u2f-api": "0.0.9",
     "u2f-api-polyfill": "0.4.3",
-    "useragent.js": "0.5.6",
     "utf8": "2.1.2",
-    "valid-url": "1.0.9",
-    "validator": "6.2.0",
     "web3": "0.17.0-beta",
     "whatwg-fetch": "2.0.1",
     "worker-loader": "^0.8.0",

js/src/api/package.json

@@ -30,6 +30,7 @@
     "@parity/jsonrpc": "file:../jsonrpc",
     "bignumber.js": "3.0.1",
     "blockies": "0.0.2",
+    "es6-error": "4.0.0",
     "ethereumjs-tx": "1.2.5",
     "eventemitter3": "2.0.2",
     "js-sha3": "0.5.5",

js/src/dapps/README.md

@@ -0,0 +1 @@
+# Parity builtin dapps

js/src/dapps/package.json

@@ -14,6 +14,9 @@
   "keywords": [],
   "scripts": {},
   "devDependencies": {},
-  "dependencies": {},
+  "dependencies": {
+    "material-ui": "0.16.5",
+    "validator": "6.2.0"
+  },
   "peerDependencies": {}
 }

js/src/dapps/tokenreg/Inputs/validation.js

@@ -14,7 +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/>.
 
-import isURL from 'validator/lib/isURL';
+import validator from 'validator';
 
 import { api } from '../parity';
 
@@ -211,7 +211,7 @@ const validateHex = (string) => {
 };
 
 const validateURL = (string) => {
-  if (!isURL(string.toString())) {
+  if (!validator.isURL(string.toString())) {
     return {
       error: ERRORS.invalidURL,
       valid: false

js/src/shared/README.md

@@ -0,0 +1 @@
+# Parity shared non-ui components

js/src/shared/package.json

@@ -14,6 +14,17 @@
   "keywords": [],
   "scripts": {},
   "devDependencies": {},
-  "dependencies": {},
+  "dependencies": {
+    "mobx": "2.6.4",
+    "mobx-react": "4.0.3",
+    "push.js": "0.0.11",
+    "react-redux": "4.4.6",
+    "redux": "3.6.0",
+    "redux-actions": "1.1.0",
+    "redux-thunk": "2.1.0",
+    "scryptsy": "2.0.0",
+    "solc": "ngotchac/solc-js",
+    "yargs": "4.7.1"
+  },
   "peerDependencies": {}
 }

js/src/shell/README.md

@@ -0,0 +1 @@
+# Parity shell & dapp launcher

js/src/shell/package.json

@@ -14,6 +14,9 @@
   "keywords": [],
   "scripts": {},
   "devDependencies": {},
-  "dependencies": {},
+  "dependencies": {
+    "qs": "6.3.0",
+    "useragent.js": "0.5.6"
+  },
   "peerDependencies": {}
 }

js/src/ui/Actionbar/Export/export.js

@@ -19,10 +19,10 @@ import { FormattedMessage } from 'react-intl';
 
 import FileSaver from 'file-saver';
 
-import Button from '../../Button';
+import Button from '~/ui/Button';
-import { FileDownloadIcon } from '../../Icons';
+import { FileDownloadIcon } from '~/ui/Icons';
 
-class ActionbarExport extends Component {
+export default class ActionbarExport extends Component {
   static propTypes = {
     content: PropTypes.oneOfType([
       PropTypes.string,
@@ -58,5 +58,3 @@ class ActionbarExport extends Component {
     FileSaver.saveAs(blob, `${filename}.json`);
   }
 }
-
-export default ActionbarExport;

js/src/ui/Actionbar/Import/import.js

@@ -19,10 +19,10 @@ import { FormattedMessage } from 'react-intl';
 
 import { nodeOrStringProptype } from '@parity/shared/util/proptypes';
 
-import Button from '../../Button';
+import Button from '~/ui/Button';
-import FileSelect from '../../Form/FileSelect';
+import FileSelect from '~/ui/Form/FileSelect';
-import { CancelIcon, DoneIcon, FileUploadIcon } from '../../Icons';
+import { CancelIcon, DoneIcon, FileUploadIcon } from '~/ui/Icons';
-import Portal from '../../Portal';
+import Portal from '~/ui/Portal';
 
 import styles from './import.css';
 

js/src/ui/Actionbar/Search/search.js

@@ -17,9 +17,9 @@
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import Button from '../../Button';
+import Button from '~/ui/Button';
-import InputChip from '../../Form/InputChip';
+import InputChip from '~/ui/Form/InputChip';
-import { SearchIcon } from '../../Icons';
+import { SearchIcon } from '~/ui/Icons';
 
 import styles from './search.css';
 

js/src/ui/Actionbar/Sort/sort.js

@@ -21,8 +21,8 @@ import { observer } from 'mobx-react';
 import IconMenu from 'material-ui/IconMenu';
 import MenuItem from 'material-ui/MenuItem';
 
-import Button from '../../Button';
+import Button from '~/ui/Button';
-import { SortIcon } from '../../Icons';
+import { SortIcon } from '~/ui/Icons';
 
 import SortStore from './sortStore';
 import styles from './sort.css';

js/src/ui/Badge/badge.css

@@ -14,12 +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/>.
 */
+
 .bubble {
   border-radius: 50%;
-  padding: 3px 5px;
   color: white;
   font-size: 0.7em;
   line-height: 1em;
+  padding: 3px 5px;
 }
 
 .default {

js/src/ui/Badge/badge.js

@@ -18,9 +18,9 @@ import React, { PropTypes } from 'react';
 
 import styles from './badge.css';
 
-export default function Badge ({ className, color, value }) {
+export default function Badge ({ className, color = 'default', value }) {
   return (
-    <div className={ `${styles.bubble} ${styles[color || 'default']} ${className}` }>
+    <div className={ `${styles.bubble} ${styles[color]} ${className}` }>
       { value }
     </div>
   );

js/src/ui/Balance/balance.css

@@ -25,7 +25,7 @@ $textColor: white;
   vertical-align: top;
 
   &:not(.full) {
-    height: 2.5em;
+    height: 40px;
     overflow: hidden;
   }
 }

js/src/ui/CopyToClipboard/copyToClipboard.css

@@ -15,7 +15,8 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-.wrapper {
+.icon {
+  cursor: pointer;
   display: inline-block;
 }
 

js/src/ui/CopyToClipboard/copyToClipboard.js

@@ -14,7 +14,6 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { IconButton } from 'material-ui';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import Clipboard from 'react-copy-to-clipboard';
@@ -23,13 +22,10 @@ import { bindActionCreators } from 'redux';
 
 import { showSnackbar } from '@parity/shared/redux/providers/snackbarActions';
 
-import { CopyIcon } from '../Icons';
+import { CopyIcon } from '~/ui/Icons';
-import Theme from '../Theme';
 
 import styles from './copyToClipboard.css';
 
-const { textColor, disabledTextColor } = Theme.flatButton;
-
 class CopyToClipboard extends Component {
   static propTypes = {
     showSnackbar: PropTypes.func.isRequired,
@@ -62,7 +58,6 @@ class CopyToClipboard extends Component {
 
   render () {
     const { data, size } = this.props;
-    const { copied } = this.state;
 
     return (
       <Clipboard
@@ -70,29 +65,14 @@ class CopyToClipboard extends Component {
         text={ data }
       >
         <div
-          className={ styles.wrapper }
+          className={ styles.icon }
           onClick={ this.onClick }
+          style={ {
+            height: size,
+            width: size
+          } }
         >
-          <IconButton
+          <CopyIcon />
-            disableTouchRipple
-            iconStyle={ {
-              height: size,
-              width: size
-            } }
-            style={ {
-              height: size,
-              padding: '0',
-              width: size
-            } }
-          >
-            <CopyIcon
-              color={
-                copied
-                  ? disabledTextColor
-                  : textColor
-              }
-            />
-          </IconButton>
         </div>
       </Clipboard>
     );

js/src/ui/Editor/editor.js

@@ -14,14 +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 React, { PropTypes, Component } from 'react';
-
 import 'brace';
+import 'brace/theme/solarized_dark';
+import 'brace/mode/json';
+
+import React, { PropTypes, Component } from 'react';
 import AceEditor from 'react-ace';
 import { noop } from 'lodash';
 
-import 'brace/theme/solarized_dark';
-import 'brace/mode/json';
 import './mode-solidity';
 
 export default class Editor extends Component {

js/src/ui/Errors/errors.js

@@ -18,6 +18,7 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+
 import { Snackbar } from '~/ui/Snackbar';
 
 import { closeErrors } from './actions';

js/src/ui/Icons/index.js

@@ -17,62 +17,62 @@
 import React from 'react';
 import { Icon } from 'semantic-ui-react';
 
-export const AccountsIcon = () => <Icon name='university' />;
+export const AccountsIcon = (props) => <Icon name='university' { ...props } />;
-export const AddIcon = () => <Icon name='plus' />;
+export const AddIcon = (props) => <Icon name='plus' { ...props } />;
-export const AddressIcon = () => <Icon name='address book outline' />;
+export const AddressIcon = (props) => <Icon name='address book outline' { ...props } />;
-export const AppsIcon = () => <Icon name='sitemap' />;
+export const AppsIcon = (props) => <Icon name='sitemap' { ...props } />;
-export const AttachFileIcon = () => <Icon name='attach' />;
+export const AttachFileIcon = (props) => <Icon name='attach' { ...props } />;
-export const BackgroundIcon = () => <Icon name='image' />;
+export const BackgroundIcon = (props) => <Icon name='image' { ...props } />;
-export const CancelIcon = () => <Icon name='cancel' />;
+export const CancelIcon = (props) => <Icon name='cancel' { ...props } />;
-export const CheckIcon = () => <Icon name='check' />;
+export const CheckIcon = (props) => <Icon name='check' { ...props } />;
-export const CloseIcon = () => <Icon name='close' />;
+export const CloseIcon = (props) => <Icon name='close' { ...props } />;
-export const CompareIcon = () => <Icon name='exchange' />;
+export const CompareIcon = (props) => <Icon name='exchange' { ...props } />;
-export const ComputerIcon = () => <Icon name='desktop' />;
+export const ComputerIcon = (props) => <Icon name='desktop' { ...props } />;
-export const ContractIcon = () => <Icon name='code' />;
+export const ContractIcon = (props) => <Icon name='code' { ...props } />;
-export const CopyIcon = () => <Icon name='copy' />;
+export const CopyIcon = (props) => <Icon name='copy' { ...props } />;
-export const DashboardIcon = () => <Icon name='cubes' />;
+export const DashboardIcon = (props) => <Icon name='cubes' { ...props } />;
 export const DoneIcon = CheckIcon;
-export const DeleteIcon = () => <Icon name='trash' />;
+export const DeleteIcon = (props) => <Icon name='trash' { ...props } />;
-export const DevelopIcon = () => <Icon name='connectdevelop' />;
+export const DevelopIcon = (props) => <Icon name='connectdevelop' { ...props } />;
-export const DialIcon = () => <Icon name='text telephone' />;
+export const DialIcon = (props) => <Icon name='text telephone' { ...props } />;
-export const EditIcon = () => <Icon name='edit' />;
+export const EditIcon = (props) => <Icon name='edit' { ...props } />;
-export const ErrorIcon = () => <Icon name='exclamation circle' />;
+export const ErrorIcon = (props) => <Icon name='exclamation circle' { ...props } />;
-export const EthernetIcon = () => <Icon name='wifi' />;
+export const EthernetIcon = (props) => <Icon name='wifi' { ...props } />;
-export const FileIcon = () => <Icon name='file outline' />;
+export const FileIcon = (props) => <Icon name='file outline' { ...props } />;
-export const FileDownloadIcon = () => <Icon name='download' />;
+export const FileDownloadIcon = (props) => <Icon name='download' { ...props } />;
-export const FileUploadIcon = () => <Icon name='upload' />;
+export const FileUploadIcon = (props) => <Icon name='upload' { ...props } />;
-export const FingerprintIcon = () => <Icon name='target' />;
+export const FingerprintIcon = (props) => <Icon name='target' { ...props } />;
-export const GasIcon = () => <Icon name='settings' />;
+export const GasIcon = (props) => <Icon name='settings' { ...props } />;
-export const GotoIcon = () => <Icon name='arrow circle right' />;
+export const GotoIcon = (props) => <Icon name='arrow circle right' { ...props } />;
-export const InfoIcon = () => <Icon name='info circle' />;
+export const InfoIcon = (props) => <Icon name='info circle' { ...props } />;
-export const KeyIcon = () => <Icon name='key' />;
+export const KeyIcon = (props) => <Icon name='key' { ...props } />;
-export const KeyboardIcon = () => <Icon name='keyboard' />;
+export const KeyboardIcon = (props) => <Icon name='keyboard' { ...props } />;
-export const LinkIcon = () => <Icon name='linkify' />;
+export const LinkIcon = (props) => <Icon name='linkify' { ...props } />;
-export const ListIcon = () => <Icon name='list ul' />;
+export const ListIcon = (props) => <Icon name='list ul' { ...props } />;
-export const LockedIcon = () => <Icon name='unlock alternate' />;
+export const LockedIcon = (props) => <Icon name='unlock alternate' { ...props } />;
-export const MembershipIcon = () => <Icon name='id card outline' />;
+export const MembershipIcon = (props) => <Icon name='id card outline' { ...props } />;
-export const MoveIcon = () => <Icon name='move' />;
+export const MoveIcon = (props) => <Icon name='move' { ...props } />;
-export const NextIcon = () => <Icon name='chevron right' />;
+export const NextIcon = (props) => <Icon name='chevron right' { ...props } />;
-export const PauseIcon = () => <Icon name='pause' />;
+export const PauseIcon = (props) => <Icon name='pause' { ...props } />;
-export const PlayIcon = () => <Icon name='play' />;
+export const PlayIcon = (props) => <Icon name='play' { ...props } />;
-export const PrevIcon = () => <Icon name='chevron left' />;
+export const PrevIcon = (props) => <Icon name='chevron left' { ...props } />;
-export const PrintIcon = () => <Icon name='print' />;
+export const PrintIcon = (props) => <Icon name='print' { ...props } />;
-export const QrIcon = () => <Icon name='qrcode' />;
+export const QrIcon = (props) => <Icon name='qrcode' { ...props } />;
-export const RefreshIcon = () => <Icon name='refresh' />;
+export const RefreshIcon = (props) => <Icon name='refresh' { ...props } />;
-export const RemoveIcon = () => <Icon name='remove' />;
+export const RemoveIcon = (props) => <Icon name='remove' { ...props } />;
-export const ReorderIcon = () => <Icon name='align justify' />;
+export const ReorderIcon = (props) => <Icon name='align justify' { ...props } />;
-export const ReplayIcon = () => <Icon name='retweet' />;
+export const ReplayIcon = (props) => <Icon name='retweet' { ...props } />;
-export const SaveIcon = () => <Icon name='save' />;
+export const SaveIcon = (props) => <Icon name='save' { ...props } />;
-export const SearchIcon = () => <Icon name='search' />;
+export const SearchIcon = (props) => <Icon name='search' { ...props } />;
-export const SendIcon = () => <Icon name='send' />;
+export const SendIcon = (props) => <Icon name='send' { ...props } />;
-export const SettingsIcon = () => <Icon name='settings' />;
+export const SettingsIcon = (props) => <Icon name='settings' { ...props } />;
-export const SnoozeIcon = () => <Icon name='clock' />;
+export const SnoozeIcon = (props) => <Icon name='clock' { ...props } />;
-export const SortIcon = () => <Icon name='filter' />;
+export const SortIcon = (props) => <Icon name='filter' { ...props } />;
-export const StarIcon = () => <Icon name='star' />;
+export const StarIcon = (props) => <Icon name='star' { ...props } />;
-export const StatusIcon = () => <Icon name='signal' />;
+export const StatusIcon = (props) => <Icon name='signal' { ...props } />;
-export const UnlockedIcon = () => <Icon name='unlock' />;
+export const UnlockedIcon = (props) => <Icon name='unlock' { ...props } />;
-export const UpdateIcon = () => <Icon name='cloud download' />;
+export const UpdateIcon = (props) => <Icon name='cloud download' { ...props } />;
-export const UpdateWaitIcon = () => <Icon name='wait' />;
+export const UpdateWaitIcon = (props) => <Icon name='wait' { ...props } />;
-export const VisibleIcon = () => <Icon name='eye' />;
+export const VisibleIcon = (props) => <Icon name='eye' { ...props } />;
-export const VerifyIcon = () => <Icon name='shield' />;
+export const VerifyIcon = (props) => <Icon name='shield' { ...props } />;
-export const VpnIcon = () => <Icon name='world' />;
+export const VpnIcon = (props) => <Icon name='world' { ...props } />;

js/src/ui/IdentityName/identityName.js

@@ -20,7 +20,7 @@ import { connect } from 'react-redux';
 
 import { isNullAddress } from '@parity/shared/util/validation';
 
-import ShortenedHash from '../ShortenedHash';
+import ShortenedHash from '~/ui/ShortenedHash';
 
 const defaultName = (
   <FormattedMessage

js/src/ui/ModalBox/modalBox.css

@@ -34,16 +34,12 @@
   }
 
   .icon {
-    align-items: center;
     background: rgb(167, 151, 0);
     border-radius: 50%;
-    display: flex;
-    flex: 0 0 5em;
-    flex-direction: column;
     height: 5em;
-    justify-content: center;
     margin-right: 1.5em;
     padding: 0.75em;
+    text-align: center;
     width: 5em;
 
     img {
@@ -51,12 +47,10 @@
       padding: 0;
     }
 
-    svg {
+    i {
-      fill: white !important;
+      color: white;
-      font-size: 3.5em !important;
+      font-size: 3.5rem;
-      height: 3.5em !important;
+      margin: 0.75rem -0.125rem;
-      margin: 0 !important;
-      width: 3.5em !important;
     }
   }
 }

js/src/ui/Portal/portal.css

@@ -120,7 +120,7 @@ $backgroundOverlay: rgba(255, 255, 255, 0.95);
     font-size: 3em;
     position: absolute;
     right: 1rem;
-    top: 0.5rem;
+    top: 1.5rem;
     z-index: 100;
 
     i {

js/src/ui/REDAME.md

@@ -0,0 +1 @@
+# Parity UI component library

js/src/ui/Snackbar/snackbar.css

@@ -27,6 +27,7 @@
   background-color: rgba(0, 0, 0, 0.75);
   z-index: 3000;
   transition: transform 0.75s;
+  transform: translateX(-50%) translateY(0px);
 }
 
 #action {

js/src/ui/Snackbar/snackbar.js

@@ -21,9 +21,7 @@ import styles from './snackbar.css';
 
 export default class Snackbar extends Component {
   state = {
-    snackStyle: {
+    opened: false
-      transform: 'translateX(-50%) translateY(40px)'
-    }
   };
 
   static propTypes = {
@@ -32,7 +30,7 @@ export default class Snackbar extends Component {
     message: PropTypes.string,
     autoHideDuration: PropTypes.number,
     bodyStyle: PropTypes.object,
-    onRequestClose: PropTypes.Func
+    onRequestClose: PropTypes.func
   };
 
   defaultProps = {
@@ -40,46 +38,26 @@ export default class Snackbar extends Component {
   };
 
   componentWillUpdate (nextProps) {
-    const self = this;
+    if (this.state.opened) {
-
-    if (this.openStatus) {
       return;
     }
 
     if (nextProps.open === true) {
-      this.openStatus = true;
+      this.show();
 
-      self.autoShow();
+      setTimeout(this.hide, nextProps.autoHideDuration);
-
-      setTimeout(() => {
-        self.autoHide();
-      }, nextProps.autoHideDuration);
     }
   }
 
-  autoShow () {
-    this.setState({
-      snackStyle: {
-        transform: 'translateX(-50%) translateY(0px)'
-      }
-    });
-  }
-
-  autoHide () {
-    this.props.onRequestClose();
-    this.openStatus = false;
-    this.setState({
-      snackStyle: {
-        transform: 'translateX(-50%) translateY(40px)'
-      }
-    });
-  }
-
   render () {
     const { bodyStyle, message } = this.props;
-    const { snackStyle } = this.state;
+    const { opened } = this.state;
     let { action } = this.props;
 
+    if (!opened) {
+      return false;
+    }
+
     if (action === null || action === 'undefined') {
       action = (
         <FormattedMessage
@@ -90,7 +68,7 @@ export default class Snackbar extends Component {
     }
 
     return (
-      <div className={ styles.snacks } style={ snackStyle }>
+      <div className={ styles.snacks }>
         <div style={ bodyStyle }>
           <span>{ message }</span>
           <span id={ styles.action } onClick={ this.autoHide }>{ action }</span>
@@ -98,4 +76,17 @@ export default class Snackbar extends Component {
       </div>
     );
   }
+
+  show = () => {
+    this.setState({
+      opened: true
+    });
+  }
+
+  hide = () => {
+    this.props.onRequestClose();
+    this.setState({
+      opened: false
+    });
+  }
 }

js/src/ui/package.json

@@ -16,11 +16,11 @@
     "url": "git+https://github.com/paritytech/parity.git"
   },
   "keywords": [],
-  "scripts": {},
   "devDependencies": {},
   "dependencies": {
     "bignumber.js": "3.0.1",
     "brace": "0.9.0",
+    "date-difference": "1.0.0",
     "file-saver": "1.3.3",
     "geopattern": "1.2.3",
     "js-sha3": "0.5.5",

js/src/views/Accounts/CreateAccount/TypeIcon/typeIcon.js

@@ -28,35 +28,45 @@ export default class TypeIcon extends Component {
   }
 
   render () {
-    const { className, createStore, type } = this.props;
+    const { className } = this.props;
+
+    return (
+      <div className={ className }>
+        { this.getIcon() }
+      </div>
+    );
+  }
+
+  getIcon () {
+    const { createStore, type } = this.props;
     const { createType, stage } = createStore;
 
     if (stage === STAGE_INFO) {
-      return <DoneIcon className={ className } />;
+      return <DoneIcon />;
     }
 
     switch (type || createType) {
       case 'fromGeth':
-        return <FileUploadIcon className={ className } />;
+        return <FileUploadIcon />;
 
       case 'fromJSON':
-        return <FileIcon className={ className } />;
+        return <FileIcon />;
 
       case 'fromPhrase':
-        return <KeyboardIcon className={ className } />;
+        return <KeyboardIcon />;
 
       case 'fromPresale':
-        return <MembershipIcon className={ className } />;
+        return <MembershipIcon />;
 
       case 'fromQr':
-        return <QrIcon className={ className } />;
+        return <QrIcon />;
 
       case 'fromRaw':
-        return <KeyIcon className={ className } />;
+        return <KeyIcon />;
 
       case 'fromNew':
       default:
-        return <AccountsIcon className={ className } />;
+        return <AccountsIcon />;
     }
   }
 }

js/src/views/Accounts/CreateAccount/createAccount.css

@@ -111,9 +111,8 @@
   .icon {
     color: rgb(167, 151, 0) !important;
     flex: 0 0 56px;
-    height: 56px !important;
+    font-size: 56px;
-    margin-right: 0.75em;
+    margin: 1.5rem 1.5rem 0 0;
-    width: 56px !important;
   }
 
   .info {

js/src/views/Accounts/Summary/summary.js

@@ -24,8 +24,7 @@ import { FormattedMessage } from 'react-intl';
 
 import { arrayOrObjectProptype, nullableProptype } from '@parity/shared/util/proptypes';
 
-import { Balance, Container, ContainerTitle, CopyToClipboard, IdentityIcon, IdentityName, Tags, VaultTag } from '~/ui';
+import { Balance, Certifications, Container, ContainerTitle, CopyToClipboard, IdentityIcon, IdentityName, Tags, VaultTag } from '~/ui';
-import Certifications from '~/ui/Certifications';
 
 import styles from '../accounts.css';
 

js/src/views/Accounts/accounts.css

@@ -62,7 +62,7 @@
   }
 
   .overlay {
-    margin-top: -3.25em;
+    margin-top: -51px;
   }
 
   .owners {

js/src/views/Addresses/AddAddress/addAddress.js

@@ -19,7 +19,7 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Button, Form, Input, InputAddress, ModalBox, Portal } from '~/ui';
-import { AddIcon, AddressesIcon, CancelIcon } from '~/ui/Icons';
+import { AddIcon, AddressIcon, CancelIcon } from '~/ui/Icons';
 
 import Store from './store';
 
@@ -97,7 +97,7 @@ export default class AddAddress extends Component {
 
     return (
       <ModalBox
-        icon={ <AddressesIcon /> }
+        icon={ <AddressIcon /> }
         summary={
           <FormattedMessage
             id='addAddress.header'

js/src/views/ContractDevelop/LoadContract/loadContract.js

@@ -276,6 +276,7 @@ export default class LoadContract extends Component {
     return [
       <Button
         icon={ <CancelIcon /> }
+        key='cancel'
         label={
           <FormattedMessage
             id='loadContract.button.cancel'
@@ -287,6 +288,7 @@ export default class LoadContract extends Component {
       <Button
         disabled={ this.state.selected === -1 }
         icon={ <CheckIcon /> }
+        key='load'
         label={
           <FormattedMessage
             id='loadContract.button.load'

js/src/views/README.md

@@ -0,0 +1 @@
+# Parity wallet dapps

js/src/views/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@parity/view",
+  "name": "@parity/views",
   "description": "Parity wallet dapps",
   "version": "0.0.0",
   "main": "index.js",
@@ -14,6 +14,14 @@
   "keywords": [],
   "scripts": {},
   "devDependencies": {},
-  "dependencies": {},
+  "dependencies": {
+    "base32.js": "0.1.0",
+    "bytes": "2.4.0",
+    "format-number": "2.0.1",
+    "phoneformat.js": "1.0.3",
+    "react-element-to-jsx-string": "6.0.0",
+    "react-markdown": "2.4.4",
+    "rlp": "2.0.0"
+  },
   "peerDependencies": {}
 }

js/test/babel.js

@@ -15,5 +15,5 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 require('babel-register')({
-  ignore: /node_modules\/(?!@parity\/(abi|api|jsonrpc|shared|ui))/
+  ignore: /node_modules\/(?!@parity\/(abi|api|dapps|jsonrpc|shared|shell|views|ui))/
 });

js/webpack/rules/parity.js

@@ -16,6 +16,6 @@
 
 module.exports = {
   test: /\.js$/,
-  include: /node_modules\/@parity\/(abi|api|jsonrpc|shared|ui|wordlist)/,
+  include: /node_modules\/@parity\/(abi|api|dapps|jsonrpc|shared|shell|ui|views|wordlist)/,
   use: 'babel-loader'
 };