Development to main

examples/wagmi/package.json

@@ -3,15 +3,16 @@
   "version": "0.2.0",
   "private": true,
   "dependencies": {
+    "@tanstack/react-query": "^5.17.15",
     "buffer": "^6.0.3",
     "events": "^3.3.0",
     "process": "^0.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "util": "^0.12.5",
-    "viem": "^1.19.15",
-    "wagmi": "^1.4.12",
+    "viem": "^2.1.1",
+    "wagmi": "^2.2.1",
     "web-vitals": "^3.4.0"
   },
   "devDependencies": {

examples/wagmi/src/components/Connect.tsx

@@ -1,27 +1,27 @@
 import {
   useAccount,
   useConnect,
-  useContractWrite,
   useDisconnect,
-  usePrepareContractWrite,
-  usePrepareSendTransaction,
+  useEstimateGas,
   useSendTransaction,
+  useSimulateContract,
+  useWriteContract,
 } from 'wagmi';
 
 import { useAutoConnect } from '../useAutoConnect';
 
 export function Connect() {
-  const { connect, connectors, error, pendingConnector } = useConnect();
+  const { connect, connectors, error } = useConnect();
   const { isConnecting, connector: activeConnector } = useAccount();
   const { disconnect } = useDisconnect();
-  const { config } = usePrepareSendTransaction({
+  const { data: txGasEstimate } = useEstimateGas({
     to: '0x000000000000000000000000000000000000beef',
     value: BigInt('0'),
   });
 
-  const { sendTransactionAsync } = useSendTransaction(config);
+  const { sendTransactionAsync } = useSendTransaction();
 
-  const { config: config2 } = usePrepareContractWrite({
+  const { data } = useSimulateContract({
     // wagmi mint example contract
     address: '0xFBA3912Ca04dd458c843e2EE08967fC04f3579c2',
     abi: [
@@ -36,7 +36,7 @@ export function Connect() {
     functionName: 'mint',
   });
 
-  const { write } = useContractWrite(config2);
+  const { writeContract } = useWriteContract();
 
   useAutoConnect();
 
@@ -46,17 +46,29 @@ export function Connect() {
         {activeConnector && (
           <>
             <button onClick={() => disconnect()}>Disconnect from {activeConnector.name}</button>
-            <button onClick={() => write?.()}>Test WagmiMintExample write contract transaction</button>
-            <button onClick={() => sendTransactionAsync?.()}>Test send transaction</button>
+            <button onClick={() => writeContract(data!.request)}>
+              Test WagmiMintExample write contract transaction
+            </button>
+            <button
+              onClick={() =>
+                sendTransactionAsync?.({
+                  gas: txGasEstimate,
+                  to: '0x000000000000000000000000000000000000beef',
+                  value: BigInt('0'),
+                })
+              }
+            >
+              Test send transaction
+            </button>
           </>
         )}
 
         {connectors
-          .filter((x) => x.ready && x.id !== activeConnector?.id)
+          .filter((x) => x.id !== activeConnector?.id)
           .map((x) => (
             <button key={x.id} onClick={() => connect({ connector: x })}>
               {x.name}
-              {isConnecting && x.id === pendingConnector?.id && ' (connecting)'}
+              {isConnecting && ' (connecting)'}
             </button>
           ))}
       </div>

examples/wagmi/src/components/NetworkSwitcher.tsx

@@ -1,25 +1,23 @@
-import { useNetwork, useSwitchNetwork } from 'wagmi';
+import { useAccount, useSwitchChain } from 'wagmi';
 
 export function NetworkSwitcher() {
-  const { chain } = useNetwork();
-  const { chains, error, isLoading, pendingChainId, switchNetwork } = useSwitchNetwork();
-
-  if (!chain) return null;
+  const { chain, chainId } = useAccount();
+  const { chains, error, status, switchChain } = useSwitchChain();
 
   return (
     <div>
       <div>
-        Connected to {chain?.name ?? chain?.id}
-        {chain?.unsupported && ' (unsupported)'}
+        Connected to {chain?.name ?? chainId}
+        {!chains.find((c) => c.id === chainId) && ' (unsupported)'}
       </div>
 
-      {switchNetwork && (
+      {switchChain && (
         <div>
           {chains.map((x) =>
-            x.id === chain?.id ? null : (
-              <button key={x.id} onClick={() => switchNetwork(x.id)}>
+            x.id === chainId ? null : (
+              <button key={x.id} onClick={() => switchChain({ chainId: x.id })}>
                 {x.name}
-                {isLoading && x.id === pendingChainId && ' (switching)'}
+                {status === 'pending' && ' (switching)'}
               </button>
             ),
           )}

examples/wagmi/src/index.tsx

@@ -2,17 +2,16 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 
 import { mainnet, goerli } from 'viem/chains';
-import { WagmiConfig, createConfig, configureChains, Connector } from 'wagmi';
-import { publicProvider } from 'wagmi/providers/public';
-import { SafeConnector } from 'wagmi/connectors/safe';
-import { InjectedConnector } from 'wagmi/connectors/injected';
-import { MetaMaskConnector } from 'wagmi/connectors/metaMask';
-import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';
-
+import { WagmiProvider, createConfig, CreateConnectorFn, http } from 'wagmi';
 import { Buffer } from 'buffer';
+import { metaMask } from 'wagmi/connectors';
+import { safe } from 'wagmi/connectors';
+import { injected } from 'wagmi/connectors';
+import { walletConnect } from 'wagmi/connectors';
 
 import { App } from './App';
 import reportWebVitals from './reportWebVitals';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 // polyfill Buffer for client
 if (!window.Buffer) {
@@ -21,46 +20,31 @@ if (!window.Buffer) {
 
 const WALLETCONNECT_PROJECT_ID = process.env.REACT_APP_WALLETCONNECT_PROJECT_ID;
 
-const defaultChains = [mainnet, goerli];
-
-const { chains, publicClient } = configureChains(defaultChains, [publicProvider()]);
-
-let connectors: Connector[] = [
-  new SafeConnector({ chains }),
-  new MetaMaskConnector({ chains }),
-  new InjectedConnector({
-    chains,
-    options: {
-      name: 'Injected',
-      shimDisconnect: true,
-    },
-  }),
-];
+let connectors: CreateConnectorFn[] = [safe(), metaMask(), injected()];
 
 if (WALLETCONNECT_PROJECT_ID) {
   // A WalletConnect ID is provided so we add the Connector for testing purposes
-  connectors = [
-    ...connectors,
-    new WalletConnectConnector({
-      chains,
-      options: {
-        projectId: WALLETCONNECT_PROJECT_ID,
-      },
-    }),
-  ];
+  connectors = [...connectors, walletConnect({ projectId: WALLETCONNECT_PROJECT_ID })];
 }
 
+const queryClient = new QueryClient();
 const config = createConfig({
-  connectors: connectors,
-  publicClient,
+  connectors,
+  chains: [mainnet, goerli],
+  transports: {
+    [mainnet.id]: http(),
+    [goerli.id]: http(),
+  },
 });
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
   <React.StrictMode>
-    <WagmiConfig config={config}>
-      <App />
-    </WagmiConfig>
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <App />
+      </QueryClientProvider>
+    </WagmiProvider>
   </React.StrictMode>,
 );
 

examples/wagmi/src/useAutoConnect.ts

@@ -8,7 +8,7 @@ function useAutoConnect() {
 
   useEffect(() => {
     AUTOCONNECTED_CONNECTOR_IDS.forEach((connector) => {
-      const connectorInstance = connectors.find((c) => c.id === connector && c.ready);
+      const connectorInstance = connectors.find((c) => c.id === connector);
 
       if (connectorInstance) {
         connect({ connector: connectorInstance });