Nikolay
Posted on March 12, 2024
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.
🎉🎉🎉
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
October 31, 2024