@lifi/widget 3.7.0 → 3.8.0-beta.1

package/src/pages/TransactionDetailsPage/TransactionDetailsSkeleton.tsx

@@ -0,0 +1,70 @@
+import { Box, Skeleton } from '@mui/material'
+import { Card } from '../../components/Card/Card.js'
+import { PageContainer } from '../../components/PageContainer.js'
+import { TokenSkeleton } from '../../components/Token/Token.js'
+
+export const TransactionDetailsSkeleton = () => {
+  return (
+    <PageContainer>
+      <Box
+        sx={{
+          display: 'flex',
+          flex: 1,
+          justifyContent: 'space-between',
+        }}
+        pb={1}
+        pt={0.75}
+      >
+        <Skeleton width={96} height={20} variant="text" />
+        <Skeleton width={40} height={20} variant="text" />
+      </Box>
+      <Card sx={{ paddingX: 2, marginBottom: 3 }}>
+        <Box pt={2.5}>
+          <Skeleton width={64} height={12} variant="rounded" />
+        </Box>
+        <Box py={1}>
+          {/* Token skeleton */}
+          <Box py={1}>
+            <TokenSkeleton />
+          </Box>
+          {/* Bridge skeleton */}
+          <Box py={1}>
+            <TokenSkeleton disableDescription />
+          </Box>
+          {/* Steps skeleton */}
+          {Array.from({ length: 3 }).map((_, key) => (
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+              }}
+              py={1}
+              key={key}
+            >
+              <Skeleton
+                variant="rounded"
+                width={40}
+                height={40}
+                sx={{
+                  borderRadius: '100%',
+                }}
+              />
+              <Skeleton
+                sx={{
+                  ml: 2,
+                }}
+                width={96}
+                height={24}
+                variant="text"
+              />
+            </Box>
+          ))}
+          {/* Receiving Token skeleton */}
+          <Box py={1}>
+            <TokenSkeleton />
+          </Box>
+        </Box>
+      </Card>
+    </PageContainer>
+  )
+}

package/src/pages/TransactionDetailsPage/TransferIdCard.tsx

