Merge pull request #327 from reown-com/fix/duplicated-wallets

fix: deduplicate wallets in all-wallets view

Author: ignaciosantise

.changeset/shaggy-moose-tan.md

@@ -0,0 +1,18 @@
+---
+'@reown/appkit-scaffold-react-native': patch
+'@reown/appkit-ethers5-react-native': patch
+'@reown/appkit-common-react-native': patch
+'@reown/appkit-ethers-react-native': patch
+'@reown/appkit-wagmi-react-native': patch
+'@reown/appkit-core-react-native': patch
+'@reown/appkit-siwe-react-native': patch
+'@reown/appkit-ui-react-native': patch
+'@reown/appkit-auth-ethers-react-native': patch
+'@reown/appkit-auth-wagmi-react-native': patch
+'@reown/appkit-coinbase-ethers-react-native': patch
+'@reown/appkit-coinbase-wagmi-react-native': patch
+'@reown/appkit-scaffold-utils-react-native': patch
+'@reown/appkit-wallet-react-native': patch
+---
+
+fix: deduplicate wallets in all wallet list

packages/scaffold/src/partials/w3m-all-wallets-list/index.tsx

@@ -38,12 +38,21 @@ export function AllWalletsList({ columns, itemWidth, onItemPress }: AllWalletsLi
   const preloadedWallets = installed.length + featured.length + recommended.length;
   const loadingItems = columns - ((100 + preloadedWallets) % columns);
 
-  const walletList = [
+  const combinedWallets = [
     ...(customWallets ?? []),
     ...installed,
     ...featured,
     ...recommended,
-    ...wallets,
+    ...wallets
+  ];
+
+  // Deduplicate by wallet ID
+  const uniqueWallets = Array.from(
+    new Map(combinedWallets.map(wallet => [wallet?.id, wallet])).values()
+  ).filter(wallet => wallet?.id); // Filter out any undefined wallets
+
+  const walletList = [
+    ...uniqueWallets,
     ...(pageLoading ? (Array.from({ length: loadingItems }) as WcWallet[]) : [])
   ];
 
@@ -132,7 +141,7 @@ export function AllWalletsList({ columns, itemWidth, onItemPress }: AllWalletsLi
       <Placeholder
         icon="warningCircle"
         iconColor="error-100"
-        title="Oops, we couldn’t load the wallets at the moment"
+        title="Oops, we couldn't load the wallets at the moment"
         description={`This might be due to a temporary network issue.\nPlease try reloading to see if that helps.`}
         actionIcon="refresh"
         actionPress={initialFetch}

packages/scaffold/src/views/w3m-connect-view/components/all-wallet-list.tsx

@@ -23,11 +23,17 @@ export function AllWalletList({ itemStyle, onWalletPress, isWalletConnectEnabled
   const imageHeaders = ApiController._getApiHeaders();
   const RECENT_COUNT = recentWallets?.length && installed.length ? 1 : recentWallets?.length ?? 0;
 
-  const list = filterOutRecentWallets(
-    recentWallets,
-    [...installed, ...featured, ...recommended],
-    RECENT_COUNT
-  ).slice(0, UiUtil.TOTAL_VISIBLE_WALLETS - RECENT_COUNT);
+  const combinedWallets = [...installed, ...featured, ...recommended];
+
+  // Deduplicate by wallet ID
+  const uniqueWallets = Array.from(
+    new Map(combinedWallets.map(wallet => [wallet.id, wallet])).values()
+  );
+
+  const list = filterOutRecentWallets(recentWallets, uniqueWallets, RECENT_COUNT).slice(
+    0,
+    UiUtil.TOTAL_VISIBLE_WALLETS - RECENT_COUNT
+  );
 
   if (!isWalletConnectEnabled || !list?.length) {
     return null;