feat: adding styles to the demo

.prettierignore

@@ -15,6 +15,8 @@ pnpm-lock.yaml
 **/tmp/
 **/.parcel-cache/
 packages/app/src/static/
+packages/demo/src/static/
+packages/demo/scripts/
 packages/app/src/manifest/
 CHANGELOG.md
 .eslintignore

packages/app/package.json

@@ -98,7 +98,6 @@
     "@fortawesome/free-brands-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@interep/identity": "^0.3.0",
     "@metamask/providers": "^13.1.0",
     "@mui/icons-material": "^5.14.16",
     "@mui/material": "^5.14.16",

packages/demo/.eslintignore

@@ -1,2 +1,3 @@
 dist/
 node_modules/
+public/docs

packages/demo/package.json

@@ -18,11 +18,17 @@
     "@cryptkeeperzk/providers": "workspace:^",
     "@cryptkeeperzk/semaphore-identity": "^3.10.3",
     "@cryptkeeperzk/types": "workspace:^",
+    "@mui/icons-material": "^5.14.14",
+    "@mui/material": "^5.14.13",
+    "@mui/styles": "^5.14.14",
     "bigint-conversion": "^2.4.2",
+    "classnames": "^2.3.2",
     "dotenv": "^16.3.1",
     "ethers": "^6.8.0",