@@ -0,0 +1,67 @@
+import { ContentCopyRounded, OpenInNew } from '@mui/icons-material'
+import { Box, Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { Card } from '../../components/Card/Card.js'
+import { CardIconButton } from '../../components/Card/CardIconButton.js'
+import { CardTitle } from '../../components/Card/CardTitle.js'
+import { useExplorer } from '../../hooks/useExplorer.js'
+
+interface TransferIdCardProps {
+  transferId: string
+}
+
+const getTxHash = (transferId: string) =>
+  transferId.indexOf('_') !== -1
+    ? transferId.substring(0, transferId.indexOf('_'))
+    : transferId
+
+export const TransferIdCard = ({ transferId }: TransferIdCardProps) => {
+  const { t } = useTranslation()
+  const { getTransactionLink } = useExplorer()
+
+  const copyTransferId = async () => {
+    await navigator.clipboard.writeText(transferId)
+  }
+
+  const openTransferIdInExplorer = () => {
+    const txHash = getTxHash(transferId)
+    window.open(getTransactionLink({ txHash }), '_blank')
+  }
+
+  return (
+    <Card sx={{ marginTop: 2 }}>
+      <Box
+        sx={{
+          display: 'flex',
+          flex: 1,
+        }}
+      >
+        <CardTitle flex={1}>{t('main.transferId')}</CardTitle>
+        <Box
+          sx={{
+            gap: 1,
+            display: 'flex',
+            marginRight: 2,
+            marginTop: 1,
+          }}
+        >
+          <CardIconButton size="small" onClick={copyTransferId}>
+            <ContentCopyRounded fontSize="inherit" />
+          </CardIconButton>
+          <CardIconButton size="small" onClick={openTransferIdInExplorer}>
+            <OpenInNew fontSize="inherit" />
+          </CardIconButton>
+        </Box>
+      </Box>
+      <Typography
+        variant="body2"
+        pt={1}
+        pb={2}
+        px={2}
+        sx={{ wordBreak: 'break-all' }}
+      >
+        {transferId}
+      </Typography>
+    </Card>
+  )
+}

package/src/pages/TransactionHistoryPage/TransactionHistoryEmpty.tsx

@@ -0,0 +1,34 @@
+import { ReceiptLongRounded } from '@mui/icons-material'
+import { Container, Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+
+export const TransactionHistoryEmpty: React.FC = () => {
+  const { t } = useTranslation()
+  return (
+    <Container
+      sx={{
+        display: 'flex',
+        flex: 1,
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingY: 12,
+      }}
+    >
+      <Typography fontSize={48}>
+        <ReceiptLongRounded fontSize="inherit" />
+      </Typography>
+      <Typography fontSize={18} fontWeight={700}>
+        {t('info.title.emptyTransactionHistory')}
+      </Typography>
+      <Typography
+        fontSize={14}
+        color="text.secondary"
+        textAlign="center"
+        mt={2}
+      >
+        {t('info.message.emptyTransactionHistory')}
+      </Typography>
+    </Container>
+  )
+}

package/src/pages/TransactionHistoryPage/TransactionHistoryItem.tsx

@@ -0,0 +1,99 @@
+import type {
+  ExtendedTransactionInfo,
+  FullStatusData,
+  StatusResponse,
+  TokenAmount,
+} from '@lifi/sdk'
+import { Box, Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+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(navigationRoutes.transactionDetails, {
+      state: {
+        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={{
+          display: 'flex',
+          flex: 1,
+          justifyContent: 'space-between',
+        }}
+        pt={1.75}
+        px={2}
+      >
+        <Typography fontSize={12}>
+          {startedAt.toLocaleString(i18n.language, { dateStyle: 'long' })}
+        </Typography>
+        <Typography fontSize={12}>
+          {startedAt.toLocaleString(i18n.language, {
+            timeStyle: 'short',
+          })}
+        </Typography>
+      </Box>
+      <Box px={2} py={2}>
+        <Token token={fromToken} />
+        <Box pl={2.375} py={0.5}>
+          <TokenDivider />
+        </Box>
+        <Token token={toToken} />
+      </Box>
+    </Card>
+  )
+}

package/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx

@@ -0,0 +1,70 @@
+import type { FullStatusData } from '@lifi/sdk'
+import { List } from '@mui/material'
+import { useVirtualizer } from '@tanstack/react-virtual'
+import { useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { PageContainer } from '../../components/PageContainer.js'
+import { useHeader } from '../../hooks/useHeader.js'
+import { useTransactionHistory } from '../../hooks/useTransactionHistory.js'
+import { TransactionHistoryEmpty } from './TransactionHistoryEmpty.js'
+import { TransactionHistoryItem } from './TransactionHistoryItem.js'
+import { TransactionHistoryItemSkeleton } from './TransactionHistorySkeleton.js'
+import { minTransactionListHeight } from './constants.js'
+
+export const TransactionHistoryPage: React.FC = () => {
+  // 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 { getVirtualItems, getTotalSize } = useVirtualizer({
+    count: transactions.length,
+    overscan: 10,
+    paddingEnd: 12,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 186,
+    getItemKey: (index) =>
+      `${(transactions[index] as FullStatusData).transactionId}-${index}`,
+  })
+
+  if (!transactions.length && !isLoading) {
+    return <TransactionHistoryEmpty />
+  }
+
+  return (
+    <PageContainer
+      ref={parentRef}
+      style={{ height: minTransactionListHeight, overflow: 'auto' }}
+    >
+      {isLoading ? (
+        <List disablePadding>
+          {Array.from({ length: 3 }).map((_, index) => (
+            <TransactionHistoryItemSkeleton key={index} />
+          ))}
+        </List>
+      ) : (
+        <List
+          style={{
+            height: getTotalSize(),
+            width: '100%',
+            position: 'relative',
+          }}
+          disablePadding
+        >
+          {getVirtualItems().map((item) => {
+            const transaction = transactions[item.index]
+            return (
+              <TransactionHistoryItem
+                key={item.key}
+                start={item.start}
+                transaction={transaction}
+              />
+            )
+          })}
+        </List>
+      )}
+    </PageContainer>
+  )
+}

package/src/pages/TransactionHistoryPage/TransactionHistorySkeleton.tsx

@@ -0,0 +1,48 @@
+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={{
+          display: 'flex',
+          flex: 1,
+          justifyContent: 'space-between',
+        }}
+        pt={2}
+        px={2}
+      >
+        <Skeleton
+          variant="rectangular"
+          width={96}
+          height={16}
+          sx={(theme) => ({
+            borderRadius: `${theme.shape.borderRadius}px`,
+          })}
+        />
+        <Skeleton
+          variant="rectangular"
+          width={64}
+          height={16}
+          sx={(theme) => ({
+            borderRadius: `${theme.shape.borderRadius}px`,
+          })}
+        />
+      </Box>
+      <Box px={2} py={2}>
+        <TokenSkeleton />
+        <Box pl={2.375} py={0.5}>
+          <TokenDivider />
+        </Box>
+        <TokenSkeleton />
+      </Box>
+    </Card>
+  )
+}

package/src/pages/TransactionHistoryPage/constants.ts

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

package/src/pages/TransactionPage/ExchangeRateBottomSheet.tsx

@@ -0,0 +1,158 @@
+import type { ExchangeRateUpdateParams } from '@lifi/sdk'
+import { WarningRounded } from '@mui/icons-material'
+import { Box, Button, Typography } from '@mui/material'
+import type { MutableRefObject } from 'react'
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
+import { useSetContentHeight } from '../../hooks/useSetContentHeight.js'
+import { formatTokenAmount } from '../../utils/format.js'
+import { CenterContainer, IconCircle } from './StatusBottomSheet.style.js'
+
+export interface ExchangeRateBottomSheetBase {
+  isOpen(): void
+  open(resolver: (value: boolean) => void, data: ExchangeRateUpdateParams): void
+  close(value?: boolean, bottomSheetClose?: boolean): void
+}
+
+interface ExchangeRateBottomSheetProps {
+  data?: ExchangeRateUpdateParams
+  onContinue?(): void
+  onCancel?(): void
+}
+
+export const ExchangeRateBottomSheet = forwardRef<
+  ExchangeRateBottomSheetBase,
+  ExchangeRateBottomSheetProps
+>(({ onContinue, onCancel }, ref) => {
+  const [data, setData] = useState<ExchangeRateUpdateParams>()
+  const bottomSheetRef = useRef<BottomSheetBase>(null)
+  const resolverRef = useRef<(value: boolean) => void>()
+
+  const handleContinue = () => {
+    ;(ref as MutableRefObject<ExchangeRateBottomSheetBase>).current?.close(true)
+    onContinue?.()
+  }
+
+  const handleCancel = useCallback(() => {
+    ;(ref as MutableRefObject<ExchangeRateBottomSheetBase>).current?.close(
+      false
+    )
+    onCancel?.()
+  }, [onCancel, ref])
+
+  const handleClose = useCallback(() => {
+    ;(ref as MutableRefObject<ExchangeRateBottomSheetBase>).current?.close(
+      false,
+      false
+    )
+    onCancel?.()
+  }, [onCancel, ref])
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      isOpen: () => bottomSheetRef.current?.isOpen(),
+      open: (resolver, data) => {
+        setData(data)
+        resolverRef.current = resolver
+        bottomSheetRef.current?.open()
+      },
+      close: (value = false, bottomSheetClose = true) => {
+        resolverRef.current?.(value)
+        if (bottomSheetClose) {
+          bottomSheetRef.current?.close()
+        }
+      },
+    }),
+    []
+  )
+
+  return (
+    <BottomSheet ref={bottomSheetRef} onClose={handleClose}>
+      <ExchangeRateBottomSheetContent
+        data={data}
+        onContinue={handleContinue}
+        onCancel={handleCancel}
+      />
+    </BottomSheet>
+  )
+})
+
+const ExchangeRateBottomSheetContent: React.FC<
+  ExchangeRateBottomSheetProps
+> = ({ data, onCancel, onContinue }) => {
+  const { t } = useTranslation()
+  const ref = useRef<HTMLElement>()
+  useSetContentHeight(ref)
+
+  if (!data) {
+    return
+  }
+
+  const oldAmount = BigInt(data.oldToAmount || 1)
+  const rateChange = (
+    (Number((BigInt(data.newToAmount || 0) * 1_000_000n) / oldAmount) /
+      1_000_000) *
+      100 -
+    100
+  ).toFixed(2)
+
+  return (
+    <Box p={3} ref={ref}>
+      <CenterContainer>
+        <IconCircle status="warning" mb={1}>
+          <WarningRounded color="warning" />
+        </IconCircle>
+        <Typography py={1} fontSize={18} fontWeight={700}>
+          {t('warning.title.rateChanged')}
+        </Typography>
+      </CenterContainer>
+      <Typography py={1}>{t('warning.message.rateChanged')}</Typography>
+      <Box display="flex" justifyContent="space-between" mt={1}>
+        <Typography>{t('main.quotedAmount')}</Typography>
+        <Typography fontWeight={600}>
+          {t('format.number', {
+            value: formatTokenAmount(
+              BigInt(data.oldToAmount),
+              data.toToken.decimals
+            ),
+          })}{' '}
+          {data?.toToken.symbol}
+        </Typography>
+      </Box>
+      <Box display="flex" justifyContent="space-between" mt={0.25}>
+        <Typography>{t('main.currentAmount')}</Typography>
+        <Typography fontWeight={600}>
+          {t('format.number', {
+            value: formatTokenAmount(
+              BigInt(data?.newToAmount),
+              data?.toToken.decimals
+            ),
+          })}{' '}
+          {data?.toToken.symbol}
+        </Typography>
+      </Box>
+      <Box display="flex" justifyContent="space-between" mt={0.25}>
+        <Typography>{t('main.rateChange')}</Typography>
+        <Typography fontWeight={600}>{rateChange}%</Typography>
+      </Box>
+      <Box display="flex" mt={3}>
+        <Button variant="text" onClick={onCancel} fullWidth>
+          {t('button.cancel')}
+        </Button>
+        <Box display="flex" p={1} />
+        <Button variant="contained" onClick={onContinue} fullWidth>
+          {t('button.continue')}
+        </Button>
+      </Box>
+    </Box>
+  )
+}

