Commit dc09ec80 authored by zeroleak's avatar zeroleak
Browse files

ui/ux

parent a973be9f
......@@ -31,9 +31,9 @@ th.value, th.poolId, th.mixsDone, th.utxoStatus {
width: 95px;
}
td.utxoMessage {
overflow: auto;
.utxoMessage {
max-width: 180px;
word-break: break-all;
}
.progress-bar {
......@@ -111,7 +111,8 @@ td.utxoMessage {
}
.table-generic .select-actions {
padding: 0 1em;
padding: 0 1em 0.3em 1em;
text-align:center;
}
.modal-body canvas.qr {
......
......@@ -20,7 +20,7 @@ const IndeterminateCheckbox = React.forwardRef(
}
)
export default function TableGeneric({ columns, data, tableKey, size='sm', /*onFetchData, pageIndex, pageSize, filters, */sortBy, getRowStyle=()=>{}, getRowClassName=()=>{}, onSelect=undefined }) {
export default function TableGeneric({ columns, data, tableKey, size='sm', /*onFetchData, pageIndex, pageSize, filters, */sortBy, getRowStyle=()=>{}, getRowClassName=()=>{}, onSelect=undefined, className=undefined }) {
if (!data) {
return
}
......@@ -83,6 +83,9 @@ export default function TableGeneric({ columns, data, tableKey, size='sm', /*onF
onFetchData({ pageIndex, pageSize, sortBy, filters })
}, [onFetchData, pageIndex, pageSize, sortBy, filters])*/
const rowsOriginal = rows.map(d => d.original)
const selectedItems = selectedFlatRows.length>0 ? selectedFlatRows.map(
d => d.original
) : undefined
......@@ -90,7 +93,16 @@ export default function TableGeneric({ columns, data, tableKey, size='sm', /*onF
// Render the UI for your table
return (
<div className='table-generic'>
<BTable hover size={size} {...getTableProps()}>
{onSelect && <div className='select-actions text-muted'>
{!selectedItems && <span>
{rowsOriginal.length} {onSelect.label} {onSelect.labelDetails? onSelect.labelDetails(rowsOriginal):''}
</span>}
{selectedItems && <span>
{selectedItems.length} {onSelect.label} {onSelect.labelDetails? onSelect.labelDetails(selectedItems):''} selected <Icon.ArrowRight size={12}/>{' '}
{onSelect.actions(selectedItems).map((action,i) => <span key={i}>{action}</span>)}
</span>}
</div>}
<BTable hover size={size} {...getTableProps()} className={className}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
......@@ -121,10 +133,6 @@ export default function TableGeneric({ columns, data, tableKey, size='sm', /*onF
})}
</tbody>
</BTable>
{onSelect && selectedItems && <div className='select-actions text-muted'>
{Object.keys(selectedRowIds).length} {onSelect.label} selected <Icon.ArrowRight size={12}/>{' '}
{onSelect.actions(selectedItems).map((action,i) => <span key={i}>{action}</span>)}
</div>}
</div>
);
}
......@@ -5,14 +5,13 @@
*/
import React, { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import * as Icons from '@fortawesome/free-solid-svg-icons';
import mixService from '../../services/mixService';
import * as Icon from 'react-feather';
import utils, { MIXABLE_STATUS, UTXO_STATUS, WHIRLPOOL_ACCOUNTS } from '../../services/utils';
import LinkExternal from '../Utils/LinkExternal';
import modalService from '../../services/modalService';
import * as Icons from '@fortawesome/free-solid-svg-icons';
import { FormCheck } from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import TableGeneric from '../TableGeneric/TableGeneric';
const UtxoControls = React.memo(({ utxo }) => {
......@@ -139,8 +138,7 @@ const UtxosTable = ({ controls, pool, mixs, account, utxos, tableKey }) => {
{
Header: 'Info',
accessor: o => o.error,
className: 'utxoMessage',
Cell: o => !isReadOnly(o.row.original) && <small>{utils.utxoMessage(o.row.original)}</small>
Cell: o => !isReadOnly(o.row.original) && <div className='utxoMessage'><small>{utils.utxoMessage(o.row.original)}</small></div>
}
);
if (controls) {
......@@ -157,11 +155,9 @@ const UtxosTable = ({ controls, pool, mixs, account, utxos, tableKey }) => {
return (
<div>
{utxosReadOnly.length>0 && <div className='text-center text-muted'>
<FormCheck id="showReadOnly" type="checkbox" label={<span>{utxosReadOnly.length} non-mixable utxos ({utils.toBtc(amountUtxosReadOnly)}btc)</span>} onClick={() => setShowReadOnly(!showReadOnly)} checked={showReadOnly}/>
</div>}
<div className='table-utxos'>
<div>
<TableGeneric
className='table-utxos'
tableKey={tableKey}
columns={columns}
data={visibleUtxos}
......@@ -169,6 +165,7 @@ const UtxosTable = ({ controls, pool, mixs, account, utxos, tableKey }) => {
getRowClassName={row => isReadOnly(row.original) ? 'utxo-disabled' : ''}
onSelect={{
label: 'utxos',
labelDetails: utxos => '('+utils.toBtc(utils.sumUtxos(utxos))+' btc)',
actions: utxos => [
<button className='btn btn-sm btn-primary' title='Send to Premix' onClick={() => modalService.openTx0(utxos)}>Premix</button>
]
......@@ -176,6 +173,10 @@ const UtxosTable = ({ controls, pool, mixs, account, utxos, tableKey }) => {
/>
{visibleUtxos.length == 0 && <div className='text-center text-muted'><small>No utxo yet</small></div>}
</div>
{utxosReadOnly.length>0 && <div className='text-center text-muted'>
<button className='btn btn-sm btn-default text-muted' onClick={() => setShowReadOnly(!showReadOnly)}>
<FontAwesomeIcon icon={showReadOnly ? Icons.faAngleUp : Icons.faAngleDown} /> {showReadOnly?'Hide':'Show'} {utxosReadOnly.length} non-mixable utxos ({utils.toBtc(amountUtxosReadOnly)}btc)</button>
</div>}
</div>
);
};
......
......@@ -191,21 +191,21 @@ class App extends React.Component<Props> {
</Link>
</li>}
{cliService.isLoggedIn() && walletService.isReady() && <li className="nav-item">
<Link to={routes.DEPOSIT} className="nav-link">
<Link to={routes.DEPOSIT} className="nav-link" title='Utxos ready to enter Whirlpool'>
<span data-feather="plus"></span>
Deposit
({walletService.getUtxosDeposit().length} · {utils.toBtc(walletService.getBalanceDeposit(), true)})
</Link>
</li>}
{cliService.isLoggedIn() && walletService.isReady() && <li className="nav-item">
<Link to={routes.PREMIX} className="nav-link">
<Link to={routes.PREMIX} className="nav-link" title='Utxos being mixed'>
<span data-feather="play"></span>
Premix
({walletService.getUtxosPremix().length} · {utils.toBtc(walletService.getBalancePremix(), true)})
</Link>
</li>}
{cliService.isLoggedIn() && walletService.isReady() && <li className="nav-item">
<Link to={routes.POSTMIX} className="nav-link">
<Link to={routes.POSTMIX} className="nav-link" title='Utxos successfully mixed'>
<span data-feather="check"></span>
Postmix
({walletService.getUtxosPostmix().length} · {utils.toBtc(walletService.getBalancePostmix(), true)})
......
......@@ -33,7 +33,6 @@ class DepositPage extends Component {
</div>
<div className='col-sm-10 stats'>
<a className='zpubLink' href='#' onClick={e => {modalService.openZpub(WHIRLPOOL_ACCOUNTS.DEPOSIT, walletService.getZpubDeposit());e.preventDefault()}}>ZPUB</a>
<span className='text-primary'>{utxos.length} utxos ({utils.toBtc(walletService.getBalanceDeposit())}btc)</span>
</div>
</div>
<div className='row h-100 d-flex flex-column'>
......
......@@ -28,7 +28,6 @@ export default class PostmixPage extends Component<Props> {
</div>
<div className='col-sm-10 stats'>
<a className='zpubLink' href='#' onClick={e => {modalService.openZpub(WHIRLPOOL_ACCOUNTS.POSTMIX, walletService.getZpubPostmix());e.preventDefault()}}>ZPUB</a>
<span className='text-primary'>{utxos.length} utxos ({utils.toBtc(walletService.getBalancePostmix())}btc)</span>
</div>
</div>
<div className='row h-100 d-flex flex-column'>
......
......@@ -28,7 +28,6 @@ export default class PremixPage extends Component<Props> {
</div>
<div className='col-sm-10 stats'>
<a className='zpubLink' href='#' onClick={e => {modalService.openZpub(WHIRLPOOL_ACCOUNTS.PREMIX, walletService.getZpubPremix());e.preventDefault()}}>ZPUB</a>
<span className='text-primary'>{utxos.length} utxos ({utils.toBtc(walletService.getBalancePremix())}btc)</span>
</div>
</div>
<div className='row h-100 d-flex flex-column'>
......
......@@ -4,18 +4,27 @@ html,body{height:100%;}
background-color: #700606;
border-color: #700606;
}
.btn.focus, .btn:focus {
box-shadow: 0 0 0 0.1rem #b71c1c24;
}
.btn-primary {
background-color: #700606;
border-color: #700606;
}
.btn-primary:hover, .btn-primary:focus {
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
background-color: #b71c1c !important;
border-color: #b71c1c !important;
}
.btn-primary.disabled,
.btn-primary:disabled {
.btn-primary.disabled, .btn-primary:disabled {
background-color: #aaa;
}
.btn-default {
border-color: #ececec;
background: none;
}
.btn-default:hover, .btn-default:focus, .btn-default:active {
background-color: #f8f9fa;
}
.btn-border {
border-color: #700606;
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment