feat: adding styles to display proof and connected identity

CryptKeeperZK · Oct 17, 2023 · 51501e5 · 51501e5
1 parent 721c671
commit 51501e5
Show file tree

Hide file tree

Showing 8 changed files with 165 additions and 22 deletions.
diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -18,6 +18,7 @@
     "@cryptkeeperzk/providers": "workspace:^",
     "@cryptkeeperzk/semaphore-identity": "^3.10.3",
     "@cryptkeeperzk/types": "workspace:^",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@mui/material": "^5.14.13",
     "@parcel/transformer-sass": "^2.10.0",
     "bigint-conversion": "^2.4.2",

diff --git a/packages/demo/src/components/ActionBox/ActionBox.tsx b/packages/demo/src/components/ActionBox/ActionBox.tsx
@@ -57,6 +57,8 @@ export const ActionBox = <T, U>({
       </div>
 
       {isShowCode && (
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
         <CopyBlock codeBlock showLineNumbers wrapLines language="typescript" text={actionCode} theme={irBlack} />
       )}
     </Box>

diff --git a/packages/demo/src/components/ConnectedIdentity/ConnectedIdentity.scss b/packages/demo/src/components/ConnectedIdentity/ConnectedIdentity.scss
@@ -0,0 +1,34 @@
+@import "../../utils/variables";
+
+// TODO: get rid of these styles
+.identity-row {
+  &__input-field {
+    background-color: transparent;
+
+    input {
+      border: 0;
+      border-bottom: 2px solid $primary-green;
+      outline: none;
+      transition: 0.2s ease-in-out;
+      box-sizing: border-box;
+      background-color: transparent;
+
+      color: inherit;
+      font-family: inherit;
+      font-weight: inherit;
+      font-size: inherit;
+      line-height: inherit;
+      padding: inherit;
+      width: 100%;
+    }
+  }
+
+  &__menu-icon {
+    font-size: 0.8125rem !important;
+    color: $gray-600;
+
+    &:hover {
+      color: $gray-300;
+    }
+  }
+}
diff --git a/packages/demo/src/components/ConnectedIdentity/ConnectedIdentity.tsx b/packages/demo/src/components/ConnectedIdentity/ConnectedIdentity.tsx
@@ -1,3 +1,11 @@
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+
+import { Icon } from "@src/components/Icon";
+import logoSVG from "@src/static/icons/logo.svg";
+
+import "./ConnectedIdentity.scss";
+
 interface IConnectedIdentityProps {
   identityCommitment?: string;
   identityName?: string;
@@ -9,27 +17,57 @@ export const ConnectedIdentity = ({
   identityName = "",
   identityHost = "",
 }: IConnectedIdentityProps): JSX.Element => (
-  <div>
-    <h2>Connected identity:</h2>
+  <Box
+    className="popup"
+    sx={{
+      p: 2,
+      display: "flex",
+      alignItems: "center",
+      flexWrap: "nowrap",
+      borderBottom: "1px solid",
+      borderColor: "text.800",
+      border: "2px solid $gray-800",
+      cursor: "pointer",
+      height: "100%",
+      justifyContent: "center",
+    }}
+  >
+    <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", p: 3, flexGrow: 1 }}>
+      <Icon size={8} url={logoSVG} />
 
-    {identityCommitment && (
-      <div>
-        <strong>Commitment:</strong>
+      <Typography sx={{ pt: 3, fontWeight: "bold", color: "primary.main", alignItems: "center" }} variant="h5">
+        CryptKeeper Connected Identity
+      </Typography>
+    </Box>
 
-        <p data-testid="commitment">{identityCommitment}</p>
+    <div className="popup__content">
+      <div className="identity-info">
+        <Typography className="identity-name" color="text.primary" data-testid="connected-name">
+          <strong>Name: </strong>
+
+          {identityName}
+        </Typography>
       </div>
-    )}
 
-    <div>
-      <strong>Name:</strong>
+      {identityHost && (
+        <Typography className="identity-name" color="text.primary" data-testid="connected-urlOrigin">
+          <strong>Host: </strong>
 
-      <p data-testid="connected-name">{identityName}</p>
-    </div>
+          {identityHost}
+        </Typography>
+      )}
 
-    <div>
-      <strong>Host:</strong>
+      {identityCommitment ? (
+        <Typography className="identity-name" color="text.primary" data-testid="commitment">
+          <strong>Commitment: </strong>
 
-      <p data-testid="connected-urlOrigin">{identityHost}</p>
+          {identityCommitment}
+        </Typography>
+      ) : (
+        <Typography className="identity-name" color="text.primary" data-testid="commitment">
+          You need to ask to reveal identity Commitment
+        </Typography>
+      )}
     </div>
-  </div>
+  </Box>
 );
diff --git a/packages/demo/src/components/DisplayProof/DisplayProof.tsx b/packages/demo/src/components/DisplayProof/DisplayProof.tsx
@@ -1,15 +1,18 @@
 import { ISemaphoreFullProof, IRLNFullProof, IMerkleProof } from "@cryptkeeperzk/types";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
 
 interface IDisplayProofProps {
   proof?: ISemaphoreFullProof | IRLNFullProof | IMerkleProof;
 }
 
 export const DisplayProof = ({ proof = undefined }: IDisplayProofProps): JSX.Element => (
-  <div>
-    <h2>Generated proof output:</h2>
+  <Box
+    className="popup-proof"
+    sx={{ p: 3, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}
+  >
+    <Typography variant="h6">Generated proof output:</Typography>
 
-    <div>
-      <pre data-testid="proof-json">{JSON.stringify(proof, null, 2)}</pre>
-    </div>
-  </div>
+    <pre data-testid="proof-json">{JSON.stringify(proof, null, 2)}</pre>
+  </Box>
 );
diff --git a/packages/demo/src/styles.scss b/packages/demo/src/styles.scss
@@ -55,6 +55,52 @@ a {
     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 {
@@ -76,7 +122,15 @@ a {
   }
 
   .popup {
-    width: 36rem;
+    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;

diff --git a/packages/demo/src/utils/index.ts b/packages/demo/src/utils/index.ts
@@ -59,3 +59,11 @@ export const genMockVerifiableCredential = (credentialType: string): IVerifiable
 export const genMockVerifiablePresentationRequest = (): IVerifiablePresentationRequest => ({
   request: "Please provide your University Degree Credential AND Drivers License Credential.",
 });
+
+export const ellipsify = (text: string, start = 6, end = 4): string => {
+  if (text.length - end <= start) {
+    return text;
+  }
+
+  return `${text.slice(0, start)}...${text.slice(text.length - end, text.length)}`;
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml