@lifi/widget 0.0.0-preview-6cc63bac

package/src/components/PoweredBy/PoweredBy.tsx

@@ -0,0 +1,61 @@
+import { Box, Tooltip, Typography } from '@mui/material'
+import { version } from '../../config/version.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { Link } from './PoweredBy.style.js'
+
+const poweredByConfig = {
+  default: {
+    url: 'https://li.fi',
+    text: 'LI.FI',
+  },
+  jumper: {
+    url: 'https://jumper.exchange',
+    text: 'Jumper',
+  },
+}
+
+export const PoweredBy: React.FC = () => {
+  const { poweredBy = 'default' } = useWidgetConfig()
+
+  return (
+    <Box
+      sx={{
+        pt: 1,
+        pb: 2,
+        flex: 1,
+        display: 'flex',
+        alignItems: 'flex-end',
+        justifyContent: 'flex-end',
+      }}
+    >
+      <Tooltip title={`v${version}`} enterDelay={1000}>
+        <Link
+          href={poweredByConfig[poweredBy].url}
+          target="_blank"
+          underline="none"
+          color="text.primary"
+        >
+          <Typography
+            sx={{
+              color: 'text.secondary',
+              fontSize: 12,
+              fontWeight: 500,
+              px: 0.5,
+            }}
+          >
+            Powered by
+          </Typography>
+          <Typography
+            sx={{
+              color: 'text.primary',
+              fontSize: 12,
+              fontWeight: 600,
+            }}
+          >
+            {poweredByConfig[poweredBy].text}
+          </Typography>
+        </Link>
+      </Tooltip>
+    </Box>
+  )
+}

package/src/components/ProgressToNextUpdate.tsx

@@ -0,0 +1,92 @@
+import type { IconButtonProps } from '@mui/material'
+import { Box, CircularProgress, IconButton, Tooltip } from '@mui/material'
+import { useEffect, useState } from 'react'
+import { Trans } from 'react-i18next'
+
+const getProgressValue = (updatedAt: number, timeToUpdate: number) =>
+  updatedAt ? Math.min(100, ((Date.now() - updatedAt) / timeToUpdate) * 100) : 0
+
+const getSecondsToUpdate = (updatedAt: number, timeToUpdate: number) =>
+  Math.max(Math.round((timeToUpdate - (Date.now() - updatedAt)) / 1000), 0)
+
+export const ProgressToNextUpdate: React.FC<
+  {
+    updatedAt: number
+    timeToUpdate: number
+    isLoading?: boolean
+  } & IconButtonProps
+> = ({ updatedAt, timeToUpdate, isLoading, onClick, ...other }) => {
+  const [value, setValue] = useState(() =>
+    getProgressValue(updatedAt, timeToUpdate)
+  )
+
+  useEffect(() => {
+    setValue(getProgressValue(updatedAt, timeToUpdate))
+    const id = setInterval(() => {
+      const time = getProgressValue(updatedAt, timeToUpdate)
+      setValue(time)
+      if (time >= 100) {
+        clearInterval(id)
+      }
+    }, 1000)
+    return () => clearInterval(id)
+  }, [timeToUpdate, updatedAt])
+
+  useEffect(() => {
+    if (isLoading) {
+      setValue(0)
+    }
+  }, [isLoading])
+
+  return (
+    <IconButton onClick={onClick} disabled={isLoading} {...other}>
+      <Tooltip
+        title={
+          <Trans
+            i18nKey="tooltip.progressToNextUpdate"
+            values={{
+              value: getSecondsToUpdate(updatedAt, timeToUpdate),
+            }}
+            // biome-ignore lint/correctness/useJsxKeyInIterable: allowed in react-i18next
+            components={[<br />]}
+          />
+        }
+      >
+        <Box
+          sx={{
+            display: 'grid',
+            position: 'relative',
+            placeItems: 'center',
+            width: 24,
+            height: 24,
+          }}
+        >
+          <CircularProgress
+            variant="determinate"
+            size={24}
+            value={100}
+            sx={(theme) => ({
+              position: 'absolute',
+              color: theme.vars.palette.grey[300],
+              ...theme.applyStyles('dark', {
+                color: theme.vars.palette.grey[800],
+              }),
+            })}
+          />
+          <CircularProgress
+            variant={isLoading ? 'indeterminate' : 'determinate'}
+            size={24}
+            value={value}
+            sx={(theme) => ({
+              opacity: value === 100 && !isLoading ? 0.5 : 1,
+              color: theme.vars.palette.primary.main,
+              ...theme.applyStyles('dark', {
+                color: theme.vars.palette.primary.light,
+              }),
+            })}
+          />
+        </Box>
+      </Tooltip>
+    </IconButton>
+  )
+}

