@lifi/widget 4.0.0-beta.8 → 4.0.0

package/src/components/TransactionCard/ActiveTransactionCard.tsx

@@ -0,0 +1,81 @@
+import type { RouteExtended } from '@lifi/sdk'
+import DeleteOutline from '@mui/icons-material/DeleteOutlined'
+import { Tooltip, Typography } from '@mui/material'
+import type { JSX, MouseEvent } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useActionMessage } from '../../hooks/useActionMessage.js'
+import { RouteExecutionStatus } from '../../stores/routes/types.js'
+import { getExpiryTimestamp } from '../../utils/timer.js'
+import { ActionRow } from '../ActionRow/ActionRow.js'
+import { Card } from '../Card/Card.js'
+import { IconCircle } from '../IconCircle/IconCircle.js'
+import { RouteTokens } from '../RouteCard/RouteTokens.js'
+import { ExecutionTimerText } from '../Timer/ExecutionTimerText.js'
+import { CircularProgressPending } from '../Timer/StepStatusTimer.style.js'
+import { DeleteButton, PendingCircle } from './ActiveTransactionCard.style.js'
+
+interface ActiveTransactionCardProps {
+  route: RouteExtended
+  status?: RouteExecutionStatus
+  onClick: () => void
+  onDelete: (e: MouseEvent) => void
+}
+
+export const ActiveTransactionCard = ({
+  route,
+  status,
+  onClick,
+  onDelete,
+}: ActiveTransactionCardProps): JSX.Element => {
+  const { t } = useTranslation()
+
+  const lastActiveStep = route.steps.findLast((step) => step.execution)
+  const lastActiveAction = lastActiveStep?.execution?.actions?.at(-1)
+  const { title } = useActionMessage(lastActiveStep, lastActiveAction)
+
+  const isFailed = status === RouteExecutionStatus.Failed
+
+  const statusIcon = (() => {
+    if (isFailed) {
+      return <IconCircle status="error" size={24} />
+    }
+    if (
+      ['ACTION_REQUIRED', 'MESSAGE_REQUIRED', 'RESET_REQUIRED'].includes(
+        lastActiveAction?.status ?? ''
+      )
+    ) {
+      return <IconCircle status="info" size={24} />
+    }
+    return (
+      <PendingCircle>
+        <CircularProgressPending size={24} sx={{ top: -2, left: -2 }} />
+      </PendingCircle>
+    )
+  })()
+
+  return (
+    <Card onClick={onClick} indented>
+      <ActionRow
+        sx={{ mb: 1.5 }}
+        startAdornment={statusIcon}
+        message={title ?? ''}
+        endAdornment={
+          isFailed ? (
+            <Tooltip title={t('button.clearTransaction')}>
+              <DeleteButton size="small" onClick={onDelete}>
+                <DeleteOutline sx={{ fontSize: 16 }} />
+              </DeleteButton>
+            </Tooltip>
+          ) : lastActiveStep?.execution?.signedAt ? (
+            <Typography sx={{ fontSize: 12, fontWeight: 600 }}>
+              <ExecutionTimerText
+                expiryTimestamp={getExpiryTimestamp(lastActiveStep)}
+              />
+            </Typography>
+          ) : undefined
+        }
+      />
+      <RouteTokens route={route} />
+    </Card>
+  )
+}

package/src/components/TransactionCard/TransactionCard.style.tsx

@@ -0,0 +1,14 @@
+import { Box, styled, Typography } from '@mui/material'
+import type React from 'react'
+
+export const DateLabelContainer: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)({
+    display: 'flex',
+    justifyContent: 'space-between',
+  })
+
+export const DateLabelText: React.FC<React.ComponentProps<typeof Typography>> =
+  styled(Typography)({
+    fontSize: 12,
+    fontWeight: 500,
+  })

package/src/components/TransactionCard/TransactionCard.tsx

