@lifi/widget 0.0.0-preview-6cc63bac

package/src/components/Step/StepActions.tsx

@@ -0,0 +1,329 @@
+import type { LiFiStep, RouteExtended, StepExtended } from '@lifi/sdk'
+import { useEthereumContext } from '@lifi/widget-provider'
+import ArrowForward from '@mui/icons-material/ArrowForward'
+import { Box, Divider, Tooltip } from '@mui/material'
+import { Fragment } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useAvailableChains } from '../../hooks/useAvailableChains.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import type {
+  ModeOptions,
+  WidgetFeeConfig,
+  WidgetMode,
+} from '../../types/widget.js'
+import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
+import { SmallAvatar } from '../Avatar/SmallAvatar.js'
+import { Card } from '../Card/Card.js'
+import { CardIconButton } from '../Card/CardIconButton.js'
+import {
+  StepActionsHeader,
+  StepActionsTitle,
+  StepLabelTypography,
+} from './StepActions.style.js'
+
+interface StepDetailsLabelProps {
+  step: StepExtended
+  mode?: Extract<WidgetMode, 'custom'>
+  modeOptions?: ModeOptions
+  feeConfig?: WidgetFeeConfig
+  relayerSupport?: boolean
+}
+
+export const StepActions: React.FC<{
+  route: RouteExtended
+}> = ({ route }) => {
+  const { t } = useTranslation()
+  const { mode, modeOptions, feeConfig, hiddenUI } = useWidgetConfig()
+  const { isGaslessStep } = useEthereumContext()
+
+  const headerIncludedSteps = route.steps.flatMap((step) => step.includedSteps)
+
+  const flatSteps = route.steps.flatMap((routeStep) => {
+    let steps = routeStep.includedSteps
+    if (hiddenUI?.integratorStepDetails) {
+      const feeCollectionStep = steps.find((s) => s.tool === 'feeCollection')
+      if (feeCollectionStep) {
+        steps = structuredClone(steps.filter((s) => s.tool !== 'feeCollection'))
+        steps[0].estimate.fromAmount = feeCollectionStep.estimate.fromAmount
+      }
+    }
+    const hasGaslessSupport = !!isGaslessStep?.(routeStep)
+    return steps.map((includedStep) => ({ includedStep, hasGaslessSupport }))
+  })
+
+  const tooltipContent = (
+    <Card indented>
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: '32px 1fr',
+          columnGap: 1.5,
+        }}
+      >
+        {flatSteps.map(({ includedStep: step, hasGaslessSupport }, i, arr) => {
+          const showDivider = i !== arr.length - 1
+          const isFeeCollection =
+            step.type === 'protocol' && step.tool === 'feeCollection'
+          const toolName =
+            isFeeCollection && feeConfig?.name
+              ? feeConfig.name
+              : step.toolDetails.name
+          const toolLogoURI =
+            isFeeCollection && feeConfig?.logoURI
+              ? feeConfig.logoURI
+              : step.toolDetails.logoURI
+
+          return (
+            <Fragment key={step.id}>
+              <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+                {toolLogoURI ? (
+                  <SmallAvatar
+                    src={toolLogoURI}
+                    alt={toolName}
+                    sx={{ width: 32, height: 32 }}
+                  >
+                    {toolName?.[0]}
+                  </SmallAvatar>
+                ) : null}
+              </Box>
+              <Box
+                sx={{ display: 'flex', flexDirection: 'column', minHeight: 32 }}
+              >
+                {step.type === 'custom' && mode === 'custom' ? (
+                  <CustomStepDetailsLabel
+                    step={step}
+                    mode={mode}
+                    modeOptions={modeOptions}
+                  />
+                ) : step.type === 'cross' ? (
+                  <BridgeStepDetailsLabel step={step} />
+                ) : step.type === 'protocol' ? (
+                  <ProtocolStepDetailsLabel
+                    step={step}
+                    feeConfig={feeConfig}
+                    relayerSupport={hasGaslessSupport}
+                  />
+                ) : (
+                  <SwapStepDetailsLabel step={step} />
+                )}
+                <StepDetailsContent step={step} />
+              </Box>
+              {showDivider && (
+                <Box sx={{ display: 'flex', alignItems: 'center', px: '15px' }}>
+                  <Divider
+                    orientation="vertical"
+                    sx={{ my: 0.5, height: 8, borderRightWidth: 2 }}
+                  />
+                </Box>
+              )}
+              {showDivider && <Box />}
+            </Fragment>
+          )
+        })}
+      </Box>
+    </Card>
+  )
+
+  return (
+    <StepActionsHeader>
+      <StepActionsTitle>{t('main.route')}</StepActionsTitle>
+      <Tooltip
+        title={tooltipContent}
+        placement="bottom-end"
+        arrow={false}
+        slotProps={{
+          tooltip: {
+            sx: {
+              bgcolor: 'transparent',
+              p: 0,
+              boxShadow: 'none',
+              maxWidth: 'none',
+            },
+          },
+          transition: {
+            style: { transformOrigin: 'right top' },
+          },
+        }}
+      >
+        <CardIconButton
+          size="small"
+          sx={(theme) => ({
+            borderRadius: theme.vars.shape.borderRadiusSecondary,
+          })}
+        >
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            {headerIncludedSteps.map((includedStep, index) => (
+              <Fragment key={index}>
+                {index > 0 ? (
+                  <Divider sx={{ width: 8, mx: 0.5, borderWidth: 1 }} />
+                ) : null}
+                <SmallAvatar
+                  src={includedStep.toolDetails.logoURI}
+                  alt={includedStep.toolDetails.name}
+                  sx={{ width: 16, height: 16 }}
+                >
+                  {includedStep.toolDetails.name[0]}
+                </SmallAvatar>
+              </Fragment>
+            ))}
+          </Box>
+        </CardIconButton>
+      </Tooltip>
+    </StepActionsHeader>
+  )
+}
+
+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 (
+    <StepLabelTypography>
+      {!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
+          ),
+        })})`
+      )}
+    </StepLabelTypography>
+  )
+}
+
+const CustomStepDetailsLabel: React.FC<StepDetailsLabelProps> = ({
+  step,
+  mode,
+  modeOptions,
+}) => {
+  const { t } = useTranslation()
+
+  if (!mode) {
+    return null
+  }
+
+  // FIXME: step transaction request overrides step tool details, but not included step tool details
+  const toolDetails =
+    mode === '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 =
+    (mode === 'custom' && modeOptions?.custom?.type) || '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/SentToWalletRow.style.tsx

@@ -0,0 +1,29 @@
+import { Box, Link, styled } from '@mui/material'
+import type React from 'react'
+
+export const ActionIconCircle: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 24,
+    height: 24,
+    borderRadius: '50%',
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.success.main} 12%, ${theme.vars.palette.background.paper})`,
+  }))
+
+export const ExternalLink: React.FC<React.ComponentProps<typeof Link>> = styled(
+  Link
+)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 24,
+  height: 24,
+  borderRadius: '50%',
+  textDecoration: 'none',
+  color: theme.vars.palette.text.primary,
+  '&:hover': {
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+  },
+}))

