Merge pull request #537 from o1-labs/feature/tutorial-4-code-update

Update tutorial 4 code

Author: ymekuria

docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx

@@ -46,7 +46,7 @@ This tutorial has been tested with:
 
 Before you go through the tutorial steps, take a look at a working zkApp UI example that has already been deployed to GitHub Pages. 
 
-1. In a Chrome web browser with the Auro wallet extension, go to [https://es92.github.io/zkApp-examples/index.html](https://es92.github.io/zkApp-examples/index.html). 
+1. In a Chrome web browser with the Auro wallet extension, go to [https://ymekuria.github.io/04-zkapp-browser-ui/index.html](https://ymekuria.github.io/04-zkapp-browser-ui/index.html). 
 1. When prompted, select **Connect** to let the website view your Auro wallet account.
 1. In network dropdown menu in the wallet UI, select the **Berkeley** network:
   <figure>

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

@@ -1,7 +1,17 @@
 /** @type {import('next').NextConfig} */
+
+const isProd = process.env.NODE_ENV === 'production'
 const nextConfig = {
   reactStrictMode: false,
   pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
+  
+  /*  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).
+   */
+  basePath: isProd ? '/04-zkapp-browser-ui': '',
+  assetPrefix: isProd ? '/04-zkapp-browser-ui': '',
 
   webpack(config) {
     config.resolve.alias = {

examples/zkapps/04-zkapp-browser-ui/ui/src/pages/index.page.tsx

@@ -85,7 +85,7 @@ export default function Home() {
         setDisplayText('Getting zkApp state...');
         await zkappWorkerClient.fetchAccount({ publicKey: zkappPublicKey });
         const currentNum = await zkappWorkerClient.getNum();
-        console.log(`Current number in zkApp state: ${currentNum.toString()}`);
+        console.log(`Current state in zkApp: ${currentNum.toString()}`);
         setDisplayText('');
 
         setState({
@@ -179,7 +179,7 @@ export default function Home() {
     });
     const currentNum = await state.zkappWorkerClient!.getNum();
     setState({ ...state, currentNum });
-    console.log(`Current number in zkApp state: ${currentNum.toString()}`);
+    console.log(`Current state in zkApp: ${currentNum.toString()}`);
     setDisplayText('');
   };
 
@@ -191,12 +191,12 @@ export default function Home() {
     const auroLink = 'https://www.aurowallet.com/';
     const auroLinkElem = (
       <a href={auroLink} target="_blank" rel="noreferrer">
-        [Link]{' '}
+        Install Auro wallet here
       </a>
     );
     hasWallet = (
       <div>
-        Could not find a wallet. Install Auro wallet here: {auroLinkElem}
+        Could not find a wallet. {auroLinkElem}
       </div>
     );
   }
@@ -225,9 +225,9 @@ export default function Home() {
       'https://faucet.minaprotocol.com/?address=' + state.publicKey!.toBase58();
     accountDoesNotExist = (
       <div>
-        Account does not exist. Please visit the faucet to fund this account
+        Account does not exist. 
         <a href={faucetLink} target="_blank" rel="noreferrer">
-          [Link]{' '}
+           Visit the faucet to fund this fee payer account
         </a>
       </div>
     );
@@ -238,7 +238,7 @@ export default function Home() {
     mainContent = (
       <div style={{ justifyContent: 'center', alignItems: 'center' }}>
         <div className={styles.center} style={{ padding: 0 }}>
-          Current Number in zkApp: {state.currentNum!.toString()}{' '}
+          Current state in zkApp: {state.currentNum!.toString()}{' '}
         </div>
         <button
           className={styles.card}

examples/zkapps/04-zkapp-browser-ui/ui/src/styles/globals.css

@@ -47,7 +47,8 @@ a {
   color: inherit;
   text-decoration: none;
 }
+
 a:hover {
   text-decoration: underline;
-
+  opacity: .7;
 }