@lifi/widget 3.24.3 → 3.25.0-beta.1

package/src/components/Chains/ChainList.tsx

@@ -0,0 +1,86 @@
+import type { ExtendedChain } from '@lifi/sdk'
+import { Skeleton } from '@mui/material'
+import type { RefObject } from 'react'
+import { useTranslation } from 'react-i18next'
+import { SearchNotFound } from '../Search/SearchNotFound'
+import {
+  List,
+  ListItemAvatar,
+  ListItemButton,
+  ListItemText,
+} from './ChainList.style'
+import { VirtualizedChainList } from './VirtualizedChainList'
+
+interface ChainListProps {
+  parentRef: RefObject<HTMLDivElement | null>
+  chains: ExtendedChain[]
+  onSelect: (chain: ExtendedChain) => void
+  selectedChainId?: number
+  isLoading: boolean
+  itemsSize: 'small' | 'medium'
+  adjustForStickySearchInput?: boolean
+}
+
+export const ChainList = ({
+  parentRef,
+  chains,
+  onSelect,
+  selectedChainId,
+  isLoading,
+  itemsSize,
+  adjustForStickySearchInput,
+}: ChainListProps) => {
+  const { t } = useTranslation()
+
+  if (isLoading) {
+    return (
+      <List disablePadding sx={{ cursor: 'default' }}>
+        {Array.from({ length: 3 }).map((_, index) => (
+          <ListItemButton
+            key={index}
+            size={itemsSize}
+            sx={{ pointerEvents: 'none' }}
+          >
+            <ListItemAvatar size={itemsSize}>
+              <Skeleton
+                variant="circular"
+                width={itemsSize === 'small' ? 32 : 40}
+                height={itemsSize === 'small' ? 32 : 40}
+                sx={{ marginRight: 2 }}
+              />
+            </ListItemAvatar>
+            <ListItemText
+              primary={
+                <Skeleton
+                  variant="text"
+                  width={'100%'}
+                  height={itemsSize === 'small' ? 18 : 24}
+                />
+              }
+              size={itemsSize}
+            />
+          </ListItemButton>
+        ))}
+      </List>
+    )
+  }
+
+  if (!chains.length) {
+    return (
+      <SearchNotFound
+        message={t('info.message.emptyChainList')}
+        adjustForStickySearchInput={adjustForStickySearchInput}
+      />
+    )
+  }
+
+  return (
+    <VirtualizedChainList
+      scrollElementRef={parentRef}
+      chains={chains}
+      onSelect={onSelect}
+      selectedChainId={selectedChainId}
+      itemsSize={itemsSize}
+    />
+  )
+}

package/src/components/Chains/ChainListItem.tsx

@@ -0,0 +1,52 @@
+import type { ExtendedChain } from '@lifi/sdk'
+import { memo } from 'react'
+import {
+  Avatar,
+  ListItem,
+  ListItemAvatar,
+  ListItemButton,
+  ListItemText,
+} from './ChainList.style'
+
+interface ChainListItemProps {
+  chain: ExtendedChain
+  onSelect: (chain: ExtendedChain) => void
+  selected?: boolean
+  itemsSize: 'small' | 'medium'
+  size: number
+  start: number
+}
+
+export const ChainListItem = memo(
+  ({
+    chain,
+    onSelect,
+    selected,
+    itemsSize,
+    size,
+    start,
+  }: ChainListItemProps) => {
+    return (
+      <ListItem
+        style={{
+          height: `${size}px`,
+          transform: `translateY(${start}px)`,
+          padding: 0,
+        }}
+      >
+        <ListItemButton
+          onClick={() => onSelect(chain)}
+          selected={selected}
+          size={itemsSize}
+        >
+          <ListItemAvatar size={itemsSize}>
+            <Avatar src={chain.logoURI} alt={chain.name} size={itemsSize}>
+              {chain.name[0]}
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText primary={chain.name} size={itemsSize} />
+        </ListItemButton>
+      </ListItem>
+    )
+  }
+)

package/src/components/Chains/ChainSearchInput.tsx

