feat(tutorial6): refactor UI to work on localhost and localblockchain

examples/zkapps/06-offchain-storage/offchain-storage-zkapp/ui/ghp-postbuild.js

@@ -0,0 +1,25 @@
+const fs = require('fs');
+const path = require('path');
+
+// 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 = '06-zkapp-browser-ui';
+const files = fs.readdirSync(cssDir);
+
+files.forEach((file) => {
+  if (path.extname(file) === '.css') {
+    const filePath = path.join(cssDir, file);
+
+    const data = fs.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');
+  }
+});

examples/zkapps/06-offchain-storage/offchain-storage-zkapp/ui/next.config.js

@@ -1,17 +1,18 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: false,
-  swcMinify: true,
-
   pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
+
   webpack(config) {
     config.resolve.alias = {
       ...config.resolve.alias,
-      snarkyjs: require('path').resolve('./node_modules/snarkyjs'),
-    }
+      snarkyjs: require('path').resolve('node_modules/snarkyjs'),
+    };
+    config.experiments = { ...config.experiments, topLevelAwait: true };
     config.optimization.minimizer = [];
     return config;
   },
+
   // To enable SnarkyJS for the web, we must set the 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() {
@@ -31,11 +32,17 @@ const nextConfig = {
       },
     ];
   },
+
+  images: {
+    unoptimized: true,
+  },
   images: {
     unoptimized: true,
   },
-  basePath: process.env.NODE_ENV === 'production' ? '/06-offchain-storage' : undefined,
-  assetPrefix: process.env.NODE_ENV === 'production' ? '/06-offchain-storage/' : undefined,
+  basePath:
+    process.env.NODE_ENV === 'production' ? '/06-offchain-storage' : undefined,
+  assetPrefix:
+    process.env.NODE_ENV === 'production' ? '/06-offchain-storage/' : undefined,
 };
 
-module.exports = nextConfig
+module.exports = nextConfig;