fix: withdraw/deposit converts from BZZ (10^16 base units) (#66)
* refactor: added toBZZbaseUnit function * feat: added utility for attesting value is BZZ convertible to base units * fix: conversion from 15 to 16 decimal places, added unsafe versions * refactor: withdraw modal uses the safe conversion from BZZ * refactor: added BigNumber and Token class to handle BZZ digits correctly * refactor: extract deposit and withdraw functionality into single modal * test: added tests for Token * chore: removed unused component * chore: addressed PR review, token decimal is now integer 0-18 * chore: added comment to clarify the value restriction on token amount
This commit is contained in:
@@ -3,11 +3,11 @@ import { ReactElement } from 'react'
|
||||
import { createStyles, makeStyles } from '@material-ui/core/styles'
|
||||
import { Card, CardContent, Typography, Grid } from '@material-ui/core/'
|
||||
import { Skeleton } from '@material-ui/lab'
|
||||
import WithdrawlModal from '../../components/WithdrawlModal'
|
||||
import DepositModal from '../../components/DepositModal'
|
||||
import WithdrawModal from '../../containers/WithdrawModal'
|
||||
import DepositModal from '../../containers/DepositModal'
|
||||
import CashoutModal from '../../components/CashoutModal'
|
||||
|
||||
import { ConvertBalanceToBZZ } from '../../utils/common'
|
||||
import { fromBZZbaseUnit } from '../../utils'
|
||||
|
||||
import type { AllSettlements, ChequebookAddressResponse } from '@ethersphere/bee-js'
|
||||
|
||||
@@ -55,7 +55,7 @@ function AccountCard(props: Props): ReactElement {
|
||||
<div style={{ justifyContent: 'space-between', display: 'flex' }}>
|
||||
<h2 style={{ marginTop: '0px' }}>Accounting</h2>
|
||||
<div style={{ display: 'flex' }}>
|
||||
<WithdrawlModal />
|
||||
<WithdrawModal />
|
||||
<DepositModal />
|
||||
<CashoutModal />
|
||||
</div>
|
||||
@@ -68,28 +68,28 @@ function AccountCard(props: Props): ReactElement {
|
||||
<Grid container spacing={5}>
|
||||
<Grid item>
|
||||
<Typography component="h2" variant="h6" color="primary" gutterBottom>
|
||||
Total Balance
|
||||
Total Balance (BZZ)
|
||||
</Typography>
|
||||
<Typography component="p" variant="h5">
|
||||
{ConvertBalanceToBZZ(props.chequebookBalance.totalBalance)}
|
||||
{fromBZZbaseUnit(props.chequebookBalance.totalBalance)}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Typography component="h2" variant="h6" color="primary" gutterBottom>
|
||||
Available Balance
|
||||
Available Balance (BZZ)
|
||||
</Typography>
|
||||
<Typography component="p" variant="h5">
|
||||
{ConvertBalanceToBZZ(props.chequebookBalance.availableBalance)}
|
||||
{fromBZZbaseUnit(props.chequebookBalance.availableBalance)}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Typography component="h2" variant="h6" color="primary" gutterBottom>
|
||||
Total Sent / Received
|
||||
Total Sent / Received (BZZ)
|
||||
</Typography>
|
||||
<Typography component="div" variant="h5">
|
||||
<span style={{ marginRight: '7px' }}>
|
||||
{ConvertBalanceToBZZ(props.settlements?.totalsent || 0)} /{' '}
|
||||
{ConvertBalanceToBZZ(props.settlements?.totalreceived || 0)}
|
||||
{fromBZZbaseUnit(props.settlements?.totalsent || 0)} /{' '}
|
||||
{fromBZZbaseUnit(props.settlements?.totalreceived || 0)}
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
@@ -100,7 +100,7 @@ function AccountCard(props: Props): ReactElement {
|
||||
}}
|
||||
>
|
||||
(
|
||||
{ConvertBalanceToBZZ(
|
||||
{fromBZZbaseUnit(
|
||||
(props.settlements && props.settlements?.totalsent - props.settlements?.totalreceived) || 0,
|
||||
)}
|
||||
)
|
||||
|
||||
@@ -12,7 +12,7 @@ import {
|
||||
CircularProgress,
|
||||
} from '@material-ui/core'
|
||||
|
||||
import { ConvertBalanceToBZZ } from '../../utils/common'
|
||||
import { fromBZZbaseUnit } from '../../utils'
|
||||
|
||||
const useStyles = makeStyles({
|
||||
table: {
|
||||
@@ -59,12 +59,12 @@ function BalancesTable(props: Props): ReactElement {
|
||||
<TableCell>{peerBalance.peer}</TableCell>
|
||||
<TableCell
|
||||
style={{
|
||||
color: ConvertBalanceToBZZ(peerBalance.balance) > 0 ? '#32c48d' : '#c9201f',
|
||||
color: fromBZZbaseUnit(peerBalance.balance) > 0 ? '#32c48d' : '#c9201f',
|
||||
textAlign: 'right',
|
||||
fontFamily: 'monospace, monospace',
|
||||
}}
|
||||
>
|
||||
{ConvertBalanceToBZZ(peerBalance.balance).toFixed(7).toLocaleString()}
|
||||
{fromBZZbaseUnit(peerBalance.balance).toFixed(7).toLocaleString()}
|
||||
</TableCell>
|
||||
<TableCell align="right"></TableCell>
|
||||
</TableRow>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { ReactElement } from 'react'
|
||||
import type { ReactElement } from 'react'
|
||||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import {
|
||||
Table,
|
||||
@@ -12,7 +12,7 @@ import {
|
||||
CircularProgress,
|
||||
} from '@material-ui/core'
|
||||
|
||||
import { ConvertBalanceToBZZ } from '../../utils/common'
|
||||
import { fromBZZbaseUnit } from '../../utils'
|
||||
import EthereumAddress from '../../components/EthereumAddress'
|
||||
import ClipboardCopy from '../../components/ClipboardCopy'
|
||||
import PeerDetailDrawer from './PeerDetailDrawer'
|
||||
@@ -80,7 +80,7 @@ function ChequebookTable(props: Props): ReactElement {
|
||||
<p style={{ marginBottom: '0px', fontFamily: 'monospace, monospace', display: 'flex' }}>
|
||||
<span style={{ whiteSpace: 'nowrap', marginRight: '12px', paddingTop: '3px' }}>
|
||||
{peerCheque.lastreceived?.payout
|
||||
? `${ConvertBalanceToBZZ(peerCheque.lastreceived?.payout).toFixed(7).toLocaleString()} from`
|
||||
? `${fromBZZbaseUnit(peerCheque.lastreceived?.payout).toFixed(7).toLocaleString()} from`
|
||||
: '-'}
|
||||
</span>
|
||||
{peerCheque.lastreceived ? (
|
||||
@@ -97,7 +97,7 @@ function ChequebookTable(props: Props): ReactElement {
|
||||
<p style={{ marginBottom: '0px', fontFamily: 'monospace, monospace', display: 'flex' }}>
|
||||
<span style={{ whiteSpace: 'nowrap', marginRight: '12px', paddingTop: '3px' }}>
|
||||
{peerCheque.lastsent?.payout
|
||||
? `${ConvertBalanceToBZZ(peerCheque.lastsent?.payout).toFixed(7).toLocaleString()} to`
|
||||
? `${fromBZZbaseUnit(peerCheque.lastsent?.payout).toFixed(7).toLocaleString()} to`
|
||||
: '-'}
|
||||
</span>
|
||||
{peerCheque.lastsent ? (
|
||||
|
||||
@@ -3,7 +3,7 @@ import { Paper, Container, Drawer, Button, Typography, CircularProgress, Grid }
|
||||
import ClipboardCopy from '../../components/ClipboardCopy'
|
||||
import { beeDebugApi } from '../../services/bee'
|
||||
import EthereumAddress from '../../components/EthereumAddress'
|
||||
import { ConvertBalanceToBZZ } from '../../utils/common'
|
||||
import { fromBZZbaseUnit } from '../../utils'
|
||||
import { LastCashoutActionResponse, LastChequesForPeerResponse } from '@ethersphere/bee-js'
|
||||
|
||||
function truncStringPortion(str: string, firstCharCount = 10, endCharCount = 10) {
|
||||
@@ -87,7 +87,7 @@ export default function Index(props: Props): ReactElement {
|
||||
Payout:
|
||||
<span style={{ marginBottom: '0px', fontFamily: 'monospace, monospace' }}>
|
||||
{' '}
|
||||
{peerCheque?.lastsent?.payout ? ConvertBalanceToBZZ(peerCheque?.lastsent?.payout) : '-'}
|
||||
{peerCheque?.lastsent?.payout ? fromBZZbaseUnit(peerCheque?.lastsent?.payout) : '-'}
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
@@ -105,7 +105,7 @@ export default function Index(props: Props): ReactElement {
|
||||
Payout:
|
||||
<span style={{ marginBottom: '0px', fontFamily: 'monospace, monospace' }}>
|
||||
{' '}
|
||||
{peerCheque?.lastreceived?.payout ? ConvertBalanceToBZZ(peerCheque?.lastreceived?.payout) : '-'}
|
||||
{peerCheque?.lastreceived?.payout ? fromBZZbaseUnit(peerCheque?.lastreceived?.payout) : '-'}
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
@@ -124,14 +124,14 @@ export default function Index(props: Props): ReactElement {
|
||||
<p>
|
||||
Cumulative Payout:
|
||||
<span style={{ marginBottom: '0px', fontFamily: 'monospace, monospace' }}>
|
||||
{peerCashout?.cumulativePayout ? ConvertBalanceToBZZ(peerCashout?.cumulativePayout) : '-'}
|
||||
{peerCashout?.cumulativePayout ? fromBZZbaseUnit(peerCashout?.cumulativePayout) : '-'}
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
Last Payout:
|
||||
<span style={{ marginBottom: '0px', fontFamily: 'monospace, monospace' }}>
|
||||
{' '}
|
||||
{peerCashout?.result.lastPayout ? ConvertBalanceToBZZ(peerCashout?.result.lastPayout) : '-'}
|
||||
{peerCashout?.result.lastPayout ? fromBZZbaseUnit(peerCashout?.result.lastPayout) : '-'}
|
||||
</span>
|
||||
<span> {peerCashout?.result.bounced ? 'Bounced' : ''}</span>
|
||||
</p>
|
||||
|
||||
@@ -12,7 +12,7 @@ import {
|
||||
CircularProgress,
|
||||
} from '@material-ui/core'
|
||||
|
||||
import { ConvertBalanceToBZZ } from '../../utils/common'
|
||||
import { fromBZZbaseUnit } from '../../utils'
|
||||
|
||||
import type { AllSettlements, Settlements } from '@ethersphere/bee-js'
|
||||
|
||||
@@ -51,10 +51,10 @@ function SettlementsTable(props: Props): ReactElement {
|
||||
<TableRow key={item.peer}>
|
||||
<TableCell>{item.peer}</TableCell>
|
||||
<TableCell style={{ fontFamily: 'monospace, monospace' }}>
|
||||
{item.received > 0 ? ConvertBalanceToBZZ(item.received).toFixed(7).toLocaleString() : item.received}
|
||||
{item.received > 0 ? fromBZZbaseUnit(item.received).toFixed(7).toLocaleString() : item.received}
|
||||
</TableCell>
|
||||
<TableCell style={{ fontFamily: 'monospace, monospace' }}>
|
||||
{item.sent > 0 ? ConvertBalanceToBZZ(item.sent).toFixed(7).toLocaleString() : item.sent}
|
||||
{item.sent > 0 ? fromBZZbaseUnit(item.sent).toFixed(7).toLocaleString() : item.sent}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user