<EtherspotTransaction />

// 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 <EtherspotTransaction /> will send
    0.01 ETH to 0x0763d68dd586AB1DD8Be2e00c514B2ac8757453b.
    */}
    <EtherspotTransaction
      to={'0x0763d68dd586AB1DD8Be2e00c514B2ac8757453b'}
      value={'0.01'}
    />
    {/*
    You can add 1 or more <EtherspotTransaction />
    components here, and they will all be executed
    together and at the same time (i.e. as part of
    this batch).
     */}
  </EtherspotBatch>
</EtherspotBatches>

// 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 <EtherspotTransaction /> will send
    0.01 ETH to 0x0763d68dd586AB1DD8Be2e00c514B2ac8757453b
    and will include a data object containing the the
    message 'i am a teapot'.
    */}
    <EtherspotTransaction
      to={'0x0763d68dd586AB1DD8Be2e00c514B2ac8757453b'}
      value={'0.01'}
      data={'i am a teapot'}
    />
    {/*
    You can add 1 or more <EtherspotTransaction />
    components here, and they will all be executed
    together and at the same time (i.e. as part of
    this batch).
     */}
  </EtherspotBatch>
</EtherspotBatches>