@lifi/widget 0.0.0-preview-6cc63bac

package/src/components/Chains/VirtualizedChainList.tsx

@@ -0,0 +1,222 @@
+import type { ExtendedChain } from '@lifi/sdk'
+import { useVirtualizer } from '@tanstack/react-virtual'
+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'
+import { FormKeyHelper, type FormType } from '../../stores/form/types.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { AllChainsAvatar } from './AllChainsAvatar.js'
+import {
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemButton,
+  ListItemText,
+} from './ChainList.style.js'
+import { ChainListItem } from './ChainListItem.js'
+
+interface VirtualizedChainListProps {
+  scrollElementRef: RefObject<HTMLDivElement | null>
+  formType: FormType
+  chains: ExtendedChain[]
+  onSelect: (chain: ExtendedChain) => void
+  selectedChainId?: number
+  itemsSize: 'small' | 'medium'
+  hasSearchQuery: boolean
+  withPinnedChains: boolean
+}
+
+export const VirtualizedChainList = ({
+  formType,
+  chains,
+  hasSearchQuery,
+  onSelect,
+  selectedChainId,
+  itemsSize,
+  scrollElementRef,
+  withPinnedChains,
+}: 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)
+  const [
+    pinnedChains,
+    setPinnedChain,
+    isAllNetworks,
+    setIsAllNetworks,
+    showAllNetworks,
+  ] = useChainOrderStore((state) => [
+    state.pinnedChains,
+    state.setPinnedChain,
+    state[`${formType}IsAllNetworks`],
+    state.setIsAllNetworks,
+    state[`${formType}ShowAllNetworks`],
+  ])
+  const { setFieldValue } = useFieldActions()
+  const onPin = useCallback(
+    (chainId: number) => {
+      setPinnedChain(chainId)
+    },
+    [setPinnedChain]
+  )
+
+  const sortedChains = useMemo(() => {
+    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 showAllNetworksOption = showAllNetworks && !hasSearchQuery
+
+  const getItemKey = useCallback(
+    (index: number) => {
+      if (showAllNetworksOption && index === 0) {
+        return 'all-chains'
+      }
+      const chainIndex = index - (showAllNetworksOption ? 1 : 0)
+      return `${sortedChains[chainIndex].id}-${index}`
+    },
+    [sortedChains, showAllNetworksOption]
+  )
+
+  const onChainSelect = useCallback(
+    (chain: ExtendedChain) => {
+      setIsAllNetworks(false, formType)
+      onSelect(chain)
+    },
+    [onSelect, setIsAllNetworks, formType]
+  )
+
+  const { getVirtualItems, getTotalSize, measure, range, getOffsetForIndex } =
+    useVirtualizer({
+      count: sortedChains.length + (showAllNetworksOption ? 1 : 0), // +1 for the all networks item
+      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])
+
+  const scrollToIndex = useCallback(
+    (index: number) => {
+      requestAnimationFrame(() => {
+        const offsetInfo = getOffsetForIndex(index, 'center')
+        if (!scrollElementRef.current || !offsetInfo) {
+          return
+        }
+        scrollElementRef.current.scrollTo({
+          top: offsetInfo[0],
+          left: 0,
+          behavior: 'smooth',
+        })
+      })
+    },
+    [getOffsetForIndex, scrollElementRef.current]
+  )
+
+  useEffect(() => {
+    // Mark as scrolled if "All Networks" is initially selected
+    if (isAllNetworks) {
+      hasScrolledRef.current = true
+      return
+    }
+
+    // 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
+        ) {
+          scrollToIndex(selectedChainIndex)
+        }
+      }
+      hasScrolledRef.current = true // Mark as scrolled (when needed)
+    }
+  }, [sortedChains, scrollToIndex, range, isAllNetworks])
+
+  const selectAllNetworks = useCallback(() => {
+    setIsAllNetworks(true, formType)
+    // Reset the chain and token fields when selecting all networks
+    setFieldValue(FormKeyHelper.getChainKey(formType), '', { isTouched: true })
+    setFieldValue(FormKeyHelper.getTokenKey(formType), '', { isTouched: true })
+  }, [setIsAllNetworks, formType, setFieldValue])
+
+  return (
+    <List
+      className="long-list"
+      style={{ height: getTotalSize() }}
+      disablePadding
+    >
+      {getVirtualItems().map((item) => {
+        if (showAllNetworksOption && item.index === 0) {
+          return (
+            <ListItem
+              key={item.key}
+              style={{
+                height: `${itemsSize}px`,
+                transform: `translateY(${item.start}px)`,
+                padding: 0,
+              }}
+            >
+              <ListItemButton
+                onClick={selectAllNetworks}
+                selected={isAllNetworks}
+                size={itemsSize}
+              >
+                <ListItemAvatar size={itemsSize}>
+                  <AllChainsAvatar chains={chains} size={itemsSize} />
+                </ListItemAvatar>
+                <ListItemText
+                  primary={t('main.allNetworks')}
+                  size={itemsSize}
+                />
+              </ListItemButton>
+            </ListItem>
+          )
+        }
+
+        const chain = sortedChains[item.index - (showAllNetworksOption ? 1 : 0)]
+        return (
+          <ChainListItem
+            key={item.key}
+            chain={chain}
+            onSelect={onChainSelect}
+            selected={!isAllNetworks && chain.id === selectedChainId}
+            itemsSize={itemsSize}
+            size={item.size}
+            start={item.start}
+            withPin={withPinnedChains}
+            isPinned={pinnedChains.includes(chain.id)}
+            onPin={onPin}
+          />
+        )
+      })}
+    </List>
+  )
+}

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/ContractComponent.tsx

