registry dapp: address style grumbles 💄

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

@@ -45,8 +45,17 @@ class Accounts extends Component {
     const accountsButton = (
       <IconButton className={ styles.button }>
         { selected
-          ? (<IdentityIcon className={ styles.icon } address={ selected.address } />)
-          : (<AccountIcon className={ styles.icon } color='white' />)
+          ? (
+            <IdentityIcon
+              className={ styles.icon }
+              address={ selected.address }
+            />
+          ) : (
+            <AccountIcon
+              className={ styles.icon }
+              color='white'
+            />
+          )
         }
       </IconButton>);
 
@@ -70,8 +79,10 @@ class Accounts extends Component {
 
     return (
       <MenuItem
-        key={ account.address } value={ account.address }
-        checked={ isSelected } insetChildren={ !isSelected }
+        key={ account.address }
+        value={ account.address }
+        checked={ isSelected }
+        insetChildren={ !isSelected }
       >
         <Address address={ account.address } />
       </MenuItem>
@@ -83,9 +94,7 @@ class Accounts extends Component {
   };
 }
 
-export default connect(
-  // mapStateToProps
-  (state) => state.accounts,
-  // mapDispatchToProps
-  (dispatch) => bindActionCreators({ select }, dispatch)
-)(Accounts);
+const mapStateToProps = (state) => state.accounts;
+const mapDispatchToProps = (dispatch) => bindActionCreators({ select }, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(Accounts);

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

@@ -44,8 +44,8 @@ export default class Application extends Component {
 
   static propTypes = {
     accounts: PropTypes.object.isRequired,
-    contract: nullableProptype(PropTypes.object.isRequired),
-    fee: nullableProptype(PropTypes.object.isRequired)
+    contract: nullableProptype(PropTypes.object).isRequired,
+    fee: nullableProptype(PropTypes.object).isRequired
   };
 
   render () {

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

@@ -53,5 +53,5 @@
 .inline {
   display: inline-block;
   width: auto;
-  marginRight: 1em;
+  margin-right: 1em;
 }

js/src/dapps/registry/Events/events.js

@@ -107,24 +107,29 @@ const renderReverse = (e) => {
     ReverseConfirmed: 'confirmed',
     ReverseRemoved: 'removed'
   })[e.type];
-  if (!verb) return null;
 
-  const classNames = styles.reverse + (e.state === 'pending' ? ` ${styles.pending}` : '');
-  const details = [
-    'name ',
-    // TODO: this is an indexed param, cannot display as plain text
-    (<code key='name'>{ bytesToHex(e.parameters.name.value) }</code>),
-    ' for ',
-    (<Address key='reverse' address={ e.parameters.reverse.value } />)
-  ];
+  if (!verb) {
+    return null;
+  }
 
+  const classes = [ styles.reverse ];
+  if (e.state === 'pending') {
+    classes.push(styles.pending);
+  }
+
+  // TODO: `name` is an indexed param, cannot display as plain text
   return (
-    <tr key={ e.key } className={ classNames }>
+    <tr key={ e.key } className={ classes.join(' ') }>
       <td>
         <Address address={ e.from } />
       </td>
       <td>{ verb }</td>
-      <td>{ details }</td>
+      <td>
+        { 'name ' }
+        <code key='name'>{ bytesToHex(e.parameters.name.value) }</code>
+        { ' for ' }
+        <Address key='reverse' address={ e.parameters.reverse.value } />
+      </td>
       <td>
         { renderStatus(e.timestamp, e.state === 'pending') }
       </td>
@@ -144,9 +149,9 @@ const eventTypes = {
 class Events extends Component {
 
   static propTypes = {
-    subscriptions: PropTypes.object.isRequired,
-    pending: PropTypes.object.isRequired,
     events: PropTypes.array.isRequired,
+    pending: PropTypes.object.isRequired,
+    subscriptions: PropTypes.object.isRequired,
 
     subscribe: PropTypes.func.isRequired,
     unsubscribe: PropTypes.func.isRequired
@@ -185,16 +190,14 @@ class Events extends Component {
       })
       .map((e) => eventTypes[e.type](e));
 
-    const reverseToggled = (
+    const reverseToggled =
       subscriptions.ReverseProposed !== null &&
       subscriptions.ReverseConfirmed !== null &&
-      subscriptions.ReverseRemoved !== null
-    );
-    const reverseDisabled = (
+      subscriptions.ReverseRemoved !== null;
+    const reverseDisabled =
       pending.ReverseProposed ||
       pending.ReverseConfirmed ||
-      pending.ReverseRemoved
-    );
+      pending.ReverseRemoved;
 
     return (
       <Card className={ styles.events }>
@@ -242,6 +245,7 @@ class Events extends Component {
 
   onReservedToggle = (e, isToggled) => {
     const { pending, subscriptions, subscribe, unsubscribe } = this.props;
+
     if (!pending.Reserved) {
       if (isToggled && subscriptions.Reserved === null) {
         subscribe('Reserved');
@@ -250,8 +254,10 @@ class Events extends Component {
       }
     }
   };
+
   onDroppedToggle = (e, isToggled) => {
     const { pending, subscriptions, subscribe, unsubscribe } = this.props;
+
     if (!pending.Dropped) {
       if (isToggled && subscriptions.Dropped === null) {
         subscribe('Dropped');
@@ -260,8 +266,10 @@ class Events extends Component {
       }
     }
   };
+
   onDataChangedToggle = (e, isToggled) => {
     const { pending, subscriptions, subscribe, unsubscribe } = this.props;
+
     if (!pending.DataChanged) {
       if (isToggled && subscriptions.DataChanged === null) {
         subscribe('DataChanged');
@@ -278,6 +286,7 @@ class Events extends Component {
       if (pending[e]) {
         continue;
       }
+
       if (isToggled && subscriptions[e] === null) {
         subscribe(e);
       } else if (!isToggled && subscriptions[e] !== null) {
@@ -287,9 +296,7 @@ class Events extends Component {
   };
 }
 
-export default connect(
-  // mapStateToProps
-  (state) => state.events,
-  // mapDispatchToProps
-  (dispatch) => bindActionCreators({ subscribe, unsubscribe }, dispatch)
-)(Events);
+const mapStateToProps = (state) => state.events;
+const mapDispatchToProps = (dispatch) => bindActionCreators({ subscribe, unsubscribe }, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(Events);

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

@@ -27,33 +27,44 @@ export const fail = (action) => ({ type: `${action} error` });
 
 export const lookup = (name, key) => (dispatch, getState) => {
   const { contract } = getState();
-  if (!contract) return;
+  if (!contract) {
+    return;
+  }
   const getAddress = contract.functions
     .find((f) => f.name === 'getAddress');
 
   name = name.toLowerCase();
   dispatch(lookupStart(name, key));
-  getAddress.call({}, [sha3(name), key])
+
+  getAddress.call({}, [ sha3(name), key ])
     .then((address) => dispatch(success('lookup', address)))
     .catch((err) => {
       console.error(`could not lookup ${key} for ${name}`);
-      if (err) console.error(err.stack);
+      if (err) {
+        console.error(err.stack);
+      }
       dispatch(fail('lookup'));
     });
 };
 
 export const reverseLookup = (address) => (dispatch, getState) => {
   const { contract } = getState();
-  if (!contract) return;
+  if (!contract) {
+    return;
+  }
+
   const reverse = contract.functions
     .find((f) => f.name === 'reverse');
 
   dispatch(reverseLookupStart(address));
-  reverse.call({}, [address])
+
+  reverse.call({}, [ address ])
     .then((address) => dispatch(success('reverseLookup', address)))
     .catch((err) => {
       console.error(`could not lookup reverse for ${address}`);
-      if (err) console.error(err.stack);
+      if (err) {
+        console.error(err.stack);
+      }
       dispatch(fail('reverseLookup'));
     });
 };

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

@@ -42,7 +42,9 @@ class Lookup extends Component {
     reverseLookup: PropTypes.func.isRequired
   }
 
-  state = { input: '', type: 'A' };
+  state = {
+    input: '', type: 'A'
+  };
 
   render () {
     const { input, type } = this.state;
@@ -53,7 +55,10 @@ class Lookup extends Component {
       if (type === 'A') {
         output = (
           <code>
-            <Address address={ result } shortenHash={ false } />
+            <Address
+              address={ result }
+              shortenHash={ false }
+            />
           </code>
         );
       } else if (type === 'IMG') {
@@ -105,12 +110,15 @@ class Lookup extends Component {
   onInputChange = (e) => {
     this.setState({ input: e.target.value });
   };
+
   onTypeChange = (e, i, type) => {
     this.setState({ type });
     this.props.clear();
   };
+
   onLookupClick = () => {
     const { input, type } = this.state;
+
     if (type === 'reverse') {
       this.props.reverseLookup(input);
     } else {
@@ -119,9 +127,10 @@ class Lookup extends Component {
   };
 }
 
-export default connect(
-  // mapStateToProps
-  (state) => state.lookup,
-  // mapDispatchToProps
-  (dispatch) => bindActionCreators({ clear, lookup, reverseLookup }, dispatch)
-)(Lookup);
+const mapStateToProps = (state) => state.lookup;
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    clear, lookup, reverseLookup
+  }, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(Lookup);

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

@@ -22,9 +22,9 @@ const initialState = {
 };
 
 export default (state = initialState, action) => {
-  if (action.type.slice(0, 7) !== 'lookup ' &&
-    action.type.slice(0, 14) !== 'reverseLookup '
-  ) {
+  const { type } = action;
+
+  if (type.slice(0, 7) !== 'lookup ' && type.slice(0, 14) !== 'reverseLookup ') {
     return state;
   }
 

js/src/dapps/registry/Names/actions.js

@@ -31,19 +31,26 @@ export const reserve = (name) => (dispatch, getState) => {
   const account = state.accounts.selected;
   const contract = state.contract;
   const fee = state.fee;
-  if (!contract || !account) return;
+  if (!contract || !account) {
+    return;
+  }
+
   name = name.toLowerCase();
 
   if (alreadyQueued(state.names.queue, 'reserve', name)) return;
   const reserve = contract.functions.find((f) => f.name === 'reserve');
 
   dispatch(reserveStart(name));
-  postTx(api, reserve, {
+
+  const options = {
     from: account.address,
     value: fee
-  }, [
+  };
+  const values = [
     sha3(name)
-  ])
+  ];
+
+  postTx(api, reserve, options, values)
     .then((txHash) => {
       dispatch(reserveSuccess(name));
     })
@@ -64,18 +71,25 @@ export const drop = (name) => (dispatch, getState) => {
   const state = getState();
   const account = state.accounts.selected;
   const contract = state.contract;
-  if (!contract || !account) return;
+  if (!contract || !account) {
+    return;
+  }
+
   name = name.toLowerCase();
 
   if (alreadyQueued(state.names.queue, 'drop', name)) return;
   const drop = contract.functions.find((f) => f.name === 'drop');
 
   dispatch(dropStart(name));
-  postTx(api, drop, {
+
+  const options = {
     from: account.address
-  }, [
+  };
+  const values = [
     sha3(name)
-  ])
+  ];
+
+  postTx(api, drop, options, values)
     .then((txhash) => {
       dispatch(dropSuccess(name));
     })

js/src/dapps/registry/Names/names.js

@@ -170,9 +170,7 @@ class Names extends Component {
   };
 }
 
-export default connect(
-  // mapStateToProps
-  (state) => ({ ...state.names, fee: state.fee }),
-  // mapDispatchToProps
-  (dispatch) => bindActionCreators({ reserve, drop }, dispatch)
-)(Names);
+const mapStateToProps = (state) => ({ ...state.names, fee: state.fee });
+const mapDispatchToProps = (dispatch) => bindActionCreators({ reserve, drop }, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(Names);