Flare Tutorial
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>
);
}