fix: put back external wallet balance context (#704)

* fix: put back external wallet balance context

* fix: include top up index page

* fix: include gift code index page

* fix: add BalanceProvider

src/pages/gift-code/index.tsx

@@ -1,5 +1,5 @@
-import { Box, Tooltip, Typography } from '@material-ui/core'
 import { BZZ, DAI } from '@ethersphere/bee-js'
+import { Box, Tooltip, Typography } from '@material-ui/core'
 import { Wallet } from 'ethers'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
@@ -12,9 +12,9 @@ import ExpandableListItemKey from '../../components/ExpandableListItemKey'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { Loading } from '../../components/Loading'
 import { SwarmButton } from '../../components/SwarmButton'
-import { Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { Context as TopUpContext } from '../../providers/TopUp'
+import { Context as BalanceProvider } from '../../providers/WalletBalance'
 import { createGiftWallet } from '../../utils/desktop'
 import { ResolvedWallet } from '../../utils/wallet'
 
@@ -24,7 +24,7 @@ const GIFT_WALLET_FUND_BZZ_AMOUNT = BZZ.fromDecimalString('0.5')
 export default function Index(): ReactElement {
   const { giftWallets, addGiftWallet } = useContext(TopUpContext)
   const { rpcProvider, desktopUrl } = useContext(SettingsContext)
-  const { walletBalance } = useContext(BeeContext)
+  const { balance } = useContext(BalanceProvider)
 
   const [loading, setLoading] = useState(false)
   const [balances, setBalances] = useState<ResolvedWallet[]>([])
@@ -67,13 +67,12 @@ export default function Index(): ReactElement {
     navigate(-1)
   }
 
-  if (!walletBalance) {
+  if (!balance) {
     return <Loading />
   }
 
   const notEnoughFundsCheck =
-    walletBalance.nativeTokenBalance.lte(GIFT_WALLET_FUND_DAI_AMOUNT) ||
-    walletBalance.bzzBalance.lt(GIFT_WALLET_FUND_BZZ_AMOUNT)
+    balance.dai.lte(GIFT_WALLET_FUND_DAI_AMOUNT) || balance.bzz.lt(GIFT_WALLET_FUND_BZZ_AMOUNT)
 
   return (
     <>
@@ -86,13 +85,10 @@ export default function Index(): ReactElement {
         </Typography>
       </Box>
       <Box mb={0.25}>
-        <ExpandableListItem
-          label="xDAI balance"
-          value={`${walletBalance.nativeTokenBalance.toSignificantDigits(4)} xDAI`}
-        />
+        <ExpandableListItem label="xDAI balance" value={`${balance.dai.toSignificantDigits(4)} xDAI`} />
       </Box>
       <Box mb={2}>
-        <ExpandableListItem label="xBZZ balance" value={`${walletBalance.bzzBalance.toSignificantDigits(4)} xBZZ`} />
+        <ExpandableListItem label="xBZZ balance" value={`${balance.bzz.toSignificantDigits(4)} xBZZ`} />
       </Box>
       <Box mb={4}>
         {balances.map((x, i) => (

src/pages/top-up/Balance.tsx

@@ -1,5 +1,5 @@
-import { Box, Grid, Typography } from '@material-ui/core'
 import { DAI } from '@ethersphere/bee-js'
+import { Box, Grid, Typography } from '@material-ui/core'
 import { ReactElement, useContext } from 'react'
 import { useNavigate } from 'react-router'
 import Check from 'remixicon-react/CheckLineIcon'
@@ -10,6 +10,7 @@ import { Loading } from '../../components/Loading'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmDivider } from '../../components/SwarmDivider'
 import { Context } from '../../providers/Bee'
+import { Context as BalanceProvider } from '../../providers/WalletBalance'
 import { TopUpProgressIndicator } from './TopUpProgressIndicator'
 
 const MINIMUM_XDAI = DAI.fromDecimalString('0.5')
@@ -22,14 +23,15 @@ interface Props {
 }
 
 export default function Index({ header, title, p, next }: Props): ReactElement {
-  const { nodeAddresses, walletBalance } = useContext(Context)
+  const { nodeAddresses } = useContext(Context)
+  const { balance } = useContext(BalanceProvider)
   const navigate = useNavigate()
 
-  if (!walletBalance || !nodeAddresses) {
+  if (!balance || !nodeAddresses) {
     return <Loading />
   }
 
-  const disabled = walletBalance.nativeTokenBalance.lt(MINIMUM_XDAI)
+  const disabled = balance.dai.lt(MINIMUM_XDAI)
 
   return (
     <>
@@ -43,10 +45,10 @@ export default function Index({ header, title, p, next }: Props): ReactElement {
       <Box mb={4}>{p}</Box>
       <SwarmDivider mb={4} />
       <Box mb={0.25}>
-        <ExpandableListItemKey label="Funding wallet address" value={nodeAddresses.ethereum.toChecksum()} expanded />
+        <ExpandableListItemKey label="Funding wallet address" value={balance.address} expanded />
       </Box>
       <Box mb={4}>
-        <ExpandableListItem label="xDAI balance" value={walletBalance.nativeTokenBalance.toSignificantDigits(4)} />
+        <ExpandableListItem label="xDAI balance" value={balance.dai.toSignificantDigits(4)} />
       </Box>
       <Grid container direction="row" justifyContent="space-between">
         <SwarmButton iconType={Check} onClick={() => navigate(next)} disabled={disabled}>

src/pages/top-up/GiftCardFund.tsx

@@ -1,5 +1,5 @@
-import { Box, Typography } from '@material-ui/core'
 import { BeeModes } from '@ethersphere/bee-js'
+import { Box, Typography } from '@material-ui/core'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
 import { useNavigate, useParams } from 'react-router'
@@ -14,14 +14,16 @@ import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmDivider } from '../../components/SwarmDivider'
 import { Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
+import { Context as BalanceProvider } from '../../providers/WalletBalance'
 import { ROUTES } from '../../routes'
 import { sleepMs } from '../../utils'
 import { restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
 import { ResolvedWallet } from '../../utils/wallet'
 
 export function GiftCardFund(): ReactElement {
-  const { nodeAddresses, nodeInfo, walletBalance } = useContext(BeeContext)
+  const { nodeAddresses, nodeInfo } = useContext(BeeContext)
   const { isDesktop, desktopUrl, rpcProvider, rpcProviderUrl } = useContext(SettingsContext)
+  const { balance } = useContext(BalanceProvider)
 
   const [loading, setLoading] = useState(false)
   const [wallet, setWallet] = useState<ResolvedWallet | null>(null)
@@ -39,7 +41,7 @@ export function GiftCardFund(): ReactElement {
     ResolvedWallet.make(privateKeyString, rpcProvider).then(setWallet)
   }, [privateKeyString, rpcProvider])
 
-  if (!wallet || !walletBalance) {
+  if (!wallet || !balance) {
     return <Loading />
   }
 
@@ -94,7 +96,7 @@ export function GiftCardFund(): ReactElement {
       </Box>
       <SwarmDivider mb={4} />
       <Box mb={0.25}>
-        <ExpandableListItemKey label="Gift wallet address" value={wallet.address || 'N/A'} />
+        <ExpandableListItemKey label="Gift wallet address" value={balance.address || 'N/A'} />
       </Box>
       <Box mb={0.25}>
         <ExpandableListItem label="xDAI balance" value={`${wallet.dai.toSignificantDigits(4)} xDAI`} />
@@ -113,13 +115,10 @@ export function GiftCardFund(): ReactElement {
         />
       </Box>
       <Box mb={0.25}>
-        <ExpandableListItem
-          label="xDAI balance"
-          value={`${walletBalance.nativeTokenBalance.toSignificantDigits(4)} xDAI`}
-        />
+        <ExpandableListItem label="xDAI balance" value={`${balance.dai.toSignificantDigits(4)} xDAI`} />
       </Box>
       <Box mb={2}>
-        <ExpandableListItem label="xBZZ balance" value={`${walletBalance.bzzBalance.toSignificantDigits(4)} xBZZ`} />
+        <ExpandableListItem label="xBZZ balance" value={`${balance.bzz.toSignificantDigits(4)} xBZZ`} />
       </Box>
       <SwarmButton iconType={Check} onClick={onFund} disabled={loading} loading={loading}>
         {canUpgradeToLightNode ? 'Send all funds to your node and Upgrade' : 'Send all funds to your node'}

src/pages/top-up/Swap.tsx

@@ -1,5 +1,5 @@
-import { Box, Typography } from '@material-ui/core'
 import { BeeModes, BZZ, DAI } from '@ethersphere/bee-js'
+import { Box, Typography } from '@material-ui/core'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router'
@@ -15,6 +15,7 @@ import { SwarmDivider } from '../../components/SwarmDivider'
 import { SwarmTextInput } from '../../components/SwarmTextInput'
 import { Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
+import { Context as BalanceProvider } from '../../providers/WalletBalance'
 import { ROUTES } from '../../routes'
 import { sleepMs } from '../../utils'
 import { isSwapError, SwapError, wrapWithSwapError } from '../../utils/SwapError'
@@ -48,7 +49,8 @@ export function Swap({ header }: Props): ReactElement {
   const [daiAfterSwap, setDaiAfterSwap] = useState<DAI | null>(null)
 
   const { rpcProviderUrl, isDesktop, desktopUrl } = useContext(SettingsContext)
-  const { nodeAddresses, nodeInfo, walletBalance } = useContext(BeeContext)
+  const { nodeAddresses, nodeInfo } = useContext(BeeContext)
+  const { balance } = useContext(BalanceProvider)
 
   const navigate = useNavigate()
   const { enqueueSnackbar } = useSnackbar()
@@ -61,20 +63,20 @@ export function Swap({ header }: Props): ReactElement {
 
   // Set the initial xDAI to swap
   useEffect(() => {
-    if (!walletBalance || userInputSwap) {
+    if (!balance || userInputSwap) {
       return
     }
 
     const minimumOptimalValue = DAI.fromDecimalString('1').plus(MINIMUM_XDAI)
 
-    if (walletBalance.nativeTokenBalance.gte(minimumOptimalValue)) {
+    if (balance.dai.gte(minimumOptimalValue)) {
       // Balance has at least 1 + MINIMUM_XDAI xDai
-      setDaiToSwap(walletBalance.nativeTokenBalance.minus(DAI.fromDecimalString('1')))
+      setDaiToSwap(balance.dai.minus(DAI.fromDecimalString('1')))
     } else {
       // Balance is low, halve the amount
-      setDaiToSwap(walletBalance.nativeTokenBalance.divide(BigInt(2)))
+      setDaiToSwap(balance.dai.divide(BigInt(2)))
     }
-  }, [walletBalance, userInputSwap])
+  }, [balance, userInputSwap])
 
   // Set the xDAI to swap based on user input
   useEffect(() => {
@@ -95,13 +97,13 @@ export function Swap({ header }: Props): ReactElement {
 
   // Calculate the amount of tokens after swap
   useEffect(() => {
-    if (!walletBalance || !daiToSwap || error) {
+    if (!balance || !daiToSwap || error) {
       return
     }
-    const daiAfterSwap = walletBalance.nativeTokenBalance.minus(daiToSwap)
+    const daiAfterSwap = balance.dai.minus(daiToSwap)
     setDaiAfterSwap(daiAfterSwap)
     const tokensConverted = daiToSwap.exchangeToBZZ(price)
-    const bzzAfterSwap = tokensConverted.plus(walletBalance.bzzBalance)
+    const bzzAfterSwap = tokensConverted.plus(balance.bzz)
     setBzzAfterSwap(bzzAfterSwap)
 
     if (daiAfterSwap.lt(MINIMUM_XDAI)) {
@@ -109,9 +111,9 @@ export function Swap({ header }: Props): ReactElement {
     } else if (bzzAfterSwap.lt(MINIMUM_XBZZ)) {
       setError(`Must have at least ${MINIMUM_XBZZ.toSignificantDigits(4)} xBZZ after swap!`)
     }
-  }, [error, walletBalance, daiToSwap, price])
+  }, [error, balance, daiToSwap, price])
 
-  if (!walletBalance || !nodeAddresses || !daiToSwap || !bzzAfterSwap || !daiAfterSwap) {
+  if (!balance || !nodeAddresses || !daiToSwap || !bzzAfterSwap || !daiAfterSwap) {
     return <Loading />
   }
 
@@ -219,8 +221,8 @@ export function Swap({ header }: Props): ReactElement {
       <SwarmDivider mb={4} />
       <Box mb={4}>
         <Typography>
-          Your current balance is {walletBalance.nativeTokenBalance.toSignificantDigits(4)} xDAI and{' '}
-          {walletBalance.bzzBalance.toSignificantDigits(4)} xBZZ.
+          Your current balance is {balance.dai.toSignificantDigits(4)} xDAI and {balance.bzz.toSignificantDigits(4)}{' '}
+          xBZZ.
         </Typography>
       </Box>
       <Box mb={4}>

src/pages/top-up/index.tsx

@@ -1,5 +1,5 @@
-import { Box, createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
 import { BeeModes, BZZ, DAI } from '@ethersphere/bee-js'
+import { Box, createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
 import { useNavigate } from 'react-router'
@@ -15,6 +15,7 @@ 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 { restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
 
@@ -39,7 +40,8 @@ export default function TopUp(): ReactElement {
   const navigate = useNavigate()
   const styles = useStyles()
   const { isDesktop, desktopUrl } = useContext(SettingsContext)
-  const { nodeInfo, status, walletBalance } = useContext(BeeContext)
+  const { nodeInfo, status } = useContext(BeeContext)
+  const { balance } = useContext(BalanceProvider)
   const { rpcProviderUrl } = useContext(SettingsContext)
   const [loading, setLoading] = useState(false)
   const { enqueueSnackbar } = useSnackbar()
@@ -47,8 +49,8 @@ export default function TopUp(): ReactElement {
   const canUpgradeToLightNode =
     isDesktop &&
     nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT &&
-    walletBalance?.nativeTokenBalance.gte(MINIMUM_XDAI) &&
-    walletBalance?.bzzBalance.gte(MINIMUM_XBZZ)
+    balance?.dai.gte(MINIMUM_XDAI) &&
+    balance?.bzz.gte(MINIMUM_XBZZ)
 
   async function restart() {
     setLoading(true)
@@ -65,7 +67,7 @@ export default function TopUp(): ReactElement {
 
   if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
 
-  if (!walletBalance) {
+  if (!balance) {
     return <Loading />
   }