@lifi/widget 3.25.0 → 3.26.1

package/src/components/ChainSelect/useChainSelect.ts

@@ -9,13 +9,11 @@ import { useChainOrder } from '../../stores/chains/useChainOrder.js'
 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 type { DisabledUI } from '../../types/widget.js'
 
 export const useChainSelect = (formType: FormType) => {
   const { disabledUI } = useWidgetConfig()
   const chainKey = FormKeyHelper.getChainKey(formType)
-  const { onChange } = useFieldController({ name: chainKey })
   const { setFieldValue, getFieldValues } = useFieldActions()
   const { useExternalWalletProvidersOnly, externalChainTypes } =
     useExternalWalletProvider()
@@ -45,7 +43,7 @@ export const useChainSelect = (formType: FormType) => {
 
   const setCurrentChain = useCallback(
     (chainId: number) => {
-      onChange(chainId)
+      setFieldValue(chainKey, chainId, { isDirty: true, isTouched: true })
       if (swapOnly) {
         setFieldValue(FormKeyHelper.getChainKey('to'), chainId, {
           isTouched: true,
@@ -69,7 +67,7 @@ export const useChainSelect = (formType: FormType) => {
       setChainOrder(chainId, formType)
     },
     [
-      onChange,
+      chainKey,
       swapOnly,
       setFieldValue,
       disabledUI,

package/src/components/Chains/ChainsExpanded.style.tsx

@@ -9,14 +9,13 @@ interface SelectChainExpansionContainerProps {
 export const SelectChainExpansionContainer = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'expansionHeight',
 })<SelectChainExpansionContainerProps>(({ theme, expansionHeight }) => ({
+  ...theme.container,
   position: 'relative',
   boxSizing: 'content-box',
   width: chainExpansionWidth,
   background: theme.vars.palette.background.default,
   overflow: 'hidden',
   flex: 1,
-  borderRadius: theme.container?.borderRadius ?? 0,
-  boxShadow: theme.container?.boxShadow ?? 'none',
   zIndex: 0,
   height: expansionHeight,
   ...theme.chainSidebarContainer,

package/src/components/Chains/ChainsExpanded.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider'
 import type { FormType } from '../../stores/form/types'
 import { getWidgetMaxHeight } from '../../utils/widgetSize'
@@ -13,7 +14,10 @@ interface ChainsExpandedProps {
   open: boolean
 }
 
-export const ChainsExpanded = ({ formType, open }: ChainsExpandedProps) => {
+export const ChainsExpanded = memo(function ChainsExpanded({
+  formType,
+  open,
+}: ChainsExpandedProps) {
   const { theme } = useWidgetConfig()
 
   return (
@@ -25,4 +29,4 @@ export const ChainsExpanded = ({ formType, open }: ChainsExpandedProps) => {
       </SelectChainExpansionContainer>
     </ExpansionTransition>
   )
-}
+})

package/src/components/Chains/SelectChainContent.tsx

@@ -19,95 +19,94 @@ interface SelectChainContentProps {
 
 const searchHeaderHeight = '80px'
 
-export const SelectChainContent: React.FC<SelectChainContentProps> = memo(
-  ({ formType, onSelect, inExpansion }) => {
-    const theme = useTheme()
-    const { chains, isLoading, setCurrentChain } = useChainSelect(formType)
-    const elementId = useDefaultElementId()
-    const scrollableContainer = useScrollableContainer(elementId)
-    const [selectedChainId] = useFieldValues(
-      FormKeyHelper.getChainKey(formType)
-    )
-    const inputRef = useRef<HTMLInputElement>(null)
-    const listRef = useRef<HTMLDivElement>(null)
-    const [debouncedSearchValue, setDebouncedSearchValue] = useState('')
+export const SelectChainContent = memo(function SelectChainContent({
+  formType,
+  onSelect,
+  inExpansion,
+}: SelectChainContentProps) {
+  const theme = useTheme()
+  const { chains, isLoading, setCurrentChain } = useChainSelect(formType)
+  const elementId = useDefaultElementId()
+  const scrollableContainer = useScrollableContainer(elementId)
+  const [selectedChainId] = useFieldValues(FormKeyHelper.getChainKey(formType))
+  const inputRef = useRef<HTMLInputElement>(null)
+  const listRef = useRef<HTMLDivElement>(null)
+  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 filteredChains = useMemo(() => {
+    const value = debouncedSearchValue.toLowerCase()
+    return value
+      ? (chains?.filter((chain) => chain.name.toLowerCase().includes(value)) ??
+          [])
+      : (chains ?? [])
+  }, [chains, debouncedSearchValue])
 
-    const scrollToTop = useCallback(() => {
-      // Scroll widget container to top
-      if (!inExpansion && scrollableContainer) {
-        scrollableContainer.scrollTop = 0
-      }
-    }, [inExpansion, scrollableContainer])
+  const scrollToTop = useCallback(() => {
+    // Scroll widget container to top
+    if (!inExpansion && scrollableContainer) {
+      scrollableContainer.scrollTop = 0
+    }
+  }, [inExpansion, scrollableContainer])
 
-    const debouncedFilterChains = useMemo(
-      () =>
-        debounce((value: string) => {
-          setDebouncedSearchValue(value)
-          scrollToTop()
-        }, 250),
-      [scrollToTop]
-    )
+  const debouncedFilterChains = useMemo(
+    () =>
+      debounce((value: string) => {
+        setDebouncedSearchValue(value)
+        scrollToTop()
+      }, 250),
+    [scrollToTop]
+  )
 
-    const onSelectChainFallback = useCallback(
-      (chain: ExtendedChain) => {
-        setCurrentChain(chain.id)
-      },
-      [setCurrentChain]
-    )
+  const onSelectChainFallback = useCallback(
+    (chain: ExtendedChain) => {
+      setCurrentChain(chain.id)
+    },
+    [setCurrentChain]
+  )
 
-    const onChange = useCallback(() => {
-      const value = inputRef.current?.value || ''
-      debouncedFilterChains(value)
-    }, [debouncedFilterChains])
+  const onChange = useCallback(() => {
+    const value = inputRef.current?.value || ''
+    debouncedFilterChains(value)
+  }, [debouncedFilterChains])
 
-    const onClear = useCallback(() => {
-      setDebouncedSearchValue('')
-      scrollToTop()
-    }, [scrollToTop])
+  const onClear = useCallback(() => {
+    setDebouncedSearchValue('')
+    scrollToTop()
+  }, [scrollToTop])
 
-    const listContainerHeight = useMemo(() => {
-      const fullContainerHeight = getWidgetMaxHeight(theme)
-      const heightValue =
-        typeof fullContainerHeight === 'number'
-          ? `${fullContainerHeight}px`
-          : fullContainerHeight
-      return `calc(${heightValue} - ${searchHeaderHeight})`
-    }, [theme])
+  const listContainerHeight = useMemo(() => {
+    const fullContainerHeight = getWidgetMaxHeight(theme)
+    const heightValue =
+      typeof fullContainerHeight === 'number'
+        ? `${fullContainerHeight}px`
+        : fullContainerHeight
+    return `calc(${heightValue} - ${searchHeaderHeight})`
+  }, [theme])
 
-    return (
-      <FullPageContainer disableGutters>
-        <ChainSearchInput
-          inputRef={inputRef}
+  return (
+    <FullPageContainer disableGutters>
+      <ChainSearchInput
+        inputRef={inputRef}
+        inExpansion={inExpansion}
+        onChange={onChange}
+        onClear={onClear}
+        searchHeaderHeight={searchHeaderHeight}
+      />
+      <Box
+        ref={listRef}
+        sx={
+          inExpansion ? { height: listContainerHeight, overflow: 'auto' } : {}
+        }
+      >
+        <ChainList
+          parentRef={listRef}
+          chains={filteredChains}
+          isLoading={isLoading}
+          onSelect={onSelect ?? onSelectChainFallback}
+          selectedChainId={selectedChainId}
           inExpansion={inExpansion}
-          onChange={onChange}
-          onClear={onClear}
-          searchHeaderHeight={searchHeaderHeight}
         />
-        <Box
-          ref={listRef}
-          sx={
-            inExpansion ? { height: listContainerHeight, overflow: 'auto' } : {}
-          }
-        >
-          <ChainList
-            parentRef={listRef}
-            chains={filteredChains}
-            isLoading={isLoading}
-            onSelect={onSelect ?? onSelectChainFallback}
-            selectedChainId={selectedChainId}
-            inExpansion={inExpansion}
-          />
-        </Box>
-      </FullPageContainer>
-    )
-  }
-)
+      </Box>
+    </FullPageContainer>
+  )
+})

package/src/components/Chains/VirtualizedChainList.tsx

@@ -2,7 +2,6 @@ import type { ExtendedChain } from '@lifi/sdk'
 import { useVirtualizer } from '@tanstack/react-virtual'
 import type { RefObject } from 'react'
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react'
-import { shallow } from 'zustand/shallow'
 import { useChainOrderStore } from '../../stores/chains/ChainOrderStore'
 import { List } from './ChainList.style'
 import { ChainListItem } from './ChainListItem'
@@ -26,10 +25,10 @@ export const VirtualizedChainList = ({
 }: VirtualizedChainListProps) => {
   const selectedChainIdRef = useRef(selectedChainId) // Store the initial selected chain ID to scroll to it once chains are loaded
   const hasScrolledRef = useRef(false)
-  const [pinnedChains, setPinnedChain] = useChainOrderStore(
-    (state) => [state.pinnedChains, state.setPinnedChain],
-    shallow
-  )
+  const [pinnedChains, setPinnedChain] = useChainOrderStore((state) => [
+    state.pinnedChains,
+    state.setPinnedChain,
+  ])
   const onPin = useCallback(
     (chainId: number) => {
       setPinnedChain(chainId)
@@ -98,9 +97,9 @@ export const VirtualizedChainList = ({
               behavior: 'smooth',
             })
           })
-          hasScrolledRef.current = true // Mark as scrolled (when needed)
         }
       }
+      hasScrolledRef.current = true // Mark as scrolled (when needed)
     }
   }, [sortedChains, scrollToIndex, range])
 

package/src/components/Expansion/Expansion.style.tsx

@@ -0,0 +1,43 @@
+import { Box, styled } from '@mui/material'
+
+export const animationDuration = 225
+
+export const defaultStyle = {
+  opacity: 0,
+  whiteSpace: 'nowrap',
+  transform: 'translateX(-100%)',
+  display: 'inline-block',
+  position: 'absolute' as const,
+  top: 0,
+  left: 0,
+  transition: `opacity ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
+}
+
+export const transitionStyles = {
+  entering: {
+    opacity: 1,
+    transform: 'translateX(0)',
+  },
+  entered: {
+    opacity: 1,
+    transform: 'translateX(0)',
+  },
+  exiting: {
+    opacity: 0,
+    transform: 'translateX(-100%)',
+  },
+  exited: {
+    opacity: 0,
+    transform: 'translateX(-100%)',
+  },
+}
+
+export const ExpansionContainer = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'width',
+})<{ width: string | number }>(({ width }) => ({
+  position: 'relative',
+  display: 'flex',
+  transition: `width ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
+  width: width,
+  marginLeft: width ? '24px' : 0,
+}))

package/src/components/Expansion/Expansion.tsx

@@ -1,23 +1,17 @@
-import { Box } from '@mui/material'
-import { useCallback, useMemo, useRef, useState } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import { useHasChainExpansion } from '../../hooks/useHasChainExpansion'
 import { ExpansionType } from '../../types/widget'
 import { ChainsExpanded } from '../Chains/ChainsExpanded'
 import { chainExpansionWidth } from '../Chains/ChainsExpanded.style'
 import { RoutesExpanded } from '../Routes/RoutesExpanded'
 import { routesExpansionWidth } from '../Routes/RoutesExpanded.style'
-import { animationDuration } from './ExpansionTransition'
+import { ExpansionContainer } from './Expansion.style'
 
 export function Expansion() {
   const [withChainExpansion, expansionType] = useHasChainExpansion()
   const chainExpansionTypeRef = useRef<ExpansionType>(expansionType)
-
   const [routesOpen, setRoutesOpen] = useState(false)
 
-  const handleSetRoutesOpen = useCallback((open: boolean) => {
-    setRoutesOpen(open)
-  }, [])
-
   // Track the previous chain expansion type to avoid re-renders when transitioning to Routes
   if (
     expansionType === ExpansionType.FromChain ||
@@ -26,28 +20,19 @@ export function Expansion() {
     chainExpansionTypeRef.current = expansionType
   }
 
-  const boxWidth = useMemo(() => {
+  const containerWidth = useMemo(() => {
     return routesOpen
       ? routesExpansionWidth
       : withChainExpansion
         ? chainExpansionWidth
-        : '0px'
+        : 0
   }, [routesOpen, withChainExpansion])
 
   return (
-    <Box
-      sx={{
-        position: 'relative',
-        display: 'flex',
-        transition: `width ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
-        width: boxWidth,
-        willChange: 'width',
-        marginLeft: boxWidth !== '0px' ? '24px' : '0px',
-      }}
-    >
+    <ExpansionContainer width={containerWidth}>
       <RoutesExpanded
-        expansionType={expansionType}
-        setOpenExpansion={handleSetRoutesOpen}
+        canOpen={expansionType === ExpansionType.Routes}
+        setOpenExpansion={setRoutesOpen}
       />
       <ChainsExpanded
         formType={
@@ -57,6 +42,6 @@ export function Expansion() {
         }
         open={withChainExpansion}
       />
-    </Box>
+    </ExpansionContainer>
   )
 }

package/src/components/Expansion/ExpansionTransition.tsx

@@ -1,39 +1,11 @@
 import { Box } from '@mui/material'
 import { type PropsWithChildren, useRef } from 'react'
 import { Transition } from 'react-transition-group'
-
-export const animationDuration = 225
-
-const defaultStyle = {
-  opacity: 0,
-  whiteSpace: 'nowrap',
-  transform: 'translateX(-100%)',
-  display: 'inline-block',
-  position: 'absolute' as const,
-  top: 0,
-  left: 0,
-  willChange: 'opacity, transform',
-  transition: `opacity ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
-}
-
-const transitionStyles = {
-  entering: {
-    opacity: 1,
-    transform: 'translateX(0)',
-  },
-  entered: {
-    opacity: 1,
-    transform: 'translateX(0)',
-  },
-  exiting: {
-    opacity: 0,
-    transform: 'translateX(-100%)',
-  },
-  exited: {
-    opacity: 0,
-    transform: 'translateX(-100%)',
-  },
-}
+import {
+  animationDuration,
+  defaultStyle,
+  transitionStyles,
+} from './Expansion.style'
 
 interface ExpansionTransitionProps {
   in: boolean

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/Routes/RoutesContent.tsx

@@ -1,15 +1,11 @@
 import type { ExtendedChain, Route } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { Stack, Typography } from '@mui/material'
-import { useEffect } from 'react'
+import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
-import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
-import { WidgetEvent } from '../../types/events.js'
-import { navigationRoutes } from '../../utils/navigationRoutes.js'
 import { PageContainer } from '../PageContainer.js'
 import { ProgressToNextUpdate } from '../ProgressToNextUpdate.js'
 import { RouteCard } from '../RouteCard/RouteCard.js'
@@ -21,53 +17,38 @@ interface RoutesContentProps {
   routes: Route[]
   isFetching: boolean
   isLoading: boolean
-  expanded: boolean
-  setReviewableRoute: (route: Route) => void
   dataUpdatedAt: number
   refetchTime: number
   fromChain: ExtendedChain | undefined
   refetch: () => void
+  onRouteClick: (route: Route) => void
 }
 
-export const RoutesContent = ({
+const headerHeight = '64px'
+
+export const RoutesContent = memo(function RoutesContent({
   routes,
   isFetching,
   isLoading,
-  expanded,
-  setReviewableRoute,
   dataUpdatedAt,
   refetchTime,
   fromChain,
   refetch,
-}: RoutesContentProps) => {
+  onRouteClick,
+}: RoutesContentProps) {
   const { t } = useTranslation()
-
-  const navigate = useNavigate()
   const { subvariant, subvariantOptions } = useWidgetConfig()
 
   const { account } = useAccount({ chainType: fromChain?.chainType })
   const [toAddress] = useFieldValues('toAddress')
   const { requiredToAddress } = useToAddressRequirements()
 
-  const emitter = useWidgetEvents()
-
-  const handleRouteClick = (route: Route) => {
-    setReviewableRoute(route)
-    navigate(navigationRoutes.transactionExecution, {
-      state: { routeId: route.id },
-    })
-    emitter.emit(WidgetEvent.RouteSelected, { route, routes: routes! })
-  }
   const currentRoute = routes?.[0]
 
-  const routeNotFound = !currentRoute && !isLoading && !isFetching && expanded
+  const routeNotFound = !currentRoute && !isLoading && !isFetching
   const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress
   const allowInteraction = account.isConnected && !toAddressUnsatisfied
 
-  useEffect(() => {
-    emitter.emit(WidgetEvent.WidgetExpanded, expanded)
-  }, [emitter, expanded])
-
   const title =
     subvariant === 'custom'
       ? subvariantOptions?.custom === 'deposit'
@@ -77,7 +58,7 @@ export const RoutesContent = ({
 
   return (
     <Container enableColorScheme minimumHeight={isLoading}>
-      <Header>
+      <Header sx={{ height: headerHeight }}>
         <Typography
           noWrap
           sx={{
@@ -96,7 +77,9 @@ export const RoutesContent = ({
           sx={{ marginRight: -1 }}
         />
       </Header>
-      <PageContainer>
+      <PageContainer
+        sx={{ height: `calc(100% - ${headerHeight})`, overflow: 'auto' }}
+      >
         <Stack
           direction="column"
           spacing={2}
@@ -117,7 +100,7 @@ export const RoutesContent = ({
                 key={index}
                 route={route}
                 onClick={
-                  allowInteraction ? () => handleRouteClick(route) : undefined
+                  allowInteraction ? () => onRouteClick(route) : undefined
                 }
                 active={index === 0}
                 expanded={routes?.length === 1}
@@ -128,4 +111,4 @@ export const RoutesContent = ({
       </PageContainer>
     </Container>
   )
-}
+})

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

@@ -11,8 +11,9 @@ interface ContainerProps extends ScopedCssBaselineProps {
 export const Container = styled(ScopedCssBaseline, {
   shouldForwardProp: (prop) => !['minimumHeight'].includes(prop as string),
 })<ContainerProps>(({ theme, minimumHeight }) => ({
+  ...theme.container,
   backgroundColor: theme.vars.palette.background.default,
-  overflow: 'auto',
+  overflow: 'hidden',
   width: routesExpansionWidth,
   display: 'flex',
   flexDirection: 'column',
@@ -26,7 +27,6 @@ export const Container = styled(ScopedCssBaseline, {
         ...(minimumHeight ? { '&': { height: 'auto' } } : {}),
       }
     : { height: minimumHeight ? 'auto' : '100%' }),
-  ...theme.container,
   ...theme.routesContainer,
 }))
 

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>
   )
-}
+})