demo地址
https://web03-1252477692.cos.ap-guangzhou.myqcloud.com/utils/eth-contract-request/index.html
import React, {useMemo, useState} from 'react'
import {config, Contract,ChainId, multicallClient} from "@chainstarter/multicall-client.js";
import {Button, Card, Form, Input, message, Select} from "antd";
import {useConnectWallet} from "../../connectors";
import {useWeb3React} from "@web3-react/core";
import {InjectedConnector} from "@web3-react/injected-connector";
import {getContract} from "../../utils";
import ERC721Abi from "../../ABI/ERC721.json";
import ERC20Abi from "../../ABI/erc20.json";
import ERC1155Abi from "../../ABI/ERC1155.json";
import { Radio, Collapse } from 'antd';
import './index.css'
import {cloneDeep} from "lodash";
import web3 from "web3";
import axios from "axios";
const { Panel } = Collapse;
const { TextArea } = Input;
config({
defaultChainId: ChainId.MATIC,
allowFailure: false,
})
export const formatAddress = address => address.slice(0, 6) + '...' + address.slice(-3)
export default function MulticallClient(){
const [chain, setChain] = useState(ChainId.BSC)
const connectWallet = useConnectWallet()
const {account, deactivate, library} = useWeb3React()
const [contractAddress, setContractAddress] = useState('')
const [abi, setAbi] = useState([])
const [abiStr, setAbiStr] = useState("")
const [readAbi, setReadAbi] = useState([])
const [writeAbi, setWriteAbi] = useState([])
const [mode, setMode] = useState('read') // read write
const getAbiApi = () => {
const contractAddress_ = contractAddress.toLowerCase()
return {
[ChainId.BSC] : `https://api.hecoinfo.com/api?module=contract&action=getabi&address=${contractAddress_}&apikey=YourApiKeyToken`,//去相关区块浏览器注册账号获得YourApiKeyToken
[ChainId.HECO] : `https://api.hecoinfo.com/api?module=contract&action=getabi&address=${contractAddress_}d&apikey=YourApiKeyToken`,
[ChainId.ETH] : `https://api.etherscan.io/api?module=contract&action=getabi&address=${contractAddress_}&apikey=YourApiKeyToken`,
[ChainId.MATIC]: `https://api.polygonscan.com/api?module=contract&action=getabi&address=${contractAddress_}&apikey=YourApiKeyToken`
}[chain]
}
const getAbi = () => {
if (!web3.utils.isAddress(contractAddress)) {
return alert("请输入正确的合约地址")
}
axios.get(getAbiApi()).then(res => {
try {
const abi_ = JSON.parse(res.data.result)
if (Array.isArray(abi_))
setAbi(abi_)
} catch (e){
}
})
}
useMemo(() => {
const readAbi_ = []
const writeAbi_ = []
for (let i = 0; i {
if (!abiStr){
setAbi([])
} else {
try {
const abi_ = JSON.parse(abiStr)
if (Array.isArray(abi_))
setAbi(abi_)
}catch (e){
}
}
}, [abiStr])
const onConnectWallMetaMask = () => {
const supportedChainIds = []
for (let i in ChainId) {
supportedChainIds.push(ChainId[i])
}
connectWallet(new InjectedConnector({
supportedChainIds,
}), chain).then((res) => {
})
}
const changeAbi = (e) => {
setAbiStr(e.target.value)
}
const changeChain = (e) => {
setChain(e)
deactivate()
}
const onQuery = (params, method) => {
console.log(params, method)
if (!web3.utils.isAddress(contractAddress)) {
return alert("请输入正确的合约地址")
}
const params_ = []
for (const key in params) {
params_.push(params[key])
}
const contract = new Contract(abi, contractAddress, chain)
multicallClient([contract[method](...params_)]).then(res => {
console.log(res)
const readAbi_ = cloneDeep(readAbi)
for (let i = 0; i {
if (!web3.utils.isAddress(contractAddress)) {
return alert("请输入正确的合约地址")
}
if (!account) {
return alert("请连接钱包")
}
const contract = getContract(library, abi, contractAddress)
const params_ = []
for (const key in params) {
params_.push(params[key])
}
contract.methods[method](...params_)
.send({
from: account
})
.on('receipt', async (_, receipt) => {
message.success('success')
})
.on('error', (err, receipt) => {
})
}
const selectAbi = (abi_) => {
setAbi(abi_)
setAbiStr(JSON.stringify(abi_))
}
return (
BSC({ChainId.BSC})
ETH({ChainId.ETH})
MATIC({ChainId.MATIC})
HECO({ChainId.HECO})
合约地址：
setContractAddress(e.target.value)}/> getAbi
ABI:
选择
selectAbi(ERC20Abi)}>ERC20
selectAbi(ERC721Abi)}>ERC721
selectAbi(ERC1155Abi)}>ERC1155
{
abi.length > 0 && (
setMode(e.target.value)} value={mode} style={{ marginBottom: 8 }} optionType="button"
buttonStyle="solid">
Read
Write
{
mode === 'read' && (
{
readAbi.map((item, index) => (
onQuery(e, item.name)}
autoComplete="off"
>
{
item.inputs.map((it, idx) => (
{it.name}({it.type})
))
}
Query
{item.result && {item.result}}
))
}
)
}
{
mode === 'write' && (
{
!account ? (
连接钱包
) : 已连接：{formatAddress(account)}
}
{
writeAbi.map((item, index) => (
onWrite(e, item.name)}
autoComplete="off"
>
{
item.inputs.map((it, idx) => (
{it.name}({it.type})
))
}
Write
{item.result && {item.result}}
))
}
)
}
)
}
)
}
在一些没认证的合约，区块链浏览器不显示，但是知道它的abi的话，通过此工具调用是很不错的
