fix: show user info for ecosystem wallets (#4715)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on fixing the display of user information for ecosystem wallets in the Thirdweb application.

### Detailed summary
- Updated function name from `getEnclaveUserStatus` to `getUserStatus` in multiple files.
- Modified parameters in functions to include `ecosystem` for ecosystem wallets.
- Updated caching mechanism for InAppWalletConnector.
- Added logic to handle ecosystem wallets in `InAppWalletUserInfo` component.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: joaquim-verges

.changeset/quick-hotels-repair.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix showing user info for ecosystem wallets

packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx

@@ -18,14 +18,19 @@ import { getLastAuthProvider } from "../../../../react/core/utils/storage.js";
 import { isContractDeployed } from "../../../../utils/bytecode/is-contract-deployed.js";
 import { formatNumber } from "../../../../utils/formatNumber.js";
 import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
+import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wallet.js";
+import type { Ecosystem } from "../../../../wallets/in-app/web/types.js";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
 import {
   type AppMetadata,
   type SocialAuthOption,
   socialAuthOptions,
 } from "../../../../wallets/types.js";
-import type { WalletId } from "../../../../wallets/wallet-types.js";
+import type {
+  EcosystemWalletId,
+  WalletId,
+} from "../../../../wallets/wallet-types.js";
 import {
   CustomThemeProvider,
   parseTheme,
@@ -53,6 +58,7 @@ import {
 import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.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 { useDisconnect } from "../../../core/hooks/wallets/useDisconnect.js";
 import { useSwitchActiveWalletChain } from "../../../core/hooks/wallets/useSwitchActiveWalletChain.js";
 import { SetRootElementContext } from "../../../core/providers/RootElementContext.js";
@@ -1066,6 +1072,7 @@ function InAppWalletUserInfo(props: {
   const { client, locale } = props;
   const account = useActiveAccount();
   const activeWallet = useActiveWallet();
+  const adminWallet = useAdminWallet();
   const { data: walletInfo } = useWalletInfo(activeWallet?.id);
   const isSmartWallet = hasSmartAccount(activeWallet);
   const { data: walletName } = useQuery({
@@ -1092,25 +1099,45 @@ function InAppWalletUserInfo(props: {
   const userInfoQuery = useQuery({
     queryKey: ["in-app-wallet-user", client, account?.address],
     queryFn: async () => {
+      const isInAppWallet =
+        adminWallet &&
+        (adminWallet.id === "inApp" || adminWallet.id.startsWith("ecosystem."));
+
+      if (!isInAppWallet) {
+        return null;
+      }
+
+      let ecosystem: Ecosystem | undefined;
+      if (isEcosystemWallet(adminWallet)) {
+        const ecosystemWallet = adminWallet as Wallet<EcosystemWalletId>;
+        const partnerId = ecosystemWallet.getConfig()?.partnerId;
+        ecosystem = {
+          id: ecosystemWallet.id,
+          partnerId,
+        };
+      }
+
       const { getUserEmail, getUserPhoneNumber } = await import(
         "../../../../wallets/in-app/web/lib/auth/index.js"
       );
 
       const [email, phone] = await Promise.all([
         getUserEmail({
           client: client,
+          ecosystem,
         }),
         getUserPhoneNumber({
           client: client,
+          ecosystem,
         }),
       ]);
 
       return email || phone || null;
     },
-    enabled: !isSmartWallet,
+    enabled: !!adminWallet,
   });
 
-  if (isSmartWallet) {
+  if (!userInfoQuery.data && isSmartWallet) {
     return <ConnectedToSmartWallet client={client} connectLocale={locale} />;
   }
 

packages/thirdweb/src/wallets/in-app/core/authentication/types.ts

@@ -243,4 +243,5 @@ export type GetUser =
 
 export type GetAuthenticatedUserParams = {
   client: ThirdwebClient;
+  ecosystem?: Ecosystem;
 };

packages/thirdweb/src/wallets/in-app/core/wallet/in-app-core.ts

@@ -17,10 +17,7 @@ import type {
 } from "../authentication/types.js";
 import type { InAppConnector } from "../interfaces/connector.js";
 
-const connectorCache = new WeakMap<
-  { client: ThirdwebClient; ecosystem?: Ecosystem },
-  InAppConnector
->();
+const connectorCache = new Map<string, InAppConnector>();
 
 /**
  * @internal
@@ -30,7 +27,7 @@ export async function getOrCreateInAppWalletConnector(
   connectorFactory: (client: ThirdwebClient) => Promise<InAppConnector>,
   ecosystem?: Ecosystem,
 ) {
-  const key = { client, ecosystem };
+  const key = JSON.stringify({ clientId: client.clientId, ecosystem });
   if (connectorCache.has(key)) {
     return connectorCache.get(key) as InAppConnector;
   }

packages/thirdweb/src/wallets/in-app/web/lib/actions/get-enclave-user-status.ts

@@ -9,7 +9,7 @@ import type { Ecosystem } from "../../types.js";
  *
  * @internal
  */
-export async function getEnclaveUserStatus({
+export async function getUserStatus({
   authToken,
   client,
   ecosystem,

packages/thirdweb/src/wallets/in-app/web/lib/auth/iframe-auth.ts

@@ -11,7 +11,7 @@ import type {
 import type { ClientIdWithQuerierType, Ecosystem } from "../../types.js";
 import type { InAppWalletIframeCommunicator } from "../../utils/iFrameCommunication/InAppWalletIframeCommunicator.js";
 import { generateWallet } from "../actions/generate-wallet.enclave.js";
-import { getEnclaveUserStatus } from "../actions/get-enclave-user-status.js";
+import { getUserStatus } from "../actions/get-enclave-user-status.js";
 import { BaseLogin } from "./base-login.js";
 
 export type AuthQuerierTypes = {
@@ -111,7 +111,7 @@ export class Auth {
   ): Promise<AuthLoginReturnType> {
     await this.preLogin();
 
-    const user = await getEnclaveUserStatus({
+    const user = await getUserStatus({
       authToken: authToken.storedToken.cookieString,
       client: this.client,
       ecosystem: this.ecosystem,

packages/thirdweb/src/wallets/in-app/web/lib/auth/index.ts

@@ -51,8 +51,8 @@ async function getInAppWalletConnector(
 export async function getAuthenticatedUser(
   options: GetAuthenticatedUserParams,
 ) {
-  const { client } = options;
-  const connector = await getInAppWalletConnector(client);
+  const { client, ecosystem } = options;
+  const connector = await getInAppWalletConnector(client, ecosystem);
   const user = await connector.getUser();
   switch (user.status) {
     case UserWalletStatus.LOGGED_IN_WALLET_INITIALIZED: {

packages/thirdweb/src/wallets/in-app/web/lib/enclave-wallet.ts

@@ -20,7 +20,7 @@ import {
   type WalletAddressObjectType,
 } from "../../core/authentication/types.js";
 import type { Ecosystem } from "../types.js";
-import { getEnclaveUserStatus } from "./actions/get-enclave-user-status.js";
+import { getUserStatus } from "./actions/get-enclave-user-status.js";
 import { signMessage as signEnclaveMessage } from "./actions/sign-message.enclave.js";
 import { signTransaction as signEnclaveTransaction } from "./actions/sign-transaction.enclave.js";
 import { signTypedData as signEnclaveTypedData } from "./actions/sign-typed-data.enclave.js";
@@ -96,22 +96,23 @@ export class EnclaveWallet implements IWebWallet {
       return { status: UserWalletStatus.LOGGED_OUT };
     }
 
-    const userStatus = await getEnclaveUserStatus({
+    const userStatus = await getUserStatus({
       authToken: token,
       client: this.client,
       ecosystem: this.ecosystem,
     });
+
     if (!userStatus) {
       return { status: UserWalletStatus.LOGGED_OUT };
     }
     const wallet = userStatus.wallets[0];
 
     const authDetails = {
       email: userStatus.linkedAccounts.find(
-        (account) => account.type === "email",
+        (account) => account.details.email !== undefined,
       )?.details.email,
       phoneNumber: userStatus.linkedAccounts.find(
-        (account) => account.type === "phone",
+        (account) => account.details.phone !== undefined,
       )?.details.phone,
       userWalletId: userStatus.id || "",
       recoveryShareManagement: RecoveryShareManagement.ENCLAVE,

packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts

@@ -20,7 +20,7 @@ import {
   UserWalletStatus,
 } from "../../core/authentication/types.js";
 import type { InAppConnector } from "../../core/interfaces/connector.js";
-import { getEnclaveUserStatus } from "../lib/actions/get-enclave-user-status.js";
+import { getUserStatus } from "../lib/actions/get-enclave-user-status.js";
 import type { Ecosystem, InAppWalletConstructorType } from "../types.js";
 import { InAppWalletIframeCommunicator } from "../utils/iFrameCommunication/InAppWalletIframeCommunicator.js";
 import { Auth, type AuthQuerierTypes } from "./auth/iframe-auth.js";
@@ -152,7 +152,7 @@ export class InAppWebConnector implements InAppConnector {
       );
     }
 
-    const user = await getEnclaveUserStatus({
+    const user = await getUserStatus({
       authToken: authToken || (storedAuthToken as string),
       client: this.client,
       ecosystem: this.ecosystem,