thirdweb 5.121.2 → 5.121.4

package/src/react/web/ui/ConnectWallet/screens/ManageWalletScreen.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { render, screen } from "../../../../../../test/src/react-render.js";
 import { TEST_CLIENT } from "../../../../../../test/src/test-clients.js";

package/src/react/web/ui/ConnectWallet/screens/PrivateKey.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { render } from "~test/react-render.js";
 import { TEST_CLIENT } from "~test/test-clients.js";

package/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { render } from "~test/react-render.js";
 import { TEST_CLIENT } from "~test/test-clients.js";

package/src/react/web/ui/ConnectWallet/screens/SendFunds.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it, vi } from "vitest";
 import { render } from "~test/react-render.js";
 import { TEST_CLIENT } from "~test/test-clients.js";

package/src/react/web/ui/ConnectWallet/screens/SignatureScreen.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { userEvent } from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { TEST_ACCOUNT_A } from "~test/test-wallets.js";

package/src/react/web/ui/ConnectWallet/screens/StartScreen.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { render } from "~test/react-render.js";
 import { TEST_CLIENT } from "~test/test-clients.js";

package/src/react/web/ui/MediaRenderer/MediaRenderer.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import React from "react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import {

package/src/react/web/ui/MediaRenderer/icons.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { render } from "~test/react-render.js";
 import {

package/src/react/web/ui/MediaRenderer/useResolvedMediaType.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { TEST_CLIENT } from "~test/test-clients.js";
 import { resolveMediaTypeFromUri } from "./useResolvedMediaType.js";

package/src/react/web/ui/SiteEmbed.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { render, waitFor } from "../../../../test/src/react-render.js";
 import { TEST_CLIENT } from "../../../../test/src/test-clients.js";

package/src/react/web/ui/SiteLink.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { render, waitFor } from "../../../../test/src/react-render.js";
 import { TEST_CLIENT } from "../../../../test/src/test-clients.js";

package/src/react/web/ui/TransactionButton/TransactionButton.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import {
   afterAll,
   afterEach,

package/src/react/web/ui/components/ChainIcon.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { TEST_CONTRACT_URI } from "~test/ipfs-uris.js";
 import { render } from "~test/react-render.js";

package/src/react/web/ui/hooks/useCopyClipboard.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { act, renderHook } from "~test/react-render.js";
 import { useClipboard } from "./useCopyClipboard.js";

package/src/react/web/ui/hooks/useDebouncedValue.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { act, renderHook } from "~test/react-render.js";
 import { useDebouncedValue } from "./useDebouncedValue.js";

package/src/react/web/ui/hooks/useShowMore.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it, vi } from "vitest";
 import { act, renderHook } from "~test/react-render.js";
 import { useShowMore } from "./useShowMore.js";
@@ -16,10 +17,15 @@ describe("useShowMore", () => {
     const observerCallback = vi.fn();
 
     const observer = new IntersectionObserver(observerCallback);
-    vi.spyOn(window, "IntersectionObserver").mockImplementation((callback) => {
-      observerCallback.mockImplementation(callback);
-      return observer;
-    });
+    vi.spyOn(window, "IntersectionObserver").mockImplementation(
+      class {
+        constructor(callback: IntersectionObserverCallback) {
+          observerCallback.mockImplementation(callback);
+          // biome-ignore lint/correctness/noConstructorReturn: test mock
+          return observer;
+        }
+      } as unknown as typeof IntersectionObserver,
+    );
 
     act(() => {
       result.current.lastItemRef(lastItem);
@@ -38,10 +44,15 @@ describe("useShowMore", () => {
     const observerCallback = vi.fn();
 
     const observer = new IntersectionObserver(observerCallback);
-    vi.spyOn(window, "IntersectionObserver").mockImplementation((callback) => {
-      observerCallback.mockImplementation(callback);
-      return observer;
-    });
+    vi.spyOn(window, "IntersectionObserver").mockImplementation(
+      class {
+        constructor(callback: IntersectionObserverCallback) {
+          observerCallback.mockImplementation(callback);
+          // biome-ignore lint/correctness/noConstructorReturn: test mock
+          return observer;
+        }
+      } as unknown as typeof IntersectionObserver,
+    );
 
     act(() => {
       result.current.lastItemRef(lastItem);
@@ -60,10 +71,15 @@ describe("useShowMore", () => {
     const observerCallback = vi.fn();
 
     const observer = new IntersectionObserver(observerCallback);
-    vi.spyOn(window, "IntersectionObserver").mockImplementation((callback) => {
-      observerCallback.mockImplementation(callback);
-      return observer;
-    });
+    vi.spyOn(window, "IntersectionObserver").mockImplementation(
+      class {
+        constructor(callback: IntersectionObserverCallback) {
+          observerCallback.mockImplementation(callback);
+          // biome-ignore lint/correctness/noConstructorReturn: test mock
+          return observer;
+        }
+      } as unknown as typeof IntersectionObserver,
+    );
 
     act(() => {
       result.current.lastItemRef(lastItem);

package/src/react/web/ui/prebuilt/Account/address.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { render, screen, waitFor } from "~test/react-render.js";
 import { TEST_CLIENT } from "~test/test-clients.js";

package/src/react/web/ui/prebuilt/Account/avatar.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { render, screen, waitFor } from "~test/react-render.js";
 import { TEST_CLIENT } from "~test/test-clients.js";

package/src/react/web/ui/prebuilt/Account/balance.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { describe, expect, it } from "vitest";
 import { VITALIK_WALLET } from "~test/addresses.js";

package/src/react/web/ui/prebuilt/Account/name.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { render, screen, waitFor } from "~test/react-render.js";
 import { TEST_CLIENT } from "~test/test-clients.js";

package/src/react/web/ui/prebuilt/Chain/icon.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { render, waitFor } from "~test/react-render.js";
 import { TEST_CLIENT } from "~test/test-clients.js";

package/src/react/web/ui/prebuilt/Chain/name.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { render, screen, waitFor } from "~test/react-render.js";
 import { ethereum } from "../../../../../chains/chain-definitions/ethereum.js";

package/src/react/web/ui/prebuilt/Chain/provider.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { render, screen, waitFor } from "~test/react-render.js";
 import { ethereum } from "../../../../../chains/chain-definitions/ethereum.js";

package/src/react/web/ui/prebuilt/NFT/description.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import {
   DOODLES_CONTRACT,

package/src/react/web/ui/prebuilt/NFT/media.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import {
   DOODLES_CONTRACT,

package/src/react/web/ui/prebuilt/NFT/name.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import {
   DOODLES_CONTRACT,

package/src/react/web/ui/prebuilt/NFT/provider.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { type FC, useContext } from "react";
 import { describe, expect, it, vi } from "vitest";
 import { render, renderHook, screen, waitFor } from "~test/react-render.js";

package/src/react/web/ui/prebuilt/Token/name.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { ANVIL_CHAIN } from "~test/chains.js";
 import { TEST_CLIENT } from "~test/test-clients.js";

package/src/react/web/ui/prebuilt/Token/provider.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { render, screen, waitFor } from "~test/react-render.js";
 import { TEST_CLIENT } from "~test/test-clients.js";

package/src/react/web/ui/prebuilt/Token/symbol.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { ANVIL_CHAIN } from "~test/chains.js";
 import { TEST_CLIENT } from "~test/test-clients.js";

package/src/react/web/ui/prebuilt/Wallet/icon.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 /** biome-ignore-all lint/nursery/useUniqueElementIds: "id" is not a html attribute here - TODO: stop using 'id' as a prop on JSX elements */
 import { describe, expect, it } from "vitest";
 import { render, waitFor } from "~test/react-render.js";

package/src/react/web/ui/prebuilt/Wallet/name.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 /** biome-ignore-all lint/nursery/useUniqueElementIds: FIXME: do not use "id" as a prop on JSX elements */
 import { describe, expect, it } from "vitest";
 import { render, waitFor } from "~test/react-render.js";

package/src/react/web/ui/prebuilt/thirdweb/BuyDirectListingButton/BuyDirectListingButton.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { render, screen } from "~test/react-render.js";
 import { TEST_CLIENT } from "~test/test-clients.js";

package/src/react/web/ui/prebuilt/thirdweb/ClaimButton/ClaimButton.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { ANVIL_CHAIN } from "~test/chains.js";
 import { TEST_CONTRACT_URI } from "~test/ipfs-uris.js";

package/src/react/web/ui/prebuilt/thirdweb/CreateDirectListingButton/CreateDirectListingButton.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { render, screen } from "~test/react-render.js";
 import { TEST_CLIENT } from "~test/test-clients.js";

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

@@ -5,6 +5,7 @@ import type { ThirdwebClient } from "../../../../client/client.js";
 import {
   extractEvmChainId,
   networkToCaip2ChainId,
+  parsePaymentRequirementsForDisplay,
   type RequestedPaymentRequirements,
 } from "../../../../x402/schemas.js";
 import type { PaymentRequiredResult } from "../../../../x402/types.js";
@@ -25,6 +26,7 @@ import { Text } from "../components/text.js";
 type PaymentErrorModalProps = {
   client: ThirdwebClient;
   errorData: PaymentRequiredResult["responseBody"];
+  requestUrl?: string;
   onRetry: () => void;
   onCancel: () => void;
   theme: Theme | "light" | "dark";
@@ -54,6 +56,7 @@ export function PaymentErrorModal(props: PaymentErrorModalProps) {
   const {
     client,
     errorData,
+    requestUrl,
     onRetry,
     onCancel,
     theme,
@@ -66,13 +69,15 @@ export function PaymentErrorModal(props: PaymentErrorModalProps) {
 
   // Extract chain and token info from errorData for BuyWidget
   const getBuyWidgetConfig = () => {
-    if (!errorData.accepts || errorData.accepts.length === 0) {
+    // Get payment requirements from errorData
+    const parsedPaymentRequirements = parsePaymentRequirementsForDisplay(
+      errorData,
+      requestUrl,
+    );
+    if (parsedPaymentRequirements.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;

package/src/react/web/utils/canFitWideModal.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
 import { wideModalScreenThreshold } from "../ui/ConnectWallet/constants.js";
 import { canFitWideModal } from "./canFitWideModal.js";

package/src/react/web/wallets/in-app/CountrySelector.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it, vi } from "vitest";
 import {
   fireEvent,

package/src/react/web/wallets/in-app/InputSelectionUI.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it, vi } from "vitest";
 import { render, screen } from "../../../../../test/src/react-render.js";
 import { getCountrySelector } from "./CountrySelector.js";

package/src/react/web/wallets/shared/ConnectWalletSocialOptions.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { describe, expect, it, vi } from "vitest";
 import {
   fireEvent,

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.121.2";
+export const version = "5.121.4";

package/src/wallets/in-app/web/lib/auth/redirect-state.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { beforeEach, describe, expect, it } from "vitest";
 import { consumeRedirectState, storeRedirectState } from "./redirect-state.js";
 

package/src/wallets/in-app/web/lib/get-url-token.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { getUrlToken } from "./get-url-token.js";
 

package/src/wallets/in-app/web/utils/iFrameCommunication/IframeCommunicator.test.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { IframeCommunicator } from "./IframeCommunicator.js";
 

package/src/x402/encode.ts

@@ -1,4 +1,6 @@
 import type { ExactEvmPayload } from "x402/types";
+import { cachedTextDecoder } from "../utils/text-decoder.js";
+import { cachedTextEncoder } from "../utils/text-encoder.js";
 import type {
   RequestedPaymentPayload,
   RequestedPaymentRequirements,
@@ -27,7 +29,7 @@ export function encodePayment(payment: RequestedPaymentPayload): string {
       ) as ExactEvmPayload["authorization"],
     },
   };
-  return safeBase64Encode(JSON.stringify(safe));
+  return base64EncodeUtf8(JSON.stringify(safe));
 }
 
 /**
@@ -37,7 +39,7 @@ export function encodePayment(payment: RequestedPaymentPayload): string {
  * @returns The decoded and validated PaymentPayload object
  */
 export function decodePayment(payment: string): RequestedPaymentPayload {
-  const decoded = safeBase64Decode(payment);
+  const decoded = base64DecodeUtf8(payment);
   const parsed = JSON.parse(decoded);
 
   const obj: RequestedPaymentPayload = {
@@ -93,3 +95,45 @@ export function safeBase64Decode(data: string): string {
   }
   return Buffer.from(data, "base64").toString("utf-8");
 }
+
+/**
+ * Encodes a string as UTF-8 and then to base64
+ *
+ * @param data - The string to encode
+ * @returns The base64 encoded UTF-8 bytes
+ */
+function base64EncodeUtf8(data: string): string {
+  if (
+    typeof globalThis !== "undefined" &&
+    typeof globalThis.btoa === "function"
+  ) {
+    const bytes = cachedTextEncoder().encode(data);
+    let binary = "";
+    for (const byte of bytes) {
+      binary += String.fromCharCode(byte);
+    }
+    return globalThis.btoa(binary);
+  }
+  return Buffer.from(data, "utf-8").toString("base64");
+}
+
+/**
+ * Decodes a base64 string and interprets the bytes as UTF-8
+ *
+ * @param data - The base64 encoded string
+ * @returns The decoded string
+ */
+export function base64DecodeUtf8(data: string): string {
+  if (
+    typeof globalThis !== "undefined" &&
+    typeof globalThis.atob === "function"
+  ) {
+    const binary = globalThis.atob(data);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) {
+      bytes[i] = binary.charCodeAt(i);
+    }
+    return cachedTextDecoder().decode(bytes);
+  }
+  return Buffer.from(data, "base64").toString("utf-8");
+}