@lifi/widget 3.25.0-beta.5 → 3.26.0

package/src/components/AmountInput/AmountInputEndAdornment.tsx

@@ -8,7 +8,7 @@ import type { FormTypeProps } from '../../stores/form/types.js'
 import { FormKeyHelper } from '../../stores/form/types.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
-import { MaxButton, MaxButtonSkeleton } from './AmountInputAdornment.style.js'
+import { ButtonContainer, MaxButton } from './AmountInputAdornment.style.js'
 
 export const AmountInputEndAdornment = ({ formType }: FormTypeProps) => {
   const { t } = useTranslation()
@@ -24,11 +24,11 @@ export const AmountInputEndAdornment = ({ formType }: FormTypeProps) => {
   // the user will have enough funds remaining to cover gas costs
   const { data } = useGasRecommendation(chainId)
 
-  const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress)
+  const { token } = useTokenAddressBalance(chainId, tokenAddress)
 
-  const handleMax = () => {
+  const getMaxAmount = () => {
     if (!token?.amount) {
-      return
+      return 0n
     }
     const chain = getChainById(chainId)
     let maxAmount = token.amount
@@ -38,7 +38,26 @@ export const AmountInputEndAdornment = ({ formType }: FormTypeProps) => {
         maxAmount = token.amount - recommendedAmount
       }
     }
-    if (maxAmount) {
+    return maxAmount
+  }
+
+  const handlePercentage = (percentage: number) => {
+    const maxAmount = getMaxAmount()
+    if (maxAmount && token?.decimals) {
+      const percentageAmount = (maxAmount * BigInt(percentage)) / 100n
+      setFieldValue(
+        FormKeyHelper.getAmountKey(formType),
+        formatUnits(percentageAmount, token.decimals),
+        {
+          isTouched: true,
+        }
+      )
+    }
+  }
+
+  const handleMax = () => {
+    const maxAmount = getMaxAmount()
+    if (maxAmount && token?.decimals) {
       setFieldValue(
         FormKeyHelper.getAmountKey(formType),
         formatUnits(maxAmount, token.decimals),
@@ -50,11 +69,22 @@ export const AmountInputEndAdornment = ({ formType }: FormTypeProps) => {
   }
 
   return (
-    <InputAdornment position="end">
-      {isLoading && tokenAddress ? (
-        <MaxButtonSkeleton variant="rectangular" />
-      ) : formType === 'from' && token?.amount ? (
-        <MaxButton onClick={handleMax}>{t('button.max')}</MaxButton>
+    <InputAdornment position="end" sx={{ paddingTop: 2 }}>
+      {formType === 'from' && token?.amount ? (
+        <ButtonContainer>
+          <MaxButton onClick={() => handlePercentage(25)} data-delay="0">
+            25%
+          </MaxButton>
+          <MaxButton onClick={() => handlePercentage(50)} data-delay="1">
+            50%
+          </MaxButton>
+          <MaxButton onClick={() => handlePercentage(75)} data-delay="2">
+            75%
+          </MaxButton>
+          <MaxButton onClick={handleMax} data-delay="3">
+            {t('button.max')}
+          </MaxButton>
+        </ButtonContainer>
       ) : null}
     </InputAdornment>
   )

package/src/components/AmountInput/PriceFormHelperText.style.tsx

@@ -0,0 +1,29 @@
+import { Button, styled } from '@mui/material'
+
+export const InputPriceButton = styled(Button)(({ theme, onClick }) => ({
+  color: theme.vars.palette.text.secondary,
+  padding: theme.spacing(0.25, 0.5, 0.25, 0.75),
+  maxHeight: 16,
+  fontSize: '0.75rem',
+  fontWeight: 500,
+  borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,
+  backgroundColor: 'transparent',
+  minWidth: 32,
+  ...(onClick
+    ? {
+        '&:hover': {
+          backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+        },
+        ...theme.applyStyles('dark', {
+          backgroundColor: 'transparent',
+          '&:hover': {
+            backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+          },
+        }),
+      }
+    : {
+        cursor: 'text',
+        userSelect: 'text',
+        pointerEvents: 'none',
+      }),
+}))

package/src/components/AmountInput/PriceFormHelperText.tsx

@@ -1,11 +1,14 @@
 import type { TokenAmount } from '@lifi/sdk'
+import SwapVertIcon from '@mui/icons-material/SwapVert'
 import { FormHelperText, Skeleton, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'
 import type { FormTypeProps } from '../../stores/form/types.js'
 import { FormKeyHelper } from '../../stores/form/types.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'
 import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
+import { InputPriceButton } from './PriceFormHelperText.style.js'
 
 export const PriceFormHelperText: React.FC<FormTypeProps> = ({ formType }) => {
   const [chainId, tokenAddress] = useFieldValues(
@@ -33,11 +36,31 @@ export const PriceFormHelperTextBase: React.FC<
 > = ({ formType, isLoading, tokenAddress, token }) => {
   const { t } = useTranslation()
   const [amount] = useFieldValues(FormKeyHelper.getAmountKey(formType))
+  const { inputMode, toggleInputMode } = useInputModeStore()
+
+  const currentInputMode = inputMode[formType]
 
   const tokenAmount = token
     ? formatTokenAmount(token.amount, token.decimals)
     : '0'
-  const tokenPrice = formatTokenPrice(amount, token?.priceUSD)
+
+  const getPriceAmountDisplayValue = () => {
+    if (currentInputMode === 'amount') {
+      const tokenPrice = formatTokenPrice(
+        amount,
+        token?.priceUSD,
+        token?.decimals
+      )
+      return t('format.currency', { value: tokenPrice })
+    } else {
+      return t('format.tokenAmount', { value: amount || '0' })
+    }
+  }
+
+  const handleToggleMode = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    toggleInputMode(formType)
+  }
 
   return (
     <FormHelperText
@@ -45,28 +68,49 @@ export const PriceFormHelperTextBase: React.FC<
       sx={{
         display: 'flex',
         justifyContent: 'space-between',
+        alignItems: 'center',
         margin: 0,
-        marginLeft: 2,
-        marginTop: 0.75,
+        marginLeft: 1.25,
+        marginTop: 0.5,
       }}
     >
-      <Typography
-        sx={{
-          color: 'text.secondary',
-          fontWeight: 500,
-          fontSize: 12,
-          lineHeight: 1,
-          flex: 1,
-          wordBreak: 'break-word',
-          overflowWrap: 'break-word',
-        }}
+      <InputPriceButton
+        onClick={token?.priceUSD ? handleToggleMode : undefined}
       >
-        {t('format.currency', {
-          value: tokenPrice,
-        })}
-      </Typography>
+        <Typography
+          sx={{
+            color: 'text.secondary',
+            fontWeight: 500,
+            fontSize: 12,
+            lineHeight: 1,
+            marginRight: 0.25,
+            maxWidth: 136,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {getPriceAmountDisplayValue()}
+        </Typography>
+        {currentInputMode === 'price' && token?.symbol ? (
+          <Typography
+            sx={{
+              color: 'text.secondary',
+              fontWeight: 500,
+              fontSize: 12,
+              lineHeight: 1,
+              wordBreak: 'break-word',
+              overflowWrap: 'break-word',
+              marginRight: 0.25,
+            }}
+          >
+            {token.symbol}
+          </Typography>
+        ) : null}
+        {token?.priceUSD && <SwapVertIcon sx={{ fontSize: 14 }} />}
+      </InputPriceButton>
       {isLoading && tokenAddress ? (
-        <Skeleton variant="text" width={48} height={12} />
+        <Skeleton variant="text" width={56} height={16} />
       ) : token?.amount ? (
         <Typography
           sx={{
@@ -74,7 +118,7 @@ export const PriceFormHelperTextBase: React.FC<
             fontSize: 12,
             color: 'text.secondary',
             lineHeight: 1,
-            pl: 0.25,
+            paddingLeft: 0.25,
           }}
           title={tokenAmount}
         >

package/src/components/AppContainer.tsx

@@ -71,6 +71,7 @@ export const RelativeContainer = styled(Box, {
           maxHeight: 'none',
           height: '100%',
           boxShadow: 'none',
+          borderRadius: 0,
         },
       },
     ],

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/ChainList.style.tsx

@@ -1,5 +1,6 @@
 import {
   ListItem as ListItemBase,
+  listItemButtonClasses,
   listItemTextClasses,
   Avatar as MuiAvatar,
   List as MuiList,
@@ -7,7 +8,7 @@ import {
   ListItemText as MuiListItemText,
   styled,
 } from '@mui/material'
-import { ListItemButton as ListItemButtonBase } from '../ListItem/ListItemButton.js'
+import { ListItemButton as ListItemButtonBase } from '../ListItemButton.js'
 
 export const Avatar = styled(MuiAvatar)<{
   size?: 'small' | 'medium'
@@ -28,6 +29,9 @@ export const ListItemText = styled(MuiListItemText)<{
   [`.${listItemTextClasses.primary}`]: {
     fontWeight: 500,
     fontSize: size === 'small' ? '1rem' : '1.125rem',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
   },
 }))
 
@@ -38,6 +42,7 @@ export const ListItemButton = styled(ListItemButtonBase)<{
     borderRadius: theme.vars.shape.borderRadius,
     paddingLeft: size === 'small' ? theme.spacing(1) : theme.spacing(1.5),
     height: size === 'small' ? 44 : 56,
+    width: '100%',
   }
 })
 
@@ -52,8 +57,11 @@ export const List = styled(MuiList)(({ theme }) => ({
   cursor: 'pointer',
 }))
 
-export const ListItem = styled(ListItemBase)(() => ({
+export const ListItem = styled(ListItemBase)(({ theme }) => ({
   position: 'absolute',
   top: 0,
   left: 0,
+  [`& .${listItemButtonClasses.root}`]: {
+    paddingRight: theme.spacing(1),
+  },
 }))

package/src/components/Chains/ChainList.tsx

@@ -17,8 +17,7 @@ interface ChainListProps {
   onSelect: (chain: ExtendedChain) => void
   selectedChainId?: number
   isLoading: boolean
-  itemsSize: 'small' | 'medium'
-  adjustForStickySearchInput?: boolean
+  inExpansion: boolean
 }
 
 export const ChainList = ({
@@ -27,11 +26,12 @@ export const ChainList = ({
   onSelect,
   selectedChainId,
   isLoading,
-  itemsSize,
-  adjustForStickySearchInput,
+  inExpansion,
 }: ChainListProps) => {
   const { t } = useTranslation()
 
+  const itemsSize = inExpansion ? 'small' : 'medium'
+
   if (isLoading) {
     return (
       <List disablePadding sx={{ cursor: 'default' }}>
@@ -69,7 +69,7 @@ export const ChainList = ({
     return (
       <SearchNotFound
         message={t('info.message.emptyChainList')}
-        adjustForStickySearchInput={adjustForStickySearchInput}
+        adjustForStickySearchInput={!inExpansion}
       />
     )
   }
@@ -81,6 +81,7 @@ export const ChainList = ({
       onSelect={onSelect}
       selectedChainId={selectedChainId}
       itemsSize={itemsSize}
+      withPinnedChains={inExpansion}
     />
   )
 }

package/src/components/Chains/ChainListItem.tsx

@@ -1,4 +1,5 @@
 import type { ExtendedChain } from '@lifi/sdk'
+import { Box } from '@mui/material'
 import { memo } from 'react'
 import {
   Avatar,
@@ -7,6 +8,7 @@ import {
   ListItemButton,
   ListItemText,
 } from './ChainList.style'
+import { PinChainButton, pinButtonClassName } from './PinChainButton'
 
 interface ChainListItemProps {
   chain: ExtendedChain
@@ -15,6 +17,9 @@ interface ChainListItemProps {
   itemsSize: 'small' | 'medium'
   size: number
   start: number
+  isPinned: boolean
+  onPin: (chainId: number) => void
+  withPin: boolean
 }
 
 export const ChainListItem = memo(
@@ -25,6 +30,9 @@ export const ChainListItem = memo(
     itemsSize,
     size,
     start,
+    isPinned,
+    onPin,
+    withPin,
   }: ChainListItemProps) => {
     return (
       <ListItem
@@ -32,6 +40,13 @@ export const ChainListItem = memo(
           height: `${size}px`,
           transform: `translateY(${start}px)`,
           padding: 0,
+          overflow: 'hidden',
+        }}
+        sx={{
+          [`&:hover .${pinButtonClassName}`]: {
+            opacity: 1,
+            transform: 'translateY(0)',
+          },
         }}
       >
         <ListItemButton
@@ -45,6 +60,20 @@ export const ChainListItem = memo(
             </Avatar>
           </ListItemAvatar>
           <ListItemText primary={chain.name} size={itemsSize} />
+          {withPin && (
+            <Box
+              style={{
+                position: 'relative',
+                height: 28,
+                width: 28,
+              }}
+            >
+              <PinChainButton
+                isPinned={isPinned}
+                onPin={() => onPin(chain.id)}
+              />
+            </Box>
+          )}
         </ListItemButton>
       </ListItem>
     )

package/src/components/Chains/PinChainButton.tsx

@@ -0,0 +1,51 @@
+import PushPinIcon from '@mui/icons-material/PushPin'
+import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined'
+import { IconButton } from '@mui/material'
+
+interface PinChainButtonProps {
+  isPinned: boolean
+  onPin: () => void
+}
+
+export const pinButtonClassName = 'pin-button'
+const animationDuration = 225
+
+export const PinChainButton = ({ isPinned, onPin }: PinChainButtonProps) => {
+  const PinIcon = isPinned ? PushPinIcon : PushPinOutlinedIcon
+  return (
+    <IconButton
+      className={pinButtonClassName}
+      edge="end"
+      aria-label="pin"
+      onClick={(e) => {
+        e.stopPropagation()
+        onPin()
+      }}
+      sx={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        height: 28,
+        width: 28,
+        transition: `opacity ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
+        ...(isPinned
+          ? {
+              opacity: 1,
+              transform: 'translateY(0)',
+            }
+          : {
+              opacity: 0,
+              transform: 'translateY(-50%)',
+            }),
+      }}
+    >
+      <PinIcon
+        sx={{
+          height: 20,
+          width: 20,
+          color: 'text.secondary',
+        }}
+      />
+    </IconButton>
+  )
+}

package/src/components/Chains/SelectChainContent.tsx

@@ -30,31 +30,28 @@ export const SelectChainContent: React.FC<SelectChainContentProps> = memo(
     )
     const inputRef = useRef<HTMLInputElement>(null)
     const listRef = useRef<HTMLDivElement>(null)
-    const [filteredChains, setFilteredChains] = useState<ExtendedChain[]>(
-      chains ?? []
-    )
+    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 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 ?? [])
+        debounce((value: string) => {
+          setDebouncedSearchValue(value)
           scrollToTop()
         }, 250),
       [scrollToTop]
@@ -68,13 +65,14 @@ export const SelectChainContent: React.FC<SelectChainContentProps> = memo(
     )
 
     const onChange = useCallback(() => {
-      debouncedFilterChains(chains ?? [])
-    }, [chains, debouncedFilterChains])
+      const value = inputRef.current?.value || ''
+      debouncedFilterChains(value)
+    }, [debouncedFilterChains])
 
     const onClear = useCallback(() => {
-      setFilteredChains(chains ?? [])
+      setDebouncedSearchValue('')
       scrollToTop()
-    }, [chains, scrollToTop])
+    }, [scrollToTop])
 
     const listContainerHeight = useMemo(() => {
       const fullContainerHeight = getWidgetMaxHeight(theme)
@@ -106,8 +104,7 @@ export const SelectChainContent: React.FC<SelectChainContentProps> = memo(
             isLoading={isLoading}
             onSelect={onSelect ?? onSelectChainFallback}
             selectedChainId={selectedChainId}
-            itemsSize={inExpansion ? 'small' : 'medium'}
-            adjustForStickySearchInput={!inExpansion}
+            inExpansion={inExpansion}
           />
         </Box>
       </FullPageContainer>

package/src/components/Chains/VirtualizedChainList.tsx

@@ -1,7 +1,8 @@
 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 { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react'
+import { useChainOrderStore } from '../../stores/chains/ChainOrderStore'
 import { List } from './ChainList.style'
 import { ChainListItem } from './ChainListItem'
 
@@ -11,6 +12,7 @@ interface VirtualizedChainListProps {
   onSelect: (chain: ExtendedChain) => void
   selectedChainId?: number
   itemsSize: 'small' | 'medium'
+  withPinnedChains: boolean
 }
 
 export const VirtualizedChainList = ({
@@ -19,17 +21,33 @@ export const VirtualizedChainList = ({
   selectedChainId,
   itemsSize,
   scrollElementRef,
+  withPinnedChains,
 }: VirtualizedChainListProps) => {
-  const initialSelectedChainIdRef = useRef(selectedChainId)
+  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,
+  ])
+  const onPin = useCallback(
+    (chainId: number) => {
+      setPinnedChain(chainId)
+    },
+    [setPinnedChain]
+  )
+
   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])
+    if (!pinnedChains.length) {
+      return chains
+    }
+    // Pinning logic: move pinned chains to the top of the list
+    const pinned = pinnedChains
+      .map((id) => chains.find((c) => c.id === id))
+      .filter(Boolean) as ExtendedChain[]
+    const pinnedIds = new Set(pinned.map((c) => c.id))
+    const rest = chains.filter((c) => !pinnedIds.has(c.id))
+    return [...pinned, ...rest]
+  }, [chains, pinnedChains])
 
   const getItemKey = useCallback(
     (index: number) => {
@@ -38,16 +56,17 @@ export const VirtualizedChainList = ({
     [sortedChains]
   )
 
-  const { getVirtualItems, getTotalSize, measure } = useVirtualizer({
-    count: sortedChains.length,
-    overscan: 3,
-    paddingEnd: 0,
-    getScrollElement: () => scrollElementRef.current,
-    estimateSize: () => {
-      return itemsSize === 'small' ? 48 : 60
-    },
-    getItemKey,
-  })
+  const { getVirtualItems, getTotalSize, measure, scrollToIndex, range } =
+    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,
@@ -59,6 +78,31 @@ export const VirtualizedChainList = ({
     }
   }, [measure, scrollElementRef.current])
 
+  useLayoutEffect(() => {
+    // Only scroll if sortedChains is not empty and we haven't scrolled yet
+    if (!hasScrolledRef.current && sortedChains.length > 0 && range) {
+      const selectedChainIndex = sortedChains.findIndex(
+        (chain) => chain.id === selectedChainIdRef.current
+      )
+      if (selectedChainIndex !== -1) {
+        // Only scroll if the selected chain is not in the visible range
+        // +1 and -1 to account for partially visible items
+        if (
+          range.startIndex + 1 > selectedChainIndex ||
+          range.endIndex - 1 < selectedChainIndex
+        ) {
+          requestAnimationFrame(() => {
+            scrollToIndex(selectedChainIndex, {
+              align: 'center',
+              behavior: 'smooth',
+            })
+          })
+        }
+      }
+      hasScrolledRef.current = true // Mark as scrolled (when needed)
+    }
+  }, [sortedChains, scrollToIndex, range])
+
   return (
     <List
       className="long-list"
@@ -76,6 +120,9 @@ export const VirtualizedChainList = ({
             itemsSize={itemsSize}
             size={item.size}
             start={item.start}
+            withPin={withPinnedChains}
+            isPinned={pinnedChains.includes(chain.id)}
+            onPin={onPin}
           />
         )
       })}