Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Readme touchups #1

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Readme touchups #1

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
dbea7ef
README: change folder to directory
legobeat Apr 11, 2023
7229a36
README: Normalize punctuation, titles, and casing
legobeat Apr 11, 2023
95c7171
README: Link Hardhat Network docs
legobeat Apr 11, 2023
ca1613f
README: Slight rewrites
legobeat Apr 11, 2023
999bf1d
fix filename typos
legobeat May 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 39 additions & 38 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
<img src="src/assets/img/logo.png" width="260"/>

Trampoline is a chrome extension boilerplate code to showcase your own Smart Contract Wallets with React 18 and Webpack 5 support.
Trampoline is a Chromium extension boilerplate code to showcase your own Smart Contract Wallets with React 18 and Webpack 5 support.

## Installation and Running
## Installing and Running

### Steps:

1. Verify that your [Node.js](https://nodejs.org/) version is >= **18.12.0**.
2. Clone this repository.
3. Make sure you configure the `provider` in `src/exconfig.ts` to the `Goerli` network.
3. Configure the `provider` in `src/exconfig.ts` to the `Goerli` network.
4. Edit the `bundler` URL pointing to `Goerli` network and accepting EntryPoint=`0x0576a174D229E3cFA37253523E645A78A0C91B57`
5. Run `yarn install` to install the dependencies.
6. Run `yarn start`
6. Run `yarn start`.
7. Load your extension in Chrome by following these steps:
1. Go to `chrome://extensions/`
2. Enable `Developer mode`
3. Click on `Load unpacked extension`
4. Select the `build` folder.
8. Happy hacking.
1. Go to `chrome://extensions/`.
2. Enable `Developer mode`.
3. Click on `Load unpacked extension`.
4. Select the `build` directory.
8. Happy hacking!

> **Warning**
> Auto refresh is disabled by default, so you will have to manually refresh the page.
Expand All @@ -36,7 +36,7 @@ Trampoline is a chrome extension boilerplate code to showcase your own Smart Con

## Config

Config of the extension can be set in `excnfig.json` file.
Config of the extension can be set in `exconfig.ts` file.

```json
{
Expand Down Expand Up @@ -68,58 +68,59 @@ Config of the extension can be set in `excnfig.json` file.

1. Make sure EntryPoint is deployed on the target network.
2. Edit the `entryPointAddress` in `src/exconfig.ts`.
3. Add your network details in `hardhat.condig.ts`.
3. Add your network details in `hardhat.config.ts`.
4. Deploy the factory using `INFURA_ID=<required> npx hardhat deploy --network <network>`.
5. Edit the `factory_address` in `src/exconfig.ts`
6. Edit the `bundler` url in `src/exconfig.ts` that points to your network and accepts requests for your EntryPoint.
7. Run `yarn start`
5. Change the `factory_address` in `src/exconfig.ts` to the address of the newly deployed factory.
6. Edit the `bundler` value in `src/exconfig.ts` to a URL that exposes JSON-RPC access to interact with your depoloyed EntryPoint.
7. Run `yarn start`.

### Local Network

1. Run a local hardhat node with `npx hardhat node` or use the node inside the bundler repo.
1. Run a local [Hardhat Network node](https://hardhat.org/hardhat-network/docs/overview) node with `npx hardhat node` or use the node inside the bundler repo.
2. Deploy EntryPoint from [the infinitism repo](https://github.com/eth-infinitism/account-abstraction), you can find the instructions [below](#how-to-deploy-entrypoint-locally).
3. Edit the `entryPointAddress` in `src/exconfig.ts`.
4. Deploy the factory using `npx hardhat deploy --network localhost`.
5. Edit the `factory_address` in `src/exconfig.ts`
6. Start a local bunder from [the infinitism repo](https://github.com/eth-infinitism/bundler), you can find the instructions [below](#how-to-run-bundler-locally).
7. Edit the `bundler` to `http://localhost:9000/rpc` url in `src/exconfig.ts` that points to your network and accepts requests for your EntryPoint.
8. Run `yarn start`
5. Change the `factory_address` in `src/exconfig.ts` to the address of the newly deployed factory.
6. Start a local bundler from [the infinitism repo](https://github.com/eth-infinitism/bundler) listening on port `9000`. Instructions are [below](#how-to-run-bundler-locally).
7. Change the `bundler` to `http://localhost:9000/rpc` url in `src/exconfig.ts` that points to your network and accepts requests for your EntryPoint.
6. Edit the `bundler` value in `src/exconfig.ts` to `http://localhost:9000/rpc`.
8. Run `yarn start`.

### How to deploy EntryPoint Locally
### Deploying EntryPoint locally

1. Clone the repo https://github.com/eth-infinitism/account-abstraction
1. Clone [https://github.com/eth-infinitism/account-abstraction](https://github.com/eth-infinitism/account-abstraction).
2. Run `yarn install` to install the dependencies.
3. Deploy EntryPoint with `DEBUG=true MNEMONIC_FILE=<path-to-mnemonic-file> yarn deploy --network dev`
3. Deploy EntryPoint with `DEBUG=true MNEMONIC_FILE=<path-to-mnemonic-file> yarn deploy --network dev`.

### How to run bundler Locally
### Running bundler locally

1. Clone the repo https://github.com/eth-infinitism/bundler
1. Clone [https://github.com/eth-infinitism/bundler](https://github.com/eth-infinitism/bundler).
2. Run `yarn install` to install the dependencies.
3. Run `yarn preprocess` to compile all the local dependencies.
4. Edit `bundler.config.json` at `packages/bundler/localconfig`:
a. Edit `network` to your local hardhat node
a. Set `network` to the address of your local Hardhat Network node.
b. Edit the `entryPoint` address that you got while deploying it using instructions above.
c. Make sure your mnemonic & beneficiary are setup correctly.
5. Run the bunder using `yarn bundler --unsafe --auto`
5. Run the bundler using `yarn bundler --unsafe --port 9000 --auto`.

---

## Extension Structure

1. You can change the icons at `src/assets/img/icon-34.png` and `src/assets/img/icon-128.png` for the chrome extension.
1. You can change the icons at `src/assets/img/icon-34.png` and `src/assets/img/icon-128.png` for the Chromium extension.

## Wallet Structure

All your extension's account code must be placed in the `src/pages/Account` folder.
All your extension's account code must be placed in the `src/pages/Account` directory.

There are two subfolders in `src/pages/Account`:
There are two subdirectories in `src/pages/Account`:

- account-api
- components

### account-api folder
### account-api directory

This folder is used to define the `AccountAPI` of your specific account implementation. Every implementation must implement `AccountApiType`.
This directory is used to define the `AccountAPI` of your specific account implementation. Every implementation must implement `AccountApiType`.

```typescript
export abstract class AccountApiType extends BaseAccountAPI {
Expand Down Expand Up @@ -163,15 +164,15 @@ export declare abstract class BaseAccountAPI {

The boilerplate includes a SimpleAccount Implementation by Eth-Infinitism, which you can find [here](https://github.com/eth-infinitism/bundler/blob/main/packages/sdk/src/SimpleAccountAPI.ts).

### components folder
### components directory

This folder is used to define the components that will be used in the Chrome extension. This folder should contain two subfolders.
This directory is used to define the components that will be used in the Chrome extension. This directory should contain two subdirectories.

- onboarding
- sign-message
- transaction

The `onboarding` folder defines the component that will be displayed to the user during the creation of a new wallet. You can display custom information or collect user inputs if needed.
The `onboarding` directory defines the component that will be displayed to the user during the creation of a new wallet. You can display custom information or collect user inputs if needed.

The signature of the `OnboardingComponent` is defined as follows.

Expand All @@ -198,7 +199,7 @@ export type AccountImplementationType = new (
) => AccountApiType;
```

The `sign-message` folder defines the component that will be displayed to the user whenever the dapp requests the user to sign any message, i.e. dapp calls `personal_sign` RPC method. You can display custom information or collect user inputs if needed.
The `sign-message` directory defines the component that will be displayed to the user whenever the dapp requests the user to sign any message, i.e. dapp calls `personal_sign` RPC method. You can display custom information or collect user inputs if needed.

The signature of the `SignMessageComponenet` is defined as follows.

Expand All @@ -223,7 +224,7 @@ The signature of the `signMessage` is as follows, which shows how the `context`
) => Promise<string>;
```

The `transaction` folder defines the component that will be displayed to the user whenever the dapp requests to initiate a transaction, i.e. dapp calls `eth_sendTransaction` RPC method. You can display custom information or collect user inputs if needed.
The `transaction` directory defines the component that will be displayed to the user whenever the dapp requests to initiate a transaction, i.e. dapp calls `eth_sendTransaction` RPC method. You can display custom information or collect user inputs if needed.

The signature of the `TransactionComponent` is defined as follows.

Expand Down Expand Up @@ -258,15 +259,15 @@ If you want you can also attach a paymaster here if your wallet wants to sponsor

### Is the password screen mandatory?

No you can disable that by setting `enablePasswordEncryption` flag to `false` in `exconfig.ts`.
No. You can disable that by setting the `enablePasswordEncryption` flag to `false` in `exconfig.ts`.

> **Warning:** the local storage will be unencrypted and your wallet must return an encrypted state when `serialize` function of `account-api` willo be called or else the user's fund will be at risk.

### Is the view transaction screen mandatory?

If you want to show a custom screen then you must present it to the user in `TransactionComponent` and set `showTransactionConfirmationScreen` to `false`.

### How do I, as a wallet provider attach a custom paymaster?
### How do I, as a wallet provider, attach a custom paymaster?

You must return the paymaster information in the `userOp` constructed by the function `createUnsignedUserOp`.

Expand Down