@lifi/widget 3.26.0 → 3.26.1

package/src/components/Routes/RoutesExpanded.tsx

@@ -1,23 +1,28 @@
 import type { Route } from '@lifi/sdk'
-import { useEffect, useRef } from 'react'
+import { memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { useRoutes } from '../../hooks/useRoutes.js'
-import { ExpansionType } from '../../types/widget.js'
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
+import { WidgetEvent } from '../../types/events.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
 import { ExpansionTransition } from '../Expansion/ExpansionTransition.js'
 import { RoutesContent } from './RoutesContent.js'
 import { routesExpansionWidth } from './RoutesExpanded.style.js'
 
 interface RoutesExpandedProps {
-  expansionType: ExpansionType
+  canOpen: boolean
   setOpenExpansion: (open: boolean) => void
 }
 
-export const RoutesExpanded = ({
-  expansionType,
+export const RoutesExpanded = memo(function RoutesExpanded({
+  canOpen,
   setOpenExpansion,
-}: RoutesExpandedProps) => {
+}: RoutesExpandedProps) {
+  const emitter = useWidgetEvents()
+  const navigate = useNavigate()
   const routesRef = useRef<Route[]>(undefined)
-
   const routesActiveRef = useRef(false)
+
   const {
     routes,
     isLoading,
@@ -45,13 +50,29 @@ export const RoutesExpanded = ({
 
   const expanded =
     Boolean(routesActiveRef.current || isLoading || isFetching || isFetched) &&
-    expansionType === ExpansionType.Routes
+    canOpen
 
-  useEffect(() => {
-    // To update parent's width when expansion changes
+  // biome-ignore lint/correctness/useExhaustiveDependencies: stable navigation callback that won't cause rerenders in RoutesContent
+  const onRouteClick = useCallback(
+    (route: Route) => {
+      setReviewableRoute(route)
+      navigate(navigationRoutes.transactionExecution, {
+        state: { routeId: route.id },
+      })
+      emitter.emit(WidgetEvent.RouteSelected, { route, routes: routes! })
+    },
+    [emitter, routes, setReviewableRoute]
+  )
+
+  // Use layout effect to update parent's width when expansion changes
+  useLayoutEffect(() => {
     setOpenExpansion(expanded)
   }, [expanded, setOpenExpansion])
 
+  useEffect(() => {
+    emitter.emit(WidgetEvent.WidgetExpanded, expanded)
+  }, [emitter, expanded])
+
   return (
     <ExpansionTransition
       in={expanded}
@@ -62,13 +83,12 @@ export const RoutesExpanded = ({
         routes={routesRef.current || []}
         isFetching={isFetching}
         isLoading={isLoading}
-        expanded={expanded}
-        setReviewableRoute={setReviewableRoute}
         dataUpdatedAt={dataUpdatedAt}
         refetchTime={refetchTime}
         fromChain={fromChain}
         refetch={refetch}
+        onRouteClick={onRouteClick}
       />
     </ExpansionTransition>
   )
-}
+})

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.26.0'
+export const version = '3.26.1'

package/src/hooks/useRoutes.ts

@@ -10,6 +10,7 @@ import {
 } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { useCallback, useMemo } from 'react'
 import { parseUnits } from 'viem'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { useFieldValues } from '../stores/form/useFieldValues.js'
@@ -137,32 +138,63 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
     !isBatchingSupportedLoading
 
   // Some values should be strictly typed and isEnabled ensures that
-  const queryKey = [
-    getQueryKey('routes', keyPrefix),
-    account.address,
-    fromChain?.id as number,
-    fromToken?.address as string,
-    fromTokenAmount,
-    toWalletAddress,
-    toChain?.id as number,
-    toToken?.address as string,
-    toTokenAmount,
-    contractCalls,
-    slippage,
-    swapOnly,
-    disabledBridges,
-    disabledExchanges,
-    allowedBridges,
-    allowedExchanges,
-    routePriority,
-    subvariant,
-    allowSwitchChain,
-    enabledRefuel && enabledAutoRefuel,
-    gasRecommendationFromAmount,
-    feeConfig?.fee || fee,
-    !!isBatchingSupported,
-    observableRoute?.id,
-  ] as const
+  const queryKey = useMemo(
+    () =>
+      [
+        getQueryKey('routes', keyPrefix),
+        account.address,
+        fromChain?.id as number,
+        fromToken?.address as string,
+        fromTokenAmount,
+        toWalletAddress,
+        toChain?.id as number,
+        toToken?.address as string,
+        toTokenAmount,
+        contractCalls,
+        slippage,
+        swapOnly,
+        disabledBridges,
+        disabledExchanges,
+        allowedBridges,
+        allowedExchanges,
+        routePriority,
+        subvariant,
+        allowSwitchChain,
+        enabledRefuel && enabledAutoRefuel,
+        gasRecommendationFromAmount,
+        feeConfig?.fee || fee,
+        !!isBatchingSupported,
+        observableRoute?.id,
+      ] as const,
+    [
+      keyPrefix,
+      account.address,
+      fromChain?.id,
+      fromToken?.address,
+      fromTokenAmount,
+      toWalletAddress,
+      toChain?.id,
+      toToken?.address,
+      toTokenAmount,
+      contractCalls,
+      slippage,
+      swapOnly,
+      disabledBridges,
+      disabledExchanges,
+      allowedBridges,
+      allowedExchanges,
+      routePriority,
+      subvariant,
+      allowSwitchChain,
+      enabledRefuel,
+      enabledAutoRefuel,
+      gasRecommendationFromAmount,
+      feeConfig?.fee,
+      fee,
+      isBatchingSupported,
+      observableRoute?.id,
+    ]
+  )
 
   const { getIntermediateRoutes, setIntermediateRoutes } =
     useIntermediateRoutesStore()
@@ -496,13 +528,16 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
       },
     })
 
-  const setReviewableRoute = (route: Route) => {
-    const queryDataKey = queryKey.toSpliced(queryKey.length - 1, 1, route.id)
-    queryClient.setQueryData(queryDataKey, [route], {
-      updatedAt: dataUpdatedAt || Date.now(),
-    })
-    setExecutableRoute(route)
-  }
+  const setReviewableRoute = useCallback(
+    (route: Route) => {
+      const queryDataKey = queryKey.toSpliced(queryKey.length - 1, 1, route.id)
+      queryClient.setQueryData(queryDataKey, [route], {
+        updatedAt: dataUpdatedAt || Date.now(),
+      })
+      setExecutableRoute(route)
+    },
+    [queryClient, dataUpdatedAt, setExecutableRoute, queryKey]
+  )
 
   return {
     routes: data || getIntermediateRoutes(queryKey),