DashboardBlogGitHub

React Native (JavaScript) - AA

React Native

1. Add the Account Abstraction Service SDK to Your React Native App

Run this command:

npm install @particle-network/rn-aa

Click here to get the demo source code

2. Add Particle Auth or Particle Connect to your project

Account Abstraction service can't use individually.

📘

Important details before initialization

Before initializing the SDK, there are a few key points to keep in mind, specifically regarding the utilization of Paymasters (to sponsor gas fees, pay for gas in ERC-20 tokens, etc.)

  • All Testnets automatically have the Verifying Particle Network Omnichain Paymaster enabled. Transactions that request it will automatically be sponsored and thus gasless.
  • On the occasion that you'd like to use the Particle Network Omnichain Paymaster for Mainnets, you'll need to deposit USDT on either Ethereum or BNB Chain within the Particle dashboard. This USDT will then automatically be converted as needed into the native token of the network you're requesting (and qualifying for) sponsorship on.
  • Alternatively, if you'd like to instead use Biconomy's Verifying Paymaster, you can head over to the Biconomy dashboard, create a new Paymaster, and fill in biconomyAppKeys within particleAA.init.
  • The Particle Network AA SDK automatically uses Biconomy's Token Paymaster (for paying gas in ERC20 tokens). Transactions that request it will be able to leverage it without additional configuration.

Initialize the SDK

Before using the SDK, you have to call init(Required)

import * as particleAA from '@particle-network/rn-aa';
import { AAVersion } from '@particle-network/rn-auth';

const biconomyAppKeys = {
  1: 'your ethereum mainnet key',
  137: 'your polygon mainnet key',
}
particleAA.init(AccountName.BICONOMY_V2(), biconomyApiKeys);

Is support chainInfo

check if support the chainInfo

const result = await particleAA.isSupportChainInfo(ChainInfo.Ethereum);

Is deploy AA wallet

const eoaAddress = "";
const result = await particleAA.isDeploy(eoaAddress);

if (result.status) {
  const isDeploy = result.data;
  console.log('isDeploy result', isDeploy);
} else {
  const error = result.data;
  console.log('isDeploy result', error);
}

Is AA mode enable

const result = await particleAA.isAAModeEnable();

Enable AA mode

particleAA.enableAAMode();

Disable AA mode

particleAA.disableAAMode();

Rpc get fee quotes

Always used with send Transaction, pick one feeQuote then send transaction in custom feeMode.

const eoaAddress = await particleAuth.getAddress();
console.log('eoaAddress', eoaAddress);
const receiver = TestAccountEVM.receiverAddress;
const amount = TestAccountEVM.amount;
const transaction = await Helper.getEthereumTransacion(eoaAddress, receiver, amount);

console.log('transaction', transaction);
const result = await particleAA.rpcGetFeeQuotes(eoaAddress, [transaction]);

SignAndSendTransaction with Auth Service

const eoaAddress = await particleAuth.getAddress();
const receiver = TestAccountEVM.receiverAddress;
const amount = TestAccountEVM.amount;
const transaction = await Helper.getEthereumTransacion(eoaAddress, receiver, amount);

// send transaction in auto mode, auto means use native to pay gas fee.
const result = await particleAuth.signAndSendTransaction(transaction, AAFeeMode.auto())
  
// send transaction in gasless mode, gasless means user dont need to pay gas fee.
const result = await particleAuth.signAndSendTransaction(transaction, AAFeeMode.gasless())
      
// send transaction in custom mode, custom means user pick one token or native to pay gas fee.  
const feeQutotes = await particleAA.rpcGetFeeQuotes(eoaAddress, [transaction]);
// pick one quote  
const result = await particleAuth.signAndSendTransaction(transaction, AAFeeMode.custom(feeQutotes[0]))

if (result.status) {
  const signature = result.data;
  console.log('signAndSendTransaction result', signature);
} else {
  const error = result.data;
  console.log('signAndSendTransaction result', error);
}

SignAndSendTransaction with Connect Service

// confirm your eoa public address and current wallet type
const publicAddress = '';
const walletType = WalletType.MetaMask;

// send transaction in auto mode, auto means use native to pay gas fee.
const result = await particleConnect.signAndSendTransaction(this.walletType, this.publicAddress, transaction, 
  
// send transaction in gasless mode, gasless means user dont need to pay gas fee.
const result = await particleConnect.signAndSendTransaction(this.walletType, this.publicAddress, transaction, AAFeeMode.gasless())

// send transaction in custom mode, custom means user pick one token or native to pay gas fee.   
const feeQutotes = await particleAA.rpcGetFeeQuotes(eoaAddress, [transaction]);
const result = await particleConnect.signAndSendTransaction(this.walletType, this.publicAddress, transaction, AAFeeMode.custom(feeQutotes[0]))


if (result.status) {
  const signature = result.data;
  console.log('signature', signature);
} else {
  const error = result.data;
  console.log('result error', error);
}

Batch send transaction with Auth Service

const eoaAddress = await particleAuth.getAddress();
const receiver = TestAccountEVM.receiverAddress;
const amount = TestAccountEVM.amount;
const transaction = await Helper.getEthereumTransacion(eoaAddress, receiver, amount);

// batch your transacitons into a list  
const transactions = [transaction, transaction];

// support auto, gasless and custom feeMode.
const result = await particleAuth.batchSendTransactions(transactions, AAFeeMode.auto);
if (result.status) {
  const signature = result.data;
  console.log('signAndSendTransaction result', signature);
} else {
  const error = result.data;
  console.log('signAndSendTransaction result', error);
}

Batch send transaction with Connect Service

// confirm your eoa public address and current wallet type
const publicAddress = ''; 
const walletType = WalletType.MetaMask;
// get your transaction array
const transactions = [transaction, transaction];

const result = await particleConnect.batchSendTransactions(this.walletType, this.publicAddress, transactions, AAFeeMode.auto());
if (result.status) {
  const signature = result.data;
  console.log('signature', signature);
} else {
  const error = result.data;
  console.log('result error', error);
}