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

2022-09-07 23:51:55 -07:00
parent 0603018f09
commit 0c262a4811
23 changed files with 186 additions and 207 deletions
@@ -20,10 +20,11 @@ interface Props {
  beeApiUrl?: string
  beeDebugApiUrl?: string
  lockedApiSettings?: boolean
-  isBeeDesktop?: boolean
+  isDesktop?: boolean
+  desktopUrl?: string
 }

-const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings, isBeeDesktop }: Props): ReactElement => {
+const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings, isDesktop, desktopUrl }: Props): ReactElement => {
  const mainApp = (
    <div className="App">
      <ThemeProvider theme={theme}>
@@ -31,7 +32,8 @@ const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings, isBeeDesktop }: Pro
          beeApiUrl={beeApiUrl}
          beeDebugApiUrl={beeDebugApiUrl}
          lockedApiSettings={lockedApiSettings}
-          isBeeDesktop={isBeeDesktop}
+          isDesktop={isDesktop}
+          desktopUrl={desktopUrl}
        >
          <TopUpProvider>
            <BeeProvider>
@@ -1,9 +1,9 @@
 import { Typography } from '@material-ui/core/'
 import { ReactElement } from 'react'
 import Identicon from 'react-identicons'
-import { config } from '../config'
 import ClipboardCopy from './ClipboardCopy'
 import QRCodeModal from './QRCodeModal'
+import { BLOCKCHAIN_EXPLORER_URL } from '../constants'

 interface Props {
  address: string | undefined
@@ -36,7 +36,7 @@ export default function EthereumAddress(props: Props): ReactElement {
                    }
                  : { marginRight: '7px' }
              }
-              href={`${config.BLOCKCHAIN_EXPLORER_URL}/${props.transaction ? 'tx' : 'address'}/${props.address}`}
+              href={`${BLOCKCHAIN_EXPLORER_URL}/${props.transaction ? 'tx' : 'address'}/${props.address}`}
              target="_blank"
              rel="noreferrer"
            >
@@ -12,11 +12,11 @@ import { Context as BeeContext } from '../providers/Bee'
 import { Context as SettingsContext } from '../providers/Settings'
 import DashboardLogo from '../assets/dashboard-logo.svg'
 import DesktopLogo from '../assets/desktop-logo.svg'
-import { config } from '../config'
 import { ROUTES } from '../routes'
 import SideBarItem from './SideBarItem'
 import SideBarStatus from './SideBarStatus'
 import { BeeModes } from '@ethersphere/bee-js'
+import { BEE_DOCS_HOST } from '../constants'

 const drawerWidth = 300

@@ -66,7 +66,7 @@ const useStyles = makeStyles((theme: Theme) =>

 export default function SideBar(): ReactElement {
  const classes = useStyles()
-  const { isBeeDesktop } = useContext(SettingsContext)
+  const { isDesktop } = useContext(SettingsContext)
  const { nodeInfo } = useContext(BeeContext)

  const navBarItems = [
@@ -99,7 +99,7 @@ export default function SideBar(): ReactElement {
      <Grid container direction="column" justifyContent="space-between" className={classes.root}>
        <Grid className={classes.logo}>
          <Link to={ROUTES.INFO}>
-            <img alt="swarm" src={isBeeDesktop ? DesktopLogo : DashboardLogo} />
+            <img alt="swarm" src={isDesktop ? DesktopLogo : DashboardLogo} />
          </Link>
        </Grid>
        <Grid>
@@ -118,7 +118,7 @@ export default function SideBar(): ReactElement {
          </List>
          <Divider className={classes.divider} />
          <List>
-            <MUILink href={config.BEE_DOCS_HOST} target="_blank" className={classes.link}>
+            <MUILink href={BEE_DOCS_HOST} target="_blank" className={classes.link}>
              <SideBarItem
                iconStart={<DocsIcon className={classes.icon} />}
                iconEnd={<ExternalLinkIcon className={classes.icon} color="#595959" />}
@@ -3,8 +3,8 @@ import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import type { ReactElement } from 'react'
 import Activity from 'remixicon-react/PulseLineIcon'
 import { Link } from 'react-router-dom'
-import { config } from '../config'
 import { ROUTES } from '../routes'
+import { BEE_DISCORD_HOST, BEE_DOCS_HOST } from '../constants'

 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -37,11 +37,11 @@ export default function TroubleshootConnectionCard(): ReactElement {
      <Grid item className={classes.content}>
        <Typography align="center">
          Please check your node status to fix the problem. You can also check out the{' '}
-          <MuiLink href={config.BEE_DOCS_HOST} target="_blank" rel="noreferrer">
+          <MuiLink href={BEE_DOCS_HOST} target="_blank" rel="noreferrer">
            Swarm Bee Docs
          </MuiLink>{' '}
          or ask for support on the{' '}
-          <MuiLink href={config.BEE_DISCORD_HOST} target="_blank" rel="noreferrer">
+          <MuiLink href={BEE_DISCORD_HOST} target="_blank" rel="noreferrer">
            Ethereum Swarm Discord
          </MuiLink>
          .
@@ -1,29 +0,0 @@
-class Config {
-  public readonly BEE_API_HOST: string
-  public readonly BEE_DEBUG_API_HOST: string
-  public readonly BLOCKCHAIN_EXPLORER_URL: string
-  public readonly BEE_DOCS_HOST: string
-  public readonly BEE_DISCORD_HOST: string
-  public readonly GITHUB_REPO_URL: string
-  public readonly BEE_DESKTOP_ENABLED: boolean
-  public readonly BEE_DESKTOP_URL: string
-  public readonly DEFAULT_RPC_URL: string
-
-  constructor() {
-    this.BEE_API_HOST = sessionStorage.getItem('api_host') ?? process.env.REACT_APP_BEE_HOST ?? 'http://localhost:1633'
-    this.BEE_DEBUG_API_HOST =
-      sessionStorage.getItem('debug_api_host') ?? process.env.REACT_APP_BEE_DEBUG_HOST ?? 'http://localhost:1635'
-    this.BLOCKCHAIN_EXPLORER_URL =
-      process.env.REACT_APP_BLOCKCHAIN_EXPLORER_URL ?? 'https://blockscout.com/xdai/mainnet'
-    this.BEE_DOCS_HOST = process.env.REACT_APP_BEE_DOCS_HOST ?? 'https://docs.ethswarm.org/docs/'
-    this.BEE_DISCORD_HOST = process.env.REACT_APP_BEE_DISCORD_HOST ?? 'https://discord.gg/eKr9XPv7'
-    this.GITHUB_REPO_URL = process.env.REACT_APP_BEE_GITHUB_REPO_URL ?? 'https://api.github.com/repos/ethersphere/bee'
-    this.BEE_DESKTOP_ENABLED = process.env.REACT_APP_BEE_DESKTOP_ENABLED === 'true'
-    this.BEE_DESKTOP_URL = process.env.REACT_APP_BEE_DESKTOP_URL ?? window.location.origin
-    this.DEFAULT_RPC_URL = process.env.REACT_APP_DEFAULT_RPC_URL ?? 'https://xdai.fairdatasociety.org'
-  }
-}
-
-export const config = new Config()
-
-export default config
@@ -1,4 +1,14 @@
 export const META_FILE_NAME = '.swarmgatewaymeta.json'
 export const PREVIEW_FILE_NAME = '.swarmgatewaypreview.jpeg'
 export const PREVIEW_DIMENSIONS = { maxWidth: 250, maxHeight: 175 }
-export const BZZ_LINK_DOMAIN = process.env.REACT_APP_BZZ_LINK_DOMAIN || 'bzz.link'
+export const BZZ_LINK_DOMAIN = 'bzz.link'
+export const BLOCKCHAIN_EXPLORER_URL = 'https://blockscout.com/xdai/mainnet'
+export const BEE_DOCS_HOST = 'https://docs.ethswarm.org/docs/'
+export const BEE_DISCORD_HOST = 'https://discord.gg/eKr9XPv7'
+export const GITHUB_REPO_URL = 'https://api.github.com/repos/ethersphere/bee'
+export const BEE_DESKTOP_LATEST_RELEASE_PAGE = 'https://github.com/ethersphere/bee-desktop/releases/latest'
+export const BEE_DESKTOP_LATEST_RELEASE_PAGE_API =
+  'https://api.github.com/repos/ethersphere/bee-desktop/releases/latest'
+export const DEFAULT_BEE_API_HOST = 'http://localhost:1633'
+export const DEFAULT_BEE_DEBUG_API_HOST = 'http://localhost:1635'
+export const DEFAULT_RPC_URL = 'https://xdai.fairdatasociety.org'
@@ -41,7 +41,7 @@ afterAll(async () => {

 describe('useBeeDesktop', () => {
  it('should not have error when connected to bee-desktop', async () => {
-    const { result, waitFor } = renderHook(() => useBeeDesktop(true, { BEE_DESKTOP_URL: serverCorrectURL }))
+    const { result, waitFor } = renderHook(() => useBeeDesktop(true, serverCorrectURL))

    await waitFor(() => {
      expect(result.current.isLoading).toBe(false)
@@ -1,8 +1,8 @@
 import axios from 'axios'
 import { useEffect, useState } from 'react'
-import { config } from '../config'
 import { getLatestBeeDesktopVersion } from '../utils/desktop'
 import { getJson } from '../utils/net'
+import { GITHUB_REPO_URL } from '../constants'

 export interface LatestBeeReleaseHook {
  latestBeeRelease: LatestBeeRelease | null
@@ -21,11 +21,7 @@ export interface NewDesktopVersionHook {
  newBeeDesktopVersion: string
 }

-interface Config {
-  BEE_DESKTOP_URL: string
-}
-
-export const useBeeDesktop = (isBeeDesktop = false, conf: Config = config): BeeDesktopHook => {
+export const useBeeDesktop = (isBeeDesktop = false, desktopUrl: string): BeeDesktopHook => {
  const [desktopAutoUpdateEnabled, setDesktopAutoUpdateEnabled] = useState<boolean>(true)
  const [beeDesktopVersion, setBeeDesktopVersion] = useState<string>('')
  const [isLoading, setLoading] = useState<boolean>(true)
@@ -37,7 +33,7 @@ export const useBeeDesktop = (isBeeDesktop = false, conf: Config = config): BeeD
      setError(null)
    } else {
      axios
-        .get(`${conf.BEE_DESKTOP_URL}/info`)
+        .get(`${desktopUrl}/info`)
        .then(res => {
          setBeeDesktopVersion(res.data?.version)
          setDesktopAutoUpdateEnabled(res.data?.autoUpdateEnabled)
@@ -50,13 +46,13 @@ export const useBeeDesktop = (isBeeDesktop = false, conf: Config = config): BeeD
          setLoading(false)
        })
    }
-  }, [conf, isBeeDesktop])
+  }, [desktopUrl, isBeeDesktop])

  return { error, isLoading, beeDesktopVersion, desktopAutoUpdateEnabled }
 }

-async function checkNewVersion(conf: Config): Promise<string> {
-  const resJson = await (await fetch(`${conf.BEE_DESKTOP_URL}/info`)).json()
+async function checkNewVersion(desktopUrl: string): Promise<string> {
+  const resJson = await (await fetch(`${desktopUrl}/info`)).json()
  const currentVersion = resJson.version
  const latestVersion = await getLatestBeeDesktopVersion()

@@ -67,7 +63,7 @@ async function checkNewVersion(conf: Config): Promise<string> {
  return ''
 }

-export function useNewBeeDesktopVersion(isBeeDesktop: boolean, conf: Config = config): NewDesktopVersionHook {
+export function useNewBeeDesktopVersion(isBeeDesktop: boolean, desktopUrl: string): NewDesktopVersionHook {
  const [newBeeDesktopVersion, setNewBeeDesktopVersion] = useState<string>('')

  useEffect(() => {
@@ -75,12 +71,12 @@ export function useNewBeeDesktopVersion(isBeeDesktop: boolean, conf: Config = co
      return
    }

-    checkNewVersion(conf).then(version => {
+    checkNewVersion(desktopUrl).then(version => {
      if (version !== '') {
        setNewBeeDesktopVersion(version)
      }
    })
-  }, [isBeeDesktop, conf])
+  }, [isBeeDesktop, desktopUrl])

  return { newBeeDesktopVersion }
 }
@@ -110,13 +106,13 @@ export interface GetBeeConfig {
  error: Error | null
 }

-export const useGetBeeConfig = (conf: Config = config): GetBeeConfig => {
+export const useGetBeeConfig = (desktopUrl: string): 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`)
+    getJson<BeeConfig>(`${desktopUrl}/config`)
      .then(beeConf => {
        setBeeConfig(beeConf)
        setError(null)
@@ -128,7 +124,7 @@ export const useGetBeeConfig = (conf: Config = config): GetBeeConfig => {
      .finally(() => {
        setLoading(false)
      })
-  }, [conf])
+  }, [desktopUrl])

  return { config: beeConfig, isLoading, error }
 }
@@ -140,7 +136,7 @@ export const useLatestBeeRelease = (): LatestBeeReleaseHook => {

  useEffect(() => {
    axios
-      .get(`${config.GITHUB_REPO_URL}/releases/latest`)
+      .get(`${GITHUB_REPO_URL}/releases/latest`)
      .then(res => {
        setLatestBeeRelease(res.data)
      })
@@ -4,9 +4,14 @@ import './index.css'
 import App from './App'
 import reportWebVitals from './reportWebVitals'

+const desktopEnabled = Boolean(process.env.REACT_APP_BEE_DESKTOP_ENABLED)
+const desktopUrl = process.env.REACT_APP_BEE_DESKTOP_URL
+const beeApiUrl = process.env.REACT_APP_BEE_API_URL
+const beeDebugApiUrl = process.env.REACT_APP_BEE_DEBUG_API_URL
+
 ReactDOM.render(
  <React.StrictMode>
-    <App />
+    <App isDesktop={desktopEnabled} desktopUrl={desktopUrl} beeApiUrl={beeApiUrl} beeDebugApiUrl={beeDebugApiUrl} />
  </React.StrictMode>,
  document.getElementById('root'),
 )
@@ -8,7 +8,7 @@ import SideBar from '../components/SideBar'
 import { Context as BeeContext } from '../providers/Bee'
 import { Context as SettingsContext } from '../providers/Settings'
 import { useNewBeeDesktopVersion } from '../hooks/apiHooks'
-import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../utils/desktop'
+import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../constants'

 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -28,13 +28,13 @@ const Dashboard = (props: Props): ReactElement => {

  const { isLoading, isLatestBeeVersion, latestBeeRelease, latestBeeVersionUrl, latestUserVersion } =
    useContext(BeeContext)
-  const { isBeeDesktop } = useContext(SettingsContext)
-  const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isBeeDesktop)
+  const { isDesktop, desktopUrl } = useContext(SettingsContext)
+  const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isDesktop, desktopUrl)
  const { enqueueSnackbar, closeSnackbar } = useSnackbar()

  // New version of Bee client notification
  useEffect(() => {
-    if (!isLoading && !isBeeDesktop && !isLatestBeeVersion && latestBeeRelease && latestUserVersion) {
+    if (!isLoading && !isDesktop && !isLatestBeeVersion && latestBeeRelease && latestUserVersion) {
      enqueueSnackbar(`There is new Bee version ${latestBeeRelease?.name}!`, {
        variant: 'warning',
        preventDuplicate: true,
@@ -65,7 +65,7 @@ const Dashboard = (props: Props): ReactElement => {
    closeSnackbar,
    enqueueSnackbar,
    isLatestBeeVersion,
-    isBeeDesktop,
+    isDesktop,
    latestBeeRelease,
    latestBeeVersionUrl,
    isLoading,
@@ -20,7 +20,7 @@ import { Header } from '../Header'

 export function AccountWallet(): ReactElement {
  const { nodeAddresses, nodeInfo, status } = useContext(BeeContext)
-  const { isBeeDesktop } = useContext(SettingsContext)
+  const { isDesktop } = useContext(SettingsContext)
  const { balance } = useContext(BalanceProvider)

  const navigate = useNavigate()
@@ -72,7 +72,7 @@ export function AccountWallet(): ReactElement {
        <SwarmButton onClick={onCheckTransactions} iconType={Link}>
          Check transactions on Blockscout
        </SwarmButton>
-        {isBeeDesktop && (
+        {isDesktop && (
          <SwarmButton onClick={onInvite} iconType={Gift}>
            Invite to Swarm...
          </SwarmButton>
@@ -8,7 +8,6 @@ import { useNavigate, useParams } from 'react-router-dom'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { Loading } from '../../components/Loading'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
-import config from '../../config'
 import { META_FILE_NAME, PREVIEW_FILE_NAME } from '../../constants'
 import { Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
@@ -78,7 +77,7 @@ export function Share(): ReactElement {
    } catch (e) {} // eslint-disable-line no-empty

    if (previewFile) {
-      setPreview(`${config.BEE_API_HOST}/bzz/${reference}/${PREVIEW_FILE_NAME}`)
+      setPreview(`${apiUrl}/bzz/${reference}/${PREVIEW_FILE_NAME}`)
    }

    setMetadata(metadata)
@@ -23,7 +23,7 @@ const GIFT_WALLET_FUND_BZZ_AMOUNT = Token.fromDecimal('0.5', 16)

 export default function Index(): ReactElement {
  const { giftWallets, addGiftWallet } = useContext(TopUpContext)
-  const { provider } = useContext(SettingsContext)
+  const { provider, desktopUrl } = useContext(SettingsContext)
  const { balance } = useContext(BalanceProvider)

  const [loading, setLoading] = useState(false)
@@ -50,7 +50,7 @@ export default function Index(): ReactElement {
    try {
      const wallet = Wallet.createRandom()
      addGiftWallet(wallet)
-      await createGiftWallet(wallet.address)
+      await createGiftWallet(desktopUrl, wallet.address)
      enqueueSnackbar('Succesfully funded gift wallet', { variant: 'success' })
    } catch (error) {
      console.error(error) // eslint-disable-line
@@ -13,8 +13,8 @@ import { Context as SettingsContext } from '../../providers/Settings'
 import { Context as BalanceProvider } from '../../providers/WalletBalance'
 import { ROUTES } from '../../routes'
 import { chainIdToName } from '../../utils/chain'
-import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../../utils/desktop'
 import NodeInfoCard from './NodeInfoCard'
+import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../../constants'

 export default function Status(): ReactElement {
  const {
@@ -27,10 +27,10 @@ export default function Status(): ReactElement {
    chequebookBalance,
    chainId,
  } = useContext(BeeContext)
-  const { isBeeDesktop } = useContext(SettingsContext)
+  const { isDesktop, desktopUrl } = useContext(SettingsContext)
  const { balance, error } = useContext(BalanceProvider)
-  const { beeDesktopVersion } = useBeeDesktop(isBeeDesktop)
-  const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isBeeDesktop)
+  const { beeDesktopVersion } = useBeeDesktop(isDesktop, desktopUrl)
+  const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isDesktop, desktopUrl)
  const navigate = useNavigate()

  let balanceText = 'Loading...'
@@ -114,7 +114,7 @@ export default function Status(): ReactElement {
      <ExpandableListItem label="Connected peers" value={topology?.connected ?? '-'} />
      <ExpandableListItem label="Population" value={topology?.population ?? '-'} />
      <div style={{ height: '16px' }} />
-      {isBeeDesktop && (
+      {isDesktop && (
        <ExpandableListItem
          label="Desktop version"
          value={
@@ -142,7 +142,7 @@ export default function Status(): ReactElement {
              Bee
            </a>
            {` ${latestUserVersion ?? '-'} `}
-            {latestUserVersion && !isBeeDesktop && (
+            {latestUserVersion && !isDesktop && (
              <Button
                size="small"
                variant="outlined"
@@ -18,7 +18,7 @@ export default function SettingsPage(): ReactElement {
    ensResolver,
    providerUrl,
    isLoading,
-    isBeeDesktop,
+    isDesktop,
    setAndPersistJsonRpcProvider,
  } = useContext(SettingsContext)
  const { refresh } = useContext(BeeContext)
@@ -39,13 +39,13 @@ export default function SettingsPage(): ReactElement {
          label="Bee API"
          value={apiUrl}
          onConfirm={setApiUrl}
-          locked={lockedApiSettings || isBeeDesktop}
+          locked={lockedApiSettings || isDesktop}
        />
        <ExpandableListItemInput
          label="Bee Debug API"
          value={apiDebugUrl}
          onConfirm={setDebugApiUrl}
-          locked={lockedApiSettings || isBeeDesktop}
+          locked={lockedApiSettings || isDesktop}
        />
        <ExpandableListItemInput
          label="Blockchain RPC URL"
@@ -65,7 +65,7 @@ export default function SettingsPage(): ReactElement {
          }}
        />
      </ExpandableList>
-      {isBeeDesktop && (
+      {isDesktop && (
        <ExpandableList label="Desktop Settings" defaultOpen>
          <ExpandableListItemInput label="CORS" value={cors ?? '-'} locked />
          <ExpandableListItemInput label="Data DIR" value={dataDir ?? '-'} locked />
@@ -22,7 +22,7 @@ import { BeeModes } from '@ethersphere/bee-js'

 export function GiftCardFund(): ReactElement {
  const { nodeAddresses, nodeInfo } = useContext(BeeContext)
-  const { isBeeDesktop, provider, providerUrl } = useContext(SettingsContext)
+  const { isDesktop, desktopUrl, provider, providerUrl } = useContext(SettingsContext)
  const { balance } = useContext(BalanceProvider)

  const [loading, setLoading] = useState(false)
@@ -45,13 +45,13 @@ export function GiftCardFund(): ReactElement {
    return <Loading />
  }

-  const canUpgradeToLightNode = isBeeDesktop && nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT
+  const canUpgradeToLightNode = isDesktop && nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT

  async function restart() {
    try {
      await sleepMs(5_000)
-      await upgradeToLightNode(providerUrl)
-      await restartBeeNode()
+      await upgradeToLightNode(desktopUrl, providerUrl)
+      await restartBeeNode(desktopUrl)
      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
      navigate(ROUTES.RESTART_LIGHT)
    } catch (error) {
@@ -31,13 +31,21 @@ interface Props {
  header: string
 }

+function isPositiveDecimal(value: string): boolean {
+  try {
+    return new BigNumber(value).isPositive()
+  } catch {
+    return false
+  }
+}
+
 export function Swap({ header }: Props): ReactElement {
  const [loading, setLoading] = useState(false)
  const [hasSwapped, setSwapped] = useState(false)
  const [userInputSwap, setUserInputSwap] = useState<string | null>(null)
  const [price, setPrice] = useState(DaiToken.fromDecimal('0.6', 18))

-  const { providerUrl, isBeeDesktop } = useContext(SettingsContext)
+  const { providerUrl, isDesktop, desktopUrl } = useContext(SettingsContext)
  const { nodeAddresses, nodeInfo } = useContext(BeeContext)
  const { balance } = useContext(BalanceProvider)

@@ -46,8 +54,8 @@ export function Swap({ header }: Props): ReactElement {

  useEffect(() => {
    // eslint-disable-next-line no-console
-    getBzzPriceAsDai().then(setPrice).catch(console.error)
-  }, [])
+    getBzzPriceAsDai(desktopUrl).then(setPrice).catch(console.error)
+  }, [desktopUrl])

  if (!balance || !nodeAddresses) {
    return <Loading />
@@ -58,14 +66,6 @@ export function Swap({ header }: Props): ReactElement {

  let daiToSwap: DaiToken

-  function isPositiveDecimal(value: string): boolean {
-    try {
-      return new BigNumber(value).isPositive()
-    } catch {
-      return false
-    }
-  }
-
  if (userInputSwap && isPositiveDecimal(userInputSwap)) {
    daiToSwap = DaiToken.fromDecimal(userInputSwap, 18)
  } else {
@@ -75,13 +75,14 @@ export function Swap({ header }: Props): ReactElement {
  const daiAfterSwap = new DaiToken(balance.dai.toBigNumber.minus(daiToSwap.toBigNumber))
  const bzzAfterSwap = new BzzToken(daiToSwap.toBigNumber.dividedBy(100).dividedToIntegerBy(price.toDecimal))

-  const canUpgradeToLightNode = isBeeDesktop && nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT
+  const canUpgradeToLightNode = isDesktop && nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT

  async function restart() {
    try {
      await sleepMs(5_000)
-      await upgradeToLightNode(providerUrl)
-      await restartBeeNode()
+      await upgradeToLightNode(desktopUrl, providerUrl)
+      await restartBeeNode(desktopUrl)
+
      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
      navigate(ROUTES.RESTART_LIGHT)
    } catch (error) {
@@ -96,8 +97,9 @@ export function Swap({ header }: Props): ReactElement {
    }
    setLoading(true)
    setSwapped(true)
+
    try {
-      await performSwap(daiToSwap.toString)
+      await performSwap(desktopUrl, daiToSwap.toString)
      enqueueSnackbar('Successfully swapped', { variant: 'success' })

      if (canUpgradeToLightNode) await restart()
@@ -39,7 +39,7 @@ const MINIMUM_XBZZ = '0.1'
 export default function TopUp(): ReactElement {
  const navigate = useNavigate()
  const styles = useStyles()
-  const { isBeeDesktop } = useContext(SettingsContext)
+  const { isDesktop, desktopUrl } = useContext(SettingsContext)
  const { nodeInfo, status } = useContext(BeeContext)
  const { balance } = useContext(BalanceProvider)
  const { providerUrl } = useContext(SettingsContext)
@@ -47,7 +47,7 @@ export default function TopUp(): ReactElement {
  const { enqueueSnackbar } = useSnackbar()

  const canUpgradeToLightNode =
-    isBeeDesktop &&
+    isDesktop &&
    nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT &&
    balance?.dai.toDecimal.gte(MINIMUM_XDAI) &&
    balance?.bzz.toDecimal.gte(MINIMUM_XBZZ)
@@ -55,8 +55,8 @@ export default function TopUp(): ReactElement {
  async function restart() {
    setLoading(true)
    try {
-      await upgradeToLightNode(providerUrl)
-      await restartBeeNode()
+      await upgradeToLightNode(desktopUrl, providerUrl)
+      await restartBeeNode(desktopUrl)
      enqueueSnackbar('Upgraded to light node', { variant: 'success' })
      navigate(ROUTES.RESTART_LIGHT)
    } catch (error) {
@@ -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
+    }
+  }
+}
@@ -61,7 +61,7 @@ export const ACCOUNT_TABS = [
 ]

 const BaseRouter = (): ReactElement => {
-  const { isBeeDesktop } = useContext(SettingsContext)
+  const { isDesktop } = useContext(SettingsContext)

  return (
    <Routes>
@@ -88,7 +88,7 @@ const BaseRouter = (): ReactElement => {
      <Route path={ROUTES.ACCOUNT_FEEDS_NEW} element={<CreateNewFeed />} />
      <Route path={ROUTES.ACCOUNT_FEEDS_UPDATE} element={<UpdateFeed />} />
      <Route path={ROUTES.ACCOUNT_FEEDS_VIEW} element={<FeedSubpage />} />
-      {isBeeDesktop && <Route path={ROUTES.ACCOUNT_INVITATIONS} element={<GiftCards />} />}
+      {isDesktop && <Route path={ROUTES.ACCOUNT_INVITATIONS} element={<GiftCards />} />}
    </Routes>
  )
 }
@@ -1,81 +1,47 @@
 import axios from 'axios'
 import { DaiToken } from '../models/DaiToken'
 import { Token } from '../models/Token'
-import { getJson, postJson, sendRequest } from './net'
+import { postJson } from './net'
+import { BEE_DESKTOP_LATEST_RELEASE_PAGE_API } from '../constants'

-interface DesktopStatus {
-  status: 0 | 1 | 2
-  address: string | null
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  config: Record<string, any>
-}
-
-export const BEE_DESKTOP_LATEST_RELEASE_PAGE = 'https://github.com/ethersphere/bee-desktop/releases/latest'
-
-export async function getDesktopStatus(): Promise<DesktopStatus> {
-  const response = await getJson(`${getDesktopHost()}/status`)
-
-  return response as DesktopStatus
-}
-
-export async function getBzzPriceAsDai(): Promise<Token> {
-  const response = await axios.get(`${getDesktopHost()}/price`)
+export async function getBzzPriceAsDai(desktopUrl: string): Promise<Token> {
+  const response = await axios.get(`${desktopUrl}/price`)

  return DaiToken.fromDecimal(response.data, 18)
 }

-export async function upgradeToLightNode(rpcProvider: string): Promise<void> {
-  await updateDesktopConfiguration({
+export async function upgradeToLightNode(desktopUrl: string, rpcProvider: string): Promise<void> {
+  await updateDesktopConfiguration(desktopUrl, {
    'chain-enable': true,
    'swap-enable': true,
    'swap-endpoint': rpcProvider,
  })
 }

-export async function setJsonRpcInDesktop(value: string): Promise<void> {
-  await updateDesktopConfiguration({
+export async function setJsonRpcInDesktop(desktopUrl: string, value: string): Promise<void> {
+  await updateDesktopConfiguration(desktopUrl, {
    'swap-endpoint': value,
  })
 }

-async function updateDesktopConfiguration(values: Record<string, unknown>): Promise<void> {
-  await postJson(`${getDesktopHost()}/config`, values)
+async function updateDesktopConfiguration(desktopUrl: string, values: Record<string, unknown>): Promise<void> {
+  await postJson(`${desktopUrl}/config`, values)
 }

-export async function restartBeeNode(): Promise<void> {
-  await postJson(`${getDesktopHost()}/restart`)
+export async function restartBeeNode(desktopUrl: string): Promise<void> {
+  await postJson(`${desktopUrl}/restart`)
 }

-export async function createGiftWallet(address: string): Promise<void> {
-  await postJson(`${getDesktopHost()}/gift-wallet/${address}`)
+export async function createGiftWallet(desktopUrl: string, address: string): Promise<void> {
+  await postJson(`${desktopUrl}/gift-wallet/${address}`)
 }

-export async function performSwap(daiAmount: string): Promise<void> {
-  await postJson(`${getDesktopHost()}/swap`, { dai: daiAmount })
-}
-
-export async function getBeeDesktopLogs(): Promise<string> {
-  const response = await sendRequest(`${getDesktopHost()}/logs/bee-desktop`, 'GET')
-
-  return response as unknown as string
-}
-
-export async function getBeeLogs(): Promise<string> {
-  const response = await sendRequest(`${getDesktopHost()}/logs/bee`, 'GET')
-
-  return response as unknown as string
+export async function performSwap(desktopUrl: string, daiAmount: string): Promise<void> {
+  await postJson(`${desktopUrl}/swap`, { dai: daiAmount })
 }

 export async function getLatestBeeDesktopVersion(): Promise<string> {
-  const response = await (await fetch('https://api.github.com/repos/ethersphere/bee-desktop/releases/latest')).json()
+  const response = await (await fetch(BEE_DESKTOP_LATEST_RELEASE_PAGE_API)).json()

  return response.tag_name.replace('v', '') // We get for example "v0.12.1"
 }
-
-function getDesktopHost(): string {
-  if (process.env.REACT_APP_BEE_DESKTOP_URL) {
-    return process.env.REACT_APP_BEE_DESKTOP_URL
-  }
-
-  return `http://${window.location.host}`
-}