link to new client-ts

NillionNetwork · Nov 15, 2024 · c85bb3b · c85bb3b
1 parent 37d60a9
commit c85bb3b
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 306 deletions.
diff --git a/docs/compute-js.md b/docs/compute-js.md
diff --git a/docs/js-client.md b/docs/js-client.md
@@ -2,109 +2,58 @@ import DocCardList from '@theme/DocCardList';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import JsHeaders from './\_js-headers-proxy.mdx';
+import ThemedImage from '@theme/ThemedImage';
 
-# JavaScript Client
+# Nillion TypeScript Client
 
-The `@nillion/client-web` npm package is a JavaScript client for building on top of the Nillion Network. It can be used to manage Nada programs, store and retrieve secrets, and run computations.
+The Nillion TypeScript client [client-ts](https://github.com/NillionNetwork/client-ts) provides libraries for interacting with Nillion blind compute networks. This client is structured as a monorepo containing multiple packages to support different use cases and environments.
 
-## Installation
-
-Install the [JavaScript Client](https://www.npmjs.com/package/@nillion/client-web) package in your browser application.
-
-<Tabs>
-
-  <TabItem value="yarn" label="yarn" default>
-```bash
-yarn add @nillion/client-web
-```
-  </TabItem>
+## Quick Start
 
-  <TabItem value="npm" label="npm">
-```bash
-npm i @nillion/client-web
-```
-  </TabItem>
+The fastest way to get started with Nillion is using the create-nillion-app cli tool, which spins up a working Next.js app
 
-  <TabItem value="pnpm" label="pnpm">
 ```bash
-pnpm add @nillion/client-web
-```
-  </TabItem>
-</Tabs>
-
-## Usage
-
-### Import JavaScript Client
-
-```js
-import * as nillion from '@nillion/client-web';
+npx create-nillion-app@latest
 ```
 
-### Set Headers and set up proxy for nilchain
-
-<JsHeaders/>
-
-### Initialize NillionClient with JavaScript Client
-
-<Tabs>
-
-<TabItem value="app" label="App.js" default>
-```js
-import * as nillion from '@nillion/client-web';
-import React, { useState, useEffect } from 'react';
-
-const App: React.FC = () => {
-const [nillionClient, setNillionClient] = useState(null);
-const userKeySeed = 'my-userkey-seed';
-const nodeKeySeed = `my-nodekey-seed-${Math.floor(Math.random() * 10) + 1}`;
+<div style={{ textAlign: 'center' }}>
+  <ThemedImage
+    alt="Nillion Quickstart Demo"
+    sources={{
+        light: '/img/nillion_quickstart_demo_light.png',
+        dark: '/img/nillion_quickstart_demo_dark.png',
+      }}
+  />
+  <p>For more detailed information on building with create-nillion-app, check out our [Quickstart Guide](/quickstart).</p>
+</div>
 
-const initializeNewClient = async () => {
-if (userKey) {
-await nillion.default();
-const uk = nillion.UserKey.from_base58(userKey);
-const nodeKey = nillion.NodeKey.from_seed(nodeKeySeed);
-const userKey = nillion.UserKey.from_seed(nodeKeySeed);
-const newClient = new nillion.NillionClient(userkey, nodeKey, process.env.REACT_APP_NILLION_BOOTNODE_WEBSOCKET);
-setNillionClient(newClient);
-}
-};
+## Installation
 
-useEffect(() => {
-initializeNewClient();
-}, []);
+Choose your preferred package manager to install the Nillion client libraries:
 
-return (
+```bash
+# Using npm
+npm install @nillion/client-wasm @nillion/client-vms @nillion/client-react-hooks
 
-<div className="App">
-<h1>YOUR APP HERE</h1>
-User ID: {nillionClient ? nillionClient.user_id : 'Not set - Nillion Client has not been initialized' }
-</div>
-);
-};
+# Using pnpm
+pnpm add @nillion/client-wasm @nillion/client-vms @nillion/client-react-hooks
 
-export default App;
+# Using yarn
+yarn add @nillion/client-wasm @nillion/client-vms @nillion/client-react-hooks
+```
 
-````
-</TabItem>
+## Package Overview
 
-<TabItem value="env" label=".env" default>
+The Nillion client is composed of three main packages:
 
-Populate the .env with your Nillion Network config - here's an example of a .env file populated with a local [nillion-devnet](/nillion-devnet) configuration
+### @nillion/client-react-hooks
 
-```txt
-# replace with values from nillion-devnet
+React hooks built on top of `@nillion/client-vms` and integrated with `@tanstack/react-query` for seamless React application development.
 
-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
-```
+### @nillion/client-vms
 
-</TabItem>
-</Tabs>
+The primary gRPC client that combines payments and network operations into a simple API. This package supports both web browsers and Node.js environments.
 
-## Resources
+### @nillion/client-wasm
 
-<DocCardList/>
-````
+A collection of utility functions exported from Rust to WebAssembly, providing core functionality for the Nillion ecosystem.
diff --git a/docs/retrieve-secret-js.md b/docs/retrieve-secret-js.md
diff --git a/docs/store-secrets-js.md b/docs/store-secrets-js.md
diff --git a/sidebars.js b/sidebars.js
@@ -140,21 +140,15 @@ const sidebars = {
             id: 'js-client',
           },
           items: [
-            'js-quickstart',
             {
               type: 'link',
-              label: 'JavaScript Client Reference',
-              href: 'https://nillion.pub/nillion-js-reference',
+              label: 'create-nillion-app',
+              href: 'https://github.com/NillionNetwork/create-nillion-app',
             },
             {
-              type: 'category',
-              label: 'JavaScript Client Examples',
-              link: {
-                type: 'doc',
-                id: 'js-client-examples',
-              },
-              collapsed: false,
-              items: ['store-secrets-js', 'retrieve-secret-js', 'compute-js'],
+              type: 'link',
+              label: 'client-ts',
+              href: 'https://github.com/NillionNetwork/client-ts',
             },
           ],
         },