From 7285b0a33ef270cf3d38e5e35e383af7954e8b9a Mon Sep 17 00:00:00 2001
From: JunichiSugiura <jun.sugiura.jp@gmail.com>
Date: Fri, 20 Dec 2024 10:07:11 +0900
Subject: [PATCH] Show messages in one section

---
 .../src/components/session/CollapsibleRow.tsx |  33 ----
 .../src/components/session/ContractCard.tsx   |  48 ++---
 .../src/components/session/MessageCard.tsx    | 177 +++++++++++-------
 .../session/UnverifiedSessionSummary.tsx      |   6 +-
 4 files changed, 124 insertions(+), 140 deletions(-)
 delete mode 100644 packages/keychain/src/components/session/CollapsibleRow.tsx

diff --git a/packages/keychain/src/components/session/CollapsibleRow.tsx b/packages/keychain/src/components/session/CollapsibleRow.tsx
deleted file mode 100644
index 8ef1276fb..000000000
--- a/packages/keychain/src/components/session/CollapsibleRow.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { PropsWithChildren, useState } from "react";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-  CheckboxIcon,
-} from "@cartridge/ui-next";
-
-interface CollapsibleRowProps extends PropsWithChildren {
-  title: string;
-}
-
-export function CollapsibleRow({ title, children }: CollapsibleRowProps) {
-  const [value, setValue] = useState("");
-
-  return (
-    <Accordion type="single" collapsible value={value} onValueChange={setValue}>
-      <AccordionItem value={title} className="flex flex-col">
-        <AccordionTrigger hideIcon className="hover:bg-accent rounded-md">
-          <div className="flex items-center gap-1 py-2">
-            <CheckboxIcon variant={value ? "minus-line" : "plus-line"} />
-            <div>{title}</div>
-          </div>
-        </AccordionTrigger>
-
-        <AccordionContent className="ml-5 flex flex-col">
-          {children}
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  );
-}
diff --git a/packages/keychain/src/components/session/ContractCard.tsx b/packages/keychain/src/components/session/ContractCard.tsx
index be698621e..fd8101a08 100644
--- a/packages/keychain/src/components/session/ContractCard.tsx
+++ b/packages/keychain/src/components/session/ContractCard.tsx
@@ -9,15 +9,7 @@ import {
   AccordionTrigger,
 } from "@cartridge/ui-next";
 import { formatAddress } from "@cartridge/utils";
