thirdweb 5.112.4 → 5.113.0

package/src/react/web/ui/x402/PaymentErrorModal.tsx

@@ -0,0 +1,261 @@
+"use client";
+import { useState } from "react";
+import { getCachedChain } from "../../../../chains/utils.js";
+import type { ThirdwebClient } from "../../../../client/client.js";
+import {
+  extractEvmChainId,
+  networkToCaip2ChainId,
+  type RequestedPaymentRequirements,
+} from "../../../../x402/schemas.js";
+import type { PaymentRequiredResult } from "../../../../x402/types.js";
+import { CustomThemeProvider } from "../../../core/design-system/CustomThemeProvider.js";
+import type { Theme } from "../../../core/design-system/index.js";
+import { spacing } from "../../../core/design-system/index.js";
+import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
+import { BuyWidget, type BuyWidgetProps } from "../Bridge/BuyWidget.js";
+import {
+  Container,
+  ModalHeader,
+  ScreenBottomContainer,
+} from "../components/basic.js";
+import { Button } from "../components/buttons.js";
+import { Modal } from "../components/Modal.js";
+import { Text } from "../components/text.js";
+
+type PaymentErrorModalProps = {
+  client: ThirdwebClient;
+  errorData: PaymentRequiredResult["responseBody"];
+  onRetry: () => void;
+  onCancel: () => void;
+  theme: Theme | "light" | "dark";
+  fundWalletOptions?: Partial<
+    Omit<
+      BuyWidgetProps,
+      | "client"
+      | "chain"
+      | "tokenAddress"
+      | "amount"
+      | "onSuccess"
+      | "onCancel"
+      | "theme"
+    >
+  >;
+  paymentRequirementsSelector?: (
+    paymentRequirements: RequestedPaymentRequirements[],
+  ) => RequestedPaymentRequirements | undefined;
+};
+
+type Screen = "error" | "buy-widget";
+
+/**
+ * @internal
+ */
+export function PaymentErrorModal(props: PaymentErrorModalProps) {
+  const {
+    client,
+    errorData,
+    onRetry,
+    onCancel,
+    theme,
+    fundWalletOptions,
+    paymentRequirementsSelector,
+  } = props;
+  const [screen, setScreen] = useState<Screen>("error");
+  const isInsufficientFunds = errorData.error === "insufficient_funds";
+  const wallet = useActiveWallet();
+
+  // Extract chain and token info from errorData for BuyWidget
+  const getBuyWidgetConfig = () => {
+    if (!errorData.accepts || errorData.accepts.length === 0) {
+      return null;
+    }
+
+    // Get payment requirements from errorData
+    const parsedPaymentRequirements = errorData.accepts;
+
+    // Get the current chain from wallet
+    const currentChain = wallet?.getChain();
+    const currentChainId = currentChain?.id;
+
+    // Select payment requirement using the same logic as wrapFetchWithPayment
+    const selectedRequirement = paymentRequirementsSelector
+      ? paymentRequirementsSelector(parsedPaymentRequirements)
+      : defaultPaymentRequirementsSelector(
+          parsedPaymentRequirements,
+          currentChainId,
+          "exact",
+          errorData.error,
+        );
+
+    if (!selectedRequirement) return null;
+
+    const caip2ChainId = networkToCaip2ChainId(selectedRequirement.network);
+    const chainId = extractEvmChainId(caip2ChainId);
+
+    if (!chainId) return null;
+
+    const chain = getCachedChain(chainId);
+    const tokenAddress = selectedRequirement.asset as `0x${string}`;
+
+    return {
+      chain,
+      tokenAddress,
+      amount: undefined,
+    };
+  };
+
+  const buyWidgetConfig = isInsufficientFunds ? getBuyWidgetConfig() : null;
+
+  if (screen === "buy-widget" && buyWidgetConfig) {
+    return (
+      <CustomThemeProvider theme={theme}>
+        <Modal
+          className="tw-payment-error-modal"
+          hideCloseIcon={false}
+          open={true}
+          setOpen={(open) => {
+            if (!open) {
+              onCancel();
+            }
+          }}
+          size="compact"
+          title="Top up your wallet"
+          crossContainerStyles={{
+            position: "absolute",
+            right: spacing.lg,
+            top: spacing.lg,
+            zIndex: 1,
+          }}
+        >
+          {/* BuyWidget without padding */}
+          <BuyWidget
+            client={client}
+            theme={theme}
+            chain={buyWidgetConfig.chain}
+            tokenAddress={buyWidgetConfig.tokenAddress}
+            amount={buyWidgetConfig.amount}
+            style={{
+              border: "none",
+              width: "100%",
+            }}
+            buttonLabel="Continue"
+            title="Get funds"
+            description="Top up your wallet to complete your payment."
+            {...fundWalletOptions}
+            onSuccess={() => {
+              // Close modal and retry the payment
+              onRetry();
+            }}
+            onCancel={() => {
+              // Go back to error screen
+              setScreen("error");
+            }}
+          />
+        </Modal>
+      </CustomThemeProvider>
+    );
+  }
+
+  // Error screen (default)
+  return (
+    <CustomThemeProvider theme={theme}>
+      <Modal
+        className="tw-payment-error-modal"
+        hideCloseIcon={true}
+        open={true}
+        setOpen={(open) => {
+          if (!open) {
+            onCancel();
+          }
+        }}
+        size="compact"
+        title="Payment Failed"
+      >
+        <Container p="lg">
+          <ModalHeader title="Payment failed" />
+
+          <Container
+            flex="column"
+            gap="lg"
+            style={{
+              paddingTop: spacing.lg,
+            }}
+          >
+            {/* Error Message */}
+            <Text
+              size="sm"
+              style={{
+                color: "inherit",
+                lineHeight: 1.5,
+              }}
+            >
+              {isInsufficientFunds
+                ? "Your wallet doesn't have enough funds to complete this payment. Please top up your wallet and try again."
+                : errorData.errorMessage ||
+                  "An error occurred while processing your payment."}
+            </Text>
+          </Container>
+        </Container>
+
+        {/* Action Buttons */}
+        <ScreenBottomContainer>
+          {isInsufficientFunds && buyWidgetConfig ? (
+            <>
+              <Button
+                fullWidth
+                gap="xs"
+                onClick={() => setScreen("buy-widget")}
+                variant="accent"
+              >
+                Top up your wallet
+              </Button>
+              <Button fullWidth gap="xs" onClick={onCancel} variant="secondary">
+                Cancel
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button fullWidth gap="xs" onClick={onRetry} variant="accent">
+                Try Again
+              </Button>
+              <Button fullWidth gap="xs" onClick={onCancel} variant="secondary">
+                Cancel
+              </Button>
+            </>
+          )}
+        </ScreenBottomContainer>
+      </Modal>
+    </CustomThemeProvider>
+  );
+}
+
+// Default payment requirement selector - same logic as in fetchWithPayment.ts
+function defaultPaymentRequirementsSelector(
+  paymentRequirements: RequestedPaymentRequirements[],
+  chainId: number | undefined,
+  scheme: "exact",
+  _error?: string,
+): RequestedPaymentRequirements | undefined {
+  if (!paymentRequirements.length) {
+    return undefined;
+  }
+
+  // If we have a chainId, find matching payment requirements
+  if (chainId !== undefined) {
+    const matchingPaymentRequirements = paymentRequirements.find(
+      (x) =>
+        extractEvmChainId(networkToCaip2ChainId(x.network)) === chainId &&
+        x.scheme === scheme,
+    );
+
+    if (matchingPaymentRequirements) {
+      return matchingPaymentRequirements;
+    }
+  }
+
+  // If no matching payment requirements, use the first payment requirement
+  const firstPaymentRequirement = paymentRequirements.find(
+    (x) => x.scheme === scheme,
+  );
+  return firstPaymentRequirement;
+}

