feat: bee-js revamp (#690)

* chore: initial commit

* refactor: remove unnecessary wrappers

* style: add missing newline

* chore: bump bee-js

* chore: ignore any cast in fdp

* fix: remove cid import

* fix: make TextEncoder and TextDecoder available in jest

* refactor: dedupe stamp ttl second conversion

* refactor: use convenience methods from bee-js

* feat: update to bee-js for restored ens support

* fix: bump bee-js to get download fix

* fix: resolve feed before downloading reference

* fix: fix token displays

* fix: fix token input modal error message

* refactor: remove wallet balance provider

* chore: remove dead code

* refactor: upcoming bee js 0.15.0 (#692)

* chore: initial commit

* fix: do not break page when duration seconds is 0

* ci: remove cache

* chore: upgrade bee-js

* feat: bee-js and bee v2.6 compatibility

* chore: switch upcoming/bee-js to ethersphere/bee-js

src/components/CashoutModal.tsx

@@ -9,7 +9,6 @@ import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
 import Zap from 'remixicon-react/FlashlightLineIcon'
 import { Context as SettingsContext } from '../providers/Settings'
-import EthereumAddress from './EthereumAddress'
 
 interface Props {
   peerId: string
@@ -37,13 +36,9 @@ export default function CheckoutModal({ peerId, uncashedAmount }: Props): ReactE
         .cashoutLastCheque(peerId)
         .then(res => {
           setOpen(false)
-          enqueueSnackbar(
-            <span>
-              Successfully cashed out cheque. Transaction
-              <EthereumAddress hideBlockie transaction address={res} />
-            </span>,
-            { variant: 'success' },
-          )
+          enqueueSnackbar(<span>Successfully cashed out cheque. Transaction {res.toHex()}</span>, {
+            variant: 'success',
+          })
         })
         .catch((e: Error) => {
           console.error(e) // eslint-disable-line

src/components/EthereumAddress.tsx

@@ -1,5 +1,5 @@
-import { Utils } from '@ethersphere/bee-js'
 import { Typography } from '@material-ui/core/'
+import { EthAddress } from '@ethersphere/bee-js'
 import { ReactElement } from 'react'
 import Identicon from 'react-identicons'
 import { BLOCKCHAIN_EXPLORER_URL } from '../constants'
@@ -8,7 +8,7 @@ import { Flex } from './Flex'
 import QRCodeModal from './QRCodeModal'
 
 interface Props {
-  address: string | undefined
+  address: EthAddress | undefined
   hideBlockie?: boolean
   transaction?: boolean
   truncate?: boolean
@@ -21,7 +21,7 @@ export default function EthereumAddress(props: Props): ReactElement {
         <Flex>
           {props.hideBlockie ? null : (
             <div style={{ paddingTop: '5px', marginRight: '10px' }}>
-              <Identicon size={20} string={Utils.capitalizeAddressERC55(props.address)} />
+              <Identicon size={20} string={props.address.toChecksum()} />
             </div>
           )}
           <div>
@@ -45,8 +45,8 @@ export default function EthereumAddress(props: Props): ReactElement {
               {props.address}
             </a>
           </div>
-          <QRCodeModal value={Utils.capitalizeAddressERC55(props.address)} label={'Ethereum Address'} />
-          <ClipboardCopy value={Utils.capitalizeAddressERC55(props.address)} />
+          <QRCodeModal value={props.address.toChecksum()} label={'Ethereum Address'} />
+          <ClipboardCopy value={props.address.toChecksum()} />
         </Flex>
       ) : (
         '-'

src/components/SideBar.tsx

@@ -1,6 +1,6 @@
-import { BeeModes } from '@ethersphere/bee-js'
 import { Box, Divider, Drawer, Grid, List, Link as MUILink, Typography } from '@material-ui/core'
 import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
+import { BeeModes } from '@ethersphere/bee-js'
 import { ReactElement, useContext } from 'react'
 import { Link } from 'react-router-dom'
 import FilesIcon from 'remixicon-react/ArrowUpDownLineIcon'

src/components/StampExtensionModal.tsx

@@ -1,4 +1,3 @@
-import { Bee } from '@ethersphere/bee-js'
 import { Box } from '@material-ui/core'
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
@@ -6,6 +5,7 @@ import DialogActions from '@material-ui/core/DialogActions'
 import DialogContent from '@material-ui/core/DialogContent'
 import DialogTitle from '@material-ui/core/DialogTitle'
 import Input from '@material-ui/core/Input'
+import { BatchId, Bee } from '@ethersphere/bee-js'
 import { useSnackbar } from 'notistack'
 import { ReactElement, ReactNode, useState } from 'react'
 
@@ -13,14 +13,14 @@ interface Props {
   type: 'Topup' | 'Dilute'
   icon: ReactNode
   bee: Bee
-  stamp: string
+  stamp: BatchId
 }
 
 export default function StampExtensionModal({ type, icon, bee, stamp }: Props): ReactElement {
   const [open, setOpen] = useState(false)
   const [amount, setAmount] = useState('')
   const { enqueueSnackbar } = useSnackbar()
-  const label = `${type} ${stamp.substring(0, 8)}`
+  const label = `${type} ${stamp.toHex().substring(0, 8)}`
 
   const handleClickOpen = (e: React.MouseEvent<HTMLButtonElement>) => {
     setOpen(true)

src/components/WithdrawDepositModal.tsx

@@ -1,24 +1,23 @@
-import { ReactElement, ReactNode, useState } from 'react'
 import Button from '@material-ui/core/Button'
-import Input from '@material-ui/core/Input'
 import Dialog from '@material-ui/core/Dialog'
 import DialogActions from '@material-ui/core/DialogActions'
 import DialogContent from '@material-ui/core/DialogContent'
 import DialogContentText from '@material-ui/core/DialogContentText'
 import DialogTitle from '@material-ui/core/DialogTitle'
 import FormHelperText from '@material-ui/core/FormHelperText'
-import { Token } from '../models/Token'
-import type { BigNumber } from 'bignumber.js'
+import Input from '@material-ui/core/Input'
+import { BZZ, TransactionId } from '@ethersphere/bee-js'
 import { useSnackbar } from 'notistack'
+import { ReactElement, ReactNode, useState } from 'react'
 
 interface Props {
   successMessage: string
   errorMessage: string
   dialogMessage: string
   label: string
-  max?: BigNumber
-  min?: BigNumber
-  action: (amount: bigint) => Promise<string>
+  max?: BZZ
+  min?: BZZ
+  action: (amount: BZZ) => Promise<TransactionId>
   icon?: ReactNode
 }
 
@@ -34,7 +33,7 @@ export default function WithdrawDepositModal({
 }: Props): ReactElement {
   const [open, setOpen] = useState(false)
   const [amount, setAmount] = useState('')
-  const [amountToken, setAmountToken] = useState<Token | null>(null)
+  const [amountToken, setAmountToken] = useState<BZZ | null>(null)
   const [amountError, setAmountError] = useState<Error | null>(null)
   const { enqueueSnackbar } = useSnackbar()
 
@@ -51,7 +50,7 @@ export default function WithdrawDepositModal({
     if (amountToken === null) return
 
     try {
-      const transactionHash = await action(amountToken.toBigInt as bigint)
+      const transactionHash = await action(amountToken)
       setOpen(false)
       enqueueSnackbar(`${successMessage} Transaction ${transactionHash}`, { variant: 'success' })
     } catch (e) {
@@ -65,12 +64,12 @@ export default function WithdrawDepositModal({
     setAmount(value)
     setAmountError(null)
     try {
-      const t = Token.fromDecimal(value)
+      const t = BZZ.fromDecimalString(value)
       setAmountToken(t)
 
-      if (min && t.toDecimal.isLessThan(min)) setAmountError(new Error(`Needs to be more than ${min}`))
+      if (min && t.lt(min)) setAmountError(new Error(`Needs to be more than ${min.toSignificantDigits(4)}`))
 
-      if (max && t.toDecimal.isGreaterThan(max)) setAmountError(new Error(`Needs to be less than ${max}`))
+      if (max && t.gt(max)) setAmountError(new Error(`Needs to be less than ${max.toSignificantDigits(4)}`))
     } catch (e) {
       setAmountError(e as Error)
     }