feat: make blockchain JSON RPC configurable from settings (#494)

* feat: make blockchain JSON RPC configurable from settings

* chore: expose the settings directly

* feat: restart bee node when blockchain RPC changes, add notification and error logging

src/providers/Bee.tsx

@@ -18,7 +18,6 @@ import { Token } from '../models/Token'
 import type { Balance, ChequebookBalance, Settlements } from '../types'
 import { WalletAddress } from '../utils/wallet'
 import { Context as SettingsContext } from './Settings'
-import { Context as TopUpContext } from './TopUp'
 
 const REFRESH_WHEN_OK = 30_000
 const REFRESH_WHEN_ERROR = 5_000
@@ -192,8 +191,7 @@ function getStatus(
 let isRefreshing = false
 
 export function Provider({ children }: Props): ReactElement {
-  const { beeApi, beeDebugApi } = useContext(SettingsContext)
-  const { provider } = useContext(TopUpContext)
+  const { beeApi, beeDebugApi, provider } = useContext(SettingsContext)
   const [apiHealth, setApiHealth] = useState<boolean>(false)
   const [debugApiHealth, setDebugApiHealth] = useState<Health | null>(null)
   const [nodeAddresses, setNodeAddresses] = useState<NodeAddresses | null>(null)

src/providers/Settings.tsx

@@ -1,32 +1,50 @@
 import { Bee, BeeDebug } from '@ethersphere/bee-js'
+import { providers } from 'ethers'
 import { createContext, ReactChild, ReactElement, useEffect, useState } from 'react'
-import { config } from '../config'
-import { BeeConfig, useGetBeeConfig } from '../hooks/apiHooks'
+import { config as appConfig } from '../config'
+import { useGetBeeConfig } from '../hooks/apiHooks'
+import { restartBeeNode, setJsonRpcInDesktop } from '../utils/desktop'
+
+const LocalStorageKeys = {
+  providerUrl: 'json-rpc-provider',
+}
+
+const providerUrl = localStorage.getItem('json-rpc-provider') || appConfig.DEFAULT_RPC_URL
 
 interface ContextInterface {
   apiUrl: string
   apiDebugUrl: string
   beeApi: Bee | null
   beeDebugApi: BeeDebug | null
-  setApiUrl: (url: string) => void
-  setDebugApiUrl: (url: string) => void
   lockedApiSettings: boolean
   desktopApiKey: string
-  config: BeeConfig | null
+  providerUrl: string
+  provider: providers.JsonRpcProvider
+  cors: string | null
+  dataDir: string | null
+  ensResolver: string | null
+  setApiUrl: (url: string) => void
+  setDebugApiUrl: (url: string) => void
+  setAndPersistJsonRpcProvider: (url: string) => Promise<void>
   isLoading: boolean
   error: Error | null
 }
 
 const initialValues: ContextInterface = {
-  apiUrl: config.BEE_API_HOST,
-  apiDebugUrl: config.BEE_DEBUG_API_HOST,
+  apiUrl: appConfig.BEE_API_HOST,
+  apiDebugUrl: appConfig.BEE_DEBUG_API_HOST,
   beeApi: null,
   beeDebugApi: null,
   setApiUrl: () => {}, // eslint-disable-line
   setDebugApiUrl: () => {}, // eslint-disable-line
   lockedApiSettings: false,
   desktopApiKey: '',
-  config: null,
+  setAndPersistJsonRpcProvider: async () => {}, // eslint-disable-line
+  providerUrl,
+  provider: new providers.JsonRpcProvider(providerUrl),
+  cors: null,
+  dataDir: null,
+  ensResolver: null,
   isLoading: true,
   error: null,
 }
@@ -51,10 +69,26 @@ export function Provider({
   const [apiDebugUrl, setDebugApiUrl] = useState<string>(initialValues.apiDebugUrl)
   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 [providerUrl, setProviderUrl] = useState(initialValues.providerUrl)
+  const [provider, setProvider] = useState(initialValues.provider)
   const { config, isLoading, error } = useGetBeeConfig()
 
+  async function setAndPersistJsonRpcProvider(providerUrl: string) {
+    try {
+      localStorage.setItem(LocalStorageKeys.providerUrl, providerUrl)
+      setProviderUrl(providerUrl)
+      setProvider(new providers.JsonRpcProvider(providerUrl))
+
+      if (appConfig.BEE_DESKTOP_ENABLED) {
+        await setJsonRpcInDesktop(providerUrl)
+        await restartBeeNode()
+      }
+    } catch (error) {
+      console.error(error) // eslint-disable-line
+    }
+  }
+
   function makeHttpUrl(string: string): string {
     if (!string.startsWith('http')) {
       return `http://${string}`
@@ -104,9 +138,14 @@ export function Provider({
         beeDebugApi,
         setApiUrl,
         setDebugApiUrl,
-        lockedApiSettings,
+        lockedApiSettings: Boolean(extLockedApiSettings),
         desktopApiKey,
-        config,
+        provider,
+        providerUrl,
+        cors: config?.['cors-allowed-origins'] ?? null,
+        dataDir: config?.['data-dir'] ?? null,
+        ensResolver: config?.['resolver-options'] ?? null,
+        setAndPersistJsonRpcProvider,
         isLoading,
         error,
       }}

src/providers/TopUp.tsx

@@ -1,30 +1,20 @@
-import { providers, Wallet } from 'ethers'
-import { createContext, ReactElement, useEffect, useState } from 'react'
-import config from '../config'
-import { setJsonRpcInDesktop } from '../utils/desktop'
+import { Wallet } from 'ethers'
+import { createContext, ReactElement, useContext, useEffect, useState } from 'react'
+import { Context as SettingsContext } from './Settings'
 
 const LocalStorageKeys = {
-  providerUrl: 'json-rpc-provider',
   depositWallet: 'deposit-wallet',
   giftWallets: 'gift-wallets',
   invitation: 'invitation',
 }
 
 interface ContextInterface {
-  providerUrl: string
-  provider: providers.JsonRpcProvider
   giftWallets: Wallet[]
-  setProviderUrl: (providerUrl: string) => void
   addGiftWallet: (wallet: Wallet) => void
 }
 
-const providerUrl = localStorage.getItem('json-rpc-provider') || config.DEFAULT_RPC_URL
-
 const initialValues: ContextInterface = {
-  providerUrl,
-  provider: new providers.JsonRpcProvider(providerUrl),
   giftWallets: [],
-  setProviderUrl: () => {}, // eslint-disable-line
   addGiftWallet: () => {}, // eslint-disable-line
 }
 
@@ -36,9 +26,8 @@ interface Props {
 }
 
 export function Provider({ children }: Props): ReactElement {
-  const [providerUrl, setProviderUrl] = useState(initialValues.providerUrl)
-  const [provider, setProvider] = useState(initialValues.provider)
   const [giftWallets, setGiftWallets] = useState(initialValues.giftWallets)
+  const { provider } = useContext(SettingsContext)
 
   useEffect(() => {
     if (provider === null) return
@@ -50,14 +39,6 @@ export function Provider({ children }: Props): ReactElement {
     }
   }, [provider])
 
-  function setAndPersistJsonRpcProvider(providerUrl: string) {
-    localStorage.setItem(LocalStorageKeys.providerUrl, providerUrl)
-    setProviderUrl(providerUrl)
-    setProvider(new providers.JsonRpcProvider(providerUrl))
-    // eslint-disable-next-line no-console
-    setJsonRpcInDesktop(providerUrl).catch(console.error)
-  }
-
   function addGiftWallet(wallet: Wallet) {
     const newArray = [...giftWallets, wallet]
     localStorage.setItem(LocalStorageKeys.giftWallets, JSON.stringify(newArray.map(x => x.privateKey)))
@@ -67,10 +48,7 @@ export function Provider({ children }: Props): ReactElement {
   return (
     <Context.Provider
       value={{
-        providerUrl,
-        provider,
         giftWallets,
-        setProviderUrl: setAndPersistJsonRpcProvider,
         addGiftWallet,
       }}
     >