Style session contract icon

examples/get-starknet/package.json

@@ -7,8 +7,8 @@
     "@emotion/react": "^11.11.1",
     "cra-template-typescript": "1.2.0",
     "get-starknet": "^3.0.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
     "starknet": "^6.6.0"
   },

examples/next/package.json

@@ -21,16 +21,16 @@
     "next": "^14.2.5",
     "next-themes": "^0.3.0",
     "prettier": "^2.7.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "starknet": "^6.11.0"
   },
   "devDependencies": {
     "@cartridge/tsconfig": "workspace:^",
     "@playwright/test": "^1.46.0",
     "@types/node": "^20.6.0",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "autoprefixer": "^10.4.18",
     "eslint": "^8.23.0",
     "eslint-config-next": "^12.2.5",

packages/keychain/package.json

@@ -41,7 +41,7 @@
     "next": "^14.2.5",
     "p-throttle": "^6.2.0",
     "posthog-js": "^1.181.0",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-dom": "^18.2.0",
     "react-query": "^3.39.2",
     "use-sound": "^4.0.1",
@@ -66,7 +66,7 @@
     "@testing-library/react": "^13.4.0",
     "@types/js-cookie": "^3.0.2",
     "@types/node": "^20.6.0",
-    "@types/react-dom": "^18.2.7",
+    "@types/react-dom": "^18.3.1",
     "autoprefixer": "^10.4.18",
     "concurrently": "^9.0.1",
     "eslint": "^8.23.0",

packages/keychain/src/components/SessionSummary.tsx

@@ -1,8 +1,10 @@
+import React from "react";
 import { CallPolicy, Policy } from "@cartridge/controller";
 import {
   Card,
   CardContent,
   CardHeader,
+  CardHeaderRight,
   CardTitle,
   Accordion,
   AccordionContent,
@@ -11,29 +13,53 @@ import {
   CircleIcon,
   InfoIcon,
   CopyAddress,
+  CardIcon,
+  PencilIcon,
+  ScrollIcon,
 } from "@cartridge/ui-next";
+import { SessionSummary as SessionSummaryType } from "@cartridge/utils";
 // import { useSessionSummary } from "@cartridge/utils";
 
-export function SessionSummary({ policies }: { policies: Policy[] }) {
+export function SessionSummary({}: { policies: Policy[] }) {
   // const { controller } = useConnection()
   // const { data: summary } = useSessionSummary({ policies, provider: controller });
 
   return (
     <div className="flex flex-col gap-4">
-      {Object.entries(summary.default).map(([address, calls]) => (
-        <Contract key={address} address={address} calls={calls} />
+      {Object.entries(summary.default).map(([address, policies]) => (
+        <Contract key={address} address={address} policies={policies} />
       ))}
 
-      {Object.entries(summary.ERC20).map(([address, calls]) => (
-        <Contract key={address} address={address} calls={calls} />
+      {Object.entries(summary.ERC20).map(([address, { policies, meta }]) => (
+        <Contract
+          key={address}
+          address={address}
+          policies={policies}
+          icon={<CardIcon src={meta.logoUrl} />}
+        />
       ))}
 
-      {Object.entries(summary.ERC721).map(([address, calls]) => (
-        <Contract key={address} address={address} calls={calls} />
+      {Object.entries(summary.ERC721).map(([address, policies]) => (
+        <Contract
+          key={address}
+          address={address}
+          policies={policies}
+          icon={
+            <CardIcon>
+              <ScrollIcon variant="line" />
+            </CardIcon>
+          }
+        />
       ))}
 
       <Card>
-        <CardHeader>
+        <CardHeader
+          icon={
+            <CardIcon>
+              <PencilIcon variant="line" />
+            </CardIcon>
+          }
+        >
           <CardTitle>Sign Messages</CardTitle>
         </CardHeader>
       </Card>
@@ -43,36 +69,36 @@ export function SessionSummary({ policies }: { policies: Policy[] }) {
 
 function Contract({
   address,
-  calls,
+  policies,
+  icon = <CardIcon />,
 }: {
   address: string;
-  calls: CallPolicy[];
+  policies: CallPolicy[];
+  icon?: React.ReactNode;
 }) {
   return (
     <Card>
-      <div className="bg-background flex items-center h-full gap-px">
-        <div className="w-10 h-full aspect-square bg-[image:var(--theme-icon-url)] bg-cover bg-center place-content-center" />
-
-        <div className="text-sm bg-secondary flex flex-1 gap-x-1.5 items-center justify-between p-3 text-medium">
-          <div>Contract</div>
-          <CopyAddress address={address} size="xs" className="" />
-        </div>
-      </div>
+      <CardHeader icon={icon}>
+        <CardTitle className="text-foreground">Contract</CardTitle>
+        <CardHeaderRight>
+          <CopyAddress address={address} size="xs" />
+        </CardHeaderRight>
+      </CardHeader>
 
       <Accordion type="single" collapsible>
         <AccordionItem value="item-1">
           <CardContent>
             <AccordionTrigger>
               You are agreeing to automate{" "}
               <span className="text-accent-foreground font-bold">
-                {calls.length} method
-                {calls.length > 1 ? "s" : ""}
+                {policies.length} method
+                {policies.length > 1 ? "s" : ""}
               </span>
             </AccordionTrigger>
           </CardContent>
 
           <AccordionContent>
-            {calls.map((c) => (
+            {policies.map((c) => (
               <CardContent key={c.method} className="flex items-center gap-1">
                 <CircleIcon size="sm" className="text-muted-foreground" />
                 <div className="flex items-center gap-2">
@@ -88,7 +114,7 @@ function Contract({
   );
 }
 
-const summary = {
+const summary: SessionSummaryType = {
   default: {
     "0x000000000000000000000000000000000000000000000000000000000000000": [
       {
@@ -104,18 +130,29 @@ const summary = {
     ],
   },
   ERC20: {
-    "0x49d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7": [
-      {
-        target:
+    "0x49d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7": {
+      meta: {
+        symbol: "ETH",
+        address:
           "0x49d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
-        method: "approve",
+        name: "Ether",
+        decimals: 18,
+        logoUrl:
+          "https://imagedelivery.net/0xPAQaDtnQhBs8IzYRIlNg/c8a721d1-07c3-46e4-ab4e-523977c30b00/logo",
       },
-      {
-        target:
-          "0x49d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
-        method: "transfer",
-      },
-    ],
+      policies: [
+        {
+          target:
+            "0x49d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
+          method: "approve",
+        },
+        {
+          target:
+            "0x49d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
+          method: "transfer",
+        },
+      ],
+    },
   },
   ERC721: {
     "0x000000000000000000000000000000000000000000000000000000000000000": [

packages/profile/package.json

@@ -31,8 +31,8 @@
   "devDependencies": {
     "@eslint/js": "^9.9.0",
     "@types/node": "^20.6.0",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.18",
     "eslint": "^9.9.0",

packages/ui-next/package.json

@@ -61,7 +61,7 @@
     "cmdk": "^1.0.0",
     "lucide-react": "^0.364.0",
     "next-themes": "^0.3.0",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.53.2",
     "sonner": "^1.4.41",
@@ -83,8 +83,8 @@
     "@storybook/react-vite": "^8.3.2",
     "@storybook/test": "^8.3.2",
     "@storybook/theming": "^8.3.2",
-    "@types/react": "^18.2.56",
-    "@types/react-dom": "^18.2.19",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^7.0.2",
     "@typescript-eslint/parser": "^7.0.2",
     "@vitejs/plugin-react-swc": "^3.5.0",

packages/ui-next/src/components/primitives/card.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "flex flex-col rounded overflow-hidden text-secondary-foreground shadow gap-y-px shrink-0",
+      "flex flex-col rounded overflow-hidden text-secondary-foreground gap-y-px shrink-0",
       className,
     )}
     {...props}
@@ -19,15 +19,70 @@ Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<
   HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+  React.HTMLAttributes<HTMLDivElement> & { icon?: React.ReactNode }
+>(({ className, icon, ...props }, ref) =>
+  icon ? (
+    <div
+      ref={ref}
+      className={cn("h-9 flex items-center gap-x-px bg-background", className)}
+    >
+      {icon}
+      <div
+        className={cn(
+          "w-full h-full flex items-center p-3 bg-secondary",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  ) : (
+    <div
+      ref={ref}
+      className={cn("flex flex-col gap-y-1 p-3 bg-secondary", className)}
+      {...props}
+    />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+const CardHeaderRight = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col gap-y-1 p-3 bg-secondary", className)}
-    {...props}
-  />
+  <div ref={ref} className={cn("ml-auto", className)} {...props} />
 ));
-CardHeader.displayName = "CardHeader";
+CardHeaderRight.displayName = "CardHeaderRight";
+
+const CardIcon = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement> & { src?: string }
+>(
+  ({ className, src, ...props }, ref): React.ReactNode => (
+    <div
+      ref={ref}
+      className="h-full aspect-square bg-secondary flex items-center justify-center"
+    >
+      {src ? (
+        <img
+          src={src}
+          className={cn("h-8 aspect-square", className)}
+          {...props}
+        />
+      ) : props.children ? (
+        props.children
+      ) : (
+        <div
+          className={cn(
+            "h-8 aspect-square bg-[image:var(--theme-icon-url)] bg-cover bg-center place-content-center",
+            className,
+          )}
+          {...props}
+        />
+      )}
+    </div>
+  ),
+);
+CardIcon.displayName = "CardIcon";
 
 const CardTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -83,6 +138,8 @@ CardFooter.displayName = "CardFooter";
 export {
   Card,
   CardHeader,
+  CardHeaderRight,
+  CardIcon,
   CardFooter,
   CardTitle,
   CardDescription,

packages/ui-next/src/stories/card.stories.tsx

@@ -6,8 +6,10 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
+  CardIcon,
 } from "@/components/primitives/card";
 import { Meta, StoryObj } from "@storybook/react";
+import { useEffect } from "react";
 
 const meta: Meta<typeof Card> = {
   title: "Card",
@@ -32,10 +34,33 @@ export const OnlyTitle: Story = {
   },
 };
 
-function Card({ title, description }: { title: string; description?: string }) {
+export const IconHeader: Story = {
+  args: {
+    title: "Card Title",
+    icon: <CardIcon />,
+  },
+};
+
+function Card({
+  title,
+  description,
+  icon,
+}: {
+  title: string;
+  description?: string;
+  icon?: React.ReactNode;
+}) {
+  useEffect(() => {
+    if (!icon) return;
+    document.documentElement.style.setProperty(
+      "--theme-icon-url",
+      `url("https://x.cartridge.gg/whitelabel/dope-wars/icon.png")`,
+    );
+  }, [icon]);
+
   return (
     <UICard>
-      <CardHeader>
+      <CardHeader icon={icon}>
         <CardTitle>{title}</CardTitle>
         {description && <CardDescription>{description}</CardDescription>}
       </CardHeader>