From 48d8a6c5141ef0ceaefead8d08e70ad1e2282605 Mon Sep 17 00:00:00 2001
From: barriebyron <barrie@o1labs.org>
Date: Wed, 2 Aug 2023 16:56:08 -0400
Subject: [PATCH 01/12] needs the two lines of code

---
 .../tutorials/04-zkapp-ui-with-react.mdx      | 110 +++++++++++-------
 1 file changed, 68 insertions(+), 42 deletions(-)

diff --git a/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx b/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
index 3ea947a68..c7635f75a 100644
--- a/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
+++ b/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
@@ -166,7 +166,14 @@ $ cd contracts
 $ npm run build
 ```
 
-If you were to make your own zkApp outside of this tutorial, edit files in the `contracts` folder and then rebuild the contract before accessing it from your UI.
+The expected output is:
+
+```text
+> 04-zkapp-browser-ui@0.1.0 build
+> tsc
+```
+
+The workflow for building your own zkApp outside of this tutorial is to edit files in the `contracts` folder, rebuild the contract, and then access it from your UI.
 
 ## Implement the UI
 
@@ -174,53 +181,32 @@ The React UI has several components: the React page itself and the code that use
 
 Because SnarkyJS code is computationally intensive, it's helpful to use web workers. A web worker handles requests from users to ensure the UI thread isn't blocked during long computations like compiling a smart contract or proving a transaction.
 
-1. Download the helper files from the `examples/zkapps/04-zkapp-browser-ui` directory on GitHub to your local `/04-zkapp-browser-ui/ui/src/pages` directory:
+1. Download the helper files:
+
+    From the `examples/zkapps/04-zkapp-browser-ui` directory on GitHub:
 
     - [zkappWorker.ts](https://github.com/o1-labs/docs2/blob/main/examples/zkapps/04-zkapp-browser-ui/ui/src/pages/zkappWorker.ts)
     - [zkappWorkerClient.ts](https://github.com/o1-labs/docs2/blob/main/examples/zkapps/04-zkapp-browser-ui/ui/src/pages/zkappWorkerClient.ts)
 
+    To your local `/04-zkapp-browser-ui/ui/src/pages` directory.
+
+
 1. Review each helper file to see how they work and how you can extend them for your own zkApp.
 
     - `zkappWorker.ts` is the web worker code
     - `zkappWorkerClient.ts` is the code that is run from React to interact with the web worker
 
-### Run the React app
-
-To run the React app, run commands from two different terminal windows in your local `/04-zkapp-browser-ui/ui/` directory. 
-
-1. In the first terminal window:
-
-  ```sh
-  $ npm run dev
-  ```
-
-  This command starts hosting your application at the `localhost:3000` default location. 
-  
-  The zkApp UI in the web browser shows the current state of the zkApp and has buttons to send a transaction and get the latest state.
-
-  Your browser refreshes automatically when your page has changes. Tip: If you are already hosting a different process on 3000, be sure to stop that process. 
-
-1. If prompted, request funds from the Testnet Faucet to fund your fee payer account.
-
-  Follow the prompts to request tMINA. For this tutorial, your MINA address is populated on the Testnet Faucet. tMINA arrives at your address when the next block is produced (~3 minutes).
-
-1. And in the second terminal window:
-
-  ```sh
-  $ npm run ts-watch
-  ```
-
-  This command shows TypeScript errors. As you develop your application, you can watch this window to check for type errors.
-
 ### Implement the React app
 
-1. Download the [index.page.tsx](https://github.com/o1-labs/docs2/blob/main/examples/zkapps/04-zkapp-browser-ui/ui/src/pages/index.page.tsx) file to your local `/04-zkapp-browser-ui/ui/src/pages` directory. 
+The example project has a completed app.
 
-    - `index.page.tsx` contains the main logic for the browser UI that is ready to deploy to GitHub Pages
+1. Download the [index.page.tsx](https://github.com/o1-labs/docs2/blob/main/examples/zkapps/04-zkapp-browser-ui/ui/src/pages/index.page.tsx) example file to your local `/04-zkapp-browser-ui/ui/src/pages` directory. 
+
+    - `index.page.tsx` is the entry file for your application and contains the main logic for the browser UI that is ready to deploy to GitHub Pages
 
 The `import` statements set up your React project with the required imports. The `export` statement creates a placeholder empty component:
 
-```ts
+```ts ignore
   1 import { useEffect, useState } from 'react';
   2 import './reactCOIServiceWorker';
   3 import ZkappWorkerClient from './zkappWorkerClient';
@@ -268,7 +254,7 @@ This code adds a function to set up the application:
 
 - This code also sets up your web worker client that interacts with the web worker running SnarkyJS code to ensure the computationally heavy SnarkyJS code doesn't block the UI thread.
 
-```ts
+```ts ignore
 ...
  25   // -------------------------------------------------------
  26   // Do Setup
@@ -395,6 +381,34 @@ And finally for this function, update the state of the React app:
 ...
 ```
 
