react-moralis Web3 API封装一览useNativeBalance到useNFTBalances的8个Hooks【免费下载链接】react-moralisHooks and components to use Moralis in a React app项目地址: https://gitcode.com/gh_mirrors/re/react-moralisreact-moralis 是一个让 React 应用轻松使用 Moralis 的 Hooks 与组件库。本文带你快速了解它提供的 8 个 Web3 API 封装 Hooks——从useNativeBalance到useNFTBalances——如何用一行 Hook 查询原生币余额、交易记录和 NFT 持仓等链上数据无需手写异步请求逻辑。为什么需要 Web3 API 封装 Hooks直接调用 Moralis Web3 API 时你需要自己处理异步请求、加载状态和错误边界。而 react-moralis 把这些调用封装成了 React Hooks源码位于 src/hooks/web3ApiWrappers/每个 Hook 都返回统一的字段返回字段说明data请求结果依赖变化时自动更新error请求失败时的错误对象isLoading/isFetching加载状态方便渲染骨架屏或按钮禁用fetchXXX()手动重新拉取数据的函数更贴心的是所有 Hooks 会自动读取当前连接的钱包地址account和链 IDchainId。不传任何参数时它默认就帮你拉取当前钱包的数据真正做到零配置。8 个 Web3 API Hooks 速查表Hook用途常用参数useNativeBalance查询原生币余额ETH、BNB 等address、chainuseNativeTransactions查询原生币交易记录address、chain、from_blockuseERC20Balances查询 ERC-20 代币余额列表address、chainuseERC20Transfers查询 ERC-20 转账历史address、chain、token_addressuseNFTBalances查询钱包持有的全部 NFTaddress、chainuseNFTTransfers查询 NFT 转账记录address、chainuseTokenPrice查询代币的美元价格address、chainuseApiContract只读调用合约函数address、abi、functionName 命名规律很好记Balances系列查「现在有什么」Transfers系列查「历史上动过什么」。最快上手一行 Hook 拿到余额假设应用已经用MoralisProvider包裹见 MoralisProvider 源码获取当前钱包的 ETH 余额只需一行const { data } useNativeBalance(); // data.formatted 就是人类可读的余额如 0.5 ETH这个 Hook 会自动用当前钱包地址和链 ID 发起请求并内置了余额格式化工具实现见 useNativeBalance.ts连把 18 位小数转成可读金额这种脏活都替你做了。实战场景NFT 钱包列表展示用户 NFT 时useNFTBalances会自动解析每条 NFT 的元数据并提取出图片地址image内部走 resolveIPFS.ts 把 IPFS 链接解析为可访问的 URLconst { data } useNFTBalances(); return data?.result.map((nft) ( img key{nft.token_id} src{nft.image} alt{nft.token_id} / ));配合useTokenPrice还能顺手算出每个 NFT 或代币的美元价值两个 Hook 拼在一起就是一个简易「钱包总资产」页面。进阶技巧手动触发与指定地址指定任意地址查询所有 Hooks 都接受address参数不传则用当前连接的钱包const { data } useNativeBalance({ address: 0x1234..., chain: eth });关闭自动请求改为手动触发第二个参数options可以控制请求时机适合做「查询按钮」类交互const { data, fetchNativeTransactions } useNativeTransactions( {}, { autoFetch: false } ); // 点击按钮时才拉取 button onClick{fetchNativeTransactions}刷新交易/button源码结构指引想深入阅读实现关键路径如下Hooks 统一出口src/hooks/web3ApiWrappers/index.ts基础请求封装useMoralisWeb3Api.ts各 Hook 实现useNFTBalances.ts、useTokenPrice.ts余额/价格格式化formatters.ts小结react-moralis 的这 8 个 Web3 API Hooks 覆盖了钱包应用最常用的查询场景余额、交易、NFT、代币价格。它们统一了返回结构、自动注入钱包上下文、内置数据格式化让新手也能几行代码搭出链上数据页面。建议配合官方文档 README.md 中useMoralis()的鉴权部分一起使用——先登录钱包再查链上数据体验最顺滑。【免费下载链接】react-moralisHooks and components to use Moralis in a React app项目地址: https://gitcode.com/gh_mirrors/re/react-moralis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 react-moralis Web3 API封装一览：useNativeBalance到useNFTBalances的8个Hooks
react-moralis Web3 API封装一览useNativeBalance到useNFTBalances的8个Hooks【免费下载链接】react-moralisHooks and components to use Moralis in a React app项目地址: https://gitcode.com/gh_mirrors/re/react-moralisreact-moralis 是一个让 React 应用轻松使用 Moralis 的 Hooks 与组件库。本文带你快速了解它提供的 8 个 Web3 API 封装 Hooks——从useNativeBalance到useNFTBalances——如何用一行 Hook 查询原生币余额、交易记录和 NFT 持仓等链上数据无需手写异步请求逻辑。为什么需要 Web3 API 封装 Hooks直接调用 Moralis Web3 API 时你需要自己处理异步请求、加载状态和错误边界。而 react-moralis 把这些调用封装成了 React Hooks源码位于 src/hooks/web3ApiWrappers/每个 Hook 都返回统一的字段返回字段说明data请求结果依赖变化时自动更新error请求失败时的错误对象isLoading/isFetching加载状态方便渲染骨架屏或按钮禁用fetchXXX()手动重新拉取数据的函数更贴心的是所有 Hooks 会自动读取当前连接的钱包地址account和链 IDchainId。不传任何参数时它默认就帮你拉取当前钱包的数据真正做到零配置。8 个 Web3 API Hooks 速查表Hook用途常用参数useNativeBalance查询原生币余额ETH、BNB 等address、chainuseNativeTransactions查询原生币交易记录address、chain、from_blockuseERC20Balances查询 ERC-20 代币余额列表address、chainuseERC20Transfers查询 ERC-20 转账历史address、chain、token_addressuseNFTBalances查询钱包持有的全部 NFTaddress、chainuseNFTTransfers查询 NFT 转账记录address、chainuseTokenPrice查询代币的美元价格address、chainuseApiContract只读调用合约函数address、abi、functionName 命名规律很好记Balances系列查「现在有什么」Transfers系列查「历史上动过什么」。最快上手一行 Hook 拿到余额假设应用已经用MoralisProvider包裹见 MoralisProvider 源码获取当前钱包的 ETH 余额只需一行const { data } useNativeBalance(); // data.formatted 就是人类可读的余额如 0.5 ETH这个 Hook 会自动用当前钱包地址和链 ID 发起请求并内置了余额格式化工具实现见 useNativeBalance.ts连把 18 位小数转成可读金额这种脏活都替你做了。实战场景NFT 钱包列表展示用户 NFT 时useNFTBalances会自动解析每条 NFT 的元数据并提取出图片地址image内部走 resolveIPFS.ts 把 IPFS 链接解析为可访问的 URLconst { data } useNFTBalances(); return data?.result.map((nft) ( img key{nft.token_id} src{nft.image} alt{nft.token_id} / ));配合useTokenPrice还能顺手算出每个 NFT 或代币的美元价值两个 Hook 拼在一起就是一个简易「钱包总资产」页面。进阶技巧手动触发与指定地址指定任意地址查询所有 Hooks 都接受address参数不传则用当前连接的钱包const { data } useNativeBalance({ address: 0x1234..., chain: eth });关闭自动请求改为手动触发第二个参数options可以控制请求时机适合做「查询按钮」类交互const { data, fetchNativeTransactions } useNativeTransactions( {}, { autoFetch: false } ); // 点击按钮时才拉取 button onClick{fetchNativeTransactions}刷新交易/button源码结构指引想深入阅读实现关键路径如下Hooks 统一出口src/hooks/web3ApiWrappers/index.ts基础请求封装useMoralisWeb3Api.ts各 Hook 实现useNFTBalances.ts、useTokenPrice.ts余额/价格格式化formatters.ts小结react-moralis 的这 8 个 Web3 API Hooks 覆盖了钱包应用最常用的查询场景余额、交易、NFT、代币价格。它们统一了返回结构、自动注入钱包上下文、内置数据格式化让新手也能几行代码搭出链上数据页面。建议配合官方文档 README.md 中useMoralis()的鉴权部分一起使用——先登录钱包再查链上数据体验最顺滑。【免费下载链接】react-moralisHooks and components to use Moralis in a React app项目地址: https://gitcode.com/gh_mirrors/re/react-moralis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考