BiconomyUserOp.tsx

import React, { useState, useEffect } from "react";
import { BiconomySmartAccount } from "@biconomy/account";
import {
  IHybridPaymaster,
  SponsorUserOperationDto,
  PaymasterMode,
} from "@biconomy/paymaster";
import abi from "../ABI/tokenAbi.json";
import { ethers } from "ethers";

interface Props {
  smartAccount: BiconomySmartAccount;
  provider: any;
}

const Counter: React.FC<Props> = ({ smartAccount, provider }) => {
  const [minted, setMinted] = useState<number>(0);
  const [balance, setBalance] = useState<number>(0);
  const [counterContract, setCounterContract] = useState<any>(null);
  const [amount, setAmount] = useState<number>(0);
  const [isLoading, setIsLoading] = useState<boolean>(false);

  const counterAddress = "0x317E4C04C7fDf44fa72bC997AeCe1b691159F95F";

  useEffect(() => {
    setIsLoading(true);
    getCount(false);
  }, []);

  const getBalance = async (isUpdating: boolean) => {
    const contract = new ethers.Contract(counterAddress, abi, provider);
    setCounterContract(contract);
    const currentCount = await contract.balanceOf(provider.getSigner());
    setBalance(currentCount);
    if (isUpdating) {
      console.log("updating");
    }
  };

  const mintTokens = async () => {
    try {
      const incrementTx = new ethers.utils.Interface([
        "function mint(uint256 amount)",
      ]);
      const data = incrementTx.encodeFunctionData("mint", [amount]);

      const tx1 = {
        to: counterAddress,
        data: data,
      };
      console.log(smartAccount);
      const partialUserOp = await smartAccount.buildUserOp([tx1]);

      const biconomyPaymaster =
        smartAccount.paymaster as IHybridPaymaster<SponsorUserOperationDto>;

      const paymasterServiceData: SponsorUserOperationDto = {
        mode: PaymasterMode.SPONSORED,
        
      };
      try {
        const paymasterAndDataResponse =
          await biconomyPaymaster.getPaymasterAndData(
            partialUserOp,
            paymasterServiceData
          );
        partialUserOp.paymasterAndData =
          paymasterAndDataResponse.paymasterAndData;

        const userOpResponse = await smartAccount.sendUserOp(partialUserOp);
        const transactionDetails = await userOpResponse.wait();

        console.log("Transaction Details:", transactionDetails);
        console.log("Transaction Hash:", userOpResponse.userOpHash);

        
        getBalance(true);
      } catch (e) {
        console.error("Error executing transaction:", e);
        // ... handle the error if needed ...
      }
    } catch (error) {
      console.log({ error });
    
    }
  };

  const vibeCheck = (event: React.ChangeEvent<HTMLElement>) => {
    console.log("it works!");
    const { value } = event.target as unknown as { value: number };
    setAmount(value);
    console.log(amount);
  };

  return (
    <>
      <div className="w- rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-teal-600 sm:max-w-md">
        <input
          type="text"
          name="amount"
          id="amount"
          autoComplete="amount"
          onChange={vibeCheck}
          className="block border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-700 focus:ring-0 sm:text-sm sm:leading-6"
          placeholder="$"
        />
      </div>
      <div className="mt-6 gap-x-6">
        <button
          type="submit"
          onClick={mintTokens}
          className="mb-28 rounded-md w-40 bg-teal-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600"
        >
          Mint Token
        </button>
      </div>
    </>
  );
};

export default Counter;