Merge pull request #970 from o1-labs/fix/next-project

Fix for tutorial #4 (project files).

examples/zkapps/04-zkapp-browser-ui/contracts/.github/workflows/ci.yml

@@ -1,25 +1,27 @@
-#
-# ci.yml
-#
-# Run tests for all pushed commits and opened pull requests on Github.
-#
-
-name: CI
-on: [push, pull_request]
+name: zkApp tests
+on:
+  push:
+  pull_request:
+  workflow_dispatch: {}
 jobs:
   test:
-    runs-on: ubuntu-latest
-    timeout-minutes: 10
+    timeout-minutes: 30
+    runs-on: ${{ matrix.os }}
+    strategy:
+      fail-fast: true
+      matrix:
+        node: [18, 20]
+        os: [ubuntu-latest]
     steps:
       - name: Set up NodeJS
         uses: actions/setup-node@v4
         with:
-          node-version: '16'
+          node-version: ${{ matrix.node }}
       - name: Git checkout
         uses: actions/checkout@v4
       - name: NPM ci, build, & test
         run: |
-          npm install
+          npm ci
           npm run build --if-present
           npm test
         env:

examples/zkapps/04-zkapp-browser-ui/contracts/config.json

@@ -1,13 +1,4 @@
 {
   "version": 1,
-  "deployAliases": {
-    "devnet": {
-      "url": "https://api.minascan.io/node/devnet/v1/graphql",
-      "keyPath": "keys/devnet.json",
-      "feepayerKeyPath": "This is specific to each developer and can be generated with the zkApp CLI. Update with your feepayer keypath to run this tutorial example",
-      "feepayerAlias": "dev",
-      "fee": ".1",
-      "smartContract": "Add"
-    }
-  }
+  "deployAliases": {}
 }

examples/zkapps/04-zkapp-browser-ui/contracts/package.json

@@ -30,12 +30,15 @@
     "@typescript-eslint/parser": "^5.5.0",
     "eslint": "^8.7.0",
     "eslint-plugin-o1js": "^0.4.0",
-    "jest": "^27.3.1",
+    "jest": "^28.1.3",
     "prettier": "^2.3.2",
-    "ts-jest": "^27.0.7",
-    "typescript": "^4.7.2"
+    "ts-jest": "^28.0.8",
+    "typescript": "^5.1"
   },
   "peerDependencies": {
-      "o1js": "1.0.*"
-   }
+    "o1js": "^1.*"
+  },
+  "engines": {
+    "node": ">=18.14.0"
+  }
 }

examples/zkapps/04-zkapp-browser-ui/contracts/src/Add.test.ts

@@ -1,11 +1,11 @@
+import { AccountUpdate, Field, Mina, PrivateKey, PublicKey } from 'o1js';
 import { Add } from './Add';
-import { Field, Mina, PrivateKey, PublicKey, AccountUpdate } from 'o1js';
 
 /*
  * This file specifies how to test the `Add` example smart contract. It is safe to delete this file and replace
  * with your own tests.
  *
- * See https://docs.minaprotocol.com/zkapps/writing-a-zkapp/introduction-to-zkapps for more info.
+ * See https://docs.minaprotocol.com/zkapps for more info.
  */
 
 let proofsEnabled = false;

examples/zkapps/04-zkapp-browser-ui/contracts/src/Add.ts

