[SDK] Fix wallet reconnection for previously connected wallets (#8066)

Author: joaquim-verges

.changeset/clean-wings-repeat.md

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

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx

@@ -203,12 +203,12 @@ export function ChainLiveStats(props: { rpc: string }) {
       >
         {eip7702Support.data ? (
           eip7702Support.data.isSupported ? (
-            "Enabled"
+            "Available"
           ) : (
-            "Disabled"
+            "Not Available"
           )
         ) : eip7702Support.isError ? (
-          "Disabled"
+          "Not Available"
         ) : (
           <div className="flex h-[28px] w-[80px] py-1">
             <Skeleton className="h-full w-full" />

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/react/web/ui/ConnectWallet/Details.test.tsx

@@ -560,7 +560,7 @@ describe("Details Modal", () => {
     );
 
     // Add assertions to check if the modal is rendered correctly
-    expect(screen.getByText("Connect Modal")).toBeInTheDocument();
+    expect(screen.getByText("Manage Wallet")).toBeInTheDocument();
   });
 
   it("should call closeModal when the close button is clicked", async () => {

packages/thirdweb/src/transaction/prepare-transaction.test.ts

@@ -1,9 +1,9 @@
+import { baseSepolia } from "thirdweb/chains";
 import { describe, expect, test as it } from "vitest";
 import { TEST_ACCOUNT_B } from "~test/test-wallets.js";
 import { TEST_WALLET_A, TEST_WALLET_B } from "../../test/src/addresses.js";
 import { FORKED_ETHEREUM_CHAIN } from "../../test/src/chains.js";
 import { TEST_CLIENT } from "../../test/src/test-clients.js";
-import { defineChain } from "../chains/utils.js";
 import { toWei } from "../utils/units.js";
 import { signAuthorization } from "./actions/eip7702/authorization.js";
 import { estimateGas } from "./actions/estimate-gas.js";
@@ -33,7 +33,7 @@ describe.runIf(process.env.TW_SECRET_KEY)("prepareTransaction", () => {
     });
     const preparedTx = prepareTransaction({
       authorizationList: [authorization],
-      chain: defineChain(911867),
+      chain: baseSepolia,
       client: TEST_CLIENT,
       to: TEST_WALLET_B,
       value: 0n,

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

@@ -5,7 +5,6 @@ import { createWalletAdapter } from "../../adapters/wallet-adapter.js";
 import { ethereum } from "../../chains/chain-definitions/ethereum.js";
 import { webLocalStorage } from "../../utils/storage/webStorage.js";
 import { createWallet } from "../create-wallet.js";
-import { getInstalledWalletProviders } from "../injected/mipdStore.js";
 import { autoConnect } from "./autoConnect.js";
 import { autoConnectCore } from "./autoConnectCore.js";
 
@@ -25,7 +24,6 @@ describe("autoConnect", () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
-    vi.mocked(getInstalledWalletProviders).mockReturnValue([]);
     vi.mocked(createWallet).mockReturnValue(mockWallet);
     vi.mocked(autoConnectCore).mockResolvedValue(true);
   });
@@ -38,7 +36,6 @@ describe("autoConnect", () => {
 
     expect(autoConnectCore).toHaveBeenCalledWith({
       createWalletFn: createWallet,
-      getInstalledWallets: expect.any(Function),
       manager: expect.any(Object),
       props: {
         client: TEST_CLIENT,

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,13 @@ 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);
+  });
   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],