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/pages/gift-code/index.tsx

@@ -13,6 +13,7 @@ import { Loading } from '../../components/Loading'
 import { SwarmButton } from '../../components/SwarmButton'
 import { Context as BeeContext } from '../../providers/Bee'
 import { Context as TopUpContext } from '../../providers/TopUp'
+import { Context as SettingsContext } from '../../providers/Settings'
 import { createGiftWallet } from '../../utils/desktop'
 import { ResolvedWallet } from '../../utils/wallet'
 import { Token } from '../../models/Token'
@@ -21,7 +22,8 @@ const GIFT_WALLET_FUND_DAI_AMOUNT = Token.fromDecimal('0.1', 18)
 const GIFT_WALLET_FUND_BZZ_AMOUNT = Token.fromDecimal('0.5', 16)
 
 export default function Index(): ReactElement {
-  const { giftWallets, addGiftWallet, provider } = useContext(TopUpContext)
+  const { giftWallets, addGiftWallet } = useContext(TopUpContext)
+  const { provider } = useContext(SettingsContext)
   const { balance } = useContext(BeeContext)
 
   const [loading, setLoading] = useState(false)

src/pages/settings/index.tsx

@@ -2,11 +2,27 @@ import CircularProgress from '@material-ui/core/CircularProgress'
 import { ReactElement, useContext } from 'react'
 import ExpandableList from '../../components/ExpandableList'
 import ExpandableListItemInput from '../../components/ExpandableListItemInput'
+import { Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
+import config from '../../config'
+import { useSnackbar } from 'notistack'
 
 export default function SettingsPage(): ReactElement {
-  const { apiUrl, apiDebugUrl, setApiUrl, setDebugApiUrl, lockedApiSettings, config, isLoading } =
-    useContext(SettingsContext)
+  const {
+    apiUrl,
+    apiDebugUrl,
+    setApiUrl,
+    setDebugApiUrl,
+    lockedApiSettings,
+    cors,
+    dataDir,
+    ensResolver,
+    providerUrl,
+    isLoading,
+    setAndPersistJsonRpcProvider,
+  } = useContext(SettingsContext)
+  const { refresh } = useContext(BeeContext)
+  const { enqueueSnackbar } = useSnackbar()
 
   if (isLoading) {
     return (
@@ -16,31 +32,46 @@ export default function SettingsPage(): ReactElement {
     )
   }
 
-  // Run within Bee Desktop, display read only config
-  if (config) {
-    return (
-      <ExpandableList label="Bee Desktop Settings" defaultOpen>
-        <ExpandableListItemInput label="Bee API" value={config['api-addr']} locked />
-        <ExpandableListItemInput label="Bee Debug API" value={config['debug-api-addr']} locked />
-        <ExpandableListItemInput label="CORS" value={config['cors-allowed-origins']} locked />
-        <ExpandableListItemInput label="Data DIR" value={config['data-dir']} locked />
-        <ExpandableListItemInput label="ENS resolver URL" value={config['resolver-options']} locked />
-        {config['swap-endpoint'] && (
-          <ExpandableListItemInput label="SWAP endpoint" value={config['swap-endpoint']} locked />
-        )}
-      </ExpandableList>
-    )
-  }
-
   return (
-    <ExpandableList label="API Settings" defaultOpen>
-      <ExpandableListItemInput label="Bee API" value={apiUrl} onConfirm={setApiUrl} locked={lockedApiSettings} />
-      <ExpandableListItemInput
-        label="Bee Debug API"
-        value={apiDebugUrl}
-        onConfirm={setDebugApiUrl}
-        locked={lockedApiSettings}
-      />
-    </ExpandableList>
+    <>
+      <ExpandableList label="API Settings" defaultOpen>
+        <ExpandableListItemInput
+          label="Bee API"
+          value={apiUrl}
+          onConfirm={setApiUrl}
+          locked={lockedApiSettings || config.BEE_DESKTOP_ENABLED}
+        />
+        <ExpandableListItemInput
+          label="Bee Debug API"
+          value={apiDebugUrl}
+          onConfirm={setDebugApiUrl}
+          locked={lockedApiSettings || config.BEE_DESKTOP_ENABLED}
+        />
+        <ExpandableListItemInput
+          label="Blockchain RPC URL"
+          value={providerUrl}
+          helperText="Changing the value will restart your bee node."
+          confirmLabel="Save and restart"
+          onConfirm={value => {
+            setAndPersistJsonRpcProvider(value)
+              .then(() => {
+                refresh()
+                enqueueSnackbar('Settings changed, restarting bee node...', { variant: 'success' })
+              })
+              .catch(error => {
+                console.log(error) //eslint-disable-line
+                enqueueSnackbar(`Failed to change RPC endpoint. Error: ${error}`, { variant: 'success' })
+              })
+          }}
+        />
+      </ExpandableList>
+      {config.BEE_DESKTOP_ENABLED && (
+        <ExpandableList label="Desktop Settings" defaultOpen>
+          <ExpandableListItemInput label="CORS" value={cors ?? '-'} locked />
+          <ExpandableListItemInput label="Data DIR" value={dataDir ?? '-'} locked />
+          <ExpandableListItemInput label="ENS resolver URL" value={ensResolver ?? '-'} locked />
+        </ExpandableList>
+      )}
+    </>
   )
 }

src/pages/top-up/GiftCardFund.tsx

@@ -12,7 +12,7 @@ import { ProgressIndicator } from '../../components/ProgressIndicator'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmDivider } from '../../components/SwarmDivider'
 import { Context as BeeContext } from '../../providers/Bee'
-import { Context as TopUpContext } from '../../providers/TopUp'
+import { Context as SettingsContext } from '../../providers/Settings'
 import { ROUTES } from '../../routes'
 import { sleepMs } from '../../utils'
 import { restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
@@ -23,7 +23,7 @@ import { BeeModes } from '@ethersphere/bee-js'
 export function GiftCardFund(): ReactElement {
   const isBeeDesktop = config.BEE_DESKTOP_ENABLED
   const { nodeAddresses, balance, nodeInfo } = useContext(BeeContext)
-  const { provider, providerUrl } = useContext(TopUpContext)
+  const { provider, providerUrl } = useContext(SettingsContext)
 
   const [loading, setLoading] = useState(false)
   const [wallet, setWallet] = useState<ResolvedWallet | null>(null)

src/pages/top-up/GiftCardTopUpIndex.tsx

@@ -4,7 +4,7 @@ import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
 import ArrowRight from 'remixicon-react/ArrowRightLineIcon'
 import { useNavigate } from 'react-router'
-import { Context as TopUpContext } from '../../providers/TopUp'
+import { Context as SettingsContext } from '../../providers/Settings'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { ProgressIndicator } from '../../components/ProgressIndicator'
 import { SwarmButton } from '../../components/SwarmButton'
@@ -16,7 +16,7 @@ import { ROUTES } from '../../routes'
 import { Rpc } from '../../utils/rpc'
 
 export function GiftCardTopUpIndex(): ReactElement {
-  const { provider } = useContext(TopUpContext)
+  const { provider } = useContext(SettingsContext)
   const [loading, setLoading] = useState(false)
   const [giftCode, setGiftCode] = useState('')
 

src/pages/top-up/Swap.tsx

@@ -17,7 +17,7 @@ import { SwarmTextInput } from '../../components/SwarmTextInput'
 import { BzzToken } from '../../models/BzzToken'
 import { DaiToken } from '../../models/DaiToken'
 import { Context as BeeContext } from '../../providers/Bee'
-import { Context as TopUpContext } from '../../providers/TopUp'
+import { Context as SettingsContext } from '../../providers/Settings'
 import { ROUTES } from '../../routes'
 import { sleepMs } from '../../utils'
 import { getBzzPriceAsDai, performSwap, restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
@@ -37,7 +37,7 @@ export function Swap({ header }: Props): ReactElement {
   const [userInputSwap, setUserInputSwap] = useState<string | null>(null)
   const [price, setPrice] = useState(DaiToken.fromDecimal('0.6', 18))
 
-  const { providerUrl } = useContext(TopUpContext)
+  const { providerUrl } = useContext(SettingsContext)
   const { balance, nodeAddresses, nodeInfo } = useContext(BeeContext)
   const isBeeDesktop = config.BEE_DESKTOP_ENABLED
 

src/pages/top-up/index.tsx

@@ -11,7 +11,7 @@ import { HistoryHeader } from '../../components/HistoryHeader'
 import { SwarmButton } from '../../components/SwarmButton'
 import { ROUTES } from '../../routes'
 import { Context as BeeContext } from '../../providers/Bee'
-import { Context as TopUpContext } from '../../providers/TopUp'
+import { Context as SettingsContext } from '../../providers/Settings'
 import config from '../../config'
 import { BeeModes } from '@ethersphere/bee-js'
 import { restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
@@ -40,7 +40,7 @@ export default function TopUp(): ReactElement {
   const styles = useStyles()
   const isBeeDesktop = config.BEE_DESKTOP_ENABLED
   const { balance, nodeInfo } = useContext(BeeContext)
-  const { providerUrl } = useContext(TopUpContext)
+  const { providerUrl } = useContext(SettingsContext)
   const [loading, setLoading] = useState(false)
   const { enqueueSnackbar } = useSnackbar()