Skip to main content

JavaScript 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.

Installation​

Install the JavaScript Client package in your browser application.

yarn add @nillion/client-web

Usage​

Import JavaScript Client​

import * as nillion from '@nillion/client-web';

Set Headers and set up proxy for nilchain​

The JavaScript Client makes use of browser web-workers. To make your app cross-origin isolated, you'll need to set COOP and COEP headers, completed for you in the cra-nillion webpack.config.js

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

Add headers and create a nilchain proxy in your webpack.config.js

module.exports = {
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    headers: {
      'Cross-Origin-Embedder-Policy': 'require-corp',
      'Cross-Origin-Opener-Policy': 'same-origin',
    },
    hot: true,
    client: {
      overlay: false,
    },
    historyApiFallback: true,
    proxy: [
      {
        context: ['/nilchain-proxy'],
        target: process.env.REACT_APP_NILLION_NILCHAIN_JSON_RPC,
        pathRewrite: { '^/nilchain-proxy': '' },
        changeOrigin: true,
        secure: false,
      },
    ],
  },
};

For more information, check out

Initialize NillionClient with JavaScript Client​

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}`;

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);
}
};

useEffect(() => {
initializeNewClient();
}, []);

return (

<div className="App">
<h1>YOUR APP HERE</h1>
User ID: {nillionClient ? nillionClient.user_id : 'Not set - Nillion Client has not been initialized' }
</div>
);
};

export default App;

Resources​