@@ -46,7 +56,7 @@ export default function Status(): ReactElement {
onClick: () => navigate(ROUTES.ACCOUNT_WALLET),
}}
icon={}
- title={`${balance?.bzz.toSignificantDigits(4)} xBZZ | ${balance?.dai.toSignificantDigits(4)} xDAI`}
+ title={balanceText}
subtitle="Current wallet balance."
status="ok"
/>
@@ -89,7 +99,7 @@ export default function Status(): ReactElement {
icon={}
title={
chequebookBalance?.availableBalance
- ? `${chequebookBalance.availableBalance.toFixedDecimal(4)} xBZZ`
+ ? `${chequebookBalance.availableBalance.toSignificantDigits(4)} xBZZ`
: 'No available balance.'
}
subtitle="Chequebook not setup."
@@ -149,7 +159,7 @@ export default function Status(): ReactElement {
}
/>
- {wallet && }
+ {chainId && }
)
}
diff --git a/src/pages/top-up/Balance.tsx b/src/pages/top-up/Balance.tsx
index 2f3c71f..084643f 100644
--- a/src/pages/top-up/Balance.tsx
+++ b/src/pages/top-up/Balance.tsx
@@ -9,6 +9,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 = '0.5'
@@ -21,7 +22,8 @@ interface Props {
}
export default function Index({ header, title, p, next }: Props): ReactElement {
- const { nodeAddresses, balance } = useContext(Context)
+ const { nodeAddresses } = useContext(Context)
+ const { balance } = useContext(BalanceProvider)
const navigate = useNavigate()
if (!balance || !nodeAddresses) {
diff --git a/src/pages/top-up/GiftCardFund.tsx b/src/pages/top-up/GiftCardFund.tsx
index 6f2f23f..58ec8d0 100644
--- a/src/pages/top-up/GiftCardFund.tsx
+++ b/src/pages/top-up/GiftCardFund.tsx
@@ -13,6 +13,7 @@ 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'
@@ -20,9 +21,9 @@ import { ResolvedWallet } from '../../utils/wallet'
import { BeeModes } from '@ethersphere/bee-js'
export function GiftCardFund(): ReactElement {
- const { isBeeDesktop } = useContext(SettingsContext)
- const { nodeAddresses, balance, nodeInfo } = useContext(BeeContext)
- const { provider, providerUrl } = useContext(SettingsContext)
+ const { nodeAddresses, nodeInfo } = useContext(BeeContext)
+ const { isBeeDesktop, provider, providerUrl } = useContext(SettingsContext)
+ const { balance } = useContext(BalanceProvider)
const [loading, setLoading] = useState(false)
const [wallet, setWallet] = useState
(null)
diff --git a/src/pages/top-up/Swap.tsx b/src/pages/top-up/Swap.tsx
index 7134cf4..246ae17 100644
--- a/src/pages/top-up/Swap.tsx
+++ b/src/pages/top-up/Swap.tsx
@@ -16,6 +16,7 @@ import { SwarmDivider } from '../../components/SwarmDivider'
import { SwarmTextInput } from '../../components/SwarmTextInput'
import { BzzToken } from '../../models/BzzToken'
import { DaiToken } from '../../models/DaiToken'
+import { Context as BalanceProvider } from '../../providers/WalletBalance'
import { Context as BeeContext } from '../../providers/Bee'
import { Context as SettingsContext } from '../../providers/Settings'
import { ROUTES } from '../../routes'
@@ -36,9 +37,9 @@ export function Swap({ header }: Props): ReactElement {
const [userInputSwap, setUserInputSwap] = useState(null)
const [price, setPrice] = useState(DaiToken.fromDecimal('0.6', 18))
- const { providerUrl } = useContext(SettingsContext)
- const { balance, nodeAddresses, nodeInfo } = useContext(BeeContext)
- const { isBeeDesktop } = useContext(SettingsContext)
+ const { providerUrl, isBeeDesktop } = useContext(SettingsContext)
+ const { nodeAddresses, nodeInfo } = useContext(BeeContext)
+ const { balance } = useContext(BalanceProvider)
const navigate = useNavigate()
const { enqueueSnackbar } = useSnackbar()
diff --git a/src/pages/top-up/index.tsx b/src/pages/top-up/index.tsx
index 3533296..da88771 100644
--- a/src/pages/top-up/index.tsx
+++ b/src/pages/top-up/index.tsx
@@ -12,6 +12,7 @@ import { SwarmButton } from '../../components/SwarmButton'
import { ROUTES } from '../../routes'
import { CheckState, Context as BeeContext } from '../../providers/Bee'
import { Context as SettingsContext } from '../../providers/Settings'
+import { Context as BalanceProvider } from '../../providers/WalletBalance'
import { BeeModes } from '@ethersphere/bee-js'
import { restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
import { Loading } from '../../components/Loading'
@@ -39,7 +40,8 @@ export default function TopUp(): ReactElement {
const navigate = useNavigate()
const styles = useStyles()
const { isBeeDesktop } = useContext(SettingsContext)
- const { balance, nodeInfo, status } = useContext(BeeContext)
+ const { nodeInfo, status } = useContext(BeeContext)
+ const { balance } = useContext(BalanceProvider)
const { providerUrl } = useContext(SettingsContext)
const [loading, setLoading] = useState(false)
const { enqueueSnackbar } = useSnackbar()
diff --git a/src/providers/Bee.tsx b/src/providers/Bee.tsx
index b76f222..1c86f66 100644
--- a/src/providers/Bee.tsx
+++ b/src/providers/Bee.tsx
@@ -8,7 +8,6 @@ import {
NodeInfo,
Peer,
Topology,
- WalletBalance,
} from '@ethersphere/bee-js'
import { createContext, ReactChild, ReactElement, useContext, useEffect, useState } from 'react'
import semver from 'semver'
@@ -16,7 +15,6 @@ import PackageJson from '../../package.json'
import { useLatestBeeRelease } from '../hooks/apiHooks'
import { Token } from '../models/Token'
import type { Balance, ChequebookBalance, Settlements } from '../types'
-import { WalletAddress } from '../utils/wallet'
import { Context as SettingsContext } from './Settings'
const REFRESH_WHEN_OK = 30_000
@@ -46,7 +44,6 @@ interface Status {
interface ContextInterface {
status: Status
- balance: WalletAddress | null
latestPublishedVersion?: string
latestUserVersion?: string
latestUserVersionExact?: string
@@ -65,7 +62,7 @@ interface ContextInterface {
peerCheques: LastChequesResponse | null
settlements: Settlements | null
chainState: ChainState | null
- wallet: WalletBalance | null
+ chainId: number | null
latestBeeRelease: LatestBeeRelease | null
isLoading: boolean
lastUpdate: number | null
@@ -84,7 +81,6 @@ const initialValues: ContextInterface = {
topology: { isEnabled: false, checkState: CheckState.ERROR },
chequebook: { isEnabled: false, checkState: CheckState.ERROR },
},
- balance: null,
latestPublishedVersion: undefined,
latestUserVersion: undefined,
latestUserVersionExact: undefined,
@@ -103,7 +99,7 @@ const initialValues: ContextInterface = {
peerCheques: null,
settlements: null,
chainState: null,
- wallet: null,
+ chainId: null,
latestBeeRelease: null,
isLoading: true,
lastUpdate: null,
@@ -191,7 +187,7 @@ function getStatus(
let isRefreshing = false
export function Provider({ children }: Props): ReactElement {
- const { beeApi, beeDebugApi, provider } = useContext(SettingsContext)
+ const { beeApi, beeDebugApi } = useContext(SettingsContext)
const [apiHealth, setApiHealth] = useState(false)
const [debugApiHealth, setDebugApiHealth] = useState(null)
const [nodeAddresses, setNodeAddresses] = useState(null)
@@ -204,8 +200,7 @@ export function Provider({ children }: Props): ReactElement {
const [peerCheques, setPeerCheques] = useState(null)
const [settlements, setSettlements] = useState(null)
const [chainState, setChainState] = useState(null)
- const [walletAddress, setWalletAddress] = useState(initialValues.balance)
- const [wallet, setWallet] = useState(null)
+ const [chainId, setChainId] = useState(null)
const { latestBeeRelease } = useLatestBeeRelease()
@@ -244,18 +239,6 @@ export function Provider({ children }: Props): ReactElement {
if (beeDebugApi !== null) refresh()
}, [beeDebugApi]) // eslint-disable-line react-hooks/exhaustive-deps
- useEffect(() => {
- if (nodeAddresses?.ethereum && provider) {
- WalletAddress.make(nodeAddresses.ethereum, provider).then(setWalletAddress)
- }
- }, [nodeAddresses, provider])
-
- useEffect(() => {
- const interval = setInterval(() => walletAddress?.refresh().then(setWalletAddress), REFRESH_WHEN_OK)
-
- return () => clearInterval(interval)
- }, [walletAddress])
-
const refresh = async () => {
// Don't want to refresh when already refreshing
if (isRefreshing) return
@@ -361,8 +344,8 @@ export function Provider({ children }: Props): ReactElement {
// Wallet
beeDebugApi
.getWalletBalance({ timeout: TIMEOUT })
- .then(setWallet)
- .catch(() => setWallet(null)),
+ .then(({ chainID }) => setChainId(chainID))
+ .catch(() => setChainId(null)),
// Chequebook balance
chequeBalanceWrapper()
@@ -429,7 +412,6 @@ export function Provider({ children }: Props): ReactElement {
void
+ stop: () => void
+ refresh: () => Promise
+}
+
+const initialValues: ContextInterface = {
+ balance: null,
+ error: null,
+ isLoading: false,
+ lastUpdate: null,
+ start: () => {}, // eslint-disable-line
+ stop: () => {}, // eslint-disable-line
+ refresh: () => Promise.reject(),
+}
+
+export const Context = createContext(initialValues)
+export const Consumer = Context.Consumer
+
+interface Props {
+ children: ReactChild
+}
+
+export function Provider({ children }: Props): ReactElement {
+ const { provider } = useContext(SettingsContext)
+ const { nodeAddresses } = useContext(BeeContext)
+ const [balance, setBalance] = useState(initialValues.balance)
+ const [error, setError] = useState(initialValues.error)
+ const [isLoading, setIsLoading] = useState(initialValues.isLoading)
+ const [lastUpdate, setLastUpdate] = useState(initialValues.lastUpdate)
+ const [frequency, setFrequency] = useState(null)
+
+ useEffect(() => {
+ if (nodeAddresses?.ethereum && provider) {
+ WalletAddress.make(nodeAddresses.ethereum, provider).then(setBalance)
+ } else {
+ setBalance(null)
+ }
+ }, [nodeAddresses, provider])
+
+ const refresh = async () => {
+ // Don't want to refresh when already refreshing
+ if (isLoading) return
+
+ if (!balance) return
+
+ try {
+ setIsLoading(true)
+
+ setBalance(await balance.refresh())
+ setLastUpdate(Date.now())
+ } catch (e) {
+ setError(e as Error)
+ } finally {
+ setIsLoading(false)
+ }
+ }
+
+ const start = (freq = 30000) => setFrequency(freq)
+ const stop = () => setFrequency(null)
+
+ // Start the update loop
+ useEffect(() => {
+ refresh()
+
+ // Start autorefresh only if the frequency is set
+ if (frequency) {
+ const interval = setInterval(refresh, frequency)
+
+ return () => clearInterval(interval)
+ }
+ }, [frequency]) // eslint-disable-line react-hooks/exhaustive-deps
+
+ return (
+
+ {children}
+
+ )
+}