@lifi/widget 4.0.0-beta.8 → 4.0.0

package/src/pages/TransactionHistoryPage/TransactionHistoryItem.tsx

@@ -1,118 +0,0 @@
-import type {
-  ExtendedTransactionInfo,
-  FullStatusData,
-  StatusResponse,
-  TokenAmount,
-} from '@lifi/sdk'
-import { Box, Typography } from '@mui/material'
-import { useNavigate } from '@tanstack/react-router'
-import { useTranslation } from 'react-i18next'
-import { Card } from '../../components/Card/Card.js'
-import { Token } from '../../components/Token/Token.js'
-import { TokenDivider } from '../../components/Token/Token.style.js'
-import { navigationRoutes } from '../../utils/navigationRoutes.js'
-
-export const TransactionHistoryItem: React.FC<{
-  transaction: StatusResponse
-  start: number
-}> = ({ transaction, start }) => {
-  const { i18n } = useTranslation()
-  const navigate = useNavigate()
-
-  const sending = transaction.sending as ExtendedTransactionInfo
-  const receiving = (transaction as FullStatusData)
-    .receiving as ExtendedTransactionInfo
-
-  const handleClick = () => {
-    navigate({
-      to: navigationRoutes.transactionDetails,
-      search: {
-        transactionHash: (transaction as FullStatusData).sending.txHash,
-      },
-    })
-  }
-
-  const startedAt = new Date((sending.timestamp ?? 0) * 1000)
-
-  if (!sending.token?.chainId || !receiving.token?.chainId) {
-    return null
-  }
-
-  const fromToken: TokenAmount = {
-    ...sending.token,
-    amount: BigInt(sending.amount ?? '0'),
-    priceUSD: sending.token.priceUSD ?? '0',
-    symbol: sending.token?.symbol ?? '',
-    decimals: sending.token?.decimals ?? 0,
-    name: sending.token?.name ?? '',
-    chainId: sending.token?.chainId,
-  }
-
-  const toToken: TokenAmount = {
-    ...receiving.token,
-    amount: BigInt(receiving.amount ?? '0'),
-    priceUSD: receiving.token.priceUSD ?? '0',
-    symbol: receiving.token?.symbol ?? '',
-    decimals: receiving.token?.decimals ?? 0,
-    name: receiving.token?.name ?? '',
-    chainId: receiving.token?.chainId,
-  }
-
-  return (
-    <Card
-      onClick={handleClick}
-      style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        // height: `${size}px`,
-        transform: `translateY(${start}px)`,
-      }}
-    >
-      <Box
-        sx={{
-          pt: 1.75,
-          px: 2,
-          display: 'flex',
-          flex: 1,
-          justifyContent: 'space-between',
-        }}
-      >
-        <Typography
-          sx={{
-            fontSize: 12,
-          }}
-        >
-          {startedAt.toLocaleString(i18n.language, { dateStyle: 'long' })}
-        </Typography>
-        <Typography
-          sx={{
-            fontSize: 12,
-          }}
-        >
-          {startedAt.toLocaleString(i18n.language, {
-            timeStyle: 'short',
-          })}
-        </Typography>
-      </Box>
-      <Box
-        sx={{
-          px: 2,
-          py: 2,
-        }}
-      >
-        <Token token={fromToken} />
-        <Box
-          sx={{
-            pl: 2.375,
-            py: 0.5,
-          }}
-        >
-          <TokenDivider />
-        </Box>
-        <Token token={toToken} />
-      </Box>
-    </Card>
-  )
-}

package/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx

