@lifi/widget 3.7.0-beta.1 → 3.7.0-beta.11

package/src/components/Switch.tsx

@@ -0,0 +1,59 @@
+import {
+  Switch as MuiSwitch,
+  alpha,
+  styled,
+  switchClasses,
+} from '@mui/material'
+
+export const Switch = styled(MuiSwitch)(({ theme }) => ({
+  width: 42,
+  height: 24,
+  padding: 0,
+  [`.${switchClasses.switchBase}`]: {
+    padding: 0,
+    margin: theme.spacing(0.25),
+    transitionDuration: theme.transitions.duration.standard,
+    [`&.${switchClasses.checked}`]: {
+      transform: 'translateX(18px)',
+      color: theme.palette.common.white,
+      [`& + .${switchClasses.track}`]: {
+        backgroundColor: theme.palette.primary.main,
+        opacity: 1,
+        border: 0,
+      },
+      [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {
+        opacity: 0.5,
+      },
+    },
+    [`&.Mui-focusVisible .${switchClasses.thumb}`]: {
+      color: theme.palette.primary.main,
+      border: '6px solid',
+      borderColor: theme.palette.common.white,
+    },
+    [`&.${switchClasses.disabled} .${switchClasses.thumb}`]: {
+      color:
+        theme.palette.mode === 'light'
+          ? alpha(theme.palette.common.black, 0.12)
+          : alpha(theme.palette.common.white, 0.12),
+    },
+    [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {
+      opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
+    },
+  },
+  [`.${switchClasses.thumb}`]: {
+    boxSizing: 'border-box',
+    width: 20,
+    height: 20,
+  },
+  [`.${switchClasses.track}`]: {
+    borderRadius: 24 / 2,
+    backgroundColor:
+      theme.palette.mode === 'light'
+        ? alpha(theme.palette.common.black, 0.16)
+        : alpha(theme.palette.common.white, 0.16),
+    opacity: 1,
+    transition: theme.transitions.create(['background-color'], {
+      duration: theme.transitions.duration.standard,
+    }),
+  },
+}))

package/src/components/Tabs/Tabs.style.tsx

@@ -0,0 +1,53 @@
+import type { TabProps } from '@mui/material'
+import {
+  Tab as MuiTab,
+  Tabs as MuiTabs,
+  alpha,
+  styled,
+  tabClasses,
+  tabsClasses,
+} from '@mui/material'
+
+export const Tabs = styled(MuiTabs)(({ theme }) => ({
+  flex: 1,
+  [`.${tabsClasses.indicator}`]: {
+    top: theme.spacing(0.5),
+    left: theme.spacing(0.5),
+    height: `calc(100% - ${theme.spacing(1)})`,
+    width: `calc(100% - ${theme.spacing(1)})`,
+  },
+  [`.${tabsClasses.fixed}`]: {
+    padding: theme.spacing(0.5),
+  },
+}))
+
+export const CardTabs = styled(Tabs)(({ theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'light'
+      ? alpha(theme.palette.common.black, 0.04)
+      : alpha(theme.palette.common.white, 0.08),
+  [`.${tabsClasses.indicator}`]: {
+    backgroundColor:
+      theme.palette.mode === 'light'
+        ? theme.palette.background.paper
+        : alpha(theme.palette.common.black, 0.56),
+  },
+}))
+
+export const Tab = styled(MuiTab)<TabProps>(({ theme }) => ({
+  zIndex: 1,
+  flex: 1,
+  textTransform: 'none',
+  fontSize: '1rem',
+  fontWeight: 700,
+  color:
+    theme.palette.mode === 'light'
+      ? theme.palette.common.black
+      : theme.palette.common.white,
+  [`&.${tabClasses.selected}`]: {
+    color:
+      theme.palette.mode === 'light'
+        ? theme.palette.common.black
+        : theme.palette.common.white,
+  },
+}))

package/src/components/TextFitter/TextFitter.tsx

@@ -0,0 +1,87 @@
+import { useTheme } from '@mui/material'
+import type { PropsWithChildren } from 'react'
+import { useCallback, useLayoutEffect, useRef, useState } from 'react'
+import { useInView } from 'react-intersection-observer'
+import type { TextFitterProps } from './types.js'
+
+const initialState = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+}
+
+export const TextFitter: React.FC<PropsWithChildren<TextFitterProps>> = ({
+  children,
+  width = '100%',
+  height,
+  preserveAspectRatio = 'xMinYMid meet',
+  textStyle,
+  svgStyle,
+  cropTop,
+  cropBottom,
+  onFit,
+}) => {
+  const theme = useTheme()
+  const textRef = useRef<SVGTextElement>(null)
+  const [viewBox, setViewBox] = useState<Partial<DOMRect>>(initialState)
+
+  const [ref] = useInView({
+    onChange(inView) {
+      if (inView) {
+        calculateBox()
+      }
+    },
+  })
+
+  const calculateBox = useCallback(() => {
+    if (!textRef.current) {
+      return
+    }
+    const box = textRef.current.getBBox()
+    if (cropTop) {
+      box.y += box.height * cropTop
+      box.height -= box.height * cropTop
+    }
+    if (cropBottom) {
+      box.height -= box.height * cropBottom
+    }
+    setViewBox(box)
+    onFit?.()
+  }, [cropBottom, cropTop, onFit])
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies:
+  useLayoutEffect(() => {
+    calculateBox()
+  }, [calculateBox, children])
+
+  useLayoutEffect(() => {
+    if (document.fonts) {
+      document.fonts.ready.then(() => {
+        calculateBox()
+      })
+    }
+  }, [calculateBox])
+
+  return (
+    <svg
+      style={svgStyle}
+      viewBox={`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`}
+      width={width}
+      height={height}
+      // height={
+      //   textRect.height && maxHeight && textRect.height >= maxHeight
+      //     ? maxHeight
+      //     : height
+      // }
+      preserveAspectRatio={preserveAspectRatio}
+      fill={theme.palette.text.primary}
+      ref={ref}
+    >
+      <title>{children}</title>
+      <text x={0} y={0} style={textStyle} ref={textRef}>
+        {children}
+      </text>
+    </svg>
+  )
+}

package/src/components/TextFitter/types.ts

@@ -0,0 +1,13 @@
+import type { CSSProperties } from 'react'
+
+export interface TextFitterProps {
+  textStyle?: CSSProperties
+  svgStyle?: CSSProperties
+  onFit?(): void
+  maxHeight?: string | number
+  height?: string | number
+  width?: string | number
+  preserveAspectRatio?: string
+  cropTop?: number
+  cropBottom?: number
+}

package/src/components/ToAddressRequiredMessage.tsx

@@ -0,0 +1,38 @@
+import type { Route } from '@lifi/sdk'
+import { Wallet } from '@mui/icons-material'
+import type { BoxProps } from '@mui/material'
+import { Box, Collapse, Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { useToAddressRequirements } from '../hooks/useToAddressRequirements.js'
+import { useFieldValues } from '../stores/form/useFieldValues.js'
+import { AlertMessage } from './AlertMessage/AlertMessage.js'
+
+interface ToAddressRequiredMessageProps extends BoxProps {
+  route?: Route
+}
+
+export const ToAddressRequiredMessage: React.FC<
+  ToAddressRequiredMessageProps
+> = ({ route, ...props }) => {
+  const { t } = useTranslation()
+  const [toAddress] = useFieldValues('toAddress')
+  const { requiredToAddress } = useToAddressRequirements()
+
+  const showMessage = route && requiredToAddress && !toAddress
+
+  return (
+    <Collapse timeout={225} in={showMessage} unmountOnExit mountOnEnter>
+      <Box {...props}>
+        <AlertMessage
+          title={
+            <Typography variant="body2" px={1} color="text.primary">
+              {t('info.message.toAddressIsRequired')}
+            </Typography>
+          }
+          icon={<Wallet />}
+          multilineTitle
+        />
+      </Box>
+    </Collapse>
+  )
+}

package/src/components/Token/Token.style.tsx

@@ -0,0 +1,30 @@
+import { Box, Typography, alpha, styled } from '@mui/material'
+
+export const TextSecondaryContainer = styled(Box)(() => ({
+  display: 'flex',
+  alignItems: 'center',
+  flexWrap: 'wrap',
+  flex: 1,
+}))
+
+export const TextSecondary = styled(Typography, {
+  shouldForwardProp: (prop: string) => !['dot'].includes(prop),
+})<{ dot?: boolean }>(({ theme, dot }) => ({
+  fontSize: 12,
+  lineHeight: 1,
+  fontWeight: 500,
+  color: dot
+    ? alpha(theme.palette.text.secondary, 0.56)
+    : theme.palette.text.secondary,
+  whiteSpace: 'nowrap',
+}))
+
+export const TokenDivider = styled(Box)(({ theme }) => ({
+  height: 16,
+  borderLeftWidth: 2,
+  borderLeftStyle: 'solid',
+  borderColor:
+    theme.palette.mode === 'light'
+      ? theme.palette.grey[300]
+      : theme.palette.grey[800],
+}))

package/src/components/Token/Token.tsx

@@ -0,0 +1,247 @@
+import type { LiFiStep, TokenAmount } from '@lifi/sdk'
+import type { BoxProps } from '@mui/material'
+import { Box, Grow, Skeleton, Tooltip } from '@mui/material'
+import type { FC, PropsWithChildren, ReactElement } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useChain } from '../../hooks/useChain.js'
+import { useToken } from '../../hooks/useToken.js'
+import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
+import { AvatarBadgedSkeleton } from '../Avatar/Avatar.js'
+import { SmallAvatar } from '../Avatar/SmallAvatar.js'
+import { TokenAvatar } from '../Avatar/TokenAvatar.js'
+import { TextFitter } from '../TextFitter/TextFitter.js'
+import { TextSecondary, TextSecondaryContainer } from './Token.style.js'
+
+interface TokenProps {
+  token: TokenAmount
+  impactToken?: TokenAmount
+  enableImpactTokenTooltip?: boolean
+  step?: LiFiStep
+  stepVisible?: boolean
+  disableDescription?: boolean
+  isLoading?: boolean
+}
+
+export const Token: FC<TokenProps & BoxProps> = ({ token, ...other }) => {
+  if (!token.priceUSD || !token.logoURI) {
+    return <TokenFallback token={token} {...other} />
+  }
+  return <TokenBase token={token} {...other} />
+}
+
+export const TokenFallback: FC<TokenProps & BoxProps> = ({
+  token,
+  isLoading,
+  ...other
+}) => {
+  const { token: chainToken, isLoading: isLoadingToken } = useToken(
+    token.chainId,
+    token.address
+  )
+
+  return (
+    <TokenBase
+      token={{ ...token, ...chainToken } as TokenAmount}
+      isLoading={isLoading || isLoadingToken}
+      {...other}
+    />
+  )
+}
+
+export const TokenBase: FC<TokenProps & BoxProps> = ({
+  token,
+  impactToken,
+  enableImpactTokenTooltip,
+  step,
+  stepVisible,
+  disableDescription,
+  isLoading,
+  ...other
+}) => {
+  const { t, i18n } = useTranslation()
+  const { chain } = useChain(token?.chainId)
+
+  if (isLoading) {
+    return (
+      <TokenSkeleton
+        token={token}
+        step={step}
+        disableDescription={disableDescription}
+        {...other}
+      />
+    )
+  }
+
+  const tokenAmount = formatTokenAmount(token.amount, token.decimals)
+  const tokenPrice = formatTokenPrice(tokenAmount, token.priceUSD)
+
+  let priceImpact: number | undefined = undefined
+  let priceImpactPercent: number | undefined = undefined
+  if (impactToken) {
+    const impactTokenAmount = formatTokenAmount(
+      impactToken.amount,
+      impactToken.decimals
+    )
+    const impactTokenPrice =
+      formatTokenPrice(impactTokenAmount, impactToken.priceUSD) || 0.01
+
+    priceImpact = tokenPrice / impactTokenPrice - 1
+    priceImpactPercent = priceImpact * 100
+  }
+
+  const tokenOnChain = !disableDescription ? (
+    <TextSecondary>
+      {t('main.tokenOnChain', {
+        tokenSymbol: token.symbol,
+        chainName: chain?.name,
+      })}
+    </TextSecondary>
+  ) : null
+
+  return (
+    <Box flex={1} display="flex" alignItems="center" {...other}>
+      <TokenAvatar
+        token={token}
+        chain={chain}
+        isLoading={isLoading}
+        sx={{ marginRight: 2 }}
+      />
+      <Box flex={1}>
+        <Box mb={0.5} height={24} display="flex" alignItems="center">
+          <TextFitter
+            height={30}
+            textStyle={{
+              fontWeight: 700,
+            }}
+          >
+            {t('format.number', {
+              value: tokenAmount,
+            })}
+          </TextFitter>
+        </Box>
+        <TextSecondaryContainer component="span">
+          <TextSecondary>
+            {t('format.currency', {
+              value: tokenPrice,
+            })}
+          </TextSecondary>
+          {impactToken ? (
+            <TextSecondary px={0.5} dot>
+              &#x2022;
+            </TextSecondary>
+          ) : null}
+          {impactToken ? (
+            enableImpactTokenTooltip ? (
+              <Tooltip title={t('tooltip.priceImpact')} sx={{ cursor: 'help' }}>
+                <TextSecondary>
+                  {t('format.percent', { value: priceImpact })}
+                </TextSecondary>
+              </Tooltip>
+            ) : (
+              <TextSecondary
+                title={priceImpactPercent?.toLocaleString(i18n.language, {
+                  maximumFractionDigits: 9,
+                })}
+              >
+                {t('format.percent', { value: priceImpact })}
+              </TextSecondary>
+            )
+          ) : null}
+          {!disableDescription ? (
+            <TextSecondary px={0.5} dot>
+              &#x2022;
+            </TextSecondary>
+          ) : null}
+          {step ? (
+            <TokenStep
+              step={step}
+              stepVisible={stepVisible}
+              disableDescription={disableDescription}
+            >
+              {tokenOnChain}
+            </TokenStep>
+          ) : (
+            tokenOnChain
+          )}
+        </TextSecondaryContainer>
+      </Box>
+    </Box>
+  )
+}
+
+const TokenStep: FC<PropsWithChildren<Partial<TokenProps>>> = ({
+  step,
+  stepVisible,
+  disableDescription,
+  children,
+}) => {
+  return (
+    <Box flex={1} position="relative" overflow="hidden" height={16}>
+      <Grow
+        in={!stepVisible && !disableDescription}
+        style={{
+          position: 'absolute',
+        }}
+        appear={false}
+        timeout={225}
+      >
+        <Box display="flex" alignItems="center" height={16}>
+          {children as ReactElement}
+        </Box>
+      </Grow>
+      <Grow
+        in={stepVisible}
+        style={{
+          position: 'absolute',
+        }}
+        appear={false}
+        timeout={225}
+      >
+        <Box display="flex" alignItems="center" height={16}>
+          <Box mr={0.75} height={16}>
+            <SmallAvatar
+              src={step?.toolDetails.logoURI}
+              alt={step?.toolDetails.name}
+            >
+              {step?.toolDetails.name[0]}
+            </SmallAvatar>
+          </Box>
+          <TextSecondary>{step?.toolDetails.name}</TextSecondary>
+        </Box>
+      </Grow>
+    </Box>
+  )
+}
+
+export const TokenSkeleton: FC<Partial<TokenProps> & BoxProps> = ({
+  step,
+  disableDescription,
+  ...other
+}) => {
+  return (
+    <Box flex={1} {...other}>
+      <Box display="flex" flex={1} alignItems="center">
+        <AvatarBadgedSkeleton sx={{ marginRight: 2 }} />
+        <Box flex={1}>
+          <Skeleton width={112} height={24} variant="text" />
+          <TextSecondaryContainer component="span">
+            <Skeleton
+              width={48}
+              height={12}
+              variant="rounded"
+              sx={{ marginTop: 0.5 }}
+            />
+            {!step && !disableDescription ? (
+              <Skeleton
+                width={96}
+                height={12}
+                variant="rounded"
+                sx={{ marginTop: 0.5, marginLeft: 1.5 }}
+              />
+            ) : null}
+          </TextSecondaryContainer>
+        </Box>
+      </Box>
+    </Box>
+  )
+}

package/src/components/TokenList/TokenList.style.tsx

@@ -0,0 +1,30 @@
+import type { IconButtonProps, LinkProps } from '@mui/material'
+import { IconButton as MuiIconButton, styled } from '@mui/material'
+import { getContrastAlphaColor } from '../../utils/colors.js'
+import { ListItem as ListItemBase } from '../ListItem/ListItem.js'
+
+export const ListItem = styled(ListItemBase)(() => ({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+}))
+
+export const IconButton = styled(MuiIconButton)<IconButtonProps & LinkProps>(
+  ({ theme }) => ({
+    lineHeight: 1,
+    fontSize: 12,
+    fontWeight: 400,
+    padding: theme.spacing(0.375, 0.375),
+    margin: theme.spacing(0, 0, 0, 0.25),
+    color: 'inherit',
+    backgroundColor: 'unset',
+    minWidth: 'unset',
+    borderRadius: theme.shape.borderRadiusTertiary,
+    '&:hover': {
+      backgroundColor: getContrastAlphaColor(theme, 0.04),
+    },
+    svg: {
+      fontSize: 14,
+    },
+  })
+)

package/src/components/TokenList/TokenList.tsx

@@ -0,0 +1,99 @@
+import { useAccount } from '@lifi/wallet-management'
+import { Box } from '@mui/material'
+import type { FC } from 'react'
+import { useChain } from '../../hooks/useChain.js'
+import { useDebouncedWatch } from '../../hooks/useDebouncedWatch.js'
+import { useTokenBalances } from '../../hooks/useTokenBalances.js'
+import { useTokenSearch } from '../../hooks/useTokenSearch.js'
+import { FormKeyHelper } from '../../stores/form/types.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import type { TokenAmount } from '../../types/token.js'
+import { TokenNotFound } from './TokenNotFound.js'
+import { VirtualizedTokenList } from './VirtualizedTokenList.js'
+import type { TokenListProps } from './types.js'
+import { useTokenSelect } from './useTokenSelect.js'
+import { filteredTokensComparator } from './utils.js'
+
+export const TokenList: FC<TokenListProps> = ({
+  formType,
+  parentRef,
+  height,
+  onClick,
+}) => {
+  const [selectedChainId] = useFieldValues(FormKeyHelper.getChainKey(formType))
+  const [tokenSearchFilter]: string[] = useDebouncedWatch(
+    320,
+    'tokenSearchFilter'
+  )
+
+  const { chain, isLoading: isChainLoading } = useChain(selectedChainId)
+  const { account } = useAccount({ chainType: chain?.chainType })
+
+  const {
+    tokens: chainTokens,
+    tokensWithBalance,
+    isLoading: isTokensLoading,
+    isBalanceLoading,
+    featuredTokens,
+    popularTokens,
+  } = useTokenBalances(selectedChainId)
+
+  let filteredTokens = (tokensWithBalance ?? chainTokens ?? []) as TokenAmount[]
+  const normalizedSearchFilter = tokenSearchFilter?.replaceAll('$', '')
+  const searchFilter = normalizedSearchFilter?.toUpperCase() ?? ''
+
+  filteredTokens = tokenSearchFilter
+    ? filteredTokens
+        .filter(
+          (token) =>
+            token.name?.toUpperCase().includes(searchFilter) ||
+            token.symbol.toUpperCase().includes(searchFilter) ||
+            token.address.toUpperCase().includes(searchFilter)
+        )
+        .sort(filteredTokensComparator(searchFilter))
+    : filteredTokens
+
+  const tokenSearchEnabled =
+    !isTokensLoading &&
+    !filteredTokens.length &&
+    !!tokenSearchFilter &&
+    !!selectedChainId
+
+  const { token: searchedToken, isLoading: isSearchedTokenLoading } =
+    useTokenSearch(selectedChainId, normalizedSearchFilter, tokenSearchEnabled)
+
+  const isLoading =
+    isTokensLoading ||
+    isChainLoading ||
+    (tokenSearchEnabled && isSearchedTokenLoading)
+
+  const tokens = filteredTokens.length
+    ? filteredTokens
+    : searchedToken
+      ? [searchedToken]
+      : filteredTokens
+
+  const handleTokenClick = useTokenSelect(formType, onClick)
+  const showCategories =
+    Boolean(featuredTokens?.length || popularTokens?.length) &&
+    !tokenSearchFilter
+
+  return (
+    <Box ref={parentRef} style={{ height, overflow: 'auto' }}>
+      {!tokens.length && !isLoading ? (
+        <TokenNotFound formType={formType} />
+      ) : null}
+      <VirtualizedTokenList
+        account={account}
+        tokens={tokens}
+        scrollElementRef={parentRef}
+        chainId={selectedChainId}
+        chain={chain}
+        isLoading={isLoading}
+        isBalanceLoading={isBalanceLoading}
+        showCategories={showCategories}
+        onClick={handleTokenClick}
+      />
+    </Box>
+  )
+}