@lifi/widget 0.0.0-preview-6cc63bac

package/src/components/TokenList/types.ts

@@ -0,0 +1,65 @@
+import type { ExtendedChain } from '@lifi/sdk'
+import type { RefObject } from 'react'
+import type { FormType } from '../../stores/form/types.js'
+import type { TokenAmount } from '../../types/token.js'
+
+export interface TokenListProps {
+  formType: FormType
+  headerRef: RefObject<HTMLElement | null>
+}
+
+export interface VirtualizedTokenListProps {
+  tokens: TokenAmount[]
+  scrollElementRef: RefObject<HTMLElement | null>
+  isLoading: boolean
+  isBalanceLoading: boolean
+  chainId?: number
+  showCategories?: boolean
+  showPinnedTokens?: boolean
+  onClick(tokenAddress: string, chainId?: number): void
+  selectedTokenAddress?: string
+  isAllNetworks: boolean
+}
+
+interface TokenListItemBaseProps {
+  onClick?(tokenAddress: string, chainId?: number): void
+  size: number
+  start: number
+}
+
+export interface TokenListItemProps extends TokenListItemBaseProps {
+  token: TokenAmount
+  onShowTokenDetails: (
+    tokenAddress: string,
+    noContractAddress: boolean,
+    chainId: number
+  ) => void
+  chain?: ExtendedChain
+  isBalanceLoading?: boolean
+  startAdornment?: React.ReactNode
+  endAdornment?: React.ReactNode
+  selected?: boolean
+}
+
+export interface TokenListItemButtonProps {
+  onShowTokenDetails: (
+    tokenAddress: string,
+    noContractAddress: boolean,
+    chainId: number
+  ) => void
+  onClick?(tokenAddress: string, chainId?: number): void
+  token: TokenAmount
+  chain?: ExtendedChain
+  isBalanceLoading?: boolean
+  selected?: boolean
+}
+
+export interface TokenListItemAvatarProps {
+  token: TokenAmount
+}
+
+export interface TokenDetailsSheetBase {
+  isOpen(): void
+  open(address: string, noContractAddress: boolean, chainId: number): void
+  close(): void
+}

package/src/components/TokenList/useTokenSelect.ts