+### Run the React app
+
+To run the React app, run commands from your local `/04-zkapp-browser-ui/ui/` directory. 
+
+1. To start hosting your application at the `localhost:3000` default location:
+
+  ```sh
+  $ npm run dev
+  ```
+
+ The zkApp UI in the web browser shows the current state of the zkApp and has buttons to send a transaction and get the latest state.
+
+  Your browser refreshes automatically when your page has changes. 
+  
+  **Tip:** If you are already hosting a different process on 3000, be sure to stop that process.
+
+1. If prompted, request funds from the Testnet Faucet to fund your fee payer account.
+
+  Follow the prompts to request tMINA. For this tutorial, your MINA address is populated on the Testnet Faucet. tMINA arrives at your address when the next block is produced (~3 minutes).
+
+1. And in the second terminal window:
+
+  ```sh
+  $ npm run ts-watch
+  ```
+
+  This command shows TypeScript errors. As you develop your application, you can watch this window to check for type errors.
+
 ### Write a new effect
 
 Now that the UI setup is finished, a new effect waits for the account to exist if it didn't exist before.
@@ -403,7 +417,7 @@ If the account has been newly created, it must be funded from the faucet.
 
 Later, you add a link in the UI to request funds for new accounts.
 
-```ts ignore 105-128
+```ts ignore
 ...
 105   // -------------------------------------------------------
 106   // Wait for account to exist, if it didn't
@@ -438,7 +452,7 @@ Functions can be triggered when a button is pressed by a user.
 
 First, code for a function that sends a transaction:
 
-```ts 128-
+```ts ignore
 ...
 128   // -------------------------------------------------------
 129   // Send a transaction
@@ -487,7 +501,7 @@ First, code for a function that sends a transaction:
 
 And second, code for a function that gets the latest zkApp state:
 
-```ts 170-186
+```ts ignore
 ...
 170   // -------------------------------------------------------
 171   // Refresh the current state
@@ -512,7 +526,7 @@ And second, code for a function that gets the latest zkApp state:
 
 Replace the `<div/>` placeholder with a UI to show the user the state of your application:
 
-```ts 186-268
+```ts ignore
 ...
 186   // -------------------------------------------------------
 187   // Create UI elements
@@ -607,7 +621,7 @@ The UI has three sections:
 
   The buttons allow the user to create a transaction and refresh the current state of the application by triggering the `onSendTransaction()` and `onRefreshCurrentNum()` functions shown in the code.
 
-And that's it! You have reviewed the code for your application.
+That's it for the code review. 
 
 If you've been using `npm run dev`, you can now interact with the application on `localhost:3000`. The application has all of the functionality that is implemented in this tutorial.
 
@@ -619,14 +633,26 @@ Before you can deploy your project to GitHub Pages, you must push it to a new Gi
 - In this tutorial, the project name is `04-zkapp-browser-ui`.
 - The `zk project` command created the correct project name strings for `04-zkapp-browser-ui` in the `next.config.js` and `src/pages/reactCOIServiceWorker.ts` files. 
 
-To deploy the UI, run the `npm run deploy` command in your local `/04-zkapp-browser-ui/ui/` directory. 
+To deploy the UI:
+
+1. Add two lines of code 
+1. Change to the local `/04-zkapp-browser-ui/ui/` directory.
+1. Run the deploy command:
+
+  ```sh
+  npm run deploy
+  ```
 
-After the script builds your application, uploads it to GitHub, and GitHub processes it, your application is available at:
+The scripts defined in the `/04-zkapp-browser-ui/ui/package.json` file build your application and upload it to GitHub. 
+
+After the processing is complete, your deployed zkApp is available at:
 
 ```
-https://<username>.github.io/<repo-name>/index.html
+https://<username>.github.io/04-zkapp-browser-ui/
 ```
 
+where `<username>` is your GitHub username.
+
 ## Conclusion
 
 Congratulations! You built a React UI for your zkApp. The UI allows users to interact with your smart contract and send transactions to Berkeley Testnet.

From 76ab3ad6fb210ac00004934e4b494eaaab33ed12 Mon Sep 17 00:00:00 2001
From: barriebyron <barrie@o1labs.org>
Date: Wed, 2 Aug 2023 18:26:27 -0400
Subject: [PATCH 02/12] just the two lines for deploy

---
 docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx b/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
index c7635f75a..200f1060b 100644
--- a/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
+++ b/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
@@ -58,7 +58,9 @@ Before you go through the tutorial steps, take a look at a working zkApp UI exam
 
 ## High-Level Overview
 
-In this tutorial, you build an application that:
+In this tutorial, you create a new GitHub repository so you can deploy the UI to GitHub Pages.
+
+You use example code and the zkApp CLI to build an application that:
 
 1. Loads a public key from an extension-based wallet.
 1. Checks if the public key has funds and if not, directs the user to the faucet.
@@ -123,6 +125,7 @@ Your UI is created in the project directory: `/04-zkapp-browser-ui/ui` with two
   $ npm install
   ```
 
+
 ## Project structure
 
 For all projects, you run `zk` commands from the root of your `04-zkapp-browser-ui` project directory. 

From 9f5e8b1a0a580412c13a302f687bb1cc01722797 Mon Sep 17 00:00:00 2001
From: barriebyron <barrie@o1labs.org>
Date: Thu, 3 Aug 2023 16:46:02 -0400
Subject: [PATCH 03/12] add create GH repo and install dep

---
 .../tutorials/04-zkapp-ui-with-react.mdx      | 31 ++++++++++++++-----
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx b/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
index 200f1060b..df4ce8402 100644
--- a/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
+++ b/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
@@ -106,25 +106,40 @@ The `zk project` command can scaffold the UI for your project.
 
 1. Select **No** at the `? Would you like to use Tailwind CSS with this project?` prompt.
 
-Your UI is created in the project directory: `/04-zkapp-browser-ui/ui` with two directories:
+  Your UI is created in the project directory: `/04-zkapp-browser-ui/ui` with two directories:
 
-- `contracts`: The smart contract code 
-- `ui`: Where you write your UI code
+  - `contracts`: The smart contract code 
+  - `ui`: Where you write your UI code
 
-1. Change to the `contracts` directory and run `npm install` to install all of the required dependencies:
+### Install the dependencies
+
+1. In the `ui` directory:
 
   ```sh
