@lifi/widget 0.0.0-preview-6cc63bac

package/src/components/RouteCard/RouteDetails.tsx

@@ -0,0 +1,214 @@
+import type { RouteExtended } from '@lifi/sdk'
+import { useEthereumContext } from '@lifi/widget-provider'
+import { Box, Tooltip } from '@mui/material'
+import type { JSX } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useTokenRateText } from '../../hooks/useTokenRateText.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { isRouteDone } from '../../stores/routes/utils.js'
+import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'
+import {
+  formatDuration,
+  formatTokenAmount,
+  formatTokenPrice,
+} from '../../utils/format.js'
+import { getPriceImpact } from '../../utils/getPriceImpact.js'
+import { FeeBreakdownTooltip } from '../FeeBreakdownTooltip.js'
+import { StepActions } from '../Step/StepActions.js'
+import {
+  DetailInfoIcon,
+  DetailLabel,
+  DetailLabelContainer,
+  DetailRow,
+  DetailValue,
+} from './RouteDetails.style.js'
+
+interface RouteDetailsProps {
+  route: RouteExtended
+}
+
+export const RouteDetails = ({ route }: RouteDetailsProps): JSX.Element => {
+  const { t, i18n } = useTranslation()
+  const { rateText, toggleRate } = useTokenRateText(route)
+  const { feeConfig } = useWidgetConfig()
+  const { isGaslessStep } = useEthereumContext()
+
+  const { gasCosts, feeCosts, gasCostUSD, feeCostUSD } =
+    getAccumulatedFeeCostsBreakdown(route)
+
+  const priceImpact = getPriceImpact({
+    fromAmount: BigInt(route.fromAmount),
+    toAmount: BigInt(route.toAmount),
+    fromToken: route.fromToken,
+    toToken: route.toToken,
+  })
+
+  let feeAmountUSD = 0
+  let feePercentage = 0
+
+  const feeCollectionStep = route.steps[0].includedSteps.find(
+    (includedStep) => includedStep.tool === 'feeCollection'
+  )
+
+  if (feeCollectionStep) {
+    const estimatedFromAmount =
+      BigInt(feeCollectionStep.estimate.fromAmount) -
+      BigInt(feeCollectionStep.estimate.toAmount)
+
+    feeAmountUSD = formatTokenPrice(
+      estimatedFromAmount,
+      feeCollectionStep.action.fromToken.priceUSD,
+      feeCollectionStep.action.fromToken.decimals
+    )
+
+    feePercentage =
+      feeCollectionStep.estimate.feeCosts?.reduce(
+        (percentage, feeCost) =>
+          percentage + Number.parseFloat(feeCost.percentage || '0'),
+        0
+      ) ?? 0
+  }
+
+  const executionTimeSeconds = Math.floor(
+    route.steps.reduce(
+      (duration, step) => duration + step.estimate.executionDuration,
+      0
+    )
+  )
+
+  const hasGaslessSupport = route.steps.every((step) => isGaslessStep?.(step))
+
+  const showIntegratorFeeCollectionDetails =
+    (feeAmountUSD || Number.isFinite(feeConfig?.fee)) && !hasGaslessSupport
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, pt: 1.5 }}>
+      <StepActions route={route} />
+      <DetailRow>
+        <DetailLabelContainer>
+          <DetailLabel>{t('main.fees.network')}</DetailLabel>
+          <FeeBreakdownTooltip gasCosts={gasCosts} gasless={hasGaslessSupport}>
+            <DetailInfoIcon />
+          </FeeBreakdownTooltip>
+        </DetailLabelContainer>
+        <DetailValue>
+          {!gasCostUSD
+            ? t('main.fees.free')
+            : t('format.currency', { value: gasCostUSD })}
+        </DetailValue>
+      </DetailRow>
+      {feeCosts.length ? (
+        <DetailRow>
+          <DetailLabelContainer>
+            <DetailLabel>{t('main.fees.provider')}</DetailLabel>
+            <FeeBreakdownTooltip feeCosts={feeCosts}>
+              <DetailInfoIcon />
+            </FeeBreakdownTooltip>
+          </DetailLabelContainer>
+          <DetailValue>
+            {t('format.currency', { value: feeCostUSD })}
+          </DetailValue>
+        </DetailRow>
+      ) : null}
+      {showIntegratorFeeCollectionDetails ? (
+        <DetailRow>
+          <DetailLabelContainer>
+            <DetailLabel>
+              {feeConfig?.name || t('main.fees.defaultIntegrator')}
+              {feeConfig?.showFeePercentage && (
+                <> ({t('format.percent', { value: feePercentage })})</>
+              )}
+            </DetailLabel>
+            {feeConfig?.showFeeTooltip &&
+            (feeConfig?.name || feeConfig?.feeTooltipComponent) ? (
+              <Tooltip
+                title={
+                  feeConfig?.feeTooltipComponent ||
+                  t('tooltip.feeCollection', { tool: feeConfig.name })
+                }
+              >
+                <DetailInfoIcon />
+              </Tooltip>
+            ) : null}
+          </DetailLabelContainer>
+          <DetailValue>
+            {t('format.currency', { value: feeAmountUSD })}
+          </DetailValue>
+        </DetailRow>
+      ) : null}
+      <DetailRow>
+        <DetailLabelContainer>
+          <DetailLabel>{t('main.priceImpact')}</DetailLabel>
+          <Tooltip title={t('tooltip.priceImpact')}>
+            <DetailInfoIcon />
+          </Tooltip>
+        </DetailLabelContainer>
+        <DetailValue>
+          {t('format.percent', { value: priceImpact, usePlusSign: true })}
+        </DetailValue>
+      </DetailRow>
+      {!isRouteDone(route) ? (
+        <>
+          <DetailRow>
+            <DetailLabelContainer>
+              <DetailLabel>{t('main.maxSlippage')}</DetailLabel>
+              <Tooltip title={t('tooltip.slippage')}>
+                <DetailInfoIcon />
+              </Tooltip>
+            </DetailLabelContainer>
+            <DetailValue>
+              {route.steps[0].action.slippage
+                ? t('format.percent', {
+                    value: route.steps[0].action.slippage,
+                  })
+                : t('button.auto')}
+            </DetailValue>
+          </DetailRow>
+          <DetailRow>
+            <DetailLabelContainer>
+              <DetailLabel>{t('main.minReceived')}</DetailLabel>
+              <Tooltip title={t('tooltip.minReceived')}>
+                <DetailInfoIcon />
+              </Tooltip>
+            </DetailLabelContainer>
+            <DetailValue>
+              {t('format.tokenAmount', {
+                value: formatTokenAmount(
+                  BigInt(route.toAmountMin),
+                  route.toToken.decimals
+                ),
+              })}{' '}
+              {route.toToken.symbol}
+            </DetailValue>
+          </DetailRow>
+        </>
+      ) : null}
+      <DetailRow>
+        <DetailLabelContainer>
+          <DetailLabel>{t('main.exchangeRate')}</DetailLabel>
+          <Tooltip title={t('tooltip.exchangeRate')}>
+            <DetailInfoIcon />
+          </Tooltip>
+        </DetailLabelContainer>
+        <DetailValue
+          onClick={toggleRate}
+          role="button"
+          sx={{ cursor: 'pointer' }}
+        >
+          {rateText}
+        </DetailValue>
+      </DetailRow>
+      <DetailRow>
+        <DetailLabelContainer>
+          <DetailLabel>{t('main.estimatedTime')}</DetailLabel>
+          <Tooltip title={t('tooltip.estimatedTime')}>
+            <DetailInfoIcon />
+          </Tooltip>
+        </DetailLabelContainer>
+        <DetailValue>
+          {formatDuration(executionTimeSeconds, i18n.language)}
+        </DetailValue>
+      </DetailRow>
+    </Box>
+  )
+}

