How to run a Trampoline locally: step-by-step instructions
Tags: ethereum, web3
Published: 2024-03-12 18:19:27

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:
```bash
git clone --recurse-submodules https://github.com/enemycnt/trampoline.git
```

Next, let's install packages with yarn:
```bash
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:
```bash
# 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](https://hardhat.org/hardhat-network/docs/metamask-issue), we need to change the default `chainId` of hardhat to `1337`. In the `hardhat.config.ts` file within the submodules, add a new chainId:
```typescript
// 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:
```bash
# 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.
```bash
❯ 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. 
```typescript
// 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:
```bash
# from the root of the trampoline repo
cd submodules/bundler
yarn bundler --unsafe --auto
```
You should see the bundler server start correctly.
```bash
❯
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,
```typescript
// 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:
```bash
yarn start
```
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/butnhapxvtujk9ttlbz1.png)
## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s0n1itk94p06wot9qwr2.png)

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

![not deployed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v3100xprlc3ftrwstlhj.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4pjofqg87kwfev1m68qy.png)

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

![sending eth](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jmuk9aqu8oxxnk6kj679.png)

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

![account funded](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wxmn2xt2tg7e7u14kzcu.png)
Click on the `Not deployed` red panel, then `DEPLOY ACCOUNT`. 


![not deployed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7iud9gew23jqyu62zhc.png)

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


![connect trampoline](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iaupnojvz7yy8nzutmjq.png)

---

![send transaction](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70bvhrd8xnpf0x7y2b64.png)

---

![review the transaction](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/62b2fxfx29kvhjjgu0u9.png)

---

![success](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bjgapekurufqvr4aspqg.png)

Congratulations! You've successfully deployed your first SCW. 

![deployed scw](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jds3r832ga4orz7lahd7.png)

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

🎉🎉🎉