@@ -0,0 +1,52 @@
+import { Box } from '@mui/material'
+import { type RefObject, useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { SearchInput, StickySearchInput } from '../Search/SearchInput'
+
+interface ChainSearchInputProps {
+  inputRef: RefObject<HTMLInputElement | null>
+  inExpansion: boolean
+  onChange: () => void
+  onClear: () => void
+  searchHeaderHeight: string | number
+}
+
+export const ChainSearchInput = ({
+  inputRef,
+  inExpansion,
+  onChange,
+  onClear,
+  searchHeaderHeight,
+}: ChainSearchInputProps) => {
+  const { t } = useTranslation()
+
+  const handleClear = useCallback(() => {
+    if (inputRef.current) {
+      inputRef.current.value = ''
+    }
+    onClear()
+  }, [onClear, inputRef.current])
+
+  if (inExpansion) {
+    return (
+      <Box sx={{ pt: 3, pb: 2, px: 2.5, height: searchHeaderHeight }}>
+        <SearchInput
+          inputRef={inputRef}
+          onChange={onChange}
+          placeholder={t('main.searchChain')}
+          size="small"
+          onClear={handleClear}
+        />
+      </Box>
+    )
+  }
+
+  return (
+    <StickySearchInput
+      inputRef={inputRef}
+      onChange={onChange}
+      placeholder={t('main.searchChain')}
+      onClear={handleClear}
+    />
+  )
+}

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

@@ -0,0 +1,21 @@
+import { Box, styled } from '@mui/material'
+
+export const chainExpansionWidth = '256px'
+
+interface SelectChainExpansionContainerProps {
+  expansionHeight: string | number
+}
+
+export const SelectChainExpansionContainer = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'expansionHeight',
+})<SelectChainExpansionContainerProps>(({ theme, expansionHeight }) => ({
+  position: 'relative',
+  boxSizing: 'content-box',
+  width: chainExpansionWidth,
+  background: theme.vars.palette.background.default,
+  overflow: 'hidden',
+  flex: 1,
+  ...theme.container,
+  zIndex: 0,
+  height: expansionHeight,
+}))

package/src/components/Chains/ChainsExpanded.tsx

@@ -0,0 +1,28 @@
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider'
+import type { FormType } from '../../stores/form/types'
+import { getWidgetMaxHeight } from '../../utils/widgetSize'
+import { ExpansionTransition } from '../Expansion/ExpansionTransition'
+import {
+  chainExpansionWidth,
+  SelectChainExpansionContainer,
+} from './ChainsExpanded.style'
+import { SelectChainContent } from './SelectChainContent'
+
+interface ChainsExpandedProps {
+  formType: FormType
+  open: boolean
+}
+
+export const ChainsExpanded = ({ formType, open }: ChainsExpandedProps) => {
+  const { theme } = useWidgetConfig()
+
+  return (
+    <ExpansionTransition in={open} width={chainExpansionWidth}>
+      <SelectChainExpansionContainer
+        expansionHeight={getWidgetMaxHeight(theme)}
+      >
+        <SelectChainContent inExpansion formType={formType} />
+      </SelectChainExpansionContainer>
+    </ExpansionTransition>
+  )
+}

package/src/components/Chains/SelectChainContent.tsx

@@ -0,0 +1,116 @@
+import type { ExtendedChain } from '@lifi/sdk'
+import { Box, debounce, useTheme } from '@mui/material'
+import { memo, useCallback, useMemo, useRef, useState } from 'react'
+import { useDefaultElementId } from '../../hooks/useDefaultElementId'
+import { useScrollableContainer } from '../../hooks/useScrollableContainer'
+import { FormKeyHelper, type FormType } from '../../stores/form/types'
+import { useFieldValues } from '../../stores/form/useFieldValues'
+import { getWidgetMaxHeight } from '../../utils/widgetSize'
+import { useChainSelect } from '../ChainSelect/useChainSelect'
+import { FullPageContainer } from '../FullPageContainer'
+import { ChainList } from './ChainList'
+import { ChainSearchInput } from './ChainSearchInput'
+
+interface SelectChainContentProps {
+  formType: FormType
+  onSelect?: (chain: ExtendedChain) => void
+  inExpansion: boolean
+}
+
+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 [filteredChains, setFilteredChains] = useState<ExtendedChain[]>(
+      chains ?? []
+    )
+
+    const scrollToTop = useCallback(() => {
+      // Scroll widget container to top
+      if (!inExpansion && scrollableContainer) {
+        scrollableContainer.scrollTop = 0
+      }
+      // Scroll chain list to top
+      if (inExpansion && listRef.current) {
+        listRef.current.scrollTop = 0
+      }
+    }, [inExpansion, scrollableContainer])
+
+    const debouncedFilterChains = useMemo(
+      () =>
+        debounce((chains: ExtendedChain[]) => {
+          const value = inputRef.current?.value?.toLowerCase() || ''
+          const filtered = value
+            ? chains?.filter((chain) =>
+                chain.name.toLowerCase().includes(value)
+              )
+            : chains
+          setFilteredChains(filtered ?? [])
+          scrollToTop()
+        }, 250),
+      [scrollToTop]
+    )
+
+    const onSelectChainFallback = useCallback(
+      (chain: ExtendedChain) => {
+        setCurrentChain(chain.id)
+      },
+      [setCurrentChain]
+    )
+
+    const onChange = useCallback(() => {
+      debouncedFilterChains(chains ?? [])
+    }, [chains, debouncedFilterChains])
+
+    const onClear = useCallback(() => {
+      setFilteredChains(chains ?? [])
+      scrollToTop()
+    }, [chains, scrollToTop])
+
+    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}
+          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}
+            itemsSize={inExpansion ? 'small' : 'medium'}
+            adjustForStickySearchInput={!inExpansion}
+          />
+        </Box>
+      </FullPageContainer>
+    )
+  }
+)