@@ -0,0 +1,37 @@
+import type { RouteExtended } from '@lifi/sdk'
+import { Box } from '@mui/material'
+import type { JSX } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Card } from '../Card/Card.js'
+import { RouteTokens } from '../RouteCard/RouteTokens.js'
+import { DateLabelContainer, DateLabelText } from './TransactionCard.style.js'
+
+interface TransactionCardProps {
+  route: RouteExtended
+  date: Date
+  onClick?: () => void
+}
+
+export const TransactionCard = ({
+  route,
+  date,
+  onClick,
+}: TransactionCardProps): JSX.Element => {
+  const { i18n } = useTranslation()
+
+  return (
+    <Card indented onClick={onClick}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+        <DateLabelContainer>
+          <DateLabelText color="text.secondary">
+            {date.toLocaleString(i18n.language, { dateStyle: 'long' })}
+          </DateLabelText>
+          <DateLabelText color="text.secondary">
+            {date.toLocaleString(i18n.language, { timeStyle: 'short' })}
+          </DateLabelText>
+        </DateLabelContainer>
+        <RouteTokens route={route} />
+      </Box>
+    </Card>
+  )
+}

package/src/components/TransactionCard/TransactionCardSkeleton.tsx

@@ -0,0 +1,68 @@
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'
+import { Box, Skeleton } from '@mui/material'
+import type { JSX } from 'react'
+import { Card } from '../Card/Card.js'
+import { TokenSkeleton } from '../Token/Token.js'
+
+interface TransactionCardSkeletonProps {
+  active?: boolean
+}
+
+export const TransactionCardSkeleton = ({
+  active,
+}: TransactionCardSkeletonProps): JSX.Element => {
+  return (
+    <Card indented>
+      {active ? (
+        <Skeleton
+          variant="rectangular"
+          height={40}
+          sx={(theme) => ({
+            borderRadius: theme.vars.shape.borderRadiusTertiary,
+            mb: 1.5,
+          })}
+        />
+      ) : (
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            pb: 1.5,
+          }}
+        >
+          <Skeleton
+            variant="rectangular"
+            width={96}
+            height={18}
+            sx={(theme) => ({
+              borderRadius: theme.vars.shape.borderRadius,
+            })}
+          />
+          <Skeleton
+            variant="rectangular"
+            width={64}
+            height={18}
+            sx={(theme) => ({
+              borderRadius: theme.vars.shape.borderRadius,
+            })}
+          />
+        </Box>
+      )}
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+        <TokenSkeleton />
+        <Box
+          sx={{
+            width: 40,
+            height: 20,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <ArrowDownwardIcon sx={{ fontSize: 16, color: 'text.secondary' }} />
+        </Box>
+        <TokenSkeleton />
+      </Box>
+    </Card>
+  )
+}

package/src/config/queryClient.ts

@@ -1,6 +1,6 @@
 import { QueryClient } from '@tanstack/react-query'
 
