thirdweb 5.71.0 → 5.72.0-nightly-f64e0253d7de6fdb6f56ab49315cc4cdcdd75b20-20241127000345

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

@@ -0,0 +1,185 @@
+"use client";
+
+import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
+import type React from "react";
+import type { JSX } from "react";
+import { getChainMetadata } from "../../../../../chains/utils.js";
+import { useChainContext } from "./provider.js";
+
+/**
+ * Props for the ChainName component
+ * @component
+ * @chain
+ */
+export interface ChainNameProps
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+  /**
+   * This prop can be a string or a (async) function that resolves to a string, representing the name of the chain
+   * This is particularly useful if you already have a way to fetch the chain name.
+   */
+  nameResolver?: string | (() => string) | (() => Promise<string>);
+  /**
+   * A function to format the name's display value
+   * Particularly useful to avoid overflowing-UI issues
+   *
+   * ```tsx
+   * <ChainName formatFn={(str: string) => doSomething()} />
+   * ```
+   */
+  formatFn?: (str: string) => string;
+  /**
+   * This component will be shown while the name of the chain is being fetched
+   * If not passed, the component will return `null`.
+   *
+   * You can/should pass a loading sign or spinner to this prop.
+   * @example
+   * ```tsx
+   * <ChainName loadingComponent={<Spinner />} />
+   * ```
+   */
+  loadingComponent?: JSX.Element;
+  /**
+   * This component will be shown if the name fails to be retreived
+   * If not passed, the component will return `null`.
+   *
+   * You can/should pass a descriptive text/component to this prop, indicating that the
+   * name was not fetched succesfully
+   * @example
+   * ```tsx
+   * <ChainName fallbackComponent={"Failed to load"}
+   * />
+   * ```
+   */
+  fallbackComponent?: JSX.Element;
+  /**
+   * Optional `useQuery` params
+   */
+  queryOptions?: Omit<UseQueryOptions<string>, "queryFn" | "queryKey">;
+}
+
+/**
+ * This component fetches then shows the name of a chain.
+ * It inherits all the attributes of a HTML <span> component, hence you can style it just like how you would style a normal <span>
+ *
+ *
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { ChainProvider, ChainName } from "thirdweb/react";
+ * import { ethereum } from "thirdweb/chains";
+ *
+ * <ChainProvider {...props}>
+ *   <ChainName  />
+ * </ChainProvider>
+ * ```
+ * Result:
+ * ```html
+ * <span>Ethereum Mainnet</span>
+ * ```
+ *
+ * ### Custom name resolver
+ * By default ChainName will call the thirdweb API to retrieve the chain name.
+ * However if you have a different way to fetch the name, you can pass the function to the `nameResolver` prop.
+ * Note: nameResolver should either be a string or a function (async) that returns a string.
+ * ```tsx
+ * async function fetchNameMethod() {
+ *   // your own fetching logic
+ *   return "the chain name";
+ * }
+ *
+ * <ChainName nameResolver={fetchNameMethod} />
+ * ```
+ *
+ * Alternatively you can also pass in a string directly:
+ * ```tsx
+ * <ChainName nameResolver="ETH Mainnet" />
+ * ```
+ *
+ *
+ * ### Format the name (capitalize, truncate, etc.)
+ * The ChainName component accepts a `formatFn` which takes in a string and outputs a string
+ * The function is used to modify the name of the chain
+ *
+ * ```tsx
+ * const concatStr = (str: string):string => str + "Network"
+ *
+ * <ChainProvider {...props}>
+ *   <ChainName formatFn={concatStr} />
+ * </ChainProvider>
+ * ```
+ *
+ * Result:
+ * ```html
+ * <span>Ethereum Mainnet Network</span>
+ * ```
+ *
+ * ### Show a loading sign when the name is being fetched
+ * ```tsx
+ * import { ChainProvider, ChainName } from "thirdweb/react";
+ *
+ * <ChainProvider {...props}>
+ *   <ChainName loadingComponent={<Spinner />} />
+ * </ChainProvider>
+ * ```
+ *
+ * ### Fallback to something when the name fails to resolve
+ * ```tsx
+ * <ChainProvider {...props}>
+ *   <ChainName fallbackComponent={"Failed to load"} />
+ * </ChainProvider>
+ * ```
+ *
+ * ### Custom query options for useQuery
+ * This component uses `@tanstack-query`'s useQuery internally.
+ * You can use the `queryOptions` prop for more fine-grained control
+ * ```tsx
+ * <ChainName
+ *   queryOptions={{
+ *     enabled: isEnabled,
+ *     retry: 4,
+ *   }}
+ * />
+ * ```
+ *
+ * @component
+ * @chain
+ * @beta
+ */
+export function ChainName({
+  nameResolver,
+  formatFn,
+  loadingComponent,
+  fallbackComponent,
+  queryOptions,
+  ...restProps
+}: 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);
+    },
+    ...queryOptions,
+  });
+
+  if (nameQuery.isLoading) {
+    return loadingComponent || null;
+  }
+
+  if (!nameQuery.data) {
+    return fallbackComponent || null;
+  }
+
+  const displayValue = formatFn ? formatFn(nameQuery.data) : nameQuery.data;
+
+  return <span {...restProps}>{displayValue}</span>;
+}

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

