fix: Autoconnect previously linked wallets (#5688)

thirdweb-dev · Dec 11, 2024 · da5d8ec · da5d8ec
1 parent 8020bdb
commit da5d8ec
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 38 deletions.
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,