-export const queryClient = new QueryClient({
+export const queryClient: QueryClient = new QueryClient({
   defaultOptions: {
     queries: {
       enabled: true,

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '4.0.0-beta.8'
+export const version = '4.0.0'

package/src/hooks/timer/useExecutionTimer.ts

@@ -0,0 +1,21 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { formatTimer } from '../../utils/timer.js'
+import { useTimer } from './useTimer.js'
+
+export const useExecutionTimer = (
+  expiryTimestamp: Date
+): { formatted: string | null; isTimerExpired: boolean } => {
+  const { i18n } = useTranslation()
+  const [isExpired, setExpired] = useState(false)
+  const { days, hours, minutes, seconds } = useTimer({
+    autoStart: true,
+    expiryTimestamp,
+    onExpire: () => setExpired(true),
+  })
+  const isTimerExpired = isExpired || (!minutes && !seconds)
+  const formatted = isTimerExpired
+    ? null
+    : formatTimer({ locale: i18n.language, days, hours, minutes, seconds })
+  return { formatted, isTimerExpired }
+}

package/src/hooks/timer/useInterval.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react'
 
-export function useInterval(callback: () => void, delay: number | null) {
+export function useInterval(callback: () => void, delay: number | null): void {
   const callbackRef = useRef(callback)
 
   // update callback function with current render callback that has access to latest props and state

package/src/hooks/timer/validate.ts

@@ -1,4 +1,4 @@
-export function validateExpiryTimestamp(expiryTimestamp: Date) {
+export function validateExpiryTimestamp(expiryTimestamp: Date): boolean {
   const isValid = new Date(expiryTimestamp).getTime() > 0
   if (!isValid) {
     console.warn('useTimer Invalid expiryTimestamp settings', expiryTimestamp)
@@ -6,7 +6,7 @@ export function validateExpiryTimestamp(expiryTimestamp: Date) {
   return isValid
 }
 
-export function validateOnExpire(onExpire: () => void) {
+export function validateOnExpire(onExpire: () => void): boolean {
   const isValid = onExpire && typeof onExpire === 'function'
   if (onExpire && !isValid) {
     console.warn('useTimer Invalid onExpire settings function', onExpire)

package/src/hooks/useAccountsBalancesData.ts

@@ -10,7 +10,10 @@ export const useAccountsBalancesData = (
   formType?: FormType,
   isAllNetworks?: boolean,
   allTokens?: Record<number, TokenExtended[]>
-) => {
+): {
+  data: Record<string, Record<number, TokenExtended[]>> | undefined
+  isLoading: boolean
+} => {
   const { data: accountsWithTokens, isLoading: isAccountsLoading } =
     useAccountsData(selectedChainId, formType, isAllNetworks, allTokens)
 

package/src/hooks/useActionMessage.ts

@@ -7,9 +7,10 @@ import { useAvailableChains } from './useAvailableChains.js'
 
 export const useActionMessage = (
   step?: LiFiStepExtended,
-  action?: ExecutionAction
-) => {
-  const { subvariant, subvariantOptions } = useWidgetConfig()
+  action?: ExecutionAction,
+  defaultLabelsOnly?: boolean
+): { title?: string; message?: string } => {
+  const { mode, modeOptions } = useWidgetConfig()
   const { t } = useTranslation()
   const { getChainById } = useAvailableChains()
 
@@ -27,7 +28,7 @@ export const useActionMessage = (
     action.type,
     action.status,
     action.substatus,
-    subvariant,
-    subvariantOptions
+    defaultLabelsOnly ? undefined : mode,
+    defaultLabelsOnly ? undefined : modeOptions
   )
 }

package/src/hooks/useAddressValidation.ts

@@ -3,7 +3,7 @@ import { getNameServiceAddress } from '@lifi/sdk'
 import { useChainTypeFromAddress } from '@lifi/widget-provider'
 import { useMutation } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
-import { useSDKClient } from '../providers/SDKClientProvider'
+import { useSDKClient } from '../providers/SDKClientProvider.js'
 
 export enum AddressType {
   Address = 0,
@@ -28,7 +28,12 @@ type InvalidResponse = {
   isValid: false
 }
 
-export const useAddressValidation = () => {
+export const useAddressValidation = (): {
+  validateAddress: (
+    args: ValidationArgs
+  ) => Promise<ValidResponse | InvalidResponse>
+  isValidating: boolean
+} => {
   const { t } = useTranslation()
   const { getChainTypeFromAddress } = useChainTypeFromAddress()
   const sdkClient = useSDKClient()

package/src/hooks/useAvailableChains.ts

@@ -18,12 +18,17 @@ const supportedChainTypes = [
   ChainType.SVM,
   ChainType.UTXO,
   ChainType.MVM,
+  ChainType.TVM,
 ]
 
 export const useAvailableChains = (
   chainTypes?: ChainType[],
   widgetConfig?: WidgetConfig
-) => {
+): {
+  chains: ExtendedChain[] | undefined
+  getChainById: GetChainById
+  isLoading: boolean
+} => {
   const { chains: internalChains, keyPrefix: internalKeyPrefix } =
     useWidgetConfig()
   const internalClient = useSDKClient()

package/src/hooks/useChain.ts

@@ -1,7 +1,17 @@
+import type { ExtendedChain } from '@lifi/sdk'
 import { useMemo } from 'react'
 import { useAvailableChains } from './useAvailableChains.js'
 
-export const useChain = (chainId?: number) => {
+export const useChain = (
+  chainId?: number
+): {
+  chain: ExtendedChain | undefined
+  isLoading: boolean
+  getChainById: (
+    chainId?: number,
+    chains?: ExtendedChain[]
+  ) => ExtendedChain | undefined
+} => {
   const { isLoading, getChainById } = useAvailableChains()
 
   const chain = useMemo(() => getChainById(chainId), [chainId, getChainById])

package/src/hooks/useChainSearch.ts

@@ -0,0 +1,70 @@
+import type { ExtendedChain } from '@lifi/sdk'
+import { debounce } from '@mui/material'
+import type { RefObject } from 'react'
+import { useCallback, useMemo, useState } from 'react'
+import { useChainSelect } from '../components/ChainSelect/useChainSelect.js'
+import { FormKeyHelper, type FormType } from '../stores/form/types.js'
+import { useFieldValues } from '../stores/form/useFieldValues.js'
+
+export function useChainSearch(
+  formType: FormType,
+  listRef: RefObject<HTMLDivElement | null>,
+  inputRef: RefObject<HTMLInputElement | null>
+): {
+  filteredChains: ExtendedChain[]
+  isLoading: boolean
+  selectedChainId: number | undefined
+  onSelectChainFallback: (chain: ExtendedChain) => void
+  onChange: () => void
+  onClear: () => void
+} {
+  const { chains, isLoading, setCurrentChain } = useChainSelect(formType)
+  const [selectedChainId] = useFieldValues(FormKeyHelper.getChainKey(formType))
+  const [debouncedSearchValue, setDebouncedSearchValue] = useState('')
+
+  const filteredChains = useMemo(() => {
+    const value = debouncedSearchValue.toLowerCase()
+    return value
+      ? (chains?.filter((chain) => chain.name.toLowerCase().includes(value)) ??
+          [])
+      : (chains ?? [])
+  }, [chains, debouncedSearchValue])
+
+  const debouncedFilterChains = useMemo(
+    () =>
+      debounce((value: string) => {
+        setDebouncedSearchValue(value)
+        listRef.current?.scrollTo(0, 0)
+      }, 250),
+    [listRef]
+  )
+
+  const onSelectChainFallback = useCallback(
+    (chain: ExtendedChain) => {
+      setCurrentChain(chain.id)
+    },
+    [setCurrentChain]
+  )
+
+  const onChange = useCallback(() => {
+    const value = inputRef.current?.value || ''
+    debouncedFilterChains(value)
+  }, [debouncedFilterChains, inputRef])
+
+  const onClear = useCallback(() => {
+    if (inputRef.current) {
+      inputRef.current.value = ''
+    }
+    setDebouncedSearchValue('')
+    listRef.current?.scrollTo(0, 0)
+  }, [inputRef, listRef])
+
+  return {
+    filteredChains,
+    isLoading,
+    selectedChainId,
+    onSelectChainFallback,
+    onChange,
+    onClear,
+  }
+}

package/src/hooks/useChains.ts

@@ -1,11 +1,21 @@
-import type { ChainType } from '@lifi/sdk'
+import type { ChainType, ExtendedChain } from '@lifi/sdk'
 import { useMemo } from 'react'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import type { FormType } from '../stores/form/types.js'
 import { getConfigItemSets, isFormItemAllowed } from '../utils/item.js'
 import { useAvailableChains } from './useAvailableChains.js'
 
-export const useChains = (type?: FormType, chainTypes?: ChainType[]) => {
+export const useChains = (
+  type?: FormType,
+  chainTypes?: ChainType[]
+): {
+  chains: ExtendedChain[] | undefined
+  getChainById: (
+    chainId?: number,
+    chains?: ExtendedChain[]
+  ) => ExtendedChain | undefined
+  isLoading: boolean
+} => {
   const { chains } = useWidgetConfig()
   const {
     chains: availableChains,

package/src/hooks/useContactSupport.ts

@@ -0,0 +1,16 @@
+import { WidgetEvent } from '../types/events.js'
+import { useWidgetEvents } from './useWidgetEvents.js'
+
+export const useContactSupport = (supportId?: string): (() => void) => {
+  const widgetEvents = useWidgetEvents()
+
+  const handleContactSupport = () => {
+    if (widgetEvents.listenerCount(WidgetEvent.ContactSupport) === 0) {
+      window.open('https://help.li.fi', '_blank', 'nofollow noreferrer')
+    } else {
+      widgetEvents.emit(WidgetEvent.ContactSupport, { supportId })
+    }
+  }
+
+  return handleContactSupport
+}

package/src/hooks/useDebouncedWatch.ts

@@ -1,11 +1,11 @@
 import { useEffect, useRef, useState } from 'react'
-import type { FormFieldNames } from '../stores/form/types.js'
+import type { FormFieldArray, FormFieldNames } from '../stores/form/types.js'
 import { useFieldValues } from '../stores/form/useFieldValues.js'
 
 export const useDebouncedWatch = <T extends FormFieldNames[]>(
   delay: number,
   ...name: T
-) => {
+): FormFieldArray<T> => {
   const watchedValue = useFieldValues(...name)
   const [debouncedValue, setDebouncedValue] = useState(watchedValue)
   const debouncedValueRef = useRef<typeof watchedValue>(null)

package/src/hooks/useDefaultElementId.ts

@@ -1,6 +1,6 @@
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 
-export const useDefaultElementId = () => {
+export const useDefaultElementId = (): string | undefined => {
   const { elementId } = useWidgetConfig()
   return elementId
 }

package/src/hooks/useExplorer.ts

@@ -1,84 +1,101 @@
 import type { Chain } from '@lifi/sdk'
 import { ChainId, ChainType, isHex } from '@lifi/sdk'
+import { useCallback } from 'react'
 import { internalExplorerUrl } from '../config/constants.js'
 import { useAvailableChains } from '../hooks/useAvailableChains.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 
 const sanitiseBaseUrl = (baseUrl: string) => baseUrl.trim().replace(/\/+$/, '')
 
-type TransactionLinkProps = { chain?: Chain | number } & (
-  | {
-      txHash: string
-      txLink?: never
-    }
-  | {
-      txHash?: never
-      txLink: string
-    }
-)
+const explorerPathOverrides: Partial<
+  Record<ChainType | ChainId, { txPath: string; addressPath: string }>
+> = {
+  [ChainId.SUI]: { txPath: 'txblock', addressPath: 'coin' },
+  [ChainId.LTR]: { txPath: 'logs', addressPath: 'accounts' },
+  [ChainType.TVM]: { txPath: '#/transaction', addressPath: '#/address' },
+}
+
+type TransactionLinkProps = {
+  chain?: Chain | number
+  txHash?: string
+  txLink?: string
+}
 
-export const useExplorer = () => {
+export const useExplorer = (): {
+  getTransactionLink: (props: TransactionLinkProps) => string | undefined
+  getAddressLink: (address: string, chain?: Chain | number) => string
+} => {
   const { explorerUrls } = useWidgetConfig()
   const { getChainById } = useAvailableChains()
 
-  const getExplorerConfig = (chain?: Chain | number) => {
-    const resolvedChain = Number.isFinite(chain)
-      ? getChainById(chain as number)
-      : (chain as Chain)
+  const getExplorerConfig = useCallback(
+    (chain?: Chain | number) => {
+      const resolvedChain = Number.isFinite(chain)
+        ? getChainById(chain as number)
+        : (chain as Chain)
 
-    const explorerUrl =
-      (resolvedChain
-        ? (explorerUrls?.[resolvedChain.id]?.[0] ??
-          resolvedChain.metamask.blockExplorerUrls[0])
-        : explorerUrls?.internal?.[0]) || internalExplorerUrl
+      const explorerUrl =
+        (resolvedChain
+          ? (explorerUrls?.[resolvedChain.id]?.[0] ??
+            resolvedChain.metamask.blockExplorerUrls[0])
+          : explorerUrls?.internal?.[0]) || internalExplorerUrl
 
-    const url = typeof explorerUrl === 'string' ? explorerUrl : explorerUrl.url
+      const baseUrl =
+        typeof explorerUrl === 'string' ? explorerUrl : explorerUrl.url
 
-    const defaultTxPath = resolvedChain?.id === ChainId.SUI ? 'txblock' : 'tx'
-    const defaultAddressPath =
-      resolvedChain?.id === ChainId.SUI ? 'coin' : 'address'
-    const txPath =
-      typeof explorerUrl === 'string'
-        ? defaultTxPath
-        : explorerUrl.txPath || defaultTxPath
-    const addressPath =
-      typeof explorerUrl === 'string'
-        ? defaultAddressPath
-        : explorerUrl.addressPath || defaultAddressPath
+      const overrides =
+        explorerPathOverrides[resolvedChain?.id as ChainId] ??
+        explorerPathOverrides[resolvedChain?.chainType as ChainType]
 
-    return {
-      url: sanitiseBaseUrl(url),
-      txPath,
-      addressPath,
-      resolvedChain,
-    }
-  }
-
-  const getTransactionLink = ({
-    txHash,
-    txLink,
-    chain,
-  }: TransactionLinkProps): string | undefined => {
-    if (!txHash) {
-      return txLink
-    }
+      const defaultTxPath = overrides?.txPath ?? 'tx'
+      const defaultAddressPath = overrides?.addressPath ?? 'address'
+      const txPath =
+        typeof explorerUrl === 'string'
+          ? defaultTxPath
+          : explorerUrl.txPath || defaultTxPath
+      const addressPath =
+        typeof explorerUrl === 'string'
+          ? defaultAddressPath
+          : explorerUrl.addressPath || defaultAddressPath
 
-    const config = getExplorerConfig(chain)
-
-    // For EVM chains, validate the transaction hash as some relayers return custom task hashes that are not visible on-chain
-    if (config.resolvedChain?.chainType === ChainType.EVM) {
-      if (!isHex(txHash, { strict: true })) {
-        return undefined
+      return {
+        url: sanitiseBaseUrl(baseUrl),
+        txPath,
+        addressPath,
+        resolvedChain,
+        hasOverride: Boolean(overrides),
       }
-    }
+    },
+    [explorerUrls, getChainById]
+  )
 
-    return `${config.url}/${config.txPath}/${txHash}`
-  }
+  const getTransactionLink = useCallback(
+    ({ txHash, txLink, chain }: TransactionLinkProps): string | undefined => {
+      if (txHash) {
+        const config = getExplorerConfig(chain)
+        // For EVM chains, sanity-check the transaction hash as some relayers return custom task hashes that are not visible on-chain.
+        // Skip the check when a chain-specific path override is registered — that's an explicit signal the chain's
+        // explorer accepts a non-hex hash (e.g. Lighter, whose hash has no 0x prefix).
+        const validForEvm =
+          config.resolvedChain?.chainType !== ChainType.EVM ||
+          config.hasOverride ||
+          isHex(txHash, { strict: true })
+        if (validForEvm) {
+          return `${config.url}/${config.txPath}/${txHash}`
+        }
+      }
+      return txLink
+    },
+    [getExplorerConfig]
+  )
 
-  const getAddressLink = (address: string, chain?: Chain | number) => {
-    const config = getExplorerConfig(chain)
-    return `${config.url}/${config.addressPath}/${address}`
-  }
+  const getAddressLink = useCallback(
+    (address: string, chain?: Chain | number) => {
+      const config = getExplorerConfig(chain)
+      return `${config.url}/${config.addressPath}/${address}`
+    },
+    [getExplorerConfig]
+  )
 
   return {
     getTransactionLink,