Merge pull request #2323 from ethcore/jr-registry-manage-records

registry dapp: manage records

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

@@ -22,10 +22,11 @@ const muiTheme = getMuiTheme(lightBaseTheme);
 
 import CircularProgress from 'material-ui/CircularProgress';
 import styles from './application.css';
-import Accounts from '../accounts';
+import Accounts from '../Accounts';
+import Events from '../Events';
 import Lookup from '../Lookup';
-import Names from '../names';
-import Events from '../events';
+import Names from '../Names';
+import Records from '../Records';
 
 const nullable = (type) => React.PropTypes.oneOfType([ React.PropTypes.oneOf([ null ]), type ]);
 
@@ -46,7 +47,8 @@ export default class Application extends Component {
     fee: nullable(PropTypes.object.isRequired),
     lookup: PropTypes.object.isRequired,
     events: PropTypes.object.isRequired,
-    names: PropTypes.object.isRequired
+    names: PropTypes.object.isRequired,
+    records: PropTypes.object.isRequired
   };
 
   render () {
@@ -56,7 +58,8 @@ export default class Application extends Component {
       contract, fee,
       lookup,
       events,
-      names
+      names,
+      records
     } = this.props;
 
     return (
@@ -69,6 +72,7 @@ export default class Application extends Component {
           <div>
             <Lookup { ...lookup } accounts={ accounts.all } contacts={ contacts } actions={ actions.lookup } />
             <Names { ...names } fee={ fee } actions={ actions.names } />
+            <Records { ...records } actions={ actions.records } />
             <Events { ...events } accounts={ accounts.all } contacts={ contacts } actions={ actions.events } />
             <p className={ styles.address }>
               The Registry is provided by the contract at <code>{ contract.address }.</code>

js/src/dapps/registry/Container.js

@@ -60,6 +60,7 @@ export default connect(
     bound.lookup = bindActionCreators(actions.lookup, dispatch);
     bound.events = bindActionCreators(actions.events, dispatch);
     bound.names = bindActionCreators(actions.names, dispatch);
+    bound.records = bindActionCreators(actions.records, dispatch);
     return { actions: bound };
   }
 )(Container);

js/src/dapps/registry/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;
+}

js/src/dapps/registry/IdentityIcon/identityIcon.js

@@ -0,0 +1,39 @@
+// 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,
+    className: PropTypes.string,
+    style: PropTypes.object
+  }
+
+  render () {
+    const { address, className, style } = this.props;
+
+    return (
+      <img
+        className={ styles.icon + ' ' + className }
+        style={ style }
+        src={ api.util.createIdentityImg(address, 3) } />
+    );
+  }
+}

js/src/dapps/registry/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';

js/src/dapps/registry/Records/reducers.js

@@ -0,0 +1,29 @@
+const initialState = {
+  hasAccount: false,
+  pending: false,
+  name: '', type: '', value: ''
+};
+
+export default (state = initialState, action) => {
+  if (action.type === 'accounts select') {
+    return { ...state, hasAccount: !!action.address };
+  }
+
+  if (action.type === 'records update start') {
+    return {
+      ...state,
+      pending: true,
+      name: action.name, type: action.entry, value: action.value
+    };
+  }
+
+  if (action.type === 'records update error' && action.type === 'records update success') {
+    return {
+      ...state,
+      pending: false,
+      name: initialState.name, type: initialState.type, value: initialState.value
+    };
+  }
+
+  return state;
+};

js/src/dapps/registry/accounts/accounts.css

@@ -33,6 +33,6 @@
 }
 .menuText {
   display: inline-block;
-  line-height: 20px;
-  vertical-align: middle;
+  line-height: 24px;
+  vertical-align: top;
 }

js/src/dapps/registry/accounts/accounts.js

@@ -19,22 +19,11 @@ import IconMenu from 'material-ui/IconMenu';
 import IconButton from 'material-ui/IconButton/IconButton';
 import AccountIcon from 'material-ui/svg-icons/action/account-circle';
 import MenuItem from 'material-ui/MenuItem';
-import IdentityIcon from '../../../ui/IdentityIcon';
 
-import styles from './accounts.css';
+import IdentityIcon from '../IdentityIcon';
+import renderAddress from '../ui/address';
 
