@berachain/wagmi 0.4.2-beta.3 → 0.4.2-beta.5

package/src/context/BeraWagmiLightWeight.tsx

@@ -1,15 +1,8 @@
-import { type PropsWithChildren, useContext, useMemo } from "react";
+import { type PropsWithChildren, useMemo } from "react";
 import useSWRImmutable from "swr/immutable";
-import type {
-  MultiStepAuthArgsType,
-  Profile,
-  SingleStepAuthArgsType,
-  Wallet,
-} from "thirdweb/wallets";
 import type { Address, Chain } from "viem";
 import { normalize } from "viem/ens";
 import {
-  type UseWalletClientReturnType,
   useAccount,
   useDisconnect,
   useEnsAvatar,
@@ -19,151 +12,40 @@ import {
 } from "wagmi";
 
 import type { getConfig, ThirdwebConfig } from "../config";
+import type { BeraWagmiApi } from "./BeraWagmi";
 import { BeraWagmiContext } from "./beraWagmiContext";
 import { LightweightAccountProvider } from "./LightweightAccountProvider";
-import { useThirdwebLightWeight } from "./useThirdwebLightWeight";
+import type { UseThirdwebBaseResult } from "./useThirdwebLightWeight";
 
-export function useBeraWagmi() {
-  const context = useContext(BeraWagmiContext);
-  if (!context) {
-    throw new Error("BeraWagmiContext not found");
-  }
-  return context;
-}
-export interface BeraWagmiApi {
-  /**
-   * @deprecated used for prototyping only.
-   */
-  DebugConnectButton(): React.ReactNode;
-  /**
-   * Account connected to berachain dapp. It might include some additional data once embedded wallets are enabled.
-   */
-  account:
-    | {
-        /**
-         * Chain ID to which the wallet provider is currently connected to.
-         */
-        chainId: number;
-        /**
-         * Whether the wallet is an embedded wallet.
-         */
-        isEmbeddedWallet: boolean;
-        connectorName: string | null;
-        connectionId: string;
-        profiles: Profile[] | undefined;
-        /**
-         * Wallet to display.
-         *
-         * This might be manually overridden by the accountOverride prop, thus not being the same as the connected wallet.
-         */
-        wallet:
-          | {
-              address: Address;
-              /**
-               * ENS name of the wallet.
-               */
-              ensName: string | null;
-              /**
-               * ENS avatar of the wallet.
-               */
-              ensAvatar: string | null;
-              /**
-               * Whether the wallet has 7702 authorization.
-               */
-              has7702Authorization: boolean;
-              /**
-               * Whether the wallet is a contract.
-               */
-              isContract: boolean;
-            }
-          | undefined;
-      }
-    | undefined;
-  isEmbeddedWalletsEnabled: boolean;
-  isConnected: boolean;
-  isConnecting: boolean;
-  flags: {
-    disableEip5792: boolean;
-    disable5792Upgrade: boolean;
-  };
-  walletClient: UseWalletClientReturnType["data"];
-  openConnectModal(): Promise<void> | void;
-  /**
-   * Connects a wallet using a specific strategy.
-   * For email/phone use MultiStepAuthArgsType (requires preAuthenticate first).
-   */
-  connect(
-    args: SingleStepAuthArgsType | MultiStepAuthArgsType,
-  ): Promise<Wallet | null> | undefined;
-  /**
-   * Sends an OTP to the user's email or phone number.
-   * Call this before connect() when using email or phone strategy.
-   */
-  preAuthenticate(
-    args:
-      | { strategy: "email"; email: string }
-      | { strategy: "phone"; phoneNumber: string },
-  ): Promise<void>;
-  disconnect(): void;
-  /**
-   * A callback that is called when a smart account upgrade is rejected.
-   *
-   * This is used to disable EIP-5792 temporarily.
-   */
-  onSmartAccountRejection(): void;
-
-  defaultChainId: ChainId;
-}
-
-export enum ChainId {
-  MAINNET = 80094,
-  BEPOLIA = 80069,
-}
-
-export type ConnectEvent =
-  | { type: "connect"; data: SingleStepAuthArgsType | MultiStepAuthArgsType }
-  | { type: "connect_modal" };
-
-export interface IBeraWagmiProviderProps extends PropsWithChildren {
+export interface IBeraWagmiProviderBaseProps extends PropsWithChildren {
   config: ReturnType<typeof getConfig>;
-  theme?: "dark" | "light" | "auto";
   flags?: {
     disableEip5792?: boolean;
-    /**
-     * Whether to disable the 5792 upgrade for users that haven't upgraded yet.
-     *
-     * `atomic.status === "ready"`
-     */
     disable5792Upgrade?: boolean;
-    /**
-     * A value that mocks the connected wallet address, while transactions are still sent from the connected wallet.
-     * It can be used for advanced use cases like sending permissionless transactions (like incentive claims).
-     */
     accountOverride?: Address;
   };
   onSmartAccountRejection?: () => void;
-  onConnect?: (event: ConnectEvent) => void;
-  onConnectError?: (error: Error) => void;
-  chains?: Chain[];
   defaultChain: Chain;
   thirdweb: ThirdwebConfig;
-  publicJsonRpcUrl?: string;
+  /** The thirdweb hook result — lightweight or full. */
+  thirdwebResult: UseThirdwebBaseResult;
+  /** Provided by the full variant; lightweight stubs these. */
+  openConnectModal?: BeraWagmiApi["openConnectModal"];
+  DebugConnectButton?: BeraWagmiApi["DebugConnectButton"];
 }
 
-export function BeraWagmiProvider({
+/**
+ * Base provider that wires up the BeraWagmiContext.
+ * Both the lightweight and full WagmiProviders render this.
+ */
+export function BeraWagmiProviderBase({
   children,
   config,
   flags: { disableEip5792, disable5792Upgrade, accountOverride } = {},
-  theme,
   onSmartAccountRejection,
-  chains = [],
   defaultChain,
   thirdweb,
-  publicJsonRpcUrl,
-  onConnect,
-  onConnectError,
-}: IBeraWagmiProviderProps) {
-  const {
+  thirdwebResult: {
     wallet,
     connect,
     connectionId,
@@ -173,25 +55,17 @@ export function BeraWagmiProvider({
     profiles,
     preAuthenticate,
     isConnecting,
-  } = useThirdwebLightWeight({
-    config,
-    theme,
-    chains,
-    chain: defaultChain,
-    publicJsonRpcUrl,
-    onConnect,
-    onConnectError,
-  });
-
-  const { address: connectedAddress, chainId } = useAccount(); // wagmi
+  },
+  openConnectModal,
+  DebugConnectButton,
+}: IBeraWagmiProviderBaseProps) {
+  const { address: connectedAddress, chainId } = useAccount();
 
   const { disconnect: disconnectWagmi } = useDisconnect();
   const publicClient = usePublicClient();
 
   const address = useMemo<Address | undefined>(() => {
-    // no address anyway if no connected address
     if (!connectedAddress || !wallet) return undefined;
-
     return accountOverride ?? connectedAddress;
   }, [accountOverride, connectedAddress, wallet]);
 
@@ -213,18 +87,14 @@ export function BeraWagmiProvider({
     },
   );
   const [isContract, has7702Authorization] = useMemo(() => {
-    if (!code)
-      // if no code, it's not a contract or has 7702 authorization
-      return [false, false];
+    if (!code) return [false, false];
 
     const has7702Authorization = code.startsWith("0xef01");
 
     if (has7702Authorization) {
-      // if has 7702 authorization, it's not a contract
       return [false, true];
     }
 
-    // if doesn't have 7702 authorization but has code, it's a contract
     return [true, false];
   }, [code]);
 
@@ -232,11 +102,10 @@ export function BeraWagmiProvider({
 
   const normalizedEns = useMemo(() => {
     try {
-      // some characters might throw an error when normalizing
-      // for instance `_` throws an error (e.g. `bera_boy`)
       return ens ? normalize(ens) : undefined;
     } catch {
-      // not catching the error here, just returning undefined
+      // some characters might throw an error when normalizing
+      // for instance `_` throws an error (e.g. `bera_boy`)
       // @see https://berachain-dapps.sentry.io/issues/6949741717/?alert_rule_id=16379160&alert_type=issue&notification_uuid=b01366a6-78b0-4348-a3c1-5f76ced1d539&project=4509842561630209
     }
   }, [ens]);
@@ -259,13 +128,12 @@ export function BeraWagmiProvider({
         },
         isEmbeddedWalletsEnabled: thirdweb.embeddedWallets ?? true,
         isConnecting,
-        isConnected:
-          !!address &&
-          // this seems obvious but might fix some re-render issues.
-          !!walletClient,
-        DebugConnectButton() {
-          return null;
-        },
+        isConnected: !!address && !!walletClient,
+        DebugConnectButton:
+          DebugConnectButton ??
+          (() => {
+            return null;
+          }),
         account:
           wallet && chainId && address
             ? {
@@ -284,16 +152,17 @@ export function BeraWagmiProvider({
               }
             : undefined,
         connect,
-        openConnectModal() {
-          throw new Error(
-            "openConnectModal is not available in lightweight mode. Use @berachain/wagmi/context/full instead.",
-          );
-        },
+        openConnectModal:
+          openConnectModal ??
+          (() => {
+            throw new Error(
+              "openConnectModal is not available in lightweight mode. Use @berachain/wagmi/context instead.",
+            );
+          }),
         disconnect: () => {
           disconnectWagmi();
           disconnectProvider();
         },
-        // chains,
         defaultChainId: defaultChain.id,
       }}
     >

package/src/context/WagmiProviderLightWeight.tsx

@@ -1,21 +1,33 @@
 "use client";
 
+import type { PropsWithChildren } from "react";
 import { useMemo } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ThirdwebProvider } from "thirdweb/react";
-import type { Chain, Transport } from "viem";
+import type { Address, Chain, Transport } from "viem";
 import { WagmiProvider as WagmiProviderBase } from "wagmi";
 
+import type { ThirdwebConfig } from "../config";
 import { getConfig } from "../config/defaultWagmiConfig";
-import { BeraWagmiProvider, type IBeraWagmiProviderProps } from "./BeraWagmiLightWeight";
+import type { ConnectEvent } from "./BeraWagmi";
+import { BeraWagmiProviderBase } from "./BeraWagmiLightWeight";
+import { useThirdwebLightWeight } from "./useThirdwebLightWeight";
 
-type WagmiProviderProps = Omit<
-  IBeraWagmiProviderProps,
-  "config" | "defaultChain"
-> & {
+type WagmiProviderLightWeightProps = PropsWithChildren<{
   transports?: Record<number, Transport>;
   defaultChain: Chain;
-};
+  chains?: Chain[];
+  thirdweb: ThirdwebConfig;
+  flags?: {
+    disableEip5792?: boolean;
+    disable5792Upgrade?: boolean;
+    accountOverride?: Address;
+  };
+  onSmartAccountRejection?: () => void;
+  onConnect?: (event: ConnectEvent) => void;
+  onConnectError?: (error: Error) => void;
+  publicJsonRpcUrl?: string;
+}>;
 
 const queryClient = new QueryClient();
 
@@ -24,9 +36,12 @@ export function WagmiProvider({
   defaultChain,
   chains,
   thirdweb,
-  ...beraWagmiProps
-}: WagmiProviderProps) {
-  // useMemo to make sure this is initialized only once
+  children,
+  onConnect,
+  onConnectError,
+  publicJsonRpcUrl,
+  ...baseProps
+}: WagmiProviderLightWeightProps) {
   const config = useMemo(() => {
     return getConfig({
       thirdweb,
@@ -36,6 +51,14 @@ export function WagmiProvider({
     });
   }, [defaultChain, thirdweb, transports, chains]);
 
+  const thirdwebResult = useThirdwebLightWeight({
+    config,
+    chain: defaultChain,
+    publicJsonRpcUrl,
+    onConnect,
+    onConnectError,
+  });
+
   return (
     <ThirdwebProvider>
       <WagmiProviderBase
@@ -44,13 +67,15 @@ export function WagmiProvider({
         reconnectOnMount={false}
       >
         <QueryClientProvider client={queryClient}>
-          <BeraWagmiProvider
-            {...beraWagmiProps}
+          <BeraWagmiProviderBase
+            {...baseProps}
             thirdweb={thirdweb}
-            chains={chains}
             defaultChain={defaultChain}
             config={config}
-          />
+            thirdwebResult={thirdwebResult}
+          >
+            {children}
+          </BeraWagmiProviderBase>
         </QueryClientProvider>
       </WagmiProviderBase>
     </ThirdwebProvider>

package/src/context/useThirdweb.tsx

@@ -1,29 +1,16 @@
-import { useMemo } from "react";
-import type { ConnectionOptions } from "@thirdweb-dev/wagmi-adapter";
 import { defineChain } from "thirdweb";
 import {
   ConnectButton,
-  useActiveAccount,
-  useActiveWallet,
-  useAutoConnect,
-  useProfiles,
-  useConnect as useTwConnect,
   useConnectModal as useTwConnectModal,
-  useDisconnect as useTwDisconnect,
-  useWalletInfo,
 } from "thirdweb/react";
-import type {
-  Account,
-  AutoConnectProps,
-  Profile,
-  Wallet,
-} from "thirdweb/wallets";
-import { preAuthenticate } from "thirdweb/wallets/in-app";
 import type { Chain } from "viem";
-import { useConnect } from "wagmi";
 
-import type { getConfig, InAppWallet } from "../config";
+import type { getConfig } from "../config";
 import type { BeraWagmiApi, ConnectEvent } from "./BeraWagmi";
+import {
+  type UseThirdwebBaseResult,
+  useThirdwebLightWeight,
+} from "./useThirdwebLightWeight";
 
 export function useThirdweb({
   config,
@@ -32,7 +19,7 @@ export function useThirdweb({
   chain,
   onConnect,
   onConnectError,
-  publicJsonRpcUrl = chain.rpcUrls.default.http[0],
+  publicJsonRpcUrl,
 }: {
   onConnect?: (event: ConnectEvent) => void;
   onConnectError?: (error: Error) => void;
@@ -41,142 +28,32 @@ export function useThirdweb({
   chains?: Chain[];
   publicJsonRpcUrl?: string;
   chain: Chain;
-}): Pick<
-  BeraWagmiApi,
-  | "connect"
-  | "openConnectModal"
-  | "disconnect"
-  | "isConnecting"
-  | "DebugConnectButton"
-  | "preAuthenticate"
-> & {
-  connectionId: string;
-  connectorName: string | null;
-  isEmbeddedWallet: boolean;
-  wallet: Account | undefined;
-  profiles: Profile[] | undefined;
-} {
-  const { connectors, connect: wagmiConnect } = useConnect();
-
-  const activeWallet = useActiveWallet();
-  const activeAccount = useActiveAccount(); // thirdweb
-  const { disconnect: disconnectThirdweb } = useTwDisconnect();
-  const { data: walletInfo } = useWalletInfo(activeWallet?.id);
-  const { connect: twConnect } = useTwConnect();
-
-  const { data: profiles } = useProfiles({ client: config.client });
-
-  const thirdwebChain = useMemo(
-    () =>
-      defineChain({
-        id: chain.id,
-        blockExplorers: chain.blockExplorers,
-        blockTime: chain.blockTime,
-        ensTlds: chain.ensTlds,
-        testnet: chain.testnet,
-        contracts: chain.contracts,
-        nativeCurrency: chain.nativeCurrency,
-        name: chain.name,
-        rpcUrls: {
-          default: {
-            http: [publicJsonRpcUrl],
-          },
-        },
-      }),
-    [publicJsonRpcUrl, chain],
-  );
-
-  const connectOptions = {
-    client: config.client,
-    chain: thirdwebChain,
-    wallets: config.wallets,
-  } as const satisfies AutoConnectProps;
-
-  async function syncConnectedWallet(wallet: Wallet) {
-    // console.debug("syncConnectedWallet", wallet);
-    // now "connect" the wagmi connector
-    const twConnector = connectors.find((c) => c.id === "in-app-wallet");
-
-    if (twConnector) {
-      const options: ConnectionOptions = {
-        withCapabilities: true,
-        wallet,
-      } as const;
-
-      wagmiConnect({
-        connector: twConnector,
-        chainId: chain.id,
-        ...options,
-      });
-    } else {
-      // captureException is not available here since we don't have shared-ui
-      // however this happens only if wagmi is misconfigured
-      console.error("no tw connector found");
-    }
-  }
-
-  const { isLoading: isAutoConnecting } = useAutoConnect({
-    ...connectOptions,
-    onConnect: syncConnectedWallet,
+}): UseThirdwebBaseResult &
+  Pick<BeraWagmiApi, "openConnectModal" | "DebugConnectButton"> {
+  const base = useThirdwebLightWeight({
+    config,
+    chain,
+    onConnect,
+    onConnectError,
+    publicJsonRpcUrl,
   });
 
-  const connectionId = useMemo(() => {
-    // this might not be available in some environments
-    if ("randomUUID" in crypto) {
-      return crypto.randomUUID();
-    }
-    return Math.random().toString(36).substring(2, 15);
-  }, [activeWallet?.id, activeAccount?.address]);
-
   const { connect: twConnectModal } = useTwConnectModal();
 
   return {
-    connect(args) {
-      if (!config.hasEmbeddedWallets) {
-        console.error(
-          "useBeraWagmi.connect: this function is not available if embedded wallets are disabled",
-        );
-        return;
-      }
-      return twConnect(async () => {
-        // this must be called inside twConnect or it won't work for social login wallets
-        const wallet = config.wallets.find(
-          (w) => w.id === "inApp",
-        ) as InAppWallet;
-
-        if (!wallet) {
-          console.error("useBeraWagmi.connect: no inApp wallet found");
-          throw new Error("no inApp wallet found");
-        }
-
-        return wallet
-          .connect({
-            ...connectOptions,
-            ...args,
-          })
-          .then(async () => {
-            onConnect?.({ type: "connect", data: args });
-            await syncConnectedWallet(wallet);
-            return wallet;
-          })
-          .catch((e) => {
-            onConnectError?.(e);
-            throw e;
-          });
-      });
-    },
+    ...base,
     async openConnectModal() {
       try {
         const wallet = await twConnectModal({
-          ...connectOptions,
+          ...base.connectOptions,
           wallets: config.wallets,
           theme: theme === "auto" ? undefined : theme,
           size: "compact",
           chains: [
-            thirdwebChain,
+            base.thirdwebChain,
             ...chains
               // avoid duplicates
-              .filter((c) => c.id !== thirdwebChain.id)
+              .filter((c) => c.id !== base.thirdwebChain.id)
               .map((c) =>
                 defineChain({
                   id: c.id,
@@ -186,34 +63,20 @@ export function useThirdweb({
         }); // opens the connect modal
 
         onConnect?.({ type: "connect_modal" });
-        await syncConnectedWallet(wallet);
+        await base.syncConnectedWallet(wallet);
       } catch (e) {
         onConnectError?.(e as Error);
         throw e;
       }
     },
-    disconnect() {
-      if (activeWallet) {
-        disconnectThirdweb(activeWallet);
-      }
-    },
-    isConnecting: isAutoConnecting,
-    connectionId,
-    connectorName: walletInfo?.name ?? null,
-    isEmbeddedWallet: walletInfo?.id === "inApp",
-    wallet: activeAccount,
-    profiles,
-    preAuthenticate(args) {
-      return preAuthenticate({ ...args, client: config.client });
-    },
     DebugConnectButton() {
       return (
         <ConnectButton
-          {...connectOptions}
+          {...base.connectOptions}
           connectModal={{
             size: "compact",
           }}
-          onConnect={(wallet) => syncConnectedWallet(wallet)}
+          onConnect={(wallet) => base.syncConnectedWallet(wallet)}
         />
       );
     },

package/src/context/useThirdwebLightWeight.tsx

@@ -21,37 +21,39 @@ import type { Chain } from "viem";
 import { useConnect } from "wagmi";
 
 import type { getConfig, InAppWallet } from "../config";
-import type { BeraWagmiApi, ConnectEvent } from "./BeraWagmiLightWeight";
+import type { BeraWagmiApi, ConnectEvent } from "./BeraWagmi";
 
-export function useThirdwebLightWeight({
-  config,
-  chain,
-  onConnect,
-  onConnectError,
-  publicJsonRpcUrl = chain.rpcUrls.default.http[0],
-}: {
+export interface UseThirdwebBaseArgs {
   onConnect?: (event: ConnectEvent) => void;
   onConnectError?: (error: Error) => void;
   config: ReturnType<typeof getConfig>;
-  theme: "light" | "dark" | "auto" | undefined;
-  chains?: Chain[];
   publicJsonRpcUrl?: string;
   chain: Chain;
-}): Pick<
-  BeraWagmiApi,
-  | "connect"
-  | "openConnectModal"
-  | "disconnect"
-  | "isConnecting"
-  | "DebugConnectButton"
-  | "preAuthenticate"
-> & {
+}
+
+export interface UseThirdwebBaseResult {
+  connect: BeraWagmiApi["connect"];
+  disconnect: BeraWagmiApi["disconnect"];
+  isConnecting: BeraWagmiApi["isConnecting"];
+  preAuthenticate: BeraWagmiApi["preAuthenticate"];
   connectionId: string;
   connectorName: string | null;
   isEmbeddedWallet: boolean;
   wallet: Account | undefined;
   profiles: Profile[] | undefined;
-} {
+  /** Exposed so the full variant can call it after opening the modal. */
+  syncConnectedWallet: (wallet: Wallet) => Promise<void>;
+  connectOptions: AutoConnectProps;
+  thirdwebChain: ReturnType<typeof defineChain>;
+}
+
+export function useThirdwebLightWeight({
+  config,
+  chain,
+  onConnect,
+  onConnectError,
+  publicJsonRpcUrl = chain.rpcUrls.default.http[0],
+}: UseThirdwebBaseArgs): UseThirdwebBaseResult {
   const { connectors, connect: wagmiConnect } = useConnect();
 
   const activeWallet = useActiveWallet();
@@ -89,8 +91,6 @@ export function useThirdwebLightWeight({
   } as const satisfies AutoConnectProps;
 
   async function syncConnectedWallet(wallet: Wallet) {
-    // console.debug("syncConnectedWallet", wallet);
-    // now "connect" the wagmi connector
     const twConnector = connectors.find((c) => c.id === "in-app-wallet");
 
     if (twConnector) {
@@ -172,6 +172,9 @@ export function useThirdwebLightWeight({
     profiles,
     preAuthenticate(args) {
       return preAuthenticate({ ...args, client: config.client });
-    }
+    },
+    syncConnectedWallet,
+    connectOptions,
+    thirdwebChain,
   };
 }