[Bridge] Improve error handling in PayEmbed

joaquim-verges · joaquim-verges · commit 6c38672caeed · 2025-05-21T19:21:23.000-07:00
diff --git a/.changeset/blue-comics-doubt.md b/.changeset/blue-comics-doubt.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Better error messages in PayEmbed
diff --git a/packages/thirdweb/src/bridge/Buy.ts b/packages/thirdweb/src/bridge/Buy.ts
@@ -4,6 +4,7 @@ import type { ThirdwebClient } from "../client/client.js";
 import { getThirdwebBaseUrl } from "../utils/domains.js";
 import { getClientFetch } from "../utils/fetch.js";
 import { stringify } from "../utils/json.js";
+import { BridgeApiError } from "./types/Errors.js";
 import type { PreparedQuote, Quote } from "./types/Quote.js";
 
 /**
@@ -127,9 +128,12 @@ export async function quote(options: quote.Options): Promise<quote.Result> {
   const response = await clientFetch(url.toString());
   if (!response.ok) {
     const errorJson = await response.json();
-    throw new Error(
-      `${errorJson.code} | ${errorJson.message} - ${errorJson.correlationId}`,
-    );
+    throw new BridgeApiError({
+      code: errorJson.code || "UNKNOWN_ERROR",
+      message: errorJson.message || response.statusText,
+      correlationId: errorJson.correlationId || undefined,
+      statusCode: response.status,
+    });
   }
 
   const { data }: { data: Quote } = await response.json();
@@ -357,9 +361,12 @@ export async function prepare(
   });
   if (!response.ok) {
     const errorJson = await response.json();
-    throw new Error(
-      `${errorJson.code} | ${errorJson.message} - ${errorJson.correlationId}`,
-    );
+    throw new BridgeApiError({
+      code: errorJson.code || "UNKNOWN_ERROR",
+      message: errorJson.message || response.statusText,
+      correlationId: errorJson.correlationId || undefined,
+      statusCode: response.status,
+    });
   }
 
   const { data }: { data: PreparedQuote } = await response.json();
diff --git a/packages/thirdweb/src/bridge/Chains.ts b/packages/thirdweb/src/bridge/Chains.ts
@@ -2,6 +2,7 @@ import type { ThirdwebClient } from "../client/client.js";
 import { getThirdwebBaseUrl } from "../utils/domains.js";
 import { getClientFetch } from "../utils/fetch.js";
 import type { Chain } from "./types/Chain.js";
+import { BridgeApiError } from "./types/Errors.js";
 
 /**
  * Retrieves supported Universal Bridge chains.
@@ -59,7 +60,12 @@ export async function chains(options: chains.Options): Promise<chains.Result> {
   const response = await clientFetch(url.toString());
   if (!response.ok) {
     const errorJson = await response.json();
-    throw new Error(`${errorJson.code} | ${errorJson.message}`);
+    throw new BridgeApiError({
+      code: errorJson.code || "UNKNOWN_ERROR",
+      message: errorJson.message || response.statusText,
+      correlationId: errorJson.correlationId || undefined,
+      statusCode: response.status,
+    });
   }
 
   const { data }: { data: Chain[] } = await response.json();
diff --git a/packages/thirdweb/src/bridge/Onramp.ts b/packages/thirdweb/src/bridge/Onramp.ts
@@ -3,6 +3,7 @@ import type { ThirdwebClient } from "../client/client.js";
 import { getThirdwebBaseUrl } from "../utils/domains.js";
 import { getClientFetch } from "../utils/fetch.js";
 import { stringify } from "../utils/json.js";
+import { BridgeApiError } from "./types/Errors.js";
 import type { RouteStep } from "./types/Route.js";
 import type { Token } from "./types/Token.js";
 
@@ -191,9 +192,12 @@ export async function prepare(
 
   if (!response.ok) {
     const errorJson = await response.json();
-    throw new Error(
-      `${errorJson.code || response.status} | ${errorJson.message || response.statusText} - ${errorJson.correlationId || "N/A"}`,
-    );
+    throw new BridgeApiError({
+      code: errorJson.code || "UNKNOWN_ERROR",
+      message: errorJson.message || response.statusText,
+      correlationId: errorJson.correlationId || undefined,
+      statusCode: response.status,
+    });
   }
 
   const { data }: { data: OnrampPrepareQuoteResponseData } =
diff --git a/packages/thirdweb/src/bridge/OnrampStatus.ts b/packages/thirdweb/src/bridge/OnrampStatus.ts
@@ -2,6 +2,7 @@ import type { Hex as ox__Hex } from "ox";
 import type { ThirdwebClient } from "../client/client.js";
 import { getThirdwebBaseUrl } from "../utils/domains.js";
 import { getClientFetch } from "../utils/fetch.js";
+import { BridgeApiError } from "./types/Errors.js";
 
 /**
  * Retrieves the status of an Onramp session created via {@link Bridge.Onramp.prepare}. The
@@ -72,9 +73,12 @@ export async function status(options: status.Options): Promise<status.Result> {
   const response = await clientFetch(url.toString());
   if (!response.ok) {
     const errorJson = await response.json();
-    throw new Error(
-      `${errorJson.code || response.status} | ${errorJson.message || response.statusText} - ${errorJson.correlationId || "N/A"}`,
-    );
+    throw new BridgeApiError({
+      code: errorJson.code || "UNKNOWN_ERROR",
+      message: errorJson.message || response.statusText,
+      correlationId: errorJson.correlationId || undefined,
+      statusCode: response.status,
+    });
   }
 
   const { data }: { data: status.Result } = await response.json();
diff --git a/packages/thirdweb/src/bridge/Routes.ts b/packages/thirdweb/src/bridge/Routes.ts
@@ -2,6 +2,7 @@ import type { Address as ox__Address, Hex as ox__Hex } from "ox";
 import type { ThirdwebClient } from "../client/client.js";
 import { getThirdwebBaseUrl } from "../utils/domains.js";
 import { getClientFetch } from "../utils/fetch.js";
+import { BridgeApiError } from "./types/Errors.js";
 import type { Route } from "./types/Route.js";
 
 /**
@@ -162,7 +163,12 @@ export async function routes(options: routes.Options): Promise<routes.Result> {
   const response = await clientFetch(url.toString());
   if (!response.ok) {
     const errorJson = await response.json();
-    throw new Error(`${errorJson.code} | ${errorJson.message}`);
+    throw new BridgeApiError({
+      code: errorJson.code || "UNKNOWN_ERROR",
+      message: errorJson.message || response.statusText,
+      correlationId: errorJson.correlationId || undefined,
+      statusCode: response.status,
+    });
   }
 
   const { data }: { data: Route[] } = await response.json();
diff --git a/packages/thirdweb/src/bridge/Sell.ts b/packages/thirdweb/src/bridge/Sell.ts
@@ -4,6 +4,7 @@ import type { ThirdwebClient } from "../client/client.js";
 import { getThirdwebBaseUrl } from "../utils/domains.js";
 import { getClientFetch } from "../utils/fetch.js";
 import { stringify } from "../utils/json.js";
+import { BridgeApiError } from "./types/Errors.js";
 import type { PreparedQuote, Quote } from "./types/Quote.js";
 
 /**
@@ -126,9 +127,12 @@ export async function quote(options: quote.Options): Promise<quote.Result> {
   const response = await clientFetch(url.toString());
   if (!response.ok) {
     const errorJson = await response.json();
-    throw new Error(
-      `${errorJson.code} | ${errorJson.message} - ${errorJson.correlationId}`,
-    );
+    throw new BridgeApiError({
+      code: errorJson.code || "UNKNOWN_ERROR",
+      message: errorJson.message || response.statusText,
+      correlationId: errorJson.correlationId || undefined,
+      statusCode: response.status,
+    });
   }
 
   const { data }: { data: Quote } = await response.json();
@@ -348,9 +352,12 @@ export async function prepare(
   });
   if (!response.ok) {
     const errorJson = await response.json();
-    throw new Error(
-      `${errorJson.code} | ${errorJson.message} - ${errorJson.correlationId}`,
-    );
+    throw new BridgeApiError({
+      code: errorJson.code || "UNKNOWN_ERROR",
+      message: errorJson.message || response.statusText,
+      correlationId: errorJson.correlationId || undefined,
+      statusCode: response.status,
+    });
   }
 
   const { data }: { data: PreparedQuote } = await response.json();
diff --git a/packages/thirdweb/src/bridge/Status.ts b/packages/thirdweb/src/bridge/Status.ts
@@ -3,6 +3,7 @@ import type { Chain } from "../chains/types.js";
 import type { ThirdwebClient } from "../client/client.js";
 import { getThirdwebBaseUrl } from "../utils/domains.js";
 import { getClientFetch } from "../utils/fetch.js";
+import { BridgeApiError } from "./types/Errors.js";
 import type { Status } from "./types/Status.js";
 
 /**
@@ -115,9 +116,12 @@ export async function status(options: status.Options): Promise<status.Result> {
   const response = await clientFetch(url.toString());
   if (!response.ok) {
     const errorJson = await response.json();
-    throw new Error(
-      `${errorJson.code} | ${errorJson.message} - ${errorJson.correlationId}`,
-    );
+    throw new BridgeApiError({
+      code: errorJson.code || "UNKNOWN_ERROR",
+      message: errorJson.message || response.statusText,
+      correlationId: errorJson.correlationId || undefined,
+      statusCode: response.status,
+    });
   }
 
   const { data }: { data: Status } = await response.json();
diff --git a/packages/thirdweb/src/bridge/Transfer.ts b/packages/thirdweb/src/bridge/Transfer.ts
@@ -4,6 +4,7 @@ import type { ThirdwebClient } from "../client/client.js";
 import { getThirdwebBaseUrl } from "../utils/domains.js";
 import { getClientFetch } from "../utils/fetch.js";
 import { stringify } from "../utils/json.js";
+import { BridgeApiError } from "./types/Errors.js";
 import type { PreparedQuote } from "./types/Quote.js";
 
 /**
@@ -212,9 +213,12 @@ export async function prepare(
   });
   if (!response.ok) {
     const errorJson = await response.json();
-    throw new Error(
-      `${errorJson.code} | ${errorJson.message} - ${errorJson.correlationId}`,
-    );
+    throw new BridgeApiError({
+      code: errorJson.code || "UNKNOWN_ERROR",
+      message: errorJson.message || response.statusText,
+      correlationId: errorJson.correlationId || undefined,
+      statusCode: response.status,
+    });
   }
 
   const { data }: { data: PreparedQuote } = await response.json();
diff --git a/packages/thirdweb/src/bridge/types/Errors.ts b/packages/thirdweb/src/bridge/types/Errors.ts
@@ -0,0 +1,24 @@
+type ErrorCode =
+  | "INVALID_INPUT"
+  | "ROUTE_NOT_FOUND"
+  | "AMOUNT_TOO_LOW"
+  | "AMOUNT_TOO_HIGH"
+  | "UNKNOWN_ERROR";
+
+export class BridgeApiError extends Error {
+  code: ErrorCode;
+  correlationId?: string;
+  statusCode: number;
+
+  constructor(args: {
+    code: ErrorCode;
+    message: string;
+    statusCode: number;
+    correlationId?: string;
+  }) {
+    super(args.message);
+    this.code = args.code;
+    this.correlationId = args.correlationId;
+    this.statusCode = args.statusCode;
+  }
+}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/PayWIthCreditCard.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/PayWIthCreditCard.tsx
@@ -85,7 +85,7 @@ export function PayWithCreditCard(props: {
             {props.value
               ? `${props.currency.symbol}${formatNumber(
                   Number(props.value),
-                  6,
+                  2,
                 )}`
               : "--"}
           </Text>
diff --git a/packages/thirdweb/src/react/web/utils/errors.ts b/packages/thirdweb/src/react/web/utils/errors.ts
@@ -1,3 +1,5 @@
+import { BridgeApiError } from "../../../bridge/types/Errors.js";
+
 type ApiError = {
   code: string;
   title: string;
@@ -12,6 +14,14 @@ type ApiError = {
 
 // biome-ignore lint/suspicious/noExplicitAny: <explanation>
 export function getErrorMessage(err: any): ApiError {
+  if (err instanceof BridgeApiError) {
+    return {
+      code: err.code,
+      title: "Failed to Find Quote",
+      message: getErrorMessageFromBridgeApiError(err),
+    };
+  }
+
   if (typeof err.error === "object" && err.error.code) {
     if (err.error.code === "MINIMUM_PURCHASE_AMOUNT") {
       return {
@@ -29,6 +39,18 @@ export function getErrorMessage(err: any): ApiError {
     code: "UNABLE_TO_GET_PRICE_QUOTE",
     title: "Failed to Find Quote",
     message:
+      err.message ||
       "We couldn't get a quote for this token pair. Select another token or pay with card.",
   };
 }
+
+function getErrorMessageFromBridgeApiError(err: BridgeApiError) {
+  let msg = err.message;
+  if (msg.includes("Details")) {
+    msg = msg.substring(0, msg.indexOf("Details"));
+  }
+  if (msg.includes("{")) {
+    msg = msg.substring(0, msg.indexOf("{"));
+  }
+  return msg;
+}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"thirdweb": patch
 +---
++
 +Better error messages in PayEmbed