thirdweb 5.94.0 → 5.94.2

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapScreenContent.tsx

@@ -12,10 +12,7 @@ import type { Account } from "../../../../../../../wallets/interfaces/wallet.js"
 import type { PayUIOptions } from "../../../../../../core/hooks/connection/ConnectButtonProps.js";
 import { useWalletBalance } from "../../../../../../core/hooks/others/useWalletBalance.js";
 import { useBuyWithCryptoQuote } from "../../../../../../core/hooks/pay/useBuyWithCryptoQuote.js";
-import {
-  defaultMessage,
-  getErrorMessage,
-} from "../../../../../utils/errors.js";
+import { getErrorMessage } from "../../../../../utils/errors.js";
 import type { PayEmbedConnectOptions } from "../../../../PayEmbed.js";
 import {
   Drawer,
@@ -301,9 +298,14 @@ export function SwapScreenContent(props: {
                 />
               </Text>
             ) : (
-              <Text color="danger" size="xs" center multiline>
-                {errorMsg.message || defaultMessage}
-              </Text>
+              <div>
+                <Text color="danger" size="xs" center multiline>
+                  {errorMsg.title}
+                </Text>
+                <Text size="xs" center multiline>
+                  {errorMsg.message}
+                </Text>
+              </div>
             )}
           </div>
         )}
