Ui 2 radios & imports (#5609)

* Remove mui IconButton

* Token type selection

* Convert RadioButtons

* RadioButtons consistency

* Import @parity/ui

* Import @parity/ui

* Explicit name for RadioButtons

* Convert to semantic Radio

js/src/shell/Application/application.js

@@ -19,7 +19,7 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
-import { Errors } from '~/ui';
+import { Errors } from '@parity/ui';
 
 import Connection from '../Connection';
 import Extension from '../Extension';

js/src/shell/Connection/connection.js

@@ -18,8 +18,8 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
-import { Input } from '~/ui';
-import { CompareIcon, ComputerIcon, DashboardIcon, VpnIcon } from '~/ui/Icons';
+import { Input } from '@parity/ui';
+import { CompareIcon, ComputerIcon, DashboardIcon, VpnIcon } from '@parity/ui/Icons';
 
 import styles from './connection.css';
 

js/src/shell/DappPermissions/dappPermissions.js

@@ -18,7 +18,7 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { AccountCard, Portal, SelectionList } from '~/ui';
+import { AccountCard, Portal, SelectionList } from '@parity/ui';
 
 @observer
 export default class DappPermissions extends Component {

js/src/shell/Dapps/dapps.js

@@ -20,8 +20,8 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
-import { Actionbar, Button, Checkbox, DappCard, Page, SectionList } from '~/ui';
-import { LockedIcon, VisibleIcon } from '~/ui/Icons';
+import { Actionbar, Button, Checkbox, DappCard, Page, SectionList } from '@parity/ui';
+import { LockedIcon, VisibleIcon } from '@parity/ui/Icons';
 
 import DappsVisible from '../DappsVisible';
 import DappPermissions from '../DappPermissions';

js/src/shell/DappsVisible/dappsVisible.js

@@ -18,7 +18,7 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { DappCard, Portal, SelectionList } from '~/ui';
+import { DappCard, Portal, SelectionList } from '@parity/ui';
 
 import styles from './dappsVisible.css';
 

js/src/shell/Extension/extension.js

@@ -18,8 +18,8 @@ import { observer } from 'mobx-react';
 import React, { Component } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Button } from '~/ui';
-import { CloseIcon, CheckIcon } from '~/ui/Icons';
+import { Button } from '@parity/ui';
+import { CloseIcon, CheckIcon } from '@parity/ui/Icons';
 
 import Store from './store';
 import styles from './extension.css';

js/src/shell/FirstRun/TnC/tnc.js

@@ -17,7 +17,7 @@
 import React, { PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Checkbox } from '~/ui';
+import { Checkbox } from '@parity/ui';
 
 import styles from '../firstRun.css';
 

js/src/shell/FirstRun/firstRun.js

@@ -22,10 +22,10 @@ import { bindActionCreators } from 'redux';
 
 import { createIdentityImg } from '@parity/api/util/identity';
 import { newError } from '@parity/shared/redux/actions';
+import { Button, Portal } from '@parity/ui';
+import { CheckIcon, DoneIcon, NextIcon, PrintIcon } from '@parity/ui/Icons';
 
 import ParityLogo from '~/../assets/images/parity-logo-black-no-text.svg';
-import { Button, Portal } from '~/ui';
-import { CheckIcon, DoneIcon, NextIcon, PrintIcon } from '~/ui/Icons';
 
 // FIXME: These imports, while nice for re-using, breaks since the shell import
 import { NewAccount, AccountDetails } from '~/views/Accounts/CreateAccount';

js/src/shell/ParityBar/parityBar.js

@@ -23,9 +23,10 @@ import { Link } from 'react-router';
 import { connect } from 'react-redux';
 import store from 'store';
 
+import { AccountCard, Badge, Button, ContainerTitle, IdentityIcon, SelectionList } from '@parity/ui';
+import { CancelIcon, FingerprintIcon } from '@parity/ui/Icons';
+
 import imagesEthcoreBlock from '~/../assets/images/parity-logo-white-no-text.svg';
-import { AccountCard, Badge, Button, ContainerTitle, IdentityIcon, SelectionList } from '~/ui';
-import { CancelIcon, FingerprintIcon } from '~/ui/Icons';
 
 import DappsStore from '~/shell/Dapps/dappsStore';
 import Signer from '~/shell/Signer/Embedded';

js/src/shell/Requests/requests.js

@@ -21,8 +21,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { hideRequest } from '@parity/shared/redux/providers/requestsActions';
-
-import { MethodDecoding, IdentityIcon, Progress, ScrollableText, ShortenedHash } from '~/ui';
+import { MethodDecoding, IdentityIcon, Progress, ScrollableText, ShortenedHash } from '@parity/ui';
 
 import styles from './requests.css';
 

js/src/shell/Signer/Embedded/embedded.js

@@ -21,8 +21,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import * as RequestsActions from '@parity/shared/redux/providers/signerActions';
-
-import { Container } from '~/ui';
+import { Container } from '@parity/ui';
 
 import Store from '../store';
 

js/src/shell/Signer/components/Account/account.js

@@ -16,7 +16,8 @@
 
 import React, { Component, PropTypes } from 'react';
 
-import { IdentityIcon, IdentityName } from '~/ui';
+import { IdentityIcon, IdentityName } from '@parity/ui';
+
 import AccountLink from './AccountLink';
 
 import styles from './account.css';

js/src/shell/Signer/components/RequestOrigin/requestOrigin.js

@@ -17,7 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import IdentityIcon from '~/ui/IdentityIcon';
+import IdentityIcon from '@parity/ui/IdentityIcon';
 
 import styles from './requestOrigin.css';
 

js/src/shell/Signer/components/TransactionMainDetails/transactionMainDetails.js

@@ -18,8 +18,8 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
 
-import { Button, MethodDecoding } from '~/ui';
-import { GasIcon } from '~/ui/Icons';
+import { Button, MethodDecoding } from '@parity/ui';
+import { GasIcon } from '@parity/ui/Icons';
 
 import * as tUtil from '../util/transaction';
 import Account from '../Account';

js/src/shell/Signer/components/TransactionPending/transactionPending.js

@@ -20,8 +20,7 @@ import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
 import HardwareStore from '@parity/shared/mobx/hardwareStore';
-
-import { Button, GasPriceEditor } from '~/ui';
+import { Button, GasPriceEditor } from '@parity/ui';
 
 import TransactionMainDetails from '../TransactionMainDetails';
 import TransactionPendingForm from '../TransactionPendingForm';

js/src/shell/Signer/components/TransactionPendingForm/transactionPendingForm.js

@@ -17,7 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { PrevIcon } from '~/ui/Icons';
+import { PrevIcon } from '@parity/ui/Icons';
 
 import TransactionPendingFormConfirm from '../TransactionPendingFormConfirm';
 import TransactionPendingFormReject from '../TransactionPendingFormReject';

js/src/shell/Signer/components/TransactionPendingFormConfirm/transactionPendingFormConfirm.js

@@ -20,7 +20,8 @@ import ReactDOM from 'react-dom';
 import { FormattedMessage } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
 
-import { Button, Form, Input, IdentityIcon, QrCode, QrScan } from '~/ui';
+import { Button, Form, Input, IdentityIcon, QrCode, QrScan } from '@parity/ui';
+
 import { generateTxQr, generateDataQr } from '~/shell/Signer/utils/qrscan';
 
 import styles from './transactionPendingFormConfirm.css';

js/src/shell/Signer/components/TransactionPendingFormReject/transactionPendingFormReject.js

@@ -17,7 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Button } from '~/ui';
+import { Button } from '@parity/ui';
 
 import styles from './transactionPendingFormReject.css';
 

