@lifi/widget 4.0.0-beta.9 → 4.1.0

package/src/hooks/useAvailableChains.ts

@@ -18,12 +18,17 @@ const supportedChainTypes = [
   ChainType.SVM,
   ChainType.UTXO,
   ChainType.MVM,
+  ChainType.TVM,
 ]
 
 export const useAvailableChains = (
   chainTypes?: ChainType[],
   widgetConfig?: WidgetConfig
-) => {
+): {
+  chains: ExtendedChain[] | undefined
+  getChainById: GetChainById
+  isLoading: boolean
+} => {
   const { chains: internalChains, keyPrefix: internalKeyPrefix } =
     useWidgetConfig()
   const internalClient = useSDKClient()

package/src/hooks/useChain.ts

@@ -1,7 +1,17 @@
+import type { ExtendedChain } from '@lifi/sdk'
 import { useMemo } from 'react'
 import { useAvailableChains } from './useAvailableChains.js'
 
-export const useChain = (chainId?: number) => {
+export const useChain = (
+  chainId?: number
+): {
+  chain: ExtendedChain | undefined
+  isLoading: boolean
+  getChainById: (
+    chainId?: number,
+    chains?: ExtendedChain[]
+  ) => ExtendedChain | undefined
+} => {
   const { isLoading, getChainById } = useAvailableChains()
 
   const chain = useMemo(() => getChainById(chainId), [chainId, getChainById])

package/src/hooks/useChainSearch.ts

@@ -0,0 +1,70 @@
+import type { ExtendedChain } from '@lifi/sdk'
+import { debounce } from '@mui/material'
+import type { RefObject } from 'react'
+import { useCallback, useMemo, useState } from 'react'
+import { useChainSelect } from '../components/ChainSelect/useChainSelect.js'
+import { FormKeyHelper, type FormType } from '../stores/form/types.js'
+import { useFieldValues } from '../stores/form/useFieldValues.js'
+
+export function useChainSearch(
+  formType: FormType,
+  listRef: RefObject<HTMLDivElement | null>,
+  inputRef: RefObject<HTMLInputElement | null>
+): {
+  filteredChains: ExtendedChain[]
+  isLoading: boolean
+  selectedChainId: number | undefined
+  onSelectChainFallback: (chain: ExtendedChain) => void
+  onChange: () => void
+  onClear: () => void
+} {
+  const { chains, isLoading, setCurrentChain } = useChainSelect(formType)
+  const [selectedChainId] = useFieldValues(FormKeyHelper.getChainKey(formType))
+  const [debouncedSearchValue, setDebouncedSearchValue] = useState('')
+
+  const filteredChains = useMemo(() => {
+    const value = debouncedSearchValue.toLowerCase()
+    return value
+      ? (chains?.filter((chain) => chain.name.toLowerCase().includes(value)) ??
+          [])
+      : (chains ?? [])
+  }, [chains, debouncedSearchValue])
+
+  const debouncedFilterChains = useMemo(
+    () =>
+      debounce((value: string) => {
+        setDebouncedSearchValue(value)
+        listRef.current?.scrollTo(0, 0)
+      }, 250),
+    [listRef]
+  )
+
+  const onSelectChainFallback = useCallback(
+    (chain: ExtendedChain) => {
+      setCurrentChain(chain.id)
+    },
+    [setCurrentChain]
+  )
+
+  const onChange = useCallback(() => {
+    const value = inputRef.current?.value || ''
+    debouncedFilterChains(value)
+  }, [debouncedFilterChains, inputRef])
+
+  const onClear = useCallback(() => {
+    if (inputRef.current) {
+      inputRef.current.value = ''
+    }
+    setDebouncedSearchValue('')
+    listRef.current?.scrollTo(0, 0)
+  }, [inputRef, listRef])
+
+  return {
+    filteredChains,
+    isLoading,
+    selectedChainId,
+    onSelectChainFallback,
+    onChange,
+    onClear,
+  }
+}

package/src/hooks/useChains.ts

@@ -1,11 +1,21 @@
-import type { ChainType } from '@lifi/sdk'
+import type { ChainType, ExtendedChain } from '@lifi/sdk'
 import { useMemo } from 'react'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import type { FormType } from '../stores/form/types.js'
 import { getConfigItemSets, isFormItemAllowed } from '../utils/item.js'
 import { useAvailableChains } from './useAvailableChains.js'
 
-export const useChains = (type?: FormType, chainTypes?: ChainType[]) => {
+export const useChains = (
+  type?: FormType,
+  chainTypes?: ChainType[]
+): {
+  chains: ExtendedChain[] | undefined
+  getChainById: (
+    chainId?: number,
+    chains?: ExtendedChain[]
+  ) => ExtendedChain | undefined
+  isLoading: boolean
+} => {
   const { chains } = useWidgetConfig()
   const {
     chains: availableChains,

package/src/hooks/useContactSupport.ts

@@ -0,0 +1,16 @@
+import { WidgetEvent } from '../types/events.js'
+import { useWidgetEvents } from './useWidgetEvents.js'
+
+export const useContactSupport = (supportId?: string): (() => void) => {
+  const widgetEvents = useWidgetEvents()
+
+  const handleContactSupport = () => {
+    if (widgetEvents.listenerCount(WidgetEvent.ContactSupport) === 0) {
+      window.open('https://help.li.fi', '_blank', 'nofollow noreferrer')
+    } else {
+      widgetEvents.emit(WidgetEvent.ContactSupport, { supportId })
+    }
+  }
+
+  return handleContactSupport
+}

package/src/hooks/useDebouncedWatch.ts

@@ -1,11 +1,11 @@
 import { useEffect, useRef, useState } from 'react'
-import type { FormFieldNames } from '../stores/form/types.js'
+import type { FormFieldArray, FormFieldNames } from '../stores/form/types.js'
 import { useFieldValues } from '../stores/form/useFieldValues.js'
 
 export const useDebouncedWatch = <T extends FormFieldNames[]>(
   delay: number,
   ...name: T
-) => {
+): FormFieldArray<T> => {
   const watchedValue = useFieldValues(...name)
   const [debouncedValue, setDebouncedValue] = useState(watchedValue)
   const debouncedValueRef = useRef<typeof watchedValue>(null)

package/src/hooks/useDefaultElementId.ts

@@ -1,6 +1,6 @@
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 
-export const useDefaultElementId = () => {
+export const useDefaultElementId = (): string | undefined => {
   const { elementId } = useWidgetConfig()
   return elementId
 }

package/src/hooks/useExplorer.ts

@@ -1,84 +1,101 @@
 import type { Chain } from '@lifi/sdk'
 import { ChainId, ChainType, isHex } from '@lifi/sdk'
+import { useCallback } from 'react'
 import { internalExplorerUrl } from '../config/constants.js'
 import { useAvailableChains } from '../hooks/useAvailableChains.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 
 const sanitiseBaseUrl = (baseUrl: string) => baseUrl.trim().replace(/\/+$/, '')
 
-type TransactionLinkProps = { chain?: Chain | number } & (
-  | {
-      txHash: string
-      txLink?: never
-    }
-  | {
-      txHash?: never
-      txLink: string
-    }
-)
+const explorerPathOverrides: Partial<
+  Record<ChainType | ChainId, { txPath: string; addressPath: string }>
+> = {
+  [ChainId.SUI]: { txPath: 'txblock', addressPath: 'coin' },
+  [ChainId.LTR]: { txPath: 'logs', addressPath: 'accounts' },
+  [ChainType.TVM]: { txPath: '#/transaction', addressPath: '#/address' },
+}
+
+type TransactionLinkProps = {
+  chain?: Chain | number
+  txHash?: string
+  txLink?: string
+}
 
-export const useExplorer = () => {
+export const useExplorer = (): {
+  getTransactionLink: (props: TransactionLinkProps) => string | undefined
+  getAddressLink: (address: string, chain?: Chain | number) => string
+} => {
   const { explorerUrls } = useWidgetConfig()
   const { getChainById } = useAvailableChains()
 
-  const getExplorerConfig = (chain?: Chain | number) => {
-    const resolvedChain = Number.isFinite(chain)
-      ? getChainById(chain as number)
-      : (chain as Chain)
+  const getExplorerConfig = useCallback(
+    (chain?: Chain | number) => {
+      const resolvedChain = Number.isFinite(chain)
+        ? getChainById(chain as number)
+        : (chain as Chain)
 
-    const explorerUrl =
-      (resolvedChain
-        ? (explorerUrls?.[resolvedChain.id]?.[0] ??
-          resolvedChain.metamask.blockExplorerUrls[0])
-        : explorerUrls?.internal?.[0]) || internalExplorerUrl
+      const explorerUrl =
+        (resolvedChain
+          ? (explorerUrls?.[resolvedChain.id]?.[0] ??
+            resolvedChain.metamask.blockExplorerUrls[0])
+          : explorerUrls?.internal?.[0]) || internalExplorerUrl
 
-    const url = typeof explorerUrl === 'string' ? explorerUrl : explorerUrl.url
+      const baseUrl =
+        typeof explorerUrl === 'string' ? explorerUrl : explorerUrl.url
 
-    const defaultTxPath = resolvedChain?.id === ChainId.SUI ? 'txblock' : 'tx'
-    const defaultAddressPath =
-      resolvedChain?.id === ChainId.SUI ? 'coin' : 'address'
-    const txPath =
-      typeof explorerUrl === 'string'
-        ? defaultTxPath
-        : explorerUrl.txPath || defaultTxPath
-    const addressPath =
-      typeof explorerUrl === 'string'
-        ? defaultAddressPath
-        : explorerUrl.addressPath || defaultAddressPath
+      const overrides =
+        explorerPathOverrides[resolvedChain?.id as ChainId] ??
+        explorerPathOverrides[resolvedChain?.chainType as ChainType]
 
-    return {
-      url: sanitiseBaseUrl(url),
-      txPath,
-      addressPath,
-      resolvedChain,
-    }
-  }
-
-  const getTransactionLink = ({
-    txHash,
-    txLink,
-    chain,
-  }: TransactionLinkProps): string | undefined => {
-    if (!txHash) {
-      return txLink
-    }
+      const defaultTxPath = overrides?.txPath ?? 'tx'
+      const defaultAddressPath = overrides?.addressPath ?? 'address'
+      const txPath =
+        typeof explorerUrl === 'string'
+          ? defaultTxPath
+          : explorerUrl.txPath || defaultTxPath
+      const addressPath =
+        typeof explorerUrl === 'string'
+          ? defaultAddressPath
+          : explorerUrl.addressPath || defaultAddressPath
 
-    const config = getExplorerConfig(chain)
-
-    // For EVM chains, validate the transaction hash as some relayers return custom task hashes that are not visible on-chain
-    if (config.resolvedChain?.chainType === ChainType.EVM) {
-      if (!isHex(txHash, { strict: true })) {
-        return undefined
+      return {
+        url: sanitiseBaseUrl(baseUrl),
+        txPath,
+        addressPath,
+        resolvedChain,
+        hasOverride: Boolean(overrides),
       }
-    }
+    },
+    [explorerUrls, getChainById]
+  )
 
-    return `${config.url}/${config.txPath}/${txHash}`
-  }
+  const getTransactionLink = useCallback(
+    ({ txHash, txLink, chain }: TransactionLinkProps): string | undefined => {
+      if (txHash) {
+        const config = getExplorerConfig(chain)
+        // For EVM chains, sanity-check the transaction hash as some relayers return custom task hashes that are not visible on-chain.
+        // Skip the check when a chain-specific path override is registered — that's an explicit signal the chain's
+        // explorer accepts a non-hex hash (e.g. Lighter, whose hash has no 0x prefix).
+        const validForEvm =
+          config.resolvedChain?.chainType !== ChainType.EVM ||
+          config.hasOverride ||
+          isHex(txHash, { strict: true })
+        if (validForEvm) {
+          return `${config.url}/${config.txPath}/${txHash}`
+        }
+      }
+      return txLink
+    },
+    [getExplorerConfig]
+  )
 
-  const getAddressLink = (address: string, chain?: Chain | number) => {
-    const config = getExplorerConfig(chain)
-    return `${config.url}/${config.addressPath}/${address}`
-  }
+  const getAddressLink = useCallback(
+    (address: string, chain?: Chain | number) => {
+      const config = getExplorerConfig(chain)
+      return `${config.url}/${config.addressPath}/${address}`
+    },
+    [getExplorerConfig]
+  )
 
   return {
     getTransactionLink,

package/src/hooks/useFilteredByTokenBalances.ts

@@ -19,7 +19,10 @@ export const useFilteredTokensByBalance = (
     { chainType: ChainType; tokens: Record<number, TokenExtended[]> }
   >,
   formType?: FormType
-) => {
+): {
+  data: Record<string, Record<number, TokenExtended[]>> | undefined
+  isLoading: boolean
+} => {
   const { tokens: configTokens } = useWidgetConfig()
   const sdkClient = useSDKClient()
 

package/src/hooks/useFromAmountThreshold.ts

@@ -5,7 +5,10 @@ import { useFieldValues } from '../stores/form/useFieldValues.js'
 import { formatTokenPrice } from '../utils/format.js'
 import { useToken } from './useToken.js'
 
-export const useFromAmountThreshold = () => {
+export const useFromAmountThreshold = (): {
+  belowMinFromAmountUSD: boolean
+  minFromAmountUSD: number | undefined
+} => {
   const { minFromAmountUSD } = useWidgetConfig()
 
   const [chainId, tokenAddress, fromAmount] = useFieldValues(

package/src/hooks/useFromTokenSufficiency.ts

@@ -11,7 +11,12 @@ import { getTokenBalancesWithRetry } from './useTokenBalance.js'
 
 const refetchInterval = 30_000
 
-export const useFromTokenSufficiency = (route?: RouteExtended) => {
+export const useFromTokenSufficiency = (
+  route?: RouteExtended
+): {
+  insufficientFromToken: boolean | undefined
+  isLoading: boolean
+} => {
   const [fromChainId, fromTokenAddress, fromAmount] = useFieldValues(
     'fromChain',
     'fromToken',
@@ -56,7 +61,7 @@ export const useFromTokenSufficiency = (route?: RouteExtended) => {
       }
 
       const currentAction = route.steps.filter(
-        (step) => !step.execution || step.execution.status !== 'DONE'
+        (step) => step.execution?.status !== 'DONE'
       )[0]?.action
 
       if (

package/src/hooks/useGasRecommendation.ts

@@ -1,8 +1,8 @@
 import { type ChainId, getGasRecommendation } from '@lifi/sdk'
+import type { UseQueryResult } from '@tanstack/react-query'
 import { useQuery } from '@tanstack/react-query'
 import { useSDKClient } from '../providers/SDKClientProvider.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
-import { HiddenUI } from '../types/widget.js'
 import { getQueryKey } from '../utils/queries.js'
 import { useAvailableChains } from './useAvailableChains.js'
 
@@ -12,7 +12,7 @@ export const useGasRecommendation = (
   toChainId?: ChainId,
   fromChain?: ChainId,
   fromToken?: string
-) => {
+): UseQueryResult<Awaited<ReturnType<typeof getGasRecommendation>> | null> => {
   const { chains } = useAvailableChains()
   const { keyPrefix, hiddenUI } = useWidgetConfig()
   const sdkClient = useSDKClient()
@@ -53,7 +53,7 @@ export const useGasRecommendation = (
     },
     enabled:
       (checkRecommendationLiFuel || checkRecommendationMaxButton) &&
-      !hiddenUI?.includes(HiddenUI.GasRefuelMessage),
+      !hiddenUI?.gasRefuelMessage,
     refetchInterval,
     staleTime: refetchInterval,
   })

package/src/hooks/useGasRefuel.ts

@@ -1,14 +1,20 @@
+import type { ExtendedChain } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { useMemo } from 'react'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { useFieldValues } from '../stores/form/useFieldValues.js'
-import { HiddenUI } from '../types/widget.js'
 import { useAvailableChains } from './useAvailableChains.js'
 import { useGasRecommendation } from './useGasRecommendation.js'
 import { useIsContractAddress } from './useIsContractAddress.js'
 import { useTokenBalance } from './useTokenBalance.js'
 
-export const useGasRefuel = () => {
+export const useGasRefuel = (): {
+  enabled: boolean
+  availble: boolean | undefined
+  isLoading: boolean
+  chain: ExtendedChain | undefined
+  fromAmount: string | undefined
+} => {
   const { getChainById } = useAvailableChains()
   const { hiddenUI } = useWidgetConfig()
   const [fromChainId, fromTokenAddress, toChainId, toAddress] = useFieldValues(
@@ -59,7 +65,7 @@ export const useGasRefuel = () => {
       !destinationNativeToken ||
       !isChainTypeSatisfied ||
       !isToAddressSatisfied ||
-      hiddenUI?.includes(HiddenUI.GasRefuelMessage)
+      hiddenUI?.gasRefuelMessage
     ) {
       return false
     }

package/src/hooks/useGasSufficiency.ts

@@ -5,7 +5,6 @@ import { useQuery } from '@tanstack/react-query'
 import { useMemo } from 'react'
 import { useSDKClient } from '../providers/SDKClientProvider.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
-import { HiddenUI } from '../types/widget.js'
 import { getQueryKey } from '../utils/queries.js'
 import { useAvailableChains } from './useAvailableChains.js'
 import { useIsContractAddress } from './useIsContractAddress.js'
@@ -22,7 +21,12 @@ export interface GasSufficiency {
 
 const refetchInterval = 30_000
 
-export const useGasSufficiency = (route?: RouteExtended) => {
+export const useGasSufficiency = (
+  route?: RouteExtended
+): {
+  insufficientGas: GasSufficiency[] | undefined
+  isLoading: boolean
+} => {
   const { getChainById } = useAvailableChains()
   const { account: EVMAccount, accounts } = useAccount({
     chainType: ChainType.EVM,
@@ -91,7 +95,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
         .some((includedStep) => includedStep.tool === 'gasZip')
 
       const gasCosts = filteredSteps
-        .filter((step) => !step.execution || step.execution.status !== 'DONE')
+        .filter((step) => step.execution?.status !== 'DONE')
         .reduce(
           (groupedGasCosts, step) => {
             // We need to avoid destination chain step sufficiency check if we have LI.Fuel protocol sub-step
@@ -216,7 +220,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
         !isContractAddressLoading &&
         relevantAccounts.length > 0 &&
         route &&
-        !hiddenUI?.includes(HiddenUI.InsufficientGasMessage)
+        !hiddenUI?.insufficientGasMessage
     ),
     refetchInterval,
     staleTime: refetchInterval,

package/src/hooks/useHasChainExpansion.ts

@@ -1,11 +1,14 @@
 import { useLocation } from '@tanstack/react-router'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
-import { ExpansionType, HiddenUI } from '../types/widget.js'
+import { ExpansionType } from '../types/widget.js'
 import { navigationRoutes } from '../utils/navigationRoutes.js'
 import { useSwapOnly } from './useSwapOnly.js'
 
-export const useHasChainExpansion = () => {
-  const { hiddenUI, subvariantOptions } = useWidgetConfig()
+export const useHasChainExpansion = (): readonly [
+  boolean,
+  ExpansionType | null,
+] => {
+  const { hiddenUI } = useWidgetConfig()
   const swapOnly = useSwapOnly()
   const { pathname } = useLocation()
 
@@ -22,8 +25,8 @@ export const useHasChainExpansion = () => {
     (expansionType === ExpansionType.FromChain ||
       expansionType === ExpansionType.ToChain) &&
     !(swapOnly && expansionType === ExpansionType.ToChain) &&
-    !hiddenUI?.includes(HiddenUI.ChainSelect) &&
-    !subvariantOptions?.wide?.disableChainSidebar
+    !hiddenUI?.chainSelect &&
+    !hiddenUI?.chainSidebar
 
   return [withChainExpansion, expansionType] as const
 }

package/src/hooks/useHeader.ts

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react'
 import { useEffect } from 'react'
 import { useHeaderStore } from '../stores/header/useHeaderStore.js'
 
-export function useHeader(title: string, action?: ReactNode) {
+export function useHeader(title: string, action?: ReactNode): void {
   const [setTitle, setAction] = useHeaderStore((state) => [
     state.setTitle,
     state.setAction,

package/src/hooks/useInitializeSDKProviders.ts

@@ -2,7 +2,7 @@ import { useSDKProviders } from '@lifi/widget-provider'
 import { useEffect } from 'react'
 import { useSDKClient } from '../providers/SDKClientProvider.js'
 
-export const useInitializeSDKProviders = () => {
+export const useInitializeSDKProviders = (): void => {
   const sdkProviders = useSDKProviders()
   const sdkClient = useSDKClient()
 

package/src/hooks/useInitializer.ts

@@ -5,7 +5,7 @@ import { useTools } from './useTools.js'
 
 let checkedPackageUpdates = false
 
-export const useInitializer = () => {
+export const useInitializer = (): void => {
   useTools()
   useEffect(() => {
     if (!checkedPackageUpdates && process.env.NODE_ENV === 'development') {

package/src/hooks/useIsBatchingSupported.ts

@@ -9,7 +9,10 @@ import { getQueryKey } from '../utils/queries.js'
 export function useIsBatchingSupported(
   chain?: ExtendedChain,
   address?: string
-) {
+): {
+  isBatchingSupported: boolean | undefined
+  isBatchingSupportedLoading: boolean
+} {
   const { keyPrefix } = useWidgetConfig()
   const sdkClient = useSDKClient()
   const { isBatchingSupported } = useEthereumContext()

package/src/hooks/useLanguages.ts

@@ -11,7 +11,11 @@ import { useSettings } from '../stores/settings/useSettings.js'
 import { useSettingsActions } from '../stores/settings/useSettingsActions.js'
 import { getConfigItemSets, isItemAllowedForSets } from '../utils/item.js'
 
-export const useLanguages = () => {
+export const useLanguages = (): {
+  availableLanguages: LanguageKey[]
+  selectedLanguageCode: LanguageKey | string
+  setLanguageWithCode: (languageCode: LanguageKey) => void
+} => {
   const { i18n } = useTranslation()
   const { languages: languagesConfig, languageResources } = useWidgetConfig()
   const { language } = useSettings(['language'])
@@ -82,7 +86,7 @@ export const useLanguages = () => {
     : languagesConfig?.default || 'en'
 
   return {
-    availableLanguages: sortedLanguages,
+    availableLanguages: sortedLanguages as LanguageKey[],
     selectedLanguageCode: selectedLanguageCode,
     setLanguageWithCode: handleLanguageChange,
   }

package/src/hooks/useListHeight.ts

@@ -61,8 +61,8 @@ const minMobileListHeight = 160
 export const useListHeight = ({
   listParentRef,
   headerRef,
-}: UseContentHeightProps) => {
-  const elementId = useDefaultElementId()
+}: UseContentHeightProps): { listHeight: number } => {
+  const elementId = useDefaultElementId() ?? ''
   const [contentHeight, setContentHeight] = useState<number>(0)
   const theme = useTheme()
 

package/src/hooks/useLongPress.ts

@@ -1,6 +1,15 @@
 import { useCallback, useRef } from 'react'
 
-export const useLongPress = (callback = () => {}, ms = 500) => {
+export const useLongPress = (
+  callback: () => void = () => {},
+  ms: number = 500
+): {
+  onPointerDown: (e: React.PointerEvent) => void
+  onPointerUp: () => void
+  onPointerLeave: () => void
+  onPointerCancel: () => void
+  onPointerMove: (e: React.PointerEvent) => void
+} => {
   const timerRef = useRef<NodeJS.Timeout | null>(null)
   const isPressedRef = useRef(false)
   const startPosRef = useRef<{ x: number; y: number } | null>(null)

package/src/hooks/useNavigateBack.ts

@@ -2,7 +2,7 @@ import { useRouter } from '@tanstack/react-router'
 import { useCallback } from 'react'
 import { navigationRoutes } from '../utils/navigationRoutes.js'
 
-export const useNavigateBack = () => {
+export const useNavigateBack = (): (() => void) => {
   const router = useRouter()
 
   const navigateBack = useCallback(() => {