{"content":{"title":"React的Web3modal/wagmi之Hooks使用（一）","body":"今天研究了一下Hooks，这里要注意，Hooks必须在WagmiConfig标签下的子组件内使用，所以建议把WagmiConfig放在启动界面。\r\n\r\n#### 1、[useAccount](https://wagmi.sh/react/hooks/useAccount)\r\n这个Hook主要是获取当前账户地址和链接状态\r\n\r\n有2个选填参数，都是回调函数，分别是onConnect和onDisconnet\r\n\r\n返回值如下：\r\n\r\n\r\n\r\n#### 2、[useNetwork](https://wagmi.sh/react/hooks/useNetwork)\r\n这个Hook可以获取当前链接的网络\r\n返回值chain是当前网络的信息，\r\n返回值chains是我们在wagmiConfig配置的所有链信息\r\n\r\n\r\n\r\n#### 3、[useBalance](https://wagmi.sh/react/hooks/useBalance)\r\n这个Hook主要就是获取账户余额，\r\n这个Hook有一个选填参数，是一个对象\r\n主要参数如下，\r\n还有一些其他参数，用的不多，大家自己看文档吧\r\n```\r\n{\r\n address: string //要查询余额的账户地址，必填，要不然返回余额数据为空\r\n chainId: number //链ID , 不填的话，默认以太坊主网\r\n token : string //代币的合约地址，如果不填默认该链的默认代币\r\n formatUnits :string //格式单位，以太的话有“ETH”、“gwei”、“wei”等\r\n watch: boolean //是否监测余额变化，并刷新余额\r\n onError(error):{} \r\n onSuccess(data):{}\r\n}\r\n```\r\n这里主要说一下chainId，我们在创建wagmiConfig时，不是要填一个chains数组嘛，里面有的链，这里chainId输入了才会生效哈。\r\n\r\n返回值如下：\r\n\r\n\r\n\r\n#### 4、[ useBlockNumber](https://wagmi.sh/react/hooks/useBlockNumber)\r\n这个Hook主要是获取当前的区块号\r\n需要传一个对象，对象和useBalance差不多，里面主要传一个链ID\r\n```\r\nconst blockNumber = useBlockNumber({\r\n chainId: 1,\r\n })\r\n```\r\n\r\n\r\n#### 5、[useConnect](https://wagmi.sh/react/hooks/useConnect) 和 [useDisconnect](https://wagmi.sh/react/hooks/useDisconnect)\r\nuseConnect主要是用来链接钱包的，和w3m-button 组件不同，useConnect不会出现选择钱包界面，而是直接链接。\r\n这个Hook会返回connect方法、connectAsync方法、connectors数组\r\n我们通过调用connect或者connectAsync方法来链接钱包，而方法需要传入一个参数，也就是connectors数组中的任意一个。\r\n\r\n\r\nuseDisconnect就是用来断开链接的\r\n\r\n\r\n```\r\nimport { Layout, Button, Row } from 'antd';\r\nimport React from 'react';\r\nimport { useAccount, useNetwork, useBalance, useConnect,useDisconnect } from 'wagmi'\r\n\r\nconst Test: React.FC = () => {\r\n const {address, isConnected, isDisconnected} = useAccount()\r\n const {chain} = useNetwork()\r\n const {data} = useBalance({address, chainId:chain?.id})\r\n const {connect, connectors} = useConnect()\r\n const {disconnect} = useDisconnect()\r\n\r\n return (\r\n \r\n {isConnected && data ? `地址：${address} 余额：${parseFloat((data[\"formatted\"])).toFixed(4)} ${data[\"symbol\"]}` : \"\"}\r\n \r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default Test;\r\n\r\n```\r\n\r\n\r\n#### 6、[useSwitchNetwork](https://wagmi.sh/react/hooks/useSwitchNetwork)\r\n这个Hook就是用于切换网络，\r\n主要有2个返回值，\r\nchains是wagmiConfig配置的所有链数组\r\nswitchNetwork就是切换网络的方法，改方法需要传入网络ID\r\n```\r\n const { chains, switchNetwork } = useSwitchNetwork()\r\n```\r\n\r\n```\r\n{chains.map((x) => (\r\n switchNetwork?.(x.id)}\r\n >\r\n {x.name}\r\n \r\n=))}\r\n```\r\n调用switchNetwork效果如下：\r\n\r\n\r\n#### 7、[useToken](https://wagmi.sh/react/hooks/useToken)\r\nuseToken用于获取某个ERC-20代币信息，并不是查询拥有代币余额哈，仅仅就是查询代币的名称，发行量等\r\n```\r\nconst {data} = useToken({\r\n address:'0x64Bc2cA1Be492bE7185FAA2c8835d9b824c8a194',\r\n chainId: 1,\r\n})\r\n```\r\n"},"author":{"user":"https://learnblockchain.cn/people/15134","address":null},"history":"bafkreiecugxqgmaxzrbemlpu6iwzndkzj32qhtigcdfytzr46mxaimxjpy","timestamp":1700120247,"version":1}