feat: add light node upgrade top up methods (#372)

* feat: add top up

* chore: remove console.log

* build: add pseudo-missing dependency

* feat: add missing top up components

* fix: crypto route

* feat(wip): add gift wallet logic

* fix: fix gift wallet flows

* feat: simplify flow without fund step

* feat: add loading screens

* fix: remove alert

* fix: prepend http if needed

* fix: fix bug that was reintroduced with merge

* refactor: rename minusEther to minusBaseUnits

* fix: remove unused setStartedAt

* build: remove unused dependency

src/providers/Bee.tsx

@@ -15,14 +15,9 @@ 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 { WalletAddress } from '../utils/wallet'
 import { Context as SettingsContext } from './Settings'
 
-interface RpcBalance {
-  bzz: Token
-  xdai: Token
-}
-
 export enum CheckState {
   OK = 'OK',
   WARNING = 'Warning',
@@ -46,7 +41,7 @@ interface Status {
 
 interface ContextInterface {
   status: Status
-  balance: RpcBalance
+  balance: WalletAddress | null
   latestPublishedVersion?: string
   latestUserVersion?: string
   latestUserVersionExact?: string
@@ -84,10 +79,7 @@ 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),
-  },
+  balance: null,
   latestPublishedVersion: undefined,
   latestUserVersion: undefined,
   latestUserVersionExact: undefined,
@@ -204,8 +196,7 @@ 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 [walletAddress, setWalletAddress] = useState<WalletAddress | null>(initialValues.balance)
 
   const { latestBeeRelease } = useLatestBeeRelease()
 
@@ -247,20 +238,16 @@ export function Provider({ children }: Props): ReactElement {
 
   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)))
-      }
+      WalletAddress.make(nodeAddresses.ethereum).then(setWalletAddress)
     }
   }, [nodeAddresses])
 
+  useEffect(() => {
+    const interval = setInterval(() => walletAddress?.refresh().then(setWalletAddress), 30_000)
+
+    return () => clearInterval(interval)
+  }, [walletAddress])
+
   const refresh = async () => {
     // Don't want to refresh when already refreshing
     if (isRefreshing) return
@@ -417,10 +404,7 @@ export function Provider({ children }: Props): ReactElement {
           chequebookBalance,
           error,
         ),
-        balance: {
-          xdai,
-          bzz,
-        },
+        balance: walletAddress,
         latestUserVersion,
         latestUserVersionExact,
         latestPublishedVersion,

src/providers/Settings.tsx

@@ -55,8 +55,16 @@ export function Provider({
   const [desktopApiKey, setDesktopApiKey] = useState<string>(initialValues.desktopApiKey)
   const { config, isLoading, error } = useGetBeeConfig()
 
-  const url = config?.['api-addr'] || beeApiUrl || apiUrl
-  const debugUrl = config?.['debug-api-addr'] || beeDebugApiUrl || apiDebugUrl
+  function makeHttpUrl(string: string): string {
+    if (!string.startsWith('http')) {
+      return `http://${string}`
+    }
+
+    return string
+  }
+
+  const url = makeHttpUrl(config?.['api-addr'] || beeApiUrl || apiUrl)
+  const debugUrl = makeHttpUrl(config?.['debug-api-addr'] || beeDebugApiUrl || apiDebugUrl)
 
   useEffect(() => {
     const urlSearchParams = new URLSearchParams(window.location.search)

src/providers/TopUp.tsx

@@ -0,0 +1,73 @@
+import Wallet from 'ethereumjs-wallet'
+import { createContext, ReactElement, useEffect, useState } from 'react'
+import { setJsonRpcInDesktop } from '../utils/desktop'
+import { getWalletFromPrivateKeyString } from '../utils/identity'
+
+const LocalStorageKeys = {
+  jsonRpcProvider: 'json-rpc-provider',
+  depositWallet: 'deposit-wallet',
+  giftWallets: 'gift-wallets',
+  invitation: 'invitation',
+}
+
+interface ContextInterface {
+  jsonRpcProvider: string
+  giftWallets: Wallet[]
+  setJsonRpcProvider: (jsonRpcProvider: string) => void
+  addGiftWallet: (wallet: Wallet) => void
+}
+
+const initialValues: ContextInterface = {
+  jsonRpcProvider: '',
+  giftWallets: [],
+  setJsonRpcProvider: () => {}, // eslint-disable-line
+  addGiftWallet: () => {}, // eslint-disable-line
+}
+
+export const Context = createContext<ContextInterface>(initialValues)
+export const Consumer = Context.Consumer
+
+interface Props {
+  children: ReactElement
+}
+
+export function Provider({ children }: Props): ReactElement {
+  const [jsonRpcProvider, setJsonRpcProvider] = useState(
+    localStorage.getItem('json-rpc-provider') || initialValues.jsonRpcProvider,
+  )
+  const [giftWallets, setGiftWallets] = useState(initialValues.giftWallets)
+
+  useEffect(() => {
+    const existingGiftWallets = localStorage.getItem(LocalStorageKeys.giftWallets)
+
+    if (existingGiftWallets) {
+      setGiftWallets(JSON.parse(existingGiftWallets).map(getWalletFromPrivateKeyString))
+    }
+  }, [])
+
+  function setAndPersistJsonRpcProvider(jsonRpcProvider: string) {
+    localStorage.setItem(LocalStorageKeys.jsonRpcProvider, jsonRpcProvider)
+    setJsonRpcProvider(jsonRpcProvider)
+    // eslint-disable-next-line no-console
+    setJsonRpcInDesktop(jsonRpcProvider).catch(console.error)
+  }
+
+  function addGiftWallet(wallet: Wallet) {
+    const newArray = [...giftWallets, wallet]
+    localStorage.setItem(LocalStorageKeys.giftWallets, JSON.stringify(newArray.map(x => x.getPrivateKeyString())))
+    setGiftWallets(newArray)
+  }
+
+  return (
+    <Context.Provider
+      value={{
+        jsonRpcProvider,
+        giftWallets,
+        setJsonRpcProvider: setAndPersistJsonRpcProvider,
+        addGiftWallet,
+      }}
+    >
+      {children}
+    </Context.Provider>
+  )
+}