-  $ cd contracts
+  $ cd ../ui
   $ npm install
   ```
 
-1. Change to the `ui` directory and run `npm install` to install all of the required dependencies:
+1. In the `contracts` directory:
 
   ```sh
-  $ cd ../ui
+  $ cd contracts
   $ npm install
   ```
 
+## Create a repository
+
+When you want to interact with your deployed zkApp UI on GitHub pages, you must create a GitHub repository. Go ahead and create your repository now. You can name your GitHub repository anything you want. For this tutorial, use `04-zkapp-browser-ui`.	
+
+To interact with a deployed zkApp UI on GitHub pages, you must create a GitHub repository. 
+
+Go ahead and create your repository now. You can name your GitHub repository anything you want. For this tutorial, use `04-zkapp-browser-ui`.
+
+1. Go to [https://github.com/new](https://github.com/new).
+1. For the **Repository name**, enter `04-zkapp-browser-ui`.
+1. Optionally, add a description and a README.
+
+Your project repository is ready to use.
 
 ## Project structure
 
@@ -646,7 +661,7 @@ To deploy the UI:
   npm run deploy
   ```
 
-The scripts defined in the `/04-zkapp-browser-ui/ui/package.json` file build your application and upload it to GitHub. 
+The scripts defined in the `/04-zkapp-browser-ui/ui/package.json` file to build your application and upload it to GitHub. 
 
 After the processing is complete, your deployed zkApp is available at:
 

From 1ea2ae77ce2b5200e9c2ecf4f7da8d6d828cc9d4 Mon Sep 17 00:00:00 2001
From: Barrie Byron <barrie@o1labs.org>
Date: Mon, 14 Aug 2023 10:10:35 -0400
Subject: [PATCH 04/12] Update docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx

---
 docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx b/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
index df4ce8402..ed3457109 100644
--- a/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
+++ b/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
@@ -661,7 +661,7 @@ To deploy the UI:
   npm run deploy
   ```
 
-The scripts defined in the `/04-zkapp-browser-ui/ui/package.json` file to build your application and upload it to GitHub. 
+The scripts defined in the `/04-zkapp-browser-ui/ui/package.json` file do the work to build your application and upload it to GitHub. 
 
 After the processing is complete, your deployed zkApp is available at:
 

From 7b2ab13b23abdda7fc8b166b48b168f82a45c0e2 Mon Sep 17 00:00:00 2001
From: Barrie Byron <barrie@o1labs.org>
Date: Mon, 14 Aug 2023 14:38:23 -0400
Subject: [PATCH 05/12] add the let repo URL steps

---
 .../tutorials/04-zkapp-ui-with-react.mdx      | 44 ++++++++++++++++++-
 1 file changed, 42 insertions(+), 2 deletions(-)

diff --git a/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx b/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
index ed3457109..a48424771 100644
--- a/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
+++ b/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
@@ -87,6 +87,7 @@ The `zk project` command can scaffold the UI for your project.
 
   The `zk project` command has the ability to scaffold the UI for your project. For this tutorial, select `next`:
 
+<<<<<<< Updated upstream
   ```
   ? Create an accompanying UI project too? …
 ❯ next
@@ -95,6 +96,9 @@ The `zk project` command can scaffold the UI for your project.
   empty
   none
   ```
+=======
+1. If you are prompted to install the required Next packages, press **y** to proceed. 
+>>>>>>> Stashed changes
 
 1. Select **yes** at the `? Do you want to setup your project for deployment to Github Pages? …` prompt.
 
@@ -106,6 +110,7 @@ The `zk project` command can scaffold the UI for your project.
 
 1. Select **No** at the `? Would you like to use Tailwind CSS with this project?` prompt.
 
+<<<<<<< Updated upstream
   Your UI is created in the project directory: `/04-zkapp-browser-ui/ui` with two directories:
 
   - `contracts`: The smart contract code 
@@ -148,6 +153,24 @@ For all projects, you run `zk` commands from the root of your `04-zkapp-browser-
 For this tutorial, run the UI commands from the local `/04-zkapp-browser-ui/ui/` directory.
 
 Files that contain the UI code are in the `ui/src/pages` directory. 
+=======
+The expected output is:
+
+```text
+➜  source zk project 04-zkapp-browser-ui --ui next
+✔ Do you want to set up your project for deployment to GitHub Pages? · yes
+✔ Would you like to use TypeScript with this project? … No / Yes
+✔ Would you like to use ESLint with this project? … No / Yes
+✔ Would you like to use Tailwind CSS with this project? … No / Yes
+Creating a new Next.js app in <yourfilepath>/04-zkapp-browser-ui/ui.
+
+Using npm.
+
+Initializing project with template: default
+```
+
+For this tutorial, you run commands from the root of the `04-zkapp-browser-ui` directory as you work in the `ui/src/pages` directory on files that contain the UI code. 
+>>>>>>> Stashed changes
 
 Each time you make updates, then build or deploy, the TypeScript code is compiled into JavaScript in the `build` directory.
 
