Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Made several grammatical fixes and improvements #873

Open
wants to merge 1 commit into
base: testnet3
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 18 additions & 19 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,43 +9,43 @@

# Zero Knowledge Web App SDK

The [Aleo SDK](https://github.com/AleoHQ/sdk) provides tools for building zero knowledge applications. It consists of
several TypeScript & JavaScript libraries which provide the following functionality:
1. [Aleo account management](https://aleo.tools/account)
The [Aleo SDK](https://github.com/AleoHQ/sdk) provides tools for building zero-knowledge applications. It consists of
several TypeScript and JavaScript libraries which provide the following functionality:
1. [Aleo account management](https://aleo.tools/account)
2. [Web-based program execution and deployment](https://aleo.tools/develop)
3. [Aleo credit transfers](https://aleo.tools/transfer)
4. [Management of program state and data](https://aleo.tools/record)
5. [Communication with the Aleo network](https://aleo.tools/rest)

All of this functionality is demonstrated on [Aleo.tools](https://aleo.tools).
All of this functionality is demonstrated on [Aleo.tools](https://aleo.tools).


The Aleo SDK is divided into three Typescript/Javascript packages
The Aleo SDK is divided into three Typescript/Javascript packages, namely:

## 1. Aleo SDK - Build Zero Knowledge Web Apps

<a href="https://www.npmjs.com/package/@aleohq/sdk"> <img alt="Aleo SDK" src="https://img.shields.io/npm/l/%40aleohq%2Fsdk?label=NPM%20-%20Aleo%20SDK&labelColor=green&color=blue"></a>

The official Aleo SDK providing Javascript/Typescript tools for creating zero knowledge app.
The official Aleo SDK provides Javascript/Typescript tools for creating zero-knowledge apps.

### ⚡ Build your own app

Start here with the [Aleo SDK Readme](https://github.com/AleoHQ/sdk/tree/testnet3/sdk#readme) to get started building your
first zero knowledge web app.
first zero-knowledge web app.

#### Source: [`sdk/sdk`](https://github.com/AleoHQ/sdk/tree/testnet3/sdk)


## 2. Create-Aleo-App - Zero Knowledge Web App Examples
<a href="https://www.npmjs.com/package/create-aleo-app"> <img alt="Create Aleo App" src="https://img.shields.io/npm/l/create-aleo-app?label=NPM%20-%20Create-Aleo-App&labelColor=green&color=blue"></a>

Create-aleo-app provides zero-knowledge web app examples in common web frameworks such as React. Developers looking to
`Create-aleo-app` provides zero-knowledge web app examples in common web frameworks such as React. Developers looking to
start with working examples should start here.

### ⚡ Build your own app


You can start with a template by running
You can start with a template by running:
```bash
npm create aleo-app@latest
```
Expand All @@ -57,36 +57,35 @@ npm create aleo-app@latest
<a href="https://www.npmjs.com/package/@aleohq/nodejs"> <img alt="Create Aleo App" src="https://img.shields.io/npm/l/%40aleohq%2Fnodejs?label=NPM%20-%20Aleo%20Nodejs&labelColor=green&color=blue"></a>
<a href="https://crates.io/crates/aleo-wasm"> <img alt="Aleo-Wasm" src="https://img.shields.io/crates/v/aleo-wasm.svg?color=neon"></a>

Aleo Wasm is a Rust crate which compiles Aleo code responsible for creating and executing zero knowledge programs into
Aleo Wasm is a Rust crate that compiles Aleo code responsible for creating and executing zero knowledge programs into
WebAssembly.

When compiled with `wasm-pack` JavaScript bindings are generated for the WebAssembly allowing Aleo zero
knowledge programs to be used in the browser and NodeJS. This package is available on NPM (linked above). The Aleo WASM
When compiled with `wasm-pack` JavaScript bindings are generated for the WebAssembly allowing Aleo zero-knowledge programs to be used in the browser and with `NodeJS`. This package is available on `NPM` (linked above). The Aleo WASM
Readme provides instructions for compiling this crate and using it in web projects for those interested in building from
source.

❗ Currently program execution is only available in web Browsers. However account, program and data management within
NodeJS is functional.
❗ Currently program execution is only available in web Browsers. However, account, program and data management within
`NodeJS` is functional.

Source: [`sdk/wasm`](https://github.com/AleoHQ/sdk/tree/testnet3/wasm)

## 📚 Documentation

#### [API Documentation](https://developer.aleo.org/sdk/typescript/overview)
API Documentation, tutorials for the Aleo SDK, and documentation on how to build Leo and Aleo Instructions programs can
The API Documentation, Tutorials for the Aleo SDK, and documentation on how to build Leo and Aleo Instructions programs can
be found on the [Aleo Developer Docs](https://developer.aleo.org/sdk/typescript/overview) page.

#### [SDK Readme](https://github.com/AleoHQ/sdk/tree/testnet3/sdk#readme)
The SDK Readme provides concepts core to executing zero knowledge programs in the web and several detailed examples of
The SDK Readme provides concepts core to executing zero knowledge programs on the web and several detailed examples of
how to use the SDK to build web apps using Aleo.

#### [Aleo Wasm Readme](https://github.com/AleoHQ/sdk/tree/testnet3/wasm#readme)
The Aleo Wasm Readme provides instructions for compiling the Aleo Wasm crate and using it in web projects. Those who
want to build from source or create their own WebAssembly bindings should start here
want to build from the source or create their own WebAssembly bindings should start here.

## ❤️ Contributors

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Special thanks go to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
Expand Down Expand Up @@ -142,4 +141,4 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
This project follows the [all-contributors'](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!
6 changes: 3 additions & 3 deletions create-aleo-app/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
> **Compatibility Note:**
> [Node.js](https://nodejs.org/en/) version 18+

With NPM:
Use NPM:

```bash
npm create aleo-app@latest
Expand All @@ -23,7 +23,7 @@ npm create aleo-app@latest my-aleo-app --template react
npm create aleo-app@latest my-aleo-app -- --template react
```

Currently supported template presets include:
The currently supported template presets include:

- `vanilla`
- `react-leo`
Expand All @@ -34,4 +34,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](https://github.com/vitejs/vite/tree/main/packages/create-vite).
2 changes: 1 addition & 1 deletion create-aleo-app/template-extension/README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Chrome Extension + Aleo

> > [!NOTE]
> This is an experimental template not recommended for use
> This is an experimental template not recommended for use.
4 changes: 2 additions & 2 deletions create-aleo-app/template-nextjs-ts/README.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
This is a [Next.js](https://nextjs.org/) example project showing Aleo
integration via Web Workers.

This template is based off the default TypeScript configuration from
[`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app)
This template is based on the default TypeScript configuration from
[`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Getting Started

Expand Down
2 changes: 1 addition & 1 deletion create-aleo-app/template-node-ts/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@

`npm start`

Recommend Node.js 20+ for best performance.
We recommend the use of Node.js 20+ for best performance.
2 changes: 1 addition & 1 deletion create-aleo-app/template-node/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@

`npm start`

Recommend Node.js 20+ for best performance.
We recommend the use of Node.js 20+ for best performance.
16 changes: 8 additions & 8 deletions create-aleo-app/template-offline-public-transaction-ts/README.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
# Offline Transaction Builder

## 1. Overview
### 1.1 Proving Keys for Zero Knowledge Function Execution
To achieve zero knowledge execution, all Aleo functions require a `ProvingKey` and `VerifyingKey` in order to build a
zero knowledge ZkSnark proof of execution. If a user does not possess these keys for a function, they are normally
### 1.1 Proving Keys for Zero-Knowledge Function Execution
To achieve zero knowledge execution, all Aleo functions require a `ProvingKey` and `VerifyingKey` to build a
zero-knowledge ZkSnark proof of execution. If a user does not possess these keys for a function, they are normally
downloaded from the internet when the function is called.

### 1.2 Key Providers
They `KeyProvider` interface is designed to allow users to provide their own implementations for providing key material
The `KeyProvider` interface is designed to allow users to provide their implementations for providing key material
to Aleo function executions.

### 1.3 Building Transactions Offline
Expand All @@ -18,7 +18,7 @@ The `OfflineKeyProvider` and `OfflineSearchParams` are concrete implementations
interfaces. They are designed to fetch proving key material for Aleo functions from a local machine instead of contacting
the internet for it. This provides a way to build Aleo execution transactions without being connected to the internet.

This pathway is suitable for use-cases such as hardware wallets or air-gapped machines used
This pathway is suitable for use cases such as hardware wallets or air-gapped machines used
for building secure transactions.

### 1.4 Assumptions
Expand All @@ -29,14 +29,14 @@ construction of the offline transaction.
## 2. Usage

### 2.1 Pre-Download the Keys
First run this command online to download the key material to disk:
First, run this command online to download the key material to disk:

`npm start`

Once this command is run, all proving keys for the `transfer_public`, `bond_public`, `unbond_public`, and
`claim_unbond_public` functions will be downloaded to the `./keys` folder. The machine can then be disconnected from
the internet and the `OfflineKeyProvider` will search this directory for the function proving keys when building the
transaction instead of connecting to the internet. Alternatively you can skip the online step entirely by adding the proving key creating this directory manually and
transaction instead of connecting to the internet. Alternatively, you can skip the online step entirely by adding the proving key creating this directory manually and
adding the key material yourself.

### 2.2 Build the Transaction Offline
Expand All @@ -45,7 +45,7 @@ Once the key material is downloaded, turn off your internet connection and run t

`npm start`

You should see the transactions being built and the resulting transaction IDs printed to the console.
You should see the transactions being built and the resulting transaction IDs printed on the console.

## 3. Notes

Expand Down
33 changes: 16 additions & 17 deletions create-aleo-app/template-react-leo/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ workers.
npm run dev
```

Your app should be running on http://localhost:5173/
Your app should be running at [http://localhost:5173/](http://localhost:5173/).

### Build Leo program

Expand All @@ -30,27 +30,26 @@ Your app should be running on http://localhost:5173/
cp .env.example .env
```

2. Replace `PRIVATE_KEY=user1PrivateKey` in the `.env` with your own key (you
can use an existing one or generate your own at https://aleo.tools/account)
2. Replace `PRIVATE_KEY=user1PrivateKey` in the `.env` with your private key (you
can use an existing private key or generate a new private key for yourself at https://aleo.tools/account).
Follow the instructions here to install Leo: https://github.com/AleoHQ/leo.

3. Follow instructions to install Leo here: https://github.com/AleoHQ/leo

4. You can edit `helloworld/src/main.leo` and run `leo run` to compile and update the
3. You can edit `helloworld/src/main.leo` and run `leo run` to compile and update the
Aleo instructions under `build` which are loaded by the web app.

## Deploy program from web app

> [!WARNING]
> This is for demonstration purposes or local testing only, in production applications you
> should avoid building a public facing web app with private key information
> should avoid building a public facing web app with private key information.

Information on generating a private key, seeding a wallet with funds, and finding a spendable record can be found here
if you are unfamiliar: https://developer.aleo.org/testnet/getting_started/deploy_execute_demo
All information on generating a private key, seeding a wallet with funds, and finding a spendable record can be found here
if you are unfamiliar: https://developer.aleo.org/testnet/getting_started/deploy_execute_demo.

Aleo programs deployed require unique names, make sure to edit the program's name to something unique in `helloworld/src/main.leo`, `helloworld/program.json`, rename `helloworld/inputs/helloworld.in` and rebuild.
Aleo programs deployed require unique names. Make sure to edit the program's name to something unique in `helloworld/src/main.leo`, `helloworld/program.json`, rename `helloworld/inputs/helloworld.in` and rebuild.

1. In the `worker.js` file modify the privateKey to be an account with available
funds
1. In the `worker.js` file modify the Private Key to be an account with available
funds:

```js
// Use existing account with funds
Expand All @@ -59,19 +58,19 @@ Aleo programs deployed require unique names, make sure to edit the program's nam
});
```

2. (Optional) Provide a fee record manually (located in commented code within `worker.js`)
2. (Optional) Provide a fee record manually (located in the commented code within `worker.js`).

If you do not provide a manual fee record, the SDK will attempt to scan for a record starting at the latest block. A simple way to speed this up would be to make a public transaction to this account right before deploying.

3. Run the web app and hit the deploy button
3. Run the web app and hit the deploy button.

## Production deployment

### Build

`npm run build`

Upload `dist` folder to your host of choice.
Upload the `dist` folder to your host of choice.

### ⚠️ Header warnings

Expand All @@ -85,6 +84,6 @@ Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
```

We've included a `_headers` file that works with some web hosts (e.g. Netlify)
but depending on your host / server setup you may need to configure the headers
We have included a `_headers` file that works with some web hosts (e.g. Netlify),
but depending on your host/server setup you may need to configure the headers
manually.
2 changes: 1 addition & 1 deletion create-aleo-app/template-react-managed-worker/README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# React + Aleo + Managed Worker

> [!NOTE]
> This is an experimental template not recommended for use
> This is an experimental template, it is not recommended for use.

This template provides a minimal setup to get React and Aleo working in Vite with HMR and some ESLint rules.

Expand Down
30 changes: 15 additions & 15 deletions create-aleo-app/template-react-ts/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ workers.
npm run dev
```

Your app should be running on http://localhost:5173/
Your app should be running at [http://localhost:5173/](http://localhost:5173/).

### Build Leo program

Expand All @@ -30,10 +30,10 @@ Your app should be running on http://localhost:5173/
cp .env.example .env
```

2. Replace `PRIVATE_KEY=user1PrivateKey` in the `.env` with your own key (you
can use an existing one or generate your own at https://aleo.tools/account)
2. Replace `PRIVATE_KEY=user1PrivateKey` in the `.env` with your private key (you
can use an existing private key or generate a new private key for yourself at [https://aleo.tools/account](https://aleo.tools/account)).

3. Follow instructions to install Leo here: https://github.com/AleoHQ/leo
3. Follow the instructions here to install Leo: [https://github.com/AleoHQ/leo](https://github.com/AleoHQ/leo).

4. You can edit `helloworld/src/main.leo` and run `leo run` to compile and update the
Aleo instructions under `build` which are loaded by the web app.
Expand All @@ -42,15 +42,15 @@ Your app should be running on http://localhost:5173/

> [!WARNING]
> This is for demonstration purposes or local testing only, in production applications you
> should avoid building a public facing web app with private key information
> should avoid building a public facing web app with private key information.

Information on generating a private key, seeding a wallet with funds, and finding a spendable record can be found here
if you are unfamiliar: https://developer.aleo.org/testnet/getting_started/deploy_execute_demo
The information on generating a private key, seeding a wallet with funds, and finding a spendable record can be found here
if you are unfamiliar: [https://developer.aleo.org/testnet/getting_started/deploy_execute_demo](https://developer.aleo.org/testnet/getting_started/deploy_execute_demo).

Aleo programs deployed require unique names, make sure to edit the program's name to something unique in `helloworld/src/main.leo`, `helloworld/program.json`, rename `helloworld/inputs/helloworld.in` and rebuild.
Aleo programs deployed require unique names, make sure to edit the program's name to something unique in `helloworld/src/main.leo`, `helloworld/program.json`, also rename `helloworld/inputs/helloworld.in` and rebuild.

1. In the `worker.js` file modify the privateKey to be an account with available
funds
1. In the `worker.js` file modify the Private Key to be an account with available
funds:

```js
// Use existing account with funds
Expand All @@ -59,19 +59,19 @@ Aleo programs deployed require unique names, make sure to edit the program's nam
});
```

2. (Optional) Provide a fee record manually (located in commented code within `worker.js`)
2. (Optional) Provide a fee record manually (located in the commented code within `worker.js`).

If you do not provide a manual fee record, the SDK will attempt to scan for a record starting at the latest block. A simple way to speed this up would be to make a public transaction to this account right before deploying.

3. Run the web app and hit the deploy button
3. Run the web app and hit the deploy button.

## Production deployment

### Build

`npm run build`

Upload `dist` folder to your host of choice.
Upload the `dist` folder to your host of choice.

### ⚠️ Header warnings

Expand All @@ -85,6 +85,6 @@ Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
```

We've included a `_headers` file that works with some web hosts (e.g. Netlify)
but depending on your host / server setup you may need to configure the headers
We have included a `_headers` file that works with some web hosts (e.g. Netlify),
but depending on your host/server setup you may need to configure the headers
manually.
Loading