feat: update to new js client

package.json

@@ -2,26 +2,28 @@
   "name": "cra-nillion",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "dependencies": {
     "@cosmjs/proto-signing": "^0.32.3",
     "@cosmjs/stargate": "^0.32.3",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.15.20",
     "@mui/material": "^5.15.20",
+    "@nillion/client-core": "latest",
+    "@nillion/client-payments": "latest",
+    "@nillion/client-react-hooks": "latest",
+    "@nillion/client-vms": "latest",
     "@nillion/client-web": "^0.4.0",
     "@tailwindcss/forms": "^0.5.7",
     "@types/react-router-dom": "^5.3.3",
-    "buffer": "^6.0.3",
-    "crypto-browserify": "^3.12.0",
     "react": "^18.3.1",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.23.1",
     "react-syntax-highlighter": "^15.5.0",
     "stream-browserify": "^3.0.0",
-    "use-async-effect": "^2.2.7",
-    "vm-browserify": "^1.1.2"
+    "use-async-effect": "^2.2.7"
   },
   "scripts": {
     "start": "webpack serve --mode development",
@@ -31,6 +33,7 @@
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@tsconfig/recommended": "^1.0.6",
+    "@types/debug": "^4.1.12",
     "@types/react": "^18.3.3",
     "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-dom": "^18.3.0",
@@ -52,5 +55,8 @@
     "webpack": "^5.92.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4"
+  },
+  "prettier": {
+    "singleQuote": true
   }
 }

postcss.config.js → postcss.config.mjs

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},

src/NextClient.tsx

@@ -0,0 +1,76 @@
+import { useFetchValue, useStoreValue } from '@nillion/client-react-hooks';
+import * as React from 'react';
+import { useState } from 'react';
+import { Button, Box, Typography, List, ListItem, Stack } from '@mui/material';
+
+export const NextClient = () => {
+  const [id, setId] = useState('');
+  const storeValue = useStoreValue();
+  const fetchValue = useFetchValue(
+    {
+      id,
+      name: 'foo',
+      type: 'SecretInteger',
+    },
+    {
+      staleTime: 1000 * 30, // data stale after 30 seconds
+    },
+  );
+
+  const data = {
+    foo: 42,
+  };
+
+  if (storeValue.data && !id) {
+    setId(storeValue.data);
+  }
+
+  const handleStoreClick = () => {
+    storeValue.mutate({
+      values: data,
+      ttl: 1,
+    });
+  };
+
+  const handleFetchClick = async () => {
+    await fetchValue.refetch();
+  };
+
+  return (
+    <Stack spacing={2} maxWidth={400} sx={{ mt: 4 }}>
+      <Typography variant="h5">Hello from @nillion/client-* 👋</Typography>
+      <Typography>Original data: {JSON.stringify(data)}</Typography>
+      <Typography variant="h6">1. Store data</Typography>
+      <Button onClick={handleStoreClick} variant="contained">
+        Store
+      </Button>
+      <List>
+        <ListItem>Status: {storeValue.status}</ListItem>
+        {id && <ListItem>Id: {id}</ListItem>}
+      </List>
+      <Typography variant="h6">2. Read data</Typography>
+      <Button
+        onClick={handleFetchClick}
+        variant="contained"
+        disabled={!Boolean(id)}
+      >
+        Force refresh
+      </Button>
+      <List>
+        <ListItem>Status: {fetchValue.status}</ListItem>
+        <ListItem>
+          Updated at: {new Date(fetchValue.dataUpdatedAt).toLocaleString()}
+        </ListItem>
+        <ListItem>
+          From cache:{' '}
+          {Boolean(
+            fetchValue.isFetched && !fetchValue.isFetchedAfterMount,
+          ).toString()}
+        </ListItem>
+        {fetchValue.data && (
+          <ListItem>Data: {JSON.stringify(fetchValue.data)}</ListItem>
+        )}
+      </List>
+    </Stack>
+  );
+};

src/index.tsx

@@ -10,6 +10,11 @@ import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import { theme } from './theme';
 import BlindInferencePage from './BlindInferencePage';
+import { NillionClientProvider } from '@nillion/client-react-hooks';
+import { NamedNetwork } from '@nillion/client-core';
+import { createSignerFromKey } from '@nillion/client-payments';
+import { NillionClient } from '@nillion/client-vms';
+import { NextClient } from './NextClient';
 
 const router = createBrowserRouter([
   {
@@ -28,17 +33,39 @@ const router = createBrowserRouter([
         path: '/',
         element: <OperationsPage />,
       },
+      {
+        path: '/next',
+        element: <NextClient />,
+      },
     ],
   },
 ]);
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById('root') as HTMLElement,
 );
 
+const client = NillionClient.create({
+  network: NamedNetwork.enum.Devnet,
+  userSeed: 'thm',
+  nodeSeed: 'thm',
+
+  overrides: async () => {
+    const signer = await createSignerFromKey(
+      '9a975f567428d054f2bf3092812e6c42f901ce07d9711bc77ee2cd81101f42c5',
+    );
+    return {
+      signer,
+      endpoint: 'http://localhost:8080/nilchain-proxy',
+    };
+  },
+});
+
 root.render(
   <ThemeProvider theme={theme}>
-    <CssBaseline />
-    <RouterProvider router={router} />
-  </ThemeProvider>
+    <NillionClientProvider client={client}>
+      <CssBaseline />
+      <RouterProvider router={router} />
+    </NillionClientProvider>
+  </ThemeProvider>,
 );

tailwind.config.mjs

@@ -0,0 +1,8 @@
+// tailwind.config.js
+export default {
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [require("@tailwindcss/forms")],
+};

tsconfig.json

@@ -7,8 +7,8 @@
       "esnext"
     ],
     "jsx": "react",
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext"
+    "module": "ESNext",
+    "moduleResolution": "bundler"
   },
   "include": [
     "src"

webpack.config.js → webpack.config.mjs

@@ -1,10 +1,15 @@
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const path = require('path');
-const webpack = require('webpack');
-require('dotenv').config();
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import CopyWebpackPlugin from 'copy-webpack-plugin';
+import webpack from 'webpack';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 
-module.exports = {
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// require("dotenv").config();
+
+export default {
   mode: 'development',
   entry: './src/index.tsx',
   output: {
@@ -27,10 +32,8 @@ module.exports = {
     proxy: [
       {
         context: ['/nilchain-proxy'],
-        target: process.env.REACT_APP_NILLION_NILCHAIN_JSON_RPC,
+        target: 'http://localhost:48102',
         pathRewrite: { '^/nilchain-proxy': '' },
-        changeOrigin: true,
-        secure: false,
       },
     ],
   },
@@ -50,17 +53,22 @@ module.exports = {
   resolve: {
     extensions: ['.ts', '.tsx', '.js'],
     fallback: {
-      crypto: require.resolve('crypto-browserify'),
-      buffer: require.resolve('buffer'),
-      stream: require.resolve('stream-browserify'),
-      vm: require.resolve('vm-browserify'),
+      crypto: false,
+      buffer: false,
+      stream: false,
+      vm: false,
     },
   },
   module: {
     rules: [
       {
         test: /\.tsx?$/,
-        use: 'ts-loader',
+        use: {
+          loader: 'ts-loader',
+          options: {
+            transpileOnly: true,
+          },
+        },
         exclude: /node_modules/,
       },
       {