@@ -0,0 +1,135 @@
+import { useCallback } from 'react'
+import { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'
+import type { FormType } from '../../stores/form/types.js'
+import { FormKeyHelper } from '../../stores/form/types.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { useSplitModeStore } from '../../stores/settings/useSplitModeStore.js'
+import { WidgetEvent } from '../../types/events.js'
+import type { DisabledUIConfig } from '../../types/widget.js'
+import { isItemAllowed } from '../../utils/item.js'
+
+export const useTokenSelect = (
+  formType: FormType,
+  onClick?: () => void
+): ((tokenAddress: string, chainId?: number) => void) => {
+  const { mode, disabledUI, chains: chainsConfig } = useWidgetConfig()
+  const splitMode = useSplitModeStore((store) => store.state)
+  const emitter = useWidgetEvents()
+  const { setFieldValue, getFieldValues } = useFieldActions()
+  const autoPopulateToAddress = useToAddressAutoPopulate()
+  const [setChain, setIsAllNetworks] = useChainOrderStore((state) => [
+    state.setChain,
+    state.setIsAllNetworks,
+  ])
+
+  const tokenKey = FormKeyHelper.getTokenKey(formType)
+
+  return useCallback(
+    (tokenAddress: string, chainId?: number) => {
+      setFieldValue(tokenKey, tokenAddress, { isDirty: true, isTouched: true })
+      const selectedChainId =
+        chainId ?? getFieldValues(FormKeyHelper.getChainKey(formType))[0]
+      // Set chain again to trigger URL builder update
+      setFieldValue(FormKeyHelper.getChainKey(formType), selectedChainId, {
+        isDirty: true,
+        isTouched: true,
+      })
+      const amountKey = FormKeyHelper.getAmountKey(formType)
+      if (!disabledUI?.[amountKey as keyof DisabledUIConfig]) {
+        setFieldValue(amountKey, '')
+      }
+      const oppositeFormType = formType === 'from' ? 'to' : 'from'
+      const [
+        selectedOppositeTokenAddress,
+        selectedOppositeChainId,
+        selectedToAddress,
+      ] = getFieldValues(
+        FormKeyHelper.getTokenKey(oppositeFormType),
+        FormKeyHelper.getChainKey(oppositeFormType),
+        'toAddress'
+      )
+
+      // TODO: remove when we enable same chain/token transfers
+      const isSameTokenTransfer =
+        selectedOppositeTokenAddress === tokenAddress &&
+        selectedOppositeChainId === selectedChainId
+
+      const isBridgeToSameChain =
+        mode === 'split' &&
+        splitMode === 'bridge' &&
+        selectedOppositeChainId === selectedChainId
+
+      if ((isSameTokenTransfer || isBridgeToSameChain) && mode !== 'custom') {
+        setFieldValue(FormKeyHelper.getTokenKey(oppositeFormType), '', {
+          isDirty: true,
+          isTouched: true,
+        })
+      }
+
+      // If no opposite token is selected, synchronize the opposite chain
+      // to match the currently selected chain (if allowed).
+      // In default exchange mode, also collapse "All Networks" on the opposite
+      // side - same-chain swap is the most common action.
+      if (
+        !selectedOppositeTokenAddress &&
+        selectedChainId &&
+        isItemAllowed(selectedChainId, chainsConfig?.[oppositeFormType])
+      ) {
+        const isDefaultExchange = !mode || mode === 'default'
+        if (isDefaultExchange) {
+          setIsAllNetworks(false, oppositeFormType)
+        }
+        setFieldValue(
+          FormKeyHelper.getChainKey(oppositeFormType),
+          selectedChainId,
+          {
+            isDirty: true,
+            isTouched: true,
+          }
+        )
+        setChain(selectedChainId, oppositeFormType)
+      }
+
+      // Automatically populate toAddress field if bridging across ecosystems and compatible wallet is connected
+      autoPopulateToAddress({
+        formType,
+        selectedToAddress,
+        selectedChainId,
+        selectedOppositeChainId,
+        selectedOppositeTokenAddress,
+      })
+
+      const eventToEmit =
+        formType === 'from'
+          ? WidgetEvent.SourceChainTokenSelected
+          : WidgetEvent.DestinationChainTokenSelected
+
+      if (selectedChainId) {
+        emitter.emit(eventToEmit, {
+          chainId: selectedChainId,
+          tokenAddress,
+        })
+      }
+
+      onClick?.()
+    },
+    [
+      autoPopulateToAddress,
+      disabledUI,
+      emitter,
+      formType,
+      getFieldValues,
+      onClick,
+      setChain,
+      setIsAllNetworks,
+      setFieldValue,
+      mode,
+      splitMode,
+      tokenKey,
+      chainsConfig,
+    ]
+  )
+}

package/src/components/TokenRate/TokenRate.style.ts

@@ -0,0 +1,20 @@
+import { styled, Typography } from '@mui/material'
+import type React from 'react'
+
+export const TokenRateTypography: React.FC<
+  React.ComponentProps<typeof Typography>
+> = styled(Typography)(({ theme }) => ({
+  fontSize: 14,
+  lineHeight: 1.429,
+  fontWeight: 500,
+  color: theme.vars.palette.text.primary,
+  cursor: 'pointer',
+  '&:hover': {
+    opacity: 1,
+  },
+  opacity: 0.56,
+  transition: theme.transitions.create(['opacity'], {
+    duration: theme.transitions.duration.enteringScreen,
+    easing: theme.transitions.easing.easeOut,
+  }),
+}))

package/src/components/TokenRate/TokenRate.tsx

@@ -0,0 +1,62 @@
+import { formatUnits, type RouteExtended } from '@lifi/sdk'
+import type { TypographyProps } from '@mui/material'
+import type { MouseEventHandler } from 'react'
+import { useTranslation } from 'react-i18next'
+import { create } from 'zustand'
+import { TokenRateTypography } from './TokenRate.style.js'
+
+interface TokenRateProps extends TypographyProps {
+  route: RouteExtended
+}
+
+interface TokenRateState {
+  isForward: boolean
+  toggleIsForward(): void
+}
+
+const useTokenRate = create<TokenRateState>((set) => ({
+  isForward: true,
+  toggleIsForward: () => set((state) => ({ isForward: !state.isForward })),
+}))
+
+export const TokenRate: React.FC<TokenRateProps> = ({ route }) => {
+  const { t } = useTranslation()
+  const { isForward, toggleIsForward } = useTokenRate()
+
+  const toggleRate: MouseEventHandler<HTMLSpanElement> = (e) => {
+    e.stopPropagation()
+    toggleIsForward()
+  }
+
+  const lastStep = route.steps.at(-1)
+
+  const fromToken = {
+    ...route.fromToken,
+    amount: BigInt(route.fromAmount),
+  }
+  const toToken = {
+    ...(lastStep?.execution?.toToken ??
+      lastStep?.action.toToken ??
+      route.toToken),
+    amount: lastStep?.execution?.toAmount
+      ? BigInt(lastStep.execution.toAmount)
+      : BigInt(route.toAmount),
+  }
+
+  const fromToRate =
+    Number.parseFloat(formatUnits(toToken.amount!, toToken.decimals)) /
+    Number.parseFloat(formatUnits(fromToken.amount!, fromToken.decimals))
+  const toFromRate =
+    Number.parseFloat(formatUnits(fromToken.amount!, fromToken.decimals)) /
+    Number.parseFloat(formatUnits(toToken.amount!, toToken.decimals))
+
+  const rateText = isForward
+    ? `1 ${fromToken.symbol} ≈ ${t('format.tokenAmount', { value: fromToRate })} ${toToken.symbol}`
+    : `1 ${toToken.symbol} ≈ ${t('format.tokenAmount', { value: toFromRate })} ${fromToken.symbol}`
+
+  return (
+    <TokenRateTypography onClick={toggleRate} role="button">
+      {rateText}
+    </TokenRateTypography>
+  )
+}

package/src/components/Tools/ToolItem.tsx

@@ -0,0 +1,41 @@
+import { Avatar, Checkbox, ListItemAvatar } from '@mui/material'
+import { memo, type NamedExoticComponent } from 'react'
+import { ListItemText } from '../ListItemText.js'
+import { SettingsListItemButton } from '../SettingsListItemButton.js'
+
+interface ToolItemProps {
+  tool: any
+  typeKey: string
+  isEnabled: boolean
+  onToggle: (key: string) => void
+}
+
+export const ToolItem: NamedExoticComponent<ToolItemProps> =
+  memo<ToolItemProps>(({ tool, typeKey, isEnabled, onToggle }) => {
+    const handleClick = () => {
+      onToggle(tool.key)
+    }
+
+    const handleCheckboxClick = (e: React.MouseEvent) => {
+      e.stopPropagation()
+      onToggle(tool.key)
+    }
+
+    return (
+      <SettingsListItemButton onClick={handleClick}>
+        <ListItemAvatar>
+          <Avatar src={tool.logoURI} alt={tool.name}>
+            {tool.name[0]}
+          </Avatar>
+        </ListItemAvatar>
+        <ListItemText primary={tool.name} />
+        <Checkbox
+          id={`${typeKey}-${tool.key}-checkbox`}
+          checked={isEnabled}
+          onChange={handleClick}
+          onClick={handleCheckboxClick}
+          sx={{ mr: -1 }}
+        />
+      </SettingsListItemButton>
+    )
+  })

package/src/components/Tools/Tools.tsx

@@ -0,0 +1,61 @@
+import type { ToolsResponse } from '@lifi/sdk'
+import { List } from '@mui/material'
+import { type JSX, useMemo, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useSettingsStore } from '../../stores/settings/SettingsStore.js'
+import { useSettingsActions } from '../../stores/settings/useSettingsActions.js'
+import { SearchNotFound } from '../Search/SearchNotFound.js'
+import { ToolItem } from './ToolItem.js'
+
+export type ToolCollectionTypes =
+  | ToolsResponse['exchanges']
+  | ToolsResponse['bridges']
+
+interface ToolsProps {
+  filteredTools: ToolCollectionTypes
+  type: 'Bridges' | 'Exchanges'
+}
+
+export const Tools = ({ filteredTools, type }: ToolsProps): JSX.Element => {
+  const { t } = useTranslation()
+  const typeKey = type.toLowerCase() as 'bridges' | 'exchanges'
+  const enabledTools = useSettingsStore((state) => state[`_enabled${type}`])
+  const { setToolValue } = useSettingsActions()
+
+  // Use ref to access current enabledTools without causing re-renders
+  const enabledToolsRef = useRef(enabledTools)
+  enabledToolsRef.current = enabledTools
+  const toggleCallbacks = useMemo(() => {
+    const callbacks: Record<string, () => void> = {}
+    filteredTools.forEach((tool) => {
+      callbacks[tool.key] = () => {
+        // Access current state via ref to avoid dependency on enabledTools
+        setToolValue(type, tool.key, !enabledToolsRef.current[tool.key])
+      }
+    })
+    return callbacks
+  }, [filteredTools, setToolValue, type])
+
+  if (!filteredTools.length) {
+    return <SearchNotFound message={t(`info.message.empty${type}List`)} />
+  }
+
+  return (
+    <List
+      className="long-list"
+      disablePadding
+      data-testid={`${typeKey}-list`}
+      sx={{ px: 1.5, pb: 2 }}
+    >
+      {filteredTools.map((tool) => (
+        <ToolItem
+          key={tool.key}
+          tool={tool}
+          typeKey={typeKey}
+          isEnabled={enabledTools[tool.key]}
+          onToggle={toggleCallbacks[tool.key]}
+        />
+      ))}
+    </List>
+  )
+}

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

@@ -0,0 +1,24 @@
+import { Box, IconButton, styled } from '@mui/material'
+import type React from 'react'
+
+export const PendingCircle: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(({ theme }) => ({
+  position: 'relative',
+  width: 24,
+  height: 24,
+  flexShrink: 0,
+  borderRadius: '50%',
+  border: `2px solid ${theme.vars.palette.grey[300]}`,
+  ...theme.applyStyles('dark', {
+    borderColor: theme.vars.palette.grey[800],
+  }),
+}))
+
+export const DeleteButton: React.FC<React.ComponentProps<typeof IconButton>> =
+  styled(IconButton)(({ theme }) => ({
+    padding: theme.spacing(0.5),
+    backgroundColor: theme.vars.palette.background.paper,
+    width: 24,
+    height: 24,
+  }))

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/constants.ts

@@ -0,0 +1,3 @@
+export const defaultMaxHeight = 686
+
+export const internalExplorerUrl = 'https://scan.li.fi'

package/src/config/queryClient.ts

@@ -0,0 +1,21 @@
+import { QueryClient } from '@tanstack/react-query'
+
+export const queryClient: QueryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      enabled: true,
+      refetchInterval: false,
+      refetchIntervalInBackground: false,
+      refetchOnWindowFocus: true,
+      refetchOnReconnect: true,
+      refetchOnMount: true,
+      retryOnMount: true,
+      // suspense: true,
+    },
+    mutations: {
+      onError: (_error) => {
+        //
+      },
+    },
+  },
+})

