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.

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

Fix for tutorial #4 (project files). #970

Merged
merged 11 commits into from
Jun 6, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
@@ -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:
Expand Down
11 changes: 1 addition & 10 deletions examples/zkapps/04-zkapp-browser-ui/contracts/config.json
Original file line number Diff line number Diff line change
@@ -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": {}
}
3,360 changes: 1,558 additions & 1,802 deletions examples/zkapps/04-zkapp-browser-ui/contracts/package-lock.json

Large diffs are not rendered by default.

13 changes: 8 additions & 5 deletions examples/zkapps/04-zkapp-browser-ui/contracts/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
4 changes: 2 additions & 2 deletions examples/zkapps/04-zkapp-browser-ui/contracts/src/Add.test.ts
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
2 changes: 1 addition & 1 deletion examples/zkapps/04-zkapp-browser-ui/contracts/src/Add.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
5 changes: 3 additions & 2 deletions examples/zkapps/04-zkapp-browser-ui/contracts/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@
"declaration": true,
"sourceMap": true,
"noFallthroughCasesInSwitch": true,
"allowSyntheticDefaultImports": true
"allowSyntheticDefaultImports": true,
"useDefineForClassFields": false,
},
"include": ["./src"]
"include": ["./src"],
}
3 changes: 0 additions & 3 deletions examples/zkapps/04-zkapp-browser-ui/ui/.eslintrc.json

This file was deleted.

2 changes: 1 addition & 1 deletion examples/zkapps/04-zkapp-browser-ui/ui/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz

# testing
/coverage
Expand All @@ -23,7 +24,6 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# local env files
.env*.local
Expand Down
6 changes: 6 additions & 0 deletions examples/zkapps/04-zkapp-browser-ui/ui/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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:
Expand Down
30 changes: 15 additions & 15 deletions examples/zkapps/04-zkapp-browser-ui/ui/ghp-postbuild.js
Original file line number Diff line number Diff line change
@@ -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');
}
});
});
Original file line number Diff line number Diff line change
@@ -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 [
{
Expand All @@ -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;
Loading
Loading