Connect UI context cleanup (#2761)

Author: MananTank

.changeset/light-llamas-chew.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Connect UI context code cleanup

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

@@ -3,7 +3,7 @@ import {
   type GetWalletBalanceOptions,
   getWalletBalance,
 } from "../../../../wallets/utils/getWalletBalance.js";
-import { useWalletConnectionCtx } from "./useWalletConnectionCtx.js";
+import { useConnectUI } from "./useWalletConnectionCtx.js";
 
 /**
  * Custom hook to fetch the balance of a wallet for a specific token.
@@ -15,7 +15,7 @@ export function useWalletBalance(
   options: Omit<Partial<GetWalletBalanceOptions>, "client">,
 ) {
   const { chain, address, tokenAddress } = options;
-  const { client } = useWalletConnectionCtx();
+  const { client } = useConnectUI();
   const query = queryOptions({
     queryKey: [
       "walletBalance",

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

@@ -1,14 +1,14 @@
 import { useContext } from "react";
-import { WalletConnectionContext } from "../../providers/wallet-connection.js";
+import { ConnectUIContext } from "../../providers/wallet-connection.js";
 
 /**
  * @internal
  */
-export function useWalletConnectionCtx() {
-  const val = useContext(WalletConnectionContext);
+export function useConnectUI() {
+  const val = useContext(ConnectUIContext);
   if (!val) {
     throw new Error(
-      "useWalletConnectionCtx must be used within a <ConnectWallet /> or <AutoConnect /> component.",
+      "useConnectUI must be used within a <ConnectButton /> or <ConnectEmbed />",
     );
   }
   return val;

packages/thirdweb/src/react/core/providers/wallet-connection.tsx

@@ -1,13 +1,14 @@
 import { createContext } from "react";
 import type { Chain } from "../../../chains/types.js";
 import type { ThirdwebClient } from "../../../client/client.js";
+import type { ConnectButton_connectModalOptions } from "../../../exports/react.js";
 import type { Wallet } from "../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../wallets/types.js";
 import type { ConnectLocale } from "../../web/ui/ConnectWallet/locale/types.js";
 import type { LocaleId } from "../../web/ui/types.js";
 
-export const WalletConnectionContext = /* @__PURE__ */ createContext<{
+export const ConnectUIContext = /* @__PURE__ */ createContext<{
   wallets: Wallet[];
   client: ThirdwebClient;
   chain?: Chain;
@@ -21,4 +22,9 @@ export const WalletConnectionContext = /* @__PURE__ */ createContext<{
   };
   accountAbstraction?: SmartWalletOptions;
   showAllWallets?: boolean;
+  onConnect?: (wallet: Wallet) => void;
+  isEmbed: boolean;
+  connectModal: Omit<ConnectButton_connectModalOptions, "size"> & {
+    size: "compact" | "wide";
+  };
 } | null>(null);