[SDK] Fix wallet reconnection for previously connected wallets

Author: joaquim-verges

.changeset/clean-wings-repeat.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Always reconnect any previously connected wallet properly

packages/thirdweb/src/react/core/hooks/wallets/useAutoConnect.ts

@@ -14,7 +14,6 @@ export function useAutoConnectCore(
   storage: AsyncStorage,
   props: AutoConnectProps & { wallets: Wallet[] },
   createWalletFn: (id: WalletId) => Wallet,
-  getInstalledWallets?: () => Wallet[],
 ) {
   const manager = useConnectionManagerCtx("useAutoConnect");
   const { connect } = useConnect({
@@ -28,7 +27,6 @@ export function useAutoConnectCore(
       autoConnectCore({
         connectOverride: connect,
         createWalletFn,
-        getInstalledWallets,
         manager,
         props,
         setLastAuthProvider,

packages/thirdweb/src/react/web/hooks/wallets/useAutoConnect.ts

@@ -2,7 +2,6 @@ import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
 import type { AutoConnectProps } from "../../../../wallets/connection/types.js";
 import { createWallet } from "../../../../wallets/create-wallet.js";
 import { getDefaultWallets } from "../../../../wallets/defaultWallets.js";
-import { getInstalledWalletProviders } from "../../../../wallets/injected/mipdStore.js";
 import { useAutoConnectCore } from "../../../core/hooks/wallets/useAutoConnect.js";
 
 /**
@@ -34,15 +33,5 @@ export function useAutoConnect(props: AutoConnectProps) {
       wallets,
     },
     createWallet,
-    () => {
-      const specifiedWalletIds = new Set(wallets.map((x) => x.id));
-
-      // pass the wallets that are not already specified but are installed by the user
-      const installedWallets = getInstalledWalletProviders()
-        .filter((x) => !specifiedWalletIds.has(x.info.rdns))
-        .map((x) => createWallet(x.info.rdns));
-
-      return installedWallets;
-    },
   );
 }

packages/thirdweb/src/wallets/connection/autoConnect.ts

@@ -1,7 +1,6 @@
 import { webLocalStorage } from "../../utils/storage/webStorage.js";
 import { createWallet } from "../create-wallet.js";
 import { getDefaultWallets } from "../defaultWallets.js";
-import { getInstalledWalletProviders } from "../injected/mipdStore.js";
 import type { Wallet } from "../interfaces/wallet.js";
 import { createConnectionManager } from "../manager/index.js";
 import { autoConnectCore } from "./autoConnectCore.js";
@@ -44,16 +43,6 @@ export async function autoConnect(
   const manager = createConnectionManager(webLocalStorage);
   const result = await autoConnectCore({
     createWalletFn: createWallet,
-    getInstalledWallets: () => {
-      const specifiedWalletIds = new Set(wallets.map((x) => x.id));
-
-      // pass the wallets that are not already specified but are installed by the user
-      const installedWallets = getInstalledWalletProviders()
-        .filter((x) => !specifiedWalletIds.has(x.info.rdns))
-        .map((x) => createWallet(x.info.rdns));
-
-      return installedWallets;
-    },
     manager,
     props: {
       ...props,

packages/thirdweb/src/wallets/connection/autoConnectCore.ts

@@ -28,7 +28,6 @@ type AutoConnectCoreProps = {
   connectOverride?: (
     walletOrFn: Wallet | (() => Promise<Wallet>),
   ) => Promise<Wallet | null>;
-  getInstalledWallets?: () => Wallet[];
   setLastAuthProvider?: (
     authProvider: AuthArgsType["strategy"],
     storage: AsyncStorage,
@@ -69,7 +68,6 @@ const _autoConnectCore = async ({
   createWalletFn,
   manager,
   connectOverride,
-  getInstalledWallets,
   setLastAuthProvider,
 }: AutoConnectCoreProps): Promise<boolean> => {
   const { wallets, onConnect } = props;
@@ -120,7 +118,17 @@ const _autoConnectCore = async ({
   // in that case, we default to the passed chain to connect to
   const lastConnectedChain =
     (await getLastConnectedChain(storage)) || props.chain;
-  const availableWallets = [...wallets, ...(getInstalledWallets?.() ?? [])];
+  const availableWallets = lastConnectedWalletIds.map((id) => {
+    const specifiedWallet = wallets.find((w) => w.id === id);
+    if (specifiedWallet) {
+      return specifiedWallet;
+    }
+    return createWalletFn(id as WalletId);
+  });
+  console.log(
+    "availableWallets",
+    availableWallets.map((w) => w.id),
+  );
   const activeWallet =
     lastActiveWalletId &&
     (availableWallets.find((w) => w.id === lastActiveWalletId) ||

packages/thirdweb/src/wallets/manager/index.ts

@@ -238,13 +238,12 @@ export function createConnectionManager(storage: AsyncStorage) {
   // save last connected wallet ids to storage
   effect(
     async () => {
-      const prevAccounts = (await getStoredConnectedWalletIds(storage)) || [];
       const accounts = connectedWallets.getValue();
       const ids = accounts.map((acc) => acc?.id).filter((c) => !!c) as string[];
 
       storage.setItem(
         CONNECTED_WALLET_IDS,
-        stringify(Array.from(new Set([...prevAccounts, ...ids]))),
+        stringify(Array.from(new Set([...ids]))),
       );
     },
     [connectedWallets],