package/src/pages/TransactionPage/RouteTracker.tsx

@@ -0,0 +1,68 @@
+import type { Dispatch, SetStateAction } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate.js'
+import { useRoutes } from '../../hooks/useRoutes.js'
+import { useRouteExecutionStoreContext } from '../../stores/routes/RouteExecutionStore.js'
+import { useSetExecutableRoute } from '../../stores/routes/useSetExecutableRoute.js'
+
+export interface RouteTrackerProps {
+  observableRouteId: string
+  onChange: Dispatch<SetStateAction<string>>
+  onFetching: Dispatch<SetStateAction<boolean>>
+}
+
+export const RouteTracker = ({
+  observableRouteId,
+  onChange,
+  onFetching,
+}: RouteTrackerProps) => {
+  const routeExecutionStore = useRouteExecutionStoreContext()
+  const setExecutableRoute = useSetExecutableRoute()
+  const [observableRoute] = useState(
+    () => routeExecutionStore.getState().routes[observableRouteId]?.route
+  )
+  const observableRouteIdRef = useRef(observableRoute?.id)
+  const { routes, isFetching, dataUpdatedAt, refetchTime, refetch } = useRoutes(
+    { observableRoute }
+  )
+  const currentRoute = routes?.[0]
+
+  /**
+   * The reviewable route is the route that the user currently sees on the review page.
+   * The observable route is the route for which we track bridges and exchanges.
+   * This allows us to query the route using the same tool each time we refresh.
+   * The observable and reviewable routes can be the same when we first enter the review page.
+   */
+  // biome-ignore lint/correctness/useExhaustiveDependencies:
+  useEffect(() => {
+    if (
+      observableRouteIdRef.current &&
+      currentRoute &&
+      observableRouteIdRef.current !== currentRoute.id
+    ) {
+      const reviewableRouteId = observableRouteIdRef.current
+      observableRouteIdRef.current = currentRoute.id
+      setExecutableRoute(currentRoute, [observableRouteId, reviewableRouteId])
+      onChange(currentRoute.id)
+    }
+  }, [currentRoute?.id, observableRouteId])
+
+  useEffect(() => {
+    onFetching(isFetching)
+  }, [isFetching, onFetching])
+
+  const handleRefetch = () => {
+    refetch()
+  }
+
+  return (
+    <ProgressToNextUpdate
+      updatedAt={dataUpdatedAt || new Date().getTime()}
+      timeToUpdate={refetchTime}
+      isLoading={isFetching}
+      onClick={handleRefetch}
+      sx={{ marginRight: -1 }}
+      size="medium"
+    />
+  )
+}

package/src/pages/TransactionPage/StartTransactionButton.tsx

@@ -0,0 +1,29 @@
+import { BaseTransactionButton } from '../../components/BaseTransactionButton/BaseTransactionButton.js'
+import { useFromTokenSufficiency } from '../../hooks/useFromTokenSufficiency.js'
+import { useGasSufficiency } from '../../hooks/useGasSufficiency.js'
+import type { StartTransactionButtonProps } from './types.js'
+
+export const StartTransactionButton: React.FC<StartTransactionButtonProps> = ({
+  onClick,
+  route,
+  text,
+  loading,
+}) => {
+  const { insufficientGas, isLoading: isGasSufficiencyLoading } =
+    useGasSufficiency(route)
+  const { insufficientFromToken, isLoading: isFromTokenSufficiencyLoading } =
+    useFromTokenSufficiency(route)
+
+  const shouldDisableButton = insufficientFromToken || !!insufficientGas?.length
+
+  return (
+    <BaseTransactionButton
+      onClick={onClick}
+      text={text}
+      disabled={shouldDisableButton}
+      loading={
+        isFromTokenSufficiencyLoading || isGasSufficiencyLoading || loading
+      }
+    />
+  )
+}