Refactoring of the Dapp Registry

js/src/contracts/registry.js

@@ -16,7 +16,14 @@
 
 import * as abis from './abi';
 
+const REGISTRY_V1_HASHES = [
+  '0x34f7c51bbb1b1902fbdabfdf04811100f5c9f998f26dd535d2f6f977492c748e', // ropsten
+  '0x64c3ee34851517a9faecd995c102b339f03e564ad6772dc43a26f993238b20ec' // homestead
+];
+
 export default class Registry {
+  _registryContract = null;
+
   constructor (api) {
     this._api = api;
 
@@ -43,11 +50,10 @@ export default class Registry {
 
     this._fetching = true;
 
-    return this._api.parity
-      .registryAddress()
-      .then((address) => {
+    return this.fetchContract()
+      .then((contract) => {
         this._fetching = false;
-        this._instance = this._api.newContract(abis.registry, address).instance;
+        this._instance = contract.instance;
 
         this._queue.forEach((queued) => {
           queued.resolve(this._instance);
@@ -89,6 +95,47 @@ export default class Registry {
       .then((contract) => contract.instance);
   }
 
+  fetchContract () {
+    if (this._registryContract) {
+      return Promise.resolve(this._registryContract);
+    }
+
+    return this._api.parity
+      .registryAddress()
+      .then((address) => Promise.all([ address, this._api.eth.getCode(address) ]))
+      .then(([ address, code ]) => {
+        const codeHash = this._api.util.sha3(code);
+        const version = REGISTRY_V1_HASHES.includes(codeHash)
+          ? 1
+          : 2;
+        const abi = version === 1
+            ? abis.registry
+            : abis.registry2;
+        const contract = this._api.newContract(abi, address);
+
+        // Add support for previous `set` and `get` methods
+        if (!contract.instance.get && contract.instance.getData) {
+          contract.instance.get = contract.instance.getData;
+        }
+
+        if (contract.instance.get && !contract.instance.getData) {
+          contract.instance.getData = contract.instance.get;
+        }
+
+        if (!contract.instance.set && contract.instance.setData) {
+          contract.instance.set = contract.instance.setData;
+        }
+
+        if (contract.instance.set && !contract.instance.setData) {
+          contract.instance.setData = contract.instance.set;
+        }
+
+        console.log(`registry at ${address}, code ${codeHash}, version ${version}`);
+        this._registryContract = contract;
+        return this._registryContract;
+      });
+  }
+
   _createGetParams (_name, key) {
     const name = _name.toLowerCase();
     const sha3 = this._api.util.sha3.text(name);

js/src/contracts/registry.spec.js

@@ -35,6 +35,9 @@ function create () {
     }
   };
   api = {
+    eth: {
+      getCode: sinon.stub().resolves('0x123456')
+    },
     parity: {
       registryAddress: sinon.stub().resolves('testRegistryAddress')
     },

js/src/dapps/dappreg.js

@@ -17,6 +17,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import injectTapEventPlugin from 'react-tap-event-plugin';
+import { AppContainer } from 'react-hot-loader';
 
 injectTapEventPlugin();
 
@@ -27,6 +28,21 @@ import '../../assets/fonts/RobotoMono/font.css';
 import './style.css';
 
 ReactDOM.render(
-  <Application />,
+  <AppContainer>
+    <Application />
+  </AppContainer>,
   document.querySelector('#container')
 );
+
+if (module.hot) {
+  module.hot.accept('./dappreg/Application/index.js', () => {
+    require('./dappreg/Application/index.js');
+
+    ReactDOM.render(
+      <AppContainer>
+        <Application />
+      </AppContainer>,
+      document.querySelector('#container')
+    );
+  });
+}

js/src/dapps/dappreg/Application/application.css

@@ -15,15 +15,17 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+@import '../_colors.css';
+
 .body {
-  color: #333;
-  background: #eee;
-  padding: 4.5em 0;
+  color: $text-color;
+  background: $background-color;
+  padding: 3em 0 6em;
   text-align: center;
 }
 
 .apps {
-  background: #fff;
+  background: white;
   border-radius: 0.5em;
   margin: 0 auto;
   max-width: 980px;
@@ -39,9 +41,8 @@
 }
 
 .header {
-  background: #44e;
-  border-radius: 0 0 0.25em 0.25em;
-  color: #fff;
+  background: $blue;
+  color: white;
   left: 0;
   padding: 1em;
   position: fixed;
@@ -54,5 +55,5 @@
   text-align: center;
   padding-top: 5em;
   font-size: 2em;
-  color: #999;
+  color: $loading-color;
 }

js/src/dapps/dappreg/Application/application.js

@@ -19,18 +19,14 @@ import { observer } from 'mobx-react';
 
 import DappsStore from '../dappsStore';
 
-import ButtonBar from '../ButtonBar';
-import Dapp from '../Dapp';
-import ModalDelete from '../ModalDelete';
-import ModalRegister from '../ModalRegister';
-import ModalUpdate from '../ModalUpdate';
-import SelectDapp from '../SelectDapp';
+import Dapps from '../Dapps';
+import Transactions from '../Transactions';
 import Warning from '../Warning';
 import styles from './application.css';
 
 @observer
 export default class Application extends Component {
-  dappsStore = DappsStore.instance();
+  dappsStore = DappsStore.get();
 
   render () {
     if (this.dappsStore.isLoading) {
@@ -41,23 +37,32 @@ export default class Application extends Component {
       );
     }
 
+    const { ownDapps, otherDapps } = this.dappsStore;
+
     return (
       <div className={ styles.body }>
         <div className={ styles.header }>
           DAPP REGISTRY, a global view of distributed applications available on the network. Putting the puzzle together.
         </div>
-        <div className={ styles.apps }>
-          <SelectDapp />
-          <ButtonBar />
-          <Dapp />
+
+        <div>
+          <Dapps
+            dapps={ ownDapps }
+            own
+            title='My Dapps'
+          />
+          <Dapps
+            dapps={ otherDapps }
+            title='Other Dapps'
+          />
         </div>
+
         <div className={ styles.footer }>
           { this.dappsStore.count } applications registered, { this.dappsStore.ownedCount } owned by user
         </div>
+
+        <Transactions />
         <Warning />
-        <ModalDelete />
-        <ModalRegister />
-        <ModalUpdate />
       </div>
     );
   }

js/src/dapps/dappreg/Button/button.css

@@ -15,11 +15,16 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+@import '../_colors.css';
+@import '../_utils.css';
+
 .button {
-  background: #44e;
+  composes: bezier-transform;
+
+  background: $blue;
   border: none;
   border-radius: 0.25em;
-  color: #fff;
+  color: white;
   cursor: pointer;
   font-size: 1em;
   margin: 1em 0.375em;
@@ -29,10 +34,14 @@
   &[disabled] {
     opacity: 0.5;
     cursor: default;
-    background: #aaa;
+    background: $disabled-bg;
   }
 
   &[data-warning="true"] {
-    background: #e44;
+    background: $warning-bg;
+  }
+
+  &:focus {
+    transform: scale(1.05);
   }
 }

js/src/dapps/dappreg/Button/button.js

@@ -24,27 +24,29 @@ export default class Button extends Component {
     disabled: PropTypes.bool,
     label: PropTypes.string.isRequired,
     warning: PropTypes.bool,
-    onClick: PropTypes.func.isRequired
+    onClick: PropTypes.func
   }
 
   render () {
     const { className, disabled, label, warning } = this.props;
-    const classes = `${styles.button} ${className}`;
+    const classes = [ styles.button, className ];
 
     return (
       <button
-        className={ classes }
+        className={ classes.join(' ') }
         data-warning={ warning }
         disabled={ disabled }
-        onClick={ this.onClick }
+        onClick={ this.handleClick }
       >
         { label }
       </button>
     );
   }
 
-  onClick = (event) => {
+  handleClick = (event) => {
     if (this.props.disabled) {
+      event.preventDefault();
+      event.stopPropagation();
       return;
     }