@@ -1,92 +0,0 @@
-import type { FullStatusData } from '@lifi/sdk'
-import { Box, List } from '@mui/material'
-import { useVirtualizer } from '@tanstack/react-virtual'
-import { useCallback, useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-import { PageContainer } from '../../components/PageContainer.js'
-import { useHeader } from '../../hooks/useHeader.js'
-import { useListHeight } from '../../hooks/useListHeight.js'
-import { useTransactionHistory } from '../../hooks/useTransactionHistory.js'
-import { minTransactionListHeight } from './constants.js'
-import { TransactionHistoryEmpty } from './TransactionHistoryEmpty.js'
-import { TransactionHistoryItem } from './TransactionHistoryItem.js'
-import { TransactionHistoryItemSkeleton } from './TransactionHistorySkeleton.js'
-
-export const TransactionHistoryPage = () => {
-  // Parent ref and useVirtualizer should be in one file to avoid blank page (0 virtual items) issue
-  const parentRef = useRef<HTMLDivElement | null>(null)
-  const { data: transactions, isLoading } = useTransactionHistory()
-
-  const { t } = useTranslation()
-  useHeader(t('header.transactionHistory'))
-
-  const { listHeight } = useListHeight({
-    listParentRef: parentRef,
-  })
-
-  const getItemKey = useCallback(
-    (index: number) => {
-      return `${(transactions[index] as FullStatusData).transactionId}-${index}`
-    },
-    [transactions]
-  )
-
-  const { getVirtualItems, getTotalSize } = useVirtualizer({
-    count: transactions.length,
-    overscan: 3,
-    paddingEnd: 12,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => 186,
-    getItemKey,
-  })
-
-  if (!transactions.length && !isLoading) {
-    return <TransactionHistoryEmpty />
-  }
-
-  return (
-    <PageContainer
-      disableGutters
-      style={{ minHeight: minTransactionListHeight }}
-    >
-      <Box
-        ref={parentRef}
-        style={{
-          height: listHeight,
-        }}
-        sx={{
-          overflow: 'auto',
-          paddingX: 3,
-        }}
-      >
-        {isLoading ? (
-          <List disablePadding>
-            {Array.from({ length: 3 }).map((_, index) => (
-              <TransactionHistoryItemSkeleton key={index} />
-            ))}
-          </List>
-        ) : (
-          <List
-            className="long-list"
-            style={{
-              height: getTotalSize(),
-              position: 'relative',
-            }}
-            disablePadding
-          >
-            {getVirtualItems().map((item) => {
-              const transaction = transactions[item.index]
-              return (
-                <TransactionHistoryItem
-                  key={item.key}
-                  start={item.start}
-                  transaction={transaction}
-                />
-              )
-            })}
-          </List>
-        )}
-      </Box>
-    </PageContainer>
-  )
-}

package/src/pages/TransactionHistoryPage/TransactionHistorySkeleton.tsx

@@ -1,58 +0,0 @@
-import { Box, Skeleton } from '@mui/material'
-import { Card } from '../../components/Card/Card.js'
-import { TokenSkeleton } from '../../components/Token/Token.js'
-import { TokenDivider } from '../../components/Token/Token.style.js'
-
-export const TransactionHistoryItemSkeleton = () => {
-  return (
-    <Card
-      style={{
-        marginBottom: '16px',
-      }}
-    >
-      <Box
-        sx={{
-          pt: 2,
-          px: 2,
-          display: 'flex',
-          flex: 1,
-          justifyContent: 'space-between',
-        }}
-      >
-        <Skeleton
-          variant="rectangular"
-          width={96}
-          height={16}
-          sx={(theme) => ({
-            borderRadius: theme.vars.shape.borderRadius,
-          })}
-        />
-        <Skeleton
-          variant="rectangular"
-          width={64}
-          height={16}
-          sx={(theme) => ({
-            borderRadius: theme.vars.shape.borderRadius,
-          })}
-        />
-      </Box>
-      <Box
-        sx={{
-          px: 2,
-          py: 2,
-        }}
-      >
-        <TokenSkeleton />
-        <Box
-          sx={{
-            pl: 2.375,
-            py: 0.5,
-          }}
-        >
-          <TokenDivider />
-        </Box>
-        <TokenSkeleton />
-      </Box>
-    </Card>
-  )
-}

package/src/pages/TransactionHistoryPage/constants.ts

@@ -1 +0,0 @@
-export const minTransactionListHeight = 544

package/src/pages/TransactionPage/StatusBottomSheet.style.tsx

@@ -1,74 +0,0 @@
-import type { Theme } from '@mui/material'
-import { Box, styled } from '@mui/material'
-import { RouteExecutionStatus } from '../../stores/routes/types.js'
-
-type StatusColor = RouteExecutionStatus | 'warning'
-
-const getStatusColor = (status: StatusColor, theme: Theme) => {
-  switch (status) {
-    case RouteExecutionStatus.Done:
-      return {
-        color: theme.vars.palette.success.mainChannel,
-        alpha: 0.12,
-        lightDarken: 0,
-        darkDarken: 0,
-      }
-    case RouteExecutionStatus.Failed:
-      return {
-        color: theme.vars.palette.error.mainChannel,
-        alpha: 0.12,
-        lightDarken: 0,
-        darkDarken: 0,
-      }
-    case RouteExecutionStatus.Done | RouteExecutionStatus.Partial:
-    case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded:
-    case 'warning':
-      return {
-        color: theme.vars.palette.warning.mainChannel,
-        alpha: 0.48,
-        lightDarken: 0.32,
-        darkDarken: 0,
-      }
-    default:
-      return {
-        color: theme.vars.palette.primary.mainChannel,
-        alpha: 0.12,
-        lightDarken: 0,
-        darkDarken: 0,
-      }
-  }
-}
-
-export const CenterContainer = styled(Box)(() => ({
-  display: 'grid',
-  placeItems: 'center',
-  position: 'relative',
-}))
-
-export const IconCircle = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'status',
-})<{ status: StatusColor }>(({ theme, status }) => {
-  const statusConfig = getStatusColor(status, theme)
-
-  return {
-    backgroundColor: `rgba(${statusConfig.color} / ${statusConfig.alpha})`,
-    borderRadius: '50%',
-    width: 72,
-    height: 72,
-    display: 'grid',
-    position: 'relative',
-    placeItems: 'center',
-    '& > svg': {
-      color: `color-mix(in srgb, rgb(${statusConfig.color}) ${(1 - statusConfig.lightDarken) * 100}%, black)`,
-      width: 36,
-      height: 36,
-    },
-    ...theme.applyStyles('dark', {
-      '& > svg': {
-        color: `color-mix(in srgb, rgb(${statusConfig.color}) ${(1 - statusConfig.darkDarken) * 100}%, black)`,
-        width: 36,
-        height: 36,
-      },
-    }),
-  }
-})

