How to run a Trampoline locally: step-by-step instructions

#ethereum #web3

Learn how to set up the ERC4337 wallet extension trampoline on your local environment. We're going to use version v0.7.0 of account-abstraction smartcontracts and SDK.

It's so easy, everyone can do it, so stay with me.

As of writing this article, the v0.7.0 version of the packages has not yet been published on npm. To work around this, I've forked the original trampoline repository and added an official bundler as a git module.

Requirements

NodeJS >= v18.19.1
yarn == 1.22.19

Initializing the Repository

First, clone the repository with automatic initialization and update bundle submodules:

git clone --recurse-submodules https://github.com/enemycnt/trampoline.git

Next, let's install packages with yarn:

yarn install

Now, we need to build the @account-abstraction/contracts package and then the bundler's @account-abstraction/sdk and @account-abstraction/utils packages:

# from root of the trampoline repo
cd submodules/bundler
yarn preprocess

At this point, we should have successfully initialized the repo with submodules and built the current packages from the bundler. Now, the trampoline should be rewired to these freshly built packages.

Next, we'll start the hardhat node and the bundler service for trampoline.

Hardhat Setup

Adjusting Config for MetaMask Compatibility

Due to an issue in MetaMask, we need to change the default chainId of hardhat to 1337. In the hardhat.config.ts file within the submodules, add a new chainId:

// submodules/bundler/submodules/account-abstraction/hardhat.config.ts
// ...
networks: {
    hardhat: {
        chainId: 1337
    },
    /// ... rest of config
},

Under other circumstances, the default chainId should work fine.

Running the Local Hardhat Node

Open a new terminal window/tab, dive into the account-abstraction submodule, and run our hardhat node:

# from the root of the trampoline repo
cd submodules/bundler/submodules/account-abstraction/
npx hardhat node

It should deploy the contracts automatically after starting the hardhat node.

❯ npx hardhat node
Nothing to compile
No need to generate any newer typings.
sending eth to create2 contract deployer address (0x3fab184622dc19b6109349b94811493bf2a45362) (tx: 0x8f62c3cb68ae476ac67ea9749828a066fcf881a128111d16a9b68f8670c5b6dd)...
deploying create2 deployer contract (at 0x4e59b44847b379578588920ca78fbf26c0b4956c) using deterministic deployment (https://github.com/Arachnid/deterministic-deployment-proxy) (tx: 0xeddf9e61fb9d8f5111840daef55e5fde0041f5702856532cdbb5a02998033d26)...
deploying "EntryPoint" (tx: 0x452b5d95148d580ed533542273fc1c71ee3a8debfed87aeed589d750bbffa131)...: deployed at 0x0000000071727De22E5E9d8BAf0edAc6f37da032 with 3650209 gas
==entrypoint addr= 0x0000000071727De22E5E9d8BAf0edAc6f37da032
deploying "SimpleAccountFactory" (tx: 0x649dfa98f6fcbcfd1cf5d069e3ae417939eded9843196af2250914fdb17cbd36)...: deployed at 0x91E60e0613810449d098b0b5Ec8b51A0FE8c8985 with 2283817 gas
deploying "TestCounter" (tx: 0xd5fc2b706680164fcdccbd68a464af44e4a51ec6aa2aad291a62e57a9721a1a8)...: deployed at 0x0338Dcd5512ae8F3c481c33Eb4b6eEdF632D1d2f with 254380 gas
Started HTTP and WebSocket JSON-RPC server at http://127.0.0.1:8545/

Setting Up and Running the Bundler Locally

Navigate to the bundler submodule and verify the config. It should already contain the required addresses of deployed smart contracts.

// submodules/bundler/packages/bundler/localconfig/bundler.config.json
{
  "gasFactor": "1",
  "port": "3000",
  "network": "http://127.0.0.1:8545",
  "entryPoint": "0x0000000071727De22E5E9d8BAf0edAc6f37da032",
  "beneficiary": "0xd21934eD8eAf27a67f0A70042Af50A1D6d195E81",
  "minBalance": "1",
  "mnemonic": "./localconfig/mnemonic.txt",
  "maxBundleGas": 5e6,
  "minStake": "1" ,
  "minUnstakeDelay": 0 ,
  "autoBundleInterval": 3,
  "autoBundleMempoolSize": 10
}

Now, open a new terminal window/tab and start the bundler server:

# from the root of the trampoline repo
cd submodules/bundler
yarn bundler --unsafe --auto

You should see the bundler server start correctly.

❯
yarn bundler --unsafe --auto
yarn run v1.22.19
$ yarn --cwd packages/bundler bundler --unsafe --auto
$ ts-node ./src/exec.ts --config ./localconfig/bundler.config.json --unsafe --auto
command-line arguments:  {
  config: './localconfig/bundler.config.json',
  auto: true,
  unsafe: true
}
Merged configuration: {"port":"3000","entryPoint":"0x0000000071727De22E5E9d8BAf0edAc6f37da032","unsafe":true,"conditionalRpc":false,"minStake":"1","minUnstakeDelay":0,"gasFactor":"1","network":"http://127.0.0.1:8545","beneficiary":"0xd21934eD8eAf27a67f0A70042Af50A1D6d195E81","minBalance":"1","mnemonic":"./localconfig/mnemonic.txt","maxBundleGas":5000000,"autoBundleInterval":3,"autoBundleMempoolSize":10}
url= http://127.0.0.1:8545
== debugrpc was undefined
deployed EntryPoint at 0x0000000071727De22E5E9d8BAf0edAc6f37da032
url= http://127.0.0.1:8545
signer 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266 balance 9999.979800277392467585
Bundle interval (seconds) 0
connected to network { name: 'unknown', chainId: 1337 }
running on http://localhost:3000/rpc

With our hardhat node and bundler running, let's proceed to set up the trampoline.

Setting Up, Building, and Installing the Trampoline Browser Extension

Check the trampoline's configuration,

// src/exconfig.ts

import { EVMNetwork } from './pages/Background/types/network';
import EthDiamondImage from './assets/img/eth-diamond-glyph.png';

// eslint-disable-next-line import/no-anonymous-default-export
export default {
  enablePasswordEncryption: false,
  showTransactionConfirmationScreen: true,
  factory_address: '0x91E60e0613810449d098b0b5Ec8b51A0FE8c8985',
  stateVersion: '0.1',
  network: {
    chainID: '1337',
    family: 'EVM',
    name: 'local',
    provider: 'http://127.0.0.1:8545/',
    entryPointAddress: '0x0000000071727De22E5E9d8BAf0edAc6f37da032',
    bundler: 'http://localhost:3000/rpc',
    baseAsset: {
      symbol: 'ETH',
      name: 'ETH',
      decimals: 18,
      image: EthDiamondImage,
    },
  } satisfies EVMNetwork,
};

then build the extension:

yarn start

After that, you are ready to install the extension in Chrome by following these steps:

Navigate to chrome://extensions/
Enable Developer mode
Click on Load unpacked extension
Select the build folder.

You should now see the main screen of trampoline.

Deploying Your First Smart Contract Wallet

Click on CREATE/RECOVER NEW ACCOUNT and on the next page, enter the name of the account, then click SET NAME and CONTINUE.

Now, you should see the main page with the new account address, a zero balance, and a big red Not deployed button.

If you've added the hardhat network to MetaMask, select the account and reset the nonce by going to Settings -> Advanced -> Clear activity tab data -> Clear. This clears the transaction history and nonce, preventing nonce errors when sending ETH.

To deploy the SCW (smart contract wallet), you first need to send some ETH to the newly created address.