fix: some of requested changes

CryptKeeperZK · Oct 23, 2023 · 02d904d · 02d904d
1 parent 80dbb26
commit 02d904d
Show file tree

Hide file tree

Showing 28 changed files with 637 additions and 732 deletions.
diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -18,9 +18,9 @@
     "@cryptkeeperzk/providers": "workspace:^",
     "@cryptkeeperzk/semaphore-identity": "^3.10.3",
     "@cryptkeeperzk/types": "workspace:^",
-    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@mui/icons-material": "^5.14.14",
     "@mui/material": "^5.14.13",
-    "@parcel/transformer-sass": "^2.10.0",
+    "@mui/styles": "^5.14.14",
     "bigint-conversion": "^2.4.2",
     "classnames": "^2.3.2",
     "dotenv": "^16.3.1",

diff --git a/packages/demo/src/components/ActionBox/ActionBox.tsx b/packages/demo/src/components/ActionBox/ActionBox.tsx
@@ -1,7 +1,6 @@
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import { useState, type MouseEvent as ReactMouseEvent, useCallback } from "react";
-import { CopyBlock, irBlack } from "react-code-blocks";
+import { CopyBlock, vs2015 } from "react-code-blocks";
 
 type actionFnRequiredOption<T = unknown, U = unknown> = (option: T) => U;
 type actionFnOptionalOption<T = unknown, U = unknown> = (option?: T) => U;
@@ -14,53 +13,22 @@ interface IActionBox<T = unknown, U = unknown> {
   onClick: actionFnOptionalOption<T, U> | actionFnRequiredOption<T, U>;
 }
 
-export const ActionBox = <T, U>({
-  title,
-  option,
-  code,
-  testId = "",
-  onClick
-}: IActionBox<T, U>): JSX.Element => {
-  const [isShowCode, setIsShowCode] = useState(false);
-
-  const onShowCode = useCallback(
-    (event: ReactMouseEvent) => {
-      event.stopPropagation();
-      setIsShowCode((show) => !show);
-    },
-    [setIsShowCode],
-  );
-
-  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)}
-        >
-          {title}
-        </Button>
-
-        <Button
-          placeholder="show-code"
-          sx={{ textTransform: "none", mb: 1 }}
-          title="show-code"
-          type="button"
-          variant="text"
-          onClick={onShowCode}
-        >
-          &lt;/&gt;
-        </Button>
-      </Box>
-
-      {isShowCode && (
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
-        <CopyBlock codeBlock showLineNumbers wrapLines language="typescript" text={code} theme={irBlack} />
-      )}
+export const ActionBox = <T, U>({ title, option, code, testId = "", onClick }: IActionBox<T, U>): JSX.Element => (
+  <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)}
+      >
+        {title}
+      </Button>
     </Box>
-  );
-};
+
+    {/* // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error */}
+    <CopyBlock codeBlock showLineNumbers wrapLines language="typescript" text={code} theme={vs2015} />
+  </Box>
+);
diff --git a/packages/demo/src/components/Bandada/Bandada.tsx b/packages/demo/src/components/Bandada/Bandada.tsx
@@ -1,58 +1,35 @@
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 
+import { useGlobalStyles } from "@src/styles";
+
 import ActionBox from "../ActionBox";
 
+import { GENERATE_MERKLE_TREE_CODE, JOIN_GROUP_CODE } from "./codeExported";
+
 interface IBandadaProps {
   joinGroup: () => Promise<void>;
   generateGroupMerkleProof: () => Promise<void>;
 }
 
