Create a Smart Account by using Etherspot

Prerequisites

Before you start, ensure you have the following:

1. Basic Knowledge: Familiarity with Ethereum and smart contracts.
2. Development Environment: Node.js and npm installed
3. Framework: React Native

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:

npx create-react-app etherspot-starter

Then enter 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: 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 now 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.