|
| 1 | +[](https://github.com/bobanetwork/aa-hc-example/actions/workflows/backend-tests.yml) |
| 2 | +[](https://github.com/bobanetwork/aa-hc-example/actions/workflows/contract-tests.yml) |
| 3 | + |
| 4 | +# What is this? |
| 5 | +This is a (hopefully) easy to use example of how you can use [Hybrid Compute](https://docs.boba.network/developer/features/aa-basics/hybrid-compute) with [Account Abstraction](https://docs.boba.network/developer/features/aa-basics) to build powerful Web3 Apps! |
| 6 | + |
| 7 | +This "Hello World" example allows you to fetch the current price of any cryptocurrency from an off-chain API such as CoinRanking into your smart contract within 1 single, atomic transaction! |
| 8 | + |
| 9 | +You can run this repo in 2 ways: |
| 10 | +- On our official testnet "Boba Sepolia" |
| 11 | +- or spin up the local stack end-to-end (including the local chain, the bundler for Account Abstraction, the snap, etc.) |
| 12 | + |
| 13 | +# Get started |
| 14 | +Clone this repo with `git clone --recurse-submodules -j8 [email protected]:bobanetwork/aa-hc-example.git` |
| 15 | + |
| 16 | +## Installation |
| 17 | +You will need a handful of tools to run the full stack (local): |
| 18 | +- `cargo` [[Download]](https://doc.rust-lang.org/cargo/getting-started/installation.html) |
| 19 | +- `forge` [[Download]](https://book.getfoundry.sh/getting-started/installation) |
| 20 | +- `npm` | `yarn` or `pnpm` [[Download]](https://nodejs.org/en/download/package-manager) |
| 21 | +- `golang` [[Download]](https://go.dev/doc/install) |
| 22 | +- `Metamask Flask` (Development build of Metamask) [[Download]](https://chromewebstore.google.com/detail/metamask-flask-developmen/ljfoeinjpaedjfecbmggjgodbgkmjkjk) |
| 23 | + |
| 24 | +To run the stack on Boba Sepolia you can skip `cargo` and `golang` which is only required to run the local stack. |
| 25 | + |
| 26 | +## Local |
| 27 | +All contracts and services are deployed and environment variables are substituted across all services automatically to ensure a convenient developer experience. |
| 28 | + |
| 29 | +1. Make sure you have the dependencies as outlined above installed and Docker running. |
| 30 | +2. Run `pnpm start:local` to spin the local stack up. Make sure you have [Docker](https://www.docker.com/products/docker-desktop/) running. |
| 31 | +3. Head over to [localhost:8001](http://localhost:8001) to create your Smart Wallet. |
| 32 | +4. Once you created your account, try it out by using the "Transfer Funds" section. Make sure you funded your new "Snap Account" with some `ETH` on Boba Sepolia. |
| 33 | +5. Congrats you sent your first `UserOp` on your local devnet using Account Abstraction! This is the moment your smart account gets deployed on-chain (on the first UserOp). |
| 34 | +6. Navigate now to [localhost:8000](http://localhost:8000) to interact with your local DApp which utilizes Hybrid Compute via Account Abstraction to fetch off-chain data to your smart contract! In our example we fetch the current price of a cryptocurrency asset. |
| 35 | + |
| 36 | + |
| 37 | +Please note, that the local stack actually spins up the Boba L2 locally, the Bundler ("Rundler") along with other local services. This might take a while to startup. |
| 38 | + |
| 39 | +## Boba Sepolia |
| 40 | + |
| 41 | +1. Copy `/contracts/.env-example` and name it `.env`. All necessary variables are pre-filled except of `PRIVATE_KEY`. |
| 42 | +2. Add your own private key, that contains some ETH on Boba Sepolia in order to deploy the contracts on testnet. You can obtain some SepETH on Sepolia (L1) from any [faucet](https://cloud.google.com/application/web3/faucet/ethereum/sepolia) and bridge them to L2 through our [Gateway](https://gateway.boba.network/). |
| 43 | +3. Run `pnpm start:sepolia` to spin up the reduced local stack to use the existing infrastructure on Boba Sepolia. |
| 44 | +4. Head over to [hc-wallet.sepolia.boba.network](https://hc-wallet.sepolia.boba.network/) to create your Smart Wallet. |
| 45 | +5. Once you created your account, try it out by using the "Transfer Funds" section. Make sure you funded your new "Snap Account" with some `ETH` on Boba Sepolia. |
| 46 | +6. Congrats you sent your first `UserOp` on Boba Sepolia using Account Abstraction! If you navigate to the [Block-Explorer](https://testnet.bobascan.com/) you should see your contract wallet. |
| 47 | +7. Navigate now to [localhost:8000](http://localhost:8000) to interact with your local DApp which utilizes Hybrid Compute via Account Abstraction to fetch off-chain data to your smart contract! In our example we fetch the current price of a cryptocurrency asset. |
| 48 | + |
| 49 | +When you follow the steps above your application will use the already deployed backend below for simplification. If you want to deploy your own backend instead follow these steps: |
| 50 | +1. Deploy the backend to your cloud of your choosing [[here is more documentation on that](./backend/README.md)]. We've provided you with a [Dockerfile](./backend/Dockerfile) and [Docker Compose](./backend/docker-compose.yml) to make this as easy as possible. |
| 51 | +2. Once your backend is live, change the `BACKEND_URL` in your [.env](./contracts/.env) (if the file doesn't exist, you skipped the steps above) within your `contracts folder`. |
| 52 | +3. Rerun the script `pnpm start:sepolia` and try it out as described above. |
| 53 | + |
| 54 | +| Name | Address | Explainer | |
| 55 | +|------------------|--------------------------------------------------|-------------------------------------| |
| 56 | +| BACKEND | https://aa-hc-example.onrender.com/hc | | |
| 57 | +| FRONTEND | https://aa-hc-example-fe.onrender.com | | |
| 58 | +| HC_HELPER_ADDR | 0x1c64EC0A5E2C58295c3208a63209A2A719dF68D8 | HC Helper is system-wide available | |
| 59 | +| TOKEN_PRICE_ADDR | 0xcad49c0381c1B0779A318c2326Db43A6073adC1e | |
| 60 | +| RPC_URL | https://gateway.tenderly.co/public/boba-sepolia | | |
| 61 | +| -> More RPC URls | https://chainlist.org/chain/28882 | | |
| 62 | + |
| 63 | + |
| 64 | +This is what a successful transaction will look like: [0x30056b3ff720f4d824422bd077b88c4333e86fbe5522bcdba96cfc8fa2a69b52](https://testnet.bobascan.com/tx/0x30056b3ff720f4d824422bd077b88c4333e86fbe5522bcdba96cfc8fa2a69b52?chainid=28882) |
| 65 | + |
| 66 | +This is what it will look like on the frontend provided: |
| 67 | + |
| 68 | + |
| 69 | +# How does it work? |
| 70 | +This example utilizes [Hybrid Compute 2.0](https://docs.boba.network/developer/features/aa-basics/hybrid-compute) based on [Account Abstraction](https://docs.boba.network/developer/features/aa-basics#what-is-account-abstraction). |
| 71 | + |
| 72 | +Here is a high level overview of what happens: |
| 73 | + |
| 74 | + |
| 75 | + |
| 76 | + |
| 77 | +The actual API call happens when the gas estimation happens (click for full page view): |
| 78 | + |
| 79 | +[](./assets/aa_hc_estimation.png) |
| 80 | + |
| 81 | + |
| 82 | +If the gas estimation was successful, then we can submit our user operation (click for full page view): |
| 83 | + |
| 84 | +[](./assets/aa_hc_submit.png) |
| 85 | + |
| 86 | +# Testing |
| 87 | +Whenever you make changes and push to `main` on your Github repository relevant tests are being run by Github actions to make sure everything works as expected. |
| 88 | + |
| 89 | +If you want to run tests locally, execute `pnpm test`. |
0 commit comments