thirdweb 5.76.0-nightly-e702490f2ff5e2b7d6b28c06731af880583cf8bc-20241210010916 → 5.76.1

package/src/extensions/erc721/write/sigMint721.test.ts

@@ -60,6 +60,48 @@ describe.runIf(process.env.TW_SECRET_KEY)(
       });
     }, 60000);
 
+    it("should generate a mint signature and mint an NFT for LoyaltyContract", async () => {
+      const loyaltyContract = getContract({
+        address: await deployERC721Contract({
+          account: TEST_ACCOUNT_A,
+          chain: ANVIL_CHAIN,
+          client: TEST_CLIENT,
+          params: {
+            name: "Test",
+            symbol: "TST",
+            royaltyRecipient: TEST_ACCOUNT_C.address,
+            saleRecipient: TEST_ACCOUNT_B.address,
+          },
+          type: "LoyaltyCard",
+        }),
+        chain: ANVIL_CHAIN,
+        client: TEST_CLIENT,
+      });
+      const { payload, signature } = await generateMintSignature({
+        mintRequest: {
+          to: TEST_ACCOUNT_B.address,
+          metadata: {
+            name: "My NFT",
+            description: "This is my NFT",
+            image: "https://example.com/image.png",
+          },
+        },
+        account: TEST_ACCOUNT_A,
+        contract: loyaltyContract,
+        contractType: "LoyaltyCard",
+      });
+      const transaction = mintWithSignature({
+        contract: loyaltyContract,
+        payload,
+        signature,
+      });
+      const { transactionHash } = await sendTransaction({
+        transaction,
+        account: TEST_ACCOUNT_A,
+      });
+      expect(transactionHash.length).toBe(66);
+    });
+
     it("should generate a mint signature and mint an NFT", async () => {
       const { payload, signature } = await generateMintSignature({
         mintRequest: {

package/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;
 }

package/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),
     );

package/src/react/core/utils/wallet.test.ts

@@ -0,0 +1,77 @@
+import { describe, expect, it } from "vitest";
+import type { Wallet } from "../../../wallets/interfaces/wallet";
+import { hasSponsoredTransactionsEnabled } from "./wallet";
+
+describe("hasSponsoredTransactionsEnabled", () => {
+  it("should return false for undefined wallet", () => {
+    expect(hasSponsoredTransactionsEnabled(undefined)).toBe(false);
+  });
+
+  it("should handle smart wallet with sponsorGas config", () => {
+    const mockSmartWallet = {
+      id: "smart",
+      getConfig: () => ({ sponsorGas: true }),
+    } as Wallet;
+    expect(hasSponsoredTransactionsEnabled(mockSmartWallet)).toBe(true);
+
+    const mockSmartWalletDisabled = {
+      id: "smart",
+      getConfig: () => ({ sponsorGas: false }),
+    } as Wallet;
+    expect(hasSponsoredTransactionsEnabled(mockSmartWalletDisabled)).toBe(
+      false,
+    );
+  });
+
+  it("should handle smart wallet with gasless config", () => {
+    const mockSmartWallet = {
+      id: "smart",
+      getConfig: () => ({ gasless: true }),
+    } as Wallet;
+    expect(hasSponsoredTransactionsEnabled(mockSmartWallet)).toBe(true);
+  });
+
+  it("should handle inApp wallet with smartAccount config", () => {
+    const mockInAppWallet = {
+      id: "inApp",
+      getConfig: () => ({
+        smartAccount: {
+          sponsorGas: true,
+        },
+      }),
+    } as Wallet;
+    expect(hasSponsoredTransactionsEnabled(mockInAppWallet)).toBe(true);
+
+    const mockInAppWalletDisabled = {
+      id: "inApp",
+      getConfig: () => ({
+        smartAccount: {
+          sponsorGas: false,
+        },
+      }),
+    } as Wallet;
+    expect(hasSponsoredTransactionsEnabled(mockInAppWalletDisabled)).toBe(
+      false,
+    );
+  });
+
+  it("should handle inApp wallet with gasless config", () => {
+    const mockInAppWallet = {
+      id: "inApp",
+      getConfig: () => ({
+        smartAccount: {
+          gasless: true,
+        },
+      }),
+    } as Wallet;
+    expect(hasSponsoredTransactionsEnabled(mockInAppWallet)).toBe(true);
+  });
+
+  it("should return false for regular wallet without smart account config", () => {
+    const mockRegularWallet = {
+      id: "inApp",
+      getConfig: () => ({}),
+    } as Wallet;
+    expect(hasSponsoredTransactionsEnabled(mockRegularWallet)).toBe(false);
+  });
+});

package/src/react/core/utils/wallet.ts

@@ -7,6 +7,7 @@ import { resolveName } from "../../../extensions/ens/resolve-name.js";
 import { shortenAddress } from "../../../utils/address.js";
 import { parseAvatarRecord } from "../../../utils/ens/avatar.js";
 import { getWalletInfo } from "../../../wallets/__generated__/getWalletInfo.js";
+import { isEcosystemWallet } from "../../../wallets/ecosystem/is-ecosystem-wallet.js";
 import type { Account, Wallet } from "../../../wallets/interfaces/wallet.js";
 import type { WalletInfo } from "../../../wallets/wallet-info.js";
 import type { WalletId } from "../../../wallets/wallet-types.js";
@@ -223,7 +224,7 @@ export function hasSponsoredTransactionsEnabled(wallet: Wallet | undefined) {
       sponsoredTransactionsEnabled = options.gasless;
     }
   }
-  if (wallet && wallet.id === "inApp") {
+  if (wallet && (wallet.id === "inApp" || isEcosystemWallet(wallet))) {
     const options = (wallet as Wallet<"inApp">).getConfig();
     if (options && "smartAccount" in options && options.smartAccount) {
       const smartOptions = options.smartAccount;

package/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);
+    },
   });
 }

