​
Intro

On this guide we’ll learn about Account Abstraction and run through some introductory code to get setup with using it on Scroll using the Etherspot Prime SDK.

​
Code Tutorial

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

We’ll set up a React app, install the Etherspot Prime SDK, and create an Etherspot smart contract wallet.

Start by creating a react app like so:

npx create-react-app etherspot-starter

Then 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

Now open the code in your editor, and open up App.js.

Paste in the following code:

'use client';

import React from 'react';
import { PrimeSdk } 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 () => {
    // Initialise Etherspot SDK
    const primeSdk = new PrimeSdk({ privateKey: eoaPrivateKey}, { chainId: 534352, bundlerProvider: new EtherspotBundler(534352, bundlerApiKey) })
    const address = await primeSdk.getCounterFactualAddress();
    setEtherspotWalletAddress(address);
    console.log('\x1b[33m%s\x1b[0m', `EtherspotWallet address: ${address}`);
  }

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

      <h1  className="App-title">Getting started with Etherspot Prime</h1>

      <p> To initialise the SDK, it requires a Key Based Wallet(KBW) to be passed in.</p>

      <button className="App-button" onClick={() => generateRandomEOA()}>
            First click here to generate a random KBW. 
      </button>
      <a target="_blank" href={"https://scrollscan.com/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()}>
            Generate Etherspot Smart Contract Wallet
      </button>
      <a target="_blank" href={"https://scrollscan.com/address/" + etherspotWalletAddress}>
    
        Etherspot Smart Account Address: {etherspotWalletAddress}
      </a>

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

export default App;

And that’s it! We’ve not created a random key based wallet on Scroll on page load, and then using this KBW we pass it into the Etherspot Prime SDK, creating an Etherspot Smart Contract Wallet.

You can learn more about the differences between these two types of accounts here.

​
Next steps

Now you’re ready to get developing with Account Abstraction!

For next steps you can look at functions or examples to tailor the dapp to what you’re trying to achieve.

Account Abstraction on MantleAccount Abstraction on Linea