From f00373887d6ed45a591d9cd8ac5a42dcec9edf2e Mon Sep 17 00:00:00 2001
From: Joaquim Verges <joaquim.verges@gmail.com>
Date: Mon, 28 Apr 2025 10:52:45 +1200
Subject: [PATCH] [SDK] Show injected wallet icon when available

---
 .changeset/tangy-bugs-feel.md                       |  5 +++++
 packages/thirdweb/src/react/core/utils/wallet.ts    | 11 ++++++++++-
 .../thirdweb/src/react/core/utils/walletIcon.ts     | 13 ++++++++++---
 3 files changed, 25 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/tangy-bugs-feel.md

diff --git a/.changeset/tangy-bugs-feel.md b/.changeset/tangy-bugs-feel.md
new file mode 100644
index 00000000000..b866a229d8f
--- /dev/null
+++ b/.changeset/tangy-bugs-feel.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Show injected wallet icon when available
diff --git a/packages/thirdweb/src/react/core/utils/wallet.ts b/packages/thirdweb/src/react/core/utils/wallet.ts
index 37b63c3647a..5f96795c86d 100644
--- a/packages/thirdweb/src/react/core/utils/wallet.ts
+++ b/packages/thirdweb/src/react/core/utils/wallet.ts
@@ -194,10 +194,19 @@ export function useWalletInfo(id: WalletId | undefined) {
 export function useWalletImage(id: WalletId | undefined) {
   return useQuery({
     queryKey: ["wallet-image", id],
-    queryFn: () => {
+    queryFn: async () => {
       if (!id) {
         throw new Error("Wallet id is required");
       }
+      const { getInstalledWalletProviders } = await import(
+        "../../../wallets/injected/mipdStore.js"
+      );
+      const mipdImage = getInstalledWalletProviders().find(
+        (x) => x.info.rdns === id,
+      )?.info.icon;
+      if (mipdImage) {
+        return mipdImage;
+      }
       return getWalletInfo(id, true);
     },
     retry: false,
diff --git a/packages/thirdweb/src/react/core/utils/walletIcon.ts b/packages/thirdweb/src/react/core/utils/walletIcon.ts
index aecd4a8c1a9..37f67398376 100644
--- a/packages/thirdweb/src/react/core/utils/walletIcon.ts
+++ b/packages/thirdweb/src/react/core/utils/walletIcon.ts
@@ -129,8 +129,15 @@ export function useWalletIcon(props: {
 /**
  * @internal Exported for tests only
  */
-export async function fetchWalletImage(props: {
-  id: WalletId;
-}) {
+export async function fetchWalletImage(props: { id: WalletId }) {
+  const { getInstalledWalletProviders } = await import(
+    "../../../wallets/injected/mipdStore.js"
+  );
+  const mipdImage = getInstalledWalletProviders().find(
+    (x) => x.info.rdns === props.id,
+  )?.info.icon;
+  if (mipdImage) {
+    return mipdImage;
+  }
   return getWalletInfo(props.id, true);
 }