在Wagmi中向usePrepareContractWrite传递动态参数

Question

使用usePrepareContractWrite处理逻辑流

const { config: contractWriteConfig } = usePrepareContractWrite({
    ...contractConfig,
    functionName: 'mint',
    args: [numToMint],
    overrides: {
        value: ethers.utils.parseEther(payment),  //how do I dynamically change this number on the fly to string
      },
  });

const {
    data: mintData,
    write: mintBee,
    isLoading: isMintLoading,
    isSuccess: isMintStarted,
    error: mintError,
  } = useContractWrite(contractWriteConfig);

简而言之，我用一个句柄事件来表示这个数字的薄荷。之前，我可以将numToMint乘以成本金额，并将其转换为另一个函数中的字符串。现在，对于usePrepareContractWrite()，我不确定如何处理这个问题，因为我不能将参数传递给"mintBee“写函数。任何例子都是非常感谢的！

Answer 1

基本上，@deepak是正确的，但是他的useEffect将触发一个无限循环，我们也可以通过使用useDebounce (如瓦格米博士中所建议的)使其更好一些。

import * as React from 'react'
import { ethers } from 'ethers'
import { usePrepareContractWrite, useContractWrite } from 'wagmi'

import { useDebounce } from './useDebounce'
import contractConfig from './contract-config'

export default function MintComponent() {
  const [numToMint, setNumToMint] = React.useState(0)
  const [payment, setPayment] = React.useState(0)

  const debouncedNumToMint = useDebounce(numToMint)
  const debouncedPayment = useDebounce(payment)

  const { config: contractWriteConfig } = usePrepareContractWrite({
    ...contractConfig,
    functionName: 'mint',
    args: [debouncedNumToMint],
    overrides: {
      value: ethers.utils.parseEther(debouncedPayment.toString()),
    },
  })

  const { write: mintBee } = useContractWrite(contractWriteConfig)

  return (
    <form
      onSubmit={e => {
        e.preventDefault()
        mintBee?.()
      }}>
      <label htmlFor='payment'>Payment</label>
      <input
        id='payment'
        type='number'
        onChange={e => setPayment(e.target.value)}
        value={debouncedPayment}
      />
      <label htmlFor='numToMint'>Num to mint</label>
      <input
        id='numToMint'
        type='number'
        onChange={e => setNumToMint(e.target.value)}
        value={debouncedNumToMint}
      />

      <button disabled={!mintBee}>Mint</button>
    </form>
  )
}

Answer 2

我认为这应该是可行的，因为状态的改变将触发重登的钩子。

const [numToMint, setNumToMint] = React.useState()

const { config: contractWriteConfig } = usePrepareContractWrite({
    ...contractConfig,
    functionName: 'mint',
    args: [numToMint],
    overrides: {
        value: ethers.utils.parseEther(payment)
      },
  });

const {
    data: mintData,
    write: mintBee,
    isLoading: isMintLoading,
    isSuccess: isMintStarted,
    error: mintError,
  } = useContractWrite(contractWriteConfig);

React.useEffect(() =>{
    setNumToMint((numToMint * costAmount).toString())
},[numToMint])