feat: update design of the accounting page (#209)
* feat: update design of the accounting page, fixed the worsed graphical offenders * chore: button alignment * chore: removed unused dependency * chore: buttons are underneath the action * feat: refactored the peers table to be in line with the new design * feat: add total uncashed amount and sorting for the peers * feat: action buttons are now properly aligned * chore: typo in comment
This commit is contained in:
Vojtech Simetka
GitHub
@@ -1,94 +0,0 @@
|
||||
import { ReactElement } from 'react'
|
||||
|
||||
import { createStyles, makeStyles } from '@material-ui/core/styles'
|
||||
import { Card, CardContent, Typography, Theme } from '@material-ui/core/'
|
||||
import WithdrawModal from '../../containers/WithdrawModal'
|
||||
import DepositModal from '../../containers/DepositModal'
|
||||
|
||||
import type { ChequebookAddressResponse } from '@ethersphere/bee-js'
|
||||
import { Token } from '../../models/Token'
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
root: {
|
||||
display: 'flex',
|
||||
},
|
||||
buttons: {
|
||||
display: 'flex',
|
||||
columnGap: theme.spacing(1),
|
||||
},
|
||||
gridContainer: {
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
marginLeft: theme.spacing(1),
|
||||
marginRight: theme.spacing(1),
|
||||
columnGap: theme.spacing(1),
|
||||
rowGap: theme.spacing(1),
|
||||
flex: '0 1 auto',
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
chequebookActions: {
|
||||
justifyContent: 'space-between',
|
||||
display: 'flex',
|
||||
marginBottom: theme.spacing(1),
|
||||
},
|
||||
}),
|
||||
)
|
||||
|
||||
interface ChequebookBalance {
|
||||
totalBalance: Token
|
||||
availableBalance: Token
|
||||
}
|
||||
|
||||
interface Props {
|
||||
chequebookAddress: ChequebookAddressResponse | null
|
||||
chequebookBalance: ChequebookBalance | null
|
||||
totalsent?: Token
|
||||
totalreceived?: Token
|
||||
}
|
||||
|
||||
function AccountCard({ totalreceived, totalsent, chequebookBalance }: Props): ReactElement {
|
||||
const classes = useStyles()
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={classes.chequebookActions}>
|
||||
<Typography component="h2" variant="h6">
|
||||
Chequebook
|
||||
</Typography>
|
||||
<div className={classes.buttons}>
|
||||
<WithdrawModal />
|
||||
<DepositModal />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card className={classes.root}>
|
||||
<CardContent className={classes.gridContainer}>
|
||||
<div>
|
||||
<Typography component="h2" variant="h6" color="primary" gutterBottom>
|
||||
Total Balance
|
||||
</Typography>
|
||||
<Typography variant="h5">{chequebookBalance?.totalBalance.toFixedDecimal()} BZZ</Typography>
|
||||
</div>
|
||||
<div>
|
||||
<Typography component="h2" variant="h6" color="primary" gutterBottom>
|
||||
Available Uncommitted Balance
|
||||
</Typography>
|
||||
<Typography variant="h5">{chequebookBalance?.availableBalance.toFixedDecimal()} BZZ</Typography>
|
||||
</div>
|
||||
<div>
|
||||
<Typography component="h2" variant="h6" color="primary" gutterBottom>
|
||||
Total Sent / Received
|
||||
</Typography>
|
||||
<Typography variant="h5">
|
||||
{totalsent?.toFixedDecimal()} / {totalreceived?.toFixedDecimal()} BZZ
|
||||
</Typography>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AccountCard
|
||||
@@ -1,94 +0,0 @@
|
||||
import type { ReactElement } from 'react'
|
||||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import { Table, TableBody, TableCell, TableContainer, TableRow, TableHead, Paper } from '@material-ui/core'
|
||||
|
||||
import ClipboardCopy from '../../components/ClipboardCopy'
|
||||
import CashoutModal from '../../components/CashoutModal'
|
||||
import PeerDetailDrawer from '../../components/PeerDetail'
|
||||
import { Accounting } from '../../hooks/accounting'
|
||||
|
||||
const useStyles = makeStyles({
|
||||
table: {
|
||||
minWidth: 650,
|
||||
},
|
||||
values: {
|
||||
textAlign: 'right',
|
||||
fontFamily: 'monospace, monospace',
|
||||
},
|
||||
})
|
||||
interface Props {
|
||||
isLoadingUncashed: boolean
|
||||
accounting: Accounting[] | null
|
||||
}
|
||||
|
||||
function BalancesTable({ accounting, isLoadingUncashed }: Props): ReactElement | null {
|
||||
if (accounting === null) return null
|
||||
const classes = useStyles()
|
||||
|
||||
return (
|
||||
<TableContainer component={Paper}>
|
||||
<Table className={classes.table} size="small" aria-label="Balances Table">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Peer</TableCell>
|
||||
<TableCell align="right">Outstanding Balance</TableCell>
|
||||
<TableCell align="right">Settlements Sent / Received</TableCell>
|
||||
<TableCell align="right">Total</TableCell>
|
||||
<TableCell align="right">Uncashed Amount</TableCell>
|
||||
<TableCell />
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{accounting.map(({ peer, balance, received, sent, uncashedAmount, total }) => (
|
||||
<TableRow key={peer}>
|
||||
<TableCell>
|
||||
<div style={{ display: 'flex' }}>
|
||||
<small>
|
||||
<PeerDetailDrawer peerId={peer} />
|
||||
</small>
|
||||
<ClipboardCopy value={peer} />
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className={classes.values}>
|
||||
<span
|
||||
style={{
|
||||
color: balance.toBigNumber.isPositive() ? '#32c48d' : '#c9201f',
|
||||
}}
|
||||
>
|
||||
{balance.toFixedDecimal()}
|
||||
</span>{' '}
|
||||
BZZ
|
||||
</TableCell>
|
||||
<TableCell className={classes.values}>
|
||||
-{sent.toFixedDecimal()} / {received.toFixedDecimal()} BZZ
|
||||
</TableCell>
|
||||
<TableCell className={classes.values}>
|
||||
<span
|
||||
style={{
|
||||
color: total.toBigNumber.isPositive() ? '#32c48d' : '#c9201f',
|
||||
}}
|
||||
>
|
||||
{total.toFixedDecimal()}
|
||||
</span>{' '}
|
||||
BZZ
|
||||
</TableCell>
|
||||
<TableCell className={classes.values}>
|
||||
{isLoadingUncashed && 'loading...'}
|
||||
{!isLoadingUncashed && (
|
||||
<>{uncashedAmount.toBigNumber.isGreaterThan('0') ? uncashedAmount.toFixedDecimal() : '0'} BZZ</>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className={classes.values}>
|
||||
{uncashedAmount.toBigNumber.isGreaterThan('0') && (
|
||||
<CashoutModal uncashedAmount={uncashedAmount.toFixedDecimal()} peerId={peer} />
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
)
|
||||
}
|
||||
|
||||
export default BalancesTable
|
||||
@@ -0,0 +1,52 @@
|
||||
import type { ReactElement } from 'react'
|
||||
|
||||
import ExpandableList from '../../components/ExpandableList'
|
||||
import ExpandableListItem from '../../components/ExpandableListItem'
|
||||
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
|
||||
import ExpandableListItemKey from '../../components/ExpandableListItemKey'
|
||||
|
||||
import CashoutModal from '../../components/CashoutModal'
|
||||
import { Accounting } from '../../hooks/accounting'
|
||||
import type { Token } from '../../models/Token'
|
||||
|
||||
interface Props {
|
||||
isLoadingUncashed: boolean
|
||||
totalUncashed: Token
|
||||
accounting: Accounting[] | null
|
||||
}
|
||||
|
||||
export default function PeerBalances({ accounting, isLoadingUncashed, totalUncashed }: Props): ReactElement | null {
|
||||
return (
|
||||
<ExpandableList
|
||||
label={`Peers (${accounting?.length || 0})`}
|
||||
info={`${totalUncashed.toFixedDecimal()} BZZ (uncashed)`}
|
||||
>
|
||||
<ExpandableListItem label="Uncashed Amount Total" value={`${totalUncashed.toFixedDecimal()} BZZ`} />
|
||||
{accounting?.map(({ peer, balance, received, sent, uncashedAmount, total }) => (
|
||||
<ExpandableList
|
||||
key={peer}
|
||||
label={`Peer ${peer.substr(0, 8)}[…]`}
|
||||
level={1}
|
||||
info={`${uncashedAmount.toFixedDecimal()} BZZ (uncashed)`}
|
||||
>
|
||||
<ExpandableListItemKey label="Peer ID" value={peer} />
|
||||
<ExpandableListItem label="Outstanding Balance" value={`${balance.toFixedDecimal()} BZZ`} />
|
||||
<ExpandableListItem
|
||||
label="Settlements Sent / Received"
|
||||
value={`-${sent.toFixedDecimal()} / ${received.toFixedDecimal()} BZZ`}
|
||||
/>
|
||||
<ExpandableListItem label="Total" value={`${total.toFixedDecimal()} BZZ`} />
|
||||
<ExpandableListItem
|
||||
label="Uncashed Amount"
|
||||
value={isLoadingUncashed ? 'loading…' : `${uncashedAmount.toFixedDecimal()} BZZ`}
|
||||
/>
|
||||
{uncashedAmount.toBigNumber.isGreaterThan('0') && (
|
||||
<ExpandableListItemActions>
|
||||
<CashoutModal uncashedAmount={uncashedAmount.toFixedDecimal()} peerId={peer} />
|
||||
</ExpandableListItemActions>
|
||||
)}
|
||||
</ExpandableList>
|
||||
))}
|
||||
</ExpandableList>
|
||||
)
|
||||
}
|
||||
@@ -1,45 +1,52 @@
|
||||
import { ReactElement, useContext } from 'react'
|
||||
import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
|
||||
|
||||
import AccountCard from '../accounting/AccountCard'
|
||||
import BalancesTable from './BalancesTable'
|
||||
import EthereumAddressCard from '../../components/EthereumAddressCard'
|
||||
import PeerBalances from './PeerBalances'
|
||||
import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
|
||||
import { Context as BeeContext } from '../../providers/Bee'
|
||||
import { Context as SettingsContext } from '../../providers/Settings'
|
||||
import { useAccounting } from '../../hooks/accounting'
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
root: {
|
||||
width: '100%',
|
||||
display: 'grid',
|
||||
rowGap: theme.spacing(3),
|
||||
},
|
||||
}),
|
||||
)
|
||||
import ExpandableList from '../../components/ExpandableList'
|
||||
import ExpandableListItem from '../../components/ExpandableListItem'
|
||||
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
|
||||
import ExpandableListItemKey from '../../components/ExpandableListItemKey'
|
||||
import WithdrawModal from '../../containers/WithdrawModal'
|
||||
import DepositModal from '../../containers/DepositModal'
|
||||
|
||||
export default function Accounting(): ReactElement {
|
||||
const classes = useStyles()
|
||||
|
||||
const { status, nodeAddresses, chequebookAddress, chequebookBalance, settlements, peerBalances } =
|
||||
useContext(BeeContext)
|
||||
const { beeDebugApi } = useContext(SettingsContext)
|
||||
|
||||
const { accounting, isLoadingUncashed } = useAccounting(beeDebugApi, settlements, peerBalances)
|
||||
const { accounting, totalUncashed, isLoadingUncashed } = useAccounting(beeDebugApi, settlements, peerBalances)
|
||||
|
||||
if (!status.all) return <TroubleshootConnectionCard />
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<AccountCard
|
||||
chequebookAddress={chequebookAddress}
|
||||
chequebookBalance={chequebookBalance}
|
||||
totalsent={settlements?.totalSent}
|
||||
totalreceived={settlements?.totalReceived}
|
||||
/>
|
||||
<EthereumAddressCard nodeAddresses={nodeAddresses} chequebookAddress={chequebookAddress} />
|
||||
<BalancesTable accounting={accounting} isLoadingUncashed={isLoadingUncashed} />
|
||||
<div>
|
||||
<ExpandableList label="Chequebook" defaultOpen>
|
||||
<ExpandableListItem label="Total Balance" value={`${chequebookBalance?.totalBalance.toFixedDecimal()} BZZ`} />
|
||||
<ExpandableListItem
|
||||
label="Available Uncommitted Balance"
|
||||
value={`${chequebookBalance?.availableBalance.toFixedDecimal()} BZZ`}
|
||||
/>
|
||||
<ExpandableListItem
|
||||
label="Total Cheques Amount Sent"
|
||||
value={`${settlements?.totalSent.toFixedDecimal()} BZZ`}
|
||||
/>
|
||||
<ExpandableListItem
|
||||
label="Total Cheques Amount Received"
|
||||
value={`${settlements?.totalReceived.toFixedDecimal()} BZZ`}
|
||||
/>
|
||||
<ExpandableListItemActions>
|
||||
<WithdrawModal />
|
||||
<DepositModal />
|
||||
</ExpandableListItemActions>
|
||||
</ExpandableList>
|
||||
<ExpandableList label="Blockchain" defaultOpen>
|
||||
<ExpandableListItemKey label="Ethereum address" value={nodeAddresses?.ethereum || ''} />
|
||||
<ExpandableListItemKey label="Chequebook contract address" value={chequebookAddress?.chequebookAddress || ''} />
|
||||
</ExpandableList>
|
||||
<PeerBalances accounting={accounting} isLoadingUncashed={isLoadingUncashed} totalUncashed={totalUncashed} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user