Build an Account Abstraction dApp on Rootstock using Etherspot Prime SDK

npx create-react-app etherspot-starter

cd etherspot-starter/
npm i @etherspot/prime-sdk --save
npm i ethers --save

'use client';

import React from 'react';
import { PrimeSdk, EtherspotBundler } from '@etherspot/prime-sdk';
import { ethers } from 'ethers'
import './App.css';


const App = () => {

  const [etherspotWalletAddress, setEtherspotWalletAddress] = React.useState('0x0000000000000000000000000000000000000000');
  const [eoaWalletAddress, setEoaWalletAddress] = React.useState('0x0000000000000000000000000000000000000000');
  const [eoaPrivateKey, setEoaPrivateKey] = React.useState('');

  const generateRandomEOA = async () => {
    // Create random EOA wallet
    const randomWallet = ethers.Wallet.createRandom();
    setEoaWalletAddress(randomWallet.address);
    setEoaPrivateKey(randomWallet.privateKey);
}

  const generateEtherspotWallet = async () => {
    const bundlerApiKey = 'eyJvcmciOiI2NTIzZjY5MzUwOTBmNzAwMDFiYjJkZWIiLCJpZCI6IjMxMDZiOGY2NTRhZTRhZTM4MGVjYjJiN2Q2NDMzMjM4IiwiaCI6Im11cm11cjEyOCJ9';
    const customBundlerUrl = "https://rootstocktestnet-bundler.etherspot.io/"
    // Initialise Etherspot SDK
    const primeSdk = new PrimeSdk({ privateKey: eoaPrivateKey}, { chainId: 31, bundlerProvider: new EtherspotBundler(31, bundlerApiKey, customBundlerUrl) })
    const address = await primeSdk.getCounterFactualAddress();
    setEtherspotWalletAddress(address);
    console.log('\x1b[33m%s\x1b[0m', `EtherspotWallet address: ${address}`);
  }

  return (
    <div className="App-header">

      <h1>Getting started with Etherspot Prime</h1>
      <p> To initialise the SDK, it requires a Key Based Wallet(KBW) to be passed in.</p>
      
      <button onClick={() => generateRandomEOA()}>
        First, click here to generate a random KBW.
      </button>
      
      <a className="App-link" target="_blank" href={"https://explorer.testnet.rootstock.io/address/" + eoaWalletAddress}>
        KBW Address: {eoaWalletAddress}
      </a>

      <p>
        Now we can intialise the SDK with this address as the owner, and create an Etherspot Smart Contract Wallet.
      </p>

      <button onClick={() => generateEtherspotWallet()}>
        Second, click here to generate Etherspot Smart Contract Wallet
      </button>
      <a className="App-link" target="_blank" href={"https://explorer.testnet.rootstock.io/address/" + etherspotWalletAddress}>
        Etherspot Smart Account Address: {etherspotWalletAddress}
      </a>

      <p>
        <a className="App-link" target="_blank" href="https://etherspot.fyi/prime-sdk/intro">
          Now you have a wallet created on Rootstock you can explore what else we can do with the Prime SDK.
        </a>
      </p>
    </div>
  )
}

export default App;

npm start