cleanup

app/components/Modals/DepositModal.js

@@ -29,9 +29,9 @@ export default class DepositModal extends AbstractModal {
       })
     }
     if (distinct) {
-      this.loading("Fetching another deposit address...", walletService.fetchDepositAddressDistinct(this.state.depositAddress).then(setState))
+      this.loading("Loading...", walletService.fetchDepositAddressDistinct(this.state.depositAddress).then(setState))
     } else {
-      this.loading("Fetching deposit address...", walletService.fetchDepositAddress().then(setState))
+      this.loading("Loading...", walletService.fetchDepositAddress().then(setState))
     }
   }
 

app/components/Modals/Tx0Modal.js

@@ -41,9 +41,9 @@ export default function Tx0Modal(props) {
   // compute available pools
   useEffect(() => {
     // fetch pools for tx0 feeTarget
-    modalUtils.load("Fetching pools for tx0...", poolsService.fetchPoolsForTx0(spendValue, tx0FeeTarget, mixFeeTarget).then(newPools => {
+    modalUtils.load("Loading...", poolsService.fetchPoolsForTx0(spendValue, tx0FeeTarget, mixFeeTarget).then(newPools => {
       if (newPools.length == 0) {
-        modalUtils.setError("No pool for this utxo and miner fee.")
+        modalUtils.setError("No pool for such utxo and miner fee.")
       }
       setPools(newPools)
     }))
@@ -66,7 +66,7 @@ export default function Tx0Modal(props) {
       setTx0Preview(undefined)
     } else {
       // preview
-      modalUtils.load("Fetching tx0 data...", backendService.tx0.tx0Preview(utxos, tx0FeeTarget, mixFeeTarget, poolId).then(newTx0Preview => {
+      modalUtils.load("Loading...", backendService.tx0.tx0Preview(utxos, tx0FeeTarget, mixFeeTarget, poolId).then(newTx0Preview => {
         setTx0Preview(newTx0Preview)
       }))
     }

app/components/Utxo/UtxosTable.js

@@ -89,11 +89,10 @@ const UtxosTable = ({ controls, pool, mixs, account, utxos, tableKey }) => {
     {
       Header: 'Confs',
       accessor: o => o.confirmations,
-      className: 'text-muted',
       Cell: o => o.cell.value > 0 ? (
           <small title="confirmations">{o.cell.value}</small>
         ) : (
-          <FontAwesomeIcon icon={Icons.faClock} size='xs' title='Unconfirmed'/>
+          <FontAwesomeIcon icon={Icons.faClock} size='xs' title='Unconfirmed' className='text-muted'/>
         )
     },
     {

app/containers/App.js

@@ -147,7 +147,7 @@ class App extends React.Component<Props> {
           </div>}
         </div>
         <div className='col-md-10'>
-          {cliService.isLoggedIn() && (mixService.isReady() && poolsService.isReady() ? <MixStatus mixState={this.props.mix} poolsState={this.props.pools} mixActions={this.props.mixActions}/> : <small>Fetching mix state...</small>)}
+          {cliService.isLoggedIn() && (mixService.isReady() && poolsService.isReady() ? <MixStatus mixState={this.props.mix} poolsState={this.props.pools} mixActions={this.props.mixActions}/> : utils.spinner())}
           {cliService.isCliStatusReady() && !cliService.isLoggedIn() && <div className='text-center'>
             <Link to={routes.HOME}>
               <FontAwesomeIcon icon={Icons.faLock} size='3x' color='#CCC'/>
@@ -239,7 +239,7 @@ class App extends React.Component<Props> {
               </ul>
 
               {cliService.isLoggedIn() && !walletService.isReady() && <div>
-                <small>Fetching wallet...</small>
+                {utils.spinner()}
               </div>}
               <div className="footerNav">
                 <div>

app/containers/ConfigPage.js

@@ -20,7 +20,6 @@ export default class ConfigPage extends Component<Props> {
       error: undefined,
       cliConfig: undefined,
       showDevelopersConfig: false,
-      showAdvancedConfig: false
     }
 
     this.cliConfigService = new CliConfigService(cliConfig => this.setState({
@@ -31,7 +30,6 @@ export default class ConfigPage extends Component<Props> {
     this.onChangeCliConfig = this.onChangeCliConfig.bind(this)
     this.onSubmit = this.onSubmit.bind(this)
     this.toogleDevelopersConfig = this.toogleDevelopersConfig.bind(this)
-    this.toogleAdvancedConfig = this.toogleAdvancedConfig.bind(this)
   }
 
   onResetConfig() {
@@ -71,15 +69,9 @@ export default class ConfigPage extends Component<Props> {
     })
   }
 
-  toogleAdvancedConfig() {
-    this.setState({
-      showAdvancedConfig: !this.state.showAdvancedConfig
-    })
-  }
-
   render() {
     if (!this.state.cliConfig) {
-      return <small>Fetching CLI configuration...</small>
+      return <small>Loading configuration...</small>
     }
     const cliConfig = this.state.cliConfig
     if (!cliConfig.mix) {
@@ -151,8 +143,8 @@ export default class ConfigPage extends Component<Props> {
           <br/>
 
           <Card>
-            <Card.Header><a onClick={this.toogleAdvancedConfig} style={{cursor:'pointer'}}>Advanced settings</a></Card.Header>
-            {this.state.showAdvancedConfig && <Card.Body>
+            <Card.Header>Advanced settings</Card.Header>
+            <Card.Body>
               <div className="form-group row">
                 <label htmlFor="tx0MaxOutputs" className="col-sm-2 col-form-label">TX0 max outputs</label>
                 <input type="number" className='form-control col-sm-3' onChange={e => {
@@ -171,15 +163,6 @@ export default class ConfigPage extends Component<Props> {
                 <label className='col-form-label col-sm-5 text-muted'>Random factor for generating a second change output to simulate a multi-user TX0 (0 = never, 1 = always, 2 = 1/2 probability, 3 = 1/3 probability...)</label>
               </div>
 
-              <div className="form-group row">
-                <label htmlFor="tx0FakeOutputMinValue" className="col-sm-2 col-form-label">TX0 min change</label>
-                <input type="number" className='form-control col-sm-3' onChange={e => {
-                  const myValue = parseInt(e.target.value)
-                  myThis.onChangeCliConfig(cliConfig => cliConfig.mix.tx0FakeOutputMinValue = myValue)
-                }} defaultValue={cliConfig.mix.tx0FakeOutputMinValue} id="tx0FakeOutputMinValue"/>
-                <label className='col-form-label col-sm-5 text-muted'>Minimum value per change output when using TX0 fake output</label>
-              </div>
-
               <div className="form-group row">
                 <label htmlFor="proxy" className="col-sm-2 col-form-label">CLI proxy</label>
                 <input type="text" className='form-control col-sm-3' onChange={e => {
@@ -191,7 +174,7 @@ export default class ConfigPage extends Component<Props> {
                   <code>socks://host:port</code> or <code>http://host:port</code>
                 </label>
               </div>
-            </Card.Body>}
+            </Card.Body>
           </Card>
 
           <br/>
@@ -218,6 +201,15 @@ export default class ConfigPage extends Component<Props> {
                 <label className='col-form-label col-sm-5 text-muted'>Max simultaneous mixing clients per pool</label>
               </div>}
 
+              <div className="form-group row">
+                <label htmlFor="tx0FakeOutputMinValue" className="col-sm-2 col-form-label">TX0 min change</label>
+                <input type="number" className='form-control col-sm-3' onChange={e => {
+                  const myValue = parseInt(e.target.value)
+                  myThis.onChangeCliConfig(cliConfig => cliConfig.mix.tx0FakeOutputMinValue = myValue)
+                }} defaultValue={cliConfig.mix.tx0FakeOutputMinValue} id="tx0FakeOutputMinValue"/>
+                <label className='col-form-label col-sm-5 text-muted'>Minimum value per change output when using TX0 fake output</label>
+              </div>
+
             </Card.Body>}
           </Card>
           <br/>

app/containers/DepositPage.js

@@ -20,14 +20,8 @@ class DepositPage extends Component {
   // tx0
 
   render() {
-    if (!walletService.isReady()) {
-      return <small>Fetching wallet...</small>
-    }
-    if (!mixService.isReady()) {
-      return <small>Fetching mix state...</small>
-    }
-    if (!poolsService.isReady()) {
-      return <small>Fetching pools...</small>
+    if (!walletService.isReady() || !mixService.isReady() || !poolsService.isReady()) {
+      return utils.spinner()
     }
 
     const utxos = walletService.getUtxosDeposit()

app/containers/LastActivityPage.js

@@ -11,6 +11,7 @@ import walletService from '../services/walletService';
 import mixService from '../services/mixService';
 import poolsService from '../services/poolsService';
 import UtxosTable from '../components/Utxo/UtxosTable';
+import utils from '../services/utils';
 
 class LastActivityPage extends Component {
 
@@ -21,14 +22,8 @@ class LastActivityPage extends Component {
   // tx0
 
   render() {
-    if (!walletService.isReady()) {
-      return <small>Fetching wallet...</small>
-    }
-    if (!mixService.isReady()) {
-      return <small>Fetching mix state...</small>
-    }
-    if (!poolsService.isReady()) {
-      return <small>Fetching pools...</small>
+    if (!walletService.isReady() || !mixService.isReady() || !poolsService.isReady()) {
+      return utils.spinner()
     }
 
     const utxosDeposit = walletService.getUtxosDeposit().filter(a =>  a.lastActivityElapsed ? true : false)

app/containers/PoolsPage.js

@@ -16,7 +16,7 @@ class PoolsPage extends Component {
 
   render() {
     if (!poolsService.isReady()) {
-      return <small>Fetching pools...</small>
+      return utils.spinner()
     }
 
     return (

app/containers/PostmixPage.js

@@ -15,14 +15,8 @@ export default class PostmixPage extends Component<Props> {
   props: Props;
 
   render() {
-    if (!walletService.isReady()) {
-      return <small>Fetching wallet...</small>
-    }
-    if (!mixService.isReady()) {
-      return <small>Fetching mix state...</small>
-    }
-    if (!poolsService.isReady()) {
-      return <small>Fetching pools...</small>
+    if (!walletService.isReady() || !mixService.isReady() || !poolsService.isReady()) {
+      return utils.spinner()
     }
 
     const utxos = walletService.getUtxosPostmix()

app/containers/PremixPage.js

@@ -15,14 +15,8 @@ export default class PremixPage extends Component<Props> {
   props: Props;
 
   render() {
-    if (!walletService.isReady()) {
-      return <small>Fetching wallet...</small>
-    }
-    if (!mixService.isReady()) {
-      return <small>Fetching mix state...</small>
-    }
-    if (!poolsService.isReady()) {
-      return <small>Fetching pools...</small>
+    if (!walletService.isReady() || !mixService.isReady() || !poolsService.isReady()) {
+      return utils.spinner()
     }
 
     const utxos = walletService.getUtxosPremix()

app/services/utils.js

@@ -158,8 +158,7 @@ class Utils {
   }
 
   statusLabelText(utxo) {
-    if ((utxo.status === UTXO_STATUS.READY && utxo.account === WHIRLPOOL_ACCOUNTS.POSTMIX)
-      || utxo.status === UTXO_STATUS.MIX_QUEUE || utxo.status === UTXO_STATUS.MIX_SUCCESS) {
+    if (utxo.account === WHIRLPOOL_ACCOUNTS.POSTMIX) {
       return 'MIXED'
     }
     if (utxo.mixableStatus === MIXABLE_STATUS.NO_POOL) {
@@ -171,6 +170,7 @@ class Utils {
       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 '?'
@@ -236,7 +236,7 @@ class Utils {
     if (len < 10) {
       return str
     }
-    return str.substring(0, 5)+'...'+str.substring(len - 3)
+    return str.substring(0, 5)+'...'+str.substring(len - 4)
   }
 
   durationElapsed(time) {
@@ -259,6 +259,10 @@ class Utils {
 
     document.body.removeChild(el);
   }
+
+  spinner() {
+    return <FontAwesomeIcon icon={Icons.faSpinner} spin size='xs' />
+  }
 }
 
 const utils = new Utils()