-const renderAccount = (active) => (account) => {
-  const selected = active && active.address === account.address;
-  return (
-    <MenuItem
-      key={ account.address } value={ account.address }
-      checked={ selected } insetChildren={ !selected }
-    >
-      <IdentityIcon className={ styles.menuIcon } inline center address={ account.address } />
-      <span className={ styles.menuText }>{ account.name }</span>
-    </MenuItem>
-  );
-};
+import styles from './accounts.css';
 
 export default class Accounts extends Component {
 
@@ -50,23 +39,37 @@ export default class Accounts extends Component {
     const accountsButton = (
       <IconButton className={ styles.button }>
         { selected
-          ? (<IdentityIcon className={ styles.icon } center address={ selected.address } />)
+          ? (<IdentityIcon className={ styles.icon } address={ selected.address } />)
           : (<AccountIcon className={ styles.icon } color='white' />)
         }
       </IconButton>);
 
     return (
       <IconMenu
-        value={ selected ? renderAccount(selected)(selected) : null }
+        value={ selected ? this.renderAccount(selected) : null }
         onChange={ this.onAccountSelect }
         iconButtonElement={ accountsButton }
         animated={ false }
       >
-        { Object.values(all).map(renderAccount(selected)) }
+        { Object.values(all).map(this.renderAccount) }
       </IconMenu>
     );
   }
 
+  renderAccount = (account) => {
+    const { all, selected } = this.props;
+    const isSelected = selected && selected.address === account.address;
+
+    return (
+      <MenuItem
+        key={ account.address } value={ account.address }
+        checked={ isSelected } insetChildren={ !isSelected }
+      >
+        { renderAddress(account.address, all, {}) }
+      </MenuItem>
+    );
+  };
+
   onAccountSelect = (e, address) => {
     this.props.actions.select(address);
   };

js/src/dapps/registry/actions.js

@@ -16,21 +16,22 @@
 
 import { registry as registryAbi } from '../../contracts/abi';
 
-import { newContract, ethcore } from './parity.js';
+import { api } from './parity.js';
 import * as addresses from './addresses/actions.js';
-import * as accounts from './accounts/actions.js';
+import * as accounts from './Accounts/actions.js';
 import * as lookup from './Lookup/actions.js';
-import * as events from './events/actions.js';
-import * as names from './names/actions.js';
+import * as events from './Events/actions.js';
+import * as names from './Names/actions.js';
+import * as records from './Records/actions.js';
 
-export { addresses, accounts, lookup, events, names };
+export { addresses, accounts, lookup, events, names, records };
 
 export const setContract = (contract) => ({ type: 'set contract', contract });
 
 export const fetchContract = () => (dispatch) =>
-  ethcore.registryAddress()
+  api.ethcore.registryAddress()
   .then((address) => {
-    const contract = newContract(registryAbi, address);
+    const contract = api.newContract(registryAbi, address);
     dispatch(setContract(contract));
     dispatch(fetchFee());
     dispatch(fetchOwner());

js/src/dapps/registry/addresses/actions.js

@@ -14,23 +14,26 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { personal } from '../parity.js';
+import { api } from '../parity';
 
 export const set = (addresses) => ({ type: 'addresses set', addresses });
 
 export const fetch = () => (dispatch) => {
-  return Promise.all([ personal.listAccounts(), personal.accountsInfo() ])
-  .then(([ accounts, data ]) => {
-    const addresses = Object.keys(data)
-      .filter((address) => data[address] && !data[address].meta.deleted)
-      .map((address) => ({
-        ...data[address], address,
-        isAccount: accounts.includes(address)
-      }));
-    dispatch(set(addresses));
-  })
-  .catch((err) => {
-    console.error('could not fetch addresses');
-    if (err) console.error(err.stack);
-  });
+  return Promise
+    .all([
+      api.personal.listAccounts(),
+      api.personal.accountsInfo()
+    ])
+    .then(([ accounts, data ]) => {
+      const addresses = Object.keys(data)
+        .filter((address) => data[address] && !data[address].meta.deleted)
+        .map((address) => ({
+          ...data[address], address,
+          isAccount: accounts.includes(address)
+        }));
+      dispatch(set(addresses));
+    })
+    .catch((error) => {
+      console.error('could not fetch addresses', error);
+    });
 };

js/src/dapps/registry/events/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 { getBlockByNumber } from '../parity.js';
+import { api } from '../parity.js';
 
 export const start = (name, from, to) => ({ type: 'events subscribe start', name, from, to });
 export const fail = (name) => ({ type: 'events subscribe fail', name });
@@ -38,7 +38,7 @@ export const subscribe = (name, from = 0, to = 'pending') =>
         }
 
         events.forEach((e) => {
-          getBlockByNumber(e.blockNumber)
+          api.eth.getBlockByNumber(e.blockNumber)
           .then((block) => {
             const data = {
               type: name,

js/src/dapps/registry/events/events.css

@@ -24,11 +24,6 @@
 }
 
 .reserved, .dropped, .dataChanged {
-  margin: .5em 0;
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  align-items: center;
 }
 
 .reserved abbr, .dropped abbr {
@@ -45,3 +40,12 @@
   line-height: 32px;
   word-wrap: break-word;
 }
+
+.eventsList {
+  width: 100%;
+  boder: none;
+}
+
+.eventsList td {
+  padding: 0.25em 0.5em;
+}