thirdweb 5.64.0-nightly-cdb907f175f7472d1fb3dea6547d946514564085-20241023000322 → 5.64.0-nightly-e6e994479fb8386b1740de4170f33446f038f2b1-20241024000332

package/src/extensions/erc1155/write/mintAdditionalSupplyToBatch.test.ts

@@ -1,90 +1,21 @@
+import {} from "viem";
 import { 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";
 import { TEST_ACCOUNT_C } from "~test/test-wallets.js";
-import { getContract } from "../../../contract/contract.js";
-import { deployERC1155Contract } from "../../../extensions/prebuilts/deploy-erc1155.js";
-import { sendAndConfirmTransaction } from "../../../transaction/actions/send-and-confirm-transaction.js";
-import { getNFTs } from "../read/getNFTs.js";
-import { mintAdditionalSupplyToBatch } from "./mintAdditionalSupplyToBatch.js";
-import { mintToBatch } from "./mintToBatch.js";
+import { optimizeMintBatchContent } from "./mintAdditionalSupplyToBatch.js";
 
-const chain = ANVIL_CHAIN;
-const client = TEST_CLIENT;
 const account = TEST_ACCOUNT_C;
 
-describe.runIf(process.env.TW_SECRET_KEY)(
-  "ERC1155 Edition: mintToBatch",
-  () => {
-    it("should mint multiple tokens in one tx", async () => {
-      const contract = getContract({
-        chain,
-        client,
-        address: await deployERC1155Contract({
-          chain,
-          client,
-          account,
-          type: "TokenERC1155",
-          params: {
-            name: "edition",
-            contractURI: TEST_CONTRACT_URI,
-          },
-        }),
-      });
-
-      await sendAndConfirmTransaction({
-        account,
-        transaction: mintToBatch({
-          contract,
-          to: account.address,
-          nfts: [
-            { metadata: { name: "token 0" }, supply: 1n },
-            { metadata: { name: "token 1" }, supply: 2n },
-            { metadata: { name: "token 2" }, supply: 3n },
-          ],
-        }),
-      });
-
-      await sendAndConfirmTransaction({
-        account,
-        transaction: mintAdditionalSupplyToBatch({
-          contract,
-          nfts: [
-            { tokenId: 0n, supply: 99n, to: account.address },
-            { tokenId: 1n, supply: 98n, to: account.address },
-            { tokenId: 2n, supply: 97n, to: account.address },
-          ],
-        }),
-      });
-
-      const nfts = await getNFTs({ contract });
-      expect(nfts).toStrictEqual([
-        {
-          metadata: { name: "token 0" },
-          owner: null,
-          id: 0n,
-          tokenURI: "ipfs://QmPZ6LpGqMuFbHKTXrNW1NRNLHf1nrxS4dtoFqdZZTKvPX/0",
-          type: "ERC1155",
-          supply: 100n,
-        },
-        {
-          metadata: { name: "token 1" },
-          owner: null,
-          id: 1n,
-          tokenURI: "ipfs://QmRFPyc3yEYxR4pQxwyTQWTine51TxWCoD6nzJWR3eX45b/0",
-          type: "ERC1155",
-          supply: 100n,
-        },
-        {
-          metadata: { name: "token 2" },
-          owner: null,
-          id: 2n,
-          tokenURI: "ipfs://QmesQiRLHCgqWZM2GFCs7Nb7rr2S72hU1BVQc7xiTyKZtT/0",
-          type: "ERC1155",
-          supply: 100n,
-        },
-      ]);
-    });
-  },
-);
+describe("ERC1155 Edition: mintToBatch", () => {
+  it("should optimize the mint content", () => {
+    expect(
+      optimizeMintBatchContent([
+        { tokenId: 0n, supply: 99n, to: account.address },
+        { tokenId: 1n, supply: 49n, to: account.address },
+        { tokenId: 1n, supply: 51n, to: account.address },
+      ]),
+    ).toStrictEqual([
+      { tokenId: 0n, supply: 99n, to: account.address },
+      { tokenId: 1n, supply: 100n, to: account.address },
+    ]);
+  });
+});

package/src/extensions/erc1155/write/mintAdditionalSupplyToBatch.ts

@@ -1,5 +1,8 @@
 import { multicall } from "../../../extensions/common/__generated__/IMulticall/write/multicall.js";
-import type { BaseTransactionOptions } from "../../../transaction/types.js";
+import type {
+  BaseTransactionOptions,
+  WithOverrides,
+} from "../../../transaction/types.js";
 import { uri } from "../__generated__/IERC1155/read/uri.js";
 import { encodeMintTo } from "../__generated__/IMintableERC1155/write/mintTo.js";
 import type { MintAdditionalSupplyToParams } from "./mintAdditionalSupplyTo.js";
@@ -7,9 +10,9 @@ import type { MintAdditionalSupplyToParams } from "./mintAdditionalSupplyTo.js";
 /**
  * @extension ERC1155
  */
-export type MintAdditionalSupplyToBatchParams = {
+export type MintAdditionalSupplyToBatchParams = WithOverrides<{
   nfts: MintAdditionalSupplyToParams[];
-};
+}>;
 
 /**
  * This extension batches multiple `mintAdditionalSupplyToBatch` extensions into one single multicall.
@@ -38,8 +41,9 @@ export function mintAdditionalSupplyToBatch(
   return multicall({
     contract: options.contract,
     asyncParams: async () => {
+      const nfts = optimizeMintBatchContent(options.nfts);
       const data = await Promise.all(
-        options.nfts.map(async (nft) => {
+        nfts.map(async (nft) => {
           const tokenUri = await uri({
             contract: options.contract,
             tokenId: nft.tokenId,
@@ -54,5 +58,48 @@ export function mintAdditionalSupplyToBatch(
       );
       return { data };
     },
+    overrides: options.overrides,
   });
 }
+
+/**
+ * Optimization
+ *
+ * We can batch the records that share the same "to" & "tokenId" into 1 transaction
+ *
+ * For example, this struct:
+ * [
+ *   { tokenId: 0n, supply: 99n, to: account.address },
+ *   { tokenId: 1n, supply: 49n, to: account.address },
+ *   { tokenId: 1n, supply: 51n, to: account.address },
+ * ]
+ *
+ * ...can be packed into:
+ * [
+ *   { tokenId: 0n, supply: 99n, to: account.address },
+ *   { tokenId: 1n, supply: 100n, to: account.address },
+ * ]
+ * @internal
+ */
+export function optimizeMintBatchContent(
+  nfts: MintAdditionalSupplyToParams[],
+): MintAdditionalSupplyToParams[] {
+  const results: MintAdditionalSupplyToParams[] = [];
+  for (const item of nfts) {
+    const matchingIndex = results.findIndex(
+      (o) =>
+        o.tokenId === item.tokenId &&
+        o.to.toLowerCase() === item.to.toLowerCase(),
+    );
+    if (matchingIndex !== -1) {
+      results[matchingIndex] = {
+        to: item.to,
+        tokenId: item.tokenId,
+        supply: item.supply + (results[matchingIndex]?.supply || 0n),
+      };
+    } else {
+      results.push(item);
+    }
+  }
+  return results;
+}

package/src/extensions/erc721/drops/write/claimTo.test.ts

@@ -0,0 +1,15 @@
+import { type Abi, toFunctionSelector } from "viem";
+import { describe, expect, it } from "vitest";
+import { NFT_DROP_CONTRACT } from "~test/test-contracts.js";
+import { resolveContractAbi } from "../../../../contract/actions/resolve-abi.js";
+import { isClaimToSupported } from "./claimTo.js";
+
+describe.runIf(process.env.TW_SECRET_KEY)("ERC721: claimTo", () => {
+  it("isClaimToSupported should work", async () => {
+    const abi = await resolveContractAbi<Abi>(NFT_DROP_CONTRACT);
+    const selectors = abi
+      .filter((f) => f.type === "function")
+      .map((f) => toFunctionSelector(f));
+    expect(isClaimToSupported(selectors)).toBe(true);
+  });
+});

package/src/extensions/erc721/drops/write/claimToBatch.test.ts

@@ -0,0 +1,154 @@
+import { 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";
+import {
+  TEST_ACCOUNT_A,
+  TEST_ACCOUNT_B,
+  TEST_ACCOUNT_C,
+  TEST_ACCOUNT_D,
+} from "~test/test-wallets.js";
+import { getContract } from "../../../../contract/contract.js";
+import { deployERC721Contract } from "../../../../extensions/prebuilts/deploy-erc721.js";
+import { sendAndConfirmTransaction } from "../../../../transaction/actions/send-and-confirm-transaction.js";
+import { getNFTs } from "../../read/getNFTs.js";
+import { lazyMint } from "../../write/lazyMint.js";
+import { claimToBatch, optimizeClaimContent } from "./claimToBatch.js";
+import { setClaimConditions } from "./setClaimConditions.js";
+
+const chain = ANVIL_CHAIN;
+const client = TEST_CLIENT;
+const account = TEST_ACCOUNT_A;
+
+describe.runIf(process.env.TW_SECRET_KEY)("erc721: claimToBatch", () => {
+  it("should optimize the claim content", () => {
+    expect(
+      optimizeClaimContent([
+        {
+          to: account.address,
+          quantity: 1n,
+        },
+        {
+          to: TEST_ACCOUNT_B.address,
+          quantity: 2n,
+        },
+        {
+          to: TEST_ACCOUNT_B.address,
+          quantity: 3n,
+        },
+        { to: TEST_ACCOUNT_C.address, quantity: 2n },
+        { to: TEST_ACCOUNT_D.address, quantity: 2n },
+        { to: account.address, quantity: 1n },
+      ]),
+    ).toStrictEqual([
+      { to: account.address, quantity: 1n },
+      { to: TEST_ACCOUNT_B.address, quantity: 5n },
+      { to: TEST_ACCOUNT_C.address, quantity: 2n },
+      { to: TEST_ACCOUNT_D.address, quantity: 2n },
+      { to: account.address, quantity: 1n },
+    ]);
+  });
+
+  it("should claim in batch", async () => {
+    const address = await deployERC721Contract({
+      account,
+      chain,
+      client,
+      params: {
+        name: "Test DropERC721",
+        contractURI: TEST_CONTRACT_URI,
+      },
+      type: "DropERC721",
+    });
+
+    const contract = getContract({
+      address,
+      chain,
+      client,
+    });
+
+    await sendAndConfirmTransaction({
+      transaction: lazyMint({
+        contract,
+        nfts: [
+          { name: "Test NFT 0" },
+          { name: "Test NFT 1" },
+          { name: "Test NFT 2" },
+          { name: "Test NFT 3" },
+          { name: "Test NFT 4" },
+          { name: "Test NFT 5" },
+          { name: "Test NFT 6" },
+          { name: "Test NFT 7" },
+          { name: "Test NFT 8" },
+          { name: "Test NFT 9" },
+          { name: "Test NFT 10" },
+        ],
+      }),
+      account,
+    });
+
+    await sendAndConfirmTransaction({
+      transaction: setClaimConditions({
+        contract,
+        phases: [{}],
+      }),
+      account: TEST_ACCOUNT_A,
+    });
+
+    const transaction = claimToBatch({
+      contract,
+      from: account.address,
+      content: [
+        {
+          to: account.address,
+          quantity: 1n,
+        },
+        {
+          to: TEST_ACCOUNT_B.address,
+          quantity: 2n,
+        },
+        {
+          to: TEST_ACCOUNT_B.address,
+          quantity: 3n,
+        },
+        { to: TEST_ACCOUNT_C.address, quantity: 2n },
+        { to: TEST_ACCOUNT_D.address, quantity: 2n },
+        { to: account.address, quantity: 1n },
+      ],
+    });
+
+    await sendAndConfirmTransaction({ account, transaction });
+
+    const nfts = await getNFTs({ contract, includeOwners: true });
+    expect(nfts.length).toBe(11);
+    expect(nfts[0]?.owner?.toLowerCase()).toBe(account.address.toLowerCase());
+    expect(nfts[1]?.owner?.toLowerCase()).toBe(
+      TEST_ACCOUNT_B.address.toLowerCase(),
+    );
+    expect(nfts[2]?.owner?.toLowerCase()).toBe(
+      TEST_ACCOUNT_B.address.toLowerCase(),
+    );
+    expect(nfts[3]?.owner?.toLowerCase()).toBe(
+      TEST_ACCOUNT_B.address.toLowerCase(),
+    );
+    expect(nfts[4]?.owner?.toLowerCase()).toBe(
+      TEST_ACCOUNT_B.address.toLowerCase(),
+    );
+    expect(nfts[5]?.owner?.toLowerCase()).toBe(
+      TEST_ACCOUNT_B.address.toLowerCase(),
+    );
+    expect(nfts[6]?.owner?.toLowerCase()).toBe(
+      TEST_ACCOUNT_C.address.toLowerCase(),
+    );
+    expect(nfts[7]?.owner?.toLowerCase()).toBe(
+      TEST_ACCOUNT_C.address.toLowerCase(),
+    );
+    expect(nfts[8]?.owner?.toLowerCase()).toBe(
+      TEST_ACCOUNT_D.address.toLowerCase(),
+    );
+    expect(nfts[9]?.owner?.toLowerCase()).toBe(
+      TEST_ACCOUNT_D.address.toLowerCase(),
+    );
+    expect(nfts[10]?.owner?.toLowerCase()).toBe(account.address.toLowerCase());
+  });
+});

package/src/extensions/erc721/drops/write/claimToBatch.ts

@@ -0,0 +1,144 @@
+import type { Address } from "abitype";
+import { multicall } from "../../../../extensions/common/__generated__/IMulticall/write/multicall.js";
+import type {
+  BaseTransactionOptions,
+  WithOverrides,
+} from "../../../../transaction/types.js";
+import { getClaimParams } from "../../../../utils/extensions/drops/get-claim-params.js";
+import { encodeClaim } from "../../__generated__/IDrop/write/claim.js";
+
+/**
+ * @extension ERC721
+ */
+export type ClaimToBatchParams = WithOverrides<{
+  content: Array<{
+    to: Address;
+    quantity: bigint;
+  }>;
+  from?: Address;
+}>;
+
+/**
+ * This extension batches multiple `claimTo` extensions into one single multicall.
+ * Keep in mind that there is a limit of how many NFTs you can claim per transaction.
+ * This limit varies depends on the network that you are transacting on.
+ *
+ * You are recommended to experiment with the number to figure out the best number for your chain of choice.
+ * @extension ERC721
+ * @param options the transaction options
+ * @returns A promise that resolves to the transaction result.
+ *
+ * @example
+ * ```ts
+ * import { claimToBatch } from "thirdweb/extensions/erc721";
+ *
+ * const transaction = claimToBatch({
+ *   contract: nftDropContract,
+ *   from: claimer.address, // address of the one calling this transaction
+ *   content: [
+ *     { to: "0x...1", quantity: 1n },
+ *     { to: "0x...2", quantity: 12n },
+ *     { to: "0x...3", quantity: 2n },
+ *   ],
+ * });
+ * ```
+ */
+export function claimToBatch(
+  options: BaseTransactionOptions<ClaimToBatchParams>,
+) {
+  return multicall({
+    contract: options.contract,
+    asyncParams: () => getClaimToBatchParams(options),
+    overrides: options.overrides,
+  });
+}
+
+/**
+ * @internal
+ */
+async function getClaimToBatchParams(
+  options: BaseTransactionOptions<ClaimToBatchParams>,
+) {
+  const errorIndexTo = options.content.findIndex((o) => !o.to);
+  if (errorIndexTo !== -1) {
+    throw new Error(
+      `Error: Item at index ${errorIndexTo} is missing recipient address ("to")`,
+    );
+  }
+  const errorIndexQuantity = options.content.findIndex((o) => !o.quantity);
+  if (errorIndexQuantity !== -1) {
+    throw new Error(
+      `Error: Item at index ${errorIndexQuantity} is missing claim quantity`,
+    );
+  }
+  const content = optimizeClaimContent(options.content);
+  const data = await Promise.all(
+    content.map(async (item) => {
+      const claimParams = await getClaimParams({
+        type: "erc721",
+        contract: options.contract,
+        to: item.to,
+        from: options.from,
+        quantity: item.quantity,
+      });
+
+      return encodeClaim({
+        receiver: claimParams.receiver,
+        quantity: claimParams.quantity,
+        currency: claimParams.currency,
+        pricePerToken: claimParams.pricePerToken,
+        allowlistProof: claimParams.allowlistProof,
+        data: claimParams.data,
+      });
+    }),
+  );
+
+  return { data };
+}
+
+/**
+ * Optimization
+ * For identical addresses that stays next to each other in the array,
+ * we can combine them into one transaction _without altering the claiming order_
+ *
+ * For exampple, this structure:
+ * [
+ *   {
+ *     to: "0xabc",
+ *     quantity: 1n,
+ *   },
+ *   {
+ *     to: "0xabc",
+ *     quantity: 13n,
+ *   },
+ * ];
+ *
+ * ...can be combined in one tx (without altering the claiming order)
+ * {
+ *   to: "0xabc",
+ *   quantity: 14n,
+ * }
+ *
+ * @internal
+ */
+export function optimizeClaimContent(
+  content: Array<{ to: Address; quantity: bigint }>,
+): Array<{ to: Address; quantity: bigint }> {
+  const results: Array<{ to: Address; quantity: bigint }> = [];
+  content.forEach((item, index) => {
+    const previousItem = results.at(-1);
+    if (
+      index > 0 &&
+      previousItem &&
+      item.to.toLowerCase() === previousItem.to.toLowerCase()
+    ) {
+      results[results.length - 1] = {
+        to: item.to,
+        quantity: item.quantity + previousItem.quantity,
+      };
+    } else {
+      results.push(item);
+    }
+  });
+  return results;
+}

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

@@ -1,3 +1,5 @@
+import type { AuthOption } from "../../../wallets/types.js";
+
 // TODO make the social icons usable in RN too
 const googleIconUri =
   "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MDUuNiIgaGVpZ2h0PSI3MjAiIHZpZXdCb3g9IjAgMCAxODYuNjkgMTkwLjUiIHhtbG5zOnY9Imh0dHBzOi8vdmVjdGEuaW8vbmFubyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTE4NC41ODMgNzY1LjE3MSkiPjxwYXRoIGNsaXAtcGF0aD0ibm9uZSIgbWFzaz0ibm9uZSIgZD0iTS0xMDg5LjMzMy02ODcuMjM5djM2Ljg4OGg1MS4yNjJjLTIuMjUxIDExLjg2My05LjAwNiAyMS45MDgtMTkuMTM3IDI4LjY2MmwzMC45MTMgMjMuOTg2YzE4LjAxMS0xNi42MjUgMjguNDAyLTQxLjA0NCAyOC40MDItNzAuMDUyIDAtNi43NTQtLjYwNi0xMy4yNDktMS43MzItMTkuNDgzeiIgZmlsbD0iIzQyODVmNCIvPjxwYXRoIGNsaXAtcGF0aD0ibm9uZSIgbWFzaz0ibm9uZSIgZD0iTS0xMTQyLjcxNC02NTEuNzkxbC02Ljk3MiA1LjMzNy0yNC42NzkgMTkuMjIzaDBjMTUuNjczIDMxLjA4NiA0Ny43OTYgNTIuNTYxIDg1LjAzIDUyLjU2MSAyNS43MTcgMCA0Ny4yNzgtOC40ODYgNjMuMDM4LTIzLjAzM2wtMzAuOTEzLTIzLjk4NmMtOC40ODYgNS43MTUtMTkuMzEgOS4xNzktMzIuMTI1IDkuMTc5LTI0Ljc2NSAwLTQ1LjgwNi0xNi43MTItNTMuMzQtMzkuMjI2eiIgZmlsbD0iIzM0YTg1MyIvPjxwYXRoIGNsaXAtcGF0aD0ibm9uZSIgbWFzaz0ibm9uZSIgZD0iTS0xMTc0LjM2NS03MTIuNjFjLTYuNDk0IDEyLjgxNS0xMC4yMTcgMjcuMjc2LTEwLjIxNyA0Mi42ODlzMy43MjMgMjkuODc0IDEwLjIxNyA0Mi42ODljMCAuMDg2IDMxLjY5My0yNC41OTIgMzEuNjkzLTI0LjU5Mi0xLjkwNS01LjcxNS0zLjAzMS0xMS43NzYtMy4wMzEtMTguMDk4czEuMTI2LTEyLjM4MyAzLjAzMS0xOC4wOTh6IiBmaWxsPSIjZmJiYzA1Ii8+PHBhdGggZD0iTS0xMDg5LjMzMy03MjcuMjQ0YzE0LjAyOCAwIDI2LjQ5NyA0Ljg0OSAzNi40NTUgMTQuMjAxbDI3LjI3Ni0yNy4yNzZjLTE2LjUzOS0xNS40MTMtMzguMDEzLTI0Ljg1Mi02My43MzEtMjQuODUyLTM3LjIzNCAwLTY5LjM1OSAyMS4zODgtODUuMDMyIDUyLjU2MWwzMS42OTIgMjQuNTkyYzcuNTMzLTIyLjUxNCAyOC41NzUtMzkuMjI2IDUzLjM0LTM5LjIyNnoiIGZpbGw9IiNlYTQzMzUiIGNsaXAtcGF0aD0ibm9uZSIgbWFzaz0ibm9uZSIvPjwvZz48L3N2Zz4=";
@@ -49,7 +51,7 @@ export const socialIcons = {
 };
 
 // TODO: this should return actual <svg> elements so they can be themed
-export function getWalletIcon(provider: string) {
+export function getSocialIcon(provider: AuthOption | ({} & string)) {
   switch (provider) {
     case "google":
       return googleIconUri;

package/src/react/web/hooks/transaction/useSendTransaction.tsx

@@ -36,10 +36,9 @@ import { TransactionModal } from "../../ui/TransactionButton/TransactionModal.js
  *
  * const onClick = () => {
  *   const transaction = prepareContractCall({
- *       contract,
- *       method: "function transfer(address to, uint256 value)",
- *       params: [to, value],
- *     }),
+ *     contract,
+ *     method: "function transfer(address to, uint256 value)",
+ *     params: [to, value],
  *   });
  *   sendTx(transaction);
  * };

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

@@ -10,7 +10,7 @@ import {
 } from "@radix-ui/react-icons";
 import { useQuery } from "@tanstack/react-query";
 import { useContext, useEffect, useState } from "react";
-import { trackPayEvent } from "../../../../analytics/track.js";
+import { trackPayEvent } from "../../../../analytics/track/pay.js";
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { getContract } from "../../../../contract/contract.js";
@@ -200,9 +200,7 @@ export const ConnectedWalletDetails: React.FC<{
 
   const avatarSrc = props.detailsButton?.connectedAccountAvatarUrl || pfp;
 
-  const combinedClassName = `${TW_CONNECTED_WALLET} ${
-    props.detailsButton?.className || ""
-  }`;
+  const combinedClassName = `${TW_CONNECTED_WALLET} ${props.detailsButton?.className || ""}`;
 
   return (
     <WalletInfoButton

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

@@ -1,7 +1,7 @@
 import { IdCardIcon } from "@radix-ui/react-icons";
 import { useQueryClient } from "@tanstack/react-query";
 import { useCallback, useMemo, useState } from "react";
-import { trackPayEvent } from "../../../../../../analytics/track.js";
+import { trackPayEvent } from "../../../../../../analytics/track/pay.js";
 import type { Chain } from "../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../../constants/addresses.js";

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

@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { trackPayEvent } from "../../../../../../analytics/track.js";
+import { trackPayEvent } from "../../../../../../analytics/track/pay.js";
 import type { Chain } from "../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../../constants/addresses.js";

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

@@ -1,4 +1,4 @@
-import { trackPayEvent } from "../../../../../../analytics/track.js";
+import { trackPayEvent } from "../../../../../../analytics/track/pay.js";
 import type { Chain } from "../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../../constants/addresses.js";

package/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatFlow.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useState } from "react";
-import { trackPayEvent } from "../../../../../../../analytics/track.js";
+import { trackPayEvent } from "../../../../../../../analytics/track/pay.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import type { BuyWithFiatQuote } from "../../../../../../../pay/buyWithFiat/getQuote.js";
 import {

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/ConfirmationScreen.tsx

@@ -1,6 +1,6 @@
 import { CrossCircledIcon } from "@radix-ui/react-icons";
 import { useState } from "react";
-import { trackPayEvent } from "../../../../../../../analytics/track.js";
+import { trackPayEvent } from "../../../../../../../analytics/track/pay.js";
 import type { Chain } from "../../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";

package/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.tsx

@@ -4,7 +4,7 @@ import { shortenAddress } from "../../../../../utils/address.js";
 import type { Profile } from "../../../../../wallets/in-app/core/authentication/types.js";
 import { fontSize, iconSize } from "../../../../core/design-system/index.js";
 import { useSocialProfiles } from "../../../../core/social/useSocialProfiles.js";
-import { getWalletIcon } from "../../../../core/utils/walletIcon.js";
+import { getSocialIcon } from "../../../../core/utils/walletIcon.js";
 import { useProfiles } from "../../../hooks/wallets/useProfiles.js";
 import { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js";
 import { Img } from "../../components/Img.js";
@@ -149,7 +149,7 @@ function LinkedProfile({
         </Container>
       ) : (
         <Img
-          src={getWalletIcon(profile.type)}
+          src={getSocialIcon(profile.type)}
           width={iconSize.lg}
           height={iconSize.lg}
           loading="eager"

package/src/react/web/ui/TransactionButton/TransactionModal.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
-import { trackPayEvent } from "../../../../analytics/track.js";
+import { trackPayEvent } from "../../../../analytics/track/pay.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import type { WaitForReceiptOptions } from "../../../../transaction/actions/wait-for-tx-receipt.js";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";

package/src/react/web/ui/components/WalletImage.tsx

@@ -11,7 +11,7 @@ import { getLastAuthProvider } from "../../../core/utils/storage.js";
 import { useWalletImage } from "../../../core/utils/wallet.js";
 import {
   genericWalletIcon,
-  getWalletIcon,
+  getSocialIcon,
 } from "../../../core/utils/walletIcon.js";
 import { Img } from "./Img.js";
 
@@ -43,7 +43,7 @@ export function WalletImage(props: {
         // when showing an active wallet icon - check last auth provider and override the IAW icon
         const lastAuthProvider = await getLastAuthProvider(storage);
         image = lastAuthProvider
-          ? getWalletIcon(lastAuthProvider)
+          ? getSocialIcon(lastAuthProvider)
           : genericWalletIcon;
       } else {
         const mipdImage = getInstalledWalletProviders().find(

package/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx

@@ -26,7 +26,7 @@ import {
 import { setLastAuthProvider } from "../../../core/utils/storage.js";
 import {
   emailIcon,
-  getWalletIcon,
+  getSocialIcon,
   passkeyIcon,
   phoneIcon,
   socialIcons,
@@ -471,7 +471,7 @@ export const ConnectWalletSocialOptions = (
       {guestEnabled && (
         <WalletTypeRowButton
           client={props.client}
-          icon={getWalletIcon("guest")}
+          icon={getSocialIcon("guest")}
           onClick={() => {
             handleGuestLogin();
           }}
@@ -483,7 +483,7 @@ export const ConnectWalletSocialOptions = (
       {props.isLinking && (
         <WalletTypeRowButton
           client={props.client}
-          icon={getWalletIcon("")}
+          icon={getSocialIcon("")}
           onClick={() => {
             handleWalletLogin();
           }}