refactor: remove env. variables from the component (#529)

src/providers/Settings.tsx

@@ -1,15 +1,15 @@
 import { Bee, BeeDebug } from '@ethersphere/bee-js'
 import { providers } from 'ethers'
 import { createContext, ReactNode, ReactElement, useEffect, useState } from 'react'
-import { config as appConfig } from '../config'
 import { useGetBeeConfig } from '../hooks/apiHooks'
 import { restartBeeNode, setJsonRpcInDesktop } from '../utils/desktop'
+import { DEFAULT_BEE_API_HOST, DEFAULT_BEE_DEBUG_API_HOST, DEFAULT_RPC_URL } from '../constants'
 
 const LocalStorageKeys = {
   providerUrl: 'json-rpc-provider',
 }
 
-const providerUrl = localStorage.getItem('json-rpc-provider') || appConfig.DEFAULT_RPC_URL
+const providerUrl = localStorage.getItem('json-rpc-provider') || DEFAULT_RPC_URL
 
 interface ContextInterface {
   apiUrl: string
@@ -18,6 +18,8 @@ interface ContextInterface {
   beeDebugApi: BeeDebug | null
   lockedApiSettings: boolean
   desktopApiKey: string
+  isDesktop: boolean
+  desktopUrl: string
   providerUrl: string
   provider: providers.JsonRpcProvider
   cors: string | null
@@ -26,27 +28,27 @@ interface ContextInterface {
   setApiUrl: (url: string) => void
   setDebugApiUrl: (url: string) => void
   setAndPersistJsonRpcProvider: (url: string) => Promise<void>
-  isBeeDesktop: boolean
   isLoading: boolean
   error: Error | null
 }
 
 const initialValues: ContextInterface = {
-  apiUrl: appConfig.BEE_API_HOST,
-  apiDebugUrl: appConfig.BEE_DEBUG_API_HOST,
   beeApi: null,
   beeDebugApi: null,
+  apiUrl: DEFAULT_BEE_API_HOST,
+  apiDebugUrl: DEFAULT_BEE_DEBUG_API_HOST,
   setApiUrl: () => {}, // eslint-disable-line
   setDebugApiUrl: () => {}, // eslint-disable-line
   lockedApiSettings: false,
+  isDesktop: false,
   desktopApiKey: '',
+  desktopUrl: window.location.origin,
   setAndPersistJsonRpcProvider: async () => {}, // eslint-disable-line
   providerUrl,
   provider: new providers.JsonRpcProvider(providerUrl),
   cors: null,
   dataDir: null,
   ensResolver: null,
-  isBeeDesktop: false,
   isLoading: true,
   error: null,
 }
@@ -54,21 +56,22 @@ const initialValues: ContextInterface = {
 export const Context = createContext<ContextInterface>(initialValues)
 export const Consumer = Context.Consumer
 
-interface Props {
-  children: ReactNode
+interface InitialSettings {
   beeApiUrl?: string
   beeDebugApiUrl?: string
   lockedApiSettings?: boolean
-  isBeeDesktop?: boolean
+  isDesktop?: boolean
+  desktopUrl?: string
 }
 
-export function Provider({
-  children,
-  beeApiUrl,
-  beeDebugApiUrl,
-  lockedApiSettings: extLockedApiSettings,
-  isBeeDesktop: extIsBeeDesktop,
-}: Props): ReactElement {
+interface Props extends InitialSettings {
+  children: ReactNode
+}
+
+export function Provider({ children, ...propsSettings }: Props): ReactElement {
+  const desktopUrl = propsSettings.desktopUrl ?? initialValues.desktopUrl
+  const isDesktop = Boolean(propsSettings.isDesktop)
+
   const [apiUrl, setApiUrl] = useState<string>(initialValues.apiUrl)
   const [apiDebugUrl, setDebugApiUrl] = useState<string>(initialValues.apiDebugUrl)
   const [beeApi, setBeeApi] = useState<Bee | null>(null)
@@ -76,35 +79,17 @@ export function Provider({
   const [desktopApiKey, setDesktopApiKey] = useState<string>(initialValues.desktopApiKey)
   const [providerUrl, setProviderUrl] = useState(initialValues.providerUrl)
   const [provider, setProvider] = useState(initialValues.provider)
-  const { config, isLoading, error } = useGetBeeConfig()
+  const { config, isLoading, error } = useGetBeeConfig(desktopUrl)
 
-  const isBeeDesktop = Boolean(extIsBeeDesktop ?? appConfig.BEE_DESKTOP_ENABLED)
-
-  async function setAndPersistJsonRpcProvider(providerUrl: string) {
-    try {
-      localStorage.setItem(LocalStorageKeys.providerUrl, providerUrl)
-      setProviderUrl(providerUrl)
-      setProvider(new providers.JsonRpcProvider(providerUrl))
-
-      if (isBeeDesktop) {
-        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}`
-    }
-
-    return string
-  }
-
-  const url = makeHttpUrl(config?.['api-addr'] || beeApiUrl || apiUrl)
-  const debugUrl = makeHttpUrl(config?.['debug-api-addr'] || beeDebugApiUrl || apiDebugUrl)
+  const url = makeHttpUrl(
+    config?.['api-addr'] ?? sessionStorage.getItem('api_host') ?? propsSettings.beeApiUrl ?? apiUrl,
+  )
+  const debugUrl = makeHttpUrl(
+    config?.['debug-api-addr'] ??
+      sessionStorage.getItem('debug_api_host') ??
+      propsSettings.beeDebugApiUrl ??
+      apiDebugUrl,
+  )
 
   useEffect(() => {
     const urlSearchParams = new URLSearchParams(window.location.search)
@@ -144,15 +129,21 @@ export function Provider({
         beeDebugApi,
         setApiUrl,
         setDebugApiUrl,
-        lockedApiSettings: Boolean(extLockedApiSettings),
+        lockedApiSettings: Boolean(propsSettings.lockedApiSettings),
         desktopApiKey,
+        isDesktop,
+        desktopUrl,
         provider,
         providerUrl,
         cors: config?.['cors-allowed-origins'] ?? null,
         dataDir: config?.['data-dir'] ?? null,
         ensResolver: config?.['resolver-options'] ?? null,
-        setAndPersistJsonRpcProvider,
-        isBeeDesktop,
+        setAndPersistJsonRpcProvider: setAndPersistJsonRpcProviderClosure(
+          isDesktop,
+          desktopUrl,
+          setProviderUrl,
+          setProvider,
+        ),
         isLoading,
         error,
       }}
@@ -161,3 +152,33 @@ export function Provider({
     </Context.Provider>
   )
 }
+
+function makeHttpUrl(string: string): string {
+  if (!string.startsWith('http')) {
+    return `http://${string}`
+  }
+
+  return string
+}
+
+function setAndPersistJsonRpcProviderClosure(
+  isDesktop: boolean,
+  desktopUrl: string,
+  setProviderUrl: (url: string) => void,
+  setProvider: (prov: providers.JsonRpcProvider) => void,
+) {
+  return async (providerUrl: string) => {
+    try {
+      localStorage.setItem(LocalStorageKeys.providerUrl, providerUrl)
+      setProviderUrl(providerUrl)
+      setProvider(new providers.JsonRpcProvider(providerUrl))
+
+      if (isDesktop) {
+        await setJsonRpcInDesktop(desktopUrl, providerUrl)
+        await restartBeeNode(desktopUrl)
+      }
+    } catch (error) {
+      console.error(error) // eslint-disable-line
+    }
+  }
+}