thirdweb 5.65.1 → 5.66.0-nightly-880c3453ee8fc0fabbde0afb752a17894cd579a0-20241106000325

package/src/extensions/erc20/write/transferBatch.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from "vitest";
+import { beforeAll, describe, expect, it } from "vitest";
 import { ANVIL_CHAIN } from "~test/chains.js";
 import { TEST_CONTRACT_URI } from "~test/ipfs-uris.js";
 import { TEST_CLIENT } from "~test/test-clients.js";
@@ -8,19 +8,23 @@ import {
   TEST_ACCOUNT_C,
   TEST_ACCOUNT_D,
 } from "~test/test-wallets.js";
-import { getContract } from "../../../contract/contract.js";
+import {
+  type ThirdwebContract,
+  getContract,
+} from "../../../contract/contract.js";
 import { deployERC20Contract } from "../../../extensions/prebuilts/deploy-erc20.js";
 import { sendAndConfirmTransaction } from "../../../transaction/actions/send-and-confirm-transaction.js";
 import { balanceOf } from "../__generated__/IERC20/read/balanceOf.js";
 import { mintTo } from "./mintTo.js";
-import { transferBatch } from "./transferBatch.js";
+import { optimizeTransferContent, transferBatch } from "./transferBatch.js";
 
 const chain = ANVIL_CHAIN;
 const client = TEST_CLIENT;
 const account = TEST_ACCOUNT_A;
