The Quick Start below is available as a well documented, fully functioning live example on CodeSandbox.
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:
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:
A Web3 provider ultimately provides access to blockchain account, also known as a wallet.
For the Quick Start example, we will randomly generate a wallet.
index.tsx / index.js
import { EtherspotTransactionKit } from '@etherspot/transaction-kit';
import { ethers } from 'ethers';
// ...
const randomWallet = ethers.Wallet.createRandom();
const providerWallet = new ethers.Wallet(randomWallet.privateKey);
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>
<EtherspotTransactionKit
provider={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.
Build a UI
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();
const etherspotAddresses = useEtherspotAddresses();
const [address, setAddress] = useState('0x271Ae6E03257264F0F7cb03506b12A027Ec53B31');
const [amount, setAmount] = useState('0.001');
// In your rendering function...
<EtherspotBatches>
<EtherspotBatch>
<EtherspotTransaction
to={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>
)
}
<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>
You must always estimate before sending
Estimating first performs important transaction cost calculations that are required before sending.
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!
Once sent - you can check the transaction on the Polygon Mumbai blockchain explorer .
