Forem: Nikolay

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

Nikolay — Tue, 12 Mar 2024 18:19:27 +0000

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.

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

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

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

Congratulations! You've successfully deployed your first SCW.

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

🎉🎉🎉

Improper state management in ReactJS

Nikolay — Tue, 23 May 2023 17:24:27 +0000

Let's consider a simple example to illustrate the losing state problem in a React application when storing a generic class instance in a component's state.

Create a generic class called Counter:

class Counter {

  constructor() {
    // Setting shared state of the class
    this.count = 0;
  }

  increment() {
    // Changing shared state of the class
    this.count += 1;
  }

  getCount() {
    return this.count;
  }
}

Now, let's create a React component that uses this Counter class:

import React, { useState } from 'react';

function CounterComponent() {
  // Initializing instance of the Counter class 
  //and save it to **ReactJS state**
  const [counterInstance, setCounterInstance] = useState(new Counter());

  const handleIncrement = () => {
    // Let's increment the counter and save it to the react state
    counterInstance.increment();
    // What can go wrong, huh?
    setCounterInstance(counterInstance);
  };

  return (
    <div>
      <h1>Count: {counterInstance.getCount()}</h1>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

export default CounterComponent;

In this example, we have a CounterComponent that initializes and stores an instance of the Counter class in its state. When the user clicks the "Increment" button, the handleIncrement function is called, which increments the count and updates the state with the modified counterInstance.

The problem with this implementation is that React's state updates are asynchronous, and it uses a shallow merge to update the state. As a result, the Counter class instance is not handled correctly, and you may experience issues with the component's behavior or state updates.

To fix this problem, let's refactor the code to store the count value as a plain JavaScript object and keep the logic related to the Counter class separate:

import React, { useState, useEffect, useRef } from "react";

// Pretty much the same class but with one important change
class Counter {
  constructor(initialCount) {
    // Instance will be initialized only once
    console.log("init");
    this.count = initialCount;
  }

  increment() {
    // The method returns value to be saved in react state,
    // not in the shared state of the instance
    this.count += 1;
    return this.count;
  }
}

function CounterComponent() {
  const [counterInstance, setCounterInstance] = useState();
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Save the instance of the Counter class to the react state
    // It is better to use proper state management library here
    setCounterInstance(new Counter(0));
  }, []);

  const handleIncrement = () => {
    const newCount = counterInstance.increment();
    setCount(newCount);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

export default CounterComponent;

Now we use useEffect to create the Counter class instance only once when the component mounts. Then, you store the Counter class instance in the React state with setCounterInstance.

Conclusion:

To avoid issues with asynchronous state updates and shallow merging in React, it's better to store simple data types in the state, rather than class instances, and manage complex logic separately.

However, it's important to note that storing class instances in React state is generally not a best practice. It's more common to keep state as simple as possible, typically using JavaScript primitives and plain objects.