@@ -311,7 +313,10 @@ export function SwapScreenContent(props: {
         {!errorMsg && isNotEnoughBalance && (
           <div>
             <Text color="danger" size="xs" center multiline>
-              Insufficient funds
+              Insufficient Funds
+            </Text>
+            <Text size="xs" center multiline>
+              Select another token or pay with a debit card.
             </Text>
           </div>
         )}

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/TokenSelectorScreen.tsx

@@ -276,7 +276,7 @@ export function TokenSelectorScreen(props: {
               >
                 <CardStackIcon width={iconSize.md} height={iconSize.md} />
                 <Text size="sm" color="primaryText">
-                  Pay with credit card
+                  Pay with a debit card
                 </Text>
               </Container>
             </Button>
@@ -362,7 +362,7 @@ function WalletRowWithBalances(props: {
         ) : (
           <Container style={{ padding: spacing.sm }}>
             <Text size="sm" color="secondaryText">
-              Insufficient funds
+              Insufficient Funds
             </Text>
           </Container>
         )}

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/TransferConfirmationScreen.tsx

@@ -1,6 +1,6 @@
 import { CheckCircledIcon } from "@radix-ui/react-icons";
 import { useQuery } from "@tanstack/react-query";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import type { Chain } from "../../../../../../../chains/types.js";
 import { getCachedChain } from "../../../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
@@ -34,6 +34,7 @@ import { type ERC20OrNativeToken, isNativeToken } from "../../nativeToken.js";
 import { Step } from "../Stepper.js";
 import type { PayerInfo } from "../types.js";
 import { ConnectorLine } from "./ConfirmationScreen.js";
+import { ErrorText } from "./ErrorText.js";
 import { SwapSummary } from "./SwapSummary.js";
 
 type TransferConfirmationScreenProps = {
@@ -109,6 +110,42 @@ export function TransferConfirmationScreen(
     refetchInterval: 30 * 1000,
   });
 
+  const uiErrorMessage = useMemo(() => {
+    if (step === "approve" && status.id === "error" && status.error) {
+      if (status.error.toLowerCase().includes("user rejected")) {
+        return {
+          title: "Failed to Approve",
+          message: "Your wallet rejected the approval request.",
+        };
+      }
+      return {
+        title: "Failed to Approve",
+        message:
+          "Your wallet failed to approve the transaction for an unknown reason. Please try again or contact support.",
+      };
+    }
+
+    if (
+      (step === "transfer" || step === "execute") &&
+      status.id === "error" &&
+      status.error
+    ) {
+      if (status.error.toLowerCase().includes("user rejected")) {
+        return {
+          title: "Failed to Confirm",
+          message: "Your wallet rejected the confirmation request.",
+        };
+      }
+      return {
+        title: "Failed to Confirm",
+        message:
+          "Your wallet failed to confirm the transaction for an unknown reason. Please try again or contact support.",
+      };
+    }
+
+    return undefined;
+  }, [step, status]);
+
   if (transferQuery.isLoading) {
     return (
       <Container p="lg">
@@ -190,15 +227,12 @@ export function TransferConfirmationScreen(
         </>
       )}
 
-      {status.id === "error" && (
+      {uiErrorMessage && (
         <>
-          <Container flex="row" gap="xs" center="both" color="danger">
-            <Text color="danger" size="sm" style={{ textAlign: "center" }}>
-              {step === "transfer"
-                ? `${status.error || "Failed to Transfer"}`
-                : "Failed to Execute"}
-            </Text>
-          </Container>
+          <ErrorText
+            title={uiErrorMessage.title}
+            message={uiErrorMessage.message}
+          />
           <Spacer y="md" />
         </>
       )}

package/src/react/web/utils/errors.ts

@@ -1,6 +1,7 @@
 type ApiError = {
   code: string;
-  message?: string;
+  title: string;
+  message: string;
   data?: {
     minimumAmountUSDCents?: string;
     requestedAmountUSDCents?: string;
@@ -9,19 +10,25 @@ type ApiError = {
   };
 };
 
-export const defaultMessage = "Unable to get price quote";
 // biome-ignore lint/suspicious/noExplicitAny: <explanation>
 export function getErrorMessage(err: any): ApiError {
   if (typeof err.error === "object" && err.error.code) {
     if (err.error.code === "MINIMUM_PURCHASE_AMOUNT") {
       return {
         code: "MINIMUM_PURCHASE_AMOUNT",
-        message: "Purchase amount is too low",
+        title: "Amount Too Low",
+        message:
+          "The requested amount is less than the minimum purchase. Try another provider or amount.",
       };
     }
   }
+
+  console.error(err);
+
   return {
     code: "UNABLE_TO_GET_PRICE_QUOTE",
-    message: defaultMessage,
+    title: "Failed to Find Quote",
+    message:
+      "We couldn't get a quote for this token pair. Select another token or pay with a debit card.",
   };
 }

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.94.0";
+export const version = "5.94.2";

package/src/wallets/injected/index.ts

@@ -63,6 +63,9 @@ export async function connectEip1193Wallet({
       });
     } catch (e) {
       console.error(e);
+      if (extractErrorMessage(e)?.toLowerCase()?.includes("rejected")) {
+        throw e;
+      }
       await new Promise((resolve) => setTimeout(resolve, 500));
     }
     attempts++;
@@ -375,3 +378,16 @@ async function switchChain(provider: EIP1193Provider, chain: Chain) {
     });
   }
 }
+
+function extractErrorMessage(e: unknown) {
+  if (e instanceof Error) {
+    return e.message;
+  }
+  if (typeof e === "string") {
+    return e;
+  }
+  if (typeof e === "object" && e !== null) {
+    return JSON.stringify(e);
+  }
+  return String(e);
+}

package/src/wallets/smart/lib/calls.ts

@@ -97,11 +97,35 @@ export async function predictAddress(args: {
         accountSalt && isHex(accountSalt)
           ? accountSalt
           : stringToHex(accountSalt ?? "");
-      return readContract({
-        contract: factoryContract,
-        method: "function getAddress(address, bytes) returns (address)",
-        params: [adminAddress, saltHex],
-      });
+      let result: string | undefined;
+      let retries = 0;
+      const maxRetries = 3;
+
+      while (retries <= maxRetries) {
+        try {
+          result = await readContract({
+            contract: factoryContract,
+            method: "function getAddress(address, bytes) returns (address)",
+            params: [adminAddress, saltHex],
+          });
+          break;
+        } catch (error) {
+          if (retries === maxRetries) {
+            throw error;
+          }
+
+          // Exponential backoff: 2^(retries + 1) * 100ms (200ms, 400ms, 800ms)
+          const delay = 2 ** (retries + 1) * 100;
+          await new Promise((resolve) => setTimeout(resolve, delay));
+          retries++;
+        }
+      }
+      if (!result) {
+        throw new Error(
+          `No smart account address found for admin address ${adminAddress} and salt ${accountSalt}`,
+        );
+      }
+      return result;
     },
     {
       cacheKey: `${args.factoryContract.chain.id}-${args.factoryContract.address}-${args.adminAddress}-${args.accountSalt}`,