Skip to main content

JavaScript Client

@nillion/nillion-client-js-browser 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.

Installation​

Install the JavaScript Client package in your browser application.

yarn add @nillion/nillion-client-js-browser

Usage​

Asynchronously Import JavaScript Client​

// create state variable for Nillion JavaScript Client
const [nillion, setNillion] = useState(null);
// run once on mount
useEffect(() => {
    const importNillion = async () => {
        // asynchronously import Nillion JavaScript Client
        const nillionPackage = await import('@nillion/nillion-client-js-browser');
        // set nillion state variable
        setNillion(nillionPackage);
    };
    importNillion();
}, []);

Import JavaScript Client Types​

import type * as NillionTypes from "@nillion/nillion-client-js-browser/nillion_client_js_browser.d.ts";

Set COOP and COEP Headers​

The JavaScript Client makes use of browser web-workers. To make your app cross-origin isolated, you'll need to set these headers:

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

Manually configure proxy requests based on the ReactJS Guide

  1. Install http-proxy-middleware using npm or Yarn:

    npm install http-proxy-middleware --save
    yarn add http-proxy-middleware

  2. Create a src/setupProxy.js file and place the following contents in it:

    module.exports = function (app) {
        app.use(function (req, res, next) {
            res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
            res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
            next();
        });
    };

For more information, check out

Initialize NillionClient with JavaScript Client​

import { useState, useEffect } from 'react';

function App() {
    // state variable for Nillion JavaScript Client Library
    const [nillion, setNillion] = useState(null);
    // state variable for NillionClient
    const [nillionClient, setNillionClient] = useState(null);
  
    // Asynchronously Import JavaScript Client package
    useEffect(() => {
        const importNillion = async () => {
            const nillionPackage = await import('@nillion/nillion-client-js-browser');
            setNillion(nillionPackage);
        };
        importNillion();
    }, []);

    // Initialize NillionClient, connecting to Nillion Network
    useEffect(() => {
        const initializeNillionClient = async () => {
            await nillion.default();
            const node_key = nillion.NodeKey.from_base58(
                process.env.REACT_APP_NILLION_NODEKEY_TEXT_PARTY_1
            );
            const user_key = nillion.UserKey.from_base58(
                process.env.REACT_APP_NILLION_USERKEY_TEXT_PARTY_1
            );
            const bootnodes_web = [process.env.REACT_APP_NILLION_WEBSOCKETS];
            const paymentsConfig = {
                rpc_endpoint: process.env.REACT_APP_NILLION_BLOCKCHAIN_RPC_ENDPOINT,
                smart_contract_addresses: {
                blinding_factors_manager:
                    process.env.REACT_APP_NILLION_BLINDING_FACTORS_MANAGER_SC_ADDRESS,
                    payments: process.env.REACT_APP_NILLION_PAYMENTS_SC_ADDRESS,
                },
                signer: {
                    wallet: {
                        chain_id: parseInt(process.env.REACT_APP_NILLION_CHAIN_ID || 0),
                        private_key: process.env.REACT_APP_NILLION_WALLET_PRIVATE_KEY,
                    },
                },
            };    
            // create new instance of NillionClient
            const client = new nillion.NillionClient(
                user_key,
                node_key,
                bootnodes_web,
                paymentsConfig
            );
            // set state access to nillionClient
            setNillionClient(client);
        };
        // initialize client if it doesn't exist yet
        if (nillion && !nillionClient) {
            initializeNillionClient();
        }
  }, [nillion, nillionClient]);

  if (nillionClient) {
    const userId = nillionClient.user_id;
    console.log(userId);
    // Add your Nillion logic here: use nillionClient to
    // store programs
    // store, retrieve, update, and delete secrets
    // compute on programs with secrets
  }

  return (
    <div className="App">
      YOUR APP HERE
    </div>
  );
}

export default App;

Resources​