chore: adapted TokenCard for swaps (#156)

Author: rsodre

src/components/modules/tokens/card/card.stories.tsx

@@ -40,3 +40,19 @@ export const Decreasing: Story = {
     change: "-$1.78",
   },
 };
+
+export const IncreasingAmount: Story = {
+  args: {
+    value: "$31.40",
+    increasing: true,
+    clickable: false,
+  },
+};
+
+export const DecreasingAmount: Story = {
+  args: {
+    value: "$31.40",
+    decreasing: true,
+    clickable: false,
+  },
+};

src/components/modules/tokens/card/card.tsx

@@ -13,17 +13,23 @@ export interface TokenCardProps
   image: string | React.ReactNode;
   title: string | React.ReactNode;
   amount: string;
+  increasing?: boolean;
+  decreasing?: boolean;
   value?: string;
   change?: string;
+  clickable?: boolean;
   className?: string;
 }
 
 export const TokenCard = ({
   image,
   title,
   amount,
+  increasing,
+  decreasing,
   value,
   change,
+  clickable = true,
   variant,
   className,
   ...props
@@ -43,25 +49,43 @@ export const TokenCard = ({
   );
 
   const style = useMemo(() => {
-    if (change?.includes("+")) {
+    if (increasing || change?.includes("+")) {
       return {
         backgroundImage: `linear-gradient(to right,transparent,color-mix(in srgb, var(--constructive-100) 3%, transparent))`,
       };
     }
-    if (change?.includes("-")) {
+    if (decreasing || change?.includes("-")) {
       return {
         backgroundImage: `linear-gradient(to right,transparent,color-mix(in srgb, var(--destructive-100) 3%, transparent))`,
       };
     }
     return {};
-  }, [change]);
+  }, [change, increasing, decreasing]);
+
+  const Amount = useMemo(() => {
+    if (increasing) {
+      return <p className="text-constructive-100">+{amount}</p>;
+    }
+    if (decreasing) {
+      return <p className="text-destructive-100">-{amount}</p>;
+    }
+    return <>{amount}</>;
+  }, [amount, increasing, decreasing]);
 
   const Change = useMemo(() => {
     if (change?.includes("+")) {
-      return <p className="text-constructive-100">{change}</p>;
+      return (
+        <p className="text-constructive-100">
+          {change}
+        </p>
+      );
     }
     if (change?.includes("-")) {
-      return <p className="text-destructive-100">{change}</p>;
+      return (
+        <p className="text-destructive-100">
+          {change}
+        </p>
+      );
     }
     return <></>;
   }, [change]);
@@ -70,11 +94,11 @@ export const TokenCard = ({
     <ActivityCard
       Logo={Logo}
       title={title}
-      subTitle={amount}
+      subTitle={Amount}
       topic={value}
       subTopic={Change}
       variant={variant}
-      className={cn("rounded-none", className)}
+      className={cn("rounded-none", !clickable && "pointer-events-none", className)}
       style={style}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}

src/components/modules/tokens/summary/summary.stories.tsx

@@ -16,7 +16,7 @@ type Story = StoryObj<typeof TokenSummary>;
 
 export const Default: Story = {
   render: () => (
-    <TokenSummary>
+    <TokenSummary title="Tokens">
       <TokenCard
         image={"https://static.cartridge.gg/presets/credit/icon.svg"}
         title={"Credits"}
@@ -59,6 +59,26 @@ export const Default: Story = {
         value={"$31.40"}
         change={"+$1.78"}
       />
+      <TokenCard
+        image={
+          "https://imagedelivery.net/0xPAQaDtnQhBs8IzYRIlNg/a3bfe959-50c4-4f89-0aef-b19207d82a00/logo"
+        }
+        title={"Lords"}
+        amount={"0.01 LORDS"}
+        value={"$31.40"}
+        decreasing
+        clickable={false}
+      />
+      <TokenCard
+        image={
+          "https://imagedelivery.net/0xPAQaDtnQhBs8IzYRIlNg/811f019a-0461-4cff-6c1e-442102863f00/logo"
+        }
+        title={"Paper"}
+        amount={"0.01 PAPER"}
+        value={"$31.40"}
+        increasing
+        clickable={false}
+      />
     </TokenSummary>
   ),
 };

src/components/modules/tokens/summary/summary.tsx

@@ -1,9 +1,12 @@
+import { CardContent } from "@/index";
 import { cn } from "@/utils";
 import { cva, VariantProps } from "class-variance-authority";
 
 export interface TokenSummaryProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof tokenSummaryVariants> {}
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">,
+  VariantProps<typeof tokenSummaryVariants> {
+  title?: string | React.ReactNode;
+}
 
 const tokenSummaryVariants = cva(
   "rounded overflow-y-scroll w-full flex flex-col gap-y-px",
@@ -20,6 +23,7 @@ const tokenSummaryVariants = cva(
 );
 
 export const TokenSummary = ({
+  title,
   variant,
   className,
   children,
@@ -31,6 +35,11 @@ export const TokenSummary = ({
       {...props}
       style={{ scrollbarWidth: "none" }}
     >
+      {title && (
+        <CardContent className="text-foreground-400">
+          {title}
+        </CardContent>
+      )}
       {children}
     </div>
   );