feat: new token expansions

packages/widget/src/components/IconCircle/IconCircle.style.tsx

@@ -0,0 +1,79 @@
+import type { Theme } from '@mui/material'
+import { Box, styled } from '@mui/material'
+import type { StatusIcon } from './statusIcons'
+
+export const iconCircleSize = 90
+
+interface StatusColorConfig {
+  color: string
+  mixAmount: number
+  lightDarken: number
+  darkDarken: number
+}
+
+export const getStatusColor = (
+  status: StatusIcon,
+  theme: Theme
+): StatusColorConfig => {
+  switch (status) {
+    case 'success':
+      return {
+        color: theme.vars.palette.success.mainChannel,
+        mixAmount: 12,
+        lightDarken: 0,
+        darkDarken: 0,
+      }
+    case 'error':
+      return {
+        color: theme.vars.palette.error.mainChannel,
+        mixAmount: 12,
+        lightDarken: 0,
+        darkDarken: 0,
+      }
+    case 'warning':
+      return {
+        color: theme.vars.palette.warning.mainChannel,
+        mixAmount: 48,
+        lightDarken: 0.32,
+        darkDarken: 0,
+      }
+    case 'info':
+      return {
+        color: theme.vars.palette.info.mainChannel,
+        mixAmount: 12,
+        lightDarken: 0,
+        darkDarken: 0,
+      }
+  }
+}
+
+export const iconSizeRatio = 48 / 90
+
+export const IconCircleRoot = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'colorConfig' && prop !== 'circleSize',
+})<{ colorConfig: StatusColorConfig; circleSize: number }>(
+  ({ theme, colorConfig, circleSize }) => {
+    const svgSize = Math.round(circleSize * iconSizeRatio)
+    return {
+      backgroundColor: `color-mix(in srgb, rgb(${colorConfig.color}) ${colorConfig.mixAmount}%, ${theme.vars.palette.background.paper})`,
+      borderRadius: '50%',
+      width: circleSize,
+      height: circleSize,
+      display: 'grid',
+      position: 'relative',
+      placeItems: 'center',
+      '& > svg': {
+        color: `color-mix(in srgb, rgb(${colorConfig.color}) ${(1 - colorConfig.lightDarken) * 100}%, black)`,
+        width: svgSize,
+        height: svgSize,
+      },
+      ...theme.applyStyles('dark', {
+        '& > svg': {
+          color: `color-mix(in srgb, rgb(${colorConfig.color}) ${(1 - colorConfig.darkDarken) * 100}%, black)`,
+          width: svgSize,
+          height: svgSize,
+        },
+      }),
+    }
+  }
+)

packages/widget/src/components/IconCircle/IconCircle.tsx

@@ -0,0 +1,29 @@
+import type { BoxProps } from '@mui/material'
+import { useTheme } from '@mui/material'
+import {
+  getStatusColor,
+  IconCircleRoot,
+  iconCircleSize,
+} from './IconCircle.style.js'
+import { type StatusIcon, statusIcons } from './statusIcons.js'
+
+interface IconCircleProps extends Omit<BoxProps, 'color'> {
+  status: StatusIcon
+  size?: number
+}
+
+export const IconCircle: React.FC<IconCircleProps> = ({
+  status,
+  size = iconCircleSize,
+  ...rest
+}) => {
+  const theme = useTheme()
+  const colorConfig = getStatusColor(status, theme)
+  const Icon = statusIcons[status]
+
+  return (
+    <IconCircleRoot colorConfig={colorConfig} circleSize={size} {...rest}>
+      <Icon />
+    </IconCircleRoot>
+  )
+}

packages/widget/src/components/IconCircle/statusIcons.ts

@@ -0,0 +1,14 @@
+import Done from '@mui/icons-material/Done'
+import ErrorRounded from '@mui/icons-material/ErrorRounded'
+import InfoRounded from '@mui/icons-material/InfoRounded'
+import WarningRounded from '@mui/icons-material/WarningRounded'
+import type { SvgIcon } from '@mui/material'
+
+export type StatusIcon = 'success' | 'error' | 'warning' | 'info'
+
+export const statusIcons: Record<StatusIcon, typeof SvgIcon> = {
+  success: Done,
+  error: ErrorRounded,
+  warning: WarningRounded,
+  info: InfoRounded,
+}