package/src/components/ReverseTokensButton/ReverseTokensButton.style.tsx

@@ -0,0 +1,37 @@
+import { Box, styled } from '@mui/material'
+import type React from 'react'
+import { Card } from '../Card/Card.js'
+
+export const IconCard: React.FC<React.ComponentProps<typeof Card>> = styled(
+  Card
+)(({ theme }) => ({
+  height: 32,
+  width: 32,
+  fontSize: 16,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: theme.vars.shape.borderRadiusTertiary,
+  zIndex: 1110,
+}))
+
+export const ReverseContainer: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(({ theme }) => {
+    return {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      margin: theme.spacing(-1),
+    }
+  })
+
+export const ReverseTokensButtonEmpty: React.FC<
+  React.ComponentProps<typeof Box>
+> = styled(Box)(({ theme }) => {
+  return {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: theme.spacing(1),
+  }
+})

package/src/components/ReverseTokensButton/ReverseTokensButton.tsx

@@ -0,0 +1,61 @@
+import ArrowForward from '@mui/icons-material/ArrowForward'
+import type { JSX } from 'react'
+import { useAvailableChains } from '../../hooks/useAvailableChains.js'
+import { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'
+import { useToAddressReset } from '../../hooks/useToAddressReset.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { IconCard, ReverseContainer } from './ReverseTokensButton.style.js'
+
+export const ReverseTokensButton = (): JSX.Element => {
+  const { setFieldValue, getFieldValues } = useFieldActions()
+  const { getChainById } = useAvailableChains()
+  const { tryResetToAddress } = useToAddressReset()
+  const autoPopulateToAddress = useToAddressAutoPopulate()
+
+  const handleClick = () => {
+    const [fromChainId, fromToken, toChainId, toToken, toAddress] =
+      getFieldValues(
+        'fromChain',
+        'fromToken',
+        'toChain',
+        'toToken',
+        'toAddress'
+      )
+    setFieldValue('fromAmount', '', { isTouched: true })
+    setFieldValue('fromChain', toChainId, { isTouched: true })
+    setFieldValue('fromToken', toToken, { isTouched: true })
+    setFieldValue('toChain', fromChainId, { isTouched: true })
+    setFieldValue('toToken', fromToken, { isTouched: true })
+
+    const autoPopulatedToAddress = autoPopulateToAddress({
+      formType: 'from',
+      selectedToAddress: toAddress,
+      selectedChainId: toChainId,
+      selectedOppositeChainId: fromChainId,
+      selectedOppositeTokenAddress: fromToken,
+    })
+
+    // Returning early as a compatible connected wallet was found, and toAddress has been populated
+    if (autoPopulatedToAddress) {
+      return
+    }
+
+    // Auto-population applies in certain scenarios, but otherwise,
+    // we attempt to reset `toAddress` when bridging across ecosystems
+    // fromChainId becomes toChainId after using reverse
+    const toChain = getChainById(fromChainId)
+    if (toChain) {
+      tryResetToAddress(toChain)
+    }
+  }
+  return (
+    <ReverseContainer>
+      <IconCard
+        data-testid="widget-reverse-tokens-button"
+        onClick={handleClick}
+      >
+        <ArrowForward fontSize="inherit" />
+      </IconCard>
+    </ReverseContainer>
+  )
+}

package/src/components/RouteCard/RouteCard.tsx

@@ -0,0 +1,128 @@
+import type { TokenAmount } from '@lifi/sdk'
+import { Box, Tooltip } from '@mui/material'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import 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 { CardLabel, CardLabelTypography } from '../Card/CardLabel.js'
+import { getMatchingLabels } from './getMatchingLabels.js'
+import { RouteToken } from './RouteToken.js'
+import type { RouteCardProps } from './types.js'
+
+export const RouteCard: React.FC<
+  RouteCardProps & Omit<CardProps, 'variant'>
+> = ({
+  route,
+  active,
+  variant = 'default',
+  expanded: defaultExpanded,
+  ...other
+}) => {
+  const { t } = useTranslation()
+  const { mode, modeOptions, routeLabels, hiddenUI } = useWidgetConfig()
+
+  const token: TokenAmount =
+    mode === 'custom' && modeOptions?.custom?.type !== 'deposit'
+      ? { ...route.fromToken, amount: BigInt(route.fromAmount) }
+      : { ...route.toToken, amount: BigInt(route.toAmount) }
+  const impactToken: TokenAmount | undefined =
+    mode !== 'custom' && !hiddenUI?.routeCardPriceImpact
+      ? { ...route.fromToken, amount: BigInt(route.fromAmount) }
+      : undefined
+
+  const [tags, customLabels]: [string[], RouteLabel[]] = useMemo(() => {
+    const mainTag = route.tags?.find(
+      (tag) => tag === 'CHEAPEST' || tag === 'FASTEST'
+    )
+    const tags: string[] = mainTag ? [mainTag] : []
+    const { combinedFeesUSD } = getAccumulatedFeeCostsBreakdown(route)
+    if (!combinedFeesUSD) {
+      tags.push('gasless')
+    }
+    if (route.steps.length > 1) {
+      tags.push('multistep')
+    }
+    const customLabels = getMatchingLabels(route, routeLabels)
+    return [tags, customLabels]
+  }, [route.tags, route, routeLabels])
+
+  const cardContent = (
+    <Box
+      sx={{
+        flex: 1,
+      }}
+    >
+      {mode !== 'refuel' && (tags.length || customLabels.length) ? (
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            mb: 2,
+            gap: 1,
+            flexWrap: 'wrap',
+          }}
+        >
+          {tags?.map((tag) => {
+            const formattedTag = tag.toLowerCase()
+            const tooltipKey = `tooltip.${formattedTag}` as any
+            const tooltipText = t(tooltipKey)
+            const hasTooltip = tooltipText !== tooltipKey
+
+            const cardLabel = (
+              <CardLabel
+                variant={
+                  tag === 'gasless'
+                    ? 'success'
+                    : active
+                      ? 'secondary'
+                      : undefined
+                }
+                key={tag}
+              >
+                <CardLabelTypography>
+                  {t(`main.tags.${formattedTag}` as any)}
+                </CardLabelTypography>
+              </CardLabel>
+            )
+
+            return hasTooltip ? (
+              <Tooltip key={tag} title={tooltipText} arrow placement="top">
+                {cardLabel}
+              </Tooltip>
+            ) : (
+              cardLabel
+            )
+          })}
+          {customLabels.map((label, index) => (
+            <CardLabel key={index} sx={label.sx}>
+              <CardLabelTypography>{label.text}</CardLabelTypography>
+            </CardLabel>
+          ))}
+        </Box>
+      ) : null}
+      <RouteToken
+        route={route}
+        token={token}
+        impactToken={impactToken}
+        defaultExpanded={defaultExpanded}
+        showEssentials
+      />
+    </Box>
+  )
+
+  return mode === 'refuel' || variant === 'cardless' ? (
+    cardContent
+  ) : (
+    <Card
+      type={active ? 'selected' : 'default'}
+      selectionColor="secondary"
+      indented
+      {...other}
+    >
+      {cardContent}
+    </Card>
+  )
+}

