Show messages in one card (#1190)

* Show messages in one section * Get rid of chakra from ContractCard * Add code icon to contract card * Style message card with multi messages * Add key to mapped div
cartridge-gg · Dec 20, 2024 · 5d4f9a4 · 5d4f9a4
1 parent 1ae107d
commit 5d4f9a4
Show file tree

Hide file tree

Showing 4 changed files with 161 additions and 179 deletions.
diff --git a/packages/keychain/src/components/session/CollapsibleRow.tsx b/packages/keychain/src/components/session/CollapsibleRow.tsx
diff --git a/packages/keychain/src/components/session/ContractCard.tsx b/packages/keychain/src/components/session/ContractCard.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import {
   Card,
   CardContent,
@@ -7,17 +6,10 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
+  CardIcon,
+  CodeIcon,
 } from "@cartridge/ui-next";
 import { formatAddress } from "@cartridge/utils";
-import {
-  Divider,
-  HStack,
-  Link,
-  Spacer,
-  Stack,
-  Text,
-  VStack,
-} from "@chakra-ui/react";
 import { useExplorer } from "@starknet-react/core";
 import { constants } from "starknet";
 import { Method } from "@cartridge/presets";
@@ -41,80 +33,63 @@ 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"
+      <CardHeader
+        icon={
+          icon ?? (
+            <CardIcon>
+              <CodeIcon variant="solid" />
+            </CardIcon>
+          )
+        }
+      >
+        <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
                 ? explorer.contract(address)
                 : `#`
             }
             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-4">
+            <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
-                border="1px solid"
-                spacing={0}
-                borderColor="darkGray.800"
-                borderRadius="md"
-                mt="14px"
-                divider={<Divider borderColor="solid.bg" />}
-              >
-                {methods.map((method) => (
-                  <VStack
-                    key={method.entrypoint}
-                    p={3}
-                    gap={3}
-                    align="flex-start"
-                  >
-                    <HStack w="full">
-                      <Text
-                        fontSize="xs"
-                        color="text.primary"
-                        fontWeight="bold"
-                      >
-                        {method.name ?? humanizeString(method.entrypoint)}
-                      </Text>
-                      <Spacer />
-                      <Text fontSize="xs" color="text.secondaryAccent">
-                        {method.entrypoint}
-                      </Text>
-                    </HStack>
-                    {method.description && (
-                      <Text fontSize="xs" color="text.secondary">
-                        {method.description}
-                      </Text>
-                    )}
-                  </VStack>
-                ))}
-              </Stack>
+            <AccordionContent className="bg-background border border-background rounded-md gap-px">
+              {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"
+                >
+                  <div className="flex items-center justify-between">
+                    <div className="font-bold">
+                      {method.name ?? humanizeString(method.entrypoint)}
+                    </div>
+                    <div className="text-accent-foreground">
+                      {method.entrypoint}
+                    </div>
+                  </div>
+                  {method.description && (
+                    <div className="text-muted-foreground">
+                      {method.description}
+                    </div>
+                  )}
+                </div>
+              ))}
             </AccordionContent>
           </AccordionItem>
         </Accordion>