feat: add bee-desktop settings capabilities (#323)

* refactor: make the config readonly and extract endpoint calls to hook (+2 squashed commits)
Squashed commits:
[91ffe45] feat: add swap-endpoint
[e1d0c3a] feat: add bee-desktop settings capabilities

* feat: use the request mechanism that uses the bee-desktop API key

* fix: properly reset the error or on error set the config to null

src/components/ExpandableListItemInput.tsx

@@ -55,7 +55,7 @@ interface Props {
   confirmLabelDisabled?: boolean
   loading?: boolean
   onChange?: (value: string) => void
-  onConfirm: (value: string) => void
+  onConfirm?: (value: string) => void
   mapperFn?: (value: string) => string
   locked?: boolean
 }
@@ -138,7 +138,9 @@ export default function ExpandableListItemKey({
             }
             loading={loading}
             iconType={Search}
-            onClick={() => onConfirm(inputValue)}
+            onClick={() => {
+              if (onConfirm) onConfirm(inputValue)
+            }}
           >
             {confirmLabel || 'Save'}
           </SwarmButton>

src/hooks/apiHooks.tsx

@@ -1,6 +1,7 @@
 import axios from 'axios'
 import { useEffect, useState } from 'react'
 import { config } from '../config'
+import { getJson } from '../utils/net'
 
 export interface LatestBeeReleaseHook {
   latestBeeRelease: LatestBeeRelease | null
@@ -44,6 +45,54 @@ export const useIsBeeDesktop = (conf: Config = config): IsBeeDesktopHook => {
   return { isBeeDesktop, isLoading }
 }
 
+export interface BeeConfig {
+  'api-addr': string
+  'debug-api-addr': string
+  'debug-api-enable': boolean
+  password: string
+  'swap-enable': boolean
+  'swap-initial-deposit': bigint
+  mainnet: boolean
+  'full-node': boolean
+  'chain-enable': boolean
+  'cors-allowed-origins': string
+  'resolver-options': string
+  'use-postage-snapshot': boolean
+  'data-dir': string
+  transaction: string
+  'block-hash': string
+  'swap-endpoint'?: string
+}
+
+export interface GetBeeConfig {
+  config: BeeConfig | null
+  isLoading: boolean
+  error: Error | null
+}
+
+export const useGetBeeConfig = (conf: Config = config): GetBeeConfig => {
+  const [beeConfig, setBeeConfig] = useState<BeeConfig | null>(null)
+  const [isLoading, setLoading] = useState<boolean>(true)
+  const [error, setError] = useState<Error | null>(null)
+
+  useEffect(() => {
+    getJson<BeeConfig>(`${conf.BEE_DESKTOP_URL}/config`)
+      .then(beeConf => {
+        setBeeConfig(beeConf)
+        setError(null)
+      })
+      .catch((err: Error) => {
+        setError(err)
+        setBeeConfig(null)
+      })
+      .finally(() => {
+        setLoading(false)
+      })
+  }, [conf])
+
+  return { config: beeConfig, isLoading, error }
+}
+
 export const useLatestBeeRelease = (): LatestBeeReleaseHook => {
   const [latestBeeRelease, setLatestBeeRelease] = useState<LatestBeeRelease | null>(null)
   const [isLoadingLatestBeeRelease, setLoading] = useState<boolean>(false)

src/pages/settings/index.tsx

@@ -1,10 +1,36 @@
+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 SettingsContext } from '../../providers/Settings'
 
-export default function Settings(): ReactElement {
-  const { apiUrl, apiDebugUrl, setApiUrl, setDebugApiUrl, lockedApiSettings } = useContext(SettingsContext)
+export default function SettingsPage(): ReactElement {
+  const { apiUrl, apiDebugUrl, setApiUrl, setDebugApiUrl, lockedApiSettings, config, isLoading } =
+    useContext(SettingsContext)
+
+  if (isLoading) {
+    return (
+      <div style={{ textAlign: 'center', width: '100%' }}>
+        <CircularProgress />
+      </div>
+    )
+  }
+
+  // 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>

src/providers/Settings.tsx

@@ -1,6 +1,7 @@
 import { Bee, BeeDebug } from '@ethersphere/bee-js'
 import { createContext, ReactChild, ReactElement, useEffect, useState } from 'react'
 import { config } from '../config'
+import { BeeConfig, useGetBeeConfig } from '../hooks/apiHooks'
 
 interface ContextInterface {
   apiUrl: string
@@ -11,6 +12,9 @@ interface ContextInterface {
   setDebugApiUrl: (url: string) => void
   lockedApiSettings: boolean
   desktopApiKey: string
+  config: BeeConfig | null
+  isLoading: boolean
+  error: Error | null
 }
 
 const initialValues: ContextInterface = {
@@ -22,6 +26,9 @@ const initialValues: ContextInterface = {
   setDebugApiUrl: () => {}, // eslint-disable-line
   lockedApiSettings: false,
   desktopApiKey: '',
+  config: null,
+  isLoading: true,
+  error: null,
 }
 
 export const Context = createContext<ContextInterface>(initialValues)
@@ -46,9 +53,10 @@ export function Provider({
   const [beeDebugApi, setBeeDebugApi] = useState<BeeDebug | null>(null)
   const [lockedApiSettings] = useState<boolean>(Boolean(extLockedApiSettings))
   const [desktopApiKey, setDesktopApiKey] = useState<string>(initialValues.desktopApiKey)
+  const { config, isLoading, error } = useGetBeeConfig()
 
-  const url = beeApiUrl || apiUrl
-  const debugUrl = beeDebugApiUrl || apiDebugUrl
+  const url = config?.['api-addr'] || beeApiUrl || apiUrl
+  const debugUrl = config?.['debug-api-addr'] || beeDebugApiUrl || apiDebugUrl
 
   useEffect(() => {
     const urlSearchParams = new URLSearchParams(window.location.search)
@@ -90,6 +98,9 @@ export function Provider({
         setDebugApiUrl,
         lockedApiSettings,
         desktopApiKey,
+        config,
+        isLoading,
+        error,
       }}
     >
       {children}

src/utils/net.ts

@@ -2,8 +2,8 @@
 
 import axios from 'axios'
 
-export function getJson(url: string): Promise<Record<string, any>> {
-  return sendRequest(url, 'GET')
+export function getJson<T extends Record<string, any>>(url: string): Promise<T> {
+  return sendRequest(url, 'GET') as Promise<T>
 }
 
 export function postJson(url: string, data?: Record<string, any>): Promise<Record<string, unknown>> {