diff --git a/packages/demo/package.json b/packages/demo/package.json index 830c7a352..6e854a6ee 100644 --- 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 index bd5841aa4..30514a6ee 100644 --- 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 = (option: T) => U; type actionFnOptionalOption = (option?: T) => U; @@ -14,53 +13,22 @@ interface IActionBox { onClick: actionFnOptionalOption | actionFnRequiredOption; } -export const ActionBox = ({ - title, - option, - code, - testId = "", - onClick -}: IActionBox): JSX.Element => { - const [isShowCode, setIsShowCode] = useState(false); - - const onShowCode = useCallback( - (event: ReactMouseEvent) => { - event.stopPropagation(); - setIsShowCode((show) => !show); - }, - [setIsShowCode], - ); - - return ( - - - - - - - - {isShowCode && ( - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-expect-error - - )} +export const ActionBox = ({ title, option, code, testId = "", onClick }: IActionBox): JSX.Element => ( + + + - ); -}; + + {/* // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-expect-error */} + + +); diff --git a/packages/demo/src/components/Bandada/Bandada.tsx b/packages/demo/src/components/Bandada/Bandada.tsx index d98440b5f..94e302829 100644 --- 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; generateGroupMerkleProof: () => Promise; } -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 => ( - - Integration with Bandada service - - - code={GENERATE_MERKLE_TREE_CODE} - onClick={generateGroupMerkleProof} - option={null} - title="Generate Group Merkle Proof" - /> - - - code={JOIN_GROUP_CODE} - onClick={joinGroup} - option={null} - title="Join test group" - /> - -); +export const Bandada = ({ joinGroup, generateGroupMerkleProof }: IBandadaProps): JSX.Element => { + const classes = useGlobalStyles(); + + return ( + + Integration with Bandada service + + + code={GENERATE_MERKLE_TREE_CODE} + option={null} + title="Generate Group Merkle Proof" + onClick={generateGroupMerkleProof} + /> + + code={JOIN_GROUP_CODE} option={null} title="Join test group" onClick={joinGroup} /> + + ); +}; diff --git a/packages/demo/src/components/Bandada/codeExample.ts b/packages/demo/src/components/Bandada/codeExample.ts new file mode 100644 index 000000000..af08cceca --- /dev/null +++ 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 => { + await client?.request({ + method: RPCExternalAction.GENERATE_GROUP_MERKLE_PROOF, + payload: { + groupId: process.env.TEST_GROUP_ID!, + }, + }); +}; + +const joinGroup = async (): Promise => { + 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 new file mode 100644 index 000000000..8260886a7 --- /dev/null +++ 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 index 0f39debca..d8094b972 100644 --- 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 => ( - - {title} - - - code={CONNECT_CODE} - onClick={connect} - option={isChangeIdentity} - title="Connect Identity" - /> - -); +export const Connect = ({ title, isChangeIdentity = false, connect }: IConnectProps): JSX.Element => { + const classes = useGlobalStyles(); + + return ( + + {title} + + + code={CONNECT_CODE} + option={isChangeIdentity} + title="Connect Identity" + onClick={connect} + /> + + ); +}; diff --git a/packages/demo/src/components/ConnectedIdentity/ConnectedIdentity.tsx b/packages/demo/src/components/ConnectedIdentity/ConnectedIdentity.tsx index e791a1497..d8ebcf181 100644 --- 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 => ( - - - {logoSVG} +}: IConnectedIdentityProps): JSX.Element => { + const classes = useGlobalStyles(); - - CryptKeeper Connected Identity - - - - - - - Name: + return ( + + + - {identityName} + + CryptKeeper Connected Identity - {identityHost && ( - - Host: + + + + Name: - {identityHost} - - )} + {identityName} + + - {identityCommitment ? ( - - Commitment: + {identityHost && ( + + Host: - {identityCommitment} - - ) : ( - - You need to ask to reveal identity Commitment - - )} + {identityHost} + + )} + + {identityCommitment ? ( + + Commitment: + + {identityCommitment} + + ) : ( + + You need to ask to reveal identity Commitment + + )} + - -); + ); +}; diff --git a/packages/demo/src/components/DisplayProof/DisplayProof.tsx b/packages/demo/src/components/DisplayProof/DisplayProof.tsx index 657fa66f3..497362fae 100644 --- a/packages/demo/src/components/DisplayProof/DisplayProof.tsx +++ b/packages/demo/src/components/DisplayProof/DisplayProof.tsx @@ -1,18 +1,25 @@ -import { ISemaphoreFullProof, IRLNFullProof, IMerkleProof } from "@cryptkeeperzk/types"; import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; +import { useGlobalStyles } from "@src/styles"; + +import type { ISemaphoreFullProof, IRLNFullProof, IMerkleProof } from "@cryptkeeperzk/types"; + interface IDisplayProofProps { proof?: ISemaphoreFullProof | IRLNFullProof | IMerkleProof; } -export const DisplayProof = ({ proof = undefined }: IDisplayProofProps): JSX.Element => ( - - Generated proof output: +export const DisplayProof = ({ proof = undefined }: IDisplayProofProps): JSX.Element => { + const classes = useGlobalStyles(); + + return ( + + Generated proof output: - 
{JSON.stringify(proof, null, 2)}
- -); + 
{JSON.stringify(proof, null, 2)}
+ + ); +}; diff --git a/packages/demo/src/components/GetCommitment/GetCommitment.tsx b/packages/demo/src/components/GetCommitment/GetCommitment.tsx index c62c4ce42..fc999b91e 100644 --- a/packages/demo/src/components/GetCommitment/GetCommitment.tsx +++ b/packages/demo/src/components/GetCommitment/GetCommitment.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 IGetCommitmentProps { @@ -16,19 +18,23 @@ const connect = async () => { method: RPCExternalAction.REVEAL_CONNECTED_IDENTITY_COMMITMENT, });`; -export const GetCommitment = ({ revealConnectedIdentityCommitment }: IGetCommitmentProps): JSX.Element => ( - - Reveal connected identity Commitment - - - code={REVEAL_CODE} - onClick={revealConnectedIdentityCommitment} - data-testId="reveal-connected-identity-commitment" - option={undefined} - title="Reveal" - /> - -); +export const GetCommitment = ({ revealConnectedIdentityCommitment }: IGetCommitmentProps): JSX.Element => { + const classes = useGlobalStyles(); + + return ( + + Reveal connected identity Commitment + + + code={REVEAL_CODE} + data-testId="reveal-connected-identity-commitment" + option={undefined} + title="Reveal" + onClick={revealConnectedIdentityCommitment} + /> + + ); +}; diff --git a/packages/demo/src/components/GetMetadata/GetMetadata.tsx b/packages/demo/src/components/GetMetadata/GetMetadata.tsx index 5e945519c..6cc525124 100644 --- a/packages/demo/src/components/GetMetadata/GetMetadata.tsx +++ b/packages/demo/src/components/GetMetadata/GetMetadata.tsx @@ -1,39 +1,32 @@ import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; +import { useGlobalStyles } from "@src/styles"; + import { ActionBox } from "../ActionBox/ActionBox"; +import GET_METADATA_CODE from "./codeExported"; + interface IGetMetadataProps { getConnectedIdentityMetadata: () => void; } -const GET_METADATA_CODE = `import { initializeCryptKeeper } from "@cryptkeeperzk/providers"; - -const client = initializeCryptKeeper(); - -const connect = async () => { - await client - ?.request({ - method: RPCExternalAction.GET_CONNECTED_IDENTITY_DATA, - }) - .then((connectedIdentity) => { - if (connectedIdentity) { - // SOME CODE - } - })`; +export const GetMetadata = ({ getConnectedIdentityMetadata }: IGetMetadataProps): JSX.Element => { + const classes = useGlobalStyles(); -export const GetMetadata = ({ getConnectedIdentityMetadata }: IGetMetadataProps): JSX.Element => ( - - Get Connected Identity Metadata + return ( + + Get Connected Identity Metadata - - code={GET_METADATA_CODE} - onClick={getConnectedIdentityMetadata} - option={undefined} - title="Get Connected Identity" - /> - -); + + code={GET_METADATA_CODE} + option={undefined} + title="Get Connected Identity" + onClick={getConnectedIdentityMetadata} + /> + + ); +}; diff --git a/packages/demo/src/components/GetMetadata/codeExample.ts b/packages/demo/src/components/GetMetadata/codeExample.ts new file mode 100644 index 000000000..5c8a7a519 --- /dev/null +++ b/packages/demo/src/components/GetMetadata/codeExample.ts @@ -0,0 +1,20 @@ +import { RPCExternalAction, initializeCryptKeeper } from "@cryptkeeperzk/providers"; + +const client = initializeCryptKeeper(); + +const getConnectedIdentityMetadata = async (): Promise => { + await client + ?.request({ + method: RPCExternalAction.GET_CONNECTED_IDENTITY_DATA, + }) + .then((connectedIdentity) => { + if (connectedIdentity) { + // SOME CODE + } + }) + .catch(() => { + // THROW ERROR + }); +}; + +export { getConnectedIdentityMetadata }; diff --git a/packages/demo/src/components/GetMetadata/codeExported.ts b/packages/demo/src/components/GetMetadata/codeExported.ts new file mode 100644 index 000000000..4d2ab2001 --- /dev/null +++ b/packages/demo/src/components/GetMetadata/codeExported.ts @@ -0,0 +1,20 @@ +const GET_METADATA_CODE = `import { RPCExternalAction, initializeCryptKeeper } from "@cryptkeeperzk/providers"; + +const client = initializeCryptKeeper(); + +const getConnectedIdentityMetadata = async () => { + await client + ?.request({ + method: RPCExternalAction.GET_CONNECTED_IDENTITY_DATA, + }) + .then((connectedIdentity) => { + if (connectedIdentity) { + // SOME CODE + } + }) + .catch(() => { + // THROW ERROR + }); +};`; + +export default GET_METADATA_CODE; diff --git a/packages/demo/src/components/Icon/Icon.tsx b/packages/demo/src/components/Icon/Icon.tsx deleted file mode 100644 index dcd8ac2ff..000000000 --- a/packages/demo/src/components/Icon/Icon.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import Box from "@mui/material/Box"; -import classNames from "classnames"; -import { forwardRef, MouseEventHandler, Ref } from "react"; - -import "./icon.scss"; - -export interface IconProps { - url?: string; - fontAwesome?: string; - className?: string; - size?: number; - disabled?: boolean; - onClick?: MouseEventHandler; -} - -const IconUI = ( - { - url = "", - size = 0.75, - className = "", - disabled = false, - fontAwesome = "", - onClick = undefined, - ...rest - }: IconProps, - ref: Ref, -): JSX.Element => ( - - {fontAwesome && } - -); - -export const Icon = forwardRef(IconUI); diff --git a/packages/demo/src/components/Icon/icon.scss b/packages/demo/src/components/Icon/icon.scss deleted file mode 100644 index 740dabe06..000000000 --- a/packages/demo/src/components/Icon/icon.scss +++ /dev/null @@ -1,48 +0,0 @@ -@import "../../utils/variables"; - -.icon { - @extend %row-nowrap; - align-items: center; - justify-content: center; - background-repeat: no-repeat; - background-size: contain; - background-position: center; - font-family: "Font Awesome 5 Free"; - user-select: none; - - &__text { - @extend %row-nowrap; - align-items: center; - justify-content: center; - text-align: center; - color: $white; - font-weight: 400; - height: 80%; - width: 80%; - background-color: rgba(#000, 0.05); - border-radius: 50%; - } - - &--disabled { - opacity: 0.5; - cursor: default; - } - - &--clickable { - @extend %clickable; - } -} - -button.icon { - cursor: pointer; - padding: 0 !important; - border: none; - outline: none; - background-color: transparent; - - &:hover, - &:active, - &:focus { - background-color: transparent; - } -} diff --git a/packages/demo/src/components/Icon/index.ts b/packages/demo/src/components/Icon/index.ts deleted file mode 100644 index 867fce3e5..000000000 --- a/packages/demo/src/components/Icon/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { Icon } from "./Icon"; - -export default Icon; diff --git a/packages/demo/src/components/ImportIdentity/ImportIdentity.tsx b/packages/demo/src/components/ImportIdentity/ImportIdentity.tsx index dbc6b611e..eaed19a79 100644 --- a/packages/demo/src/components/ImportIdentity/ImportIdentity.tsx +++ b/packages/demo/src/components/ImportIdentity/ImportIdentity.tsx @@ -2,6 +2,8 @@ import Box from "@mui/material/Box"; import TextField from "@mui/material/TextField"; import Typography from "@mui/material/Typography"; +import { useGlobalStyles } from "@src/styles"; + import { ActionBox } from "../ActionBox/ActionBox"; interface IImportIdentityProps { @@ -22,28 +24,32 @@ const importIdentity = async () => { }); }`; -export const ImportIdentity = ({ importIdentity }: IImportIdentityProps): JSX.Element => ( - - Import identity - - - Import identity with trapdoor and nullifier - - - - - - - - code={IMPORT_IDENTITY} - onClick={importIdentity} - data-testId="import-identity" - option={undefined} - title="Import identity" - /> - -); +export const ImportIdentity = ({ importIdentity }: IImportIdentityProps): JSX.Element => { + const classes = useGlobalStyles(); + + return ( + + Import identity + + + Import identity with trapdoor and nullifier + + + + + + + + code={IMPORT_IDENTITY} + data-testId="import-identity" + option={undefined} + title="Import identity" + onClick={importIdentity} + /> + + ); +}; diff --git a/packages/demo/src/components/RateLimitingNullifier/RateLimitingNullifier.tsx b/packages/demo/src/components/RateLimitingNullifier/RateLimitingNullifier.tsx index abbd43975..71f266ac1 100644 --- a/packages/demo/src/components/RateLimitingNullifier/RateLimitingNullifier.tsx +++ b/packages/demo/src/components/RateLimitingNullifier/RateLimitingNullifier.tsx @@ -1,6 +1,7 @@ import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; +import { useGlobalStyles } from "@src/styles"; import { MerkleProofType } from "@src/types"; import { ActionBox } from "../ActionBox/ActionBox"; @@ -58,25 +59,29 @@ const genRLNProof = async ( // THROW ERROR });`; -export const RateLimitingNullifier = ({ genRLNProof }: IRateLimitingNullifierProps): JSX.Element => ( - - Integration with Rate-Limiting Nullifier (RLN) +export const RateLimitingNullifier = ({ genRLNProof }: IRateLimitingNullifierProps): JSX.Element => { + const classes = useGlobalStyles(); - - code={RLN_CODE} - onClick={genRLNProof} - option={MerkleProofType.STORAGE_ADDRESS} - title="Generate proof from Merkle proof storage address" - /> + return ( + + Integration with Rate-Limiting Nullifier (RLN) - - code={RLN_CODE} - onClick={genRLNProof} - option={MerkleProofType.ARTIFACTS} - title="Generate proof from Merkle proof artifacts" - /> - -); + + code={RLN_CODE} + option={MerkleProofType.STORAGE_ADDRESS} + title="Generate proof from Merkle proof storage address" + onClick={genRLNProof} + /> + + + code={RLN_CODE} + option={MerkleProofType.ARTIFACTS} + title="Generate proof from Merkle proof artifacts" + onClick={genRLNProof} + /> + + ); +}; diff --git a/packages/demo/src/components/Semaphore/Semaphore.tsx b/packages/demo/src/components/Semaphore/Semaphore.tsx index c0b1fd1e4..c4f135c07 100644 --- a/packages/demo/src/components/Semaphore/Semaphore.tsx +++ b/packages/demo/src/components/Semaphore/Semaphore.tsx @@ -1,6 +1,7 @@ import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; +import { useGlobalStyles } from "@src/styles"; import { MerkleProofType } from "@src/types"; import { ActionBox } from "../ActionBox/ActionBox"; @@ -44,25 +45,29 @@ const genSemaphoreProof = async ( // THROW ERROR });`; -export const Semaphore = ({ genSemaphoreProof }: ISemaphoreProps): JSX.Element => ( - - Integration with Semaphore +export const Semaphore = ({ genSemaphoreProof }: ISemaphoreProps): JSX.Element => { + const classes = useGlobalStyles(); - - code={SEMAPHORE_CODE} - onClick={genSemaphoreProof} - option={MerkleProofType.STORAGE_ADDRESS} - title="Generate proof from Merkle proof storage address" - /> + return ( + + Integration with Semaphore - - code={SEMAPHORE_CODE} - onClick={genSemaphoreProof} - option={MerkleProofType.ARTIFACTS} - title="Generate proof from Merkle proof artifacts" - /> - -); + + code={SEMAPHORE_CODE} + option={MerkleProofType.STORAGE_ADDRESS} + title="Generate proof from Merkle proof storage address" + onClick={genSemaphoreProof} + /> + + + code={SEMAPHORE_CODE} + option={MerkleProofType.ARTIFACTS} + title="Generate proof from Merkle proof artifacts" + onClick={genSemaphoreProof} + /> + + ); +}; diff --git a/packages/demo/src/components/VerifiableCredentials/VerifiableCredentials.tsx b/packages/demo/src/components/VerifiableCredentials/VerifiableCredentials.tsx index 8979c7c79..b5294bb1e 100644 --- a/packages/demo/src/components/VerifiableCredentials/VerifiableCredentials.tsx +++ b/packages/demo/src/components/VerifiableCredentials/VerifiableCredentials.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 IVerifiableCredentialsProps { @@ -59,35 +61,39 @@ const generateVerifiablePresentationRequest = async () => { export const VerifiableCredentials = ({ addVerifiableCredentialRequest, generateVerifiablePresentationRequest, -}: IVerifiableCredentialsProps): JSX.Element => ( - - Accepting Verifiable Credentials - - - code={ADD_VC_CODE} - onClick={addVerifiableCredentialRequest} - data-testId="add-verifiable-credential" - option="UniversityDegreeCredential" - title="Add a University Degree Verifiable Credential" - /> - - - code={ADD_VC_CODE} - onClick={addVerifiableCredentialRequest} - data-testId="add-verifiable-credential" - option="DriversLicenseCredential" - title="Add a Drivers License Verifiable Credential" - /> - - - code={GENERATE_VP_CODE} - onClick={generateVerifiablePresentationRequest} - data-testId="add-verifiable-credential" - option={undefined} - title="Generate a Verifiable Presentation" - /> - -); +}: IVerifiableCredentialsProps): JSX.Element => { + const classes = useGlobalStyles(); + + return ( + + Accepting Verifiable Credentials + + + code={ADD_VC_CODE} + data-testId="add-verifiable-credential" + option="UniversityDegreeCredential" + title="Add a University Degree Verifiable Credential" + onClick={addVerifiableCredentialRequest} + /> + + + code={ADD_VC_CODE} + data-testId="add-verifiable-credential" + option="DriversLicenseCredential" + title="Add a Drivers License Verifiable Credential" + onClick={addVerifiableCredentialRequest} + /> + + + code={GENERATE_VP_CODE} + data-testId="add-verifiable-credential" + option={undefined} + title="Generate a Verifiable Presentation" + onClick={generateVerifiablePresentationRequest} + /> + + ); +}; diff --git a/packages/demo/src/index.tsx b/packages/demo/src/index.tsx index 8f03c25d9..03d1116fe 100644 --- a/packages/demo/src/index.tsx +++ b/packages/demo/src/index.tsx @@ -1,3 +1,4 @@ +import CssBaseline from "@mui/material/CssBaseline"; import { ThemeProvider } from "@mui/material/styles"; import dotenv from "dotenv"; import { createRoot } from "react-dom/client"; @@ -5,8 +6,8 @@ import "react-toastify/dist/ReactToastify.css"; import path from "path"; -import { Main } from "./pages/Main/Main"; -import { theme } from "./theme"; +import Main from "@src/pages/Main"; +import { theme } from "@src/styles"; dotenv.config({ path: path.resolve(__dirname, "../..", ".env"), override: true }); @@ -15,6 +16,8 @@ const root = createRoot(container!); root.render( + +
, ); diff --git a/packages/demo/src/pages/Main/Main.tsx b/packages/demo/src/pages/Main/Main.tsx index 959862052..8380f1143 100644 --- a/packages/demo/src/pages/Main/Main.tsx +++ b/packages/demo/src/pages/Main/Main.tsx @@ -1,6 +1,6 @@ +import LockOpenIcon from "@mui/icons-material/LockOpen"; import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; -import SvgIcon from '@mui/material/SvgIcon'; import { ToastContainer } from "react-toastify"; import Bandada from "@src/components/Bandada"; @@ -14,9 +14,6 @@ import RateLimitingNullifier from "@src/components/RateLimitingNullifier"; import Semaphore from "@src/components/Semaphore"; import VerifiableCredentials from "@src/components/VerifiableCredentials"; import { useCryptKeeper } from "@src/hooks/useCryptKeeper"; -import logoSVG from "@src/static/icons/logo.svg"; - -import "../../styles.scss"; export const Main = (): JSX.Element => { const { @@ -38,13 +35,9 @@ export const Main = (): JSX.Element => { if (isLocked) { return ( - + - {logoSVG} + Welcome to CryptKeeper Demo! diff --git a/packages/demo/src/styles.scss b/packages/demo/src/styles.scss deleted file mode 100644 index a99bb4686..000000000 --- a/packages/demo/src/styles.scss +++ /dev/null @@ -1,147 +0,0 @@ -@import "./utils/variables"; - -body { - font-family: - system-ui, - -apple-system, - BlinkMacSystemFont, - "Segoe UI", - "Roboto", - "Oxygen", - "Ubuntu", - "Cantarell", - "Fira Sans", - "Droid Sans", - "Helvetica Neue", - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - margin: 0; - padding: 0; - background-color: $bg-black; - color: $white; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; -} - -html, -body { - font-size: 16px; - width: 385px; - min-height: 580px; - cursor: default; -} - -a { - color: $primary-blue; -} - -.popup { - @extend %col-nowrap; - width: 100vw; - height: 100vh; - display: flex; - - &__loading { - @extend %col-nowrap; - background-color: $header-gray; - width: 100vw; - height: 100vh; - align-items: center; - justify-content: center; - } - - &__select-icon { - font-size: 0.8125rem !important; - border: 2px solid $gray-800; - color: $gray-800; - width: 2rem; - height: 2rem; - border-radius: 50%; - margin-right: 1rem; - padding: 0.25rem; - - &--selected { - color: $primary-green; - border-color: $primary-green; - } - - &--selectable { - &:hover { - color: $primary-green; - border-color: $primary-green; - } - } - } - - .popup__select-icon { - font-size: 20px; - margin-right: 20px; - } - - .popup__content { - flex: 1; - display: flex; - flex-direction: column; - } - - .identity-info { - display: flex; - align-items: center; - font-weight: bold; - font-size: 1.125rem; - line-height: 1.75rem; - - .identity-name { - margin-right: 10px; - } - } -} - -.options { - @extend %col-nowrap; - display: flex; - width: 100vw; - height: 100vh; -} - -@media only screen and (min-width: 768px) { - html { - height: 100%; - width: 100%; - } - - body { - height: calc(100% - 6rem); - width: 100%; - } - - .popup { - width: 40rem; - height: auto; - border: 1px solid $gray-700; - margin: 2rem auto; - box-shadow: 0 2px 4px 0px $header-gray; - } - - .popup-proof { - width: 70rem; - height: auto; - border: 1px solid $gray-700; - margin: 2rem auto; - box-shadow: 0 2px 4px 0px $header-gray; - } - - .options { - width: 36rem; - height: 40rem; - border: 1px solid $gray-700; - margin: 2rem auto; - box-shadow: 0 2px 4px 0px $header-gray; - } -} diff --git a/packages/demo/src/styles/index.ts b/packages/demo/src/styles/index.ts new file mode 100644 index 000000000..d425e8799 --- /dev/null +++ b/packages/demo/src/styles/index.ts @@ -0,0 +1,2 @@ +export { useGlobalStyles } from "./useGlobalStyles"; +export { theme } from "./theme"; diff --git a/packages/demo/src/theme.ts b/packages/demo/src/styles/theme.ts similarity index 76% rename from packages/demo/src/theme.ts rename to packages/demo/src/styles/theme.ts index c19eb95c0..7b0886f65 100644 --- a/packages/demo/src/theme.ts +++ b/packages/demo/src/styles/theme.ts @@ -1,7 +1,7 @@ import { grey } from "@mui/material/colors"; import { createTheme, lighten } from "@mui/material/styles"; -const PALETTE = { +export const PALETTE = { background: { default: "#000", paper: "#fff", @@ -110,9 +110,25 @@ export const theme = createTheme({ root: { fontSize: "8rem", width: "8rem", - height: "8rem" - } - } - } + height: "8rem", + }, + }, + }, + + MuiCssBaseline: { + styleOverrides: { + body: { + fontFamily: + 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif', + margin: 0, + padding: 0, + backgroundColor: PALETTE.common.black, + color: PALETTE.common.white, + WebkitFontSmoothing: "antialiased", + MozOsxFontSmoothing: "grayscale", + WebkitTapHighlightColor: "rgba(255, 255, 255, 0)", + }, + }, + }, }, }); diff --git a/packages/demo/src/styles/useGlobalStyles.ts b/packages/demo/src/styles/useGlobalStyles.ts new file mode 100644 index 000000000..f54917244 --- /dev/null +++ b/packages/demo/src/styles/useGlobalStyles.ts @@ -0,0 +1,19 @@ +import grey from "@mui/material/colors/grey"; +import makeStyles from "@mui/styles/makeStyles"; + +const basePopupStyle = { + width: "50rem", + height: "auto", + border: `1px solid ${grey[700]}`, + margin: "2rem auto", +}; + +export const useGlobalStyles = makeStyles(() => ({ + popup: { + ...basePopupStyle, + }, + popupProof: { + ...basePopupStyle, + width: "70rem", + }, +})); diff --git a/packages/demo/src/utils/index.ts b/packages/demo/src/utils/index.ts index b68a86a93..cb6240d5f 100644 --- a/packages/demo/src/utils/index.ts +++ b/packages/demo/src/utils/index.ts @@ -1,7 +1,8 @@ import { Identity } from "@cryptkeeperzk/semaphore-identity"; -import type { IVerifiableCredential, IVerifiablePresentationRequest } from "@cryptkeeperzk/types"; import { bigintToHex } from "bigint-conversion"; +import type { IVerifiableCredential, IVerifiablePresentationRequest } from "@cryptkeeperzk/types"; + export const genMockIdentityCommitments = (): string[] => { const identityCommitments: string[] = []; for (let i = 0; i < 10; i += 1) { diff --git a/packages/demo/src/utils/variables.scss b/packages/demo/src/utils/variables.scss deleted file mode 100644 index 0a1392066..000000000 --- a/packages/demo/src/utils/variables.scss +++ /dev/null @@ -1,147 +0,0 @@ -$white: #ffffff; -$black: #000000; - -$bg-black: #000403; -$primary-blue: #2580f8; -$primary-green: #94febf; - -$header-gray: rgba($black, 0.05); -$border-gray: rgba($black, 0.1); -$gray-950: lighten($black, 5); -$gray-900: lighten($black, 10); -$gray-800: lighten($black, 20); -$gray-700: lighten($black, 30); -$gray-600: lighten($black, 40); -$gray-500: lighten($black, 50); -$gray-400: lighten($black, 60); -$gray-300: lighten($black, 70); -$gray-200: lighten($black, 80); -$gray-100: lighten($black, 90); - -$primary-text: $gray-200; -$secondary-text: $gray-400; -$label-text: lighten($black, 75); - -$error-red: #f52525; -$error-red-300: lighten($error-red, 70); -$success-green: #2ed272; -$warning-orange: #ffa31a; - -%flex { - display: flex; -} - -%col-nowrap { - @extend %flex; - flex-flow: column nowrap; -} - -%row-nowrap { - @extend %flex; - flex-flow: row nowrap; -} - -%small-font { - font-size: 0.8125rem; - line-height: 1.3125; -} - -%lite-font { - font-size: 0.875rem; - line-height: 1.3125; -} - -%regular-font { - font-size: 0.9375rem; - line-height: 1.3125; -} - -%h1-font { - font-size: 2rem; - line-height: 1.3125; -} - -%h2-font { - font-size: 1.5rem; - line-height: 1.3125; -} - -%h3-font { - font-size: 1.17rem; - line-height: 1.3125; -} - -%h5-font { - font-size: 0.83rem; - line-height: 1.3125; -} - -%h4-font { - font-size: 1rem; - line-height: 1.3125; -} - -%bold { - font-weight: 600; -} - -%ellipsis { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -%clickable { - cursor: pointer; - transition: 200ms ease-in-out; - - &:hover { - opacity: 0.8; - } - - &:active { - opacity: 1; - } -} - -$breakpoint-tablet: 768px; - -table { - @extend %col-nowrap; - width: 100%; - border-collapse: collapse; -} - -thead { - @extend %bold; - @extend %lite-font; - flex: 0 0 auto; - background-color: $black; - color: rgba($white, 0.5); - text-transform: uppercase; -} - -tr { - @extend %row-nowrap; - - &:nth-of-type(odd) { - background-color: rgba($black, 0.1); - } -} - -td { - align-items: flex-start; - flex: 1 1 auto; - padding: 0.75rem 1.5rem; -} - -tbody { - flex: 1 1 auto; - td { - @extend %lite-font; - } -} - -small { - color: $secondary-text; -} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index aead5acaf..b9390c7a4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -402,15 +402,15 @@ importers: '@cryptkeeperzk/types': specifier: workspace:^ version: link:../types - '@fortawesome/react-fontawesome': - specifier: ^0.2.0 - version: 0.2.0(@fortawesome/fontawesome-svg-core@6.4.2)(react@18.2.0) + '@mui/icons-material': + specifier: ^5.14.14 + version: 5.14.14(@mui/material@5.14.13)(@types/react@18.2.28)(react@18.2.0) '@mui/material': specifier: ^5.14.13 version: 5.14.13(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0) - '@parcel/transformer-sass': - specifier: ^2.10.0 - version: 2.10.0(@parcel/core@2.10.0) + '@mui/styles': + specifier: ^5.14.14 + version: 5.14.14(@types/react@18.2.28)(react@18.2.0) bigint-conversion: specifier: ^2.4.2 version: 2.4.2 @@ -3389,17 +3389,20 @@ packages: /@lezer/common@0.15.12: resolution: {integrity: sha512-edfwCxNLnzq5pBA/yaIhwJ3U3Kz8VAUOTRg0hhxaizaI1N+qxV7EXDv/kLCkLeq2RzSFvxexlaj5Mzfn2kY0Ig==} + dev: true /@lezer/lr@0.15.8: resolution: {integrity: sha512-bM6oE6VQZ6hIFxDNKk8bKPa14hqFrV07J/vHGOeiAbJReIaQXmkVb6xQu4MR+JBTLa5arGRyAAjJe1qaQt3Uvg==} dependencies: '@lezer/common': 0.15.12 + dev: true /@lmdb/lmdb-darwin-arm64@2.8.5: resolution: {integrity: sha512-KPDeVScZgA1oq0CiPBcOa3kHIqU+pTOwRFDIhxvmf8CTNvqdZQYp5cCKW0bUk69VygB2PuTiINFWbY78aR2pQw==} cpu: [arm64] os: [darwin] requiresBuild: true + dev: true optional: true /@lmdb/lmdb-darwin-x64@2.8.5: @@ -3407,6 +3410,7 @@ packages: cpu: [x64] os: [darwin] requiresBuild: true + dev: true optional: true /@lmdb/lmdb-linux-arm64@2.8.5: @@ -3414,6 +3418,7 @@ packages: cpu: [arm64] os: [linux] requiresBuild: true + dev: true optional: true /@lmdb/lmdb-linux-arm@2.8.5: @@ -3421,6 +3426,7 @@ packages: cpu: [arm] os: [linux] requiresBuild: true + dev: true optional: true /@lmdb/lmdb-linux-x64@2.8.5: @@ -3428,6 +3434,7 @@ packages: cpu: [x64] os: [linux] requiresBuild: true + dev: true optional: true /@lmdb/lmdb-win32-x64@2.8.5: @@ -3435,6 +3442,7 @@ packages: cpu: [x64] os: [win32] requiresBuild: true + dev: true optional: true /@metamask/detect-provider@1.2.0: @@ -3517,12 +3525,14 @@ packages: '@lezer/common': 0.15.12 '@lezer/lr': 0.15.8 json5: 2.2.3 + dev: true /@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.2: resolution: {integrity: sha512-9bfjwDxIDWmmOKusUcqdS4Rw+SETlp9Dy39Xui9BEGEk19dDwH0jhipwFzEff/pFg95NKymc6TOTbRKcWeRqyQ==} cpu: [arm64] os: [darwin] requiresBuild: true + dev: true optional: true /@msgpackr-extract/msgpackr-extract-darwin-x64@3.0.2: @@ -3530,6 +3540,7 @@ packages: cpu: [x64] os: [darwin] requiresBuild: true + dev: true optional: true /@msgpackr-extract/msgpackr-extract-linux-arm64@3.0.2: @@ -3537,6 +3548,7 @@ packages: cpu: [arm64] os: [linux] requiresBuild: true + dev: true optional: true /@msgpackr-extract/msgpackr-extract-linux-arm@3.0.2: @@ -3544,6 +3556,7 @@ packages: cpu: [arm] os: [linux] requiresBuild: true + dev: true optional: true /@msgpackr-extract/msgpackr-extract-linux-x64@3.0.2: @@ -3551,6 +3564,7 @@ packages: cpu: [x64] os: [linux] requiresBuild: true + dev: true optional: true /@msgpackr-extract/msgpackr-extract-win32-x64@3.0.2: @@ -3558,6 +3572,7 @@ packages: cpu: [x64] os: [win32] requiresBuild: true + dev: true optional: true /@mui/base@5.0.0-beta.19(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0): @@ -3610,6 +3625,23 @@ packages: resolution: {integrity: sha512-Rw/xKiTOUgXD8hdKqj60aC6QcGprMipG7ne2giK6Mz7b4PlhL/xog9xLeclY3BxsRLkZQ05egFnIEY1CSibTbw==} dev: false + /@mui/icons-material@5.14.14(@mui/material@5.14.13)(@types/react@18.2.28)(react@18.2.0): + resolution: {integrity: sha512-vwuaMsKvI7AWTeYqR8wYbpXijuU8PzMAJWRAq2DDIuOZPxjKyHlr8WQ25+azZYkIXtJ7AqnVb1ZmHdEyB4/kug==} + engines: {node: '>=12.0.0'} + peerDependencies: + '@mui/material': ^5.0.0 + '@types/react': ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.23.1 + '@mui/material': 5.14.13(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0) + '@types/react': 18.2.28 + react: 18.2.0 + dev: false + /@mui/icons-material@5.14.14(@mui/material@5.14.14)(@types/react@18.2.28)(react@18.2.0): resolution: {integrity: sha512-vwuaMsKvI7AWTeYqR8wYbpXijuU8PzMAJWRAq2DDIuOZPxjKyHlr8WQ25+azZYkIXtJ7AqnVb1ZmHdEyB4/kug==} engines: {node: '>=12.0.0'} @@ -3736,6 +3768,37 @@ packages: react: 18.2.0 dev: false + /@mui/styles@5.14.14(@types/react@18.2.28)(react@18.2.0): + resolution: {integrity: sha512-+LzSg7IjfxJRukIPULfAd025qsSCquHrTEC10EYjxbJJvHuE5nWx9D9w7lSRXxfWrxZZx+92rTUKVk9607zXBA==} + engines: {node: '>=12.0.0'} + peerDependencies: + '@types/react': ^17.0.0 || ^18.0.0 + react: ^17.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.23.1 + '@emotion/hash': 0.9.1 + '@mui/private-theming': 5.14.14(@types/react@18.2.28)(react@18.2.0) + '@mui/types': 7.2.6(@types/react@18.2.28) + '@mui/utils': 5.14.13(@types/react@18.2.28)(react@18.2.0) + '@types/react': 18.2.28 + clsx: 2.0.0 + csstype: 3.1.2 + hoist-non-react-statics: 3.3.2 + jss: 10.10.0 + jss-plugin-camel-case: 10.10.0 + jss-plugin-default-unit: 10.10.0 + jss-plugin-global: 10.10.0 + jss-plugin-nested: 10.10.0 + jss-plugin-props-sort: 10.10.0 + jss-plugin-rule-value-function: 10.10.0 + jss-plugin-vendor-prefixer: 10.10.0 + prop-types: 15.8.1 + react: 18.2.0 + dev: false + /@mui/system@5.14.14(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.28)(react@18.2.0): resolution: {integrity: sha512-y4InFmCgGGWXnz+iK4jRTWVikY0HgYnABjz4wgiUgEa2W1H8M4ow+27BegExUWPkj4TWthQ2qG9FOGSMtI+PKA==} engines: {node: '>=12.0.0'} @@ -4080,12 +4143,14 @@ packages: '@parcel/logger': 2.10.0 '@parcel/utils': 2.10.0 lmdb: 2.8.5 + dev: true /@parcel/codeframe@2.10.0: resolution: {integrity: sha512-hHp457tddXEWrOgHHaA/NtkOhOAyt4mpBUzhnPbWDONLu5xeg1mu1Jffiu2rlw5xajhphrUFDWyJW0/xq1815g==} engines: {node: '>= 12.0.0'} dependencies: chalk: 4.1.2 + dev: true /@parcel/compressor-raw@2.10.0(@parcel/core@2.10.0): resolution: {integrity: sha512-TXjosh5+kNN4lxENeIZ/2ZFQKWXpXlOoHhJbW4cGPXBMHxm0eimVpnFpD8xbWxg7VCcWzbEaUTp20GQ153X+9A==} @@ -4173,6 +4238,7 @@ packages: msgpackr: 1.9.5 nullthrows: 1.1.1 semver: 7.5.4 + dev: true /@parcel/diagnostic@2.10.0: resolution: {integrity: sha512-ibr+sUZLc0MW75b+nThOa6YEi9QXTNYbUNCo067mtMIfhKNYTx24DaiGzDWgy1Yv49eucBaQ4u7gFI2Qa98uIA==} @@ -4180,10 +4246,12 @@ packages: dependencies: '@mischnic/json-sourcemap': 0.1.0 nullthrows: 1.1.1 + dev: true /@parcel/events@2.10.0: resolution: {integrity: sha512-mhykJBnP3BPMI6A9hLZmTtmNHZuE+HGzsF6vzmA2YBuU3/BGlQUmxdObsmwQ1O24eq0EfJVwTM+R/bdu+/nFrA==} engines: {node: '>= 12.0.0'} + dev: true /@parcel/fs@2.10.0(@parcel/core@2.10.0): resolution: {integrity: sha512-so39KdZ4o7tDekeuuQfQdbfTUvldUtzvIsuUtJMqxVOVJRZr9VjieR9GbeFhqRmi9fM5oYdzQn4lbduKdAtANA==} @@ -4197,12 +4265,14 @@ packages: '@parcel/utils': 2.10.0 '@parcel/watcher': 2.1.0 '@parcel/workers': 2.10.0(@parcel/core@2.10.0) + dev: true /@parcel/graph@3.0.0: resolution: {integrity: sha512-8Lussud6gWRM3Mysu+veBRsBdSlWgkM8y7PvF8AiRwEY2eiVxZ3Rgh8o9KJau3B8R8q+lyCaUElYpbnUT6Bkiw==} engines: {node: '>= 12.0.0'} dependencies: nullthrows: 1.1.1 + dev: true /@parcel/logger@2.10.0: resolution: {integrity: sha512-rDa48czGBZA313scvSEkuHSOQiGdoYLaWqInZBKtl0zke3qrgTFNG4b173H6IFdNq5KmKjafBxaV5jG87i4Gww==} @@ -4210,12 +4280,14 @@ packages: dependencies: '@parcel/diagnostic': 2.10.0 '@parcel/events': 2.10.0 + dev: true /@parcel/markdown-ansi@2.10.0: resolution: {integrity: sha512-fuOuFglNANegE2nqVURwOJ/HzKM28O0hqy120Gl0NTbCAFbG34WCFxfkmVio8fondD4NcZcDj5GGv5P5TWcTIg==} engines: {node: '>= 12.0.0'} dependencies: chalk: 4.1.2 + dev: true /@parcel/namer-default@2.10.0(@parcel/core@2.10.0): resolution: {integrity: sha512-N1IF6A8Y2fYz0BteU9IkhPQGezLA3cKkoSxoIOTiUf2LZPpUIuCGEAB1IgaUVNdAeMVsGw3UrdEYZg4xdMovEg==} @@ -4241,6 +4313,7 @@ packages: semver: 7.5.4 transitivePeerDependencies: - '@parcel/core' + dev: true /@parcel/optimizer-css@2.10.0(@parcel/core@2.10.0): resolution: {integrity: sha512-D7hFYjJpudlbSgMlzwSbSguLehwGe4vJrQ4s83jj7z0UlHd74Vir9fd9LQTPuUErgs2SOQIPxFwLGqR6Hi+mOg==} @@ -4333,6 +4406,7 @@ packages: '@parcel/utils': 2.10.0 '@parcel/workers': 2.10.0(@parcel/core@2.10.0) semver: 7.5.4 + dev: true /@parcel/packager-css@2.10.0(@parcel/core@2.10.0): resolution: {integrity: sha512-BY1PoPPOngiJ6gFD+mUQ6YZvwDxlth8oCU9328T8kFwhmA4qL6pfIxNPI1I53Ig5f38tf1nhFkHACDCbs4MxaQ==} @@ -4413,6 +4487,7 @@ packages: '@parcel/types': 2.10.0(@parcel/core@2.10.0) transitivePeerDependencies: - '@parcel/core' + dev: true /@parcel/profiler@2.10.0: resolution: {integrity: sha512-SGkslseYA5TQOb8Z7gepi7YiIv3uH4BYAM9nwduMZrRZENcICbgTh1Pb+dp10y+6k9hFFH748eHtxJqSWARDBw==} @@ -4421,6 +4496,7 @@ packages: '@parcel/diagnostic': 2.10.0 '@parcel/events': 2.10.0 chrome-trace-event: 1.0.3 + dev: true /@parcel/reporter-cli@2.10.0(@parcel/core@2.10.0): resolution: {integrity: sha512-+OtZUdmHFgNY8+w3/U7dEZKMTtIFh7EiFw5VelKIGdvJrZNa9j7vbFuZziK6zUW2uopCk4qsDinn6Rfi7M16KA==} @@ -4515,12 +4591,14 @@ packages: /@parcel/rust@2.10.0: resolution: {integrity: sha512-9J7riqPI8mVlFSDphK9kVUH8nFQgeMbO/95Ycf4vaEOVE1ICQo1h18WHAy2DndmL1uSd/UTimirrP6yLt/I3KA==} engines: {node: '>= 12.0.0'} + dev: true /@parcel/source-map@2.1.1: resolution: {integrity: sha512-Ejx1P/mj+kMjQb8/y5XxDUn4reGdr+WyKYloBljpppUy8gs42T+BNoEOuRYqDVdgPc6NxduzIDoJS9pOFfV5Ew==} engines: {node: ^12.18.3 || >=14} dependencies: detect-libc: 1.0.3 + dev: true /@parcel/transformer-babel@2.10.0(@parcel/core@2.10.0): resolution: {integrity: sha512-XwlzHt7WPfueFlwl/bXItopgZ6ILSPzl5OmPeytHrM2TanymeLjJ1y3vxwY1C1BhNlrTwPHcf9U8aiuVSpE8RQ==} @@ -4673,6 +4751,7 @@ packages: sass: 1.69.3 transitivePeerDependencies: - '@parcel/core' + dev: true /@parcel/transformer-svg@2.10.0(@parcel/core@2.10.0): resolution: {integrity: sha512-qEZFk4gxyVNhm2V8R3YLo9qCyYNVBySWmZLjmwuhLLmAE+r0qGebc9oXyo7C6ML5d/4Tfj6NriCOeX+HMhPVxw==} @@ -4702,6 +4781,7 @@ packages: utility-types: 3.10.0 transitivePeerDependencies: - '@parcel/core' + dev: true /@parcel/utils@2.10.0: resolution: {integrity: sha512-8qx9caJTjli6UKpKlcPjdSBblkwTc+BnIsSK3/7fX7kbtHLmEkQH/RWZbbOJItHbnzlsmaDJTfS7j6rrcFw2Pw==} @@ -4715,6 +4795,7 @@ packages: '@parcel/source-map': 2.1.1 chalk: 4.1.2 nullthrows: 1.1.1 + dev: true /@parcel/watcher@2.0.4: resolution: {integrity: sha512-cTDi+FUDBIUOBKEtj+nhiJ71AZVlkAsQFuGQTun5tV9mwQBQgZvhCzG+URPQc8myeN32yRVZEfVAPCs1RW+Jvg==} @@ -4733,6 +4814,7 @@ packages: micromatch: 4.0.5 node-addon-api: 3.2.1 node-gyp-build: 4.6.0 + dev: true /@parcel/workers@2.10.0(@parcel/core@2.10.0): resolution: {integrity: sha512-PILDag4aW7G9w2AvYvBsMHe/NRCoOt+L7HJzp6UIvy6ssbafH/8fzdGjSpA99GXzC5AXpAHVt8RXhGMXmMP6QA==} @@ -4747,6 +4829,7 @@ packages: '@parcel/types': 2.10.0(@parcel/core@2.10.0) '@parcel/utils': 2.10.0 nullthrows: 1.1.1 + dev: true /@phenomnomnominal/tsquery@5.0.1(typescript@5.2.2): resolution: {integrity: sha512-3nVv+e2FQwsW8Aw6qTU6f+1rfcJ3hrcnvH/mu9i8YhxO+9sqbOfpL8m6PbET5+xKOlz/VSbp0RoYWYCtIsnmuA==} @@ -6343,6 +6426,7 @@ packages: dependencies: normalize-path: 3.0.0 picomatch: 2.3.1 + dev: true /app-root-path@3.1.0: resolution: {integrity: sha512-biN3PwB2gUtjaYy/isrU3aNWI5w+fAfvHkSvCKeQGxhmYpwKFUxudR3Yya+KqVRHBmEDYh+/lTozYCFbmzX4nA==} @@ -6919,6 +7003,7 @@ packages: /binary-extensions@2.2.0: resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==} engines: {node: '>=8'} + dev: true /bip39@3.1.0: resolution: {integrity: sha512-c9kiwdk45Do5GL0vJMe7tS95VjCii65mYAH7DfWl3uW8AVzXKQVUm64i3hzVybBDMp9r7j9iNxR85+ul8MdN/A==} @@ -7520,6 +7605,7 @@ packages: readdirp: 3.6.0 optionalDependencies: fsevents: 2.3.2 + dev: true /chownr@1.1.4: resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==} @@ -7527,6 +7613,7 @@ packages: /chrome-trace-event@1.0.3: resolution: {integrity: sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==} engines: {node: '>=6.0'} + dev: true /ci-info@3.8.0: resolution: {integrity: sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==} @@ -7709,6 +7796,7 @@ packages: /clone@2.1.2: resolution: {integrity: sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==} engines: {node: '>=0.8'} + dev: true /clsx@1.2.1: resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==} @@ -8394,6 +8482,13 @@ packages: source-map-js: 1.0.2 dev: true + /css-vendor@2.0.8: + resolution: {integrity: sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==} + dependencies: + '@babel/runtime': 7.23.1 + is-in-browser: 1.1.3 + dev: false + /css-what@6.1.0: resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==} engines: {node: '>= 6'} @@ -8849,10 +8944,12 @@ packages: resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==} engines: {node: '>=0.10'} hasBin: true + dev: true /detect-libc@2.0.2: resolution: {integrity: sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==} engines: {node: '>=8'} + dev: true /detect-newline@3.1.0: resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==} @@ -9035,6 +9132,7 @@ packages: /dotenv-expand@5.1.0: resolution: {integrity: sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==} + dev: true /dotenv-parse-variables@2.0.0: resolution: {integrity: sha512-/Tezlx6xpDqR6zKg1V4vLCeQtHWiELhWoBz5A/E0+A1lXN9iIkNbbfc4THSymS0LQUo8F1PMiIwVG8ai/HrnSA==} @@ -9063,6 +9161,7 @@ packages: /dotenv@7.0.0: resolution: {integrity: sha512-M3NhsLbV1i6HuGzBUH8vXrtxOk+tWmzWKDMbAVSUp3Zsjm7ywFeuwrUXhmhQyRK1q5B5GGy7hcXPbj3bnfZg2g==} engines: {node: '>=6'} + dev: true /dotenv@8.6.0: resolution: {integrity: sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==} @@ -10509,6 +10608,7 @@ packages: engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} os: [darwin] requiresBuild: true + dev: true optional: true /function-bind@1.1.1: @@ -11393,6 +11493,10 @@ packages: hasBin: true dev: true + /hyphenate-style-name@1.0.4: + resolution: {integrity: sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==} + dev: false + /iconv-lite@0.4.24: resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==} engines: {node: '>=0.10.0'} @@ -11469,6 +11573,7 @@ packages: /immutable@4.3.0: resolution: {integrity: sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==} + dev: true /import-fresh@3.3.0: resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} @@ -11664,6 +11769,7 @@ packages: engines: {node: '>=8'} dependencies: binary-extensions: 2.2.0 + dev: true /is-boolean-object@1.1.2: resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==} @@ -11762,6 +11868,10 @@ packages: resolution: {integrity: sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==} dev: false + /is-in-browser@1.1.3: + resolution: {integrity: sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==} + dev: false + /is-inside-container@1.0.0: resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==} engines: {node: '>=14.16'} @@ -12774,6 +12884,68 @@ packages: verror: 1.10.0 dev: true + /jss-plugin-camel-case@10.10.0: + resolution: {integrity: sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==} + dependencies: + '@babel/runtime': 7.23.1 + hyphenate-style-name: 1.0.4 + jss: 10.10.0 + dev: false + + /jss-plugin-default-unit@10.10.0: + resolution: {integrity: sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==} + dependencies: + '@babel/runtime': 7.23.1 + jss: 10.10.0 + dev: false + + /jss-plugin-global@10.10.0: + resolution: {integrity: sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==} + dependencies: + '@babel/runtime': 7.23.1 + jss: 10.10.0 + dev: false + + /jss-plugin-nested@10.10.0: + resolution: {integrity: sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==} + dependencies: + '@babel/runtime': 7.23.1 + jss: 10.10.0 + tiny-warning: 1.0.3 + dev: false + + /jss-plugin-props-sort@10.10.0: + resolution: {integrity: sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==} + dependencies: + '@babel/runtime': 7.23.1 + jss: 10.10.0 + dev: false + + /jss-plugin-rule-value-function@10.10.0: + resolution: {integrity: sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==} + dependencies: + '@babel/runtime': 7.23.1 + jss: 10.10.0 + tiny-warning: 1.0.3 + dev: false + + /jss-plugin-vendor-prefixer@10.10.0: + resolution: {integrity: sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==} + dependencies: + '@babel/runtime': 7.23.1 + css-vendor: 2.0.8 + jss: 10.10.0 + dev: false + + /jss@10.10.0: + resolution: {integrity: sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==} + dependencies: + '@babel/runtime': 7.23.1 + csstype: 3.1.2 + is-in-browser: 1.1.3 + tiny-warning: 1.0.3 + dev: false + /jsx-ast-utils@3.3.3: resolution: {integrity: sha512-fYQHZTZ8jSfmWZ0iyzfwiU4WDX4HpHbMCZ3gPlWYiCl3BoeOTsqKBqnTVfH2rYT7eP5c3sVbeSPHnnJOaTrWiw==} engines: {node: '>=4.0'} @@ -13042,6 +13214,7 @@ packages: '@lmdb/lmdb-linux-arm64': 2.8.5 '@lmdb/lmdb-linux-x64': 2.8.5 '@lmdb/lmdb-win32-x64': 2.8.5 + dev: true /load-json-file@4.0.0: resolution: {integrity: sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==} @@ -13620,12 +13793,14 @@ packages: '@msgpackr-extract/msgpackr-extract-linux-arm64': 3.0.2 '@msgpackr-extract/msgpackr-extract-linux-x64': 3.0.2 '@msgpackr-extract/msgpackr-extract-win32-x64': 3.0.2 + dev: true optional: true /msgpackr@1.9.5: resolution: {integrity: sha512-/IJ3cFSN6Ci3eG2wLhbFEL6GT63yEaoN/R5My2QkV6zro+OJaVRLPlwvxY7EtHYSmDlQpk8stvOQTL2qJFkDRg==} optionalDependencies: msgpackr-extract: 3.0.2 + dev: true /multibase@0.6.1: resolution: {integrity: sha512-pFfAwyTjbbQgNc3G7D48JkJxWtoJoBMaR4xQUOuB8RnCgRqaYmWNFeJTTvrJ2w51bjLq2zTby6Rqj9TQ9elSUw==} @@ -13744,6 +13919,7 @@ packages: /node-addon-api@6.1.0: resolution: {integrity: sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==} + dev: true /node-fetch@2.6.11: resolution: {integrity: sha512-4I6pdBY1EthSqDmJkiNk3JIT8cswwR9nfeW/cPdUagJYEQG7R95WRH74wpz7ma8Gh/9dI9FP+OU+0E4FvtA55w==} @@ -13777,6 +13953,7 @@ packages: resolution: {integrity: sha512-YlCCc6Wffkx0kHkmam79GKvDQ6x+QZkMjFGrIMxgFNILFvGSbCp2fCBC55pGTT9gVaz8Na5CLmxt/urtzRv36w==} hasBin: true requiresBuild: true + dev: true optional: true /node-gyp-build-optional-packages@5.1.1: @@ -13784,6 +13961,7 @@ packages: hasBin: true dependencies: detect-libc: 2.0.2 + dev: true /node-gyp-build@4.6.0: resolution: {integrity: sha512-NTZVKn9IylLwUzaKjkas1e4u2DLNcV4rdYagA4PWdPwW87Bi7z+BznyKSRwS/761tV/lzCGXplWsiaMjLqP2zQ==} @@ -13828,6 +14006,7 @@ packages: /normalize-path@3.0.0: resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} engines: {node: '>=0.10.0'} + dev: true /normalize-url@2.0.1: resolution: {integrity: sha512-D6MUW4K/VzoJ4rJ01JFKxDrtY1v9wrgzCX5f2qj/lzH1m/lW6MhUZFKerVsnyjOhOsYzI9Kqqak+10l4LvLpMw==} @@ -13872,6 +14051,7 @@ packages: /nullthrows@1.1.1: resolution: {integrity: sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw==} + dev: true /number-to-bn@1.7.0: resolution: {integrity: sha512-wsJ9gfSz1/s4ZsJN01lyonwuxA1tml6X1yBDnfpMglypcBRFZZkus26EdPSlqS5GJfYddVZa22p3VNb3z5m5Ig==} @@ -14186,6 +14366,7 @@ packages: /ordered-binary@1.4.1: resolution: {integrity: sha512-9LtiGlPy982CsgxZvJGNNp2/NnrgEr6EAyN3iIEP3/8vd3YLgAZQHbQ75ZrkfBRGrNg37Dk3U6tuVb+B4Xfslg==} + dev: true /os-browserify@0.3.0: resolution: {integrity: sha512-gjcpUc3clBf9+210TRaDWbf+rZZZEshZ+DlXMRCeAjp0xhTrnQsKHypIy1J3d5hKdUzj69t708EHtU8P6bUn0A==} @@ -15292,6 +15473,7 @@ packages: engines: {node: '>=8.10.0'} dependencies: picomatch: 2.3.1 + dev: true /readline@1.3.0: resolution: {integrity: sha512-k2d6ACCkiNYz222Fs/iNze30rRJ1iIicW7JuX/7/cozvih6YCkFZH+J6mAFDVgv0dRBaAyr4jDqC95R2y4IADg==} @@ -15691,6 +15873,7 @@ packages: chokidar: 3.5.3 immutable: 4.3.0 source-map-js: 1.0.2 + dev: true /saxes@6.0.0: resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==} @@ -16732,6 +16915,10 @@ packages: resolution: {integrity: sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==} dev: false + /tiny-warning@1.0.3: + resolution: {integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==} + dev: false + /titleize@3.0.0: resolution: {integrity: sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==} engines: {node: '>=12'} @@ -17328,6 +17515,7 @@ packages: /utility-types@3.10.0: resolution: {integrity: sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg==} engines: {node: '>= 4'} + dev: true /utils-merge@1.0.1: resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==} @@ -17507,6 +17695,7 @@ packages: /weak-lru-cache@1.2.2: resolution: {integrity: sha512-DEAoo25RfSYMuTGc9vPJzZcZullwIqRDSI9LOy+fkCJPi6hykCnfKaXTuPBDuXAUcqHXyOgFtHNp/kB2FjYHbw==} + dev: true /web-worker@1.2.0: resolution: {integrity: sha512-PgF341avzqyx60neE9DD+XS26MMNMoUQRz9NOZwW32nPQrF6p77f1htcnjBSEV8BGMKZ16choqUG4hyI0Hx7mA==}