Migrate to nextjs app router #695
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,6 +5,7 @@ coverage | |
|
|
||
| # Editor | ||
| .vscode | ||
| .idea | ||
|
|
||
| # System | ||
| .DS_Store | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -7,7 +7,8 @@ import url from 'node:url'; | |
| import util from 'node:util'; | ||
| import ora from 'ora'; | ||
| import shell from 'shelljs'; | ||
| import customNextPage from '../lib/ui/next/customNextPage.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'; | ||
|
|
@@ -314,12 +315,13 @@ async function scaffoldNext(projectName) { | |
| // set the project name and default flags | ||
| // https://nextjs.org/docs/api-reference/create-next-app#options | ||
| let args = [ | ||
| '[email protected].12', | ||
| 'ui', | ||
| '--use-npm', | ||
| '--no-src-dir', | ||
| '--ts', | ||
| '--import-alias "@/*"', | ||
| '--app', | ||
| ]; | ||
|
|
||
| spawnSync('npx', args, { | ||
|
|
@@ -328,19 +330,12 @@ 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'), | ||
| 'utf8' | ||
|
|
@@ -354,8 +349,9 @@ const __dirname = path.dirname(__filename); | |
|
|
||
| `; | ||
| newNextConfig += nextConfig.replace( | ||
| '};', | ||
| ` | ||
| reactStrictMode: false, | ||
| webpack(config, { isServer }) { | ||
| if (!isServer) { | ||
| config.resolve.alias = { | ||
|
|
@@ -390,37 +386,36 @@ const __dirname = path.dirname(__filename); | |
| };` | ||
| ); | ||
|
|
||
| fs.writeFileSync(path.join('ui', 'next.config.mjs'), newNextConfig); | ||
|
|
||
| const pageFileName = 'page.tsx'; | ||
|
|
||
|
There was a problem hiding this comment. It looks like there are some legacy There was a problem hiding this comment. Good catch, cleared out the whole directory |
||
| fs.writeFileSync( | ||
| path.join('ui', 'app', pageFileName), | ||
| customNextPage, | ||
| 'utf8' | ||
| ); | ||
|
|
||
| const layoutFileName = 'layout.tsx'; | ||
|
|
||
| fs.writeFileSync( | ||
| path.join('ui', 'app', layoutFileName), | ||
| customNextLayout, | ||
| 'utf8' | ||
| ); | ||
|
|
||
| // Adds landing page components directory and files to NextJS project. | ||
| fs.copySync( | ||
| path.join(__dirname, 'ui', 'next', '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', 'styles') | ||
| ); | ||
|
|
||
| // Adds landing page assets directory and files to NextJS project. | ||
| fs.copySync( | ||
| path.join(__dirname, 'ui', 'next', 'assets'), | ||
|
|
@@ -452,23 +447,26 @@ const __dirname = path.dirname(__filename); | |
| "jsx": "preserve", | ||
| "paths": { | ||
| "@/*": ["./src/*"] | ||
| }, | ||
| "plugins": [ | ||
| { | ||
| "name": "next" | ||
| } | ||
| ] | ||
| }, | ||
| "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], | ||
| "exclude": ["node_modules"] | ||
| } | ||
| `; | ||
|
|
||
| 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 }); | ||
|
|
||
| if (useGHPages) { | ||
| const isWindows = process.platform === 'win32'; | ||
|
|
@@ -510,13 +508,6 @@ const __dirname = path.dirname(__filename); | |
| return config;` | ||
| ); | ||
|
|
||
| fs.writeFileSync(path.join('ui', 'next.config.mjs'), newNextConfig); | ||
|
|
||
| // Add some scripts to the package.json | ||
|
|
@@ -548,42 +539,23 @@ const __dirname = path.dirname(__filename); | |
| ); | ||
| shell.cd('..'); | ||
|
|
||
| const reactCOIServiceWorkerFileName = 'reactCOIServiceWorker.tsx'; | ||
|
|
||
| let pageFile = fs.readFileSync( | ||
| path.join('ui', 'app', pageFileName), | ||
| 'utf8' | ||
| ); | ||
|
|
||
| pageFile = pageFile.replace( | ||
| 'export default function', | ||
| `import './reactCOIServiceWorker'; | ||
|
|
||
| export default function` | ||
|
There was a problem hiding this comment. @essential-breads were you able to test if the deploy to GitHub Pages flow works correctly with the appRouter changes? It might be out of scope for this PR, but I will add an issue so we don't forget to verify that everything works. |
||
| ); | ||
| fs.writeFileSync(path.join('ui', 'app', pageFileName), pageFile); | ||
|
|
||
| fs.writeFileSync( | ||
| path.join('ui', 'app', reactCOIServiceWorkerFileName), | ||
| `export {}; | ||
|
|
||
| function loadCOIServiceWorker() { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -205,12 +205,13 @@ describe('project.js', () => { | |
| expect(spawnSync).toHaveBeenCalledWith( | ||
| 'npx', | ||
| [ | ||
| '[email protected].12', | ||
| 'ui', | ||
| '--use-npm', | ||
| '--no-src-dir', | ||
| '--ts', | ||
| '--import-alias "@/*"', | ||
| '--app', | ||
| ], | ||
| { | ||
| stdio: 'inherit', | ||
|
|
@@ -621,12 +622,13 @@ describe('project.js', () => { | |
| expect(spawnSync).toHaveBeenCalledWith( | ||
| 'npx', | ||
| [ | ||
| '[email protected].12', | ||
| 'ui', | ||
| '--use-npm', | ||
| '--no-src-dir', | ||
| '--ts', | ||
| '--import-alias "@/*"', | ||
| '--app', | ||
| ], | ||
| { | ||
| stdio: 'inherit', | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <html lang="en"> | ||
| <body>{children}</body> | ||
| </html> | ||
| ); | ||
| } | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,26 @@ | ||
| 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'; | ||
|
|
||
| export default function Home() { | ||
| useEffect(() => { | ||
| (async () => { | ||
| const { Mina, PublicKey } = await import('o1js'); | ||
| 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 | ||
|
There was a problem hiding this comment. Did you test if uncommenting this code works with your changes? There was a problem hiding this comment. The code doesn't error, but it's also not really doing anything. Looking at this more closely it seems like that zkapp address might be out of date. Maybe we should either remove the example code or update it to really interact with the network. What do you think? const { Mina, PublicKey,fetchAccount } = await import('o1js');
const { Add } = await import('../../contracts/build/src/');
// connect Mina to testnet
const Network = Mina.Network(
'https://api.minascan.io/node/devnet/v1/graphql'
);
Mina.setActiveInstance(Network);
// address of deployed Add contract on testnet https://minascan.io/devnet/account/B62qnTDEeYtBHBePA4yhCt4TCgDtA4L2CGvK7PirbJyX4pKH8bmtWe5
const zkAppAddress = `B62qnTDEeYtBHBePA4yhCt4TCgDtA4L2CGvK7PirbJyX4pKH8bmtWe5`;
await fetchAccount({publicKey: zkAppAddress});
const zkApp = new Add(PublicKey.fromBase58(zkAppAddress));
console.log("Current num: ", zkApp.num.get().toString());There was a problem hiding this comment. Yeah, sounds like a different PR though 👍 We can reconsider what the right format is for demoing o1js in a boilerplate app. There was a problem hiding this comment. The contract is currently deployed on devnet. https://minascan.io/devnet/account/B62qnTDEeYtBHBePA4yhCt4TCgDtA4L2CGvK7PirbJyX4pKH8bmtWe5?type=zk-acc This example code was originally added to demonstrate how to import a contract into a UI. The goal was to eventually add further interactions in this example boilerplate. There was a problem hiding this comment.
|
||
| // 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: B62qnTDEeYtBHBePA4yhCt4TCgDtA4L2CGvK7PirbJyX4pKH8bmtWe5' | ||
| ); | ||
| } | ||
| //const zkApp = new Add(PublicKey.fromBase58(zkAppAddress)) | ||
|
|
@@ -58,7 +58,7 @@ export default function Home() { | |
| </div> | ||
| <p className={styles.start}> | ||
| Get started by editing | ||
| <code className={styles.code}> app/page.tsx</code> | ||
| </p> | ||
| <div className={styles.grid}> | ||
| <a | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we add this change to the changelog?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
+1