@@ -651,9 +674,26 @@ Before you can deploy your project to GitHub Pages, you must push it to a new Gi
 - In this tutorial, the project name is `04-zkapp-browser-ui`.
 - The `zk project` command created the correct project name strings for `04-zkapp-browser-ui` in the `next.config.js` and `src/pages/reactCOIServiceWorker.ts` files. 
 
-To deploy the UI:
+To configure your project to deploy to GitHub Pages:
+
+1. Edit the `/04-zkapp-browser-ui/ui/ghp-postbuild.js` file.
+1. Add your repository name. For this tutorial, use `04-zkapp-browser-ui`:
+
+  ```ts ignore
+   7 // Add your repository name here.
+   8 let repoURL = '04-zkapp-browser-ui';
+  ```
 
-1. Add two lines of code 
+1. Edit the `/zkapps/04-zkapp-browser-ui/ui/next.config.js` file.
+1. Add your repository name. For this tutorial, use `04-zkapp-browser-ui`:
+
+  ```ts ignore
+   3 // Add your repository name here.
+   4 let repoURL = '04-zkapp-browser-ui';
+  ```
+
+To deploy the UI:
+ 
 1. Change to the local `/04-zkapp-browser-ui/ui/` directory.
 1. Run the deploy command:
 

From bd7c6467113614c7beca90ede700115d9a43fa21 Mon Sep 17 00:00:00 2001
From: Barrie Byron <barrie@o1labs.org>
Date: Mon, 14 Aug 2023 14:41:12 -0400
Subject: [PATCH 06/12] resolve conflicts from stash

---
 .../tutorials/04-zkapp-ui-with-react.mdx      | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx b/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
index a48424771..ae38eb0a3 100644
--- a/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
+++ b/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
@@ -87,20 +87,18 @@ The `zk project` command can scaffold the UI for your project.
 
   The `zk project` command has the ability to scaffold the UI for your project. For this tutorial, select `next`:
 
-<<<<<<< Updated upstream
   ```
-  ? Create an accompanying UI project too? …
-❯ next
-  svelte
-  nuxt
-  empty
-  none
+    ? Create an accompanying UI project too? …
+  ❯ next
+    svelte
+    nuxt
+    empty
+    none
   ```
-=======
+
 1. If you are prompted to install the required Next packages, press **y** to proceed. 
->>>>>>> Stashed changes
 
-1. Select **yes** at the `? Do you want to setup your project for deployment to Github Pages? …` prompt.
+1. Select **yes** at the `? Do you want to set up your project for deployment to Github Pages? …` prompt.
 
 1. If you are prompted to install the required Next packages, press **y** to proceed. 
 
@@ -110,7 +108,6 @@ The `zk project` command can scaffold the UI for your project.
 
 1. Select **No** at the `? Would you like to use Tailwind CSS with this project?` prompt.
 
-<<<<<<< Updated upstream
   Your UI is created in the project directory: `/04-zkapp-browser-ui/ui` with two directories:
 
   - `contracts`: The smart contract code 
@@ -153,7 +150,7 @@ For all projects, you run `zk` commands from the root of your `04-zkapp-browser-
 For this tutorial, run the UI commands from the local `/04-zkapp-browser-ui/ui/` directory.
 
 Files that contain the UI code are in the `ui/src/pages` directory. 
-=======
+
 The expected output is:
 
 ```text
@@ -170,7 +167,6 @@ Initializing project with template: default
 ```
 
 For this tutorial, you run commands from the root of the `04-zkapp-browser-ui` directory as you work in the `ui/src/pages` directory on files that contain the UI code. 
->>>>>>> Stashed changes
 
 Each time you make updates, then build or deploy, the TypeScript code is compiled into JavaScript in the `build` directory.
 

From d7d27b078a0b0c972c9273e60501bc596a26bfb5 Mon Sep 17 00:00:00 2001
From: Barrie Byron <barrie@o1labs.org>
Date: Thu, 17 Aug 2023 14:40:53 -0400
Subject: [PATCH 07/12] Apply suggestions from awesome Yoni code review

---
 .../zkapps/tutorials/04-zkapp-ui-with-react.mdx | 17 +----------------
 1 file changed, 1 insertion(+), 16 deletions(-)

diff --git a/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx b/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
index ae38eb0a3..3ac913337 100644
--- a/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
+++ b/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
@@ -166,7 +166,7 @@ Using npm.
 Initializing project with template: default
 ```
 
-For this tutorial, you run commands from the root of the `04-zkapp-browser-ui` directory as you work in the `ui/src/pages` directory on files that contain the UI code. 
+For this tutorial, you run commands from the root of the `04-zkapp-browser-ui/ui` directory as you work in the `ui/src/pages` directory on files that contain the UI code. 
 
 Each time you make updates, then build or deploy, the TypeScript code is compiled into JavaScript in the `build` directory.
 
