diff --git a/src/pages/info/index.tsx b/src/pages/info/index.tsx index 21906f1..0a1ec61 100644 --- a/src/pages/info/index.tsx +++ b/src/pages/info/index.tsx @@ -14,6 +14,7 @@ import { useIsBeeDesktop, useNewBeeDesktopVersion } from '../../hooks/apiHooks' import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../../utils/desktop' import config from '../../config' import NodeInfoCard from './NodeInfoCard' +import { chainIdToName } from '../../utils/chain' export default function Status(): ReactElement { const { @@ -25,6 +26,7 @@ export default function Status(): ReactElement { nodeInfo, balance, chequebookBalance, + wallet, } = useContext(BeeContext) const isBeeDesktop = config.BEE_DESKTOP_ENABLED const { beeDesktopVersion } = useIsBeeDesktop() @@ -147,6 +149,7 @@ export default function Status(): ReactElement { } /> + {wallet && } ) } diff --git a/src/providers/Bee.tsx b/src/providers/Bee.tsx index b85a044..89fa77c 100644 --- a/src/providers/Bee.tsx +++ b/src/providers/Bee.tsx @@ -8,6 +8,7 @@ import { NodeInfo, Peer, Topology, + WalletBalance, } from '@ethersphere/bee-js' import { createContext, ReactChild, ReactElement, useContext, useEffect, useState } from 'react' import semver from 'semver' @@ -65,6 +66,7 @@ interface ContextInterface { peerCheques: LastChequesResponse | null settlements: Settlements | null chainState: ChainState | null + wallet: WalletBalance | null latestBeeRelease: LatestBeeRelease | null isLoading: boolean lastUpdate: number | null @@ -102,6 +104,7 @@ const initialValues: ContextInterface = { peerCheques: null, settlements: null, chainState: null, + wallet: null, latestBeeRelease: null, isLoading: true, lastUpdate: null, @@ -204,6 +207,7 @@ export function Provider({ children }: Props): ReactElement { const [settlements, setSettlements] = useState(null) const [chainState, setChainState] = useState(null) const [walletAddress, setWalletAddress] = useState(initialValues.balance) + const [wallet, setWallet] = useState(null) const { latestBeeRelease } = useLatestBeeRelease() @@ -356,6 +360,12 @@ export function Provider({ children }: Props): ReactElement { .then(setChainState) .catch(() => setChainState(null)), + // Wallet + beeDebugApi + .getWalletBalance({ timeout: TIMEOUT }) + .then(setWallet) + .catch(() => setWallet(null)), + // Chequebook balance chequeBalanceWrapper() .then(setChequebookBalance) @@ -446,6 +456,7 @@ export function Provider({ children }: Props): ReactElement { peerCheques, settlements, chainState, + wallet, latestBeeRelease, isLoading, lastUpdate, diff --git a/src/utils/chain.ts b/src/utils/chain.ts new file mode 100644 index 0000000..23fcf28 --- /dev/null +++ b/src/utils/chain.ts @@ -0,0 +1,30 @@ +const chains = [ + { + name: 'Ethereum Mainnet', + chainId: 1, + }, + { + name: 'Ropsten Testnet', + chainId: 3, + }, + { + name: 'Rinkeby Testnet', + chainId: 4, + }, + { + name: 'Görli Testnet', + chainId: 5, + }, + { + name: 'Kovan Testnet', + chainId: 42, + }, + { + name: 'Gnosis Chain', + chainId: 100, + }, +] + +export function chainIdToName(chainId: number): string { + return chains.find(record => record.chainId === chainId)?.name || 'Unknown' +}