Skip to content

Commit

Permalink
Merge branch 'master' into kpandl/finalize-1
Browse files Browse the repository at this point in the history
merge changes from master.
  • Loading branch information
kpandl committed Oct 4, 2023
2 parents c8c2b08 + 94b4133 commit f5e7c30
Show file tree
Hide file tree
Showing 4 changed files with 96 additions and 20 deletions.
4 changes: 2 additions & 2 deletions documentation/sdk/create-aleo-app/00_app_installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ sidebar_label: Installation
With NPM:

```bash
$ npm create aleo-app@latest
npm create aleo-app@latest
```

Then follow the prompts!
Expand All @@ -39,4 +39,4 @@ You can use `.` for the project name to scaffold in the current directory.

## More Information

Based off of create-vite: https://github.com/vitejs/vite/tree/main/packages/create-vite
Based off of create-vite: https://github.com/vitejs/vite/tree/main/packages/create-vite
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -50,15 +51,15 @@ 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.
Once you have your account, use our faucet to get some Aleo credits! If you haven’t already, join our [Discord server](https://discord.gg/aleohq) and use 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.

Format:

Expand All @@ -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.

Expand Down Expand Up @@ -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.
Binary file not shown.
12 changes: 10 additions & 2 deletions documentation/sdk/typescript/00_sdk_overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Aleo credits are defined in the [credits.aleo](https://www.aleo.network/programs/credits.aleo) program. This program is
<!-- 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
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit f5e7c30

Please sign in to comment.