@@ -2,7 +2,7 @@ import { Field, SmartContract, state, State, method } from 'o1js';
 
 /**
  * Basic Example
- * See https://docs.minaprotocol.com/zkapps/writing-a-zkapp/introduction-to-zkapps for more info.
+ * See https://docs.minaprotocol.com/zkapps for more info.
  *
  * The Add contract initializes the state variable 'num' to be a Field(1) value by default when deployed.
  * When the 'update' method is called, the Add contract adds Field(2) to its 'num' contract state.

examples/zkapps/04-zkapp-browser-ui/contracts/tsconfig.json

@@ -17,7 +17,8 @@
     "declaration": true,
     "sourceMap": true,
     "noFallthroughCasesInSwitch": true,
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "useDefineForClassFields": false,
   },
-  "include": ["./src"]
+  "include": ["./src"],
 }

examples/zkapps/04-zkapp-browser-ui/ui/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage
@@ -23,7 +24,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.pnpm-debug.log*
 
 # local env files
 .env*.local

examples/zkapps/04-zkapp-browser-ui/ui/README.md

@@ -8,6 +8,10 @@ First, run the development server:
 npm run dev
 # or
 yarn dev
+# or
+pnpm dev
+# or
+bun dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
@@ -18,6 +22,8 @@ You can start editing the page by modifying `pages/index.tsx`. The page auto-upd
 
 The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
 
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
 ## Learn More
 
 To learn more about Next.js, take a look at the following resources:

examples/zkapps/04-zkapp-browser-ui/ui/ghp-postbuild.js

@@ -1,25 +1,25 @@
-const fs = require('fs');
-const path = require('path');
+import { readdirSync, readFileSync, writeFileSync } from 'fs';
+import { dirname, extname, join } from 'path';
+import { fileURLToPath } from 'url';
+
+// This script modifies the built CSS files and prepends the repo-name to the asset URLs
+// to be compatible with the GitHub pages deployments.
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const cssDir = join(__dirname, '/out/_next/static/css');
 
-// This script modifies the built CSS files and prepends the repo-name to the asset URLs.
-// to be compatible with GitHub Pages deployment.
-const cssDir = path.join(__dirname, '/out/_next/static/css');
 // Update your repository name here if it is different from the project name.
 let repoURL = '04-zkapp-browser-ui';
-const files = fs.readdirSync(cssDir);
+const files = readdirSync(cssDir);
 
 files.forEach((file) => {
-  if (path.extname(file) === '.css') {
-    const filePath = path.join(cssDir, file);
-
-    const data = fs.readFileSync(filePath, 'utf8');
-
+  if (extname(file) === '.css') {
+    const filePath = join(cssDir, file);
+    const data = readFileSync(filePath, 'utf8');
     const singleQuoteRegex = new RegExp(`url\\(\\s*'\\/(?!${repoURL})`, 'g');
     const doubleQuoteRegex = new RegExp(`url\\(\\s*"\\/(?!${repoURL})`, 'g');
-
     let result = data.replace(singleQuoteRegex, `url('/${repoURL}/`);
     result = result.replace(doubleQuoteRegex, `url("/${repoURL}/`);
-
-    fs.writeFileSync(filePath, result, 'utf8');
+    writeFileSync(filePath, result, 'utf8');
   }
-});
+});

examples/zkapps/04-zkapp-browser-ui/ui/next.config.js → examples/zkapps/04-zkapp-browser-ui/ui/next.config.mjs

@@ -1,19 +1,27 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: false,
   pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
 
-  webpack(config) {
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      o1js: require('path').resolve('node_modules/o1js'),
-    };
+  webpack(config, { isServer }) {
+    if (!isServer) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        o1js: path.resolve(__dirname, 'node_modules/o1js/dist/web/index.js'),
+      };
+    }
     config.experiments = { ...config.experiments, topLevelAwait: true };
     config.optimization.minimizer = [];
     return config;
   },
   // To enable o1js for the web, we must set the COOP and COEP headers.
-  // See here for more information: https://docs.minaprotocol.com/zkapps/writing-a-zkapp/introduction-to-zkapps/how-to-write-a-zkapp-ui#enabling-coop-and-coep-headers
+  // See here for more information: https://docs.minaprotocol.com/zkapps/how-to-write-a-zkapp-ui#enabling-coop-and-coep-headers
   async headers() {
     return [
       {
@@ -34,17 +42,16 @@ const nextConfig = {
   images: {
     unoptimized: true,
   },
-
+  output: 'export',
   /* Used to serve the Next.js app from a subdirectory (the GitHub repo name) and
    * assetPrefix is used to serve assets (JS, CSS, images, etc.) from that subdirectory
    * when deployed to GitHub Pages. The assetPrefix needs to be added manually to any assets
    * if they're not loaded by Next.js' automatic handling (for example, in CSS files or in a <img> element).
    * The 'ghp-postbuild.js' script in this project prepends the repo name to asset urls in the built css files
    * after running 'npm run deploy'.
    */
-  basePath: process.env.NODE_ENV === 'production' ? '/04-zkapp-browser-ui' : '', // update basePath if you change your repo name
-  assetPrefix:
-    process.env.NODE_ENV === 'production' ? '/04-zkapp-browser-ui' : '', // update assetPrefix if you change your repo name.
+  basePath: process.env.NODE_ENV === 'production' ? '/04-zkapp-browser-ui' : '', // update if your repo name changes for 'npm run deploy' to work correctly
+  assetPrefix: process.env.NODE_ENV === 'production' ? '/04-zkapp-browser-ui/' : '', // update if your repo name changes for 'npm run deploy' to work correctly
 };
 
-module.exports = nextConfig;
+export default nextConfig;