feat(rln-reactts): generate commitments

rln-reactts/craco.config.js

@@ -0,0 +1,25 @@
+// Thanks https://github.com/Emurgo/cardano-serialization-lib/issues/415
+
+module.exports = {
+  webpack: {
+    configure: (webpackConfig) => {
+      const wasmExtensionRegExp = /\.wasm$/;
+      webpackConfig.resolve.extensions.push(".wasm");
+      webpackConfig.experiments = {
+        asyncWebAssembly: false,
+        lazyCompilation: true,
+        syncWebAssembly: true,
+        topLevelAwait: true,
+      };
+      webpackConfig.module.rules.forEach((rule) => {
+        (rule.oneOf || []).forEach((oneOf) => {
+          if (oneOf.type === "asset/resource") {
+            oneOf.exclude.push(wasmExtensionRegExp);
+          }
+        });
+      });
+
+      return webpackConfig;
+    },
+  },
+};

rln-reactts/package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@mui/material": "^5.10.6",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -10,6 +13,8 @@
     "@types/node": "^16.11.59",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
+    "@waku/rln": "0.0.4",
+    "js-waku": "^0.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
@@ -17,10 +22,10 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
+    "eject": "craco eject"
   },
   "eslintConfig": {
     "extends": [
@@ -39,5 +44,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@craco/craco": "^6.4.5"
   }
 }

rln-reactts/src/App.css

@@ -1,32 +1,13 @@
 .App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
 }
 
 .App-header {
-  background-color: #282c34;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
 }
 
-.App-link {
-  color: #61dafb;
-}
 
 @keyframes App-logo-spin {
   from {

rln-reactts/src/App.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

rln-reactts/src/App.tsx

@@ -1,26 +1,66 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { useEffect, useState } from "react";
+import "./App.css";
+import * as rln from "@waku/rln";
+import type { RLNInstance, MembershipKey } from "@waku/rln/dist/rln.js";
+import { utils } from "js-waku";
+import Button from "@mui/material/Button";
 
 function App() {
+  const [rlnInstance, setRlnInstance] = useState<RLNInstance>();
+  const [membershipKey, setMembershipKey] = useState<MembershipKey>();
+  const [rlnKey, setRlnKey] = useState<string>();
+  const [rlnCommitment, setRlnCommitment] = useState<string>();
+
+  useEffect(() => {
+    if (rlnInstance) return;
+
+    (async () => {
+      const instance = await rln.create();
+      setRlnInstance(instance);
+    })();
+  });
+
+  useEffect(() => {
+    if (!membershipKey) return;
+
+    const _rlnKey = utils.bytesToHex(membershipKey.IDKey);
+    const _rlnCommitment = utils.bytesToHex(membershipKey.IDCommitment);
+
+    setRlnKey(_rlnKey);
+    setRlnCommitment(_rlnCommitment);
+  }, [membershipKey]);
+
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <h2>RLN Credentials:</h2>
+      <p>key: {rlnKey}</p>
+      <p>commitment: {rlnCommitment}</p>
+      <Generate rlnInstance={rlnInstance} setMembershipKey={setMembershipKey} />
     </div>
   );
 }
 
 export default App;
+
+interface GenerateProps {
+  rlnInstance?: RLNInstance;
+  setMembershipKey: (k: MembershipKey) => void;
+}
+
+function Generate(props: GenerateProps) {
+  const { rlnInstance, setMembershipKey } = props;
+
+  const onClick = async () => {
+    if (!rlnInstance) return;
+    const membershipKey = rlnInstance.generateMembershipKey();
+    setMembershipKey(membershipKey);
+  };
+
+  return (
+    <div>
+      <Button variant="contained" onClick={onClick} disabled={!rlnInstance}>
+        Generate RLN Credentials
+      </Button>
+    </div>
+  );
+}

rln-reactts/src/index.tsx

@@ -1,19 +1,13 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById("root") as HTMLElement
 );
 root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

rln-reactts/src/reportWebVitals.ts

@@ -1,15 +0,0 @@
-import { ReportHandler } from 'web-vitals';
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;