@@ -670,22 +670,7 @@ Before you can deploy your project to GitHub Pages, you must push it to a new Gi
 - In this tutorial, the project name is `04-zkapp-browser-ui`.
 - The `zk project` command created the correct project name strings for `04-zkapp-browser-ui` in the `next.config.js` and `src/pages/reactCOIServiceWorker.ts` files. 
 
-To configure your project to deploy to GitHub Pages:
 
-1. Edit the `/04-zkapp-browser-ui/ui/ghp-postbuild.js` file.
-1. Add your repository name. For this tutorial, use `04-zkapp-browser-ui`:
-
-  ```ts ignore
-   7 // Add your repository name here.
-   8 let repoURL = '04-zkapp-browser-ui';
-  ```
-
-1. Edit the `/zkapps/04-zkapp-browser-ui/ui/next.config.js` file.
-1. Add your repository name. For this tutorial, use `04-zkapp-browser-ui`:
-
-  ```ts ignore
-   3 // Add your repository name here.
-   4 let repoURL = '04-zkapp-browser-ui';
   ```
 
 To deploy the UI:

From d21a6bdb73f1cc1d8d7cc5f6f053364fad461008 Mon Sep 17 00:00:00 2001
From: Barrie Byron <barrie@o1labs.org>
Date: Thu, 17 Aug 2023 14:42:29 -0400
Subject: [PATCH 08/12] delete extraneous tick marks

---
 docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx b/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
index 3ac913337..2aedc9cc7 100644
--- a/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
+++ b/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
@@ -670,9 +670,6 @@ Before you can deploy your project to GitHub Pages, you must push it to a new Gi
 - In this tutorial, the project name is `04-zkapp-browser-ui`.
 - The `zk project` command created the correct project name strings for `04-zkapp-browser-ui` in the `next.config.js` and `src/pages/reactCOIServiceWorker.ts` files. 
 
-
-  ```
-
 To deploy the UI:
  
 1. Change to the local `/04-zkapp-browser-ui/ui/` directory.

From e9873f432025e404bbda51199488775f82518047 Mon Sep 17 00:00:00 2001
From: barriebyron <barrie@o1labs.org>
Date: Tue, 5 Sep 2023 13:53:46 -0400
Subject: [PATCH 09/12] WIP tuto 4

---
 .../tutorials/04-zkapp-ui-with-react.mdx      | 60 +++++++++++--------
 1 file changed, 34 insertions(+), 26 deletions(-)

diff --git a/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx b/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
index 2aedc9cc7..77ad057ef 100644
--- a/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
+++ b/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
@@ -55,6 +55,9 @@ Before you go through the tutorial steps, take a look at a working zkApp UI exam
       alt="Select Berkeley network in the wallet"
     />
   </figure>
+1. Select **Get Latest State** to view the state of the zkApp.
+1. Next, select **Send Transaction**. 
+1. In your Auro Wallet, select **Confirm** to send the transaction.
 
 ## High-Level Overview
 
@@ -96,6 +99,8 @@ The `zk project` command can scaffold the UI for your project.
     none
   ```
 
+  The Next.js React framework gives you building blocks to create web applications. When you select `next`, the `zk project` command creates the UI for your zkApp. 
+
 1. If you are prompted to install the required Next packages, press **y** to proceed. 
 
 1. Select **yes** at the `? Do you want to set up your project for deployment to Github Pages? …` prompt.
@@ -113,29 +118,51 @@ The `zk project` command can scaffold the UI for your project.
   - `contracts`: The smart contract code 
   - `ui`: Where you write your UI code
 
+The expected output is:
+
+```text
+➜  source zk project 04-zkapp-browser-ui --ui next
+✔ Do you want to set up your project for deployment to GitHub Pages? · yes
+✔ Would you like to use TypeScript with this project? … No / Yes
+✔ Would you like to use ESLint with this project? … No / Yes
+✔ Would you like to use Tailwind CSS with this project? … No / Yes
+Creating a new Next.js app in <yourfilepath>/04-zkapp-browser-ui/ui.
+
+Using npm.
+
+Initializing project with template: default
+```
+
+For this tutorial, you run commands from the root of the `04-zkapp-browser-ui/ui` directory as you work in the `ui/src/pages` directory on files that contain the UI code. 
+
+Each time you make updates, then build or deploy, the TypeScript code is compiled into JavaScript in the `build` directory.
+
 ### Install the dependencies
 
-1. In the `ui` directory:
+1. Change to your local project `/04-zkapp-browser-ui/ui` directory:
 
   ```sh
   $ cd ../ui
+  ```
+
+1. Install the dependencies:
+
+  ```sh
   $ npm install
   ```
 
-1. In the `contracts` directory:
+1. Install the dependencies in the `/04-zkapp-browser-ui/` directory:
 
   ```sh
-  $ cd contracts
+  $ cd ../contracts
   $ npm install
   ```
 
 ## Create a repository
 
-When you want to interact with your deployed zkApp UI on GitHub pages, you must create a GitHub repository. Go ahead and create your repository now. You can name your GitHub repository anything you want. For this tutorial, use `04-zkapp-browser-ui`.	
-
-To interact with a deployed zkApp UI on GitHub pages, you must create a GitHub repository. 
+To interact with a deployed zkApp UI on GitHub pages, you must create a GitHub repository.
 
