thirdweb 5.86.7-nightly-f5f8a40320d5d768d5866813f53ee4880bdf7851-20250129000319 → 5.87.1

package/src/react/native/ui/prebuilt/Wallet/name.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import type { UseQueryOptions } from "@tanstack/react-query";
+import { Text, type TextProps } from "react-native";
+import { useWalletName } from "../../../../core/utils/walletname.js";
+/**
+ * Props for the WalletName component
+ * @component
+ * @wallet
+ */
+export interface WalletNameProps extends Omit<TextProps, "children"> {
+  /**
+   * This component will be shown while the name of the wallet name is being fetched
+   * If not passed, the component will return `null`.
+   *
+   * You can/should pass a loading sign or spinner to this prop.
+   * @example
+   * ```tsx
+   * <WalletName loadingComponent={<Spinner />} />
+   * ```
+   */
+  loadingComponent?: React.ComponentType;
+  /**
+   * This component will be shown if the name fails to be retreived
+   * If not passed, the component will return `null`.
+   *
+   * You can/should pass a descriptive text/component to this prop, indicating that the
+   * name was not fetched succesfully
+   * @example
+   * ```tsx
+   * <WalletName fallbackComponent={<span>Failed to load</span>}
+   * />
+   * ```
+   */
+  fallbackComponent?: React.ComponentType;
+  /**
+   * Optional `useQuery` params
+   */
+  queryOptions?: Omit<UseQueryOptions<string>, "queryFn" | "queryKey">;
+  /**
+   * A function to format the name's display value
+   * ```tsx
+   * <WalletName formatFn={(str: string) => doSomething()} />
+   * ```
+   */
+  formatFn?: (str: string) => string;
+}
+
+/**
+ * This component fetches then shows the name of a wallet.
+ * It inherits all the attributes of a HTML <span> component, hence you can style it just like how you would style a normal <span>
+ *
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { WalletProvider, WalletName } from "thirdweb/react";
+ *
+ * <WalletProvider id="io.metamask">
+ *   <WalletName  />
+ * </WalletProvider>
+ * ```
+ * Result:
+ * ```html
+ * <span>MetaMask</span>
+ * ```
+ *
+ * ### Show a loading sign when the name is being fetched
+ * ```tsx
+ * import { WalletProvider, WalletName } from "thirdweb/react";
+ *
+ * <WalletProvider {...props}>
+ *   <WalletName loadingComponent={<Spinner />} />
+ * </WalletProvider>
+ * ```
+ *
+ * ### Fallback to something when the name fails to resolve
+ * ```tsx
+ * <WalletProvider {...props}>
+ *   <WalletName fallbackComponent={<span>Failed to load</span>} />
+ * </WalletProvider>
+ * ```
+ *
+ * ### Custom query options for useQuery
+ * This component uses `@tanstack-query`'s useQuery internally.
+ * You can use the `queryOptions` prop for more fine-grained control
+ * ```tsx
+ * <WalletName
+ *   queryOptions={{
+ *     enabled: isEnabled,
+ *     retry: 4,
+ *   }}
+ * />
+ * @component
+ * @beta
+ * @wallet
+ */
+export function WalletName({
+  loadingComponent,
+  fallbackComponent,
+  queryOptions,
+  formatFn,
+  ...restProps
+}: WalletNameProps) {
+  const nameQuery = useWalletName({ queryOptions, formatFn });
+  if (nameQuery.isLoading) {
+    return loadingComponent || null;
+  }
+  if (!nameQuery.data) {
+    return fallbackComponent || null;
+  }
+  return <Text {...restProps}>{nameQuery.data}</Text>;
+}

package/src/react/web/ui/ConnectWallet/Blobbie.tsx

@@ -1,24 +1,7 @@
 "use client";
 import { hexToNumber } from "@noble/curves/abstract/utils";
 import { useId, useMemo } from "react";
