Add key to mapped div

cartridge-gg · Dec 20, 2024 · 421d42a · 421d42a
1 parent 17c204c
commit 421d42a
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 101 deletions.
diff --git a/packages/keychain/src/components/ErrorAlert.tsx b/packages/keychain/src/components/ErrorAlert.tsx
@@ -4,6 +4,7 @@ import {
   CheckIcon,
   ErrorAlertIcon,
   ErrorAlertIconProps,
+  Button,
 } from "@cartridge/ui-next";
 import {
   Text,
@@ -16,7 +17,6 @@ import {
   Box,
   VStack,
   Link,
-  IconButton,
   Divider,
 } from "@chakra-ui/react";
 import { motion } from "framer-motion";
@@ -105,27 +105,22 @@ export function ErrorAlert({
             {description && (
               <AccordionPanel w="full" position="relative">
                 {copyText && (
-                  <IconButton
+                  <Button
                     size="icon"
-                    w={5}
-                    h={5}
-                    position="absolute"
-                    right={3}
-                    aria-label="Copy stacktrace"
-                    icon={
-                      copied ? (
-                        <CheckIcon size="xs" className="text-[black]" />
-                      ) : (
-                        <CopyIcon size="xs" className="text-[black]" />
-                      )
-                    }
+                    variant="icon"
+                    className="absolute right-3 w-5 h-5 bg-[rgba(0,0,0,0.1)]"
                     onClick={() => {
                       setCopied(true);
                       navigator.clipboard.writeText(copyText);
                     }}
-                  />
+                  >
+                    {copied ? (
+                      <CheckIcon size="xs" className="text-[black]" />
+                    ) : (
+                      <CopyIcon size="xs" className="text-[black]" />
+                    )}
+                  </Button>
                 )}
-
                 <Box
                   h="full"
                   maxH={200}

diff --git a/packages/keychain/src/components/layout/Container/Header/BackButton.tsx b/packages/keychain/src/components/layout/Container/Header/BackButton.tsx
@@ -1,22 +1,14 @@
-import { ArrowIcon } from "@cartridge/ui-next";
+import { ArrowIcon, Button } from "@cartridge/ui-next";
 import { isIframe } from "@cartridge/utils";
-import { IconButton } from "@chakra-ui/react";
 
 export function BackButton({ onClick }: { onClick?: () => void }) {
   if (!isIframe()) {
     return null;
   }
 
   return (
-    <IconButton
-      aria-label="Go Back"
-      bg="solid.bg"
-      _hover={{
-        bg: "solid.bg",
-        opacity: 0.75,
-      }}
-      icon={<ArrowIcon variant="left" />}
-      onClick={onClick}
-    />
+    <Button variant="icon" size="icon" onClick={onClick}>
+      <ArrowIcon variant="left" />
+    </Button>
   );
 }
diff --git a/packages/keychain/src/components/layout/Container/Header/CloseButton.tsx b/packages/keychain/src/components/layout/Container/Header/CloseButton.tsx
@@ -1,6 +1,5 @@
-import { TimesIcon } from "@cartridge/ui-next";
+import { TimesIcon, Button } from "@cartridge/ui-next";
 import { isIframe } from "@cartridge/utils";
-import { IconButton } from "@chakra-ui/react";
 import { useConnection } from "@/hooks/connection";
 import { useCallback } from "react";
 
@@ -24,14 +23,8 @@ export function CloseButton({ onClose }: { onClose?: () => void }) {
   }
 
   return (
-    <IconButton
-      aria-label="Close Controller"
-      bg="solid.bg"
-      _hover={{
-        bg: "hsl(var(solid.primary)/0.75)",
-      }}
-      icon={<TimesIcon />}
-      onClick={handleClose}
-    />
+    <Button variant="icon" size="icon" onClick={handleClose}>
+      <TimesIcon />
+    </Button>
   );
 }
diff --git a/packages/keychain/src/components/layout/Container/Header/SettingsButton.tsx b/packages/keychain/src/components/layout/Container/Header/SettingsButton.tsx
@@ -1,22 +1,14 @@
-import { DotsIcon } from "@cartridge/ui-next";
+import { Button, DotsIcon } from "@cartridge/ui-next";
 import { isIframe } from "@cartridge/utils";
-import { IconButton } from "@chakra-ui/react";
 
 export function SettingsButton({ onClick }: { onClick?: () => void }) {
   if (!isIframe()) {
     return null;
   }
 
   return (
-    <IconButton
-      aria-label="Open Settings"
-      bg="solid.bg"
-      _hover={{
-        bg: "solid.bg",
-        opacity: 0.75,
-      }}
-      icon={<DotsIcon />}
-      onClick={onClick}
-    />
+    <Button variant="icon" size="icon" onClick={onClick}>
+      <DotsIcon />
+    </Button>
   );
 }
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/MessageCard.tsx b/packages/keychain/src/components/session/MessageCard.tsx
@@ -69,15 +69,15 @@ function MessageContent({ messages }: MessageContentProps) {
                 {/* 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>
-                  )}
+                  <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 }]}
@@ -94,13 +94,13 @@ function MessageContent({ messages }: MessageContentProps) {
                             { name: "type", value: t.type },
                             ...(["enum", "merkletree"].includes(t.name)
                               ? [
-                                {
-                                  name: "contains",
-                                  value: (
-                                    t as StarknetEnumType | StarknetMerkleType
-                                  ).contains,
-                                },
-                              ]
+                                  {
+                                    name: "contains",
+                                    value: (
+                                      t as StarknetEnumType | StarknetMerkleType
+                                    ).contains,
+                                  },
+                                ]
                               : []),
                           ]}
                         />

diff --git a/packages/ui-next/src/components/primitives/button.tsx b/packages/ui-next/src/components/primitives/button.tsx
@@ -19,7 +19,7 @@ const buttonVariants = cva(
           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
-        icon: "bg-background text-foreground",
+        icon: "bg-background text-foreground hover:bg-background/60",
       },
       size: {
         default: "h-10 px-4 tracking-wide text-base",