+    "prism-react-renderer": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-live": "^4.1.5",
     "react-toastify": "^9.1.3"
   },
   "devDependencies": {

packages/demo/public/docs/addVC.ts

@@ -0,0 +1,31 @@
+import { RPCExternalAction, initializeCryptKeeper } from "@cryptkeeperzk/providers";
+
+const client = initializeCryptKeeper();
+
+const addVerifiableCredential = async (): Promise<void> => {
+  const mockVerifiableCredential = {
+    context: ["https://www.w3.org/2018/credentials/v1"],
+    id: "http://example.edu/credentials/1872",
+    type: ["VerifiableCredential", "UniversityDegreeCredential"],
+    issuer: {
+      id: "did:example:76e12ec712ebc6f1c221ebfeb1f",
+    },
+    issuanceDate: new Date("2010-01-01T19:23:24Z"),
+    credentialSubject: {
+      id: "did:example:ebfeb1f712ebc6f1c276e12ec21",
+      claims: {
+        type: "BachelorDegree",
+        name: "Bachelor of Science and Arts",
+      },
+    },
+  }; // Example
+
+  const verifiableCredentialJson = JSON.stringify(mockVerifiableCredential);
+
+  await client?.request({
+    method: RPCExternalAction.ADD_VERIFIABLE_CREDENTIAL,
+    payload: verifiableCredentialJson,
+  });
+};
+
+export { addVerifiableCredential };

packages/demo/public/docs/connect.ts

@@ -0,0 +1,9 @@
+import { initializeCryptKeeper } from "@cryptkeeperzk/providers";
+
+const client = initializeCryptKeeper();
+
+const connect = async (isChangeIdentity = false): Promise<void> => {
+  await client?.connect(isChangeIdentity);
+};
+
+export { connect };

packages/demo/public/docs/generateGroupMerkleProof.ts

@@ -0,0 +1,14 @@
+import { RPCExternalAction, initializeCryptKeeper } from "@cryptkeeperzk/providers";
+
+const client = initializeCryptKeeper();
+
+const generateGroupMerkleProof = async (): Promise<void> => {
+  await client?.request({
+    method: RPCExternalAction.GENERATE_GROUP_MERKLE_PROOF,
+    payload: {
+      groupId: process.env.TEST_GROUP_ID!,
+    },
+  });
+};
+
+export { generateGroupMerkleProof };

packages/demo/public/docs/generateVP.ts

@@ -0,0 +1,16 @@
+import { RPCExternalAction, initializeCryptKeeper } from "@cryptkeeperzk/providers";
+
+const client = initializeCryptKeeper();
+
+const verifiablePresentationRequest = {
+  request: "Please provide your University Degree Credential AND Drivers License Credential.",
+}; // Example
+
+const generateVerifiablePresentationRequest = async (): Promise<void> => {
+  await client?.request({
+    method: RPCExternalAction.GENERATE_VERIFIABLE_PRESENTATION,
+    payload: verifiablePresentationRequest,
+  });
+};
+
+export { generateVerifiablePresentationRequest };

packages/demo/public/docs/getConnectedIdentityMetadata.ts

@@ -0,0 +1,11 @@
+import { RPCExternalAction, initializeCryptKeeper } from "@cryptkeeperzk/providers";
+
+const client = initializeCryptKeeper();
+
+const getConnectedIdentityMetadata = async (): Promise<void> => {
+  await client?.request({
+    method: RPCExternalAction.GET_CONNECTED_IDENTITY_DATA,
+  });
+};
+
+export { getConnectedIdentityMetadata };

packages/demo/public/docs/importIdentity.ts

@@ -0,0 +1,20 @@
+import { RPCExternalAction, initializeCryptKeeper } from "@cryptkeeperzk/providers";
+
+const client = initializeCryptKeeper();
+
+interface IImportIdentityParams {
+  trapdoor: string;
+  nullifier: string;
+}
+
+const importIdentity = async ({ trapdoor, nullifier }: IImportIdentityParams): Promise<void> => {
+  await client?.request({
+    method: RPCExternalAction.IMPORT_IDENTITY,
+    payload: {
+      trapdoor,
+      nullifier,
+    },
+  });
+};
+
+export { importIdentity };

packages/demo/public/docs/joinGroup.ts

@@ -0,0 +1,16 @@
+import { RPCExternalAction, initializeCryptKeeper } from "@cryptkeeperzk/providers";
+
+const client = initializeCryptKeeper();
+
+const joinGroup = async (): Promise<void> => {
+  await client?.request({
+    method: RPCExternalAction.JOIN_GROUP,
+    payload: {
+      groupId: process.env.TEST_GROUP_ID!,
+      apiKey: process.env.TEST_GROUP_API_KEY,
+      inviteCode: process.env.TEST_GROUP_INVITE_CODE,
+    },
+  });
+};
+
+export { joinGroup };

packages/demo/public/docs/rateLimitingNullifier.ts

@@ -0,0 +1,55 @@
+import { initializeCryptKeeper, RPCExternalAction } from "@cryptkeeperzk/providers";
+
+import { MerkleProofType } from "@src/types";
+
+import type { IMerkleProofArtifacts } from "@cryptkeeperzk/types";
+
+const client = initializeCryptKeeper();
+
+interface IGenerateRLNProofParams {
+  proofType: MerkleProofType;
+  rlnIdentifier: string;
+  message: string;
+  messageLimit: number;
+  messageId: number;
+  epoch: string;
+}
+
+const genRLNProof = async ({
+  proofType, // STORAGE_ADDRESS or ARTIFACTS
+  rlnIdentifier = "1", // Example
+  message = "Hello RLN", // Example
+  messageLimit = 1, // Example
+  messageId = 0, // Example
+  epoch = Date.now().toString(), // Example
+}: IGenerateRLNProofParams): Promise<void> => {
+  let merkleProofSource: string | IMerkleProofArtifacts = `<HTTP/S_LINK>`;
+
+  if (proofType === MerkleProofType.ARTIFACTS) {
+    const groupIdentityCommitments: string[] = [
+      "80877997493538069559805206308114670727110736600665804098123416503841828789",
+      "2661044082233456058396187727098375728375921643200540748303695324136976348253",
+      "6096293672069786665857538772479257078181838217364432218857495446476026762057",
+    ]; // Example
+
+    merkleProofSource = {
+      leaves: groupIdentityCommitments,
+      depth: 15,
+      leavesPerNode: 2,
+    };
+  }
+
+  const generatedProof = await client?.request({
+    method: RPCExternalAction.GENERATE_RLN_PROOF,
+    payload: {
+      rlnIdentifier,
+      message,
+      messageId,
+      messageLimit,
+      epoch,
+      merkleProofSource,
+    },
+  });
+};
+
+export { genRLNProof };

packages/demo/public/docs/revealIdentityCommitment.ts

@@ -0,0 +1,11 @@
+import { RPCExternalAction, initializeCryptKeeper } from "@cryptkeeperzk/providers";
+
+const client = initializeCryptKeeper();
+
+const revealIdentityCommitment = async (): Promise<void> => {
+  await client?.request({
+    method: RPCExternalAction.REVEAL_CONNECTED_IDENTITY_COMMITMENT,
+  });
+};
+
+export { revealIdentityCommitment };

packages/demo/public/docs/semaphore.ts

@@ -0,0 +1,47 @@
+import { RPCExternalAction, initializeCryptKeeper } from "@cryptkeeperzk/providers";
+import { encodeBytes32String } from "ethers";
+
+import { MerkleProofType } from "@src/types";
+
+import type { IMerkleProofArtifacts } from "@cryptkeeperzk/types";
+
+const client = initializeCryptKeeper();
+
+interface IGenerateSemaphoreProofParams {
+  proofType: MerkleProofType;
+  externalNullifier: string;
+  signal: string;
+}
+
+const genSemaphoreProof = async ({
+  proofType,
+  externalNullifier = encodeBytes32String("voting-1"), // Example,
+  signal = encodeBytes32String("hello-world"), // Example
+}: IGenerateSemaphoreProofParams): Promise<void> => {
+  let merkleProofSource: string | IMerkleProofArtifacts = `<HTTP/S_LINK>`;
+
+  if (proofType === MerkleProofType.ARTIFACTS) {
+    const exampleGroupIdentityCommitments: string[] = [
+      "80877997493538069559805206308114670727110736600665804098123416503841828789",
+      "2661044082233456058396187727098375728375921643200540748303695324136976348253",
+      "6096293672069786665857538772479257078181838217364432218857495446476026762057",
+    ]; // Example
+
+    merkleProofSource = {
+      leaves: exampleGroupIdentityCommitments,
+      depth: 20,
+      leavesPerNode: 2,
+    };
+  }
+
+  const generatedProof = await client?.request({
+    method: RPCExternalAction.GENERATE_SEMAPHORE_PROOF,
+    payload: {
+      externalNullifier,
+      signal,
+      merkleProofSource,
+    },
+  });
+};
+
+export { genSemaphoreProof };

packages/demo/public/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <title>CryptKeeper Extension demo</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="initial-scale=1, width=device-width" />
   </head>
 
   <body>

packages/demo/src/components/ActionBox/ActionBox.tsx

@@ -0,0 +1,51 @@
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import { useTheme } from "@mui/styles";
+import { themes } from "prism-react-renderer";
+import { LiveProvider, LiveEditor } from "react-live";
+
+import { useGlobalStyles } from "@src/styles";
+
+type actionFnRequiredOption<T = unknown, U = unknown> = (option: T) => U;
+type actionFnOptionalOption<T = unknown, U = unknown> = (option?: T) => U;
+
+interface IActionBox<T = unknown, U = void> {
+  title: string;
+  code: string;
+  option?: T;
+  testId?: string;
+  onClick: actionFnOptionalOption<T, U> | actionFnRequiredOption<T, U>;
+}
+
+export const ActionBox = <T, U>({
+  title,
+  option = undefined,
+  code,
+  testId = "",
+  onClick,
+}: IActionBox<T, U>): JSX.Element => {
+  const theme = useTheme();
+  const classes = useGlobalStyles(theme);
+
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", p: 3, flexGrow: 1 }}>
+      <Box>
+        <Button
+          data-testid={testId}
+          sx={{ textTransform: "none", mb: 1 }}
+          type="submit"
+          variant="contained"
+          onClick={() => onClick(option as T)}
+        >
+          {title}
+        </Button>
+      </Box>
+
+      <Box className={classes.codePreview}>
+        <LiveProvider disabled enableTypeScript noInline code={code}>
+          <LiveEditor theme={themes.vsDark} />
+        </LiveProvider>
+      </Box>
+    </Box>
+  );
+};

