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.
Lets start by installing TransactionKit and Ethers
npm i @etherspot/transaction-kit [email protected]5.4.0
// or
yarn add @etherspot/transaction-kit [email protected]5.4.0
A Web3 provider ultimately provides access to blockchain account, also known as a wallet.
For the Quick Start example, we will randomly generate a Web3 Provider.
import { EtherspotUi } 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 <EtherspotUi /> tag. This will turbocharge your React app with the power of Etherspot and everything that the platform can offer.index.tsx
root.render(
<React.StrictMode>
<EtherspotUi
provider={providerWallet} /* The random wallet we created above */
chainId={'80001'} /* Polygon Testnet - Mumbai */
>
<App />
</EtherspotUi>
</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,
} from '@etherspot/transaction-kit';
// In your main function body...
const { estimate, send } = useEtherspotUi();
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 1d ago