abi-to-request

1. install

npm install abi-to-request

or

yarn add abi-to-request

2. Configuration commands

在package.json的scripts中添加

"client": "converted -d --npm etherjs --entry XXXXXX --chainId XX"

3. Commands Usage

-h					Help, output command
-d					Delete the client file before each execution
-js					The output is a file in javascript language
-bigNumber				If select etherjs, number outputs a BigNumber type, default It outputs a string
--npm <entry file path>			Which npm package to use to interact with the blockchain. value: web3js/etherjs
--entry <entry file path>		Abi json file entry path, If it is a folder, output all files, if it is a file, only output the file
--output <output file path>		Abi json file output path, default "./src/client"
--chainId <chainId>			Specify the blockchain network, all by default	
--contractName <contractName>		Specify the contract, the default is all

4. Hook Usage

|hook or other| usage | remarks | |---|---|---| |useReadContractRequest|XXX|XXX| |useRequest|XXX|XXX| |ContractRequestContextProvider|XXX|XXX|

5. Example

import { useState } from 'react';
import { ethers } from 'ethers';
import {
    ContractRequestContextProvider, 
    useReadContractRequest, 
    useRequest 
} from "abi-to-request"
import { 
    balanceOf, 
    decimals, 
    symbol, 
    transfer,
    transferETH 
} from './client/SimpleToken';

const Request = () => {
  const [_decimals] = useReadContractRequest(decimals)
  const [_symbol] = useReadContractRequest(symbol)

  const [_getBalanceOfAddress, setBalanceOfAddress] = useState("")
  const [_balanceOf, getBalanceOf] = useReadContractRequest(balanceOf, {
    arg: address ? { account: address } : undefined,
    isGlobalTransactionHookValid: true,
    onSuccess: (res) => {
      // do something
    }
  }, [address])

  const [transferrecipient, settransferrecipient] = useState("")
  const [transferAmount, settransferAmount] = useState("")

  const [_transfer] = useRequest(transfer, {
    isGlobalTransactionHookValid: false,
    onSuccessBefore: () => {
      // openLoading()
    },
    onTransactionSuccess: () => {
      // closeDelayLoading()
      alert(`Transfer ${transferrecipient} ${transferAmount} ${symbol} Success`)
    }
  }, [transferrecipient, transferAmount, symbol])

  const [_transferETH] = useRequest(transferETH, {
    isGlobalTransactionHookValid: false,
    onSuccessBefore: () => {
      // openLoading()
    },
    onTransactionSuccess: () => {
      // closeDelayLoading()
      alert(`Transfer ${transferrecipient} ${transferAmount} ${symbol} Success`)
    }
  }, [transferrecipient, transferAmount, symbol])

  return (
    <div>
        <div>{_decimals}</div>
        <div>{_symbol}</div>
        <div onClick={() => {
          _getBalanceOf({ account: getBalanceOfAddress })
        }}>getBalanceOf</div>
        <input 
            placeholder={"account"} 
            onChange={(e) => { setBalanceOfAddress(e.target.value) }} 
        />
        <div>
            {_balanceOf ? ethers.utils.formatUnits(_balanceOf, decimals || 18) : ""} {symbol}
        </div>
        <div onClick={() => {
          _transfer({
            recipient: transferrecipient,
            amount: transferAmount
          })

          //or 

          transfer({
            recipient: transferrecipient,
            amount: transferAmount
          }).then(res=>{
            if(res.retureValue){
              // something
            }
          })
        }}>transfer</div>
        <input 
            placeholder={"recipient"} 
            onChange={(e) => { settransferrecipient(e.target.value) }} 
        />
        <input 
            placeholder={"amount"} 
            onChange={(e) => { 
                settransferAmount(ethers.utils.parseEther(e.target.value) as any) 
            }}
        />
        <div onClick={() => {
          _transferETH({
            recipient: transferrecipient,
            amount: transferAmount
          }, {
            from: "xxxxxx",
            value: "1000000",
            gasLimit: "12312312",
            gasPrice: "23324324324"
          })
        }}>transferETH</div>
    </div>
  )
}

const App = () => {
  return (
    <ContractRequestContextProvider
      library={web3Info.library}
      abis={abis}
      transactionHook={{
        onSuccessBefore: () => {
          // openLoading() something
        },
        onFinish: () => {
          // closeDelayLoading() something
        }
      }}
    >
      <Request />
    </ContractRequestContextProvider >
  );
}

export default App;