@lifi/widget 3.7.0 → 3.8.0-beta.1

package/src/components/StepActions/StepActions.style.tsx

@@ -0,0 +1,73 @@
+import {
+  Box,
+  StepConnector as MuiStepConnector,
+  StepLabel as MuiStepLabel,
+  Typography,
+  alpha,
+  stepConnectorClasses,
+  stepLabelClasses,
+  styled,
+} from '@mui/material'
+import { AvatarMasked } from '../Avatar/Avatar.style.js'
+
+export const StepConnector = styled(MuiStepConnector, {
+  shouldForwardProp: (prop) =>
+    !['active', 'completed', 'error'].includes(prop as string),
+})(({ theme }) => ({
+  marginLeft: theme.spacing(2.375),
+  [`.${stepConnectorClasses.line}`]: {
+    minHeight: 8,
+    borderLeftWidth: 2,
+    borderColor:
+      theme.palette.mode === 'light'
+        ? alpha(theme.palette.common.black, 0.12)
+        : alpha(theme.palette.common.white, 0.16),
+  },
+}))
+
+export const StepLabel = styled(MuiStepLabel, {
+  shouldForwardProp: (prop) =>
+    !['active', 'completed', 'error', 'disabled'].includes(prop as string),
+})(({ theme }) => ({
+  padding: 0,
+  alignItems: 'center',
+  [`.${stepLabelClasses.iconContainer}`]: {
+    paddingLeft: theme.spacing(1.25),
+    paddingRight: theme.spacing(3.25),
+  },
+  [`.${stepLabelClasses.labelContainer}`]: {
+    minHeight: 24,
+    display: 'flex',
+    alignItems: 'center',
+  },
+  [`&.${stepLabelClasses.disabled}`]: {
+    cursor: 'inherit',
+  },
+}))
+
+export const StepLabelTypography = styled(Typography)(({ theme }) => ({
+  fontSize: 12,
+  fontWeight: 500,
+  lineHeight: 1.325,
+  color: theme.palette.text.secondary,
+  padding: theme.spacing(0.5, 0),
+}))
+
+export const StepContent = styled(Box, {
+  shouldForwardProp: (prop) => !['last'].includes(prop as string),
+})<{ last: boolean }>(({ theme, last }) => ({
+  borderLeft: last
+    ? 'none'
+    : `2px solid ${
+        theme.palette.mode === 'light'
+          ? alpha(theme.palette.common.black, 0.12)
+          : alpha(theme.palette.common.white, 0.16)
+      }`,
+  margin: theme.spacing(0, 0, 0, 2.375),
+  paddingLeft: last ? theme.spacing(4.625) : theme.spacing(4.375),
+}))
+
+export const StepAvatar = styled(AvatarMasked)(({ theme }) => ({
+  color: theme.palette.text.primary,
+  backgroundColor: 'transparent',
+}))

package/src/components/StepActions/StepActions.tsx

