Format typed data for sign messsage policy

cartridge-gg · Dec 2, 2024 · 7c33f6f · 7c33f6f
1 parent 7ec900d
commit 7c33f6f
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 6 deletions.
diff --git a/packages/keychain/src/components/SessionSummary.tsx b/packages/keychain/src/components/SessionSummary.tsx
@@ -16,8 +16,12 @@ import {
   CardIcon,
   PencilIcon,
   ScrollIcon,
+  CheckboxIcon,
+  ArrowTurnDownIcon,
+  Badge,
 } from "@cartridge/ui-next";
 import { SessionSummary as SessionSummaryType } from "@cartridge/utils";
+import { StarknetEnumType, StarknetMerkleType } from "starknet";
 // import { useSessionSummary } from "@cartridge/utils";
 
 export function SessionSummary({}: { policies: Policy[] }) {
@@ -62,6 +66,80 @@ export function SessionSummary({}: { policies: Policy[] }) {
         >
           <CardTitle>Sign Messages</CardTitle>
         </CardHeader>
+
+        <Accordion type="single" collapsible>
+          <AccordionItem value="item-1">
+            <CardContent>
+              <AccordionTrigger>
+                You are agreeing to sign messages in the following format
+              </AccordionTrigger>
+            </CardContent>
+
+            <AccordionContent>
+              {summary.messages.map((m, i) => (
+                <CardContent
+                  key={i}
+                  className="text-muted-foreground flex flex-col gap-3"
+                >
+                  <div className="flex flex-col gap-3">
+                    <div className="flex items-center gap-1">
+                      <CheckboxIcon variant="minus-line" />
+                      <div>types</div>
+                    </div>
+
+                    <div className="ml-5 flex flex-col gap-3">
+                      {Object.entries(m.types).map(([name, types]) => (
+                        <div key={name} className="flex flex-col gap-3">
+                          <div className="flex items-center gap-1">
+                            <CheckboxIcon variant="minus-line" />
+                            <div>{name}</div>
+                          </div>
+                          <div className="ml-5 flex flex-col gap-3">
+                            {types.map((t) => (
+                              <div key={t.name} className="flex items-center">
+                                <ArrowTurnDownIcon />
+                                <div className="flex items-center gap-2">
+                                  <div className="flex items-center gap-1">
+                                    name: <Badge>{t.name}</Badge>
+                                  </div>
+                                  <div className="flex items-center gap-1">
+                                    type: <Badge>{t.type}</Badge>
+                                  </div>
+                                  {["enum", "merkletree"].includes(t.name) && (
+                                    <div className="flex items-center gap-1">
+                                      contains:{" "}
+                                      <Badge>
+                                        {
+                                          (
+                                            t as
+                                              | StarknetEnumType
+                                              | StarknetMerkleType
+                                          ).contains
+                                        }
+                                      </Badge>
+                                    </div>
+                                  )}
+                                </div>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div className="flex items-center gap-3">
+                    <ArrowTurnDownIcon />
+                    <div className="flex items-center gap-1">
+                      primaryType
+                      <Badge>{m.primaryType}</Badge>
+                    </div>
+                  </div>
+                </CardContent>
+              ))}
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
       </Card>
     </div>
   );
@@ -92,7 +170,7 @@ function Contract({
               You are agreeing to automate{" "}
               <span className="text-accent-foreground font-bold">
                 {policies.length} method
-                {policies.length > 1 ? "s" : ""}
+                {policies.length > 0 ? "s" : ""}
               </span>
             </AccordionTrigger>
           </CardContent>

diff --git a/packages/ui-next/src/components/icons/utility/arrow-turn-down.tsx b/packages/ui-next/src/components/icons/utility/arrow-turn-down.tsx
@@ -0,0 +1,23 @@
+import { forwardRef, memo } from "react";
+import { iconVariants } from "../utils";
+import { IconProps } from "../types";
+
+export const ArrowTurnDownIcon = memo(
+  forwardRef<SVGSVGElement, IconProps>(
+    ({ className, size, ...props }, forwardedRef) => (
+      <svg
+        viewBox="0 0 24 24"
+        className={iconVariants({ size, className })}
+        ref={forwardedRef}
+        {...props}
+      >
+        <path
+          d="M5.92826 6.70261V6H4.52304V6.70261V13.4945V14.1971H5.22565H16.7865L14.4738 16.5099L13.9761 17.0076L14.9685 18L15.4662 17.5023L18.9792 13.9893L19.4769 13.4916L18.9792 12.9939L15.4662 9.48085L14.9685 8.98317L13.9761 9.98146L14.4738 10.4791L16.7865 12.7919H5.92826V6.70261Z"
+          fill="currentColor"
+        />
+      </svg>
+    ),
+  ),
+);
+
+ArrowTurnDownIcon.displayName = "ArrowTurnDownIcon";
diff --git a/packages/ui-next/src/components/icons/utility/index.ts b/packages/ui-next/src/components/icons/utility/index.ts
@@ -1,5 +1,6 @@
 export * from "./achievement";
 export * from "./alert";
+export * from "./arrow-turn-down";
 export * from "./check";
 export * from "./checkbox-unchecked";
 export * from "./chevron-left";

diff --git a/packages/ui-next/src/components/primitives/badge.tsx b/packages/ui-next/src/components/primitives/badge.tsx
@@ -4,14 +4,16 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none uppercase",
+  "inline-flex items-center rounded-md px-1 py-0.5 text-xs font-semibold transition-colors focus:outline-none",
   {
     variants: {
       variant: {
         default:
+          "border-transparent bg-muted text-foreground hover:bg-muted/80",
+        primary:
           "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        muted:
+          "border-transparent bg-muted text-muted-foreground hover:bg-muted/80",
         destructive:
           "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
         outline: "text-foreground",

diff --git a/packages/ui-next/src/stories/badge.stories.tsx b/packages/ui-next/src/stories/badge.stories.tsx
@@ -17,16 +17,24 @@ export const Default: Story = {
   },
 };
 
-export const Secondary: Story = {
+export const Primary: Story = {
   args: {
     children: "approved",
-    variant: "secondary",
+    variant: "primary",
+  },
+};
+
+export const Muted: Story = {
+  args: {
+    children: "approved",
+    variant: "muted",
   },
 };
 
 export const Tab: Story = {
   args: {
     children: "100",
     className: "rounded-full",
+    vairant: "primary",
   },
 };