package/src/components/StepActions/SentToWalletRow.tsx

@@ -0,0 +1,56 @@
+import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
+import OpenInNew from '@mui/icons-material/OpenInNew'
+import Wallet from '@mui/icons-material/Wallet'
+import { Box, IconButton } from '@mui/material'
+import type { MouseEvent } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useExplorer } from '../../hooks/useExplorer.js'
+import { shortenAddress } from '../../utils/wallet.js'
+import { ActionRow } from '../ActionRow/ActionRow.js'
+import { ActionIconCircle, ExternalLink } from './SentToWalletRow.style.js'
+
+interface SentToWalletRowProps {
+  toAddress: string
+  toChainId: number
+}
+
+export const SentToWalletRow: React.FC<SentToWalletRowProps> = ({
+  toAddress,
+  toChainId,
+}) => {
+  const { t } = useTranslation()
+  const { getAddressLink } = useExplorer()
+  const addressLink = getAddressLink(toAddress, toChainId)
+
+  const handleCopy = (e: MouseEvent) => {
+    e.stopPropagation()
+    navigator.clipboard.writeText(toAddress)
+  }
+
+  return (
+    <ActionRow
+      startAdornment={
+        <ActionIconCircle>
+          <Wallet color="success" sx={{ fontSize: 16 }} />
+        </ActionIconCircle>
+      }
+      message={`${t('main.sentToWallet')}: ${shortenAddress(toAddress)}`}
+      endAdornment={
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+          <IconButton size="small" onClick={handleCopy} sx={{ p: 0.5 }}>
+            <ContentCopyRounded sx={{ fontSize: 16 }} />
+          </IconButton>
+          {addressLink ? (
+            <ExternalLink
+              href={addressLink}
+              target="_blank"
+              rel="nofollow noreferrer"
+            >
+              <OpenInNew sx={{ fontSize: 16 }} />
+            </ExternalLink>
+          ) : undefined}
+        </Box>
+      }
+    />
+  )
+}

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