@@ -0,0 +1,338 @@
+import type { LiFiStep, StepExtended } from '@lifi/sdk'
+import { ArrowForward, ExpandLess, ExpandMore } from '@mui/icons-material'
+import type { StepIconProps } from '@mui/material'
+import {
+  Badge,
+  Box,
+  Collapse,
+  Step as MuiStep,
+  Stepper,
+  Typography,
+} from '@mui/material'
+import type { MouseEventHandler } from 'react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { formatUnits } from 'viem'
+import { useAvailableChains } from '../../hooks/useAvailableChains.js'
+import { LiFiToolLogo } from '../../icons/lifi.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { HiddenUI } from '../../types/widget.js'
+import { formatTokenAmount } from '../../utils/format.js'
+import { SmallAvatar } from '../Avatar/SmallAvatar.js'
+import { CardIconButton } from '../Card/CardIconButton.js'
+import {
+  StepAvatar,
+  StepConnector,
+  StepContent,
+  StepLabel,
+  StepLabelTypography,
+} from './StepActions.style.js'
+import { StepFees } from './StepFees.js'
+import type {
+  IncludedStepsProps,
+  StepActionsProps,
+  StepDetailsLabelProps,
+} from './types.js'
+
+export const StepActions: React.FC<StepActionsProps> = ({
+  step,
+  dense,
+  ...other
+}) => {
+  const { t } = useTranslation()
+  const { subvariant } = useWidgetConfig()
+  const [cardExpanded, setCardExpanded] = useState(false)
+
+  const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation()
+    setCardExpanded((expanded) => !expanded)
+  }
+
+  // FIXME: step transaction request overrides step tool details, but not included step tool details
+  const toolDetails =
+    subvariant === 'custom'
+      ? step.includedSteps.find(
+          (step) => step.tool === 'custom' && step.toolDetails.key !== 'custom'
+        )?.toolDetails || step.toolDetails
+      : step.toolDetails
+
+  return (
+    <Box {...other}>
+      <Box display="flex" alignItems="center">
+        <Badge
+          overlap="circular"
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+          badgeContent={<SmallAvatar src={LiFiToolLogo} />}
+        >
+          <StepAvatar
+            variant="circular"
+            src={toolDetails.logoURI ?? LiFiToolLogo}
+            alt={toolDetails.name}
+          >
+            {toolDetails.name[0]}
+          </StepAvatar>
+        </Badge>
+        <Box flex={1}>
+          <Typography fontSize={18} fontWeight={600} lineHeight={1.3334} ml={2}>
+            {toolDetails.name?.includes('LI.FI')
+              ? toolDetails.name
+              : t('main.stepDetails', {
+                  tool: toolDetails.name,
+                })}
+          </Typography>
+          <StepFees ml={2} step={step} />
+        </Box>
+        {dense ? (
+          <CardIconButton onClick={handleExpand} size="small">
+            {cardExpanded ? (
+              <ExpandLess fontSize="inherit" />
+            ) : (
+              <ExpandMore fontSize="inherit" />
+            )}
+          </CardIconButton>
+        ) : null}
+      </Box>
+      {dense ? (
+        <Collapse timeout={225} in={cardExpanded} mountOnEnter unmountOnExit>
+          <IncludedSteps step={step} />
+        </Collapse>
+      ) : (
+        <IncludedSteps step={step} />
+      )}
+    </Box>
+  )
+}
+
+export const IncludedSteps: React.FC<IncludedStepsProps> = ({ step }) => {
+  const { subvariant, subvariantOptions, feeConfig, hiddenUI } =
+    useWidgetConfig()
+
+  let includedSteps = step.includedSteps
+  if (hiddenUI?.includes(HiddenUI.IntegratorStepDetails)) {
+    const feeCollectionStep = includedSteps.find(
+      (step) => step.tool === 'feeCollection'
+    )
+    if (feeCollectionStep) {
+      includedSteps = structuredClone(
+        includedSteps.filter((step) => step.tool !== 'feeCollection')
+      )
+      includedSteps[0].estimate.fromAmount =
+        feeCollectionStep.estimate.fromAmount
+    }
+  }
+
+  const StepIconComponent = ({ icon }: StepIconProps) => {
+    const includedStep = includedSteps?.[Number(icon) - 1]
+    const feeCollectionStep =
+      includedStep?.type === 'protocol' &&
+      includedStep?.tool === 'feeCollection'
+    const toolName =
+      feeCollectionStep && feeConfig?.name
+        ? feeConfig?.name
+        : includedStep?.toolDetails.name
+    const toolLogoURI =
+      feeCollectionStep && feeConfig?.logoURI
+        ? feeConfig?.logoURI
+        : includedStep?.toolDetails.logoURI
+    return toolLogoURI ? (
+      <SmallAvatar
+        src={toolLogoURI}
+        alt={toolName}
+        sx={{ width: 20, height: 20 }}
+      >
+        {toolName?.[0]}
+      </SmallAvatar>
+    ) : null
+  }
+
+  return (
+    <Box mt={1}>
+      <Stepper
+        orientation="vertical"
+        connector={<StepConnector />}
+        activeStep={-1}
+      >
+        {includedSteps.map((step, i, includedSteps) => (
+          <MuiStep key={step.id} expanded>
+            <StepLabel StepIconComponent={StepIconComponent}>
+              {step.type === 'custom' && subvariant === 'custom' ? (
+                <CustomStepDetailsLabel
+                  step={step}
+                  subvariant={subvariant}
+                  subvariantOptions={subvariantOptions}
+                />
+              ) : step.type === 'cross' ? (
+                <BridgeStepDetailsLabel step={step} />
+              ) : step.type === 'protocol' ? (
+                <ProtocolStepDetailsLabel step={step} feeConfig={feeConfig} />
+              ) : (
+                <SwapStepDetailsLabel step={step} />
+              )}
+            </StepLabel>
+            <StepContent last={i === includedSteps.length - 1}>
+              <StepDetailsContent step={step} />
+            </StepContent>
+          </MuiStep>
+        ))}
+      </Stepper>
+    </Box>
+  )
+}
+
+export const StepDetailsContent: React.FC<{
+  step: StepExtended
+}> = ({ step }) => {
+  const { t } = useTranslation()
+
+  const sameTokenProtocolStep =
+    step.action.fromToken.chainId === step.action.toToken.chainId &&
+    step.action.fromToken.address === step.action.toToken.address
+
+  let fromAmount: string | undefined
+  if (sameTokenProtocolStep) {
+    const estimatedFromAmount =
+      BigInt(step.estimate.fromAmount) - BigInt(step.estimate.toAmount)
+
+    fromAmount =
+      estimatedFromAmount > 0n
+        ? formatUnits(estimatedFromAmount, step.action.fromToken.decimals)
+        : formatUnits(
+            BigInt(step.estimate.fromAmount),
+            step.action.fromToken.decimals
+          )
+  } else {
+    fromAmount = formatTokenAmount(
+      BigInt(step.estimate.fromAmount),
+      step.action.fromToken.decimals
+    )
+  }
+
+  const showToAmount =
+    step.type !== 'custom' && step.tool !== 'custom' && !sameTokenProtocolStep
+
+  return (
+    <Typography
+      fontSize={12}
+      lineHeight={1}
+      fontWeight="500"
+      color="text.secondary"
+      alignItems="center"
+      display="flex"
+    >
+      {!showToAmount ? (
+        <>
+          {formatUnits(
+            BigInt(step.estimate.fromAmount),
+            step.action.fromToken.decimals
+          )}{' '}
+          {step.action.fromToken.symbol}
+          {' - '}
+        </>
+      ) : null}
+      {t('format.number', {
+        value: fromAmount,
+      })}{' '}
+      {step.action.fromToken.symbol}
+      {showToAmount ? (
+        <>
+          <ArrowForward sx={{ fontSize: 18, paddingX: 0.5, height: 12 }} />
+          {t('format.number', {
+            value: formatTokenAmount(
+              BigInt(step.execution?.toAmount ?? step.estimate.toAmount),
+              step.execution?.toToken?.decimals ?? step.action.toToken.decimals
+            ),
+          })}{' '}
+          {step.execution?.toToken?.symbol ?? step.action.toToken.symbol}
+        </>
+      ) : (
+        ` (${t('format.currency', {
+          value:
+            Number.parseFloat(fromAmount) *
+            Number.parseFloat(step.action.fromToken.priceUSD),
+        })})`
+      )}
+    </Typography>
+  )
+}
+
+export const CustomStepDetailsLabel: React.FC<StepDetailsLabelProps> = ({
+  step,
+  subvariant,
+  subvariantOptions,
+}) => {
+  const { t } = useTranslation()
+
+  if (!subvariant) {
+    return null
+  }
+
+  // FIXME: step transaction request overrides step tool details, but not included step tool details
+  const toolDetails =
+    subvariant === 'custom' &&
+    (step as unknown as LiFiStep).includedSteps?.length > 0
+      ? (step as unknown as LiFiStep).includedSteps.find(
+          (step) => step.tool === 'custom' && step.toolDetails.key !== 'custom'
+        )?.toolDetails || step.toolDetails
+      : step.toolDetails
+
+  const stepDetailsKey =
+    (subvariant === 'custom' && subvariantOptions?.custom) || 'checkout'
+
+  return (
+    <StepLabelTypography>
+      {t(`main.${stepDetailsKey}StepDetails`, {
+        tool: toolDetails.name,
+      })}
+    </StepLabelTypography>
+  )
+}
+
+export const BridgeStepDetailsLabel: React.FC<
+  Omit<StepDetailsLabelProps, 'variant'>
+> = ({ step }) => {
+  const { t } = useTranslation()
+  const { getChainById } = useAvailableChains()
+  return (
+    <StepLabelTypography>
+      {t('main.bridgeStepDetails', {
+        from: getChainById(step.action.fromChainId)?.name,
+        to: getChainById(step.action.toChainId)?.name,
+        tool: step.toolDetails.name,
+      })}
+    </StepLabelTypography>
+  )
+}
+
+export const SwapStepDetailsLabel: React.FC<
+  Omit<StepDetailsLabelProps, 'variant'>
+> = ({ step }) => {
+  const { t } = useTranslation()
+  const { getChainById } = useAvailableChains()
+  return (
+    <StepLabelTypography>
+      {t('main.swapStepDetails', {
+        chain: getChainById(step.action.fromChainId)?.name,
+        tool: step.toolDetails.name,
+      })}
+    </StepLabelTypography>
+  )
+}
+
+export const ProtocolStepDetailsLabel: React.FC<
+  Omit<StepDetailsLabelProps, 'variant'>
+> = ({ step, feeConfig }) => {
+  const { t } = useTranslation()
+  return (
+    <StepLabelTypography>
+      {step.toolDetails.key === 'feeCollection'
+        ? feeConfig?.name
+          ? t('main.fees.integrator', { tool: feeConfig.name })
+          : t('main.fees.defaultIntegrator')
+        : step.toolDetails.key === 'lifuelProtocol'
+          ? t('main.refuelStepDetails', {
+              tool: step.toolDetails.name,
+            })
+          : step.toolDetails.name}
+    </StepLabelTypography>
+  )
+}

