@lifi/widget 3.40.8 → 4.0.0-alpha.1

package/src/pages/SettingsPage/SettingsCard/SettingCardExpandable.tsx

@@ -1,6 +1,6 @@
 import { Collapse } from '@mui/material'
 import type { PropsWithChildren, ReactNode } from 'react'
-import { useId } from 'react'
+import { forwardRef, useId, useImperativeHandle, useRef } from 'react'
 import { Card } from '../../../components/Card/Card.js'
 import {
   CardRowButton,
@@ -12,39 +12,69 @@ import type { SettingCardTitle } from './types.js'
 
 interface SettingCardExpandableProps extends SettingCardTitle {
   value: ReactNode
+  disabled?: boolean
+  keepValueVisible?: boolean
+  onEntered?: () => void
 }
 
-export const SettingCardExpandable: React.FC<
+export interface SettingCardExpandableRef {
+  element: HTMLButtonElement | null
+  isExpanded: boolean
+  toggleExpanded: (forceExpanded?: boolean) => void
+}
+
+export const SettingCardExpandable = forwardRef<
+  SettingCardExpandableRef,
   PropsWithChildren<SettingCardExpandableProps>
-> = ({ icon, title, value, children }) => {
-  const { expanded, toggleExpanded } = useSettingsCardExpandable()
-  const buttonId = useId()
-  const collapseId = useId()
+>(
+  (
+    { icon, title, value, children, disabled, keepValueVisible, onEntered },
+    ref
+  ) => {
+    const { expanded, toggleExpanded } = useSettingsCardExpandable()
+    const buttonId = useId()
+    const collapseId = useId()
+    const buttonRef = useRef<HTMLButtonElement>(null)
 
-  return (
-    <Card sx={{ p: 1 }}>
-      <CardRowButton
-        id={buttonId}
-        aria-expanded={expanded}
-        aria-controls={collapseId}
-        onClick={toggleExpanded}
-        disableRipple
-        sx={{ p: 1 }}
-      >
-        <CardTitleContainer>
-          {icon}
-          <CardValue>{title}</CardValue>
-        </CardTitleContainer>
-        {!expanded && value}
-      </CardRowButton>
-      <Collapse
-        id={collapseId}
-        role="region"
-        aria-labelledby={buttonId}
-        in={expanded}
-      >
-        {children}
-      </Collapse>
-    </Card>
-  )
-}
+    useImperativeHandle(
+      ref,
+      () => ({
+        element: buttonRef.current,
+        isExpanded: expanded,
+        toggleExpanded,
+      }),
+      [expanded, toggleExpanded]
+    )
+
+    return (
+      <Card sx={{ p: 1 }}>
+        <CardRowButton
+          ref={buttonRef}
+          id={buttonId}
+          aria-expanded={expanded}
+          aria-controls={collapseId}
+          onClick={disabled ? undefined : () => toggleExpanded()}
+          disableRipple
+          sx={{ p: 1, cursor: disabled ? 'default' : 'pointer' }}
+        >
+          <CardTitleContainer>
+            {icon}
+            <CardValue>{title}</CardValue>
+          </CardTitleContainer>
+          {(!expanded || keepValueVisible) && value}
+        </CardRowButton>
+        <Collapse
+          id={collapseId}
+          role="region"
+          aria-labelledby={buttonId}
+          in={expanded}
+          mountOnEnter
+          unmountOnExit
+          onEntered={onEntered}
+        >
+          {children}
+        </Collapse>
+      </Card>
+    )
+  }
+)

package/src/pages/SettingsPage/SettingsCard/SettingsAccordian.tsx

@@ -22,8 +22,9 @@ export const useSettingsCardExpandable = () => {
   const settingCardExpandableId = useId()
   const [expanded, setExpanded] = useState(false)
   const { openCard, setOpenCard } = useContext(SettingsAccordionContext)
-  const toggleExpanded = () => {
-    const newExpanded = !expanded
+
+  const toggleExpanded = (forceExpanded?: boolean) => {
+    const newExpanded = forceExpanded ?? !expanded
     setExpanded(newExpanded)
 
     if (newExpanded && openCard !== settingCardExpandableId) {

package/src/pages/SettingsPage/SettingsPage.tsx

@@ -1,6 +1,8 @@
 import { useTranslation } from 'react-i18next'
 import { PageContainer } from '../../components/PageContainer.js'
 import { useHeader } from '../../hooks/useHeader.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { HiddenUI } from '../../types/widget.js'
 import { BridgeAndExchangeSettings } from './BridgeAndExchangeSettings.js'
 import { GasPriceSettings } from './GasPriceSettings.js'
 import { LanguageSetting } from './LanguageSetting.js'
@@ -9,10 +11,12 @@ import { RoutePrioritySettings } from './RoutePrioritySettings.js'
 import { SettingsList } from './SettingsCard/SettingCard.style.js'
 import { SettingsCardAccordion } from './SettingsCard/SettingsAccordian.js'
 import { SlippageSettings } from './SlippageSettings/SlippageSettings.js'
+import { SmallBalanceFilterSettings } from './SmallBalanceFilterSettings.js'
 import { ThemeSettings } from './ThemeSettings.js'
 
 export const SettingsPage = () => {
   const { t } = useTranslation()
+  const { hiddenUI } = useWidgetConfig()
   useHeader(t('header.settings'))
 
   return (
@@ -24,6 +28,9 @@ export const SettingsPage = () => {
           <RoutePrioritySettings />
           <GasPriceSettings />
           <SlippageSettings />
+          {!hiddenUI?.includes(HiddenUI.HideSmallBalances) && (
+            <SmallBalanceFilterSettings />
+          )}
           <BridgeAndExchangeSettings type="Bridges" />
           <BridgeAndExchangeSettings type="Exchanges" />
         </SettingsCardAccordion>

package/src/pages/SettingsPage/SlippageSettings/SlippageSettings.style.tsx

@@ -19,7 +19,7 @@ export const SettingsFieldSet = styled(Box)(({ theme }) => ({
   }),
 }))
 
-const slippageControlSelected = (theme: Theme) => ({
+const settingsControlSelected = (theme: Theme) => ({
   backgroundColor: theme.vars.palette.background.paper,
   boxShadow: `0px 2px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
   ...theme.applyStyles('dark', {
@@ -29,17 +29,17 @@ const slippageControlSelected = (theme: Theme) => ({
   borderRadius: `calc(${theme.vars.shape.borderRadius} - 4px)`,
 })
 
-interface SlippageDefaultProps {
+interface SettingsControlProps {
   selected?: boolean
 }
 
-export const SlippageDefaultButton = styled(ButtonBase)<SlippageDefaultProps>(
+export const SettingsDefaultButton = styled(ButtonBase)<SettingsControlProps>(
   ({ theme, selected }) => {
-    const slippageControlSelectedStyles = slippageControlSelected(theme)
+    const settingsControlSelectedStyles = settingsControlSelected(theme)
     const selectedStyle = selected
       ? {
           '&:not(:focus)': {
-            ...slippageControlSelectedStyles,
+            ...settingsControlSelectedStyles,
           },
         }
       : {}
@@ -50,20 +50,20 @@ export const SlippageDefaultButton = styled(ButtonBase)<SlippageDefaultProps>(
       fontSize: '1rem',
       fontWeight: 700,
       '&:focus': {
-        ...slippageControlSelectedStyles,
+        ...settingsControlSelectedStyles,
       },
       ...selectedStyle,
     }
   }
 )
 
-export const SlippageCustomInput = styled(InputBase)<SlippageDefaultProps>(
+export const SettingsCustomInput = styled(InputBase)<SettingsControlProps>(
   ({ theme, selected }) => {
-    const slippageControlSelectedStyles = slippageControlSelected(theme)
+    const settingsControlSelectedStyles = settingsControlSelected(theme)
     const selectedStyle = selected
       ? {
           '&:not(:focus)': {
-            ...slippageControlSelectedStyles,
+            ...settingsControlSelectedStyles,
           },
         }
       : {}
@@ -82,7 +82,7 @@ export const SlippageCustomInput = styled(InputBase)<SlippageDefaultProps>(
           opacity: 1,
         },
         '&:focus': {
-          ...slippageControlSelectedStyles,
+          ...settingsControlSelectedStyles,
         },
         ...selectedStyle,
       },

package/src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx

@@ -12,9 +12,9 @@ import { formatInputAmount, formatSlippage } from '../../../utils/format.js'
 import { BadgedValue } from '../SettingsCard/BadgedValue.js'
 import { SettingCardExpandable } from '../SettingsCard/SettingCardExpandable.js'
 import {
+  SettingsCustomInput,
+  SettingsDefaultButton,
   SettingsFieldSet,
-  SlippageCustomInput,
-  SlippageDefaultButton,
   SlippageLimitsWarningContainer,
 } from './SlippageSettings.style.js'
 
@@ -106,7 +106,7 @@ export const SlippageSettings: React.FC = () => {
         }}
       >
         <SettingsFieldSet>
-          <SlippageDefaultButton
+          <SettingsDefaultButton
             selected={defaultSlippage === slippage && focused !== 'input'}
             onFocus={() => {
               setFocused('button')
@@ -118,8 +118,8 @@ export const SlippageSettings: React.FC = () => {
             disableRipple
           >
             {t('button.auto')}
-          </SlippageDefaultButton>
-          <SlippageCustomInput
+          </SettingsDefaultButton>
+          <SettingsCustomInput
             selected={defaultSlippage !== slippage && focused !== 'button'}
             placeholder={focused === 'input' ? '' : t('settings.custom')}
             inputProps={{

package/src/pages/SettingsPage/SmallBalanceFilterSettings.tsx

@@ -0,0 +1,116 @@
+import AttachMoney from '@mui/icons-material/AttachMoney'
+import { Box } from '@mui/material'
+import {
+  type ChangeEvent,
+  type ChangeEventHandler,
+  type FocusEventHandler,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { Switch } from '../../components/Switch.js'
+import { useSettings } from '../../stores/settings/useSettings.js'
+import { useSettingsActions } from '../../stores/settings/useSettingsActions.js'
+import { formatInputAmount, usdDecimals } from '../../utils/format.js'
+import {
+  SettingCardExpandable,
+  type SettingCardExpandableRef,
+} from './SettingsCard/SettingCardExpandable.js'
+import {
+  SettingsCustomInput,
+  SettingsFieldSet,
+} from './SlippageSettings/SlippageSettings.style.js'
+
+const defaultThreshold = '0.01'
+
+export const SmallBalanceFilterSettings: React.FC = () => {
+  const { t } = useTranslation()
+  const { smallBalanceThreshold } = useSettings(['smallBalanceThreshold'])
+  const { setValue } = useSettingsActions()
+  const [inputValue, setInputValue] = useState(
+    smallBalanceThreshold ?? defaultThreshold
+  )
+  const buttonRef = useRef<SettingCardExpandableRef>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const formatAndSetThreshold = (inputValue: string, returnInitial = false) => {
+    const value = inputValue.replace('$', '')
+    const formattedValue = formatInputAmount(value, usdDecimals, returnInitial)
+    if (returnInitial) {
+      setInputValue(formattedValue)
+    } else {
+      const formattedOrDefault = formattedValue || defaultThreshold
+      setInputValue(formattedOrDefault)
+      setValue('smallBalanceThreshold', formattedOrDefault)
+    }
+  }
+
+  const handleInputUpdate: ChangeEventHandler<HTMLInputElement> = (event) => {
+    formatAndSetThreshold(event.target.value, true)
+  }
+
+  const handleInputBlur: FocusEventHandler<HTMLInputElement> = (event) => {
+    formatAndSetThreshold(event.target.value, false)
+  }
+
+  const handleHideSmallBalancesChange = (
+    event: ChangeEvent<HTMLInputElement>
+  ) => {
+    setValue(
+      'smallBalanceThreshold',
+      event.target.checked ? defaultThreshold : undefined
+    )
+    if (buttonRef.current) {
+      buttonRef.current?.toggleExpanded(event.target.checked)
+    }
+  }
+
+  const handleExpanded = () => {
+    if (inputRef.current) {
+      inputRef.current.focus()
+    }
+  }
+
+  useEffect(() => {
+    setInputValue(smallBalanceThreshold ?? defaultThreshold)
+  }, [smallBalanceThreshold])
+
+  return (
+    <SettingCardExpandable
+      ref={buttonRef}
+      value={
+        <Switch
+          checked={!!smallBalanceThreshold}
+          onChange={handleHideSmallBalancesChange}
+          aria-label={t('settings.hideSmallBalances')}
+        />
+      }
+      icon={<AttachMoney />}
+      title={t('settings.hideSmallBalances')}
+      disabled={!smallBalanceThreshold}
+      keepValueVisible
+      onEntered={handleExpanded}
+    >
+      <Box
+        sx={{
+          mt: 1.5,
+        }}
+      >
+        <SettingsFieldSet>
+          <SettingsCustomInput
+            inputRef={inputRef}
+            selected
+            inputProps={{
+              inputMode: 'decimal',
+            }}
+            onChange={handleInputUpdate}
+            onBlur={handleInputBlur}
+            value={`$${inputValue}`}
+            autoComplete="off"
+          />
+        </SettingsFieldSet>
+      </Box>
+    </SettingCardExpandable>
+  )
+}

package/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx

@@ -1,8 +1,8 @@
 import type { FullStatusData } from '@lifi/sdk'
 import { Box, Typography } from '@mui/material'
+import { useLocation, useNavigate } from '@tanstack/react-router'
 import { useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useLocation } from 'react-router-dom'
 import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'
 import { PageContainer } from '../../components/PageContainer.js'
 import { getStepList } from '../../components/Step/StepList.js'
@@ -10,7 +10,6 @@ import { TransactionDetails } from '../../components/TransactionDetails.js'
 import { internalExplorerUrl } from '../../config/constants.js'
 import { useExplorer } from '../../hooks/useExplorer.js'
 import { useHeader } from '../../hooks/useHeader.js'
-import { useNavigateBack } from '../../hooks/useNavigateBack.js'
 import { useTools } from '../../hooks/useTools.js'
 import { useTransactionDetails } from '../../hooks/useTransactionDetails.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
@@ -25,7 +24,7 @@ import { TransferIdCard } from './TransferIdCard.js'
 
 export const TransactionDetailsPage: React.FC = () => {
   const { t, i18n } = useTranslation()
-  const { navigate } = useNavigateBack()
+  const navigate = useNavigate()
   const {
     subvariant,
     subvariantOptions,
@@ -33,14 +32,14 @@ export const TransactionDetailsPage: React.FC = () => {
     explorerUrls,
     hiddenUI,
   } = useWidgetConfig()
-  const { state }: any = useLocation()
+  const { search }: any = useLocation()
   const { tools } = useTools()
   const { getTransactionLink } = useExplorer()
   const storedRouteExecution = useRouteExecutionStore(
-    (store) => store.routes[state?.routeId]
+    (store) => store.routes[search?.routeId]
   )
   const { transaction, isLoading } = useTransactionDetails(
-    !storedRouteExecution && state?.transactionHash
+    !storedRouteExecution && search?.transactionHash
   )
 
   const title =
@@ -67,7 +66,7 @@ export const TransactionDetailsPage: React.FC = () => {
 
   useEffect(() => {
     if (!isLoading && !routeExecution) {
-      navigate(navigationRoutes.home)
+      navigate({ to: navigationRoutes.home })
     }
   }, [isLoading, navigate, routeExecution])
 
@@ -94,7 +93,7 @@ export const TransactionDetailsPage: React.FC = () => {
   }
 
   const startedAt = new Date(
-    (routeExecution?.route.steps[0].execution?.process[0].startedAt ?? 0) *
+    (routeExecution?.route.steps[0].execution?.startedAt ?? 0) *
       (storedRouteExecution ? 1 : 1000) // local and BE routes have different ms handling
   )
 

package/src/pages/TransactionHistoryPage/TransactionHistoryItem.tsx

@@ -5,8 +5,8 @@ import type {
   TokenAmount,
 } from '@lifi/sdk'
 import { Box, Typography } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
 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'
@@ -24,8 +24,9 @@ export const TransactionHistoryItem: React.FC<{
     .receiving as ExtendedTransactionInfo
 
   const handleClick = () => {
-    navigate(navigationRoutes.transactionDetails, {
-      state: {
+    navigate({
+      to: navigationRoutes.transactionDetails,
+      search: {
         transactionHash: (transaction as FullStatusData).sending.txHash,
       },
     })

package/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx

@@ -1,7 +1,6 @@
 import type { FullStatusData } from '@lifi/sdk'
 import { Box, List } from '@mui/material'
 import { useVirtualizer } from '@tanstack/react-virtual'
-import type React from 'react'
 import { useCallback, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { PageContainer } from '../../components/PageContainer.js'
@@ -13,7 +12,7 @@ import { TransactionHistoryEmpty } from './TransactionHistoryEmpty.js'
 import { TransactionHistoryItem } from './TransactionHistoryItem.js'
 import { TransactionHistoryItemSkeleton } from './TransactionHistorySkeleton.js'
 
-export const TransactionHistoryPage: React.FC = () => {
+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()

package/src/pages/TransactionPage/StatusBottomSheet.tsx

@@ -3,6 +3,7 @@ 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'
@@ -11,8 +12,6 @@ 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 { useNavigateBack } from '../../hooks/useNavigateBack.js'
-import { getProcessMessage } from '../../hooks/useProcessMessage.js'
 import { useSetContentHeight } from '../../hooks/useSetContentHeight.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
@@ -23,6 +22,7 @@ import {
 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'
 
@@ -65,7 +65,7 @@ const StatusBottomSheetContent: React.FC<StatusBottomSheetContentProps> = ({
   onClose,
 }) => {
   const { t } = useTranslation()
-  const { navigateBack, navigate } = useNavigateBack()
+  const navigate = useNavigate()
   const { setFieldValue } = useFieldActions()
   const {
     subvariant,
@@ -95,7 +95,7 @@ const StatusBottomSheetContent: React.FC<StatusBottomSheetContentProps> = ({
 
   const handleDone = () => {
     cleanFields()
-    navigateBack()
+    navigate({ to: navigationRoutes.home, replace: true })
   }
 
   const handlePartialDone = () => {
@@ -119,7 +119,7 @@ const StatusBottomSheetContent: React.FC<StatusBottomSheetContentProps> = ({
     } else {
       cleanFields()
     }
-    navigateBack()
+    navigate({ to: navigationRoutes.home, replace: true })
   }
 
   const handleClose = () => {
@@ -132,8 +132,9 @@ const StatusBottomSheetContent: React.FC<StatusBottomSheetContentProps> = ({
 
     const transactionHash = getSourceTxHash(route)
 
-    navigate(navigationRoutes.transactionDetails, {
-      state: {
+    navigate({
+      to: navigationRoutes.transactionDetails,
+      search: {
         routeId: route.id,
         transactionHash,
       },
@@ -180,15 +181,15 @@ const StatusBottomSheetContent: React.FC<StatusBottomSheetContentProps> = ({
       const step = route.steps.find(
         (step) => step.execution?.status === 'FAILED'
       )
-      const process = step?.execution?.process.find(
-        (process) => process.status === 'FAILED'
-      )
-      if (!step || !process) {
+      if (!step) {
         break
       }
-      const processMessage = getProcessMessage(t, getChainById, step, process)
-      title = processMessage.title
-      failedMessage = processMessage.message
+      const action = step.execution?.actions.find(
+        (action) => action.status === 'FAILED'
+      )
+      const actionMessage = getErrorMessage(t, getChainById, step, action)
+      title = actionMessage.title
+      failedMessage = actionMessage.message
       handlePrimaryButton = handleClose
       break
     }

package/src/pages/TransactionPage/TransactionPage.tsx

@@ -1,9 +1,9 @@
 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 { useTranslation } from 'react-i18next'
-import { useLocation } from 'react-router-dom'
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
 import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'
 import { WarningMessages } from '../../components/Messages/WarningMessages.js'
@@ -17,10 +17,12 @@ import { useRouteExecution } from '../../hooks/useRouteExecution.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 { 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 type { ExchangeRateBottomSheetBase } from './ExchangeRateBottomSheet.js'
 import { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet.js'
@@ -33,19 +35,21 @@ import {
   getTokenValueLossThreshold,
 } from './utils.js'
 
-export const TransactionPage: React.FC = () => {
+export const TransactionPage = () => {
   const { t } = useTranslation()
   const { setFieldValue } = useFieldActions()
   const emitter = useWidgetEvents()
-  const { navigateBack } = useNavigateBack()
+  const setBackAction = useHeaderStore((state) => state.setBackAction)
+  const navigate = useNavigate()
+  const navigateBack = useNavigateBack()
   const {
     subvariant,
     subvariantOptions,
     contractSecondaryComponent,
     hiddenUI,
   } = useWidgetConfig()
-  const { state }: any = useLocation()
-  const stateRouteId = state?.routeId
+  const { search }: any = useLocation()
+  const stateRouteId = search?.routeId
   const [routeId, setRouteId] = useState<string>(stateRouteId)
   const [routeRefreshing, setRouteRefreshing] = useState(false)
 
@@ -138,6 +142,10 @@ export const TransactionPage: React.FC = () => {
       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 () => {
@@ -183,8 +191,7 @@ export const TransactionPage: React.FC = () => {
       case RouteExecutionStatus.Idle:
         switch (subvariant) {
           case 'custom':
-            return subvariantOptions?.custom === 'deposit' ||
-              subvariantOptions?.custom === 'fund'
+            return subvariantOptions?.custom === 'deposit'
               ? t('button.deposit')
               : t('button.buy')
           case 'refuel':

package/src/providers/I18nProvider/I18nProvider.tsx

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