@lifi/widget 3.23.3 → 3.24.0-alpha.0

package/src/components/BaseTransactionButton/BaseTransactionButton.tsx

@@ -30,7 +30,11 @@ export const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({
     } else if (walletConfig?.onConnect) {
       walletConfig.onConnect()
     } else {
-      openWalletMenu()
+      if (missingChain) {
+        openWalletMenu({ chain: missingChain })
+      } else {
+        openWalletMenu()
+      }
     }
   }
 

package/src/components/Header/Header.style.ts

@@ -7,7 +7,7 @@ import {
   styled,
 } from '@mui/material'
 import type { WidgetSubvariant } from '../../types/widget.js'
-import { avatarMask12 } from '../Avatar/utils.js'
+import { getAvatarMask } from '../Avatar/utils.js'
 
 export const HeaderAppBar = styled(AppBar)(({ theme }) => ({
   backgroundColor: 'transparent',
@@ -101,8 +101,12 @@ export const HeaderControlsContainer = styled(Box)(({ theme }) => ({
   }),
 }))
 
-export const WalletAvatar = styled(Avatar)(() => ({
-  mask: avatarMask12,
-  width: 24,
-  height: 24,
-}))
+export const WalletAvatar = styled(Avatar, {
+  shouldForwardProp: (prop) => prop !== 'avatarSize' && prop !== 'badgeSize',
+})<{ avatarSize?: number; badgeSize?: number }>(
+  ({ avatarSize = 24, badgeSize = 12 }) => ({
+    mask: getAvatarMask(badgeSize),
+    width: avatarSize,
+    height: avatarSize,
+  })
+)

package/src/components/RouteCard/RouteCard.tsx

@@ -1,5 +1,5 @@
 import type { TokenAmount } from '@lifi/sdk'
-import { isGaslessStep } from '@lifi/sdk'
+import { isRelayerStep } from '@lifi/sdk'
 import ExpandLess from '@mui/icons-material/ExpandLess'
 import ExpandMore from '@mui/icons-material/ExpandMore'
 import { Box, Collapse } from '@mui/material'
@@ -53,8 +53,8 @@ export const RouteCard: React.FC<
     (tag) => tag === 'CHEAPEST' || tag === 'FASTEST'
   )
   const tags: string[] = mainTag ? [mainTag] : []
-  const hasGaslessSupport = route.steps.some(isGaslessStep)
-  if (hasGaslessSupport) {
+  const hasRelayerSupport = route.steps.every(isRelayerStep)
+  if (hasRelayerSupport) {
     tags.push('GASLESS')
   }
 

package/src/components/RouteCard/RouteCardEssentials.tsx

@@ -1,9 +1,10 @@
-import { isGaslessStep } from '@lifi/sdk'
+import { isRelayerStep } from '@lifi/sdk'
 import AccessTimeFilled from '@mui/icons-material/AccessTimeFilled'
 import LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'
 import { Box, Tooltip, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'
+import { formatDuration } from '../../utils/format.js'
 import { FeeBreakdownTooltip } from '../FeeBreakdownTooltip.js'
 import { IconTypography } from '../IconTypography.js'
 import { TokenRate } from '../TokenRate/TokenRate.js'
@@ -19,10 +20,9 @@ export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
       0
     )
   )
-  const executionTimeMinutes = Math.floor(executionTimeSeconds / 60)
   const { gasCosts, feeCosts, combinedFeesUSD } =
     getAccumulatedFeeCostsBreakdown(route)