-import {
-  Divider,
-  HStack,
-  Link,
-  Spacer,
-  Stack,
-  Text,
-  VStack,
-} from "@chakra-ui/react";
+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";
@@ -42,19 +34,10 @@ export function ContractCard({
   return (
     <Card>
       <CardHeader icon={icon}>
-        <HStack py={4}>
-          <Text
-            color="text.primary"
-            fontSize="xs"
-            fontWeight="bold"
-            textTransform="uppercase"
-          >
-            {title}
-          </Text>
-          <Spacer />
-          <Link
-            color="text.secondary"
-            fontSize="xs"
+        <div className="flex items-center justify-between">
+          <div className="text-xs font-bold uppercase">{title}</div>
+          <a
+            className="text-xs text-muted-foreground cursor-pointer hover:underline"
             href={
               chainId === constants.StarknetChainId.SN_MAIN ||
               chainId === constants.StarknetChainId.SN_SEPOLIA
@@ -62,21 +45,21 @@ export function ContractCard({
                 : `#`
             }
             target="_blank"
+            rel="noreferrer"
           >
             {formatAddress(address, { first: 5, last: 5 })}
-          </Link>
-        </HStack>
+          </a>
+        </div>
       </CardHeader>
+
       <CardContent>
         <Accordion type="multiple" defaultValue={["methods"]}>
-          <AccordionItem value="methods">
-            <AccordionTrigger>
-              <Text color="text.secondary" fontSize="xs">
-                Approve{" "}
-                <Text as="span" color="text.secondaryAccent" fontWeight="bold">
-                  {methods.length} {methods.length > 1 ? "methods" : "method"}
-                </Text>
-              </Text>
+          <AccordionItem value="methods" className="flex flex-col gap-3">
+            <AccordionTrigger className="text-xs text-muted-foreground">
+              Approve{" "}
+              <span className="text-accent-foreground font-bold">
+                {methods.length} {methods.length > 1 ? "methods" : "method"}
+              </span>
             </AccordionTrigger>
             <AccordionContent>
               <Stack
@@ -84,7 +67,6 @@ export function ContractCard({
                 spacing={0}
                 borderColor="darkGray.800"
                 borderRadius="md"
-                mt="14px"
                 divider={<Divider borderColor="solid.bg" />}
               >
                 {methods.map((method) => (
diff --git a/packages/keychain/src/components/session/MessageCard.tsx b/packages/keychain/src/components/session/MessageCard.tsx
index cab41f31f..67c19cd99 100644
--- a/packages/keychain/src/components/session/MessageCard.tsx
+++ b/packages/keychain/src/components/session/MessageCard.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { PropsWithChildren, useState } from "react";
 import {
   Card,
   CardContent,
@@ -10,67 +10,17 @@ import {
   CardIcon,
   PencilIcon,
   AccordionTrigger,
+  CheckboxIcon,
 } from "@cartridge/ui-next";
 import { ArrowTurnDownIcon, Badge } from "@cartridge/ui-next";
 import { StarknetEnumType, StarknetMerkleType } from "@starknet-io/types-js";
 import { SignMessagePolicy } from "@cartridge/presets";
-import { Text } from "@chakra-ui/react";
-
-import { CollapsibleRow } from "./CollapsibleRow";
-
-interface MessageContentProps {
-  message: SignMessagePolicy;
-}
-
-function MessageContent({ message: m }: MessageContentProps) {
-  return (
-    <CardContent className="text-muted-foreground flex flex-col">
-      {/* Domain section */}
-      {Object.values(m.domain).filter((f) => typeof f !== "undefined").length >
-        0 && (
-        <CollapsibleRow key="domain" title="domain">
-          {m.domain.name && (
-            <ValueRow values={[{ name: "name", value: m.domain.name }]} />
-          )}
-          {/* ... other domain fields ... */}
-        </CollapsibleRow>
-      )}
-
-      <ValueRow values={[{ name: "primaryType", value: m.primaryType }]} />
-
-      <CollapsibleRow title="types">
-        {Object.entries(m.types).map(([name, types]) => (
-          <CollapsibleRow key={name} title={name}>
-            {types.map((t) => (
-              <ValueRow
-                key={t.name}
-                values={[
-                  { name: "name", value: t.name },
-                  { name: "type", value: t.type },
-                  ...(["enum", "merkletree"].includes(t.name)
-                    ? [
-                        {
-                          name: "contains",
-                          value: (t as StarknetEnumType | StarknetMerkleType)
-                            .contains,
-                        },
-                      ]
-                    : []),
-                ]}
-              />
-            ))}
-          </CollapsibleRow>
-        ))}
-      </CollapsibleRow>
-    </CardContent>
-  );
-}
 
 interface MessageCardProps {
-  message: SignMessagePolicy;
+  messages: SignMessagePolicy[];
 }
 
-export function MessageCard({ message }: MessageCardProps) {
+export function MessageCard({ messages }: MessageCardProps) {
   return (
     <Card>
       <CardHeader
@@ -83,33 +33,118 @@ export function MessageCard({ message }: MessageCardProps) {
         <CardTitle className="text-foreground">Sign Message</CardTitle>
       </CardHeader>
 
-      <Accordion type="single" defaultValue="message" collapsible>
-        <AccordionItem value="message">
-          <CardContent>
-            <AccordionTrigger>
-              <Text color="text.secondary" fontSize="xs">
-                The application will be able to sign the following message on
-                your behalf
-              </Text>
-            </AccordionTrigger>
-          </CardContent>
-
-          <AccordionContent>
-            <MessageContent message={message} />
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
+      <CardContent>
+        <MessageContent messages={messages} />
+      </CardContent>
     </Card>
   );
 }
 
+interface MessageContentProps {
+  messages: SignMessagePolicy[];
+}
+
+function MessageContent({ messages }: MessageContentProps) {
+  return (
+    <Accordion type="single" defaultValue="message" collapsible>
+      <AccordionItem value="message" className="flex flex-col gap-3">
+        <AccordionTrigger
+          className="text-xs text-muted-foreground"
+          color="text.secondary"
+        >
+          Approve{" "}
+          <span className="text-accent-foreground font-bold">
+            {messages.length} {messages.length > 1 ? "message" : "messages"}
+          </span>
+        </AccordionTrigger>
+
+        <AccordionContent className="text-xs">
+          {messages.map((m) => (
+            <>
+              {/* Domain section */}
+              {Object.values(m.domain).filter((f) => typeof f !== "undefined")
+                .length > 0 && (
+                <CollapsibleRow key="domain" title="domain">
+                  {m.domain.name && (
+                    <ValueRow
+                      values={[{ name: "name", value: m.domain.name }]}
+                    />
+                  )}
+                  {/* ... other domain fields ... */}
+                </CollapsibleRow>
+              )}
+
+              <ValueRow
+                values={[{ name: "primaryType", value: m.primaryType }]}
+              />
+
+              <CollapsibleRow title="types">
+                {Object.entries(m.types).map(([name, types]) => (
+                  <CollapsibleRow key={name} title={name}>
+                    {types.map((t) => (
+                      <ValueRow
+                        key={t.name}
+                        values={[
+                          { name: "name", value: t.name },
+                          { name: "type", value: t.type },
+                          ...(["enum", "merkletree"].includes(t.name)
+                            ? [
+                                {
+                                  name: "contains",
+                                  value: (
+                                    t as StarknetEnumType | StarknetMerkleType
+                                  ).contains,
+                                },
+                              ]
+                            : []),
+                        ]}
+                      />
+                    ))}
+                  </CollapsibleRow>
+                ))}
+              </CollapsibleRow>
+            </>
+          ))}
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}
+interface CollapsibleRowProps extends PropsWithChildren {
+  title: string;
+}
+
+export function CollapsibleRow({ title, children }: CollapsibleRowProps) {
+  const [value, setValue] = useState("");
+
+  return (
+    <Accordion type="single" collapsible value={value} onValueChange={setValue}>
+      <AccordionItem value={title} className="flex flex-col">
+        <AccordionTrigger hideIcon className="hover:bg-accent rounded-md">
+          <div className="flex items-center gap-1 py-1">
+            <CheckboxIcon
+              variant={value ? "minus-line" : "plus-line"}
+              size="sm"
+            />
+            <div>{title}</div>
+          </div>
+        </AccordionTrigger>
+
+        <AccordionContent className="ml-5 flex flex-col">
+          {children}
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}
+
 interface ValueRowProps {
   values: { name: string; value: string | number }[];
 }
 
 export function ValueRow({ values }: ValueRowProps) {
   return (
-    <div className="flex items-center py-2">
+    <div className="flex items-center py-1">
       <ArrowTurnDownIcon />
       <div className="flex items-center gap-2">
         {values.map((f) => (
diff --git a/packages/keychain/src/components/session/UnverifiedSessionSummary.tsx b/packages/keychain/src/components/session/UnverifiedSessionSummary.tsx
index f9c86e0dd..ec35ed500 100644
--- a/packages/keychain/src/components/session/UnverifiedSessionSummary.tsx
+++ b/packages/keychain/src/components/session/UnverifiedSessionSummary.tsx
@@ -28,9 +28,9 @@ export function UnverifiedSessionSummary({
         );
       })}
 
-      {policies.messages?.map((message, index) => (
-        <MessageCard key={index} message={message} />
-      ))}
+      {policies.messages?.length && (
+        <MessageCard messages={policies.messages} />
+      )}
     </div>
   );
 }