thirdweb 5.80.0 → 5.80.1-nightly-ce3e850fdbf34911e20919ecc2674e4a63f08fa3-20241225000333

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

@@ -0,0 +1,83 @@
+import { describe, expect, it, vi } from "vitest";
+import { act, renderHook } from "~test/react-render.js";
+import { useShowMore } from "./useShowMore.js";
+
+describe("useShowMore", () => {
+  it("should initialize with the correct number of items to show", () => {
+    const { result } = renderHook(() => useShowMore(5, 3));
+    expect(result.current.itemsToShow).toBe(5);
+  });
+
+  it("should increase itemsToShow when the last item comes into view", () => {
+    const { result } = renderHook(() => useShowMore(5, 3));
+
+    // Simulate the last item coming into view
+    const lastItem = document.createElement("div");
+    const observerCallback = vi.fn();
+
+    const observer = new IntersectionObserver(observerCallback);
+    vi.spyOn(window, "IntersectionObserver").mockImplementation((callback) => {
+      observerCallback.mockImplementation(callback);
+      return observer;
+    });
+
+    act(() => {
+      result.current.lastItemRef(lastItem);
+      observerCallback([{ isIntersecting: true }]); // Simulate intersection
+    });
+
+    expect(result.current.itemsToShow).toBe(8); // 5 + 3
+  });
+
+  it("should not increase itemsToShow if the last item is not in view", () => {
+    const { result } = renderHook(() => useShowMore(5, 3));
+
+    // Simulate the last item not coming into view
+    const lastItem = document.createElement("div");
+
+    const observerCallback = vi.fn();
+
+    const observer = new IntersectionObserver(observerCallback);
+    vi.spyOn(window, "IntersectionObserver").mockImplementation((callback) => {
+      observerCallback.mockImplementation(callback);
+      return observer;
+    });
+
+    act(() => {
+      result.current.lastItemRef(lastItem);
+      observerCallback([{ isIntersecting: false }]); // Simulate no intersection
+    });
+
+    expect(result.current.itemsToShow).toBe(5); // Should remain unchanged
+  });
+
+  it("should handle multiple intersections correctly", () => {
+    const { result } = renderHook(() => useShowMore(5, 3));
+
+    // Simulate the last item coming into view multiple times
+    const lastItem = document.createElement("div");
+
+    const observerCallback = vi.fn();
+
+    const observer = new IntersectionObserver(observerCallback);
+    vi.spyOn(window, "IntersectionObserver").mockImplementation((callback) => {
+      observerCallback.mockImplementation(callback);
+      return observer;
+    });
+
+    act(() => {
+      result.current.lastItemRef(lastItem);
+
+      // First intersection
+      observerCallback([{ isIntersecting: true }]);
+
+      // Second intersection
+      observerCallback([{ isIntersecting: true }]);
+
+      // Third intersection
+      observerCallback([{ isIntersecting: true }]);
+    });
+
+    expect(result.current.itemsToShow).toBe(14); // 5 + (3 * 3)
+  });
+});

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

@@ -13,13 +13,15 @@ describe.runIf(process.env.TW_SECRET_KEY)("ChainName component", () => {
         <ChainName />
       </ChainProvider>,
     );
-    await waitFor(() =>
-      expect(
-        screen.getByText("Ethereum", {
-          exact: true,
-          selector: "span",
-        }),
-      ).toBeInTheDocument(),
+    await waitFor(
+      () =>
+        expect(
+          screen.getByText("Ethereum", {
+            exact: true,
+            selector: "span",
+          }),
+        ).toBeInTheDocument(),
+      { timeout: 2000 },
     );
   });
 
@@ -29,13 +31,15 @@ describe.runIf(process.env.TW_SECRET_KEY)("ChainName component", () => {
         <ChainName />
       </ChainProvider>,
     );
-    await waitFor(() =>
-      expect(
-        screen.getByText("Ethereum Mainnet", {
-          exact: true,
-          selector: "span",
-        }),
-      ).toBeInTheDocument(),
+    await waitFor(
+      () =>
+        expect(
+          screen.getByText("Ethereum Mainnet", {
+            exact: true,
+            selector: "span",
+          }),
+        ).toBeInTheDocument(),
+      { timeout: 2000 },
     );
   });
 