-const GENERATE_MERKLE_TREE_CODE = `import { initializeCryptKeeper } from "@cryptkeeperzk/providers";
-
-const client = initializeCryptKeeper();
-
-const connect = (async () => {
-  await client?.request({
-    method: RPCExternalAction.GENERATE_GROUP_MERKLE_PROOF,
-    payload: {
-      groupId: process.env.TEST_GROUP_ID!,
-    },
-  });`;
-
-const JOIN_GROUP_CODE = `import { initializeCryptKeeper } from "@cryptkeeperzk/providers";
-
-const client = initializeCryptKeeper();
-
-const connect = async () => {
-  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 const Bandada = ({ joinGroup, generateGroupMerkleProof }: IBandadaProps): JSX.Element => (
-  <Box
-    className="popup"
-    sx={{ p: 3, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}
-  >
-    <Typography variant="h6">Integration with Bandada service</Typography>
-
-    <ActionBox<null, void>
-      code={GENERATE_MERKLE_TREE_CODE}
-      onClick={generateGroupMerkleProof}
-      option={null}
-      title="Generate Group Merkle Proof"
-    />
-
-    <ActionBox<null, void>
-      code={JOIN_GROUP_CODE}
-      onClick={joinGroup}
-      option={null}
-      title="Join test group"
-    />
-  </Box>
-);
+export const Bandada = ({ joinGroup, generateGroupMerkleProof }: IBandadaProps): JSX.Element => {
+  const classes = useGlobalStyles();
+
+  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<null, void>
+        code={GENERATE_MERKLE_TREE_CODE}
+        option={null}
+        title="Generate Group Merkle Proof"
+        onClick={generateGroupMerkleProof}
+      />
+
+      <ActionBox<null, void> code={JOIN_GROUP_CODE} option={null} title="Join test group" onClick={joinGroup} />
+    </Box>
+  );
+};
diff --git a/packages/demo/src/components/Bandada/codeExample.ts b/packages/demo/src/components/Bandada/codeExample.ts
@@ -0,0 +1,25 @@
+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!,
+    },
+  });
+};
+
+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 { generateGroupMerkleProof, joinGroup };
diff --git a/packages/demo/src/components/Bandada/codeExported.ts b/packages/demo/src/components/Bandada/codeExported.ts
@@ -0,0 +1,27 @@
+export const GENERATE_MERKLE_TREE_CODE = `import { RPCExternalAction, initializeCryptKeeper } from "@cryptkeeperzk/providers";
+
+const client = initializeCryptKeeper();
+
+const generateGroupMerkleProof = async () => {
+    await client?.request({
+        method: RPCExternalAction.GENERATE_GROUP_MERKLE_PROOF,
+        payload: {
+            groupId: process.env.TEST_GROUP_ID!,
+        },
+    });
+}`;
+
+export const JOIN_GROUP_CODE = `import { RPCExternalAction, initializeCryptKeeper } from "@cryptkeeperzk/providers";
+
+const client = initializeCryptKeeper();
+
+const joinGroup = async () => {
+    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,
+        },
+    });
+}`;
diff --git a/packages/demo/src/components/Connect/Connect.tsx b/packages/demo/src/components/Connect/Connect.tsx
@@ -1,6 +1,8 @@
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 
+import { useGlobalStyles } from "@src/styles";
+
 import { ActionBox } from "../ActionBox/ActionBox";
 
 interface IConnectProps {
@@ -24,18 +26,22 @@ const connect = async (isChangeIdentity = false) => {
       });
   };`;
 
