fix(deposit-status): handle failed deposits

src/utils/abis/spokepool-errors.ts

@@ -0,0 +1,41 @@
+// partial abi - only errors
+export const SpokePoolErrorAbi = [
+  { inputs: [], name: "ClaimedMerkleLeaf", type: "error" },
+  { inputs: [], name: "DepositsArePaused", type: "error" },
+  { inputs: [], name: "DisabledRoute", type: "error" },
+  { inputs: [], name: "ExpiredFillDeadline", type: "error" },
+  { inputs: [], name: "FillsArePaused", type: "error" },
+  {
+    inputs: [],
+    name: "InsufficientSpokePoolBalanceToExecuteLeaf",
+    type: "error",
+  },
+  { inputs: [], name: "InvalidBytes32", type: "error" },
+  { inputs: [], name: "InvalidChainId", type: "error" },
+  { inputs: [], name: "InvalidCrossDomainAdmin", type: "error" },
+  { inputs: [], name: "InvalidDepositorSignature", type: "error" },
+  { inputs: [], name: "InvalidExclusiveRelayer", type: "error" },
+  { inputs: [], name: "InvalidFillDeadline", type: "error" },
+  { inputs: [], name: "InvalidMerkleLeaf", type: "error" },
+  { inputs: [], name: "InvalidMerkleProof", type: "error" },
+  { inputs: [], name: "InvalidPayoutAdjustmentPct", type: "error" },
+  { inputs: [], name: "InvalidQuoteTimestamp", type: "error" },
+  { inputs: [], name: "InvalidRelayerFeePct", type: "error" },
+  { inputs: [], name: "InvalidSlowFillRequest", type: "error" },
+  { inputs: [], name: "InvalidWithdrawalRecipient", type: "error" },
+  {
+    inputs: [{ internalType: "bytes", name: "data", type: "bytes" }],
+    name: "LowLevelCallFailed",
+    type: "error",
+  },
+  { inputs: [], name: "MaxTransferSizeExceeded", type: "error" },
+  { inputs: [], name: "MsgValueDoesNotMatchInputAmount", type: "error" },
+  { inputs: [], name: "NoRelayerRefundToClaim", type: "error" },
+  { inputs: [], name: "NoSlowFillsInExclusivityWindow", type: "error" },
+  { inputs: [], name: "NotCrossChainCall", type: "error" },
+  { inputs: [], name: "NotCrossDomainAdmin", type: "error" },
+  { inputs: [], name: "NotEOA", type: "error" },
+  { inputs: [], name: "NotExclusiveRelayer", type: "error" },
+  { inputs: [], name: "RelayFilled", type: "error" },
+  { inputs: [], name: "WrongERC7683OrderId", type: "error" },
+] as const;

src/utils/errors.ts

@@ -1,5 +1,9 @@
 import axios, { AxiosError } from "axios";
 import { ChainId } from "./constants";
