Copy POD text (#2178)

Not pretty, but it works. Someone with more UI clue is welcome to do some styling. https://github.com/user-attachments/assets/51ae3fdc-4692-46fe-a225-68d6b4b3e529 CC @saurfang @rrrliu
proofcarryingdata · Nov 15, 2024 · cb1274b · cb1274b
1 parent 7746ee7
commit cb1274b
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 30 deletions.
diff --git a/packages/ui/pod-pcd-ui/src/renderers/DefaultPODPCDCardBody.tsx b/packages/ui/pod-pcd-ui/src/renderers/DefaultPODPCDCardBody.tsx
@@ -1,4 +1,10 @@
-import { Card, HiddenText, styled, TextContainer } from "@pcd/passport-ui";
+import {
+  Card,
+  CardWithCopy,
+  HiddenText,
+  styled,
+  TextContainer
+} from "@pcd/passport-ui";
 import { podEntriesToJSON } from "@pcd/pod";
 import { PODPCD } from "@pcd/pod-pcd";
 
@@ -12,26 +18,38 @@ const StyledPre = styled.pre`
 export function DefaultPODPCDCardBody({ pcd }: { pcd: PODPCD }): JSX.Element {
   return (
     <div style={{ display: "flex", gap: 8, flexDirection: "column" }}>
-      <TextContainer
-        style={{
-          overflow: "auto",
-          maxHeight: "280px",
-          backgroundColor: "#F6F8FD"
+      <CardWithCopy
+        title=""
+        onCopy={() => {
+          return navigator.clipboard.writeText(
+            JSON.stringify(pcd.pod.toJSON(), null, 2)
+          );
         }}
       >
-        <StyledPre>
-          {JSON.stringify(podEntriesToJSON(pcd.claim.entries), null, 2)}
-        </StyledPre>
-      </TextContainer>
-      <Card title="EdDSA PUBLIC KEY">
-        <HiddenText
-          text={pcd.claim.signerPublicKey}
-          style={{ overflowX: "auto" }}
-        />
-      </Card>
-      <Card title="EdDSA SIGNATURE">
-        <HiddenText text={pcd.proof.signature} style={{ overflowX: "auto" }} />
-      </Card>
+        <TextContainer
+          style={{
+            overflow: "auto",
+            maxHeight: "280px",
+            backgroundColor: "#F6F8FD"
+          }}
+        >
+          <StyledPre>
+            {JSON.stringify(podEntriesToJSON(pcd.claim.entries), null, 2)}
+          </StyledPre>
+        </TextContainer>
+        <Card title="EdDSA PUBLIC KEY">
+          <HiddenText
+            text={pcd.claim.signerPublicKey}
+            style={{ overflowX: "auto" }}
+          />
+        </Card>
+        <Card title="EdDSA SIGNATURE">
+          <HiddenText
+            text={pcd.proof.signature}
+            style={{ overflowX: "auto" }}
+          />
+        </Card>
+      </CardWithCopy>
     </div>
   );
 }
diff --git a/packages/ui/pod-pcd-ui/tsconfig.json b/packages/ui/pod-pcd-ui/tsconfig.json
@@ -1,23 +1,15 @@
 {
   "extends": "@pcd/tsconfig/ts-library.json",
   "compilerOptions": {
-    "lib": [],
+    "lib": ["DOM"],
     "outDir": "dist",
     "declarationDir": "dist/types",
     // Include all source files, including tests
     "rootDir": "."
   },
   // Some artifact-including packages need to import a JSON file
-  "include": [
-    "src",
-    "test",
-    "artifacts/*.json"
-  ],
-  "exclude": [
-    "dist",
-    "build",
-    "node_modules"
-  ],
+  "include": ["src", "test", "artifacts/*.json"],
+  "exclude": ["dist", "build", "node_modules"],
   // DO NOT MODIFY MANUALLY BEYOND THIS POINT
   // References are automatically maintained by `yarn fix-references`
   "references": [