package/src/components/RouteCard/RouteCardEssentials.tsx

@@ -0,0 +1,101 @@
+import AccessTimeFilled from '@mui/icons-material/AccessTimeFilled'
+import LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'
+import { Box, Tooltip, Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'
+import { formatDuration } from '../../utils/format.js'
+import { FeeBreakdownTooltip } from '../FeeBreakdownTooltip.js'
+import { IconTypography } from '../IconTypography.js'
+import { TokenRate } from '../TokenRate/TokenRate.js'
+import type { RouteCardEssentialsProps } from './types.js'
+
+export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
+  route,
+}) => {
+  const { t, i18n } = useTranslation()
+  const executionTimeSeconds = Math.floor(
+    route.steps.reduce(
+      (duration, step) => duration + step.estimate.executionDuration,
+      0
+    )
+  )
+
+  const { gasCosts, feeCosts, combinedFeesUSD } =
+    getAccumulatedFeeCostsBreakdown(route)
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        flex: 1,
+        mt: 2,
+      }}
+    >
+      <Tooltip title={t('tooltip.exchangeRate')}>
+        <TokenRate route={route} />
+      </Tooltip>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
+        <FeeBreakdownTooltip
+          gasCosts={gasCosts}
+          feeCosts={feeCosts}
+          gasless={!combinedFeesUSD}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              mr: 1.5,
+              alignItems: 'center',
+            }}
+          >
+            <IconTypography component="span" sx={{ mr: 0.5, fontSize: 16 }}>
+              <LocalGasStationRounded fontSize="inherit" />
+            </IconTypography>
+            <Typography
+              data-value={combinedFeesUSD}
+              sx={{
+                fontSize: 14,
+                color: 'text.primary',
+                fontWeight: 600,
+                lineHeight: 1,
+              }}
+            >
+              {!combinedFeesUSD
+                ? t('main.fees.free')
+                : t('format.currency', {
+                    value: combinedFeesUSD,
+                  })}
+            </Typography>
+          </Box>
+        </FeeBreakdownTooltip>
+        <Tooltip title={t('tooltip.estimatedTime')} sx={{ cursor: 'help' }}>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+            }}
+          >
+            <IconTypography component="span" sx={{ mr: 0.5, fontSize: 16 }}>
+              <AccessTimeFilled fontSize="inherit" />
+            </IconTypography>
+            <Typography
+              sx={{
+                fontSize: 14,
+                color: 'text.primary',
+                fontWeight: 600,
+                lineHeight: 1,
+              }}
+            >
+              {formatDuration(executionTimeSeconds, i18n.language)}
+            </Typography>
+          </Box>
+        </Tooltip>
+      </Box>
+    </Box>
+  )
+}

