[SDK] Show injected wallet icon when available (#6871)

Author: joaquim-verges

.changeset/tangy-bugs-feel.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Show injected wallet icon when available

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,

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);
 }