package/src/components/Chains/VirtualizedChainList.tsx

@@ -0,0 +1,84 @@
+import type { ExtendedChain } from '@lifi/sdk'
+import { useVirtualizer } from '@tanstack/react-virtual'
+import type { RefObject } from 'react'
+import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { List } from './ChainList.style'
+import { ChainListItem } from './ChainListItem'
+
+interface VirtualizedChainListProps {
+  scrollElementRef: RefObject<HTMLDivElement | null>
+  chains: ExtendedChain[]
+  onSelect: (chain: ExtendedChain) => void
+  selectedChainId?: number
+  itemsSize: 'small' | 'medium'
+}
+
+export const VirtualizedChainList = ({
+  chains,
+  onSelect,
+  selectedChainId,
+  itemsSize,
+  scrollElementRef,
+}: VirtualizedChainListProps) => {
+  const initialSelectedChainIdRef = useRef(selectedChainId)
+  const sortedChains = useMemo(() => {
+    const selectedChain = chains.find(
+      (chain) => chain.id === initialSelectedChainIdRef.current
+    )
+    const otherChains = chains.filter(
+      (chain) => chain.id !== initialSelectedChainIdRef.current
+    )
+    return selectedChain ? [selectedChain, ...otherChains] : chains
+  }, [chains])
+
+  const getItemKey = useCallback(
+    (index: number) => {
+      return `${sortedChains[index].id}-${index}`
+    },
+    [sortedChains]
+  )
+
+  const { getVirtualItems, getTotalSize, measure } = useVirtualizer({
+    count: sortedChains.length,
+    overscan: 3,
+    paddingEnd: 0,
+    getScrollElement: () => scrollElementRef.current,
+    estimateSize: () => {
+      return itemsSize === 'small' ? 48 : 60
+    },
+    getItemKey,
+  })
+
+  // Using mountOnEnter of the ExpansionTransition component
+  // leads to a short delay for setting up scrollElementRef,
+  // which in turn leads to getVirtualItems() returning an empty array.
+  // Workaround: Re-measure when scroll element becomes available
+  useEffect(() => {
+    if (scrollElementRef.current) {
+      measure()
+    }
+  }, [measure, scrollElementRef.current])
+
+  return (
+    <List
+      className="long-list"
+      style={{ height: getTotalSize() }}
+      disablePadding
+    >
+      {getVirtualItems().map((item) => {
+        const chain = sortedChains[item.index]
+        return (
+          <ChainListItem
+            key={item.key}
+            chain={chain}
+            onSelect={onSelect}
+            selected={chain.id === selectedChainId}
+            itemsSize={itemsSize}
+            size={item.size}
+            start={item.start}
+          />
+        )
+      })}
+    </List>
+  )
+}

package/src/components/Expansion/Expansion.tsx

@@ -0,0 +1,62 @@
+import { Box } from '@mui/material'
+import { useCallback, 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'
+
+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 ||
+    expansionType === ExpansionType.ToChain
+  ) {
+    chainExpansionTypeRef.current = expansionType
+  }
+
+  const boxWidth = useMemo(() => {
+    return routesOpen
+      ? routesExpansionWidth
+      : withChainExpansion
+        ? chainExpansionWidth
+        : '0px'
+  }, [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',
+      }}
+    >
+      <RoutesExpanded
+        expansionType={expansionType}
+        setOpenExpansion={handleSetRoutesOpen}
+      />
+      <ChainsExpanded
+        formType={
+          chainExpansionTypeRef.current === ExpansionType.FromChain
+            ? 'from'
+            : 'to'
+        }
+        open={withChainExpansion}
+      />
+    </Box>
+  )
+}

package/src/components/Expansion/ExpansionTransition.tsx