+import { ethers } from "ethers";
+import { SpokePoolErrorAbi } from "./abis/spokepool-errors";
+import { getProvider } from "./providers";
+import { chainIsEvm } from "./sdk";
 
 export class UnsupportedChainIdError extends Error {
   public constructor(unsupportedChainId: number) {
@@ -127,3 +131,167 @@ export function getQuoteWarningMessage(error: Error | null): string | null {
       return "Oops, something went wrong. Please try again.";
   }
 }
+
+export type EthersCallRevertError = Error & {
+  code?: string;
+  reason?: string;
+  data?: string;
+
+  error?: {
+    code?: string;
+    reason?: string;
+    data?: string;
+    error?: {
+      data?: string;
+    };
+  };
+
+  body?: string; // JSON string with error.data
+};
+
+export function decodeSpokepoolError(data: string) {
+  if (!data || data === "0x") {
+    return "Transaction reverted (no revert data)";
+  }
+
+  try {
+    const spokepoolInterface = new ethers.utils.Interface(SpokePoolErrorAbi);
+    const parsed = spokepoolInterface.parseError(data);
+    if (!parsed) {
+      throw new Error("unable to parse custom errors");
+    }
+    return parsed.name; // eg. InvalidQuoteTimestamp or InvalidRelayerFeePct etc
+  } catch {
+    // fallback
+    return `Transaction reverted (raw data: ${data})`;
+  }
+}
+
+export const SPOKEPOOL_REVERT_REASON_MESSAGES: Record<string, string> = {
+  default: "Transaction reverted.",
+  InvalidQuoteTimestamp:
+    "Quote expired - please try again to get updated rates.",
+  // ...
+};
+
+export type SpokepoolRevertReason = {
+  error: string;
+  formattedError: string;
+};
+
+/**
+ * Formats a decoded error name into a user-friendly message
+ */
+function formatSpokepoolError(errorName: string): string {
+  return (
+    SPOKEPOOL_REVERT_REASON_MESSAGES[errorName] ||
+    SPOKEPOOL_REVERT_REASON_MESSAGES.default
+  );
+}
+
+// Re-simulate tx to capture revert data
+export async function getRevertDataFromReceipt(
+  receipt: ethers.providers.TransactionReceipt,
+  chainId: number
+): Promise<string | null> {
+  if (receipt.status !== 0) {
+    // Not a failed tx
+    return null;
+  }
+
+  try {
+    const provider = getProvider(chainId);
+
+    const tx = await provider.getTransaction(receipt.transactionHash);
+
+    if (!tx) {
+      throw new Error("Could not load transaction for receipt");
+    }
+
+    // re-simulate
+    const res = await provider.call(
+      {
+        to: tx.to!,
+        from: tx.from,
+        data: tx.data,
+        value: tx.value,
+      },
+      receipt.blockNumber
+    );
+    if (!res) {
+      return null;
+    }
+
+    return res; // revert payload
+  } catch (err: unknown) {
+    const revertData = extractRevertData(err);
+
+    if (!revertData) {
+      return null;
+    }
+
+    return revertData; // revert payload
+  }
+}
+
+function extractRevertData(err: unknown): string | undefined {
+  const e = err as EthersCallRevertError;
+
+  // Most common cases:
+  if (e.data && e.data !== "0x") return e.data;
+  if (e.error?.data && e.error.data !== "0x") return e.error.data;
+  if (e.error?.error?.data && e.error.error.data !== "0x")
+    return e.error.error.data;
+
+  // Some RPCs embed revert data inside err.body JSON:
+  if (e.body) {
+    try {
+      const parsed = JSON.parse(e.body);
+      const data = parsed?.error?.data;
+      if (typeof data === "string" && data !== "0x") return data;
+    } catch {
+      return undefined;
+    }
+  }
+
+  return undefined;
+}
+
+/**
+ * Decodes and formats a SpokePool transaction revert reason
+ * @param receipt The transaction receipt (must have status 0 for failed tx)
+ * @param chainId The chain ID where the transaction was executed
+ * @returns Object containing the raw error name and formatted user-friendly message, or null if unable to decode
+ */
+export async function getSpokepoolRevertReason(
+  receipt: ethers.providers.TransactionReceipt,
+  chainId: number
+): Promise<SpokepoolRevertReason | null> {
+  if (!chainIsEvm(chainId)) {
+    console.warn("Cannot decode revert message on SVM chains");
+    return null;
+  }
+
+  if (receipt.status !== 0) {
+    // Not a failed transaction
+    return null;
+  }
+
+  try {
+    const revertData = await getRevertDataFromReceipt(receipt, chainId);
+    if (!revertData) {
+      return null;
+    }
+
+    const errorName = decodeSpokepoolError(revertData);
+    const formattedError = formatSpokepoolError(errorName);
+
+    return {
+      error: errorName,
+      formattedError,
+    };
+  } catch (error) {
+    console.error("Failed to decode SpokePool revert reason:", error);
+    return null;
+  }
+}

src/utils/url.ts

@@ -23,7 +23,7 @@ export function getBridgeUrlWithQueryParams({
     }
     return acc;
   }, {});
