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/info/ChequebookInfoCard.tsx

@@ -1,3 +1,4 @@
+import { BZZ } from '@ethersphere/bee-js'
 import { useContext } from 'react'
 import { useNavigate } from 'react-router'
 import ExchangeFunds from 'remixicon-react/ExchangeFundsLineIcon'
@@ -9,10 +10,7 @@ export function ChequebookInfoCard() {
   const { chequebookBalance } = useContext(BeeContext)
   const navigate = useNavigate()
 
-  if (
-    chequebookBalance?.availableBalance !== undefined &&
-    chequebookBalance?.availableBalance.toBigNumber.isGreaterThan(0)
-  ) {
+  if (chequebookBalance?.availableBalance !== undefined && chequebookBalance?.availableBalance.gt(BZZ.fromPLUR('0'))) {
     return (
       <Card
         buttonProps={{

src/pages/info/WalletInfoCard.tsx

@@ -4,21 +4,18 @@ import Upload from 'remixicon-react/UploadLineIcon'
 import Wallet from 'remixicon-react/Wallet3LineIcon'
 import Card from '../../components/Card'
 import { Context as BeeContext } from '../../providers/Bee'
-import { Context as BalanceProvider } from '../../providers/WalletBalance'
 import { ROUTES } from '../../routes'
 
 export function WalletInfoCard() {
-  const { nodeInfo } = useContext(BeeContext)
-  const { balance, error } = useContext(BalanceProvider)
+  const { nodeInfo, walletBalance } = useContext(BeeContext)
   const navigate = useNavigate()
 
   let balanceText = 'Loading...'
 
-  if (error) {
-    balanceText = 'Could not load...'
-    console.error(error) // eslint-disable-line
-  } else if (balance) {
-    balanceText = `${balance.bzz.toSignificantDigits(4)} xBZZ | ${balance.dai.toSignificantDigits(4)} xDAI`
+  if (walletBalance) {
+    balanceText = `${walletBalance.bzzBalance.toSignificantDigits(
+      4,
+    )} xBZZ | ${walletBalance.nativeTokenBalance.toSignificantDigits(4)} xDAI`
   }
 
   if (nodeInfo?.beeMode && ['light', 'full', 'dev'].includes(nodeInfo.beeMode)) {

src/pages/info/index.tsx

@@ -13,7 +13,7 @@ import NodeInfoCard from './NodeInfoCard'
 import { WalletInfoCard } from './WalletInfoCard'
 
 export default function Status(): ReactElement {
-  const { beeVersion, status, topology, nodeInfo, chainId } = useContext(BeeContext)
+  const { beeVersion, status, topology, nodeInfo, walletBalance } = useContext(BeeContext)
   const { isDesktop, desktopUrl } = useContext(SettingsContext)
   const { beeDesktopVersion } = useBeeDesktop(isDesktop, desktopUrl)
   const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isDesktop, desktopUrl, false)
@@ -64,7 +64,9 @@ export default function Status(): ReactElement {
       )}
       <ExpandableListItem label="Bee version" value={beeVersion} />
       <ExpandableListItem label="Mode" value={nodeInfo?.beeMode} />
-      {chainId !== null && <ExpandableListItem label="Blockchain network" value={chainIdToName(chainId)} />}
+      {walletBalance !== null && (
+        <ExpandableListItem label="Blockchain network" value={chainIdToName(walletBalance.chainID)} />
+      )}
     </div>
   )
 }