thirdweb 5.76.1 → 5.77.0

package/src/extensions/prebuilts/process-ref-deployments.ts

@@ -0,0 +1,167 @@
+import type { Chain } from "../../chains/types.js";
+import type { ThirdwebClient } from "../../client/client.js";
+import { encodeAbiParameters } from "../../utils/abi/encodeAbiParameters.js";
+import type { DynamicParams } from "../../utils/any-evm/deploy-metadata.js";
+import type { Account } from "../../wallets/interfaces/wallet.js";
+import { deployPublishedContract } from "./deploy-published.js";
+
+export type ImplementationConstructorParam = {
+  defaultValue?: string;
+  dynamicValue?: DynamicParams;
+};
+
+type ProcessRefDeploymentsOptions = {
+  client: ThirdwebClient;
+  chain: Chain;
+  account: Account;
+  paramValue: string | ImplementationConstructorParam;
+};
+
+export async function processRefDeployments(
+  options: ProcessRefDeploymentsOptions,
+): Promise<string | string[]> {
+  const { client, account, chain, paramValue } = options;
+
+  if (typeof paramValue === "object") {
+    if (
+      "defaultValue" in paramValue &&
+      paramValue.defaultValue &&
+      paramValue.defaultValue.length > 0
+    ) {
+      return paramValue.defaultValue;
+    }
+
+    if ("dynamicValue" in paramValue && paramValue.dynamicValue) {
+      const dynamicValue = paramValue.dynamicValue;
+      const contracts = dynamicValue.refContracts;
+
+      if (dynamicValue.type === "address") {
+        if (!contracts || contracts.length === 0 || !contracts[0]?.contractId) {
+          throw new Error("Invalid or empty param value");
+        }
+        const salt =
+          contracts[0]?.salt && contracts[0]?.salt.length > 0
+            ? contracts[0]?.salt
+            : "thirdweb";
+
+        const addr = await deployPublishedContract({
+          client,
+          chain,
+          account,
+          contractId: contracts[0]?.contractId,
+          publisher: contracts[0]?.publisherAddress,
+          version: contracts[0]?.version,
+          salt,
+        });
+
+        return addr;
+      }
+
+      if (dynamicValue.type === "address[]") {
+        if (!contracts || contracts.length === 0) {
+          throw new Error("Invalid or empty param value");
+        }
+        const addressArray = [];
+
+        for (const c of contracts) {
+          const salt = c?.salt && c?.salt.length > 0 ? c?.salt : "thirdweb";
+
+          addressArray.push(
+            await deployPublishedContract({
+              client,
+              chain,
+              account,
+              contractId: c.contractId,
+              publisher: c.publisherAddress,
+              version: c.version,
+              salt,
+            }),
+          );
+        }
+
+        return addressArray;
+      }
+
+      if (dynamicValue.type === "bytes") {
+        if (!dynamicValue.paramsToEncode) {
+          throw new Error("Invalid or empty param value");
+        }
+        const paramsToEncode = dynamicValue.paramsToEncode[0];
+
+        if (paramsToEncode) {
+          const types = [];
+          const values = [];
+          for (const v of paramsToEncode) {
+            types.push(v.type);
+
+            if (v.defaultValue) {
+              values.push(v.defaultValue);
+            } else if (v.dynamicValue) {
+              values.push(
+                await processRefDeployments({
+                  client,
+                  account,
+                  chain,
+                  paramValue: v,
+                }),
+              );
+            }
+          }
+
+          return encodeAbiParameters(
+            types.map((t) => {
+              return { type: t };
+            }),
+            values,
+          );
+        }
+      }
+
+      if (dynamicValue.type === "bytes[]") {
+        if (!dynamicValue.paramsToEncode) {
+          throw new Error("Invalid or empty param value");
+        }
+        const bytesArray = [];
+        const paramArray = dynamicValue.paramsToEncode;
+
+        for (const a of paramArray) {
+          const paramsToEncode = a;
+
+          if (paramsToEncode) {
+            const types = [];
+            const values = [];
+            for (const v of paramsToEncode) {
+              types.push(v.type);
+
+              if (v.defaultValue) {
+                values.push(v.defaultValue);
+              } else if (v.dynamicValue) {
+                values.push(
+                  await processRefDeployments({
+                    client,
+                    account,
+                    chain,
+                    paramValue: v,
+                  }),
+                );
+              }
+            }
+
+            bytesArray.push(
+              encodeAbiParameters(
+                types.map((t) => {
+                  return { type: t };
+                }),
+                values,
+              ),
+            );
+          }
+        }
+
+        return bytesArray;
+      }
+    }
+  }
+
+  return paramValue as string;
+}

package/src/extensions/thirdweb/write/publish.ts

