fix: Remove duplicated entry for MetaMask in MM browser (#2741)

Author: MananTank

.changeset/khaki-gifts-sing.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Remove duplicated entry for MetaMask in MM browser

packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AnyWalletConnectUI.tsx

@@ -3,7 +3,7 @@ import type {
   InjectedSupportedWalletIds,
   WCSupportedWalletIds,
 } from "../../../../../wallets/__generated__/wallet-ids.js";
-import { getMIPDStore } from "../../../../../wallets/injected/mipdStore.js";
+import { getInstalledWalletProviders } from "../../../../../wallets/injected/mipdStore.js";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
 import { useWalletConnectionCtx } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
 import { getInjectedWalletLocale } from "../../../wallets/injected/locale/getInjectedWalletLocale.js";
@@ -52,9 +52,9 @@ export function AnyWalletConnectUI(props: {
   }
 
   // if wallet can connect to injected wallet + wallet is injected
-  const isInstalled = getMIPDStore()
-    .getProviders()
-    .find((w) => w.info.rdns === walletInfo.data.rdns);
+  const isInstalled = getInstalledWalletProviders().find(
+    (w) => w.info.rdns === walletInfo.data.rdns,
+  );
 
   if (screen === "get-started") {
     return (

packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx

@@ -1,4 +1,4 @@
-import { getMIPDStore } from "../../../../wallets/injected/mipdStore.js";
+import { getInstalledWalletProviders } from "../../../../wallets/injected/mipdStore.js";
 import type { WalletId } from "../../../../wallets/wallet-types.js";
 // import { localWalletMetadata } from "../../../../wallets/local/index._ts";
 import { useWalletConnectionCtx } from "../../../core/hooks/others/useWalletConnectionCtx.js";
@@ -26,14 +26,12 @@ export function WalletEntryButton(props: {
   const walletInfo = useWalletInfo(walletId);
 
   const walletName =
-    getMIPDStore()
-      .getProviders()
-      .find((p) => p.info.rdns === walletId)?.info.name ||
-    walletInfo.data?.name;
+    getInstalledWalletProviders().find((p) => p.info.rdns === walletId)?.info
+      .name || walletInfo.data?.name;
 
-  const isInstalled = getMIPDStore()
-    .getProviders()
-    .find((p) => p.info.rdns === walletId);
+  const isInstalled = getInstalledWalletProviders().find(
+    (p) => p.info.rdns === walletId,
+  );
 
   return (
     <WalletButton

packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx

@@ -2,7 +2,7 @@ import { ChevronLeftIcon } from "@radix-ui/react-icons";
 import { Suspense, lazy, useContext, useEffect, useRef, useState } from "react";
 import type { InjectedSupportedWalletIds } from "../../../../wallets/__generated__/wallet-ids.js";
 import { createWallet } from "../../../../wallets/create-wallet.js";
-import { getMIPDStore } from "../../../../wallets/injected/mipdStore.js";
+import { getInstalledWalletProviders } from "../../../../wallets/injected/mipdStore.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { WalletId } from "../../../../wallets/wallet-types.js";
 // import { localWalletMetadata } from "../../../../wallets/local/index._ts";
@@ -467,7 +467,7 @@ let _installedWallets: Wallet[] = [];
 
 function getInstalledWallets() {
   if (_installedWallets.length === 0) {
-    const providers = getMIPDStore().getProviders();
+    const providers = getInstalledWalletProviders();
     const walletIds = providers.map((provider) => provider.info.rdns);
     _installedWallets = walletIds.map((w) =>
       createWallet(w as InjectedSupportedWalletIds),

packages/thirdweb/src/react/web/ui/components/WalletImage.tsx

@@ -1,4 +1,4 @@
-import { getMIPDStore } from "../../../../wallets/injected/mipdStore.js";
+import { getInstalledWalletProviders } from "../../../../wallets/injected/mipdStore.js";
 import type { WalletId } from "../../../../wallets/wallet-types.js";
 import { radius } from "../design-system/index.js";
 import { useWalletImage } from "../hooks/useWalletInfo.js";
@@ -8,9 +8,9 @@ import { Img } from "./Img.js";
  * @internal
  */
 export function WalletImage(props: { id: WalletId; size: string }) {
-  const mipdImage = getMIPDStore()
-    .getProviders()
-    .find((provider) => provider.info.rdns === props.id)?.info.icon;
+  const mipdImage = getInstalledWalletProviders().find(
+    (provider) => provider.info.rdns === props.id,
+  )?.info.icon;
 
   if (mipdImage) {
     return (

packages/thirdweb/src/react/web/utils/sortWallets.ts

@@ -1,4 +1,4 @@
-import { getMIPDStore } from "../../../wallets/injected/mipdStore.js";
+import { getInstalledWalletProviders } from "../../../wallets/injected/mipdStore.js";
 import type { WalletId } from "../../../wallets/wallet-types.js";
 
 /**
@@ -9,7 +9,7 @@ export function sortWallets<T extends { id: string }>(
   wallets: T[],
   recommendedWallets?: { id: WalletId }[],
 ): T[] {
-  const providers = getMIPDStore().getProviders();
+  const providers = getInstalledWalletProviders();
   return (
     wallets
       // show the installed wallets first

packages/thirdweb/src/wallets/injected/mipdStore.ts

@@ -29,15 +29,9 @@ const mipdStore: Store | undefined = /* @__PURE__ */ (() =>
  * @walletUtils
  */
 export function injectedProvider(walletId: WalletId): Ethereum | undefined {
-  if (!mipdStore) {
-    throw new Error("store not initialized");
-  }
-
-  const store = getMIPDStore();
-
-  const injectedProviderDetail = store.findProvider({
-    rdns: walletId,
-  });
+  const injectedProviderDetail = getInstalledWalletProviders().find(
+    (p) => p.info.rdns === walletId,
+  );
 
   return injectedProviderDetail?.provider as Ethereum | undefined;
 }
@@ -46,9 +40,23 @@ export function injectedProvider(walletId: WalletId): Ethereum | undefined {
  * Get Injected Provider Details for given wallet ID (rdns)
  * @internal
  */
-export function getMIPDStore() {
+function getMIPDStore() {
   if (!mipdStore) {
     throw new Error("MIPD store not initialized");
   }
   return mipdStore;
 }
+
+export function getInstalledWalletProviders() {
+  const providers = getMIPDStore().getProviders();
+
+  for (const provider of providers) {
+    // Map io.metamask.mobile to io.metamask rdns to fix double entry issue in MetaMask mobile browser
+    if ((provider.info.rdns as string) === "io.metamask.mobile") {
+      provider.info.rdns = "io.metamask";
+      break;
+    }
+  }
+
+  return providers;
+}