Example of leveraging Particle Auth Core alongside Particle's AA SDK to onboard users into smart accounts and execute transactions on Berachain Artio.

index.tsx

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom/client';
import { ethers } from 'ethers';
import { notification } from 'antd';
import { useEthereum, useConnect, useAuthCore, AuthCoreContextProvider } from '@particle-network/auth-core-modal';
import { AAWrapProvider, SmartAccount, SendTransactionMode } from '@particle-network/aa';
import { BerachainArtio } from '@particle-network/chains';
import './App.css';

const App = () => {
  const { provider } = useEthereum();
  const { connect, disconnect } = useConnect();
  const { userInfo } = useAuthCore();

  const smartAccount = new SmartAccount(provider, {
    projectId: process.env.REACT_APP_PROJECT_ID,
    clientKey: process.env.REACT_APP_CLIENT_KEY,
    appId: process.env.REACT_APP_APP_ID,
    aaOptions: {
      accountContracts: {
        SIMPLE: [{ chainIds: [BerachainArtio.id], version: '1.0.0' }],
    }
  }});

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

  const handleLogin = async (authType) => {
    if (!userInfo) {
      await connect({
        socialType: authType,
        chain: BerachainArtio,
      });
    }
  };

  const executeTx = async () => {
    const signer = customProvider.getSigner();
    const tx = {
      to: "0x000000000000000000000000000000000000dEaD",
      value: ethers.utils.parseEther("0.001")
    };
    const txResponse = await signer.sendTransaction(tx);
    const txReceipt = await txResponse.wait();
    notification.success({
      message: `Transaction Successful`,
      description: (
        <div>
          Transaction Hash: <a href={`https://artio.beratrail.io/tx/${txReceipt.transactionHash}`} target="_blank" rel="noopener noreferrer">{txReceipt.transactionHash}</a>
        </div>
      )
    });
  };

  const executeTxHONEY = async () => {
    const signer = customProvider.getSigner();
    const tokenContract = new ethers.Contract('0x7EeCA4205fF31f947EdBd49195a7A88E6A91161B', ["function transfer(address to, uint256 amount)"], signer);
    const txResponse = await tokenContract.transfer('0x000000000000000000000000000000000000dEaD', ethers.utils.parseEther('1'));
    const txReceipt = await txResponse.wait();
    notification.success({
      message: `Transaction Successful`,
      description: (
        <div>
          Transaction Hash: <a href={`https://artio.beratrail.io/tx/${txReceipt.transactionHash}`} target="_blank" rel="noopener noreferrer">{txReceipt.transactionHash}</a>
        </div>
      )
    });
  };

  return (
    <div className="App">
      // Your JSX
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <AuthCoreContextProvider
      options={{
        projectId: process.env.REACT_APP_PROJECT_ID,
        clientKey: process.env.REACT_APP_CLIENT_KEY,
        appId: process.env.REACT_APP_APP_ID,
        themeType: 'dark',
        fiatCoin: 'USD',
        language: 'en',
        erc4337: {
          name: 'SIMPLE',
          version: '1.0.0'
        },
        wallet: {
          visible: true,
          customStyle: {
            supportChains: [BerachainArtio]
          }
        },
      }}
    >
      <App />
    </AuthCoreContextProvider>
  </React.StrictMode>
);