package/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,

package/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);
+    },
   });
 }

package/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,

package/src/react/web/ui/ConnectWallet/locale/br.ts

@@ -0,0 +1,124 @@
+import type { ConnectLocale } from "./types.js";
+
+const connectWalletLocalPtBr: ConnectLocale = {
+  id: "pt_BR",
+  signIn: "Entrar",
+  defaultButtonTitle: "Conectar carteira",
+  connecting: "Conectando",
+  switchNetwork: "Trocar de rede",
+  switchingNetwork: "Trocando de rede",
+  defaultModalTitle: "Conectar",
+  recommended: "Recomendado",
+  installed: "Instalado",
+  continueAsGuest: "Continuar como convidado",
+  connectAWallet: "Conectar uma carteira",
+  newToWallets: "Novo em carteiras?",
+  getStarted: "Começar",
+  guest: "Convidado",
+  send: "Enviar",
+  receive: "Receber",
+  buy: "Comprar",
+  transactions: "Transações",
+  payTransactions: "Transações Fiat",
+  walletTransactions: "Transações de Carteira",
+  viewAllTransactions: "Ver todas as transações",
+  currentNetwork: "Rede atual",
+  switchAccount: "Trocar conta",
+  requestTestnetFunds: "Solicitar fundos para Testnet",
+  backupWallet: "Fazer backup da carteira",
+  guestWalletWarning:
+    "Esta é uma carteira de convidado temporária. Faça um backup se não quiser perder o acesso a ela",
+  switchTo: "Trocar para",
+  connectedToSmartWallet: "carteira inteligente",
+  confirmInWallet: "Confirmar na carteira",
+  disconnectWallet: "Desconectar carteira",
+  copyAddress: "Copiar endereço",
+  personalWallet: "Carteira pessoal",
+  smartWallet: "Carteira inteligente",
+  or: "Ou",
+  goBackButton: "Voltar",
+  passkeys: {
+    title: "Chave de acesso",
+    linkPasskey: "Vincular uma chave de acesso",
+  },
+  welcomeScreen: {
+    defaultTitle: "Sua porta de entrada para o mundo descentralizado",
+    defaultSubtitle: "Conecte uma carteira para começar",
+  },
+  agreement: {
+    prefix: "Ao conectar, você aceita os",
+    termsOfService: "Termos de serviço",
+    and: "e",
+    privacyPolicy: "Política de privacidade",
+  },
+  networkSelector: {
+    title: "Selecionar rede",
+    mainnets: "Redes principais",
+    testnets: "Redes de teste",
+    allNetworks: "Todas",
+    addCustomNetwork: "Adicionar rede personalizada",
+    inputPlaceholder: "Buscar rede ou ID da cadeia",
+    categoryLabel: {
+      recentlyUsed: "Usadas recentemente",
+      popular: "Populares",
+      others: "Outras redes",
+    },
+    loading: "Carregando",
+    failedToSwitch: "Erro ao trocar de rede",
+  },
+  receiveFundsScreen: {
+    title: "Receber fundos",
+    instruction:
+      "Copie o endereço da carteira para enviar fundos para esta carteira",
+  },
+  sendFundsScreen: {
+    title: "Enviar fundos",
+    submitButton: "Enviar",
+    token: "Token",
+    sendTo: "Enviar para",
+    amount: "Quantidade",
+    successMessage: "Transação bem-sucedida",
+    invalidAddress: "Endereço inválido",
+    noTokensFound: "Nenhum token encontrado",
+    searchToken: "Buscar ou colar o endereço do token",
+    transactionFailed: "Transação falhou",
+    transactionRejected: "Transação rejeitada",
+    insufficientFunds: "Fundos insuficientes",
+    selectTokenTitle: "Selecione um Token",
+    sending: "Enviando",
+  },
+  signatureScreen: {
+    instructionScreen: {
+      title: "Entrar",
+      instruction:
+        "Por favor, assine a solicitação de mensagem na sua carteira para continuar",
+      signInButton: "Entrar",
+      disconnectWallet: "Desconectar carteira",
+    },
+    signingScreen: {
+      title: "Entrando",
+      prompt: "Assine a solicitação de assinatura na sua carteira",
+      promptForSafe:
+        "Assine a solicitação de assinatura na sua carteira e aprove a transação no Safe",
+      approveTransactionInSafe: "Aprovar transação no Safe",
+      tryAgain: "Tentar novamente",
+      failedToSignIn: "Erro ao entrar",
+      inProgress: "Aguardando confirmação",
+    },
+  },
+  manageWallet: {
+    title: "Gerenciar Carteira",
+    linkedProfiles: "Perfis vinculados",
+    linkProfile: "Vincular um perfil",
+    connectAnApp: "Conectar um Aplicativo",
+    exportPrivateKey: "Exportar chave privada",
+  },
+  viewFunds: {
+    title: "Ver Fundos",
+    viewNFTs: "Ver NFTs",
+    viewTokens: "Ver Tokens",
+    viewAssets: "Ver Ativos",
+  },
+};
+
+export default connectWalletLocalPtBr;