packages/widget/src/components/RouteCard/RouteCard.tsx

@@ -1,23 +1,15 @@
 import type { TokenAmount } from '@lifi/sdk'
-import ExpandLess from '@mui/icons-material/ExpandLess'
-import ExpandMore from '@mui/icons-material/ExpandMore'
-import { Box, Collapse, Tooltip } from '@mui/material'
-import type { MouseEventHandler } from 'react'
-import { useMemo, useState } from 'react'
+import { Box, Tooltip } from '@mui/material'
+import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { HiddenUI, type RouteLabel } from '../../types/widget.js'
 import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'
 import type { CardProps } from '../Card/Card.js'
 import { Card } from '../Card/Card.js'
-import { CardIconButton } from '../Card/CardIconButton.js'
 import { CardLabel, CardLabelTypography } from '../Card/CardLabel.js'
-import { StepActions } from '../StepActions/StepActions.js'
-import { Token } from '../Token/Token.js'
 import { getMatchingLabels } from './getMatchingLabels.js'
-import { TokenContainer } from './RouteCard.style.js'
-import { RouteCardEssentials } from './RouteCardEssentials.js'
-import { RouteCardEssentialsExpanded } from './RouteCardEssentialsExpanded.js'
+import { RouteToken } from './RouteToken.js'
 import type { RouteCardProps } from './types.js'
 
 export const RouteCard: React.FC<
@@ -32,12 +24,6 @@ export const RouteCard: React.FC<
   const { t } = useTranslation()
   const { subvariant, subvariantOptions, routeLabels, hiddenUI } =
     useWidgetConfig()
-  const [cardExpanded, setCardExpanded] = useState(defaultExpanded)
-
-  const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {
-    e.stopPropagation()
-    setCardExpanded((expanded) => !expanded)
-  }
 
   const token: TokenAmount =
     subvariant === 'custom' && subvariantOptions?.custom !== 'deposit'
@@ -119,33 +105,13 @@ export const RouteCard: React.FC<
           ))}
         </Box>
       ) : null}
-      <TokenContainer>
-        <Token
-          token={token}
-          impactToken={impactToken}
-          step={route.steps[0]}
-          stepVisible={!cardExpanded}
-          disableDescription={hiddenUI?.includes(
-            HiddenUI.RouteTokenDescription
-          )}
-        />
-        {!defaultExpanded ? (
-          <CardIconButton onClick={handleExpand} size="small">
-            {cardExpanded ? (
-              <ExpandLess fontSize="inherit" />
-            ) : (
-              <ExpandMore fontSize="inherit" />
-            )}
-          </CardIconButton>
-        ) : null}
-      </TokenContainer>
-      <Collapse timeout={225} in={cardExpanded} mountOnEnter unmountOnExit>
-        {route.steps.map((step) => (
-          <StepActions key={step.id} step={step} mt={2} />
-        ))}
-        <RouteCardEssentialsExpanded route={route} />
-      </Collapse>
-      <RouteCardEssentials route={route} />
+      <RouteToken
+        route={route}
+        token={token}
+        impactToken={impactToken}
+        defaultExpanded={defaultExpanded}
+        showEssentials
+      />
     </Box>
   )
 

packages/widget/src/components/RouteCard/RouteDetails.style.tsx

@@ -0,0 +1,35 @@
+import InfoOutlined from '@mui/icons-material/InfoOutlined'
+import { Box, styled, Typography } from '@mui/material'
+
+export const DetailRow = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  gap: theme.spacing(1),
+}))
+
+export const DetailLabelContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(0.5),
+}))
+
+export const DetailLabel = styled(Typography)(({ theme }) => ({
+  fontSize: 12,
+  fontWeight: 500,
+  lineHeight: 1.3334,
+  color: theme.vars.palette.text.secondary,
+}))
+
+export const DetailValue = styled(Typography)(() => ({
+  fontSize: 12,
+  fontWeight: 700,
+  lineHeight: 1.3334,
+  textAlign: 'right',
+}))
+
+export const DetailInfoIcon = styled(InfoOutlined)(({ theme }) => ({
+  fontSize: 16,
+  color: theme.vars.palette.text.secondary,
+  cursor: 'help',
+}))