Skip to content

Commit

Permalink
Merge pull request #122 from NillionNetwork/feat/js-client-release
Browse files Browse the repository at this point in the history 
Feat/js client release (Part 1)
  • Loading branch information
@crypblizz8
crypblizz8 authored Nov 7, 2024
2 parents 1957b76 + 1cadcf0 commit dc11b8f
Show file tree
Hide file tree
Showing 12 changed files with 156 additions and 236 deletions.
24 changes: 2 additions & 22 deletions docs/_quickstart-compile-run-test.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,31 +29,11 @@ Use the <strong>[`nada`](/nada)</strong> tool to compile, run and test the progr
nada run secret_addition_test
```

Now we run the program. This uses the inputs defined in the test file (tests/secret_addition_test.yaml) and runs the program and prints the result. Make note of the result, we will need it next.
Now we run the program. This uses the inputs defined in the test file (tests/secret_addition_test.yaml) and runs the program and prints the result.

5. Test the program
```bash
nada test secret_addition_test
```

Finally, we test the program. If you run the above command without altering the default values (`3`s) in the test file (`tests/secret_addition_test.yaml`), the test will fail because the expected test output doesn't match the resulting output. Modify the value of `my_output` in the test file and re-test the program.

<strong>Modify test values in `secret_addition_test.yaml`</strong>
```
---
program: secret_addition
inputs:
my_int1:
SecretInteger: "3"
my_int2:
SecretInteger: "3"
expected_outputs:
my_output:
SecretInteger: "6"
```

<strong>Re-run test</strong>

```bash
nada test secret_addition_test
```
Finally, we test the program and it should pass!
7 changes: 0 additions & 7 deletions docs/_sdk-installation.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,3 @@ nilup -V; nillion -V
nilup 22c84830fff3c86beec27a8cb6353d45e7bfb8a4
tools-config 22c84830fff3c86beec27a8cb6353d45e7bfb8a4
```

