thirdweb 5.64.0 → 5.64.2

package/src/extensions/prebuilts/deploy-vote.ts

@@ -136,6 +136,27 @@ async function getInitializeTransaction(options: {
     external_link,
     social_urls,
   } = params;
+
+  // Validate initialVoteQuorumFraction
+  const _num = Number(minVoteQuorumRequiredPercent);
+  if (Number.isNaN(_num)) {
+    throw new Error(
+      `${minVoteQuorumRequiredPercent} is not a valid minVoteQuorumRequiredPercent`,
+    );
+  }
+  if (_num < 0 || _num > 100) {
+    throw new Error("minVoteQuorumRequiredPercent must be >= 0 and <= 100");
+  }
+
+  // Make sure if user is passing a float, it should only have 2 digit after the decimal point
+  if (!Number.isInteger(_num)) {
+    throw new Error(
+      `${_num} is an invalid value. Only integer-like values accepted`,
+    );
+  }
+
+  const initialVoteQuorumFraction = BigInt(_num);
+
   const tokenErc20Contract = getContract({
     address: tokenAddress,
     client,
@@ -177,26 +198,6 @@ async function getInitializeTransaction(options: {
     })) ||
     "";
 
-  // Validate initialVoteQuorumFraction
-  const _num = Number(minVoteQuorumRequiredPercent);
-  if (Number.isNaN(_num)) {
-    throw new Error(
-      `${minVoteQuorumRequiredPercent} is not a valid minVoteQuorumRequiredPercent`,
-    );
-  }
-  if (_num < 0 || _num > 100) {
-    throw new Error("minVoteQuorumRequiredPercent must be >= 0 and <= 100");
-  }
-
-  // Make sure if user is passing a float, it should only have 2 digit after the decimal point
-  if (!Number.isInteger(_num)) {
-    throw new Error(
-      `${_num} is an invalid value. Only integer-like values accepted`,
-    );
-  }
-
-  const initialVoteQuorumFraction = BigInt(_num);
-
   return initialize({
     contract: implementationContract,
     name,

package/src/extensions/split/split.test.ts

@@ -0,0 +1,76 @@
+import { beforeAll, describe, expect, it } from "vitest";
+import { ANVIL_CHAIN } from "~test/chains.js";
+import { TEST_CLIENT } from "~test/test-clients.js";
+import { TEST_ACCOUNT_D } from "~test/test-wallets.js";
+import { type ThirdwebContract, getContract } from "../../contract/contract.js";
+import { isAddress } from "../../utils/address.js";
+import { deploySplitContract } from "../prebuilts/deploy-split.js";
+import { getAllRecipientsAddresses } from "./read/getAllRecipientsAddresses.js";
+import { getAllRecipientsPercentages } from "./read/getAllRecipientsPercentages.js";
+import { getRecipientSplitPercentage } from "./read/getRecipientSplitPercentage.js";
+
+let contract: ThirdwebContract;
+const chain = ANVIL_CHAIN;
+const client = TEST_CLIENT;
+
+describe.runIf(process.env.TW_SECRET_KEY)("Split contract tests", () => {
+  beforeAll(async () => {
+    const address = await deploySplitContract({
+      account: TEST_ACCOUNT_D,
+      client,
+      chain,
+      params: {
+        name: "split-contract",
+        payees: [
+          "0x12345674b599ce99958242b3D3741e7b01841DF3",
+          "0xA6f11e47dE28B3dB934e945daeb6F538E9019694",
+        ],
+        shares: [
+          5100n, // 51%
+          4900n, // 49%
+        ],
+      },
+    });
+    expect(address).toBeDefined();
+    expect(isAddress(address)).toBe(true);
+    contract = getContract({
+      address,
+      client,
+      chain,
+    });
+  }, 60_000);
+
+  it("should return all recipient addresses", async () => {
+    const result = await getAllRecipientsAddresses({ contract });
+    expect(result).toStrictEqual([
+      "0x12345674b599ce99958242b3D3741e7b01841DF3",
+      "0xA6f11e47dE28B3dB934e945daeb6F538E9019694",
+    ]);
+  });
+
+  it("should return all recipients and their share percentages", async () => {
+    const result = await getAllRecipientsPercentages({ contract });
+    expect(result).toStrictEqual([
+      {
+        address: "0x12345674b599ce99958242b3D3741e7b01841DF3",
+        splitPercentage: 51,
+      },
+      {
+        address: "0xA6f11e47dE28B3dB934e945daeb6F538E9019694",
+        splitPercentage: 49,
+      },
+    ]);
+  });
+
+  it("should return split percentage for individual recipient", async () => {
+    const result = await getRecipientSplitPercentage({
+      contract,
+      recipientAddress: "0x12345674b599ce99958242b3D3741e7b01841DF3",
+    });
+
+    expect(result).toStrictEqual({
+      address: "0x12345674b599ce99958242b3D3741e7b01841DF3",
+      splitPercentage: 51,
+    });
+  });
+});

package/src/extensions/vote/{read/proposalExists.test.ts → vote.test.ts}

@@ -3,22 +3,22 @@ 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 { delegate } from "../../../extensions/erc20/__generated__/IVotes/write/delegate.js";
-import { mintTo } from "../../../extensions/erc20/write/mintTo.js";
-import { deployERC20Contract } from "../../../extensions/prebuilts/deploy-erc20.js";
-import { deployVoteContract } from "../../../extensions/prebuilts/deploy-vote.js";
-import { sendAndConfirmTransaction } from "../../../transaction/actions/send-and-confirm-transaction.js";
-import { propose } from "../__generated__/Vote/write/propose.js";
-import { getAll } from "./getAll.js";
-import { proposalExists } from "./proposalExists.js";
+import { getContract } from "../../contract/contract.js";
+import { sendAndConfirmTransaction } from "../../transaction/actions/send-and-confirm-transaction.js";
+import { delegate } from "../erc20/__generated__/IVotes/write/delegate.js";
+import { mintTo } from "../erc20/write/mintTo.js";
+import { deployERC20Contract } from "../prebuilts/deploy-erc20.js";
+import { deployVoteContract } from "../prebuilts/deploy-vote.js";
+import { propose } from "./__generated__/Vote/write/propose.js";
+import { getAll } from "./read/getAll.js";
+import { proposalExists } from "./read/proposalExists.js";
 
 const account = TEST_ACCOUNT_C;
 const client = TEST_CLIENT;
 const chain = ANVIL_CHAIN;
 
 describe.runIf(process.env.TW_SECRET_KEY)("proposal exists", () => {
-  it("should return false if Vote doesn't have any proposal", async () => {
+  it("`proposalExists` and `propose` should work", async () => {
     const tokenAddress = await deployERC20Contract({
       client: TEST_CLIENT,
       chain: ANVIL_CHAIN,
@@ -42,47 +42,16 @@ describe.runIf(process.env.TW_SECRET_KEY)("proposal exists", () => {
         minVoteQuorumRequiredPercent: 51,
       },
     });
-
-    const contract = getContract({
+    const voteContract = getContract({
       address,
       chain,
       client,
     });
-
-    const result = await proposalExists({ contract, proposalId: 0n });
-    expect(result).toBe(false);
-  });
-
-  it("should return true if Vote has the proposal (id)", async () => {
-    const tokenAddress = await deployERC20Contract({
-      client: TEST_CLIENT,
-      chain: ANVIL_CHAIN,
-      account,
-      type: "TokenERC20",
-      params: {
-        name: "Token",
-        contractURI: TEST_CONTRACT_URI,
-      },
-    });
-    const address = await deployVoteContract({
-      account,
-      client: TEST_CLIENT,
-      chain: ANVIL_CHAIN,
-      params: {
-        name: "",
-        contractURI: TEST_CONTRACT_URI,
-        tokenAddress: tokenAddress,
-        initialProposalThreshold: "0.5",
-        initialVotingPeriod: 10,
-        minVoteQuorumRequiredPercent: 51,
-      },
-    });
-
-    const contract = getContract({
-      address,
-      chain,
-      client,
+    const result = await proposalExists({
+      contract: voteContract,
+      proposalId: 0n,
     });
+    expect(result).toBe(false);
 
     const tokenContract = getContract({
       address: tokenAddress,
@@ -105,19 +74,19 @@ describe.runIf(process.env.TW_SECRET_KEY)("proposal exists", () => {
 
     // step 3: create a proposal
     const transaction = propose({
-      contract,
+      contract: voteContract,
       description: "first proposal",
-      targets: [contract.address],
+      targets: [voteContract.address],
       values: [0n],
       calldatas: ["0x"],
     });
     await sendAndConfirmTransaction({ transaction, account });
-    const allProposals = await getAll({ contract });
+    const allProposals = await getAll({ contract: voteContract });
     expect(allProposals.length).toBe(1);
-    const result = await proposalExists({
-      contract,
+    const exists = await proposalExists({
+      contract: voteContract,
       proposalId: allProposals[0]?.proposalId || -1n,
     });
-    expect(result).toBe(true);
+    expect(exists).toBe(true);
   });
 });

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

@@ -23,9 +23,9 @@ const githubIconUri =
   "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTA2IiBoZWlnaHQ9IjEwNiIgdmlld0JveD0iMCAwIDEwNiAxMDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjUzIiBjeT0iNTMiIHI9IjUzIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTUyLjg1NCA0QzI1LjgzOSA0IDQgMjYgNCA1My4yMTdDNCA3NC45NzMgMTcuOTkzIDkzLjM4OSAzNy40MDUgOTkuOTA3QzM5LjgzMiAxMDAuMzk3IDQwLjcyMSA5OC44NDggNDAuNzIxIDk3LjU0NUM0MC43MjEgOTYuNDA0IDQwLjY0MSA5Mi40OTMgNDAuNjQxIDg4LjQxOEMyNy4wNTEgOTEuMzUyIDI0LjIyMSA4Mi41NTEgMjQuMjIxIDgyLjU1MUMyMi4wMzcgNzYuODQ3IDE4LjgwMSA3NS4zODEgMTguODAxIDc1LjM4MUMxNC4zNTMgNzIuMzY2IDE5LjEyNSA3Mi4zNjYgMTkuMTI1IDcyLjM2NkMyNC4wNTkgNzIuNjkyIDI2LjY0OCA3Ny40MTggMjYuNjQ4IDc3LjQxOEMzMS4wMTUgODQuOTE0IDM4LjA1MiA4Mi43OTYgNDAuODgzIDgxLjQ5MkM0MS4yODcgNzguMzE0IDQyLjU4MiA3Ni4xMTQgNDMuOTU3IDc0Ljg5MkMzMy4xMTggNzMuNzUxIDIxLjcxNCA2OS41MTQgMjEuNzE0IDUwLjYwOUMyMS43MTQgNDUuMjMxIDIzLjY1NCA0MC44MzEgMjYuNzI4IDM3LjQwOUMyNi4yNDMgMzYuMTg3IDI0LjU0NCAzMS4xMzQgMjcuMjE0IDI0LjM3MUMyNy4yMTQgMjQuMzcxIDMxLjMzOSAyMy4wNjcgNDAuNjQgMjkuNDIzQzQ0LjYyMjEgMjguMzQ1NyA0OC43Mjg4IDI3Ljc5NzYgNTIuODU0IDI3Ljc5M0M1Ni45NzkgMjcuNzkzIDYxLjE4NCAyOC4zNjQgNjUuMDY3IDI5LjQyM0M3NC4zNjkgMjMuMDY3IDc4LjQ5NCAyNC4zNzEgNzguNDk0IDI0LjM3MUM4MS4xNjQgMzEuMTM0IDc5LjQ2NCAzNi4xODcgNzguOTc5IDM3LjQwOUM4Mi4xMzQgNDAuODMxIDgzLjk5NCA0NS4yMzEgODMuOTk0IDUwLjYwOUM4My45OTQgNjkuNTE0IDcyLjU5IDczLjY2OSA2MS42NyA3NC44OTJDNjMuNDUgNzYuNDQgNjQuOTg2IDc5LjM3MyA2NC45ODYgODQuMDE4QzY0Ljk4NiA5MC42MTggNjQuOTA2IDk1LjkxNSA2NC45MDYgOTcuNTQ0QzY0LjkwNiA5OC44NDggNjUuNzk2IDEwMC4zOTcgNjguMjIyIDk5LjkwOEM4Ny42MzQgOTMuMzg4IDEwMS42MjcgNzQuOTczIDEwMS42MjcgNTMuMjE3QzEwMS43MDcgMjYgNzkuNzg4IDQgNTIuODU0IDRaIiBmaWxsPSIjMjQyOTJGIi8+Cjwvc3ZnPgo=";
 const xIcon =
   "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjMyMCIgdmlld0JveD0iMCAwIDMyMCAzMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIzMjAiIGhlaWdodD0iMzIwIiByeD0iMjQiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0xNzcuMzE1IDE0NS4zMzVMMjQ1LjA2OCA2N0gyMjkuMDEzTDE3MC4xODIgMTM1LjAxN0wxMjMuMTk1IDY3SDY5TDE0MC4wNTUgMTY5Ljg1NEw2OSAyNTJIODUuMDU2M0wxNDcuMTgzIDE4MC4xNzJMMTk2LjgwNSAyNTJIMjUxTDE3Ny4zMTEgMTQ1LjMzNUgxNzcuMzE1Wk0xNTUuMzIzIDE3MC43NkwxNDguMTI0IDE2MC41MThMOTAuODQxNyA3OS4wMjJIMTE1LjUwM0wxNjEuNzMxIDE0NC43OTJMMTY4LjkzIDE1NS4wMzRMMjI5LjAyIDI0MC41MjVIMjA0LjM1OUwxNTUuMzIzIDE3MC43NjRWMTcwLjc2WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==";
-export const emailIcon =
+const emailIcon =
   "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjMzMzUgMi42NjY1SDIuNjY2ODNDMS45MzA0NSAyLjY2NjUgMS4zMzM1IDMuMjYzNDYgMS4zMzM1IDMuOTk5ODRWMTEuOTk5OEMxLjMzMzUgMTIuNzM2MiAxLjkzMDQ1IDEzLjMzMzIgMi42NjY4MyAxMy4zMzMySDEzLjMzMzVDMTQuMDY5OSAxMy4zMzMyIDE0LjY2NjggMTIuNzM2MiAxNC42NjY4IDExLjk5OThWMy45OTk4NEMxNC42NjY4IDMuMjYzNDYgMTQuMDY5OSAyLjY2NjUgMTMuMzMzNSAyLjY2NjVaIiBzdHJva2U9IiMzMzg1RkYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTQuNjY2OCA0LjY2NjVMOC42ODY4MyA4LjQ2NjVDOC40ODEwMSA4LjU5NTQ1IDguMjQzMDQgOC42NjM4NCA4LjAwMDE2IDguNjYzODRDNy43NTcyOCA4LjY2Mzg0IDcuNTE5MzEgOC41OTU0NSA3LjMxMzUgOC40NjY1TDEuMzMzNSA0LjY2NjUiIHN0cm9rZT0iIzMzODVGRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=";
-export const phoneIcon =
+const phoneIcon =
   "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzU2MzlfNjMyKSI+CjxwYXRoIGQ9Ik0xNC42NjY5IDExLjI4MDJWMTMuMjgwMkMxNC42Njc3IDEzLjQ2NTkgMTQuNjI5NyAxMy42NDk3IDE0LjU1NTMgMTMuODE5OEMxNC40ODA5IDEzLjk4OTkgMTQuMzcxOCAxNC4xNDI2IDE0LjIzNSAxNC4yNjgxQzE0LjA5ODIgMTQuMzkzNyAxMy45MzY3IDE0LjQ4OTIgMTMuNzYwOCAxNC41NDg3QzEzLjU4NDkgMTQuNjA4MiAxMy4zOTg1IDE0LjYzMDMgMTMuMjEzNiAxNC42MTM2QzExLjE2MjIgMTQuMzkwNyA5LjE5MTYxIDEzLjY4OTcgNy40NjAyOCAxMi41NjY5QzUuODQ5NSAxMS41NDMzIDQuNDgzODQgMTAuMTc3NyAzLjQ2MDI4IDguNTY2ODlDMi4zMzM2IDYuODI3NyAxLjYzMjQ0IDQuODQ3NTYgMS40MTM2MSAyLjc4Njg5QzEuMzk2OTUgMi42MDI1NCAxLjQxODg2IDIuNDE2NzMgMS40Nzc5NSAyLjI0MTMxQzEuNTM3MDMgMi4wNjU4OSAxLjYzMTk5IDEuOTA0NjkgMS43NTY3OSAxLjc2Nzk3QzEuODgxNTkgMS42MzEyNiAyLjAzMzQ4IDEuNTIyMDMgMi4yMDI4MSAxLjQ0NzI0QzIuMzcyMTMgMS4zNzI0NSAyLjU1NTE3IDEuMzMzNzQgMi43NDAyOCAxLjMzMzU2SDQuNzQwMjhDNS4wNjM4MiAxLjMzMDM4IDUuMzc3NDggMS40NDQ5NSA1LjYyMjc5IDEuNjU1OTJDNS44NjgxIDEuODY2ODkgNi4wMjgzMyAyLjE1OTg2IDYuMDczNjEgMi40ODAyM0M2LjE1ODAzIDMuMTIwMjcgNi4zMTQ1OCAzLjc0ODcxIDYuNTQwMjggNC4zNTM1NkM2LjYyOTk4IDQuNTkyMTggNi42NDkzOSA0Ljg1MTUgNi41OTYyMiA1LjEwMDgxQzYuNTQzMDUgNS4zNTAxMiA2LjQxOTUyIDUuNTc4OTcgNi4yNDAyOCA1Ljc2MDIzTDUuMzkzNjEgNi42MDY4OUM2LjM0MjY1IDguMjc1OTIgNy43MjQ1OCA5LjY1Nzg2IDkuMzkzNjEgMTAuNjA2OUwxMC4yNDAzIDkuNzYwMjNDMTAuNDIxNSA5LjU4MDk5IDEwLjY1MDQgOS40NTc0NiAxMC44OTk3IDkuNDA0MjlDMTEuMTQ5IDkuMzUxMTIgMTEuNDA4MyA5LjM3MDUzIDExLjY0NjkgOS40NjAyM0MxMi4yNTE4IDkuNjg1OTMgMTIuODgwMiA5Ljg0MjQ4IDEzLjUyMDMgOS45MjY4OUMxMy44NDQxIDkuOTcyNTggMTQuMTM5OSAxMC4xMzU3IDE0LjM1MTMgMTAuMzg1MkMxNC41NjI3IDEwLjYzNDggMTQuNjc1MSAxMC45NTMzIDE0LjY2NjkgMTEuMjgwMloiIHN0cm9rZT0iIzMzODVGRiIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF81NjM5XzYzMiI+CjxyZWN0IHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K";
 export const genericTokenIcon =
   "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzQwNDhfNDIzMSkiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNTg0IDQuODU1NjZDNy43MTA2OSA0Ljc4MjUyIDcuODU0MzkgNC43NDQwMiA4LjAwMDY3IDQuNzQ0MDJDOC4xNDY5NSA0Ljc0NDAyIDguMjkwNjUgNC43ODI1MiA4LjQxNzM0IDQuODU1NjZMMTAuNTE1MyA2LjA2NjY2QzEwLjY0MiA2LjEzOTggMTAuNzQ3MiA2LjI0NSAxMC44MjA0IDYuMzcxNjhDMTAuODkzNSA2LjQ5ODM1IDEwLjkzMiA2LjY0MjA1IDEwLjkzMiA2Ljc4ODMzVjkuMjExQzEwLjkzMiA5LjM1NzI3IDEwLjg5MzUgOS41MDA5NyAxMC44MjA0IDkuNjI3NjVDMTAuNzQ3MiA5Ljc1NDMzIDEwLjY0MiA5Ljg1OTUzIDEwLjUxNTMgOS45MzI2Nkw4LjQxNzM0IDExLjE0NEM4LjI5MDY1IDExLjIxNzEgOC4xNDY5NSAxMS4yNTU2IDguMDAwNjcgMTEuMjU1NkM3Ljg1NDM5IDExLjI1NTYgNy43MTA2OSAxMS4yMTcxIDcuNTg0IDExLjE0NEw1LjQ4NiA5LjkzMjY2QzUuMzU5MzIgOS44NTk1MyA1LjI1NDEzIDkuNzU0MzMgNS4xODA5OSA5LjYyNzY1QzUuMTA3ODUgOS41MDA5NyA1LjA2OTM0IDkuMzU3MjcgNS4wNjkzNCA5LjIxMVY2Ljc4ODY2QzUuMDY5MjggNi42NDIzMyA1LjEwNzc2IDYuNDk4NTYgNS4xODA5IDYuMzcxODJDNS4yNTQwNSA2LjI0NTA4IDUuMzU5MjcgNi4xMzk4MyA1LjQ4NiA2LjA2NjY2TDcuNTg0IDQuODU1NjZaTTguMDg0IDUuNDMzQzguMDU4NjcgNS40MTgzNyA4LjAyOTkzIDUuNDEwNjcgOC4wMDA2NyA1LjQxMDY3QzcuOTcxNDEgNS40MTA2NyA3Ljk0MjY3IDUuNDE4MzcgNy45MTczNCA1LjQzM0w1LjgxOTM0IDYuNjQ0MzNDNS43OTQgNi42NTg5NiA1Ljc3Mjk2IDYuNjggNS43NTgzMyA2LjcwNTMzQzUuNzQzNyA2LjczMDY3IDUuNzM2IDYuNzU5NDEgNS43MzYgNi43ODg2NlY5LjIxMTMzQzUuNzM2IDkuMjQwNTkgNS43NDM3IDkuMjY5MzMgNS43NTgzMyA5LjI5NDY2QzUuNzcyOTYgOS4zMiA1Ljc5NCA5LjM0MTA0IDUuODE5MzQgOS4zNTU2Nkw3LjkxNzM0IDEwLjU2NjdDNy45NDI2NyAxMC41ODEzIDcuOTcxNDEgMTAuNTg5IDguMDAwNjcgMTAuNTg5QzguMDI5OTMgMTAuNTg5IDguMDU4NjcgMTAuNTgxMyA4LjA4NCAxMC41NjY3TDEwLjE4MiA5LjM1NTMzQzEwLjIwNzMgOS4zNDA3IDEwLjIyODQgOS4zMTk2NiAxMC4yNDMgOS4yOTQzM0MxMC4yNTc2IDkuMjY4OTkgMTAuMjY1MyA5LjI0MDI1IDEwLjI2NTMgOS4yMTFWNi43ODg2NkMxMC4yNjUzIDYuNzU5NDEgMTAuMjU3NiA2LjczMDY3IDEwLjI0MyA2LjcwNTMzQzEwLjIyODQgNi42OCAxMC4yMDczIDYuNjU4OTYgMTAuMTgyIDYuNjQ0MzNMOC4wODQgNS40MzNaIiBmaWxsPSIjNUM1QzVDIi8+CjwvZz4KPGNpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjcuNjkyMzEiIHN0cm9rZT0iIzVDNUM1QyIgc3Ryb2tlLXdpZHRoPSIwLjYxNTM4NSIvPgo8Y2lyY2xlIGN4PSI3Ljk5OTU1IiBjeT0iOC4wMDAwNCIgcj0iNS44NDYxNSIgc3Ryb2tlPSIjNUM1QzVDIiBzdHJva2Utd2lkdGg9IjAuNjE1Mzg1Ii8+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzQwNDhfNDIzMSI+CjxyZWN0IHdpZHRoPSI4IiBoZWlnaHQ9IjgiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDQpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==";
@@ -33,7 +33,7 @@ const guestIcon =
   "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5IDIxVjE5QzE5IDE3LjkzOTEgMTguNTc4NiAxNi45MjE3IDE3LjgyODQgMTYuMTcxNkMxNy4wNzgzIDE1LjQyMTQgMTYuMDYwOSAxNSAxNSAxNUg5QzcuOTM5MTMgMTUgNi45MjE3MiAxNS40MjE0IDYuMTcxNTcgMTYuMTcxNkM1LjQyMTQzIDE2LjkyMTcgNSAxNy45MzkxIDUgMTlWMjEiIHN0cm9rZT0iIzMzODVGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTEyIDExQzE0LjIwOTEgMTEgMTYgOS4yMDkxNCAxNiA3QzE2IDQuNzkwODYgMTQuMjA5MSAzIDEyIDNDOS43OTA4NiAzIDggNC43OTA4NiA4IDdDOCA5LjIwOTE0IDkuNzkwODYgMTEgMTIgMTFaIiBzdHJva2U9IiMzMzg1RkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=";
 export const genericWalletIcon =
   "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjY2NjcgNC42NjY2N1YyLjY2NjY3QzEyLjY2NjcgMi40ODk4NiAxMi41OTY0IDIuMzIwMjkgMTIuNDcxNCAyLjE5NTI2QzEyLjM0NjQgMi4wNzAyNCAxMi4xNzY4IDIgMTIgMkgzLjMzMzMzQzIuOTc5NzEgMiAyLjY0MDU3IDIuMTQwNDggMi4zOTA1MiAyLjM5MDUyQzIuMTQwNDggMi42NDA1NyAyIDIuOTc5NzEgMiAzLjMzMzMzQzIgMy42ODY5NiAyLjE0MDQ4IDQuMDI2MDkgMi4zOTA1MiA0LjI3NjE0QzIuNjQwNTcgNC41MjYxOSAyLjk3OTcxIDQuNjY2NjcgMy4zMzMzMyA0LjY2NjY3SDEzLjMzMzNDMTMuNTEwMSA0LjY2NjY3IDEzLjY3OTcgNC43MzY5IDEzLjgwNDcgNC44NjE5M0MxMy45Mjk4IDQuOTg2OTUgMTQgNS4xNTY1MiAxNCA1LjMzMzMzVjhNMTQgOEgxMkMxMS42NDY0IDggMTEuMzA3MiA4LjE0MDQ4IDExLjA1NzIgOC4zOTA1MkMxMC44MDcxIDguNjQwNTcgMTAuNjY2NyA4Ljk3OTcxIDEwLjY2NjcgOS4zMzMzM0MxMC42NjY3IDkuNjg2OTYgMTAuODA3MSAxMC4wMjYxIDExLjA1NzIgMTAuMjc2MUMxMS4zMDcyIDEwLjUyNjIgMTEuNjQ2NCAxMC42NjY3IDEyIDEwLjY2NjdIMTRDMTQuMTc2OCAxMC42NjY3IDE0LjM0NjQgMTAuNTk2NCAxNC40NzE0IDEwLjQ3MTRDMTQuNTk2NCAxMC4zNDY0IDE0LjY2NjcgMTAuMTc2OCAxNC42NjY3IDEwVjguNjY2NjdDMTQuNjY2NyA4LjQ4OTg2IDE0LjU5NjQgOC4zMjAyOSAxNC40NzE0IDguMTk1MjZDMTQuMzQ2NCA4LjA3MDI0IDE0LjE3NjggOCAxNCA4WiIgc3Ryb2tlPSIjMzM4NUZGIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTIgMy4zMzM1VjEyLjY2NjhDMiAxMy4wMjA1IDIuMTQwNDggMTMuMzU5NiAyLjM5MDUyIDEzLjYwOTZDMi42NDA1NyAxMy44NTk3IDIuOTc5NzEgMTQuMDAwMiAzLjMzMzMzIDE0LjAwMDJIMTMuMzMzM0MxMy41MTAxIDE0LjAwMDIgMTMuNjc5NyAxMy45Mjk5IDEzLjgwNDcgMTMuODA0OUMxMy45Mjk4IDEzLjY3OTkgMTQgMTMuNTEwMyAxNCAxMy4zMzM1VjEwLjY2NjgiIHN0cm9rZT0iIzMzODVGRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=";
-export const passkeyIcon =
+const passkeyIcon =
   "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzU2MzlfMzIpIj4KPHBhdGggZD0iTTcuOTk5NTkgNi42NjY1QzcuNjQ1OTYgNi42NjY1IDcuMzA2ODMgNi44MDY5OCA3LjA1Njc4IDcuMDU3MDNDNi44MDY3MyA3LjMwNzA4IDYuNjY2MjUgNy42NDYyMiA2LjY2NjI1IDcuOTk5ODRDNi42NjYyNSA4LjY3OTg0IDYuNTk5NTkgOS42NzMxNyA2LjQ5MjkyIDEwLjY2NjUiIHN0cm9rZT0iIzMzODVGRiIgc3Ryb2tlLXdpZHRoPSIxLjI1NDkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNOS4zMzI5MyA4Ljc0NjU4QzkuMzMyOTMgMTAuMzMzMiA5LjMzMjkzIDEyLjk5OTkgOC42NjYyNiAxNC42NjY2IiBzdHJva2U9IiMzMzg1RkYiIHN0cm9rZS13aWR0aD0iMS4yNTQ5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTExLjUyNzMgMTQuMDEzM0MxMS42MDczIDEzLjYxMzMgMTEuODE0IDEyLjQ4IDExLjg2MDcgMTIiIHN0cm9rZT0iIzMzODVGRiIgc3Ryb2tlLXdpZHRoPSIxLjI1NDkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMS4zMzM5OCA4LjAwMDE2QzEuMzMzOTggNi42MDA5NSAxLjc3NDIzIDUuMjM3MiAyLjU5MjM3IDQuMTAyMDlDMy40MTA1MSAyLjk2Njk5IDQuNTY1MDUgMi4xMTgwOCA1Ljg5MjQ3IDEuNjc1NjFDNy4yMTk4OCAxLjIzMzE0IDguNjUyODYgMS4yMTk1NCA5Ljk4ODQ0IDEuNjM2NzRDMTEuMzI0IDIuMDUzOTQgMTIuNDk0NSAyLjg4MDc5IDEzLjMzNCA0LjAwMDE2IiBzdHJva2U9IiMzMzg1RkYiIHN0cm9rZS13aWR0aD0iMS4yNTQ5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTEuMzMzOTggMTAuNjY2NUgxLjMzOTE0IiBzdHJva2U9IiMzMzg1RkYiIHN0cm9rZS13aWR0aD0iMS4yNTQ5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTE0LjUzMjcgMTAuNjY2NUMxNC42NjYgOS4zMzMxNyAxNC42MiA3LjA5NzE3IDE0LjUzMjcgNi42NjY1IiBzdHJva2U9IiMzMzg1RkYiIHN0cm9rZS13aWR0aD0iMS4yNTQ5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTMuMzMzOTggMTIuOTk5OEMzLjY2NzMyIDExLjk5OTggNC4wMDA2NSA5Ljk5OTg0IDQuMDAwNjUgNy45OTk4NEMzLjk5OTk4IDcuNTQ1NzUgNC4wNzY2MyA3LjA5NDg2IDQuMjI3MzIgNi42NjY1IiBzdHJva2U9IiMzMzg1RkYiIHN0cm9rZS13aWR0aD0iMS4yNTQ5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTUuNzY3MDkgMTQuNjY2OEM1LjkwNzA5IDE0LjIyNjggNi4wNjcwOSAxMy43ODY4IDYuMTQ3MDkgMTMuMzMzNSIgc3Ryb2tlPSIjMzM4NUZGIiBzdHJva2Utd2lkdGg9IjEuMjU0OSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik02IDQuNTMzNDZDNi42MDgyNyA0LjE4MjI4IDcuMjk4MjggMy45OTc0NSA4LjAwMDY0IDMuOTk3NTZDOC43MDMwMSAzLjk5NzY3IDkuMzkyOTYgNC4xODI3MiAxMC4wMDExIDQuNTM0MUMxMC42MDkzIDQuODg1NDggMTEuMTE0MiA1LjM5MDc5IDExLjQ2NTEgNS45OTkyM0MxMS44MTYgNi42MDc2NiAxMi4wMDA1IDcuMjk3NzYgMTIgOC4wMDAxMlY5LjMzMzQ2IiBzdHJva2U9IiMzMzg1RkYiIHN0cm9rZS13aWR0aD0iMS4yNTQ5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF81NjM5XzMyIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=";
 
 export const socialIcons = {

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

@@ -34,9 +34,6 @@ export const MenuButton = /* @__PURE__ */ StyledButton((_) => {
     },
     "&[disabled]": {
       cursor: "not-allowed",
-      svg: {
-        display: "none",
-      },
     },
     svg: {
       color: theme.colors.secondaryText,

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

@@ -16,7 +16,6 @@ import {
   radius,
   spacing,
 } from "../../../core/design-system/index.js";
-import { genericWalletIcon } from "../../../core/utils/walletIcon.js";
 import { useSetSelectionData } from "../../providers/wallet-ui-states-provider.js";
 import { sortWallets } from "../../utils/sortWallets.js";
 import { LoadingScreen } from "../../wallets/shared/LoadingScreen.js";
@@ -42,6 +41,7 @@ import { PoweredByThirdweb } from "./PoweredByTW.js";
 import { WalletButtonEl, WalletEntryButton } from "./WalletEntryButton.js";
 import { WalletTypeRowButton } from "./WalletTypeRowButton.js";
 import { compactModalMaxHeight } from "./constants.js";
+import { OutlineWalletIcon } from "./icons/OutlineWalletIcon.js";
 import type { ConnectLocale } from "./locale/types.js";
 
 const InAppWalletSelectionUI = /* @__PURE__ */ lazy(
@@ -226,7 +226,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
   const connectAWallet = (
     <WalletTypeRowButton
       client={props.client}
-      icon={genericWalletIcon}
+      icon={OutlineWalletIcon}
       onClick={() => {
         setIsWalletGroupExpanded(true);
       }}

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

@@ -1,19 +1,15 @@
 import type { ThirdwebClient } from "../../../../client/client.js";
-import {
-  iconSize,
-  radius,
-  spacing,
-} from "../../../core/design-system/index.js";
+import { iconSize, spacing } from "../../../core/design-system/index.js";
 import { Text } from "../../ui/components/text.js";
-import { Img } from "../components/Img.js";
 import { Container } from "../components/basic.js";
 import { Button } from "../components/buttons.js";
+import type { IconFC } from "./icons/types.js";
 
 type WalletTypeRowProps = {
   client: ThirdwebClient;
   onClick: () => void;
   title: string;
-  icon: string;
+  icon: IconFC;
   disabled?: boolean;
 };
 
@@ -33,16 +29,7 @@ export function WalletTypeRowButton(props: WalletTypeRowProps) {
       disabled={props.disabled}
     >
       <Container flex="row" gap="sm" center="y" color="accentText">
-        <Img
-          client={props.client}
-          src={props.icon}
-          width={iconSize.md}
-          height={iconSize.md}
-          loading="eager"
-          style={{
-            borderRadius: radius.md,
-          }}
-        />
+        <props.icon size={iconSize.md} />
         <Text color="primaryText">{props.title}</Text>
       </Container>
     </Button>

package/src/react/web/ui/ConnectWallet/icons/EmailIcon.tsx

@@ -0,0 +1,30 @@
+import type { IconFC } from "./types.js";
+
+/**
+ * @internal
+ */
+export const EmailIcon: IconFC = (props) => {
+  return (
+    <svg
+      width={props.size}
+      height={props.size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="presentation"
+    >
+      <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={props.color ?? "currentColor"}
+        strokeLinecap="round"
+        strokeLinejoin="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={props.color ?? "currentColor"}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

package/src/react/web/ui/ConnectWallet/icons/FingerPrintIcon.tsx

@@ -11,63 +11,63 @@ export const FingerPrintIcon: IconFC = (props) => {
     >
       <path
         d="M18.0001 15C17.2045 15 16.4414 15.3161 15.8788 15.8787C15.3162 16.4413 15.0001 17.2044 15.0001 18C15.0001 19.53 14.8501 21.765 14.6101 24"
-        stroke="currentColor"
+        stroke={props.color ?? "currentColor"}
         strokeWidth="3"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M21.0002 19.6801C21.0002 23.2501 21.0002 29.2501 19.5002 33.0001"
-        stroke="currentColor"
+        stroke={props.color ?? "currentColor"}
         strokeWidth="3"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M25.9348 31.53C26.1148 30.63 26.5798 28.08 26.6848 27"
-        stroke="currentColor"
+        stroke={props.color ?? "currentColor"}
         strokeWidth="3"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M2.99976 18C2.99976 14.8518 3.99032 11.7833 5.83112 9.22935C7.67193 6.67536 10.2697 4.76531 13.2563 3.76975C16.243 2.77419 19.4672 2.74359 22.4723 3.6823C25.4773 4.621 28.1108 6.48141 29.9998 9"
-        stroke="currentColor"
+        stroke={props.color ?? "currentColor"}
         strokeWidth="3"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M2.99976 24H3.01628"
-        stroke="currentColor"
+        stroke={props.color ?? "currentColor"}
         strokeWidth="3"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M32.7 24C33 21 32.8965 15.969 32.7 15"
-        stroke="currentColor"
+        stroke={props.color ?? "currentColor"}
         strokeWidth="3"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M7.49976 29.25C8.24976 27 8.99976 22.5 8.99976 18C8.99824 16.9783 9.17071 15.9638 9.50976 15"
-        stroke="currentColor"
+        stroke={props.color ?? "currentColor"}
         strokeWidth="3"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M12.9751 33C13.2901 32.01 13.6501 31.02 13.8301 30"
-        stroke="currentColor"
+        stroke={props.color ?? "currentColor"}
         strokeWidth="3"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M13.5 10.2C14.8686 9.40988 16.4211 8.99401 18.0014 8.99426C19.5818 8.99452 21.1342 9.41088 22.5025 10.2015C23.8708 10.9921 25.0069 12.129 25.7964 13.498C26.5859 14.867 27.001 16.4197 27 18V21"
-        stroke="currentColor"
+        stroke={props.color ?? "currentColor"}
         strokeWidth="3"
         strokeLinecap="round"
         strokeLinejoin="round"

package/src/react/web/ui/ConnectWallet/icons/GuestIcon.tsx

@@ -0,0 +1,24 @@
+import type { IconFC } from "./types.js";
+
+/**
+ * @internal
+ */
+export const GuestIcon: IconFC = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size}
+      height={props.size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={props.color ?? "currentColor"}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      role="presentation"
+    >
+      <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+      <circle cx="12" cy="7" r="4" />
+    </svg>
+  );
+};

package/src/react/web/ui/ConnectWallet/icons/OutlineWalletIcon.tsx

@@ -15,14 +15,14 @@ export const OutlineWalletIcon: IconFC = (props) => {
     >
       <path
         d="M19 7V4C19 3.73478 18.8946 3.48043 18.7071 3.29289C18.5196 3.10536 18.2652 3 18 3H5C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5C3 5.53043 3.21071 6.03914 3.58579 6.41421C3.96086 6.78929 4.46957 7 5 7H20C20.2652 7 20.5196 7.10536 20.7071 7.29289C20.8946 7.48043 21 7.73478 21 8V12M21 12H18C17.4696 12 16.9609 12.2107 16.5858 12.5858C16.2107 12.9609 16 13.4696 16 14C16 14.5304 16.2107 15.0391 16.5858 15.4142C16.9609 15.7893 17.4696 16 18 16H21C21.2652 16 21.5196 15.8946 21.7071 15.7071C21.8946 15.5196 22 15.2652 22 15V13C22 12.7348 21.8946 12.4804 21.7071 12.2929C21.5196 12.1054 21.2652 12 21 12Z"
-        stroke="currentColor"
+        stroke={props.color ?? "currentColor"}
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H20C20.2652 21 20.5196 20.8946 20.7071 20.7071C20.8946 20.5196 21 20.2652 21 20V16"
-        stroke="currentColor"
+        stroke={props.color ?? "currentColor"}
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"

package/src/react/web/ui/ConnectWallet/icons/PhoneIcon.tsx

@@ -0,0 +1,32 @@
+import type { IconFC } from "./types.js";
+
+/**
+ * @internal
+ */
+export const PhoneIcon: IconFC = (props) => {
+  return (
+    <svg
+      width={props.size}
+      height={props.size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="presentation"
+    >
+      <g clipPath="url(#clip0_5639_632)">
+        <path
+          d="M14.6669 11.2802V13.2802C14.6677 13.4659 14.6297 13.6497 14.5553 13.8198C14.4809 13.9899 14.3718 14.1426 14.235 14.2681C14.0982 14.3937 13.9367 14.4892 13.7608 14.5487C13.5849 14.6082 13.3985 14.6303 13.2136 14.6136C11.1622 14.3907 9.19161 13.6897 7.46028 12.5669C5.8495 11.5433 4.48384 10.1777 3.46028 8.56689C2.3336 6.8277 1.63244 4.84756 1.41361 2.78689C1.39695 2.60254 1.41886 2.41673 1.47795 2.24131C1.53703 2.06589 1.63199 1.90469 1.75679 1.76797C1.88159 1.63126 2.03348 1.52203 2.20281 1.44724C2.37213 1.37245 2.55517 1.33374 2.74028 1.33356H4.74028C5.06382 1.33038 5.37748 1.44495 5.62279 1.65592C5.8681 1.86689 6.02833 2.15986 6.07361 2.48023C6.15803 3.12027 6.31458 3.74871 6.54028 4.35356C6.62998 4.59218 6.64939 4.8515 6.59622 5.10081C6.54305 5.35012 6.41952 5.57897 6.24028 5.76023L5.39361 6.60689C6.34265 8.27592 7.72458 9.65786 9.39361 10.6069L10.2403 9.76023C10.4215 9.58099 10.6504 9.45746 10.8997 9.40429C11.149 9.35112 11.4083 9.37053 11.6469 9.46023C12.2518 9.68593 12.8802 9.84248 13.5203 9.92689C13.8441 9.97258 14.1399 10.1357 14.3513 10.3852C14.5627 10.6348 14.6751 10.9533 14.6669 11.2802Z"
+          stroke={props.color ?? "currentColor"}
+          strokeWidth="1.33333"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_5639_632">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

package/src/react/web/ui/ConnectWallet/icons/types.ts

@@ -1 +1 @@
-export type IconFC = React.FC<{ size: string }>;
+export type IconFC = React.FC<{ size: string; color?: string }>;

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

@@ -14,6 +14,9 @@ import { Text } from "../../components/text.js";
 import { Blobbie } from "../Blobbie.js";
 import { MenuButton } from "../MenuButton.js";
 import { AddUserIcon } from "../icons/AddUserIcon.js";
+import { EmailIcon } from "../icons/EmailIcon.js";
+import { FingerPrintIcon } from "../icons/FingerPrintIcon.js";
+import { PhoneIcon } from "../icons/PhoneIcon.js";
 import type { ConnectLocale } from "../locale/types.js";
 import type { WalletDetailsModalScreen } from "./types.js";
 
@@ -84,7 +87,7 @@ export function LinkedProfilesScreen(props: {
                 fontSize: fontSize.sm,
               }}
             >
-              <AddUserIcon size={iconSize.md} />
+              <AddUserIcon size={iconSize.lg} />
               <Text color="primaryText">
                 {props.locale.manageWallet.linkProfile}
               </Text>
@@ -147,6 +150,12 @@ function LinkedProfile({
         >
           <Blobbie address={profile.details.address} size={32} />
         </Container>
+      ) : profile.type === "passkey" ? (
+        <FingerPrintIcon size={iconSize.lg} />
+      ) : profile.type === "email" ? (
+        <EmailIcon size={iconSize.lg} />
+      ) : profile.type === "phone" ? (
+        <PhoneIcon size={iconSize.lg} />
       ) : (
         <Img
           src={getSocialIcon(profile.type)}