<EtherspotTransaction />

Introduction

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

Property	Description
id	Optional: 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.
to	The 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.
value	This can either be a string represented in Ether or as a BigNumber (see example).
data	Optional: 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.

How to use

Below is an example of how to use the <EtherspotTransaction /> component. We have given two exampels, one that is a simple transaction and one that calls a method on a Smart Contract.

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>

🎉 Congratulations!

You have learned how to send transactions with TransactionKit. Remember to check out our CodeSandbox to see this in action. You can also fork it and try it out yourself!

👉 View or fork CodeSandbox