@lifi/widget 4.10.0 → 4.10.2

package/src/pages/TransactionPage/TransactionFailedButtons.tsx

@@ -1,22 +1,30 @@
 import type { RouteExtended } from '@lifi/sdk'
 import { Box, Button } 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 { useAddressActivity } from '../../hooks/useAddressActivity.js'
 import { useNavigateBack } from '../../hooks/useNavigateBack.js'
+import { useSwapOnly } from '../../hooks/useSwapOnly.js'
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.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 type { RetryGate } from './utils.js'
 import {
   calculateValueLossPercentage,
+  canStartNewSwap,
+  getNewSwapFormValues,
   getRetryGates,
   getTokenValueLossThreshold,
+  isCallBundleNotFound,
   openNextGate,
 } from './utils.js'
 
@@ -32,7 +40,11 @@ export const TransactionFailedButtons: React.FC<
   const { t } = useTranslation()
   const emitter = useWidgetEvents()
   const navigateBack = useNavigateBack()
-  const { mode, hiddenUI } = useWidgetConfig()
+  const navigate = useNavigate()
+  const { mode, hiddenUI, disabledUI, requiredUI } = useWidgetConfig()
+  const swapOnly = useSwapOnly()
+  const { setFieldValue, getFieldValues } = useFieldActions()
+  const { setSelectedBookmark, getSelectedBookmark } = useBookmarkActions()
 
   const tokenValueBottomSheetRef = useRef<BottomSheetBase>(null)
   const confirmToAddressSheetRef = useRef<BottomSheetBase>(null)
@@ -49,6 +61,49 @@ export const TransactionFailedButtons: React.FC<
     deleteRoute()
   }
 
