Feature/demo docs

.gitignore

@@ -37,7 +37,7 @@ builds/
 builds.zip
 development/ts-migration-dashboard/build
 development/ts-migration-dashboard/intermediate
-
+packages/demo/public/docs
 test-artifacts
 test-builds
 build-artifacts
@@ -67,3 +67,4 @@ playwright/.cache/
 playwright-downloads/
 user-data/
 tmp/
+.nx

packages/app/src/background/services/connection/ConnectionService.ts

@@ -177,7 +177,7 @@ export default class ConnectionService extends BaseService implements IBackupabl
     { urlOrigin }: IZkMetadata,
   ): Promise<void> => {
     const appOrigin = url || urlOrigin;
-    const connectedIdentity = this.getConnectedIdentity(appOrigin!);
+    const connectedIdentity = this.getConnectedIdentity(appOrigin);
 
     if (!connectedIdentity) {
       throw new Error("CryptKeeper: No connected identity found");

packages/app/src/ui/pages/GroupMerkleProof/GroupMerkleProof.tsx

@@ -120,7 +120,7 @@ const GroupMerkleProof = (): JSX.Element => {
                   variant="h6"
                   onClick={onGoToHost}
                 >
-                  {connection!.urlOrigin}
+                  {connection.urlOrigin}
                 </Typography>
 
                 <Typography fontWeight="bold" sx={{ display: "inline" }} variant="h6">

packages/app/src/ui/pages/GroupMerkleProof/useGroupMerkleProof.ts

@@ -91,7 +91,7 @@ export const useGroupMerkleProof = (): IUseGroupMerkleProofData => {
   }, [groupId, connection?.urlOrigin, dispatch, navigate]);
 
   const onGoToHost = useCallback(() => {
-    redirectToNewTab(connection!.urlOrigin);
+    redirectToNewTab(connection.urlOrigin);
   }, [connection?.urlOrigin]);
 
   const onGoToGroup = useCallback(() => {
@@ -100,7 +100,7 @@ export const useGroupMerkleProof = (): IUseGroupMerkleProofData => {
 
   const onGenerateMerkleProof = useCallback(() => {
     setSubmitting(true);
-    dispatch(generateGroupMerkleProof({ groupId: groupId! }, connection!.urlOrigin))
+    dispatch(generateGroupMerkleProof({ groupId: groupId! }, connection.urlOrigin))
       .then(() => dispatch(closePopup()))
       .then(() => {
         navigate(Paths.HOME);

packages/app/src/ui/pages/JoinGroup/JoinGroup.tsx

@@ -119,7 +119,7 @@ const JoinGroup = (): JSX.Element => {
                   variant="h6"
                   onClick={onGoToHost}
                 >
-                  {connection!.urlOrigin}
+                  {connection.urlOrigin}
                 </Typography>
 
                 <Typography fontWeight="bold" sx={{ display: "inline" }} variant="h6">

packages/app/src/ui/pages/JoinGroup/useJoinGroup.ts

@@ -94,7 +94,7 @@ export const useJoinGroup = (): IUseJoinGroupData => {
   }, [groupId, connection?.urlOrigin, dispatch, navigate]);
 
   const onGoToHost = useCallback(() => {
-    redirectToNewTab(connection!.urlOrigin);
+    redirectToNewTab(connection.urlOrigin);
   }, [connection?.urlOrigin]);
 
   const onGoToGroup = useCallback(() => {
@@ -103,7 +103,7 @@ export const useJoinGroup = (): IUseJoinGroupData => {
 
   const onJoin = useCallback(() => {
     setSubmitting(true);
-    dispatch(joinGroup({ groupId: groupId!, apiKey, inviteCode }, connection!.urlOrigin))
+    dispatch(joinGroup({ groupId: groupId!, apiKey, inviteCode }, connection.urlOrigin))
       .then(() => dispatch(closePopup()))
       .then(() => {
         navigate(Paths.HOME);

packages/app/src/ui/pages/RevealIdentityCommitment/useRevealIdentityCommitment.ts

@@ -51,11 +51,11 @@ export const useRevealIdentityCommitment = (): IUseRevealIdentityCommitmentData
   }, [connection?.urlOrigin, dispatch, navigate]);
 
   const onGoToHost = useCallback(() => {
-    redirectToNewTab(connection!.urlOrigin);
+    redirectToNewTab(connection.urlOrigin);
   }, [connection?.urlOrigin]);
 
   const onReveal = useCallback(() => {
-    dispatch(revealConnectedIdentityCommitment(connection!.urlOrigin))
+    dispatch(revealConnectedIdentityCommitment(connection.urlOrigin))
       .then(() => dispatch(closePopup()))
       .then(() => {
         navigate(Paths.HOME);

packages/demo/.eslintignore

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

packages/demo/package.json

@@ -3,8 +3,8 @@
   "private": true,
   "version": "0.4.3",
   "scripts": {
-    "start": "parcel serve --no-cache public/index.html",
-    "build": "parcel build public/index.html",
+    "start": "webpack serve --config webpack.dev.js --mode development",
+    "build": "webpack --config webpack.prod.js --mode=production",
     "build:e2e": "pnpm run build",
     "dev": "pnpm run build",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
@@ -18,30 +18,54 @@
     "@cryptkeeperzk/providers": "workspace:^",
     "@cryptkeeperzk/semaphore-identity": "^3.10.3",
     "@cryptkeeperzk/types": "workspace:^",
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@mui/base": "5.0.0-beta.20",
     "@mui/icons-material": "^5.14.14",
-    "@mui/material": "^5.14.17",
-    "@mui/styles": "^5.14.17",
-    "bigint-conversion": "^2.4.3",
+    "@mui/lab": "5.0.0-alpha.149",
+    "@mui/material": "^5.14.13",
+    "@mui/styles": "^5.14.14",
+    "@types/react-syntax-highlighter": "^15.5.9",
+    "bigint-conversion": "^2.4.2",
     "classnames": "^2.3.2",
     "dotenv": "^16.3.1",
-    "ethers": "^6.8.1",
-    "prism-react-renderer": "^2.2.0",
+    "ethers": "^6.8.0",
+    "prism-react-renderer": "^2.1.0",
     "react": "^18.2.0",
+    "react-code-blocks": "^0.1.4",
+    "react-collapse": "^5.1.1",
     "react-dom": "^18.2.0",
     "react-live": "^4.1.5",
-    "react-toastify": "^9.1.3"
+    "react-markdown": "^9.0.0",
+    "react-router-dom": "^6.17.0",
+    "react-scripts": "^5.0.1",
+    "react-syntax-highlighter": "^15.5.0",
+    "react-toastify": "^9.1.3",
+    "rehype-autolink-headings": "^7.0.0",
+    "rehype-slug": "^6.0.0",
+    "ts-loader": "^9.5.0"
   },
   "devDependencies": {
     "@cryptkeeperzk/eslint-config-react": "workspace:^",
-    "@types/node": "^20.9.0",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
+    "@types/node": "^20.8.8",
+    "@types/react": "^18.2.32",
+    "@types/react-collapse": "^5.0.3",
+    "@types/react-dom": "^18.2.14",
     "assert": "^2.1.0",
-    "eslint": "^8.53.0",
-    "lint-staged": "^15.1.0",
-    "parcel": "^2.10.2",
-    "prettier": "^3.1.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.52.0",
+    "glob": "^10.3.10",
+    "html-webpack-plugin": "^5.5.3",
+    "lint-staged": "^15.0.2",
+    "path-browserify": "^1.0.1",
+    "prettier": "^3.0.3",
     "process": "^0.11.10",
-    "typescript": "^5.2.2"
+    "style-loader": "^3.3.3",
+    "typescript": "^5.2.2",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1",
+    "webpack-merge": "^5.10.0"
   }
 }

packages/demo/public/index.html

@@ -9,6 +9,6 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <script type="module" src="../src/index.tsx"></script>
+    <script src="bundle.js"></script>
   </body>
 </html>

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

@@ -1,25 +1,33 @@
+import PlayCircleFilledIcon from "@mui/icons-material/PlayCircleFilled";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
 import { useTheme } from "@mui/styles";
 import { themes } from "prism-react-renderer";
+import { ReactNode } from "react";
 import { LiveProvider, LiveEditor } from "react-live";
 
 import { useGlobalStyles } from "@src/styles";
+import { sharedStyles } from "@src/styles/useGlobalStyles";
 
 type actionFnRequiredOption<T = unknown, U = unknown> = (option: T) => U;
 type actionFnOptionalOption<T = unknown, U = unknown> = (option?: T) => U;
 
-interface IActionBox<T = unknown, U = void> {
+interface IActionBox<T = unknown, U = unknown> {
+  children?: ReactNode;
   title: string;
-  code: string;
-  option?: T;
+  description?: string;
+  option: T;
+  code?: string;
   testId?: string;
   onClick: actionFnOptionalOption<T, U> | actionFnRequiredOption<T, U>;
 }
 
 export const ActionBox = <T, U>({
+  children,
   title,
-  option = undefined,
+  description,
+  option,
   code,
   testId = "",
   onClick,
@@ -28,23 +36,48 @@ export const ActionBox = <T, U>({
   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 }}
-          variant="contained"
-          onClick={() => onClick(option as T)}
-        >
-          {title}
-        </Button>
-      </Box>
+    <Box className={classes.actionBox}>
+      <Box
+        sx={{
+          p: 2,
+          width: sharedStyles.sideBarWidth * 0.9,
+          top: 64,
+          mx: "auto",
+          display: "block",
+        }}
+      >
+        <Box>
+          <Typography alignItems="center" color="primary" display="flex" mb={2} variant="subtitle1">
+            <PlayCircleFilledIcon sx={{ color: "primary.main", mr: 1 }} /> Demo Action
+          </Typography>
+        </Box>
+
+        <Typography sx={{ mb: 3 }} variant="h6">
+          {description}
+        </Typography>
 
-      <Box className={classes.codePreview}>
-        <LiveProvider disabled enableTypeScript noInline code={code}>
-          <LiveEditor theme={themes.vsDark} />
-        </LiveProvider>
+        {children}
+
+        <Box sx={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }}>
+          <Button
+            data-testid={testId}
+            sx={{ textTransform: "none", mb: 1 }}
+            type="submit"
+            variant="contained"
+            onClick={() => onClick(option)}
+          >
+            {title}
+          </Button>
+        </Box>
       </Box>
+
+      {code && (
+        <Box className={classes.codePreview}>
+          <LiveProvider disabled enableTypeScript noInline code={code}>
+            <LiveEditor theme={themes.vsDark} />
+          </LiveProvider>
+        </Box>
+      )}
     </Box>
   );
 };