-
-const COLOR_OPTIONS = [
-  ["#fca5a5", "#b91c1c"],
-  ["#fdba74", "#c2410c"],
-  ["#fcd34d", "#b45309"],
-  ["#fde047", "#a16207"],
-  ["#a3e635", "#4d7c0f"],
-  ["#86efac", "#15803d"],
-  ["#67e8f9", "#0e7490"],
-  ["#7dd3fc", "#0369a1"],
-  ["#93c5fd", "#1d4ed8"],
-  ["#a5b4fc", "#4338ca"],
-  ["#c4b5fd", "#6d28d9"],
-  ["#d8b4fe", "#7e22ce"],
-  ["#f0abfc", "#a21caf"],
-  ["#f9a8d4", "#be185d"],
-  ["#fda4af", "#be123c"],
-];
+import { COLOR_OPTIONS } from "../../../core/utils/account.js";
 
 /**
  * Props for the Blobbie component

package/src/react/web/ui/ConnectWallet/ConnectButton.tsx

@@ -3,6 +3,7 @@
 import styled from "@emotion/styled";
 import { useEffect, useMemo, useState } from "react";
 import { getDefaultWallets } from "../../../../wallets/defaultWallets.js";
+import { AccountProvider } from "../../../core/account/provider.js";
 import { iconSize } from "../../../core/design-system/index.js";
 import { useSiweAuth } from "../../../core/hooks/auth/useSiweAuth.js";
 import type { ConnectButtonProps } from "../../../core/hooks/connection/ConnectButtonProps.js";
@@ -23,7 +24,6 @@ import { Spinner } from "../components/Spinner.js";
 import { Container } from "../components/basic.js";
 import { Button } from "../components/buttons.js";
 import { fadeInAnimation } from "../design-system/animations.js";
-import { AccountProvider } from "../prebuilt/Account/provider.js";
 import { ConnectedWalletDetails } from "./Details.js";
 import ConnectModal from "./Modal/ConnectModal.js";
 import { LockIcon } from "./icons/LockIcon.js";

package/src/react/web/ui/ConnectWallet/Details.test.tsx

@@ -14,8 +14,8 @@ import { base } from "../../../../chains/chain-definitions/base.js";
 import { ethereum } from "../../../../chains/chain-definitions/ethereum.js";
 import { useActiveAccount } from "../../../../react/core/hooks/wallets/useActiveAccount.js";
 import { useActiveWalletChain } from "../../../../react/core/hooks/wallets/useActiveWalletChain.js";
+import { AccountProvider } from "../../../core/account/provider.js";
 import { ThirdwebProvider } from "../../providers/thirdweb-provider.js";
-import { AccountProvider } from "../prebuilt/Account/provider.js";
 import {
   ConnectedToSmartWallet,
   ConnectedWalletDetails,

package/src/react/web/ui/ConnectWallet/Details.tsx

@@ -40,6 +40,7 @@ import type {
   EcosystemWalletId,
   WalletId,
 } from "../../../../wallets/wallet-types.js";
+import { AccountProvider } from "../../../core/account/provider.js";
 import {
   CustomThemeProvider,
   parseTheme,
@@ -67,6 +68,11 @@ import { useAdminWallet } from "../../../core/hooks/wallets/useAdminWallet.js";
 import { useDisconnect } from "../../../core/hooks/wallets/useDisconnect.js";
 import { useSwitchActiveWalletChain } from "../../../core/hooks/wallets/useSwitchActiveWalletChain.js";
 import { SetRootElementContext } from "../../../core/providers/RootElementContext.js";
+import {
+  type AccountBalanceInfo,
+  formatAccountFiatBalance,
+  formatAccountTokenBalance,
+} from "../../../core/utils/account.js";
 import type {
   SupportedNFTs,
   SupportedTokens,
@@ -91,15 +97,9 @@ import { fadeInAnimation } from "../design-system/animations.js";
 import { StyledButton } from "../design-system/elements.js";
 import { AccountAddress } from "../prebuilt/Account/address.js";
 import { AccountAvatar } from "../prebuilt/Account/avatar.js";
-import {
-  AccountBalance,
-  type AccountBalanceInfo,
-  formatAccountFiatBalance,
-  formatAccountTokenBalance,
-} from "../prebuilt/Account/balance.js";
+import { AccountBalance } from "../prebuilt/Account/balance.js";
 import { AccountBlobbie } from "../prebuilt/Account/blobbie.js";
 import { AccountName } from "../prebuilt/Account/name.js";
-import { AccountProvider } from "../prebuilt/Account/provider.js";
 import { ChainIcon } from "../prebuilt/Chain/icon.js";
 import { ChainName } from "../prebuilt/Chain/name.js";
 import { ChainProvider } from "../prebuilt/Chain/provider.js";

package/src/react/web/ui/prebuilt/Account/address.test.tsx

@@ -2,8 +2,8 @@ import { describe, expect, it } from "vitest";
 import { render, screen, waitFor } from "~test/react-render.js";
 import { TEST_CLIENT } from "~test/test-clients.js";
 import { shortenAddress } from "../../../../../utils/address.js";
+import { AccountProvider } from "../../../../core/account/provider.js";
 import { AccountAddress } from "./address.js";
-import { AccountProvider } from "./provider.js";
 
 describe.runIf(process.env.TW_SECRET_KEY)("AccountAddress component", () => {
   it("should format the address properly", () => {

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useAccountContext } from "./provider.js";
+import { useAccountContext } from "../../../../core/account/provider.js";
 
 /**
  * @component

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

@@ -2,8 +2,8 @@ import { describe, expect, it } from "vitest";
 import { render, screen, waitFor } from "~test/react-render.js";
 import { TEST_CLIENT } from "~test/test-clients.js";
 import { TEST_ACCOUNT_A } from "~test/test-wallets.js";
+import { AccountProvider } from "../../../../core/account/provider.js";
 import { AccountAvatar } from "./avatar.js";
-import { AccountProvider } from "./provider.js";
 
 describe.runIf(process.env.TW_SECRET_KEY)("AccountAvatar component", () => {
   it("should render an image", () => {

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

@@ -11,8 +11,7 @@ import {
 import { getSocialProfiles } from "../../../../../social/profiles.js";
 import type { SocialProfile } from "../../../../../social/types.js";
 import { parseAvatarRecord } from "../../../../../utils/ens/avatar.js";
-import { useAccountContext } from "./provider.js";
-
+import { useAccountContext } from "../../../../core/account/provider.js";
 /**
  * Props for the AccountAvatar component
  * @component

package/src/react/web/ui/prebuilt/Account/balance.test.tsx

@@ -7,13 +7,13 @@ import { ethereum } from "../../../../../chains/chain-definitions/ethereum.js";
 import { sepolia } from "../../../../../chains/chain-definitions/sepolia.js";
 import { defineChain } from "../../../../../chains/utils.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../constants/addresses.js";
+import { AccountProvider } from "../../../../core/account/provider.js";
 import {
-  AccountBalance,
   formatAccountFiatBalance,
   formatAccountTokenBalance,
   loadAccountBalance,
-} from "./balance.js";
-import { AccountProvider } from "./provider.js";
+} from "../../../../core/utils/account.js";
+import { AccountBalance } from "./balance.js";
 
 const queryClient = new QueryClient();
 
@@ -95,7 +95,8 @@ describe.runIf(process.env.TW_SECRET_KEY)("AccountBalance component", () => {
     await expect(() =>
       loadAccountBalance({
         client: TEST_CLIENT,
-        address: "haha",
+        // biome-ignore lint/suspicious/noExplicitAny: for the test
+        address: "haha" as any,
         chain: ethereum,
       }),
     ).rejects.toThrowError("Invalid wallet address. Expected an EVM address");
@@ -106,7 +107,8 @@ describe.runIf(process.env.TW_SECRET_KEY)("AccountBalance component", () => {
       loadAccountBalance({
         client: TEST_CLIENT,
         address: VITALIK_WALLET,
-        tokenAddress: "haha",
+        // biome-ignore lint/suspicious/noExplicitAny: for the test
+        tokenAddress: "haha" as any,
         chain: ethereum,
       }),
     ).rejects.toThrowError(

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

@@ -1,35 +1,19 @@
 "use client";
 
 import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
-import type { Address } from "abitype";
 import type React from "react";
 import type { JSX } from "react";
 import type { Chain } from "../../../../../chains/types.js";
-import type { ThirdwebClient } from "../../../../../client/client.js";
-import { NATIVE_TOKEN_ADDRESS } from "../../../../../constants/addresses.js";
-import { convertCryptoToFiat } from "../../../../../exports/pay.js";
 import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
 import { useActiveWalletChain } from "../../../../../react/core/hooks/wallets/useActiveWalletChain.js";
-import { isAddress } from "../../../../../utils/address.js";
-import { formatNumber } from "../../../../../utils/formatNumber.js";
-import { shortenLargeNumber } from "../../../../../utils/shortenLargeNumber.js";
-import { getWalletBalance } from "../../../../../wallets/utils/getWalletBalance.js";
-import { useAccountContext } from "./provider.js";
-
-/**
- * @component
- * @wallet
- */
-export type AccountBalanceInfo = {
-  /**
-   * Represents either token balance or fiat balance.
-   */
-  balance: number;
-  /**
-   * Represents either token symbol or fiat symbol
-   */
-  symbol: string;
-};
+import { getAddress } from "../../../../../utils/address.js";
+import { useAccountContext } from "../../../../core/account/provider.js";
+import {
+  type AccountBalanceInfo,
+  formatAccountFiatBalance,
+  loadAccountBalance,
+} from "../../../../core/utils/account.js";
+import { formatAccountTokenBalance } from "../../../../core/utils/account.js";
 
 /**
  * Props for the AccountBalance component
@@ -199,8 +183,8 @@ export function AccountBalance({
       loadAccountBalance({
         chain: chainToLoad,
         client,
-        address,
-        tokenAddress,
+        address: getAddress(address),
+        tokenAddress: tokenAddress ? getAddress(tokenAddress) : undefined,
         showBalanceInFiat,
       }),
     retry: false,
@@ -237,107 +221,3 @@ export function AccountBalance({
     </span>
   );
 }
-
-/**
- * @internal Exported for tests
- */
-export async function loadAccountBalance(props: {
-  chain?: Chain;
-  client: ThirdwebClient;
-  address: Address;
-  tokenAddress?: Address;
-  showBalanceInFiat?: SupportedFiatCurrency;
-}): Promise<AccountBalanceInfo> {
-  const { chain, client, address, tokenAddress, showBalanceInFiat } = props;
-  if (!chain) {
-    throw new Error("chain is required");
-  }
-
-  if (
-    tokenAddress &&
-    tokenAddress?.toLowerCase() === NATIVE_TOKEN_ADDRESS.toLowerCase()
-  ) {
-    throw new Error(`Invalid tokenAddress - cannot be ${NATIVE_TOKEN_ADDRESS}`);
-  }
-
-  if (!isAddress(address)) {
-    throw new Error("Invalid wallet address. Expected an EVM address");
-  }
-
-  if (tokenAddress && !isAddress(tokenAddress)) {
-    throw new Error("Invalid tokenAddress. Expected an EVM contract address");
-  }
-
-  const tokenBalanceData = await getWalletBalance({
-    chain,
-    client,
-    address,
-    tokenAddress,
-  }).catch(() => undefined);
-
-  if (!tokenBalanceData) {
-    throw new Error(
-      `Failed to retrieve ${tokenAddress ? `token: ${tokenAddress}` : "native token"} balance for address: ${address} on chainId:${chain.id}`,
-    );
-  }
-
-  if (showBalanceInFiat) {
-    const fiatData = await convertCryptoToFiat({
-      fromAmount: Number(tokenBalanceData.displayValue),
-      fromTokenAddress: tokenAddress || NATIVE_TOKEN_ADDRESS,
-      to: showBalanceInFiat,
-      chain,
-      client,
-    }).catch(() => undefined);
-
-    if (fiatData === undefined) {
-      throw new Error(
-        `Failed to resolve fiat value for ${tokenAddress ? `token: ${tokenAddress}` : "native token"} on chainId: ${chain.id}`,
-      );
-    }
-    return {
-      balance: fiatData?.result,
-      symbol:
-        new Intl.NumberFormat("en", {
-          style: "currency",
-          currency: showBalanceInFiat,
-          minimumFractionDigits: 0,
-          maximumFractionDigits: 0,
-        })
-          .formatToParts(0)
-          .find((p) => p.type === "currency")?.value ||
-        showBalanceInFiat.toUpperCase(),
-    };
-  }
-
-  return {
-    balance: Number(tokenBalanceData.displayValue),
-    symbol: tokenBalanceData.symbol,
-  };
-}
-
-/**
- * Format the display balance for both crypto and fiat, in the Details button and Modal
- * If both crypto balance and fiat balance exist, we have to keep the string very short to avoid UI issues.
- * @internal
- * Used internally for the Details button and the Details Modal
- */
-export function formatAccountTokenBalance(
-  props: AccountBalanceInfo & { decimals: number },
-): string {
-  const formattedTokenBalance = formatNumber(props.balance, props.decimals);
-  return `${formattedTokenBalance} ${props.symbol}`;
-}
-
-/**
- * Used internally for the Details button and Details Modal
- * @internal
- */
-export function formatAccountFiatBalance(
-  props: AccountBalanceInfo & { decimals: number },
-) {
-  const num = formatNumber(props.balance, props.decimals);
-  // Need to keep them short to avoid UI overflow issues
-  const formattedFiatBalance = shortenLargeNumber(num);
-  return `${props.symbol}${formattedFiatBalance}`;
-}

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

