diff --git a/src/components/Molecules/Address/AddressTransactions/AddressTransactions.stories.tsx b/src/components/Molecules/Address/AddressTransactions/AddressTransactions.stories.tsx index c049b820..01a5f0a5 100644 --- 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 index 775ccb24..4400faf0 100644 --- 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 = ({ return ( = ({ + address = null, errorMessage = null, maybeResult = new Some(null), actionable_address, @@ -86,12 +88,56 @@ export const Transactions: React.FC = ({ /> ), cell: ({ row }) => ( -
+
+
+
+ ), + }, + { + id: "in_out", + accessorKey: "in_out", + header: () => null, + cell: ({ row }) => ( +
+ + {address ? ( + address.toLowerCase() === + row.original.from_address?.toLowerCase() ? ( + "OUT" + ) : address.toLowerCase() === + row.original.to_address?.toLowerCase() ? ( + "IN" + ) : ( + + ) + ) : ( + + )} + +
), }, { @@ -105,12 +151,14 @@ export const Transactions: React.FC = ({ /> ), cell: ({ row }) => ( -
+
+
+
), }, { @@ -123,19 +171,16 @@ export const Transactions: React.FC = ({ column={column} /> ), - cell: ({ row }) => { - return row.original.value ? ( -

- {calculatePrettyBalance( - row.original.value, - row.original.gas_metadata?.contract_decimals, - )}{" "} - {row.original.gas_metadata?.contract_ticker_symbol} -

- ) : ( -

-

- ); - }, + cell: ({ row }) => ( +

+ {row.original.value + ? `${calculatePrettyBalance( + row.original.value, + row.original.gas_metadata?.contract_decimals, + )} ${row.original.gas_metadata?.contract_ticker_symbol}` + : "-"} +

+ ), }, { id: "fees_paid", diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx index 7dfbc8f9..544b4ceb 100644 --- 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 = { 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 index 8530e01b..fa2194c7 100644 --- 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; errorMessage: string | null; actionable_transaction?: (tx_hash: string | null) => ActionableType;