registry dapp

js/src/api/util/bytes-array-to-hex.js

@@ -0,0 +1,2 @@
+export default (bytes) =>
+  '0x' + bytes.map((b) => ('0' + b.toString(16)).slice(-2)).join('')

js/src/api/util/bytes-array-to-hex.spec.js

@@ -0,0 +1,11 @@
+import bytesToHex from './bytes-array-to-hex';
+
+describe('api/util/bytes-array-to-hex', () => {
+  it('correctly converts an empty array', () => {
+    expect(bytesToHex([])).to.equal('0x');
+  });
+
+  it('correctly converts a non-empty array', () => {
+    expect(bytesToHex([0, 15, 16])).to.equal('0x000f10');
+  });
+});

js/src/dapps/registry.js

@@ -2,6 +2,9 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 
+import injectTapEventPlugin from 'react-tap-event-plugin';
+injectTapEventPlugin();
+
 import store from './registry/store';
 import Container from './registry/Container';
 

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

@@ -0,0 +1,11 @@
+.header {
+  margin: 0; padding: .3em .5em;
+  color: #fff;
+  background-color: #333;
+}
+
+.header h1 {
+  line-height: 1.3;
+  font-size: 200%;
+  text-transform: uppercase;
+}

js/src/dapps/registry/Application/application.js

@@ -5,35 +5,58 @@ import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
 const muiTheme = getMuiTheme(lightBaseTheme);
 
 import CircularProgress from 'material-ui/CircularProgress';
-import Status from '../Status';
-import Lookup from '../Lookup';
+import styles from './application.css';
+import Accounts from '../accounts';
+import Lookup from '../lookup';
+import Register from '../register';
+import Events from '../events';
+import Status from '../status';
 
 export default class Application extends Component {
-  static childContextTypes = {
-    muiTheme: PropTypes.object
-  };
+  static childContextTypes = { muiTheme: PropTypes.object };
   getChildContext () {
     return { muiTheme };
   }
 
+  static propTypes = {
+    actions: PropTypes.object.isRequired,
+    accounts: PropTypes.object.isRequired,
+    contract: PropTypes.object.isRequired,
+    owner: PropTypes.string.isRequired,
+    fee: PropTypes.object.isRequired,
+    lookup: PropTypes.object.isRequired,
+    events: PropTypes.array.isRequired,
+    register: PropTypes.object
+  };
+
   render () {
-    const { contract, fee, owner, actions } = this.props;
+    const {
+      actions,
+      accounts,
+      contract, owner, fee,
+      lookup,
+      events,
+      register
+    } = this.props;
 
-    if (!contract || !fee || !owner) {
-      return (<CircularProgress size={ 1 } />);
-    }
     return (
       <div>
-        <Status address={ contract.address } fee={ fee } owner={ owner } />
-        <Lookup lookup={ this.props.lookup } actions={ actions.lookup } />
+        <div className={ styles.header }>
+          <h1>RΞgistry</h1>
+          <Accounts { ...accounts } actions={ actions.accounts } />
+        </div>
+        { contract && fee && owner ? (
+          <div>
+            <Lookup { ...lookup } actions={ actions.lookup } />
+            <Register { ...register } fee={ fee } actions={ actions.register } />
+            <Events { ...events } actions={ actions.events } />
+            <Status address={ contract.address } owner={ owner } />
+          </div>
+        ) : (
+          <CircularProgress size={ 1 } />
+        ) }
       </div>
     );
   }
 
 }
-
-Application.propTypes = {
-  contract: PropTypes.object,
-  fee: PropTypes.object,
-  owner: PropTypes.string
-};

js/src/dapps/registry/Container.js

@@ -7,25 +7,21 @@ import * as actions from './actions';
 
 class Container extends Component {
   static propTypes = {
-    actions: PropTypes.object,
-    contract: PropTypes.object,
-    owner: PropTypes.string,
-    fee: PropTypes.object,
-    lookup: PropTypes.object
+    actions: PropTypes.object.isRequired,
+    accounts: PropTypes.object.isRequired,
+    contract: PropTypes.object.isRequired,
+    owner: PropTypes.string.isRequired,
+    fee: PropTypes.object.isRequired,
+    lookup: PropTypes.object.isRequired,
+    events: PropTypes.array.isRequired
   };
+
   componentDidMount () {
     this.props.actions.fetchContract();
   }
 
   render () {
-    const { actions, contract, owner, fee, lookup } = this.props;
-    return (<Application
-      actions={ actions }
-      contract={ contract }
-      owner={ owner }
-      fee={ fee }
-      lookup={ lookup }
-    />);
+    return (<Application { ...this.props } />);
   }
 }
 
@@ -35,7 +31,10 @@ export default connect(
   // react -> redux connection
   (dispatch) => {
     const bound = bindActionCreators(actions, dispatch);
+    bound.accounts = bindActionCreators(actions.accounts, dispatch);
     bound.lookup = bindActionCreators(actions.lookup, dispatch);
+    bound.events = bindActionCreators(actions.events, dispatch);
+    bound.register = bindActionCreators(actions.register, dispatch);
     return { actions: bound };
   }
 )(Container);

js/src/dapps/registry/Lookup/actions.js

@@ -1,4 +1,4 @@
-const sha3 = window.parity.api.format.sha3;
+import { sha3 } from '../parity.js';
 
 export const start = (name, key) => ({ type: 'lookup start', name, key });
 

js/src/dapps/registry/Lookup/lookup.css

