wagmi使用方法 - 技术栈

Wagmi 是一个用于构建与以太坊及其他区块链交互的 React 应用程序的库。它提供了一组工具和钩子，帮助开发者简化钱包连接、状态管理和智能合约交互等功能。

连接一个以太坊钱包并获取用户的地址：

typescript 复制代码

import React from 'react';
import { WagmiConfig, createClient, useAccount, ConnectButton } from 'wagmi';

const client = createClient();

function App() {
  return (
    <WagmiConfig client={client}>
      <div>
        <h1>欢迎使用 Wagmi</h1>
        <ConnectButton />
        <AccountInfo />
      </div>
    </WagmiConfig>
  );
}

function AccountInfo() {
  const { isConnected, address } = useAccount();

  return (
    <div>
      {isConnected ? (
        <p>连接的地址: {address}</p>
      ) : (
        <p>请连接您的钱包。</p>
      )}
    </div>
  );
}

export default App;

常用属性：

typescript 复制代码

useAccount
//isConnected: 布尔值，表示用户是否已连接钱包。
//address: 当前连接的以太坊地址。
//connector: 当前连接的钱包类型。

useProvider/useSigner
//data: 当前的钱包提供者/签名者
//isLoading: 布尔值，表示提供者是否正在加载。

useBalance
//data: 用户账户的余额信息。
//isLoading: 布尔值，表示余额信息是否正在加载。

useContract
//contract: 合约实例，用于与智能合约交互。
//isLoading: 布尔值，表示合约是否正在加载。

常用方法：

typescript 复制代码

//connect() 用于连接用户的钱包，通常与 ConnectButton 一起使用
const { connect } = useAccount();
connect(connector);

//disconnect()
const { disconnect } = useAccount();
disconnect();

//readContract() 读取智能合约数据
const { read } = useContract({
  address: '合约地址',
  abi: 合约ABI,
});
const result = read({ args: [参数] });

//writeContract() 写入数据
const { write } = useContract({
  address: '合约地址',
  abi: 合约ABI,
});
write({ args: [参数] });

综合示例1：

typescript 复制代码

import React from 'react';
import { WagmiConfig, createClient, useAccount, useBalance, ConnectButton } from 'wagmi';

const client = createClient();

function App() {
  const { isConnected, address, disconnect } = useAccount();
  const { data: balance, isLoading } = useBalance({ address });

  return (
    <WagmiConfig client={client}>
      <div>
        <h1>欢迎使用 Wagmi</h1>
        <ConnectButton />
        {isConnected ? (
          <div>
            <p>连接的地址: {address}</p>
            {isLoading ? <p>加载余额...</p> : <p>余额: {balance.formatted} ETH</p>}
            <button onClick={disconnect}>断开连接</button>
          </div>
        ) : (
          <p>请连接您的钱包。</p>
        )}
      </div>
    </WagmiConfig>
  );
}

export default App;

综合示例2：

typescript 复制代码

import React from 'react';
import { WagmiConfig, createClient, useAccount, useContract, useSigner, ConnectButton } from 'wagmi';

const client = createClient();

const contractAddress = '你的合约地址'; // 替换为你的合约地址
const contractABI = [
  // 替换为你的合约 ABI
  {
    "inputs": [{ "internalType": "uint256", "name": "_value", "type": "uint256" }],
    "name": "setValue",
    "outputs": [],
    "stateMutability": "nonpayable",
    "type": "function"
  }
];

function App() {
  const { isConnected } = useAccount();
  const { data: signer } = useSigner();
  
  const contract = useContract({
    address: contractAddress,
    abi: contractABI,
    signerOrProvider: signer,
  });

  const handleWrite = async () => {
    try {
      const tx = await contract.setValue(42); // 调用合约的 setValue 方法，传入参数 42
      await tx.wait(); // 等待交易确认
      alert('交易成功！');
    } catch (error) {
      console.error('交易失败:', error);
      alert('交易失败！');
    }
  };

  return (
    <WagmiConfig client={client}>
      <div>
        <h1>使用 Wagmi 调用智能合约</h1>
        <ConnectButton />
        {isConnected ? (
          <div>
            <button onClick={handleWrite}>调用 setValue</button>
          </div>
        ) : (
          <p>请连接您的钱包。</p>
        )}
      </div>
    </WagmiConfig>
  );
}

export default App;