wagmi的基本使用方法

1.安装

yarn add wagmi ethers@^5
yarn add @wagmi/core

2.基本使用方法

import './App.css';
import { Profile } from './pages/connectWallect';

import { WagmiConfig, createClient, configureChains } from 'wagmi';
import { publicProvider } from 'wagmi/providers/public';
import { InjectedConnector } from "@wagmi/core";
//导出你想要支持的链，InjectedConnector(连接器)默认支持mainnet，goerli,
//更新以后，mainnet，goerli也到导出
import {
  mainnet,
  bsc,
  bscTestnet,
  polygon,
  polygonMumbai,
  avalanche,
  avalancheFuji,
  fantom,
  fantomTestnet,
  arbitrumGoerli,
  arbitrum,
  metisGoerli,
  filecoinCalibration,
  filecoin,
  metis,
  okc,
  zkSync,
  zkSyncTestnet,
  optimism,
  optimismGoerli
} from "wagmi/chains";
const { chains ,provider } = configureChains(
  [
    mainnet,
    bsc,
    bscTestnet,
    polygon,
    polygonMumbai,
    avalanche,
    avalancheFuji,
    optimism,
    optimismGoerli,
    fantom,
    fantomTestnet,
    okc,
    arbitrumGoerli,
    arbitrum,
    metis,
    metisGoerli,
    filecoin,
    filecoinCalibration,
    zkSync,
    zkSyncTestnet
  ],
  [publicProvider()],
)

/**
 * Provider
 * 是一个链接以太坊网络的抽象，用于查询以太坊网络状态或者发送更改状态的交易
 * Metamask注入的window.ethereum 就是一个Provider,一个RPC节点也是一个Provider,
 * 通过Provider，我们就有了访问区块链的能力。
 * 可以将此Provider类比成Redux的Provider,通过Provider提供的属性或者方法
 * Consumer可以很好的获取到全局状态以及改变全局状态的方法
 *
 *
 * RPC的最终目的，实现调用远程方法像调用本地方法一样
 */

const client = createClient({
  autoConnect: true,
  connectors: [
    new InjectedConnector({
      chains,
      options: {
        shimChainChangedDisconnect: true,
        shimDisconnect: true,
      }
    })
  ],
  provider ,//必须有provider,否则调用wagmi的hook的时候，报错
})
/**
 *
 * InjectedConnector 钱包连接器
 * window.ethereum 是以太坊网络提供者
 * 例如 MetaMask 是一个浏览器插件，这个浏览器插件会向浏览器注入window.ethereum 浏览器的提供者
 *     如果浏览器中喂安装,metamask插件，window.ethereum的值时undefined,可以使用window.ethereum检查浏览器中该是否安装了metamask
 *    if (typeof window.ethereum !== 'undefined') {
 *      console.log('√ metamask');
 *    }
 *
 *
 * 凡是将window.ethereum 注入浏览器的钱包，都可以用InjectedConnector连接器，与该钱包链接
 */

console.log(publicProvider)


function App() {

  return (
    <WagmiConfig client={client}>
      <div className="App">
        <Profile />
      </div>
    </WagmiConfig>

  );
}

export default App;

链接钱包的组件

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


export function Profile() {
  const { address, isConnected } = useAccount();
  const { connect, connectors, error, isLoading, pendingConnector } = useConnect({
    connector: new InjectedConnector(),
    onMutate(connector) {
      console.log('Before Connect', connector)
    },
    onSuccess(data) {
      console.log('Connect', data)
    },
    onSettled(data, error) {
      console.log('Settled', { data, error })
    },
    onError(error) {
      console.log('Error', error)
    }
  })
  const { disconnect } = useDisconnect();


  //连接以太坊钱包
  const connectToMetaMask = useCallback(() => {
    if (typeof window.ethereum !== "undefined") {
      if (!isConnected) {
        connect();
      }
    } else {
      alert("MetaMask is not installed!");
    }
  }, [connect, isConnected]);

  console.log(address, connectors)


  return (
    <div>
      {
        isConnected ? address : <button onClick={connectToMetaMask}>链接钱包</button>
      }
      <button onClick={() => { disconnect() }}>退出钱包</button>
      {connectors.map((connector) => (
        <button
          disabled={!connector.ready}
          key={connector.id}
          onClick={() => connect({ connector })}
        >
          {connector.name}
          {!connector.ready && ' (unsupported)'}
          {isLoading &&
            connector.id === pendingConnector?.id &&
            ' (connecting)'}
        </button>
      ))}

      {error && <div>{error.message}</div>}
    </div>
  )

}

没有provider时的报错信息如下：