@berachain/wagmi 0.2.0-beta.2 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@berachain/wagmi",
-  "version": "0.2.0-beta.2",
+  "version": "0.3.0",
   "type": "module",
   "files": [
     "dist",
@@ -21,6 +21,12 @@
       "import": "./dist/*/index.mjs",
       "require": "./dist/*/index.cjs",
       "default": "./dist/*/index.mjs"
+    },
+    "./*/thirdweb": {
+      "types": "./dist/*/thirdweb/index.d.ts",
+      "import": "./dist/*/thirdweb/index.mjs",
+      "require": "./dist/*/thirdweb/index.cjs",
+      "default": "./dist/*/thirdweb/index.mjs"
     }
   },
   "typesVersions": {
@@ -34,25 +40,23 @@
   "author": "Berachain",
   "license": "MIT",
   "dependencies": {
-    "@react-native-async-storage/async-storage": "2.2.0",
-    "@tanstack/react-query": "5.59.0",
     "@thirdweb-dev/wagmi-adapter": "0.2.204",
     "@wagmi/core": "2.22.1",
-    "porto": "0.2.23",
     "swr": "2.3.3",
-    "thirdweb": "5.118.0",
-    "@berachain/config": "0.0.7"
+    "thirdweb": "5.118.2"
   },
   "devDependencies": {
     "@types/node": "24.1.0",
     "@types/react": "19.1.8",
     "tsup": "8.4.0",
-    "viem": "2.41.2",
-    "wagmi": "2.19.5"
+    "viem": "2.45.0",
+    "wagmi": "2.19.5",
+    "@berachain/config": "0.1.0"
   },
   "peerDependencies": {
     "react": "^19.1",
     "react-dom": "^19.1",
+    "@tanstack/react-query": "^5.59.0",
     "viem": "^2.41.2",
     "wagmi": "^2.19.5"
   },

package/src/config/defaultWagmiConfig.ts

@@ -7,125 +7,36 @@ import {
   inAppWallet,
 } from "thirdweb/wallets";
 import type { Chain, Transport } from "viem";
-import {
-  arbitrum,
-  avalanche,
-  base,
-  berachain,
-  berachainBepolia,
-  bsc,
-  mainnet,
-  optimism,
-  polygon,
-} from "viem/chains";
-import {
-  type Config,
-  createConfig,
-  createStorage,
-  fallback,
-  http,
-} from "wagmi";
-
-import {
-  alchemyJsonRpcUrl,
-  appConfig,
-  chainId,
-  jsonRpcUrl,
-  privateRcpUrl,
-  publicJsonRpcUrl,
-} from "@berachain/config/internal";
+import { type Config, createConfig, createStorage } from "wagmi";
 
-/**
- * Using default viem chain definition since it also includes ens and other metadata
- */
-export const chain: Chain =
-  chainId === berachain.id ? berachain : berachainBepolia;
-
-export const defaultBeraNetworkConfig: NetworkConfig = {
-  chain: chain,
-};
-
-export interface NetworkConfig {
-  chain: Chain;
+export interface ThirdwebConfig {
+  sponsorGas?: boolean;
+  embeddedWallets?: boolean;
+  clientId: string;
 }
-const hasMulticall = !!chain.contracts?.multicall3;
 
-/**
- * Exporting this is helpful for the multi-chain zap, to get the list of chains that we want to support.
- */
-export const externalChains: Chain[] = [
-  mainnet,
-  polygon,
-  optimism,
-  base,
-  bsc,
-  arbitrum,
-  avalanche,
-] as const;
-
-export const chainIdToName: Record<Chain["id"], string> = [
-  ...externalChains,
-  berachain,
-  berachainBepolia,
-].reduce(
-  (acc, chain) => {
-    acc[chain.id] = chain.name;
-    return acc;
-  },
-  {} as Record<Chain["id"], string>,
-);
-
-/**
- * Thirdweb RPC URLs have a rate limit of 3 RPS.
- * http() uses default viem transport which varies based on the chain definition.
- *
- * Quicknode RPC URLs are CORS restricted to *.berachain.com, *.berachain-staging.com. They have a 100rpm rate limit.
- */
-const externalTransports: Record<Chain["id"], (string | undefined)[]> = {
-  [mainnet.id]: [
-    "https://1.rpc.thirdweb.com/",
-    "https://ultra-sleek-pond.quiknode.pro/08ab7832de196248b7ba7dcffad268c9b3747f48/",
-  ],
-  [polygon.id]: [
-    "https://137.rpc.thirdweb.com/",
-    "https://sleek-thrilling-orb.matic.quiknode.pro/592d9950044bf173c232f5ecf79a2725c43f517b/",
-  ],
-  [optimism.id]: [
-    "https://10.rpc.thirdweb.com/",
-    "https://blue-neat-liquid.optimism.quiknode.pro/26ca3fe255f687652124050450faada988023979/",
-  ],
-  [base.id]: [
-    "https://8453.rpc.thirdweb.com/",
-    "https://soft-empty-sailboat.base-mainnet.quiknode.pro/bb9300074b062c5e0a1e93e0a8ebd53501c32fe7/",
-  ],
-  [bsc.id]: [
-    "https://56.rpc.thirdweb.com/",
-    "https://chaotic-floral-brook.bsc.quiknode.pro/6f0e5a9791285c6b59f2a6a907a62ec9d581d7bd/",
-  ],
-  [avalanche.id]: [
-    "https://43114.rpc.thirdweb.com/",
-    "https://shy-special-mansion.avalanche-mainnet.quiknode.pro/efa880845032c2ef4049637d779d2ae58acf0f65/ext/bc/C/rpc/",
-  ],
-  [arbitrum.id]: [
-    "https://42161.rpc.thirdweb.com/",
-    "https://fluent-broken-violet.arbitrum-mainnet.quiknode.pro/445b20e9ed10e22fffee6498a40c4f83f83f4ec7/",
-  ],
-};
+export interface BeraWagmiConfig {
+  thirdweb: ThirdwebConfig;
+  transports?: Record<number, Transport>;
+  chains?: Chain[];
+  defaultChain: Chain;
+}
 
 export function getConfig({
-  sponsorGas,
-  enableEmbeddedWallets,
-}: {
-  sponsorGas?: boolean;
-  enableEmbeddedWallets: boolean;
-}) {
+  thirdweb,
+  transports = {},
+  defaultChain: chain,
+  chains = [],
+}: BeraWagmiConfig) {
   const thirdwebClient = createThirdwebClient({
-    clientId: appConfig.apiKeys.public.thirdweb,
+    clientId: thirdweb.clientId,
   });
 
+  const hasMulticall = !!chain.contracts?.multicall3;
+
   const executionMode = {
     mode: "EIP7702",
-    sponsorGas,
+    sponsorGas: thirdweb.sponsorGas,
   } as const satisfies NonNullable<InAppWalletCreationOptions>["executionMode"];
 
   const thirdwebWallet: ReturnType<typeof inAppWallet> = inAppWallet({
@@ -142,11 +53,11 @@ export function getConfig({
   ].filter((w, index, self) => self.findIndex((t) => t.id === w.id) === index);
 
   return {
-    wallets: enableEmbeddedWallets ? [thirdwebWallet, ...wallets] : wallets,
+    wallets: thirdweb.embeddedWallets ? [thirdwebWallet, ...wallets] : wallets,
     executionMode,
     client: thirdwebClient,
     wagmi: createConfig({
-      chains: [defaultBeraNetworkConfig.chain, ...externalChains],
+      chains: [chain, ...chains],
       // recommended by wagmi docs https://wagmi.sh/react/guides/ssr#ssr
       ssr: true,
       connectors: [
@@ -172,37 +83,7 @@ export function getConfig({
             }
           : undefined,
       },
-      transports: {
-        [defaultBeraNetworkConfig.chain.id]: fallback(
-          [privateRcpUrl, jsonRpcUrl, alchemyJsonRpcUrl, publicJsonRpcUrl]
-            .filter((i) => i)
-            .map((url) =>
-              http(url, {
-                batch: {
-                  wait: 35,
-                },
-              }),
-            ),
-        ),
-        ...Object.entries(externalTransports).reduce<
-          Record<Chain["id"], Transport>
-        >((acc, [chainId, urls]) => {
-          acc[Number(chainId) as Chain["id"]] = fallback(
-            [
-              ...urls,
-              // undefined for default rpc
-              undefined,
-            ].map((url) =>
-              http(url, {
-                batch: {
-                  wait: 15,
-                },
-              }),
-            ),
-          );
-          return acc;
-        }, {}),
-      },
+      transports,
     }) as Config,
   };
 }

package/src/context/BeraWagmi.tsx

@@ -1,36 +1,21 @@
 import {
   createContext,
   type PropsWithChildren,
-  useCallback,
   useContext,
   useMemo,
 } from "react";
 import useSWRImmutable from "swr/immutable";
-import type { Address, Chain, GetCapabilitiesReturnType } from "viem";
-import {
-  arbitrum,
-  avalanche,
-  base,
-  bsc,
-  mainnet,
-  optimism,
-  polygon,
-} from "viem/chains";
+import type { Address, Chain } from "viem";
 import { normalize } from "viem/ens";
 import {
   type UseWalletClientReturnType,
   useAccount,
-  useCapabilities,
   useDisconnect,
   usePublicClient,
   useWalletClient,
 } from "wagmi";
 
-import { defaultChainId } from "@berachain/config/internal";
-import type { EdgeConfigSchema } from "@berachain/config/internal/edge-config";
-import { isFlagEnabled } from "@berachain/config/internal/edge-config";
-
-import type { getConfig } from "~/config";
+import type { getConfig, ThirdwebConfig } from "~/config";
 import { useEnsAvatar, useEnsName } from "../hooks";
 import { LightweightAccountProvider } from "./LightweightAccountProvider";
 import { useThirdweb } from "./useThirdweb";
@@ -61,18 +46,7 @@ export interface BeraWagmiApi {
          */
         isEmbeddedWallet: boolean;
         connectorName: string | null;
-        flags: {
-          getSupportsAtomic: (chainId: number) => boolean;
-        };
-        /**
-         * Wallet provider capabilities for the current account.
-         *
-         * Status can be:
-         * - supported: User has enabled the feature.
-         * - ready: The wallet provider is ready to use the feature.
-         * - unsupported: The wallet provider does not support the feature.
-         */
-        capabilities: GetCapabilitiesReturnType | undefined;
+        connectionId: string;
         /**
          * Wallet to display.
          *
@@ -105,6 +79,10 @@ export interface BeraWagmiApi {
   isEmbeddedWalletsEnabled: boolean;
   isConnected: boolean;
   isConnecting: boolean;
+  flags: {
+    disableEip5792: boolean;
+    disable5792Upgrade: boolean;
+  };
   walletClient: UseWalletClientReturnType["data"];
   connectWallet: () => Promise<void> | void;
   disconnect(): void;
@@ -117,15 +95,20 @@ export interface BeraWagmiApi {
   /**
    * List of external chains that are whitelisted for that app.
    */
-  externalChainList: Chain[];
+  chains: Chain[];
+  defaultChainId: ChainId;
 }
 
 const BeraWagmiContext = createContext<BeraWagmiApi | undefined>(undefined);
 
+export enum ChainId {
+  MAINNET = 80094,
+  BEPOLIA = 80069,
+}
+
 export interface IBeraWagmiProviderProps extends PropsWithChildren {
   config: ReturnType<typeof getConfig>;
   theme?: "dark" | "light" | "auto";
-  isEmbeddedWalletsEnabled: boolean;
   disableEip5792: boolean;
   /**
    * Whether to disable the 5792 upgrade for users that haven't upgraded yet.
@@ -135,63 +118,31 @@ export interface IBeraWagmiProviderProps extends PropsWithChildren {
   disable5792Upgrade?: boolean;
   accountOverride?: Address;
   onSmartAccountRejection?: () => void;
-  edgeConfigChainList: EdgeConfigSchema["wagmi"]["externalChainList"];
   /**
    * Event triggered when a wallet is connected manually.
    *
    * This is not triggered when a wallet connect automatically after a refresh.
    */
   onConnectedWallet?: () => void;
-}
-
-/**
- * This are the chains that have been approved by the Bera team to be used in the BeraHub,
- * for multi chain zapping.
- */
-const externalApprovedChains = [
-  mainnet,
-  polygon,
-  optimism,
-  base,
-  bsc,
-  avalanche,
-  arbitrum,
-];
-
-/**
- * The chain is selected
- * - if it's part of the pre-approved array
- * - if it's not present in the edge config
- * - if it's present and it is enabled on this env, branch & app
- */
-function getExternalChainList({
-  externalChainList,
-}: {
-  externalChainList: EdgeConfigSchema["wagmi"]["externalChainList"];
-}): Chain[] {
-  return externalApprovedChains.filter((aChain): boolean => {
-    const extChain = externalChainList?.find((c) => c.chainId === aChain.id);
-    return !extChain || isFlagEnabled(extChain.enabled);
-  });
+  chains: Chain[];
+  defaultChain: Chain;
+  thirdweb: ThirdwebConfig;
+  publicJsonRpcUrl: string;
 }
 
 export function BeraWagmiProvider({
   children,
   config,
-  isEmbeddedWalletsEnabled,
   disableEip5792,
   disable5792Upgrade,
   theme,
   accountOverride,
   onSmartAccountRejection,
-  edgeConfigChainList,
+  chains,
+  defaultChain,
+  thirdweb,
+  publicJsonRpcUrl,
 }: IBeraWagmiProviderProps) {
-  const externalChainList = useMemo(() => {
-    return getExternalChainList({
-      externalChainList: edgeConfigChainList,
-    });
-  }, [edgeConfigChainList]);
-
   const {
     wallet,
     connect,
@@ -204,7 +155,9 @@ export function BeraWagmiProvider({
   } = useThirdweb({
     config,
     theme,
-    extenalChains: externalChainList,
+    chains,
+    chain: defaultChain,
+    publicJsonRpcUrl,
   });
 
   const { address: connectedAddress, chainId } = useAccount(); // wagmi
@@ -219,32 +172,9 @@ export function BeraWagmiProvider({
     return accountOverride ?? connectedAddress;
   }, [accountOverride, connectedAddress, wallet]);
 
-  const { data: capabilities } = useCapabilities({
-    account: connectedAddress,
-    // This is needed to avoid cache issues with the capabilities when switching wallets
-    scopeKey: connectionId,
-    query: {
-      retry: 3,
-    },
-    // chainId:   defaultChainId,
-  });
-  const getSupportsAtomic = useCallback(
-    (targetChainId: number) => {
-      if (disableEip5792) return false;
-      if (!capabilities) return false;
-
-      return (
-        capabilities?.[targetChainId]?.atomic?.status === "supported" ||
-        (!disable5792Upgrade &&
-          capabilities?.[targetChainId]?.atomic?.status === "ready")
-      );
-    },
-    [capabilities, disableEip5792, disable5792Upgrade],
-  );
-
   const { data: ens } = useEnsName({
     config: config.wagmi,
-    chainId: defaultChainId,
+    chainId: defaultChain.id,
     address,
   });
 
@@ -295,11 +225,15 @@ export function BeraWagmiProvider({
   return (
     <BeraWagmiContext.Provider
       value={{
+        flags: {
+          disableEip5792,
+          disable5792Upgrade: !!disable5792Upgrade,
+        },
         walletClient,
         onSmartAccountRejection: () => {
           onSmartAccountRejection?.();
         },
-        isEmbeddedWalletsEnabled,
+        isEmbeddedWalletsEnabled: thirdweb.embeddedWallets ?? true,
         isConnecting,
         isConnected:
           !!address &&
@@ -309,16 +243,13 @@ export function BeraWagmiProvider({
         account:
           wallet && chainId && address
             ? {
+                connectionId,
                 chainId,
                 connectorName,
                 isEmbeddedWallet,
-                capabilities,
-                flags: {
-                  getSupportsAtomic,
-                },
                 wallet: {
                   address,
-                  ensName: ens ?? null,
+                  ensName: ens?.replace(".bera", ".🐻⛓️") ?? null,
                   ensAvatar: avatar.data ?? null,
                   has7702Authorization,
                   isContract,
@@ -333,10 +264,14 @@ export function BeraWagmiProvider({
           disconnectWagmi();
           disconnectProvider();
         },
-        externalChainList,
+        chains,
+        defaultChainId: defaultChain.id,
       }}
     >
-      <LightweightAccountProvider address={address}>
+      <LightweightAccountProvider
+        address={address}
+        defaultChainId={defaultChain.id}
+      >
         {children}
       </LightweightAccountProvider>
     </BeraWagmiContext.Provider>

package/src/context/LightweightAccountProvider.tsx

@@ -1,9 +1,12 @@
 import { createContext, type PropsWithChildren } from "react";
 import type { Address } from "viem";
 
+import type { ChainId } from "./BeraWagmi";
+
 export const LightweightAccountContext = createContext<
   | {
       address: Address | undefined;
+      defaultChainId: ChainId;
     }
   | undefined
 >(undefined);
@@ -16,9 +19,13 @@ export const LightweightAccountContext = createContext<
 export function LightweightAccountProvider({
   children,
   address,
-}: PropsWithChildren<{ address: Address | undefined }>) {
+  defaultChainId,
+}: PropsWithChildren<{
+  address: Address | undefined;
+  defaultChainId: ChainId;
+}>) {
   return (
-    <LightweightAccountContext.Provider value={{ address }}>
+    <LightweightAccountContext.Provider value={{ address, defaultChainId }}>
       {children}
     </LightweightAccountContext.Provider>
   );

package/src/context/WagmiProvider.tsx

@@ -2,33 +2,40 @@
 
 import { useMemo } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { Porto } from "porto";
 import { ThirdwebProvider } from "thirdweb/react";
+import type { Chain, Transport } from "viem";
 import { WagmiProvider as WagmiProviderBase } from "wagmi";
 
 import { getConfig } from "~/config/defaultWagmiConfig";
 import { BeraWagmiProvider, type IBeraWagmiProviderProps } from "./BeraWagmi";
 
-const queryClient = new QueryClient();
+type WagmiProviderProps = Omit<
+  IBeraWagmiProviderProps,
+  "config" | "defaultChain"
+> & {
+  transports?: Record<number, Transport>;
+  defaultChain: Chain;
+  chains?: Chain[];
+};
 
-// Initialize Porto to inject it into Dynamic via EIP-6963
-Porto.create();
+const queryClient = new QueryClient();
 
 export function WagmiProvider({
-  sponsorGas,
+  transports,
+  defaultChain,
+  chains,
+  thirdweb,
   ...beraWagmiProps
-}: Omit<IBeraWagmiProviderProps, "config"> & {
-  sponsorGas?: boolean;
-}) {
+}: WagmiProviderProps) {
   // useMemo to make sure this is initialized only once
-  const config = useMemo(
-    () =>
-      getConfig({
-        sponsorGas,
-        enableEmbeddedWallets: beraWagmiProps.isEmbeddedWalletsEnabled,
-      }),
-    [],
-  );
+  const config = useMemo(() => {
+    return getConfig({
+      thirdweb,
+      transports,
+      defaultChain,
+      chains,
+    });
+  }, [defaultChain, thirdweb, transports, chains]);
 
   return (
     <ThirdwebProvider>
@@ -38,7 +45,13 @@ export function WagmiProvider({
         reconnectOnMount={false}
       >
         <QueryClientProvider client={queryClient}>
-          <BeraWagmiProvider {...beraWagmiProps} config={config} />
+          <BeraWagmiProvider
+            {...beraWagmiProps}
+            thirdweb={thirdweb}
+            chains={chains}
+            defaultChain={defaultChain}
+            config={config}
+          />
         </QueryClientProvider>
       </WagmiProviderBase>
     </ThirdwebProvider>

package/src/context/useThirdweb.tsx

@@ -14,35 +14,21 @@ import type { Account, AutoConnectProps, Wallet } from "thirdweb/wallets";
 import type { Chain } from "viem";
 import { useConnect } from "wagmi";
 
-import { defaultChainId, publicJsonRpcUrl } from "@berachain/config/internal";
-
-import { chain, type getConfig } from "~/config";
+import type { getConfig } from "~/config";
 import type { UseWalletProviderReturnType } from "./types";
 
-const thirdwebChain = 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],
-    },
-  },
-});
-
 export function useThirdweb({
   config,
   theme,
-  extenalChains,
+  chains,
+  chain,
+  publicJsonRpcUrl,
 }: {
   config: ReturnType<typeof getConfig>;
   theme: "light" | "dark" | "auto" | undefined;
-  extenalChains: Chain[];
+  chains: Chain[];
+  publicJsonRpcUrl: string;
+  chain: Chain;
 }): UseWalletProviderReturnType<Account> {
   const { connectors, connect: wagmiConnect } = useConnect();
 
@@ -51,6 +37,26 @@ export function useThirdweb({
   const { disconnect: disconnectThirdweb } = useTwDisconnect();
   const { data: walletInfo } = useWalletInfo(activeWallet?.id);
 
+  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,
@@ -70,7 +76,7 @@ export function useThirdweb({
 
       wagmiConnect({
         connector: twConnector,
-        chainId: defaultChainId,
+        chainId: chain.id,
         ...options,
       });
     } else {
@@ -100,7 +106,7 @@ export function useThirdweb({
         size: "compact",
         chains: [
           thirdwebChain,
-          ...extenalChains.map((c) =>
+          ...chains.map((c) =>
             defineChain({
               id: c.id,
             }),