In this guide, we’ll learn about Account Abstraction, and run through some introductory code to get it set up on Mantle using the Etherspot Prime SDK.

What is Account Abstraction?

Account abstraction is a concept on EVM-based blockchains that allows for greater flexibility and functionality when it comes to executing transactions and smart contracts.

Traditionally, in Ethereum, user accounts are externally owned accounts (EOAs), also called key-based wallets. Account Abstraction is the move to Smart Contract Wallets, which allows us to be a lot more flexible on what we can do with this type of account, such as:

• Transaction Batching
• Social Logins
• Sponsored transactions
• Paying for transactions with ERC20 tokens
• No external plugin is needed (No MetaMask!)

What is Etherspot Prime?

Etherspot Prime is an SDK that lets dApp developers easily implement all the features we mentioned above. Etherspot Prime supports both Mantle Mainnet and Mantle Testnet.

Code Tutorial

In this tutorial, 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 this:

1 npx create-react-app etherspot-starter

Then enter the directory and install the Etherspot Prime SDK and Ethers.

1 cd etherspot-starter/
2 npm i @etherspot/prime-sdk --save
3 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: 5000, projectKey: '' })
    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://mantlescan.info/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://mantlescan.info/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 Mantle 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 Mantle 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.