fix: Autoconnect previously linked wallets (#5688)

joaquim-verges · web-flow · commit da5d8ec53b4d · 2024-12-11T19:58:24.000+13:00
diff --git a/.changeset/happy-suns-nail.md b/.changeset/happy-suns-nail.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Autoconnect previously linked wallets
diff --git a/apps/playground-web/src/components/styled-connect-embed.tsx b/apps/playground-web/src/components/styled-connect-embed.tsx
@@ -25,7 +25,7 @@ export function StyledConnectEmbed(
 
   return account ? (
     <div className="flex flex-col gap-8">
-      <StyledConnectButton />
+      <StyledConnectButton {...props} />
     </div>
   ) : (
     <ConnectEmbed
diff --git a/packages/thirdweb/src/react/core/hooks/wallets/useAddConnectedWallet.ts b/packages/thirdweb/src/react/core/hooks/wallets/useAddConnectedWallet.ts
@@ -18,5 +18,5 @@ import { useConnectionManagerCtx } from "../../providers/connection-manager.js";
  */
 export function useAddConnectedWallet() {
   const manager = useConnectionManagerCtx("useAddConnectedWallet");
-  return manager.handleConnection;
+  return manager.addConnectedWallet;
 }
diff --git a/packages/thirdweb/src/react/core/hooks/wallets/useAutoConnect.ts b/packages/thirdweb/src/react/core/hooks/wallets/useAutoConnect.ts
@@ -131,7 +131,7 @@ export function useAutoConnectCore(
     }
 
     // then connect wallets that were last connected but were not set as active
-    const otherWallets = wallets.filter(
+    const otherWallets = availableWallets.filter(
       (w) =>
         w.id !== lastActiveWalletId && lastConnectedWalletIds.includes(w.id),
     );
diff --git a/packages/thirdweb/src/react/native/hooks/wallets/useLinkProfile.ts b/packages/thirdweb/src/react/native/hooks/wallets/useLinkProfile.ts
@@ -1,9 +1,9 @@
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wallet.js";
 import type { AuthArgsType } from "../../../../wallets/in-app/core/authentication/types.js";
 import type { Ecosystem } from "../../../../wallets/in-app/core/wallet/types.js";
 import { linkProfile } from "../../../../wallets/in-app/web/lib/auth/index.js";
-import { useAdminWallet } from "../../../core/hooks/wallets/useAdminWallet.js";
+import { useConnectedWallets } from "../../../core/hooks/wallets/useConnectedWallets.js";
 
 /**
  * Links a web2 or web3 profile to the connected in-app or ecosystem account.
@@ -77,16 +77,25 @@ import { useAdminWallet } from "../../../core/hooks/wallets/useAdminWallet.js";
  * @wallet
  */
 export function useLinkProfile() {
-  const wallet = useAdminWallet();
+  const wallets = useConnectedWallets();
+  const queryClient = useQueryClient();
   return useMutation({
     mutationKey: ["profiles"],
-    mutationFn: async (options: Omit<AuthArgsType, "ecosystem">) => {
-      const ecosystem: Ecosystem | undefined =
-        wallet && isEcosystemWallet(wallet)
-          ? { id: wallet.id, partnerId: wallet.getConfig()?.partnerId }
-          : undefined;
+    mutationFn: async (options: AuthArgsType) => {
+      const ecosystemWallet = wallets.find((w) => isEcosystemWallet(w));
+      const ecosystem: Ecosystem | undefined = ecosystemWallet
+        ? {
+            id: ecosystemWallet.id,
+            partnerId: ecosystemWallet.getConfig()?.partnerId,
+          }
+        : undefined;
       const optionsWithEcosystem = { ...options, ecosystem } as AuthArgsType;
       return linkProfile(optionsWithEcosystem);
     },
+    onSuccess() {
+      setTimeout(() => {
+        queryClient.invalidateQueries({ queryKey: ["profiles"] });
+      }, 500);
+    },
   });
 }
diff --git a/packages/thirdweb/src/react/native/hooks/wallets/useProfiles.ts b/packages/thirdweb/src/react/native/hooks/wallets/useProfiles.ts
@@ -4,7 +4,7 @@ import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wa
 import type { Profile } from "../../../../wallets/in-app/core/authentication/types.js";
 import type { Ecosystem } from "../../../../wallets/in-app/core/wallet/types.js";
 import { getProfiles } from "../../../../wallets/in-app/web/lib/auth/index.js";
-import { useAdminWallet } from "../../../core/hooks/wallets/useAdminWallet.js";
+import { useConnectedWallets } from "../../../core/hooks/wallets/useConnectedWallets.js";
 
 /**
  * Retrieves all linked profiles of the connected in-app or ecosystem account.
@@ -29,15 +29,24 @@ import { useAdminWallet } from "../../../core/hooks/wallets/useAdminWallet.js";
 export function useProfiles(args: {
   client: ThirdwebClient;
 }): UseQueryResult<Profile[]> {
-  const wallet = useAdminWallet();
+  const wallets = useConnectedWallets();
+  const enabled =
+    wallets.length > 0 &&
+    wallets.some((w) => w.id === "inApp" || isEcosystemWallet(w));
   return useQuery({
-    queryKey: ["profiles", wallet?.id, wallet?.getAccount()?.address],
-    enabled: !!wallet && (wallet.id === "inApp" || isEcosystemWallet(wallet)),
+    queryKey: [
+      "profiles",
+      wallets.map((w) => `${w.id}-${w.getAccount()?.address}`),
+    ],
+    enabled,
     queryFn: async () => {
-      const ecosystem: Ecosystem | undefined =
-        wallet && isEcosystemWallet(wallet)
-          ? { id: wallet.id, partnerId: wallet.getConfig()?.partnerId }
-          : undefined;
+      const ecosystemWallet = wallets.find((w) => isEcosystemWallet(w));
+      const ecosystem: Ecosystem | undefined = ecosystemWallet
+        ? {
+            id: ecosystemWallet.id,
+            partnerId: ecosystemWallet.getConfig()?.partnerId,
+          }
+        : undefined;
       return getProfiles({
         client: args.client,
         ecosystem,
diff --git a/packages/thirdweb/src/react/web/hooks/wallets/useLinkProfile.ts b/packages/thirdweb/src/react/web/hooks/wallets/useLinkProfile.ts
@@ -1,9 +1,9 @@
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wallet.js";
 import type { AuthArgsType } from "../../../../wallets/in-app/core/authentication/types.js";
 import type { Ecosystem } from "../../../../wallets/in-app/core/wallet/types.js";
 import { linkProfile } from "../../../../wallets/in-app/web/lib/auth/index.js";
-import { useAdminWallet } from "../../../core/hooks/wallets/useAdminWallet.js";
+import { useConnectedWallets } from "../../../core/hooks/wallets/useConnectedWallets.js";
 
 /**
  * Links a web2 or web3 profile to the connected in-app or ecosystem account.
@@ -76,16 +76,25 @@ import { useAdminWallet } from "../../../core/hooks/wallets/useAdminWallet.js";
  * @wallet
  */
 export function useLinkProfile() {
-  const wallet = useAdminWallet();
+  const wallets = useConnectedWallets();
+  const queryClient = useQueryClient();
   return useMutation({
     mutationKey: ["profiles"],
     mutationFn: async (options: AuthArgsType) => {
-      const ecosystem: Ecosystem | undefined =
-        wallet && isEcosystemWallet(wallet)
-          ? { id: wallet.id, partnerId: wallet.getConfig()?.partnerId }
-          : undefined;
+      const ecosystemWallet = wallets.find((w) => isEcosystemWallet(w));
+      const ecosystem: Ecosystem | undefined = ecosystemWallet
+        ? {
+            id: ecosystemWallet.id,
+            partnerId: ecosystemWallet.getConfig()?.partnerId,
+          }
+        : undefined;
       const optionsWithEcosystem = { ...options, ecosystem } as AuthArgsType;
       return linkProfile(optionsWithEcosystem);
     },
+    onSuccess() {
+      setTimeout(() => {
+        queryClient.invalidateQueries({ queryKey: ["profiles"] });
+      }, 500);
+    },
   });
 }
diff --git a/packages/thirdweb/src/react/web/hooks/wallets/useProfiles.ts b/packages/thirdweb/src/react/web/hooks/wallets/useProfiles.ts
@@ -4,7 +4,7 @@ import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wa
 import type { Profile } from "../../../../wallets/in-app/core/authentication/types.js";
 import type { Ecosystem } from "../../../../wallets/in-app/core/wallet/types.js";
 import { getProfiles } from "../../../../wallets/in-app/web/lib/auth/index.js";
-import { useAdminWallet } from "../../../core/hooks/wallets/useAdminWallet.js";
+import { useConnectedWallets } from "../../../core/hooks/wallets/useConnectedWallets.js";
 
 /**
  * Retrieves all linked profiles of the connected in-app or ecosystem account.
@@ -29,15 +29,24 @@ import { useAdminWallet } from "../../../core/hooks/wallets/useAdminWallet.js";
 export function useProfiles(args: {
   client: ThirdwebClient;
 }): UseQueryResult<Profile[]> {
-  const wallet = useAdminWallet();
+  const wallets = useConnectedWallets();
+  const enabled =
+    wallets.length > 0 &&
+    wallets.some((w) => w.id === "inApp" || isEcosystemWallet(w));
   return useQuery({
-    queryKey: ["profiles", wallet?.id, wallet?.getAccount()?.address],
-    enabled: !!wallet && (wallet.id === "inApp" || isEcosystemWallet(wallet)),
+    queryKey: [
+      "profiles",
+      wallets.map((w) => `${w.id}-${w.getAccount()?.address}`),
+    ],
+    enabled,
     queryFn: async () => {
-      const ecosystem: Ecosystem | undefined =
-        wallet && isEcosystemWallet(wallet)
-          ? { id: wallet.id, partnerId: wallet.getConfig()?.partnerId }
-          : undefined;
+      const ecosystemWallet = wallets.find((w) => isEcosystemWallet(w));
+      const ecosystem: Ecosystem | undefined = ecosystemWallet
+        ? {
+            id: ecosystemWallet.id,
+            partnerId: ecosystemWallet.getConfig()?.partnerId,
+          }
+        : undefined;
       return getProfiles({
         client: args.client,
         ecosystem,
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkProfileScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkProfileScreen.tsx
@@ -43,7 +43,9 @@ export function LinkProfileScreen(props: {
           walletConnect={props.walletConnect}
           wallet={activeWallet as Wallet<"inApp">}
           done={() => {
-            queryClient.invalidateQueries({ queryKey: ["profiles"] });
+            setTimeout(() => {
+              queryClient.invalidateQueries({ queryKey: ["profiles"] });
+            }, 500);
             props.onBack();
           }}
           connectLocale={props.locale}
@@ -67,7 +69,9 @@ export function LinkProfileScreen(props: {
         <EcosystemWalletConnectUI
           wallet={activeWallet as Wallet<EcosystemWalletId>}
           done={() => {
-            queryClient.invalidateQueries({ queryKey: ["profiles"] });
+            setTimeout(() => {
+              queryClient.invalidateQueries({ queryKey: ["profiles"] });
+            }, 500);
             props.onBack();
           }}
           connectLocale={props.locale}
diff --git a/packages/thirdweb/src/wallets/manager/index.ts b/packages/thirdweb/src/wallets/manager/index.ts
@@ -230,11 +230,15 @@ 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(ids));
+      storage.setItem(
+        CONNECTED_WALLET_IDS,
+        stringify(Array.from(new Set([...prevAccounts, ...ids]))),
+      );
     },
     [connectedWallets],
     false,

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"thirdweb": patch
 +---
++
 +Autoconnect previously linked wallets
Original file line number	Diff line number	Diff line change
`@@ -18,5 +18,5 @@ import { useConnectionManagerCtx } from "../../providers/connection-manager.js";`
`18`	`18`	`*/`
`19`	`19`	`export function useAddConnectedWallet() {`
`20`	`20`	`const manager = useConnectionManagerCtx("useAddConnectedWallet");`
`21`		`- return manager.handleConnection;`
	`21`	`+ return manager.addConnectedWallet;`
`22`	`22`	`}`
Original file line number	Diff line number	Diff line change
`@@ -131,7 +131,7 @@ export function useAutoConnectCore(`
`131`	`131`	`}`
`132`	`132`
`133`	`133`	`// then connect wallets that were last connected but were not set as active`
`134`		`- const otherWallets = wallets.filter(`
	`134`	`+ const otherWallets = availableWallets.filter(`
`135`	`135`	`(w) =>`
`136`	`136`	`w.id !== lastActiveWalletId && lastConnectedWalletIds.includes(w.id),`
`137`	`137`	`);`