@lifi/widget 3.7.0 → 3.8.0-beta.1

package/src/components/ChainSelect/ChainSelect.style.tsx

@@ -0,0 +1,17 @@
+import { Box, styled } from '@mui/material'
+import { Card } from '../../components/Card/Card.js'
+
+export const ChainCard = styled(Card)({
+  display: 'grid',
+  placeItems: 'center',
+  minWidth: 52,
+  height: 56,
+})
+
+export const ChainContainer = styled(Box)(({ theme }) => ({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fit, minmax(52px, 1fr))',
+  gridAutoRows: '56px',
+  justifyContent: 'space-between',
+  gap: theme.spacing(1.5),
+}))

package/src/components/ChainSelect/ChainSelect.tsx

@@ -0,0 +1,99 @@
+import type { EVMChain } from '@lifi/sdk'
+import { Avatar, Box, Skeleton, Tooltip, Typography } from '@mui/material'
+import { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import {
+  maxChainsToOrder,
+  maxChainsToShow,
+} from '../../stores/chains/createChainOrderStore.js'
+import type { FormTypeProps } from '../../stores/form/types.js'
+import { FormKeyHelper } from '../../stores/form/types.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { ChainCard, ChainContainer } from './ChainSelect.style.js'
+import { useChainSelect } from './useChainSelect.js'
+
+export const ChainSelect = ({ formType }: FormTypeProps) => {
+  const navigate = useNavigate()
+  const {
+    chainOrder,
+    chains,
+    getChains,
+    isLoading,
+    setChainOrder,
+    setCurrentChain,
+  } = useChainSelect(formType)
+
+  const [chainId] = useFieldValues(FormKeyHelper.getChainKey(formType))
+
+  useEffect(() => {
+    if (chainId) {
+      const hasChainInOrderedList = chainOrder.includes(chainId)
+      // If we don't have a chain in the ordered chain list we should add it.
+      if (!hasChainInOrderedList) {
+        setChainOrder(chainId, formType)
+      }
+    }
+  }, [chainId, chainOrder, formType, setChainOrder])
+
+  const showAllChains = () => {
+    navigate(navigationRoutes[`${formType}Chain`])
+  }
+
+  // We check if we can accommodate all the chains on the grid
+  // If there are more than 10 chains we show the number of hidden chains as the last one tile
+  const chainsToHide =
+    chains?.length === maxChainsToShow
+      ? 0
+      : (chains?.length ?? 0) - maxChainsToOrder
+
+  // When there is less than 10 chains we don't care about the order
+  const chainsToShow = chainsToHide > 0 ? getChains() : chains
+
+  return (
+    <ChainContainer>
+      {isLoading
+        ? Array.from({ length: maxChainsToOrder }).map((_, index) => (
+            <Skeleton
+              key={index}
+              variant="rectangular"
+              width={56}
+              height={56}
+              sx={{ borderRadius: 1 }}
+            />
+          ))
+        : chainsToShow?.map((chain: EVMChain) => (
+            <Tooltip key={chain.id} title={chain.name} enterNextDelay={100}>
+              <ChainCard
+                component="button"
+                onClick={() => setCurrentChain(chain.id)}
+                type={chainId === chain.id ? 'selected' : 'default'}
+                selectionColor="primary"
+              >
+                <Avatar
+                  src={chain.logoURI}
+                  alt={chain.key}
+                  sx={{ width: 40, height: 40 }}
+                >
+                  {chain.name[0]}
+                </Avatar>
+              </ChainCard>
+            </Tooltip>
+          ))}
+      {chainsToHide > 0 ? (
+        <ChainCard component="button" onClick={showAllChains}>
+          <Box
+            sx={{
+              width: 40,
+              height: 40,
+              display: 'grid',
+              placeItems: 'center',
+            }}
+          >
+            <Typography fontWeight={500}>+{chainsToHide}</Typography>
+          </Box>
+        </ChainCard>
+      ) : null}
+    </ChainContainer>
+  )
+}

package/src/components/ChainSelect/useChainSelect.ts

@@ -0,0 +1,73 @@
+import type { EVMChain } from '@lifi/sdk'
+import { useChains } from '../../hooks/useChains.js'
+import { useSwapOnly } from '../../hooks/useSwapOnly.js'
+import { useToAddressReset } from '../../hooks/useToAddressReset.js'
+import { useHasExternalWalletProvider } from '../../providers/WalletProvider/useHasExternalWalletProvider.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+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 { hasExternalProvider, availableChainTypes } =
+    useHasExternalWalletProvider()
+  const { chains, isLoading, getChainById } = useChains(
+    formType,
+    formType === 'from' && hasExternalProvider ? availableChainTypes : undefined
+  )
+
+  const [chainOrder, setChainOrder] = useChainOrder(formType)
+  const swapOnly = useSwapOnly()
+  const { tryResetToAddress } = useToAddressReset()
+
+  const getChains = () => {
+    if (!chains) {
+      return []
+    }
+    const selectedChains = chainOrder
+      .map((chainId) => chains.find((chain) => chain.id === chainId))
+      .filter(Boolean) as EVMChain[]
+    return selectedChains
+  }
+
+  const setCurrentChain = (chainId: number) => {
+    onChange(chainId)
+    if (swapOnly) {
+      setFieldValue(FormKeyHelper.getChainKey('to'), chainId, {
+        isTouched: true,
+      })
+    }
+    const tokenKey = FormKeyHelper.getTokenKey(formType)
+    if (!disabledUI?.includes(tokenKey as DisabledUI)) {
+      setFieldValue(tokenKey, '')
+    }
+    const amountKey = FormKeyHelper.getAmountKey(formType)
+    if (!disabledUI?.includes(amountKey as DisabledUI)) {
+      setFieldValue(amountKey, '')
+    }
+    setFieldValue('tokenSearchFilter', '')
+
+    const [toChainId] = getFieldValues('toChain')
+    const toChain = getChainById(toChainId)
+    if (toChain) {
+      tryResetToAddress(toChain)
+    }
+    setChainOrder(chainId, formType)
+  }
+
+  return {
+    chainOrder,
+    chains,
+    getChains,
+    isLoading,
+    setChainOrder,
+    setCurrentChain,
+  }
+}

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,33 @@
+import type { ContractCall } 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?.toString(), {
+        isTouched: true,
+      })
+    }
+    if (contractCalls) {
+      setFieldValue('contractCalls', contractCalls, {
+        isTouched: true,
+      })
+    }
+  }, [contractCalls, setFieldValue, token])
+  return <Token token={token} p={2} />
+}

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

