@lifi/widget 3.25.0-beta.5 → 3.26.0

package/src/components/Header/NavigationHeader.tsx

@@ -37,7 +37,16 @@ export const NavigationHeader: React.FC = () => {
     <>
       <HeaderAppBar elevation={0}>
         {backButtonRoutes.includes(path) ? (
-          <BackButton onClick={navigateBack} />
+          <BackButton
+            onClick={() =>
+              navigateBack(
+                // From transaction details page, navigate to home page
+                path === navigationRoutes.transactionDetails
+                  ? navigationRoutes.home
+                  : undefined
+              )
+            }
+          />
         ) : null}
         {splitSubvariant ? (
           <Box

package/src/components/Messages/MinFromAmountUSDMessage.tsx

@@ -0,0 +1,35 @@
+import WarningRounded from '@mui/icons-material/WarningRounded'
+import { type BoxProps, Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { AlertMessage } from './AlertMessage.js'
+
+type MinFromAmountUSDMessageProps = BoxProps & {
+  minFromAmountUSD: number
+}
+
+export const MinFromAmountUSDMessage: React.FC<
+  MinFromAmountUSDMessageProps
+> = ({ minFromAmountUSD, ...props }) => {
+  const { t } = useTranslation()
+  return (
+    <AlertMessage
+      severity="warning"
+      icon={<WarningRounded />}
+      title={
+        <Typography
+          variant="body2"
+          sx={{
+            color: 'text.primary',
+          }}
+        >
+          {t('warning.message.minFromAmountUSD', {
+            amount: minFromAmountUSD,
+            minimumFractionDigits: 0,
+          })}
+        </Typography>
+      }
+      multiline
+      {...props}
+    />
+  )
+}

package/src/components/Messages/WarningMessages.tsx

@@ -5,6 +5,7 @@ import { AccountDeployedMessage } from './AccountDeployedMessage.js'
 import { AccountNotDeployedMessage } from './AccountNotDeployedMessage.js'
 import { FundsSufficiencyMessage } from './FundsSufficiencyMessage.js'
 import { GasSufficiencyMessage } from './GasSufficiencyMessage.js'
+import { MinFromAmountUSDMessage } from './MinFromAmountUSDMessage.js'
 import { MissingRouteRequiredAccountMessage } from './MissingRouteRequiredAccountMessage.js'
 import { ToAddressRequiredMessage } from './ToAddressRequiredMessage.js'
 import { useMessageQueue } from './useMessageQueue.js'
@@ -40,6 +41,13 @@ export const WarningMessages: React.FC<WarningMessagesProps> = ({
             {...props}
           />
         )
+      case 'MIN_FROM_AMOUNT_USD':
+        return (
+          <MinFromAmountUSDMessage
+            minFromAmountUSD={messages[0].props?.minFromAmountUSD}
+            {...props}
+          />
+        )
       case 'ACCOUNT_NOT_DEPLOYED':
         return <AccountNotDeployedMessage {...props} />
       case 'ACCOUNT_DEPLOYED':

package/src/components/Messages/useMessageQueue.ts

@@ -1,5 +1,6 @@
 import type { Route } from '@lifi/sdk'
 import { useMemo } from 'react'
+import { useFromAmountThreshold } from '../../hooks/useFromAmountThreshold.js'
 import { useFromTokenSufficiency } from '../../hooks/useFromTokenSufficiency.js'
 import { useGasSufficiency } from '../../hooks/useGasSufficiency.js'
 import { useRouteRequiredAccountConnection } from '../../hooks/useRouteRequiredAccountConnection.js'
@@ -25,6 +26,7 @@ export const useMessageQueue = (route?: Route, allowInteraction?: boolean) => {
     useGasSufficiency(route)
   const { missingChain, missingAccountAddress } =
     useRouteRequiredAccountConnection(route)
+  const { belowMinFromAmountUSD, minFromAmountUSD } = useFromAmountThreshold()
 
   const messageQueue = useMemo(() => {
     const queue: QueuedMessage[] = []
@@ -44,10 +46,18 @@ export const useMessageQueue = (route?: Route, allowInteraction?: boolean) => {
       })
     }
 
+    if (belowMinFromAmountUSD) {
+      queue.push({
+        id: 'MIN_FROM_AMOUNT_USD',
+        priority: 3,
+        props: { minFromAmountUSD },
+      })
+    }
+
     if (insufficientGas?.length) {
       queue.push({
         id: 'INSUFFICIENT_GAS',
-        priority: 3,
+        priority: 4,
         props: { insufficientGas },
       })
     }
@@ -55,21 +65,21 @@ export const useMessageQueue = (route?: Route, allowInteraction?: boolean) => {
     if (accountNotDeployedAtDestination && !allowInteraction) {
       queue.push({
         id: 'ACCOUNT_NOT_DEPLOYED',
-        priority: 4,
+        priority: 5,
       })
     }
 
     if (requiredToAddress && !toAddress) {
       queue.push({
         id: 'TO_ADDRESS_REQUIRED',
-        priority: 5,
+        priority: 6,
       })
     }
 
     if (accountDeployedAtDestination && !allowInteraction) {
       queue.push({
         id: 'ACCOUNT_DEPLOYED',
-        priority: 6,
+        priority: 7,
       })
     }
 
@@ -84,6 +94,8 @@ export const useMessageQueue = (route?: Route, allowInteraction?: boolean) => {
     toAddress,
     missingChain,
     missingAccountAddress,
+    belowMinFromAmountUSD,
+    minFromAmountUSD,
   ])
 
   return {

package/src/components/Routes/RoutesContent.tsx

@@ -29,6 +29,8 @@ interface RoutesContentProps {
   refetch: () => void
 }
 
+const headerHeight = '64px'
+
 export const RoutesContent = ({
   routes,
   isFetching,
@@ -77,7 +79,7 @@ export const RoutesContent = ({
 
   return (
     <Container enableColorScheme minimumHeight={isLoading}>
-      <Header>
+      <Header sx={{ height: headerHeight }}>
         <Typography
           noWrap
           sx={{
@@ -96,7 +98,9 @@ export const RoutesContent = ({
           sx={{ marginRight: -1 }}
         />
       </Header>
-      <PageContainer>
+      <PageContainer
+        sx={{ height: `calc(100% - ${headerHeight})`, overflow: 'auto' }}
+      >
         <Stack
           direction="column"
           spacing={2}

package/src/components/Routes/RoutesExpanded.style.ts

@@ -12,11 +12,13 @@ export const Container = styled(ScopedCssBaseline, {
   shouldForwardProp: (prop) => !['minimumHeight'].includes(prop as string),
 })<ContainerProps>(({ theme, minimumHeight }) => ({
   backgroundColor: theme.vars.palette.background.default,
-  overflow: 'auto',
+  overflow: 'hidden',
   width: routesExpansionWidth,
   display: 'flex',
   flexDirection: 'column',
   whiteSpace: 'normal',
+  borderRadius: theme.container?.borderRadius ?? 0,
+  boxShadow: theme.container?.boxShadow ?? 'none',
   ...(theme.container?.display !== 'flex'
     ? {
         maxHeight:
@@ -26,7 +28,6 @@ export const Container = styled(ScopedCssBaseline, {
         ...(minimumHeight ? { '&': { height: 'auto' } } : {}),
       }
     : { height: minimumHeight ? 'auto' : '100%' }),
-  ...theme.container,
   ...theme.routesContainer,
 }))
 

package/src/components/SendToWallet/SendToWalletButton.tsx

@@ -36,7 +36,7 @@ export const SendToWalletButton: React.FC<CardProps> = (props) => {
     subvariant,
     subvariantOptions,
   } = useWidgetConfig()
-  const { showSendToWallet } = useSendToWalletStore()
+  const { showSendToWallet } = useSendToWalletStore((state) => state)
   const [toAddressFieldValue, toChainId, toTokenAddress] = useFieldValues(
     'toAddress',
     'toChain',

package/src/components/SendToWallet/SendToWalletExpandButton.tsx

@@ -7,7 +7,10 @@ import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.j
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
-import { useSendToWalletStore } from '../../stores/settings/useSendToWalletStore.js'
+import {
+  sendToWalletStore,
+  useSendToWalletStore,
+} from '../../stores/settings/useSendToWalletStore.js'
 import { WidgetEvent } from '../../types/events.js'
 import { DisabledUI, HiddenUI } from '../../types/widget.js'
 
@@ -17,7 +20,9 @@ export const SendToWalletExpandButton: React.FC = () => {
   const { setFieldValue } = useFieldActions()
   const { setSelectedBookmark } = useBookmarkActions()
   const emitter = useWidgetEvents()
-  const { showSendToWallet, setSendToWallet } = useSendToWalletStore()
+  const { showSendToWallet, setSendToWallet } = useSendToWalletStore(
+    (state) => state
+  )
   const [toAddressFieldValue] = useFieldValues('toAddress')
   const { requiredToAddress } = useToAddressRequirements()
 
@@ -33,7 +38,7 @@ export const SendToWalletExpandButton: React.FC = () => {
     setSendToWallet(!showSendToWallet)
     emitter.emit(
       WidgetEvent.SendToWalletToggled,
-      useSendToWalletStore.getState().showSendToWallet
+      sendToWalletStore.getState().showSendToWallet
     )
   }
 

package/src/components/Step/StepProcess.tsx

@@ -13,17 +13,12 @@ export const StepProcess: React.FC<{
   const { title, message } = useProcessMessage(step, process)
   const { getTransactionLink } = useExplorer()
 
-  const transactionLink = process.txHash
+  const transactionLink = process.txLink
     ? getTransactionLink({
-        txHash: process.txHash,
+        txLink: process.txLink,
         chain: process.chainId,
       })
-    : process.txLink
-      ? getTransactionLink({
-          txLink: process.txLink,
-          chain: process.chainId,
-        })
-      : undefined
+    : undefined
 
   return (
     <Box

package/src/components/TokenList/TokenDetailsSheet.tsx

@@ -29,8 +29,6 @@ export const TokenDetailsSheet = forwardRef<
       },
       close: () => {
         bottomSheetRef.current?.close()
-        setTokenAddress(undefined)
-        setWithoutContractAddress(false)
       },
     }),
     []

package/src/components/TokenList/TokenDetailsSheetContent.tsx

@@ -7,7 +7,6 @@ import { useTranslation } from 'react-i18next'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
 import { useExplorer } from '../../hooks/useExplorer.js'
 import { useTokenSearch } from '../../hooks/useTokenSearch.js'
-import { formatTokenPrice } from '../../utils/format.js'
 import { shortenAddress } from '../../utils/wallet.js'
 import { TokenAvatar } from '../Avatar/TokenAvatar.js'
 import { CardIconButton } from '../Card/CardIconButton.js'
@@ -117,9 +116,9 @@ export const TokenDetailsSheetContent = forwardRef<
             color: 'text.primary',
           }}
         >
-          {token
+          {token?.priceUSD
             ? t('format.currency', {
-                value: formatTokenPrice('1', token.priceUSD, token.decimals),
+                value: token.priceUSD,
               })
             : noDataLabel}
         </Typography>
@@ -169,6 +168,54 @@ export const TokenDetailsSheetContent = forwardRef<
           </Box>
         </MetricWithSkeleton>
       )}
+      <MetricWithSkeleton
+        isLoading={isLoading}
+        label={t('tokenMetric.marketCap')}
+        width={200}
+        height={24}
+      >
+        <Typography
+          sx={{
+            fontWeight: 700,
+            fontSize: '18px',
+            lineHeight: '24px',
+            color: 'text.primary',
+          }}
+        >
+          {token?.marketCapUSD
+            ? t('format.currency', {
+                value: token.marketCapUSD,
+                notation: 'compact',
+                compactDisplay: 'short',
+                maximumFractionDigits: 2,
+              })
+            : noDataLabel}
+        </Typography>
+      </MetricWithSkeleton>
+      <MetricWithSkeleton
+        isLoading={isLoading}
+        label={t('tokenMetric.volume24h')}
+        width={200}
+        height={24}
+      >
+        <Typography
+          sx={{
+            fontWeight: 700,
+            fontSize: '18px',
+            lineHeight: '24px',
+            color: 'text.primary',
+          }}
+        >
+          {token?.volumeUSD24H
+            ? t('format.currency', {
+                value: token.volumeUSD24H,
+                notation: 'compact',
+                compactDisplay: 'short',
+                maximumFractionDigits: 2,
+              })
+            : noDataLabel}
+        </Typography>
+      </MetricWithSkeleton>
     </TokenDetailsSheetContainer>
   )
 })

package/src/components/TokenList/TokenList.tsx

@@ -1,3 +1,4 @@
+import type { BaseToken } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { Box } from '@mui/material'
 import { type FC, useEffect } from 'react'
@@ -6,10 +7,12 @@ import { useDebouncedWatch } from '../../hooks/useDebouncedWatch.js'
 import { useTokenBalances } from '../../hooks/useTokenBalances.js'
 import { useTokenSearch } from '../../hooks/useTokenSearch.js'
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { FormKeyHelper } from '../../stores/form/types.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
 import { WidgetEvent } from '../../types/events.js'
 import type { TokenAmount } from '../../types/token.js'
+import { getConfigItemSets, isFormItemAllowed } from '../../utils/item.js'
 import { TokenNotFound } from './TokenNotFound.js'
 import type { TokenListProps } from './types.js'
 import { useTokenSelect } from './useTokenSelect.js'
@@ -32,6 +35,8 @@ export const TokenList: FC<TokenListProps> = ({
     'tokenSearchFilter'
   )
 
+  const { tokens: configTokens } = useWidgetConfig()
+
   const { chain: selectedChain, isLoading: isSelectedChainLoading } =
     useChain(selectedChainId)
   const { account } = useAccount({
@@ -45,12 +50,30 @@ export const TokenList: FC<TokenListProps> = ({
     isBalanceLoading,
     featuredTokens,
     popularTokens,
-  } = useTokenBalances(selectedChainId, formType)
+  } = useTokenBalances(selectedChainId)
 
   let filteredTokens = (tokensWithBalance ?? chainTokens ?? []) as TokenAmount[]
   const normalizedSearchFilter = tokenSearchFilter?.replaceAll('$', '')
   const searchFilter = normalizedSearchFilter?.toUpperCase() ?? ''
 
+  const filteredConfigTokens = getConfigItemSets(
+    configTokens,
+    (tokens: BaseToken[]) =>
+      new Set(
+        tokens
+          .filter((t) => t.chainId === selectedChainId)
+          .map((t) => t.address)
+      ),
+    formType
+  )
+
+  // Get the appropriate allow/deny lists based on formType
+  filteredTokens = filteredTokens.filter(
+    (token) =>
+      token.chainId === selectedChainId &&
+      isFormItemAllowed(token, filteredConfigTokens, formType, (t) => t.address)
+  )
+
   filteredTokens = tokenSearchFilter
     ? filteredTokens
         .filter(

package/src/components/TokenList/TokenListItem.tsx

@@ -12,6 +12,7 @@ import {
 import type { MouseEventHandler } from 'react'
 import { memo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useLongPress } from '../../hooks/useLongPress.js'
 import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
 import { shortenAddress } from '../../utils/wallet.js'
 import { ListItemButton } from '../ListItem/ListItemButton.js'
@@ -147,11 +148,16 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
     token.decimals
   )
 
+  const longPressEvents = useLongPress(() =>
+    onShowTokenDetails(token.address, withoutContractAddress)
+  )
+
   return (
     <ListItemButton
       onClick={onClick}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
+      {...longPressEvents}
       dense
       selected={selected}
       sx={{

package/src/components/TokenList/useTokenSelect.ts

@@ -6,7 +6,6 @@ import { useChainOrderStoreContext } from '../../stores/chains/ChainOrderStore.j
 import type { FormType } from '../../stores/form/types.js'
 import { FormKeyHelper } from '../../stores/form/types.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
-import { useFieldController } from '../../stores/form/useFieldController.js'
 import { WidgetEvent } from '../../types/events.js'
 import type { DisabledUI } from '../../types/widget.js'
 
@@ -23,11 +22,10 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
   const chainOrderStore = useChainOrderStoreContext()
 
   const tokenKey = FormKeyHelper.getTokenKey(formType)
-  const { onChange } = useFieldController({ name: tokenKey })
 
   return useCallback(
     (tokenAddress: string, chainId?: number) => {
-      onChange(tokenAddress)
+      setFieldValue(tokenKey, tokenAddress, { isDirty: true, isTouched: true })
       const selectedChainId =
         chainId ?? getFieldValues(FormKeyHelper.getChainKey(formType))[0]
       // Set chain again to trigger URL builder update
@@ -105,10 +103,10 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
       emitter,
       formType,
       getFieldValues,
-      onChange,
       onClick,
       setFieldValue,
       subvariant,
+      tokenKey,
     ]
   )
 }

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.25.0-beta.5'
+export const version = '3.26.0'

package/src/hooks/useFromAmountThreshold.ts

@@ -0,0 +1,35 @@
+import { useMemo } from 'react'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider'
+import { FormKeyHelper } from '../stores/form/types'
+import { useFieldValues } from '../stores/form/useFieldValues'
+import { formatTokenPrice } from '../utils/format'
+import { useToken } from './useToken'
+
+export const useFromAmountThreshold = () => {
+  const { minFromAmountUSD } = useWidgetConfig()
+
+  const [chainId, tokenAddress, fromAmount] = useFieldValues(
+    FormKeyHelper.getChainKey('from'),
+    FormKeyHelper.getTokenKey('from'),
+    FormKeyHelper.getAmountKey('from')
+  )
+  const { token } = useToken(chainId, tokenAddress)
+
+  const belowMinFromAmountUSD = useMemo(() => {
+    const fromAmountUSD = formatTokenPrice(
+      fromAmount,
+      token?.priceUSD,
+      token?.decimals
+    )
+
+    if (!minFromAmountUSD || !fromAmountUSD) {
+      return false
+    }
+    return fromAmountUSD < minFromAmountUSD
+  }, [minFromAmountUSD, fromAmount, token?.priceUSD, token?.decimals])
+
+  return {
+    belowMinFromAmountUSD,
+    minFromAmountUSD,
+  }
+}

package/src/hooks/useGasSufficiency.ts

@@ -57,7 +57,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
       EVMAccount.chainType
     )
 
-  const { data: insufficientGas, isLoading } = useQuery({
+  const { data: insufficientGas, isLoading } = useQuery<GasSufficiency[]>({
     queryKey: [
       getQueryKey('gas-sufficiency-check', keyPrefix),
       relevantAccountsQueryKey,
@@ -66,7 +66,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
     ] as const,
     queryFn: async () => {
       if (!route) {
-        return
+        return []
       }
 
       // Filter out steps that are relayer steps or have primaryType 'Permit' or 'Order'
@@ -80,7 +80,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
 
       // If all steps are filtered out, we don't need to check for gas sufficiency
       if (!filteredSteps.length) {
-        return
+        return []
       }
 
       // We assume that LI.Fuel protocol always refuels the destination chain
@@ -163,7 +163,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
         .flatMap((result) => result.value)
 
       if (!tokenBalances?.length) {
-        return
+        return []
       }
 
       Object.keys(gasCosts).forEach((chainId) => {

package/src/hooks/useLongPress.ts

@@ -0,0 +1,51 @@
+import { useCallback, useRef } from 'react'
+
+export const useLongPress = (callback = () => {}, ms = 500) => {
+  const timerRef = useRef<NodeJS.Timeout | null>(null)
+  const isPressedRef = useRef(false)
+  const startPosRef = useRef<{ x: number; y: number } | null>(null)
+
+  const start = useCallback(
+    (e: React.PointerEvent) => {
+      isPressedRef.current = true
+      startPosRef.current = { x: e.clientX, y: e.clientY }
+      timerRef.current = setTimeout(() => {
+        if (isPressedRef.current) {
+          callback()
+        }
+      }, ms)
+    },
+    [callback, ms]
+  )
+
+  const clear = useCallback(() => {
+    isPressedRef.current = false
+    startPosRef.current = null
+    if (timerRef.current) {
+      clearTimeout(timerRef.current)
+    }
+  }, [])
+
+  // Based on https://github.com/minwork/react/tree/main/packages/use-long-press
+  const move = useCallback(
+    (e: React.PointerEvent) => {
+      if (isPressedRef.current && startPosRef.current) {
+        const dx = Math.abs(e.clientX - startPosRef.current.x)
+        const dy = Math.abs(e.clientY - startPosRef.current.y)
+        const limit = 25
+        if (dx > limit || dy > limit) {
+          clear() // cancel on movement
+        }
+      }
+    },
+    [clear]
+  )
+
+  return {
+    onPointerDown: start,
+    onPointerUp: clear,
+    onPointerLeave: clear,
+    onPointerCancel: clear,
+    onPointerMove: move,
+  }
+}

package/src/hooks/useNavigateBack.ts

@@ -4,23 +4,32 @@ import { useNavigate } from 'react-router-dom'
 export const useNavigateBack = () => {
   const navigate = useNavigate()
 
-  const navigateBack = useCallback(() => {
-    // TODO: find a better router with nested memory routers support
-    // https://github.com/remix-run/react-router/pull/9112
-    // https://github.com/remix-run/react-router/discussions/9601
-    //
-    // if (window.history.length > 2) {
-    navigate(-1)
-    // } else {
-    //   navigate(
-    //     window.location.pathname.substring(
-    //       0,
-    //       window.location.pathname.lastIndexOf('/'),
-    //     ) || '/',
-    //     { replace: true },
-    //   );
-    // }
-  }, [navigate])
+  const navigateBack = useCallback(
+    (toPathname?: string) => {
+      // TODO: find a better router with nested memory routers support
+      // https://github.com/remix-run/react-router/pull/9112
+      // https://github.com/remix-run/react-router/discussions/9601
+      //
+      // if (window.history.length > 2) {
+      // navigate(-1)
+      // } else {
+      //   navigate(
+      //     window.location.pathname.substring(
+      //       0,
+      //       window.location.pathname.lastIndexOf('/'),
+      //     ) || '/',
+      //     { replace: true },
+      //   );
+      // }
+
+      if (toPathname) {
+        navigate(toPathname)
+      } else {
+        navigate(-1)
+      }
+    },
+    [navigate]
+  )
 
   return { navigateBack, navigate }
 }

package/src/hooks/useRouteExecution.ts

@@ -3,7 +3,6 @@ import { executeRoute, resumeRoute, updateRouteExecution } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { useCallback, useEffect, useRef } from 'react'
-import { shallow } from 'zustand/shallow'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import {
   useRouteExecutionStore,
@@ -43,8 +42,7 @@ export const useRouteExecution = ({
     (state) => state.routes[routeId]
   )
   const [updateRoute, restartRoute, deleteRoute] = useRouteExecutionStore(
-    (state) => [state.updateRoute, state.restartRoute, state.deleteRoute],
-    shallow
+    (state) => [state.updateRoute, state.restartRoute, state.deleteRoute]
   )
 
   const updateRouteHook = (updatedRoute: Route) => {