@@ -0,0 +1,14 @@
+import type { CardProps } from '@mui/material'
+import type { PropsWithChildren } from 'react'
+import { Card } from '../Card/Card.js'
+
+export const ContractComponent: React.FC<PropsWithChildren<CardProps>> = ({
+  children,
+  ...props
+}) => {
+  if (!children) {
+    return null
+  }
+
+  return <Card {...props}>{children}</Card>
+}

package/src/components/ContractComponent/ItemPrice.tsx

@@ -0,0 +1,37 @@
+import { type ContractCall, formatUnits } from '@lifi/sdk'
+import { useEffect } from 'react'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import type { TokenAmount } from '../../types/token.js'
+import { Token } from '../Token/Token.js'
+
+export interface ItemPriceProps {
+  token: TokenAmount
+  contractCalls?: ContractCall[]
+}
+
+export const ItemPrice: React.FC<ItemPriceProps> = ({
+  token,
+  contractCalls,
+}) => {
+  const { setFieldValue } = useFieldActions()
+
+  useEffect(() => {
+    if (token) {
+      setFieldValue('toChain', token.chainId, { isTouched: true })
+      setFieldValue('toToken', token.address, { isTouched: true })
+      setFieldValue(
+        'toAmount',
+        token.amount ? formatUnits(token.amount, token.decimals) : '',
+        {
+          isTouched: true,
+        }
+      )
+    }
+    if (contractCalls) {
+      setFieldValue('contractCalls', contractCalls, {
+        isTouched: true,
+      })
+    }
+  }, [contractCalls, setFieldValue, token])
+  return <Token token={token} sx={{ p: 2 }} />
+}

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

@@ -0,0 +1,10 @@
+import { Avatar, styled } from '@mui/material'
+import type React from 'react'
+
+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/NFT.tsx

