feat: Add minified address card, chain logos (#186)

covalenthq · Jun 4, 2024 · e1ffb99 · e1ffb99
1 parent 2ec0d13
commit e1ffb99
Show file tree

Hide file tree

Showing 11 changed files with 1,353 additions and 1,530 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Atoms/Address/Address.tsx b/src/components/Atoms/Address/Address.tsx
@@ -7,11 +7,14 @@ import { IconWrapper } from "@/components/Shared";
 import { type AddressProps } from "@/utils/types/atoms.types";
 import { useToast } from "@/utils/hooks";
 import { useState } from "react";
+import { AddressAvatar } from "../AddressAvatar/AddressAvatar";
+import { GRK_SIZES } from "@/utils/constants/shared.constants";
 
 export const Address: React.FC<AddressProps> = ({
     address,
     label = null,
     show_copy_icon = true,
+    show_avatar = false,
     actionable_address = () => null,
 }) => {
     const [showCopy, setShowCopy] = useState<boolean>(false);
@@ -29,6 +32,14 @@ export const Address: React.FC<AddressProps> = ({
 
     return (
         <p className="flex items-center gap-x-2">
+            {show_avatar && (
+                <AddressAvatar
+                    address={address}
+                    type="fingerprint"
+                    size={GRK_SIZES.EXTRA_SMALL}
+                    rounded
+                />
+            )}
             {actionableWrapper(
                 actionable_address(address),
                 label?.trim() || truncate(address)

diff --git a/src/components/Atoms/AddressCard/AddressCard.tsx b/src/components/Atoms/AddressCard/AddressCard.tsx
@@ -20,7 +20,7 @@ export const AddressCard: React.FC<AddressCardProps> = ({
     actionable_address,
 }) => {
     return (
-        <Card className="flex items-center gap-x-4 p-2">
+        <Card className="flex items-center gap-x-2 p-2">
             <AddressAvatar
                 type={type}
                 address={address}

diff --git a/src/components/Molecules/ChainSelector/ChainSelector.tsx b/src/components/Molecules/ChainSelector/ChainSelector.tsx
@@ -19,6 +19,7 @@ import { type ChainItem } from "@covalenthq/client-sdk";
 import { CommandLoading } from "cmdk";
 import { Skeleton } from "@/components/ui/skeleton";
 import { GRK_SIZES } from "@/utils/constants/shared.constants";
+import { TokenAvatar } from "@/components/Atoms";
 
 export const ChainSelector: React.FC<ChainSelectorProps> = ({
     chain_options = [],
@@ -59,7 +60,19 @@ export const ChainSelector: React.FC<ChainSelectorProps> = ({
                     aria-expanded={open}
                     className="flex w-72 items-center justify-between"
                 >
-                    {!selectedChain ? "Select a chain..." : selectedChain.label}
+                    {!selectedChain ? (
+                        "Select a chain..."
+                    ) : (
+                        <div className="flex items-center gap-x-1">
+                            <TokenAvatar
+                                is_chain_logo
+                                size={GRK_SIZES.EXTRA_EXTRA_SMALL}
+                                chain_color={selectedChain.color_theme.hex}
+                                token_url={selectedChain.logo_url}
+                            />
+                            {selectedChain.label}
+                        </div>
+                    )}
                     <DoubleArrowDownIcon />
                 </Button>
             </PopoverTrigger>
@@ -82,7 +95,7 @@ export const ChainSelector: React.FC<ChainSelectorProps> = ({
                                 <CommandItem
                                     key={chain.name}
                                     value={chain.name}
-                                    className="cursor-pointer bg-background-light dark:bg-background-dark"
+                                    className="flex cursor-pointer gap-1 bg-background-light dark:bg-background-dark"
                                     onSelect={() => {
                                         setSelectedChain(chain);
                                         setOpen(false);
@@ -91,6 +104,12 @@ export const ChainSelector: React.FC<ChainSelectorProps> = ({
                                         }
                                     }}
                                 >
+                                    <TokenAvatar
+                                        is_chain_logo
+                                        size={GRK_SIZES.EXTRA_EXTRA_SMALL}
+                                        chain_color={chain.color_theme.hex}
+                                        token_url={chain.logo_url}
+                                    />
                                     {chain.label}
                                     <CheckIcon
                                         className={`w-4" ml-auto h-4 ${

diff --git a/src/components/Molecules/GasCard/GasCard.tsx b/src/components/Molecules/GasCard/GasCard.tsx
@@ -116,7 +116,7 @@ export const GasCard: React.FC<GasCardProps> = ({ chain_name }) => {
     );
 
     return (
-        <Card className="mt-4 flex w-full flex-col items-center justify-between gap-4 p-4 md:flex-row">
+        <Card className="flex w-full flex-col items-start justify-between gap-4 p-4 md:flex-row md:items-center">
             {maybeResult.match({
                 None: () => (
                     <>
@@ -131,7 +131,7 @@ export const GasCard: React.FC<GasCardProps> = ({ chain_name }) => {
                 ),
                 Some: (result) =>
                     errorMessage ? (
-                        <p className="mt-4">{errorMessage}</p>
+                        <p>{errorMessage}</p>
                     ) : result ? (
                         <>
                             <div

diff --git a/src/components/Molecules/Token/TokenTransfersList/TokenTransfersList.tsx b/src/components/Molecules/Token/TokenTransfersList/TokenTransfersList.tsx
@@ -12,7 +12,7 @@ import {
 import { Fragment, useCallback, useEffect, useState } from "react";
 import { type ColumnDef } from "@tanstack/react-table";
 import { TableCell, TableRow } from "@/components/ui/table";
-import { Address, AddressAvatar } from "@/components/Atoms";
+import { Address, AddressAvatar, AddressCard } from "@/components/Atoms";
 import { calculateTimeSeriesGroup } from "@/utils/functions";
 import { Badge } from "@/components/ui/badge";
 import { TableHeaderSorting, TableList } from "@/components/Shared";
@@ -109,18 +109,12 @@ export const TokenTransfersList: React.FC<TokenTransfersListProps> = ({
                 />
             ),
             cell: ({ row }) => (
-                <div className="flex items-center gap-x-2">
-                    <AddressAvatar
-                        size={GRK_SIZES.EXTRA_SMALL}
-                        type="fingerprint"
-                        address={row.getValue("from_address")}
-                    />
-                    <Address
-                        address={row.original.from_address}
-                        label={row.original.from_address_label}
-                        actionable_address={actionable_from}
-                    />
-                </div>
+                <Address
+                    address={row.original.from_address}
+                    label={row.original.from_address_label}
+                    show_avatar={true}
+                    actionable_address={actionable_from}
+                />
             ),
         },
         {
@@ -135,18 +129,12 @@ export const TokenTransfersList: React.FC<TokenTransfersListProps> = ({
             ),
             cell: ({ row }) => {
                 return (
-                    <div className="flex items-center gap-x-1">
-                        <AddressAvatar
-                            size={GRK_SIZES.EXTRA_SMALL}
-                            type="fingerprint"
-                            address={row.getValue("to_address")}
-                        />
-                        <Address
-                            address={row.original.to_address}
-                            label={row.original.to_address_label}
-                            actionable_address={actionable_to}
-                        />
-                    </div>
+                    <Address
+                        address={row.original.to_address}
+                        label={row.original.to_address_label}
+                        show_avatar={true}
+                        actionable_address={actionable_to}
+                    />
                 );
             },
         },

diff --git a/src/components/Molecules/Transaction/TransactionsList/TransactionsList.tsx b/src/components/Molecules/Transaction/TransactionsList/TransactionsList.tsx
@@ -119,6 +119,7 @@ export const TransactionsList: React.FC<TransactionsListProps> = ({
             cell: ({ row }) => (
                 <Address
                     address={row.original.from_address}
+                    show_avatar
                     actionable_address={actionable_from}
                 />
             ),
@@ -130,6 +131,7 @@ export const TransactionsList: React.FC<TransactionsListProps> = ({
             cell: ({ row }) => (
                 <Address
                     address={row.original.to_address}
+                    show_avatar
                     actionable_address={actionable_to}
                 />
             ),

diff --git a/src/components/Shared/Transactions.tsx b/src/components/Shared/Transactions.tsx
@@ -79,6 +79,7 @@ export const Transactions: React.FC<TransactionsProps> = ({
             cell: ({ row }) => (
                 <Address
                     label={row.original.from_address_label}
+                    show_avatar
                     address={row.original.from_address}
                 />
             ),
@@ -96,6 +97,7 @@ export const Transactions: React.FC<TransactionsProps> = ({
             cell: ({ row }) => (
                 <Address
                     label={row.original.to_address_label}
+                    show_avatar
                     address={row.original.to_address}
                 />
             ),

diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
@@ -120,7 +120,7 @@ const CommandItem = forwardRef<
     <CommandPrimitive.Item
         ref={ref}
         className={cn(
-            "aria-selected:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-primary-light data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:aria-selected:bg-primary-dark",
+            "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-primary-light data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:hover:bg-primary-dark",
             className
         )}
         {...props}

diff --git a/src/tailwind-input.css b/src/tailwind-input.css
@@ -9,24 +9,61 @@
     body {
         @apply bg-background-light text-foreground-light dark:bg-background-dark dark:text-foreground-dark;
     }
-}
 
-.searchResultScrollbar {
-    max-height: 250px;
-    overflow-y: auto;
-    scrollbar-width: thin;
-    scrollbar-color: #e2e8f0 #32353b;
-}
+    ::-webkit-scrollbar {
+        width: 5px;
+        height: 5px;
+    }
 
-.searchResultScrollbar::-webkit-scrollbar-thumb {
-    background-color: #32353b;
-}
+    *::-webkit-scrollbar-track {
+        border-radius: 4px;
+        background-color: var(--grk-secondary-light-DEFAULT);
+    }
 
-.searchResultScrollbar::-webkit-scrollbar-track {
-    background-color: #e2e8f0;
-}
+    *::-webkit-scrollbar-track:hover {
+        background-color: var(--grk-primary-light-DEFAULT);
+    }
+
+    *::-webkit-scrollbar-track:active {
+        background-color: var(--grk-primary-light-DEFAULT);
+    }
+
+    *::-webkit-scrollbar-thumb {
+        border-radius: 14px;
+        background-color: var(--grk-secondary-light-DEFAULT);
+    }
+
+    *::-webkit-scrollbar-thumb:hover {
+        background-color: var(--grk-primary-ligh-DEFAULT);
+    }
 
-::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
+    *::-webkit-scrollbar-thumb:active {
+        background-color: var(--grk-primary-light-DEFAULT);
+    }
+
+    body.dark *::-webkit-scrollbar-track {
+        border-radius: 4px;
+        background-color: var(--grk-secondary-dark-DEFAULT);
+    }
+
+    body.dark *::-webkit-scrollbar-track:hover {
+        background-color: var(--grk-primary-dark-DEFAULT);
+    }
+
+    body.dark *::-webkit-scrollbar-track:active {
+        background-color: var(--grk-primary-dark-DEFAULT);
+    }
+
+    body.dark *::-webkit-scrollbar-thumb {
+        border-radius: 14px;
+        background-color: var(--grk-secondary-dark-DEFAULT);
+    }
+
+    body.dark *::-webkit-scrollbar-thumb:hover {
+        background-color: var(--grk-primary-dark-DEFAULT);
+    }
+
+    body.dark *::-webkit-scrollbar-thumb:active {
+        background-color: var(--grk-primary-dark-DEFAULT);
+    }
 }
diff --git a/src/utils/types/atoms.types.ts b/src/utils/types/atoms.types.ts
@@ -9,6 +9,7 @@ export interface AddressProps {
     address: string;
     label?: string | null;
     show_copy_icon?: boolean;
+    show_avatar?: boolean;
     actionable_address?: (address: string) => ActionableType;
 }