@@ -45,13 +49,15 @@ describe.runIf(process.env.TW_SECRET_KEY)("ChainName component", () => {
         <ChainName formatFn={(str: string) => `${str}-formatted`} />
       </ChainProvider>,
     );
-    await waitFor(() =>
-      expect(
-        screen.getByText("Ethereum-formatted", {
-          exact: true,
-          selector: "span",
-        }),
-      ).toBeInTheDocument(),
+    await waitFor(
+      () =>
+        expect(
+          screen.getByText("Ethereum-formatted", {
+            exact: true,
+            selector: "span",
+          }),
+        ).toBeInTheDocument(),
+      { timeout: 2000 },
     );
   });
 
@@ -62,13 +68,15 @@ describe.runIf(process.env.TW_SECRET_KEY)("ChainName component", () => {
       </ChainProvider>,
     );
 
-    await waitFor(() =>
-      expect(
-        screen.getByText("oops", {
-          exact: true,
-          selector: "span",
-        }),
-      ).toBeInTheDocument(),
+    await waitFor(
+      () =>
+        expect(
+          screen.getByText("oops", {
+            exact: true,
+            selector: "span",
+          }),
+        ).toBeInTheDocument(),
+      { timeout: 2000 },
     );
   });
 

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

@@ -4,7 +4,8 @@ import {
   DROP1155_CONTRACT,
   UNISWAPV3_FACTORY_CONTRACT,
 } from "~test/test-contracts.js";
-import { fetchNftMedia } from "./media.js";
+import { getFunctionId } from "../../../../../utils/function-id.js";
+import { fetchNftMedia, getQueryKey } from "./media.js";
 
 describe.runIf(process.env.TW_SECRET_KEY)("NFTMedia", () => {
   it("fetchNftMedia should work with ERC721", async () => {
@@ -74,4 +75,60 @@ describe.runIf(process.env.TW_SECRET_KEY)("NFTMedia", () => {
       }),
     ).rejects.toThrowError("Failed to resolve NFT info");
   });
+
+  it("getQueryKey should work without mediaResolver", () => {
+    expect(getQueryKey({ chainId: 1, tokenId: 1n })).toStrictEqual([
+      "_internal_nft_media_",
+      1,
+      "1",
+      {
+        resolver: undefined,
+      },
+    ]);
+  });
+
+  it("getQueryKey should work with mediaResolver being an object", () => {
+    expect(
+      getQueryKey({
+        chainId: 1,
+        tokenId: 1n,
+        mediaResolver: {
+          src: "test",
+          poster: "test",
+        },
+      }),
+    ).toStrictEqual([
+      "_internal_nft_media_",
+      1,
+      "1",
+      {
+        resolver: {
+          src: "test",
+          poster: "test",
+        },
+      },
+    ]);
+  });
+
+  it("getQueryKey should work with mediaResolver being a function", () => {
+    const fn = () => ({
+      src: "test",
+      poster: "test",
+    });
+    const fnId = getFunctionId(fn);
+    expect(
+      getQueryKey({
+        chainId: 1,
+        tokenId: 1n,
+        mediaResolver: fn,
+      }),
+    ).toStrictEqual([
+      "_internal_nft_media_",
+      1,
+      "1",
+      {
+        resolver: fnId,
+      },
+    ]);
+  });
 });

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

