feat: add in/out to tx list

covalenthq · Oct 17, 2024 · bec2c8e · bec2c8e
1 parent 21c30c0
commit bec2c8e
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 34 deletions.
diff --git a/src/components/Molecules/Address/AddressTransactions/AddressTransactions.stories.tsx b/src/components/Molecules/Address/AddressTransactions/AddressTransactions.stories.tsx
@@ -14,7 +14,7 @@ export default meta;
 export const AddressTransactions: Story = {
     args: {
         chain_name: "eth-mainnet",
-        address: "0x972B8FAD70de6e430D8b368198AbFF1E42eFf022",
+        address: "0x49b5eae7e881c22001c0daf6f211db1473310b7b",
         actionable_address: (address) => storyAction(address),
         actionable_block: (block_height) => storyAction(block_height),
         actionable_transaction: (tx_hash) => storyAction(tx_hash),

diff --git a/src/components/Molecules/Address/AddressTransactions/AddressTransactions.tsx b/src/components/Molecules/Address/AddressTransactions/AddressTransactions.tsx
@@ -52,6 +52,7 @@ export const AddressTransactions: React.FC<AddressTransactionsProps> = ({
 
     return (
         <Transactions
+            address={address}
             errorMessage={errorMessage}
             maybeResult={maybeResult}
             actionable_transaction={actionable_transaction}

diff --git a/src/components/Shared/Transactions.tsx b/src/components/Shared/Transactions.tsx
@@ -1,4 +1,5 @@
-import { TableHeaderSorting, TableList } from ".";
+import { IconWrapper, TableHeaderSorting, TableList } from ".";
+import { Badge } from "../ui/badge";
 import { Address } from "@/components/Atoms";
 import { Timestamp } from "@/components/Atoms";
 import { actionableWrapper } from "@/utils/functions";
@@ -11,6 +12,7 @@ import {
 import { type ColumnDef } from "@tanstack/react-table";
 
 export const Transactions: React.FC<TransactionsProps> = ({
+    address = null,
     errorMessage = null,
     maybeResult = new Some(null),
     actionable_address,
@@ -86,12 +88,56 @@ export const Transactions: React.FC<TransactionsProps> = ({
                 />
             ),
             cell: ({ row }) => (
-                <Address
-                    label={row.original.from_address_label}
-                    avatar={{}}
-                    address={row.original.from_address}
-                    actionable_address={actionable_address}
-                />
+                <div className="w-20">
+                    <Address
+                        label={row.original.from_address_label}
+                        avatar={{}}
+                        address={row.original.from_address}
+                        actionable_address={actionable_address}
+                    />
+                </div>
+            ),
+        },
+        {
+            id: "in_out",
+            accessorKey: "in_out",
+            header: () => null,
+            cell: ({ row }) => (
+                <div className="w-10 flex justify-center">
+                    <Badge
+                        variant={
+                            address
+                                ? address?.toLowerCase() ===
+                                  row.original.from_address?.toLowerCase()
+                                    ? "danger"
+                                    : address?.toLowerCase() ===
+                                        row.original.to_address?.toLowerCase()
+                                      ? "success"
+                                      : "ghost"
+                                : "ghost"
+                        }
+                    >
+                        {address ? (
+                            address.toLowerCase() ===
+                            row.original.from_address?.toLowerCase() ? (
+                                "OUT"
+                            ) : address.toLowerCase() ===
+                              row.original.to_address?.toLowerCase() ? (
+                                "IN"
+                            ) : (
+                                <IconWrapper
+                                    icon_class_name="arrow_right_alt"
+                                    class_name="text-foreground-light opacity-60 dark:text-foreground-dark"
+                                />
+                            )
+                        ) : (
+                            <IconWrapper
+                                icon_class_name="arrow_right_alt"
+                                class_name="text-foreground-light opacity-60 dark:text-foreground-dark"
+                            />
+                        )}
+                    </Badge>
+                </div>
             ),
         },
         {
@@ -105,12 +151,14 @@ export const Transactions: React.FC<TransactionsProps> = ({
                 />
             ),
             cell: ({ row }) => (
-                <Address
-                    label={row.original.to_address_label}
-                    avatar={{}}
-                    address={row.original.to_address}
-                    actionable_address={actionable_address}
-                />
+                <div className="w-20">
+                    <Address
+                        label={row.original.to_address_label}
+                        avatar={{}}
+                        address={row.original.to_address}
+                        actionable_address={actionable_address}
+                    />
+                </div>
             ),
         },
         {
@@ -123,19 +171,16 @@ export const Transactions: React.FC<TransactionsProps> = ({
                     column={column}
                 />
             ),
-            cell: ({ row }) => {
-                return row.original.value ? (
-                    <p className="text-right">
-                        {calculatePrettyBalance(
-                            row.original.value,
-                            row.original.gas_metadata?.contract_decimals,
-                        )}{" "}
-                        {row.original.gas_metadata?.contract_ticker_symbol}
-                    </p>
-                ) : (
-                    <p className="text-center">-</p>
-                );
-            },
+            cell: ({ row }) => (
+                <p className="text-right">
+                    {row.original.value
+                        ? `${calculatePrettyBalance(
+                              row.original.value,
+                              row.original.gas_metadata?.contract_decimals,
+                          )} ${row.original.gas_metadata?.contract_ticker_symbol}`
+                        : "-"}
+                </p>
+            ),
         },
         {
             id: "fees_paid",

diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
@@ -6,22 +6,29 @@ const badgeVariants = ({
     variant = "default",
     className = "",
 }: {
-    variant?: "default" | "secondary" | "danger" | "success" | "outline";
+    variant?:
+        | "default"
+        | "secondary"
+        | "danger"
+        | "success"
+        | "outline"
+        | "ghost";
     className?: string;
 }): string => {
     const variants: Record<string, string> = {
         default:
-            "border-transparent bg-primary-light dark:bg-primary-dark text-foreground-light dark:text-foreground-dark shadow hover:bg-opacity-80",
+            "border border-transparent bg-primary-light dark:bg-primary-dark text-foreground-light dark:text-foreground-dark shadow hover:bg-opacity-80",
         secondary:
-            "border-transparent bg-secondary-light dark:bg-secondary-dark text-foreground-light dark:text-foreground-dark hover:bg-opacity-80",
-        danger: "border-transparent bg-danger text-white shadow hover:bg-opacity-80",
+            "border border-transparent bg-secondary-light dark:bg-secondary-dark text-foreground-light dark:text-foreground-dark hover:bg-opacity-80",
+        danger: "border border-transparent bg-danger text-white shadow hover:bg-opacity-80",
         success:
-            "border-transparent bg-success text-white shadow hover:bg-opacity-80",
-        outline: "text-foreground-light dark:text-foreground-dark",
+            "border border-transparent bg-success text-white shadow hover:bg-opacity-80",
+        outline: "border text-foreground-light dark:text-foreground-dark",
+        ghost: "text-foreground-light dark:text-foreground-dark",
     };
 
     return cn(
-        "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+        "inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
         variants[variant],
         className,
     );

diff --git a/src/utils/types/shared.types.ts b/src/utils/types/shared.types.ts
@@ -36,6 +36,7 @@ export interface IconWrapperProps {
 }
 
 export interface TransactionsProps {
+    address?: string | null;
     maybeResult: Option<Transaction[] | null>;
     errorMessage: string | null;
     actionable_transaction?: (tx_hash: string | null) => ActionableType;