lgtm

examples/next-interface/components/beet.tsx

@@ -1,10 +1,10 @@
 import { clsx } from "clsx";
 import Link from "next/link";
-import React from "react";
+import type React from "react";
 import { toast } from "react-hot-toast";
 import type { TransactionReceipt } from "viem";
-import type { Address } from "wagmi";
-import { useNetwork } from "wagmi";
+import type { Address } from "viem";
+import { useChains } from "wagmi";
 
 export type BeetTx = {
   title: string;
@@ -68,7 +68,7 @@ export class DefaultToasterWrapper {
   txSending(tx: Omit<TxSending, "status">) {
     toast.loading(this._buildToastContainer({ ...tx, status: "sending" }), {
       id: tx.id,
-      duration: Infinity,
+      duration: Number.POSITIVE_INFINITY,
       position: "bottom-left",
     });
   }
@@ -106,15 +106,15 @@ export class DefaultToasterWrapper {
     tx: TxSending | TxSuccess | TxError | TxPending,
   ) {
     return (
-      <div className="flex w-full flex-col overflow-hidden font-mono">
-        <div className="flex items-center justify-between  w-full">
-          <p className="flex items-center p2 gap-1 text-ellipsis ma">
+      <div className="flex flex-col w-full overflow-hidden font-mono">
+        <div className="flex items-center justify-between w-full">
+          <p className="flex items-center gap-1 p2 text-ellipsis ma">
             {tx.title}
             <span className="flex p5">{tx.humanCount}</span>
           </p>
           <button
             type="button"
-            className="pointer text-xl text-secondary hover:text-black"
+            className="text-xl pointer text-secondary hover:text-black"
             onClick={() => toast.dismiss(tx.id)}
           >
             ×
@@ -149,7 +149,7 @@ export const AddressLink: React.FC<{
   data: "tx" | "address";
   className?: string;
 }> = ({ address, className, data }) => {
-  const { chain } = useNetwork();
+  const [chain] = useChains();
   return (
     <Link
       href={`${

examples/next-interface/hooks/useBalance.ts

@@ -1,16 +1,16 @@
 import { useQuery } from "@tanstack/react-query";
 import { type ERC20, getERC20BalanceOf } from "reverse-mirage";
-import { type Address, usePublicClient } from "wagmi";
+import type { Address } from "viem";
+import { useChainId, usePublicClient } from "wagmi";
 import type { HookArg } from "./internal/types";
 import { getQueryKey, userRefectchInterval } from "./internal/utils";
-import { useChainID } from "./useChain";
 
 export const useBalance = <TERC20 extends ERC20>(
   erc20: HookArg<TERC20>,
   address: HookArg<Address>,
 ) => {
   const publicClient = usePublicClient();
-  const chainID = useChainID();
+  const chainID = useChainId();
 
   return useQuery({
     queryKey: getQueryKey(
@@ -21,7 +21,7 @@ export const useBalance = <TERC20 extends ERC20>(
     enabled: [erc20, address].some((a) => a === undefined) ? false : true,
     queryFn: () =>
       getERC20BalanceOf(publicClient, { erc20: erc20!, address: address! }),
-    staleTime: Infinity,
+    staleTime: Number.POSITIVE_INFINITY,
     refetchInterval: userRefectchInterval,
   });
 };

examples/next-interface/hooks/useSetup.ts

@@ -4,7 +4,7 @@ import { testClient, walletClient } from "@/pages/_app";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { createERC20 } from "reverse-mirage";
 import invariant from "tiny-invariant";
-import { type Hex } from "viem";
+import type { Hex } from "viem";
 import { parseEther } from "viem/utils";
 import { useChainId, usePublicClient } from "wagmi";
 import ERC20 from "../../../contracts/out/ERC20.sol/ERC20.json";

examples/next-interface/hooks/useTransfer.ts

@@ -7,21 +7,20 @@ import {
   getERC20BalanceOf,
   simulateERC20Transfer,
 } from "reverse-mirage";
+import type { Address } from "viem";
 import { getAddress } from "viem/utils";
-import { type Address, useWalletClient } from "wagmi";
+import { useChainId, usePublicClient, useWalletClient } from "wagmi";
 import type { HookArg } from "./internal/types";
-import { useFastClient } from "./internal/useFastClient";
 import { getQueryKey } from "./internal/utils";
-import { useChainID } from "./useChain";
 
 export const useTransfer = <TERC20 extends BaseERC20>(
   amount: HookArg<ERC20Amount<TERC20>>,
   to: HookArg<Address>,
 ) => {
   const queryClient = useQueryClient();
-  const client = useFastClient();
+  const client = usePublicClient();
   const walletClient = useWalletClient();
-  const chainID = useChainID();
+  const chainID = useChainId();
 
   const title = "Transfer";
 
@@ -94,5 +93,5 @@ export const useTransfer = <TERC20 extends BaseERC20>(
         },
       ],
     } as const satisfies { data: readonly BeetStage[]; status: "success" };
-  }, [to, amount, mutate]);
+  }, [to, amount, mutate, walletClient.data]);
 };

examples/next-interface/package.json

@@ -6,8 +6,6 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "format": "biome format . --write",
-    "lint": "biome check .",
     "typecheck": "tsc"
   },
   "dependencies": {

examples/next-interface/pages/_app.tsx

@@ -1,26 +1,15 @@
 import { ALICE } from "@/constants";
 import { EnvironmentProvider } from "@/contexts/environment";
 import "@/styles/globals.css";
-import {
-  RainbowKitProvider,
-  getDefaultWallets,
-  lightTheme,
-} from "@rainbow-me/rainbowkit";
+import { RainbowKitProvider, lightTheme } from "@rainbow-me/rainbowkit";
 import "@rainbow-me/rainbowkit/styles.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import type { AppProps } from "next/app";
 import { Toaster } from "react-hot-toast";
 import { http, createTestClient, createWalletClient } from "viem";
-import { WagmiConfig, configureChains, createConfig } from "wagmi";
+import { WagmiProvider, createConfig } from "wagmi";
 import { foundry } from "wagmi/chains";
-import { publicProvider } from "wagmi/providers/public";
-
-const { chains, publicClient, webSocketPublicClient } = configureChains(
-  [foundry],
-  [publicProvider()],
-  { pollingInterval: 1000 },
-);
 
 export const testClient = createTestClient({
   chain: foundry,
@@ -34,31 +23,31 @@ export const walletClient = createWalletClient({
   account: ALICE,
 });
 
-export { chains };
-
-const { connectors } = getDefaultWallets({
-  appName: "web3",
-  chains,
-});
+declare module "wagmi" {
+  interface Register {
+    config: typeof config;
+  }
+}
 
 const config = createConfig({
-  autoConnect: true,
-  connectors,
-  publicClient,
-  webSocketPublicClient,
+  chains: [foundry],
+  transports: {
+    [foundry.id]: http(),
+  },
+  ssr: true,
 });
 const queryClient = new QueryClient();
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
-    <WagmiConfig config={config}>
+    <WagmiProvider config={config}>
       <QueryClientProvider client={queryClient}>
         <ReactQueryDevtools />
         <RainbowKitProvider
           modalSize="compact"
           theme={lightTheme({ borderRadius: "medium" })}
+          initialChain={foundry}
           coolMode
-          chains={chains}
         >
           <EnvironmentProvider>
             <Component {...pageProps} />;
@@ -72,6 +61,6 @@ export default function App({ Component, pageProps }: AppProps) {
           </EnvironmentProvider>
         </RainbowKitProvider>
       </QueryClientProvider>
-    </WagmiConfig>
+    </WagmiProvider>
   );
 }

package.json

@@ -26,7 +26,8 @@
       "ignoreMissing": [
         "@algolia/client-search",
         "search-insights",
-        "@babel/core"
+        "@babel/core",
+        "react-native"
       ]
     }
   },