+let contract: ThirdwebContract;
 
 describe.runIf(process.env.TW_SECRET_KEY)("erc20: transferBatch", () => {
-  it("should transfer tokens to multiple recipients", async () => {
+  beforeAll(async () => {
     const address = await deployERC20Contract({
       type: "TokenERC20",
       account,
@@ -31,15 +35,16 @@ describe.runIf(process.env.TW_SECRET_KEY)("erc20: transferBatch", () => {
         contractURI: TEST_CONTRACT_URI,
       },
     });
-    const contract = getContract({
+    contract = getContract({
       address,
       chain,
       client,
     });
-
-    // Mint 100 tokens
+  }, 60_000_000);
+  it("should transfer tokens to multiple recipients", async () => {
+    // Mint 200 tokens
     await sendAndConfirmTransaction({
-      transaction: mintTo({ contract, to: account.address, amount: 100 }),
+      transaction: mintTo({ contract, to: account.address, amount: 200 }),
       account,
     });
 
@@ -61,6 +66,14 @@ describe.runIf(process.env.TW_SECRET_KEY)("erc20: transferBatch", () => {
             to: TEST_ACCOUNT_D.address,
             amount: 25,
           },
+          {
+            to: TEST_ACCOUNT_B.address.toLowerCase(),
+            amount: 25,
+          },
+          {
+            to: TEST_ACCOUNT_B.address,
+            amountWei: 25n * 10n ** 18n,
+          },
         ],
       }),
     });
@@ -73,9 +86,88 @@ describe.runIf(process.env.TW_SECRET_KEY)("erc20: transferBatch", () => {
       balanceOf({ contract, address: TEST_ACCOUNT_D.address }),
     ]);
 
-    expect(balanceA).toBe(25n * 10n ** 18n);
-    expect(balanceB).toBe(25n * 10n ** 18n);
+    expect(balanceA).toBe(75n * 10n ** 18n);
+    expect(balanceB).toBe(75n * 10n ** 18n);
     expect(balanceC).toBe(25n * 10n ** 18n);
     expect(balanceD).toBe(25n * 10n ** 18n);
   });
+
+  it("should optimize the transfer content", async () => {
+    const content = await optimizeTransferContent({
+      contract,
+      batch: [
+        {
+          to: TEST_ACCOUNT_B.address,
+          amount: 25,
+        },
+        {
+          to: TEST_ACCOUNT_C.address,
+          amount: 25,
+        },
+        {
+          to: TEST_ACCOUNT_D.address,
+          amount: 25,
+        },
+        {
+          // Should work
+          to: TEST_ACCOUNT_B.address.toLowerCase(),
+          amount: 25,
+        },
+        {
+          to: TEST_ACCOUNT_B.address,
+          amountWei: 25n * 10n ** 18n,
+        },
+      ],
+    });
+
+    expect(content).toStrictEqual([
+      {
+        to: TEST_ACCOUNT_B.address,
+        amountWei: 75n * 10n ** 18n,
+      },
+      {
+        to: TEST_ACCOUNT_C.address,
+        amountWei: 25n * 10n ** 18n,
+      },
+      {
+        to: TEST_ACCOUNT_D.address,
+        amountWei: 25n * 10n ** 18n,
+      },
+    ]);
+  });
+
+  it("an already-optimized content should not be changed", async () => {
+    const content = await optimizeTransferContent({
+      contract,
+      batch: [
+        {
+          to: TEST_ACCOUNT_B.address,
+          amountWei: 25n * 10n ** 18n,
+        },
+        {
+          to: TEST_ACCOUNT_C.address,
+          amount: 25,
+        },
+        {
+          to: TEST_ACCOUNT_D.address,
+          amount: 25,
+        },
+      ],
+    });
+
+    expect(content).toStrictEqual([
+      {
+        to: TEST_ACCOUNT_B.address,
+        amountWei: 25n * 10n ** 18n,
+      },
+      {
+        to: TEST_ACCOUNT_C.address,
+        amountWei: 25n * 10n ** 18n,
+      },
+      {
+        to: TEST_ACCOUNT_D.address,
+        amountWei: 25n * 10n ** 18n,
+      },
+    ]);
+  });
 });

package/src/extensions/erc20/write/transferBatch.ts

@@ -53,34 +53,88 @@ export function transferBatch(
   return multicall({
     contract: options.contract,
     asyncParams: async () => {
+      const content = await optimizeTransferContent(options);
       return {
-        data: await Promise.all(
-          options.batch.map(async (transfer) => {
-            let amount: bigint;
-            if ("amount" in transfer) {
-              // if we need to parse the amount from ether to gwei then we pull in the decimals extension
-              const { decimals } = await import("../read/decimals.js");
-              // it's OK to call this multiple times because the call is cached
-              // if this fails we fall back to `18` decimals
-              const d = await decimals(options).catch(() => 18);
-              // turn ether into gwei
-              amount = toUnits(transfer.amount.toString(), d);
-            } else {
-              amount = transfer.amountWei;
-            }
-            return encodeTransfer({
-              to: transfer.to,
-              value: amount,
-              overrides: {
-                erc20Value: {
-                  amountWei: amount,
-                  tokenAddress: options.contract.address,
-                },
+        data: content.map((item) => {
+          return encodeTransfer({
+            to: item.to,
+            value: item.amountWei,
+            overrides: {
+              erc20Value: {
+                amountWei: item.amountWei,
+                tokenAddress: options.contract.address,
               },
-            });
-          }),
-        ),
+            },
+          });
+        }),
       };
     },
   });
 }
+
+/**
+ * Records with the same recipient (`to`) can be packed into one transaction
+ * For example, the data below:
+ * ```ts
+ * [
+ *   {
+ *     to: "wallet-a",
+ *     amount: 1,
+ *   },
+ *   {
+ *     to: "wallet-A",
+ *     amountWei: 1000000000000000000n,
+ *   },
+ * ]
+ * ```
+ *
+ * can be packed to:
+ * ```ts
+ * [
+ *   {
+ *     to: "wallet-a",
+ *     amountWei: 2000000000000000000n,
+ *   },
+ * ]
+ * ```
+ * @internal
+ */
+export async function optimizeTransferContent(
+  options: BaseTransactionOptions<TransferBatchParams>,
+): Promise<Array<{ to: string; amountWei: bigint }>> {
+  const groupedRecords = await options.batch.reduce(
+    async (accPromise, record) => {
+      const acc = await accPromise;
+      let amountInWei: bigint;
+      if ("amount" in record) {
+        // it's OK to call this multiple times because the call is cached
+        const { decimals } = await import("../read/decimals.js");
+        // if this fails we fall back to `18` decimals
+        const d = await decimals(options).catch(() => undefined);
+        if (d === undefined) {
+          throw new Error(
+            `Failed to get the decimals for contract: ${options.contract.address}`,
+          );
+        }
+        amountInWei = toUnits(record.amount.toString(), d);
+      } else {
+        amountInWei = record.amountWei;
+      }
+      const existingRecord = acc.find(
+        (r) => r.to.toLowerCase() === record.to.toLowerCase(),
+      );
+      if (existingRecord) {
+        existingRecord.amountWei = existingRecord.amountWei + amountInWei;
+      } else {
+        acc.push({
+          to: record.to,
+          amountWei: amountInWei,
+        });
+      }
+
+      return acc;
+    },
+    Promise.resolve([] as { to: string; amountWei: bigint }[]),
+  );
+  return groupedRecords;
+}

package/src/react/core/hooks/connection/ConnectButtonProps.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import type { BuyWithCryptoStatus } from "../../../../pay/buyWithCrypto/getStatus.js";

package/src/react/core/hooks/contract/useContractEvents.ts

@@ -84,7 +84,7 @@ export function useContractEvents<
     enabled = true,
     watch = true,
   } = options;
-  const latestBlockNumber = useRef<bigint>(); // We use this to keep track of the latest block number when new pollers are spawned
+  const latestBlockNumber = useRef<bigint>(undefined); // We use this to keep track of the latest block number when new pollers are spawned
 
   const queryClient = useQueryClient();
 

package/src/react/core/hooks/wallets/useAutoConnect.ts

@@ -2,6 +2,8 @@
 
 import { useQuery } from "@tanstack/react-query";
 import type { AsyncStorage } from "../../../../utils/storage/AsyncStorage.js";
+import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wallet.js";
+import { ClientScopedStorage } from "../../../../wallets/in-app/core/authentication/client-scoped-storage.js";
 import { getUrlToken } from "../../../../wallets/in-app/web/lib/get-url-token.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import {
@@ -43,8 +45,25 @@ export function useAutoConnectCore(
       getStoredActiveWalletId(storage),
     ]);
 
