深入解析Hooks在WagmiConfig下的使用技巧与参数详解-token钱包官方网站

大家好！今天咱们探讨了Hooks的使用，发现它需要在WagmiConfig标签的子组件中应用，因此建议将WagmiConfig放置在启动界面中。接下来，我会为大家详细介绍这些Hooks。

useAccount

这个功能非常实用，主要用来获取账户的地址和链接状态。它提供了两个可选的回调函数参数，一个是onConnect，一个是onDisconnect。以开发钱包交互小应用为例，通过onConnect参数，我们能在用户成功连接账户后立即显示连接成功的提示，让用户清楚状态的变化；而onDisconnect参数则能在连接断开时及时通知用户，从而提升用户体验。

使用时，只需在项目中加入该钩子，然后根据具体需求配置回调函数，账户状态的监控便能轻松完成。

useNetwork

这个Hook能用来获取当前连接的网络详情。其中，chain代表当前网络的具体信息，而chains则包含了在wagmiConfig中设置的所有链的信息。若要开发一个支持多链的钱包应用，可以直接使用它来获取所有链的信息，进而向用户展示不同链的详情，并允许用户自主选择所需的链。

在测试不同网络时，这个钩子能迅速展示网络现状，开发者可据此迅速作出调整与改进。

{
    address: string //要查询余额的账户地址，必填，要不然返回余额数据为空
    chainId: number //链ID , 不填的话，默认以太坊主网
    token : string  //代币的合约地址，如果不填默认该链的默认代币
    formatUnits :string //格式单位，以太的话有“ETH”、“gwei”、“wei”等
    watch: boolean //是否监测余额变化，并刷新余额
    onError(error):{} 
    onSuccess(data):{}
}

useBalance

这个Hook是用来查询账户余额的。它包含一个可选的参数对象，其中有一个关键参数叫做chainId。在创建wagmiConfig时，需要填写chains数组，只有数组中存在的链，输入对应的chainId才能起作用。举个例子，在开发去中心化金融应用时，若要精确显示用户在不同链上的账户余额，这个参数就显得尤为关键。

通过这个钩子函数的返回结果，开发者可以方便地获得账户的余额信息，确保所展示的数据精确且无误差。

useBlockNumber

此Hook主要用于获取当前区块编号。使用时需传入一个对象，与useBalance所传对象相似，主要只需传递链ID即可。对于开发需实时监控区块更新的应用来说，尤为实用。例如，在区块链浏览器应用中，通过它获取区块编号，可以迅速更新页面显示，使用户能够看到最新的区块信息。

const blockNumber = useBlockNumber({
    chainId: 1,
  })

根据实际使用场景传对应链ID，就能顺利获取对应链的区块号。

useConnect 和 useDisconnect

useConnect专门用于钱包连接，与w3m - button组件不同，它不显示钱包选择界面，直接实现连接。它能提供connect方法、connectAsync方法和connectors数组。我们只需调用connect或connectAsync方法，并传入connectors数组中的任意一个参数，即可完成钱包连接。在开发简洁型钱包连接功能时，使用它非常合适。

useDisconnect操作简便，其名即其用，专司切断连接之职。若用户需与钱包断开连接，只需调用此方法即可。

useSwitchNetwork

这个钩子功能是用于网络切换的。它提供了两个关键输出，一个是chains，它包含了wagmiConfig中配置的所有链路列表，另一个是switchNetwork，这是一个用于切换网络的操作，使用时需提供网络ID。若项目需求是多链支持，通过这个钩子，用户可以方便地在不同链路间进行切换。

import { Layout, Button, Row } from 'antd';
import React from 'react';
import { useAccount, useNetwork, useBalance, useConnect,useDisconnect     } from 'wagmi'
const Test: React.FC = () => {
  const {address, isConnected, isDisconnected} = useAccount()
  const {chain} = useNetwork()
  const {data} = useBalance({address, chainId:chain?.id})
  const {connect, connectors} = useConnect()
  const {disconnect} = useDisconnect()
  return (
    <Layout>
         {isConnected && data ? `地址：${address}  余额：${parseFloat((data["formatted"])).toFixed(4)} ${data["symbol"]}` : ""}
         <Row>
            <Button type="primary" hidden={!isDisconnected} onClick={()=>connect({connector:connectors[2]})}>Connect Wallet</Button>
            <Button type="primary" danger hidden={!isConnected} onClick={()=>disconnect()}>Disconnect</Button>
         </Row>
    </Layout>
  );
};
export default Test;

用户若遇到网络连接不匹配的情况，可使用switchNetwork这一功能，轻松快速地转换至适宜的网络环境。

useToken

这个Hook的功能是获取特定ERC-20代币的相关数据，需注意的是，它并不用于查询代币持有量，而是用来查询代币的名称、发行量等信息。在开发展示加密资产信息的软件时，可以利用这个Hook来获取代币的基本信息，并向用户展示。

 const { chains, switchNetwork } = useSwitchNetwork()

我们只要传入对应的代币信息，就能获取代币的相关数据。

{chains.map((x) => (
          <button
            disabled={!switchNetwork || x.id === chain?.id}
            key={x.id}
            onClick={() => switchNetwork?.(x.id)}
          >
            {x.name}
          </button>
=))}

亲们，关于这些钩子在具体项目中的应用顺序，你们更偏爱哪一个？觉得这篇文章有价值，不妨点个赞，也欢迎转发！

相关推荐