@@ -0,0 +1,8 @@
+import { Avatar, styled } from '@mui/material'
+
+export const PreviewAvatar = styled(Avatar)(({ theme }) => ({
+  background: theme.palette.background.paper,
+  width: 96,
+  height: 96,
+  borderRadius: theme.shape.borderRadius,
+}))

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

@@ -0,0 +1,41 @@
+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?.toString(), {
+        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,64 @@
+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 p={2}>
+      <Box display="flex">
+        {isLoading ? (
+          <Skeleton
+            width={96}
+            height={96}
+            variant="rectangular"
+            sx={{ borderRadius: 1 }}
+          />
+        ) : (
+          <PreviewAvatar src={imageUrl} />
+        )}
+        <Box ml={2}>
+          {isLoading ? (
+            <Skeleton width={144} height={21} variant="text" />
+          ) : (
+            <Typography fontSize={14} color="text.secondary">
+              {collectionName}
+            </Typography>
+          )}
+          {isLoading ? (
+            <Skeleton width={112} height={27} variant="text" />
+          ) : (
+            <Typography fontSize={18} fontWeight={600}>
+              {assetName}
+            </Typography>
+          )}
+          {isLoading ? (
+            <Skeleton width={128} height={21} variant="text" />
+          ) : owner ? (
+            <Typography 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} 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.tsx

@@ -0,0 +1,51 @@
+import type { DialogProps, PaperProps, 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: 'absolute',
+    overflow: 'hidden',
+  },
+}
+
+export const paperProps: Partial<PaperProps> = {
+  sx: (theme: Theme) => ({
+    position: 'absolute',
+    backgroundImage: 'none',
+    backgroundColor: theme.palette.background.default,
+    borderTopLeftRadius: theme.shape.borderRadius,
+    borderTopRightRadius: theme.shape.borderRadius,
+  }),
+}
+
+export const slotProps = {
+  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}
+      PaperProps={paperProps}
+      slotProps={slotProps}
+    >
+      {children}
+    </MuiDialog>
+  )
+}