@@ -0,0 +1,76 @@
+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%)',
+  },
+}
+
+interface ExpansionTransitionProps {
+  in: boolean
+  width: string
+  onExited?: () => void
+}
+
+export function ExpansionTransition({
+  in: inProp,
+  children,
+  width,
+  onExited,
+}: PropsWithChildren<ExpansionTransitionProps>) {
+  const nodeRef = useRef(null)
+  return (
+    <Transition
+      nodeRef={nodeRef}
+      in={inProp}
+      timeout={animationDuration}
+      onExited={onExited}
+      mountOnEnter
+      unmountOnExit
+    >
+      {(state) => {
+        return (
+          <Box
+            ref={nodeRef}
+            style={{
+              ...defaultStyle,
+              ...transitionStyles[state as keyof typeof transitionStyles],
+              width,
+            }}
+          >
+            {children}
+          </Box>
+        )
+      }}
+    </Transition>
+  )
+}

package/src/components/Header/Header.style.ts

@@ -27,7 +27,6 @@ export const Container = styled(Box, {
     display: 'flex',
     flexDirection: 'column',
     backgroundColor: theme.vars.palette.background.default,
-    backdropFilter: 'blur(12px)',
     position: sticky ? 'sticky' : 'relative',
     top: 0,
     zIndex: 1200,

package/src/components/Header/Header.tsx

@@ -3,7 +3,7 @@ import { useLayoutEffect, useRef } from 'react'
 import { useLocation } from 'react-router-dom'
 import { useDefaultElementId } from '../../hooks/useDefaultElementId.js'
 import { useSetHeaderHeight } from '../../stores/header/useHeaderStore.js'
-import { ElementId, createElementId } from '../../utils/elements.js'
+import { createElementId, ElementId } from '../../utils/elements.js'
 import { stickyHeaderRoutes } from '../../utils/navigationRoutes.js'
 import { Container } from './Header.style.js'
 import { NavigationHeader } from './NavigationHeader.js'

package/src/components/Header/NavigationHeader.tsx

@@ -19,7 +19,7 @@ import { TransactionHistoryButton } from './TransactionHistoryButton.js'
 import { SplitWalletMenuButton } from './WalletHeader.js'
 
 export const NavigationHeader: React.FC = () => {
-  const { subvariant, hiddenUI, variant } = useWidgetConfig()
+  const { subvariant, hiddenUI, variant, defaultUI } = useWidgetConfig()
   const { navigateBack } = useNavigateBack()
   const { account } = useAccount()
   const { element, title } = useHeaderStore((state) => state)
@@ -50,7 +50,7 @@ export const NavigationHeader: React.FC = () => {
         ) : (
           <Typography
             align={hasPath ? 'center' : 'left'}
-            noWrap
+            noWrap={defaultUI?.navigationHeaderTitleNoWrap ?? true}
             sx={{
               fontSize: hasPath ? 18 : 24,
               fontWeight: '700',

package/src/components/Header/SettingsButton.style.tsx

@@ -1,7 +1,7 @@
 import {
+  badgeClasses,
   IconButton,
   Badge as MuiBadge,
-  badgeClasses,
   styled,
 } from '@mui/material'
 

package/src/components/ListItem/ListItem.tsx

@@ -1,7 +1,7 @@
 import {
-  ListItem as MuiListItem,
   listItemSecondaryActionClasses,
   listItemTextClasses,
+  ListItem as MuiListItem,
   styled,
 } from '@mui/material'
 

package/src/components/ListItemButton.tsx

@@ -1,4 +1,8 @@
-import { ListItemButton as MuiListItemButton, styled } from '@mui/material'
+import {
+  listItemButtonClasses,
+  ListItemButton as MuiListItemButton,
+  styled,
+} from '@mui/material'
 
 export const ListItemButton = styled(MuiListItemButton)(({ theme }) => {
   return {
@@ -8,6 +12,18 @@ export const ListItemButton = styled(MuiListItemButton)(({ theme }) => {
     '&:hover': {
       backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
     },
+    [`&.${listItemButtonClasses.selected}`]: {
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 20%, white)`,
+      '&:hover': {
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, white)`,
+      },
+      ...theme.applyStyles('dark', {
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, black)`,
+        '&:hover': {
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, black)`,
+        },
+      }),
+    },
     variants: [
       {
         props: ({ disabled }) => disabled,

package/src/components/ListItemText.tsx

@@ -1,6 +1,6 @@
 import {
-  ListItemText as MuiListItemText,
   listItemTextClasses,
+  ListItemText as MuiListItemText,
   styled,
 } from '@mui/material'
 

package/src/components/ProgressToNextUpdate.tsx

@@ -47,7 +47,7 @@ export const ProgressToNextUpdate: React.FC<
             values={{
               value: getSecondsToUpdate(updatedAt, timeToUpdate),
             }}
-            // biome-ignore lint/correctness/useJsxKeyInIterable:
+            // biome-ignore lint/correctness/useJsxKeyInIterable: allowed in react-i18next
             components={[<br />]}
           />
         }