Frontend Setup3
Handling Verification
The last change we need to make is updating the handleSubmit function
in the MintForm component.
The full flow for minting the token looks like this:
- The user inputs the transaction hash from their deposit transaction, and selects which staking chain they used.
- The appropriate staking contract address is fetched from our constants file.
- The
handleSubmitfunction waits until the transaction is finalized. - The
handleSubmitfunction waits until the interop root on gateway is updated. - The
handleSubmitfunction fetches the input arguments for themintfunction. - The user is prompted to approve calling the
mintfunction with their wallet. - The transaction gets approved, and the leaderboard table gets updated with the latest number of mints per chain.
In components/MintForm.tsx, update the handleSubmit function with the completed function below:
src/components/MintForm.tsx
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!txHash || !chainId) {
alert('missing tx hash');
return;
}
const chain = getChainInfo(chainId);
const stakingContractAddress = getContractAddress(chainId);
if (!chain || !stakingContractAddress) {
alert('Staking chain not supported');
return;
}
setIsSubmitPending(true);
const provider = new Provider(chain.rpcUrls.default.http[0]);
const status = await checkIfTxIsFinalized(txHash, provider);
if (status !== 'EXECUTED') {
alert('Deposit txn is not yet finalized.');
setIsSubmitPending(false);
return;
}
setIsFinalized(true);
await waitForChainInteropRoot(txHash, provider);
setIsRootUpdated(true);
const args = await getProveScoreArgs(txHash, provider);
writeContract({
address: TOKEN_CONTRACT_ADDRESS,
abi: TOKEN_JSON.abi as Abi,
functionName: 'mint',
args: [args.srcChainId, args.l1BatchNumber, args.l2MessageIndex, args.msgData, args.gatewayProof],
});
};
Run the app
Use the command below to run the frontend.
npm run dev
You can now open the frontend at http://localhost:5173/.
On the frontend, you should be able to add each network to your wallet by clicking on them from the dropdown menu.