@@ -0,0 +1,18 @@
+import { Link, styled } from '@mui/material'
+import type React from 'react'
+
+export const ExternalLink: React.FC<React.ComponentProps<typeof Link>> = styled(
+  Link
+)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 24,
+  height: 24,
+  borderRadius: '50%',
+  textDecoration: 'none',
+  color: theme.vars.palette.text.primary,
+  '&:hover': {
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+  },
+}))

package/src/components/StepActions/StepActionRow.tsx

@@ -0,0 +1,30 @@
+import type { ExecutionAction, LiFiStepExtended } from '@lifi/sdk'
+import OpenInNew from '@mui/icons-material/OpenInNew'
+import type React from 'react'
+import { useActionMessage } from '../../hooks/useActionMessage.js'
+import { ActionRow } from '../ActionRow/ActionRow.js'
+import { IconCircle } from '../IconCircle/IconCircle.js'
+import { ExternalLink } from './StepActionRow.style.js'
+
+export const StepActionRow: React.FC<{
+  step: LiFiStepExtended
+  action: ExecutionAction
+  href: string
+  defaultLabelsOnly?: boolean
+}> = ({ step, action, href, defaultLabelsOnly }) => {
+  const { title } = useActionMessage(step, action, defaultLabelsOnly)
+  const isFailed = action?.status === 'FAILED'
+  return (
+    <ActionRow
+      startAdornment={
+        <IconCircle status={isFailed ? 'error' : 'success'} size={24} />
+      }
+      message={title ?? ''}
+      endAdornment={
+        <ExternalLink href={href} target="_blank" rel="nofollow noreferrer">
+          <OpenInNew sx={{ fontSize: 16 }} />
+        </ExternalLink>
+      }
+    />
+  )
+}

package/src/components/StepActions/StepActionsList.tsx

@@ -0,0 +1,40 @@
+import type { RouteExtended } from '@lifi/sdk'
+import { Box } from '@mui/material'
+import type React from 'react'
+import { Fragment } from 'react'
+import { renderExecutionRow, useExecutionRows } from './executionRows.js'
+
+interface StepActionsListProps {
+  route: RouteExtended
+  toAddress?: string
+}
+
+/** Non-animated list of completed execution step rows (transaction details view). */
+export const StepActionsList: React.FC<StepActionsListProps> = ({
+  route,
+  toAddress,
+}) => {
+  const rows = useExecutionRows(route, toAddress)
+
+  if (rows.length === 0) {
+    return null
+  }
+
+  const lastActionIndex = rows.findLastIndex((r) => r.kind === 'action')
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+      {rows.map((row, index) => (
+        <Fragment
+          key={
+            row.kind === 'action'
+              ? `${row.step.id}-${row.action.type}-${index}`
+              : `wallet-${row.toChainId}`
+          }
+        >
+          {renderExecutionRow(row, index === lastActionIndex)}
+        </Fragment>
+      ))}
+    </Box>
+  )
+}

package/src/components/StepActions/executionRows.tsx

