From b755f380a011ded621426412230ee67efca3c6e2 Mon Sep 17 00:00:00 2001
From: Junichi Sugiura <jun.sugiura.jp@gmail.com>
Date: Wed, 8 Jan 2025 22:31:55 +0900
Subject: [PATCH] Fix session summary style (#1256)

---
 .../connect/CreateSession.stories.tsx         | 110 ++++++-------
 .../src/components/session/AccordionCard.tsx  |   9 +-
 .../src/components/session/AggregateCard.tsx  | 148 ++++++------------
 .../src/components/session/ContractCard.tsx   |   7 +-
 .../src/components/session/MessageCard.tsx    |  31 ++--
 5 files changed, 134 insertions(+), 171 deletions(-)

diff --git a/packages/keychain/src/components/connect/CreateSession.stories.tsx b/packages/keychain/src/components/connect/CreateSession.stories.tsx
index d08e5aa61..558d0d07f 100644
--- a/packages/keychain/src/components/connect/CreateSession.stories.tsx
+++ b/packages/keychain/src/components/connect/CreateSession.stories.tsx
@@ -19,6 +19,60 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+const messages = [
+  {
+    types: {
+      StarknetDomain: [
+        {
+          name: "name",
+          type: "shortstring",
+        },
+        {
+          name: "version",
+          type: "shortstring",
+        },
+        {
+          name: "chainId",
+          type: "shortstring",
+        },
+        {
+          name: "revision",
+          type: "shortstring",
+        },
+      ],
+      "eternum-Message": [
+        {
+          name: "identity",
+          type: "ContractAddress",
+        },
+        {
+          name: "channel",
+          type: "shortstring",
+        },
+        {
+          name: "content",
+          type: "string",
+        },
+        {
+          name: "timestamp",
+          type: "felt",
+        },
+        {
+          name: "salt",
+          type: "felt",
+        },
+      ],
+    },
+    primaryType: "eternum-Message",
+    domain: {
+      name: "Eternum",
+      version: "1",
+      chainId: "SN_SEPOLIA",
+      revision: "1",
+    },
+  },
+];
+
 export const Default: Story = {
   args: {
     policies: parseSessionPolicies({
@@ -113,59 +167,7 @@ export const Default: Story = {
               ],
             },
         },
-        messages: [
-          {
-            types: {
-              StarknetDomain: [
-                {
-                  name: "name",
-                  type: "shortstring",
-                },
-                {
-                  name: "version",
-                  type: "shortstring",
-                },
-                {
-                  name: "chainId",
-                  type: "shortstring",
-                },
-                {
-                  name: "revision",
-                  type: "shortstring",
-                },
-              ],
-              "eternum-Message": [
-                {
-                  name: "identity",
-                  type: "ContractAddress",
-                },
-                {
-                  name: "channel",
-                  type: "shortstring",
-                },
-                {
-                  name: "content",
-                  type: "string",
-                },
-                {
-                  name: "timestamp",
-                  type: "felt",
-                },
-                {
-                  name: "salt",
-                  type: "felt",
-                },
-              ],
-            },
-            primaryType: "eternum-Message",
-            domain: {
-              name: "Eternum",
-              version: "1",
-              chainId: "SN_SEPOLIA",
-              revision: "1",
-            },
-          },
-        ],
+        messages,
       },
     }),
     onConnect: () => {},
