Sample application for constructing and sending userops with Particle & Biconomy

App.tsx

import React, { useState, useEffect } from 'react';
import Web3 from 'web3';
import { ParticleNetwork } from '@particle-network/auth';
import { AvalancheTestnet } from "@particle-network/chains";
import { ParticleProvider } from "@particle-network/provider";
import { SmartAccount } from '@particle-network/aa';
import './App.css';

const App = () => {
  const [userInfo, setUserInfo] = useState(null);
  const [avaxBalance, setAvaxBalance] = 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: AvalancheTestnet.name,
    chainId: AvalancheTestnet.id,
    wallet: { displayWalletEntry: true, uiMode: 'dark' },
  });

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

  particle.setERC4337(true);
  
  const web3 = new Web3(new ParticleProvider(particle.auth));

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

  const fetchAvaxBalance = async () => {
    const address = await smartAccount.getAddress();
    const balance = await web3.eth.getBalance(address);
    setAvaxBalance(web3.utils.fromWei(balance, 'ether'));
  };

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

  const executeUserOp = async () => {
    try {
      const defaultAccount = await smartAccount.getAddress();

      const tx = {
        to: '0x000000000000000000000000000000000000dEaD',
        value: web3.utils.toWei('0.1', 'ether'),
        from: defaultAccount,
      };

      const userOpBundle = await smartAccount.buildUserOperation({ tx });
      await smartAccount.sendUserOperation(userOpBundle);
    } catch (error) {
      console.error('Caught an 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>{avaxBalance} AVAX</small>
          <button onClick={executeUserOp}>Execute User Operation</button>
        </div>
      )}
    </div>
  );
};

export default App;