package/src/react/web/ui/ConnectWallet/locale/getConnectLocale.ts

@@ -24,6 +24,9 @@ export async function getConnectLocale(localeId: LocaleId) {
     case "fr_FR": {
       return (await import("./fr.js")).default;
     }
+    case "pt_BR": {
+      return (await import("./br.js")).default;
+    }
     default: {
       return (await import("./en.js")).default;
     }

package/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}

package/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.test.tsx

@@ -0,0 +1,135 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { render, screen } from "../../../../../../test/src/react-render.js";
+import { useSocialProfiles } from "../../../../core/social/useSocialProfiles.js";
+import { useProfiles } from "../../../hooks/wallets/useProfiles.js";
+import { LinkedProfilesScreen } from "./LinkedProfilesScreen.jsx";
+
+// Mock the hooks
+vi.mock("../../../hooks/wallets/useProfiles");
+vi.mock("../../../../core/social/useSocialProfiles");
+vi.mock("../../components/Img", () => ({
+  Img: () => <div data-testid="mock-img">Mock Image</div>,
+}));
+
+describe("LinkedProfilesScreen", () => {
+  const mockClient = {
+    clientId: "test-client-id",
+    secretKey: undefined,
+  };
+
+  const mockProps = {
+    onBack: vi.fn(),
+    setScreen: vi.fn(),
+    locale: {
+      manageWallet: {
+        linkedProfiles: "Linked Profiles",
+        linkProfile: "Link Profile",
+      },
+      // biome-ignore lint/suspicious/noExplicitAny: Mocking data
+    } as any,
+    client: mockClient,
+  };
+
+  beforeEach(() => {
+    vi.mocked(useSocialProfiles).mockReturnValue({
+      data: undefined,
+      isLoading: false,
+      // biome-ignore lint/suspicious/noExplicitAny: Mocking data
+    } as any);
+  });
+
+  describe("getProfileDisplayName", () => {
+    it("should display email for email profile type", () => {
+      vi.mocked(useProfiles).mockReturnValue({
+        data: [{ type: "email", details: { email: "test@example.com" } }],
+        isLoading: false,
+        // biome-ignore lint/suspicious/noExplicitAny: Mocking data
+      } as any);
+
+      render(<LinkedProfilesScreen {...mockProps} />);
+      expect(screen.getByText("test@example.com")).toBeInTheDocument();
+    });
+
+    it("should display email for google profile type", () => {
+      vi.mocked(useProfiles).mockReturnValue({
+        data: [{ type: "google", details: { email: "google@example.com" } }],
+        isLoading: false,
+        // biome-ignore lint/suspicious/noExplicitAny: Mocking data
+      } as any);
+
+      render(<LinkedProfilesScreen {...mockProps} />);
+      expect(screen.getByText("google@example.com")).toBeInTheDocument();
+    });
+
+    it("should display phone number for phone profile type", () => {
+      vi.mocked(useProfiles).mockReturnValue({
+        data: [{ type: "phone", details: { phone: "+1234567890" } }],
+        isLoading: false,
+        // biome-ignore lint/suspicious/noExplicitAny: Mocking data
+      } as any);
+
+      render(<LinkedProfilesScreen {...mockProps} />);
+      expect(screen.getByText("+1234567890")).toBeInTheDocument();
+    });
+
+    it("should display shortened address when address is present", () => {
+      vi.mocked(useProfiles).mockReturnValue({
+        data: [
+          {
+            type: "wallet",
+            details: { address: "0x1234567890abcdef1234567890abcdef12345678" },
+          },
+        ],
+        isLoading: false,
+        // biome-ignore lint/suspicious/noExplicitAny: Mocking data
+      } as any);
+
+      render(<LinkedProfilesScreen {...mockProps} />);
+      expect(screen.getByText("0x123456...345678")).toBeInTheDocument();
+    });
+
+    it("should display email for cognito profile type", () => {
+      vi.mocked(useProfiles).mockReturnValue({
+        data: [{ type: "cognito", details: { email: "cognito@example.com" } }],
+        isLoading: false,
+        // biome-ignore lint/suspicious/noExplicitAny: Mocking data
+      } as any);
+
+      render(<LinkedProfilesScreen {...mockProps} />);
+      expect(screen.getByText("cognito@example.com")).toBeInTheDocument();
+    });
+
+    it("should display Custom Profile for custom_auth_endpoint", () => {
+      vi.mocked(useProfiles).mockReturnValue({
+        data: [{ type: "Custom_auth_endpoint", details: {} }],
+        isLoading: false,
+        // biome-ignore lint/suspicious/noExplicitAny: Mocking data
+      } as any);
+
+      render(<LinkedProfilesScreen {...mockProps} />);
+      expect(screen.getByText("Custom Profile")).toBeInTheDocument();
+    });
+
+    it("should capitalize unknown profile types", () => {
+      vi.mocked(useProfiles).mockReturnValue({
+        data: [{ type: "unknown", details: {} }],
+        isLoading: false,
+        // biome-ignore lint/suspicious/noExplicitAny: Mocking data
+      } as any);
+
+      render(<LinkedProfilesScreen {...mockProps} />);
+      expect(screen.getByText("Unknown")).toBeInTheDocument();
+    });
+
+    it("should not display guest profiles", () => {
+      vi.mocked(useProfiles).mockReturnValue({
+        data: [{ type: "guest", details: {} }],
+        isLoading: false,
+        // biome-ignore lint/suspicious/noExplicitAny: Mocking data
+      } as any);
+
+      render(<LinkedProfilesScreen {...mockProps} />);
+      expect(screen.queryByText("Guest")).not.toBeInTheDocument();
+    });
+  });
+});

package/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.tsx

@@ -33,6 +33,8 @@ function getProfileDisplayName(profile: Profile) {
     case (profile.type as string) === "cognito" &&
       profile.details.email !== undefined:
       return profile.details.email;
+    case (profile.type as string).toLowerCase() === "custom_auth_endpoint":
+      return "Custom Profile";
     default:
       return profile.type.slice(0, 1).toUpperCase() + profile.type.slice(1);
   }

package/src/react/web/ui/prebuilt/Account/avatar.tsx

@@ -164,7 +164,12 @@ export function AccountAvatar({
 }: AccountAvatarProps) {
   const { address, client } = useAccountContext();
   const avatarQuery = useQuery({
-    queryKey: ["account-avatar", address],
+    queryKey: [
+      "account-avatar",
+      address,
+      { socialType },
+      { resolverAddress, resolverChain },
+    ],
     queryFn: async (): Promise<string> => {
       const [socialData, ensName] = await Promise.all([
         getSocialProfiles({ address, client }),

package/src/react/web/ui/prebuilt/Account/blobbie.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Blobbie, type BlobbieProps } from "../../ConnectWallet/Blobbie.js";
 import { useAccountContext } from "./provider.js";