fix(VeraxRequirement): show value in a popover

src/requirements/Verax/VeraxRequirement.tsx

@@ -1,3 +1,12 @@
+import { anchorVariants } from "@/components/ui/Anchor"
+import { Button } from "@/components/ui/Button"
+import {
+  Popover,
+  PopoverContent,
+  PopoverPortal,
+  PopoverTrigger,
+} from "@/components/ui/Popover"
+import { ArrowSquareOut } from "@phosphor-icons/react/dist/ssr"
 import {
   Requirement,
   RequirementProps,
@@ -8,10 +17,22 @@ import { DataBlockWithCopy } from "components/common/DataBlockWithCopy"
 import shortenHex from "utils/shortenHex"
 import { VeraxRequirementFooter } from "./VeraxRequirementFooter"
 
+const formatValue = (val: string) => {
+  let value = val
+  try {
+    value = JSON.stringify(JSON.parse(val), undefined, 2)
+  } catch {
+    // If we can't format it, we just return the original value
+  }
+
+  return value
+}
+
 const VeraxRequirement = (props: RequirementProps): JSX.Element => {
   const { type, data } = useRequirementContext<
     "VERAX_ATTEST" | "VERAX_ATTESTED_BY"
   >()
+
   return (
     <Requirement
       image="/requirementLogos/verax.png"
@@ -44,8 +65,25 @@ const VeraxRequirement = (props: RequirementProps): JSX.Element => {
           <DataBlock>{data.key}</DataBlock>
           {data.val && (
             <>
-              <span>{" and value "}</span>
-              <DataBlock>{data.val}</DataBlock>
+              <span>{" and  "}</span>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="unstyled"
+                    className={anchorVariants({
+                      className: "h-auto p-0",
+                    })}
+                    rightIcon={<ArrowSquareOut weight="bold" />}
+                  >
+                    a specific value
+                  </Button>
+                </PopoverTrigger>
+                <PopoverPortal>
+                  <PopoverContent side="bottom" className="w-max max-w-[100vw]">
+                    <pre className="text-xs">{formatValue(data.val)}</pre>
+                  </PopoverContent>
+                </PopoverPortal>
+              </Popover>
             </>
           )}
         </>