@@ -0,0 +1,34 @@
+import { describe, expect, it } from "vitest";
+import { render, screen, waitFor } from "~test/react-render.js";
+import { ethereum } from "../../../../../chains/chain-definitions/ethereum.js";
+import { ChainName } from "./name.js";
+import { ChainProvider } from "./provider.js";
+
+describe.runIf(process.env.TW_SECRET_KEY)("ChainProvider component", () => {
+  it("should render children correctly", () => {
+    render(
+      <ChainProvider chain={ethereum}>
+        <div>Child Component</div>
+      </ChainProvider>,
+    );
+
+    expect(screen.getByText("Child Component")).toBeInTheDocument();
+  });
+
+  it("should pass the chain correctly to the children props", () => {
+    render(
+      <ChainProvider chain={ethereum}>
+        <ChainName />
+      </ChainProvider>,
+    );
+
+    waitFor(() =>
+      expect(
+        screen.getByText("Ethereum", {
+          exact: true,
+          selector: "span",
+        }),
+      ).toBeInTheDocument(),
+    );
+  });
+});

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

@@ -0,0 +1,73 @@
+"use client";
+
+import type React from "react";
+import { createContext, useContext } from "react";
+import type { Chain } from "../../../../../chains/types.js";
+
+/**
+ * Props for the <ChainProvider /> component
+ * @component
+ * @chain
+ */
+export type ChainProviderProps = {
+  chain: Chain;
+};
+
+const ChainProviderContext = /* @__PURE__ */ createContext<
+  ChainProviderProps | undefined
+>(undefined);
+
+/**
+ * A React context provider component that supplies Chain-related data to its child components.
+ *
+ * This component serves as a wrapper around the `ChainProviderContext.Provider` and passes
+ * the provided chain data down to all of its child components through the context API.
+ *
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { ChainProvider, ChainIcon, ChainName } from "thirdweb/react";
+ * import { ethereum } from "thirdweb/chains";
+ *
+ * <ChainProvider chain={ethereum}>
+ *   <ChainIcon />
+ *   <ChainName />
+ * </ChainProvider>
+ * ```
+ *
+ * ### Usage with defineChain
+ * ```tsx
+ * import { defineChain } from "thirdweb/chains"l
+ * import { ChainProvider, ChainName } from "thirdweb/react";
+ *
+ * const chainId = someNumber;
+ *
+ * <ChainProvider chain={defineChain(chainId)}>
+ *   <ChainName />
+ * </ChainProvider>
+ * ```
+ * @component
+ * @chain
+ */
+export function ChainProvider(
+  props: React.PropsWithChildren<ChainProviderProps>,
+) {
+  return (
+    <ChainProviderContext.Provider value={props}>
+      {props.children}
+    </ChainProviderContext.Provider>
+  );
+}
+
+/**
+ * @internal
+ */
+export function useChainContext() {
+  const ctx = useContext(ChainProviderContext);
+  if (!ctx) {
+    throw new Error(
+      "ChainProviderContext not found. Make sure you are using ChainName, ChainIcon, etc. inside a <ChainProvider /> component",
+    );
+  }
+  return ctx;
+}

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

