@lifi/widget 0.0.0-preview-6cc63bac

package/src/components/Tabs/Tabs.style.tsx

@@ -0,0 +1,51 @@
+import type { TabProps } from '@mui/material'
+import {
+  Tab as MuiTab,
+  Tabs as MuiTabs,
+  styled,
+  tabClasses,
+  tabsClasses,
+} from '@mui/material'
+import type React from 'react'
+
+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: React.FC<React.ComponentProps<typeof MuiTabs>> = styled(
+  Tabs
+)(({ theme }) => ({
+  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+  [`.${tabsClasses.indicator}`]: {
+    backgroundColor: theme.vars.palette.background.paper,
+  },
+  ...theme.applyStyles('dark', {
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
+    [`.${tabsClasses.indicator}`]: {
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.background} 56%, transparent)`,
+    },
+  }),
+}))
+
+export const Tab: React.FC<React.ComponentProps<typeof MuiTab>> = styled(
+  MuiTab
+)<TabProps>(({ theme }) => ({
+  zIndex: 1,
+  flex: 1,
+  textTransform: 'none',
+  fontSize: '1rem',
+  fontWeight: 700,
+  color: theme.vars.palette.common.onBackground,
+  [`&.${tabClasses.selected}`]: {
+    color: theme.vars.palette.common.onBackground,
+  },
+}))

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: run only when children changes
+  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.vars.palette.text.primary}
+      ref={ref}
+    >
+      <title>{children}</title>
+      <text x={0} y={0} style={textStyle} ref={textRef}>
+        {children}
+      </text>
+    </svg>
+  )
+}

package/src/components/TextFitter/types.ts

@@ -0,0 +1,13 @@
+import type { CSSProperties } from 'react'
+
+export interface TextFitterProps {
+  textStyle?: CSSProperties
+  svgStyle?: CSSProperties
+  onFit?(): void
+  maxHeight?: string | number
+  height?: string | number
+  width?: string | number
+  preserveAspectRatio?: string
+  cropTop?: number
+  cropBottom?: number
+}

package/src/components/Timer/ExecutionTimerText.tsx

@@ -0,0 +1,10 @@
+import { useExecutionTimer } from '../../hooks/timer/useExecutionTimer.js'
+
+export const ExecutionTimerText = ({
+  expiryTimestamp,
+}: {
+  expiryTimestamp: Date
+}): string | null => {
+  const { formatted } = useExecutionTimer(expiryTimestamp)
+  return formatted
+}

package/src/components/Timer/StepStatusTimer.style.tsx

@@ -0,0 +1,98 @@
+import {
+  Box,
+  circularProgressClasses,
+  keyframes,
+  CircularProgress as MuiCircularProgress,
+  styled,
+  Typography,
+} from '@mui/material'
+import type React from 'react'
+import { iconCircleSize } from '../IconCircle/IconCircle.style.js'
+
+export const StatusCircle: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)({
+  position: 'absolute',
+  inset: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+})
+
+export const RingContainer: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)({
+  position: 'relative',
+  width: iconCircleSize,
+  height: iconCircleSize,
+})
+
+export const ProgressTrack: React.FC<
+  React.ComponentProps<typeof MuiCircularProgress>
+> = styled(MuiCircularProgress)(({ theme }) => ({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  color: theme.vars.palette.grey[300],
+  ...theme.applyStyles('dark', {
+    color: theme.vars.palette.grey[800],
+  }),
+}))
+
+export const ProgressFill: React.FC<
+  React.ComponentProps<typeof MuiCircularProgress>
+> = styled(MuiCircularProgress)(({ theme }) => ({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  color: theme.vars.palette.primary.main,
+  ...theme.applyStyles('dark', {
+    color: theme.vars.palette.primary.light,
+  }),
+}))
+
+export const TimerLabel: React.FC<React.ComponentProps<typeof Typography>> =
+  styled(Typography)({
+    fontSize: 18,
+    fontWeight: 700,
+  })
+
+const circleAnimation = keyframes`
+  0% {
+    stroke-dashoffset: 129;
+    transform: rotate(0);
+  }
+  50% {
+    stroke-dashoffset: 56;
+    transform: rotate(45deg);
+  };
+  100% {
+    stroke-dashoffset: 129;
+    transform: rotate(360deg);
+  }
+`
+
+// This `styled()` function invokes keyframes. `styled-components` only supports keyframes
+// in string templates. Do not convert these styles in JS object as it will break.
+export const CircularProgressPending: React.FC<
+  React.ComponentProps<typeof MuiCircularProgress>
+> = styled(MuiCircularProgress)`
+  color: ${({ theme }) => theme.vars.palette.primary.main};
+  ${({ theme }) =>
+    theme.applyStyles('dark', {
+      color: theme.vars.palette.primary.light,
+    })}
+  animation-duration: 3s;
+  position: absolute;
+  top: 0;
+  left: 0;
+  .${circularProgressClasses.circle} {
+    animation-duration: 2s;
+    animation-timing-function: linear;
+    animation-name: ${circleAnimation};
+    stroke-dasharray: 129;
+    stroke-dashoffset: 129;
+    stroke-linecap: round;
+    transform-origin: 100% 100%;
+  }
+`

package/src/components/Timer/StepStatusTimer.tsx

@@ -0,0 +1,85 @@
+import type { LiFiStepExtended } from '@lifi/sdk'
+import type React from 'react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useTimer } from '../../hooks/timer/useTimer.js'
+import { formatTimer, getExpiryTimestamp } from '../../utils/timer.js'
+import { iconCircleSize } from '../IconCircle/IconCircle.style.js'
+import {
+  CircularProgressPending,
+  ProgressFill,
+  ProgressTrack,
+  RingContainer,
+  StatusCircle,
+  TimerLabel,
+} from './StepStatusTimer.style.js'
+
+interface TimerRingProps {
+  step?: LiFiStepExtended
+  size?: number
+  thickness?: number
+  showLabel?: boolean
+}
+
+export const TimerRing: React.FC<TimerRingProps> = ({
+  step,
+  size = iconCircleSize,
+  thickness = 2,
+  showLabel = true,
+}) => {
+  const { i18n } = useTranslation()
+  const [isExpired, setExpired] = useState(false)
+
+  const signedAt = step?.execution?.signedAt
+  const totalDuration = (step?.estimate.executionDuration ?? 0) * 1000
+  const expiryTimestamp = getExpiryTimestamp(step)
+
+  const { days, hours, minutes, seconds } = useTimer({
+    autoStart: Boolean(signedAt),
+    expiryTimestamp,
+    onExpire: () => setExpired(true),
+  })
+
+  const hasActiveCountdown =
+    Boolean(signedAt) && !isExpired && (Boolean(minutes) || Boolean(seconds))
+
+  const remaining = Math.max(expiryTimestamp.getTime() - Date.now(), 0)
+  const countdownProgress =
+    totalDuration > 0
+      ? Math.min(((totalDuration - remaining) / totalDuration) * 100, 100)
+      : 0
+
+  return (
+    <RingContainer sx={{ width: size, height: size }}>
+      <ProgressTrack
+        variant="determinate"
+        value={100}
+        size={size}
+        thickness={thickness}
+      />
+      {hasActiveCountdown ? (
+        <ProgressFill
+          variant="determinate"
+          value={countdownProgress}
+          size={size}
+          thickness={thickness}
+        />
+      ) : (
+        <CircularProgressPending size={size} thickness={thickness} />
+      )}
+      {showLabel && hasActiveCountdown ? (
+        <StatusCircle>
+          <TimerLabel>
+            {formatTimer({
+              locale: i18n.language,
+              days,
+              hours,
+              minutes,
+              seconds,
+            })}
+          </TimerLabel>
+        </StatusCircle>
+      ) : null}
+    </RingContainer>
+  )
+}

package/src/components/Token/Token.style.tsx

@@ -0,0 +1,44 @@
+import { Box, styled, Typography } from '@mui/material'
+import type React from 'react'
+
+export const TextSecondaryContainer: React.FC<
+  React.ComponentProps<typeof Box> & { dot?: boolean }
+> = styled(Box)(() => ({
+  display: 'flex',
+  alignItems: 'center',
+  flexWrap: 'wrap',
+  flex: 1,
+  height: 16,
+}))
+
+export const TextSecondary: React.FC<
+  React.ComponentProps<typeof Typography> & { dot?: boolean }
+> = styled(Typography, {
+  shouldForwardProp: (prop: string) => !['dot'].includes(prop),
+})<{ dot?: boolean }>(({ theme }) => ({
+  fontSize: 12,
+  lineHeight: 1,
+  fontWeight: 500,
+  color: theme.vars.palette.text.secondary,
+  whiteSpace: 'nowrap',
+  variants: [
+    {
+      props: ({ dot }) => dot,
+      style: {
+        color: `color-mix(in srgb, ${theme.vars.palette.text.secondary} 56%, transparent)`,
+      },
+    },
+  ],
+}))
+
+export const TokenDivider: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(({ theme }) => ({
+  height: 16,
+  borderLeftWidth: 2,
+  borderLeftStyle: 'solid',
+  borderColor: theme.vars.palette.grey[300],
+  ...theme.applyStyles('dark', {
+    borderColor: theme.vars.palette.grey[800],
+  }),
+}))

package/src/components/Token/Token.tsx

@@ -0,0 +1,317 @@
+import type { LiFiStep, TokenAmount } from '@lifi/sdk'
+import type { BoxProps } from '@mui/material'
+import { Box, Grow, Skeleton, Tooltip } from '@mui/material'
+import type { FC, PropsWithChildren, ReactElement } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useChain } from '../../hooks/useChain.js'
+import { useToken } from '../../hooks/useToken.js'
+import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
+import { getPriceImpact } from '../../utils/getPriceImpact.js'
+import { AvatarBadgedSkeleton } from '../Avatar/Avatar.js'
+import { SmallAvatar } from '../Avatar/SmallAvatar.js'
+import { TokenAvatar } from '../Avatar/TokenAvatar.js'
+import { TextFitter } from '../TextFitter/TextFitter.js'
+import { TextSecondary, TextSecondaryContainer } from './Token.style.js'
+
+interface TokenProps {
+  token: TokenAmount
+  impactToken?: TokenAmount
+  enableImpactTokenTooltip?: boolean
+  step?: LiFiStep
+  stepVisible?: boolean
+  disableDescription?: boolean
+  isLoading?: boolean
+}
+
+export const Token: FC<TokenProps & BoxProps> = ({ token, ...other }) => {
+  if (!token.priceUSD || !token.logoURI) {
+    return <TokenFallback token={token} {...other} />
+  }
+  return <TokenBase token={token} {...other} />
+}
+
+const TokenFallback: FC<TokenProps & BoxProps> = ({
+  token,
+  isLoading,
+  ...other
+}) => {
+  const { token: chainToken, isLoading: isLoadingToken } = useToken(
+    token.chainId,
+    token.address
+  )
+
+  return (
+    <TokenBase
+      token={{ ...token, ...chainToken } as TokenAmount}
+      isLoading={isLoading || isLoadingToken}
+      {...other}
+    />
+  )
+}
+
+const TokenBase: FC<TokenProps & BoxProps> = ({
+  token,
+  impactToken,
+  enableImpactTokenTooltip,
+  step,
+  stepVisible,
+  disableDescription,
+  isLoading,
+  ...other
+}) => {
+  const { t, i18n } = useTranslation()
+  const { chain } = useChain(token?.chainId)
+
+  if (isLoading) {
+    return (
+      <TokenSkeleton
+        token={token}
+        step={step}
+        disableDescription={disableDescription}
+        {...other}
+      />
+    )
+  }
+
+  const tokenAmount = formatTokenAmount(token.amount, token.decimals)
+  const tokenPrice = formatTokenPrice(
+    token.amount,
+    token.priceUSD,
+    token.decimals
+  )
+
+  let priceImpact: number | undefined
+  let priceImpactPercent: number | undefined
+  if (impactToken) {
+    priceImpact = getPriceImpact({
+      fromToken: impactToken,
+      fromAmount: impactToken.amount,
+      toToken: token,
+      toAmount: token.amount,
+    })
+    priceImpactPercent = priceImpact * 100
+  }
+
+  const tokenOnChain = !disableDescription ? (
+    <TextSecondary>
+      {t('main.tokenOnChain', {
+        tokenSymbol: token.symbol,
+        chainName: chain?.name,
+      })}
+    </TextSecondary>
+  ) : null
+
+  return (
+    <Box
+      {...other}
+      sx={[
+        {
+          flex: 1,
+          display: 'flex',
+          alignItems: 'center',
+        },
+        ...(Array.isArray(other.sx) ? other.sx : [other.sx]),
+      ]}
+    >
+      <TokenAvatar
+        token={token}
+        chain={chain}
+        isLoading={isLoading}
+        sx={{ marginRight: 2 }}
+      />
+      <Box
+        sx={{
+          flex: 1,
+        }}
+      >
+        <Box
+          sx={{
+            mb: 0.5,
+            height: 24,
+            display: 'flex',
+            alignItems: 'center',
+          }}
+          title={tokenAmount}
+        >
+          <TextFitter
+            height={30}
+            textStyle={{
+              fontWeight: 700,
+            }}
+          >
+            {t('format.tokenAmount', {
+              value: tokenAmount,
+            })}
+          </TextFitter>
+        </Box>
+        <TextSecondaryContainer>
+          <TextSecondary>
+            {t('format.currency', {
+              value: tokenPrice,
+            })}
+          </TextSecondary>
+          {impactToken ? (
+            <TextSecondary sx={{ px: 0.5 }} dot>
+              &#x2022;
+            </TextSecondary>
+          ) : null}
+          {impactToken ? (
+            enableImpactTokenTooltip ? (
+              <Tooltip title={t('tooltip.priceImpact')} sx={{ cursor: 'help' }}>
+                <TextSecondary>
+                  {t('format.percent', {
+                    value: priceImpact,
+                    usePlusSign: true,
+                  })}
+                </TextSecondary>
+              </Tooltip>
+            ) : (
+              <TextSecondary
+                title={priceImpactPercent?.toLocaleString(i18n.language, {
+                  maximumFractionDigits: 9,
+                })}
+              >
+                {t('format.percent', { value: priceImpact, usePlusSign: true })}
+              </TextSecondary>
+            )
+          ) : null}
+          {!disableDescription ? (
+            <TextSecondary sx={{ px: 0.5 }} dot>
+              &#x2022;
+            </TextSecondary>
+          ) : null}
+          {!disableDescription && step ? (
+            <TokenStep
+              step={step}
+              stepVisible={stepVisible}
+              disableDescription={disableDescription}
+            >
+              {tokenOnChain}
+            </TokenStep>
+          ) : (
+            tokenOnChain
+          )}
+        </TextSecondaryContainer>
+      </Box>
+    </Box>
+  )
+}
+
+const TokenStep: FC<PropsWithChildren<Partial<TokenProps>>> = ({
+  step,
+  stepVisible,
+  disableDescription,
+  children,
+}) => {
+  return (
+    <Box
+      sx={{
+        flex: 1,
+        position: 'relative',
+        overflow: 'hidden',
+        height: 16,
+      }}
+    >
+      <Grow
+        in={!stepVisible && !disableDescription}
+        style={{
+          position: 'absolute',
+        }}
+        appear={false}
+        timeout={225}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            height: 16,
+          }}
+        >
+          {children as ReactElement}
+        </Box>
+      </Grow>
+      <Grow
+        in={stepVisible}
+        style={{
+          position: 'absolute',
+        }}
+        appear={false}
+        timeout={225}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            height: 16,
+          }}
+        >
+          <Box
+            sx={{
+              mr: 0.75,
+              height: 16,
+            }}
+          >
+            <SmallAvatar
+              src={step?.toolDetails.logoURI}
+              alt={step?.toolDetails.name}
+            >
+              {step?.toolDetails.name[0]}
+            </SmallAvatar>
+          </Box>
+          <TextSecondary>{step?.toolDetails.name}</TextSecondary>
+        </Box>
+      </Grow>
+    </Box>
+  )
+}
+
+export const TokenSkeleton: FC<Partial<TokenProps> & BoxProps> = ({
+  step,
+  disableDescription,
+  ...other
+}) => {
+  return (
+    <Box
+      {...other}
+      sx={[
+        {
+          flex: 1,
+        },
+        ...(Array.isArray(other.sx) ? other.sx : [other.sx]),
+      ]}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          flex: 1,
+          alignItems: 'center',
+        }}
+      >
+        <AvatarBadgedSkeleton sx={{ marginRight: 2 }} />
+        <Box
+          sx={{
+            flex: 1,
+          }}
+        >
+          <Skeleton width={112} height={28} variant="text" />
+          <TextSecondaryContainer>
+            <Skeleton
+              width={48}
+              height={12}
+              variant="rounded"
+              sx={{ marginTop: 0.5 }}
+            />
+            {!step && !disableDescription ? (
+              <Skeleton
+                width={96}
+                height={12}
+                variant="rounded"
+                sx={{ marginTop: 0.5, marginLeft: 1.5 }}
+              />
+            ) : null}
+          </TextSecondaryContainer>
+        </Box>
+      </Box>
+    </Box>
+  )
+}