Build an Account Abstraction dApp on Rootstock using Etherspot Prime SDK

In this section, we will learn how to use the Etherspot Prime SDK to create a random Key Based Wallet (KBW), and use the KBW to create an Etherspot Smart Contract Wallet.


Getting Started

Here we’ll get set up with the very basics of using the Prime SDK.

We’ll do the following:

  • Set up a React app
  • Install the Etherspot Prime SDK
  • Create an Etherspot smart contract wallet

Installing the SDK

Start by creating a react app like so:

npx create-react-app etherspot-starter

cd into the directory and install the Etherspot Prime SDK and Ethers.

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

Writing the Smart Contract

Now open the folder in your code editor, and navigate to the App.js file.

'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();

  const generateEtherspotWallet = async () => {
    const bundlerApiKey = 'eyJvcmciOiI2NTIzZjY5MzUwOTBmNzAwMDFiYjJkZWIiLCJpZCI6IjMxMDZiOGY2NTRhZTRhZTM4MGVjYjJiN2Q2NDMzMjM4IiwiaCI6Im11cm11cjEyOCJ9';
    const customBundlerUrl = ""
    // Initialise Etherspot SDK
    const primeSdk = new PrimeSdk({ privateKey: eoaPrivateKey}, { chainId: 31, bundlerProvider: new EtherspotBundler(31, bundlerApiKey, customBundlerUrl) })
    const address = await primeSdk.getCounterFactualAddress();
    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.
      <a className="App-link" target="_blank" href={"" + eoaWalletAddress}>
        KBW Address: {eoaWalletAddress}

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

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

        <a className="App-link" target="_blank" href="">
          Now you have a wallet created on Rootstock you can explore what else we can do with the Prime SDK.

export default App;

Start the app:

npm start

EtherSpot-Rootstock Starter

In this article, we created a random Key Based Wallet (KBW) on Rootstock on page load, and then using this KBW we pass it into the Etherspot Prime SDK, creating an Etherspot Smart Contract Wallet.


Receive updates

Get the latest updates from the Rootstock ecosystem