+  const callBundleNotFound = isCallBundleNotFound(route)
+  const showStartNewSwap =
+    callBundleNotFound && canStartNewSwap({ route, mode, swapOnly })
+  // Try again would only wait for the same bundle again.
+  const showRetry = !callBundleNotFound
+
+  // Home, not back: after a reload, the route is opened from Activities.
+  const handleStartNewSwap = () => {
+    // An empty hidden or locked field still needs the route's receiver.
+    const [formReceiver] = getFieldValues('toAddress')
+    const keepReceiver = Boolean(
+      (disabledUI?.toAddress || hiddenUI?.toAddress) && formReceiver
+    )
+    const values = getNewSwapFormValues(route, {
+      keepReceiver,
+      receiverRequired: requiredUI?.toAddress,
+    })
+    const fieldNames = Object.keys(values) as (keyof typeof values)[]
+    const receiver = keepReceiver ? formReceiver : values.toAddress
+    // Fill after navigate resolves: this page's unmount cleanup has run by then,
+    // as TransactionFailedButtons.test.tsx checks.
+    navigate({ to: navigationRoutes.home, replace: true })
+      .then(() => {
+        for (const fieldName of fieldNames) {
+          setFieldValue(fieldName, values[fieldName], {
+            isDirty: true,
+            isTouched: true,
+          })
+        }
+        // A bookmark name from an earlier receiver must not label this one.
+        if (
+          getSelectedBookmark()?.address.toLowerCase() !==
+          receiver?.toLowerCase()
+        ) {
+          setSelectedBookmark()
+        }
+      })
+      .catch((error) => {
+        console.warn('Filling the new swap failed.', error)
+      })
+    deleteRoute()
+  }
+
   const retryGates = (() => {
     const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route)
     return getRetryGates({
@@ -112,14 +167,28 @@ export const TransactionFailedButtons: React.FC<
             {t('button.delete')}
           </Button>
         </Box>
-        <Box sx={{ flex: 1 }}>
-          <StartTransactionButton
-            text={t('button.tryAgain')}
-            onClick={handleRetryClick}
-            route={route}
-            loading={isLoadingAddressActivity}
-          />
-        </Box>
+        {showStartNewSwap ? (
+          <Box sx={{ flex: 1 }}>
+            <Button
+              variant="contained"
+              color="primary"
+              onClick={handleStartNewSwap}
+              fullWidth
+            >
+              {t('button.startNewSwap')}
+            </Button>
+          </Box>
+        ) : null}
+        {showRetry ? (
+          <Box sx={{ flex: 1 }}>
+            <StartTransactionButton
+              text={t('button.tryAgain')}
+              onClick={handleRetryClick}
+              route={route}
+              loading={isLoadingAddressActivity}
+            />
+          </Box>
+        ) : null}
       </Box>
       {mode !== 'custom' ? (
         <TokenValueBottomSheet

package/src/pages/TransactionPage/utils.ts

@@ -1,3 +1,8 @@
+import { LiFiErrorCode, type RouteExtended } from '@lifi/sdk'
+import { getFailedStepAction } from '../../stores/routes/utils.js'
+import type { WidgetMode } from '../../types/widget.js'
+import { formatTokenAmount } from '../../utils/format.js'
+
 export const calculateValueLossPercentage = (
   fromAmountUSD: number,
   toAmountUSD: number,
@@ -101,3 +106,79 @@ export const getStartGates = (
   ['address', needsAddressConfirmation(input)],
   ['value', input.valueLossExceeded && !input.isCustomMode],
 ]
+
+// Only these modes show the plain from/to swap form.
+const newSwapModes: readonly (WidgetMode | undefined)[] = [
+  undefined,
+  'default',
+  'split',
+]
+
+export const isCallBundleNotFound = (route: RouteExtended): boolean =>
+  getFailedStepAction(route)?.action.error?.code ===
+  LiFiErrorCode.CallBundleNotFound
+
+// A new swap repeats the whole route.
+export const canStartNewSwap = ({
+  route,
+  mode,
+  swapOnly,
+}: {
+  route: RouteExtended
+  mode: WidgetMode | undefined
+  swapOnly: boolean
+}): boolean => {
+  const failed = getFailedStepAction(route)
+  if (!failed || !isCallBundleNotFound(route)) {
+    return false
+  }
+  return (
+    failed.step === route.steps[0] &&
+    route.steps.every(
+      (step) => step === failed.step || !step.execution?.actions?.length
+    ) &&
+    newSwapModes.includes(mode) &&
+    // A swap-only form requests no bridges.
+    !(swapOnly && route.fromChainId !== route.toChainId)
+  )
+}
+
+interface NewSwapFormValues {
+  fromChain: number
+  fromToken: string
+  fromAmount: string
+  toChain: number
+  toToken: string
+  toAddress?: string
+}
+
+export const getNewSwapFormValues = (
+  route: RouteExtended,
+  {
+    keepReceiver = false,
+    receiverRequired = false,
+  }: { keepReceiver?: boolean; receiverRequired?: boolean } = {}
+): NewSwapFormValues => {
+  const receiver = route.toAddress || route.fromAddress
+  const values: NewSwapFormValues = {
+    fromChain: route.fromChainId,
+    fromToken: route.fromToken.address,
+    // The quote's amount, not a step amount trimmed to the balance: the new quote checks it.
+    fromAmount: formatTokenAmount(
+      BigInt(route.fromAmount),
+      route.fromToken.decimals
+    ),
+    toChain: route.toChainId,
+    toToken: route.toToken.address,
+  }
+  if (!keepReceiver) {
+    // A required receiver stays, also when it is the sender.
+    values.toAddress =
+      receiver &&
+      (receiverRequired ||
+        receiver.toLowerCase() !== route.fromAddress?.toLowerCase())
+        ? receiver
+        : ''
+  }
+  return values
+}

package/src/shared.ts

@@ -114,6 +114,7 @@ export { TransactionDoneButtons } from './pages/TransactionPage/TransactionDoneB
 export {
   calculateValueLossPercentage,
   getTokenValueLossThreshold,
+  isCallBundleNotFound,
 } from './pages/TransactionPage/utils.js'
 
 // ── providers ────────────────────────────────────────────────────────────────

package/src/stores/routes/utils.ts

@@ -1,4 +1,9 @@
-import type { ExecutionAction, RouteExtended } from '@lifi/sdk'
+import type {
+  ExecutionAction,
+  ExecutionActionType,
+  LiFiStepExtended,
+  RouteExtended,
+} from '@lifi/sdk'
 import microdiff from 'microdiff'
 
 export const isRouteDone = (route: RouteExtended): boolean => {
@@ -21,6 +26,24 @@ export const isRouteFailed = (route: RouteExtended): boolean => {
   return route.steps.some((step) => step.execution?.status === 'FAILED')
 }
 
+// A step can fail before any action, so its own error then stands in.
+export const getFailedStepAction = (
+  route: RouteExtended
+): { step: LiFiStepExtended; action: ExecutionAction } | undefined => {
+  const step = route.steps.find((step) => step.execution?.status === 'FAILED')
+  if (!step) {
+    return undefined
+  }
+  const action = step.execution?.actions?.find(
+    (action) => action.status === 'FAILED'
+  ) || {
+    status: 'FAILED',
+    type: 'EXECUTION' as ExecutionActionType,
+    error: step.execution?.error,
+  }
+  return { step, action }
+}
+
 export const isRouteActive = (route?: RouteExtended): boolean => {
   if (!route) {
     return false

package/src/utils/getErrorMessage.ts

@@ -130,6 +130,11 @@ export function getErrorMessage(
         chainName: getChainById(step.action.fromChainId)?.name ?? '',
       })
       break
+    // No "remain in your wallet" suffix: the funds may already be gone.
+    case LiFiErrorCode.CallBundleNotFound:
+      title = t('error.title.callBundleNotFound')
+      message = t('error.message.callBundleNotFound')
+      break
     default:
       title = t('error.title.unknown')
       if (failedAction?.txHash) {