<EtherspotContractTransaction />

// In your functional component or elsehwere
const onEstimateReceiver = (estimationData) => {
  console.log(
    'This is the cost estimate for all the batches',
    estimationData,
  );
}

// In your render or as a component...
<EtherspotBatches onEstimated={onEstimateReceiver}>
  <EtherspotBatch>
    {/*
    The following <EtherspotContractTransaction /> will send
    10 USDC to 0x0763d68dd586AB1DD8Be2e00c514B2ac8757453b by
    instrucing the USDC contract (0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48)
    via the "transfer" method, which takes two parameters; the
    address (who to transfer to) and the amount (how much USDC to send).
    Note the "value" is set to 0 here. We do not want to send any of
    our own native asset along with this transaction.
    */}
    <EtherspotContractTransaction
      contractAddress={'0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48'}
      abi={['function transfer(address, uint)']}
      methodName={'transfer'}
      params={['0x0763d68dd586AB1DD8Be2e00c514B2ac8757453b', '10']}
      value={'0'}
    />
    {/*
    You can add 1 or more <EtherspotContractTransaction />
    components here, and they will all be executed
    together and at the same time (i.e. as part of
    this batch).
     */}
  </EtherspotBatch>
</EtherspotBatches>