@@ -1,7 +1,7 @@
 "use client";
 
+import { useAccountContext } from "../../../../core/account/provider.js";
 import { Blobbie, type BlobbieProps } from "../../ConnectWallet/Blobbie.js";
-import { useAccountContext } from "./provider.js";
 
 /**
  * A wrapper for the Blobbie component

package/src/react/web/ui/prebuilt/Account/name.test.tsx

@@ -1,8 +1,8 @@
 import { describe, expect, it } from "vitest";
 import { render, screen, waitFor } from "~test/react-render.js";
 import { TEST_CLIENT } from "~test/test-clients.js";
+import { AccountProvider } from "../../../../core/account/provider.js";
 import { AccountName } from "./name.js";
-import { AccountProvider } from "./provider.js";
 
 describe.runIf(process.env.TW_SECRET_KEY)("AccountName component", () => {
   it("should return the correct social name", () => {

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

@@ -9,7 +9,7 @@ import {
 } from "../../../../../extensions/ens/resolve-name.js";
 import { getSocialProfiles } from "../../../../../social/profiles.js";
 import type { SocialProfile } from "../../../../../social/types.js";
-import { useAccountContext } from "./provider.js";
+import { useAccountContext } from "../../../../core/account/provider.js";
 
 /**
  * Props for the AccountName component

package/src/react/web/ui/prebuilt/Wallet/icon.test.tsx

@@ -1,7 +1,8 @@
 import { describe, expect, it } from "vitest";
 import { render, waitFor } from "~test/react-render.js";
-import { SocialIcon, WalletIcon, fetchWalletImage } from "./icon.js";
-import { WalletProvider } from "./provider.js";
+import { fetchWalletImage } from "../../../../core/utils/walletIcon.js";
+import { WalletProvider } from "../../../../core/wallet/provider.js";
+import { SocialIcon, WalletIcon } from "./icon.js";
 
 describe("WalletIcon", () => {
   it("should fetch wallet image", async () => {

package/src/react/web/ui/prebuilt/Wallet/icon.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
+import type { UseQueryOptions } from "@tanstack/react-query";
 import type { JSX } from "react";
-import { getWalletInfo } from "../../../../../wallets/__generated__/getWalletInfo.js";
 import type { AuthOption } from "../../../../../wallets/types.js";
-import type { WalletId } from "../../../../../wallets/wallet-types.js";
-import { getSocialIcon } from "../../../../core/utils/walletIcon.js";
-import { useWalletContext } from "./provider.js";
+import {
+  getSocialIcon,
+  useWalletIcon,
+} from "../../../../core/utils/walletIcon.js";
 
 export interface WalletIconProps
   extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src"> {
@@ -96,31 +96,7 @@ export function WalletIcon({
   return <img src={imageQuery.data} {...restProps} alt={restProps.alt} />;
 }
 
-/**
- * @internal
- */
-function useWalletIcon(props: {
-  queryOptions?: Omit<UseQueryOptions<string>, "queryFn" | "queryKey">;
-}) {
-  const { id } = useWalletContext();
-  const imageQuery = useQuery({
-    queryKey: ["walletIcon", id],
-    queryFn: async () => fetchWalletImage({ id }),
-    ...props.queryOptions,
-  });
-  return imageQuery;
-}
-
-/**
- * @internal Exported for tests only
- */
-export async function fetchWalletImage(props: {
-  id: WalletId;
-}) {
-  return getWalletInfo(props.id, true);
-}
-
-interface SocialIconProps
+export interface SocialIconProps
   extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src"> {
   provider: AuthOption | string;
 }

