diff --git a/docs/zkapps/front-end-integration-guides/angular.mdx b/docs/zkapps/front-end-integration-guides/angular.mdx index 59ba86fbe..51d3a0a65 100644 --- a/docs/zkapps/front-end-integration-guides/angular.mdx +++ b/docs/zkapps/front-end-integration-guides/angular.mdx @@ -10,20 +10,43 @@ keywords: # Angular Integration Guide ## Install a Wallet -- Install a wallet that supports zkApp transactions. For this tutorial, we’ll use **Auro Wallet**. [Download it here](https://www.aurowallet.com/). +- Install a wallet that supports zkApp transactions. For this tutorial, we’ll use **Auro Wallet** (v2.3.1). [Download it here](https://www.aurowallet.com/). - Add the Auro Wallet browser extension. - Open the extension and follow the steps to create a new wallet. - Click **"Mainnet"** at the top of the extension view, then select **"Show Testnet"** from the menu. After that, select **"Devnet"**. - Using Devnet will allow us to interact with a test version of the Mina network without needing to spend real Mina to pay for transaction fees. + +
+ Enable testnets on Auro +
+
+ - Fund your wallet using the [Mina Faucet](https://faucet.minaprotocol.com/). - You'll need to wait one block (~3 minutes) to see the change in balance reflected on chain. You can use [Minascan](https://minascan.io/devnet) to track the status of your transaction. +
+ Enable testnets on Auro +
+
+ ## Initialize the Project - Install the Angular CLI globally: ```bash -npm install -g @angular/cli +npm install -g @angular/cli@19 ``` - Create a new Angular project by running: @@ -31,16 +54,14 @@ npm install -g @angular/cli ```bash ng new ``` - -- Install the Angular CLI `npm install -g @angular/cli` -- Create a new project `ng new ` - - Select your preferred stylesheet format. - - For **Server-Side Rendering (SSR)** and **Static Site Generation (SSG/Prerendering)**, choose **Yes**. +- Configure the project + - For **Which stylesheet format would you like to use?**, select CSS. + - For **Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? (y/N)**, choose **No**. - Install the `o1js` library: ```bash cd -npm install o1js +npm install o1js@2 ``` - Start the local development server. @@ -56,7 +77,7 @@ npm run start ```bash cd ../ -npm install -g zkapp-cli +npm install -g zkapp-cli@0.22.3 ``` - Initialize a new zkapp with the CLI. When prompted to create a UI project, select **none**. @@ -91,11 +112,12 @@ import {RouterOutlet} from '@angular/router'; standalone: true, imports: [RouterOutlet], templateUrl: './app.component.html', - styleUrl: './app.component.scss' + styleUrl: './app.component.css' }) export class AppComponent { - title = 'angular-o1js-demo'; + // replace with your project name! + title = ''; constructor() { afterNextRender(async () => { @@ -167,19 +189,29 @@ export class AppComponent { - For security reasons, `SharedArrayBuffer` needs certain headers to be set. These prevent cross origin resources (scripts and content loaded from external domains, iframes, and popups) from accessing shared memory. - Cross-Origin-Opener-Policy (COOP) must be set to `"same-origin"` to prevents cross-origin resources from accessing the main document’s memory. - Cross-Origin-Embedder-Policy (COEP) must be set to `"require-corp"` to restrict the way cross origin resources can be loaded by the main document. They'll either need to be from the same origin or include the `Cross-Origin-Resource-Policy: cross-origin` header. -- Depending on how the application is being run, there are different ways to set these headers. Running the application locally with `ng serve` uses `@angular-devkit/build-angular:dev-server"` which we can configure in the project's `angular.json` file at `/projects/angular-o1js-demo/architect/serve/configurations/development`. +- Depending on how the application is being run, there are different ways to set these headers. Running the application locally with `ng serve` uses `@angular-devkit/build-angular:dev-server"` which we can configure in the project's `angular.json` file at `/projects//architect/serve/configurations/development`. - Architect is Angular's task runner, the entries (called build targets) under `architect` each represent tasks that the Angular CLI can run (`ng build`, `ng serve`, `ng test`, etc). The `builder` property of each target specifies the program that Architect should run to execute the task. The `options` can be used to supply parameters to the builder, and the `configurations`specifies a custom set of options for different target configurations (development, production, etc). - Running `ng serve` locally runs the `@angular-devkit/build-angular:dev-server` builder, and in its options object we can specify custom headers specifying the headers required for `SharedArrayBuffer` as follows: -``` +```json "serve": { "builder": "@angular-devkit/build-angular:dev-server", - "options": { - "headers": { - "Cross-Origin-Opener-Policy": "same-origin", - "Cross-Origin-Embedder-Policy": "require-corp" ++ "options": { ++ "headers": { ++ "Cross-Origin-Opener-Policy": "same-origin", ++ "Cross-Origin-Embedder-Policy": "require-corp" ++ } ++ }, + "configurations": { + "production": { + "buildTarget": "angular-demo:build:production" + }, + "development": { + "buildTarget": "angular-demo:build:development" } }, + "defaultConfiguration": "development" + }, ``` - Restart the server with `npm run start` and view the application in the browser again - the `SharedArrayBuffer` error should be gone! @@ -206,85 +238,57 @@ module.exports = { - Install builders which support using custom webpack configs - Angular's default builder will ignore the webpack file. ```bash -npm i @angular-builders/custom-webpack +npm install @angular-builders/custom-webpack@19 ``` - Update the `serve` and `build` build targets to use the `@angular-builders/custom-webpack` builders and load the file. - - In `angular.json` under `/projects/angular-o1js-demo/architect/build`, replace the default builder `"builder": "@angular-devkit/build-angular:application",` with `"builder": "@angular-builders/custom-webpack:browser"`. - - rename the browser property to `main` in `options`. + - In `angular.json` under `/projects//architect/build`, replace the default builder `"builder": "@angular-devkit/build-angular:application",` with `"builder": "@angular-builders/custom-webpack:browser"`. + - rename the `browser` property to `main` in `options`. - add `"customWebpackConfig": { "path": "./webpack.config.js" },` to `options`. - - delete `server`, `prerender`, and `ssr` from `options`. - - In `angular.json` under `/projects/angular-o1js-demo/architect/serve`, replace the default builder `"builder": "@angular-devkit/build-angular:dev-server",` with `"builder": "@angular-builders/custom-webpack:dev-server"`. -- The build targets should look like this: + - In `angular.json` under `/projects//architect/serve`, replace the default builder `"builder": "@angular-devkit/build-angular:dev-server",` with `"builder": "@angular-builders/custom-webpack:dev-server"`. +- The changes to your build targets should look like this: ```json -"build": { - "builder": "@angular-builders/custom-webpack:browser", - "options": { - "customWebpackConfig": { - "path": "./webpack.config.js" - }, - "main": "src/main.ts", - "outputPath": "dist/", - "index": "src/index.html", - "polyfills": [ - "zone.js" - ], - "tsConfig": "tsconfig.app.json", - "inlineStyleLanguage": "scss", - "assets": [ - { - "glob": "**/*", - "input": "public" - } - ], - "styles": [ - "src/styles.scss" - ], - "scripts": [] - }, - "configurations": { - "production": { - "budgets": [ - { - "type": "initial", - "maximumWarning": "500kB", - "maximumError": "1MB" - }, - { - "type": "anyComponentStyle", - "maximumWarning": "2kB", - "maximumError": "4kB" - } - ], - "outputHashing": "all" - }, - "development": { - "optimization": false, - "extractLicenses": false, - "sourceMap": true - } - }, - "defaultConfiguration": "production" -}, -"serve": { - "builder": "@angular-builders/custom-webpack:dev-server", - "configurations": { - "production": { - "buildTarget": ":build:production" - }, - "development": { - "buildTarget": ":build:development" - } - }, - "options": { - "headers": { - "Cross-Origin-Opener-Policy": "same-origin", - "Cross-Origin-Embedder-Policy": "require-corp" - } - }, - "defaultConfiguration": "development" -}, + "architect": { + "build": { +- "builder": "@angular-devkit/build-angular:application", ++ "builder": "@angular-builders/custom-webpack:browser", + "options": { ++ "customWebpackConfig": { "path": "./webpack.config.js" }, + "outputPath": "dist/angular-demo", + "index": "src/index.html", +- "browser": "src/main.ts", ++ "main": "src/main.ts", + "polyfills": [ + "zone.js" + ], + "tsConfig": "tsconfig.app.json", + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], + "styles": [ + "src/styles.css" + ], + "scripts": [] + }, + "configurations": { ... }, + "defaultConfiguration": "production" + }, + "serve": { +- "builder": "@angular-devkit/build-angular:dev-server", ++ "builder": "@angular-builders/custom-webpack:dev-server", + "options": { + "headers": { + "Cross-Origin-Opener-Policy": "same-origin", + "Cross-Origin-Embedder-Policy": "require-corp" + } + }, + "configurations": { ... }, + "defaultConfiguration": "development" + }, ``` ### Copy o1js into Static Assets @@ -298,8 +302,11 @@ npm i @angular-builders/custom-webpack ``` - Add the `copy-o1js-lib` task to the build script and the start script. - - `"build": "npm run copy-libs && ng build"` - - `"start": "npm run copy-libs && ng serve"` +```json +"build": "npm run copy-libs && ng build", +"start": "npm run copy-libs && ng serve" +``` + - Add `public/lib` to `.gitignore`. ### Load o1js with an `importmap` @@ -330,7 +337,8 @@ declare var o1js: typeof o1jsTypes; - Remove the import of o1js inside of `afterNextRender` and replace it with this: ```tsx -const {Mina, PublicKey, fetchAccount} = o1js; +- const {Mina, PublicKey, fetchAccount} = await import('o1js'); ++ const {Mina, PublicKey, fetchAccount} = o1js; ``` ## Running the App Locally @@ -345,13 +353,18 @@ const {Mina, PublicKey, fetchAccount} = o1js; ## Deploying to GitHub Pages - Now we'll set the app up for deployment to GitHub pages. -- Publish your project to a GitHub repository. +- Publish your project to a GitHub repository with the same name. - Run `ng deploy` and select GitHub Pages. + +```bash +ng deploy +``` + - Add `baseHref` to `options` under `build` in angular.json with the name of your GitHub repository. - **Do not remove the slashes!** ```json -"baseHref": "//" +"baseHref": "//" ``` - Create a deploy script in package.json which copies the required libraries @@ -374,37 +387,18 @@ npm run deploy - Install `coi-serviceworker`. ```bash -npm i coi-serviceworker +npm install coi-serviceworker@^0.1.7 ``` - Update the script that copies `o1js` to `public` to also include the `coi-serviceworker` file: ```json -"copy-libs": "mkdir -p public/lib/o1js && cp node_modules/o1js/dist/web/index.js public/lib/o1js/index.js && cp node_modules/coi-serviceworker/coi-serviceworker.min.js public/lib/coi-serviceworker.min.js" -``` - -- Create a file `src/app/COIServiceWorker.ts` with the following contents. - - Be sure to replace `` with the name of your GitHub repo! - -```tsx -export {}; - -function loadCOIServiceWorker() { - console.log('Load COIServiceWorker', navigator); - if (typeof window !== 'undefined' && 'serviceWorker' in navigator && window.location.hostname != 'localhost') { - navigator.serviceWorker.register('//lib/coi-serviceworker.min.js') - .then(registration => console.log('COI Service Worker registered with scope:', registration.scope)) - .catch(error => console.error('COI Service Worker registration failed:', error)); - } -} - -loadCOIServiceWorker(); +"copy-libs": "mkdir -p public/lib/o1js && cp node_modules/o1js/dist/web/index.js public/lib/o1js/index.js && cp node_modules/coi-serviceworker/coi-serviceworker.min.js public/coi-serviceworker.min.js" ``` -- Import it at the top of `src/app/app.component.ts`. - -```tsx -import './COIServiceWorker'; +- Import it in your `index.html` file right above the o1js importmap script. +```html + ``` - Redeploy the application with the `COIServiceWorker` files. diff --git a/docs/zkapps/writing-a-zkapp/feature-overview/fetch-events-and-actions.mdx b/docs/zkapps/writing-a-zkapp/feature-overview/fetch-events-and-actions.mdx index 148bc2e21..641aa695f 100644 --- a/docs/zkapps/writing-a-zkapp/feature-overview/fetch-events-and-actions.mdx +++ b/docs/zkapps/writing-a-zkapp/feature-overview/fetch-events-and-actions.mdx @@ -87,7 +87,7 @@ For an end-to-end example of zkApp fetching actions from a running network and s ### Fetching Events from an Archive Node -Within your smart contract, you can use `fetchEvents()` to retrieve events emitted by your smart contract as part of previous transactions. +Outside of smart contracts, you can use `fetchEvents()` to retrieve events emitted by your smart contract as part of previous transactions. ```ts const zkapp = new MyContract(address); diff --git a/static/img/angular-integration-guide/auro-1.png b/static/img/angular-integration-guide/auro-1.png new file mode 100644 index 000000000..4a92c401d Binary files /dev/null and b/static/img/angular-integration-guide/auro-1.png differ diff --git a/static/img/angular-integration-guide/faucet.png b/static/img/angular-integration-guide/faucet.png new file mode 100644 index 000000000..9d235f588 Binary files /dev/null and b/static/img/angular-integration-guide/faucet.png differ