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:
Vojtech Simetka
2021-04-13 12:26:29 +02:00
committed by GitHub
parent 343e388498
commit 825772cf73
19 changed files with 411 additions and 238 deletions
+12 -12
View File
@@ -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,
)}
)
+3 -3
View File
@@ -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>
+4 -4
View File
@@ -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 ? (
+5 -5
View File
@@ -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>
+3 -3
View File
@@ -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>
))}