@@ -179,7 +181,7 @@ export const WithPreset: Story = {
   args: {
     policies: parseSessionPolicies({
       verified: true,
-      policies: controllerConfigs["dope-wars"].policies!,
+      policies: { ...controllerConfigs["dope-wars"].policies!, messages },
     }),
     onConnect: () => {},
   },
diff --git a/packages/keychain/src/components/session/AccordionCard.tsx b/packages/keychain/src/components/session/AccordionCard.tsx
index f0fb4fb2f..42c442841 100644
--- a/packages/keychain/src/components/session/AccordionCard.tsx
+++ b/packages/keychain/src/components/session/AccordionCard.tsx
@@ -7,6 +7,7 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
+  cn,
 } from "@cartridge/ui-next";
 
 interface AccordionCardProps {
@@ -16,6 +17,7 @@ interface AccordionCardProps {
   children: React.ReactNode;
   trigger?: React.ReactNode;
   isExpanded?: boolean;
+  className?: string;
 }
 
 export function AccordionCard({
@@ -25,10 +27,11 @@ export function AccordionCard({
   children,
   trigger,
   isExpanded,
+  className,
 }: AccordionCardProps) {
   return (
     <Card>
-      <CardHeader icon={icon} className="pl-0">
+      <CardHeader icon={icon}>
         <div className="flex items-center justify-between">
           {typeof title === "string" ? (
             <CardTitle className="text-foreground">{title}</CardTitle>
@@ -45,12 +48,12 @@ export function AccordionCard({
           collapsible
           defaultValue={isExpanded ? "item" : undefined}
         >
-          <AccordionItem value="item" className="flex flex-col gap-4">
+          <AccordionItem value="item" className="flex flex-col gap-2">
             <AccordionTrigger className="text-xs text-muted-foreground">
               {trigger}
             </AccordionTrigger>
 
-            <AccordionContent className="text-xs flex flex-col bg-background border border-background rounded-md gap-px">
+            <AccordionContent className={cn("flex flex-col", className)}>
               {children}
             </AccordionContent>
           </AccordionItem>
diff --git a/packages/keychain/src/components/session/AggregateCard.tsx b/packages/keychain/src/components/session/AggregateCard.tsx
index 2f2b8f462..4cf0eb9d7 100644
--- a/packages/keychain/src/components/session/AggregateCard.tsx
+++ b/packages/keychain/src/components/session/AggregateCard.tsx
@@ -1,7 +1,5 @@
-import React, { Fragment } from "react";
-import { Card } from "@cartridge/ui-next";
+import React from "react";
 import { formatAddress } from "@cartridge/utils";
-import { Divider, HStack, Spacer, Stack, Text, VStack } from "@chakra-ui/react";
 import { useExplorer } from "@starknet-react/core";
 import { constants } from "starknet";
 import { Method } from "@cartridge/presets";
@@ -9,6 +7,7 @@ import { useChainId } from "@/hooks/connection";
 import { ParsedSessionPolicies } from "@/hooks/session";
 import { Link } from "react-router-dom";
 import { AccordionCard } from "./AccordionCard";
+import { MessageContent } from "./MessageCard";
 
 interface AggregateCardProps {
   title: string;
@@ -42,109 +41,54 @@ export function AggregateCard({ title, icon, policies }: AggregateCardProps) {
           </span>
         </div>
       }
+      className="gap-2"
     >
-      <Card>
-        {Object.entries(policies.contracts || {}).map(
-          ([address, { name, methods }]) => (
-            <Fragment key={address}>
-              <HStack py={4}>
-                <Text color="text.primary" fontWeight="bold">
-                  {name}
-                </Text>
-                <Spacer />
-                <Link
-                  to={
-                    chainId === constants.StarknetChainId.SN_MAIN ||
-                    chainId === constants.StarknetChainId.SN_SEPOLIA
-                      ? explorer.contract(address)
-                      : `#` // TODO: Add explorer for worlds.dev
-                  }
-                  target="_blank"
-                  className="text-muted-foreground hover:underline"
-                >
-                  {formatAddress(address, { first: 5, last: 5 })}
-                </Link>
-              </HStack>
-              <Stack
-                border="1px solid"
-                spacing={0}
-                borderColor="darkGray.800"
-                borderRadius="md"
-                divider={<Divider borderColor="solid.bg" />}
+      {Object.entries(policies.contracts || {}).map(
+        ([address, { name, methods }]) => (
+          <div key={address} className="flex flex-col gap-2">
+            <div className="flex items-center justify-between bg-secondary text-xs">
+              <div className="py-2 font-bold">{name}</div>
+              <Link
+                to={
+                  chainId === constants.StarknetChainId.SN_MAIN ||
+                  chainId === constants.StarknetChainId.SN_SEPOLIA
+                    ? explorer.contract(address)
+                    : `#` // TODO: Add explorer for worlds.dev
+                }
+                target="_blank"
+                className="text-muted-foreground hover:underline"
               >
-                {methods.map((method: Method) => (
-                  <VStack key={method.name} p={3} gap={3} align="flex-start">
-                    <HStack w="full">
-                      <Text
-                        fontSize="xs"
-                        color="text.primary"
-                        fontWeight="bold"
-                      >
-                        {method.name}
-                      </Text>
-                      <Spacer />
-                      <Text
-                        fontSize="xs"
-                        color="text.secondaryAccent"
-                        fontWeight="bold"
-                      >
-                        {method.entrypoint}
-                      </Text>
-                    </HStack>
-                    {method.description && (
-                      <Text fontSize="xs" color="text.secondary">
-                        {method.description}
-                      </Text>
-                    )}
-                  </VStack>
-                ))}
-              </Stack>
-            </Fragment>
-          ),
-        )}
+                {formatAddress(address, { first: 5, last: 5 })}
+              </Link>
+            </div>
 
-        {policies.messages?.map((message) => (
-          <VStack key={message.primaryType} py={4} w="full" align="flex-start">
-            <Text
-              fontSize="sm"
-              className="text-foreground"
-              fontWeight="bold"
-              mb={4}
-            >
-              Messages
-            </Text>
-            <Stack
-              border="1px solid"
-              spacing={0}
-              borderColor="darkGray.800"
-              borderRadius="md"
-              divider={<Divider borderColor="solid.bg" />}
-              w="full"
-            >
-              {Object.entries(message.types).map(([typeName, fields]) => (
-                <VStack key={typeName} p={3} gap={3} align="flex-start">
-                  <HStack w="full">
-                    <Text fontSize="xs" color="text.primary" fontWeight="bold">
-                      {typeName}
-                    </Text>
-                  </HStack>
-                  {fields.map((field) => (
-                    <HStack key={field.name} w="full">
-                      <Text fontSize="xs" color="text.secondary">
-                        {field.name}
-                      </Text>
-                      <Spacer />
-                      <Text fontSize="xs" color="text.secondaryAccent">
-                        {field.type}
-                      </Text>
-                    </HStack>
-                  ))}
-                </VStack>
+            <div className="flex flex-col gap-px rounded overflow-auto border border-background">
+              {methods.map((method: Method) => (
+                <div
+                  key={method.name}
+                  className="flex flex-col p-3 gap-3 text-xs"
+                >
+                  <div className="flex items-center justify-between">
+                    <div className="font-bold text-accent-foreground">
+                      {method.name}
+                    </div>
+                    <div className="text-muted-foreground">
+                      {method.entrypoint}
+                    </div>
+                  </div>
+                  {method.description && (
+                    <div className="text-muted-foreground">
+                      {method.description}
+                    </div>
+                  )}
+                </div>
               ))}
-            </Stack>
-          </VStack>
-        ))}
-      </Card>
+            </div>
+          </div>
+        ),
+      )}
+
+      {policies.messages && <MessageContent messages={policies.messages} />}
     </AccordionCard>
   );
 }
diff --git a/packages/keychain/src/components/session/ContractCard.tsx b/packages/keychain/src/components/session/ContractCard.tsx
index 109bf1165..b530eb086 100644
--- a/packages/keychain/src/components/session/ContractCard.tsx
+++ b/packages/keychain/src/components/session/ContractCard.tsx
@@ -54,17 +54,18 @@ export function ContractCard({
           </span>
         </div>
       }
+      className="bg-background gap-px rounded overflow-auto border border-background"
     >
       {methods.map((method) => (
         <div
           key={method.entrypoint}
-          className="flex flex-col bg-secondary gap-4 p-3 first:rounded-t-md last:rounded-b-md text-xs"
+          className="flex flex-col bg-secondary gap-4 p-3 text-xs"
         >
           <div className="flex items-center justify-between">
-            <div className="font-bold">
+            <div className="font-bold text-accent-foreground">
               {method.name ?? humanizeString(method.entrypoint)}
             </div>
-            <div className="text-accent-foreground">{method.entrypoint}</div>
+            <div className="text-muted-foreground">{method.entrypoint}</div>
           </div>
           {method.description && (
             <div className="text-muted-foreground">{method.description}</div>
diff --git a/packages/keychain/src/components/session/MessageCard.tsx b/packages/keychain/src/components/session/MessageCard.tsx
index cadf29b26..253f89fba 100644
--- a/packages/keychain/src/components/session/MessageCard.tsx
+++ b/packages/keychain/src/components/session/MessageCard.tsx
@@ -32,13 +32,26 @@ export function MessageCard({ messages, isExpanded }: MessageCardProps) {
       }
       isExpanded={isExpanded}
     >
+      <MessageContent messages={messages} />
+    </AccordionCard>
+  );
+}
+
+export function MessageContent({
+  messages,
+}: {
+  messages: SignMessagePolicy[];
+}) {
+  return (
+    <>
       {messages.map((m, i) => (
         <div
           key={m.domain.name ?? i}
-          className="flex flex-col bg-secondary gap-4 p-3 first:rounded-t-md last:rounded-b-md"
+          className="flex flex-col bg-secondary gap-2 text-xs"
         >
-          <div className="font-bold">{m.name ?? `Message ${i + 1}`}</div>
-          <div className="flex flex-col bg-secondary gap-1 ">
+          <div className="py-2 font-bold">{m.name ?? `Message ${i + 1}`}</div>
+
+          <div className="flex flex-col gap-px rounded overflow-auto border border-background p-3">
             {/* Domain section */}
             {Object.values(m.domain).filter((f) => typeof f !== "undefined")
               .length > 0 && (
@@ -81,7 +94,7 @@ export function MessageCard({ messages, isExpanded }: MessageCardProps) {
           </div>
         </div>
       ))}
-    </AccordionCard>
+    </>
   );
 }
 
@@ -101,7 +114,7 @@ export function CollapsibleRow({ title, children }: CollapsibleRowProps) {
               variant={value ? "minus-line" : "plus-line"}
               size="sm"
             />
-            <div>{title}</div>
+            <div className="text-xs">{title}</div>
           </div>
         </AccordionTrigger>
 
@@ -119,12 +132,12 @@ interface ValueRowProps {
 
 export function ValueRow({ values }: ValueRowProps) {
   return (
-    <div className="flex items-center py-1">
-      <ArrowTurnDownIcon />
+    <div className="flex items-center py-1 gap-1 text-muted-foreground">
+      <ArrowTurnDownIcon size="sm" />
       <div className="flex items-center gap-2">
         {values.map((f) => (
-          <div className="flex items-center gap-1" key={f.name}>
-            {f.name}: <Badge>{f.value}</Badge>
+          <div className="flex items-center gap-1 text-xs" key={f.name}>
+            {f.name}: <Badge className="bg-quaternary">{f.value}</Badge>
           </div>
         ))}
       </div>