​
Intro

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

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.
contractAddressThe destination Smart Contract address on the blockchain. Every Smart Contract has a unique address, including tokens.
abiThe “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.
methodThe name of the function we want to call on the Smart Contract
paramsThe parameter(s), if any, we want to provide to the “method” above.
valueOptional: 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).

​
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.```javascript

// 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>

​
Intro

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

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.
contractAddressThe destination Smart Contract address on the blockchain. Every Smart Contract has a unique address, including tokens.
abiThe “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.
methodThe name of the function we want to call on the Smart Contract
paramsThe parameter(s), if any, we want to provide to the “method” above.
valueOptional: 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).

​
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.```javascript

// 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>