Fixes pending/mined transactions in registry dApp (#3004)

* Fixing React Errors

* Fixes pending and mined events in Registry dApp (#2930)

* PR grumbles (#2930)

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

@@ -36,6 +36,8 @@ export default class Accounts extends Component {
   render () {
     const { all, selected } = this.props;
 
+    const origin = { horizontal: 'right', vertical: 'top' };
+
     const accountsButton = (
       <IconButton className={ styles.button }>
         { selected
@@ -49,7 +51,9 @@ export default class Accounts extends Component {
         value={ selected ? this.renderAccount(selected) : null }
         onChange={ this.onAccountSelect }
         iconButtonElement={ accountsButton }
-        animated={ false }
+
+        anchorOrigin={ origin }
+        targetOrigin={ origin }
       >
         { Object.values(all).map(this.renderAccount) }
       </IconMenu>

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

@@ -13,7 +13,6 @@
 
 // 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 getMuiTheme from 'material-ui/styles/getMuiTheme';
@@ -35,6 +34,7 @@ export default class Application extends Component {
     muiTheme: PropTypes.object.isRequired,
     api: PropTypes.object.isRequired
   };
+
   getChildContext () {
     return { muiTheme, api: window.parity.api };
   }

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

@@ -93,6 +93,37 @@ export default class Events extends Component {
 
   render () {
     const { subscriptions, pending, accounts, contacts } = this.props;
+
+    const eventsObject = this.props.events
+      .filter((e) => eventTypes[e.type])
+      .reduce((eventsObject, event) => {
+        const txHash = event.transaction;
+
+        if (
+          (eventsObject[txHash] && eventsObject[txHash].state === 'pending') ||
+          !eventsObject[txHash]
+        ) {
+          eventsObject[txHash] = event;
+        }
+
+        return eventsObject;
+      }, {});
+
+    const events = Object
+      .values(eventsObject)
+      .sort((evA, evB) => {
+        if (evA.state === 'pending') {
+          return -1;
+        }
+
+        if (evB.state === 'pending') {
+          return 1;
+        }
+
+        return evB.timestamp - evA.timestamp;
+      })
+      .map((e) => eventTypes[e.type](e, accounts, contacts));
+
     return (
       <Card className={ styles.events }>
         <CardHeader title='Event Log' />
@@ -122,11 +153,7 @@ export default class Events extends Component {
         <CardText>
           <table className={ styles.eventsList }>
             <tbody>
-              {
-                this.props.events
-                  .filter((e) => eventTypes[e.type])
-                  .map((e) => eventTypes[e.type](e, accounts, contacts))
-              }
+              { events }
             </tbody>
           </table>
         </CardText>

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

@@ -29,12 +29,19 @@ import styles from './names.css';
 const useSignerText = (<p>Use the <a href='/#/signer' className={ styles.link } target='_blank'>Signer</a> to authenticate the following changes.</p>);
 
 const renderNames = (names) => {
-  const out = [];
-  for (let name of names) {
-    out.push((<code>{ name }</code>), ', ');
-  }
-  out.pop();
-  return out;
+  const values = Object.values(names);
+
+  return values
+    .map((name, index) => (
+      <span key={ index }>
+        <code>{ name }</code>
+        {
+          index < values.length - 1
+          ? (<span>, </span>)
+          : null
+        }
+      </span>
+    ));
 };
 
 const renderQueue = (queue) => {