Comment on page
Quick Start
Get started quickly with TransactionKit
The Quick Start below is available as a well documented, fully functioning live example on CodeSandbox.
Otherwise, please keep following the instructions below.
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:cd txkit-quickstart
Next, install TransactionKit and Ethers
npm i @etherspot/transaction-kit [email protected]
// or
yarn add @etherspot/transaction-kit [email protected]
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 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.
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!
Last modified 6mo ago