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

enemycnt

Nikolay

Posted on March 12, 2024

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

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
Enter fullscreen mode Exit fullscreen mode

Next, let's install packages with yarn:

yarn install
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
},
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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/
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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,
};
Enter fullscreen mode Exit fullscreen mode

then build the extension:

yarn start
Enter fullscreen mode Exit fullscreen mode

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

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

You should now see the main screen of trampoline.

start screen

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.
set name

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

not deployed

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.

clear activity in metamask

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

sending eth

After sending ETH, refresh the trampoline page to see the funded account.

account funded
Click on the Not deployed red panel, then DEPLOY ACCOUNT.

not deployed

Follow the prompts to connect, continue, and send, concluding with a successful message.

connect trampoline


send transaction


review the transaction


success

Congratulations! You've successfully deployed your first SCW.

deployed scw

You can now send ETH from your SCW wallet.
Note that "Buy" and "Swap" features are not implemented yet.

🎉🎉🎉

💖 💪 🙅 🚩
enemycnt
Nikolay

Posted on March 12, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related