thirdweb 5.76.0 → 5.77.0-nightly-a0fabb205916a7b06938fafbea5d80d9506d342e-20241212000351

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

@@ -3,7 +3,9 @@
 import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
 import type React from "react";
 import type { JSX } from "react";
+import type { Chain } from "../../../../../chains/types.js";
 import { getChainMetadata } from "../../../../../chains/utils.js";
+import { getFunctionId } from "../../../../../utils/function-id.js";
 import { useChainContext } from "./provider.js";
 
 /**
@@ -155,19 +157,19 @@ export function ChainName({
 }: ChainNameProps) {
   const { chain } = useChainContext();
   const nameQuery = useQuery({
-    queryKey: ["_internal_chain_name_", chain.id] as const,
-    queryFn: async () => {
-      if (typeof nameResolver === "string") {
-        return nameResolver;
-      }
-      if (typeof nameResolver === "function") {
-        return nameResolver();
-      }
-      if (chain.name) {
-        return chain.name;
-      }
-      return getChainMetadata(chain).then((data) => data.name);
-    },
+    queryKey: [
+      "_internal_chain_name_",
+      chain.id,
+      {
+        resolver:
+          typeof nameResolver === "string"
+            ? nameResolver
+            : typeof nameResolver === "function"
+              ? getFunctionId(nameResolver)
+              : undefined,
+      },
+    ] as const,
+    queryFn: async () => fetchChainName({ chain, nameResolver }),
     ...queryOptions,
   });
 
@@ -183,3 +185,23 @@ export function ChainName({
 
   return <span {...restProps}>{displayValue}</span>;
 }
+
+/**
+ * @internal Exported for tests only
+ */
+export async function fetchChainName(props: {
+  chain: Chain;
+  nameResolver?: string | (() => string) | (() => Promise<string>);
+}) {
+  const { nameResolver, chain } = props;
+  if (typeof nameResolver === "string") {
+    return nameResolver;
+  }
+  if (typeof nameResolver === "function") {
+    return nameResolver();
+  }
+  if (chain.name) {
+    return chain.name;
+  }
+  return getChainMetadata(chain).then((data) => data.name);
+}

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

@@ -3,6 +3,7 @@
 import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
 import type { JSX } from "react";
 import type { ThirdwebContract } from "../../../../../contract/contract.js";
+import { getFunctionId } from "../../../../../utils/function-id.js";
 import { useNFTContext } from "./provider.js";
 import { getNFTInfo } from "./utils.js";
 
@@ -100,7 +101,7 @@ export function NFTDescription({
           typeof descriptionResolver === "string"
             ? descriptionResolver
             : typeof descriptionResolver === "function"
-              ? descriptionResolver.toString()
+              ? getFunctionId(descriptionResolver)
               : undefined,
       },
     ],

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

@@ -1,6 +1,9 @@
+"use client";
+
 import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
 import type { JSX } from "react";
 import type { ThirdwebContract } from "../../../../../contract/contract.js";
+import { getFunctionId } from "../../../../../utils/function-id.js";
 import { MediaRenderer } from "../../MediaRenderer/MediaRenderer.js";
 import type { MediaRendererProps } from "../../MediaRenderer/types.js";
 import { useNFTContext } from "./provider.js";
@@ -138,7 +141,7 @@ export function NFTMedia({
           typeof mediaResolver === "object"
             ? mediaResolver
             : typeof mediaResolver === "function"
-              ? mediaResolver.toString()
+              ? getFunctionId(mediaResolver)
               : undefined,
       },
     ],

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

@@ -1,6 +1,9 @@
+"use client";
+
 import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
 import type { JSX } from "react";
 import type { ThirdwebContract } from "../../../../../contract/contract.js";
+import { getFunctionId } from "../../../../../utils/function-id.js";
 import { useNFTContext } from "./provider.js";
 import { getNFTInfo } from "./utils.js";
 
@@ -100,7 +103,7 @@ export function NFTName({
           typeof nameResolver === "string"
             ? nameResolver
             : typeof nameResolver === "function"
-              ? nameResolver.toString()
+              ? getFunctionId(nameResolver)
               : undefined,
       },
     ],

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