-export const Connect = ({ title, isChangeIdentity = false, connect }: IConnectProps): JSX.Element => (
-  <Box
-    className="popup"
-    sx={{ p: 3, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}
-  >
-    <Typography variant="h6">{title}</Typography>
-
-    <ActionBox<boolean, void>
-      code={CONNECT_CODE}
-      onClick={connect}
-      option={isChangeIdentity}
-      title="Connect Identity"
-    />
-  </Box>
-);
+export const Connect = ({ title, isChangeIdentity = false, connect }: IConnectProps): JSX.Element => {
+  const classes = useGlobalStyles();
+
+  return (
+    <Box
+      className={classes.popup}
+      sx={{ p: 3, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}
+    >
+      <Typography variant="h6">{title}</Typography>
+
+      <ActionBox<boolean, void>
+        code={CONNECT_CODE}
+        option={isChangeIdentity}
+        title="Connect Identity"
+        onClick={connect}
+      />
+    </Box>
+  );
+};
diff --git a/packages/demo/src/components/ConnectedIdentity/ConnectedIdentity.tsx b/packages/demo/src/components/ConnectedIdentity/ConnectedIdentity.tsx
@@ -1,8 +1,8 @@
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography"; 
-import logoSVG from "@src/static/icons/logo.svg";
+import Typography from "@mui/material/Typography";
 
-import SvgIcon from "@mui/material/SvgIcon";
+import { useGlobalStyles } from "@src/styles";
 
 interface IConnectedIdentityProps {
   identityCommitment?: string;
@@ -14,57 +14,61 @@ export const ConnectedIdentity = ({
   identityCommitment = "",
   identityName = "",
   identityHost = "",
-}: IConnectedIdentityProps): JSX.Element => (
-  <Box
-    className="popup"
-    sx={{
-      p: 2,
-      display: "flex",
-      alignItems: "center",
-      flexWrap: "nowrap",
-      borderBottom: "1px solid",
-      borderColor: "text.800",
-      border: "2px solid $gray-800",
-      height: "100%",
-      justifyContent: "center",
-    }}
-  >
-    <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", p: 3, flexGrow: 1 }}>
-      <SvgIcon>{logoSVG}</SvgIcon>
+}: IConnectedIdentityProps): JSX.Element => {
+  const classes = useGlobalStyles();
 
-      <Typography sx={{ pt: 3, fontWeight: "bold", color: "primary.main", alignItems: "center" }} variant="h5">
-        CryptKeeper Connected Identity
-      </Typography>
-    </Box>
-
-    <Box >
-      <Box>
-        <Typography className="identity-name" color="text.primary" data-testid="connected-name">
-          <strong>Name: </strong>
+  return (
+    <Box
+      className={classes.popup}
+      sx={{
+        p: 2,
+        display: "flex",
+        alignItems: "center",
+        flexWrap: "nowrap",
+        borderBottom: "1px solid",
+        borderColor: "text.800",
+        border: "2px solid $gray-800",
+        height: "100%",
+        justifyContent: "center",
+      }}
+    >
+      <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", p: 3, flexGrow: 1 }}>
+        <AccountCircleIcon color="primary" fontSize="inherit" />
 
-          {identityName}
+        <Typography sx={{ pt: 3, fontWeight: "bold", color: "primary.main", alignItems: "center" }} variant="h5">
+          CryptKeeper Connected Identity
         </Typography>
       </Box>
 
-      {identityHost && (
-        <Typography className="identity-name" color="text.primary" data-testid="connected-urlOrigin">
-          <strong>Host: </strong>
+      <Box>
+        <Box>
+          <Typography className="identity-name" color="text.primary" data-testid="connected-name">
+            <strong>Name: </strong>
 
-          {identityHost}
-        </Typography>
-      )}
+            {identityName}
+          </Typography>
+        </Box>
 
-      {identityCommitment ? (
-        <Typography className="identity-name" color="text.primary" data-testid="commitment">
-          <strong>Commitment: </strong>
+        {identityHost && (
+          <Typography className="identity-name" color="text.primary" data-testid="connected-urlOrigin">
+            <strong>Host: </strong>
 
-          {identityCommitment}
-        </Typography>
-      ) : (
-        <Typography className="identity-name" color="text.primary" data-testid="commitment">
-          You need to ask to reveal identity Commitment
-        </Typography>
-      )}
+            {identityHost}
+          </Typography>
+        )}
+
+        {identityCommitment ? (
+          <Typography className="identity-name" color="text.primary" data-testid="commitment">
+            <strong>Commitment: </strong>
+
+            {identityCommitment}
+          </Typography>
+        ) : (
+          <Typography className="identity-name" color="text.primary" data-testid="commitment">
+            You need to ask to reveal identity Commitment
+          </Typography>
+        )}
+      </Box>
     </Box>
-  </Box>
-);
+  );
+};