thirdweb 5.61.7-nightly-da9f1964e4ae74ed5d33666788e2d16e4d56614d-20241015000333 → 5.63.0-nightly-3a141e742c19eeeecf031a3014cb476ee69d4c0c-20241016000332

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

@@ -0,0 +1,117 @@
+import { maxUint256 } from "viem";
+import { multicall } from "../../../extensions/common/__generated__/IMulticall/write/multicall.js";
+import { upload } from "../../../storage/upload.js";
+import type {
+  BaseTransactionOptions,
+  WithOverrides,
+} from "../../../transaction/types.js";
+import type { NFTInput } from "../../../utils/nft/parseNft.js";
+import { encodeMintTo } from "../__generated__/IMintableERC1155/write/mintTo.js";
+
+/**
+ * @extension ERC1155
+ */
+export type MintToBatchParams = WithOverrides<{
+  /**
+   * The wallet that the NFTs will be minted to
+   */
+  to: string;
+  /**
+   * An array of NFT metadata & supply to mint
+   * @example
+   * ```ts
+   * const nfts = [
+   *   {
+   *     metadata: { name: "token 0" },
+   *     supply: 1n,
+   *   },
+   *   {
+   *     metadata: { name: "token 1" },
+   *     supply: 10n,
+   *   },
+   * ]
+   * ```
+   */
+  nfts: Array<{
+    supply: bigint;
+    metadata: NFTInput | string;
+  }>;
+}>;
+
+/**
+ * This extension batches multiple `mintTo` extensions into one single multicall.
+ * Keep in mind that there is a limit of how many NFTs you can mint 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.
+ * @param options - the transaction options
+ * @returns A promise that resolves to the transaction result.
+ * @extension ERC1155
+ * @example
+ * ```ts
+ * import { mintBatchTo } from "thirdweb/extension/erc1155";
+ *
+ * const transaction = mintToBatch({
+ *   contract: editionContract,
+ *   to: "0x...",
+ *   nfts: [
+ *     {
+ *       metadata: {
+ *         name: "Token #0",
+ *         image: "...",
+ *         attributes: [],
+ *       },
+ *       supply: 100n,
+ *     },
+ *     {
+ *       metadata: {
+ *         name: "Token #1",
+ *         image: "...",
+ *         attributes: [],
+ *       },
+ *       supply: 111n,
+ *     },
+ *   ],
+ * });
+ *
+ * await sendTransaction({ transaction, account });
+ * ```
+ */
+export function mintToBatch(
+  options: BaseTransactionOptions<MintToBatchParams>,
+) {
+  return multicall({
+    contract: options.contract,
+    asyncParams: async () => {
+      const uris = await Promise.all(
+        options.nfts.map((item) => {
+          if (typeof item.metadata === "string") {
+            return item.metadata;
+          }
+          return upload({
+            client: options.contract.client,
+            files: [item.metadata],
+          });
+        }),
+      );
+
+      const data = uris.map((uri, index) => {
+        const item = options.nfts[index];
+        if (!item) {
+          // Should not happen
+          throw new Error("Index mismatch");
+        }
+        return encodeMintTo({
+          to: options.to,
+          // maxUint256 is used to indicate that this is a NEW token!
+          tokenId: maxUint256,
+          uri,
+          amount: item.supply,
+        });
+      });
+
+      return { data };
+    },
+    overrides: options.overrides,
+  });
+}

package/src/extensions/erc721/lazyMinting/write/createDelayedRevealBatch.test.ts

@@ -1,97 +1,92 @@
-import { beforeAll, describe, expect, it, vi } from "vitest";
+import { describe, expect, it } from "vitest";
+import { TEST_CONTRACT_URI } from "~test/ipfs-uris.js";
+import { TEST_ACCOUNT_D } from "~test/test-wallets.js";
 import { ANVIL_CHAIN } from "../../../../../test/src/chains.js";
 import { TEST_CLIENT } from "../../../../../test/src/test-clients.js";
-import {
-  type ThirdwebContract,
-  getContract,
-} from "../../../../contract/contract.js";
-import type { Hex } from "../../../../utils/encoding/hex.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 { getNFT } from "../../read/getNFT.js";
 import { createDelayedRevealBatch } from "./createDelayedRevealBatch.js";
+import { reveal } from "./reveal.js";
 
