Initial new UI source code import (#2607)

* address -> name mappings * expanding, loading all coin details * send use only actual BasicCoin tokens registered (any reg) * sending token & accounts * form styling updates * send form layout in place * coin send working as expected * api subscriptions on multiple addresses * bring in events * simplify * basic events display in-place, functionally complete * basic functionality in-place * fix horrible event address issue * rwork display of events slightly * test TLA availability * table for owner -> tokens * fix signature lookup address * fix signature lookup address * basic overview styling * txhash links * page layout adjustments * background import * adjust colors * no global registration, simplify color selection * updated styling * connection dialog for "busy connecting" * initial token connection - WIP * init token updates take place * basic test for manual token * rework connection display * allow updates of the secure token * first stab at making the build build * update runner tags * fix linting issues * skip tests requiring network (should be e2e, TODO) * re-enable javascript tag/runner * release push does the trick * push to any branch, CI name * javscript-test runner as well * swap dependencies build requires test * revert stages swap * retrieve images associated with tokens * remove js build deps order * null image when hash = 0x0 * 6x64 images (hashes for registries) * don't pass tokens as prop to IdentityIcon * check images against content hash pictures * cleanup signer after connection changes * fix naming typo * display unknownImages for balances (not available as content hash) * unknownImage for transfer dialog * basic githubhint layout * single input for commit/filename * ethcore_hashContent call * lookup hash * registration in place * fixes * events is using a proper table * pass value through as-is * stop wrongly using main app IdentityIcon * NEVER export class instance functions * alignment back to normal * typo in definition * set & get images working (mostly) * show content retrieval info * set exitcode via || * use javascript:latest images * disable npm progress bar * rename phase I * rename phase II * only send build output to GitHub on major branches * also run the build step as part of the test (until comprehensive) * ci-specific build (no webpack progress) * allow for account creation via recovery phrase * display account uuid (where available), closes #2546 * connection dialog now shows up in dapps as well, closes #2538 * token images show up as expected * IdentityName component added and deployed * fix padding tests * adjust tests to map to stricter 0x-prefixed hex * render names via common component for the address -> name * split lint into seperate script (early exit) * test phases changed to lint, test & pack * pack part of test phase * remove files marked for deletion (cleanup) * Signer cleanups, start moving in the direction of the rest * add personal signer methods * basic signer request subscription * don't poll blockNumber when not connected * missing return, creating massive ws queue backlogs * ΞTH -> ETH * fix failing tests * registry uses setAddress to actually set addresses now * bytes mapping operates on lowerCase hex strings * sha3 ids for each application * add dappreg to list of contracts * adjust alignment of queries * show gas estimation log * abi with payable for register function * add key as required * image retrieval from dappreg * use proper Image urls * embed and link apps from Parity, retrieved via /api/apps * filter apps that has been replaced * proxy entry for parity-utils * add basiccoin abi * add support for fallback abi type * capture constructor paramaters * merge master into js * move images to assets/images/ * add font assets * import fonts as part of build * don't inline woff files * Revert "merge master into js" This reverts commit cfcfa81bd26f1b3cbc748d3afa1eb5c670b363fe. * remove unused npm packages * information on gas estimates (like almost everywhere else) * don't pass gas & gasPrice to estimation * display account passwordhint when available * signer subscriptions based on polling & function trapping * pending requests retrieved via jsapi * update signer middleware * remove all web3 instances * remove web3 package * last web3 dependencies removed * no need to toChecksumAddress - api takes care of it * expand description for personal_confirmRequest * Signer conversion from web3 -> parity.js completed * explicit in no return * green circle background * remove generated background * convert /api/* paths to localhost:8080/api/* paths (hard-coded, temporary) * change dapps to load from localhost:8080/ui/* * remove dangling web3 files * update manager test for signer * /api/ping -> / * additional token images * additional token images * add missing styles.css for 8180 error pages * cater for txhash returning null/empty object * adjust output directories * Release merge with origin with ours strategy * additional token images * cater for development server * s/localhost/127.0.0.1/ (cater for origin) * Fix address selection for contract deployment * Adjust z-index for error overlay * better text on unique background pattern * fix signer rejections * Don't allow gavcoin transfer with no balance * fix txhash rendering in signer * remove unnecessary ParityBackground * script to update js-precompiled * Redirect from :8080 to :8180 * Remove extra return * Dapp logo images
2016-10-18 11:52:56 +02:00
parent 6c7af57529
commit 1e6a2cb378
969 changed files with 57315 additions and 0 deletions
--- a/js/src/dapps/basiccoin/Transfer/Event/event.js
+++ b/js/src/dapps/basiccoin/Transfer/Event/event.js
@@ -0,0 +1,106 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+// TODO: This is a copy & paste for Deploy/Event -> render() different. Not very DRY
+import moment from 'moment';
+import React, { Component, PropTypes } from 'react';
+
+import { api } from '../../parity';
+import { txLink } from '../../services';
+import IdentityIcon from '../../IdentityIcon';
+import styles from '../../Deploy/Event/event.css';
+
+export default class Event extends Component {
+  static contextTypes = {
+    accounts: PropTypes.object.isRequired,
+    registryInstance: PropTypes.object.isRequired,
+    tokenregInstance: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    event: PropTypes.object.isRequired,
+    token: PropTypes.object.isRequired
+  }
+
+  state = {
+    block: null
+  }
+
+  componentDidMount () {
+    this.lookup();
+  }
+
+  render () {
+    const { event, token } = this.props;
+    const { block } = this.state;
+    const isPending = event.type === 'pending';
+
+    return (
+      <tr className={ isPending ? styles.pending : styles.mined }>
+        <td className={ styles.blocknumber }>
+          <div>{ (isPending || !block) ? '' : moment(block.timestamp).fromNow() }</div>
+          <div>{ isPending ? 'Pending' : event.blockNumber.toFormat() }</div>
+        </td>
+        <td>{ event.event }</td>
+        <td className={ styles.description }>
+          <div>{ isPending ? '' : token.coin.tla }</div>
+          <div>{ isPending ? '' : token.coin.name }</div>
+        </td>
+        <td className={ styles.address }>
+          { this.renderAddress(event.params.from) }
+        </td>
+        <td className={ styles.value }>
+          <div>{ event.params.value.div(1000000).toFormat(6) }</div>
+          <div>⇒</div>
+          <div><a href={ txLink(event.transactionHash) } target='_blank' className={ styles.link }>{ this.renderHash(event.transactionHash) }</a></div>
+        </td>
+        <td className={ styles.address }>
+          { this.renderAddress(event.params.to) }
+        </td>
+      </tr>
+    );
+  }
+
+  renderAddress (address) {
+    const { accounts } = this.context;
+    const account = accounts[address];
+
+    return (
+      <div>
+        <IdentityIcon address={ address } />
+        <span>{ account ? account.name : address }</span>
+      </div>
+    );
+  }
+
+  renderHash (hash) {
+    return `${hash.substr(0, 10)}...${hash.slice(-10)}`;
+  }
+
+  lookup () {
+    const { event } = this.props;
+
+    if (event.type === 'pending') {
+      return;
+    }
+
+    api.eth
+      .getBlockByNumber(event.blockNumber)
+      .then((block) => {
+        this.setState({ block });
+      });
+  }
+}
--- a/js/src/dapps/basiccoin/Transfer/Event/index.js
+++ b/js/src/dapps/basiccoin/Transfer/Event/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './event';
--- a/js/src/dapps/basiccoin/Transfer/Events/events.js
+++ b/js/src/dapps/basiccoin/Transfer/Events/events.js
@@ -0,0 +1,145 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component } from 'react';
+
+import { api } from '../../parity';
+import { loadAllTokens, subscribeEvents, unsubscribeEvents } from '../../services';
+import Container from '../../Container';
+import Event from '../Event';
+
+import styles from '../../Deploy/Events/events.css';
+
+export default class Events extends Component {
+  state = {
+    subscriptionId: 0,
+    loading: true,
+    events: [],
+    pendingEvents: [],
+    minedEvents: [],
+    tokens: []
+  }
+
+  componentDidMount () {
+    loadAllTokens()
+      .then((tokens) => {
+        const addresses = tokens.map((token) => token.address);
+        this.setState({ tokens });
+        return subscribeEvents(addresses, this.eventCallback);
+      })
+      .then((subscriptionId) => {
+        this.setState({ subscriptionId, loading: false });
+      })
+      .catch((error) => {
+        console.error('componentDidMount', error);
+      });
+  }
+
+  componentWillUnmount () {
+    const { subscriptionId } = this.state;
+
+    if (subscriptionId) {
+      unsubscribeEvents(subscriptionId);
+    }
+  }
+
+  render () {
+    const { loading } = this.state;
+
+    return (
+      <Container>
+        { loading ? this.renderLoading() : this.renderEvents() }
+      </Container>
+    );
+  }
+
+  renderLoading () {
+    return (
+      <div className={ styles.statusHeader }>
+        Attaching events
+      </div>
+    );
+  }
+
+  renderEvents () {
+    const { events } = this.state;
+
+    return events.length
+      ? this.renderEventsList()
+      : this.renderEventsNone();
+  }
+
+  renderEventsNone () {
+    return (
+      <div className={ styles.statusHeader }>
+        There are currently no events available
+      </div>
+    );
+  }
+
+  renderEventsList () {
+    const { events, tokens } = this.state;
+    const rows = events.map((event) => {
+      const token = tokens.find((token) => token.address === event.address);
+
+      return (
+        <Event
+          key={ event.key }
+          token={ token }
+          event={ event } />
+      );
+    });
+
+    return (
+      <table className={ styles.eventList }>
+        <tbody>
+          { rows }
+        </tbody>
+      </table>
+    );
+  }
+
+  logToEvent = (log) => {
+    log.key = api.util.sha3(JSON.stringify(log));
+
+    return log;
+  }
+
+  eventCallback = (error, logs) => {
+    if (error) {
+      console.error('eventCallback', error);
+      return;
+    }
+
+    const { minedEvents, pendingEvents } = this.state;
+    const minedNew = logs
+      .filter((log) => log.type === 'mined')
+      .map(this.logToEvent)
+      .filter((log) => !minedEvents.find((event) => event.transactionHash === log.transactionHash))
+      .reverse()
+      .concat(minedEvents);
+    const pendingNew = logs
+      .filter((log) => log.type === 'pending')
+      .map(this.logToEvent)
+      .filter((log) => !pendingEvents.find((event) => event.transactionHash === log.transactionHash))
+      .reverse()
+      .concat(pendingEvents)
+      .filter((log) => !minedNew.find((event) => event.transactionHash === log.transactionHash));
+    const events = [].concat(pendingNew).concat(minedNew);
+    console.log('*** events', events.map((event) => event.address));
+    this.setState({ loading: false, events, minedEvents: minedNew, pendingEvents: pendingNew });
+  }
+}
--- a/js/src/dapps/basiccoin/Transfer/Events/index.js
+++ b/js/src/dapps/basiccoin/Transfer/Events/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './events';
--- a/js/src/dapps/basiccoin/Transfer/Send/index.js
+++ b/js/src/dapps/basiccoin/Transfer/Send/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './send';
--- a/js/src/dapps/basiccoin/Transfer/Send/send.css
+++ b/js/src/dapps/basiccoin/Transfer/Send/send.css
@@ -0,0 +1,19 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+@import '../../_form.css';
+@import '../../_status.css';
--- a/js/src/dapps/basiccoin/Transfer/Send/send.js
+++ b/js/src/dapps/basiccoin/Transfer/Send/send.js
@@ -0,0 +1,327 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import BigNumber from 'bignumber.js';
+import React, { Component, PropTypes } from 'react';
+
+import { eip20 } from '../../../../contracts/abi';
+
+import { api } from '../../parity';
+import { loadBalances } from '../../services';
+import AddressSelect from '../../AddressSelect';
+import Container from '../../Container';
+
+import styles from './send.css';
+
+export default class Send extends Component {
+  static contextTypes = {
+    accounts: PropTypes.object.isRequired
+  }
+
+  state = {
+    loading: true,
+    tokens: null,
+    selectedToken: null,
+    availableBalances: [],
+    fromAddress: null,
+    fromBalance: null,
+    toAddress: null,
+    toKnown: true,
+    amount: 0,
+    amountError: null,
+    sendBusy: false,
+    sendError: null,
+    sendState: null,
+    sendDone: false,
+    signerRequestId: null,
+    txHash: null,
+    txReceipt: null
+  }
+
+  componentDidMount () {
+    this.loadBalances();
+    this.onAmountChange({ target: { value: '0' } });
+  }
+
+  render () {
+    const { loading } = this.state;
+
+    return loading
+      ? this.renderLoading()
+      : this.renderBody();
+  }
+
+  renderBody () {
+    const { sendBusy } = this.state;
+
+    return sendBusy
+      ? this.renderSending()
+      : this.renderForm();
+  }
+
+  renderSending () {
+    const { sendDone, sendError, sendState } = this.state;
+
+    if (sendDone) {
+      return (
+        <Container>
+          <div className={ styles.statusHeader }>
+            Your token value transfer has been completed
+          </div>
+        </Container>
+      );
+    }
+
+    if (sendError) {
+      return (
+        <Container>
+          <div className={ styles.statusHeader }>
+            Your deployment has encountered an error
+          </div>
+          <div className={ styles.statusError }>
+            { sendError }
+          </div>
+        </Container>
+      );
+    }
+
+    return (
+      <Container>
+        <div className={ styles.statusHeader }>
+          Your token value is being transferred
+        </div>
+        <div className={ styles.statusState }>
+          { sendState }
+        </div>
+      </Container>
+    );
+  }
+
+  renderLoading () {
+    return (
+      <Container>
+        <div className={ styles.statusHeader }>
+          Loading available tokens
+        </div>
+      </Container>
+    );
+  }
+
+  renderForm () {
+    const { accounts } = this.context;
+    const { availableBalances, fromAddress, amount, amountError, toKnown, toAddress } = this.state;
+    const fromBalance = availableBalances.find((balance) => balance.address === fromAddress);
+    const fromAddresses = availableBalances.map((balance) => balance.address);
+    const toAddresses = Object.keys(accounts);
+    const toInput = toKnown
+      ? <AddressSelect addresses={ toAddresses } onChange={ this.onChangeTo } />
+      : <input value={ toAddress } onChange={ this.onChangeTo } />;
+    const hasError = amountError;
+    const error = `${styles.input} ${styles.error}`;
+    const maxAmountHint = `Value to transfer (max: ${fromBalance ? fromBalance.balance.div(1000000).toFormat(6) : '1'})`;
+
+    return (
+      <Container>
+        <div className={ styles.form }>
+          <div className={ styles.input }>
+            <label>token type</label>
+            <select onChange={ this.onSelectToken }>
+              { this.renderTokens() }
+            </select>
+            <div className={ styles.hint }>
+              type of token to transfer
+            </div>
+          </div>
+          <div className={ styles.input }>
+            <label>transfer from</label>
+            <AddressSelect
+              addresses={ fromAddresses }
+              onChange={ this.onSelectFrom } />
+            <div className={ styles.hint }>
+              account to transfer from
+            </div>
+          </div>
+          <div className={ styles.input }>
+            <label>transfer to</label>
+            <select onChange={ this.onChangeToType }>
+              <option value='known'>Known, Select from list</option>
+              <option value='unknown'>Unknown, Keyboard input</option>
+            </select>
+            <div className={ styles.hint }>
+              the type of address input
+            </div>
+          </div>
+          <div className={ styles.input }>
+            <label />
+            { toInput }
+            <div className={ styles.hint }>
+              account to transfer to
+            </div>
+          </div>
+          <div className={ amountError ? error : styles.input }>
+            <label>amount</label>
+            <input
+              type='number'
+              min='0'
+              step='0.1'
+              value={ amount }
+              max={ fromBalance ? fromBalance.balance.div(1000000).toFixed(6) : 1 }
+              onChange={ this.onAmountChange } />
+            <div className={ styles.hint }>
+              { amountError || maxAmountHint }
+            </div>
+          </div>
+          <div className={ styles.input }>
+            <label />
+            <div className={ styles.buttonRow }>
+              <div
+                className={ styles.button }
+                disabled={ hasError }
+                onClick={ this.onSend }>
+                Transfer Tokens
+              </div>
+            </div>
+          </div>
+        </div>
+      </Container>
+    );
+  }
+
+  renderTokens () {
+    const { tokens } = this.state;
+
+    return tokens.map((token) => (
+      <option
+        key={ token.address }
+        value={ token.address }>
+        { token.coin.tla } / { token.coin.name }
+      </option>
+    ));
+  }
+
+  onSelectFrom = (event) => {
+    const fromAddress = event.target.value;
+
+    this.setState({ fromAddress });
+  }
+
+  onChangeTo = (event) => {
+    const toAddress = event.target.value;
+
+    this.setState({ toAddress });
+  }
+
+  onChangeToType = (event) => {
+    const toKnown = event.target.value === 'known';
+
+    this.setState({ toKnown });
+  }
+
+  onSelectToken = (event) => {
+    const { tokens } = this.state;
+    const address = event.target.value;
+    const selectedToken = tokens.find((_token) => _token.address === address);
+    const availableBalances = selectedToken.balances.filter((balance) => balance.balance.gt(0));
+
+    this.setState({ selectedToken, availableBalances });
+    this.onSelectFrom({ target: { value: availableBalances[0].address } });
+  }
+
+  onAmountChange = (event) => {
+    const amount = parseFloat(event.target.value);
+    const amountError = !isFinite(amount) || amount <= 0
+      ? 'amount needs to be > 0'
+      : null;
+
+    this.setState({ amount, amountError });
+  }
+
+  onSend = () => {
+    const { amount, fromAddress, toAddress, amountError, selectedToken, sendBusy } = this.state;
+    const hasError = amountError;
+
+    if (hasError || sendBusy) {
+      return;
+    }
+
+    const values = [toAddress, new BigNumber(amount).mul(1000000).toFixed(0)];
+    const options = {
+      from: fromAddress
+    };
+    const instance = api.newContract(eip20, selectedToken.address).instance;
+
+    this.setState({ sendBusy: true, sendState: 'Estimating gas for the transaction' });
+
+    instance
+      .transfer.estimateGas(options, values)
+      .then((gas) => {
+        this.setState({ sendState: 'Gas estimated, Posting transaction to the network' });
+
+        const gasPassed = gas.mul(1.2);
+        options.gas = gasPassed.toFixed(0);
+        console.log(`gas estimated at ${gas.toFormat(0)}, passing ${gasPassed.toFormat(0)}`);
+
+        return instance.transfer.postTransaction(options, values);
+      })
+      .then((signerRequestId) => {
+        this.setState({ signerRequestId, sendState: 'Transaction posted, Waiting for transaction authorization' });
+
+        return api.pollMethod('eth_checkRequest', signerRequestId);
+      })
+      .then((txHash) => {
+        this.setState({ txHash, sendState: 'Transaction authorized, Waiting for network confirmations' });
+
+        return api.pollMethod('eth_getTransactionReceipt', txHash, (receipt) => {
+          if (!receipt || !receipt.blockNumber || receipt.blockNumber.eq(0)) {
+            return false;
+          }
+
+          return true;
+        });
+      })
+      .then((txReceipt) => {
+        this.setState({ txReceipt, sendDone: true, sendState: 'Network confirmed, Received transaction receipt' });
+      })
+      .catch((error) => {
+        console.error('onSend', error);
+        this.setState({ sendError: error.message });
+      });
+  }
+
+  loadBalances () {
+    const { accounts } = this.context;
+    const myAccounts = Object
+      .values(accounts)
+      .filter((account) => account.uuid)
+      .map((account) => account.address);
+
+    loadBalances(myAccounts)
+      .then((_tokens) => {
+        const tokens = _tokens.filter((token) => {
+          for (let index = 0; index < token.balances.length; index++) {
+            if (token.balances[index].balance.gt(0)) {
+              return true;
+            }
+          }
+
+          return false;
+        });
+
+        this.setState({ tokens, loading: false });
+        this.onSelectToken({ target: { value: tokens[0].address } });
+      });
+  }
+}
--- a/js/src/dapps/basiccoin/Transfer/index.js
+++ b/js/src/dapps/basiccoin/Transfer/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './transfer';
--- a/js/src/dapps/basiccoin/Transfer/transfer.js
+++ b/js/src/dapps/basiccoin/Transfer/transfer.js
@@ -0,0 +1,31 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component } from 'react';
+
+import Events from './Events';
+import Send from './Send';
+
+export default class Transfer extends Component {
+  render () {
+    return (
+      <div>
+        <Send />
+        <Events />
+      </div>
+    );
+  }
+}