@lifi/widget 4.0.0-beta.9 → 4.1.0

package/src/components/StepActions/StepActions.tsx

@@ -1,378 +0,0 @@
-import type { LiFiStep, StepExtended } from '@lifi/sdk'
-import { useEthereumContext } from '@lifi/widget-provider'
-import ArrowForward from '@mui/icons-material/ArrowForward'
-import ExpandLess from '@mui/icons-material/ExpandLess'
-import ExpandMore from '@mui/icons-material/ExpandMore'
-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 { useAvailableChains } from '../../hooks/useAvailableChains.js'
-import { lifiLogoUrl } from '../../icons/lifi.js'
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
-import { HiddenUI } from '../../types/widget.js'
-import { formatTokenAmount, formatTokenPrice } 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 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
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-        }}
-      >
-        <Badge
-          overlap="circular"
-          anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-          badgeContent={<SmallAvatar src={lifiLogoUrl} />}
-        >
-          <StepAvatar
-            variant="circular"
-            src={toolDetails.logoURI ?? lifiLogoUrl}
-            alt={toolDetails.name}
-          >
-            {toolDetails.name[0]}
-          </StepAvatar>
-        </Badge>
-        <Box
-          sx={{
-            flex: 1,
-          }}
-        >
-          <Typography
-            sx={{
-              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>
-  )
-}
-
-const IncludedSteps: React.FC<IncludedStepsProps> = ({ step }) => {
-  const { subvariant, subvariantOptions, feeConfig, hiddenUI } =
-    useWidgetConfig()
-  const { isGaslessStep } = useEthereumContext()
-
-  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
-    }
-  }
-
-  // biome-ignore lint/correctness/noNestedComponentDefinitions: part of the flow
-  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
-  }
-
-  const hasGaslessSupport = !!isGaslessStep?.(step)
-
-  return (
-    <Box
-      sx={{
-        mt: 1,
-      }}
-    >
-      <Stepper
-        orientation="vertical"
-        connector={<StepConnector />}
-        activeStep={-1}
-      >
-        {includedSteps.map((step, i, includedSteps) => (
-          <MuiStep key={step.id} expanded>
-            <StepLabel
-              slots={{
-                stepIcon: 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}
-                  relayerSupport={hasGaslessSupport}
-                />
-              ) : (
-                <SwapStepDetailsLabel step={step} />
-              )}
-            </StepLabel>
-            <StepContent last={i === includedSteps.length - 1}>
-              <StepDetailsContent step={step} />
-            </StepContent>
-          </MuiStep>
-        ))}
-      </Stepper>
-    </Box>
-  )
-}
-
-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
-        ? formatTokenAmount(estimatedFromAmount, step.action.fromToken.decimals)
-        : formatTokenAmount(
-            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
-      sx={{
-        fontSize: 12,
-        lineHeight: 1,
-        fontWeight: '500',
-        color: 'text.secondary',
-        alignItems: 'center',
-        display: 'flex',
-      }}
-    >
-      {!showToAmount ? (
-        <>
-          {t('format.tokenAmount', {
-            value: formatTokenAmount(
-              BigInt(step.estimate.fromAmount),
-              step.action.fromToken.decimals
-            ),
-          })}{' '}
-          {step.action.fromToken.symbol}
-          {' - '}
-        </>
-      ) : null}
-      {t('format.tokenAmount', {
-        value: fromAmount,
-      })}{' '}
-      {step.action.fromToken.symbol}
-      {showToAmount ? (
-        <>
-          <ArrowForward sx={{ fontSize: 18, paddingX: 0.5, height: 12 }} />
-          {t('format.tokenAmount', {
-            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: formatTokenPrice(
-            fromAmount,
-            step.action.fromToken.priceUSD,
-            step.action.fromToken.decimals
-          ),
-        })})`
-      )}
-    </Typography>
-  )
-}
-
-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>
-  )
-}
-
-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>
-  )
-}
-
-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>
-  )
-}
-
-const ProtocolStepDetailsLabel: React.FC<
-  Omit<StepDetailsLabelProps, 'variant'>
-> = ({ step, feeConfig, relayerSupport }) => {
-  const { t } = useTranslation()
-  return (
-    <StepLabelTypography>
-      {step.toolDetails.key === 'feeCollection'
-        ? feeConfig?.name ||
-          (relayerSupport
-            ? t('main.fees.relayerService')
-            : t('main.fees.defaultIntegrator'))
-        : step.toolDetails.key === 'gasZip'
-          ? t('main.refuelStepDetails', {
-              tool: step.toolDetails.name,
-            })
-          : step.toolDetails.name}
-    </StepLabelTypography>
-  )
-}

package/src/components/StepActions/types.ts

@@ -1,24 +0,0 @@
-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
-  relayerSupport?: boolean
-}
-
-export interface IncludedStepsProps {
-  step: LiFiStep
-}

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

@@ -1,8 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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/Timer/StepTimer.tsx

@@ -1,93 +0,0 @@
-import type { LiFiStepExtended } from '@lifi/sdk'
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useTimer } from '../../hooks/timer/useTimer.js'
-import { formatTimer } from '../../utils/timer.js'
-import { TimerContent } from './TimerContent.js'
-
-const getExpiryTimestamp = (step: LiFiStepExtended) => {
-  const execution = step?.execution
-  if (!execution) {
-    return new Date()
-  }
-  const expiry = new Date(
-    (execution.signedAt ?? Date.now()) + step.estimate.executionDuration * 1000
-  )
-  return expiry
-}
-
-export const StepTimer: React.FC<{
-  step: LiFiStepExtended
-  hideInProgress?: boolean
-}> = ({ step, hideInProgress }) => {
-  const { i18n } = useTranslation()
-
-  if (
-    step.execution?.status === 'DONE' ||
-    step.execution?.status === 'FAILED'
-  ) {
-    return null
-  }
-
-  if (!step.execution?.signedAt) {
-    const showSeconds = step.estimate.executionDuration < 60
-    const duration = showSeconds
-      ? Math.floor(step.estimate.executionDuration)
-      : Math.floor(step.estimate.executionDuration / 60)
-    return (
-      <TimerContent>
-        {duration.toLocaleString(i18n.language, {
-          style: 'unit',
-          unit: showSeconds ? 'second' : 'minute',
-          unitDisplay: 'narrow',
-        })}
-      </TimerContent>
-    )
-  }
-
-  return (
-    <ExecutionTimer
-      expiryTimestamp={getExpiryTimestamp(step)}
-      hideInProgress={hideInProgress}
-    />
-  )
-}
-
-const ExecutionTimer = ({
-  expiryTimestamp,
-  hideInProgress,
-}: {
-  expiryTimestamp: Date
-  hideInProgress?: boolean
-}) => {
-  const { t, i18n } = useTranslation()
-
-  const [isExpired, setExpired] = useState(false)
-
-  const { days, hours, minutes, seconds } = useTimer({
-    autoStart: true,
-    expiryTimestamp,
-    onExpire: () => setExpired(true),
-  })
-
-  const isTimerExpired = isExpired || (!minutes && !seconds)
-
-  if (isTimerExpired) {
-    if (hideInProgress) {
-      return null
-    }
-    return t('main.inProgress')
-  }
-
-  return (
-    <TimerContent>
-      {formatTimer({
-        locale: i18n.language,
-        days,
-        hours,
-        minutes,
-        seconds,
-      })}
-    </TimerContent>
-  )
-}

package/src/components/Timer/TimerContent.tsx

@@ -1,34 +0,0 @@
-import AccessTimeFilled from '@mui/icons-material/AccessTimeFilled'
-import { Box, Tooltip } from '@mui/material'
-import type { FC, PropsWithChildren } from 'react'
-import { useTranslation } from 'react-i18next'
-import { IconTypography } from '../IconTypography.js'
-
-export const TimerContent: FC<PropsWithChildren> = ({ children }) => {
-  const { t } = useTranslation()
-  return (
-    <Tooltip title={t('tooltip.estimatedTime')} sx={{ cursor: 'help' }}>
-      <Box
-        component="span"
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          height: 14,
-        }}
-      >
-        <IconTypography as="span" sx={{ marginRight: 0.5, fontSize: 16 }}>
-          <AccessTimeFilled fontSize="inherit" />
-        </IconTypography>
-        <Box
-          component="span"
-          sx={{
-            fontVariantNumeric: 'tabular-nums',
-            cursor: 'help',
-          }}
-        >
-          {children}
-        </Box>
-      </Box>
-    </Tooltip>
-  )
-}