React Leo Tutorial Upgrades (#287)

* add tutorial changes to incorporate leo installation from sdk pr * update recap * add get contributor badge * fix explorer links --------- Co-authored-by: collin <[email protected]>
ProvableHQ · Oct 4, 2023 · 19135b5 · 19135b5
1 parent dbe55a1
commit 19135b5
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 16 deletions.
diff --git a/documentation/sdk/create-aleo-app/01_create_aleo_app_react_leo_tutorial.md b/documentation/sdk/create-aleo-app/01_create_aleo_app_react_leo_tutorial.md
@@ -18,15 +18,16 @@ Navigate to the project you just installed.
 ```bash
 cd aleo-project
 npm install
+npm run install-leo
 npm run dev
 ```
 <!-- markdown-link-check-disable -->
 
-This starts a local instance of your React application at http://localhost:5173.
+This installs all the required modules and also Leo, our statically-typed programming language built for writing private applications. Lastly, we've initialized a local instance of your React application at http://localhost:5173.
 
 `src/App.jsx` contains the main body of your React application.
 
-The `helloworld` folder is your Leo program. This is where you’ll use Leo, our statically-typed programming language built for writing private applications.
+The `helloworld` folder is your Leo program. This is where you’ll use Leo.
 
 `src/workers/worker.js` is the WebAssembly (WASM) module that we'll be initializing for deployment and execution of Leo programs.
 
@@ -50,12 +51,12 @@ Let’s deploy the `helloworld` program. Deployment requires an account with Ale
 
 ### Account Generation
 
-You can generate an account on the React application itself, or head over to [aleo.tools/account](https://aleo.tools/account) and hit “generate”. 
+```bash
+leo account new 
+```
 
 Write down your private key, view key, and public address in a safe place. Treat your private and view keys as keys you should never share with anyone else. 
 
-![generate-account](./images/generate-account.png)
-
 ### Faucet
 
 Once you have your account, use our faucet to get some Aleo credits! If you haven’t joined yet, go [Discord channel](https://discord.com/invite/SMXsDEQ) and join the `#faucet` channel. You can send only one request every 20 minutes and can only request 50 credits per hour. Once you send a faucet request, Discord will start a thread under the faucet channel with your request.
@@ -78,16 +79,48 @@ Transfer successful! for message ID: 1156693507768078496
 https://apiv2.aleo.network/testnet3/transaction/at12u62xwfew2rq32xee8nwhtlxghfjz7mm3528yj240nuezue625fqy4lhlp
 ```
 
-### The `helloworld` Program
+### Leo & `helloworld`
+
+If we try to deploy right now, deployment will fail because `helloworld` has already been deployed before. It's as simple as changing the program name, but let's use Leo to create and build an entirely new program.
+
+```bash
+leo new helloworld_[randomsuffix]
+cd helloworld_[randomsuffix]
+```
+
+After you've generated your new `helloworld` project, you can delete the original `helloworld` folder.
+
+You'll notice the React App now errors out. Navigate to the home directory of your React application and open `App.jsx`. Change the folder name on line 5 from `helloworld` to the name of your new Leo project to get rid of the error:
+
+```bash
+import helloworld_program from "../helloworld_[randomsuffix]/build/main.aleo?raw";
+```
+
+Let's dig in a little more. Navigate back to your Leo project and Add your private key to the `.env` in your new Aleo project. Replace the example private key with the one you saved above.
+
+```bash
+NETWORK=testnet3
+PRIVATE_KEY=APrivateKey1zkp2FCZZ7ucNVx5hoofizpq18mvCZNKTpqKMTt1wTahmxSf
+```
+
+Once you've done this, within the root of your new Leo project, you can locally execute your Leo program while developing it:
+
+```bash
+leo run  ## compiles leo to aleo instructions and executes program functions with input variables
+
+leo execute  ## compiles leo to aleo instructions, executes a program with input variables, synthesizes the program circuit, and generates proving and verifying keys
 
-Since `helloworld` has already been deployed before, let’s change the name of your helloworld program by adding a suffix. You’ll want to change the code `helloworld.aleo` to `helloworld_[randomsuffix].aleo` in four files:
+leo help  ## you know what this does
+```
 
-1. `helloworld/src/main.leo` 
-2. `helloworld/src/program.json` 
-3. `helloworld/build/main.leo`
-4. `helloworld/build/program.json`
+You can try it yourself and observe the outputs in the terminal.
 
-You won’t have to do this when actually developing a Leo program - source files compile to the build in the Leo language, but for now, let’s just change the names to move forward.
+```bash
+leo run main
+leo execute main
+```
+
+Let's get back to deploying!
 
 When you deploy a program, the record that you requested from the faucet is the one that will be used in order to pay for deployment. Looking in `App.jsx`, the web worker is called in order to start the deployment. Following that to `src/workers/worker.js` we see that the WASM is initalized, which allows for computation to run efficiently in the browser, and that the program manager contains methods for authoring, deploying, and interacting with Aleo programs. 
 
@@ -139,16 +172,51 @@ Now you can hit the deploy button!
 
 Success, you’ve deployed an Aleo program and can how create a decentralized, private application!
 
+## Claim your Leo Contributor Badge!
+Making it through this tutorial was no easy task, so because you've done it, we'd love to honor you with a Leo contributor badge on Github!
+
+### Pushing your Leo Application to Github
+
+1. Let's get to your project's directory, initialize, and commit your application.
+
+```bash
+cd aleo-project
+git init -b main
+git add .
+git commit -m "first commit, new aleo app"
+```
+
+2. Create a new repository on your [github.com](https://github.com/new) account by hitting "new repository" in the top right. Set the repo to public, and don't worry about adding a README, license, or .gitignore files. You can add these files after your project has been pushed to GitHub. 
+
+3. At the top of the page your new repository, click to copy the remote repository URL and go back to your terminal to link your local project to this repository.
+
+![ ](https://docs.github.com/assets/cb-48149/mw-1440/images/help/repository/copy-remote-repository-url-quick-setup.webp)
+
+```bash
+git remote add origin <REMOTE_URL>
+git remote -v
+git push -u origin main
+```
+
+### Claim your Leo badge
+1. Go to the Leo repo issues tab [here](https://github.com/AleoHQ/leo/issues/new/choose)
+2. Go to 🥇 "Badge" and click "Get Started".
+3. Follow the brief instructions and submit.
+4. Once your issue is approved, we will add you to the [contributors section](https://github.com/AleoHQ/leo#%EF%B8%8F-contributors) of the Leo README.md file.
+
+Congratulations on becoming a Leo contributor! 🎉
+
 ## Recap & Additional Resources
 
 1. We packaged a React template for you with Leo.
 
-2. [Leo](https://developer.aleo.org/leo/) is our statically-typed programming language built for writing private applications.
+2. You also installed [Leo](https://developer.aleo.org/leo/), our statically-typed programming language built for writing private applications. Using Leo, you can write, build, compile, and execute Leo programs locally.
 
-3. We provided the Leo program `helloworld` already pre-compiled into Aleo instructions and then executed locally using WASM + web workers which was an abstraction on snarkVM’s capabilities. [snarkVM](https://developer.aleo.org/aleo/) is the data execution layer. It is used to compile Leo programs and execute them locally off-chain. All Leo programs eventually become Aleo instructions via Aleo’s compiler during the execution phase of snarkVM. 
+3. We provided the `helloworld` Leo program already pre-compiled into Aleo instructions and then executed it locally using WASM + web workers, which was an abstraction on snarkVM’s capabilities. [snarkVM](https://developer.aleo.org/aleo/) is the data execution layer. It is used to compile Leo programs and execute them locally off-chain. All Leo programs eventually become Aleo instructions via Aleo’s compiler during the execution phase of snarkVM. 
 
 4. Similarly, we deployed the `helloworld` program, again using the WASM + web workers abstraction layer but you can also deploy programs on-chain using [snarkOS](https://developer.aleo.org/testnet/getting_started/deploy_execute/#deploy), the data availability layer or blockchain / distributed ledger.
 
 5. During the tutorial you navigated to [aleo.tools](https://aleo.tools), which is the graphical interface to our SDK, which serves as an abstraction layer of snarkOS and snarkVM. You’ll find you can perform similar actions (compiling, executing, deploying) on aleo.tools. 
 
-6. The entire React template along with the WASM and web workers can also be considered an abstraction layer of snarkOS and snarkVM.
+6. The entire React template along with the WASM and web workers can also be considered an abstraction layer of snarkOS and snarkVM. This makes it easier than ever to spin up a dApp using React & Leo.
+
diff --git a/documentation/sdk/create-aleo-app/images/generate-account.png b/documentation/sdk/create-aleo-app/images/generate-account.png
diff --git a/documentation/sdk/typescript/00_sdk_overview.md b/documentation/sdk/typescript/00_sdk_overview.md
@@ -668,9 +668,13 @@ A full example of this implementation can be found [here](https://github.com/Ale
 The official token of operation of the Aleo Network are Aleo credits. Aleo credits are used to pay all fees for program
 execution on the Aleo network.
 
+<!-- markdown-link-check-disable -->
+
 Aleo credits are defined in the [credits.aleo](https://explorer.aleo.org/program/credits.aleo) program. This program is
 deployed to the Aleo Network and defines data structures representing Aleo credits and the functions used to manage them.
 
+<!-- markdown-link-check-enable -->
+
 There are two ways to hold Aleo credits.
 
 #### 1 - Private balances via credits.aleo records
@@ -841,10 +845,14 @@ representing a user.
 A straightforward example of a usage of records in a program can be demonstrated by explaining the process of private
 value transfers of official Aleo credits on the Aleo network.
 
+<!-- markdown-link-check-disable -->
+
 Aleo credits are the official token in which all on-chain execution and deployment fees are paid. Credits can be public
-or private. Private credits are represented by the `credits` record in the [credits.aleo](https://www.aleo.network/programs/credits.aleo)
+or private. Private credits are represented by the `credits` record in the [credits.aleo](https://explorer.aleo.org/programs/credits.aleo)
 program.
 
+<!-- markdown-link-check-enable -->
+
 ```
 record credits:
     owner as address.private;