<EtherspotContractTransaction />

Introduction

This component allows you to tell TransactionKit that there will be a blockchain transaction performed, and it will be against a Smart Contract. This component is specifically tailored to Smart Contracts. If you are looking to send a simple transaction, then <EtherspotTransaction /> is what you may be looking for.

You can have 1 or many <EtherspotContractTransaction /> 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.
contractAddress	The destination Smart Contract address on the blockchain. Every Smart Contract has a unique address, including tokens.
abi	The "Application Binary Interface" of the Smart Contract... in other words, a dictionary of all the things we can do with this Smart Contract, and what data it needs.
method	The name of the function we want to call on the Smart Contract
params	The parameter(s), if any, we want to provide to the "method" above.
value	Optional: The amount of native token we want to send along. This can either be a string represented in Ether or as a BigNumber (see example).

How to use

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

Sending a token

Sending a token is a very common practice within the blockchain ecosystem. When you send a token, you are interacting with the Smart Contract for that token. For example - you might want to send 10 USDC to pay for something, or, you might want to send 200 SHIB to a friend. Here's how to 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 <EtherspotContractTransaction /> will send
    10 USDC to 0x0763d68dd586AB1DD8Be2e00c514B2ac8757453b by
    instrucing the USDC contract (0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48)
    via the "transfer" method, which takes two parameters; the
    address (who to transfer to) and the amount (how much USDC to send).
    Note the "value" is set to 0 here. We do not want to send any of
    our own native asset along with this transaction.
    */}
    <EtherspotContractTransaction
      contractAddress={'0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48'}
      abi={['function transfer(address, uint)']}
      methodName={'transfer'}
      params={['0x0763d68dd586AB1DD8Be2e00c514B2ac8757453b', '10']}
      value={'0'}
    />
    {/*
    You can add 1 or more <EtherspotContractTransaction />
    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 that interact with Smart Contract and tokens with TransactionKit.