package/src/components/RouteCard/RouteNotFoundCard.tsx

@@ -0,0 +1,46 @@
+import Route from '@mui/icons-material/Route'
+import { Box, Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+
+export const RouteNotFoundCard: React.FC = () => {
+  const { t } = useTranslation()
+  return (
+    <Box
+      sx={{
+        py: 1.625,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'column',
+        flex: 1,
+        whiteSpace: 'normal',
+      }}
+    >
+      <Typography
+        sx={{
+          fontSize: 48,
+        }}
+      >
+        <Route fontSize="inherit" />
+      </Typography>
+      <Typography
+        sx={{
+          fontSize: 18,
+          fontWeight: 700,
+        }}
+      >
+        {t('info.title.routeNotFound')}
+      </Typography>
+      <Typography
+        sx={{
+          fontSize: 14,
+          color: 'text.secondary',
+          textAlign: 'center',
+          mt: 2,
+        }}
+      >
+        {t('info.message.routeNotFound')}
+      </Typography>
+    </Box>
+  )
+}

package/src/components/RouteCard/RouteToken.style.tsx

@@ -0,0 +1,9 @@
+import { Box, styled } from '@mui/material'
+import type React from 'react'
+
+export const TokenContainer: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+  }))

package/src/components/RouteCard/RouteToken.tsx