-  const hasGaslessSupport = route.steps.some(isGaslessStep)
+  const hasRelayerSupport = route.steps.every(isRelayerStep)
   return (
     <Box
       sx={{
@@ -43,7 +43,7 @@ export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
         <FeeBreakdownTooltip
           gasCosts={gasCosts}
           feeCosts={feeCosts}
-          relayerSupport={hasGaslessSupport}
+          relayerSupport={hasRelayerSupport}
         >
           <Box
             sx={{
@@ -56,7 +56,7 @@ export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
               <LocalGasStationRounded fontSize="inherit" />
             </IconTypography>
             <Typography
-              data-value={hasGaslessSupport ? 0 : combinedFeesUSD}
+              data-value={hasRelayerSupport ? 0 : combinedFeesUSD}
               sx={{
                 fontSize: 14,
                 color: 'text.primary',
@@ -64,7 +64,7 @@ export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
                 lineHeight: 1,
               }}
             >
-              {hasGaslessSupport
+              {hasRelayerSupport
                 ? t('main.fees.free')
                 : t('format.currency', {
                     value: combinedFeesUSD,
@@ -90,14 +90,7 @@ export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
                 lineHeight: 1,
               }}
             >
-              {(executionTimeSeconds < 60
-                ? executionTimeSeconds
-                : executionTimeMinutes
-              ).toLocaleString(i18n.language, {
-                style: 'unit',
-                unit: executionTimeSeconds < 60 ? 'second' : 'minute',
-                unitDisplay: 'narrow',
-              })}
+              {formatDuration(executionTimeSeconds, i18n.language)}
             </Typography>
           </Box>
         </Tooltip>

package/src/components/Routes/RoutesExpanded.tsx

@@ -127,12 +127,17 @@ export const RoutesExpandedElement = () => {
 
   return (
     <RoutesExpandedCollapse
-      timeout={timeout.enter}
+      timeout={timeout.enter as number}
       in={expanded}
       orientation="horizontal"
       onExited={onExit}
     >
-      <Grow timeout={timeout.enter} in={expanded} mountOnEnter unmountOnExit>
+      <Grow
+        timeout={timeout.enter as number}
+        in={expanded}
+        mountOnEnter
+        unmountOnExit
+      >
         <Container enableColorScheme minimumHeight={isLoading}>
           <ScrollableContainer>
             <Header>

package/src/components/SelectTokenButton/SelectTokenButton.style.tsx

@@ -106,9 +106,9 @@ export const CardContent = styled(MuiCardContent, {
       ...(cardVariant === 'filled' && {
         '&:hover': {
           cursor: 'pointer',
-          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, white)`,
+          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, black)`,
           ...theme.applyStyles('dark', {
-            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, black)`,
+            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, white)`,
           }),
         },
       }),

package/src/components/SendToWallet/SendToWalletButton.tsx

@@ -113,9 +113,10 @@ export const SendToWalletButton: React.FC<CardProps> = (props) => {
   // Timeout is needed here to push the collapseTransitionTime update to the back of the event loop so that it doesn't fired too quickly
   // biome-ignore lint/correctness/useExhaustiveDependencies:
   useEffect(() => {
-    setTimeout(() => {
+    const timeout = setTimeout(() => {
       collapseTransitionTime.current = 225
     }, 0)
+    return () => clearTimeout(timeout)
   }, [collapseTransitionTime])
 
   const isOpenCollapse =
@@ -128,7 +129,7 @@ export const SendToWalletButton: React.FC<CardProps> = (props) => {
 
   return (
     <Collapse
-      timeout={collapseTransitionTime.current}
+      timeout={collapseTransitionTime.current as number}
       in={isOpenCollapse}
       mountOnEnter
       unmountOnExit

package/src/components/StepActions/StepActions.tsx

@@ -1,5 +1,5 @@
 import type { LiFiStep, StepExtended } from '@lifi/sdk'
-import { isGaslessStep } from '@lifi/sdk'
+import { isRelayerStep } from '@lifi/sdk'
 import ArrowForward from '@mui/icons-material/ArrowForward'
 import ExpandLess from '@mui/icons-material/ExpandLess'
 import ExpandMore from '@mui/icons-material/ExpandMore'
@@ -162,7 +162,7 @@ export const IncludedSteps: React.FC<IncludedStepsProps> = ({ step }) => {
     ) : null
   }
 
-  const hasGaslessSupport = isGaslessStep(step)
+  const hasRelayerSupport = isRelayerStep(step)
 
   return (
     <Box
@@ -194,7 +194,7 @@ export const IncludedSteps: React.FC<IncludedStepsProps> = ({ step }) => {
                 <ProtocolStepDetailsLabel
                   step={step}
                   feeConfig={feeConfig}
-                  relayerSupport={hasGaslessSupport}
+                  relayerSupport={hasRelayerSupport}
                 />
               ) : (
                 <SwapStepDetailsLabel step={step} />

package/src/components/TokenList/TokenDetailsSheet.tsx

@@ -0,0 +1,48 @@
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react'
+import { BottomSheet } from '../BottomSheet/BottomSheet.js'
+import type { BottomSheetBase } from '../BottomSheet/types.js'
+import { TokenDetailsSheetContent } from './TokenDetailsSheetContent.js'
+import type { TokenDetailsSheetBase } from './types.js'
+interface TokenDetailsSheetProps {
+  chainId: number | undefined
+}
+
+export const TokenDetailsSheet = forwardRef<
+  TokenDetailsSheetBase,
+  TokenDetailsSheetProps
+>(({ chainId }, ref) => {
+  const bottomSheetRef = useRef<BottomSheetBase>(null)
+  const [tokenAddress, setTokenAddress] = useState<string | undefined>(
+    undefined
+  )
+  const [withoutContractAddress, setWithoutContractAddress] = useState(false)
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      isOpen: () => bottomSheetRef.current?.isOpen(),
+      open: (address: string, noContractAddress: boolean) => {
+        setTokenAddress(address)
+        setWithoutContractAddress(noContractAddress)
+        bottomSheetRef.current?.open()
+      },
+      close: () => {
+        bottomSheetRef.current?.close()
+        setTokenAddress(undefined)
+        setWithoutContractAddress(false)
+      },
+    }),
+    []
+  )
+
+  return (
+    <BottomSheet ref={bottomSheetRef}>
+      <TokenDetailsSheetContent
+        ref={ref}
+        tokenAddress={tokenAddress}
+        withoutContractAddress={withoutContractAddress}
+        chainId={chainId}
+      />
+    </BottomSheet>
+  )
+})

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

@@ -0,0 +1,34 @@
+import { Box, Typography, styled } from '@mui/material'
+import type { PageContainerProps } from '../PageContainer.js'
+import { PageContainer } from '../PageContainer.js'
+
+export const TokenDetailsSheetContainer = styled(
+  PageContainer
+)<PageContainerProps>(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(2),
+  paddingTop: theme.spacing(3),
+  paddingBottom: theme.spacing(3),
+}))
+
+export const TokenDetailsSheetHeader = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'flex-start',
+  justifyContent: 'space-between',
+  gap: theme.spacing(2),
+}))
+
+export const Label = styled(Typography)(({ theme }) => ({
+  fontWeight: 500,
+  fontSize: '12px',
+  lineHeight: '16px',
+  color: theme.vars.palette.text.secondary,
+}))
+
+export const MetricContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(1),
+}))

package/src/components/TokenList/TokenDetailsSheetContent.tsx

@@ -0,0 +1,200 @@
+import Close from '@mui/icons-material/Close'
+import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
+import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
+import { Box, IconButton, Link, Skeleton, Typography } from '@mui/material'
+import { type PropsWithChildren, forwardRef, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useAvailableChains } from '../../hooks/useAvailableChains.js'
+import { useExplorer } from '../../hooks/useExplorer.js'
+import { useTokenSearch } from '../../hooks/useTokenSearch.js'
+import { formatTokenPrice } from '../../utils/format.js'
+import { shortenAddress } from '../../utils/wallet.js'
+import { TokenAvatar } from '../Avatar/TokenAvatar.js'
+import { CardIconButton } from '../Card/CardIconButton.js'
+import {
+  Label,
+  MetricContainer,
+  TokenDetailsSheetContainer,
+  TokenDetailsSheetHeader,
+} from './TokenDetailsSheetContent.style.js'
+import type { TokenDetailsSheetBase } from './types.js'
+
+interface TokenDetailsSheetContentProps {
+  tokenAddress: string | undefined
+  chainId: number | undefined
+  withoutContractAddress: boolean
+}
+
+const noDataLabel = '-'
+
+export const TokenDetailsSheetContent = forwardRef<
+  TokenDetailsSheetBase,
+  TokenDetailsSheetContentProps
+>(({ tokenAddress, chainId, withoutContractAddress }, ref) => {
+  const { t } = useTranslation()
+  const { getAddressLink } = useExplorer()
+  const { getChainById } = useAvailableChains()
+
+  const { token, isLoading } = useTokenSearch(
+    chainId,
+    tokenAddress,
+    !!tokenAddress
+  )
+  const chain = useMemo(() => getChainById(chainId), [chainId, getChainById])
+
+  const copyContractAddress = async (e: React.MouseEvent) => {
+    e.stopPropagation()
+    try {
+      // Clipboard API may throw if access is denied (e.g., in insecure contexts or older browsers)
+      await navigator.clipboard.writeText(tokenAddress || '')
+    } catch {
+      // Silently fail to avoid crashing the UI if clipboard write fails
+    }
+  }
+
+  return (
+    <TokenDetailsSheetContainer>
+      <TokenDetailsSheetHeader>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 3,
+          }}
+        >
+          <TokenAvatar
+            token={token}
+            chain={chain}
+            tokenAvatarSize={72}
+            chainAvatarSize={28}
+            isLoading={isLoading}
+          />
+          <MetricContainer>
+            {isLoading ? (
+              <>
+                <Skeleton variant="rounded" width={80} height={24} />
+                <Skeleton variant="rounded" width={80} height={16} />
+              </>
+            ) : (
+              <>
+                <Typography
+                  fontWeight={700}
+                  fontSize="24px"
+                  lineHeight="24px"
+                  color="text.primary"
+                >
+                  {token?.symbol || noDataLabel}
+                </Typography>
+                <Label>{token?.name || noDataLabel}</Label>
+              </>
+            )}
+          </MetricContainer>
+        </Box>
+        <IconButton
+          onClick={(e) => {
+            e.stopPropagation()
+            if (ref && typeof ref !== 'function') {
+              ref.current?.close()
+            }
+          }}
+          sx={{ mt: '-8px', mr: '-8px' }}
+        >
+          <Close />
+        </IconButton>
+      </TokenDetailsSheetHeader>
+      <MetricWithSkeleton
+        isLoading={isLoading}
+        label={t('tokenMetric.currentPrice')}
+        width={200}
+        height={40}
+      >
+        <Typography
+          sx={{
+            fontWeight: 700,
+            fontSize: '32px',
+            lineHeight: '40px',
+            color: 'text.primary',
+          }}
+        >
+          {token
+            ? t('format.currency', {
+                value: formatTokenPrice('1', token.priceUSD, token.decimals),
+              })
+            : noDataLabel}
+        </Typography>
+      </MetricWithSkeleton>
+      {!withoutContractAddress && (
+        <MetricWithSkeleton
+          isLoading={isLoading}
+          label={t('tokenMetric.contractAddress')}
+          width={200}
+          height={24}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: 1,
+            }}
+          >
+            <Typography
+              sx={{
+                fontWeight: 700,
+                fontSize: '18px',
+                lineHeight: '24px',
+                color: 'text.primary',
+              }}
+            >
+              {shortenAddress(tokenAddress)}
+            </Typography>
+            {tokenAddress && (
+              <CardIconButton size="small" onClick={copyContractAddress}>
+                <ContentCopyRounded fontSize="inherit" />
+              </CardIconButton>
+            )}
+            {tokenAddress && (
+              <CardIconButton
+                size="small"
+                LinkComponent={Link}
+                href={getAddressLink(tokenAddress, chainId)}
+                target="_blank"
+                rel="nofollow noreferrer"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <OpenInNewRounded fontSize="inherit" />
+              </CardIconButton>
+            )}
+          </Box>
+        </MetricWithSkeleton>
+      )}
+    </TokenDetailsSheetContainer>
+  )
+})
+
+interface MetricWithSkeletonProps {
+  label: string
+  isLoading: boolean
+  width: number
+  height: number
+}
+
+const MetricWithSkeleton = ({
+  label,
+  width,
+  height,
+  isLoading,
+  children,
+}: PropsWithChildren<MetricWithSkeletonProps>) => {
+  return (
+    <MetricContainer>
+      <Label>{label}</Label>
+      {isLoading ? (
+        <Skeleton variant="rounded" width={width} height={height} />
+      ) : (
+        children
+      )}
+    </MetricContainer>
+  )
+}