diff --git a/examples/rln-js/package-lock.json b/examples/rln-js/package-lock.json index 1ba07e2..a9de7fe 100644 --- a/examples/rln-js/package-lock.json +++ b/examples/rln-js/package-lock.json @@ -10,7 +10,8 @@ "dependencies": { "next": "13.5.6", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "zustand": "^4.4.4" }, "devDependencies": { "@types/node": "^20", @@ -411,13 +412,13 @@ "version": "15.7.9", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.9.tgz", "integrity": "sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g==", - "dev": true + "devOptional": true }, "node_modules/@types/react": { "version": "18.2.31", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.31.tgz", "integrity": "sha512-c2UnPv548q+5DFh03y8lEDeMfDwBn9G3dRwfkrxQMo/dOtRHUUO57k6pHvBIfH/VF4Nh+98mZ5aaSe+2echD5g==", - "dev": true, + "devOptional": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -437,7 +438,7 @@ "version": "0.16.5", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.5.tgz", "integrity": "sha512-s/FPdYRmZR8SjLWGMCuax7r3qCWQw9QKHzXVukAuuIJkXkDRwp+Pu5LMIVFi0Fxbav35WURicYr8u1QsoybnQw==", - "dev": true + "devOptional": true }, "node_modules/@typescript-eslint/parser": { "version": "6.9.0", @@ -1114,7 +1115,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", - "dev": true + "devOptional": true }, "node_modules/damerau-levenshtein": { "version": "1.0.8", @@ -4210,6 +4211,14 @@ "punycode": "^2.1.0" } }, + "node_modules/use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -4351,6 +4360,33 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zustand": { + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.4.4.tgz", + "integrity": "sha512-5UTUIAiHMNf5+mFp7/AnzJXS7+XxktULFN0+D1sCiZWyX7ZG+AQpqs2qpYrynRij4QvoDdCD+U+bmg/cG3Ucxw==", + "dependencies": { + "use-sync-external-store": "1.2.0" + }, + "engines": { + "node": ">=12.7.0" + }, + "peerDependencies": { + "@types/react": ">=16.8", + "immer": ">=9.0", + "react": ">=16.8" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "immer": { + "optional": true + }, + "react": { + "optional": true + } + } } }, "dependencies": { @@ -4602,13 +4638,13 @@ "version": "15.7.9", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.9.tgz", "integrity": "sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g==", - "dev": true + "devOptional": true }, "@types/react": { "version": "18.2.31", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.31.tgz", "integrity": "sha512-c2UnPv548q+5DFh03y8lEDeMfDwBn9G3dRwfkrxQMo/dOtRHUUO57k6pHvBIfH/VF4Nh+98mZ5aaSe+2echD5g==", - "dev": true, + "devOptional": true, "requires": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -4628,7 +4664,7 @@ "version": "0.16.5", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.5.tgz", "integrity": "sha512-s/FPdYRmZR8SjLWGMCuax7r3qCWQw9QKHzXVukAuuIJkXkDRwp+Pu5LMIVFi0Fxbav35WURicYr8u1QsoybnQw==", - "dev": true + "devOptional": true }, "@typescript-eslint/parser": { "version": "6.9.0", @@ -5080,7 +5116,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", - "dev": true + "devOptional": true }, "damerau-levenshtein": { "version": "1.0.8", @@ -7297,6 +7333,12 @@ "punycode": "^2.1.0" } }, + "use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "requires": {} + }, "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -7402,6 +7444,14 @@ "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==", "dev": true + }, + "zustand": { + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.4.4.tgz", + "integrity": "sha512-5UTUIAiHMNf5+mFp7/AnzJXS7+XxktULFN0+D1sCiZWyX7ZG+AQpqs2qpYrynRij4QvoDdCD+U+bmg/cG3Ucxw==", + "requires": { + "use-sync-external-store": "1.2.0" + } } } } diff --git a/examples/rln-js/package.json b/examples/rln-js/package.json index defa9dd..098bc10 100644 --- a/examples/rln-js/package.json +++ b/examples/rln-js/package.json @@ -9,19 +9,20 @@ "lint": "next lint" }, "dependencies": { + "next": "13.5.6", "react": "^18", "react-dom": "^18", - "next": "13.5.6" + "zustand": "^4.4.4" }, "devDependencies": { - "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10", + "eslint": "^8", + "eslint-config-next": "13.5.6", "postcss": "^8", "tailwindcss": "^3", - "eslint": "^8", - "eslint-config-next": "13.5.6" + "typescript": "^5" } } diff --git a/examples/rln-js/src/app/home/components/Blockchain.tsx b/examples/rln-js/src/app/home/components/Blockchain.tsx new file mode 100644 index 0000000..b4a32cf --- /dev/null +++ b/examples/rln-js/src/app/home/components/Blockchain.tsx @@ -0,0 +1,24 @@ +import { Block, BlockTypes } from "@/components/Block"; +import { Button } from "@/components/Button"; +import { Subtitle } from "@/components/Subtitle"; + +export const Blockchain: React.FunctionComponent<{}> = () => { + return ( + + + Contract + + + + +

Your address

+ Not loaded yet + + + +

Latest membership ID on contract

+ Not loaded yet + + + ); +}; diff --git a/examples/rln-js/src/app/home/components/Header.tsx b/examples/rln-js/src/app/home/components/Header.tsx new file mode 100644 index 0000000..348b50c --- /dev/null +++ b/examples/rln-js/src/app/home/components/Header.tsx @@ -0,0 +1,19 @@ +import { Block, BlockTypes } from "@/components/Block"; +import { Title } from "@/components/Title"; +import { Button } from "@/components/Button"; +import { Status } from "@/components/Status"; +import { useStore } from "@/store"; + +export const Header: React.FunctionComponent<{}> = () => { + const { appStatus } = useStore(); + + return ( + <> + + Waku RLN + + + + + ); +}; diff --git a/examples/rln-js/src/app/home/components/Keystore.tsx b/examples/rln-js/src/app/home/components/Keystore.tsx new file mode 100644 index 0000000..8908416 --- /dev/null +++ b/examples/rln-js/src/app/home/components/Keystore.tsx @@ -0,0 +1,49 @@ +import { Block, BlockTypes } from "@/components/Block"; +import { Button } from "@/components/Button"; +import { Status } from "@/components/Status"; +import { Subtitle } from "@/components/Subtitle"; +import { useStore } from "@/store"; + +export const Keystore: React.FunctionComponent<{}> = () => { + const { keystoreStatus } = useStore(); + + return ( + + + Keystore +
+ + +
+ + + + + + + + + + +

Generate new credentials from wallet

+ + + + + +

Read from Keystore

+ + + + + ); +}; diff --git a/examples/rln-js/src/app/home/components/KeystoreDetails.tsx b/examples/rln-js/src/app/home/components/KeystoreDetails.tsx new file mode 100644 index 0000000..a7135ad --- /dev/null +++ b/examples/rln-js/src/app/home/components/KeystoreDetails.tsx @@ -0,0 +1,37 @@ +import { Block, BlockTypes } from "@/components/Block"; + +export const KeystoreDetails: React.FunctionComponent<{}> = () => { + return ( + + +

Keystore

+ none + + + +

Membership ID

+ none + + + +

Secret Hash

+ none + + + +

Commitment

+ none + + + +

Nullifier

+ none + + + +

Trapdoor

+ none + + + ); +}; diff --git a/examples/rln-js/src/app/home/components/Waku.tsx b/examples/rln-js/src/app/home/components/Waku.tsx new file mode 100644 index 0000000..c2826ed --- /dev/null +++ b/examples/rln-js/src/app/home/components/Waku.tsx @@ -0,0 +1,71 @@ +import { Block, BlockTypes } from "@/components/Block"; +import { Subtitle } from "@/components/Subtitle"; +import { Status } from "@/components/Status"; +import { Button } from "@/components/Button"; +import { useStore } from "@/store"; + +export const Waku: React.FunctionComponent<{}> = () => { + const { wakuStatus } = useStore(); + + return ( + + Waku + + + + + + + + + + + + + + + + + + + + + + + + +

Messages

+ + + ); +}; diff --git a/examples/rln-js/src/app/home/page.tsx b/examples/rln-js/src/app/home/page.tsx new file mode 100644 index 0000000..9be4c13 --- /dev/null +++ b/examples/rln-js/src/app/home/page.tsx @@ -0,0 +1,18 @@ +"use client"; +import { Header } from "./components/Header"; +import { Waku } from "./components/Waku"; +import { Keystore } from "./components/Keystore"; +import { Blockchain } from "./components/Blockchain"; +import { KeystoreDetails } from "./components/KeystoreDetails"; + +export default function Home() { + return ( +
+
+ + + + +
+ ); +} diff --git a/examples/rln-js/src/app/layout.tsx b/examples/rln-js/src/app/layout.tsx index 323bd9c..a3288c4 100644 --- a/examples/rln-js/src/app/layout.tsx +++ b/examples/rln-js/src/app/layout.tsx @@ -5,8 +5,8 @@ import "./globals.css"; const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "RLN Example", + description: "Showcases RLN, Keystore and generation of proofs", }; export default function RootLayout({ diff --git a/examples/rln-js/src/app/old/page.tsx b/examples/rln-js/src/app/old/page.tsx new file mode 100644 index 0000000..8e9f3c5 --- /dev/null +++ b/examples/rln-js/src/app/old/page.tsx @@ -0,0 +1,113 @@ +import Image from "next/image"; + +export default function Home() { + return ( +
+
+

+ Get started by editing  + src/app/page.tsx +

+
+ + By{" "} + Vercel Logo + +
+
+ +
+ Next.js Logo +
+ +
+ +

+ Docs{" "} + + -> + +

+

+ Find in-depth information about Next.js features and API. +

+ + + +

+ Learn{" "} + + -> + +

+

+ Learn about Next.js in an interactive course with quizzes! +

+ + + +

+ Templates{" "} + + -> + +

+

+ Explore the Next.js 13 playground. +

+ + + +

+ Deploy{" "} + + -> + +

+

+ Instantly deploy your Next.js site to a shareable URL with Vercel. +

+ +
+
+ ); +} diff --git a/examples/rln-js/src/app/page.tsx b/examples/rln-js/src/app/page.tsx index 8e9f3c5..0763717 100644 --- a/examples/rln-js/src/app/page.tsx +++ b/examples/rln-js/src/app/page.tsx @@ -1,113 +1,3 @@ -import Image from "next/image"; +import Home from "@/app/home/page"; -export default function Home() { - return ( -
-
-

- Get started by editing  - src/app/page.tsx -

-
- - By{" "} - Vercel Logo - -
-
- -
- Next.js Logo -
- -
- -

- Docs{" "} - - -> - -

-

- Find in-depth information about Next.js features and API. -

- - - -

- Learn{" "} - - -> - -

-

- Learn about Next.js in an interactive course with quizzes! -

- - - -

- Templates{" "} - - -> - -

-

- Explore the Next.js 13 playground. -

- - - -

- Deploy{" "} - - -> - -

-

- Instantly deploy your Next.js site to a shareable URL with Vercel. -

- -
-
- ); -} +export default Home; diff --git a/examples/rln-js/src/components/Block.tsx b/examples/rln-js/src/components/Block.tsx new file mode 100644 index 0000000..5b33c4f --- /dev/null +++ b/examples/rln-js/src/components/Block.tsx @@ -0,0 +1,29 @@ +export enum BlockTypes { + FlexHorizontal = "flex-horizontal", +} + +type BlockProps = { + children: any; + top?: string; + bottom?: string; + type?: BlockTypes; + className?: string; +}; + +export const Block: React.FunctionComponent = (props) => { + const flexClassNames = + props.type === BlockTypes.FlexHorizontal + ? "items-center justify-between lg:flex" + : ""; + const restClassNames = props.className || ""; + + return ( +
+ {props.children} +
+ ); +}; diff --git a/examples/rln-js/src/components/Button.tsx b/examples/rln-js/src/components/Button.tsx new file mode 100644 index 0000000..a062806 --- /dev/null +++ b/examples/rln-js/src/components/Button.tsx @@ -0,0 +1,17 @@ +type ButtonProps = { + children: any; + top?: string; + left?: string; + onClick?: (e?: any) => void; +}; + +export const Button: React.FunctionComponent = (props) => ( + +); diff --git a/examples/rln-js/src/components/Status.tsx b/examples/rln-js/src/components/Status.tsx new file mode 100644 index 0000000..180a00c --- /dev/null +++ b/examples/rln-js/src/components/Status.tsx @@ -0,0 +1,13 @@ +type StatusProps = { + text: string; + mark: string; +}; + +export const Status: React.FunctionComponent = (props) => ( +

+ {props.text}:{" "} + + {props.mark} + +

+); diff --git a/examples/rln-js/src/components/Subtitle.tsx b/examples/rln-js/src/components/Subtitle.tsx new file mode 100644 index 0000000..081b06f --- /dev/null +++ b/examples/rln-js/src/components/Subtitle.tsx @@ -0,0 +1,8 @@ +type SubtitleProps = { + children: any; + className?: string; +}; + +export const Subtitle: React.FunctionComponent = (props) => ( +

{props.children}

+); diff --git a/examples/rln-js/src/components/Title.tsx b/examples/rln-js/src/components/Title.tsx new file mode 100644 index 0000000..59d87d2 --- /dev/null +++ b/examples/rln-js/src/components/Title.tsx @@ -0,0 +1,8 @@ +type TitleProps = { + children: any; + className?: string; +}; + +export const Title: React.FunctionComponent = (props) => ( +

{props.children}

+); diff --git a/examples/rln-js/src/store/index.ts b/examples/rln-js/src/store/index.ts new file mode 100644 index 0000000..0a14faa --- /dev/null +++ b/examples/rln-js/src/store/index.ts @@ -0,0 +1,25 @@ +import { create } from "zustand"; + +type StoreResult = { + appStatus: string; + setAppStatus: (v: string) => void; + keystoreStatus: string; + setKeystoreStatus: (v: string) => void; + wakuStatus: string; + setWakuStatus: (v: string) => void; +}; + +const DEFAULT_VALUE = "none"; + +export const useStore = create((set) => ({ + appStatus: DEFAULT_VALUE, + setAppStatus: (v: string) => set((state) => ({ ...state, appStatus: v })), + + keystoreStatus: DEFAULT_VALUE, + setKeystoreStatus: (v: string) => + set((state) => ({ ...state, keystoreStatus: v })), + + wakuStatus: DEFAULT_VALUE, + setWakuStatus: (v: string) => + set((state) => ({ ...state, keystoreStatus: v })), +}));