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 */
    >
      <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() {
  const [address, setAddress] = React.useState(
    "0x271Ae6E03257264F0F7cb03506b12A027Ec53B31"
  );
  const [amount, setAmount] = React.useState("0.001");
  const { estimate, send } = useEtherspotTransactions();
  const etherspotAddresses = useWalletAddress("etherspot-prime", 11155111);

  React.useEffect(() => {
    console.log(etherspotAddresses);
  }, [etherspotAddresses]);

  return (
    <div className="App">
      <h1>Etherspot Demo</h1>
      <h2>Let's send some Sepolia ETH.</h2>
      <code>{JSON.stringify(etherspotAddresses)}</code>

      <EtherspotBatches>
        <EtherspotBatch chainId={11155111}>
          <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 />
            <button onClick={() => estimate()}>Estimate</button>
            <button onClick={() => send()}>Send</button>
          </EtherspotTransaction>
        </EtherspotBatch>
      </EtherspotBatches>
    </div>
  );
}

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 */
    >
      <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() {
  const [address, setAddress] = React.useState(
    "0x271Ae6E03257264F0F7cb03506b12A027Ec53B31"
  );
  const [amount, setAmount] = React.useState("0.001");
  const { estimate, send } = useEtherspotTransactions();
  const etherspotAddresses = useWalletAddress("etherspot-prime", 11155111);

  React.useEffect(() => {
    console.log(etherspotAddresses);
  }, [etherspotAddresses]);

  return (
    <div className="App">
      <h1>Etherspot Demo</h1>
      <h2>Let's send some Sepolia ETH.</h2>
      <code>{JSON.stringify(etherspotAddresses)}</code>

      <EtherspotBatches>
        <EtherspotBatch chainId={11155111}>
          <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 />
            <button onClick={() => estimate()}>Estimate</button>
            <button onClick={() => send()}>Send</button>
          </EtherspotTransaction>
        </EtherspotBatch>
      </EtherspotBatches>
    </div>
  );
}