feat: check whether the app runs within bee-desktop is now an environment variable (#490)

* feat: check whether the app runs within bee-desktop is now an environment variable

* chore: remove console.log

src/components/SideBar.tsx

@@ -12,7 +12,6 @@ import { Context as BeeContext } from '../providers/Bee'
 import DashboardLogo from '../assets/dashboard-logo.svg'
 import DesktopLogo from '../assets/desktop-logo.svg'
 import { config } from '../config'
-import { useIsBeeDesktop } from '../hooks/apiHooks'
 import { ROUTES } from '../routes'
 import Feedback from './Feedback'
 import SideBarItem from './SideBarItem'
@@ -67,7 +66,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 export default function SideBar(): ReactElement {
   const classes = useStyles()
-  const { isBeeDesktop } = useIsBeeDesktop()
+  const isBeeDesktop = config.BEE_DESKTOP_ENABLED
   const { nodeInfo } = useContext(BeeContext)
 
   const navBarItems = [

src/config.ts

@@ -5,6 +5,7 @@ class Config {
   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 SENTRY_KEY: string | undefined
   public readonly SENTRY_ENVIRONMENT: string | undefined
@@ -21,6 +22,7 @@ class Config {
     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'
   }

src/hooks/apiHooks.test.ts

@@ -10,7 +10,7 @@ interface AddressInfo {
   port: number
 }
 
-export function mockServer(data: Record<string | number | symbol, string>): Promise<Server> {
+export function mockServer(data: Record<string | number | symbol, string | boolean>): Promise<Server> {
   const app = express()
   app.use(cors())
 
@@ -26,48 +26,30 @@ export function mockServer(data: Record<string | number | symbol, string>): Prom
 }
 
 let serverCorrect: Server
-let serverWrong: Server
 
 let serverCorrectURL: string
-let serverWrongURL: string
 
 beforeAll(async () => {
-  serverCorrect = await mockServer({ name: 'bee-desktop' })
+  serverCorrect = await mockServer({ autoUpdateEnabled: true, version: '0.1.0' })
   const portServerCorrect = (serverCorrect.address() as AddressInfo).port
   serverCorrectURL = `http://localhost:${portServerCorrect}`
-
-  serverWrong = await mockServer({ foo: 'bar' })
-  const portServerWrong = (serverWrong.address() as AddressInfo).port
-  serverWrongURL = `http://localhost:${portServerWrong}`
 })
 
 afterAll(async () => {
   await new Promise(resolve => serverCorrect.close(resolve))
-  await new Promise(resolve => serverWrong.close(resolve))
 })
 
 describe('useIsBeeDesktop', () => {
-  it('should fail when connected to wrong server', async () => {
-    const { result, waitFor } = renderHook(() => useIsBeeDesktop({ BEE_DESKTOP_URL: serverWrongURL }))
-
-    expect(result.current.isLoading).toBe(true)
-    expect(result.current.isBeeDesktop).toBe(false)
+  it('should not have error when connected to bee-desktop', async () => {
+    const { result, waitFor } = renderHook(() =>
+      useIsBeeDesktop({ BEE_DESKTOP_URL: serverCorrectURL, BEE_DESKTOP_ENABLED: true }),
+    )
 
     await waitFor(() => {
       expect(result.current.isLoading).toBe(false)
     })
-    expect(result.current.isBeeDesktop).toBe(false)
-  })
-
-  it('should return isBeeDesktop true when connected to bee-desktop', async () => {
-    const { result, waitFor } = renderHook(() => useIsBeeDesktop({ BEE_DESKTOP_URL: serverCorrectURL }))
-
-    expect(result.current.isLoading).toBe(true)
-    expect(result.current.isBeeDesktop).toBe(false)
-
-    await waitFor(() => {
-      expect(result.current.isLoading).toBe(false)
-    })
-    expect(result.current.isBeeDesktop).toBe(true)
+    expect(result.current.desktopAutoUpdateEnabled).toBe(true)
+    expect(result.current.beeDesktopVersion).toBe('0.1.0')
+    expect(result.current.error).toBe(null)
   })
 })

src/hooks/apiHooks.tsx

@@ -11,7 +11,7 @@ export interface LatestBeeReleaseHook {
 }
 
 export interface IsBeeDesktopHook {
-  isBeeDesktop: boolean
+  error: Error | null
   isLoading: boolean
   beeDesktopVersion: string
   desktopAutoUpdateEnabled: boolean
@@ -23,6 +23,7 @@ export interface NewDesktopVersionHook {
 
 interface Config {
   BEE_DESKTOP_URL: string
+  BEE_DESKTOP_ENABLED: boolean
 }
 
 /**
@@ -31,30 +32,34 @@ interface Config {
  * @returns isBeeDesktop true if this is run within bee-desktop
  */
 export const useIsBeeDesktop = (conf: Config = config): IsBeeDesktopHook => {
-  const [isBeeDesktop, setIsBeeDesktop] = useState<boolean>(false)
   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(() => {
-    axios
-      .get(`${conf.BEE_DESKTOP_URL}/info`)
-      .then(res => {
-        if (res.data?.name === 'bee-desktop') {
-          setIsBeeDesktop(true)
+    if (!isBeeDesktop) {
+      setLoading(false)
+      setError(null)
+    } else {
+      axios
+        .get(`${conf.BEE_DESKTOP_URL}/info`)
+        .then(res => {
           setBeeDesktopVersion(res.data?.version)
           setDesktopAutoUpdateEnabled(res.data?.autoUpdateEnabled)
-        } else setIsBeeDesktop(false)
-      })
-      .catch(() => {
-        setIsBeeDesktop(false)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [conf])
+          setError(null)
+        })
+        .catch(e => {
+          setError(e)
+        })
+        .finally(() => {
+          setLoading(false)
+        })
+    }
+  }, [conf, isBeeDesktop])
 
-  return { isBeeDesktop, isLoading, beeDesktopVersion, desktopAutoUpdateEnabled }
+  return { error, isLoading, beeDesktopVersion, desktopAutoUpdateEnabled }
 }
 
 async function checkNewVersion(conf: Config): Promise<string> {

src/layout/Dashboard.tsx

@@ -9,7 +9,7 @@ import { Context } from '../providers/Bee'
 import config from '../config'
 import * as Sentry from '@sentry/react'
 import ItsBroken from './ItsBroken'
-import { useIsBeeDesktop, useNewBeeDesktopVersion } from '../hooks/apiHooks'
+import { useNewBeeDesktopVersion } from '../hooks/apiHooks'
 import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../utils/desktop'
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -29,7 +29,7 @@ const Dashboard = (props: Props): ReactElement => {
   const classes = useStyles()
 
   const { isLoading } = useContext(Context)
-  const { isBeeDesktop } = useIsBeeDesktop()
+  const isBeeDesktop = config.BEE_DESKTOP_ENABLED
   const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isBeeDesktop)
   const { enqueueSnackbar, closeSnackbar } = useSnackbar()
 

src/pages/info/index.tsx

@@ -12,6 +12,7 @@ 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'
 
 export default function Status(): ReactElement {
@@ -25,7 +26,8 @@ export default function Status(): ReactElement {
     balance,
     chequebookBalance,
   } = useContext(BeeContext)
-  const { isBeeDesktop, beeDesktopVersion } = useIsBeeDesktop()
+  const isBeeDesktop = config.BEE_DESKTOP_ENABLED
+  const { beeDesktopVersion } = useIsBeeDesktop()
   const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isBeeDesktop)
   const navigate = useNavigate()
 

src/pages/top-up/GiftCardFund.tsx

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

src/pages/top-up/Swap.tsx

@@ -14,7 +14,6 @@ import { Loading } from '../../components/Loading'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmDivider } from '../../components/SwarmDivider'
 import { SwarmTextInput } from '../../components/SwarmTextInput'
-import { useIsBeeDesktop } from '../../hooks/apiHooks'
 import { BzzToken } from '../../models/BzzToken'
 import { DaiToken } from '../../models/DaiToken'
 import { Context as BeeContext } from '../../providers/Bee'
@@ -23,6 +22,7 @@ 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 +39,7 @@ export function Swap({ header }: Props): ReactElement {
 
   const { providerUrl } = useContext(TopUpContext)
   const { balance, nodeAddresses, nodeInfo } = useContext(BeeContext)
-  const { isBeeDesktop } = useIsBeeDesktop()
+  const isBeeDesktop = config.BEE_DESKTOP_ENABLED
 
   const navigate = useNavigate()
   const { enqueueSnackbar } = useSnackbar()

src/pages/top-up/index.tsx

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