2

I am using wagmi to interact with my contract ABI using Vanilla JS and having a hard time finding documentation specifically for Vanilla. I've got everything working, but have been unable to figure out how to handle errors. I am using prepareWriteContract and writeContract to set up a mint function for my NFT and everything's gravy if the transaction is successful, but I want to be able to handle errors as well (ie the user rejects the transaction, doesn't have enough funds, etc.)

import {
    EthereumClient,
    w3mConnectors,
    w3mProvider,
    WagmiCore,
    WagmiCoreChains,
    WagmiCoreConnectors,
} from 'https://unpkg.com/@web3modal/[email protected]';

import { Web3Modal } from 'https://unpkg.com/@web3modal/[email protected]';

const { mainnet } = WagmiCoreChains;
const { configureChains, createConfig, switchNetwork, prepareWriteContract, writeContract } = WagmiCore;

async function mint() {
    if (window.ethereum) {
        const finney = 1000000000000000;
        let qty = document.getElementById('mint-quantity').value;
        
        await window.ethereum.enable();

        const txConfig = await prepareWriteContract({
            address: CONTRACT,
            abi: ABI,
            chainId: window.chainId,
            functionName: 'mint',
            args: [
                qty
            ],
            value: finney * qty
        });

        const { hash } = await writeContract(txConfig);

        console.log(hash);
    }
}

When the mint is successful, the hash constant returns the tx hash as expected, just not sure how I can handle various errors that might arise.

1 Answer 1

2

you can utilize try-catch blocks and conditionally check for specific error cases.

async function mint() {
    if (window.ethereum) {
        const finney = 1000000000000000;
        let qty = document.getElementById('mint-quantity').value;
        
        try {
            await window.ethereum.enable();

            const txConfig = await prepareWriteContract({
                address: CONTRACT,
                abi: ABI,
                chainId: window.chainId,
                functionName: 'mint',
                args: [qty],
                value: finney * qty
            });

            const { hash } = await writeContract(txConfig);

            console.log(hash);
            // Transaction successful, you can update your UI or perform any post-transaction logic here.
        } catch (error) {
            console.error(error);
            // Handle specific errors or display user-friendly error messages.
            if (error.message.includes("User denied transaction")) {
                // User rejected the transaction
                console.error("User denied the transaction.");
                // You can display a message to the user here.
            } else if (error.message.includes("insufficient funds")) {
                // Insufficient funds to complete the transaction
                console.error("Insufficient funds to complete the transaction.");
                // You can inform the user to add more funds to their wallet.
            } else {
                
                console.error("An error occurred while processing the transaction:", error.message);
                
            }
        }
    }
}
1
  • This is wonderful, thank you for the lengthy code sample!
    – user13286
    Sep 4, 2023 at 14:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.