@lifi/widget 4.0.0-beta.9 → 4.1.0

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

@@ -8,22 +8,38 @@ import {
   ListItemText as MuiListItemText,
   styled,
 } from '@mui/material'
+import type React from 'react'
 import { ListItemButton as ListItemButtonBase } from '../ListItemButton.js'
 
-export const Avatar = styled(MuiAvatar)<{
+export const Avatar: React.FC<
+  React.ComponentProps<typeof MuiAvatar> &
+    Partial<{
+      size?: 'small' | 'medium'
+    }>
+> = styled(MuiAvatar)<{
   size?: 'small' | 'medium'
 }>(({ size = 'medium' }) => ({
   width: size === 'small' ? 32 : 40,
   height: size === 'small' ? 32 : 40,
 }))
 
-export const ListItemAvatar = styled(MuiListItemAvatar)<{
+export const ListItemAvatar: React.FC<
+  React.ComponentProps<typeof MuiListItemAvatar> &
+    Partial<{
+      size?: 'small' | 'medium'
+    }>
+> = styled(MuiListItemAvatar)<{
   size?: 'small' | 'medium'
 }>(({ size = 'medium' }) => ({
   minWidth: size === 'small' ? 44 : 56,
 }))
 
-export const ListItemText = styled(MuiListItemText)<{
+export const ListItemText: React.FC<
+  React.ComponentProps<typeof MuiListItemText> &
+    Partial<{
+      size?: 'small' | 'medium'
+    }>
+> = styled(MuiListItemText)<{
   size?: 'small' | 'medium'
 }>(({ size = 'medium' }) => ({
   [`.${listItemTextClasses.primary}`]: {
@@ -35,7 +51,12 @@ export const ListItemText = styled(MuiListItemText)<{
   },
 }))
 
-export const ListItemButton = styled(ListItemButtonBase)<{
+export const ListItemButton: React.FC<
+  React.ComponentProps<typeof ListItemButtonBase> &
+    Partial<{
+      size?: 'small' | 'medium'
+    }>
+> = styled(ListItemButtonBase)<{
   size?: 'small' | 'medium'
 }>(({ size = 'medium', theme }) => {
   return {
@@ -46,7 +67,9 @@ export const ListItemButton = styled(ListItemButtonBase)<{
   }
 })
 
-export const List = styled(MuiList)(({ theme }) => ({
+export const List: React.FC<React.ComponentProps<typeof MuiList>> = styled(
+  MuiList
+)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   gap: theme.spacing(0.5),
@@ -57,11 +80,12 @@ export const List = styled(MuiList)(({ theme }) => ({
   cursor: 'pointer',
 }))
 
-export const ListItem = styled(ListItemBase)(({ theme }) => ({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  [`& .${listItemButtonClasses.root}`]: {
-    paddingRight: theme.spacing(1),
-  },
-}))
+export const ListItem: React.FC<React.ComponentProps<typeof ListItemBase>> =
+  styled(ListItemBase)(({ theme }) => ({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    [`& .${listItemButtonClasses.root}`]: {
+      paddingRight: theme.spacing(1),
+    },
+  }))

package/src/components/Chains/ChainList.tsx

@@ -1,6 +1,6 @@
 import type { ExtendedChain } from '@lifi/sdk'
 import { Skeleton } from '@mui/material'
-import type { RefObject } from 'react'
+import type { JSX, RefObject } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { FormType } from '../../stores/form/types.js'
 import { SearchNotFound } from '../Search/SearchNotFound.js'
@@ -32,7 +32,7 @@ export const ChainList = ({
   selectedChainId,
   isLoading,
   inExpansion,
-}: ChainListProps) => {
+}: ChainListProps): JSX.Element => {
   const { t } = useTranslation()
 
   const itemsSize = inExpansion ? 'small' : 'medium'
@@ -71,12 +71,7 @@ export const ChainList = ({
   }
 
   if (!chains.length) {
-    return (
-      <SearchNotFound
-        message={t('info.message.emptyChainList')}
-        adjustForStickySearchInput={!inExpansion}
-      />
-    )
+    return <SearchNotFound message={t('info.message.emptyChainList')} />
   }
 
   return (

package/src/components/Chains/ChainListItem.tsx

@@ -1,6 +1,7 @@
 import type { ExtendedChain } from '@lifi/sdk'
 import { Box } from '@mui/material'
-import { memo } from 'react'
+import type React from 'react'
+import { type JSX, memo } from 'react'
 import {
   Avatar,
   ListItem,
@@ -22,60 +23,61 @@ interface ChainListItemProps {
   withPin: boolean
 }
 
-export const ChainListItem = memo(
-  ({
-    chain,
-    onSelect,
-    selected,
-    itemsSize,
-    size,
-    start,
-    isPinned,
-    onPin,
-    withPin,
-  }: ChainListItemProps) => {
-    return (
-      <ListItem
-        style={{
-          height: `${size}px`,
-          transform: `translateY(${start}px)`,
-          padding: 0,
-          overflow: 'hidden',
-        }}
-        sx={{
-          [`&:hover .${pinButtonClassName}`]: {
-            opacity: 1,
-            transform: 'translateY(0)',
-          },
-        }}
-      >
-        <ListItemButton
-          onClick={() => onSelect(chain)}
-          selected={selected}
-          size={itemsSize}
+export const ChainListItem: React.NamedExoticComponent<ChainListItemProps> =
+  memo(
+    ({
+      chain,
+      onSelect,
+      selected,
+      itemsSize,
+      size,
+      start,
+      isPinned,
+      onPin,
+      withPin,
+    }: ChainListItemProps): JSX.Element => {
+      return (
+        <ListItem
+          style={{
+            height: `${size}px`,
+            transform: `translateY(${start}px)`,
+            padding: 0,
+            overflow: 'hidden',
+          }}
+          sx={{
+            [`&:hover .${pinButtonClassName}`]: {
+              opacity: 1,
+              transform: 'translateY(0)',
+            },
+          }}
         >
-          <ListItemAvatar size={itemsSize}>
-            <Avatar src={chain.logoURI} alt={chain.name} size={itemsSize}>
-              {chain.name[0]}
-            </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>
-    )
-  }
-)
+          <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} />
+            {withPin && (
+              <Box
+                style={{
+                  position: 'relative',
+                  height: 28,
+                  width: 28,
+                }}
+              >
+                <PinChainButton
+                  isPinned={isPinned}
+                  onPin={() => onPin(chain.id)}
+                />
+              </Box>
+            )}
+          </ListItemButton>
+        </ListItem>
+      )
+    }
+  )

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

@@ -1,4 +1,5 @@
 import { Box, styled } from '@mui/material'
+import type React from 'react'
 
 export const chainExpansionWidth = '256px'
 
@@ -6,7 +7,9 @@ interface SelectChainExpansionContainerProps {
   expansionHeight: string | number
 }
 
-export const SelectChainExpansionContainer = styled(Box, {
+export const SelectChainExpansionContainer: React.FC<
+  React.ComponentProps<typeof Box> & SelectChainExpansionContainerProps
+> = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'expansionHeight',
 })<SelectChainExpansionContainerProps>(({ theme, expansionHeight }) => ({
   ...theme.container,

package/src/components/Chains/ChainsExpanded.tsx

@@ -1,3 +1,4 @@
+import type React from 'react'
 import { memo } from 'react'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import type { FormType } from '../../stores/form/types.js'
@@ -7,26 +8,24 @@ import {
   chainExpansionWidth,
   SelectChainExpansionContainer,
 } from './ChainsExpanded.style.js'
-import { SelectChainContent } from './SelectChainContent.js'
+import { SelectChainExpansionContent } from './SelectChainExpansionContent.js'
 
 interface ChainsExpandedProps {
   formType: FormType
   open: boolean
 }
 
-export const ChainsExpanded = memo(function ChainsExpanded({
-  formType,
-  open,
-}: ChainsExpandedProps) {
-  const { theme } = useWidgetConfig()
+export const ChainsExpanded: React.NamedExoticComponent<ChainsExpandedProps> =
+  memo(function ChainsExpanded({ formType, open }: ChainsExpandedProps) {
+    const { theme } = useWidgetConfig()
 
-  return (
-    <ExpansionTransition in={open} width={chainExpansionWidth}>
-      <SelectChainExpansionContainer
-        expansionHeight={getWidgetMaxHeight(theme)}
-      >
-        <SelectChainContent inExpansion formType={formType} />
-      </SelectChainExpansionContainer>
-    </ExpansionTransition>
-  )
-})
+    return (
+      <ExpansionTransition in={open} width={chainExpansionWidth}>
+        <SelectChainExpansionContainer
+          expansionHeight={getWidgetMaxHeight(theme)}
+        >
+          <SelectChainExpansionContent formType={formType} />
+        </SelectChainExpansionContainer>
+      </ExpansionTransition>
+    )
+  })

package/src/components/Chains/PinChainButton.tsx

@@ -1,6 +1,7 @@
 import PushPinIcon from '@mui/icons-material/PushPin'
 import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined'
 import { IconButton } from '@mui/material'
+import type { JSX } from 'react'
 
 interface PinChainButtonProps {
   isPinned: boolean
@@ -10,7 +11,10 @@ interface PinChainButtonProps {
 export const pinButtonClassName = 'pin-button'
 const animationDuration = 225
 
-export const PinChainButton = ({ isPinned, onPin }: PinChainButtonProps) => {
+export const PinChainButton = ({
+  isPinned,
+  onPin,
+}: PinChainButtonProps): JSX.Element => {
   const PinIcon = isPinned ? PushPinIcon : PushPinOutlinedIcon
   return (
     <IconButton

package/src/components/Chains/SelectChainExpansionContent.tsx

@@ -0,0 +1,84 @@
+import type { ExtendedChain } from '@lifi/sdk'
+import { Box, useTheme } from '@mui/material'
+import { type JSX, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useChainSearch } from '../../hooks/useChainSearch.js'
+import type { FormType } from '../../stores/form/types.js'
+import { getWidgetMaxHeight } from '../../utils/widgetSize.js'
+import { PageContainer } from '../PageContainer.js'
+import { SearchInput } from '../Search/SearchInput.js'
+import { ChainList } from './ChainList.js'
+
+interface SelectChainExpansionContentProps {
+  formType: FormType
+  onSelect?: (chain: ExtendedChain) => void
+}
+
+export function SelectChainExpansionContent({
+  formType,
+  onSelect,
+}: SelectChainExpansionContentProps): JSX.Element {
+  const { t } = useTranslation()
+  const theme = useTheme()
+  const inputRef = useRef<HTMLInputElement>(null)
+  const headerRef = useRef<HTMLElement>(null)
+  const listRef = useRef<HTMLDivElement>(null)
+
+  const {
+    filteredChains,
+    isLoading,
+    selectedChainId,
+    onSelectChainFallback,
+    onChange,
+    onClear,
+  } = useChainSearch(formType, listRef, inputRef)
+
+  const [headerHeight, setHeaderHeight] = useState(0)
+
+  useLayoutEffect(() => {
+    if (headerRef.current) {
+      setHeaderHeight(headerRef.current.offsetHeight)
+    }
+  }, [])
+
+  const listContainerHeight = useMemo(() => {
+    if (!headerHeight) {
+      return undefined
+    }
+    const fullContainerHeight = getWidgetMaxHeight(theme)
+    const value =
+      typeof fullContainerHeight === 'number'
+        ? `${fullContainerHeight}px`
+        : fullContainerHeight
+    return `calc(${value} - ${headerHeight}px)`
+  }, [theme, headerHeight])
+
+  return (
+    <PageContainer disableGutters>
+      <Box ref={headerRef} sx={{ pb: 2, px: 2.5, pt: 3 }}>
+        <SearchInput
+          inputRef={inputRef}
+          onChange={onChange}
+          placeholder={t('main.searchNetwork')}
+          size="small"
+          onClear={onClear}
+        />
+      </Box>
+      <Box
+        ref={listRef}
+        style={{ height: listContainerHeight, overflow: 'auto' }}
+      >
+        <ChainList
+          parentRef={listRef}
+          formType={formType}
+          chains={filteredChains}
+          isLoading={isLoading}
+          onSelect={onSelect ?? onSelectChainFallback}
+          selectedChainId={selectedChainId}
+          hasSearchQuery={!!inputRef.current?.value}
+          inExpansion
+        />
+      </Box>
+    </PageContainer>
+  )
+}

package/src/components/Chains/SelectChainPageContent.tsx

@@ -0,0 +1,66 @@
+import type { ExtendedChain } from '@lifi/sdk'
+import { Box } from '@mui/material'
+import { type JSX, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useChainSearch } from '../../hooks/useChainSearch.js'
+import { useListHeight } from '../../hooks/useListHeight.js'
+import type { FormType } from '../../stores/form/types.js'
+import { PageContainer } from '../PageContainer.js'
+import { SearchInput } from '../Search/SearchInput.js'
+import { ChainList } from './ChainList.js'
+
+interface SelectChainPageContentProps {
+  formType: FormType
+  onSelect?: (chain: ExtendedChain) => void
+}
+
+export function SelectChainPageContent({
+  formType,
+  onSelect,
+}: SelectChainPageContentProps): JSX.Element {
+  const { t } = useTranslation()
+  const inputRef = useRef<HTMLInputElement>(null)
+  const headerRef = useRef<HTMLElement>(null)
+  const listRef = useRef<HTMLDivElement>(null)
+
+  const {
+    filteredChains,
+    isLoading,
+    selectedChainId,
+    onSelectChainFallback,
+    onChange,
+    onClear,
+  } = useChainSearch(formType, listRef, inputRef)
+
+  const { listHeight } = useListHeight({
+    listParentRef: listRef,
+    headerRef,
+  })
+
+  return (
+    <PageContainer disableGutters>
+      <Box ref={headerRef} sx={{ pb: 2, px: 3, pt: 1.5 }}>
+        <SearchInput
+          inputRef={inputRef}
+          onChange={onChange}
+          placeholder={t('main.searchNetwork')}
+          size="medium"
+          onClear={onClear}
+          autoFocus
+        />
+      </Box>
+      <Box ref={listRef} style={{ height: listHeight, overflow: 'auto' }}>
+        <ChainList
+          parentRef={listRef}
+          formType={formType}
+          chains={filteredChains}
+          isLoading={isLoading}
+          onSelect={onSelect ?? onSelectChainFallback}
+          selectedChainId={selectedChainId}
+          hasSearchQuery={!!inputRef.current?.value}
+          inExpansion={false}
+        />
+      </Box>
+    </PageContainer>
+  )
+}

package/src/components/Chains/VirtualizedChainList.tsx

@@ -1,6 +1,6 @@
 import type { ExtendedChain } from '@lifi/sdk'
 import { useVirtualizer } from '@tanstack/react-virtual'
-import type { RefObject } from 'react'
+import type { JSX, RefObject } from 'react'
 import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'
@@ -36,7 +36,7 @@ export const VirtualizedChainList = ({
   itemsSize,
   scrollElementRef,
   withPinnedChains,
-}: VirtualizedChainListProps) => {
+}: VirtualizedChainListProps): JSX.Element => {
   const { t } = useTranslation()
   const selectedChainIdRef = useRef(selectedChainId) // Store the initial selected chain ID to scroll to it once chains are loaded
   const hasScrolledRef = useRef(false)

package/src/components/ContextMenu.style.tsx

@@ -0,0 +1,13 @@
+import { IconButton, styled } from '@mui/material'
+import type React from 'react'
+
+export const ContextMenuButton: React.FC<
+  React.ComponentProps<typeof IconButton>
+> = styled(IconButton)(({ theme }) => ({
+  position: 'absolute',
+  top: theme.spacing(1.75),
+  right: theme.spacing(2),
+  '&:hover': {
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+  },
+}))

package/src/components/ContextMenu.tsx

@@ -0,0 +1,75 @@
+import MoreVertIcon from '@mui/icons-material/MoreVert'
+import type { SxProps, Theme } from '@mui/material'
+import { MenuItem } from '@mui/material'
+import { type JSX, useId, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ContextMenuButton } from './ContextMenu.style.js'
+import { Menu } from './Menu.js'
+
+export interface ContextMenuItemConfig {
+  icon: React.ReactNode
+  label: string
+  onClick: () => void
+}
+
+interface ContextMenuProps {
+  items: ContextMenuItemConfig[]
+  disabled?: boolean
+  buttonSx?: SxProps<Theme>
+}
+
+export const ContextMenu = ({
+  items,
+  disabled,
+  buttonSx,
+}: ContextMenuProps): JSX.Element => {
+  const { t } = useTranslation()
+  const menuId = useId()
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+  const open = Boolean(anchorEl)
+
+  const handleOpen = (e: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(e.currentTarget)
+  }
+
+  const closeMenu = () => {
+    setAnchorEl(null)
+  }
+
+  const handleItemClick = (onClick: () => void) => () => {
+    onClick()
+    closeMenu()
+  }
+
+  return (
+    <>
+      <ContextMenuButton
+        aria-label={t('button.options')}
+        aria-controls={open ? menuId : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? 'true' : undefined}
+        onClick={handleOpen}
+        sx={{ opacity: disabled ? 0.5 : 1, ...buttonSx }}
+        disableRipple
+      >
+        <MoreVertIcon fontSize="small" />
+      </ContextMenuButton>
+      <Menu
+        id={menuId}
+        elevation={0}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+        anchorEl={anchorEl}
+        open={open}
+        onClose={closeMenu}
+      >
+        {items.map((item) => (
+          <MenuItem key={item.label} onClick={handleItemClick(item.onClick)}>
+            {item.icon}
+            {item.label}
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  )
+}

package/src/components/ContractComponent/ItemPrice.tsx

@@ -33,5 +33,5 @@ export const ItemPrice: React.FC<ItemPriceProps> = ({
       })
     }
   }, [contractCalls, setFieldValue, token])
-  return <Token token={token} p={2} />
+  return <Token token={token} sx={{ p: 2 }} />
 }

package/src/components/ContractComponent/NFT/NFT.style.ts

@@ -1,8 +1,10 @@
 import { Avatar, styled } from '@mui/material'
+import type React from 'react'
 
-export const PreviewAvatar = styled(Avatar)(({ theme }) => ({
-  background: theme.vars.palette.background.paper,
-  width: 96,
-  height: 96,
-  borderRadius: theme.vars.shape.borderRadius,
-}))
+export const PreviewAvatar: React.FC<React.ComponentProps<typeof Avatar>> =
+  styled(Avatar)(({ theme }) => ({
+    background: theme.vars.palette.background.paper,
+    width: 96,
+    height: 96,
+    borderRadius: theme.vars.shape.borderRadius,
+  }))

package/src/components/ContractComponent/NFT/NFTBase.tsx

@@ -85,7 +85,7 @@ export const NFTBase: React.FC<NFTProps> = ({
           ) : null}
         </Box>
       </Box>
-      <Token token={token} isLoading={isLoading} mt={2} />
+      <Token token={token} isLoading={isLoading} sx={{ mt: 2 }} />
     </Box>
   )
 }