@lifi/widget 0.0.0-preview-6cc63bac

package/src/pages/TransactionPage/RouteTracker.tsx

@@ -0,0 +1,68 @@
+import type { Dispatch, JSX, 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'
+
+interface RouteTrackerProps {
+  observableRouteId: string
+  onChange: Dispatch<SetStateAction<string>>
+  onFetching: Dispatch<SetStateAction<boolean>>
+}
+
+export const RouteTracker = ({
+  observableRouteId,
+  onChange,
+  onFetching,
+}: RouteTrackerProps): JSX.Element => {
+  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: run only when currentRoute changes
+  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 || Date.now()}
+      timeToUpdate={refetchTime}
+      isLoading={isFetching}
+      onClick={handleRefetch}
+      sx={{ marginRight: -1 }}
+      size="medium"
+    />
+  )
+}

package/src/pages/TransactionPage/StartTransactionButton.tsx

@@ -0,0 +1,27 @@
+import { useMemo } from 'react'
+import { BaseTransactionButton } from '../../components/BaseTransactionButton/BaseTransactionButton.js'
+import { useMessageQueue } from '../../components/Messages/useMessageQueue.js'
+import type { StartTransactionButtonProps } from './types.js'
+
+export const StartTransactionButton: React.FC<StartTransactionButtonProps> = ({
+  onClick,
+  route,
+  text,
+  loading,
+}) => {
+  const { messages, isLoading } = useMessageQueue(route, true)
+
+  const hasNonGasMessages = useMemo(() => {
+    return messages.some((message) => message.id !== 'INSUFFICIENT_GAS')
+  }, [messages])
+
+  return (
+    <BaseTransactionButton
+      onClick={onClick}
+      text={text}
+      disabled={hasNonGasMessages}
+      loading={isLoading || loading}
+      route={route}
+    />
+  )
+}

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

@@ -0,0 +1,60 @@
+import { Box, styled, Typography } from '@mui/material'
+import type React from 'react'
+
+export const CenterContainer: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(() => ({
+    display: 'grid',
+    placeItems: 'center',
+    position: 'relative',
+  }))
+
+export const ContentContainer: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(({ theme }) => ({
+    padding: theme.spacing(3),
+  }))
+
+export const WarningTitle: React.FC<React.ComponentProps<typeof Typography>> =
+  styled(Typography)(({ theme }) => ({
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    fontSize: 18,
+    fontWeight: 700,
+  }))
+
+export const WarningMessage: React.FC<React.ComponentProps<typeof Typography>> =
+  styled(Typography)(({ theme }) => ({
+    marginBottom: theme.spacing(2.5),
+    fontSize: 14,
+    fontWeight: 500,
+  }))
+
+export const DetailRow: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  paddingTop: theme.spacing(0.75),
+  paddingBottom: theme.spacing(0.75),
+}))
+
+export const DetailLabel: React.FC<React.ComponentProps<typeof Typography>> =
+  styled(Typography)(({ theme }) => ({
+    fontSize: 14,
+    fontWeight: 500,
+    color: theme.vars.palette.text.secondary,
+  }))
+
+export const DetailValue: React.FC<React.ComponentProps<typeof Typography>> =
+  styled(Typography)({
+    fontSize: 14,
+    fontWeight: 700,
+  })
+
+export const ButtonRow: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(({ theme }) => ({
+  display: 'flex',
+  marginTop: theme.spacing(3),
+  gap: theme.spacing(1.5),
+}))

package/src/pages/TransactionPage/TokenValueBottomSheet.tsx

