Sending user operations through ethers.js provider wrapper (via. Particle & Biconomy)

App.tsx

import React, { useState, useEffect } from 'react';
import { ParticleNetwork } from '@particle-network/auth';
import { EthereumGoerli } from "@particle-network/chains";
import { ParticleProvider } from "@particle-network/provider";
import { AAWrapProvider, SmartAccount, SendTransactionMode } from '@particle-network/aa';
import { ethers } from 'ethers';
import './App.css';

const App = () => {
  const [userInfo, setUserInfo] = useState(null);
  const [ethBalance, setEthBalance] = useState(null);

  const config = {
    projectId: process.env.REACT_APP_PROJECT_ID,
    clientKey: process.env.REACT_APP_CLIENT_KEY,
    appId: process.env.REACT_APP_APP_ID,
  };

  const particle = new ParticleNetwork({
    ...config,
    chainName: EthereumGoerli.name,
    chainId: EthereumGoerli.id,
    wallet: { displayWalletEntry: true, uiMode: 'dark' },
  });

  const smartAccount = new SmartAccount(new ParticleProvider(particle.auth), {
    ...config,
    networkConfig: [
      { dappAPIKey: process.env.REACT_APP_BICONOMY_KEY, chainId: EthereumGoerli.id }
    ],
  });

  const customProvider = new ethers.providers.Web3Provider(new AAWrapProvider(smartAccount, SendTransactionMode.UserPaidNative), "any");

  useEffect(() => {
    fetchEthBalance();
  }, [userInfo]);

  const fetchEthBalance = async () => {
    const address = await smartAccount.getAddress();
    const balance = await customProvider.getBalance(address);
    setEthBalance(ethers.utils.formatEther(balance));
  };

  const handleLogin = async (preferredAuthType) => {
    const user = await particle.auth.login({ preferredAuthType });
    setUserInfo(user);
  };

  const executeUserOp = async () => {
    try {
      const signer = customProvider.getSigner();

      const tx = {
        to: '0x000000000000000000000000000000000000dEaD',
        value: ethers.utils.parseEther('0.01'),
      };

      const txResponse = await signer.sendTransaction(tx);
      const txReceipt = await txResponse.wait();
      console.log('Transaction hash:', txReceipt.transactionHash);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div className="App">
      {!userInfo ? (
        <>
          <button onClick={() => handleLogin('google')}>Sign in with Google</button>
          <button onClick={() => handleLogin('twitter')}>Sign in with Twitter</button>
        </>
      ) : (
        <div>
          <h2>{userInfo.name}</h2>
          <small>{ethBalance} ETH</small>
          <button onClick={executeUserOp}>Execute User Operation</button>
        </div>
      )}
    </div>
  );
};

export default App;