@@ -1,7 +1,11 @@
 .lookup {
-  padding: 1em;
+  margin: 1em;
 }
 
-.results {
-  margin: .5em 0;
+.box {
+  margin: 0 1em;
+}
+
+.spacing {
+  margin-left: 1em;
 }

js/src/dapps/registry/Lookup/lookup.js

@@ -1,51 +1,65 @@
 import React, { Component, PropTypes } from 'react';
+import { Card, CardHeader, CardText } from 'material-ui/Card';
 import TextField from 'material-ui/TextField';
-import FlatButton from 'material-ui/FlatButton';
+import RaisedButton from 'material-ui/RaisedButton';
+import SearchIcon from 'material-ui/svg-icons/action/search';
 
 import styles from './lookup.css';
 
 export default class Lookup extends Component {
 
   static propTypes = {
-    actions: PropTypes.object,
-    lookup: PropTypes.object
+    actions: PropTypes.object.isRequired,
+    name: PropTypes.string.isRequired,
+    entry: PropTypes.string.isRequired,
+    result: PropTypes.string
   }
 
-  state = { name: '', key: '' };
+  state = { name: '', entry: 'A' };
 
   render () {
-    const self = this;
-    const onNameChange = (e) => {
-      self.setState({ name: e.target.value });
-    };
-    const onKeyChange = (e) => {
-      self.setState({ key: e.target.value });
-    };
-    const onLookupClick = () => {
-      self.props.actions.lookup(self.state.name, self.state.key);
-    };
+    const name = this.state.name || this.props.name;
+    const entry = this.state.entry || this.props.entry;
+    const result = this.props.result || '';
 
     return (
-      <div className={ styles.lookup }>
-        <TextField
-          hintText='name'
-          value={ this.state.name || this.props.lookup.name || '' }
-          onChange={ onNameChange }
-        />
-        <TextField
-          hintText='key'
-          value={ this.state.key || this.props.lookup.key || '' }
-          onChange={ onKeyChange }
-        />
-        <FlatButton
-          label='Lookup'
-          primary
-          onClick={ onLookupClick }
-        />
-        <div className={ styles.results }>
-          { this.props.lookup.result || '' }
+      <Card className={ styles.lookup }>
+        <CardHeader title={ 'Query the Registry' } />
+        <div className={ styles.box }>
+          <TextField
+            className={ styles.spacing }
+            hintText='name'
+            value={ name }
+            onChange={ this.onNameChange }
+          />
+          <TextField
+            className={ styles.spacing }
+            hintText='entry'
+            value={ entry }
+            onChange={ this.onKeyChange }
+          />
+          <RaisedButton
+            className={ styles.spacing }
+            label='Lookup'
+            primary
+            icon={ <SearchIcon /> }
+            onClick={ this.onLookupClick }
+          />
         </div>
-      </div>
+        <CardText>
+          <code>{ result }</code>
+        </CardText>
+      </Card>
     );
   }
+
+  onNameChange = (e) => {
+    this.setState({ name: e.target.value });
+  };
+  onKeyChange = (e) => {
+    this.setState({ entry: e.target.value });
+  };
+  onLookupClick = () => {
+    this.props.actions.lookup(this.state.name, this.state.entry);
+  };
 }

js/src/dapps/registry/Lookup/reducers.js

@@ -1,30 +1,33 @@
 const initialState = {
   pending: false,
-  name: null, key: null,
+  name: '', entry: '',
   result: null
 };
 
 export default (state = initialState, action) => {
-  if (action.type === 'lookup start')
+  if (action.type === 'lookup start') {
     return {
       pending: true,
-      name: action.name, key: action.key,
+      name: action.name, entry: action.entry,
       result: null
     };
+  }
 
-  if (action.type === 'lookup error')
+  if (action.type === 'lookup error') {
     return {
       pending: false,
-      name: null, key: null,
+      name: initialState.name, entry: initialState.entry,
       result: null
     };
+  }
 
-  if (action.type === 'lookup success')
+  if (action.type === 'lookup success') {
     return {
       pending: false,
-      name: null, key: null,
+      name: initialState.name, entry: initialState.entry,
       result: action.result
     };
+  }
 
   return state;
 };

js/src/dapps/registry/Status/status.css

@@ -1,14 +1,5 @@
 .status {
   padding: 1em;
-  color: #fff;
-  background-color: #c0392b;
-}
-
-.address {
-}
-
-.fee {
-}
-
-.owner {
+  color: #333;
+  background-color: #f0f0f0;
 }

js/src/dapps/registry/Status/status.js

@@ -2,24 +2,20 @@ import React, { Component, PropTypes } from 'react';
 
 import styles from './status.css';
 
-const { api } = window.parity;
-
 export default class Status extends Component {
 
   static propTypes = {
     address: PropTypes.string,
-    fee: PropTypes.object,
     owner: PropTypes.string
   }
 
   render () {
-    const { address, fee, owner } = this.props;
+    const { address, owner } = this.props;
 
     return (
       <div className={ styles.status }>
-        <div className={ styles.address }>Registry at { address }</div>
-        <div className={ styles.owner }>Owned by { owner }</div>
-        <div className={ styles.fee }>Registration fee { api.format.fromWei(fee).toFixed(3) }ΞTH</div>
+        <div className={ styles.address }>Registry at <code>{ address }</code></div>
+        <div className={ styles.owner }>Owned by <code>{ owner }</code></div>
       </div>
     );
   }