feat: add bee desktop toolkit (#311)

* feat: add light node upgrade

* refactor: improve upgrade page

* feat: pretty print xdai and add xbzz faucets

* feat: display xBZZ balance (#312)

* refactor: change rpc provider

* fix: remove version alert

* fix: load really xBZZ balance instead of xDAI (#314)

* feat: add bee desktop api key support

* chore: remove dead code

* chore: revert useless change

* refactor: extract desktop utils module (#339)

* refactor: extract desktop utils module

* fix: add 0x prefix if it missing from address

* refactor: extract BalanceProvider

* fix: remove double finally

* fix: remove token fallbacks

* fix: reuse address and handle balance errors

* chore: disable eslint for any

* refactor: remove upgrade page

* refactor: cleanup, debounce and axios

* refactor: change fetch to axios

* chore: remove dead code

* chore: revert import ordering

* refactor: use axios instead of fetch

* refactor: use token instead of string

Co-authored-by: Cafe137 <aron@aronsoos.com>
Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>

src/providers/Bee.tsx

@@ -1,4 +1,5 @@
 import {
+  BeeModes,
   ChainState,
   ChequebookAddressResponse,
   Health,
@@ -7,7 +8,6 @@ import {
   NodeInfo,
   Peer,
   Topology,
-  BeeModes,
 } from '@ethersphere/bee-js'
 import { createContext, ReactChild, ReactElement, useContext, useEffect, useState } from 'react'
 import semver from 'semver'
@@ -15,8 +15,14 @@ import { engines } from '../../package.json'
 import { useLatestBeeRelease } from '../hooks/apiHooks'
 import { Token } from '../models/Token'
 import type { Balance, ChequebookBalance, Settlements } from '../types'
+import { Rpc } from '../utils/rpc'
 import { Context as SettingsContext } from './Settings'
 
+interface RpcBalance {
+  bzz: Token
+  xdai: Token
+}
+
 export enum CheckState {
   OK = 'OK',
   WARNING = 'Warning',
@@ -40,6 +46,7 @@ interface Status {
 
 interface ContextInterface {
   status: Status
+  balance: RpcBalance
   latestPublishedVersion?: string
   latestUserVersion?: string
   latestUserVersionExact?: string
@@ -77,6 +84,10 @@ const initialValues: ContextInterface = {
     topology: { isEnabled: false, checkState: CheckState.ERROR },
     chequebook: { isEnabled: false, checkState: CheckState.ERROR },
   },
+  balance: {
+    bzz: new Token('0', 16),
+    xdai: new Token('0', 18),
+  },
   latestPublishedVersion: undefined,
   latestUserVersion: undefined,
   latestUserVersionExact: undefined,
@@ -193,6 +204,8 @@ export function Provider({ children }: Props): ReactElement {
   const [peerCheques, setPeerCheques] = useState<LastChequesResponse | null>(null)
   const [settlements, setSettlements] = useState<Settlements | null>(null)
   const [chainState, setChainState] = useState<ChainState | null>(null)
+  const [bzz, setBzz] = useState<Token>(initialValues.balance.bzz)
+  const [xdai, setXdai] = useState<Token>(initialValues.balance.xdai)
 
   const { latestBeeRelease } = useLatestBeeRelease()
 
@@ -232,6 +245,22 @@ export function Provider({ children }: Props): ReactElement {
     refresh()
   }, [beeDebugApi]) // eslint-disable-line react-hooks/exhaustive-deps
 
+  useEffect(() => {
+    if (nodeAddresses?.ethereum) {
+      // debounced calls
+      const xdai = Rpc.eth_getBalance(nodeAddresses.ethereum)
+      const bzz = Rpc.eth_getBalanceERC20(nodeAddresses.ethereum)
+
+      if (xdai?.then) {
+        xdai.then(balance => setXdai(new Token(balance, 18)))
+      }
+
+      if (bzz?.then) {
+        bzz.then(balance => setBzz(new Token(balance, 16)))
+      }
+    }
+  }, [nodeAddresses])
+
   const refresh = async () => {
     // Don't want to refresh when already refreshing
     if (isRefreshing) return
@@ -388,6 +417,10 @@ export function Provider({ children }: Props): ReactElement {
           chequebookBalance,
           error,
         ),
+        balance: {
+          xdai,
+          bzz,
+        },
         latestUserVersion,
         latestUserVersionExact,
         latestPublishedVersion,

src/providers/Settings.tsx

@@ -10,6 +10,7 @@ interface ContextInterface {
   setApiUrl: (url: string) => void
   setDebugApiUrl: (url: string) => void
   lockedApiSettings: boolean
+  desktopApiKey: string
 }
 
 const initialValues: ContextInterface = {
@@ -20,6 +21,7 @@ const initialValues: ContextInterface = {
   setApiUrl: () => {}, // eslint-disable-line
   setDebugApiUrl: () => {}, // eslint-disable-line
   lockedApiSettings: false,
+  desktopApiKey: '',
 }
 
 export const Context = createContext<ContextInterface>(initialValues)
@@ -43,10 +45,22 @@ export function Provider({
   const [beeApi, setBeeApi] = useState<Bee | null>(null)
   const [beeDebugApi, setBeeDebugApi] = useState<BeeDebug | null>(null)
   const [lockedApiSettings] = useState<boolean>(Boolean(extLockedApiSettings))
+  const [desktopApiKey, setDesktopApiKey] = useState<string>(initialValues.desktopApiKey)
 
   const url = beeApiUrl || apiUrl
   const debugUrl = beeDebugApiUrl || apiDebugUrl
 
+  useEffect(() => {
+    const urlSearchParams = new URLSearchParams(window.location.search)
+    const newApiKey = urlSearchParams.get('v')
+
+    if (newApiKey) {
+      localStorage.setItem('apiKey', newApiKey)
+      window.location.search = ''
+      setDesktopApiKey(newApiKey)
+    }
+  }, [])
+
   useEffect(() => {
     try {
       setBeeApi(new Bee(url))
@@ -75,6 +89,7 @@ export function Provider({
         setApiUrl,
         setDebugApiUrl,
         lockedApiSettings,
+        desktopApiKey,
       }}
     >
       {children}