feat: sync and update with all changes from fork (#720)

* feat: sync and update with all changes from fork
* refactor: extract clipboard copy logic into custom hook
* fix: correct spelling of DEFAULT_REFRESH_FREQUENCY_MS in Stamps and WalletBalance providers
* refactor(ui-tests): replace fixed sleeps with condition-based waits
* fix: handle null values for size and granteeCount in infoGroups
* fix(lint): add newline at end of file in useClipboardCopy hook
* fix(ui-tests): page.goto URL
* refactor: update import paths for useClipboardCopy

---------

Co-authored-by: Ferenc Sárai <sarai.ferenc@gmail.com>

src/hooks/accounting.ts

@@ -1,5 +1,6 @@
 import { AllSettlements, Bee, BZZ, LastCashoutActionResponse, PeerBalance, Settlements } from '@ethersphere/bee-js'
 import { useEffect, useState } from 'react'
+
 import { makeRetriablePromise, unwrapPromiseSettlements } from '../utils'
 
 interface UseAccountingHook {

src/hooks/apiHooks.test.ts

@@ -1,53 +0,0 @@
-import { renderHook } from '@testing-library/react-hooks'
-import cors from 'cors'
-import express from 'express'
-import type { Server } from 'http'
-import { useBeeDesktop } from './apiHooks'
-
-interface AddressInfo {
-  address: string
-  family: string
-  port: number
-}
-
-export function mockServer(data: Record<string | number | symbol, string | boolean>): Promise<Server> {
-  const app = express()
-  app.use(cors())
-
-  app.get('/info', (req, res) => {
-    res.send(data)
-  })
-
-  return new Promise(resolve => {
-    const server = app.listen(() => {
-      resolve(server)
-    })
-  })
-}
-
-let serverCorrect: Server
-
-let serverCorrectURL: string
-
-beforeAll(async () => {
-  serverCorrect = await mockServer({ autoUpdateEnabled: true, version: '0.1.0' })
-  const portServerCorrect = (serverCorrect.address() as AddressInfo).port
-  serverCorrectURL = `http://localhost:${portServerCorrect}`
-})
-
-afterAll(async () => {
-  await new Promise(resolve => serverCorrect.close(resolve))
-})
-
-describe('useBeeDesktop', () => {
-  it('should not have error when connected to bee-desktop', async () => {
-    const { result, waitFor } = renderHook(() => useBeeDesktop(true, serverCorrectURL))
-
-    await waitFor(() => {
-      expect(result.current.isLoading).toBe(false)
-    })
-    expect(result.current.desktopAutoUpdateEnabled).toBe(true)
-    expect(result.current.beeDesktopVersion).toBe('0.1.0')
-    expect(result.current.error).toBe(null)
-  })
-})

src/hooks/apiHooks.tsx

@@ -1,5 +1,6 @@
 import axios from 'axios'
 import { useEffect, useState } from 'react'
+
 import { GITHUB_REPO_URL } from '../constants'
 import { BeeConfig, getDesktopConfiguration, getLatestBeeDesktopVersion } from '../utils/desktop'
 
@@ -21,6 +22,8 @@ export interface NewDesktopVersionHook {
   newBeeDesktopVersion: string
 }
 
+const REACHABILITY_CHECK_INTERVAL_MS = 10_000
+
 export const useBeeDesktop = (isBeeDesktop = false, desktopUrl: string): BeeDesktopHook => {
   const [reachable, setReachable] = useState(false)
   const [desktopAutoUpdateEnabled, setDesktopAutoUpdateEnabled] = useState<boolean>(true)
@@ -30,6 +33,9 @@ export const useBeeDesktop = (isBeeDesktop = false, desktopUrl: string): BeeDesk
 
   useEffect(() => {
     if (!isBeeDesktop) {
+      setLoading(false)
+      setError(null)
+
       return
     }
 
@@ -45,32 +51,25 @@ export const useBeeDesktop = (isBeeDesktop = false, desktopUrl: string): BeeDesk
     }
 
     runReachabilityCheck()
-    const interval = setInterval(runReachabilityCheck, 10_000)
+    const interval = setInterval(runReachabilityCheck, REACHABILITY_CHECK_INTERVAL_MS)
+
+    axios
+      .get(`${desktopUrl}/info`)
+      .then(res => {
+        setBeeDesktopVersion(res.data?.version)
+        setDesktopAutoUpdateEnabled(res.data?.autoUpdateEnabled)
+        setError(null)
+      })
+      .catch(e => {
+        setError(e)
+      })
+      .finally(() => {
+        setLoading(false)
+      })
 
     return () => clearInterval(interval)
   }, [desktopUrl, isBeeDesktop])
 
-  useEffect(() => {
-    if (!isBeeDesktop) {
-      setLoading(false)
-      setError(null)
-    } else {
-      axios
-        .get(`${desktopUrl}/info`)
-        .then(res => {
-          setBeeDesktopVersion(res.data?.version)
-          setDesktopAutoUpdateEnabled(res.data?.autoUpdateEnabled)
-          setError(null)
-        })
-        .catch(e => {
-          setError(e)
-        })
-        .finally(() => {
-          setLoading(false)
-        })
-    }
-  }, [desktopUrl, isBeeDesktop])
-
   return { error, isLoading, beeDesktopVersion, desktopAutoUpdateEnabled, reachable }
 }
 

src/hooks/useClipboardCopy.tsx

@@ -0,0 +1,33 @@
+import { IconButton } from '@mui/material'
+import { closeSnackbar, useSnackbar } from 'notistack'
+import { useState } from 'react'
+import CloseLineIcon from 'remixicon-react/CloseLineIcon'
+
+export function useClipboardCopy(value: string) {
+  const { enqueueSnackbar } = useSnackbar()
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(value)
+      setCopied(true)
+    } catch {
+      enqueueSnackbar(`Failed to copy text`, {
+        variant: 'error',
+        action: key => (
+          <IconButton onClick={() => closeSnackbar(key)} size="small" color="inherit">
+            <CloseLineIcon fontSize="small" />
+          </IconButton>
+        ),
+      })
+    }
+  }
+
+  const tooltipCloseHandler = () => setCopied(false)
+
+  return {
+    copied,
+    handleCopy,
+    tooltipCloseHandler,
+  }
+}