package/src/react/web/ui/prebuilt/Wallet/name.test.tsx

@@ -1,8 +1,12 @@
 import { describe, expect, it } from "vitest";
 import { render, waitFor } from "~test/react-render.js";
 import { getFunctionId } from "../../../../../utils/function-id.js";
-import { WalletName, fetchWalletName, getQueryKeys } from "./name.js";
-import { WalletProvider } from "./provider.js";
+import {
+  fetchWalletName,
+  getQueryKeys,
+} from "../../../../core/utils/walletname.js";
+import { WalletProvider } from "../../../../core/wallet/provider.js";
+import { WalletName } from "./name.js";
 
 describe.runIf(process.env.TW_SECRET_KEY)("WalletName", () => {
   it("fetchWalletName: should fetch wallet name from id", async () => {

package/src/react/web/ui/prebuilt/Wallet/name.tsx

@@ -1,11 +1,8 @@
 "use client";
 
-import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
+import type { UseQueryOptions } from "@tanstack/react-query";
 import type { JSX } from "react";
-import { getFunctionId } from "../../../../../utils/function-id.js";
-import { getWalletInfo } from "../../../../../wallets/__generated__/getWalletInfo.js";
-import type { WalletId } from "../../../../../wallets/wallet-types.js";
-import { useWalletContext } from "./provider.js";
+import { useWalletName } from "../../../../core/utils/walletname.js";
 
 /**
  * Props for the WalletName component
@@ -115,50 +112,3 @@ export function WalletName({
   }
   return <span {...restProps}>{nameQuery.data}</span>;
 }
-
-/**
- * @internal
- */
-function useWalletName(props: {
-  formatFn?: (str: string) => string;
-  queryOptions?: Omit<UseQueryOptions<string>, "queryFn" | "queryKey">;
-}) {
-  const { id } = useWalletContext();
-  const nameQuery = useQuery({
-    queryKey: getQueryKeys({ id, formatFn: props.formatFn }),
-    queryFn: async () => fetchWalletName({ id, formatFn: props.formatFn }),
-    ...props.queryOptions,
-  });
-  return nameQuery;
-}
-
-/**
- * @internal Exported for tests only
- */
-export function getQueryKeys(props: {
-  id: WalletId;
-  formatFn?: (str: string) => string;
-}) {
-  if (typeof props.formatFn === "function") {
-    return [
-      "walletName",
-      props.id,
-      { resolver: getFunctionId(props.formatFn) },
-    ] as const;
-  }
-  return ["walletName", props.id] as const;
-}
-
-/**
- * @internal Exported for tests only
- */
-export async function fetchWalletName(props: {
-  id: WalletId;
-  formatFn?: (str: string) => string;
-}) {
-  const info = await getWalletInfo(props.id);
-  if (typeof props.formatFn === "function") {
-    return props.formatFn(info.name);
-  }
-  return info.name;
-}

package/src/utils/shortenLargeNumber.ts

@@ -13,6 +13,9 @@
  * @utils
  */
 export function shortenLargeNumber(value: number) {
+  if (value === 0) {
+    return "0.00";
+  }
   if (value < 1000) {
     return value.toString();
   }

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.86.7-nightly-f5f8a40320d5d768d5866813f53ee4880bdf7851-20250129000319";
+export const version = "5.87.1";

package/src/wallets/manager/index.ts

@@ -24,6 +24,7 @@ export type ConnectionManager = ReturnType<typeof createConnectionManager>;
 export type ConnectManagerOptions = {
   client: ThirdwebClient;
   accountAbstraction?: SmartWalletOptions;
+  setWalletAsActive?: boolean;
   onConnect?: (wallet: Wallet) => void;
 };
 
@@ -146,7 +147,9 @@ export function createConnectionManager(storage: AsyncStorage) {
     // add personal wallet to connected wallets list even if it's not the active one
     addConnectedWallet(wallet);
 
-    handleSetActiveWallet(activeWallet);
+    if (options?.setWalletAsActive !== false) {
+      handleSetActiveWallet(activeWallet);
+    }
 
     wallet.subscribe("accountChanged", async () => {
       // We reimplement connect here to prevent memory leaks

package/dist/cjs/react/web/ui/prebuilt/Account/provider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"provider.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Account/provider.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;AAgDb,0CAaC;AAKD,8CAQC;;AAtED,iCAAkD;AAmBlD,MAAM,sBAAsB,GAAG,eAAe,CAAC,IAAA,qBAAa,EAE1D,SAAS,CAAC,CAAC;AAEb;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAgB,eAAe,CAC7B,KAAoD;IAEpD,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;QACnB,MAAM,IAAI,KAAK,CACb,iGAAiG,CAClG,CAAC;IACJ,CAAC;IACD,OAAO,CACL,uBAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAC1C,KAAK,CAAC,QAAQ,GACiB,CACnC,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,SAAgB,iBAAiB;IAC/B,MAAM,GAAG,GAAG,IAAA,kBAAU,EAAC,sBAAsB,CAAC,CAAC;IAC/C,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CACb,oIAAoI,CACrI,CAAC;IACJ,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC"}

package/dist/cjs/react/web/ui/prebuilt/Wallet/provider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"provider.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Wallet/provider.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;AA0Cb,wCAQC;AAKD,4CAQC;;AA5DD,iCAAkD;AAYlD;;GAEG;AACU,QAAA,qBAAqB,GAAmB,IAAA,qBAAa,EAEhE,SAAS,CAAC,CAAC;AAEb;;;;;;;;;;;;;;;;;;;GAmBG;AACH,SAAgB,cAAc,CAC5B,KAAmD;IAEnD,OAAO,CACL,uBAAC,6BAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACzC,KAAK,CAAC,QAAQ,GACgB,CAClC,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,SAAgB,gBAAgB;IAC9B,MAAM,GAAG,GAAG,IAAA,kBAAU,EAAC,6BAAqB,CAAC,CAAC;IAC9C,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CACb,6HAA6H,CAC9H,CAAC;IACJ,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC"}