package/src/components/FeeBreakdownTooltip.tsx

@@ -0,0 +1,63 @@
+import { Box, Tooltip, Typography } from '@mui/material'
+import type { TFunction } from 'i18next'
+import type { ReactElement } from 'react'
+import { useTranslation } from 'react-i18next'
+import { formatUnits } from 'viem'
+import type { FeesBreakdown } from '../utils/fees.js'
+
+export interface FeeBreakdownTooltipProps {
+  gasCosts?: FeesBreakdown[]
+  feeCosts?: FeesBreakdown[]
+  children: ReactElement<any, any>
+}
+
+export const FeeBreakdownTooltip: React.FC<FeeBreakdownTooltipProps> = ({
+  gasCosts,
+  feeCosts,
+  children,
+}) => {
+  const { t } = useTranslation()
+  return (
+    <Tooltip
+      title={
+        <Box>
+          {gasCosts?.length ? (
+            <Box>
+              {t('main.fees.network')}
+              {getFeeBreakdownTypography(gasCosts, t)}
+            </Box>
+          ) : null}
+          {feeCosts?.length ? (
+            <Box mt={0.5}>
+              {t('main.fees.provider')}
+              {getFeeBreakdownTypography(feeCosts, t)}
+            </Box>
+          ) : null}
+        </Box>
+      }
+      sx={{ cursor: 'help' }}
+    >
+      {children}
+    </Tooltip>
+  )
+}
+
+export const getFeeBreakdownTypography = (
+  fees: FeesBreakdown[],
+  t: TFunction
+) =>
+  fees.map((fee, index) => (
+    <Typography
+      fontSize={12}
+      fontWeight="500"
+      color="inherit"
+      key={`${fee.token.address}${index}`}
+    >
+      {t('format.currency', { value: fee.amountUSD })} (
+      {t('format.number', {
+        value: Number.parseFloat(formatUnits(fee.amount, fee.token.decimals)),
+        maximumFractionDigits: Math.min(fee.token.decimals, 9),
+      })}{' '}
+      {fee.token.symbol})
+    </Typography>
+  ))

package/src/components/FullPageContainer.tsx

@@ -0,0 +1,14 @@
+import { styled } from '@mui/material'
+import type { PageContainerProps } from './PageContainer.js'
+import { PageContainer } from './PageContainer.js'
+
+// In max height and default layout
+// the PageContainer collapses to use the minimum space need to display its child components whereas
+// the FullPageContainer expands and fills the available vertical space provide by the max-height
+// See the CssBaselineContainer component styles in AppContainer.tsx for usage of full-page-container
+export const FullPageContainer = styled((props: PageContainerProps) => (
+  <PageContainer
+    {...props}
+    className={`${props.className} full-page-container`}
+  />
+))``

package/src/components/GasMessage/FundsSufficiencyMessage.tsx

