Sort by ETH balance and contract by date (#3107)

* Added timestamps to contract creation // Sort by date (#3070)

* Added sort by ETH balance (#3070)

* Added timestamp meta to accounts / addresses entry creations (#3107)

js/src/views/Accounts/List/list.js

@@ -29,6 +29,7 @@ export default class List extends Component {
     search: PropTypes.array,
     empty: PropTypes.bool,
     order: PropTypes.string,
+    orderFallback: PropTypes.string,
     handleAddSearchToken: PropTypes.func
   };
 
@@ -79,9 +80,9 @@ export default class List extends Component {
   }
 
   sortAddresses (addresses) {
-    const { order } = this.props;
+    const { order, orderFallback } = this.props;
 
-    if (!order || ['tags', 'name'].indexOf(order) === -1) {
+    if (!order) {
       return addresses;
     }
 
@@ -91,26 +92,77 @@ export default class List extends Component {
       const accountA = accounts[addressA];
       const accountB = accounts[addressB];
 
-      if (order === 'name') {
-        return accountA.name.localeCompare(accountB.name);
+      const sort = this.compareAccounts(accountA, accountB, order);
+
+      if (sort === 0 && orderFallback) {
+        return this.compareAccounts(accountA, accountB, orderFallback);
       }
 
-      if (order === 'tags') {
-        const tagsA = [].concat(accountA.meta.tags)
-          .filter(t => t)
-          .sort();
-        const tagsB = [].concat(accountB.meta.tags)
-          .filter(t => t)
-          .sort();
-
-        if (tagsA.length === 0) return 1;
-        if (tagsB.length === 0) return -1;
-
-        return tagsA.join('').localeCompare(tagsB.join(''));
-      }
+      return sort;
     });
   }
 
+  compareAccounts (accountA, accountB, key) {
+    if (key === 'name') {
+      return accountA.name.localeCompare(accountB.name);
+    }
+
+    if (key === 'eth') {
+      const { balances } = this.props;
+
+      const balanceA = balances[accountA.address];
+      const balanceB = balances[accountB.address];
+
+      if (!balanceA && !balanceB) return 0;
+      if (balanceA && !balanceB) return -1;
+      if (!balanceA && balanceB) return 1;
+
+      const ethA = balanceA.tokens
+        .find(token => token.token.tag.toLowerCase() === 'eth')
+        .value;
+      const ethB = balanceB.tokens
+        .find(token => token.token.tag.toLowerCase() === 'eth')
+        .value;
+
+      return -1 * ethA.comparedTo(ethB);
+    }
+
+    if (key === 'tags') {
+      const tagsA = [].concat(accountA.meta.tags)
+        .filter(t => t)
+        .sort()
+        .join('');
+
+      const tagsB = [].concat(accountB.meta.tags)
+        .filter(t => t)
+        .sort()
+        .join('');
+
+      if (!tagsA && !tagsB) return 0;
+      if (tagsA && !tagsB) return -1;
+      if (!tagsA && tagsB) return 1;
+
+      return tagsA.localeCompare(tagsB);
+    }
+
+    const metaA = accountA.meta[key];
+    const metaB = accountB.meta[key];
+
+    if (!metaA && !metaB) {
+      return 0;
+    }
+
+    if ((metaA && !metaB) || (metaA < metaB)) {
+      return -1;
+    }
+
+    if ((!metaA && metaB) || (metaA > metaB)) {
+      return 1;
+    }
+
+    return 0;
+  }
+
   getFilteredAddresses () {
     const { accounts, search } = this.props;
     const searchValues = (search || []).map(v => v.toLowerCase());

js/src/views/Contracts/contracts.js

@@ -42,7 +42,7 @@ class Contracts extends Component {
   state = {
     addContract: false,
     deployContract: false,
-    sortOrder: '',
+    sortOrder: 'timestamp',
     searchValues: [],
     searchTokens: []
   }
@@ -65,6 +65,7 @@ class Contracts extends Component {
             balances={ balances }
             empty={ !hasContracts }
             order={ sortOrder }
+            orderFallback='name'
             handleAddSearchToken={ this.onAddSearchToken } />
         </Page>
       </div>
@@ -80,6 +81,10 @@ class Contracts extends Component {
       <ActionbarSort
         key='sortAccounts'
         order={ this.state.sortOrder }
+        metas={ [
+          { key: 'timestamp', label: 'date' }
+        ] }
+        showDefault={ false }
         onChange={ onChange } />
     );
   }