Ui 2 cleanups (unused components, shared assets) (#5636)

* Remove unused components

* Move to dapp/index.js

* Move assets to @parity/shared

js/src/dapps/chaindeploy/index.js

@@ -17,11 +17,11 @@
 import ReactDOM from 'react-dom';
 import React from 'react';
 
-import Application from './chaindeploy/Application';
+import Application from './Application';
 
-import '../../assets/fonts/Roboto/font.css';
-import '../../assets/fonts/RobotoMono/font.css';
-import './style.css';
+import '@parity/shared/assets/fonts/Roboto/font.css';
+import '@parity/shared/assets/fonts/RobotoMono/font.css';
+import '../style.css';
 
 ReactDOM.render(
   <Application />,

js/src/dapps/dappreg/CreateDappCard/createDappCard.js

@@ -20,7 +20,7 @@ import DappsStore from '../dappsStore';
 import Card from '../Card';
 import ModalRegister from '../ModalRegister';
 
-import PlusImage from '~/../assets/images/dapps/plus.svg';
+import PlusImage from '@parity/shared/assets/images/dapps/plus.svg';
 
 export default class CreateDappCard extends Component {
   state = {

js/src/dapps/dappreg/Modal/modal.js

@@ -21,7 +21,7 @@ import ReactDOM from 'react-dom';
 import Button from '../Button';
 
 import styles from './modal.css';
-import CloseImage from '~/../assets/images/dapps/close.svg';
+import CloseImage from '@parity/shared/assets/images/dapps/close.svg';
 
 export default class Modal extends Component {
   static propTypes = {

js/src/dapps/dappreg/index.js

@@ -21,11 +21,11 @@ import { AppContainer } from 'react-hot-loader';
 
 injectTapEventPlugin();
 
-import Application from './dappreg/Application';
+import Application from './Application';
 
-import '../../assets/fonts/Roboto/font.css';
-import '../../assets/fonts/RobotoMono/font.css';
-import './style.css';
+import '@parity/shared/assets/fonts/Roboto/font.css';
+import '@parity/shared/assets/fonts/RobotoMono/font.css';
+import '../style.css';
 
 ReactDOM.render(
   <AppContainer>
@@ -35,8 +35,8 @@ ReactDOM.render(
 );
 
 if (module.hot) {
-  module.hot.accept('./dappreg/Application/index.js', () => {
-    require('./dappreg/Application/index.js');
+  module.hot.accept('./Application/index.js', () => {
+    require('./Application/index.js');
 
     ReactDOM.render(
       <AppContainer>

js/src/dapps/githubhint/index.js

@@ -21,11 +21,11 @@ import { AppContainer } from 'react-hot-loader';
 import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
 
-import Application from './localtx/Application';
+import Application from './Application';
 
-import '../../assets/fonts/Roboto/font.css';
-import '../../assets/fonts/RobotoMono/font.css';
-import './style.css';
+import '@parity/shared/assets/fonts/Roboto/font.css';
+import '@parity/shared/assets/fonts/RobotoMono/font.css';
+import '../style.css';
 
 ReactDOM.render(
   <AppContainer>
@@ -35,8 +35,8 @@ ReactDOM.render(
 );
 
 if (module.hot) {
-  module.hot.accept('./localtx/Application/index.js', () => {
-    require('./localtx/Application/index.js');
+  module.hot.accept('./Application/index.js', () => {
+    require('./Application/index.js');
 
     ReactDOM.render(
       <AppContainer>

js/src/dapps/localtx/index.js

@@ -21,11 +21,11 @@ import { AppContainer } from 'react-hot-loader';
 import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
 
-import Application from './githubhint/Application';
+import Application from './Application';
 
-import '../../assets/fonts/Roboto/font.css';
-import '../../assets/fonts/RobotoMono/font.css';
-import './style.css';
+import '@parity/shared/assets/fonts/Roboto/font.css';
+import '@parity/shared/assets/fonts/RobotoMono/font.css';
+import '../style.css';
 
 ReactDOM.render(
   <AppContainer>
@@ -35,8 +35,8 @@ ReactDOM.render(
 );
 
 if (module.hot) {
-  module.hot.accept('./githubhint/Application/index.js', () => {
-    require('./githubhint/Application/index.js');
+  module.hot.accept('./Application/index.js', () => {
+    require('./Application/index.js');
 
     ReactDOM.render(
       <AppContainer>

js/src/dapps/registry/index.js

@@ -21,12 +21,12 @@ import { Provider } from 'react-redux';
 import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
 
-import store from './registry/store';
-import Container from './registry/Container';
+import store from './store';
+import Container from './Container';
 
-import '../../assets/fonts/Roboto/font.css';
-import '../../assets/fonts/RobotoMono/font.css';
-import './style.css';
+import '@parity/shared/assets/fonts/Roboto/font.css';
+import '@parity/shared/assets/fonts/RobotoMono/font.css';
+import '../style.css';
 
 ReactDOM.render(
   <Provider store={ store }>
@@ -36,8 +36,8 @@ ReactDOM.render(
 );
 
 if (module.hot) {
-  module.hot.accept('./registry/Container', () => {
-    require('./registry/Container');
+  module.hot.accept('./Container', () => {
+    require('./Container');
 
     ReactDOM.render(
       <Provider store={ store }>

js/src/dapps/signaturereg/Header/header.js

@@ -17,7 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 
 import styles from './header.css';
-import blocks from '~/../assets/images/dapps/blocks-350.jpg';
+import blocks from '@parity/shared/assets/images/dapps/blocks-350.jpg';
 
 export default class Header extends Component {
   static propTypes = {

js/src/dapps/signaturereg/index.js

@@ -21,11 +21,11 @@ import { AppContainer } from 'react-hot-loader';
 import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
 
-import Application from './signaturereg/Application';
+import Application from './Application';
 
-import '../../assets/fonts/Roboto/font.css';
-import '../../assets/fonts/RobotoMono/font.css';
-import './style.css';
+import '@parity/shared/assets/fonts/Roboto/font.css';
+import '@parity/shared/assets/fonts/RobotoMono/font.css';
+import '../style.css';
 
 ReactDOM.render(
   <AppContainer>
@@ -35,8 +35,8 @@ ReactDOM.render(
 );
 
 if (module.hot) {
-  module.hot.accept('./signaturereg/Application/index.js', () => {
-    require('./signaturereg/Application/index.js');
+  module.hot.accept('./Application/index.js', () => {
+    require('./Application/index.js');
 
     ReactDOM.render(
       <AppContainer>

js/src/dapps/tokendeploy/index.js

@@ -22,14 +22,14 @@ import { AppContainer } from 'react-hot-loader';
 import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
 
-import Deploy from './tokendeploy/Deploy';
-import Application from './tokendeploy/Application';
-import Overview from './tokendeploy/Overview';
-import Transfer from './tokendeploy/Transfer';
+import Deploy from './Deploy';
+import Application from './Application';
+import Overview from './Overview';
+import Transfer from './Transfer';
 
-import '../../assets/fonts/Roboto/font.css';
-import '../../assets/fonts/RobotoMono/font.css';
-import './style.css';
+import '@parity/shared/assets/fonts/Roboto/font.css';
+import '@parity/shared/assets/fonts/RobotoMono/font.css';
+import '../style.css';
 
 ReactDOM.render(
   <AppContainer>
@@ -46,10 +46,10 @@ ReactDOM.render(
 );
 
 if (module.hot) {
-  module.hot.accept('./tokendeploy/Application/index.js', () => {
-    require('./tokendeploy/Application/index.js');
-    require('./tokendeploy/Overview/index.js');
-    require('./tokendeploy/Transfer/index.js');
+  module.hot.accept('./Application/index.js', () => {
+    require('./Application/index.js');
+    require('./Overview/index.js');
+    require('./Transfer/index.js');
 
     ReactDOM.render(
       <AppContainer>

js/src/dapps/tokenreg/index.js

@@ -22,12 +22,12 @@ import { AppContainer } from 'react-hot-loader';
 import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
 
-import store from './tokenreg/store';
-import Container from './tokenreg/Container';
+import store from './store';
+import Container from './Container';
 
-import '../../assets/fonts/Roboto/font.css';
-import '../../assets/fonts/RobotoMono/font.css';
-import './style.css';
+import '@parity/shared/assets/fonts/Roboto/font.css';
+import '@parity/shared/assets/fonts/RobotoMono/font.css';
+import '../style.css';
 
 ReactDOM.render(
   <AppContainer>
@@ -39,8 +39,8 @@ ReactDOM.render(
 );
 
 if (module.hot) {
-  module.hot.accept('./tokenreg/Container.js', () => {
-    require('./tokenreg/Container.js');
+  module.hot.accept('./Container.js', () => {
+    require('./Container.js');
 
     ReactDOM.render(
       <AppContainer>

js/src/shared/redux/actions.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 { newError } from '~/ui/Errors/actions';
+import { newError } from '@parity/ui/Errors/actions';
 
 import { openSnackbar, showSnackbar } from './providers/snackbarActions';
 import { toggleStatusRefresh } from './providers/statusActions';

js/src/shared/redux/middleware.js

@@ -16,7 +16,7 @@
 import thunk from 'redux-thunk';
 import { routerMiddleware } from 'react-router-redux';
 
-import ErrorsMiddleware from '~/ui/Errors/middleware';
+import ErrorsMiddleware from '@parity/ui/Errors/middleware';
 
 import SettingsMiddleware from './providers/settings/middleware';
 import SignerMiddleware from './providers/signerMiddleware';

js/src/shared/redux/providers/personalActions.js

@@ -24,7 +24,7 @@ import BalancesProvider from './balances';
 import { updateTokensFilter } from './balancesActions';
 import { attachWallets } from './walletActions';
 
-import MethodDecodingStore from '~/ui/MethodDecoding/methodDecodingStore';
+import MethodDecodingStore from '@parity/ui/MethodDecoding/methodDecodingStore';
 
 export function personalAccountsInfo (accountsInfo) {
   const accounts = {};

js/src/shared/redux/providers/tokensActions.js

@@ -16,11 +16,11 @@
 
 import { uniq } from 'lodash';
 
-import { LOG_KEYS, getLogger } from '@parity/shared/config';
-import Contracts from '@parity/shared/contracts';
-import { fetchTokenIds, fetchTokenInfo } from '@parity/shared/util/tokens';
+import { IconCache } from '@parity/ui';
 
-import { IconCache } from '~/ui';
+import { LOG_KEYS, getLogger } from '~/shared/config';
+import Contracts from '~/shared/contracts';
+import { fetchTokenIds, fetchTokenInfo } from '~/shared/util/tokens';
 
 import { updateTokensFilter } from './balancesActions';
 

js/src/shared/redux/providers/walletActions.js

@@ -19,11 +19,11 @@ import { isEqual, uniq } from 'lodash';
 import Contract from '@parity/api/contract';
 import { ERROR_CODES } from '@parity/api/transport/error';
 import { bytesToHex, toHex } from '@parity/api/util/format';
-import { wallet as WALLET_ABI } from '@parity/shared/contracts/abi';
-import { MAX_GAS_ESTIMATION } from '@parity/shared/util/constants';
-import WalletsUtils from '@parity/shared/util/wallets';
+import { newError } from '@parity/ui/Errors/actions';
 
-import { newError } from '~/ui/Errors/actions';
+import { wallet as WALLET_ABI } from '~/shared/contracts/abi';
+import { MAX_GAS_ESTIMATION } from '~/shared/util/constants';
+import WalletsUtils from '~/shared/util/wallets';
 
 const UPDATE_OWNERS = 'owners';
 const UPDATE_REQUIRE = 'require';

js/src/shared/redux/reducers.js

@@ -26,7 +26,7 @@ import {
 import certificationsReducer from './providers/certifications/reducer';
 import registryReducer from './providers/registry/reducer';
 
-import errorReducer from '~/ui/Errors/reducers';
+import errorReducer from '@parity/ui/Errors/reducers';
 
 export default function () {
   return combineReducers({

js/src/shared/redux/util.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 { withError } from '~/ui/Errors/middleware';
+import { withError } from '@parity/ui/Errors/middleware';
 
 export {
   withError

js/src/shared/util/dapps.js

@@ -18,10 +18,10 @@ import BigNumber from 'bignumber.js';
 import { pick, range, uniq } from 'lodash';
 
 import { bytesToHex } from '@parity/api/util/format';
-import builtinJson from '@parity/shared/config/dappsBuiltin.json';
-import viewsJson from '@parity/shared/config/dappsViews.json';
+import { IconCache } from '@parity/ui';
 
-import { IconCache } from '~/ui';
+import builtinJson from '~/shared/config/dappsBuiltin.json';
+import viewsJson from '~/shared/config/dappsViews.json';
 
 import Contracts from '../contracts';
 

js/src/shared/util/notifications.js

@@ -17,7 +17,7 @@
 import Push from 'push.js';
 import BigNumber from 'bignumber.js';
 
-import unkownIcon from '~/../assets/images/contracts/unknown-64x64.png';
+import unkownIcon from '~/shared/assets/images/contracts/unknown-64x64.png';
 
 export function notifyTransaction (account, token, _value, onClick) {
   const name = account.name || account.address;

js/src/shared/util/tokens.js

@@ -18,9 +18,9 @@ import { range } from 'lodash';
 import BigNumber from 'bignumber.js';
 
 import { sha3 } from '@parity/api/util/sha3';
+import { IconCache } from '@parity/ui';
 
-import imagesEthereum from '~/../assets/images/contracts/ethereum-black-64x64.png';
-import { IconCache } from '~/ui';
+import imagesEthereum from '~/shared/assets/images/contracts/ethereum-black-64x64.png';
 
 const BALANCEOF_SIGNATURE = sha3('balanceOf(address)');
 const ADDRESS_PADDING = range(24).map(() => '0').join('');

js/src/shell/FirstRun/Welcome/welcome.js

@@ -17,7 +17,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import imagesEthcore from '~/../assets/images/parity-logo-white.svg';
+import imagesEthcore from '@parity/shared/assets/images/parity-logo-white.svg';
 
 import styles from '../firstRun.css';
 

js/src/shell/FirstRun/firstRun.js

@@ -25,7 +25,7 @@ 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 ParityLogo from '@parity/shared/assets/images/parity-logo-black-no-text.svg';
 
 // 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

@@ -26,7 +26,7 @@ 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 imagesEthcoreBlock from '@parity/shared/assets/images/parity-logo-white-no-text.svg';
 
 import DappsStore from '~/shell/Dapps/dappsStore';
 import Signer from '~/shell/Signer/Embedded';

js/src/shell/embed.js

@@ -34,8 +34,8 @@ import SecureApi from '~/secureApi';
 
 import '@parity/shared/environment';
 
-import '~/../assets/fonts/Roboto/font.css';
-import '~/../assets/fonts/RobotoMono/font.css';
+import '@parity/shared/assets/fonts/Roboto/font.css';
+import '@parity/shared/assets/fonts/RobotoMono/font.css';
 
 injectTapEventPlugin();
 

js/src/ui/Certifications/certifications.js

@@ -17,7 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 
-import defaultIcon from '~/../assets/images/certifications/unknown.svg';
+import defaultIcon from '@parity/shared/assets/images/certifications/unknown.svg';
 import IconCache from '~/ui/IconCache';
 
 import styles from './certifications.css';

js/src/ui/Form/FormWrap/formWrap.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/>.
-*/
-.stretch {
-  width: 75%;
-  clear: both;
-}
-
-.stretch input {
-  width: 100%;
-}

js/src/ui/Form/FormWrap/formWrap.js

@@ -1,33 +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/>.
-
-import React, { Component, PropTypes } from 'react';
-
-import styles from './formWrap.css';
-
-export default class FormWrap extends Component {
-  static propTypes = {
-    children: PropTypes.node
-  }
-
-  render () {
-    return (
-      <div className={ styles.stretch }>
-        { this.props.children }
-      </div>
-    );
-  }
-}

js/src/ui/Form/FormWrap/index.js

@@ -1,17 +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/>.
-
-export default from './formWrap';

js/src/ui/Form/InputAddressSelect/inputAddressSelect.js

@@ -14,51 +14,47 @@
 // 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 React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 
 import { nodeOrStringProptype } from '@parity/shared/util/proptypes';
 
 import AddressSelect from '../AddressSelect';
 
-class InputAddressSelect extends Component {
-  static propTypes = {
-    accounts: PropTypes.object.isRequired,
-    contacts: PropTypes.object.isRequired,
-    contracts: PropTypes.object.isRequired,
-
-    allowCopy: PropTypes.bool,
-    className: PropTypes.string,
-    error: nodeOrStringProptype(),
-    hint: nodeOrStringProptype(),
-    label: nodeOrStringProptype(),
-    onChange: PropTypes.func,
-    readOnly: PropTypes.bool,
-    value: PropTypes.string
-  };
-
-  render () {
-    const { accounts, allowCopy, className, contacts, contracts, label, hint, error, value, onChange, readOnly } = this.props;
-
-    return (
-      <AddressSelect
-        allowCopy={ allowCopy }
-        allowInput
-        accounts={ accounts }
-        className={ className }
-        contacts={ contacts }
-        contracts={ contracts }
-        error={ error }
-        hint={ hint }
-        label={ label }
-        onChange={ onChange }
-        readOnly={ readOnly }
-        value={ value }
-      />
-    );
-  }
+function InputAddressSelect ({ accounts, allowCopy, className, contacts, contracts, label, hint, error, value, onChange, readOnly }) {
+  return (
+    <AddressSelect
+      allowCopy={ allowCopy }
+      allowInput
+      accounts={ accounts }
+      className={ className }
+      contacts={ contacts }
+      contracts={ contracts }
+      error={ error }
+      hint={ hint }
+      label={ label }
+      onChange={ onChange }
+      readOnly={ readOnly }
+      value={ value }
+    />
+  );
 }
 
+InputAddressSelect.propTypes = {
+  accounts: PropTypes.object.isRequired,
+  contacts: PropTypes.object.isRequired,
+  contracts: PropTypes.object.isRequired,
+
+  allowCopy: PropTypes.bool,
+  className: PropTypes.string,
+  error: nodeOrStringProptype(),
+  hint: nodeOrStringProptype(),
+  label: nodeOrStringProptype(),
+  onChange: PropTypes.func,
+  readOnly: PropTypes.bool,
+  value: PropTypes.string
+};
+
 function mapStateToProps (state) {
   const { accounts, contacts, contracts } = state.personal;
 

js/src/ui/Form/InputInline/index.js

@@ -1,17 +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/>.
-
-export default from './inputInline';

js/src/ui/Form/InputInline/inputInline.css

@@ -1,19 +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/>.
-*/
-.inlineedit {
-  cursor: pointer;
-}

js/src/ui/Form/InputInline/inputInline.js

@@ -1,96 +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/>.
-
-import React, { Component, PropTypes } from 'react';
-
-import { nodeOrStringProptype } from '@parity/shared/util/proptypes';
-
-import Input from '../Input';
-
-import styles from './inputInline.css';
-
-export default class InputInline extends Component {
-  static propTypes = {
-    error: PropTypes.string,
-    hint: PropTypes.string,
-    label: PropTypes.string,
-    onBlur: PropTypes.func,
-    onChange: PropTypes.func,
-    onSubmit: PropTypes.func,
-    onKeyDown: PropTypes.func,
-    type: PropTypes.string,
-    value: PropTypes.oneOfType([
-      PropTypes.number, PropTypes.string
-    ]),
-    static: nodeOrStringProptype()
-  }
-
-  state = {
-    editing: false
-  }
-
-  render () {
-    const { editing } = this.state;
-    const { error, label, hint, type, value } = this.props;
-
-    if (!editing) {
-      return (
-        <div
-          className={ styles.inlineedit }
-          onClick={ this.onToggle }
-        >
-          { this.props.static || value }
-        </div>
-      );
-    }
-
-    return (
-      <Input
-        error={ error }
-        label={ label }
-        hint={ hint }
-        type={ type }
-        value={ value }
-        onBlur={ this.onBlur }
-        onChange={ this.props.onChange }
-        onKeyDown={ this.onKeyDown }
-        onSubmit={ this.props.onSubmit }
-      />
-    );
-  }
-
-  onBlur = () => {
-    this.onToggle();
-
-    if (this.props.onBlur) {
-      this.props.onBlur();
-    }
-  }
-
-  onToggle = () => {
-    this.setState({
-      editing: !this.state.editing
-    });
-  }
-
-  onKeyDown = (event) => {
-    if (event.keyCode === 13) {
-      this.onToggle();
-    }
-
-    this.props.onKeyDown && this.props.onKeyDown(event);
-  }
-}

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

@@ -14,27 +14,23 @@
 // 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 React, { PropTypes } from 'react';
 
 import styles from './label.css';
 
-export default class Label extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    label: PropTypes.node
+export default function Label ({ className, label }) {
+  if (!label) {
+    return null;
   }
 
-  render () {
-    const { className, label } = this.props;
-
-    if (!label) {
-      return null;
-    }
-
-    return (
-      <label className={ [styles.label, className].join(' ') }>
-        { label }
-      </label>
-    );
-  }
+  return (
+    <label className={ [styles.label, className].join(' ') }>
+      { label }
+    </label>
+  );
 }
+
+Label.propTypes = {
+  className: PropTypes.string,
+  label: PropTypes.node
+};

js/src/ui/Form/index.js

@@ -19,13 +19,11 @@ export Checkbox from './Checkbox';
 export DappUrlInput from './DappUrlInput';
 export Dropdown from './Dropdown';
 export FileSelect from './FileSelect';
-export FormWrap from './FormWrap';
 export Input from './Input';
 export InputAddress from './InputAddress';
 export InputAddressSelect from './InputAddressSelect';
 export InputChip from './InputChip';
 export InputDateTime from './InputDateTime';
-export InputInline from './InputInline';
 export Label from './Label';
 export RadioButtons from './RadioButtons';
 export Toggle from './Toggle';

js/src/ui/Portal/portal.js

@@ -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/>.
 
+// TODO: semantic-ui-react exposes Portal component, use that
 import React, { Component, PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import ReactPortal from 'react-portal';
@@ -70,7 +71,7 @@ export default class Portal extends Component {
   }
 
   render () {
-    const { activeStep, busy, busySteps, children, className, isChildModal, isSmallModal, open, steps, title } = this.props;
+    const { activeStep, busy, busySteps, buttons, children, className, hideClose, isChildModal, isSmallModal, open, steps, title } = this.props;
 
     if (!open) {
       return null;
@@ -99,7 +100,16 @@ export default class Portal extends Component {
             onKeyDown={ this.handleKeyDown }
           >
             <StackEventListener onKeyUp={ this.handleKeyUp } />
-            { this.renderClose() }
+            {
+              !hideClose && (
+                <div
+                  className={ styles.closeIcon }
+                  onClick={ this.handleClose }
+                >
+                  <CloseIcon />
+                </div>
+              )
+            }
             <Title
               activeStep={ activeStep }
               busy={ busy }
@@ -111,44 +121,19 @@ export default class Portal extends Component {
             <div className={ styles.childContainer }>
               { children }
             </div>
-            { this.renderButtons() }
+            {
+              buttons && (
+                <div className={ styles.buttonRow }>
+                  { buttons }
+                </div>
+              )
+            }
           </div>
         </div>
       </ReactPortal>
     );
   }
 
-  renderButtons () {
-    const { buttons } = this.props;
-
-    if (!buttons) {
-      return null;
-    }
-
-    return (
-      <div className={ styles.buttonRow }>
-        { buttons }
-      </div>
-    );
-  }
-
-  renderClose () {
-    const { hideClose } = this.props;
-
-    if (hideClose) {
-      return null;
-    }
-
-    return (
-      <div
-        className={ styles.closeIcon }
-        onClick={ this.handleClose }
-      >
-        <CloseIcon />
-      </div>
-    );
-  }
-
   stopEvent = (event) => {
     event.stopPropagation();
   }

js/src/ui/ScrollableText/scrollableText.js

@@ -18,16 +18,10 @@ import React, { PropTypes } from 'react';
 
 import styles from './scrollableText.css';
 
-export default function ScrollableText ({ small = false, text }) {
-  const classes = [ styles.input ];
-
-  if (small) {
-    classes.push(styles.small);
-  }
-
+export default function ScrollableText ({ small, text }) {
   return (
     <input
-      className={ classes.join(' ') }
+      className={ `${styles.input} ${small && styles.small}` }
       readOnly
       value={ text }
     />

js/src/ui/TokenImage/tokenImage.js

@@ -16,7 +16,7 @@
 
 import React, { PropTypes } from 'react';
 
-import unknownImage from '~/../assets/images/contracts/unknown-64x64.png';
+import unknownImage from '@parity/shared/assets/images/contracts/unknown-64x64.png';
 import IconCache from '~/ui/IconCache';
 
 const iconCache = IconCache.get();

js/src/ui/VaultCard/Accounts/accounts.js

@@ -41,20 +41,18 @@ export default function Accounts ({ accounts, hideAccounts }) {
   return (
     <div className={ styles.accounts }>
       {
-        accounts.map((address) => {
-          return (
-            <DappLink
-              key={ address }
-              to={ `/accounts/${address}` }
-            >
-              <IdentityIcon
-                address={ address }
-                center
-                className={ styles.account }
-              />
-            </DappLink>
-          );
-        })
+        accounts.map((address) => (
+          <DappLink
+            key={ address }
+            to={ `/accounts/${address}` }
+          >
+            <IdentityIcon
+              address={ address }
+              center
+              className={ styles.account }
+            />
+          </DappLink>
+        ))
       }
     </div>
   );

js/src/ui/VaultCard/vaultCard.js

@@ -31,14 +31,12 @@ export default function VaultCard ({ accounts, buttons, children, hideAccounts,
     <Container
       className={ styles.container }
       hover={
-        isOpen
-          ? (
-            <Accounts
-              accounts={ accounts }
-              hideAccounts={ hideAccounts }
-            />
-          )
-          : null
+        isOpen && (
+          <Accounts
+            accounts={ accounts }
+            hideAccounts={ hideAccounts }
+          />
+        )
       }
     >
       <Buttons

js/src/ui/index.js

@@ -33,7 +33,7 @@ export DappIcon from './DappIcon';
 export DappLink from './DappLink';
 export Errors from './Errors';
 export Features, { FEATURES, FeaturesStore } from './Features';
-export Form, { AddressSelect, Checkbox, DappUrlInput, Dropdown, FileSelect, FormWrap, Input, InputAddress, InputAddressSelect, InputChip, InputDateTime, InputInline, Label, RadioButtons, Slider, Toggle, TypedInput, VaultSelect } from './Form';
+export Form, { AddressSelect, Checkbox, DappUrlInput, Dropdown, FileSelect, Input, InputAddress, InputAddressSelect, InputChip, InputDateTime, Label, RadioButtons, Slider, Toggle, TypedInput, VaultSelect } from './Form';
 export GasPriceEditor from './GasPriceEditor';
 export GasPriceSelector from './GasPriceSelector';
 export IconCache from './IconCache';