Quick Start
Get started quickly with TransactionKit
View or fork now on CodeSandbox
The Quick Start below is available as a well documented, fully functioning live example on CodeSandbox.
👉 View or fork the Send Native Asset CodeSandbox
📖 View all our CodeSandbox examples
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:
cd txkit-quickstart
Install Transaction Kit
Next, install TransactionKit and Ethers
npm i @etherspot/transaction-kit [email protected]
// or
yarn add @etherspot/transaction-kit [email protected]
Create a Web3 Provider
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.
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.
root.render(
<React.StrictMode>
<EtherspotTransactionKit
provider={providerWallet} /* The random wallet we created above */
chainId={80001} /* Polygon Testnet - Mumbai */
>
<App />
</EtherspotTransactionKit>
</React.StrictMode>
);
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.
Once sent - you can check the transaction on the Polygon Mumbai blockchain explorer here.
🎉 Congratulations!
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 updated
Was this helpful?