Optionally enable `nilup` telemetry, providing your Ethereum wallet address. We collect this data to understand how the software is used, and to better assist you in case of issues. In doing this, you consent to the collection of telemetry data by the Nillion Network. While we will not collect any personal information, we still recommend using a new wallet address that cannot be linked to your identity by any third party.
For more information, check out our [privacy policy](https://nillion.com/privacy/).

```bash
nilup instrumentation enable --wallet <your-eth-wallet-address>
```
188 changes: 33 additions & 155 deletions docs/quickstart-blind-app.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@ import QuickstartIntro from './\_quickstart-intro.mdx';
import VenvSetup from './\_nada-venv-setup.mdx';
import UnderstandingProgram from './\_understanding-first-nada-program.mdx';
import CompileRunTest from './\_quickstart-compile-run-test.mdx';
import ThemedImage from '@theme/ThemedImage';

# Build a Blind App with the cra-nillion starter repo
# Build a Blind App

:::info

Expand All @@ -16,35 +17,31 @@ This is the 3rd step in the Blind App Quickstart. Before starting this guide,
1. [Install the Nillion SDK](/quickstart-install)
2. [Create a Nada project](/quickstart-nada) and write your first Nada program

:::

The [cra-nillion Starter Repo](https://github.com/NillionNetwork/cra-nillion) repo is a Create React App which has everything you need to start building your blind app.
Also check that you have [Node (>= v18.17)](https://nodejs.org/en/download/) installed by running
`node -v`

## Clone the CRA-Nillion JavaScript starter repo
:::

Make sure you are in the root of the `quickstart` directory. Clone the repo into your `quickstart` directory.

```bash
git clone https://github.com/NillionNetwork/cra-nillion.git
```

### Install repo dependencies and run the starter

:::info
Go back to the root directory you created and run the development command.

Open http://localhost:3000/ to see your starter app running locally at port 3000

Before you use [cra-nillion](https://github.com/NillionNetwork/cra-nillion), check that you have [Node (>= v18.17)](https://nodejs.org/en/download/) installed by running
`node -v`
:::

```
cd cra-nillion
npm i
npm start
npm run dev
```

Open http://localhost:8080/ to see your cra-nillion starter app running locally at port 8080

![CRA nillion no cluster](/img/cra-nillion-no-cluster.png)
<ThemedImage
alt="Nillion Quickstart Demo"
sources={{
light: '/img/nillion_quickstart_demo_light.png',
dark: '/img/nillion_quickstart_demo_dark.png',
}}
/>

For this Quickstart, we'll focus on the Nillion Operations page and the Nillion Blind Computation Demo page.

Expand All @@ -54,10 +51,10 @@ In the screenshot of cra-nillion, you'll notice that cluster id and other config

### Spin up a local Nillion devnet

Open a second terminal and run the devnet using any seed (the example uses "my-seed") so the cluster id, websockets, and other environment variables stay constant even when you restart nillion-devnet.
Open a separate terminal and run the devnet using any seed (the example uses "my-seed") so the cluster id, websockets, and other environment variables stay constant even when you restart nillion-devnet.

```shell
nillion-devnet --seed my-seed
nillion-devnet
```

You will see an output like this:
Expand All @@ -76,148 +73,29 @@ nillion-devnet --seed my-seed
🏃 starting node 12D3KooWMgLTrRAtP9HcUYTtsZNf27z5uKt3xJKXsSS2ohhPGnAm
👛 funding nilchain keys
📝 nillion CLI configuration written to /Users/steph/Library/Application Support/nillion.nillion/config.yaml
🌄 environment file written to /Users/steph/Library/Application Support/nillion.nillion/nillion-devnet.env
```

Copy the path printed after "🌄 environment file written to" and open the file

```
vim "/Users/steph/Library/Application Support/nillion.nillion/nillion-devnet.env"
```

This file has the nillion-devnet generated values for cluster id, websocket, json rpc, and private key. You'll need to put these in your local .env in one of the next steps so that your cra-nillion demo app connects to the nillion-devnet.

Keep the nillion-devnet running in this terminal.

### Create .env file

Make sure you are in the `quickstart/cra-nillion` directory.

Copy the up the .env.example file to a new .env and set up these variables to match the nillion environment file.

```shell
cp .env.example .env
```

Update your newly created .env with environment variables outout in your terminal by nillion-devnet

```
REACT_APP_NILLION_CLUSTER_ID=
REACT_APP_NILLION_BOOTNODE_WEBSOCKET=
REACT_APP_NILLION_NILCHAIN_JSON_RPC=
REACT_APP_NILLION_NILCHAIN_PRIVATE_KEY=
REACT_APP_API_BASE_PATH=/nilchain-proxy
# Optional: add your ETH Address to enable JavaScript Client Telemetry
REACT_APP_YOUR_ETHEREUM_ADDRESS_FOR_NILLION_TELEMETRY=
```

Restart the cra-nillion app process

```
npm start
```

Now the Cluster ID field should be populated with the nillion-devnet cluster id value you set in REACT_APP_NILLION_CLUSTER_ID.

![CRA nillion with cluster](/img/cra-nillion-with-cluster.png)

## Try out the Operations Page

1. Generate User Key - generates a new user key / user id pair
2. Connect with User Key - sets the user key and connects to NillionClient via the Nillion JavaScript Client
3. Hide Nillion User Key and Node Key Connection Info - toggle button to show/hide user and node key options
4. Perform Nillion Operations

To perform an operation (store secret, retrieve secret, update secret, store program, compute), you follow the same pattern:

1. Get quote for the operation
2. Pay quote for the operation and get a payment receipt. On your local nillion-devnet, payments for operations are sent to the local nilchain at REACT_APP_NILLION_NILCHAIN_JSON_RPC are funded by REACT_APP_NILLION_NILCHAIN_PRIVATE_KEY
3. Perform the operation with the payment receipt as a parameter

![CRA nillion operations](/img/cra-nillion-operations.png)

## Hook up your secret_addition.py nada program to your first blind app

Now that you understand how Nillion operations work, let's update the Nillion Blind Computation Demo page to use the Nada program you created.

Navigate to the Blind Computation Demo page: http://localhost:8080/compute

The code for Blind Computation Demo page [lives in ComputePage.tsx](https://github.com/NillionNetwork/cra-nillion/blob/main/src/ComputePage.tsx)

```
const outputName = 'my_output';
const partyName = 'Party1';
```

Notice that the ComputePage sets `outputName` which matches the the output name set in secret_addition.py. The ComputePage sets `partyName` which matches the the party name set in secret_addition.py. There are 2 `StoreSecretForm` components on ComputePage, with secretName set to `my_int1` and `my_int2` which matches the the secret names set in secret_addition.py.

<Tabs>
<TabItem value="helpers" label="secret_addition.py" default>
```
from nada_dsl import *
def nada_main():
party1 = Party(name="Party1")
my_int1 = SecretInteger(Input(name="my_int1", party=party1))
my_int2 = SecretInteger(Input(name="my_int2", party=party1))
new_int = my_int1 + my_int2
return [Output(new_int, "my_output", party1)]
````
</TabItem>
<TabItem value="compute" label="ComputePage.tsx" >
```ts reference showGithubLink
https://github.com/NillionNetwork/cra-nillion/blob/main/src/ComputePage.tsx
````
</TabItem>
</Tabs>
### Update programName
In order to run blind computation on your `secret_addition.py` Nada program, you'll need to make a few updates:
1. Open a new terminal and navigate to the root `quickstart` folder. List the contents of the folder
```
ls
🌄 environment file written to /Users/XXX/Library/Application Support/nillion.nillion/nillion-devnet.env
```

You should see cra-nillion and nada_quickstart_programs folders.
Refresh your page and you should now be able to press the `Login` button and it should turn into `Log Out`. Ensure you are on the `Devnet` Tab.

2. Copy your secret_addition.py and secret_addition.nada.bin files nada_quickstart_programs into cra-nillion
Now you can interact with the local devnet and `Store a Secrete Integer` and `Fetch the Value`.

```
cp nada_quickstart_programs/src/secret_addition.py cra-nillion/public/programs
cp nada_quickstart_programs/target/secret_addition.nada.bin cra-nillion/public/programs
```

Now your cra-nillion app can use the nada program and the nada program binaries in store program operations.
# Interacting with our Nada Program

3. Update programName to `secret_addition` so the cra-nillion repo reads your Nada program.
```ts
// const programName = 'addition_simple'; <-- Change the string
const programName = "secret_addition";
```

:::tip

Open the Nillion [JavaScript Client Reference](https://nillion.pub/nillion-js-reference/) doc in another tab to search for available Nillion Client classes while working with cra-nillion.

:::
We want to now interact with the `secret_addition` Nada program we created in the previous step. So let's interact with the other module boxes.

## Run the Blind Computation Demo
1. Upload your program from your `nada/src/target/secret_addition.nada.bin`
2. Copy the `programID` and use it in the `Compute` section
3. Copy the `computeOutputID` and use it in the `Compute Output` section

Go back to the Blind App on http://localhost:8080/compute and run through the steps on the page to test out the full blind computation flow.
<ThemedImage
alt="CNA Output"
sources={{
light: '/img/cna_program_output_light.png',
dark: '/img/cna_program_output_dark.png',
}}
/>

## Next steps

Expand Down
65 changes: 62 additions & 3 deletions docs/quickstart-install.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,70 @@ import SdkInstallation from './\_sdk-installation.mdx';

# Install Nillion

Install the Nillion SDK, including the <strong>`nada`</strong> tool you'll use to create a Nada project and the <strong>`nillion-devnet`</strong> tool you'll use to spin up a local Nillion network.
Install the Nillion SDK in one command. This includes the <strong>`nada`</strong> directory to create a Nada project and the <strong>`nillion-devnet`</strong> to interact with a local Nillion network.

## Use nilup to install the Nillion SDK
## One line `create-nillion-app` installation

<SdkInstallation/>
:::info
Nillion SDK binaries are available for [Linux and macOS platforms](/limitations#platforms). For Windows installation, make sure to follow our [Windows developer environment setup](/installation#windows-guide) guide ahead of installing binaries.

Prerequisties:

- Python (>= 3.10)
- Node (>= v18.17)
:::

We have made this a simpler process with our NPX tool: `create-nillion-app`.

In one command it installs:

- Nillion SDK
- A NextJS app
- Python / Nada folders to use Nada programs

# Getting Started

1. Run the following command the follow the CLI instructions

```
npx @nillion/create-nillion-app
```

2. Name your directory (i.e. `my_blind_app`)
3. Wait until CLI completes

Your shell should look like this:

![CNA Shell](/img/cna_terminal.png)

Your tree should look like this:

```
.
├── README.md
├── app
│ ├── components
│ ├── home
│ ├── layout.tsx
│ ├── lib
│ └── page.tsx
├── nada
│ ├── .venv
│ ├── nada-project.toml
│ ├── requirements.txt
│ ├── src
│ └── target
│ └── tests
├── next.config.mjs
├── node_modules
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── next.svg
│ └── vercel.svg
└── tsconfig.json
```

## Next steps

Expand Down
Loading

0 comments on commit dc11b8f

Please sign in to comment.