@@ -0,0 +1,46 @@
+import { formatUnits } from '@lifi/sdk'
+import { useEffect } from 'react'
+import { useFieldActions } from '../../../stores/form/useFieldActions.js'
+import { NFTBase } from './NFTBase.js'
+import type { NFTProps } from './types.js'
+
+export const NFT: React.FC<NFTProps> = ({
+  imageUrl,
+  isLoading,
+  collectionName,
+  assetName,
+  owner,
+  token,
+  contractCall,
+}) => {
+  const { setFieldValue } = useFieldActions()
+
+  useEffect(() => {
+    if (token) {
+      setFieldValue('toChain', token.chainId, { isTouched: true })
+      setFieldValue('toToken', token.address, { isTouched: true })
+      setFieldValue(
+        'toAmount',
+        token.amount ? formatUnits(token.amount, token.decimals) : '',
+        {
+          isTouched: true,
+        }
+      )
+    }
+    if (contractCall) {
+      setFieldValue('contractCalls', [contractCall], {
+        isTouched: true,
+      })
+    }
+  }, [contractCall, setFieldValue, token])
+  return (
+    <NFTBase
+      isLoading={isLoading}
+      imageUrl={imageUrl}
+      collectionName={collectionName}
+      assetName={assetName}
+      owner={owner}
+      token={token}
+    />
+  )
+}

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

@@ -0,0 +1,91 @@
+import { Box, Link, Skeleton, Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { Token } from '../../Token/Token.js'
+import { PreviewAvatar } from './NFT.style.js'
+import type { NFTProps } from './types.js'
+
+export const NFTBase: React.FC<NFTProps> = ({
+  imageUrl,
+  isLoading,
+  collectionName,
+  assetName,
+  owner,
+  token,
+}) => {
+  const { t } = useTranslation()
+  return (
+    <Box
+      sx={{
+        p: 2,
+      }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+        }}
+      >
+        {isLoading ? (
+          <Skeleton
+            width={96}
+            height={96}
+            variant="rectangular"
+            sx={{ borderRadius: 1 }}
+          />
+        ) : (
+          <PreviewAvatar src={imageUrl} />
+        )}
+        <Box
+          sx={{
+            ml: 2,
+          }}
+        >
+          {isLoading ? (
+            <Skeleton width={144} height={21} variant="text" />
+          ) : (
+            <Typography
+              sx={{
+                fontSize: 14,
+                color: 'text.secondary',
+              }}
+            >
+              {collectionName}
+            </Typography>
+          )}
+          {isLoading ? (
+            <Skeleton width={112} height={27} variant="text" />
+          ) : (
+            <Typography
+              sx={{
+                fontSize: 18,
+                fontWeight: 600,
+              }}
+            >
+              {assetName}
+            </Typography>
+          )}
+          {isLoading ? (
+            <Skeleton width={128} height={21} variant="text" />
+          ) : owner ? (
+            <Typography
+              sx={{
+                fontSize: 14,
+                color: 'text.secondary',
+              }}
+            >
+              {t('main.ownedBy')}{' '}
+              <Link
+                href={owner.url}
+                target="_blank"
+                underline="none"
+                color="primary"
+              >
+                {owner.name}
+              </Link>
+            </Typography>
+          ) : null}
+        </Box>
+      </Box>
+      <Token token={token} isLoading={isLoading} sx={{ mt: 2 }} />
+    </Box>
+  )
+}

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

@@ -0,0 +1,19 @@
+import type { ContractCall, TokenAmount } from '@lifi/sdk'
+
+export interface NFTBaseProps {
+  imageUrl?: string
+  collectionName?: string
+  assetName?: string
+  isLoading?: boolean
+  owner?: NFTOwner
+  token: TokenAmount
+}
+
+export interface NFTProps extends NFTBaseProps {
+  contractCall?: ContractCall
+}
+
+export interface NFTOwner {
+  name?: string
+  url?: string
+}

package/src/components/Dialog/Dialog.style.tsx