@@ -132,19 +132,11 @@ export function NFTMedia({
 }: NFTMediaProps) {
   const { contract, tokenId } = useNFTContext();
   const mediaQuery = useQuery({
-    queryKey: [
-      "_internal_nft_media_",
-      contract.chain.id,
-      tokenId.toString(),
-      {
-        resolver:
-          typeof mediaResolver === "object"
-            ? mediaResolver
-            : typeof mediaResolver === "function"
-              ? getFunctionId(mediaResolver)
-              : undefined,
-      },
-    ],
+    queryKey: getQueryKey({
+      chainId: contract.chain.id,
+      tokenId,
+      mediaResolver,
+    }),
     queryFn: async (): Promise<NFTMediaInfo> =>
       fetchNftMedia({ mediaResolver, contract, tokenId }),
     ...queryOptions,
@@ -168,6 +160,33 @@ export function NFTMedia({
   );
 }
 
+/**
+ * @internal
+ */
+export function getQueryKey(props: {
+  chainId: number;
+  tokenId: bigint;
+  mediaResolver?:
+    | NFTMediaInfo
+    | (() => NFTMediaInfo)
+    | (() => Promise<NFTMediaInfo>);
+}) {
+  const { chainId, tokenId, mediaResolver } = props;
+  return [
+    "_internal_nft_media_",
+    chainId,
+    tokenId.toString(),
+    {
+      resolver:
+        typeof mediaResolver === "object"
+          ? mediaResolver
+          : typeof mediaResolver === "function"
+            ? getFunctionId(mediaResolver)
+            : undefined,
+    },
+  ] as const;
+}
+
 /**
  * @internal Exported for tests only
  */

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

@@ -4,7 +4,8 @@ import {
   DROP1155_CONTRACT,
   UNISWAPV3_FACTORY_CONTRACT,
 } from "~test/test-contracts.js";
-import { fetchNftName } from "./name.js";
+import { getFunctionId } from "../../../../../utils/function-id.js";
+import { fetchNftName, getQueryKey } from "./name.js";
 
 describe.runIf(process.env.TW_SECRET_KEY)("NFTName", () => {
   it("fetchNftName should work with ERC721", async () => {
@@ -58,4 +59,39 @@ describe.runIf(process.env.TW_SECRET_KEY)("NFTName", () => {
       }),
     ).rejects.toThrowError("Failed to resolve NFT info");
   });
+
+  it("getQueryKey should work without nameResolver", () => {
+    expect(getQueryKey({ chainId: 1, tokenId: 1n })).toStrictEqual([
+      "_internal_nft_name_",
+      1,
+      "1",
+      { resolver: undefined },
+    ]);
+  });
+
+  it("getQueryKey should work with nameResolver being a string", () => {
+    expect(
+      getQueryKey({ chainId: 1, tokenId: 1n, nameResolver: "test" }),
+    ).toStrictEqual(["_internal_nft_name_", 1, "1", { resolver: "test" }]);
+  });
+
+  it("getQueryKey should work with nameResolver being a () => string", () => {
+    const fn = () => "test";
+    const fnId = getFunctionId(fn);
+    expect(
+      getQueryKey({ chainId: 1, tokenId: 1n, nameResolver: fn }),
+    ).toStrictEqual(["_internal_nft_name_", 1, "1", { resolver: fnId }]);
+  });
+
+  it("getQueryKey should work with nameResolver being a async () => string", () => {
+    const fn = async () => "test";
+    const fnId = getFunctionId(fn);
+    expect(
+      getQueryKey({
+        chainId: 1,
+        tokenId: 1n,
+        nameResolver: fn,
+      }),
+    ).toStrictEqual(["_internal_nft_name_", 1, "1", { resolver: fnId }]);
+  });
 });

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

@@ -94,19 +94,11 @@ export function NFTName({
   const { contract, tokenId } = useNFTContext();
 
   const nameQuery = useQuery({
-    queryKey: [
-      "_internal_nft_name_",
-      contract.chain.id,
-      tokenId.toString(),
-      {
-        resolver:
-          typeof nameResolver === "string"
-            ? nameResolver
-            : typeof nameResolver === "function"
-              ? getFunctionId(nameResolver)
-              : undefined,
-      },
-    ],
+    queryKey: getQueryKey({
+      chainId: contract.chain.id,
+      tokenId,
+      nameResolver,
+    }),
     queryFn: async (): Promise<string> =>
       fetchNftName({ nameResolver, contract, tokenId }),
     ...queryOptions,
@@ -122,6 +114,30 @@ export function NFTName({
   return <span {...restProps}>{nameQuery.data}</span>;
 }
 
+/**
+ * @internal
+ */
+export function getQueryKey(props: {
+  chainId: number;
+  tokenId: bigint;
+  nameResolver?: string | (() => string) | (() => Promise<string>);
+}) {
+  const { chainId, tokenId, nameResolver } = props;
+  return [
+    "_internal_nft_name_",
+    chainId,
+    tokenId.toString(),
+    {
+      resolver:
+        typeof nameResolver === "string"
+          ? nameResolver
+          : typeof nameResolver === "function"
+            ? getFunctionId(nameResolver)
+            : undefined,
+    },
+  ] as const;
+}
+
 /**
  * @internal Exported for tests
  */

package/src/react/web/utils/resolveMimeType.test.ts

@@ -0,0 +1,63 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { getMimeTypeFromUrl } from "../ui/MediaRenderer/mime/mime.js";
+import { resolveMimeType } from "./resolveMimeType.js";
+
+// Mock the getMimeTypeFromUrl function
+vi.mock("../ui/MediaRenderer/mime/mime.js", () => ({
+  getMimeTypeFromUrl: vi.fn(),
+}));
+
+describe("resolveMimeType", () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it("should return undefined for empty URL", async () => {
+    const result = await resolveMimeType();
+    expect(result).toBeUndefined();
+  });
+
+  it("should return mime type from URL if available", async () => {
+    vi.mocked(getMimeTypeFromUrl).mockReturnValue("image/jpeg");
+    const result = await resolveMimeType("https://example.com/image.jpg");
+    expect(result).toBe("image/jpeg");
+    expect(getMimeTypeFromUrl).toHaveBeenCalledWith(
+      "https://example.com/image.jpg",
+    );
+  });
+
+  it("should fetch mime type from server if not available from URL", async () => {
+    vi.mocked(getMimeTypeFromUrl).mockReturnValue(null);
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      headers: new Headers({ "content-type": "application/json" }),
+    });
+
+    const result = await resolveMimeType("https://example.com/data.json");
+    expect(result).toBe("application/json");
+    expect(global.fetch).toHaveBeenCalledWith("https://example.com/data.json", {
+      method: "HEAD",
+    });
+  });
+
+  it("should return undefined if fetch fails", async () => {
+    vi.mocked(getMimeTypeFromUrl).mockReturnValue(null);
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: false,
+    });
+
+    const result = await resolveMimeType("https://example.com/unknown");
+    expect(result).toBeUndefined();
+  });
+
+  it("should return undefined if content-type header is missing", async () => {
+    vi.mocked(getMimeTypeFromUrl).mockReturnValue(null);
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      headers: new Headers(),
+    });
+
+    const result = await resolveMimeType("https://example.com/noheader");
+    expect(result).toBeUndefined();
+  });
+});

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.80.0";
+export const version = "5.80.1-nightly-ce3e850fdbf34911e20919ecc2674e4a63f08fa3-20241225000333";

package/src/wallets/manager/index.ts

@@ -247,11 +247,11 @@ export function createConnectionManager(storage: AsyncStorage) {
   const switchActiveWalletChain = async (chain: Chain) => {
     const wallet = activeWalletStore.getValue();
     if (!wallet) {
-      throw new Error("no wallet found");
+      throw new Error("No active wallet found");
     }
 
     if (!wallet.switchChain) {
-      throw new Error("wallet does not support switching chains");
+      throw new Error("Wallet does not support switching chains");
     }
 
     if (wallet.id === "smart") {

package/src/wallets/smart/smart.test.ts

@@ -5,7 +5,7 @@ import { generateAccount } from "../utils/generateAccount.js";
 import { connectSmartWallet, disconnectSmartWallet } from "./index.js";
 import { smartWallet } from "./smart-wallet.js";
 
-describe("Smart Wallet Index", () => {
+describe.runIf(process.env.TW_SECRET_KEY)("Smart Wallet Index", () => {
   const chain = defineChain(1); // Ethereum mainnet
   const client = TEST_CLIENT;