使用 Wagmi 2.0 和 Viem 的教程

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

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

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

配置config

1import { http, createConfig } from 'wagmi'
2import { mainnet, sepolia } from 'wagmi/chains'
3
4export const config = createConfig({
5  chains: [mainnet, sepolia],
6  transports: {
7    [mainnet.id]: http(),
8    [sepolia.id]: http(),
9  },
10})

添加 providers

1import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
2import { WagmiProvider } from 'wagmi'
3import { config } from './config'
4
5const queryClient = new QueryClient()
6
7function App() {
8  return (
9    <WagmiProvider config={config}>
10      <QueryClientProvider client={queryClient}>
11        {/** ... */}
12      </QueryClientProvider>
13    </WagmiProvider>
14  )
15}

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

1import { useAccount, useConnect, useDisconnect } from 'wagmi';
2import { InjectedConnector } from 'wagmi/connectors/injected';
3
4const ConnectWallet = () => {
5  const { address, isConnected } = useAccount();
6  const { connect } = useConnect({
7    connector: new InjectedConnector(),
8  });
9  const { disconnect } = useDisconnect();
10
11  if (isConnected) {
12    return (
13      <div>
14        <p>Connected to {address}</p>
15        <button onClick={() => disconnect()}>Disconnect</button>
16      </div>
17    );
18  }
19
20  return <button onClick={() => connect()}>Connect Wallet</button>;
21};

与智能合约交互使用 Wagmi 和 Viem，你可以轻松地调用智能合约的方法。假设你有一个简单的 ERC-20 合约，你可以如下调用它的 balanceOf 方法：

1import { useContractRead } from 'wagmi';
2
3const contractConfig = {
4  address: '0xYourContractAddress',
5  abi: [
6    // 你的合约 ABI
7    {
8      constant: true,
9      inputs: [{ name: '_owner', type: 'address' }],
10      name: 'balanceOf',
11      outputs: [{ name: '', type: 'uint256' }],
12      type: 'function',
13    },
14  ],
15};
16
17const GetBalance = () => {
18  const { data, isError, isLoading } = useContractRead({
19    ...contractConfig,
20    functionName: 'balanceOf',
21    args: ['0xYourWalletAddress'],
22  });
23
24  if (isLoading) return <div>Loading...</div>;
25  if (isError) return <div>Error</div>;
26
27  return <div>Balance: {data?.toString()}</div>;
28};

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

1import { useContractEvent } from 'wagmi';
2
3const ListenToEvent = () => {
4  useContractEvent({
5    ...contractConfig,
6    eventName: 'Transfer',
7    listener: (event) => {
8      console.log('Event received:', event);
9    },
10  });
11
12  return <div>Listening to Transfer events...</div>;
13};

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

结语

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

使用 Wagmi 2.0 和 Viem 的教程

结语

评论区

相关推荐