@@ -0,0 +1,86 @@
+import type {
+  ExecutionAction,
+  LiFiStepExtended,
+  RouteExtended,
+} from '@lifi/sdk'
+import type { ReactNode } from 'react'
+import { useMemo } from 'react'
+import { useExplorer } from '../../hooks/useExplorer.js'
+import { prepareActions } from '../../utils/prepareActions.js'
+import { SentToWalletRow } from './SentToWalletRow.js'
+import { StepActionRow } from './StepActionRow.js'
+
+/**
+ * A row in an execution list: either a completed/failed action with an explorer
+ * link, or the recipient wallet row appended when a route has a `toAddress`.
+ */
+export type ExecutionRow =
+  | {
+      kind: 'action'
+      step: LiFiStepExtended
+      action: ExecutionAction
+      href: string
+    }
+  | { kind: 'wallet'; toAddress: string; toChainId: number }
+
+/**
+ * The rows to display for a route: every `DONE`/`FAILED` action that has a
+ * transaction link, plus a wallet row when `toAddress` is set. Shared by the
+ * static step lists and the animated checklist.
+ */
+export function useExecutionRows(
+  route: RouteExtended,
+  toAddress?: string
+): ExecutionRow[] {
+  const { getTransactionLink } = useExplorer()
+  return useMemo(() => {
+    const rows: ExecutionRow[] = []
+    for (const step of route.steps) {
+      const groups = prepareActions(step.execution?.actions ?? [])
+      for (const group of groups) {
+        const action = group.at(-1)
+        if (!action) {
+          continue
+        }
+        const isDoneOrFailed =
+          action.status === 'DONE' || action.status === 'FAILED'
+        if (!isDoneOrFailed) {
+          continue
+        }
+        const href = getTransactionLink({
+          txHash: action.txHash,
+          txLink: action.txLink,
+          chain: action.chainId,
+        })
+        if (!href) {
+          continue
+        }
+        rows.push({ kind: 'action', step, action, href })
+      }
+    }
+    if (toAddress) {
+      rows.push({ kind: 'wallet', toAddress, toChainId: route.toChainId })
+    }
+    return rows
+  }, [route, toAddress, getTransactionLink])
+}
+
+/**
+ * Renders an {@link ExecutionRow} as the appropriate row component.
+ * Callers are responsible for React keys on the returned node.
+ */
+export function renderExecutionRow(
+  row: ExecutionRow,
+  isLast: boolean
+): ReactNode {
+  return row.kind === 'action' ? (
+    <StepActionRow
+      step={row.step}
+      action={row.action}
+      href={row.href}
+      defaultLabelsOnly={!isLast}
+    />
+  ) : (
+    <SentToWalletRow toAddress={row.toAddress} toChainId={row.toChainId} />
+  )
+}

package/src/components/Switch.tsx

@@ -0,0 +1,54 @@
+import { Switch as MuiSwitch, styled, switchClasses } from '@mui/material'
+import type React from 'react'
+
+export const Switch: React.FC<React.ComponentProps<typeof MuiSwitch>> = 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.vars.palette.common.white,
+      [`& + .${switchClasses.track}`]: {
+        backgroundColor: theme.vars.palette.primary.main,
+        opacity: 1,
+        border: 0,
+      },
+      [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {
+        opacity: 0.5,
+      },
+    },
+    [`&.Mui-focusVisible .${switchClasses.thumb}`]: {
+      color: theme.vars.palette.primary.main,
+      border: '6px solid',
+      borderColor: theme.vars.palette.common.white,
+    },
+    [`&.${switchClasses.disabled} .${switchClasses.thumb}`]: {
+      color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 12%, transparent)`,
+    },
+    [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {
+      opacity: 0.7,
+      ...theme.applyStyles('dark', {
+        opacity: 0.3,
+      }),
+    },
+  },
+  [`.${switchClasses.thumb}`]: {
+    boxSizing: 'border-box',
+    width: 20,
+    height: 20,
+  },
+  [`.${switchClasses.track}`]: {
+    borderRadius: 24 / 2,
+    opacity: 1,
+    transition: theme.transitions.create(['background-color'], {
+      duration: theme.transitions.duration.standard,
+    }),
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 16%, transparent)`,
+  },
+}))

package/src/components/Tabs/NavigationTabs.tsx

@@ -0,0 +1,45 @@
+import { styled, Tabs, tabsClasses } from '@mui/material'
+import type React from 'react'
+import { Tab } from './Tabs.style.js'
+
+export const NavigationTabs: React.FC<React.ComponentProps<typeof Tabs>> =
+  styled(Tabs, {
+    name: 'MuiNavigationTabs',
+    slot: 'root',
+  })(({ theme }) => ({
+    overflow: 'visible', // Prevent shadows from being cut off
+    width: 'fit-content',
+    minHeight: theme.spacing(5),
+    maxHeight: theme.spacing(5),
+    background: 'transparent',
+    ...theme.applyStyles('dark', {
+      backgroundColor: 'transparent',
+    }),
+    [`& .${tabsClasses.scroller}`]: {
+      padding: 0,
+      overflow: 'visible !important', // Enforce since overflow is set dynamically
+    },
+    [`& .${tabsClasses.indicator}`]: {
+      boxShadow: 'none',
+      top: 0,
+      left: 0,
+      height: '100%',
+      width: '100%',
+      borderRadius: theme.vars.shape.borderRadius,
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+      ...theme.applyStyles('dark', {
+        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
+      }),
+    },
+  }))
+
+export const NavigationTab: React.FC<React.ComponentProps<typeof Tab>> = styled(
+  Tab,
+  {
+    name: 'MuiNavigationTab',
+    slot: 'root',
+  }
+)(({ theme }) => ({
+  minHeight: theme.spacing(5),
+  maxHeight: theme.spacing(5),
+}))