package/src/react/web/ui/x402/SignInRequiredModal.tsx

@@ -0,0 +1,75 @@
+"use client";
+import { CustomThemeProvider } from "../../../core/design-system/CustomThemeProvider.js";
+import type { Theme } from "../../../core/design-system/index.js";
+import { spacing } from "../../../core/design-system/index.js";
+import {
+  Container,
+  ModalHeader,
+  ScreenBottomContainer,
+} from "../components/basic.js";
+import { Button } from "../components/buttons.js";
+import { Modal } from "../components/Modal.js";
+import { Text } from "../components/text.js";
+
+type SignInRequiredModalProps = {
+  theme: Theme | "light" | "dark";
+  onSignIn: () => void;
+  onCancel: () => void;
+};
+
+/**
+ * @internal
+ */
+export function SignInRequiredModal(props: SignInRequiredModalProps) {
+  const { theme, onSignIn, onCancel } = props;
+
+  return (
+    <CustomThemeProvider theme={theme}>
+      <Modal
+        className="tw-signin-required-modal"
+        hideCloseIcon={true}
+        open={true}
+        setOpen={(open) => {
+          if (!open) {
+            onCancel();
+          }
+        }}
+        size="compact"
+        title="Sign in required"
+      >
+        <Container p="lg">
+          <ModalHeader title="Sign in required" />
+
+          <Container
+            flex="column"
+            gap="lg"
+            style={{
+              paddingTop: spacing.lg,
+            }}
+          >
+            {/* Description */}
+            <Text
+              size="sm"
+              style={{
+                color: "inherit",
+                lineHeight: 1.5,
+              }}
+            >
+              Account required to complete payment, please sign in to continue.
+            </Text>
+          </Container>
+        </Container>
+
+        {/* Action Buttons */}
+        <ScreenBottomContainer>
+          <Button fullWidth gap="xs" onClick={onSignIn} variant="accent">
+            Sign in
+          </Button>
+          <Button fullWidth gap="xs" onClick={onCancel} variant="secondary">
+            Cancel
+          </Button>
+        </ScreenBottomContainer>
+      </Modal>
+    </CustomThemeProvider>
+  );
+}

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.112.4";
+export const version = "5.113.0";

