ui/ux

app/components/MixStatus/index.js

@@ -25,7 +25,7 @@ class MixStatus extends React.PureComponent {
               {mixService.getThreads().map((utxo,i) => {
                 const message = utils.utxoMessage(utxo)
                 let progressLabel = <div>
-                  <small>{utils.toBtc(utxo.value)}</small> <strong>{utils.statusLabel(utxo)}</strong><br/>
+                  <small>{utils.toBtc(utxo.value)}</small> <strong>{utils.statusLabel(utxo, false)}</strong><br/>
                   {message && <small>{message}</small>}
                 </div>
                 const progressPercent = utxo.progressPercent ? utxo.progressPercent : 0

app/components/TableGeneric/TableGeneric.js

-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import BTable from 'react-bootstrap/Table';
 import { useRowSelect, useSortBy, useTable } from 'react-table';
 import * as Icon from 'react-feather';
@@ -20,18 +20,11 @@ const IndeterminateCheckbox = React.forwardRef(
   }
 )
 
-export default function TableGeneric({ columns, data, tableKey, size='sm', /*onFetchData, pageIndex, pageSize, filters, */sortBy, getRowStyle=()=>{}, getRowClassName=()=>{}, onSelect=undefined, className=undefined }) {
+export default function TableGeneric({ columns, data, size='sm', /*onFetchData, pageIndex, pageSize, filters, */sortBy, getRowStyle=()=>{}, getRowClassName=()=>{}, onSelect=undefined, className=undefined }) {
   if (!data) {
     return
   }
 
-
-  const [lastTableKey, setLastTableKey] = useState()
-  const resetTable = !lastTableKey || lastTableKey != tableKey
-  useEffect(() => {
-    setLastTableKey(tableKey)
-  }, [tableKey])
-
   const initialState = {};
   if (sortBy) {
     initialState.sortBy = sortBy;
@@ -43,13 +36,13 @@ export default function TableGeneric({ columns, data, tableKey, size='sm', /*onF
       columns,
       data,
       initialState,
-      autoResetPage: resetTable,
-      autoResetExpanded: resetTable,
-      autoResetGroupBy: resetTable,
-      autoResetSelectedRows: resetTable,
-      autoResetSortBy: resetTable,
-      autoResetFilters: resetTable,
-      autoResetRowState: resetTable,
+      autoResetPage: false,
+      autoResetExpanded: false,
+      autoResetGroupBy: false,
+      autoResetSelectedRows: false,
+      autoResetSortBy: false,
+      autoResetFilters: false,
+      autoResetRowState: false,
     },
     useSortBy,
     useRowSelect,

app/components/Utxo/UtxosTable.js

@@ -124,7 +124,7 @@ const UtxosTable = ({ controls, pool, mixs, account, utxos, tableKey }) => {
         Header: 'Status',
         accessor: o => o.status,
         Cell: o => !isReadOnly(o.row.original) &&
-          <span className='text-primary'>{utils.statusLabel(o.row.original)}</span>
+          <span>{utils.statusLabel(o.row.original, true)}</span>
       });
   }
   columns.push({
@@ -153,12 +153,13 @@ const UtxosTable = ({ controls, pool, mixs, account, utxos, tableKey }) => {
   const utxosReadOnly = utxos.filter(utxo => isReadOnly(utxo))
   const amountUtxosReadOnly = utxosReadOnly.map(utxo => utxo.value).reduce((total,current) => total+current, 0)
 
+  const key = tableKey+utils.computeUtxoDataKey(visibleUtxos);
   return (
     <div>
       <div>
         <TableGeneric
+          key={key}
           className='table-utxos'
-          tableKey={tableKey}
           columns={columns}
           data={visibleUtxos}
           sortBy={[{ id: 'lastActivityElapsed', desc: true }]}

app/services/utils.js

 import cliService from './cliService';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as Icons from '@fortawesome/free-solid-svg-icons';
+import crypto from 'crypto';
 import * as React from 'react';
 import { shell } from 'electron';
 import moment from 'moment';
@@ -120,61 +121,53 @@ class Utils {
     return 'https://oxt.me/address/'+utxo.address
   }
 
-  statusIcon(utxo) {
-
-    if (utxo.status === UTXO_STATUS.MIX_STARTED) {
-      return <FontAwesomeIcon icon={Icons.faPlay} size='xs' color='green' title='MIXING'/>
-    }
-    if (utxo.status === UTXO_STATUS.TX0) {
-      return <FontAwesomeIcon icon={Icons.faPlay} size='xs' color='green' title='TX0'/>
-    }
-    if (utxo.status === UTXO_STATUS.TX0_FAILED) {
-      return <FontAwesomeIcon icon={Icons.faSquare} size='xs' color='red' title='TX0 FAILED'/>
-    }
-    if (utxo.status === UTXO_STATUS.MIX_FAILED) {
-      return <FontAwesomeIcon icon={Icons.faSquare} size='xs' color='red' title='MIX FAILED'/>
+  utxoStatus(utxo) {
+    switch (utxo.status) {
+      case UTXO_STATUS.MIX_STARTED:
+        return ['MIXING', <FontAwesomeIcon icon={Icons.faPlay} size='xs' color='green' title='MIXING'/>, true]
+      case UTXO_STATUS.TX0:
+        return ['TX', <FontAwesomeIcon icon={Icons.faPlay} size='xs' color='green' title='TX0'/>, true]
+      case UTXO_STATUS.TX0_SUCCESS:
+        return ['TX0:SUCCESS', <FontAwesomeIcon icon={Icons.faPlay} size='xs' color='green' title='TX0 SUCCESS'/>, true]
+      case UTXO_STATUS.TX0_FAILED:
+        return ['TX0:ERROR', <FontAwesomeIcon icon={Icons.faSquare} size='xs' color='red' title='TX0 FAILED'/>, true]
+      case UTXO_STATUS.MIX_FAILED:
+        return ['MIX:FAILED', <FontAwesomeIcon icon={Icons.faSquare} size='xs' color='red' title='MIX FAILED'/>, true]
+      case UTXO_STATUS.MIX_SUCCESS:
+        return ['MIXED', <FontAwesomeIcon icon={Icons.faCheck} size='xs' color='green' title='MIXED'/>, false]
+      case UTXO_STATUS.STOP:
+        return ['STOPPED', <FontAwesomeIcon icon={Icons.faSquare} size='xs' color='red' title='TX0 FAILED'/>, false]
     }
     if (utxo.account === WHIRLPOOL_ACCOUNTS.POSTMIX) {
-      return <FontAwesomeIcon icon={Icons.faCheck} size='xs' color='green' title='MIXED'/>
+      return ['MIXED', <FontAwesomeIcon icon={Icons.faCheck} size='xs' color='green' title='MIXED'/>, false]
+    }
+    const statusIcon = this.utxoStatusIcon(utxo)
+    switch (utxo.status) {
+      case UTXO_STATUS.READY:
+        return ['READY', statusIcon, false]
+      case UTXO_STATUS.MIX_QUEUE:
+        return ['QUEUE', statusIcon, false]
     }
+    console.error('Unknown utxoStatus', utxo)
+    return ['?', statusIcon, false]
+  }
 
+  utxoStatusIcon(utxo) {
     switch(utxo.mixableStatus) {
       case MIXABLE_STATUS.MIXABLE:
         return <FontAwesomeIcon icon={Icons.faCircle} size='xs' color='green' title='Ready to mix'/>
       case MIXABLE_STATUS.HASH_MIXING:
         return <FontAwesomeIcon icon={Icons.faEllipsisH} size='xs' color='orange' title='Another utxo from same hash is currently mixing'/>
-      case MIXABLE_STATUS.NO_POOL:
-        return <span></span>
       case MIXABLE_STATUS.UNCONFIRMED:
         return <FontAwesomeIcon icon={Icons.faClock} size='xs' title='Unconfirmed' className='text-muted'/>
+      // case MIXABLE_STATUS.NO_POOL:
     }
     return undefined
   }
 
-  statusLabel(utxo) {
-    const icon = this.statusIcon(utxo)
-    const text = this.statusLabelText(utxo)
-    return <span>{icon?icon:''} {text?text:''}</span>
-  }
-
-  statusLabelText(utxo) {
-    if (utxo.account === WHIRLPOOL_ACCOUNTS.POSTMIX) {
-      return 'MIXED'
-    }
-    if (utxo.mixableStatus === MIXABLE_STATUS.NO_POOL) {
-      return undefined
-    }
-    switch(utxo.status) {
-      case UTXO_STATUS.READY: return 'READY'
-      case UTXO_STATUS.STOP: return 'STOPPED'
-      case UTXO_STATUS.TX0: return 'TX0'
-      case UTXO_STATUS.TX0_SUCCESS: return 'TX0:SUCCESS'
-      case UTXO_STATUS.TX0_FAILED: return 'TX0:ERROR'
-      case UTXO_STATUS.MIX_QUEUE: return 'QUEUE'
-      case UTXO_STATUS.MIX_STARTED: return 'MIXING'
-      case UTXO_STATUS.MIX_FAILED: return 'MIX:FAILED'
-      default: return '?'
-    }
+  statusLabel(utxo, showEmphase) {
+    const [text, icon, emphase] = this.utxoStatus(utxo)
+    return <span>{icon?icon:''} <span className={(showEmphase?(emphase?'text-primary':'text-muted'):undefined)}>{text?text:''}</span></span>
   }
 
   utxoMessage(utxo) {
@@ -263,6 +256,16 @@ class Utils {
   spinner() {
     return <FontAwesomeIcon icon={Icons.faSpinner} spin size='xs' />
   }
+
+  computeUtxoDataKey(utxos) {
+    const utxoIds = utxos.map(utxo => utxo.hash + ':' + utxo.index)
+    const dataKey = this.md5(utxoIds.join(';'))
+    return dataKey
+  }
+
+  md5(str) {
+    return crypto.createHash('md5').update(str).digest('hex');
+  }
 }
 
 const utils = new Utils()