Skip to main content

​
Intro

This component allows you to tell TransactionKit that there will be a blockchain transaction performed. This TransactionKit component is likely to be the one you use the most to send a basic transaction, such as sending ETH (or the native token on any other chain we support) to another blockchain address on the same chain. You can have 1 or many EtherspotTransaction components inside an EtherspotBatch component to be sent at the same time (i.e. as part of the same “batch”).

​
Component Properties

PropertyDescription
idOptional: An ID (which can be a string, number etc) that allows you to define the ID of this batch 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.
toThe destination blockchain address, on the same chain. For example, if you are sending from the Polygon blockchain, make sure you sent it to another address on the Polygon blockchain.
valueThis can either be a string represented in Ether or as a BigNumber (see example).
dataOptional: An optional data object which can be read by the recipient (the to address), if it is a Smart Contract, to perform additional functions as part of the transaction (see example), or, to just store an arbitrary piece of data along with the transaction.

​
Sending some ETH

Sending some ETH (or any other native token for another blockchain) is one of the most common transactions to performed - for example, sending some ETH to a friend. Here is how you can do that. 
// 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>

​
Sending a transaction with a data object

Another type of transaction is sending a transaction with some data. Other dapps and services may read this data, or if you’re sending some ETH (or other native token) to a Smart Contract, the Smart Contract may use this data to perform additional functions. Here how you can send some arbitrary data along with your transaction. 
// 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>