-Go ahead and create your repository now. You can name your GitHub repository anything you want. For this tutorial, use `04-zkapp-browser-ui`.
+Go ahead and create your repository now. For other projects, you can name your GitHub repository anything you want. For this tutorial, use `04-zkapp-browser-ui`.
 
 1. Go to [https://github.com/new](https://github.com/new).
 1. For the **Repository name**, enter `04-zkapp-browser-ui`.
@@ -151,25 +178,6 @@ For this tutorial, run the UI commands from the local `/04-zkapp-browser-ui/ui/`
 
 Files that contain the UI code are in the `ui/src/pages` directory. 
 
-The expected output is:
-
-```text
-➜  source zk project 04-zkapp-browser-ui --ui next
-✔ Do you want to set up your project for deployment to GitHub Pages? · yes
-✔ Would you like to use TypeScript with this project? … No / Yes
-✔ Would you like to use ESLint with this project? … No / Yes
-✔ Would you like to use Tailwind CSS with this project? … No / Yes
-Creating a new Next.js app in <yourfilepath>/04-zkapp-browser-ui/ui.
-
-Using npm.
-
-Initializing project with template: default
-```
-
-For this tutorial, you run commands from the root of the `04-zkapp-browser-ui/ui` directory as you work in the `ui/src/pages` directory on files that contain the UI code. 
-
-Each time you make updates, then build or deploy, the TypeScript code is compiled into JavaScript in the `build` directory.
-
 ### Preparing the project
 
 Start by deleting the default `rm index.page.tsx` file that comes with a new project.

From d493ad05ac93d46db4cfba043d94d602cda3c34c Mon Sep 17 00:00:00 2001
From: barriebyron <barrie@o1labs.org>
Date: Wed, 6 Sep 2023 14:08:23 -0400
Subject: [PATCH 10/12] WIP for o1js

---
 .../tutorials/04-zkapp-ui-with-react.mdx      | 55 +++++++------------
 1 file changed, 21 insertions(+), 34 deletions(-)

diff --git a/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx b/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
index 3b757fb4e..246106db2 100644
--- a/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
+++ b/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
@@ -139,22 +139,22 @@ Each time you make updates, then build or deploy, the TypeScript code is compile
 
 ### Install the dependencies
 
-1. Change to your local project `/04-zkapp-browser-ui/ui` directory:
+When you ran the `zk project` command, your UI was created in the project directory: `/04-zkapp-browser-ui/ui` with two sub-directories:
 
-  ```sh
-  $ cd ../ui
-  ```
+  - `contracts`: The smart contract code 
+  - `ui`: Where you write your UI code
 
-1. Install the dependencies:
+Install the dependencies in each sub-directory.
+
+1. In the `/04-zkapp-browser-ui/ui` directory, run:
 
   ```sh
   $ npm install
   ```
 
-1. Install the dependencies in the `/04-zkapp-browser-ui/` directory:
+1. In the `/04-zkapp-browser-ui/contracts` directory:
 
   ```sh
-  $ cd ../contracts
   $ npm install
   ```
 
@@ -172,7 +172,7 @@ Your project repository is ready to use.
 
 ## Project structure
 
-For all projects, you run `zk` commands from the root of your `04-zkapp-browser-ui` project directory. 
+For all projects, you run `zk` commands from the root of your project directory. 
 
 For this tutorial, run the UI commands from the local `/04-zkapp-browser-ui/ui/` directory.
 
@@ -182,13 +182,7 @@ Files that contain the UI code are in the `ui/src/pages` directory.
 
 Start by deleting the default `rm index.page.tsx` file that comes with a new project.
 
-1. Change to the `ui/src/pages` directory:
-
-  ```sh
-  $ cd ui/src/pages
-  ```
-
-1. Delete the `index.page.tsx` file so that you have a clean project to work with:
+1. In the `ui/src/pages` directory, delete the `index.page.tsx` file so that you have a clean project to work with:
 
   ```sh
   $ rm index.page.tsx
@@ -198,16 +192,9 @@ Start by deleting the default `rm index.page.tsx` file that comes with a new pro
 
 This tutorial uses the default contract `Add` that is always scaffolded with the `zk project` command.
 
-Go back to root of your project directory:
-
-```sh
-$ cd 04-zkapp-browser-ui
-```
-
-To build the default contract to use in the UI:
+To build the default contract to use in the UI, run this command from the `/04-zkapp-browser-ui/contracts` directory:
 
 ```sh
-$ cd contracts
 $ npm run build
 ```
 
@@ -218,7 +205,7 @@ The expected output is:
 > tsc
 ```
 
-The workflow for building your own zkApp outside of this tutorial is to edit files in the `contracts` folder, rebuild the contract, and then access it from your UI.
+Outside of this tutorial, the workflow for building your own zkApp is to edit files in the `contracts` folder, rebuild the contract, and then access it from your UI.
 
 ## Implement the UI
 
@@ -226,15 +213,12 @@ The React UI has several components: the React page itself and the code that use
 
 Because o1js code is computationally intensive, it's helpful to use web workers. A web worker handles requests from users to ensure the UI thread isn't blocked during long computations like compiling a smart contract or proving a transaction.
 
-1. Download the helper files:
-
-    From the `examples/zkapps/04-zkapp-browser-ui` directory on GitHub:
+1. Download the helper files from the `examples/zkapps/04-zkapp-browser-ui` directory on GitHub:
 
     - [zkappWorker.ts](https://github.com/o1-labs/docs2/blob/main/examples/zkapps/04-zkapp-browser-ui/ui/src/pages/zkappWorker.ts)
     - [zkappWorkerClient.ts](https://github.com/o1-labs/docs2/blob/main/examples/zkapps/04-zkapp-browser-ui/ui/src/pages/zkappWorkerClient.ts)
 
-    To your local `/04-zkapp-browser-ui/ui/src/pages` directory.
-
+1. Move the files to your local `/04-zkapp-browser-ui/ui/src/pages` directory.
 
 1. Review each helper file to see how they work and how you can extend them for your own zkApp.
 
@@ -243,13 +227,16 @@ Because o1js code is computationally intensive, it's helpful to use web workers.
 
 ### Implement the React app
 
-The example project has a completed app.
+The example project has a completed app. The `index.page.tsx` file is the entry file for your application and contains the main logic for the browser UI that is ready to deploy to GitHub Pages.
+
+1. Download the [index.page.tsx](https://github.com/o1-labs/docs2/blob/main/examples/zkapps/04-zkapp-browser-ui/ui/src/pages/index.page.tsx) example file. 
 
-1. Download the [index.page.tsx](https://github.com/o1-labs/docs2/blob/main/examples/zkapps/04-zkapp-browser-ui/ui/src/pages/index.page.tsx) example file to your local `/04-zkapp-browser-ui/ui/src/pages` directory. 
+1. Move the `index.page.tsx` file to your local `/04-zkapp-browser-ui/ui/src/pages` directory.
 
-    - `index.page.tsx` is the entry file for your application and contains the main logic for the browser UI that is ready to deploy to GitHub Pages
+First, review the `import` and `export` statements:
 
-The `import` statements set up your React project with the required imports. The `export` statement creates a placeholder empty component:
+- The `import` statements set up your React project with the required imports. 
+- The `export` statement creates a placeholder empty component.
 
 ```ts ignore
   1 import { useEffect, useState } from 'react';
@@ -268,7 +255,7 @@ The `import` statements set up your React project with the required imports. The
 
 ### Add state
 
-This export statement creates mutable state that you can reference in the UI. The state updates as the application runs:
+This `export` statement creates mutable state that you can reference in the UI. The state updates as the application runs:
 
 ```ts ignore
 ...

From 2ad5f9607488fab2fac9b3c8299fb57ad39e4265 Mon Sep 17 00:00:00 2001
From: barriebyron <barrie@o1labs.org>
Date: Wed, 6 Sep 2023 17:28:33 -0400
Subject: [PATCH 11/12] ready to merge

---
 docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx b/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
index 246106db2..55411f310 100644
--- a/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
+++ b/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
@@ -426,8 +426,6 @@ To run the React app, run commands from your local `/04-zkapp-browser-ui/ui/` di
  The zkApp UI in the web browser shows the current state of the zkApp and has buttons to send a transaction and get the latest state.
 
   Your browser refreshes automatically when your page has changes. 
-  
-  **Tip:** If you are already hosting a different process on 3000, be sure to stop that process.
 
 1. If prompted, request funds from the Testnet Faucet to fund your fee payer account.
 

From 0983398c6509bc283505d4f5ffb54d419e65df35 Mon Sep 17 00:00:00 2001
From: barriebyron <barrie@o1labs.org>
Date: Wed, 6 Sep 2023 17:56:08 -0400
Subject: [PATCH 12/12] final edits

---
 .../tutorials/04-zkapp-ui-with-react.mdx      | 61 +++++++++++--------
 1 file changed, 35 insertions(+), 26 deletions(-)

diff --git a/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx b/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
index 55411f310..aeaf86fca 100644
--- a/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
+++ b/docs/zkapps/tutorials/04-zkapp-ui-with-react.mdx
@@ -29,16 +29,23 @@ You're making excellent progress in your zkApp journey:
 - In the [Hello World](hello-world) tutorial, you built a basic zkApp smart contract with o1js. 
 - In [Tutorial 3: Deploy to a Live Network](deploying-to-a-network), you used the `zk config` command to create a deploy alias.
 
-In this tutorial, you implement a browser UI using ReactJS that interacts with a smart contract. 
+In this tutorial, you implement a browser UI using React.js that interacts with a smart contract. 
 
 ## Prerequisites
 
+- Make sure you have the latest version of the zkApp CLI installed:
+
+    ```sh
+    $ npm install -g zkapp-cli
+    ```
+
 - Ensure your environment meets the [Prerequisites](/zkapps/tutorials#prerequisites) for zkApp Developer Tutorials.
+
 - The Auro Wallet browser extension wallet that supports interactions with zkApps. See [Install a Wallet](/using-mina/install-a-wallet) and create a MINA account.
 
 This tutorial has been tested with:
 
-- [Mina zkApp CLI](https://github.com/o1-labs/zkapp-cli) version 0.11.0
+- [Mina zkApp CLI](https://github.com/o1-labs/zkapp-cli) version 0.11.2
 - [o1js](https://www.npmjs.com/package/o1js) version 0.12.1
 - [Auro Wallet](https://www.aurowallet.com/) version 2.2.3
 
@@ -78,7 +85,7 @@ This example uses an RPC endpoint.
 
 ## Create a project
 
-The `zk project` command can scaffold the UI for your project. 
+You can have the `zk project` command scaffold the UI for your project.
 
 1. Create or change to a directory where you have write privileges.
 
@@ -88,7 +95,7 @@ The `zk project` command can scaffold the UI for your project.
   $ zk project 04-zkapp-browser-ui
   ```
 
-  The `zk project` command has the ability to scaffold the UI for your project. For this tutorial, select `next`:
+  To scaffold the UI for your project with the Next.js React framework, select `next`:
 
   ```
     ? Create an accompanying UI project too? …
@@ -97,9 +104,7 @@ The `zk project` command can scaffold the UI for your project.
     nuxt
     empty
     none
-  ```
-
-  The Next.js React framework gives you building blocks to create web applications. When you select `next`, the `zk project` command creates the UI for your zkApp. 
+  ``` 
 
 1. If you are prompted to install the required Next packages, press **y** to proceed. 
 
@@ -115,25 +120,25 @@ The `zk project` command can scaffold the UI for your project.
 
   Your UI is created in the project directory: `/04-zkapp-browser-ui/ui` with two directories:
 
-  - `contracts`: The smart contract code 
-  - `ui`: Where you write your UI code
+    - `contracts`: The smart contract code 
+    - `ui`: Where you write your UI code
 
-The expected output is:
+  The expected output is:
 
-```text
-➜  source zk project 04-zkapp-browser-ui --ui next
-✔ Do you want to set up your project for deployment to GitHub Pages? · yes
-✔ Would you like to use TypeScript with this project? … No / Yes
-✔ Would you like to use ESLint with this project? … No / Yes
-✔ Would you like to use Tailwind CSS with this project? … No / Yes
-Creating a new Next.js app in <yourfilepath>/04-zkapp-browser-ui/ui.
+  ```text
+  ➜  source zk project 04-zkapp-browser-ui --ui next
+  ✔ Do you want to set up your project for deployment to GitHub Pages? · yes
+  ✔ Would you like to use TypeScript with this project? … No / Yes
+  ✔ Would you like to use ESLint with this project? … No / Yes
+  ✔ Would you like to use Tailwind CSS with this project? … No / Yes
+  Creating a new Next.js app in <yourfilepath>/04-zkapp-browser-ui/ui.
 
-Using npm.
+  Using npm.
 
-Initializing project with template: default
-```
+  Initializing project with template: default
+  ```
 
-For this tutorial, you run commands from the root of the `04-zkapp-browser-ui/ui` directory as you work in the `ui/src/pages` directory on files that contain the UI code. 
+For this tutorial, you run commands from the root of the `04-zkapp-browser-ui/ui` directory. You work in the `ui/src/pages` directory on TypeScript files that contain the UI code. 
 
 Each time you make updates, then build or deploy, the TypeScript code is compiled into JavaScript in the `build` directory.
 
@@ -176,13 +181,13 @@ For all projects, you run `zk` commands from the root of your project directory.
 
 For this tutorial, run the UI commands from the local `/04-zkapp-browser-ui/ui/` directory.
 
-Files that contain the UI code are in the `ui/src/pages` directory. 
+Files that contain the UI code are in the `/04-zkapp-browser-ui/ui/src/pages` directory. 
 
 ### Preparing the project
 
-Start by deleting the default `rm index.page.tsx` file that comes with a new project.
+Start by deleting the default `index.page.tsx` file that comes with a new project so that you have a clean project to work with.
 
-1. In the `ui/src/pages` directory, delete the `index.page.tsx` file so that you have a clean project to work with:
+1. In the `/04-zkapp-browser-ui/ui/src/pages` directory:
 
   ```sh
   $ rm index.page.tsx
@@ -211,6 +216,8 @@ Outside of this tutorial, the workflow for building your own zkApp is to edit fi
 
 The React UI has several components: the React page itself and the code that uses o1js.
 
+### Download helper files
+
 Because o1js code is computationally intensive, it's helpful to use web workers. A web worker handles requests from users to ensure the UI thread isn't blocked during long computations like compiling a smart contract or proving a transaction.
 
 1. Download the helper files from the `examples/zkapps/04-zkapp-browser-ui` directory on GitHub:
@@ -225,7 +232,7 @@ Because o1js code is computationally intensive, it's helpful to use web workers.
     - `zkappWorker.ts` is the web worker code
     - `zkappWorkerClient.ts` is the code that is run from React to interact with the web worker
 
-### Implement the React app
+### Download the main browser UI logic file
 
 The example project has a completed app. The `index.page.tsx` file is the entry file for your application and contains the main logic for the browser UI that is ready to deploy to GitHub Pages.
 
@@ -233,6 +240,8 @@ The example project has a completed app. The `index.page.tsx` file is the entry
 
 1. Move the `index.page.tsx` file to your local `/04-zkapp-browser-ui/ui/src/pages` directory.
 
+### Import and export statements
+
 First, review the `import` and `export` statements:
 
 - The `import` statements set up your React project with the required imports. 
@@ -391,7 +400,7 @@ This code creates an instance of the contract at a fixed address and gets its cu
 
 ### Update the state of the React app
 
-And finally for this function, update the state of the React app:
+And finally, this function updates the state of the React app:
 
 ```ts ignore
 ...