@@ -0,0 +1,59 @@
+import {
+  Box,
+  DialogActions as MuiDialogActions,
+  DialogContent as MuiDialogContent,
+  DialogContentText as MuiDialogContentText,
+  DialogTitle as MuiDialogTitle,
+  styled,
+} from '@mui/material'
+import type React from 'react'
+
+export const DialogContainer: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: theme.spacing(1.5),
+    padding: theme.spacing(4),
+  }))
+
+export const DialogTitle: React.FC<
+  React.ComponentProps<typeof MuiDialogTitle>
+> = styled(MuiDialogTitle)({
+  padding: 0,
+  fontWeight: 700,
+  fontSize: 18,
+  lineHeight: 1.3334,
+  textAlign: 'center',
+})
+
+export const DialogContent: React.FC<
+  React.ComponentProps<typeof MuiDialogContent>
+> = styled(MuiDialogContent)(({ theme }) => ({
+  padding: 0,
+  marginBottom: theme.spacing(2),
+}))
+
+export const DialogActions: React.FC<
+  React.ComponentProps<typeof MuiDialogActions>
+> = styled(MuiDialogActions)(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'center',
+  gap: theme.spacing(1.5),
+  width: '100%',
+  padding: 0,
+  '& .MuiButton-root': {
+    flex: 1,
+    margin: 0,
+  },
+}))
+
+export const DialogContentText: React.FC<
+  React.ComponentProps<typeof MuiDialogContentText>
+> = styled(MuiDialogContentText)(({ theme }) => ({
+  padding: 0,
+  fontSize: 14,
+  fontWeight: 500,
+  lineHeight: 1.3334,
+  color: theme.vars.palette.text.primary,
+}))

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,49 @@
+import type { DialogProps, Theme } from '@mui/material'
+import { Dialog as MuiDialog } from '@mui/material'
+import type { PropsWithChildren } from 'react'
+import { useGetScrollableContainer } from '../../hooks/useScrollableContainer.js'
+
+export const modalProps: { sx: { position: string; overflow: string } } = {
+  sx: {
+    position: 'absolute',
+    overflow: 'hidden',
+  },
+}
+
+export const slotProps: DialogProps['slotProps'] = {
+  paper: {
+    sx: (theme: Theme) => ({
+      position: 'absolute',
+      backgroundImage: 'none',
+      backgroundColor: theme.vars.palette.background.default,
+      borderTopLeftRadius: theme.vars.shape.borderRadius,
+      borderTopRightRadius: theme.vars.shape.borderRadius,
+    }),
+  },
+  backdrop: {
+    sx: {
+      position: 'absolute',
+      backgroundColor: 'rgb(0 0 0 / 32%)',
+      backdropFilter: 'blur(3px)',
+    },
+  },
+}
+
+export const Dialog: React.FC<PropsWithChildren<DialogProps>> = ({
+  children,
+  open,
+  onClose,
+}) => {
+  const getContainer = useGetScrollableContainer()
+  return (
+    <MuiDialog
+      container={getContainer}
+      open={open}
+      onClose={onClose}
+      sx={modalProps.sx}
+      slotProps={slotProps}
+    >
+      {children}
+    </MuiDialog>
+  )
+}

package/src/components/EmptyListIndicator/EmptyListIndicator.style.tsx

@@ -0,0 +1,38 @@
+import { Container, styled, Typography } from '@mui/material'
+import type React from 'react'
+
+export const EmptyListContainer: React.FC<
+  React.ComponentProps<typeof Container>
+> = styled(Container)(({ theme }) => ({
+  display: 'flex',
+  flex: 1,
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  paddingTop: theme.spacing(12),
+  paddingBottom: theme.spacing(12),
+}))
+
+export const EmptyListIcon: React.FC<React.ComponentProps<typeof Typography>> =
+  styled(Typography)({
+    fontSize: 48,
+    '& > svg': {
+      fontSize: 'inherit',
+    },
+  })
+
+export const EmptyListTitle: React.FC<React.ComponentProps<typeof Typography>> =
+  styled(Typography)(({ theme }) => ({
+    fontSize: 18,
+    fontWeight: 700,
+    marginTop: theme.spacing(2),
+  }))
+
+export const EmptyListMessage: React.FC<
+  React.ComponentProps<typeof Typography>
+> = styled(Typography)(({ theme }) => ({
+  fontSize: 14,
+  color: theme.vars.palette.text.secondary,
+  textAlign: 'center',
+  marginTop: theme.spacing(2),
+}))