-    const { authResult, walletId, authProvider } = getUrlToken();
-    if (authResult && walletId) {
+    const { authResult, walletId, authProvider, authCookie } = getUrlToken();
+    const wallet = wallets.find((w) => w.id === walletId);
+
+    // If an auth cookie is found and this site supports the wallet, we'll set the auth cookie in the client storage
+    if (authCookie && wallet) {
+      const clientStorage = new ClientScopedStorage({
+        storage,
+        clientId: props.client.clientId,
+        ecosystem: isEcosystemWallet(wallet)
+          ? {
+              id: wallet.id,
+              partnerId: wallet.getConfig()?.partnerId,
+            }
+          : undefined,
+      });
+      await clientStorage.saveAuthCookie(authCookie);
+    }
+
+    if (walletId) {
       lastActiveWalletId = walletId;
       lastConnectedWalletIds = lastConnectedWalletIds?.includes(walletId)
         ? lastConnectedWalletIds

package/src/react/native/ui/connect/ConnectModal.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { type JSX, useCallback, useState } from "react";
 import { Platform, StyleSheet, View } from "react-native";
 import { SvgXml } from "react-native-svg";
 import type { Chain } from "../../../../chains/types.js";

package/src/react/native/ui/connect/ConnectedModal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { type JSX, useEffect, useState } from "react";
 import { Linking, StyleSheet, TouchableOpacity, View } from "react-native";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { getContract } from "../../../../contract/contract.js";

package/src/react/web/ui/ConnectWallet/Details.tsx

@@ -9,7 +9,7 @@ import {
   TextAlignJustifyIcon,
 } from "@radix-ui/react-icons";
 import { useQuery } from "@tanstack/react-query";
-import { useContext, useEffect, useState } from "react";
+import { type JSX, useContext, useEffect, useState } from "react";
 import { trackPayEvent } from "../../../../analytics/track/pay.js";
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";

package/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx

@@ -984,7 +984,8 @@ function SwapScreenContent(props: {
 
   const disableContinue =
     (swapRequired && !quoteQuery.data) || isNotEnoughBalance;
-  const switchChainRequired = props.payer.chain.id !== fromChain.id;
+  const switchChainRequired =
+    props.payer.wallet.getChain()?.id !== fromChain.id;
 
   // biome-ignore lint/suspicious/noExplicitAny: <explanation>
   function getErrorMessage(err: any) {

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

@@ -1,16 +1,7 @@
 import "@google/model-viewer";
-import type { ModelViewerElement } from "@google/model-viewer";
 import React from "react";
 import type { MediaRendererProps } from "./types.js";
 
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      "model-viewer": Partial<ModelViewerElement>;
-    }
-  }
-}
-
 const ModelViewer = /* @__PURE__ */ (() =>
   React.forwardRef<
     HTMLDivElement,
@@ -19,6 +10,7 @@ const ModelViewer = /* @__PURE__ */ (() =>
     return (
       <div style={{ ...style }} className={className} ref={ref}>
         {src ? (
+          // @ts-expect-error - model-viewer is not a standard HTML element
           <model-viewer
             src={src}
             alt={alt || "3D Model"}

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

@@ -0,0 +1,39 @@
+import { describe, expect, it } from "vitest";
+import { render, waitFor } from "../../../../test/src/react-render.js";
+import { TEST_CLIENT } from "../../../../test/src/test-clients.js";
+import { SiteEmbed } from "./SiteEmbed.js";
+
+describe("SiteEmbed", () => {
+  it("renders iframe with correct src", () => {
+    const testUrl = "https://example.com/";
+    const { container } = render(
+      <SiteEmbed src={testUrl} client={TEST_CLIENT} />,
+    );
+
+    const iframe = container.querySelector("iframe");
+    expect(iframe).toBeTruthy();
+    expect(iframe?.src).toBe(testUrl);
+  });
+
+  it("throws error if clientId is not provided", () => {
+    const testUrl = "https://example.com/";
+    expect(() =>
+      // biome-ignore lint/suspicious/noExplicitAny: testing invalid input
+      render(<SiteEmbed src={testUrl} client={{} as any} />),
+    ).toThrow("The SiteEmbed client must have a clientId");
+  });
+
+  it("adds wallet params to url when wallet is connected", async () => {
+    const testUrl = "https://example.com/";
+    const { container } = render(
+      <SiteEmbed src={testUrl} client={TEST_CLIENT} />,
+      {
+        setConnectedWallet: true,
+      },
+    );
+
+    const iframe = container.querySelector("iframe");
+    expect(iframe).toBeTruthy();
+    await waitFor(() => expect(iframe?.src).toContain("walletId="));
+  });
+});

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

@@ -0,0 +1,90 @@
+"use client";
+import { useQuery } from "@tanstack/react-query";
+import type { ThirdwebClient } from "../../../client/client.js";
+import { getLastAuthProvider } from "../../../react/core/utils/storage.js";
+import { webLocalStorage } from "../../../utils/storage/webStorage.js";
+import { isEcosystemWallet } from "../../../wallets/ecosystem/is-ecosystem-wallet.js";
+import { ClientScopedStorage } from "../../../wallets/in-app/core/authentication/client-scoped-storage.js";
+import type { Ecosystem } from "../../../wallets/in-app/core/wallet/types.js";
+import { useActiveWallet } from "../../core/hooks/wallets/useActiveWallet.js";
+
+/**
+ * Embeds another thirdweb-supported site for seamless in-app and ecosystem wallet connection.
+ *
+ * @note Make sure the embedded site includes <AutoConnect /> and supports frame ancestors, see [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors) for more information.
+ *
+ * @note The embedded site must support the connected wallet (ecosystem or in-app).
+ *
+ * @param {Object} props - The props to pass to the iframe
+ * @param {String} props.src - The URL of the site to embed
+ * @param {ThirdwebClient} props.client - The client to use for the embedded site
+ * @param {Ecosystem} [props.ecosystem] - The ecosystem to use for the embedded site
+ *
+ * @example
+ * ```tsx
+ * import { SiteEmbed } from "thirdweb/react";
+ *
+ * <SiteEmbed src="https://thirdweb.com" clientId="thirdweb-client-id" />
+ * ```
+ */
+export function SiteEmbed({
+  src,
+  client,
+  ecosystem,
+  ...props
+}: {
+  src: string;
+  client: ThirdwebClient;
+  ecosystem?: Ecosystem;
+} & React.DetailedHTMLProps<
+  React.IframeHTMLAttributes<HTMLIFrameElement>,
+  HTMLIFrameElement
+>) {
+  if (!client.clientId) {
+    throw new Error("The SiteEmbed client must have a clientId");
+  }
+
+  const activeWallet = useActiveWallet();
+  const walletId = activeWallet?.id;
+
+  const {
+    data: { authProvider, authCookie } = {},
+  } = useQuery({
+    queryKey: ["site-embed", walletId, src, client.clientId, ecosystem],
+    enabled:
+      activeWallet && (isEcosystemWallet(activeWallet) || walletId === "inApp"),
+    queryFn: async () => {
+      const storage = new ClientScopedStorage({
+        storage: webLocalStorage,
+        clientId: client.clientId,
+        ecosystem,
+      });
+
+      const authProvider = await getLastAuthProvider(webLocalStorage);
+      const authCookie = await storage.getAuthCookie();
+
+      return { authProvider, authCookie };
+    },
+  });
+
+  const url = new URL(src);
+  if (walletId) {
+    url.searchParams.set("walletId", walletId);
+  }
+  if (authProvider) {
+    url.searchParams.set("authProvider", authProvider);
+  }
+  if (authCookie) {
+    url.searchParams.set("authCookie", authCookie);
+  }
+
+  return (
+    <iframe
+      src={encodeURI(url.toString())}
+      width="100%"
+      height="100%"
+      allowFullScreen
+      {...props}
+    />
+  );
+}

package/src/react/web/wallets/in-app/WalletAuth.tsx

@@ -39,7 +39,7 @@ export function WalletAuth(props: {
 }) {
   const { wallet, done } = props;
   const addConnectedWallet = useAddConnectedWallet();
-  const walletToConnect = useRef<Wallet>();
+  const walletToConnect = useRef<Wallet>(undefined);
   const [status, setStatus] = useState<"loading" | "error" | "selecting">(
     "selecting",
   );

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.65.1";
+export const version = "5.66.0-nightly-880c3453ee8fc0fabbde0afb752a17894cd579a0-20241106000325";

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

@@ -9,6 +9,7 @@ export function getUrlToken(): {
   walletId?: WalletId;
   authResult?: AuthStoredTokenWithCookieReturnType;
   authProvider?: AuthOption;
+  authCookie?: string;
 } {
   if (!window?.location) {
     // Not in web
@@ -20,18 +21,24 @@ export function getUrlToken(): {
   const authResultString = params.get("authResult");
   const walletId = params.get("walletId") as WalletId | undefined;
   const authProvider = params.get("authProvider") as AuthOption | undefined;
+  const authCookie = params.get("authCookie") as string | undefined;
 
-  if (authResultString && walletId) {
-    const authResult = JSON.parse(authResultString);
-    params.delete("authResult");
+  if ((authCookie || authResultString) && walletId) {
+    const authResult = (() => {
+      if (authResultString) {
+        params.delete("authResult");
+        return JSON.parse(decodeURIComponent(authResultString));
+      }
+    })();
     params.delete("walletId");
     params.delete("authProvider");
+    params.delete("authCookie");
     window.history.pushState(
       {},
       "",
       `${window.location.pathname}?${params.toString()}`,
     );
-    return { walletId, authResult, authProvider };
+    return { walletId, authResult, authProvider, authCookie };
   }
   return {};
 }