@@ -78,6 +78,7 @@ export function publishContract(
         changelog: options.metadata.changelog,
         compositeAbi: options.metadata.compositeAbi,
         constructorParams: options.metadata.constructorParams,
+        implConstructorParams: options.metadata.implConstructorParams,
         defaultExtensions: options.metadata.defaultExtensions,
         defaultModules: options.metadata.defaultModules,
         deployType: options.metadata.deployType,

package/src/react/core/utils/storage.ts

@@ -1,7 +1,7 @@
 import type { AsyncStorage } from "../../../utils/storage/AsyncStorage.js";
 import type { AuthArgsType } from "../../../wallets/in-app/core/authentication/types.js";
 
-const LAST_AUTH_PROVIDER_STORAGE_KEY = "lastAuthProvider";
+export const LAST_AUTH_PROVIDER_STORAGE_KEY = "lastAuthProvider";
 
 export async function setLastAuthProvider(
   authProvider: AuthArgsType["strategy"],

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

@@ -4,6 +4,7 @@ import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
 import type { JSX } from "react";
 import { getChainMetadata } from "../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
+import { getFunctionId } from "../../../../../utils/function-id.js";
 import { resolveScheme } from "../../../../../utils/ipfs.js";
 import { useChainContext } from "./provider.js";
 
@@ -121,7 +122,18 @@ export function ChainIcon({
 }: ChainIconProps) {
   const { chain } = useChainContext();
   const iconQuery = useQuery({
-    queryKey: ["_internal_chain_icon_", chain.id] as const,
+    queryKey: [
+      "_internal_chain_icon_",
+      chain.id,
+      {
+        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/Chain/name.test.tsx

@@ -2,17 +2,17 @@ import { describe, expect, it } from "vitest";
 import { render, screen, waitFor } from "~test/react-render.js";
 import { ethereum } from "../../../../../chains/chain-definitions/ethereum.js";
 import { defineChain } from "../../../../../chains/utils.js";
-import { ChainName } from "./name.js";
+import { ChainName, fetchChainName } from "./name.js";
 import { ChainProvider } from "./provider.js";
 
 describe.runIf(process.env.TW_SECRET_KEY)("ChainName component", () => {
-  it("should return the correct chain name, if the name exists in the chain object", () => {
+  it("should return the correct chain name, if the name exists in the chain object", async () => {
     render(
       <ChainProvider chain={ethereum}>
         <ChainName />
       </ChainProvider>,
     );
-    waitFor(() =>
+    await waitFor(() =>
       expect(
         screen.getByText("Ethereum", {
           exact: true,
@@ -22,13 +22,13 @@ describe.runIf(process.env.TW_SECRET_KEY)("ChainName component", () => {
     );
   });
 
-  it("should return the correct chain name, if the name is loaded from the server", () => {
+  it("should return the correct chain name, if the name is loaded from the server", async () => {
     render(
       <ChainProvider chain={defineChain(1)}>
         <ChainName />
       </ChainProvider>,
     );
-    waitFor(() =>
+    await waitFor(() =>
       expect(
         screen.getByText("Ethereum Mainnet", {
           exact: true,
@@ -38,13 +38,13 @@ describe.runIf(process.env.TW_SECRET_KEY)("ChainName component", () => {
     );
   });
 
-  it("should return the correct FORMATTED chain name", () => {
+  it("should return the correct FORMATTED chain name", async () => {
     render(
       <ChainProvider chain={ethereum}>
         <ChainName formatFn={(str: string) => `${str}-formatted`} />
       </ChainProvider>,
     );
-    waitFor(() =>
+    await waitFor(() =>
       expect(
         screen.getByText("Ethereum-formatted", {
           exact: true,
@@ -54,14 +54,14 @@ describe.runIf(process.env.TW_SECRET_KEY)("ChainName component", () => {
     );
   });
 
-  it("should fallback properly when fail to resolve chain name", () => {
+  it("should fallback properly when fail to resolve chain name", async () => {
     render(
       <ChainProvider chain={defineChain(-1)}>
         <ChainName fallbackComponent={<span>oops</span>} />
       </ChainProvider>,
     );
 
-    waitFor(() =>
+    await waitFor(() =>
       expect(
         screen.getByText("oops", {
           exact: true,
@@ -70,4 +70,31 @@ describe.runIf(process.env.TW_SECRET_KEY)("ChainName component", () => {
       ).toBeInTheDocument(),
     );
   });
+
+  it("fetchChainName should respect nameResolver as a string", async () => {
+    const res = await fetchChainName({
+      chain: ethereum,
+      nameResolver: "eth_mainnet",
+    });
+    expect(res).toBe("eth_mainnet");
+  });
+
+  it("fetchChainName should respect nameResolver as a non-async function", async () => {
+    const res = await fetchChainName({
+      chain: ethereum,
+      nameResolver: () => "eth_mainnet",
+    });
+    expect(res).toBe("eth_mainnet");
+  });
+
+  it("fetchChainName should respect nameResolver as an async function", async () => {
+    const res = await fetchChainName({
+      chain: ethereum,
+      nameResolver: async () => {
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+        return "eth_mainnet";
+      },
+    });
+    expect(res).toBe("eth_mainnet");
+  });
 });

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

@@ -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 { MediaRenderer } from "../../MediaRenderer/MediaRenderer.js";
 import type { MediaRendererProps } from "../../MediaRenderer/types.js";
 import { useNFTContext } from "./provider.js";
@@ -140,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

@@ -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";
 
@@ -102,7 +103,7 @@ export function NFTName({
           typeof nameResolver === "string"
             ? nameResolver
             : typeof nameResolver === "function"
-              ? nameResolver.toString()
+              ? getFunctionId(nameResolver)
               : undefined,
       },
     ],

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

@@ -6,6 +6,7 @@ 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";
 
@@ -117,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,
+      },
+    ]);
+  });
+});