@@ -0,0 +1,68 @@
+import type { RouteExtended, TokenAmount } from '@lifi/sdk'
+import ExpandLess from '@mui/icons-material/ExpandLess'
+import ExpandMore from '@mui/icons-material/ExpandMore'
+import { Box, Collapse } from '@mui/material'
+import type { JSX } from 'react'
+import { type MouseEventHandler, useState } from 'react'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { CardIconButton } from '../Card/CardIconButton.js'
+import { Token } from '../Token/Token.js'
+import { RouteCardEssentials } from './RouteCardEssentials.js'
+import { RouteDetails } from './RouteDetails.js'
+import { TokenContainer } from './RouteToken.style.js'
+
+interface RouteTokenProps {
+  route: RouteExtended
+  token: TokenAmount
+  impactToken?: TokenAmount
+  defaultExpanded?: boolean
+  showEssentials?: boolean
+}
+
+export const RouteToken = ({
+  route,
+  token,
+  impactToken,
+  defaultExpanded,
+  showEssentials,
+}: RouteTokenProps): JSX.Element => {
+  const { hiddenUI } = useWidgetConfig()
+
+  const [cardExpanded, setCardExpanded] = useState(defaultExpanded)
+
+  const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation()
+    setCardExpanded((expanded) => !expanded)
+  }
+
+  return (
+    <Box>
+      <TokenContainer>
+        <Token
+          token={token}
+          impactToken={impactToken}
+          step={route.steps[0]}
+          stepVisible={!cardExpanded}
+          disableDescription={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>
+        <RouteDetails route={route} />
+      </Collapse>
+      {showEssentials ? (
+        <Collapse timeout={225} in={!cardExpanded}>
+          <RouteCardEssentials route={route} />
+        </Collapse>
+      ) : null}
+    </Box>
+  )
+}

package/src/components/RouteCard/RouteTokens.tsx

