Yj feat/explorer edits (#190)

package.json

@@ -92,7 +92,7 @@
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-popover": "^1.0.7",
         "@radix-ui/react-slot": "^1.0.2",
-        "@radix-ui/react-toast": "^1.1.5",
+        "@radix-ui/react-toast": "^1.2.1",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
         "cmdk": "^0.2.1",

src/components/Atoms/Address/Address.tsx

@@ -8,21 +8,22 @@ 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";
+import { Toaster } from "@/components/ui/toaster";
 
 export const Address: React.FC<AddressProps> = ({
     address,
     label = null,
     show_copy_icon = true,
-    show_avatar = false,
+    avatar = null,
     actionable_address = () => null,
 }) => {
     const [showCopy, setShowCopy] = useState<boolean>(false);
     const { toast } = useToast();
 
     const handleCopyClick = () => {
         toast({
-            description: "Address copied!",
+            title: "Copied to clipboard!",
+            description: address,
         });
         setShowCopy(true);
         setTimeout(() => {
@@ -32,14 +33,9 @@ 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
-                />
-            )}
+            <Toaster />
+            {avatar && <AddressAvatar {...avatar} address={address} />}
+
             {actionableWrapper(
                 actionable_address(address),
                 label?.trim() || truncate(address)

src/components/Atoms/AddressAvatar/AddressAvatar.stories.tsx

@@ -1,7 +1,9 @@
 import { type Meta, type StoryObj } from "@storybook/react";
 import { AddressAvatar as AddressAvatarComponent } from "./AddressAvatar";
-import { type AddressAvatarProps } from "@/utils/types/atoms.types";
-import { GRK_SIZES } from "@/utils/constants/shared.constants";
+import {
+    ADDRESS_AVATAR_TYPE,
+    GRK_SIZES,
+} from "@/utils/constants/shared.constants";
 
 const meta: Meta<typeof AddressAvatarComponent> = {
     title: "Atoms/Address Avatar",
@@ -14,57 +16,9 @@ type Story = StoryObj<typeof AddressAvatarComponent>;
 
 export const AddressAvatar: Story = {
     args: {
-        size: GRK_SIZES.SMALL,
-        type: "fingerprint",
+        size: GRK_SIZES.LARGE,
+        type: ADDRESS_AVATAR_TYPE.FINGERPRINT,
         address: "0xd8da6bf26964af9d7eed9e03e53415d37aa96045",
-    },
-    render: ({
-        size,
-        type,
-        address,
-        rounded,
-        custom_avatar,
-    }: AddressAvatarProps) => {
-        return (
-            <>
-                <div className="m-1">
-                    <AddressAvatarComponent
-                        address={address}
-                        size={size}
-                        type={type}
-                        rounded={rounded}
-                        custom_avatar={custom_avatar}
-                    />
-                </div>
-
-                <div className="m-1 mt-20 flex gap-1">
-                    <AddressAvatarComponent
-                        address={address}
-                        size={GRK_SIZES.LARGE}
-                        type={"effigy"}
-                    />
-                    <AddressAvatarComponent
-                        address={address}
-                        size={GRK_SIZES.MEDIUM}
-                        type={"wallet"}
-                    />
-                    <AddressAvatarComponent
-                        address={address}
-                        size={GRK_SIZES.SMALL}
-                        type={"effigy"}
-                    />
-                    <AddressAvatarComponent
-                        address={address}
-                        size={GRK_SIZES.EXTRA_SMALL}
-                        type={"fingerprint"}
-                    />
-                    <AddressAvatarComponent
-                        address={address}
-                        size={GRK_SIZES.EXTRA_EXTRA_SMALL}
-                        type={"wallet"}
-                    />
-                </div>
-            </>
-        );
+        rounded: false,
     },
 };

src/components/Atoms/AddressAvatar/AddressAvatar.tsx

@@ -1,18 +1,21 @@
-import Fingerprint from "@/static/avatar/fingerprint.svg";
-import WalletRound from "@/static/avatar/wallet-round.svg";
-import WalletSquare from "@/static/avatar/wallet-square.svg";
+import AvatarFingerprint from "@/static/avatar/avatar-fingerprint.svg";
+import AvatarWallet from "@/static/avatar/avatar-wallet.svg";
 import { stringToColor } from "@/utils/functions";
 import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
 import { type AddressAvatarProps } from "@/utils/types/atoms.types";
 import { useMemo } from "react";
+import {
+    ADDRESS_AVATAR_TYPE,
+    GRK_SIZES,
+} from "@/utils/constants/shared.constants";
+import { Address } from "..";
 
 export const AddressAvatar: React.FC<AddressAvatarProps> = ({
     address,
-    type,
-    size,
-    fallback,
+    type = ADDRESS_AVATAR_TYPE.FINGERPRINT,
+    size = GRK_SIZES.SMALL,
     rounded = false,
-    class_name,
+    class_name = "",
     custom_avatar,
 }) => {
     const SRC = useMemo<
@@ -22,55 +25,48 @@ export const AddressAvatar: React.FC<AddressAvatarProps> = ({
             return custom_avatar;
         }
         switch (type) {
-            case "effigy":
+            case ADDRESS_AVATAR_TYPE.EFFIGY:
                 return `https://effigy.im/a/${address}.png`;
-
-            case "nft":
-                return address;
-
-            case "fingerprint":
-                return Fingerprint;
-
-            case "wallet":
-                return rounded ? WalletRound : WalletSquare;
-
-            default:
-                return Fingerprint;
+            case ADDRESS_AVATAR_TYPE.WALLET:
+                return AvatarWallet;
+            case ADDRESS_AVATAR_TYPE.FINGERPRINT:
+                return AvatarFingerprint;
         }
     }, [type, address, rounded, custom_avatar]);
 
     const SIZE_CLASS = useMemo<string>(() => {
         switch (size) {
-            case "xxs":
+            case GRK_SIZES.EXTRA_EXTRA_SMALL:
                 return "w-6 h-6";
-            case "xs":
+            case GRK_SIZES.EXTRA_SMALL:
                 return "w-8 h-8";
-            case "sm":
+            case GRK_SIZES.SMALL:
                 return "w-10 h-10";
-            case "md":
+            case GRK_SIZES.MEDIUM:
                 return "w-20 h-20";
-            case "lg":
+            case GRK_SIZES.LARGE:
                 return "w-24 h-24";
-            default:
-                return "w-12 h-12";
         }
     }, [size]);
 
-    const BG_COLOR = useMemo<React.CSSProperties>(
-        () => ({
-            backgroundColor: stringToColor(address),
-        }),
+    const BG_COLOR = useMemo<React.CSSProperties["backgroundColor"]>(
+        () => stringToColor(address),
         [address]
     );
 
     return (
         <Avatar
             className={`${SIZE_CLASS} ${rounded ? "rounded-full" : "rounded"} ${
-                class_name || ""
+                class_name
             }`}
         >
-            <AvatarImage style={BG_COLOR} src={SRC as string} />
-            <AvatarFallback style={BG_COLOR}>{fallback}</AvatarFallback>
+            <AvatarImage
+                style={{ backgroundColor: BG_COLOR }}
+                src={SRC as string}
+            />
+            <AvatarFallback style={{ backgroundColor: BG_COLOR }}>
+                <Address address={address} />
+            </AvatarFallback>
         </Avatar>
     );
 };

src/components/Atoms/AddressCard/AddressCard.stories.tsx

@@ -14,7 +14,7 @@ export default meta;
 export const AddressCard: Story = {
     args: {
         address: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045",
-        type: "effigy",
+        avatar: {},
         actionable_address: (address: string) => storyAction(address),
     },
 };

src/components/Atoms/AddressCard/AddressCard.tsx

@@ -1,5 +1,4 @@
 import { Address, AddressAvatar } from "../../Atoms";
-import { GRK_SIZES } from "@/utils/constants/shared.constants";
 import { type AddressCardProps } from "@/utils/types/atoms.types";
 import {
     Dialog,
@@ -13,20 +12,15 @@ import { Card } from "@/components/ui/card";
 
 export const AddressCard: React.FC<AddressCardProps> = ({
     address,
-    type = "effigy",
+    avatar,
     label = "Unnamed Wallet",
     show_copy_icon = true,
     show_qr_code = true,
     actionable_address,
 }) => {
     return (
         <Card className="flex items-center gap-x-2 p-2">
-            <AddressAvatar
-                type={type}
-                address={address}
-                rounded
-                size={GRK_SIZES.SMALL}
-            />
+            <AddressAvatar {...avatar} address={address} />
             <div className="flex h-full flex-col justify-center">
                 <h2 className="text-base font-semibold text-foreground-light dark:text-foreground-dark">
                     {label}

src/components/Atoms/NFT/NFT.stories.tsx

@@ -1,5 +1,6 @@
 import { type Meta, type StoryObj } from "@storybook/react";
 import { NFT as NFTComponent } from "./NFT";
+import { storyAction } from "@/utils/functions";
 
 const meta: Meta<typeof NFTComponent> = {
     title: "Atoms/NFT",
@@ -51,5 +52,6 @@ export const NFT: Story = {
                 value: "Passion Red",
             },
         ],
+        actionable_contract: (address: string) => storyAction(address),
     },
 };

src/components/Atoms/NFT/NFT.tsx

@@ -1,19 +1,25 @@
 import { type NFTProps } from "@/utils/types/atoms.types";
 import { Card, CardContent, CardDescription } from "@/components/ui/card";
-import { GRK_SIZES, defaultErrorNFT } from "@/utils/constants/shared.constants";
+import {
+    GRK_SIZES,
+    DEFAULT_ERROR_NFT,
+} from "@/utils/constants/shared.constants";
 import { CardDetail } from "@/components/Shared";
 import { TokenAvatar } from "../TokenAvatar/TokenAvatar";
 import { useGoldRush } from "@/utils/store";
 import { type ChainItem } from "@covalenthq/client-sdk";
 import { useMemo } from "react";
+import { actionableWrapper } from "@/utils/functions";
 
 export const NFT: React.FC<NFTProps> = ({
     collection_name,
+    collection_address,
     token_id,
     attributes = [],
     src,
     children = null,
     chain_name = null,
+    actionable_contract = () => null,
 }) => {
     const { chains } = useGoldRush();
 
@@ -27,25 +33,19 @@ export const NFT: React.FC<NFTProps> = ({
             <CardContent className="relative rounded transition-all">
                 <img
                     className="block h-64 w-64 object-cover"
-                    src={src || defaultErrorNFT}
+                    src={src || DEFAULT_ERROR_NFT}
                     onError={(e) => {
-                        e.currentTarget.src = defaultErrorNFT;
+                        e.currentTarget.src = DEFAULT_ERROR_NFT;
                     }}
                 />
 
                 {chain ? (
-                    <div
-                        className="absolute -bottom-4 right-2 flex h-9 w-9 items-center justify-center rounded-[100%] bg-background-light p-1 dark:bg-background-dark"
-                        style={{
-                            border: `2px solid `,
-                            borderColor: `${chain.color_theme.hex}`,
-                        }}
-                    >
+                    <div className="absolute bottom-1 right-1 flex">
                         <TokenAvatar
-                            is_chain_logo
+                            only_primary
                             size={GRK_SIZES.EXTRA_SMALL}
                             chain_color={chain.color_theme.hex}
-                            token_url={chain?.logo_url}
+                            primary_url={chain?.logo_url}
                         />
                     </div>
                 ) : (
@@ -54,9 +54,12 @@ export const NFT: React.FC<NFTProps> = ({
             </CardContent>
 
             <CardDetail
-                heading={collection_name?.toUpperCase() ?? null}
+                heading={actionableWrapper(
+                    actionable_contract(collection_address || ""),
+                    collection_name?.toUpperCase() ?? null
+                )}
                 content={token_id ? `#${token_id}` : null}
-                wrapperClassName="p-2"
+                wrapperClassName="p-2 !text-left"
             />
 
             {children}

src/components/Atoms/Pool/Pool.tsx

@@ -15,12 +15,14 @@ export const Pool: React.FC<PoolProps> = ({
         <div className="flex items-center gap-2">
             <TokenAvatar
                 size={GRK_SIZES.EXTRA_SMALL}
-                token_url={token_0_logo_url}
+                primary_url={token_0_logo_url}
+                only_primary
             />
             <div className="-ml-6">
                 <TokenAvatar
                     size={GRK_SIZES.EXTRA_SMALL}
-                    token_url={token_1_logo_url}
+                    primary_url={token_1_logo_url}
+                    only_primary
                 />
             </div>