@@ -0,0 +1,141 @@
+import type { Route } from '@lifi/sdk'
+import { Button, Checkbox, FormControlLabel } from '@mui/material'
+import type { ForwardRefExoticComponent, RefAttributes, RefObject } from 'react'
+import { forwardRef, 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 { FeeBreakdownTooltip } from '../../components/FeeBreakdownTooltip.js'
+import { IconCircle } from '../../components/IconCircle/IconCircle.js'
+import { useSetContentHeight } from '../../hooks/useSetContentHeight.js'
+import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'
+import {
+  ButtonRow,
+  CenterContainer,
+  ContentContainer,
+  DetailLabel,
+  DetailRow,
+  DetailValue,
+  WarningMessage,
+  WarningTitle,
+} from './TokenValueBottomSheet.style.js'
+import { calculateValueLossPercentage } from './utils.js'
+
+interface TokenValueBottomSheetProps {
+  route: Route
+  onContinue(): void
+  onCancel?(): void
+}
+
+export const TokenValueBottomSheet: ForwardRefExoticComponent<
+  TokenValueBottomSheetProps & RefAttributes<BottomSheetBase>
+> = forwardRef<BottomSheetBase, TokenValueBottomSheetProps>(
+  ({ route, onContinue, onCancel }, ref) => {
+    const handleCancel = () => {
+      ;(ref as RefObject<BottomSheetBase>).current?.close()
+      onCancel?.()
+    }
+
+    return (
+      <BottomSheet ref={ref} onClose={onCancel}>
+        <TokenValueBottomSheetContent
+          route={route}
+          onContinue={onContinue}
+          onCancel={handleCancel}
+        />
+      </BottomSheet>
+    )
+  }
+)
+
+const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
+  route,
+  onCancel,
+  onContinue,
+}) => {
+  const [accepted, setAccepted] = useState(false)
+  const { t } = useTranslation()
+  const ref = useRef<HTMLElement>(null)
+  useSetContentHeight(ref)
+  const { gasCosts, feeCosts, gasCostUSD, feeCostUSD } =
+    getAccumulatedFeeCostsBreakdown(route)
+  const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)
+  const toAmountUSD = Number.parseFloat(route.toAmountUSD)
+
+  return (
+    <ContentContainer ref={ref}>
+      <CenterContainer>
+        <IconCircle status="warning" sx={{ mb: 2.5 }} />
+        <WarningTitle>{t('warning.title.highValueLoss')}</WarningTitle>
+      </CenterContainer>
+      <WarningMessage>{t('warning.message.highValueLoss')}</WarningMessage>
+      <DetailRow>
+        <DetailLabel>{t('main.sending')}</DetailLabel>
+        <DetailValue>
+          {t('format.currency', { value: route.fromAmountUSD })}
+        </DetailValue>
+      </DetailRow>
+      <DetailRow>
+        <DetailLabel>{t('main.fees.network')}</DetailLabel>
+        <FeeBreakdownTooltip gasCosts={gasCosts} gasless={!gasCostUSD}>
+          <DetailValue>
+            {!gasCostUSD
+              ? t('main.fees.free')
+              : t('format.currency', { value: gasCostUSD })}
+          </DetailValue>
+        </FeeBreakdownTooltip>
+      </DetailRow>
+      {feeCostUSD ? (
+        <DetailRow>
+          <DetailLabel>{t('main.fees.provider')}</DetailLabel>
+          <FeeBreakdownTooltip feeCosts={feeCosts}>
+            <DetailValue>
+              {t('format.currency', { value: feeCostUSD })}
+            </DetailValue>
+          </FeeBreakdownTooltip>
+        </DetailRow>
+      ) : null}
+      <DetailRow>
+        <DetailLabel>{t('main.receiving')}</DetailLabel>
+        <DetailValue>
+          {t('format.currency', { value: route.toAmountUSD })}
+        </DetailValue>
+      </DetailRow>
+      <DetailRow>
+        <DetailLabel>{t('main.valueLoss')}</DetailLabel>
+        <DetailValue>
+          {calculateValueLossPercentage(
+            fromAmountUSD,
+            toAmountUSD,
+            gasCostUSD,
+            feeCostUSD
+          )}
+          %
+        </DetailValue>
+      </DetailRow>
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={accepted}
+            onChange={(_, checked) => setAccepted(checked)}
+          />
+        }
+        label={t('warning.checkbox.highValueLoss')}
+        sx={{ mt: 1 }}
+      />
+      <ButtonRow>
+        <Button variant="text" onClick={onCancel} fullWidth>
+          {t('button.cancel')}
+        </Button>
+        <Button
+          variant="contained"
+          onClick={onContinue}
+          disabled={!accepted}
+          fullWidth
+        >
+          {t('button.continue')}
+        </Button>
+      </ButtonRow>
+    </ContentContainer>
+  )
+}

package/src/pages/TransactionPage/TransactionContent.tsx

@@ -0,0 +1,42 @@
+import type { RouteExtended } from '@lifi/sdk'
+import type React from 'react'
+import { RouteExecutionStatus } from '../../stores/routes/types.js'
+import { TransactionExecutionContent } from './TransactionExecutionContent.js'
+import { TransactionReview } from './TransactionReview.js'
+
+interface TransactionContentProps {
+  route: RouteExtended
+  status: RouteExecutionStatus
+  executeRoute: () => void
+  restartRoute: () => void
+  deleteRoute: () => void
+  routeRefreshing: boolean
+}
+
+export const TransactionContent: React.FC<TransactionContentProps> = ({
+  route,
+  status,
+  executeRoute,
+  restartRoute,
+  deleteRoute,
+  routeRefreshing,
+}) => {
+  if (status === RouteExecutionStatus.Idle) {
+    return (
+      <TransactionReview
+        route={route}
+        executeRoute={executeRoute}
+        routeRefreshing={routeRefreshing}
+      />
+    )
+  }
+
+  return (
+    <TransactionExecutionContent
+      route={route}
+      status={status}
+      restartRoute={restartRoute}
+      deleteRoute={deleteRoute}
+    />
+  )
+}