@@ -0,0 +1,20 @@
+import { WarningRounded } from '@mui/icons-material'
+import { Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { AlertMessage } from '../AlertMessage/AlertMessage.js'
+
+export const FundsSufficiencyMessage = () => {
+  const { t } = useTranslation()
+  return (
+    <AlertMessage
+      severity="warning"
+      icon={<WarningRounded />}
+      title={
+        <Typography variant="body2" px={1} color="text.primary">
+          {t('warning.message.insufficientFunds')}
+        </Typography>
+      }
+      multilineTitle
+    />
+  )
+}

package/src/components/GasMessage/GasMessage.style.ts

@@ -0,0 +1,21 @@
+import { alpha, styled, switchClasses } from '@mui/material'
+import { Switch } from '../Switch.js'
+
+export const InfoMessageSwitch = styled(Switch)(({ theme }) => ({
+  [`.${switchClasses.switchBase}`]: {
+    [`&.${switchClasses.checked}`]: {
+      [`& + .${switchClasses.track}`]: {
+        backgroundColor:
+          theme.palette.mode === 'light'
+            ? theme.palette.info.main
+            : alpha(theme.palette.info.main, 0.84),
+      },
+    },
+    [`&.Mui-focusVisible .${switchClasses.thumb}`]: {
+      color:
+        theme.palette.mode === 'light'
+          ? theme.palette.info.main
+          : alpha(theme.palette.info.main, 0.84),
+    },
+  },
+}))

package/src/components/GasMessage/GasMessage.tsx

@@ -0,0 +1,35 @@
+import type { Route } from '@lifi/sdk'
+import type { BoxProps } from '@mui/material'
+import { Box, Collapse } from '@mui/material'
+import { useFromTokenSufficiency } from '../../hooks/useFromTokenSufficiency.js'
+import { useGasSufficiency } from '../../hooks/useGasSufficiency.js'
+import { FundsSufficiencyMessage } from './FundsSufficiencyMessage.js'
+import { GasSufficiencyMessage } from './GasSufficiencyMessage.js'
+
+interface GasMessageProps extends BoxProps {
+  route?: Route
+}
+
+export const GasMessage: React.FC<GasMessageProps> = ({ route, ...props }) => {
+  const { insufficientGas } = useGasSufficiency(route)
+  const { insufficientFromToken } = useFromTokenSufficiency(route)
+
+  const validInsufficientGas = insufficientGas?.length
+
+  return (
+    <Collapse
+      timeout={225}
+      in={Boolean(insufficientFromToken || validInsufficientGas)}
+      unmountOnExit
+      mountOnEnter
+    >
+      <Box {...props}>
+        {insufficientFromToken ? (
+          <FundsSufficiencyMessage />
+        ) : validInsufficientGas ? (
+          <GasSufficiencyMessage insufficientGas={insufficientGas} />
+        ) : null}
+      </Box>
+    </Collapse>
+  )
+}

package/src/components/GasMessage/GasRefuelMessage.tsx

@@ -0,0 +1,67 @@
+import { EvStation } from '@mui/icons-material'
+import type { BoxProps } from '@mui/material'
+import { Box, Collapse, Typography } from '@mui/material'
+import type { ChangeEvent } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useGasRefuel } from '../../hooks/useGasRefuel.js'
+import { useSettings } from '../../stores/settings/useSettings.js'
+import { useSettingsStore } from '../../stores/settings/useSettingsStore.js'
+import { AlertMessage } from '../AlertMessage/AlertMessage.js'
+import { InfoMessageSwitch } from './GasMessage.style.js'
+
+export const GasRefuelMessage: React.FC<BoxProps> = (props) => {
+  const { t } = useTranslation()
+  const setValue = useSettingsStore((state) => state.setValue)
+  const { enabledAutoRefuel } = useSettings(['enabledAutoRefuel'])
+
+  const { enabled, chain, isLoading: isRefuelLoading } = useGasRefuel()
+
+  const onChange = (_: ChangeEvent<HTMLInputElement>, checked: boolean) => {
+    setValue('enabledAutoRefuel', checked)
+  }
+
+  const showGasRefuelMessage = chain && enabled && !isRefuelLoading
+
+  return (
+    <Collapse
+      timeout={225}
+      in={showGasRefuelMessage}
+      unmountOnExit
+      mountOnEnter
+    >
+      <AlertMessage
+        icon={<EvStation />}
+        title={
+          <Box
+            display="flex"
+            alignItems="center"
+            justifyContent="space-between"
+            flexGrow={1}
+          >
+            <Typography variant="body2" fontWeight={700}>
+              {t('info.title.autoRefuel', { chainName: chain?.name ?? '' })}
+            </Typography>
+            <InfoMessageSwitch
+              checked={enabledAutoRefuel}
+              onChange={onChange}
+            />
+          </Box>
+        }
+        {...props}
+      >
+        <Collapse
+          timeout={225}
+          in={enabledAutoRefuel}
+          unmountOnExit
+          mountOnEnter
+        >
+          <Typography variant="body2" px={2} pt={1}>
+            {t('info.message.autoRefuel', {
+              chainName: chain?.name,
+            })}
+          </Typography>
+        </Collapse>
+      </AlertMessage>
+    </Collapse>
+  )
+}