feat: allow linking identities when using in-app + smart wallets (#4737)

Author: joaquim-verges

.changeset/brave-socks-impress.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Allow linking accounts when using in-app + smart wallets

packages/thirdweb/src/react/core/hooks/others/useProfiles.ts

@@ -3,7 +3,7 @@ import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wa
 import type { Profile } from "../../../../wallets/in-app/core/authentication/types.js";
 import { getProfiles } from "../../../../wallets/in-app/core/wallet/profiles.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
-import { useActiveWallet } from "../wallets/useActiveWallet.js";
+import { useAdminWallet } from "../wallets/useAdminAccount.js";
 
 /**
  * Retrieves all linked profiles for the current wallet.
@@ -25,7 +25,7 @@ import { useActiveWallet } from "../wallets/useActiveWallet.js";
  * @wallet
  */
 export function useProfiles(): UseQueryResult<Profile[]> {
-  const wallet = useActiveWallet();
+  const wallet = useAdminWallet();
 
   return useQuery({
     queryKey: ["profiles", wallet?.id],

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/LinkProfileScreen.tsx

@@ -7,8 +7,8 @@ import { isEcosystemWallet } from "../../../../../wallets/ecosystem/is-ecosystem
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
 import type { EcosystemWalletId } from "../../../../../wallets/wallet-types.js";
 import { iconSize } from "../../../../core/design-system/index.js";
-import { useActiveWallet } from "../../../../core/hooks/wallets/useActiveWallet.js";
 import { useActiveWalletChain } from "../../../../core/hooks/wallets/useActiveWalletChain.js";
+import { useAdminWallet } from "../../../../core/hooks/wallets/useAdminAccount.js";
 import EcosystemWalletConnectUI from "../../../wallets/ecosystem/EcosystemWalletConnectUI.js";
 import { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js";
 import { Container, Line, ModalHeader } from "../../components/basic.js";
@@ -28,7 +28,7 @@ export function LinkProfileScreen(props: {
   client: ThirdwebClient;
   walletConnect: { projectId?: string } | undefined;
 }) {
-  const activeWallet = useActiveWallet();
+  const activeWallet = useAdminWallet();
   const chain = useActiveWalletChain();
   const queryClient = useQueryClient();
 

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ManageWalletScreen.tsx

@@ -6,6 +6,7 @@ import { isInAppWallet } from "../../../../../wallets/in-app/core/wallet/index.j
 import { injectedProvider } from "../../../../../wallets/injected/mipdStore.js";
 import { fontSize, iconSize } from "../../../../core/design-system/index.js";
 import { useActiveWallet } from "../../../../core/hooks/wallets/useActiveWallet.js";
+import { useAdminWallet } from "../../../../core/hooks/wallets/useAdminAccount.js";
 import { Spacer } from "../../components/Spacer.js";
 import { Container, Line, ModalHeader } from "../../components/basic.js";
 import { Text } from "../../components/text.js";
@@ -26,7 +27,7 @@ export function ManageWalletScreen(props: {
   locale: ConnectLocale;
   client: ThirdwebClient;
 }) {
-  const activeWallet = useActiveWallet();
+  const activeWallet = useAdminWallet();
 
   return (
     <Container

packages/thirdweb/src/react/web/wallets/in-app/InAppWalletConnectUI.tsx

@@ -53,12 +53,14 @@ function InAppWalletConnectUI(props: {
 
   // if the the modal starts out with the wallet's connect ui instead of wallet selector - going back to main screen requires staying on the same component and clearing the selection data
   // otherwise, we go back to the wallet selector by calling props.goBack
-  const goBackToMain =
-    initialScreen === props.wallet
-      ? () => {
-          setSelectionData({});
-        }
-      : props.goBack;
+  const goBackToMain = () => {
+    if (initialScreen === props.wallet) {
+      setSelectionData({});
+    } else {
+      props.goBack?.();
+      setSelectionData({});
+    }
+  };
 
   const done = () => {
     props.done();