-  return "/bridge?" + new URLSearchParams(cleanParams).toString();
+  return "/bridge-and-swap?" + new URLSearchParams(cleanParams).toString();
 }
 
 export function buildSearchParams(

src/views/DepositStatus/components/DepositStatusUpperCard.tsx

@@ -59,6 +59,11 @@ export function DepositStatusUpperCard({
 
   const { isPMFormAvailable, handleNavigateToPMFGoogleForm } = usePMFForm();
 
+  const depositRevertMessage =
+    depositQuery?.data?.status === "deposit-reverted"
+      ? depositQuery.data.formattedError
+      : undefined;
+
   // This error indicates that the used deposit tx hash does not originate from
   // an Across SpokePool contract.
   if (depositQuery.error instanceof NoFundsDepositedLogError) {
@@ -109,7 +114,7 @@ export function DepositStatusUpperCard({
           )}
           <DepositRevertedRow>
             <Text size="lg" color="warning">
-              Deposit unsuccessful
+              {depositRevertMessage ?? "Deposit unsuccessful"}
             </Text>
             <a
               href={`${

src/views/DepositStatus/hooks/useDepositTracking.ts

@@ -85,6 +85,7 @@ export function useDepositTracking({
   useEffect(() => {
     const depositInfo = depositQuery.data;
 
+    // Wait for a successful deposit (or a revert)
     if (!depositInfo || depositInfo.status === "depositing") {
       return;
     }
@@ -104,11 +105,11 @@ export function useDepositTracking({
     // }
 
     // Check if the deposit is from the current user
-    const isFromCurrentUser =
-      depositInfo.depositLog.depositor.toNative() === account;
-    if (!isFromCurrentUser) {
-      return;
-    }
+    // const isFromCurrentUser =
+    //   depositInfo.depositLog.depositor.toNative() === account;
+    // if (!isFromCurrentUser) {
+    //   return;
+    // }
 
     // TODO
     //  Track deposit in Amplitude

src/views/DepositStatus/hooks/useDepositTracking/strategies/evm.ts

@@ -20,6 +20,7 @@
   findSwapMetaDataEventsFromTxHash,
   SwapMetaData,
 } from "utils/swapMetadata";
+import { getSpokepoolRevertReason } from "utils";
 
 /**
  * Strategy for handling EVM chain operations
@@ -36,6 +37,22 @@
     try {
       const deposit = await getDepositByTxHash(txHash, this.chainId);
 
+      if (deposit.depositTxReceipt.status === 0) {
+        const revertReason = await getSpokepoolRevertReason(
+          deposit.depositTxReceipt,
+          this.chainId
+        );
+
+        return {
+          depositTxHash: deposit.depositTxReceipt.transactionHash,
+          depositTimestamp: deposit.depositTimestamp,
+          status: "deposit-reverted",
+          depositLog: undefined,
+          error: revertReason?.error,
+          formattedError: revertReason?.formattedError,
+        };
+      }
+
       // Create a normalized response
       if (!deposit.depositTimestamp || !deposit.parsedDepositLog) {
         return {
@@ -48,10 +65,7 @@
       return {
         depositTxHash: deposit.depositTxReceipt.transactionHash,
         depositTimestamp: deposit.depositTimestamp,
-        status:
-          deposit.depositTxReceipt.status === 0
-            ? "deposit-reverted"
-            : "deposited",
+        status: "deposited",
         depositLog: deposit.parsedDepositLog,
       };
     } catch (error) {
@@ -67,7 +81,7 @@
    * @returns Fill information
    */
   async getFill(depositInfo: DepositedInfo): Promise<FillInfo> {
-    const depositId = depositInfo.depositLog?.depositId;
+    const depositId = depositInfo.depositLog.depositId;
     const originChainId = depositInfo.depositLog.originChainId;
     if (!depositId) {
       throw new Error("Deposit ID not found in deposit information");
@@ -313,8 +327,8 @@
    * @returns Local deposit format for storage
    */
   convertForDepositQuery(
     depositInfo: DepositedInfo,
     fromBridgePagePayload?: FromBridgePagePayload
   ): Deposit {
     throw new Error("Method not implemented.");
     // const config = getConfig();
@@ -384,8 +398,8 @@
    * @returns Local deposit format with fill information
    */
   convertForFillQuery(
     fillInfo: FilledInfo,
     bridgePayload: FromBridgePagePayload
   ): Deposit {
     throw new Error("Method not implemented.");
     // const config = getConfig();

src/views/DepositStatus/hooks/useDepositTracking/strategies/svm.ts

@@ -84,7 +84,7 @@ export class SVMStrategy implements IChainStrategy {
    * @returns Fill information
    */
   async getFill(depositInfo: DepositedInfo): Promise<FillInfo> {
-    const depositId = depositInfo.depositLog?.depositId;
+    const depositId = depositInfo.depositLog.depositId;
     const originChainId = depositInfo.depositLog.originChainId;
 
     if (!depositId) {

src/views/DepositStatus/hooks/useDepositTracking/types.ts

@@ -25,14 +25,19 @@ export type DepositInfo =
   | {
       depositTxHash: string;
       depositTimestamp: number;
-      status: "deposit-reverted" | "deposited";
+      status: "deposit-reverted";
+      depositLog: undefined;
+      error?: string | undefined;
+      formattedError?: string | undefined;
+    }
+  | {
+      depositTxHash: string;
+      depositTimestamp: number;
+      status: "deposited";
       depositLog: DepositData;
     };
 
-export type DepositedInfo = Extract<
-  DepositInfo,
-  { status: "deposit-reverted" | "deposited" }
->;
+export type DepositedInfo = Extract<DepositInfo, { status: "deposited" }>;
 
 /**
  * Common type for fill information