package/src/components/StepActions/StepFees.tsx

@@ -0,0 +1,44 @@
+import type { LiFiStepExtended } from '@lifi/sdk'
+import type { TypographyProps } from '@mui/material'
+import { Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { getStepFeeCostsBreakdown } from '../../utils/fees.js'
+
+export const StepFees: React.FC<
+  TypographyProps & {
+    step: LiFiStepExtended
+  }
+> = ({ step, ...other }) => {
+  const { t } = useTranslation()
+
+  const isDone = step.execution?.status === 'DONE'
+  const gasCosts = step.execution?.gasCosts ?? step.estimate.gasCosts
+  const feeCosts = step.execution?.feeCosts ?? step.estimate.feeCosts
+  let fees = 0
+
+  if (gasCosts) {
+    const { amountUSD } = getStepFeeCostsBreakdown(gasCosts)
+    fees += amountUSD
+  }
+
+  if (feeCosts) {
+    const filteredfeeCosts = feeCosts?.filter((fee) => !fee.included)
+    if (filteredfeeCosts?.length) {
+      const { amountUSD } = getStepFeeCostsBreakdown(filteredfeeCosts)
+      fees += amountUSD
+    }
+  }
+
+  return (
+    <Typography
+      fontSize={12}
+      fontWeight="500"
+      color="text.secondary"
+      lineHeight={1.3334}
+      {...other}
+    >
+      {t('format.currency', { value: fees })}{' '}
+      {isDone ? t('main.fees.paid') : t('main.fees.estimated')}
+    </Typography>
+  )
+}

package/src/components/StepActions/types.ts

@@ -0,0 +1,23 @@
+import type { LiFiStep, Step } from '@lifi/sdk'
+import type { BoxProps } from '@mui/material'
+import type {
+  SubvariantOptions,
+  WidgetFeeConfig,
+  WidgetSubvariant,
+} from '../../types/widget.js'
+
+export interface StepActionsProps extends BoxProps {
+  step: LiFiStep
+  dense?: boolean
+}
+
+export interface StepDetailsLabelProps {
+  step: Step
+  subvariant?: Extract<WidgetSubvariant, 'custom'>
+  subvariantOptions?: SubvariantOptions
+  feeConfig?: WidgetFeeConfig
+}
+
+export interface IncludedStepsProps {
+  step: LiFiStep
+}

package/src/components/StepDivider/StepDivider.style.tsx

@@ -0,0 +1,8 @@
+import { Container as MuiContainer, styled } from '@mui/material'
+
+export const Container = styled(MuiContainer)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: theme.spacing(2),
+}))

package/src/components/StepDivider/StepDivider.tsx

@@ -0,0 +1,10 @@
+import { Divider } from '@mui/material'
+import { Container } from './StepDivider.style.js'
+
+export const StepDivider: React.FC = () => {
+  return (
+    <Container>
+      <Divider orientation="vertical" flexItem />
+    </Container>
+  )
+}

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