package/src/pages/TransactionPage/StatusBottomSheet.tsx

@@ -1,318 +0,0 @@
-import type { ExecutionActionType } from '@lifi/sdk'
-import Done from '@mui/icons-material/Done'
-import ErrorRounded from '@mui/icons-material/ErrorRounded'
-import InfoRounded from '@mui/icons-material/InfoRounded'
-import WarningRounded from '@mui/icons-material/WarningRounded'
-import { Box, Button, Typography } from '@mui/material'
-import { useNavigate } from '@tanstack/react-router'
-import { useCallback, useEffect, useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
-import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
-import { Card } from '../../components/Card/Card.js'
-import { CardTitle } from '../../components/Card/CardTitle.js'
-import { Token } from '../../components/Token/Token.js'
-import { useAvailableChains } from '../../hooks/useAvailableChains.js'
-import { useSetContentHeight } from '../../hooks/useSetContentHeight.js'
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
-import { useFieldActions } from '../../stores/form/useFieldActions.js'
-import {
-  type RouteExecution,
-  RouteExecutionStatus,
-} from '../../stores/routes/types.js'
-import { getSourceTxHash } from '../../stores/routes/utils.js'
-import { hasEnumFlag } from '../../utils/enum.js'
-import { formatTokenAmount } from '../../utils/format.js'
-import { getErrorMessage } from '../../utils/getErrorMessage.js'
-import { navigationRoutes } from '../../utils/navigationRoutes.js'
-import { CenterContainer, IconCircle } from './StatusBottomSheet.style.js'
-
-interface StatusBottomSheetContentProps extends RouteExecution {
-  onClose(): void
-}
-
-export const StatusBottomSheet: React.FC<RouteExecution> = ({
-  status,
-  route,
-}) => {
-  const ref = useRef<BottomSheetBase>(null)
-
-  const onClose = useCallback(() => {
-    ref.current?.close()
-  }, [])
-
-  useEffect(() => {
-    const hasSuccessFlag = hasEnumFlag(status, RouteExecutionStatus.Done)
-    const hasFailedFlag = hasEnumFlag(status, RouteExecutionStatus.Failed)
-    if ((hasSuccessFlag || hasFailedFlag) && !ref.current?.isOpen()) {
-      ref.current?.open()
-    }
-  }, [status])
-
-  return (
-    <BottomSheet ref={ref}>
-      <StatusBottomSheetContent
-        status={status}
-        route={route}
-        onClose={onClose}
-      />
-    </BottomSheet>
-  )
-}
-
-const StatusBottomSheetContent: React.FC<StatusBottomSheetContentProps> = ({
-  status,
-  route,
-  onClose,
-}) => {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const { setFieldValue } = useFieldActions()
-  const {
-    subvariant,
-    subvariantOptions,
-    contractSecondaryComponent,
-    contractCompactComponent,
-    feeConfig,
-  } = useWidgetConfig()
-  const { getChainById } = useAvailableChains()
-
-  const ref = useRef<HTMLElement>(null)
-  useSetContentHeight(ref)
-
-  const toToken = {
-    ...(route.steps.at(-1)?.execution?.toToken ?? route.toToken),
-    amount: BigInt(
-      route.steps.at(-1)?.execution?.toAmount ??
-        route.steps.at(-1)?.estimate.toAmount ??
-        route.toAmount
-    ),
-  }
-
-  const cleanFields = () => {
-    setFieldValue('fromAmount', '')
-    setFieldValue('toAmount', '')
-  }
-
-  const handleDone = () => {
-    cleanFields()
-    navigate({ to: navigationRoutes.home, replace: true })
-  }
-
-  const handlePartialDone = () => {
-    if (
-      toToken.chainId !== route.toToken.chainId &&
-      toToken.address !== route.toToken.address
-    ) {
-      setFieldValue(
-        'fromAmount',
-        formatTokenAmount(toToken.amount, toToken.decimals),
-        { isTouched: true }
-      )
-      setFieldValue('fromChain', toToken.chainId, { isTouched: true })
-      setFieldValue('fromToken', toToken.address, { isTouched: true })
-      setFieldValue('toChain', route.toToken.chainId, {
-        isTouched: true,
-      })
-      setFieldValue('toToken', route.toToken.address, {
-        isTouched: true,
-      })
-    } else {
-      cleanFields()
-    }
-    navigate({ to: navigationRoutes.home, replace: true })
-  }
-
-  const handleClose = () => {
-    cleanFields()
-    onClose()
-  }
-
-  const handleSeeDetails = () => {
-    handleClose()
-
-    const transactionHash = getSourceTxHash(route)
-
-    navigate({
-      to: navigationRoutes.transactionDetails,
-      search: {
-        routeId: route.id,
-        transactionHash,
-      },
-      replace: true,
-    })
-  }
-
-  const transactionType =
-    route.fromChainId === route.toChainId ? 'swap' : 'bridge'
-
-  let title: string | undefined
-  let primaryMessage: string | undefined
-  let failedMessage: string | undefined
-  let handlePrimaryButton = handleDone
-  switch (status) {
-    case RouteExecutionStatus.Done: {
-      title =
-        subvariant === 'custom'
-          ? t(
-              `success.title.${subvariantOptions?.custom ?? 'checkout'}Successful`
-            )
-          : t(`success.title.${transactionType}Successful`)
-      handlePrimaryButton = handleDone
-      break
-    }
-    case RouteExecutionStatus.Done | RouteExecutionStatus.Partial: {
-      title = t(`success.title.${transactionType}PartiallySuccessful`)
-      primaryMessage = t('success.message.exchangePartiallySuccessful', {
-        tool: route.steps.at(-1)?.toolDetails.name,
-        tokenSymbol: route.steps.at(-1)?.action.toToken.symbol,
-      })
-      handlePrimaryButton = handlePartialDone
-      break
-    }
-    case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded: {
-      title = t('success.title.refundIssued')
-      primaryMessage = t('success.message.exchangePartiallySuccessful', {
-        tool: route.steps.at(-1)?.toolDetails.name,
-        tokenSymbol: route.steps.at(-1)?.action.toToken.symbol,
-      })
-      break
-    }
-    case RouteExecutionStatus.Failed: {
-      const step = route.steps.find(
-        (step) => step.execution?.status === 'FAILED'
-      )
-      if (!step) {
-        break
-      }
-      const action = step.execution?.actions?.find(
-        (action) => action.status === 'FAILED'
-      ) || {
-        status: 'FAILED',
-        type: 'EXECUTION' as ExecutionActionType,
-        error: step.execution?.error,
-      } // synthetic action to represent a failed execution with no actions
-      const actionMessage = getErrorMessage(t, getChainById, step, action)
-      title = actionMessage.title
-      failedMessage = actionMessage.message
-      handlePrimaryButton = handleClose
-      break
-    }
-    default:
-      break
-  }
-
-  const showContractComponent =
-    subvariant === 'custom' &&
-    hasEnumFlag(status, RouteExecutionStatus.Done) &&
-    (contractCompactComponent || contractSecondaryComponent)
-
-  const VcComponent =
-    status === RouteExecutionStatus.Done ? feeConfig?._vcComponent : undefined
-
-  return (
-    <Box
-      ref={ref}
-      sx={{
-        p: 3,
-      }}
-    >
-      {!showContractComponent ? (
-        <CenterContainer>
-          <IconCircle status={status} mb={1}>
-            {status === RouteExecutionStatus.Idle ? (
-              <InfoRounded color="primary" />
-            ) : null}
-            {status === RouteExecutionStatus.Done ? (
-              <Done color="success" />
-            ) : null}
-            {hasEnumFlag(status, RouteExecutionStatus.Partial) ||
-            hasEnumFlag(status, RouteExecutionStatus.Refunded) ? (
-              <WarningRounded color="warning" />
-            ) : null}
-            {hasEnumFlag(status, RouteExecutionStatus.Failed) ? (
-              <ErrorRounded color="error" />
-            ) : null}
-          </IconCircle>
-        </CenterContainer>
-      ) : null}
-      <CenterContainer>
-        <Typography
-          sx={{
-            py: 1,
-            fontSize: 18,
-            fontWeight: 700,
-          }}
-        >
-          {title}
-        </Typography>
-      </CenterContainer>
-      {showContractComponent ? (
-        contractCompactComponent || contractSecondaryComponent
-      ) : hasEnumFlag(status, RouteExecutionStatus.Failed) && failedMessage ? (
-        <Typography
-          sx={{
-            py: 1,
-          }}
-        >
-          {failedMessage}
-        </Typography>
-      ) : hasEnumFlag(status, RouteExecutionStatus.Done) ? (
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 2,
-            marginTop: 2,
-            marginBottom: VcComponent ? 2 : 3,
-          }}
-        >
-          <Card
-            sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 2,
-              padding: 2,
-            }}
-          >
-            <CardTitle sx={{ padding: 0 }}>
-              {hasEnumFlag(status, RouteExecutionStatus.Refunded)
-                ? t('header.refunded')
-                : t('header.received')}
-            </CardTitle>
-            <Token token={toToken} disableDescription={false} />
-            {primaryMessage && (
-              <Typography
-                sx={{
-                  color: 'text.secondary',
-                  fontSize: '12px',
-                  lineHeight: '16px',
-                  fontWeight: 500,
-                }}
-              >
-                {primaryMessage}
-              </Typography>
-            )}
-          </Card>
-          {VcComponent ? <VcComponent route={route} /> : null}
-        </Box>
-      ) : null}
-      <Box sx={{ display: 'flex', marginTop: 2, gap: 1.5 }}>
-        {hasEnumFlag(status, RouteExecutionStatus.Done) ? (
-          <Button variant="text" onClick={handleSeeDetails} fullWidth>
-            {t('button.seeDetails')}
-          </Button>
-        ) : null}
-        <Button variant="contained" fullWidth onClick={handlePrimaryButton}>
-          {status === RouteExecutionStatus.Idle ? t('button.ok') : null}
-          {hasEnumFlag(status, RouteExecutionStatus.Done)
-            ? t('button.done')
-            : null}
-          {status === RouteExecutionStatus.Failed
-            ? t('button.seeDetails')
-            : null}
-        </Button>
-      </Box>
-    </Box>
-  )
-}

package/src/stores/routes/useExecutingRoutesIds.ts

@@ -1,24 +0,0 @@
-import { useAccount } from '@lifi/wallet-management'
-import { useRouteExecutionStore } from './RouteExecutionStore.js'
-import type { RouteExecution } from './types.js'
-import { RouteExecutionStatus } from './types.js'
-
-export const useExecutingRoutesIds = () => {
-  const { accounts } = useAccount()
-  const accountAddresses = accounts.map((account) => account.address)
-  return useRouteExecutionStore((state) =>
-    (Object.values(state.routes) as RouteExecution[])
-      .filter(
-        (item) =>
-          accountAddresses.includes(item.route.fromAddress) &&
-          (item.status === RouteExecutionStatus.Pending ||
-            item.status === RouteExecutionStatus.Failed)
-      )
-      .sort(
-        (a, b) =>
-          (b?.route.steps[0].execution?.startedAt ?? 0) -
-          (a?.route.steps[0].execution?.startedAt ?? 0)
-      )
-      .map(({ route }) => route.id)
-  )
-}