wip(refactor/molecules): consistent stories

src/components/Molecules/AccountCard/AccountCard.stories.tsx

@@ -0,0 +1,18 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { AccountCard as AccountCardComponent } from "./AccountCard";
+
+type Story = StoryObj<typeof AccountCardComponent>;
+
+const meta: Meta<typeof AccountCardComponent> = {
+    title: "Molecules/Account Card",
+    component: AccountCardComponent,
+};
+
+export default meta;
+
+export const AccountCard: Story = {
+    args: {
+        address: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045",
+        type: "effigy",
+    },
+};

src/components/Molecules/AccountCardView/AccountCardView.tsx → src/components/Molecules/AccountCard/AccountCard.tsx

@@ -11,9 +11,9 @@ import { useToast } from "../../../utils/hooks/use-toast";
 import { AddressAvatar } from "../../Atoms/AddressAvatar/AddressAvatar";
 import { IconWrapper } from "../../Shared";
 import { GRK_SIZES } from "@/utils/constants/shared.constants";
-import { type AccountCardViewProps } from "@/utils/types/molecules.types";
+import { type AccountCardProps } from "@/utils/types/molecules.types";
 
-export const AccountCardView: React.FC<AccountCardViewProps> = ({
+export const AccountCard: React.FC<AccountCardProps> = ({
     address,
     type = "effigy",
     name = "Unnamed Wallet",

src/components/Molecules/CollectionCard/CollectionCard.stories.tsx

@@ -0,0 +1,18 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { CollectionCard as CollectionCardComponent } from "./CollectionCard";
+
+type Story = StoryObj<typeof CollectionCardComponent>;
+
+const meta: Meta<typeof CollectionCardComponent> = {
+    title: "Molecules/Collection Card",
+    component: CollectionCardComponent,
+};
+
+export default meta;
+
+export const CollectionCard: Story = {
+    args: {
+        collection_address: "0xe785e82358879f061bc3dcac6f0444462d4b5330",
+        chain_name: "eth-mainnet",
+    },
+};

src/components/Molecules/CollectionCardView/CollectionCardView.tsx → src/components/Molecules/CollectionCard/CollectionCard.tsx

@@ -11,13 +11,13 @@ import { useToast } from "../../../utils/hooks/use-toast";
 import { AddressAvatar } from "../../Atoms/AddressAvatar/AddressAvatar";
 import { IconWrapper } from "../../Shared";
 import { GRK_SIZES } from "@/utils/constants/shared.constants";
-import { type CollectionCardViewProps } from "@/utils/types/molecules.types";
+import { type CollectionCardProps } from "@/utils/types/molecules.types";
 import { useCovalent } from "@/utils/store/Covalent";
 import { type NftTokenContract } from "@covalenthq/client-sdk";
 import { type Option, Some, None } from "@/utils/option";
 import { Skeleton } from "@/components/ui/skeleton";
 
-export const CollectionCardView: React.FC<CollectionCardViewProps> = ({
+export const CollectionCard: React.FC<CollectionCardProps> = ({
     chain_name,
     collection_address,
 }) => {

src/components/Organisms/NFTs/NFTCollectionTokenListView/NFTCollectionTokenListView.tsx

@@ -19,7 +19,7 @@ import {
 import { Skeleton } from "@/components/ui/skeleton";
 import { useCovalent } from "@/utils/store/Covalent";
 import { type NFTCollectionTokenListViewProps } from "@/utils/types/organisms.types";
-import { CollectionCardView } from "@/components/Molecules/CollectionCardView/CollectionCardView";
+import { CollectionCard } from "@/components/Molecules/CollectionCard/CollectionCard";
 import { Button } from "@/components/ui/button";
 import {
     DropdownMenu,
@@ -109,7 +109,7 @@ export const NFTCollectionTokenListView: React.FC<
     return (
         <div className="space-y-4 ">
             <div className="flex flex-wrap place-content-between gap-2">
-                <CollectionCardView
+                <CollectionCard
                     collection_address={collection_address}
                     chain_name={chain_name}
                 />

src/components/Organisms/NFTs/NFTWalletTokenListView/NFTWalletTokenListView.tsx

@@ -17,7 +17,7 @@ import {
 } from "@/components/ui/card";
 import flatMap from "lodash/flatMap";
 import sum from "lodash/sum";
-import { AccountCardView } from "@/components/Molecules/AccountCardView/AccountCardView";
+import { AccountCard } from "@/components/Molecules/AccountCard/AccountCard";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useCovalent } from "@/utils/store/Covalent";
 import { type NFTWalletTokenListViewProps } from "@/utils/types/organisms.types";
@@ -78,7 +78,7 @@ export const NFTWalletTokenListView: React.FC<NFTWalletTokenListViewProps> = ({
     return (
         <div className="space-y-4 ">
             <div className="flex flex-wrap place-content-between gap-2">
-                <AccountCardView address={address} />
+                <AccountCard address={address} />
 
                 <div className="w-full rounded border p-2 md:max-w-[15rem] lg:max-w-[15rem]">
                     <h2 className="text-base font-semibold  text-secondary ">

src/components/Organisms/TokenBalances/AddressActivityListView/AddressActivityListView.tsx

@@ -18,7 +18,7 @@ import {
     TableRow,
 } from "@/components/ui/table";
 import { Checkbox } from "@/components/ui/checkbox";
-import { AccountCardView } from "@/components/Molecules/AccountCardView/AccountCardView";
+import { AccountCard } from "@/components/Molecules/AccountCard/AccountCard";
 import { Skeleton } from "@/components/ui/skeleton";
 import { timestampParser } from "@/utils/functions";
 import { TokenAvatar } from "@/components/Atoms/TokenAvatar/TokenAvatar";
@@ -262,7 +262,7 @@ export const AddressActivityListView: React.FC<
     return (
         <div className="space-y-4 ">
             <div className="flex flex-wrap place-content-between gap-2">
-                <AccountCardView address={address} />
+                <AccountCard address={address} />
                 <div className="w-full rounded border p-2 md:max-w-[15rem] lg:max-w-[15rem]">
                     <div className="flex place-content-between items-center space-x-1">
                         {" "}

src/components/Organisms/TokenBalances/TokenBalancesListView/TokenBalancesListView.tsx

@@ -35,7 +35,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { TokenAvatar } from "../../../Atoms/TokenAvatar/TokenAvatar";
 import { Button } from "@/components/ui/button";
 import { timestampParser } from "@/utils/functions";
-import { AccountCardView } from "@/components/Molecules/AccountCardView/AccountCardView";
+import { AccountCard } from "@/components/Molecules/AccountCard/AccountCard";
 import { TableHeaderSorting } from "@/components/ui/tableHeaderSorting";
 import { sum } from "lodash";
 import { BalancePriceDelta, IconWrapper } from "@/components/Shared";
@@ -615,7 +615,7 @@ export const TokenBalancesListView: React.FC<TokenBalancesListViewProps> = ({
     return (
         <div className="space-y-4">
             <div className="flex flex-wrap place-content-between gap-2">
-                <AccountCardView address={address} />
+                <AccountCard address={address} />
                 <div className="w-full rounded border p-2 md:max-w-[15rem] lg:max-w-[15rem]">
                     <h2 className="text-md text-secondary">Total Quote</h2>
                     <div className="flex items-end gap-2">

src/components/Organisms/TokenBalances/TokenTransfersListView/TokenTransfersListView.tsx

@@ -33,7 +33,7 @@ import {
     calculateTimeSeriesGroup,
 } from "@/utils/functions";
 import { Badge } from "@/components/ui/badge";
-import { AccountCardView } from "@/components/Molecules/AccountCardView/AccountCardView";
+import { AccountCard } from "@/components/Molecules/AccountCard/AccountCard";
 import { TableHeaderSorting } from "@/components/ui/tableHeaderSorting";
 import { Button } from "@/components/ui/button";
 import {
@@ -449,7 +449,7 @@ export const TokenTransfersListView: React.FC<TokenTransfersListViewProps> = ({
     return (
         <div className="space-y-4">
             <div className="flex flex-wrap place-content-between gap-2">
-                <AccountCardView address={address} />
+                <AccountCard address={address} />
                 <div className="lg:max-w-[15rem]] w-full rounded border p-2 md:max-w-[15rem]">
                     <div className="items-center space-x-1">
                         <span>Network</span>

src/utils/types/molecules.types.ts

@@ -1,12 +1,12 @@
 import { type Chain, type PoolWithTimeseries } from "@covalenthq/client-sdk";
 
-export interface AccountCardViewProps {
+export interface AccountCardProps {
     name?: string;
     address: string;
     type?: "fingerprint" | "effigy" | "wallet";
 }
 
-export interface CollectionCardViewProps {
+export interface CollectionCardProps {
     chain_name: Chain;
     collection_address: string;
 }