feat: pass isBeeDesktop as Bee Dashboard component property (#510)

* feat: pass isBeeDesktop as Bee Dashboard component property

* chore: remove console log

src/App.tsx

@@ -23,6 +23,7 @@ interface Props {
   beeApiUrl?: string
   beeDebugApiUrl?: string
   lockedApiSettings?: boolean
+  isBeeDesktop?: boolean
 }
 
 if (config.SENTRY_KEY) {
@@ -30,11 +31,16 @@ if (config.SENTRY_KEY) {
   initSentry().catch(e => console.error(e))
 }
 
-const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings }: Props): ReactElement => {
+const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings, isBeeDesktop }: Props): ReactElement => {
   const mainApp = (
     <div className="App">
       <ThemeProvider theme={theme}>
-        <SettingsProvider beeApiUrl={beeApiUrl} beeDebugApiUrl={beeDebugApiUrl} lockedApiSettings={lockedApiSettings}>
+        <SettingsProvider
+          beeApiUrl={beeApiUrl}
+          beeDebugApiUrl={beeDebugApiUrl}
+          lockedApiSettings={lockedApiSettings}
+          isBeeDesktop={isBeeDesktop}
+        >
           <TopUpProvider>
             <BeeProvider>
               <StampsProvider>

src/components/SideBar.tsx

@@ -9,6 +9,7 @@ import HomeIcon from 'remixicon-react/Home3LineIcon'
 import SettingsIcon from 'remixicon-react/Settings2LineIcon'
 import AccountIcon from 'remixicon-react/Wallet3LineIcon'
 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'
@@ -66,7 +67,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 export default function SideBar(): ReactElement {
   const classes = useStyles()
-  const isBeeDesktop = config.BEE_DESKTOP_ENABLED
+  const { isBeeDesktop } = useContext(SettingsContext)
   const { nodeInfo } = useContext(BeeContext)
 
   const navBarItems = [

src/hooks/apiHooks.test.ts

@@ -41,9 +41,7 @@ afterAll(async () => {
 
 describe('useIsBeeDesktop', () => {
   it('should not have error when connected to bee-desktop', async () => {
-    const { result, waitFor } = renderHook(() =>
-      useIsBeeDesktop({ BEE_DESKTOP_URL: serverCorrectURL, BEE_DESKTOP_ENABLED: true }),
-    )
+    const { result, waitFor } = renderHook(() => useIsBeeDesktop(true, { BEE_DESKTOP_URL: serverCorrectURL }))
 
     await waitFor(() => {
       expect(result.current.isLoading).toBe(false)

src/hooks/apiHooks.tsx

@@ -23,7 +23,6 @@ export interface NewDesktopVersionHook {
 
 interface Config {
   BEE_DESKTOP_URL: string
-  BEE_DESKTOP_ENABLED: boolean
 }
 
 /**
@@ -31,12 +30,11 @@ interface Config {
  *
  * @returns isBeeDesktop true if this is run within bee-desktop
  */
-export const useIsBeeDesktop = (conf: Config = config): IsBeeDesktopHook => {
+export const useIsBeeDesktop = (isBeeDesktop = false, conf: Config = config): IsBeeDesktopHook => {
   const [desktopAutoUpdateEnabled, setDesktopAutoUpdateEnabled] = useState<boolean>(true)
   const [beeDesktopVersion, setBeeDesktopVersion] = useState<string>('')
   const [isLoading, setLoading] = useState<boolean>(true)
   const [error, setError] = useState<Error | null>(null)
-  const isBeeDesktop = conf.BEE_DESKTOP_ENABLED
 
   useEffect(() => {
     if (!isBeeDesktop) {

src/layout/Dashboard.tsx

@@ -6,6 +6,7 @@ import CloseIcon from 'remixicon-react/CloseCircleLineIcon'
 import ErrorBoundary from '../components/ErrorBoundary'
 import SideBar from '../components/SideBar'
 import { Context as BeeContext } from '../providers/Bee'
+import { Context as SettingsContext } from '../providers/Settings'
 import config from '../config'
 import * as Sentry from '@sentry/react'
 import ItsBroken from './ItsBroken'
@@ -29,7 +30,7 @@ const Dashboard = (props: Props): ReactElement => {
   const classes = useStyles()
 
   const { isLoading, isLatestBeeVersion, latestBeeRelease, latestBeeVersionUrl } = useContext(BeeContext)
-  const isBeeDesktop = config.BEE_DESKTOP_ENABLED
+  const { isBeeDesktop } = useContext(SettingsContext)
   const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isBeeDesktop)
   const { enqueueSnackbar, closeSnackbar } = useSnackbar()
 

src/pages/account/wallet/AccountWallet.tsx

@@ -11,14 +11,15 @@ import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
 import { Loading } from '../../../components/Loading'
 import { SwarmButton } from '../../../components/SwarmButton'
 import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
-import config from '../../../config'
-import { CheckState, Context } from '../../../providers/Bee'
+import { CheckState, Context as BeeContext } from '../../../providers/Bee'
+import { Context as SettingsContext } from '../../../providers/Settings'
 import { ROUTES } from '../../../routes'
 import { AccountNavigation } from '../AccountNavigation'
 import { Header } from '../Header'
 
 export function AccountWallet(): ReactElement {
-  const { balance, nodeAddresses, nodeInfo, status } = useContext(Context)
+  const { balance, nodeAddresses, nodeInfo, status } = useContext(BeeContext)
+  const { isBeeDesktop } = useContext(SettingsContext)
 
   const navigate = useNavigate()
 
@@ -69,7 +70,7 @@ export function AccountWallet(): ReactElement {
         <SwarmButton onClick={onCheckTransactions} iconType={Link}>
           Check transactions on Blockscout
         </SwarmButton>
-        {config.BEE_DESKTOP_ENABLED && (
+        {isBeeDesktop && (
           <SwarmButton onClick={onInvite} iconType={Gift}>
             Invite to Swarm...
           </SwarmButton>

src/pages/info/index.tsx

@@ -5,6 +5,7 @@ import ExchangeFunds from 'remixicon-react/ExchangeFundsLineIcon'
 import Upload from 'remixicon-react/UploadLineIcon'
 
 import { Context as BeeContext } from '../../providers/Bee'
+import { Context as SettingsContext } from '../../providers/Settings'
 import Card from '../../components/Card'
 import Map from '../../components/Map'
 import ExpandableListItem from '../../components/ExpandableListItem'
@@ -12,7 +13,6 @@ import { useNavigate } from 'react-router'
 import { ROUTES } from '../../routes'
 import { useIsBeeDesktop, useNewBeeDesktopVersion } from '../../hooks/apiHooks'
 import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../../utils/desktop'
-import config from '../../config'
 import NodeInfoCard from './NodeInfoCard'
 import { chainIdToName } from '../../utils/chain'
 
@@ -28,7 +28,7 @@ export default function Status(): ReactElement {
     chequebookBalance,
     wallet,
   } = useContext(BeeContext)
-  const isBeeDesktop = config.BEE_DESKTOP_ENABLED
+  const { isBeeDesktop } = useContext(SettingsContext)
   const { beeDesktopVersion } = useIsBeeDesktop()
   const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isBeeDesktop)
   const navigate = useNavigate()

src/pages/settings/index.tsx

@@ -4,7 +4,6 @@ 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 {
@@ -19,6 +18,7 @@ export default function SettingsPage(): ReactElement {
     ensResolver,
     providerUrl,
     isLoading,
+    isBeeDesktop,
     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 || config.BEE_DESKTOP_ENABLED}
+          locked={lockedApiSettings || isBeeDesktop}
         />
         <ExpandableListItemInput
           label="Bee Debug API"
           value={apiDebugUrl}
           onConfirm={setDebugApiUrl}
-          locked={lockedApiSettings || config.BEE_DESKTOP_ENABLED}
+          locked={lockedApiSettings || isBeeDesktop}
         />
         <ExpandableListItemInput
           label="Blockchain RPC URL"
@@ -65,7 +65,7 @@ export default function SettingsPage(): ReactElement {
           }}
         />
       </ExpandableList>
-      {config.BEE_DESKTOP_ENABLED && (
+      {isBeeDesktop && (
         <ExpandableList label="Desktop Settings" defaultOpen>
           <ExpandableListItemInput label="CORS" value={cors ?? '-'} locked />
           <ExpandableListItemInput label="Data DIR" value={dataDir ?? '-'} locked />

src/pages/top-up/GiftCardFund.tsx

@@ -17,11 +17,10 @@ import { ROUTES } from '../../routes'
 import { sleepMs } from '../../utils'
 import { restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
 import { ResolvedWallet } from '../../utils/wallet'
-import config from '../../config'
 import { BeeModes } from '@ethersphere/bee-js'
 
 export function GiftCardFund(): ReactElement {
-  const isBeeDesktop = config.BEE_DESKTOP_ENABLED
+  const { isBeeDesktop } = useContext(SettingsContext)
   const { nodeAddresses, balance, nodeInfo } = useContext(BeeContext)
   const { provider, providerUrl } = useContext(SettingsContext)
 

src/pages/top-up/Swap.tsx

@@ -22,7 +22,6 @@ import { ROUTES } from '../../routes'
 import { sleepMs } from '../../utils'
 import { getBzzPriceAsDai, performSwap, restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
 import { TopUpProgressIndicator } from './TopUpProgressIndicator'
-import config from '../../config'
 
 const MINIMUM_XDAI = '0.1'
 const MINIMUM_XBZZ = '0.1'
@@ -39,7 +38,7 @@ export function Swap({ header }: Props): ReactElement {
 
   const { providerUrl } = useContext(SettingsContext)
   const { balance, nodeAddresses, nodeInfo } = useContext(BeeContext)
-  const isBeeDesktop = config.BEE_DESKTOP_ENABLED
+  const { isBeeDesktop } = useContext(SettingsContext)
 
   const navigate = useNavigate()
   const { enqueueSnackbar } = useSnackbar()

src/pages/top-up/index.tsx

@@ -12,7 +12,6 @@ import { SwarmButton } from '../../components/SwarmButton'
 import { ROUTES } from '../../routes'
 import { CheckState, Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
-import config from '../../config'
 import { BeeModes } from '@ethersphere/bee-js'
 import { restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
 import { Loading } from '../../components/Loading'
@@ -39,7 +38,7 @@ const MINIMUM_XBZZ = '0.1'
 export default function TopUp(): ReactElement {
   const navigate = useNavigate()
   const styles = useStyles()
-  const isBeeDesktop = config.BEE_DESKTOP_ENABLED
+  const { isBeeDesktop } = useContext(SettingsContext)
   const { balance, nodeInfo, status } = useContext(BeeContext)
   const { providerUrl } = useContext(SettingsContext)
   const [loading, setLoading] = useState(false)

src/providers/Settings.tsx

@@ -1,6 +1,6 @@
 import { Bee, BeeDebug } from '@ethersphere/bee-js'
 import { providers } from 'ethers'
-import { createContext, ReactChild, ReactElement, useEffect, useState } from 'react'
+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'
@@ -26,6 +26,7 @@ interface ContextInterface {
   setApiUrl: (url: string) => void
   setDebugApiUrl: (url: string) => void
   setAndPersistJsonRpcProvider: (url: string) => Promise<void>
+  isBeeDesktop: boolean
   isLoading: boolean
   error: Error | null
 }
@@ -45,6 +46,7 @@ const initialValues: ContextInterface = {
   cors: null,
   dataDir: null,
   ensResolver: null,
+  isBeeDesktop: false,
   isLoading: true,
   error: null,
 }
@@ -53,10 +55,11 @@ export const Context = createContext<ContextInterface>(initialValues)
 export const Consumer = Context.Consumer
 
 interface Props {
-  children: ReactChild
+  children: ReactNode
   beeApiUrl?: string
   beeDebugApiUrl?: string
   lockedApiSettings?: boolean
+  isBeeDesktop?: boolean
 }
 
 export function Provider({
@@ -64,6 +67,7 @@ export function Provider({
   beeApiUrl,
   beeDebugApiUrl,
   lockedApiSettings: extLockedApiSettings,
+  isBeeDesktop: extIsBeeDesktop,
 }: Props): ReactElement {
   const [apiUrl, setApiUrl] = useState<string>(initialValues.apiUrl)
   const [apiDebugUrl, setDebugApiUrl] = useState<string>(initialValues.apiDebugUrl)
@@ -74,13 +78,15 @@ export function Provider({
   const [provider, setProvider] = useState(initialValues.provider)
   const { config, isLoading, error } = useGetBeeConfig()
 
+  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 (appConfig.BEE_DESKTOP_ENABLED) {
+      if (isBeeDesktop) {
         await setJsonRpcInDesktop(providerUrl)
         await restartBeeNode()
       }
@@ -146,6 +152,7 @@ export function Provider({
         dataDir: config?.['data-dir'] ?? null,
         ensResolver: config?.['resolver-options'] ?? null,
         setAndPersistJsonRpcProvider,
+        isBeeDesktop,
         isLoading,
         error,
       }}

src/routes.tsx

@@ -1,4 +1,4 @@
-import type { ReactElement } from 'react'
+import { ReactElement, useContext } from 'react'
 import { Route, Routes } from 'react-router-dom'
 import { AccountChequebook } from './pages/account/chequebook/AccountChequebook'
 import { AccountFeeds } from './pages/account/feeds/AccountFeeds'
@@ -23,7 +23,7 @@ import { CryptoTopUpIndex } from './pages/top-up/CryptoTopUpIndex'
 import { GiftCardFund } from './pages/top-up/GiftCardFund'
 import { GiftCardTopUpIndex } from './pages/top-up/GiftCardTopUpIndex'
 import { Swap } from './pages/top-up/Swap'
-import config from './config'
+import { Context as SettingsContext } from './providers/Settings'
 
 export enum ROUTES {
   INFO = '/',
@@ -60,33 +60,37 @@ export const ACCOUNT_TABS = [
   ROUTES.ACCOUNT_FEEDS,
 ]
 
-const BaseRouter = (): ReactElement => (
-  <Routes>
-    <Route path={ROUTES.UPLOAD_IN_PROGRESS} element={<Upload />} />
-    <Route path={ROUTES.UPLOAD} element={<UploadLander />} />
-    <Route path={ROUTES.DOWNLOAD} element={<Download />} />
-    <Route path={ROUTES.HASH} element={<Share />} />
-    <Route path={ROUTES.SETTINGS} element={<Settings />} />
-    <Route path={ROUTES.STATUS} element={<Status />} />
-    <Route path={ROUTES.INFO} element={<Info />} />
-    <Route path={ROUTES.TOP_UP} element={<TopUp />} />
-    <Route path={ROUTES.TOP_UP_CRYPTO} element={<CryptoTopUpIndex />} />
-    <Route path={ROUTES.TOP_UP_CRYPTO_SWAP} element={<Swap header="Top-up with cryptocurrencies" />} />
-    <Route path={ROUTES.TOP_UP_BANK_CARD} element={<BankCardTopUpIndex />} />
-    <Route path={ROUTES.TOP_UP_BANK_CARD_SWAP} element={<Swap header="Top-up with bank card" />} />
-    <Route path={ROUTES.TOP_UP_GIFT_CODE} element={<GiftCardTopUpIndex />} />
-    <Route path={ROUTES.TOP_UP_GIFT_CODE_FUND} element={<GiftCardFund />} />
-    <Route path={ROUTES.RESTART_LIGHT} element={<LightModeRestart />} />
-    <Route path={ROUTES.ACCOUNT_WALLET} element={<AccountWallet />} />
-    <Route path={ROUTES.ACCOUNT_CHEQUEBOOK} element={<AccountChequebook />} />
-    <Route path={ROUTES.ACCOUNT_STAMPS} element={<AccountStamps />} />
-    <Route path={ROUTES.ACCOUNT_STAMPS_NEW} element={<CreatePostageStampPage />} />
-    <Route path={ROUTES.ACCOUNT_FEEDS} element={<AccountFeeds />} />
-    <Route path={ROUTES.ACCOUNT_FEEDS_NEW} element={<CreateNewFeed />} />
-    <Route path={ROUTES.ACCOUNT_FEEDS_UPDATE} element={<UpdateFeed />} />
-    <Route path={ROUTES.ACCOUNT_FEEDS_VIEW} element={<FeedSubpage />} />
-    {config.BEE_DESKTOP_ENABLED && <Route path={ROUTES.ACCOUNT_INVITATIONS} element={<GiftCards />} />}
-  </Routes>
-)
+const BaseRouter = (): ReactElement => {
+  const { isBeeDesktop } = useContext(SettingsContext)
+
+  return (
+    <Routes>
+      <Route path={ROUTES.UPLOAD_IN_PROGRESS} element={<Upload />} />
+      <Route path={ROUTES.UPLOAD} element={<UploadLander />} />
+      <Route path={ROUTES.DOWNLOAD} element={<Download />} />
+      <Route path={ROUTES.HASH} element={<Share />} />
+      <Route path={ROUTES.SETTINGS} element={<Settings />} />
+      <Route path={ROUTES.STATUS} element={<Status />} />
+      <Route path={ROUTES.INFO} element={<Info />} />
+      <Route path={ROUTES.TOP_UP} element={<TopUp />} />
+      <Route path={ROUTES.TOP_UP_CRYPTO} element={<CryptoTopUpIndex />} />
+      <Route path={ROUTES.TOP_UP_CRYPTO_SWAP} element={<Swap header="Top-up with cryptocurrencies" />} />
+      <Route path={ROUTES.TOP_UP_BANK_CARD} element={<BankCardTopUpIndex />} />
+      <Route path={ROUTES.TOP_UP_BANK_CARD_SWAP} element={<Swap header="Top-up with bank card" />} />
+      <Route path={ROUTES.TOP_UP_GIFT_CODE} element={<GiftCardTopUpIndex />} />
+      <Route path={ROUTES.TOP_UP_GIFT_CODE_FUND} element={<GiftCardFund />} />
+      <Route path={ROUTES.RESTART_LIGHT} element={<LightModeRestart />} />
+      <Route path={ROUTES.ACCOUNT_WALLET} element={<AccountWallet />} />
+      <Route path={ROUTES.ACCOUNT_CHEQUEBOOK} element={<AccountChequebook />} />
+      <Route path={ROUTES.ACCOUNT_STAMPS} element={<AccountStamps />} />
+      <Route path={ROUTES.ACCOUNT_STAMPS_NEW} element={<CreatePostageStampPage />} />
+      <Route path={ROUTES.ACCOUNT_FEEDS} element={<AccountFeeds />} />
+      <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 />} />}
+    </Routes>
+  )
+}
 
 export default BaseRouter