In this example we’re going to learn how to interact with a smart contract on Flare’s coston2 testnet with TransactionKit.

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

​
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,
  EtherspotContractTransaction,
  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", 114);

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

  return (
    <div className="App">
      <h1>Etherspot X Flare Demo</h1>
      <code>{JSON.stringify(etherspotAddresses)}</code>

      <EtherspotBatches>
        <EtherspotBatch chainId={114}>
          <EtherspotContractTransaction
            contractAddress={"0x72628D8A91774dA3d6197179591f64095FBa96BC"}
            abi={["function saveTokenPriceWei(string)"]}
            methodName={"saveTokenPriceWei"}
            params={["testBTC"]}
            value={"0"}
          >
            <button onClick={() => estimate()}>Estimate</button>
            <button onClick={() => send()}>Send</button>
          </EtherspotContractTransaction>
        </EtherspotBatch>
      </EtherspotBatches>
    </div>
  );
}