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/pages/account/AccountNavigation.tsx

@@ -1,5 +1,5 @@
-import { BeeModes } from '@ethersphere/bee-js'
 import { createStyles, makeStyles, Tab, Tabs, Theme } from '@material-ui/core'
+import { BeeModes } from '@ethersphere/bee-js'
 import { ReactElement, useContext } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Context } from '../../providers/Bee'

src/pages/account/chequebook/AccountChequebook.tsx

@@ -1,4 +1,3 @@
-import { Utils } from '@ethersphere/bee-js'
 import { Box } from '@material-ui/core'
 import { ReactElement, useContext } from 'react'
 import ExpandableList from '../../../components/ExpandableList'
@@ -35,20 +34,20 @@ export function AccountChequebook(): ReactElement {
           <ExpandableList label="Chequebook" defaultOpen>
             <ExpandableListItem
               label="Total Balance"
-              value={`${chequebookBalance?.totalBalance.toFixedDecimal()} xBZZ`}
+              value={`${chequebookBalance?.totalBalance.toSignificantDigits(4)} xBZZ`}
             />
             <ExpandableListItem
               label="Available Uncommitted Balance"
-              value={`${chequebookBalance?.availableBalance.toFixedDecimal()} xBZZ`}
+              value={`${chequebookBalance?.availableBalance.toSignificantDigits(4)} xBZZ`}
             />
             <ExpandableListItem
               label="Total Cheques Amount Sent"
-              value={`${settlements?.totalSent.toFixedDecimal()} xBZZ`}
+              value={`${settlements?.totalSent.toSignificantDigits(4)} xBZZ`}
             />
             <Box mb={2}>
               <ExpandableListItem
                 label="Total Cheques Amount Received"
-                value={`${settlements?.totalReceived.toFixedDecimal()} xBZZ`}
+                value={`${settlements?.totalReceived.toSignificantDigits(4)} xBZZ`}
               />
             </Box>
             <ExpandableListItemActions>
@@ -60,7 +59,7 @@ export function AccountChequebook(): ReactElement {
         <ExpandableList label="Blockchain" defaultOpen>
           <ExpandableListItemKey
             label="Ethereum address"
-            value={nodeAddresses?.ethereum ? Utils.capitalizeAddressERC55(nodeAddresses.ethereum) : ''}
+            value={nodeAddresses?.ethereum ? nodeAddresses.ethereum.toChecksum() : ''}
           />
           <ExpandableListItemKey
             label="Chequebook contract address"

src/pages/account/feeds/AccountFeeds.tsx

@@ -1,16 +1,19 @@
 import { Box } from '@material-ui/core'
+import { NULL_TOPIC } from '@ethersphere/bee-js'
 import { ReactElement, useContext, useState } from 'react'
-import Download from 'remixicon-react/Download2LineIcon'
-import Info from 'remixicon-react/InformationLineIcon'
+import { useNavigate } from 'react-router'
 import PlusSquare from 'remixicon-react/AddBoxLineIcon'
 import Trash from 'remixicon-react/DeleteBin7LineIcon'
-import { useNavigate } from 'react-router'
+import Download from 'remixicon-react/Download2LineIcon'
+import Info from 'remixicon-react/InformationLineIcon'
 import ExpandableList from '../../../components/ExpandableList'
 import ExpandableListItem from '../../../components/ExpandableListItem'
 import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
 import { SwarmButton } from '../../../components/SwarmButton'
-import { Context as IdentityContext, Identity } from '../../../providers/Feeds'
+import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
+import { Context as BeeContext, CheckState } from '../../../providers/Bee'
+import { Identity, Context as IdentityContext } from '../../../providers/Feeds'
 import { ROUTES } from '../../../routes'
 import { formatEnum } from '../../../utils'
 import { persistIdentitiesWithoutUpdate } from '../../../utils/identity'
@@ -19,8 +22,6 @@ import { ExportFeedDialog } from '../../feeds/ExportFeedDialog'
 import { ImportFeedDialog } from '../../feeds/ImportFeedDialog'
 import { AccountNavigation } from '../AccountNavigation'
 import { Header } from '../Header'
-import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
-import { CheckState, Context as BeeContext } from '../../../providers/Bee'
 
 export function AccountFeeds(): ReactElement {
   const { identities, setIdentities } = useContext(IdentityContext)
@@ -98,7 +99,7 @@ export function AccountFeeds(): ReactElement {
               <ExpandableListItem label="Identity type" value={formatEnum(x.type)} />
             </ExpandableList>
           </Box>
-          <ExpandableListItemKey label="Topic" value={'00'.repeat(32)} />
+          <ExpandableListItemKey label="Topic" value={NULL_TOPIC.toHex()} />
           {x.feedHash && <ExpandableListItemKey label="Feed hash" value={x.feedHash} />}
           <Box mt={0.75}>
             <ExpandableListItemActions>

src/pages/account/staking/AccountStaking.tsx

@@ -5,16 +5,14 @@ import ExpandableListItemActions from '../../../components/ExpandableListItemAct
 import { Loading } from '../../../components/Loading'
 import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
 import StakeModal from '../../../containers/StakeModal'
-import { CheckState, Context as BeeContext } from '../../../providers/Bee'
-import { Context as BalanceContext } from '../../../providers/WalletBalance'
+import { Context as BeeContext, CheckState } from '../../../providers/Bee'
 import { AccountNavigation } from '../AccountNavigation'
 import { Header } from '../Header'
 
 export function AccountStaking(): ReactElement {
   const [loading, setLoading] = useState(false)
 
-  const { status, stake } = useContext(BeeContext)
-  const { balance } = useContext(BalanceContext)
+  const { status, stake, walletBalance } = useContext(BeeContext)
 
   if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
 
@@ -31,15 +29,15 @@ export function AccountStaking(): ReactElement {
       <Header />
       <AccountNavigation active="STAKING" />
       <div>
-        {loading || stake?.toDecimal === undefined ? (
+        {loading || !stake ? (
           <Loading />
         ) : (
           <ExpandableList label="Staking" defaultOpen>
-            <ExpandableListItem label="Staked BZZ" value={`${stake?.toSignificantDigits()} xBZZ`} />
-            {balance?.bzz ? (
+            <ExpandableListItem label="Staked BZZ" value={`${stake?.toSignificantDigits(4)} xBZZ`} />
+            {walletBalance?.bzzBalance ? (
               <ExpandableListItem
                 label="Available xBZZ balance"
-                value={`${balance?.bzz.toSignificantDigits(4)} xBZZ`}
+                value={`${walletBalance.bzzBalance.toSignificantDigits(4)} xBZZ`}
               />
             ) : null}
             <ExpandableListItemActions>

src/pages/account/wallet/AccountWallet.tsx

@@ -1,5 +1,5 @@
-import { BeeModes, Utils } from '@ethersphere/bee-js'
 import { Box, Grid, Typography } from '@material-ui/core'
+import { BeeModes } from '@ethersphere/bee-js'
 import { ReactElement, useContext } from 'react'
 import { useNavigate } from 'react-router'
 import Download from 'remixicon-react/DownloadLineIcon'
@@ -13,15 +13,13 @@ import { SwarmButton } from '../../../components/SwarmButton'
 import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
 import { Context as BeeContext, CheckState } from '../../../providers/Bee'
 import { Context as SettingsContext } from '../../../providers/Settings'
-import { Context as BalanceProvider } from '../../../providers/WalletBalance'
 import { ROUTES } from '../../../routes'
 import { AccountNavigation } from '../AccountNavigation'
 import { Header } from '../Header'
 
 export function AccountWallet(): ReactElement {
-  const { nodeAddresses, nodeInfo, status } = useContext(BeeContext)
+  const { nodeAddresses, nodeInfo, status, walletBalance } = useContext(BeeContext)
   const { isDesktop } = useContext(SettingsContext)
-  const { balance } = useContext(BalanceProvider)
 
   const navigate = useNavigate()
 
@@ -53,20 +51,22 @@ export function AccountWallet(): ReactElement {
           )}
         </Grid>
       </Box>
-      {balance && nodeAddresses ? (
+      {walletBalance && nodeAddresses ? (
         <>
           <Box mb={0.25}>
-            <ExpandableListItemKey
-              label="Node wallet address"
-              value={Utils.capitalizeAddressERC55(nodeAddresses.ethereum)}
-              expanded
-            />
+            <ExpandableListItemKey label="Node wallet address" value={nodeAddresses.ethereum.toChecksum()} expanded />
           </Box>
           <Box mb={0.25}>
-            <ExpandableListItem label="xDAI balance" value={`${balance.dai.toSignificantDigits(4)} xDAI`} />
+            <ExpandableListItem
+              label="xDAI balance"
+              value={`${walletBalance.nativeTokenBalance.toSignificantDigits(4)} xDAI`}
+            />
           </Box>
           <Box mb={2}>
-            <ExpandableListItem label="xBZZ balance" value={`${balance.bzz.toSignificantDigits(4)} xBZZ`} />
+            <ExpandableListItem
+              label="xBZZ balance"
+              value={`${walletBalance.bzzBalance.toSignificantDigits(4)} xBZZ`}
+            />
           </Box>
         </>
       ) : (