From ecf4ccbae0594e792cdc83ebaa1ca2a85264ad97 Mon Sep 17 00:00:00 2001 From: Katie Noland Date: Wed, 18 Sep 2024 11:14:24 -0600 Subject: [PATCH 1/9] updates cli to use app router and skip src directory in next projects --- .gitignore | 1 + src/lib/project.js | 42 +++++++++++++------ src/lib/ui/next/components/GradientBG.js | 2 +- src/lib/ui/next/customNextLayoutJs.js | 17 ++++++++ src/lib/ui/next/customNextLayoutTs.js | 18 ++++++++ .../{customNextIndex.js => customNextPage.js} | 10 ++--- src/lib/ui/next/styles/globals.css | 12 +++--- 7 files changed, 78 insertions(+), 24 deletions(-) create mode 100644 src/lib/ui/next/customNextLayoutJs.js create mode 100644 src/lib/ui/next/customNextLayoutTs.js rename src/lib/ui/next/{customNextIndex.js => customNextPage.js} (95%) diff --git a/.gitignore b/.gitignore index 4da7741a..85f13062 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,7 @@ coverage # Editor .vscode +.idea # System .DS_Store diff --git a/src/lib/project.js b/src/lib/project.js index d1d41313..0550b23e 100644 --- a/src/lib/project.js +++ b/src/lib/project.js @@ -7,7 +7,9 @@ import url from 'node:url'; import util from 'node:util'; import ora from 'ora'; import shell from 'shelljs'; -import customNextIndex from '../lib/ui/next/customNextIndex.js'; +import customNextPage from '../lib/ui/next/customNextPage.js'; +import customNextLayoutTs from '../lib/ui/next/customNextLayoutTs.js'; +import customNextLayoutJs from '../lib/ui/next/customNextLayoutJs.js'; import customNuxtIndex from '../lib/ui/nuxt/customNuxtIndex.js'; import nuxtGradientBackground from '../lib/ui/nuxt/nuxtGradientBackground.js'; import customLayoutSvelte from '../lib/ui/svelte/customLayoutSvelte.js'; @@ -314,12 +316,12 @@ async function scaffoldNext(projectName) { // set the project name and default flags // https://nextjs.org/docs/api-reference/create-next-app#options let args = [ - 'create-next-app@14.2.3', + 'create-next-app@14.2.12', 'ui', '--use-npm', - '--src-dir', + '--no-src-dir', '--import-alias "@/*"', - '--no-app', + '--app', ]; spawnSync('npx', args, { @@ -354,7 +356,7 @@ const __dirname = path.dirname(__filename); `; newNextConfig += nextConfig.replace( - /^};(.*?)$/gm, // Search for the last '};' in the file. + "};", // Search for the last '};' in the file. ` webpack(config, { isServer }) { if (!isServer) { @@ -398,29 +400,40 @@ const __dirname = path.dirname(__filename); fs.writeFileSync(path.join('ui', 'next.config.mjs'), newNextConfig); - const indexFileName = useTypescript ? 'index.tsx' : 'index.js'; + const pageFileName = useTypescript ? 'page.tsx' : 'page.js'; fs.writeFileSync( - path.join('ui', 'src/pages', indexFileName), - customNextIndex, + path.join('ui', 'app', pageFileName), + customNextPage, 'utf8' ); + + const layoutFileName = useTypescript ? 'layout.tsx' : 'layout.js'; + + fs.writeFileSync( + path.join('ui', 'app', layoutFileName), + useTypescript ? customNextLayoutTs : customNextLayoutJs, + 'utf8' + ); + // Adds landing page components directory and files to NextJS project. fs.copySync( path.join(__dirname, 'ui', 'next', 'components'), - path.join('ui', 'src', 'components') + path.join('ui', 'components') ); // Adds landing page style directory and files to NextJS project. fs.copySync( path.join(__dirname, 'ui', 'next', 'styles'), - path.join('ui', 'src', 'styles') + path.join('ui', 'styles') ); // Removes create-next-app assets fs.emptyDirSync(path.join('ui', 'public')); + fs.rmSync(path.join('ui', 'app', 'favicon.ico')); + // Adds landing page assets directory and files to NextJS project. fs.copySync( path.join(__dirname, 'ui', 'next', 'assets'), @@ -452,9 +465,14 @@ const __dirname = path.dirname(__filename); "jsx": "preserve", "paths": { "@/*": ["./src/*"] - } + }, + "plugins": [ + { + "name": "next" + } + ] }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } `; diff --git a/src/lib/ui/next/components/GradientBG.js b/src/lib/ui/next/components/GradientBG.js index bc434017..10ae2f62 100644 --- a/src/lib/ui/next/components/GradientBG.js +++ b/src/lib/ui/next/components/GradientBG.js @@ -1,5 +1,5 @@ // @ts-nocheck -import styles from '@/styles/Home.module.css'; +import styles from '../styles/Home.module.css'; import { useEffect, useState, useRef } from 'react'; export default function GradientBG({ children }) { diff --git a/src/lib/ui/next/customNextLayoutJs.js b/src/lib/ui/next/customNextLayoutJs.js new file mode 100644 index 00000000..d9123e28 --- /dev/null +++ b/src/lib/ui/next/customNextLayoutJs.js @@ -0,0 +1,17 @@ +export default `import "../styles/globals.css"; +export const metadata = { + title: 'Mina zkApp UI', + description: 'built with o1js', + icons: { + icon: '/assets/favicon.ico', + }, +}; + +export default function RootLayout({ children }) { + return ( + + {children} + + ); +} +`; diff --git a/src/lib/ui/next/customNextLayoutTs.js b/src/lib/ui/next/customNextLayoutTs.js new file mode 100644 index 00000000..b1ec8e65 --- /dev/null +++ b/src/lib/ui/next/customNextLayoutTs.js @@ -0,0 +1,18 @@ +export default `import "../styles/globals.css"; + +export const metadata = { + title: 'Mina zkApp UI', + description: 'built with o1js', + icons: { + icon: '/assets/favicon.ico', + }, +}; + +export default function RootLayout({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ); +} +`; diff --git a/src/lib/ui/next/customNextIndex.js b/src/lib/ui/next/customNextPage.js similarity index 95% rename from src/lib/ui/next/customNextIndex.js rename to src/lib/ui/next/customNextPage.js index 483ed7f1..3525f5f8 100644 --- a/src/lib/ui/next/customNextIndex.js +++ b/src/lib/ui/next/customNextPage.js @@ -1,17 +1,17 @@ -export default ` +export default `'use client'; import Head from 'next/head'; import Image from 'next/image'; import { useEffect } from 'react'; import GradientBG from '../components/GradientBG.js'; import styles from '../styles/Home.module.css'; -import heroMinaLogo from '../../public/assets/hero-mina-logo.svg'; -import arrowRightSmall from '../../public/assets/arrow-right-small.svg'; +import heroMinaLogo from '../public/assets/hero-mina-logo.svg'; +import arrowRightSmall from '../public/assets/arrow-right-small.svg'; export default function Home() { useEffect(() => { (async () => { const { Mina, PublicKey } = await import('o1js'); - const { Add } = await import('../../../contracts/build/src/'); + const { Add } = await import('../../contracts/build/src/'); // Update this to use the address (public key) for your zkApp account. // To try it out, you can try this address for an example "Add" smart contract that we've deployed to @@ -147,4 +147,4 @@ export default function Home() { ); } -`; +`; \ No newline at end of file diff --git a/src/lib/ui/next/styles/globals.css b/src/lib/ui/next/styles/globals.css index 5c18b7f0..22ba4bc5 100644 --- a/src/lib/ui/next/styles/globals.css +++ b/src/lib/ui/next/styles/globals.css @@ -2,23 +2,23 @@ font-family: 'ABC Monument Grotesk'; font-style: normal; font-weight: normal; - src: url('/assets/fonts/ABCMonumentGrotesk-Regular.woff2') format('woff2'), - url('/assets/fonts/ABCMonumentGrotesk-Regular.woff') format('woff'); + src: url('../public/assets/fonts/ABCMonumentGrotesk-Regular.woff2') format('woff2'), + url('../public/assets/fonts/ABCMonumentGrotesk-Regular.woff') format('woff'); } @font-face { font-family: 'ABC Monument Grotesk Light'; font-style: normal; - src: url('/assets/fonts/ABCMonumentGrotesk-Light.woff2') format('woff2'), - url('/assets/fonts/ABCMonumentGrotesk-Light.woff') format('woff'); + src: url('../public/assets/fonts/ABCMonumentGrotesk-Light.woff2') format('woff2'), + url('../public/assets/fonts/ABCMonumentGrotesk-Light.woff') format('woff'); } @font-face { font-family: 'ABC Monument Grotesk Bold'; font-style: normal; font-weight: bold; - src: url('/assets/fonts/ABCMonumentGrotesk-Bold.woff2') format('woff2'), - url('/assets/fonts/ABCMonumentGrotesk-Bold.woff') format('woff'); + src: url('../public/assets/fonts/ABCMonumentGrotesk-Bold.woff2') format('woff2'), + url('../public/assets/fonts/ABCMonumentGrotesk-Bold.woff') format('woff'); } :root { From 6efe2ea79549760dd90c737c1dbccbfacaa95a7a Mon Sep 17 00:00:00 2001 From: Katie Noland Date: Thu, 19 Sep 2024 09:23:32 -0600 Subject: [PATCH 2/9] updates the gh pages build to work with app dir --- package.json | 1 + src/bin/index.js | 2 +- src/lib/project.js | 49 ++++++++++++---------------------------------- 3 files changed, 15 insertions(+), 37 deletions(-) diff --git a/package.json b/package.json index 77400f60..7b227ec3 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "zkapp-cli": "./src/bin/index.js" }, "scripts": { + "run": "rm -rf demo && node src/bin/index.js project demo --ui next", "clean": "rimraf ./build && rimraf ./reports", "coverage": "node --experimental-vm-modules ./node_modules/jest/bin/jest.js --coverage", "format": "prettier --write --ignore-unknown **/*", diff --git a/src/bin/index.js b/src/bin/index.js index db207252..c9f9d261 100755 --- a/src/bin/index.js +++ b/src/bin/index.js @@ -48,7 +48,7 @@ yargs(hideBin(process.argv)) // chalk.reset is a hack to force the terminal to retain a line break below chalk.reset( ` - +LOCAL CLI __ _ /_ | | | ___ | | __ _| |__ ___ diff --git a/src/lib/project.js b/src/lib/project.js index 0550b23e..e686b3af 100644 --- a/src/lib/project.js +++ b/src/lib/project.js @@ -356,8 +356,9 @@ const __dirname = path.dirname(__filename); `; newNextConfig += nextConfig.replace( - "};", // Search for the last '};' in the file. + '};', ` + reactStrictMode: false, webpack(config, { isServer }) { if (!isServer) { config.resolve.alias = { @@ -392,11 +393,6 @@ const __dirname = path.dirname(__filename); };` ); - // This prevents usEffect from running twice on initial mount. - newNextConfig = newNextConfig.replace( - 'reactStrictMode: true', - 'reactStrictMode: false' - ); fs.writeFileSync(path.join('ui', 'next.config.mjs'), newNextConfig); @@ -408,13 +404,12 @@ const __dirname = path.dirname(__filename); 'utf8' ); - const layoutFileName = useTypescript ? 'layout.tsx' : 'layout.js'; fs.writeFileSync( - path.join('ui', 'app', layoutFileName), - useTypescript ? customNextLayoutTs : customNextLayoutJs, - 'utf8' + path.join('ui', 'app', layoutFileName), + useTypescript ? customNextLayoutTs : customNextLayoutJs, + 'utf8' ); // Adds landing page components directory and files to NextJS project. @@ -528,12 +523,6 @@ const __dirname = path.dirname(__filename); return config;` ); - // update page extensions - newNextConfig = newNextConfig.replace( - 'reactStrictMode: false,', - `reactStrictMode: false, - pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],` - ); fs.writeFileSync(path.join('ui', 'next.config.mjs'), newNextConfig); @@ -566,42 +555,30 @@ const __dirname = path.dirname(__filename); ); shell.cd('..'); - const appFileName = useTypescript ? '_app.tsx' : '_app.js'; - const appPagesFileName = useTypescript ? '_app.page.tsx' : '_app.page.js'; - const indexFileName = useTypescript ? 'index.tsx' : 'index.js'; - const indexPagesFileName = useTypescript - ? 'index.page.tsx' - : 'index.page.js'; const reactCOIServiceWorkerFileName = useTypescript ? 'reactCOIServiceWorker.tsx' : 'reactCOIServiceWorker.js'; - shell.mv( - path.join('ui', 'src/pages', appFileName), - path.join('ui', 'src/pages', appPagesFileName) - ); - shell.mv( - path.join('ui', 'src/pages', indexFileName), - path.join('ui', 'src/pages', indexPagesFileName) - ); - let appFile = fs.readFileSync( - path.join('ui', 'src', 'pages', appPagesFileName), + const pageFileName = useTypescript ? 'page.tsx' : 'page.js'; + + let pageFile = fs.readFileSync( + path.join('ui', 'app', pageFileName), 'utf8' ); - appFile = appFile.replace( + pageFile = pageFile.replace( 'export default function', `import './reactCOIServiceWorker'; export default function` ); fs.writeFileSync( - path.join('ui', 'src', 'pages', appPagesFileName), - appFile + path.join('ui', 'app', pageFileName), + pageFile ); fs.writeFileSync( - path.join('ui', 'src', 'pages', reactCOIServiceWorkerFileName), + path.join('ui', 'app', reactCOIServiceWorkerFileName), `export {}; function loadCOIServiceWorker() { From 2dde8828ec10361104907b957a0a7cb083d8e974 Mon Sep 17 00:00:00 2001 From: Katie Noland Date: Thu, 19 Sep 2024 09:48:45 -0600 Subject: [PATCH 3/9] removes js option from next apps --- src/lib/project.js | 54 ++++++------------- ...tomNextLayoutTs.js => customNextLayout.js} | 0 src/lib/ui/next/customNextLayoutJs.js | 17 ------ src/lib/ui/next/customNextPage.js | 2 +- 4 files changed, 17 insertions(+), 56 deletions(-) rename src/lib/ui/next/{customNextLayoutTs.js => customNextLayout.js} (100%) delete mode 100644 src/lib/ui/next/customNextLayoutJs.js diff --git a/src/lib/project.js b/src/lib/project.js index e686b3af..f6de2878 100644 --- a/src/lib/project.js +++ b/src/lib/project.js @@ -8,8 +8,7 @@ import util from 'node:util'; import ora from 'ora'; import shell from 'shelljs'; import customNextPage from '../lib/ui/next/customNextPage.js'; -import customNextLayoutTs from '../lib/ui/next/customNextLayoutTs.js'; -import customNextLayoutJs from '../lib/ui/next/customNextLayoutJs.js'; +import customNextLayout from '../lib/ui/next/customNextLayout.js'; import customNuxtIndex from '../lib/ui/nuxt/customNuxtIndex.js'; import nuxtGradientBackground from '../lib/ui/nuxt/nuxtGradientBackground.js'; import customLayoutSvelte from '../lib/ui/svelte/customLayoutSvelte.js'; @@ -320,6 +319,7 @@ async function scaffoldNext(projectName) { 'ui', '--use-npm', '--no-src-dir', + '--ts', '--import-alias "@/*"', '--app', ]; @@ -330,19 +330,8 @@ async function scaffoldNext(projectName) { }); shell.rm('-rf', path.join('ui', '.git')); // Remove NextJS' .git; we will init .git in our monorepo's root. - // Read in the NextJS config file and add the middleware. - - let useTypescript = true; - try { - // Determine if generated project is a ts project by looking for a tsconfig file - fs.readFileSync(path.join('ui', 'tsconfig.json')); - } catch (err) { - if (err.code !== 'ENOENT') { - console.error(err); - } - useTypescript = false; - } + // Read in the NextJS config file and add the middleware. const nextConfig = fs.readFileSync( path.join('ui', 'next.config.mjs'), 'utf8' @@ -393,10 +382,9 @@ const __dirname = path.dirname(__filename); };` ); - fs.writeFileSync(path.join('ui', 'next.config.mjs'), newNextConfig); - const pageFileName = useTypescript ? 'page.tsx' : 'page.js'; + const pageFileName = 'page.tsx'; fs.writeFileSync( path.join('ui', 'app', pageFileName), @@ -404,11 +392,11 @@ const __dirname = path.dirname(__filename); 'utf8' ); - const layoutFileName = useTypescript ? 'layout.tsx' : 'layout.js'; + const layoutFileName = 'layout.tsx'; fs.writeFileSync( path.join('ui', 'app', layoutFileName), - useTypescript ? customNextLayoutTs : customNextLayoutJs, + customNextLayout, 'utf8' ); @@ -426,7 +414,6 @@ const __dirname = path.dirname(__filename); // Removes create-next-app assets fs.emptyDirSync(path.join('ui', 'public')); - fs.rmSync(path.join('ui', 'app', 'favicon.ico')); // Adds landing page assets directory and files to NextJS project. @@ -472,16 +459,15 @@ const __dirname = path.dirname(__filename); } `; - if (useTypescript) { - fs.writeFileSync(path.join('ui', 'tsconfig.json'), tsconfig); + fs.writeFileSync(path.join('ui', 'tsconfig.json'), tsconfig); + + // Add a script to the package.json + let x = fs.readJsonSync(path.join('ui', 'package.json')); + x.scripts['ts-watch'] = 'tsc --noEmit --incremental --watch'; + x.scripts['build'] = 'next build --no-lint'; + x.type = 'module'; + fs.writeJSONSync(path.join('ui', 'package.json'), x, { spaces: 2 }); - // Add a script to the package.json - let x = fs.readJsonSync(path.join('ui', 'package.json')); - x.scripts['ts-watch'] = 'tsc --noEmit --incremental --watch'; - x.scripts['build'] = 'next build --no-lint'; - x.type = 'module'; - fs.writeJSONSync(path.join('ui', 'package.json'), x, { spaces: 2 }); - } if (useGHPages) { const isWindows = process.platform === 'win32'; @@ -523,7 +509,6 @@ const __dirname = path.dirname(__filename); return config;` ); - fs.writeFileSync(path.join('ui', 'next.config.mjs'), newNextConfig); // Add some scripts to the package.json @@ -555,11 +540,7 @@ const __dirname = path.dirname(__filename); ); shell.cd('..'); - const reactCOIServiceWorkerFileName = useTypescript - ? 'reactCOIServiceWorker.tsx' - : 'reactCOIServiceWorker.js'; - - const pageFileName = useTypescript ? 'page.tsx' : 'page.js'; + const reactCOIServiceWorkerFileName = 'reactCOIServiceWorker.tsx'; let pageFile = fs.readFileSync( path.join('ui', 'app', pageFileName), @@ -572,10 +553,7 @@ const __dirname = path.dirname(__filename); export default function` ); - fs.writeFileSync( - path.join('ui', 'app', pageFileName), - pageFile - ); + fs.writeFileSync(path.join('ui', 'app', pageFileName), pageFile); fs.writeFileSync( path.join('ui', 'app', reactCOIServiceWorkerFileName), diff --git a/src/lib/ui/next/customNextLayoutTs.js b/src/lib/ui/next/customNextLayout.js similarity index 100% rename from src/lib/ui/next/customNextLayoutTs.js rename to src/lib/ui/next/customNextLayout.js diff --git a/src/lib/ui/next/customNextLayoutJs.js b/src/lib/ui/next/customNextLayoutJs.js deleted file mode 100644 index d9123e28..00000000 --- a/src/lib/ui/next/customNextLayoutJs.js +++ /dev/null @@ -1,17 +0,0 @@ -export default `import "../styles/globals.css"; -export const metadata = { - title: 'Mina zkApp UI', - description: 'built with o1js', - icons: { - icon: '/assets/favicon.ico', - }, -}; - -export default function RootLayout({ children }) { - return ( - - {children} - - ); -} -`; diff --git a/src/lib/ui/next/customNextPage.js b/src/lib/ui/next/customNextPage.js index 3525f5f8..fa8f0faf 100644 --- a/src/lib/ui/next/customNextPage.js +++ b/src/lib/ui/next/customNextPage.js @@ -147,4 +147,4 @@ export default function Home() { ); } -`; \ No newline at end of file +`; From 5328d7df35557cb619a481b2c7b8e19b5b7d1cc8 Mon Sep 17 00:00:00 2001 From: Katie Noland Date: Thu, 19 Sep 2024 10:28:16 -0600 Subject: [PATCH 4/9] removes testing script --- package.json | 1 - src/bin/index.js | 2 +- src/lib/project.js | 1 - 3 files changed, 1 insertion(+), 3 deletions(-) diff --git a/package.json b/package.json index 7b227ec3..77400f60 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,6 @@ "zkapp-cli": "./src/bin/index.js" }, "scripts": { - "run": "rm -rf demo && node src/bin/index.js project demo --ui next", "clean": "rimraf ./build && rimraf ./reports", "coverage": "node --experimental-vm-modules ./node_modules/jest/bin/jest.js --coverage", "format": "prettier --write --ignore-unknown **/*", diff --git a/src/bin/index.js b/src/bin/index.js index c9f9d261..296aa259 100755 --- a/src/bin/index.js +++ b/src/bin/index.js @@ -48,7 +48,7 @@ yargs(hideBin(process.argv)) // chalk.reset is a hack to force the terminal to retain a line break below chalk.reset( ` -LOCAL CLI + __ _ /_ | | | ___ | | __ _| |__ ___ diff --git a/src/lib/project.js b/src/lib/project.js index f6de2878..d5e6881e 100644 --- a/src/lib/project.js +++ b/src/lib/project.js @@ -468,7 +468,6 @@ const __dirname = path.dirname(__filename); x.type = 'module'; fs.writeJSONSync(path.join('ui', 'package.json'), x, { spaces: 2 }); - if (useGHPages) { const isWindows = process.platform === 'win32'; From 512e7ed216143aca73cb1b62bd088b159376d34e Mon Sep 17 00:00:00 2001 From: Katie Noland Date: Thu, 19 Sep 2024 13:40:17 -0600 Subject: [PATCH 5/9] update change log, update unit test with latest nextjs command --- CHANGELOG.md | 6 ++++++ package.json | 2 +- src/lib/project.js | 4 +++- src/lib/project.test.js | 14 ++++++++------ 4 files changed, 18 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d2bf4082..5c58e909 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,12 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ## Unreleased +## [0.21.7](https://github.com/o1-labs/zkapp-cli/compare/0.21.6...0.21.7) - 2024-09-19 + +### Changed + +- Updated Next.js project starter to use app router and skip `src` directory + ## [0.21.6](https://github.com/o1-labs/zkapp-cli/compare/0.21.5...0.21.6) - 2024-09-03 ### Fixed diff --git a/package.json b/package.json index 77400f60..cecd704e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "zkapp-cli", - "version": "0.21.6", + "version": "0.21.7", "description": "CLI to create zkApps (zero-knowledge apps) for Mina Protocol", "homepage": "https://github.com/o1-labs/zkapp-cli/", "repository": { diff --git a/src/lib/project.js b/src/lib/project.js index d5e6881e..d374d777 100644 --- a/src/lib/project.js +++ b/src/lib/project.js @@ -414,7 +414,9 @@ const __dirname = path.dirname(__filename); // Removes create-next-app assets fs.emptyDirSync(path.join('ui', 'public')); - fs.rmSync(path.join('ui', 'app', 'favicon.ico')); + if (fs.existsSync(path.join('ui', 'app', 'favicon.ico'))) { + shell.rm('-rf', path.join('ui', 'app', 'favicon.ico')); + } // Adds landing page assets directory and files to NextJS project. fs.copySync( diff --git a/src/lib/project.test.js b/src/lib/project.test.js index c497d707..c7272b56 100644 --- a/src/lib/project.test.js +++ b/src/lib/project.test.js @@ -205,12 +205,13 @@ describe('project.js', () => { expect(spawnSync).toHaveBeenCalledWith( 'npx', [ - 'create-next-app@14.2.3', + 'create-next-app@14.2.12', 'ui', '--use-npm', - '--src-dir', + '--no-src-dir', + '--ts', '--import-alias "@/*"', - '--no-app', + '--app', ], { stdio: 'inherit', @@ -621,12 +622,13 @@ describe('project.js', () => { expect(spawnSync).toHaveBeenCalledWith( 'npx', [ - 'create-next-app@14.2.3', + 'create-next-app@14.2.12', 'ui', '--use-npm', - '--src-dir', + '--no-src-dir', + '--ts', '--import-alias "@/*"', - '--no-app', + '--app', ], { stdio: 'inherit', From 801cda2782dac524a3439d5508d1992a6acd40ee Mon Sep 17 00:00:00 2001 From: Katie Noland Date: Thu, 19 Sep 2024 16:27:53 -0600 Subject: [PATCH 6/9] updates path to page file --- src/lib/ui/next/customNextPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/ui/next/customNextPage.js b/src/lib/ui/next/customNextPage.js index fa8f0faf..ae0a4c84 100644 --- a/src/lib/ui/next/customNextPage.js +++ b/src/lib/ui/next/customNextPage.js @@ -58,7 +58,7 @@ export default function Home() {