js/src/shell/Snackbar/snackbar.js

@@ -19,8 +19,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { closeSnackbar } from '@parity/shared/redux/providers/snackbarActions';
-
-import { Snackbar as SnackbarUI } from '~/ui';
+import { Snackbar as SnackbarUI } from '@parity/ui';
 
 function Snackbar ({ closeSnackbar, cooldown = 3500, message, open = false }) {
   return (

js/src/shell/Status/status.js

@@ -17,7 +17,7 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 
-import { BlockStatus } from '~/ui';
+import { BlockStatus } from '@parity/ui';
 
 import Consensus from './Consensus';
 import Upgrade from './Upgrade';

js/src/shell/SyncWarning/syncWarning.js

@@ -14,13 +14,12 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { Checkbox } from 'material-ui';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import store from 'store';
 
-import { Button } from '~/ui';
+import { Button, Checkbox } from '@parity/ui';
 
 import styles from './syncWarning.css';
 

js/src/shell/UpgradeParity/upgradeParity.js

@@ -18,8 +18,8 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Button, Portal } from '~/ui';
-import { CancelIcon, DoneIcon, ErrorIcon, NextIcon, UpdateIcon, UpdateWaitIcon } from '~/ui/Icons';
+import { Button, Portal } from '@parity/ui';
+import { CancelIcon, DoneIcon, ErrorIcon, NextIcon, UpdateIcon, UpdateWaitIcon } from '@parity/ui/Icons';
 
 import { STEP_COMPLETED, STEP_ERROR, STEP_INFO, STEP_UPDATING } from './store';
 import styles from './upgradeParity.css';

js/src/shell/embed.js

@@ -28,12 +28,11 @@ import injectTapEventPlugin from 'react-tap-event-plugin';
 import ContractInstances from '@parity/shared/contracts';
 import { initStore } from '@parity/shared/redux';
 import { patchApi } from '@parity/shared/util/tx';
+import ContextProvider from '@parity/ui/ContextProvider';
+import muiTheme from '@parity/ui/Theme';
 
 import SecureApi from '~/secureApi';
 
-import ContextProvider from '~/ui/ContextProvider';
-import muiTheme from '~/ui/Theme';
-
 import '@parity/shared/environment';
 
 import '~/../assets/fonts/Roboto/font.css';

js/src/shell/index.js

@@ -33,14 +33,13 @@ import ContractInstances from '@parity/shared/contracts';
 import HistoryStore from '@parity/shared/mobx/historyStore';
 import { initStore } from '@parity/shared/redux';
 import { patchApi } from '@parity/shared/util/tx';
+import ContextProvider from '@parity/ui/ContextProvider';
+import muiTheme from '@parity/ui/Theme';
 
 import '@parity/shared/environment';
 
 import SecureApi from '~/secureApi';
 
-import ContextProvider from '~/ui/ContextProvider';
-import muiTheme from '~/ui/Theme';
-
 import Application from './Application';
 import Dapp from './Dapp';
 import Dapps from './Dapps';

js/src/ui/Form/Label/label.css

@@ -15,10 +15,12 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-$labelColor: rgba(255, 255, 255, 0.5);
+$labelColor: rgba(0, 0, 0, 0.3);
 $labelFontSize: 0.75rem;
 
 .label {
   color: $labelColor;
   font-size: $labelFontSize;
+  pointer-events: none;
+  user-select: none;
 }

js/src/ui/Form/LabelComponent/labelComponent.css

@@ -1,24 +0,0 @@
-/* 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/>.
-*/
-
-.container {
-  .label {
-    color: rgba(0, 0, 0, 0.3);
-    pointer-events: none;
-    user-select: none;
-  }
-}

js/src/ui/Form/LabelComponent/labelComponent.js

@@ -16,29 +16,19 @@
 
 import React, { PropTypes } from 'react';
 
-import styles from './labelComponent.css';
+import Label from '../Label';
 
-export default function LabelComponent ({ children, label }) {
+export default function LabelComponent ({ className, children, label }) {
   return (
-    <div className={ styles.container }>
-      {
-        label
-          ? (
-            <label
-              className={ styles.label }
-              htmlFor=''
-            >
-              { label }
-            </label>
-          )
-          : null
-      }
+    <div className={ className }>
+      <Label label={ label } />
       { children }
     </div>
   );
 }
 
 LabelComponent.propTypes = {
-  label: PropTypes.node,
-  children: PropTypes.node.isRequired
+  className: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  label: PropTypes.node
 };

js/src/ui/Form/RadioButtons/radioButtons.css

@@ -16,22 +16,19 @@
 */
 
 .container {
-  .label {
-  }
+  display: flex;
+  flex-direction: column;
 
-  .radioButton {
+  .radioContainer {
     margin: 0.25em 0;
-  }
 
-  .radioLabel {
-    display: flex;
-    flex-direction: column;
-
-    .description {
-      font-size: 0.8em;
-      margin-bottom: 0.5em;
-      color: #ccc;
-      z-index: 2;
+    .label {
+      .description {
+        font-size: 0.75em;
+        margin-bottom: 0.5em;
+        color: #ccc;
+        z-index: 2;
+      }
     }
   }
 }

js/src/ui/Form/RadioButtons/radioButtons.js

@@ -14,101 +14,59 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
-import React, { Component, PropTypes } from 'react';
+import React, { PropTypes } from 'react';
+import { Radio } from 'semantic-ui-react';
 
 import { arrayOrObjectProptype } from '@parity/shared/util/proptypes';
 
-import Label from '../Label';
+import LabelComponent from '../LabelComponent';
 import styles from './radioButtons.css';
 
-export default class RadioButtons extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    label: PropTypes.node,
-    name: PropTypes.string,
-    onChange: PropTypes.func.isRequired,
-    value: PropTypes.any,
-    values: arrayOrObjectProptype().isRequired
-  };
+export default function RadioButtons ({ className, label, name, onChange, value, values }) {
+  const _onChange = (event, { value }) => onChange(event, value);
 
-  static defaultProps = {
-    value: 0,
-    name: ''
-  };
-
-  render () {
-    const { className, label, value, values } = this.props;
-
-    const index = Number.isNaN(parseInt(value))
-      ? values.findIndex((_value) => _value.key === value)
-      : parseInt(value);
-    const selectedValue = typeof value !== 'object'
-      ? values[index]
-      : value;
-    const key = this.getKey(selectedValue, index);
-
-    return (
-      <div className={ [styles.container, className].join(' ') }>
-        <Label
-          className={ styles.label }
-          label={ label }
-        />
-        <RadioButtonGroup
-          name={ name }
-          onChange={ this.onChange }
-          valueSelected={ key }
-        >
-          { this.renderContent() }
-        </RadioButtonGroup>
-      </div>
-    );
-  }
-
-  renderContent () {
-    const { values } = this.props;
-
-    return values.map((value, index) => {
-      const label = typeof value === 'string'
-        ? value
-        : value.label || '';
-      const description = (typeof value !== 'string' && value.description) || null;
-      const key = this.getKey(value, index);
-
-      return (
-        <RadioButton
-          className={ styles.radioButton }
-          key={ index }
-          label={
-            <div className={ styles.radioLabel }>
-              <span>{ label }</span>
-              {
-                description
-                ? <span className={ styles.description }>{ description }</span>
-                : null
+  return (
+    <LabelComponent
+      className={ [styles.container, className].join(' ') }
+      label={ label }
+    >
+      {
+        values.map(({ description, key, label }) => (
+          <div
+            className={ styles.radioContainer }
+            key={ key }
+          >
+            <Radio
+              checked={ value === key }
+              className={ styles.radio }
+              label={
+                <label className={ styles.label }>
+                  <div className={ styles.name }>{ label }</div>
+                  {
+                    description && (
+                      <div className={ styles.description }>
+                        { description }
+                      </div>
+                    )
+                  }
+                </label>
               }
-            </div>
-          }
-          value={ key }
-        />
-      );
-    });
-  }
-
-  getKey (value, index) {
-    if (typeof value !== 'string') {
-      return typeof value.key === 'undefined'
-        ? index
-        : value.key;
-    }
-
-    return index;
-  }
-
-  onChange = (event, index) => {
-    const { onChange, values } = this.props;
-    const value = values[index] || values.find((value) => value.key === index);
-
-    onChange(value, index);
-  }
+              name={ name }
+              onChange={ _onChange }
+              value={ key }
+            />
+          </div>
+        ))
+      }
+    </LabelComponent>
+  );
 }
+
+RadioButtons.propTypes = {
+  className: PropTypes.string,
+  label: PropTypes.node,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.any,
+  values: arrayOrObjectProptype().isRequired
+};

js/src/ui/GasPriceEditor/gasPriceEditor.js

@@ -88,6 +88,7 @@ export default class GasPriceEditor extends Component {
               defaultMessage='Condition where transaction activates'
             />
           }
+          name='conditionType'
           onChange={ this.onChangeConditionType }
           value={ conditionType }
           values={ CONDITION_VALUES }
@@ -239,8 +240,8 @@ export default class GasPriceEditor extends Component {
     onChange && onChange('gasPrice', price);
   }
 
-  onChangeConditionType = (conditionType) => {
-    this.props.store.setConditionType(conditionType.key);
+  onChangeConditionType = (event, conditionType) => {
+    this.props.store.setConditionType(conditionType);
   }
 
   onChangeConditionBlock = (event, blockNumber) => {

js/src/views/Account/DeleteAccount/deleteAccount.js

@@ -20,8 +20,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { newError } from '@parity/shared/redux/actions';
-
-import { ConfirmDialog, IdentityIcon, IdentityName, Input } from '~/ui';
+import { ConfirmDialog, IdentityIcon, IdentityName, Input } from '@parity/ui';
 
 import styles from './deleteAccount.css';
 

js/src/views/Account/EditMeta/editMeta.js

@@ -21,9 +21,9 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { newError } from '@parity/shared/redux/actions';
+import { Button, Form, Input, InputChip, Portal, VaultSelect } from '@parity/ui';
+import { CancelIcon, SaveIcon } from '@parity/ui/Icons';
 
-import { Button, Form, Input, InputChip, Portal, VaultSelect } from '~/ui';
-import { CancelIcon, SaveIcon } from '~/ui/Icons';
 import VaultStore from '~/views/Vaults/store';
 
 import Store from './store';

js/src/views/Account/Faucet/faucet.js

@@ -19,8 +19,8 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { txLink } from '~/3rdparty/etherscan/links';
-import { Button, ModalBox, Portal, ShortenedHash } from '~/ui';
-import { CloseIcon, DialIcon, DoneIcon, ErrorIcon, SendIcon } from '~/ui/Icons';
+import { Button, ModalBox, Portal, ShortenedHash } from '@parity/ui';
+import { CloseIcon, DialIcon, DoneIcon, ErrorIcon, SendIcon } from '@parity/ui/Icons';
 
 import Store from './store';
 

js/src/views/Account/Header/header.js

@@ -17,7 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Balance, Certifications, Container, CopyToClipboard, ContainerTitle, IdentityIcon, IdentityName, QrCode, Tags, VaultTag } from '~/ui';
+import { Balance, Certifications, Container, CopyToClipboard, ContainerTitle, IdentityIcon, IdentityName, QrCode, Tags, VaultTag } from '@parity/ui';
 
 import styles from './header.css';
 

js/src/views/Account/PasswordManager/passwordManager.js

@@ -22,11 +22,10 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { newError, openSnackbar } from '@parity/shared/redux/actions';
-
-import { Button, IdentityName, IdentityIcon, Portal } from '~/ui';
-import PasswordStrength from '~/ui/Form/PasswordStrength';
-import Form, { Input } from '~/ui/Form';
-import { CancelIcon, CheckIcon, SendIcon } from '~/ui/Icons';
+import { Button, IdentityName, IdentityIcon, Portal } from '@parity/ui';
+import PasswordStrength from '@parity/ui/Form/PasswordStrength';
+import Form, { Input } from '@parity/ui/Form';
+import { CancelIcon, CheckIcon, SendIcon } from '@parity/ui/Icons';
 
 import Store, { CHANGE_ACTION, TEST_ACTION } from './store';
 import styles from './passwordManager.css';

js/src/views/Account/Shapeshift/AwaitingDepositStep/awaitingDepositStep.js

@@ -18,7 +18,7 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { CopyToClipboard, QrCode } from '~/ui';
+import { CopyToClipboard, QrCode } from '@parity/ui';
 
 import Value from '../Value';
 import styles from '../shapeshift.css';

js/src/views/Account/Shapeshift/OptionsStep/optionsStep.js

@@ -18,7 +18,7 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Checkbox, Dropdown, Form, Input, Warning } from '~/ui';
+import { Checkbox, Dropdown, Form, Input, Warning } from '@parity/ui';
 
 import Price from '../Price';
 import { WARNING_NO_PRICE } from '../store';

js/src/views/Account/Shapeshift/shapeshift.js

@@ -18,9 +18,10 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
+import { Button, IdentityIcon, Portal } from '@parity/ui';
+import { CancelIcon, DoneIcon } from '@parity/ui/Icons';
+
 import shapeshiftLogo from '~/../assets/images/shapeshift-logo.png';
-import { Button, IdentityIcon, Portal } from '~/ui';
-import { CancelIcon, DoneIcon } from '~/ui/Icons';
 
 import AwaitingDepositStep from './AwaitingDepositStep';
 import AwaitingExchangeStep from './AwaitingExchangeStep';

js/src/views/Account/Transactions/transactions.js

@@ -19,7 +19,7 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
-import { Container, TxList, Loading } from '~/ui';
+import { Container, TxList, Loading } from '@parity/ui';
 
 import Store from './store';
 import styles from './transactions.css';

js/src/views/Account/Transfer/Details/details.js

@@ -19,7 +19,7 @@ import { FormattedMessage } from 'react-intl';
 
 import { nullableProptype } from '@parity/shared/util/proptypes';
 
-import Form, { Input, InputAddressSelect, AddressSelect, Checkbox } from '~/ui/Form';
+import Form, { Input, InputAddressSelect, AddressSelect, Checkbox } from '@parity/ui/Form';
 
 import TokenSelect from './tokenSelect';
 import styles from '../transfer.css';
@@ -207,8 +207,8 @@ export default class Details extends Component {
     );
   }
 
-  onChangeToken = (event, index, tokenId) => {
-    this.props.onChange('token', tokenId);
+  onChangeToken = (event, data) => {
+    this.props.onChange('token', data.value);
   }
 
   onEditSender = (event, sender) => {

js/src/views/Account/Transfer/Details/tokenSelect.js

@@ -19,8 +19,7 @@ import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { isEqual } from 'lodash';
 
-import { Dropdown } from '~/ui/Form';
-import TokenImage from '~/ui/TokenImage';
+import { Dropdown, TokenImage } from '@parity/ui';
 
 import styles from '../transfer.css';
 
@@ -90,7 +89,7 @@ class TokenSelect extends Component {
 
         return {
           key: tokenId,
-          text: label,
+          text: token.name,
           value: token.id,
           content: label
         };

js/src/views/Account/Transfer/Extras/extras.js

@@ -17,7 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { GasPriceEditor, Form, Input } from '~/ui';
+import { GasPriceEditor, Form, Input } from '@parity/ui';
 
 import styles from '../transfer.css';
 

js/src/views/Account/Transfer/store.js

@@ -24,9 +24,9 @@ import { getLogger, LOG_KEYS } from '@parity/shared/config';
 import { eip20 as tokenAbi, wallet as walletAbi } from '@parity/shared/contracts/abi';
 import { DEFAULT_GAS, DEFAULT_GASPRICE, MAX_GAS_ESTIMATION } from '@parity/shared/util/constants';
 import { ETH_TOKEN } from '@parity/shared/util/tokens';
+import GasPriceStore from '@parity/ui/GasPriceEditor/store';
 
 import ERRORS from './errors';
-import GasPriceStore from '~/ui/GasPriceEditor/store';
 
 const log = getLogger(LOG_KEYS.TransferModalStore);
 

js/src/views/Account/Transfer/transfer.js

@@ -22,10 +22,9 @@ import { observer } from 'mobx-react';
 import { pick } from 'lodash';
 
 import { nullableProptype } from '@parity/shared/util/proptypes';
-
-import { Button, IdentityIcon, Portal, Warning } from '~/ui';
-import { newError } from '~/ui/Errors/actions';
-import { CancelIcon, NextIcon, PrevIcon } from '~/ui/Icons';
+import { Button, IdentityIcon, Portal, Warning } from '@parity/ui';
+import { newError } from '@parity/ui/Errors/actions';
+import { CancelIcon, NextIcon, PrevIcon } from '@parity/ui/Icons';
 
 import Details from './Details';
 import Extras from './Extras';

js/src/views/Account/Verification/Done/done.js

@@ -17,7 +17,7 @@
 import React, { Component } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { DoneIcon } from '~/ui/Icons';
+import { DoneIcon } from '@parity/ui/Icons';
 
 import styles from './done.css';
 

js/src/views/Account/Verification/GatherData/gatherData.js

@@ -19,13 +19,13 @@ import { FormattedMessage } from 'react-intl';
 import BigNumber from 'bignumber.js';
 
 import { fromWei } from '@parity/api/util/wei';
-
-import { Checkbox, Form, Input } from '~/ui';
-import { DoneIcon, ErrorIcon, InfoIcon } from '~/ui/Icons';
+import { Checkbox, Form, Input } from '@parity/ui';
+import { DoneIcon, ErrorIcon, InfoIcon } from '@parity/ui/Icons';
 import { nullableProptype } from '@parity/shared/util/proptypes';
 
 import smsTermsOfService from '~/3rdparty/sms-verification/terms-of-service';
 import emailTermsOfService from '~/3rdparty/email-verification/terms-of-service';
+
 import { howSMSVerificationWorks, howEmailVerificationWorks } from '../how-it-works';
 import styles from './gatherData.css';
 

js/src/views/Account/Verification/QueryCode/queryCode.js

@@ -18,8 +18,7 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { nodeOrStringProptype } from '@parity/shared/util/proptypes';
-
-import { Form, Input } from '~/ui';
+import { Form, Input } from '@parity/ui';
 
 export default class QueryCode extends Component {
   static propTypes = {

js/src/views/Account/Verification/SendConfirmation/sendConfirmation.js

@@ -18,11 +18,9 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { nullableProptype } from '@parity/shared/util/proptypes';
+import TxHash from '@parity/ui/TxHash';
 
-import TxHash from '~/ui/TxHash';
-import {
-  POSTING_CONFIRMATION, POSTED_CONFIRMATION
-} from '../store';
+import { POSTING_CONFIRMATION, POSTED_CONFIRMATION } from '../store';
 
 import styles from './sendConfirmation.css';
 

js/src/views/Account/Verification/SendRequest/sendRequest.js

@@ -18,11 +18,9 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { nullableProptype } from '@parity/shared/util/proptypes';
+import TxHash from '@parity/ui/TxHash';
 
-import TxHash from '~/ui/TxHash';
-import {
-  POSTING_REQUEST, POSTED_REQUEST, REQUESTING_CODE
-} from '../store';
+import { POSTING_REQUEST, POSTED_REQUEST, REQUESTING_CODE } from '../store';
 
 import styles from './sendRequest.css';
 

js/src/views/Account/Verification/verification.js

@@ -20,9 +20,8 @@ import { connect } from 'react-redux';
 import { observer } from 'mobx-react';
 import { observable } from 'mobx';
 
-import { Button, IdentityIcon, Portal } from '~/ui';
-import RadioButtons from '~/ui/Form/RadioButtons';
-import { CancelIcon, DoneIcon } from '~/ui/Icons';
+import { Button, IdentityIcon, Portal, RadioButtons } from '@parity/ui';
+import { CancelIcon, DoneIcon } from '@parity/ui/Icons';
 
 import SMSVerificationStore from './sms-store';
 import EmailVerificationStore from './email-store';
@@ -37,7 +36,7 @@ const METHODS = {
         defaultMessage='SMS Verification'
       />
     ),
-    key: 0,
+    key: 'sms',
     value: 'sms',
     description: (
       <p className={ styles.noSpacing }>
@@ -55,7 +54,7 @@ const METHODS = {
         defaultMessage='E-mail Verification'
       />
     ),
-    key: 1,
+    key: 'email',
     value: 'email',
     description: (
       <p className={ styles.noSpacing }>
@@ -269,14 +268,12 @@ class Verification extends Component {
     const { method } = this.state;
 
     if (phase === 0) {
-      const values = Object.values(METHODS);
-      const value = values.findIndex((v) => v.value === method);
-
       return (
         <RadioButtons
+          name='verificationType'
           onChange={ this.selectMethod }
-          value={ value < 0 ? 0 : value }
-          values={ values }
+          value={ method || 'sms' }
+          values={ Object.values(METHODS) }
         />
       );
     }
@@ -436,8 +433,8 @@ class Verification extends Component {
     }
   }
 
-  selectMethod = (choice, i) => {
-    this.setState({ method: choice.value });
+  selectMethod = (event, method) => {
+    this.setState({ method });
   }
 }
 

js/src/views/Account/account.js

@@ -25,10 +25,10 @@ import HistoryStore from '@parity/shared/mobx/historyStore';
 import { newError } from '@parity/shared/redux/actions';
 import { setVisibleAccounts } from '@parity/shared/redux/providers/personalActions';
 import { fetchCertifiers, fetchCertifications } from '@parity/shared/redux/providers/certifications/actions';
+import { Actionbar, Button, ConfirmDialog, Input, Page, Portal } from '@parity/ui';
+import { DeleteIcon, DialIcon, EditIcon, LockedIcon, SendIcon, VerifyIcon, FileDownloadIcon } from '@parity/ui/Icons';
 
 import shapeshiftBtn from '~/../assets/images/shapeshift-btn.png';
-import { Actionbar, Button, ConfirmDialog, Input, Page, Portal } from '~/ui';
-import { DeleteIcon, DialIcon, EditIcon, LockedIcon, SendIcon, VerifyIcon, FileDownloadIcon } from '~/ui/Icons';
 
 import DeleteAccount from './DeleteAccount';
 import EditMeta from './EditMeta';

js/src/views/Account/index.js

@@ -23,12 +23,11 @@ injectTapEventPlugin();
 
 import ContractInstances from '@parity/shared/contracts';
 import { initStore } from '@parity/shared/redux';
+import ContextProvider from '@parity/ui/ContextProvider';
+import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
 
-import ContextProvider from '~/ui/ContextProvider';
-import muiTheme from '~/ui/Theme';
-
 import Account from './account';
 
 ContractInstances.get(api);

js/src/views/Accounts/CreateAccount/AccountDetails/accountDetails.js

@@ -18,7 +18,7 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { IdentityIcon, Input, QrCode, Title } from '~/ui';
+import { IdentityIcon, Input, QrCode, Title } from '@parity/ui';
 
 import styles from '../createAccount.css';
 

js/src/views/Accounts/CreateAccount/AccountDetailsGeth/accountDetailsGeth.js

@@ -18,7 +18,8 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { SectionList } from '~/ui';
+import { SectionList } from '@parity/ui';
+
 import GethCard from '../GethCard';
 
 import styles from '../createAccount.css';

js/src/views/Accounts/CreateAccount/ChangeVault/changeVault.js

@@ -17,7 +17,7 @@
 import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 
-import { VaultSelect } from '~/ui';
+import { VaultSelect } from '@parity/ui';
 
 @observer
 export default class ChangeVault extends Component {

js/src/views/Accounts/CreateAccount/CreationType/creationType.js

@@ -18,7 +18,7 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Container, SelectionList, Title } from '~/ui';
+import { Container, SelectionList, Title } from '@parity/ui';
 
 import TypeIcon from '../TypeIcon';
 import styles from '../createAccount.css';

js/src/views/Accounts/CreateAccount/GethCard/gethCard.js

@@ -17,8 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 
 import { ETH_TOKEN } from '@parity/shared/util/tokens';
-
-import { AccountCard } from '~/ui';
+import { AccountCard } from '@parity/ui';
 
 export default class GethCard extends Component {
   static propTypes = {

js/src/views/Accounts/CreateAccount/NewAccount/newAccount.js

@@ -17,13 +17,10 @@
 import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { IconButton } from 'material-ui';
-import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
 
-import { Form, Input, IdentityIcon } from '~/ui';
-import PasswordStrength from '~/ui/Form/PasswordStrength';
-import { RefreshIcon } from '~/ui/Icons';
-import Loading from '~/ui/Loading';
+import { Button, Form, Input, IdentityIcon, Loading, RadioButtons } from '@parity/ui';
+import PasswordStrength from '@parity/ui/Form/PasswordStrength';
+import { RefreshIcon } from '@parity/ui/Icons';
 
 import ChangeVault from '../ChangeVault';
 import styles from '../createAccount.css';
@@ -143,27 +140,21 @@ export default class CreateAccount extends Component {
       return null;
     }
 
-    const buttons = Object
-      .keys(accounts)
-      .map((address) => {
-        return (
-          <RadioButton
-            className={ styles.button }
-            key={ address }
-            value={ address }
-          />
-        );
-      });
-
     return (
-      <RadioButtonGroup
+      <RadioButtons
         className={ styles.selector }
         name='identitySelector'
         onChange={ this.onChangeIdentity }
-        valueSelected={ selectedAddress }
-      >
-        { buttons }
-      </RadioButtonGroup>
+        value={ selectedAddress }
+        values={
+          Object.keys(accounts).map((address) => {
+            return {
+              key: address,
+              label: address
+            };
+          })
+        }
+      />
     );
   }
 
@@ -176,30 +167,37 @@ export default class CreateAccount extends Component {
       );
     }
 
-    const identities = Object
-      .keys(accounts)
-      .map((address) => {
-        return (
-          <div
-            className={ styles.identity }
-            key={ address }
-            onTouchTap={ this.onChangeIdentity }
-          >
-            <IdentityIcon
-              address={ address }
-              center
-            />
-          </div>
-        );
-      });
-
     return (
       <div className={ styles.identities }>
-        { identities }
+        {
+          Object
+            .keys(accounts)
+            .map((address) => {
+              return (
+                <div
+                  className={ styles.identity }
+                  key={ address }
+                  onTouchTap={ this.onChangeIdentity }
+                >
+                  <IdentityIcon
+                    address={ address }
+                    center
+                  />
+                </div>
+              );
+            })
+        }
         <div className={ styles.refresh }>
-          <IconButton onTouchTap={ this.createIdentities }>
-            <RefreshIcon color='rgb(0, 151, 167)' />
-          </IconButton>
+          <Button
+            onClick={ this.createIdentities }
+            icon={ <RefreshIcon /> }
+            label={
+              <FormattedMessage
+                id='createAccount.newAccount.buttons.refresh'
+                defaultMessage='refresh'
+              />
+            }
+          />
         </div>
       </div>
     );
@@ -235,9 +233,8 @@ export default class CreateAccount extends Component {
       });
   }
 
-  onChangeIdentity = (event) => {
+  onChangeIdentity = (event, selectedAddress) => {
     const { createStore } = this.props;
-    const selectedAddress = event.target.value || event.target.getAttribute('value');
 
     if (!selectedAddress) {
       return;

js/src/views/Accounts/CreateAccount/NewAccount/newAccount.spec.js

@@ -43,7 +43,7 @@ function render () {
   return component;
 }
 
-describe('modals/CreateAccount/NewAccount', () => {
+describe('views/Accounts/CreateAccount/NewAccount', () => {
   beforeEach(() => {
     render();
   });
@@ -77,7 +77,7 @@ describe('modals/CreateAccount/NewAccount', () => {
 
         sinon.spy(store, 'setAddress');
         sinon.spy(store, 'setPhrase');
-        instance.onChangeIdentity({ target: { value: address } });
+        instance.onChangeIdentity(null, address);
       });
 
       afterEach(() => {

js/src/views/Accounts/CreateAccount/NewGeth/newGeth.js

@@ -18,7 +18,7 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { SelectionList } from '~/ui';
+import { SelectionList } from '@parity/ui';
 
 import GethCard from '../GethCard';
 import styles from '../createAccount.css';

js/src/views/Accounts/CreateAccount/NewImport/newImport.js

@@ -18,7 +18,7 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Form, FileSelect, Input } from '~/ui';
+import { Form, FileSelect, Input } from '@parity/ui';
 
 import ChangeVault from '../ChangeVault';
 import styles from '../createAccount.css';

js/src/views/Accounts/CreateAccount/NewQr/newQr.js

@@ -17,7 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Form, Input, InputAddress, QrScan } from '~/ui';
+import { Form, Input, InputAddress, QrScan } from '@parity/ui';
 
 import ChangeVault from '../ChangeVault';
 

js/src/views/Accounts/CreateAccount/RawKey/rawKey.js

@@ -18,8 +18,8 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Form, Input } from '~/ui';
-import PasswordStrength from '~/ui/Form/PasswordStrength';
+import { Form, Input } from '@parity/ui';
+import PasswordStrength from '@parity/ui/Form/PasswordStrength';
 
 import ChangeVault from '../ChangeVault';
 import styles from '../createAccount.css';

js/src/views/Accounts/CreateAccount/RecoveryPhrase/recoveryPhrase.js

@@ -18,8 +18,8 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Checkbox, Form, Input } from '~/ui';
-import PasswordStrength from '~/ui/Form/PasswordStrength';
+import { Checkbox, Form, Input } from '@parity/ui';
+import PasswordStrength from '@parity/ui/Form/PasswordStrength';
 
 import ChangeVault from '../ChangeVault';
 import styles from '../createAccount.css';

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

@@ -16,7 +16,7 @@
 
 import React, { Component, PropTypes } from 'react';
 
-import { AccountsIcon, DoneIcon, FileIcon, FileUploadIcon, KeyboardIcon, KeyIcon, MembershipIcon, QrIcon } from '~/ui/Icons';
+import { AccountsIcon, DoneIcon, FileIcon, FileUploadIcon, KeyboardIcon, KeyIcon, MembershipIcon, QrIcon } from '@parity/ui/Icons';
 
 import { STAGE_INFO } from '../store';
 

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

@@ -80,16 +80,16 @@
 }
 
 .identities,
-.selector {
+.selector>div {
   display: flex;
 }
 
-.selector {
+.selector>div {
   margin-top: 1.5em;
 }
 
 .identities .identity,
-.selector .button {
+.selector>div>div {
   flex: 0 1 12.5%;
   width: 12.5% !important;
   text-align: center;

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

@@ -22,11 +22,10 @@ import { bindActionCreators } from 'redux';
 
 import { createIdentityImg } from '@parity/api/util/identity';
 import { newError } from '@parity/shared/redux/actions';
+import { Button, ModalBox, Portal } from '@parity/ui';
+import { CancelIcon, CheckIcon, DoneIcon, NextIcon, PrevIcon, PrintIcon } from '@parity/ui/Icons';
 
 import ParityLogo from '~/../assets/images/parity-logo-black-no-text.svg';
-import { Button, ModalBox, Portal } from '~/ui';
-import { CancelIcon, CheckIcon, DoneIcon, NextIcon, PrevIcon, PrintIcon } from '~/ui/Icons';
-
 import VaultStore from '~/views/Vaults/store';
 
 import AccountDetails from './AccountDetails';

js/src/views/Accounts/CreateWallet/WalletDetails/walletDetails.js

@@ -17,7 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Form, TypedInput, Input, AddressSelect, InputAddress } from '~/ui';
+import { Form, TypedInput, Input, AddressSelect, InputAddress } from '@parity/ui';
 
 import styles from '../createWallet.css';
 

js/src/views/Accounts/CreateWallet/WalletInfo/walletInfo.js

@@ -18,8 +18,7 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { fromWei } from '@parity/api/util/wei';
-
-import { CompletedStep, IdentityIcon, CopyToClipboard } from '~/ui';
+import { CompletedStep, IdentityIcon, CopyToClipboard } from '@parity/ui';
 
 import styles from '../createWallet.css';
 

js/src/views/Accounts/CreateWallet/WalletType/walletType.js

@@ -18,8 +18,7 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { walletSourceURL } from '@parity/shared/contracts/code/wallet';
-
-import { RadioButtons } from '~/ui';
+import { RadioButtons } from '@parity/ui';
 
 const TYPES = [
   {
@@ -83,7 +82,7 @@ export default class WalletType extends Component {
     );
   }
 
-  onTypeChange = (type) => {
-    this.props.onChange(type.key);
+  onTypeChange = (event, type) => {
+    this.props.onChange(type);
   }
 }

js/src/views/Accounts/CreateWallet/createWallet.js

@@ -21,9 +21,8 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { setRequest } from '@parity/shared/redux/providers/requestsActions';
-
-import { Button, Portal } from '~/ui';
-import { CancelIcon, DoneIcon, NextIcon } from '~/ui/Icons';
+import { Button, Portal } from '@parity/ui';
+import { CancelIcon, DoneIcon, NextIcon } from '@parity/ui/Icons';
 
 import WalletType from './WalletType';
 import WalletDetails from './WalletDetails';

js/src/views/Accounts/ExportAccount/exportAccount.js

@@ -22,9 +22,9 @@ import { bindActionCreators } from 'redux';
 
 import { newError } from '@parity/shared/redux/actions';
 import { personalAccountsInfo } from '@parity/shared/redux/providers/personalActions';
+import { AccountCard, Button, Portal, SelectionList } from '@parity/ui';
+import { CancelIcon, CheckIcon } from '@parity/ui/Icons';
 
-import { AccountCard, Button, Portal, SelectionList } from '~/ui';
-import { CancelIcon, CheckIcon } from '~/ui/Icons';
 import ExportInput from './exportInput';
 import ExportStore from './exportStore';
 

js/src/views/Accounts/ExportAccount/exportInput/exportInput.js

@@ -16,7 +16,8 @@
 
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Input } from '~/ui/Form';
+
+import { Input } from '@parity/ui/Form';
 
 export default class ExportInput extends Component {
   static propTypes = {

js/src/views/Accounts/List/list.js

@@ -21,8 +21,7 @@ import { bindActionCreators } from 'redux';
 
 import { ETH_TOKEN } from '@parity/shared/util/tokens';
 import { fetchCertifiers, fetchCertifications } from '@parity/shared/redux/providers/certifications/actions';
-
-import { Container, SectionList } from '~/ui';
+import { Container, SectionList } from '@parity/ui';
 
 import Summary from '../Summary';
 import styles from './list.css';

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

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

js/src/views/Accounts/accounts.js

@@ -24,9 +24,8 @@ import { bindActionCreators } from 'redux';
 
 import HardwareStore from '@parity/shared/mobx/hardwareStore';
 import { setVisibleAccounts } from '@parity/shared/redux/providers/personalActions';
-
-import { Actionbar, ActionbarSearch, ActionbarSort, Button, Page } from '~/ui';
-import { AddIcon, FileDownloadIcon } from '~/ui/Icons';
+import { Actionbar, ActionbarSearch, ActionbarSort, Button, Page } from '@parity/ui';
+import { AddIcon, FileDownloadIcon } from '@parity/ui/Icons';
 
 import CreateWallet from './CreateWallet';
 import CreateAccount from './CreateAccount';

js/src/views/Accounts/index.js

@@ -23,9 +23,8 @@ injectTapEventPlugin();
 
 import ContractInstances from '@parity/shared/contracts';
 import { initStore } from '@parity/shared/redux';
-
-import ContextProvider from '~/ui/ContextProvider';
-import muiTheme from '~/ui/Theme';
+import ContextProvider from '@parity/ui/ContextProvider';
+import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
 

js/src/views/Address/Delete/delete.js

@@ -20,8 +20,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { newError } from '@parity/shared/redux/actions';
-
-import { ConfirmDialog, IdentityIcon, IdentityName } from '~/ui';
+import { ConfirmDialog, IdentityIcon, IdentityName } from '@parity/ui';
 
 import styles from '../address.css';
 

js/src/views/Address/address.js

@@ -20,9 +20,8 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { setVisibleAccounts } from '@parity/shared/redux/providers/personalActions';
-
-import { Actionbar, Button, Page } from '~/ui';
-import { AddIcon, DeleteIcon, EditIcon } from '~/ui/Icons';
+import { Actionbar, Button, Page } from '@parity/ui';
+import { AddIcon, DeleteIcon, EditIcon } from '@parity/ui/Icons';
 
 import EditMeta from '../Account/EditMeta';
 import Header from '../Account/Header';

js/src/views/Address/index.js

@@ -23,12 +23,10 @@ injectTapEventPlugin();
 
 import ContractInstances from '@parity/shared/contracts';
 import { initStore } from '@parity/shared/redux';
+import ContextProvider from '@parity/ui/ContextProvider';
+import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
-
-import ContextProvider from '~/ui/ContextProvider';
-import muiTheme from '~/ui/Theme';
-
 import Address from './address';
 
 ContractInstances.get(api);

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

@@ -18,8 +18,8 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Button, Form, Input, InputAddress, ModalBox, Portal } from '~/ui';
-import { AddIcon, AddressIcon, CancelIcon } from '~/ui/Icons';
+import { Button, Form, Input, InputAddress, ModalBox, Portal } from '@parity/ui';
+import { AddIcon, AddressIcon, CancelIcon } from '@parity/ui/Icons';
 
 import Store from './store';
 

js/src/views/Addresses/addresses.js

@@ -21,9 +21,8 @@ import { bindActionCreators } from 'redux';
 import { uniq, isEqual } from 'lodash';
 
 import { setVisibleAccounts } from '@parity/shared/redux/providers/personalActions';
-
-import { Actionbar, ActionbarExport, ActionbarImport, ActionbarSearch, ActionbarSort, Button, Page } from '~/ui';
-import { AddIcon } from '~/ui/Icons';
+import { Actionbar, ActionbarExport, ActionbarImport, ActionbarSearch, ActionbarSort, Button, Page } from '@parity/ui';
+import { AddIcon } from '@parity/ui/Icons';
 
 import List from '../Accounts/List';
 import Summary from '../Accounts/Summary';

js/src/views/Addresses/index.js

@@ -23,12 +23,10 @@ injectTapEventPlugin();
 
 import ContractInstances from '@parity/shared/contracts';
 import { initStore } from '@parity/shared/redux';
+import ContextProvider from '@parity/ui/ContextProvider';
+import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
-
-import ContextProvider from '~/ui/ContextProvider';
-import muiTheme from '~/ui/Theme';
-
 import Addresses from './addresses';
 
 ContractInstances.get(api);

js/src/views/Contract/Events/Event/event.js

@@ -19,8 +19,8 @@ import moment from 'moment';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { IdentityIcon, IdentityName, TypedInput } from '~/ui';
-import ShortenedHash from '~/ui/ShortenedHash';
+import { IdentityIcon, IdentityName, ShortenedHash, TypedInput } from '@parity/ui';
+
 import { txLink } from '~/3rdparty/etherscan/links';
 
 import styles from '../../contract.css';

js/src/views/Contract/Events/events.js

@@ -18,7 +18,7 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { uniq } from 'lodash';
 
-import { Container, Loading } from '~/ui';
+import { Container, Loading } from '@parity/ui';
 
 import Event from './Event';
 import styles from '../contract.css';

js/src/views/Contract/ExecuteContract/AdvancedStep/advancedStep.js

@@ -16,7 +16,7 @@
 
 import React, { Component, PropTypes } from 'react';
 
-import { GasPriceEditor } from '~/ui';
+import { GasPriceEditor } from '@parity/ui';
 
 import styles from '../executeContract.css';
 

js/src/views/Contract/ExecuteContract/DetailsStep/detailsStep.js

@@ -17,7 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { AddressSelect, Checkbox, Dropdown, Form, Input, TypedInput } from '~/ui';
+import { AddressSelect, Checkbox, Dropdown, Form, Input, TypedInput } from '@parity/ui';
 
 import styles from '../executeContract.css';
 

js/src/views/Contract/ExecuteContract/executeContract.js

@@ -23,9 +23,8 @@ import { toWei } from '@parity/api/util/wei';
 import { MAX_GAS_ESTIMATION } from '@parity/shared/util/constants';
 import { validateAddress, validateUint } from '@parity/shared/util/validation';
 import { parseAbiType } from '@parity/shared/util/abi';
-
-import { Button, GasPriceEditor, IdentityIcon, Portal, Warning } from '~/ui';
-import { CancelIcon, NextIcon, PrevIcon } from '~/ui/Icons';
+import { Button, GasPriceEditor, IdentityIcon, Portal, Warning } from '@parity/ui';
+import { CancelIcon, NextIcon, PrevIcon } from '@parity/ui/Icons';
 
 import AdvancedStep from './AdvancedStep';
 import DetailsStep from './DetailsStep';

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

@@ -23,8 +23,7 @@ import { bindActionCreators } from 'redux';
 import { newError } from '@parity/shared/redux/actions';
 import { arrayOrObjectProptype } from '@parity/shared/util/proptypes';
 import { parseAbiType } from '@parity/shared/util/abi';
-
-import { Button, Container, Progress, TypedInput } from '~/ui';
+import { Button, Container, Progress, TypedInput } from '@parity/ui';
 
 import styles from './queries.css';
 

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

@@ -17,8 +17,9 @@
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
+import { Container, TypedInput } from '@parity/ui';
+
 import InputQuery from './inputQuery';
-import { Container, TypedInput } from '~/ui';
 
 import styles from './queries.css';
 

js/src/views/Contract/contract.js

@@ -22,10 +22,9 @@ import BigNumber from 'bignumber.js';
 
 import { newError } from '@parity/shared/redux/actions';
 import { setVisibleAccounts } from '@parity/shared/redux/providers/personalActions';
-
-import { Actionbar, Button, Page, Portal } from '~/ui';
-import { CancelIcon, DeleteIcon, EditIcon, PlayIcon, VisibleIcon } from '~/ui/Icons';
-import Editor from '~/ui/Editor';
+import { Actionbar, Button, Page, Portal } from '@parity/ui';
+import { CancelIcon, DeleteIcon, EditIcon, PlayIcon, VisibleIcon } from '@parity/ui/Icons';
+import Editor from '@parity/ui/Editor';
 
 import EditMeta from '../Account/EditMeta';
 import Header from '../Account/Header';

js/src/views/Contract/index.js

@@ -23,12 +23,10 @@ injectTapEventPlugin();
 
 import ContractInstances from '@parity/shared/contracts';
 import { initStore } from '@parity/shared/redux';
+import ContextProvider from '@parity/ui/ContextProvider';
+import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
-
-import ContextProvider from '~/ui/ContextProvider';
-import muiTheme from '~/ui/Theme';
-
 import Contract from './contract';
 
 ContractInstances.get(api);

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

@@ -20,9 +20,9 @@ import moment from 'moment';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Button, Portal } from '~/ui';
-import Editor from '~/ui/Editor';
-import { CancelIcon, CheckIcon, DeleteIcon } from '~/ui/Icons';
+import { Button, Portal } from '@parity/ui';
+import Editor from '@parity/ui/Editor';
+import { CancelIcon, CheckIcon, DeleteIcon } from '@parity/ui/Icons';
 
 import styles from './loadContract.css';
 

js/src/views/ContractDevelop/SaveContract/saveContract.js

@@ -18,10 +18,9 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { ERRORS, validateName } from '@parity/shared/util/validation';
-
-import { Button, Form, Input, Portal } from '~/ui';
-import Editor from '~/ui/Editor';
-import { CancelIcon, SaveIcon } from '~/ui/Icons';
+import { Button, Form, Input, Portal } from '@parity/ui';
+import Editor from '@parity/ui/Editor';
+import { CancelIcon, SaveIcon } from '@parity/ui/Icons';
 
 import styles from './saveContract.css';
 

js/src/views/ContractDevelop/contractDevelop.js

@@ -21,9 +21,9 @@ import { connect } from 'react-redux';
 import moment from 'moment';
 import { throttle } from 'lodash';
 
-import { Actionbar, ActionbarExport, ActionbarImport, Button, Dropdown, Input, Loading, Page, Toggle } from '~/ui';
-import { CancelIcon, ListIcon, SaveIcon, SendIcon, SettingsIcon } from '~/ui/Icons';
-import Editor from '~/ui/Editor';
+import { Actionbar, ActionbarExport, ActionbarImport, Button, Dropdown, Input, Loading, Page, Toggle } from '@parity/ui';
+import { CancelIcon, ListIcon, SaveIcon, SendIcon, SettingsIcon } from '@parity/ui/Icons';
+import Editor from '@parity/ui/Editor';
 
 import DeployContract from '../Contracts/DeployContract';
 import LoadContract from './LoadContract';

js/src/views/ContractDevelop/index.js

@@ -22,12 +22,11 @@ import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
 
 import { initStore } from '@parity/shared/redux';
+import ContextProvider from '@parity/ui/ContextProvider';
+import muiTheme from '@parity/ui/Theme';
 
 import { api } from './parity';
 
-import ContextProvider from '~/ui/ContextProvider';
-import muiTheme from '~/ui/Theme';
-
 import ContractDevelop from './contractDevelop';
 
 const store = initStore(api, hashHistory);

js/src/views/Contracts/AddContract/addContract.js

@@ -21,9 +21,8 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { newError } from '@parity/shared/redux/actions';
-
-import { Button, Form, Input, InputAddress, Portal, RadioButtons } from '~/ui';
-import { AddIcon, CancelIcon, NextIcon, PrevIcon } from '~/ui/Icons';
+import { Button, Form, Input, InputAddress, Portal, RadioButtons } from '@parity/ui';
+import { AddIcon, CancelIcon, NextIcon, PrevIcon } from '@parity/ui/Icons';
 
 import Store from './store';
 
@@ -81,12 +80,12 @@ class AddContract extends Component {
   }
 
   renderContractTypeSelector () {
-    const { abiTypeIndex, abiTypes } = this.store;
+    const { abiType, abiTypes } = this.store;
 
     return (
       <RadioButtons
         name='contractType'
-        value={ abiTypeIndex }
+        value={ abiType }
         values={ abiTypes }
         onChange={ this.onChangeABIType }
       />
@@ -242,8 +241,8 @@ class AddContract extends Component {
     this.store.prevStep();
   }
 
-  onChangeABIType = (value, index) => {
-    this.store.setAbiTypeIndex(index);
+  onChangeABIType = (event, abiType) => {
+    this.store.setAbiType(abiType);
   }
 
   onEditAbi = (abi) => {

js/src/views/Contracts/AddContract/store.js

@@ -25,7 +25,7 @@ export default class Store {
   @observable abiError = ERRORS.invalidAbi;
   @observable abiParsed = null;
   @observable abiTypes = ABI_TYPES;
-  @observable abiTypeIndex = 0;
+  @observable abiType = 'custom';
   @observable address = '';
   @observable addressError = ERRORS.invalidAddress;
   @observable description = '';
@@ -36,12 +36,6 @@ export default class Store {
   constructor (api, contracts) {
     this._api = api;
     this._contracts = contracts;
-
-    this.setAbiTypeIndex(2);
-  }
-
-  @computed get abiType () {
-    return this.abiTypes[this.abiTypeIndex];
   }
 
   @computed get hasError () {
@@ -66,10 +60,10 @@ export default class Store {
     });
   }
 
-  @action setAbiTypeIndex = (abiTypeIndex) => {
+  @action setAbiType = (abiType) => {
     transaction(() => {
-      this.abiTypeIndex = abiTypeIndex;
-      this.setAbi(this.abiTypes[abiTypeIndex].value);
+      this.abiType = abiType;
+      this.setAbi(this.abiTypes.find((abi) => abi.key === abiType).value);
     });
   }
 

js/src/views/Contracts/AddContract/store.spec.js

@@ -30,7 +30,7 @@ function createStore () {
   store = new Store(api, CONTRACTS);
 }
 
-describe('modals/AddContract/Store', () => {
+describe('views/Contracts/AddContract/Store', () => {
   beforeEach(() => {
     createStore();
   });
@@ -41,7 +41,7 @@ describe('modals/AddContract/Store', () => {
     });
 
     it('defaults to custom ABI', () => {
-      expect(store.abiType.type).to.equal('custom');
+      expect(store.abiType).to.equal('custom');
     });
   });
 
@@ -56,13 +56,13 @@ describe('modals/AddContract/Store', () => {
       });
     });
 
-    describe('setAbiTypeIndex', () => {
+    describe('setAbiType', () => {
       beforeEach(() => {
-        store.setAbiTypeIndex(1);
+        store.setAbiType('multisig');
       });
 
-      it('changes the index', () => {
-        expect(store.abiTypeIndex).to.equal(1);
+      it('changes the type', () => {
+        expect(store.abiType).to.equal('multisig');
       });
 
       it('changes the abi', () => {
@@ -113,12 +113,6 @@ describe('modals/AddContract/Store', () => {
   });
 
   describe('@computed', () => {
-    describe('abiType', () => {
-      it('matches the index', () => {
-        expect(store.abiType).to.deep.equal(store.abiTypes[2]);
-      });
-    });
-
     describe('hasError', () => {
       beforeEach(() => {
         store.setAddress(VALID_ADDR);

js/src/views/Contracts/AddContract/types.js

@@ -44,6 +44,7 @@ const ABI_TYPES = [
       />
     ),
     readOnly: true,
+    key: 'token',
     type: 'token',
     value: JSON.stringify(eip20)
   },
@@ -71,6 +72,7 @@ const ABI_TYPES = [
       />
     ),
     readOnly: true,
+    key: 'multisig',
     type: 'multisig',
     value: JSON.stringify(wallet)
   },
@@ -87,6 +89,7 @@ const ABI_TYPES = [
         defaultMessage='Custom Contract'
       />
     ),
+    key: 'custom',
     type: 'custom',
     value: ''
   }