@@ -0,0 +1,56 @@
+import type { RouteExtended } from '@lifi/sdk'
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'
+import { Box } from '@mui/material'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { Token } from '../Token/Token.js'
+import { RouteToken } from './RouteToken.js'
+
+export const RouteTokens: React.FC<{
+  route: RouteExtended
+  showEssentials?: boolean
+  defaultExpanded?: boolean
+}> = ({ route, showEssentials, defaultExpanded }) => {
+  const { mode } = useWidgetConfig()
+
+  const fromToken = {
+    ...route.steps[0].action.fromToken,
+    amount: BigInt(route.steps[0].action.fromAmount),
+  }
+
+  const lastStepIndex = route.steps.length - 1
+  const toToken = {
+    ...(route.steps[lastStepIndex].execution?.toToken ??
+      route.steps[lastStepIndex].action.toToken),
+    amount: route.steps[lastStepIndex].execution?.toAmount
+      ? BigInt(route.steps[lastStepIndex].execution.toAmount)
+      : mode === 'custom'
+        ? BigInt(route.toAmount)
+        : BigInt(route.steps[lastStepIndex].estimate.toAmount),
+  }
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+      {fromToken ? <Token token={fromToken} /> : null}
+      <Box
+        sx={{
+          width: 40,
+          height: 20,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <ArrowDownwardIcon sx={{ fontSize: 16 }} />
+      </Box>
+      {toToken ? (
+        <RouteToken
+          route={route}
+          token={toToken}
+          impactToken={fromToken}
+          showEssentials={showEssentials}
+          defaultExpanded={defaultExpanded}
+        />
+      ) : null}
+    </Box>
+  )
+}

package/src/components/RouteCard/getMatchingLabels.ts

@@ -0,0 +1,66 @@
+import type { Route } from '@lifi/sdk'
+import type { RouteLabel, RouteLabelRule } from '../../types/widget.js'
+import { getConfigItemSets, isItemAllowedForSets } from '../../utils/item.js'
+
+export const getMatchingLabels = (
+  route: Route,
+  routeLabels?: RouteLabelRule[]
+): RouteLabel[] => {
+  if (!routeLabels?.length) {
+    return []
+  }
+
+  return routeLabels
+    .filter((rule) => {
+      const conditions: boolean[] = []
+
+      // Check bridge/exchange matches if specified
+      if (rule.bridges || rule.exchanges) {
+        const toolNames = route.steps.flatMap((step) =>
+          step.includedSteps.map((s) => s.tool)
+        )
+        const bridgesConfigSets = getConfigItemSets(
+          rule.bridges,
+          (bridges) => new Set(bridges)
+        )
+        const exchangesConfigSets = getConfigItemSets(
+          rule.exchanges,
+          (exchanges) => new Set(exchanges)
+        )
+        conditions.push(
+          toolNames.some(
+            (toolName) =>
+              isItemAllowedForSets(toolName, bridgesConfigSets) &&
+              isItemAllowedForSets(toolName, exchangesConfigSets)
+          )
+        )
+      }
+
+      // Check token matches if specified
+      if (rule.fromTokenAddress?.length) {
+        conditions.push(rule.fromTokenAddress.includes(route.fromToken.address))
+      }
+
+      if (rule.toTokenAddress?.length) {
+        conditions.push(rule.toTokenAddress.includes(route.toToken.address))
+      }
+
+      // Check chain matches if specified
+      if (rule.fromChainId?.length) {
+        conditions.push(rule.fromChainId.includes(route.fromChainId))
+      }
+
+      if (rule.toChainId?.length) {
+        conditions.push(rule.toChainId.includes(route.toChainId))
+      }
+
+      // Evaluate custom match function if specified
+      if (rule.match) {
+        conditions.push(rule.match(route))
+      }
+
+      // Must have at least one condition and all conditions must be true
+      return conditions.length && conditions.every(Boolean)
+    })
+    .map((rule) => rule.label)
+}

package/src/components/RouteCard/types.ts

@@ -0,0 +1,16 @@
+import type { Route, RouteExtended } from '@lifi/sdk'
+
+export interface RouteCardProps {
+  route: Route
+  variant?: 'default' | 'cardless'
+  active?: boolean
+  expanded?: boolean
+}
+
+export interface RouteCardEssentialsProps {
+  route: RouteExtended
+}
+
+export interface RouteCardSkeletonProps {
+  variant?: 'default' | 'cardless'
+}

package/src/components/Routes/Routes.tsx

@@ -0,0 +1,93 @@
+import { Box, Collapse } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { useRoutes } from '../../hooks/useRoutes.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { ButtonTertiary } from '../ButtonTertiary.js'
+import type { CardProps } from '../Card/Card.js'
+import { Card } from '../Card/Card.js'
+import { CardTitle } from '../Card/CardTitle.js'
+import { ProgressToNextUpdate } from '../ProgressToNextUpdate.js'
+import { RouteCard } from '../RouteCard/RouteCard.js'
+import { RouteCardSkeleton } from '../RouteCard/RouteCardSkeleton.js'
+import { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'
+
+export const Routes: React.FC<CardProps> = (props) => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { mode, modeOptions, showSingleRoute } = useWidgetConfig()
+  const {
+    routes,
+    isLoading,
+    isFetching,
+    isFetched,
+    dataUpdatedAt,
+    refetchTime,
+    refetch,
+  } = useRoutes()
+
+  const currentRoute = routes?.[0]
+
+  if (!currentRoute && !isLoading && !isFetching && !isFetched) {
+    return null
+  }
+
+  const handleCardClick = () => {
+    navigate({ to: navigationRoutes.routes })
+  }
+
+  const routeNotFound = !currentRoute && !isLoading && !isFetching
+  const onlySingleRoute = mode === 'refuel' || showSingleRoute
+  const showAll =
+    !onlySingleRoute && !routeNotFound && (routes?.length ?? 0) > 1
+
+  const title =
+    mode === 'custom'
+      ? modeOptions?.custom?.type === 'deposit'
+        ? t('header.receive')
+        : t('header.youPay')
+      : t('header.receive')
+
+  return (
+    <Card {...props}>
+      <CardTitle>{title}</CardTitle>
+      <ProgressToNextUpdate
+        updatedAt={dataUpdatedAt || Date.now()}
+        timeToUpdate={refetchTime}
+        isLoading={isFetching}
+        onClick={() => refetch()}
+        sx={{
+          position: 'absolute',
+          top: 8,
+          right: 8,
+        }}
+      />
+      <Box
+        sx={{
+          p: 2,
+        }}
+      >
+        {isLoading && !currentRoute ? (
+          <RouteCardSkeleton variant="cardless" />
+        ) : !currentRoute ? (
+          <RouteNotFoundCard />
+        ) : (
+          <RouteCard route={currentRoute} variant="cardless" active />
+        )}
+
+        <Collapse timeout={225} in={showAll} unmountOnExit mountOnEnter>
+          <Box
+            sx={{
+              mt: 2,
+            }}
+          >
+            <ButtonTertiary onClick={handleCardClick} fullWidth>
+              {t('button.showAll')}
+            </ButtonTertiary>
+          </Box>
+        </Collapse>
+      </Box>
+    </Card>
+  )
+}

package/src/components/Routes/RoutesContent.tsx

@@ -0,0 +1,117 @@
+import type { ExtendedChain, Route } from '@lifi/sdk'
+import { useAccount } from '@lifi/wallet-management'
+import { Stack, Typography } from '@mui/material'
+import type React from 'react'
+import { memo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { PageContainer } from '../PageContainer.js'
+import { ProgressToNextUpdate } from '../ProgressToNextUpdate.js'
+import { RouteCard } from '../RouteCard/RouteCard.js'
+import { RouteCardSkeleton } from '../RouteCard/RouteCardSkeleton.js'
+import { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'
+import { Container, Header } from './RoutesExpanded.style.js'
+
+interface RoutesContentProps {
+  routes?: Route[]
+  isFetching: boolean
+  isLoading: boolean
+  dataUpdatedAt: number
+  refetchTime: number
+  fromChain: ExtendedChain | undefined
+  refetch: () => void
+  onRouteClick: (route: Route) => void
+}
+
+const headerHeight = '52px'
+
+export const RoutesContent: React.NamedExoticComponent<RoutesContentProps> =
+  memo(function RoutesContent({
+    routes,
+    isFetching,
+    isLoading,
+    dataUpdatedAt,
+    refetchTime,
+    fromChain,
+    refetch,
+    onRouteClick,
+  }: RoutesContentProps) {
+    const { t } = useTranslation()
+    const { mode, modeOptions } = useWidgetConfig()
+
+    const { account } = useAccount({ chainType: fromChain?.chainType })
+    const [toAddress] = useFieldValues('toAddress')
+    const { requiredToAddress } = useToAddressRequirements()
+
+    const currentRoute = routes?.[0]
+
+    const routeNotFound = !currentRoute && !isLoading && !isFetching
+    const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress
+    const allowInteraction = account.isConnected && !toAddressUnsatisfied
+
+    const title =
+      mode === 'custom'
+        ? modeOptions?.custom?.type === 'deposit'
+          ? t('header.deposit')
+          : t('header.youPay')
+        : t('header.receive')
+
+    return (
+      <Container enableColorScheme minimumHeight={isLoading}>
+        <Header sx={{ height: headerHeight }}>
+          <Typography
+            noWrap
+            sx={{
+              fontSize: 18,
+              fontWeight: '700',
+              flex: 1,
+            }}
+          >
+            {title}
+          </Typography>
+          <ProgressToNextUpdate
+            updatedAt={dataUpdatedAt || Date.now()}
+            timeToUpdate={refetchTime}
+            isLoading={isFetching}
+            onClick={() => refetch()}
+            sx={{ marginRight: -1 }}
+          />
+        </Header>
+        <PageContainer
+          sx={{ height: `calc(100% - ${headerHeight})`, overflow: 'auto' }}
+        >
+          <Stack
+            direction="column"
+            spacing={2}
+            sx={{
+              flex: 1,
+              paddingTop: 1.5,
+              paddingBottom: 3,
+            }}
+          >
+            {routeNotFound ? (
+              <RouteNotFoundCard />
+            ) : (isLoading || isFetching) && !routes?.length ? (
+              Array.from({ length: 3 }).map((_, index) => (
+                <RouteCardSkeleton key={index} />
+              ))
+            ) : (
+              routes?.map((route: Route, index: number) => (
+                <RouteCard
+                  key={index}
+                  route={route}
+                  onClick={
+                    allowInteraction ? () => onRouteClick(route) : undefined
+                  }
+                  active={index === 0}
+                  expanded={routes?.length === 1}
+                />
+              ))
+            )}
+          </Stack>
+        </PageContainer>
+      </Container>
+    )
+  })