chore: update bee-js to 0.8.1 version (#78)

* chore: upgrade to bee-js 0.8.1

* refactor: removed toString on number types, Token now accepts numbers

* test: removed fromBZZbaseUnit test, makeBigNumber accepts number now

* chore: fix logic error when displaying Cashout button

src/pages/accounting/AccountCard.tsx

@@ -6,9 +6,8 @@ import { Skeleton } from '@material-ui/lab'
 import WithdrawModal from '../../containers/WithdrawModal'
 import DepositModal from '../../containers/DepositModal'
 
-import { fromBZZbaseUnit } from '../../utils'
-
 import type { ChequebookAddressResponse } from '@ethersphere/bee-js'
+import { Token } from '../../models/Token'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -34,15 +33,15 @@ const useStyles = makeStyles((theme: Theme) =>
 )
 
 interface ChequebookBalance {
-  totalBalance: number
-  availableBalance: number
+  totalBalance: Token
+  availableBalance: Token
 }
 
 interface Props {
   chequebookAddress: ChequebookAddressResponse | null
   chequebookBalance: ChequebookBalance | null
-  totalsent: number
-  totalreceived: number
+  totalsent: Token
+  totalreceived: Token
   isLoading: boolean
 }
 
@@ -66,24 +65,20 @@ function AccountCard({ totalreceived, totalsent, chequebookBalance, isLoading }:
               <Typography component="h2" variant="h6" color="primary" gutterBottom>
                 Total Balance
               </Typography>
-              <Typography variant="h5">
-                {fromBZZbaseUnit(chequebookBalance?.totalBalance || 0).toFixed(7)} BZZ
-              </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">
-                {fromBZZbaseUnit(chequebookBalance?.availableBalance || 0).toFixed(7)} BZZ
-              </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">
-                {fromBZZbaseUnit(totalsent).toFixed(7)} / {fromBZZbaseUnit(totalreceived).toFixed(7)} BZZ
+                {totalsent.toFixedDecimal()} / {totalreceived.toFixedDecimal()} BZZ
               </Typography>
             </div>
           </CardContent>

src/pages/accounting/BalancesTable.tsx

@@ -2,10 +2,10 @@ 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 { fromBZZbaseUnit } from '../../utils'
 import ClipboardCopy from '../../components/ClipboardCopy'
 import CashoutModal from '../../components/CashoutModal'
 import PeerDetailDrawer from './PeerDetail'
+import { Accounting } from '../../hooks/accounting'
 
 const useStyles = makeStyles({
   table: {
@@ -52,32 +52,36 @@ function BalancesTable({ accounting, isLoadingUncashed }: Props): ReactElement |
               <TableCell className={classes.values}>
                 <span
                   style={{
-                    color: balance > 0 ? '#32c48d' : '#c9201f',
+                    color: balance.toBigNumber.isPositive() ? '#32c48d' : '#c9201f',
                   }}
                 >
-                  {fromBZZbaseUnit(balance).toFixed(7).toLocaleString()}
+                  {balance.toFixedDecimal()}
                 </span>{' '}
                 BZZ
               </TableCell>
               <TableCell className={classes.values}>
-                -{fromBZZbaseUnit(sent).toFixed(7)} / {fromBZZbaseUnit(received).toFixed(7)} BZZ
+                -{sent.toFixedDecimal()} / {received.toFixedDecimal()} BZZ
               </TableCell>
               <TableCell className={classes.values}>
                 <span
                   style={{
-                    color: total > 0 ? '#32c48d' : '#c9201f',
+                    color: total.toBigNumber.isPositive() ? '#32c48d' : '#c9201f',
                   }}
                 >
-                  {fromBZZbaseUnit(total).toFixed(7)}
+                  {total.toFixedDecimal()}
                 </span>{' '}
                 BZZ
               </TableCell>
               <TableCell className={classes.values}>
                 {isLoadingUncashed && 'loading...'}
-                {!isLoadingUncashed && <>{uncashedAmount > 0 ? fromBZZbaseUnit(uncashedAmount).toFixed(7) : '0'} BZZ</>}
+                {!isLoadingUncashed && (
+                  <>{uncashedAmount.toBigNumber.isGreaterThan('0') ? uncashedAmount.toFixedDecimal() : '0'} BZZ</>
+                )}
               </TableCell>
               <TableCell className={classes.values}>
-                {uncashedAmount > 0 && <CashoutModal uncashedAmount={uncashedAmount} peerId={peer} />}
+                {uncashedAmount.toBigNumber.isGreaterThan('0') && (
+                  <CashoutModal uncashedAmount={uncashedAmount.toFixedDecimal()} peerId={peer} />
+                )}
               </TableCell>
             </TableRow>
           ))}

src/pages/accounting/index.tsx

@@ -63,7 +63,7 @@ export default function Accounting(): ReactElement {
       />
       {error && (
         <Container style={{ textAlign: 'center', padding: '50px' }}>
-          Error loading accountin details: {error.message}
+          Error loading accounting details: {error.message}
         </Container>
       )}
       {!error && <BalancesTable accounting={accounting} isLoadingUncashed={isLoadingUncashed} />}

src/pages/status/NodeSetupWorkflow.tsx

@@ -9,6 +9,7 @@ import VersionCheck from './SetupSteps/VersionCheck'
 import EthereumConnectionCheck from './SetupSteps/EthereumConnectionCheck'
 import ChequebookDeployFund from './SetupSteps/ChequebookDeployFund'
 import PeerConnection from './SetupSteps/PeerConnection'
+import { StatusChequebookHook } from '../../hooks/status'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

src/pages/status/SetupSteps/ChequebookDeployFund.tsx

@@ -2,6 +2,7 @@ import { Typography } from '@material-ui/core/'
 import EthereumAddress from '../../../components/EthereumAddress'
 import DepositModal from '../../../containers/DepositModal'
 import type { ReactElement } from 'react'
+import type { StatusChequebookHook } from '../../../hooks/status'
 
 interface Props extends StatusChequebookHook {
   ethereumAddress?: string
@@ -21,7 +22,7 @@ const ChequebookDeployFund = ({
         {chequebookAddress?.chequebookaddress && <DepositModal />}
       </p>
       <div style={{ marginBottom: '10px' }}>
-        {!(chequebookAddress?.chequebookaddress && chequebookBalance?.totalBalance > 0) && (
+        {!(chequebookAddress?.chequebookaddress && chequebookBalance?.totalBalance.toBigNumber.isGreaterThan(0)) && (
           <div>
             <span>
               Your chequebook is either not deployed or funded. Join{' '}