Demo UI

demo/interactive-demo/prover-ts/package.json

@@ -9,9 +9,13 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.7.1",
+    "css-loader": "^7.1.2",
+    "postcss-loader": "^8.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-loader-spinner": "^6.1.6",
+    "style-loader": "^4.0.0",
     "tlsn-js": "file:../../.."
   },
   "devDependencies": {
@@ -20,7 +24,12 @@
     "babel-loader": "^9.1.3",
     "copy-webpack-plugin": "^11.0.0",
     "html-webpack-plugin": "^5.5.0",
+    "postcss": "^8.4.49",
+    "postcss-preset-env": "^10.1.1",
+    "sass": "^1.82.0",
+    "sass-loader": "^16.0.4",
     "source-map-loader": "^5.0.0",
+    "tailwindcss": "^3.4.16",
     "ts-loader": "^9.4.2",
     "typescript": "^4.9.4",
     "webpack": "^5.75.0",

demo/interactive-demo/prover-ts/postcss.config.js

@@ -0,0 +1,4 @@
+const tailwindcss = require("tailwindcss");
+module.exports = {
+  plugins: ["postcss-preset-env", tailwindcss],
+};

demo/interactive-demo/prover-ts/src/app.scss

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

demo/interactive-demo/prover-ts/app.tsx → demo/interactive-demo/prover-ts/src/app.tsx

@@ -4,6 +4,7 @@ import * as Comlink from 'comlink';
 import { Watch } from 'react-loader-spinner';
 import { Prover as TProver } from 'tlsn-js';
 import { type Method } from 'tlsn-wasm';
+import './app.scss';
 
 const { init, Prover }: any = Comlink.wrap(
   new Worker(new URL('./worker.ts', import.meta.url)),
@@ -98,7 +99,6 @@ function App(): ReactElement {
       console.log('Start reveal:', reveal);
       await prover.reveal(reveal);
       console.timeEnd('reveal');
-
     } catch (error) {
       console.dir(error);
       console.error('Error during data reveal:', error);
@@ -114,50 +114,67 @@ function App(): ReactElement {
       received: transcript.recv,
     });
 
-    setResult('Unredacted data successfully revealed to Verifier. Check the Verifier\'s console output to see what exactly was shared and revealed.');
+    setResult(
+      "Unredacted data successfully revealed to Verifier. Check the Verifier's console output to see what exactly was shared and revealed.",
+    );
 
     setProcessing(false);
-
-
   }, [setResult, setProcessing]);
 
   return (
-    <div>
-      <h1>TLSNotary interactive prover demo</h1>
-      <div>
-        Before clicking the start button, make sure the{' '}
-        <i>interactive verifier</i> and the <i>web socket proxy</i> are running.
-        Check the <a href="README.md">README</a> for the details.
+    <div className="flex flex-col items-center justify-center w-full min-h-screen bg-gray-50 p-4">
+      <h1 className="text-4xl font-bold text-slate-500 mb-2">TLSNotary</h1>
+      <span className="text-lg text-gray-600 mb-4">
+        Interactive Prover Demo
+      </span>
+
+      <div className="text-center text-gray-700 mb-6">
+        Before clicking the <span className="font-semibold">Start</span> button,
+        make sure the <i>interactive verifier</i> and the{' '}
+        <i>web socket proxy</i> are running. Check the{' '}
+        <a href="README.md" className="text-blue-600 hover:underline">
+          README
+        </a>{' '}
+        for the details.
       </div>
 
-      <br />
-      <button onClick={!processing ? onClick : undefined} disabled={processing}>
+      <button
+        onClick={!processing ? onClick : undefined}
+        disabled={processing}
+        className={`px-6 py-2 rounded-lg font-medium text-white
+          ${processing ? 'bg-slate-400 cursor-not-allowed' : 'bg-slate-600 hover:bg-slate-700'}
+        `}
+      >
         Start Prover
       </button>
-      <br />
-      <div>
-        <b>Proof: </b>
+
+      <div className="mt-6 w-full max-w-3xl text-center">
+        <b className="text-lg font-medium text-gray-800">Proof: </b>
         {!processing && !result ? (
-          <i>not started yet</i>
+          <i className="text-gray-500">Not started yet</i>
         ) : !result ? (
-          <>
-            Proving data from swapi...
+          <div className="flex flex-col items-center justify-center">
+            <p className="text-gray-700 mb-2">Proving data from swapi...</p>
             <Watch
               visible={true}
               height="40"
               width="40"
               radius="48"
-              color="#000000"
+              color="#4A5568"
               ariaLabel="watch-loading"
               wrapperStyle={{}}
               wrapperClass=""
             />
-            Open <i>Developer tools</i> to follow progress
-          </>
+            <p className="text-sm text-gray-500 mt-2">
+              Open <i>Developer Tools</i> to follow progress
+            </p>
+          </div>
         ) : (
-          <>
-            <pre>{JSON.stringify(result, null, 2)}</pre>
-          </>
+          <div className="bg-gray-100 border border-gray-300 p-4 rounded-lg mt-4">
+            <pre className="text-left text-sm text-gray-800 whitespace-pre-wrap overflow-auto">
+              {JSON.stringify(result, null, 2)}
+            </pre>
+          </div>
         )}
       </div>
     </div>

demo/interactive-demo/prover-ts/tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        primary: '#243f5f',
+      },
+    },
+  },
+  plugins: [],
+};