package/src/wallets/coinbase/coinbase-web.ts

@@ -474,6 +474,16 @@ async function switchChainCoinbaseWalletSDK(
   provider: ProviderInterface,
   chain: Chain,
 ) {
+  // check if chain is already connected
+  const connectedChainId = (await provider.request({
+    method: "eth_chainId",
+  })) as string | number;
+  const connectedChain = getCachedChain(normalizeChainId(connectedChainId));
+  if (connectedChain?.id === chain.id) {
+    // chain is already connected, no need to switch
+    return;
+  }
+
   const chainIdHex = numberToHex(chain.id);
 
   try {

package/src/x402/facilitator.ts

@@ -107,7 +107,7 @@ const DEFAULT_BASE_URL = "https://api.thirdweb.com/v1/payments/x402";
 
  * ```
  *
- * @bridge x402
+ * @x402
  */
 export function facilitator(
   config: ThirdwebX402FacilitatorConfig,

package/src/x402/fetchWithPayment.ts

@@ -23,7 +23,7 @@ import { createPaymentHeader } from "./sign.js";
  * @param fetch - The fetch function to wrap (typically globalThis.fetch)
  * @param client - The thirdweb client used to access RPC infrastructure
  * @param wallet - The wallet used to sign payment messages
- * @param maxValue - The maximum allowed payment amount in base units (defaults to 1 USDC)
+ * @param maxValue - The maximum allowed payment amount in base units
  * @returns A wrapped fetch function that handles 402 responses automatically
  *
  * @example
@@ -46,13 +46,18 @@ import { createPaymentHeader } from "./sign.js";
  * @throws {Error} If a payment has already been attempted for this request
  * @throws {Error} If there's an error creating the payment header
  *
- * @bridge x402
+ * @x402
  */
 export function wrapFetchWithPayment(
   fetch: typeof globalThis.fetch,
   client: ThirdwebClient,
   wallet: Wallet,
-  maxValue?: bigint,
+  options?: {
+    maxValue?: bigint;
+    paymentRequirementsSelector?: (
+      paymentRequirements: RequestedPaymentRequirements[],
+    ) => RequestedPaymentRequirements | undefined;
+  },
 ) {
   return async (input: RequestInfo, init?: RequestInit) => {
     const response = await fetch(input, init);
@@ -78,12 +83,14 @@ export function wrapFetchWithPayment(
         "Wallet not connected. Please connect your wallet to continue.",
       );
     }
-    const selectedPaymentRequirements = defaultPaymentRequirementsSelector(
-      parsedPaymentRequirements,
-      chain.id,
-      "exact",
-      error,
-    );
+    const selectedPaymentRequirements = options?.paymentRequirementsSelector
+      ? options.paymentRequirementsSelector(parsedPaymentRequirements)
+      : defaultPaymentRequirementsSelector(
+          parsedPaymentRequirements,
+          chain.id,
+          "exact",
+          error,
+        );
 
     if (!selectedPaymentRequirements) {
       throw new Error(
@@ -92,11 +99,11 @@ export function wrapFetchWithPayment(
     }
 
     if (
-      maxValue &&
-      BigInt(selectedPaymentRequirements.maxAmountRequired) > maxValue
+      options?.maxValue &&
+      BigInt(selectedPaymentRequirements.maxAmountRequired) > options.maxValue
     ) {
       throw new Error(
-        `Payment amount exceeds maximum allowed (currently set to ${maxValue} in base units)`,
+        `Payment amount exceeds maximum allowed (currently set to ${options.maxValue} in base units)`,
       );
     }
 

package/src/x402/settle-payment.ts

@@ -122,7 +122,7 @@ import {
  *
  * @public
  * @beta
- * @bridge x402
+ * @x402
  */
 export async function settlePayment(
   args: SettlePaymentArgs,

package/src/x402/verify-payment.ts

@@ -70,7 +70,7 @@ import {
  *
  * @public
  * @beta
- * @bridge x402
+ * @x402
  */
 export async function verifyPayment(
   args: PaymentArgs,