packages/demo/src/components/ActionBox/index.ts

@@ -0,0 +1,3 @@
+import { ActionBox } from "./ActionBox";
+
+export default ActionBox;

packages/demo/src/components/Bandada/Bandada.tsx

@@ -1,24 +1,36 @@
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+
+import { useCodeExample } from "@src/hooks/useCodeExample";
+import { useGlobalStyles } from "@src/styles";
+
+import ActionBox from "../ActionBox";
+
 interface IBandadaProps {
   joinGroup: () => Promise<void>;
   generateGroupMerkleProof: () => Promise<void>;
 }
 
-export const Bandada = ({ joinGroup, generateGroupMerkleProof }: IBandadaProps): JSX.Element => (
-  <div>
-    <h2>Generate bandada group proof</h2>
-
-    <div>
-      <button type="button" onClick={generateGroupMerkleProof}>
-        Generate Group Merkle Proof
-      </button>
-    </div>
-
-    <br />
-
-    <div>
-      <button type="button" onClick={joinGroup}>
-        Join test group
-      </button>
-    </div>
-  </div>
-);
+export const Bandada = ({ joinGroup, generateGroupMerkleProof }: IBandadaProps): JSX.Element => {
+  const classes = useGlobalStyles();
+
+  const { code: joinGroupCode } = useCodeExample("joinGroup.ts");
+  const { code: generateGroupMerkleProofCode } = useCodeExample("generateGroupMerkleProof.ts");
+
+  return (
+    <Box
+      className={classes.popup}
+      sx={{ p: 3, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}
+    >
+      <Typography variant="h6">Integration with Bandada service</Typography>
+
+      <ActionBox
+        code={generateGroupMerkleProofCode}
+        title="Generate Group Merkle Proof"
+        onClick={generateGroupMerkleProof}
+      />
+
+      <ActionBox code={joinGroupCode} title="Join test group" onClick={joinGroup} />
+    </Box>
+  );
+};