package/src/config/version.ts

@@ -0,0 +1,2 @@
+export const name = '@lifi/widget'
+export const version = '0.0.0-preview-6cc63bac'

package/src/hooks/timer/time.ts

@@ -0,0 +1,39 @@
+export type TimeFromMillisecondsType = {
+  totalMilliseconds: number
+  totalSeconds: number
+  milliseconds: number
+  seconds: number
+  minutes: number
+  hours: number
+  days: number
+}
+
+export function getTimeFromMilliseconds(
+  millisecs: number,
+  isCountDown = true
+): TimeFromMillisecondsType {
+  const totalSeconds = isCountDown
+    ? Math.ceil(millisecs / 1000)
+    : Math.floor(millisecs / 1000)
+  const days = Math.floor(totalSeconds / (60 * 60 * 24))
+  const hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60))
+  const minutes = Math.floor((totalSeconds % (60 * 60)) / 60)
+  const seconds = Math.floor(totalSeconds % 60)
+  const milliseconds = Math.floor(millisecs % 1000)
+
+  return {
+    totalMilliseconds: millisecs,
+    totalSeconds,
+    milliseconds,
+    seconds,
+    minutes,
+    hours,
+    days,
+  }
+}
+
+export function getMillisecondsFromExpiry(expiry: Date): number {
+  const now = Date.now()
+  const milliSecondsDistance = expiry?.getTime() - now
+  return milliSecondsDistance > 0 ? milliSecondsDistance : 0
+}