​
Intro

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 . The EtherspotBatches component takes any child components like text, buttons etc.

​
Component Properties

PropertyDescription
viaMust be set to “etherspot-prime” to ensure the batches are sent via prime.
skipOptional: Takes a boolean value of true or false. Set skip= when you would like to skip these batches from being estimated and sent.
idOptional: 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.
onEstimatedOptional: 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.
onSent
// 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>