@@ -1,3 +1,5 @@
+"use client";
+
 import { createContext, useContext } from "react";
 import type { ThirdwebContract } from "../../../../../contract/contract.js";
 

package/src/react/web/ui/prebuilt/Token/icon.tsx

@@ -1,9 +1,12 @@
+"use client";
+
 import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
 import type { JSX } from "react";
 import { getChainMetadata } from "../../../../../chains/utils.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../constants/addresses.js";
 import { getContract } from "../../../../../contract/contract.js";
 import { getContractMetadata } from "../../../../../extensions/common/read/getContractMetadata.js";
+import { getFunctionId } from "../../../../../utils/function-id.js";
 import { resolveScheme } from "../../../../../utils/ipfs.js";
 import { useTokenContext } from "./provider.js";
 
@@ -115,7 +118,19 @@ export function TokenIcon({
 }: TokenIconProps) {
   const { address, client, chain } = useTokenContext();
   const iconQuery = useQuery({
-    queryKey: ["_internal_token_icon_", chain.id, address] as const,
+    queryKey: [
+      "_internal_token_icon_",
+      chain.id,
+      address,
+      {
+        resolver:
+          typeof iconResolver === "string"
+            ? iconResolver
+            : typeof iconResolver === "function"
+              ? getFunctionId(iconResolver)
+              : undefined,
+      },
+    ] as const,
     queryFn: async () => {
       if (typeof iconResolver === "string") {
         return iconResolver;

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

@@ -0,0 +1,148 @@
+import { describe, expect, it } from "vitest";
+import { ANVIL_CHAIN } from "~test/chains.js";
+import {} from "~test/react-render.js";
+import { TEST_CLIENT } from "~test/test-clients.js";
+import {
+  UNISWAPV3_FACTORY_CONTRACT,
+  USDT_CONTRACT,
+} from "~test/test-contracts.js";
+import { ethereum } from "../../../../../chains/chain-definitions/ethereum.js";
+import { NATIVE_TOKEN_ADDRESS } from "../../../../../constants/addresses.js";
+import { getFunctionId } from "../../../../../utils/function-id.js";
+import { fetchTokenName, getQueryKeys } from "./name.js";
+
+const client = TEST_CLIENT;
+
+describe.runIf(process.env.TW_SECRET_KEY)("TokenName component", () => {
+  it("fetchTokenName should respect the nameResolver being a string", async () => {
+    const res = await fetchTokenName({
+      address: "thing",
+      client,
+      chain: ANVIL_CHAIN,
+      nameResolver: "tw",
+    });
+    expect(res).toBe("tw");
+  });
+
+  it("fetchTokenName should respect the nameResolver being a non-async function", async () => {
+    const res = await fetchTokenName({
+      address: "thing",
+      client,
+      chain: ANVIL_CHAIN,
+      nameResolver: () => "tw",
+    });
+
+    expect(res).toBe("tw");
+  });
+
+  it("fetchTokenName should respect the nameResolver being an async function", async () => {
+    const res = await fetchTokenName({
+      address: "thing",
+      client,
+      chain: ANVIL_CHAIN,
+      nameResolver: async () => {
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+        return "tw";
+      },
+    });
+
+    expect(res).toBe("tw");
+  });
+
+  it("fetchTokenName should work for contract with `name` function", async () => {
+    const res = await fetchTokenName({
+      address: USDT_CONTRACT.address,
+      client,
+      chain: USDT_CONTRACT.chain,
+    });
+
+    expect(res).toBe("Tether USD");
+  });
+
+  it("fetchTokenName should work for native token", async () => {
+    const res = await fetchTokenName({
+      address: NATIVE_TOKEN_ADDRESS,
+      client,
+      chain: ethereum,
+    });
+
+    expect(res).toBe("Ether");
+  });
+
+  it("fetchTokenName should try to fallback to the contract metadata if fails to resolves from `name()`", async () => {
+    // todo: find a contract with name in contractMetadata, but does not have a name function
+  });
+
+  it("fetchTokenName should throw in the end where all fallback solutions failed to resolve to any name", async () => {
+    await expect(() =>
+      fetchTokenName({
+        address: UNISWAPV3_FACTORY_CONTRACT.address,
+        client,
+        chain: UNISWAPV3_FACTORY_CONTRACT.chain,
+      }),
+    ).rejects.toThrowError(
+      "Failed to resolve name from both name() and contract metadata",
+    );
+  });
+
+  it("getQueryKeys should work without resolver", () => {
+    expect(getQueryKeys({ chainId: 1, address: "0x" })).toStrictEqual([
+      "_internal_token_name_",
+      1,
+      "0x",
+      {
+        resolver: undefined,
+      },
+    ]);
+  });
+
+  it("getQueryKeys should work with resolver being a string", () => {
+    expect(
+      getQueryKeys({ chainId: 1, address: "0x", nameResolver: "tw" }),
+    ).toStrictEqual([
+      "_internal_token_name_",
+      1,
+      "0x",
+      {
+        resolver: "tw",
+      },
+    ]);
+  });
+
+  it("getQueryKeys should work with resolver being a non-async fn that returns a string", () => {
+    const fn = () => "tw";
+    const fnId = getFunctionId(fn);
+    expect(
+      getQueryKeys({ chainId: 1, address: "0x", nameResolver: fn }),
+    ).toStrictEqual([
+      "_internal_token_name_",
+      1,
+      "0x",
+      {
+        resolver: fnId,
+      },
+    ]);
+  });
+
+  it("getQueryKeys should work with resolver being an async fn that returns a string", () => {
+    const fn = async () => {
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+      return "tw";
+    };
+    const fnId = getFunctionId(fn);
+    expect(
+      getQueryKeys({
+        chainId: 1,
+        address: "0x",
+        nameResolver: fn,
+      }),
+    ).toStrictEqual([
+      "_internal_token_name_",
+      1,
+      "0x",
+      {
+        resolver: fnId,
+      },
+    ]);
+  });
+});

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

@@ -3,11 +3,14 @@
 import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
 import type React from "react";
 import type { JSX } from "react";
+import type { Chain } from "../../../../../chains/types.js";
 import { getChainMetadata } from "../../../../../chains/utils.js";
+import type { ThirdwebClient } from "../../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../constants/addresses.js";
 import { getContract } from "../../../../../contract/contract.js";
 import { getContractMetadata } from "../../../../../extensions/common/read/getContractMetadata.js";
 import { name } from "../../../../../extensions/common/read/name.js";
+import { getFunctionId } from "../../../../../utils/function-id.js";
 import { useTokenContext } from "./provider.js";
 
 /**
@@ -157,33 +160,9 @@ export function TokenName({
 }: TokenNameProps) {
   const { address, client, chain } = useTokenContext();
   const nameQuery = useQuery({
-    queryKey: ["_internal_token_name_", chain.id, address] as const,
-    queryFn: async () => {
-      if (typeof nameResolver === "string") {
-        return nameResolver;
-      }
-      if (typeof nameResolver === "function") {
-        return nameResolver();
-      }
-      if (address.toLowerCase() === NATIVE_TOKEN_ADDRESS.toLowerCase()) {
-        // Don't wanna use `getChainNativeCurrencyName` because it has some side effect (it catches error and defaults to "ETH")
-        return getChainMetadata(chain).then((data) => data.nativeCurrency.name);
-      }
-      // Try to fetch the name from both the `name()` function and the contract metadata
-      // then prioritize the `name()`
-      const contract = getContract({ address, client, chain });
-      const [_name, contractMetadata] = await Promise.all([
-        name({ contract }),
-        getContractMetadata({ contract }),
-      ]);
-      if (!_name && !contractMetadata.name) {
-        throw new Error(
-          "Failed to resolve name from both name() and contract metadata",
-        );
-      }
-
-      return _name || contractMetadata.name;
-    },
+    queryKey: getQueryKeys({ chainId: chain.id, nameResolver, address }),
+    queryFn: async () =>
+      fetchTokenName({ address, chain, client, nameResolver }),
     ...queryOptions,
   });
 
@@ -195,7 +174,72 @@ export function TokenName({
     return fallbackComponent || null;
   }
 
-  const displayValue = formatFn ? formatFn(nameQuery.data) : nameQuery.data;
+  if (formatFn && typeof formatFn === "function") {
+    return <span {...restProps}>{formatFn(nameQuery.data)}</span>;
+  }
+
+  return <span {...restProps}>{nameQuery.data}</span>;
+}
+
+/**
+ * @internal Exported for tests only
+ */
+export async function fetchTokenName(props: {
+  address: string;
+  client: ThirdwebClient;
+  chain: Chain;
+  nameResolver?: string | (() => string) | (() => Promise<string>);
+}) {
+  const { nameResolver, address, client, chain } = props;
+  if (typeof nameResolver === "string") {
+    return nameResolver;
+  }
+  if (typeof nameResolver === "function") {
+    return nameResolver();
+  }
+  if (address.toLowerCase() === NATIVE_TOKEN_ADDRESS.toLowerCase()) {
+    // Don't wanna use `getChainName` because it has some side effect (it catches error and defaults to "ETH")
+    return getChainMetadata(chain).then((data) => data.nativeCurrency.name);
+  }
+
+  // Try to fetch the name from both the `name` function and the contract metadata
+  // then prioritize its result
+  const contract = getContract({ address, client, chain });
+  const [_name, contractMetadata] = await Promise.all([
+    name({ contract }).catch(() => undefined),
+    getContractMetadata({ contract }).catch(() => undefined),
+  ]);
+  if (typeof _name === "string") {
+    return _name;
+  }
+  if (typeof contractMetadata?.name === "string") {
+    return contractMetadata.name;
+  }
+  throw new Error(
+    "Failed to resolve name from both name() and contract metadata",
+  );
+}
 
-  return <span {...restProps}>{displayValue}</span>;
+/**
+ * @internal
+ */
+export function getQueryKeys(props: {
+  chainId: number;
+  address: string;
+  nameResolver?: string | (() => string) | (() => Promise<string>);
+}) {
+  const { chainId, address, nameResolver } = props;
+  return [
+    "_internal_token_name_",
+    chainId,
+    address,
+    {
+      resolver:
+        typeof nameResolver === "string"
+          ? nameResolver
+          : typeof nameResolver === "function"
+            ? getFunctionId(nameResolver)
+            : undefined,
+    },
+  ] as const;
 }

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

@@ -5,6 +5,7 @@ import { ethereum } from "../../../../../chains/chain-definitions/ethereum.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../constants/addresses.js";
 import { TokenName } from "./name.js";
 import { TokenProvider } from "./provider.js";
+import { TokenSymbol } from "./symbol.js";
 
 describe.runIf(process.env.TW_SECRET_KEY)("TokenProvider component", () => {
   it("should render children correctly", () => {
@@ -29,6 +30,7 @@ describe.runIf(process.env.TW_SECRET_KEY)("TokenProvider component", () => {
         chain={ethereum}
       >
         <TokenName />
+        <TokenSymbol />
       </TokenProvider>,
     );
 
@@ -40,5 +42,14 @@ describe.runIf(process.env.TW_SECRET_KEY)("TokenProvider component", () => {
         }),
       ).toBeInTheDocument(),
     );
+
+    waitFor(() =>
+      expect(
+        screen.getByText("ETH", {
+          exact: true,
+          selector: "span",
+        }),
+      ).toBeInTheDocument(),
+    );
   });
 });

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

@@ -1,30 +1,148 @@
 import { describe, expect, it } from "vitest";
-import { render, screen, waitFor } from "~test/react-render.js";
+import { ANVIL_CHAIN } from "~test/chains.js";
+import {} from "~test/react-render.js";
 import { TEST_CLIENT } from "~test/test-clients.js";
+import {
+  UNISWAPV3_FACTORY_CONTRACT,
+  USDT_CONTRACT,
+} from "~test/test-contracts.js";
 import { ethereum } from "../../../../../chains/chain-definitions/ethereum.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../constants/addresses.js";
-import { TokenProvider } from "./provider.js";
-import { TokenSymbol } from "./symbol.js";
+import { getFunctionId } from "../../../../../utils/function-id.js";
+import { fetchTokenSymbol, getQueryKeys } from "./symbol.js";
+
+const client = TEST_CLIENT;
 
 describe.runIf(process.env.TW_SECRET_KEY)("TokenSymbol component", () => {
-  it("should pass the address correctly to the children props", () => {
-    render(
-      <TokenProvider
-        address={NATIVE_TOKEN_ADDRESS}
-        client={TEST_CLIENT}
-        chain={ethereum}
-      >
-        <TokenSymbol />
-      </TokenProvider>,
-    );
+  it("fetchTokenSymbol should respect the symbolResolver being a string", async () => {
+    const res = await fetchTokenSymbol({
+      address: "thing",
+      client,
+      chain: ANVIL_CHAIN,
+      symbolResolver: "tw",
+    });
+    expect(res).toBe("tw");
+  });
+
+  it("fetchTokenSymbol should respect the symbolResolver being a non-async function", async () => {
+    const res = await fetchTokenSymbol({
+      address: "thing",
+      client,
+      chain: ANVIL_CHAIN,
+      symbolResolver: () => "tw",
+    });
+
+    expect(res).toBe("tw");
+  });
+
+  it("fetchTokenSymbol should respect the symbolResolver being an async function", async () => {
+    const res = await fetchTokenSymbol({
+      address: "thing",
+      client,
+      chain: ANVIL_CHAIN,
+      symbolResolver: async () => {
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+        return "tw";
+      },
+    });
+
+    expect(res).toBe("tw");
+  });
+
+  it("fetchTokenSymbol should work for contract with `symbol` function", async () => {
+    const res = await fetchTokenSymbol({
+      address: USDT_CONTRACT.address,
+      client,
+      chain: USDT_CONTRACT.chain,
+    });
+
+    expect(res).toBe("USDT");
+  });
+
+  it("fetchTokenSymbol should work for native token", async () => {
+    const res = await fetchTokenSymbol({
+      address: NATIVE_TOKEN_ADDRESS,
+      client,
+      chain: ethereum,
+    });
 
-    waitFor(() =>
-      expect(
-        screen.getByText("ETH", {
-          exact: true,
-          selector: "span",
-        }),
-      ).toBeInTheDocument(),
+    expect(res).toBe("ETH");
+  });
+
+  it("fetchTokenSymbol should try to fallback to the contract metadata if fails to resolves from `symbol()`", async () => {
+    // todo: find a contract with symbol in contractMetadata, but does not have a symbol function
+  });
+
+  it("fetchTokenSymbol should throw in the end where all fallback solutions failed to resolve to any symbol", async () => {
+    await expect(() =>
+      fetchTokenSymbol({
+        address: UNISWAPV3_FACTORY_CONTRACT.address,
+        client,
+        chain: UNISWAPV3_FACTORY_CONTRACT.chain,
+      }),
+    ).rejects.toThrowError(
+      "Failed to resolve symbol from both symbol() and contract metadata",
     );
   });
+
+  it("getQueryKeys should work without resolver", () => {
+    expect(getQueryKeys({ chainId: 1, address: "0x" })).toStrictEqual([
+      "_internal_token_symbol_",
+      1,
+      "0x",
+      {
+        resolver: undefined,
+      },
+    ]);
+  });
+
+  it("getQueryKeys should work with resolver being a string", () => {
+    expect(
+      getQueryKeys({ chainId: 1, address: "0x", symbolResolver: "tw" }),
+    ).toStrictEqual([
+      "_internal_token_symbol_",
+      1,
+      "0x",
+      {
+        resolver: "tw",
+      },
+    ]);
+  });
+
+  it("getQueryKeys should work with resolver being a non-async fn that returns a string", () => {
+    const fn = () => "tw";
+    const fnId = getFunctionId(fn);
+    expect(
+      getQueryKeys({ chainId: 1, address: "0x", symbolResolver: fn }),
+    ).toStrictEqual([
+      "_internal_token_symbol_",
+      1,
+      "0x",
+      {
+        resolver: fnId,
+      },
+    ]);
+  });
+
+  it("getQueryKeys should work with resolver being an async fn that returns a string", () => {
+    const fn = async () => {
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+      return "tw";
+    };
+    const fnId = getFunctionId(fn);
+    expect(
+      getQueryKeys({
+        chainId: 1,
+        address: "0x",
+        symbolResolver: fn,
+      }),
+    ).toStrictEqual([
+      "_internal_token_symbol_",
+      1,
+      "0x",
+      {
+        resolver: fnId,
+      },
+    ]);
+  });
 });