@lifi/widget 3.23.3 → 3.24.0

package/src/components/AppContainer.tsx

@@ -42,6 +42,12 @@ export const AppExpandedContainer = styled(Box, {
 export const RelativeContainer = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'variant',
 })<{ variant?: WidgetVariant }>(({ theme }) => {
+  const maxHeight =
+    theme.container?.height === 'fit-content'
+      ? 'none'
+      : theme.container?.maxHeight ||
+        theme.container?.height ||
+        defaultMaxHeight
   return {
     position: 'relative',
     boxSizing: 'content-box',
@@ -56,9 +62,7 @@ export const RelativeContainer = styled(Box, {
     maxHeight:
       theme.container?.display === 'flex' && !theme.container?.height
         ? '100%'
-        : theme.container?.maxHeight
-          ? theme.container?.maxHeight
-          : theme.container?.height || defaultMaxHeight,
+        : maxHeight,
     variants: [
       {
         props: {
@@ -84,9 +88,12 @@ const CssBaselineContainer = styled(ScopedCssBaseline, {
   shouldForwardProp: (prop) =>
     !['variant', 'paddingTopAdjustment', 'elementId'].includes(prop as string),
 })<CssBaselineContainerProps>(({ theme, variant, paddingTopAdjustment }) => {
-  const fullContainerHeight = theme.container?.maxHeight
-    ? theme.container?.maxHeight
-    : theme.container?.height || defaultMaxHeight
+  const maxHeight =
+    theme.container?.height === 'fit-content'
+      ? 'none'
+      : theme.container?.maxHeight ||
+        theme.container?.height ||
+        defaultMaxHeight
   return {
     display: 'flex',
     flex: 1,
@@ -97,13 +104,24 @@ const CssBaselineContainer = styled(ScopedCssBaseline, {
     maxHeight:
       variant === 'drawer' || theme.container?.display === 'flex'
         ? 'none'
-        : fullContainerHeight,
+        : maxHeight,
     overflowY: 'auto',
     height: theme.container?.display === 'flex' ? 'auto' : '100%',
     paddingTop: paddingTopAdjustment,
     // This allows FullPageContainer.tsx to expand and fill the available vertical space in max height and default layout modes
     '&:has(.full-page-container)': {
-      height: fullContainerHeight,
+      height:
+        theme.container?.maxHeight ||
+        theme.container?.height ||
+        defaultMaxHeight,
+    },
+    '&:has(.long-list)': {
+      maxHeight:
+        theme.container?.maxHeight ||
+        (theme.container?.height !== 'fit-content'
+          ? theme.container?.height
+          : undefined) ||
+        defaultMaxHeight,
     },
   }
 })

package/src/components/Avatar/Avatar.style.tsx

@@ -7,11 +7,17 @@ import {
   badgeClasses,
   styled,
 } from '@mui/material'
-import { avatarMask16 } from './utils.js'
+import { getAvatarMask } from './utils.js'
 
-export const AvatarMasked = styled(MuiAvatar)(() => ({
-  mask: avatarMask16,
-}))
+export const AvatarMasked = styled(MuiAvatar, {
+  shouldForwardProp: (prop) => prop !== 'avatarSize' && prop !== 'badgeSize',
+})<{ avatarSize?: number; badgeSize?: number }>(
+  ({ avatarSize = 40, badgeSize = 16 }) => ({
+    width: avatarSize,
+    height: avatarSize,
+    mask: getAvatarMask(badgeSize),
+  })
+)
 
 export const TokenAvatarGroup = styled(AvatarGroup)(({ theme }) => ({
   [`& .${badgeClasses.badge}:last-of-type .${avatarClasses.root}`]: {
@@ -30,7 +36,9 @@ export const TokenAvatarGroup = styled(AvatarGroup)(({ theme }) => ({
   },
 }))
 
-export const AvatarDefault = styled(Box)(({ theme }) => {
+export const AvatarDefault = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'badgeSize',
+})<{ badgeSize?: number }>(({ theme, badgeSize = 16 }) => {
   const root = theme.components?.MuiAvatar?.styleOverrides?.root as CSSObject
   return {
     display: 'flex',
@@ -40,7 +48,7 @@ export const AvatarDefault = styled(Box)(({ theme }) => {
     height: root?.height,
     width: root?.width,
     color: theme.vars.palette.text.secondary,
-    mask: avatarMask16,
+    mask: getAvatarMask(badgeSize),
     background: theme.vars.palette.grey[300],
     ...theme.applyStyles('dark', {
       background: theme.vars.palette.grey[800],
@@ -48,11 +56,13 @@ export const AvatarDefault = styled(Box)(({ theme }) => {
   }
 })
 
-export const AvatarDefaultBadge = styled(Box)(({ theme }) => {
+export const AvatarDefaultBadge = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'size',
+})<{ size?: number }>(({ theme, size = 16 }) => {
   return {
     borderRadius: '50%',
-    height: 16,
-    width: 16,
+    height: size,
+    width: size,
     background: theme.vars.palette.grey[300],
     ...theme.applyStyles('dark', {
       background: theme.vars.palette.grey[800],
@@ -65,8 +75,10 @@ export const AvatarSkeletonContainer = styled(Box)(({ theme }) => ({
   borderRadius: '50%',
 }))
 
-export const AvatarSkeletonMaskedContainer = styled(Box)(({ theme }) => ({
+export const AvatarSkeletonMaskedContainer = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'badgeSize',
+})<{ badgeSize?: number }>(({ theme, badgeSize = 16 }) => ({
   background: theme.vars.palette.background.paper,
   borderRadius: '50%',
-  mask: avatarMask16,
+  mask: getAvatarMask(badgeSize),
 }))

package/src/components/Avatar/Avatar.tsx

@@ -24,23 +24,28 @@ export const AvatarBadgedDefault: React.FC<{
 
 export const AvatarBadgedSkeleton: React.FC<{
   sx?: SxProps<Theme>
-}> = ({ sx }) => {
+  avatarSize?: number
+  badgeSize?: number
+}> = ({ sx, avatarSize = 40, badgeSize = 16 }) => {
   return (
     <Badge
       overlap="circular"
       anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-      badgeContent={<SmallAvatarSkeleton />}
+      badgeContent={<SmallAvatarSkeleton size={badgeSize} />}
       sx={sx}
     >
-      <AvatarSkeleton />
+      <AvatarSkeleton avatarSize={avatarSize} badgeSize={badgeSize} />
     </Badge>
   )
 }
 
-export const AvatarSkeleton = () => {
+export const AvatarSkeleton: React.FC<{
+  avatarSize: number
+  badgeSize: number
+}> = ({ avatarSize, badgeSize }) => {
   return (
-    <AvatarSkeletonMaskedContainer>
-      <Skeleton width={40} height={40} variant="circular" />
+    <AvatarSkeletonMaskedContainer badgeSize={badgeSize}>
+      <Skeleton width={avatarSize} height={avatarSize} variant="circular" />
     </AvatarSkeletonMaskedContainer>
   )
 }

package/src/components/Avatar/SmallAvatar.tsx

@@ -1,16 +1,24 @@
 import { Avatar, Skeleton, styled } from '@mui/material'
 import { AvatarSkeletonContainer } from './Avatar.style.js'
 
-export const SmallAvatar = styled(Avatar)(({ theme }) => ({
+interface SmallAvatarProps {
+  size?: number
+}
+
+export const SmallAvatar = styled(Avatar, {
+  shouldForwardProp: (prop) => prop !== 'size',
+})<SmallAvatarProps>(({ theme, size = 16 }) => ({
   background: theme.vars.palette.background.paper,
-  width: 16,
-  height: 16,
+  width: size,
+  height: size,
 }))
 
-export const SmallAvatarSkeleton = () => {
+export const SmallAvatarSkeleton: React.FC<{
+  size?: number
+}> = ({ size = 16 }) => {
   return (
     <AvatarSkeletonContainer>
-      <Skeleton width={16} height={16} variant="circular" />
+      <Skeleton width={size} height={size} variant="circular" />
     </AvatarSkeletonContainer>
   )
 }

package/src/components/Avatar/TokenAvatar.tsx

@@ -12,9 +12,26 @@ export const TokenAvatar: React.FC<{
   chain?: Chain
   isLoading?: boolean
   sx?: SxProps<Theme>
-}> = ({ token, chain, isLoading, sx }) => {
+  tokenAvatarSize?: number
+  chainAvatarSize?: number
+}> = ({
+  token,
+  chain,
+  isLoading,
+  sx,
+  tokenAvatarSize = 40,
+  chainAvatarSize = 16,
+}) => {
   if (!chain || !token?.logoURI) {
-    return <TokenAvatarFallback token={token} isLoading={isLoading} sx={sx} />
+    return (
+      <TokenAvatarFallback
+        token={token}
+        isLoading={isLoading}
+        sx={sx}
+        tokenAvatarSize={tokenAvatarSize}
+        chainAvatarSize={chainAvatarSize}
+      />
+    )
   }
   return (
     <TokenAvatarBase
@@ -22,6 +39,8 @@ export const TokenAvatar: React.FC<{
       chain={chain}
       isLoading={isLoading}
       sx={sx}
+      avatarSize={tokenAvatarSize}
+      badgeSize={chainAvatarSize}
     />
   )
 }
@@ -30,7 +49,9 @@ export const TokenAvatarFallback: React.FC<{
   token?: StaticToken
   isLoading?: boolean
   sx?: SxProps<Theme>
-}> = ({ token, isLoading, sx }) => {
+  tokenAvatarSize: number
+  chainAvatarSize: number
+}> = ({ token, isLoading, sx, tokenAvatarSize, chainAvatarSize }) => {
   const { chain } = useChain(token?.chainId)
   const { token: chainToken, isLoading: isLoadingToken } = useToken(
     token?.chainId,
@@ -42,6 +63,8 @@ export const TokenAvatarFallback: React.FC<{
       isLoading={isLoading || isLoadingToken}
       chain={chain}
       sx={sx}
+      avatarSize={tokenAvatarSize}
+      badgeSize={chainAvatarSize}
     />
   )
 }
@@ -51,25 +74,32 @@ export const TokenAvatarBase: React.FC<{
   chain?: Chain
   isLoading?: boolean
   sx?: SxProps<Theme>
-}> = ({ token, chain, isLoading, sx }) => {
+  avatarSize: number
+  badgeSize: number
+}> = ({ token, chain, isLoading, sx, avatarSize, badgeSize }) => {
   return isLoading ? (
-    <AvatarBadgedSkeleton />
+    <AvatarBadgedSkeleton avatarSize={avatarSize} badgeSize={badgeSize} />
   ) : (
     <Badge
       overlap="circular"
       anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
       badgeContent={
         chain ? (
-          <SmallAvatar src={chain.logoURI} alt={chain.name}>
+          <SmallAvatar src={chain.logoURI} alt={chain.name} size={badgeSize}>
             {chain.name[0]}
           </SmallAvatar>
         ) : (
-          <AvatarDefaultBadge />
+          <AvatarDefaultBadge size={badgeSize} />
         )
       }
       sx={sx}
     >
-      <AvatarMasked src={token?.logoURI} alt={token?.symbol}>
+      <AvatarMasked
+        src={token?.logoURI}
+        alt={token?.symbol}
+        avatarSize={avatarSize}
+        badgeSize={badgeSize}
+      >
         {token?.symbol?.[0]}
       </AvatarMasked>
     </Badge>

package/src/components/Avatar/utils.ts

@@ -1,11 +1,6 @@
-/**
- * Avatar mask for 16px badge
- */
-export const avatarMask16 =
-  'radial-gradient(circle 10.5px at calc(100% - 5.5px) calc(100% - 5.5px), #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat'
+const borderWidthPx = 2.5
 
-/**
- * Avatar mask for 12px badge
- */
-export const avatarMask12 =
-  'radial-gradient(circle 8.5px at calc(100% - 3.5px) calc(100% - 3.5px), #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat'
+// 14% is the right bottom offset of the MUI's badge (MuiBadge-badge class)
+export const getAvatarMask = (badgeSize: number) => {
+  return `radial-gradient(circle ${badgeSize / 2 + borderWidthPx}px at calc(100% - 14%) calc(100% - 14%), #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat`
+}

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',
@@ -34,6 +34,7 @@ export const Container = styled(Box, {
     gap: theme.spacing(0.5),
     padding: theme.spacing(1.5, 3, 1.5, 3),
     overflow: 'auto',
+    borderRadius: theme.container?.borderRadius ?? 0,
     ...theme.header,
     ...(theme.header?.position === 'fixed'
       ? {
@@ -101,8 +102,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/RouteCardEssentials.tsx

@@ -4,6 +4,7 @@ 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,7 +20,6 @@ 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)
@@ -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/Step/CircularProgress.style.tsx

@@ -24,29 +24,37 @@ const getStatusColor = (
     case 'FAILED':
       return `rgba(${theme.vars.palette.error.mainChannel} / 0.12)`
     default:
-      return theme.vars.palette.grey[theme.palette.mode === 'light' ? 300 : 800]
+      return null
   }
 }
 
 export const CircularIcon = styled(Box, {
   shouldForwardProp: (prop: string) => !['status', 'substatus'].includes(prop),
 })<{ status?: ProcessStatus; substatus?: Substatus }>(
-  ({ theme, status, substatus }) => ({
-    backgroundColor: ['ACTION_REQUIRED', 'DONE', 'FAILED'].includes(status!)
-      ? getStatusColor(theme, status, substatus)
-      : theme.vars.palette.background.paper,
-    borderStyle: 'solid',
-    borderColor: getStatusColor(theme, status, substatus),
-    borderWidth: !['ACTION_REQUIRED', 'DONE', 'FAILED'].includes(status!)
-      ? 3
-      : 0,
-    display: 'grid',
-    position: 'relative',
-    placeItems: 'center',
-    width: 40,
-    height: 40,
-    borderRadius: '50%',
-  })
+  ({ theme, status, substatus }) => {
+    const statusColor = getStatusColor(theme, status, substatus)
+    const isSpecialStatus = ['ACTION_REQUIRED', 'DONE', 'FAILED'].includes(
+      status!
+    )
+
+    return {
+      backgroundColor: isSpecialStatus
+        ? statusColor!
+        : theme.vars.palette.background.paper,
+      borderStyle: 'solid',
+      borderColor: statusColor || theme.vars.palette.grey[300],
+      borderWidth: !isSpecialStatus ? 3 : 0,
+      display: 'grid',
+      position: 'relative',
+      placeItems: 'center',
+      width: 40,
+      height: 40,
+      borderRadius: '50%',
+      ...theme.applyStyles('dark', {
+        borderColor: statusColor || theme.vars.palette.grey[800],
+      }),
+    }
+  }
 )
 
 const circleAnimation = keyframes`

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),
+}))