Wagmi 2.0 是一个全新的版本，采用了 Viem 作为底层库，使得以太坊应用程序开发变得更加高效和便捷。Viem 是一个用于与以太坊区块链交互的库，提供了更快、更可靠的操作，并且更好地支持 TypeScript。下面的教程将带你一步步了解如何在你的项目中使用 Wagmi 2.0 和 Viem。

1. 安装依赖 首先，安装最新版的 wagmi 和 viem。

   npm install wagmi viem@2.x @tanstack/react-query

2. 配置config

   import { http, createConfig } from 'wagmi'
   import { mainnet, sepolia } from 'wagmi/chains'
   

export const config = createConfig({ chains: [mainnet, sepolia], transports: { [mainnet.id]: http(), [sepolia.id]: http(), }, })

3. 添加 providers
```js
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiProvider } from 'wagmi'
import { config } from './config'

const queryClient = new QueryClient()

function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        {/** ... */}
      </QueryClientProvider>
    </WagmiProvider>
  )
}

4. 连接钱包 Wagmi 2.0 提供了便捷的方式来连接用户的加密钱包，比如 MetaMask。下面是一个简单的连接钱包的示例：

   import { useAccount, useConnect, useDisconnect } from 'wagmi';
   import { InjectedConnector } from 'wagmi/connectors/injected';
   

const ConnectWallet = () => { const { address, isConnected } = useAccount(); const { connect } = useConnect({ connector: new InjectedConnector(), }); const { disconnect } = useDisconnect();

if (isConnected) { return (

return <button onClick={() => connect()}>Connect Wallet; };

5. 与智能合约交互
使用 Wagmi 和 Viem，你可以轻松地调用智能合约的方法。假设你有一个简单的 ERC-20 合约，你可以如下调用它的 balanceOf 方法：
```js
import { useContractRead } from 'wagmi';

const contractConfig = {
  address: '0xYourContractAddress',
  abi: [
    // 你的合约 ABI
    {
      constant: true,
      inputs: [{ name: '_owner', type: 'address' }],
      name: 'balanceOf',
      outputs: [{ name: '', type: 'uint256' }],
      type: 'function',
    },
  ],
};

const GetBalance = () => {
  const { data, isError, isLoading } = useContractRead({
    ...contractConfig,
    functionName: 'balanceOf',
    args: ['0xYourWalletAddress'],
  });

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error</div>;

  return <div>Balance: {data?.toString()}</div>;
};

6. 监听事件 Wagmi 2.0 还支持监听区块链上的事件。例如，监听某个事件的触发：

   import { useContractEvent } from 'wagmi';
   

const ListenToEvent = () => { useContractEvent({ ...contractConfig, eventName: 'Transfer', listener: (event) => { console.log('Event received:', event); }, });

return

7. 使用 Viem 的其他功能
Viem 提供了许多强大的功能，可以直接与 Wagmi 配合使用，例如更高效的数据处理、更详细的错误处理等。你可以在官方文档中了解更多关于 Viem 的内容，并结合 Wagmi 来开发更复杂的以太坊应用。

### 结语
通过 Wagmi 2.0 和 Viem，你可以显著简化以太坊应用的开发过程。无论是连接钱包、调用合约方法还是监听区块链事件，Wagmi 2.0 都为你提供了便捷而强大的工具。希望这个教程能帮助你快速上手并开发出功能丰富的区块链应用。