In this example we’re going to learn how to send a native token using transaction kit. This is the most basic Transaction Kit tutorial and a great place to start.

We have a code sandbox for this example which you can fork here.

​
Bootstrap a react app

Let’s keep it simple and use create-react-app here. Run the following command in a directory of your choice:

npm
npx create-react-app txkit-quickstart

The above command will install and bootstrap a basic React App into a directory called txkit-quickstart. Once the installation has finished, change directory into your newly bootstrapped React app by typing:

npm
cd txkit-quickstart

Make sure you have the Transaction Kit and Ethers (version 5.4.0) packages installed, then we’ll edit two files. App.js and index.js.

​
index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { EtherspotTransactionKit } from "@etherspot/transaction-kit";
import { ethers } from "ethers";

import App from "./App";

const randomWallet = ethers.Wallet.createRandom();
const providerWallet = new ethers.Wallet(randomWallet.privateKey);
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <EtherspotTransactionKit
      provider={providerWallet} /* The random wallet we created above */
      chainId={80001} /* Polygon Testnet - Mumbai */
    >
      <App />
    </EtherspotTransactionKit>
  </StrictMode>
);

​
App.js

import "./styles.css";
import {
  EtherspotBatches,
  EtherspotBatch,
  EtherspotTransaction,
  useEtherspotTransactions,
  useWalletAddress
} from "@etherspot/transaction-kit";

import React from "react";

export default function App() {

    // Let's create some variables to store the address we want to send to and amount we want to send
    const [address, setAddress] = React.useState("0x271Ae6E03257264F0F7cb03506b12A027Ec53B31");
    const [amount, setAmount] = React.useState("0.001");
    
    /* 
       We'll use the estimate and send hooks to calculate how much gas 
       the batch of transactions will cost to send, and then send to send 
       the batch of transactions to Etherspot to relay to the network.
    */
    const { estimate, send } = useEtherspotTransactions();

    /* 
       useWalletAddress is used to check the Etherspot smart wallet address
       which we will create based off of the provider passed in in index.js
    */
    const etherspotAddresses = useWalletAddress("etherspot-prime", 80001);

    return (
    <div className="App">
        <h1>Etherspot Send Native Token Demo</h1>
        <h2>Let's send some mumbai matic!</h2>
        <p>{etherspotAddresses}</p>

        {/* Wrap all the transactions we make within the batches tag */}
        {/* Specify via={"etherspot-prime"} to use the Prime SDK */}
        <EtherspotBatches via={"etherspot-prime"}>
            <EtherspotBatch>
                {/* Create a simple send transaction */}
                <EtherspotTransaction to={address} value={amount}>
                <input
                    type="text"
                    value={address}
                    onChange={(event) => setAddress(event.target.value)}
                />
                <input
                    type="text"
                    value={amount}
                    onChange={(event) => setAmount(event.target.value)}
                />
                <hr />
                {/* Create buttons for the user to estimate and send their transaction */}
                <button onClick={() => estimate()}>Estimate</button>
                <button onClick={() => send()}>Send</button>
                </EtherspotTransaction>
            </EtherspotBatch>
        </EtherspotBatches>
    </div>
    );
}