demo/interactive-demo/prover-ts/tsconfig.json

@@ -20,7 +20,7 @@
     "jsx": "react"
   },
   "include": [
-    "app.tsx",
-    "worker.ts"
+    "src/app.tsx",
+    "src/worker.ts"
   ]
-}
+}

demo/interactive-demo/prover-ts/webpack.js

@@ -27,7 +27,7 @@ var options = {
   ],
   mode: 'development',
   entry: {
-    app: path.join(__dirname, 'app.tsx'),
+    app: path.join(__dirname, 'src', 'app.tsx'),
   },
   output: {
     filename: '[name].bundle.js',
@@ -51,6 +51,9 @@ var options = {
         test: /\.(ts|tsx)$/,
         exclude: /node_modules/,
         use: [
+          {
+            loader: 'source-map-loader',
+          },
           {
             loader: require.resolve('ts-loader'),
           },
@@ -68,13 +71,41 @@ var options = {
         ],
         exclude: /node_modules/,
       },
+      {
+        // look for .css or .scss files
+        test: /\.(css|scss)$/,
+        // in the `web` directory
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: { importLoaders: 1 },
+          },
+          {
+            loader: 'postcss-loader',
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true,
+            },
+          },
+        ],
+      },
     ],
   },
   resolve: {
     alias: alias,
     extensions: fileExtensions
       .map((extension) => '.' + extension)
       .concat(['.js', '.jsx', '.ts', '.tsx', '.css']),
+    fallback: {
+      crypto: require.resolve('crypto-browserify'),
+      stream: require.resolve('stream-browserify'),
+      vm: require.resolve('vm-browserify'),
+    },
   },
   plugins: [
     new CopyWebpackPlugin({
@@ -86,16 +117,14 @@ var options = {
         },
       ],
     }),
-    new CopyWebpackPlugin({
-      patterns: [
-        { from: '../README.md', to: 'README.md' },
-      ],
-    }),
     new HtmlWebpackPlugin({
       template: path.join(__dirname, 'index.ejs'),
       filename: 'index.html',
       cache: false,
     }),
+    new webpack.ProvidePlugin({
+      process: 'process/browser',
+    }),
     new webpack.ProvidePlugin({
       Buffer: ['buffer', 'Buffer'],
     }),
@@ -105,13 +134,16 @@ var options = {
   //  - https://github.com/GoogleChromeLabs/wasm-bindgen-rayon#setting-up
   //  - https://web.dev/i18n/en/coop-coep/
   devServer: {
-    port: 3456,
+    port: 8080,
     host: 'localhost',
     hot: true,
     headers: {
       'Cross-Origin-Embedder-Policy': 'require-corp',
       'Cross-Origin-Opener-Policy': 'same-origin',
     },
+    client: {
+      overlay: false,
+    },
   },
 };
 

demo/react-ts-webpack/package.json

@@ -11,9 +11,16 @@
   "license": "ISC",
   "dependencies": {
     "comlink": "^4.4.1",
+    "css-loader": "^7.1.2",
+    "postcss": "^8.4.49",
+    "postcss-loader": "^8.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-loader-spinner": "^6.1.6",
+    "sass": "^1.83.1",
+    "sass-loader": "^16.0.4",
+    "style-loader": "^4.0.0",
+    "tailwindcss": "^3.4.17",
     "tlsn-js": "../../"
   },
   "devDependencies": {
@@ -23,6 +30,7 @@
     "copy-webpack-plugin": "^11.0.0",
     "crypto-browserify": "^3.12.0",
     "html-webpack-plugin": "^5.5.0",
+    "postcss-preset-env": "^10.1.3",
     "source-map-loader": "^5.0.0",
     "stream-browserify": "^3.0.0",
     "ts-loader": "^9.4.2",

demo/react-ts-webpack/postcss.config.js

@@ -0,0 +1,4 @@
+const tailwindcss = require("tailwindcss");
+module.exports = {
+  plugins: ["postcss-preset-env", tailwindcss],
+};

demo/react-ts-webpack/src/app.scss

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;