package/src/components/RouteCard/RouteCardSkeleton.tsx

@@ -0,0 +1,58 @@
+import { Box, Skeleton } from '@mui/material'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import type { CardProps } from '../Card/Card.js'
+import { Card } from '../Card/Card.js'
+import { TokenSkeleton } from '../Token/Token.js'
+import type { RouteCardSkeletonProps } from './types.js'
+
+export const RouteCardSkeleton: React.FC<
+  RouteCardSkeletonProps & Omit<CardProps, 'variant'>
+> = ({ variant, ...other }) => {
+  const { mode } = useWidgetConfig()
+
+  const cardContent = (
+    <Box
+      sx={{
+        flex: 1,
+      }}
+    >
+      {mode !== 'refuel' && mode !== 'custom' ? (
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            mb: 2,
+          }}
+        >
+          <Skeleton
+            variant="rectangular"
+            width={112}
+            height={24}
+            sx={(theme) => ({
+              borderRadius: theme.vars.shape.borderRadius,
+            })}
+          />
+        </Box>
+      ) : null}
+      <TokenSkeleton />
+      <Box
+        sx={{
+          mt: 2,
+          display: 'flex',
+          justifyContent: 'space-between',
+        }}
+      >
+        <Skeleton variant="text" width={64} height={20} />
+        <Skeleton variant="text" width={56} height={20} />
+      </Box>
+    </Box>
+  )
+
+  return mode === 'refuel' || variant === 'cardless' ? (
+    cardContent
+  ) : (
+    <Card indented {...other}>
+      {cardContent}
+    </Card>
+  )
+}

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

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