<EtherspotBatches />

The beginning of a transaction. Indicates that we are creating one or more batches of transactions.

Introduction

The <EtherspotBatches /> component is, at its simplest, a way to indicate to TransactionKit that you're about to start defining one or more <EtherspotBatch /> components which may contain one or more <EtherspotTransaction /> or <EtherspotContractTransaction /> components.

This tag helps TransactionKit keep itself organised, takes various component props to customise the transactions inside it and returns events when we need to estimate.

The <EhterspotBatches /> component takes any child components like taxt, buttons etc.

Component Properties

Property	Description
skip	Optional: Takes a boolean value of true or false. Set skip={true} when you would like to skip these batches from being estimated and sent.
id	Optional: An ID (which can be a string, number etc) that allows you to define the ID of this batches group. We will use this ID if you provide it internally, but also allows you to use it to keep track elsewhere within your app.
onEstimated	Optional: Takes a function which accepts a parameter which is an estimation object. This is fired when an transaction cost estimation has been completed of all the contained <EtherspotBatch /> components. See the code example below to see how this is used.

How to use

Below is an example of how to use the <EtherspotBatches /> component.

// 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 skip={true} onEstimated={onEstimateReceiver}>
  <EtherspotBatch>
    <EtherspotTransaction to={address0} value={amount0} />
  </EtherspotBatch>
  <EtherspotBatch>
    <EtherspotTransaction to={address1} value={amount1} />
    <EtherspotTransaction to={address2} value={amount2} />
  </EtherspotBatch>
</EtherspotBatches>

🎉 Congratulations!

You can now see how we us the <EtherspotBatches /> tag to enclose one or more of <EtherspotBatch /> tags.