@lifi/widget 4.0.0-beta.8 → 4.0.0

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>
+  )
+}

package/src/pages/TransactionPage/TransactionPage.tsx

@@ -1,61 +1,30 @@
 import type { ExchangeRateUpdateParams } from '@lifi/sdk'
-import Delete from '@mui/icons-material/Delete'
-import { Box, Button, Tooltip } from '@mui/material'
-import { useLocation, useNavigate } from '@tanstack/react-router'
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useLocation } from '@tanstack/react-router'
+import { type JSX, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
 import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'
-import { WarningMessages } from '../../components/Messages/WarningMessages.js'
 import { PageContainer } from '../../components/PageContainer.js'
-import { getStepList } from '../../components/Step/StepList.js'
-import { TransactionDetails } from '../../components/TransactionDetails.js'
-import { useAddressActivity } from '../../hooks/useAddressActivity.js'
 import { useHeader } from '../../hooks/useHeader.js'
-import { useNavigateBack } from '../../hooks/useNavigateBack.js'
-import { useRouteExecution } from '../../hooks/useRouteExecution.js'
-import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
+import { usePacedRouteExecution } from '../../hooks/usePacedRouteExecution.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
-import { useFieldActions } from '../../stores/form/useFieldActions.js'
-import { useHeaderStore } from '../../stores/header/useHeaderStore.js'
+import { useClearAmountFields } from '../../stores/form/useClearAmountFields.js'
 import { RouteExecutionStatus } from '../../stores/routes/types.js'
-import { WidgetEvent } from '../../types/events.js'
-import { HiddenUI } from '../../types/widget.js'
-import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'
-import { navigationRoutes } from '../../utils/navigationRoutes.js'
-import { ConfirmToAddressSheet } from './ConfirmToAddressSheet.js'
+import { hasEnumFlag } from '../../utils/enum.js'
 import type { ExchangeRateBottomSheetBase } from './ExchangeRateBottomSheet.js'
 import { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet.js'
 import { RouteTracker } from './RouteTracker.js'
-import { StartTransactionButton } from './StartTransactionButton.js'
-import { StatusBottomSheet } from './StatusBottomSheet.js'
-import { TokenValueBottomSheet } from './TokenValueBottomSheet.js'
-import {
-  calculateValueLossPercentage,
-  getTokenValueLossThreshold,
-} from './utils.js'
+import { TransactionContent } from './TransactionContent.js'
 
-export const TransactionPage = () => {
+export const TransactionPage = (): JSX.Element | null => {
   const { t } = useTranslation()
-  const { setFieldValue } = useFieldActions()
-  const emitter = useWidgetEvents()
-  const setBackAction = useHeaderStore((state) => state.setBackAction)
-  const navigate = useNavigate()
-  const navigateBack = useNavigateBack()
-  const {
-    subvariant,
-    subvariantOptions,
-    contractSecondaryComponent,
-    hiddenUI,
-  } = useWidgetConfig()
+  const { mode, modeOptions, contractSecondaryComponent } = useWidgetConfig()
   const { search }: any = useLocation()
   const stateRouteId = search?.routeId
   const [routeId, setRouteId] = useState<string>(stateRouteId)
   const [routeRefreshing, setRouteRefreshing] = useState(false)
+  const clearAmountFields = useClearAmountFields()
 
-  const tokenValueBottomSheetRef = useRef<BottomSheetBase>(null)
   const exchangeRateBottomSheetRef = useRef<ExchangeRateBottomSheetBase>(null)
-  const confirmToAddressSheetRef = useRef<BottomSheetBase>(null)
 
   const onAcceptExchangeRateUpdate = (
     resolver: (value: boolean) => void,
@@ -65,21 +34,17 @@ export const TransactionPage = () => {
   }
 
   const { route, status, executeRoute, restartRoute, deleteRoute } =
-    useRouteExecution({
+    usePacedRouteExecution({
       routeId: routeId,
       onAcceptExchangeRateUpdate,
     })
 
-  const {
-    toAddress,
-    hasActivity,
-    isLoading: isLoadingAddressActivity,
-    isFetched: isActivityAddressFetched,
-  } = useAddressActivity(route?.toChainId)
+  const statusRef = useRef(status)
+  statusRef.current = status
 
   const getHeaderTitle = () => {
-    if (subvariant === 'custom') {
-      return t(`header.${subvariantOptions?.custom ?? 'checkout'}`)
+    if (mode === 'custom') {
+      return t(`header.${modeOptions?.custom?.type ?? 'checkout'}`)
     }
     if (route) {
       const transactionType =
@@ -106,170 +71,41 @@ export const TransactionPage = () => {
 
   useHeader(getHeaderTitle(), headerAction)
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: We want to emit event only when the page is mounted
+  // biome-ignore lint/correctness/useExhaustiveDependencies: cleanup only on unmount
   useEffect(() => {
-    if (status === RouteExecutionStatus.Idle) {
-      emitter.emit(WidgetEvent.ReviewTransactionPageEntered, route)
-    }
-  }, [])
-
-  if (!route) {
-    return null
-  }
-
-  const handleExecuteRoute = () => {
-    if (tokenValueBottomSheetRef.current?.isOpen()) {
-      const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route)
-      const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)
-      const toAmountUSD = Number.parseFloat(route.toAmountUSD)
-      emitter.emit(WidgetEvent.RouteHighValueLoss, {
-        fromAmountUSD,
-        toAmountUSD,
-        gasCostUSD,
-        feeCostUSD,
-        valueLoss: calculateValueLossPercentage(
-          fromAmountUSD,
-          toAmountUSD,
-          gasCostUSD,
-          feeCostUSD
-        ),
-      })
-    }
-    tokenValueBottomSheetRef.current?.close()
-    executeRoute()
-    setFieldValue('fromAmount', '')
-    if (subvariant === 'custom') {
-      setFieldValue('fromToken', '')
-      setFieldValue('toToken', '')
-    }
-    // Once transaction is started, set the back action to navigate to the home page
-    setBackAction(() => {
-      navigate({ to: navigationRoutes.home, replace: true })
-    })
-  }
-
-  const handleStartClick = async () => {
-    if (status === RouteExecutionStatus.Idle) {
+    return () => {
       if (
-        toAddress &&
-        !hasActivity &&
-        !isLoadingAddressActivity &&
-        isActivityAddressFetched &&
-        !hiddenUI?.includes(HiddenUI.LowAddressActivityConfirmation)
+        statusRef.current &&
+        statusRef.current !== RouteExecutionStatus.Idle &&
+        !hasEnumFlag(statusRef.current, RouteExecutionStatus.Done)
       ) {
-        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 && subvariant !== 'custom') {
-        tokenValueBottomSheetRef.current?.open()
-      } else {
-        handleExecuteRoute()
+        clearAmountFields()
       }
     }
-    if (status === RouteExecutionStatus.Failed) {
-      restartRoute()
-    }
-  }
-
-  const handleRemoveRoute = () => {
-    navigateBack()
-    deleteRoute()
-  }
+  }, [])
 
-  const getButtonText = (): string => {
-    switch (status) {
-      case RouteExecutionStatus.Idle:
-        switch (subvariant) {
-          case 'custom':
-            return subvariantOptions?.custom === 'deposit'
-              ? t('button.deposit')
-              : t('button.buy')
-          case 'refuel':
-            return t('button.startBridging')
-          default: {
-            const transactionType =
-              route.fromChainId === route.toChainId ? 'Swapping' : 'Bridging'
-            return t(`button.start${transactionType}`)
-          }
-        }
-      case RouteExecutionStatus.Failed:
-        return t('button.tryAgain')
-      default:
-        return ''
-    }
+  if (!route || !status) {
+    return null
   }
 
   return (
-    <PageContainer bottomGutters>
-      {getStepList(route, subvariant)}
-      {subvariant === 'custom' && contractSecondaryComponent ? (
-        <ContractComponent sx={{ marginTop: 2 }}>
-          {contractSecondaryComponent}
-        </ContractComponent>
-      ) : null}
-      <TransactionDetails route={route} sx={{ marginTop: 2 }} />
-      {status === RouteExecutionStatus.Idle ||
-      status === RouteExecutionStatus.Failed ? (
-        <>
-          <WarningMessages mt={2} route={route} allowInteraction />
-          <Box
-            sx={{
-              mt: 2,
-              display: 'flex',
-            }}
-          >
-            <StartTransactionButton
-              text={getButtonText()}
-              onClick={handleStartClick}
-              route={route}
-              loading={routeRefreshing || isLoadingAddressActivity}
-            />
-            {status === RouteExecutionStatus.Failed ? (
-              <Tooltip
-                title={t('button.removeTransaction')}
-                placement="bottom-end"
-              >
-                <Button
-                  onClick={handleRemoveRoute}
-                  sx={{
-                    minWidth: 48,
-                    marginLeft: 1,
-                  }}
-                >
-                  <Delete />
-                </Button>
-              </Tooltip>
-            ) : null}
-          </Box>
-        </>
-      ) : null}
-      {status ? <StatusBottomSheet status={status} route={route} /> : null}
-      {subvariant !== 'custom' ? (
-        <TokenValueBottomSheet
-          route={route}
-          ref={tokenValueBottomSheetRef}
-          onContinue={handleExecuteRoute}
-        />
+    <PageContainer
+      topGutters
+      bottomGutters
+      sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
+    >
+      <TransactionContent
+        route={route}
+        status={status}
+        executeRoute={executeRoute}
+        restartRoute={restartRoute}
+        deleteRoute={deleteRoute}
+        routeRefreshing={routeRefreshing}
+      />
+      {mode === 'custom' && contractSecondaryComponent ? (
+        <ContractComponent>{contractSecondaryComponent}</ContractComponent>
       ) : null}
       <ExchangeRateBottomSheet ref={exchangeRateBottomSheetRef} />
-      {!hiddenUI?.includes(HiddenUI.LowAddressActivityConfirmation) ? (
-        <ConfirmToAddressSheet
-          ref={confirmToAddressSheetRef}
-          onContinue={handleExecuteRoute}
-          toAddress={toAddress!}
-          toChainId={route.toChainId!}
-        />
-      ) : null}
     </PageContainer>
   )
 }

package/src/pages/TransactionPage/TransactionReview.tsx

@@ -0,0 +1,163 @@
+import type { RouteExtended } from '@lifi/sdk'
+import { Box } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
+import { useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
+import { Card } from '../../components/Card/Card.js'
+import { WarningMessages } from '../../components/Messages/WarningMessages.js'
+import { RouteTokens } from '../../components/RouteCard/RouteTokens.js'
+import { useAddressActivity } from '../../hooks/useAddressActivity.js'
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { useHeaderStore } from '../../stores/header/useHeaderStore.js'
+import { WidgetEvent } from '../../types/events.js'
+import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { ConfirmToAddressSheet } from './ConfirmToAddressSheet.js'
+import { StartTransactionButton } from './StartTransactionButton.js'
+import { TokenValueBottomSheet } from './TokenValueBottomSheet.js'
+import {
+  calculateValueLossPercentage,
+  getTokenValueLossThreshold,
+} from './utils.js'
+
+interface TransactionReviewProps {
+  route: RouteExtended
+  executeRoute: () => void
+  routeRefreshing: boolean
+}
+
+export const TransactionReview: React.FC<TransactionReviewProps> = ({
+  route,
+  executeRoute,
+  routeRefreshing,
+}) => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { setFieldValue } = useFieldActions()
+  const emitter = useWidgetEvents()
+  const setBackAction = useHeaderStore((state) => state.setBackAction)
+  const { mode, modeOptions, hiddenUI, defaultUI } = useWidgetConfig()
+
+  const tokenValueBottomSheetRef = useRef<BottomSheetBase>(null)
+  const confirmToAddressSheetRef = useRef<BottomSheetBase>(null)
+
+  const {
+    toAddress,
+    hasActivity,
+    isLoading: isLoadingAddressActivity,
+    isFetched: isActivityAddressFetched,
+  } = useAddressActivity(route.toChainId)
+
+  const handleExecuteRoute = () => {
+    if (tokenValueBottomSheetRef.current?.isOpen()) {
+      const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route)
+      const fromAmountUSD = Number.parseFloat(route.fromAmountUSD)
+      const toAmountUSD = Number.parseFloat(route.toAmountUSD)
+      emitter.emit(WidgetEvent.RouteHighValueLoss, {
+        fromAmountUSD,
+        toAmountUSD,
+        gasCostUSD,
+        feeCostUSD,
+        valueLoss: calculateValueLossPercentage(
+          fromAmountUSD,
+          toAmountUSD,
+          gasCostUSD,
+          feeCostUSD
+        ),
+      })
+    }
+    tokenValueBottomSheetRef.current?.close()
+    executeRoute()
+    setFieldValue('fromAmount', '')
+    if (mode === 'custom') {
+      setFieldValue('fromToken', '')
+      setFieldValue('toToken', '')
+    }
+    setBackAction(() => {
+      navigate({ to: navigationRoutes.home, replace: true })
+    })
+  }
+
+  const handleStartClick = () => {
+    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 {
+      handleExecuteRoute()
+    }
+  }
+
+  const getButtonText = (): string => {
+    switch (mode) {
+      case 'custom':
+        return modeOptions?.custom?.type === 'deposit'
+          ? t('button.deposit')
+          : t('button.buy')
+      case 'refuel':
+        return t('button.startBridging')
+      default: {
+        const transactionType =
+          route.fromChainId === route.toChainId ? 'Swapping' : 'Bridging'
+        return t(`button.start${transactionType}`)
+      }
+    }
+  }
+
+  return (
+    <>
+      <Card type="default" indented>
+        <RouteTokens
+          route={route}
+          showEssentials
+          defaultExpanded={defaultUI?.transactionDetailsExpanded}
+        />
+      </Card>
+      <WarningMessages sx={{ mt: 2 }} route={route} allowInteraction />
+      <Box sx={{ flex: 1 }}>
+        <StartTransactionButton
+          text={getButtonText()}
+          onClick={handleStartClick}
+          route={route}
+          loading={routeRefreshing || isLoadingAddressActivity}
+        />
+      </Box>
+      {mode !== 'custom' ? (
+        <TokenValueBottomSheet
+          route={route}
+          ref={tokenValueBottomSheetRef}
+          onContinue={handleExecuteRoute}
+        />
+      ) : null}
+      {!hiddenUI?.lowAddressActivityConfirmation ? (
+        <ConfirmToAddressSheet
+          ref={confirmToAddressSheetRef}
+          onContinue={handleExecuteRoute}
+          toAddress={toAddress!}
+          toChainId={route.toChainId!}
+        />
+      ) : null}
+    </>
+  )
+}

package/src/pages/TransactionPage/utils.ts

@@ -3,7 +3,7 @@ export const calculateValueLossPercentage = (
   toAmountUSD: number,
   gasCostUSD: number,
   feeCostUSD: number
-) => {
+): number => {
   return Number.parseFloat(
     (
       (toAmountUSD / (fromAmountUSD + gasCostUSD + feeCostUSD) - 1) *
@@ -17,7 +17,7 @@ export const getTokenValueLossThreshold = (
   toAmountUSD: number,
   gasCostUSD: number,
   feeCostUSD: number
-) => {
+): boolean => {
   if (!fromAmountUSD || !toAmountUSD) {
     return false
   }

package/src/providers/I18nProvider/I18nProvider.tsx

@@ -83,7 +83,6 @@ export const I18nProvider: React.FC<React.PropsWithChildren> = ({
         caches: [],
       },
       returnEmptyString: false,
-      showSupportNotice: false,
     })
 
     i18n.init()