feat: add wallet endpoint and display blockchain name (#492)

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 {
         }
       />
       <ExpandableListItem label="Mode" value={nodeInfo?.beeMode} />
+      {wallet && <ExpandableListItem label="Blockchain network" value={chainIdToName(wallet.chainID)} />}
     </div>
   )
 }

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<Settlements | null>(null)
   const [chainState, setChainState] = useState<ChainState | null>(null)
   const [walletAddress, setWalletAddress] = useState<WalletAddress | null>(initialValues.balance)
+  const [wallet, setWallet] = useState<WalletBalance | null>(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,

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'
+}