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/githubhint/Application/application.css
+++ b/js/src/dapps/githubhint/Application/application.css
@@ -0,0 +1,121 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.container {
+  background: #333;
+  font-family: 'Roboto';
+  vertical-align: middle;
+  padding: 4em 0;
+  text-align: center;
+}
+
+.form {
+  text-align: right;
+  margin: 0 auto;
+  border-radius: 5px;
+  width: 44em;
+  color: #eee;
+}
+
+.box {
+  padding: 2em;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 5px;
+  margin-bottom: 2em;
+}
+
+.buttons {
+  text-align: center;
+  margin: 0 auto 2em auto;
+}
+
+.box .buttons {
+  text-align: right;
+  margin: 2em 0 0 0;
+  position: relative;
+}
+
+.box .buttons .addressSelect {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.box .description {
+  margin: 0 0 2em 0;
+  text-align: center;
+  opacity: 0.75;
+}
+
+.progress {
+  margin: 2em 0 0 0;
+  opacity: 0.75;
+  text-align: center;
+}
+
+.statusHeader {
+  font-size: 1em;
+}
+
+.statusState, .statusError {
+  padding: 1em 0 0 0;
+}
+
+.statusError {
+  color: #f66;
+}
+
+.capture {
+}
+
+.capture * {
+  display: inline-block;
+  padding: 0.75em;
+  vertical-align: middle;
+  box-sizing: border-box;
+  width: 20em;
+}
+
+.capture input {
+  color: #333;
+  background: #eee;
+  border: none;
+  border-radius: 5px;
+  width: 100%;
+  font-size: 1em;
+  text-align: center;
+}
+
+.capture input[disabled] {
+  opacity: 0.5;
+}
+
+.capture input.error {
+  background: #fcc;
+}
+
+.hashError {
+  padding-top: 0.5em;
+  color: #f66;
+  text-align: center;
+}
+
+.hashOk {
+  padding-top: 0.5em;
+  opacity: 0.5;
+  text-align: center;
+}
--- a/js/src/dapps/githubhint/Application/application.js
+++ b/js/src/dapps/githubhint/Application/application.js
@@ -0,0 +1,261 @@
+// 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 { attachInterface } from '../services';
+import Button from '../Button';
+import IdentityIcon from '../IdentityIcon';
+import Loading from '../Loading';
+
+import styles from './application.css';
+
+const INVALID_URL_HASH = '0xc5d2460186f7233c927e7db2dcc703c0e500b653ca82273b7bfad8045d85a470';
+const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000';
+
+export default class Application extends Component {
+  state = {
+    loading: true,
+    url: '',
+    urlError: null,
+    contentHash: '',
+    contentHashError: null,
+    registerBusy: false,
+    registerError: null,
+    registerState: ''
+  }
+
+  componentDidMount () {
+    attachInterface()
+      .then((state) => {
+        this.setState(state, () => {
+          this.setState({ loading: false });
+        });
+      });
+  }
+
+  render () {
+    const { loading } = this.state;
+
+    return loading
+      ? this.renderLoading()
+      : this.renderPage();
+  }
+
+  renderLoading () {
+    return (
+      <Loading />
+    );
+  }
+
+  renderPage () {
+    const { registerBusy, url, urlError, contentHash, contentHashError } = this.state;
+
+    return (
+      <div className={ styles.container }>
+        <div className={ styles.form }>
+          <div className={ styles.box }>
+            <div className={ styles.description }>
+              Provide a valid URL to register. The content information can be used in other contracts that allows for reverse lookups, e.g. image registries, dapp registries, etc.
+            </div>
+            <div className={ styles.capture }>
+              <input
+                type='text'
+                placeholder='http://domain/filename'
+                disabled={ registerBusy }
+                value={ url }
+                className={ urlError ? styles.error : null }
+                onChange={ this.onChangeUrl } />
+            </div>
+            <div className={ contentHashError ? styles.hashError : styles.hashOk }>
+              { contentHashError || contentHash }
+            </div>
+            { registerBusy ? this.renderProgress() : this.renderButtons() }
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  renderButtons () {
+    const { accounts, fromAddress, url, urlError, contentHashError } = this.state;
+    const account = accounts[fromAddress];
+
+    return (
+      <div className={ styles.buttons }>
+        <div className={ styles.addressSelect }>
+          <Button invert onClick={ this.onSelectFromAddress }>
+            <IdentityIcon address={ account.address } />
+            <div>{ account.name || account.address }</div>
+          </Button>
+        </div>
+        <Button
+          onClick={ this.onClickRegister }
+          disabled={ !!contentHashError || !!urlError || url.length === 0 }>register url</Button>
+      </div>
+    );
+  }
+
+  renderProgress () {
+    const { registerError, registerState } = this.state;
+
+    if (registerError) {
+      return (
+        <div className={ styles.progress }>
+          <div className={ styles.statusHeader }>
+            Your registration has encountered an error
+          </div>
+          <div className={ styles.statusError }>
+            { registerError }
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className={ styles.progress }>
+        <div className={ styles.statusHeader }>
+          Your URL is being registered
+        </div>
+        <div className={ styles.statusState }>
+          { registerState }
+        </div>
+      </div>
+    );
+  }
+
+  onClickContentHash = () => {
+    this.setState({ fileHash: false, commit: '' });
+  }
+
+  onClickFileHash = () => {
+    this.setState({ fileHash: true, commit: 0 });
+  }
+
+  onChangeUrl = (event) => {
+    const url = event.target.value;
+    let urlError = null;
+
+    if (url && url.length) {
+      var re = /^https?:\/\/(?:www\.|(?!www))[^\s\.]+\.[^\s]{2,}/g;
+      urlError = re.test(url)
+        ? null
+        : 'not matching rexex';
+    }
+
+    this.setState({ url, urlError, contentHashError: 'hash lookup in progress' }, () => {
+      this.lookupHash();
+    });
+  }
+
+  onClickRegister = () => {
+    const { url, urlError, contentHash, contentHashError, fromAddress, instance } = this.state;
+
+    if (!!contentHashError || !!urlError || url.length === 0) {
+      return;
+    }
+
+    this.setState({ registerBusy: true, registerState: 'Estimating gas for the transaction' });
+
+    const values = [contentHash, url];
+    const options = { from: fromAddress };
+
+    instance
+      .hintURL.estimateGas(options, values)
+      .then((gas) => {
+        this.setState({ registerState: '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.hintURL.postTransaction(options, values);
+      })
+      .then((signerRequestId) => {
+        this.setState({ signerRequestId, registerState: 'Transaction posted, Waiting for transaction authorization' });
+
+        return api.pollMethod('eth_checkRequest', signerRequestId);
+      })
+      .then((txHash) => {
+        this.setState({ txHash, registerState: '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, registerBusy: false, registerState: 'Network confirmed, Received transaction receipt', url: '', contentHash: '' });
+      })
+      .catch((error) => {
+        console.error('onSend', error);
+        this.setState({ registerError: error.message });
+      });
+  }
+
+  onSelectFromAddress = () => {
+    const { accounts, fromAddress } = this.state;
+    const addresses = Object.keys(accounts);
+    let index = 0;
+
+    addresses.forEach((address, _index) => {
+      if (address === fromAddress) {
+        index = _index;
+      }
+    });
+
+    index++;
+    if (index >= addresses.length) {
+      index = 0;
+    }
+
+    this.setState({ fromAddress: addresses[index] });
+  }
+
+  lookupHash () {
+    const { url, instance } = this.state;
+
+    api.ethcore
+      .hashContent(url)
+      .then((contentHash) => {
+        console.log('lookupHash', contentHash);
+        if (contentHash === INVALID_URL_HASH) {
+          this.setState({ contentHashError: 'invalid url endpoint', contentHash: null });
+          return;
+        }
+
+        instance.entries
+          .call({}, [contentHash])
+          .then(([accountSlashRepo, commit, owner]) => {
+            console.log('lookupHash', accountSlashRepo, api.util.bytesToHex(commit), owner);
+
+            if (owner !== ZERO_ADDRESS) {
+              this.setState({ contentHashError: contentHash, contentHash: null });
+            } else {
+              this.setState({ contentHashError: null, contentHash });
+            }
+          });
+      })
+      .catch((error) => {
+        console.error('lookupHash', error);
+        this.setState({ contentHashError: error.message, contentHash: null });
+      });
+  }
+}
--- a/js/src/dapps/githubhint/Application/index.js
+++ b/js/src/dapps/githubhint/Application/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 './application';
--- a/js/src/dapps/githubhint/Button/button.css
+++ b/js/src/dapps/githubhint/Button/button.css
@@ -0,0 +1,56 @@
+/* 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/>.
+*/
+
+.button {
+  background: #08a;
+  color: white;
+  border-radius: 5px;
+  font-size: 1em;
+  line-height: 24px;
+  height: 24px;
+  padding: 0.75em 1.5em;
+  cursor: pointer;
+  display: inline-block;
+  text-align: center;
+}
+
+.button.first {
+  border-radius: 5px 0 0 5px;
+}
+
+.button.middle {
+  border-radius: 0;
+}
+
+.button.last {
+  border-radius: 0 5px 5px 0;
+}
+
+.button.disabled {
+  opacity: 0.25;
+  cursor: default;
+}
+
+.button.inverse {
+  color: #08a;
+  background: white;
+}
+
+.button * {
+  display: inline-block;
+  vertical-align: top;
+}
--- a/js/src/dapps/githubhint/Button/button.js
+++ b/js/src/dapps/githubhint/Button/button.js
@@ -0,0 +1,53 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import styles from './button.css';
+
+export default class Button extends Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    invert: PropTypes.bool,
+    first: PropTypes.bool,
+    last: PropTypes.bool,
+    middle: PropTypes.bool,
+    onClick: PropTypes.func.isRequired
+  }
+
+  render () {
+    const { children, className, disabled, invert, first, last, middle } = this.props;
+    const classes = `${styles.button} ${disabled ? styles.disabled : ''} ${invert ? styles.inverse : ''} ${first ? styles.first : ''} ${last ? styles.last : ''} ${middle ? styles.middle : ''} ${className}`;
+
+    return (
+      <div className={ classes } onTouchTap={ this.onClick }>
+        { children }
+      </div>
+    );
+  }
+
+  onClick = (event) => {
+    const { disabled, onClick } = this.props;
+
+    if (disabled) {
+      return;
+    }
+
+    onClick(event);
+  }
+}
--- a/js/src/dapps/githubhint/Button/index.js
+++ b/js/src/dapps/githubhint/Button/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 './button';
--- a/js/src/dapps/githubhint/IdentityIcon/identityIcon.css
+++ b/js/src/dapps/githubhint/IdentityIcon/identityIcon.css
@@ -0,0 +1,23 @@
+/* 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/>.
+*/
+
+.icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  margin-right: 0.5em;
+}
--- a/js/src/dapps/githubhint/IdentityIcon/identityIcon.js
+++ b/js/src/dapps/githubhint/IdentityIcon/identityIcon.js
@@ -0,0 +1,36 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import { api } from '../parity';
+import styles from './identityIcon.css';
+
+export default class IdentityIcon extends Component {
+  static propTypes = {
+    address: PropTypes.string.isRequired
+  }
+
+  render () {
+    const { address } = this.props;
+
+    return (
+      <img
+        className={ styles.icon }
+        src={ api.util.createIdentityImg(address, 3) } />
+    );
+  }
+}
--- a/js/src/dapps/githubhint/IdentityIcon/index.js
+++ b/js/src/dapps/githubhint/IdentityIcon/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 './identityIcon';
--- a/js/src/dapps/githubhint/Loading/index.js
+++ b/js/src/dapps/githubhint/Loading/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 './loading';
--- a/js/src/dapps/githubhint/Loading/loading.css
+++ b/js/src/dapps/githubhint/Loading/loading.css
@@ -0,0 +1,24 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.loading {
+  width: 100%;
+  text-align: center;
+  padding-top: 5em;
+  font-size: 2em;
+  color: #999;
+}
--- a/js/src/dapps/githubhint/Loading/loading.js
+++ b/js/src/dapps/githubhint/Loading/loading.js
@@ -0,0 +1,29 @@
+// 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 styles from './loading.css';
+
+export default class Loading extends Component {
+  render () {
+    return (
+      <div className={ styles.loading }>
+        Attaching to contract ...
+      </div>
+    );
+  }
+}
--- a/js/src/dapps/githubhint/parity.js
+++ b/js/src/dapps/githubhint/parity.js
@@ -0,0 +1,21 @@
+// 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/>.
+
+const { api } = window.parity;
+
+export {
+  api
+};
--- a/js/src/dapps/githubhint/services.js
+++ b/js/src/dapps/githubhint/services.js
@@ -0,0 +1,64 @@
+// 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 * as abis from '../../contracts/abi';
+import { api } from './parity';
+
+export function attachInterface () {
+  return api.ethcore
+    .registryAddress()
+    .then((registryAddress) => {
+      console.log(`the registry was found at ${registryAddress}`);
+
+      const registry = api.newContract(abis.registry, registryAddress).instance;
+
+      return Promise
+        .all([
+          registry.getAddress.call({}, [api.util.sha3('githubhint'), 'A']),
+          api.personal.listAccounts(),
+          api.personal.accountsInfo()
+        ]);
+    })
+    .then(([address, addresses, accountsInfo]) => {
+      console.log(`githubhint was found at ${address}`);
+
+      const contract = api.newContract(abis.githubhint, address);
+      const accounts = addresses.reduce((obj, address) => {
+        const info = accountsInfo[address];
+
+        return Object.assign(obj, {
+          [address]: {
+            address,
+            name: info.name || 'Unnamed',
+            uuid: info.uuid
+          }
+        });
+      }, {});
+      const fromAddress = Object.keys(accounts)[0];
+
+      return {
+        accounts,
+        address,
+        accountsInfo,
+        contract,
+        instance: contract.instance,
+        fromAddress
+      };
+    })
+    .catch((error) => {
+      console.error('attachInterface', error);
+    });
+}