@lifi/widget 4.0.0-beta.9 → 4.0.0

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

@@ -1,6 +1,9 @@
 import { Switch as MuiSwitch, styled, switchClasses } from '@mui/material'
+import type React from 'react'
 
-export const Switch = styled(MuiSwitch)(({ theme }) => ({
+export const Switch: React.FC<React.ComponentProps<typeof MuiSwitch>> = styled(
+  MuiSwitch
+)(({ theme }) => ({
   width: 42,
   height: 24,
   padding: 0,
@@ -26,7 +29,7 @@ export const Switch = styled(MuiSwitch)(({ theme }) => ({
       borderColor: theme.vars.palette.common.white,
     },
     [`&.${switchClasses.disabled} .${switchClasses.thumb}`]: {
-      color: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.12)`,
+      color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 12%, transparent)`,
     },
     [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {
       opacity: 0.7,
@@ -46,6 +49,6 @@ export const Switch = styled(MuiSwitch)(({ theme }) => ({
     transition: theme.transitions.create(['background-color'], {
       duration: theme.transitions.duration.standard,
     }),
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.16)`,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 16%, transparent)`,
   },
 }))

package/src/components/Tabs/NavigationTabs.tsx

@@ -1,40 +1,45 @@
 import { styled, Tabs, tabsClasses } from '@mui/material'
+import type React from 'react'
 import { Tab } from './Tabs.style.js'
 
-export const NavigationTabs = 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: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+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: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
+      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 = styled(Tab, {
-  name: 'MuiNavigationTab',
-  slot: 'root',
-})(({ theme }) => ({
+export const NavigationTab: React.FC<React.ComponentProps<typeof Tab>> = styled(
+  Tab,
+  {
+    name: 'MuiNavigationTab',
+    slot: 'root',
+  }
+)(({ theme }) => ({
   minHeight: theme.spacing(5),
   maxHeight: theme.spacing(5),
 }))

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

@@ -6,6 +6,7 @@ import {
   tabClasses,
   tabsClasses,
 } from '@mui/material'
+import type React from 'react'
 
 const Tabs = styled(MuiTabs)(({ theme }) => ({
   flex: 1,
@@ -20,20 +21,24 @@ const Tabs = styled(MuiTabs)(({ theme }) => ({
   },
 }))
 
-export const CardTabs = styled(Tabs)(({ theme }) => ({
-  backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+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: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
     [`.${tabsClasses.indicator}`]: {
-      backgroundColor: `rgba(${theme.vars.palette.common.backgroundChannel} / 0.56)`,
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.background} 56%, transparent)`,
     },
   }),
 }))
 
-export const Tab = styled(MuiTab)<TabProps>(({ theme }) => ({
+export const Tab: React.FC<React.ComponentProps<typeof MuiTab>> = styled(
+  MuiTab
+)<TabProps>(({ theme }) => ({
   zIndex: 1,
   flex: 1,
   textTransform: 'none',

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

@@ -1,13 +1,19 @@
 import { Box, styled, Typography } from '@mui/material'
+import type React from 'react'
 
-export const TextSecondaryContainer = styled(Box)(() => ({
+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 = styled(Typography, {
+export const TextSecondary: React.FC<
+  React.ComponentProps<typeof Typography> & { dot?: boolean }
+> = styled(Typography, {
   shouldForwardProp: (prop: string) => !['dot'].includes(prop),
 })<{ dot?: boolean }>(({ theme }) => ({
   fontSize: 12,
@@ -19,13 +25,15 @@ export const TextSecondary = styled(Typography, {
     {
       props: ({ dot }) => dot,
       style: {
-        color: `rgba(${theme.vars.palette.text.secondaryChannel} / 0.56)`,
+        color: `color-mix(in srgb, ${theme.vars.palette.text.secondary} 56%, transparent)`,
       },
     },
   ],
 }))
 
-export const TokenDivider = styled(Box)(({ theme }) => ({
+export const TokenDivider: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(({ theme }) => ({
   height: 16,
   borderLeftWidth: 2,
   borderLeftStyle: 'solid',

package/src/components/Token/Token.tsx

@@ -144,14 +144,14 @@ const TokenBase: FC<TokenProps & BoxProps> = ({
             })}
           </TextFitter>
         </Box>
-        <TextSecondaryContainer as="span">
+        <TextSecondaryContainer>
           <TextSecondary>
             {t('format.currency', {
               value: tokenPrice,
             })}
           </TextSecondary>
           {impactToken ? (
-            <TextSecondary px={0.5} dot>
+            <TextSecondary sx={{ px: 0.5 }} dot>
               &#x2022;
             </TextSecondary>
           ) : null}
@@ -176,7 +176,7 @@ const TokenBase: FC<TokenProps & BoxProps> = ({
             )
           ) : null}
           {!disableDescription ? (
-            <TextSecondary px={0.5} dot>
+            <TextSecondary sx={{ px: 0.5 }} dot>
               &#x2022;
             </TextSecondary>
           ) : null}
@@ -293,8 +293,8 @@ export const TokenSkeleton: FC<Partial<TokenProps> & BoxProps> = ({
             flex: 1,
           }}
         >
-          <Skeleton width={112} height={24} variant="text" />
-          <TextSecondaryContainer as="span">
+          <Skeleton width={112} height={28} variant="text" />
+          <TextSecondaryContainer>
             <Skeleton
               width={48}
               height={12}

package/src/components/TokenList/PinTokenButton.tsx

@@ -1,6 +1,7 @@
 import PushPinIcon from '@mui/icons-material/PushPin'
 import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined'
 import { IconButton } from '@mui/material'
+import type { JSX } from 'react'
 import { usePinnedTokensStore } from '../../stores/pinnedTokens/PinnedTokensStore.js'
 
 interface PinTokenButtonProps {
@@ -11,7 +12,7 @@ interface PinTokenButtonProps {
 export const PinTokenButton = ({
   chainId,
   tokenAddress,
-}: PinTokenButtonProps) => {
+}: PinTokenButtonProps): JSX.Element => {
   const [pinnedTokens, pinToken, unpinToken] = usePinnedTokensStore((state) => [
     state.pinnedTokens,
     state.pinToken,

package/src/components/TokenList/TokenDetailsSheet.tsx

@@ -1,10 +1,13 @@
+import type React from 'react'
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react'
 import { BottomSheet } from '../BottomSheet/BottomSheet.js'
 import type { BottomSheetBase } from '../BottomSheet/types.js'
 import { TokenDetailsSheetContent } from './TokenDetailsSheetContent.js'
 import type { TokenDetailsSheetBase } from './types.js'
 
-export const TokenDetailsSheet = forwardRef<TokenDetailsSheetBase>((_, ref) => {
+export const TokenDetailsSheet: React.ForwardRefExoticComponent<
+  React.RefAttributes<TokenDetailsSheetBase>
+> = forwardRef<TokenDetailsSheetBase>((_, ref) => {
   const bottomSheetRef = useRef<BottomSheetBase>(null)
   const [tokenAddress, setTokenAddress] = useState<string | undefined>(
     undefined

package/src/components/TokenList/TokenDetailsSheetContent.style.tsx

@@ -1,10 +1,11 @@
 import { Box, styled, Typography } from '@mui/material'
+import type React from 'react'
 import type { PageContainerProps } from '../PageContainer.js'
 import { PageContainer } from '../PageContainer.js'
 
-export const TokenDetailsSheetContainer = styled(
-  PageContainer
-)<PageContainerProps>(({ theme }) => ({
+export const TokenDetailsSheetContainer: React.FC<
+  React.ComponentProps<typeof PageContainer> & PageContainerProps
+> = styled(PageContainer)<PageContainerProps>(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   gap: theme.spacing(2),
@@ -12,7 +13,9 @@ export const TokenDetailsSheetContainer = styled(
   paddingBottom: theme.spacing(3),
 }))
 
-export const TokenDetailsSheetHeader = styled(Box)(({ theme }) => ({
+export const TokenDetailsSheetHeader: React.FC<
+  React.ComponentProps<typeof Box>
+> = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'flex-start',
@@ -20,15 +23,18 @@ export const TokenDetailsSheetHeader = styled(Box)(({ theme }) => ({
   gap: theme.spacing(2),
 }))
 
-export const Label = styled(Typography)(({ theme }) => ({
+export const Label: React.FC<React.ComponentProps<typeof Typography>> = styled(
+  Typography
+)(({ theme }) => ({
   fontWeight: 500,
   fontSize: '12px',
   lineHeight: '16px',
   color: theme.vars.palette.text.secondary,
 }))
 
-export const MetricContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: theme.spacing(1),
-}))
+export const MetricContainer: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(1),
+  }))