Otherwise, please keep following the instructions below.
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:
npxcreate-react-apptxkit-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:
Wrap your <App /> with <EtherspotTransactionKit />
Wrap your React <App /> tag in the <EtherspotTransactionKit /> tag. This will turbocharge your React app with the power of Etherspot and everything that the platform can offer.
index.tsx / index.js
root.render( <React.StrictMode> <EtherspotTransactionKitprovider={providerWallet} /* The random wallet we created above */chainId={80001} /* Polygon Testnet - Mumbai */ > <App /> </EtherspotTransactionKit> </React.StrictMode>);
Get yourself some Polygon Mumbai Testnet funds
In order to execute a transaction, you need to fund your randomly created account with Test MATIC, the native token on Polygon Mumbai. You can get some for free below.
We're going to start with a simple example - sending some MATIC to another address. TransactionKit makes this really, really easy. Have a look at the code below.
import { EtherspotBatches, EtherspotBatch, EtherspotTransaction, useEtherspotUi, useEtherspotAddresses,} from'@etherspot/transaction-kit';// In your main function body...const { estimate,send } =useEtherspotTransactions();constetherspotAddresses=useEtherspotAddresses();const [address,setAddress] =useState('0x271Ae6E03257264F0F7cb03506b12A027Ec53B31');const [amount,setAmount] =useState('0.001');// In your rendering function...<EtherspotBatches> <EtherspotBatch> <EtherspotTransactionto={address}value={amount} > {/* The following returns a list of Blockchain addresses that are ready to use */} {etherspotAddresses.map((etherspotAddressObject) => <div> <p>Blockchain Name: {etherspotAddressObject.chainName}</p> <p>Blockchain ID:{etherspotAddressObject.chainId}</p> <p>Address: {etherspotAddressObject.address}</p> </div> ) } <inputtype="text"value={address}onChange={(event) =>setAddress(event.target.value)} /> <inputtype="text"value={amount}onChange={(event) =>setAmount(event.target.value)} /> <hr /> <buttononClick={() =>estimate()}>Estimate</button> <buttononClick={() =>send()}>Send</button> </EtherspotTransaction> </EtherspotBatch></EtherspotBatches>
You must always estimate before sending
Estimating first performs important transaction cost calculations that are required before sending.
Once sent - you can check the transaction on the Polygon Mumbai blockchain explorer here.
You've just sent your first transaction using TransactionKit! Wasn't that easy? Why not have a look around the TransactionKit documentation to see what else you can do with TransactionKit!