package/src/pages/TransactionPage/TransactionDoneButtons.tsx

@@ -0,0 +1,70 @@
+import type { RouteExtended } from '@lifi/sdk'
+import { Button } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
+import type React from 'react'
+import { useTranslation } from 'react-i18next'
+import { useClearAmountFields } from '../../stores/form/useClearAmountFields.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { RouteExecutionStatus } from '../../stores/routes/types.js'
+import { hasEnumFlag } from '../../utils/enum.js'
+import { formatTokenAmount } from '../../utils/format.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { getExecutionToToken } from '../../utils/token.js'
+
+interface TransactionDoneButtonsProps {
+  route: RouteExtended
+  status: RouteExecutionStatus
+}
+
+export const TransactionDoneButtons: React.FC<TransactionDoneButtonsProps> = ({
+  route,
+  status,
+}) => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { setFieldValue } = useFieldActions()
+  const clearAmountFields = useClearAmountFields()
+
+  if (!hasEnumFlag(status, RouteExecutionStatus.Done)) {
+    return null
+  }
+
+  const handlePartialDone = () => {
+    const toToken = getExecutionToToken(route)
+    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 {
+      clearAmountFields()
+    }
+  }
+
+  const handleClick = () => {
+    if (hasEnumFlag(status, RouteExecutionStatus.Partial)) {
+      handlePartialDone()
+    } else {
+      clearAmountFields()
+    }
+    navigate({ to: navigationRoutes.home, replace: true })
+  }
+
+  return (
+    <Button variant="contained" fullWidth onClick={handleClick}>
+      {t('button.done')}
+    </Button>
+  )
+}

package/src/pages/TransactionPage/TransactionExecutionContent.tsx

@@ -0,0 +1,93 @@
+import type { RouteExtended } from '@lifi/sdk'
+import { Box } from '@mui/material'
+import { domMax, LazyMotion, MotionConfig } from 'motion/react'
+import type React from 'react'
+import type { JSX } from 'react'
+import { Card } from '../../components/Card/Card.js'
+import { ExecutionStatusCard } from '../../components/ExecutionStatusCard/ExecutionStatusCard.js'
+import { StatusIcon } from '../../components/ExecutionStatusCard/StatusIcon.js'
+import { WarningMessages } from '../../components/Messages/WarningMessages.js'
+import { RouteTokens } from '../../components/RouteCard/RouteTokens.js'
+import { useExecutionRows } from '../../components/StepActions/executionRows.js'
+import { useRouteExecutionMessage } from '../../hooks/useRouteExecutionMessage.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { RouteExecutionStatus } from '../../stores/routes/types.js'
+import { hasEnumFlag } from '../../utils/enum.js'
+import { ExecutionDoneCard } from './ExecutionDoneCard.js'
+import { TransactionDoneButtons } from './TransactionDoneButtons.js'
+import { TransactionFailedButtons } from './TransactionFailedButtons.js'
+
+export interface TransactionExecutionContentProps {
+  route: RouteExtended
+  status: RouteExecutionStatus
+  restartRoute: () => void
+  deleteRoute: () => void
+}
+
+/**
+ * Execution-phase layout for the Transaction page.
+ * Renders the {@link ExecutionStatusCard}, warning messages,
+ * and terminal action buttons.
+ */
+export const TransactionExecutionContent: React.FC<
+  TransactionExecutionContentProps
+> = ({ route, status, restartRoute, deleteRoute }): JSX.Element => {
+  const { title, message } = useRouteExecutionMessage(route, status)
+  const {
+    mode,
+    contractCompactComponent,
+    contractSecondaryComponent,
+    defaultUI,
+  } = useWidgetConfig()
+
+  const isDone = hasEnumFlag(status, RouteExecutionStatus.Done)
+  const rows = useExecutionRows(route, isDone ? route.toAddress : undefined)
+
+  const showContract =
+    mode === 'custom' &&
+    isDone &&
+    !!(contractCompactComponent || contractSecondaryComponent)
+
+  const iconSlot = showContract ? (
+    contractCompactComponent || contractSecondaryComponent
+  ) : (
+    <StatusIcon route={route} status={status} />
+  )
+
+  const footerSlot = isDone ? (
+    <ExecutionDoneCard route={route} status={status} />
+  ) : (
+    <Card type="default" indented>
+      <RouteTokens
+        route={route}
+        defaultExpanded={defaultUI?.transactionDetailsExpanded}
+      />
+    </Card>
+  )
+
+  return (
+    <LazyMotion features={domMax} strict>
+      <MotionConfig reducedMotion="user">
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+          <ExecutionStatusCard
+            title={title}
+            description={message}
+            rows={rows}
+            iconSlot={iconSlot}
+            footerSlot={footerSlot}
+          />
+          <WarningMessages route={route} allowInteraction />
+          {status === RouteExecutionStatus.Failed ? (
+            <TransactionFailedButtons
+              route={route}
+              restartRoute={restartRoute}
+              deleteRoute={deleteRoute}
+            />
+          ) : isDone ? (
+            <TransactionDoneButtons route={route} status={status} />
+          ) : null}
+        </Box>
+      </MotionConfig>
+    </LazyMotion>
+  )
+}