Get started by editing - src/pages/index.js or src/pages/index.tsx + app/page.tsx

Date: Thu, 19 Sep 2024 16:34:04 -0600 Subject: [PATCH 7/9] update devnet add contract address --- src/lib/ui/next/customNextPage.js | 4 ++-- src/lib/ui/nuxt/customNuxtIndex.js | 4 ++-- src/lib/ui/svelte/customPageSvelte.js | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/lib/ui/next/customNextPage.js b/src/lib/ui/next/customNextPage.js index ae0a4c84..c5ef9dea 100644 --- a/src/lib/ui/next/customNextPage.js +++ b/src/lib/ui/next/customNextPage.js @@ -15,12 +15,12 @@ export default function Home() { // Update this to use the address (public key) for your zkApp account. // To try it out, you can try this address for an example "Add" smart contract that we've deployed to - // Testnet B62qkwohsqTBPsvhYE8cPZSpzJMgoKn4i1LQRuBAtVXWpaT4dgH6WoA. + // Testnet B62qnTDEeYtBHBePA4yhCt4TCgDtA4L2CGvK7PirbJyX4pKH8bmtWe5. const zkAppAddress = ''; // This should be removed once the zkAppAddress is updated. if (!zkAppAddress) { console.error( - 'The following error is caused because the zkAppAddress has an empty string as the public key. Update the zkAppAddress with the public key for your zkApp account, or try this address for an example "Add" smart contract that we deployed to Testnet: B62qkwohsqTBPsvhYE8cPZSpzJMgoKn4i1LQRuBAtVXWpaT4dgH6WoA' + 'The following error is caused because the zkAppAddress has an empty string as the public key. Update the zkAppAddress with the public key for your zkApp account, or try this address for an example "Add" smart contract that we deployed to Testnet: B62qnTDEeYtBHBePA4yhCt4TCgDtA4L2CGvK7PirbJyX4pKH8bmtWe5' ); } //const zkApp = new Add(PublicKey.fromBase58(zkAppAddress)) diff --git a/src/lib/ui/nuxt/customNuxtIndex.js b/src/lib/ui/nuxt/customNuxtIndex.js index 6d5e9a96..c8ad4bb4 100644 --- a/src/lib/ui/nuxt/customNuxtIndex.js +++ b/src/lib/ui/nuxt/customNuxtIndex.js @@ -126,12 +126,12 @@ export default { // Update this to use the address (public key) for your zkApp account. // To try it out, you can try this address for an example "Add" smart contract that we've deployed to - // Testnet B62qkwohsqTBPsvhYE8cPZSpzJMgoKn4i1LQRuBAtVXWpaT4dgH6WoA. + // Testnet B62qnTDEeYtBHBePA4yhCt4TCgDtA4L2CGvK7PirbJyX4pKH8bmtWe5. const zkAppAddress = '' // This should be removed once the zkAppAddress is updated. if (!zkAppAddress) { console.error( - 'The following error is caused because the zkAppAddress has an empty string as the public key. Update the zkAppAddress with the public key for your zkApp account, or try this address for an example "Add" smart contract that we deployed to Testnet: B62qkwohsqTBPsvhYE8cPZSpzJMgoKn4i1LQRuBAtVXWpaT4dgH6WoA', + 'The following error is caused because the zkAppAddress has an empty string as the public key. Update the zkAppAddress with the public key for your zkApp account, or try this address for an example "Add" smart contract that we deployed to Testnet: B62qnTDEeYtBHBePA4yhCt4TCgDtA4L2CGvK7PirbJyX4pKH8bmtWe5', ) } // const zkApp = new Add(PublicKey.fromBase58(zkAppAddress)) diff --git a/src/lib/ui/svelte/customPageSvelte.js b/src/lib/ui/svelte/customPageSvelte.js index 11d0db16..aec87052 100644 --- a/src/lib/ui/svelte/customPageSvelte.js +++ b/src/lib/ui/svelte/customPageSvelte.js @@ -11,12 +11,12 @@ export default ` // Update this to use the address (public key) for your zkApp account. // To try it out, you can try this address for an example "Add" smart contract that we've deployed to - // Testnet B62qkwohsqTBPsvhYE8cPZSpzJMgoKn4i1LQRuBAtVXWpaT4dgH6WoA . + // Testnet B62qnTDEeYtBHBePA4yhCt4TCgDtA4L2CGvK7PirbJyX4pKH8bmtWe5 . const zkAppAddress = '' // This should be removed once the zkAppAddress is updated. if (!zkAppAddress) { console.error( - 'The following error is caused because the zkAppAddress has an empty string as the public key. Update the zkAppAddress with the public key for your zkApp account, or try this address for an example "Add" smart contract that we deployed to Testnet: B62qkwohsqTBPsvhYE8cPZSpzJMgoKn4i1LQRuBAtVXWpaT4dgH6WoA', + 'The following error is caused because the zkAppAddress has an empty string as the public key. Update the zkAppAddress with the public key for your zkApp account, or try this address for an example "Add" smart contract that we deployed to Testnet: B62qnTDEeYtBHBePA4yhCt4TCgDtA4L2CGvK7PirbJyX4pKH8bmtWe5', ) } //const zkApp = new Add(PublicKey.fromBase58(zkAppAddress)) From 077e45b12e108cdc153aa74044072b9e36e63a6c Mon Sep 17 00:00:00 2001 From: Katie Noland Date: Tue, 24 Sep 2024 12:22:03 -0600 Subject: [PATCH 8/9] clears default create next app assets --- src/lib/project.js | 10 ++++------ src/lib/ui/next/styles/globals.css | 4 ++++ 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/lib/project.js b/src/lib/project.js index d374d777..c7683b0d 100644 --- a/src/lib/project.js +++ b/src/lib/project.js @@ -331,6 +331,10 @@ async function scaffoldNext(projectName) { shell.rm('-rf', path.join('ui', '.git')); // Remove NextJS' .git; we will init .git in our monorepo's root. + // Removes create-next-app assets + fs.emptyDirSync(path.join('ui', 'public')); + fs.emptyDirSync(path.join('ui', 'app')); + // Read in the NextJS config file and add the middleware. const nextConfig = fs.readFileSync( path.join('ui', 'next.config.mjs'), @@ -412,12 +416,6 @@ const __dirname = path.dirname(__filename); path.join('ui', 'styles') ); - // Removes create-next-app assets - fs.emptyDirSync(path.join('ui', 'public')); - if (fs.existsSync(path.join('ui', 'app', 'favicon.ico'))) { - shell.rm('-rf', path.join('ui', 'app', 'favicon.ico')); - } - // Adds landing page assets directory and files to NextJS project. fs.copySync( path.join(__dirname, 'ui', 'next', 'assets'), diff --git a/src/lib/ui/next/styles/globals.css b/src/lib/ui/next/styles/globals.css index 22ba4bc5..6104ba20 100644 --- a/src/lib/ui/next/styles/globals.css +++ b/src/lib/ui/next/styles/globals.css @@ -1,3 +1,7 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + @font-face { font-family: 'ABC Monument Grotesk'; font-style: normal; From 5131f079d31ae1977b2afa6b928294496f1970d0 Mon Sep 17 00:00:00 2001 From: essentialbreads Date: Sun, 29 Sep 2024 21:58:03 -0600 Subject: [PATCH 9/9] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5c58e909..43bede40 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Changed - Updated Next.js project starter to use app router and skip `src` directory +- Forces TS in Next.js projects ## [0.21.6](https://github.com/o1-labs/zkapp-cli/compare/0.21.5...0.21.6) - 2024-09-03