@@ -7,6 +7,11 @@ import { getContractMetadata } from "../../../../../extensions/common/read/getCo
 import { resolveScheme } from "../../../../../utils/ipfs.js";
 import { useTokenContext } from "./provider.js";
 
+/**
+ * Props for the TokenIcon component
+ * @component
+ * @token
+ */
 export interface TokenIconProps
   extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src"> {
   /**

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

@@ -0,0 +1,44 @@
+import { describe, expect, it } from "vitest";
+import { render, screen, waitFor } from "~test/react-render.js";
+import { TEST_CLIENT } from "~test/test-clients.js";
+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";
+
+describe.runIf(process.env.TW_SECRET_KEY)("TokenProvider component", () => {
+  it("should render children correctly", () => {
+    render(
+      <TokenProvider
+        address={NATIVE_TOKEN_ADDRESS}
+        client={TEST_CLIENT}
+        chain={ethereum}
+      >
+        <div>Child Component</div>
+      </TokenProvider>,
+    );
+
+    expect(screen.getByText("Child Component")).toBeInTheDocument();
+  });
+
+  it("should pass the token data correctly to the children props", () => {
+    render(
+      <TokenProvider
+        address={NATIVE_TOKEN_ADDRESS}
+        client={TEST_CLIENT}
+        chain={ethereum}
+      >
+        <TokenName />
+      </TokenProvider>,
+    );
+
+    waitFor(() =>
+      expect(
+        screen.getByText("Ether", {
+          exact: true,
+          selector: "span",
+        }),
+      ).toBeInTheDocument(),
+    );
+  });
+});

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

@@ -0,0 +1,30 @@
+import { describe, expect, it } from "vitest";
+import { render, screen, waitFor } from "~test/react-render.js";
+import { TEST_CLIENT } from "~test/test-clients.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";
+
+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>,
+    );
+
+    waitFor(() =>
+      expect(
+        screen.getByText("ETH", {
+          exact: true,
+          selector: "span",
+        }),
+      ).toBeInTheDocument(),
+    );
+  });
+});

package/src/storage/upload/mobile.ts

@@ -43,13 +43,7 @@ export async function uploadBatchMobile(
         );
       }, 30000);
 
-      xhr.upload.addEventListener("loadstart", () => {
-        console.log(`[${Date.now()}] [IPFS] Started`);
-      });
-
       xhr.upload.addEventListener("progress", (event) => {
-        console.log(`[IPFS] Progress Event ${event.loaded}/${event.total}`);
-
         clearTimeout(timer);
 
         if (event.loaded < event.total) {
@@ -61,15 +55,10 @@ export async function uploadBatchMobile(
               ),
             );
           }, 30000);
-        } else {
-          console.log(
-            `[${Date.now()}] [IPFS] Uploaded files. Waiting for response.`,
-          );
         }
       });
 
       xhr.addEventListener("load", () => {
-        console.log(`[${Date.now()}] [IPFS] Load`);
         clearTimeout(timer);
 
         if (xhr.status >= 200 && xhr.status < 300) {
@@ -102,7 +91,6 @@ export async function uploadBatchMobile(
       });
 
       xhr.addEventListener("error", () => {
-        console.log("[IPFS] Load");
         clearTimeout(timer);
 
         if (

package/src/transaction/actions/zksync/send-eip712-transaction.test.ts

@@ -49,7 +49,6 @@ describe("sendEip712Transaction", () => {
         platformFeeRecipient: TEST_ACCOUNT_A.address, // platformFeeRecipient
       },
     });
-    console.log("deployed address", address);
     expect(address).toBeDefined();
     expect(address.length).toBe(42);
   });

package/src/utils/bytecode/detectExtension.ts

@@ -15,8 +15,8 @@ type DetectExtensionOptions = {
  * ```ts
  * import { detectMethod } from "thirdweb/utils/extensions/detect.js";
  * const hasDecimals = await detectMethod({
- *  contract,
  *  method: "function decimals() view returns (uint8)",
+ *  availableSelectors: ["0x313ce567"],
  * });
  * ```
  * @contract

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.71.0";
+export const version = "5.72.0-nightly-f64e0253d7de6fdb6f56ab49315cc4cdcdd75b20-20241127000345";

package/src/wallets/smart/lib/bundler.ts

@@ -17,7 +17,6 @@ import {
   formatUserOperationReceipt,
 } from "../types.js";
 import {
-  DEBUG,
   ENTRYPOINT_ADDRESS_v0_6,
   MANAGED_ACCOUNT_GAS_BUFFER,
   getDefaultBundlerUrl,
@@ -267,10 +266,6 @@ async function sendBundlerRequest(args: {
 }) {
   const { options, operation, params } = args;
 
-  if (DEBUG) {
-    console.debug(`>>> sending ${operation} with payload:`, params);
-  }
-
   const bundlerUrl = options.bundlerUrl ?? getDefaultBundlerUrl(options.chain);
   const fetchWithHeaders = getClientFetch(options.client);
   const response = await fetchWithHeaders(bundlerUrl, {
@@ -301,9 +296,5 @@ Code: ${code}`,
     );
   }
 
-  if (DEBUG) {
-    console.debug(`<<< ${operation} result:`, res);
-  }
-
   return res.result;
 }

package/src/wallets/smart/lib/constants.ts

@@ -2,9 +2,6 @@ import type { Chain } from "../../../chains/types.js";
 import { getAddress } from "../../../utils/address.js";
 import { getThirdwebDomains } from "../../../utils/domains.js";
 
-// dev only
-export const DEBUG = false;
-
 export const DUMMY_SIGNATURE =
   "0xfffffffffffffffffffffffffffffff0000000000000000000000000000000007aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa1c";
 

package/src/wallets/smart/lib/paymaster.ts

@@ -8,11 +8,7 @@ import type {
   UserOperationV06,
   UserOperationV07,
 } from "../types.js";
-import {
-  DEBUG,
-  ENTRYPOINT_ADDRESS_v0_6,
-  getDefaultBundlerUrl,
-} from "./constants.js";
+import { ENTRYPOINT_ADDRESS_v0_6, getDefaultBundlerUrl } from "./constants.js";
 import { hexlifyUserOp } from "./utils.js";
 
 /**
@@ -80,10 +76,6 @@ Code: ${code}`,
     );
   }
 
-  if (DEBUG) {
-    console.debug("Paymaster result:", res);
-  }
-
   if (res.result) {
     // some paymasters return a string, some return an object with more data
     if (typeof res.result === "string") {

package/src/wallets/smart/smart-wallet-dev.test.ts

@@ -77,13 +77,10 @@ describe.runIf(process.env.TW_SECRET_KEY).skip.sequential(
         to: smartAccount.address,
         value: 0n,
       });
-
-      console.log("Sending transaction...");
       const receipt = await sendTransaction({
         transaction: tx,
         account: smartAccount,
       });
-      console.log("Transaction sent:", receipt.transactionHash);
       expect(receipt.transactionHash).toBeDefined();
     });
 
@@ -127,7 +124,6 @@ describe.runIf(process.env.TW_SECRET_KEY).skip.sequential(
           platformFeeRecipient: smartAccount.address, // platformFeeRecipient
         },
       });
-      console.log("deployed address", address);
       expect(address).toBeDefined();
       expect(address.length).toBe(42);
     });

package/src/wallets/smart/smart-wallet-zksync.test.ts

@@ -145,7 +145,6 @@ describe.runIf(process.env.TW_SECRET_KEY).todo(
         }),
         account: account,
       });
-      console.log(tx.transactionHash);
       expect(tx.transactionHash.length).toBe(66);
     });
 
@@ -168,7 +167,6 @@ describe.runIf(process.env.TW_SECRET_KEY).todo(
         }),
         account: account,
       });
-      console.log(tx.transactionHash);
       expect(tx.transactionHash.length).toBe(66);
     });
   },