package/src/pages/TransactionPage/TransactionFailedButtons.tsx

@@ -0,0 +1,105 @@
+import type { RouteExtended } from '@lifi/sdk'
+import { Box, Button } from '@mui/material'
+import { useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
+import { useAddressActivity } from '../../hooks/useAddressActivity.js'
+import { useNavigateBack } from '../../hooks/useNavigateBack.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'
+import { ConfirmToAddressSheet } from './ConfirmToAddressSheet.js'
+import { StartTransactionButton } from './StartTransactionButton.js'
+import { TokenValueBottomSheet } from './TokenValueBottomSheet.js'
+import { getTokenValueLossThreshold } from './utils.js'
+
+interface TransactionFailedButtonsProps {
+  route: RouteExtended
+  restartRoute: () => void
+  deleteRoute: () => void
+}
+
+export const TransactionFailedButtons: React.FC<
+  TransactionFailedButtonsProps
+> = ({ route, restartRoute, deleteRoute }) => {
+  const { t } = useTranslation()
+  const navigateBack = useNavigateBack()
+  const { mode, hiddenUI } = useWidgetConfig()
+
+  const tokenValueBottomSheetRef = useRef<BottomSheetBase>(null)
+  const confirmToAddressSheetRef = useRef<BottomSheetBase>(null)
+
+  const {
+    toAddress,
+    hasActivity,
+    isLoading: isLoadingAddressActivity,
+    isFetched: isActivityAddressFetched,
+  } = useAddressActivity(route.toChainId)
+
+  const handleRemoveRoute = () => {
+    navigateBack()
+    deleteRoute()
+  }
+
+  const handleRetryClick = () => {
+    if (
+      toAddress &&
+      !hasActivity &&
+      !isLoadingAddressActivity &&
+      isActivityAddressFetched &&
+      !hiddenUI?.lowAddressActivityConfirmation
+    ) {
+      confirmToAddressSheetRef.current?.open()
+      return
+    }
+
+    const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route)
+    const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)
+    const toAmountUSD = Number.parseFloat(route.toAmountUSD)
+    const tokenValueLossThresholdExceeded = getTokenValueLossThreshold(
+      fromAmountUSD,
+      toAmountUSD,
+      gasCostUSD,
+      feeCostUSD
+    )
+    if (tokenValueLossThresholdExceeded && mode !== 'custom') {
+      tokenValueBottomSheetRef.current?.open()
+    } else {
+      restartRoute()
+    }
+  }
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+      <Box sx={{ display: 'flex', gap: 1.5 }}>
+        <Box sx={{ flex: 1 }}>
+          <Button onClick={handleRemoveRoute} fullWidth>
+            {t('button.delete')}
+          </Button>
+        </Box>
+        <Box sx={{ flex: 1 }}>
+          <StartTransactionButton
+            text={t('button.tryAgain')}
+            onClick={handleRetryClick}
+            route={route}
+            loading={isLoadingAddressActivity}
+          />
+        </Box>
+      </Box>
+      {mode !== 'custom' ? (
+        <TokenValueBottomSheet
+          route={route}
+          ref={tokenValueBottomSheetRef}
+          onContinue={restartRoute}
+        />
+      ) : null}
+      {!hiddenUI?.lowAddressActivityConfirmation ? (
+        <ConfirmToAddressSheet
+          ref={confirmToAddressSheetRef}
+          onContinue={restartRoute}
+          toAddress={toAddress!}
+          toChainId={route.toChainId!}
+        />
+      ) : null}
+    </Box>
+  )
+}