-const mocks = vi.hoisted(() => ({
-  getBaseUriFromBatch: vi.fn(),
-  getBaseURICount: vi.fn(),
-  encryptDecrypt: vi.fn(),
-  lazyMint: vi.fn(),
-  upload: vi.fn(),
-}));
-
-vi.mock("../../../../utils/ipfs.js", () => ({
-  getBaseUriFromBatch: mocks.getBaseUriFromBatch,
-}));
-
-vi.mock(
-  "../../__generated__/IBatchMintMetadata/read/getBaseURICount.js",
-  () => ({
-    getBaseURICount: mocks.getBaseURICount,
-  }),
-);
-
-vi.mock("../../__generated__/IDelayedReveal/read/encryptDecrypt.js", () => ({
-  encryptDecrypt: mocks.encryptDecrypt,
-}));
-
-vi.mock("../../../../storage/upload.js", () => ({
-  upload: mocks.upload,
-}));
-
-const placeholderNFT = {
+const placeholderMetadata = {
   name: "Hidden NFT",
   description: "Will be revealed next week!",
 };
+const account = TEST_ACCOUNT_D;
+const chain = ANVIL_CHAIN;
+const client = TEST_CLIENT;
+const password = "1234";
 
-const realNFTs = [
-  {
-    name: "Common NFT #1",
-    description: "Common NFT, one of many.",
-  },
-  {
-    name: "Super Rare NFT #2",
-    description: "You got a Super Rare NFT!",
-  },
-];
+describe.runIf(process.env.TW_SECRET_KEY)("createDelayedRevealedBatch", () => {
+  it("should create delayed-reveal batches properly", async () => {
+    const contract = getContract({
+      address: await deployERC721Contract({
+        account,
+        chain,
+        client,
+        type: "DropERC721",
+        params: {
+          name: "nftdrop",
+          contractURI: TEST_CONTRACT_URI,
+        },
+      }),
+      chain,
+      client,
+    });
 
-describe("createDelayedRevealedBatch", () => {
-  let contract: ThirdwebContract;
-  beforeAll(() => {
-    vi.clearAllMocks();
-    contract = getContract({
-      chain: ANVIL_CHAIN,
-      address: "0x708781BAE850faA490cB5b5b16b4687Ec0A8D65D",
-      client: TEST_CLIENT,
+    // Create batch #0
+    await sendAndConfirmTransaction({
+      account,
+      transaction: createDelayedRevealBatch({
+        contract,
+        placeholderMetadata,
+        password: "1234",
+        metadata: [{ name: "token 0" }, { name: "token 1" }],
+      }),
     });
-  });
 
-  it("should generate the proper calldata", async () => {
-    mocks.getBaseUriFromBatch
-      .mockReturnValueOnce(
-        "ipfs://QmQbqDu4aT7sMJHNUk76s4F6DgGk2hVYXYSqpsTRoRM5G8/",
-      )
-      .mockReturnValueOnce(
-        "ipfs://QmRhASFGXNRE3NXNTfakz82j4Tmv5A9rBezTKGZ5DL6uip/",
-      );
-    mocks.getBaseURICount.mockResolvedValue(0n);
-    mocks.encryptDecrypt.mockResolvedValue(
-      "0x8967ae24bd1c6439791bc1c8ca3b3499537283b71af366693792a707eb99e80bc0058c90c1f92f18ec716e4760fdf9279241d442b5b5",
-    );
+    // Create batch #1
+    await sendAndConfirmTransaction({
+      account,
+      transaction: createDelayedRevealBatch({
+        contract,
+        placeholderMetadata,
+        password,
+        metadata: [{ name: "token 2" }, { name: "token 3" }],
+      }),
+    });
 
-    const tx = createDelayedRevealBatch({
-      contract,
-      placeholderMetadata: placeholderNFT,
-      metadata: realNFTs,
-      password: "password123",
+    // Reveal batch #0
+    await sendAndConfirmTransaction({
+      account,
+      transaction: reveal({ contract, batchId: 0n, password }),
+    });
+    // Reveal batch #1
+    await sendAndConfirmTransaction({
+      account,
+      transaction: reveal({ contract, batchId: 1n, password }),
     });
 
-    let data: Hex;
-    if (typeof tx.data === "string") {
-      data = tx.data;
-    } else {
-      data = (await tx.data?.()) || "0x";
-    }
+    /**
+     * The token URIs of batch 0 should end with "/0" and "/1"
+     * while the token URIs of batch 1 should end with "/2" and "/3"
+     */
+    const [token0, token1, token2, token3] = await Promise.all([
+      getNFT({ contract, tokenId: 0n }),
+      getNFT({ contract, tokenId: 1n }),
+      getNFT({ contract, tokenId: 2n }),
+      getNFT({ contract, tokenId: 3n }),
+    ]);
 
-    expect(data).toEqual(
-      "0xd37c353b0000000000000000000000000000000000000000000000000000000000000002000000000000000000000000000000000000000000000000000000000000006000000000000000000000000000000000000000000000000000000000000000c00000000000000000000000000000000000000000000000000000000000000036697066733a2f2f516d516271447534615437734d4a484e556b3736733446364467476b3268565958595371707354526f524d3547382f0000000000000000000000000000000000000000000000000000000000000000000000000000000000a00000000000000000000000000000000000000000000000000000000000000040963325533d81f66ae93aff4f562735814e51020ea8bf2bd48eb983ae88cbc40b00000000000000000000000000000000000000000000000000000000000000368967ae24bd1c6439791bc1c8ca3b3499537283b71af366693792a707eb99e80bc0058c90c1f92f18ec716e4760fdf9279241d442b5b500000000000000000000",
-    );
-    expect(mocks.upload).toHaveBeenCalledTimes(2);
+    expect(token0.tokenURI.endsWith("/0")).toBe(true);
+    expect(token0.metadata.name).toBe("token 0");
+    expect(token1.tokenURI.endsWith("/1")).toBe(true);
+    expect(token1.metadata.name).toBe("token 1");
+    expect(token2.tokenURI.endsWith("/2")).toBe(true);
+    expect(token2.metadata.name).toBe("token 2");
+    expect(token3.tokenURI.endsWith("/3")).toBe(true);
+    expect(token3.metadata.name).toBe("token 3");
   });
 });

package/src/extensions/erc721/lazyMinting/write/createDelayedRevealBatch.ts

@@ -14,6 +14,7 @@ import {
   encryptDecrypt,
   isEncryptDecryptSupported,
 } from "../../__generated__/IDelayedReveal/read/encryptDecrypt.js";
+import { nextTokenIdToMint } from "../../__generated__/IERC721Enumerable/read/nextTokenIdToMint.js";
 import {
   lazyMint as generatedLazyMint,
   isLazyMintSupported,
@@ -80,16 +81,29 @@ export function createDelayedRevealBatch(
   return generatedLazyMint({
     contract: options.contract,
     asyncParams: async () => {
-      const placeholderUris = await upload({
-        client: options.contract.client,
-        files: Array(options.metadata.length).fill(options.placeholderMetadata),
-      });
+      const [placeholderUris, startFileNumber] = await Promise.all([
+        upload({
+          client: options.contract.client,
+          files: Array(options.metadata.length).fill(
+            options.placeholderMetadata,
+          ),
+        }),
+        nextTokenIdToMint({
+          contract: options.contract,
+        }),
+      ]);
       const placeholderUri = getBaseUriFromBatch(placeholderUris);
 
       const uris = await upload({
         client: options.contract.client,
         files: options.metadata,
+        // IMPORTANT: File number has to be calculated properly otherwise the whole batch will break
+        // e.g: If you are uploading a second batch, the file name should never start from `0`
+        rewriteFileNames: {
+          fileStartNumber: Number(startFileNumber),
+        },
       });
+
       const baseUri = getBaseUriFromBatch(uris);
       const baseUriId = await getBaseURICount({
         contract: options.contract,

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

@@ -15,6 +15,8 @@ const farcasterIconUri =
   "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIiB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cmVjdCB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIiByeD0iMjAwIiBmaWxsPSIjODU1RENEIi8+CjxwYXRoIGQ9Ik0yNTcuNzc4IDE1NS41NTZINzQyLjIyMlY4NDQuNDQ0SDY3MS4xMTFWNTI4Ljg4OUg2NzAuNDE0QzY2Mi41NTQgNDQxLjY3NyA1ODkuMjU4IDM3My4zMzMgNTAwIDM3My4zMzNDNDEwLjc0MiAzNzMuMzMzIDMzNy40NDYgNDQxLjY3NyAzMjkuNTg2IDUyOC44ODlIMzI4Ljg4OVY4NDQuNDQ0SDI1Ny43NzhWMTU1LjU1NloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0xMjguODg5IDI1My4zMzNMMTU3Ljc3OCAzNTEuMTExSDE4Mi4yMjJWNzQ2LjY2N0MxNjkuOTQ5IDc0Ni42NjcgMTYwIDc1Ni42MTYgMTYwIDc2OC44ODlWNzk1LjU1NkgxNTUuNTU2QzE0My4yODMgNzk1LjU1NiAxMzMuMzMzIDgwNS41MDUgMTMzLjMzMyA4MTcuNzc4Vjg0NC40NDRIMzgyLjIyMlY4MTcuNzc4QzM4Mi4yMjIgODA1LjUwNSAzNzIuMjczIDc5NS41NTYgMzYwIDc5NS41NTZIMzU1LjU1NlY3NjguODg5QzM1NS41NTYgNzU2LjYxNiAzNDUuNjA2IDc0Ni42NjcgMzMzLjMzMyA3NDYuNjY3SDMwNi42NjdWMjUzLjMzM0gxMjguODg5WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTY3NS41NTYgNzQ2LjY2N0M2NjMuMjgzIDc0Ni42NjcgNjUzLjMzMyA3NTYuNjE2IDY1My4zMzMgNzY4Ljg4OVY3OTUuNTU2SDY0OC44ODlDNjM2LjYxNiA3OTUuNTU2IDYyNi42NjcgODA1LjUwNSA2MjYuNjY3IDgxNy43NzhWODQ0LjQ0NEg4NzUuNTU2VjgxNy43NzhDODc1LjU1NiA4MDUuNTA1IDg2NS42MDYgNzk1LjU1NiA4NTMuMzMzIDc5NS41NTZIODQ4Ljg4OVY3NjguODg5Qzg0OC44ODkgNzU2LjYxNiA4MzguOTQgNzQ2LjY2NyA4MjYuNjY3IDc0Ni42NjdWMzUxLjExMUg4NTEuMTExTDg4MCAyNTMuMzMzSDcwMi4yMjJWNzQ2LjY2N0g2NzUuNTU2WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==";
 const telegramIconUri =
   "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTAwMHB4IiBoZWlnaHQ9IjEwMDBweCIgdmlld0JveD0iMCAwIDEwMDAgMTAwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTMuMiAoNzI2NDMpIC0gaHR0cHM6Ly9za2V0Y2hhcHAuY29tIC0tPgogICAgPHRpdGxlPkFydGJvYXJkPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+CiAgICAgICAgPGxpbmVhckdyYWRpZW50IHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9Ijk5LjI1ODM0MDQlIiBpZD0ibGluZWFyR3JhZGllbnQtMSI+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMyQUFCRUUiIG9mZnNldD0iMCUiPjwvc3RvcD4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzIyOUVEOSIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJBcnRib2FyZCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgZmlsbD0idXJsKCNsaW5lYXJHcmFkaWVudC0xKSIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIj48L2NpcmNsZT4KICAgICAgICA8cGF0aCBkPSJNMjI2LjMyODQxOSw0OTQuNzIyMDY5IEMzNzIuMDg4NTczLDQzMS4yMTY2ODUgNDY5LjI4NDgzOSwzODkuMzUwMDQ5IDUxNy45MTcyMTYsMzY5LjEyMjE2MSBDNjU2Ljc3MjUzNSwzMTEuMzY3NDMgNjg1LjYyNTQ4MSwzMDEuMzM0ODE1IDcwNC40MzE0MjcsMzAxLjAwMzUzMiBDNzA4LjU2NzYyMSwzMDAuOTMwNjcgNzE3LjgxNTgzOSwzMDEuOTU1NzQzIDcyMy44MDY0NDYsMzA2LjgxNjcwNyBDNzI4Ljg2NDc5NywzMTAuOTIxMjEgNzMwLjI1NjU1MiwzMTYuNDY1ODEgNzMwLjkyMjU1MSwzMjAuMzU3MzI5IEM3MzEuNTg4NTUxLDMyNC4yNDg4NDggNzMyLjQxNzg3OSwzMzMuMTEzODI4IDczMS43NTg2MjYsMzQwLjA0MDY2NiBDNzI0LjIzNDAwNyw0MTkuMTAyNDg2IDY5MS42NzUxMDQsNjEwLjk2NDY3NCA2NzUuMTEwOTgyLDY5OS41MTUyNjcgQzY2OC4xMDIwOCw3MzYuOTg0MzQyIDY1NC4zMDEzMzYsNzQ5LjU0NzUzMiA2NDAuOTQwNjE4LDc1MC43NzcwMDYgQzYxMS45MDQ2ODQsNzUzLjQ0ODkzOCA1ODkuODU2MTE1LDczMS41ODgwMzUgNTYxLjczMzM5Myw3MTMuMTUzMjM3IEM1MTcuNzI2ODg2LDY4NC4zMDY0MTYgNDkyLjg2NjAwOSw2NjYuMzQ5MTgxIDQ1MC4xNTAwNzQsNjM4LjIwMDAxMyBDNDAwLjc4NDQyLDYwNS42Njg3OCA0MzIuNzg2MTE5LDU4Ny43ODkwNDggNDYwLjkxOTQ2Miw1NTguNTY4NTYzIEM0NjguMjgyMDkxLDU1MC45MjE0MjMgNTk2LjIxNTA4LDQzNC41NTY0NzkgNTk4LjY5MTIyNyw0MjQuMDAwMzU1IEM1OTkuMDAwOTEsNDIyLjY4MDEzNSA1OTkuMjg4MzEyLDQxNy43NTg5ODEgNTk2LjM2NDc0LDQxNS4xNjA0MzEgQzU5My40NDExNjgsNDEyLjU2MTg4MSA1ODkuMTI2MjI5LDQxMy40NTA0ODQgNTg2LjAxMjQ0OCw0MTQuMTU3MTk4IEM1ODEuNTk4NzU4LDQxNS4xNTg5NDMgNTExLjI5Nzc5Myw0NjEuNjI1Mjc0IDM3NS4xMDk1NTMsNTUzLjU1NjE4OSBDMzU1LjE1NDg1OCw1NjcuMjU4NjIzIDMzNy4wODA1MTUsNTczLjkzNDkwOCAzMjAuODg2NTI0LDU3My41ODUwNDYgQzMwMy4wMzM5NDgsNTczLjE5OTM1MSAyNjguNjkyNzU0LDU2My40OTA5MjggMjQzLjE2MzYwNiw1NTUuMTkyNDA4IEMyMTEuODUxMDY3LDU0NS4wMTM5MzYgMTg2Ljk2NDQ4NCw1MzkuNjMyNTA0IDE4OS4xMzE1NDcsNTIyLjM0NjMwOSBDMTkwLjI2MDI4Nyw1MTMuMzQyNTg5IDIwMi42NTkyNDQsNTA0LjEzNDUwOSAyMjYuMzI4NDE5LDQ5NC43MjIwNjkgWiIgaWQ9IlBhdGgtMyIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgPC9nPgo8L3N2Zz4=";
+const twitchIconUri =
+  "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjQwMCAyODAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNDAwIDI4MDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KCS5zdDF7ZmlsbDojOTE0NkZGO30KPC9zdHlsZT4KPHRpdGxlPkFzc2V0IDI8L3RpdGxlPgo8Zz4KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMjIwMCwxMzAwIDE4MDAsMTcwMCAxNDAwLDE3MDAgMTA1MCwyMDUwIDEwNTAsMTcwMCA2MDAsMTcwMCA2MDAsMjAwIDIyMDAsMjAwIAkiLz4KCTxnPgoJCTxnIGlkPSJMYXllcl8xLTIiPgoJCQk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNNTAwLDBMMCw1MDB2MTgwMGg2MDB2NTAwbDUwMC01MDBoNDAwbDkwMC05MDBWMEg1MDB6IE0yMjAwLDEzMDBsLTQwMCw0MDBoLTQwMGwtMzUwLDM1MHYtMzUwSDYwMFYyMDBoMTYwMAoJCQkJVjEzMDB6Ii8+CgkJCTxyZWN0IHg9IjE3MDAiIHk9IjU1MCIgY2xhc3M9InN0MSIgd2lkdGg9IjIwMCIgaGVpZ2h0PSI2MDAiLz4KCQkJPHJlY3QgeD0iMTE1MCIgeT0iNTUwIiBjbGFzcz0ic3QxIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjYwMCIvPgoJCTwvZz4KCTwvZz4KPC9nPgo8L3N2Zz4K";
 const xIcon =
   "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjMyMCIgdmlld0JveD0iMCAwIDMyMCAzMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIzMjAiIGhlaWdodD0iMzIwIiByeD0iMjQiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0xNzcuMzE1IDE0NS4zMzVMMjQ1LjA2OCA2N0gyMjkuMDEzTDE3MC4xODIgMTM1LjAxN0wxMjMuMTk1IDY3SDY5TDE0MC4wNTUgMTY5Ljg1NEw2OSAyNTJIODUuMDU2M0wxNDcuMTgzIDE4MC4xNzJMMTk2LjgwNSAyNTJIMjUxTDE3Ny4zMTEgMTQ1LjMzNUgxNzcuMzE1Wk0xNTUuMzIzIDE3MC43NkwxNDguMTI0IDE2MC41MThMOTAuODQxNyA3OS4wMjJIMTE1LjUwM0wxNjEuNzMxIDE0NC43OTJMMTY4LjkzIDE1NS4wMzRMMjI5LjAyIDI0MC41MjVIMjA0LjM1OUwxNTUuMzIzIDE3MC43NjRWMTcwLjc2WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==";
 export const emailIcon =
@@ -40,6 +42,7 @@ export const socialIcons = {
   x: xIcon,
   farcaster: farcasterIconUri,
   telegram: telegramIconUri,
+  twitch: twitchIconUri,
 };
 
 // TODO: this should return actual <svg> elements so they can be themed
@@ -69,6 +72,8 @@ export function getWalletIcon(provider: string) {
       return farcasterIconUri;
     case "telegram":
       return telegramIconUri;
+    case "twitch":
+      return twitchIconUri;
     case "guest":
       return guestIcon;
     default:

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

@@ -1,4 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
+import type { ThirdwebClient } from "../../../../client/client.js";
+import { resolveScheme } from "../../../../utils/ipfs.js";
 import { nativeLocalStorage } from "../../../../utils/storage/nativeStorage.js";
 import { getWalletInfo } from "../../../../wallets/__generated__/getWalletInfo.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
@@ -17,6 +19,7 @@ import {
   PASSKEY_ICON,
   PHONE_ICON,
   TELEGRAM_ICON,
+  TWITCH_ICON,
   WALLET_ICON,
   X_ICON,
 } from "../icons/svgs.js";
@@ -25,10 +28,11 @@ import { RNImage } from "./RNImage.js";
 export const WalletImage = (props: {
   theme: Theme;
   wallet: Wallet;
+  client: ThirdwebClient;
   size: number;
   avatar?: string | null;
 }) => {
-  const { wallet, avatar, size } = props;
+  const { wallet, avatar, size, client } = props;
 
   const { data: imageData } = useQuery({
     queryKey: ["wallet-image", wallet.id, wallet.getAccount()?.address],
@@ -55,7 +59,7 @@ export const WalletImage = (props: {
       try {
         const externalWalletImage = await getWalletInfo(activeEOAId, true);
         if (externalWalletImage) {
-          return externalWalletImage;
+          return resolveScheme({ client, uri: externalWalletImage });
         }
       } catch {}
 
@@ -99,6 +103,8 @@ export function getAuthProviderImage(authProvider: string | null): string {
       return FARCASTER_ICON;
     case "telegram":
       return TELEGRAM_ICON;
+    case "twitch":
+      return TWITCH_ICON;
     case "guest":
       return GUEST_ICON;
     default:

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

@@ -2,6 +2,7 @@ import { useCallback, useState } from "react";
 import { Platform, StyleSheet, View } from "react-native";
 import { SvgXml } from "react-native-svg";
 import type { Chain } from "../../../../chains/types.js";
+import type { ThirdwebClient } from "../../../../client/client.js";
 import type { MultiStepAuthProviderType } from "../../../../wallets/in-app/core/authentication/types.js";
 import type { InAppWalletAuth } from "../../../../wallets/in-app/core/wallet/types.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
@@ -269,6 +270,7 @@ export function ConnectModal(
           <WalletLoadingView
             theme={theme}
             wallet={modalState.wallet}
+            client={client}
             authProvider={modalState.authMethod}
           />
           {containerType === "modal" ? (
@@ -328,6 +330,7 @@ export function ConnectModal(
           )}
           <SignInView
             theme={theme}
+            client={client}
             siweAuth={siweAuth}
             onSignIn={() => props.onClose?.()}
             onError={(error) => setModalState({ screen: "error", error })}
@@ -462,10 +465,12 @@ export function ConnectModal(
 function WalletLoadingView({
   theme,
   wallet,
+  client,
   authProvider,
 }: {
   theme: Theme;
   wallet: Wallet;
+  client: ThirdwebClient;
   authProvider?: InAppWalletAuth;
 }) {
   const walletInfo = useWalletInfo(wallet.id);
@@ -500,7 +505,12 @@ function WalletLoadingView({
             />
           </View>
         ) : (
-          <WalletImage theme={theme} size={90} wallet={wallet} />
+          <WalletImage
+            theme={theme}
+            size={90}
+            wallet={wallet}
+            client={client}
+          />
         )}
       </WalletLoadingThumbnail>
       <Spacer size="xl" />
@@ -522,12 +532,14 @@ function WalletLoadingView({
 function SignInView({
   theme,
   siweAuth,
+  client,
   onSignIn,
   onError,
   onDisconnect,
 }: {
   theme: Theme;
   siweAuth: ReturnType<typeof useSiweAuth>;
+  client: ThirdwebClient;
   onSignIn: () => void;
   onError: (error: string) => void;
   onDisconnect: () => void;
@@ -552,7 +564,12 @@ function SignInView({
           imageSize={100}
           animate={isSigningIn}
         >
-          <WalletImage theme={theme} size={90} wallet={wallet} />
+          <WalletImage
+            theme={theme}
+            size={90}
+            wallet={wallet}
+            client={client}
+          />
         </WalletLoadingThumbnail>
         <Spacer size="xl" />
         <ThemedText theme={theme} type="subtitle">

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

@@ -20,7 +20,7 @@ export function ConnectedButton(
   },
 ) {
   const theme = parseTheme(props.theme);
-  const { account, wallet } = props;
+  const { account, wallet, client } = props;
   const walletChain = useActiveWalletChain();
   const { pfp, name, balanceQuery } = useConnectedWalletDetails(
     props.client,
@@ -40,7 +40,13 @@ export function ConnectedButton(
       }}
     >
       <View style={styles.row}>
-        <WalletImage theme={theme} size={40} wallet={wallet} avatar={pfp} />
+        <WalletImage
+          theme={theme}
+          size={40}
+          wallet={wallet}
+          avatar={pfp}
+          client={client}
+        />
         <View style={styles.col}>
           <ThemedText
             theme={theme}

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

@@ -85,6 +85,7 @@ export function ConnectedModal(props: ConnectedModalProps) {
         <ReceiveScreen
           account={props.account}
           wallet={props.wallet}
+          client={props.client}
           theme={theme}
           containerType={props.containerType}
           onBack={() => setModalState({ screen: "account" })}
@@ -161,7 +162,7 @@ export function ConnectedModal(props: ConnectedModalProps) {
 }
 
 const AccountHeader = (props: ConnectedModalProps) => {
-  const { account, wallet, theme } = props;
+  const { account, wallet, theme, client } = props;
   const walletChain = useActiveWalletChain();
   const { pfp, name, balanceQuery } = useConnectedWalletDetails(
     props.client,
@@ -171,7 +172,13 @@ const AccountHeader = (props: ConnectedModalProps) => {
   );
   return (
     <View style={styles.accountHeaderContainer}>
-      <WalletImage theme={theme} size={70} wallet={wallet} avatar={pfp} />
+      <WalletImage
+        theme={theme}
+        size={70}
+        wallet={wallet}
+        avatar={pfp}
+        client={client}
+      />
       <SmartAccountBadge client={props.client} theme={theme} />
       <Spacer size="smd" />
       <Address account={account} theme={theme} addressOrENS={name} />

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

@@ -37,6 +37,7 @@ import {
   GOOGLE_ICON,
   LINE_ICON,
   TELEGRAM_ICON,
+  TWITCH_ICON,
   X_ICON,
 } from "../icons/svgs.js";
 import type { ModalState } from "./ConnectModal.js";
@@ -61,6 +62,7 @@ const socialIcons = {
   x: X_ICON,
   farcaster: FARCASTER_ICON,
   telegram: TELEGRAM_ICON,
+  twitch: TWITCH_ICON,
 };
 
 type InAppWalletFormUIProps = {

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

@@ -1,4 +1,5 @@
 import { StyleSheet, View } from "react-native";
+import type { ThirdwebClient } from "../../../../client/client.js";
 import { shortenAddress } from "../../../../utils/address.js";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { Theme } from "../../../core/design-system/index.js";
@@ -16,10 +17,12 @@ type ReceiveScreenProps = {
   onClose?: () => void;
   onBack?: () => void;
   containerType: ContainerType;
+  client: ThirdwebClient;
 };
 
 export const ReceiveScreen = (props: ReceiveScreenProps) => {
-  const { wallet, account, theme, onClose, onBack, containerType } = props;
+  const { wallet, account, theme, onClose, onBack, containerType, client } =
+    props;
 
   return (
     <>
@@ -32,7 +35,7 @@ export const ReceiveScreen = (props: ReceiveScreenProps) => {
       />
       <View style={styles.container}>
         {/* TODO (rn) QR code scanning */}
-        <WalletImage theme={theme} wallet={wallet} size={80} />
+        <WalletImage theme={theme} wallet={wallet} size={80} client={client} />
         <Spacer size="lg" />
         <View
           style={[

package/src/react/native/ui/icons/svgs.ts

@@ -71,6 +71,26 @@ export const TELEGRAM_ICON = `<svg width={width} height={height} viewBox="0 0 10
     </g>
 </svg>`;
 
+export const TWITCH_ICON = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 2400 2800" style="enable-background:new 0 0 2400 2800;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#9146FF;}
+</style>
+<title>Asset 2</title>
+<g>
+	<polygon class="st0" points="2200,1300 1800,1700 1400,1700 1050,2050 1050,1700 600,1700 600,200 2200,200 	"/>
+	<g>
+		<g id="Layer_1-2">
+			<path class="st1" d="M500,0L0,500v1800h600v500l500-500h400l900-900V0H500z M2200,1300l-400,400h-400l-350,350v-350H600V200h1600
+				V1300z"/>
+			<rect x="1700" y="550" class="st1" width="200" height="600"/>
+			<rect x="1150" y="550" class="st1" width="200" height="600"/>
+		</g>
+	</g>
+</g>
+</svg>`;
+
 export const EMAIL_ICON = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M13.3335 2.6665H2.66683C1.93045 2.6665 1.3335 3.26346 1.3335 3.99984V11.9998C1.3335 12.7362 1.93045 13.3332 2.66683 13.3332H13.3335C14.0699 13.3332 14.6668 12.7362 14.6668 11.9998V3.99984C14.6668 3.26346 14.0699 2.6665 13.3335 2.6665Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M14.6668 4.6665L8.68683 8.4665C8.48101 8.59545 8.24304 8.66384 8.00016 8.66384C7.75728 8.66384 7.51931 8.59545 7.3135 8.4665L1.3335 4.6665" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>

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

@@ -1,6 +1,7 @@
 import { Suspense, useRef, useState } from "react";
 import { defineChain } from "../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
+import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wallet.js";
 import { linkProfile } from "../../../../wallets/in-app/web/lib/auth/index.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { EcosystemWalletId } from "../../../../wallets/wallet-types.js";
@@ -43,6 +44,12 @@ export function WalletAuth(props: {
   );
   const [error, setError] = useState<string | undefined>();
   const [showAll, setShowAll] = useState<boolean>(false);
+  const ecosystem = isEcosystemWallet(wallet)
+    ? {
+        id: wallet.id,
+        partnerId: wallet.getConfig()?.partnerId,
+      }
+    : undefined;
 
   const back = () => {
     setStatus("selecting");
@@ -59,6 +66,7 @@ export function WalletAuth(props: {
         strategy: "wallet",
         wallet: walletToLink,
         chain: wallet.getChain() || defineChain(1),
+        ecosystem,
       }).catch((e) => {
         setError(e.message);
         throw e;

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

@@ -114,6 +114,7 @@ export const ConnectWalletSocialOptions = (
     coinbase: "Coinbase",
     farcaster: "Farcaster",
     telegram: "Telegram",
+    twitch: "Twitch",
   };
 
   const { data: ecosystemAuthOptions, isLoading } = useQuery({
@@ -262,6 +263,7 @@ export const ConnectWalletSocialOptions = (
         closeOpenedWindow: (openedWindow: Window) => {
           openedWindow.close();
         },
+        ecosystem: ecosystemInfo,
       };
 
       const connectPromise = (() => {