fix: latest blocks (#158)

src/components/Molecules/AddressDetails/AddressDetails.stories.tsx

@@ -0,0 +1,18 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { AddressDetails as AddressDetailsComponent } from "./AddressDetails";
+
+type Story = StoryObj<typeof AddressDetailsComponent>;
+
+const meta: Meta<typeof AddressDetailsComponent> = {
+    title: "Molecules/Address Details",
+    component: AddressDetailsComponent,
+};
+
+export default meta;
+
+export const AddressDetails: Story = {
+    args: {
+        address: "0xf15689636571dba322b48E9EC9bA6cFB3DF818e1",
+        chain_name: "eth-mainnet",
+    },
+};

src/components/Organisms/AddressDetailsView/AddressDetailsView.tsx → src/components/Molecules/AddressDetails/AddressDetails.tsx

@@ -8,13 +8,11 @@ import { useGoldRush } from "@/utils/store";
 import { type AddressDetailsProps } from "@/utils/types/molecules.types";
 import {
     type TransactionsSummary,
-    type Chain,
     type BalanceItem,
     calculatePrettyBalance,
     prettifyCurrency,
 } from "@covalenthq/client-sdk";
 import { useEffect, useState } from "react";
-import { AccountCard, ChainSelector } from "@/components/Molecules";
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -24,21 +22,18 @@ import {
 } from "@radix-ui/react-dropdown-menu";
 import { CaretDownIcon } from "@radix-ui/react-icons";
 
-export const AddressDetailsView: React.FC<AddressDetailsProps> = ({
+export const AddressDetails: React.FC<AddressDetailsProps> = ({
     address,
-    chain_name: initialChainName,
-    show_chain_selector = true,
+    chain_name,
 }) => {
-    const { covalentClient, chains, setSelectedChain, selectedChain } =
-        useGoldRush();
+    const { covalentClient, selectedChain } = useGoldRush();
 
     const [maybeResult, setMaybeResult] = useState<
         Option<{
             balances: BalanceItem[];
             summary: TransactionsSummary;
         }>
     >(None);
-    const [chainName, setChainName] = useState<Chain>(initialChainName);
 
     useEffect(() => {
         (async () => {
@@ -50,11 +45,11 @@ export const AddressDetailsView: React.FC<AddressDetailsProps> = ({
                     { data: balancesData, ...balancesError },
                 ] = await Promise.all([
                     covalentClient.TransactionService.getTransactionSummary(
-                        chainName,
+                        chain_name,
                         address.trim()
                     ),
                     covalentClient.BalanceService.getTokenBalancesForWalletAddress(
-                        chainName,
+                        chain_name,
                         address.trim()
                     ),
                 ]);
@@ -80,34 +75,15 @@ export const AddressDetailsView: React.FC<AddressDetailsProps> = ({
                 );
             } catch (error) {
                 console.error(
-                    `Error fetching transactions summary for ${chainName}:`,
+                    `Error fetching transactions summary for ${chain_name}:`,
                     error
                 );
             }
         })();
-    }, [address, chainName]);
-
-    useEffect(() => {
-        const chain = chains?.find((o) => o.name === chainName) ?? null;
-        setSelectedChain(chain);
-    }, [chains, chainName]);
+    }, [address, chain_name]);
 
     return (
         <Card className="flex flex-col gap-y-4 rounded p-4 dark:bg-background-dark dark:text-white">
-            <div className="grid grid-cols-1 items-center gap-4 md:grid-cols-3">
-                <div className="w-fit md:col-span-2">
-                    <AccountCard address={address} />
-                </div>
-
-                {show_chain_selector && (
-                    <ChainSelector
-                        onChangeChain={({ name }) =>
-                            setChainName(name as Chain)
-                        }
-                    />
-                )}
-            </div>
-
             {maybeResult.match({
                 None: () => (
                     <div className="grid grid-cols-1 items-start gap-4 text-sm md:grid-cols-3">

src/components/Molecules/BlockDetails/BlockDetails.tsx

@@ -1,5 +1,5 @@
 import { Address } from "@/components/Atoms";
-import { Card, CardDescription, CardTitle } from "@/components/ui/card";
+import { Card, CardDescription } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 import { GRK_SIZES } from "@/utils/constants/shared.constants";
 import { timestampParser } from "@/utils/functions";
@@ -40,7 +40,6 @@ export const BlockDetails: React.FC<BlockDetailsProps> = ({
 
     return (
         <Card className="flex w-full flex-col items-start gap-x-4 rounded border border-secondary-light p-2 dark:border-secondary-dark dark:bg-background-dark dark:text-white">
-            <CardTitle className="">Overview</CardTitle>
             {maybeResult.match({
                 None: () => (
                     <div className="mt-4">

src/components/Molecules/LatestBlocks/LatestBlocks.stories.tsx

@@ -13,6 +13,5 @@ export default meta;
 export const LatestBlocks: Story = {
     args: {
         chain_name: "eth-mainnet",
-        height: 16643179,
     },
 };

src/components/Molecules/LatestBlocks/LatestBlocks.tsx

@@ -13,7 +13,6 @@ import { useEffect, useState } from "react";
 
 export const LatestBlocks: React.FC<LatestBlocksProps> = ({
     chain_name,
-    height,
     limit = 5,
     on_view_details,
 }) => {
@@ -44,7 +43,7 @@ export const LatestBlocks: React.FC<LatestBlocksProps> = ({
                 console.error(error);
             }
         })();
-    }, [chain_name, height, limit]);
+    }, [chain_name, limit]);
 
     return maybeResult.match({
         None: () => (
@@ -61,7 +60,7 @@ export const LatestBlocks: React.FC<LatestBlocksProps> = ({
                 blocks.map((block) => (
                     <Card
                         key={block.height}
-                        className="m-4 flex w-full flex-col rounded border border-secondary-light p-2 dark:border-secondary-dark dark:bg-background-dark dark:text-white"
+                        className="flex w-full flex-col rounded border border-secondary-light p-2 dark:border-secondary-dark dark:bg-background-dark dark:text-white"
                     >
                         <div className="flex w-full justify-between">
                             <CardDescription>BLOCK HEIGHT</CardDescription>

src/components/Molecules/SearchBar/SearchBar.tsx

@@ -3,9 +3,9 @@ import { Input } from "@/components/ui/input";
 import { useDebounce } from "@/utils/hooks/use-debounce";
 import {
     AddressActivityListView,
-    AddressDetailsView,
     TransactionReceiptView,
 } from "@/components/Organisms";
+import { AddressDetails } from "../";
 import { ChainSelector } from "../ChainSelector/ChainSelector";
 import { useGoldRush } from "@/utils/store";
 import { BlockDetails } from "../BlockDetails/BlockDetails";
@@ -36,10 +36,9 @@ export const SearchBar: React.FC = () => {
             case "address": {
                 return (
                     <div className="flex w-full flex-col gap-y-8">
-                        <AddressDetailsView
+                        <AddressDetails
                             address={searchInput}
                             chain_name={selectedChain?.name as Chain}
-                            show_chain_selector={false}
                         />
                         <AddressActivityListView address={searchInput} />
                     </div>

src/components/Molecules/TransactionDetails/TransactionDetails.tsx

@@ -1,5 +1,5 @@
 import { Address } from "@/components/Atoms";
-import { Card, CardDescription, CardTitle } from "@/components/ui/card";
+import { Card, CardDescription } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 import { GRK_SIZES } from "@/utils/constants/shared.constants";
 import { timestampParser } from "@/utils/functions";
@@ -51,7 +51,6 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
 
     return (
         <Card className="flex w-full flex-col items-start gap-x-4 rounded border border-secondary-light p-2 dark:border-secondary-dark dark:bg-background-dark dark:text-white">
-            <CardTitle className="">Overview</CardTitle>
             {maybeResult.match({
                 None: () => (
                     <div className="mt-4">

src/components/Molecules/index.ts

@@ -1,4 +1,9 @@
 export { AccountCard } from "./AccountCard/AccountCard";
+export { AddressDetails } from "./AddressDetails/AddressDetails";
+/**
+ * @deprecated This component is deprecated. Please use `AddressDetails` instead.
+ */
+export { AddressDetails as AddressDetailsView } from "./AddressDetails/AddressDetails";
 export { BlockDetails } from "./BlockDetails/BlockDetails";
 export { ChainSelector } from "./ChainSelector/ChainSelector";
 export { CollectionCard } from "./CollectionCard/CollectionCard";

src/components/Organisms/index.ts

@@ -1,4 +1,3 @@
-export { AddressDetailsView } from "./AddressDetailsView/AddressDetailsView";
 export { NFTCollectionTokenListView } from "./NFTs/NFTCollectionTokenListView/NFTCollectionTokenListView";
 export { NFTDetailView } from "./NFTs/NFTDetailView/NFTDetailView";
 export { NFTWalletCollectionView } from "./NFTs/NFTWalletCollectionView/NFTWalletCollectionView";
@@ -10,7 +9,7 @@ export { TransactionReceiptView } from "./TransactionReceiptView/TransactionRece
 export { AddressTransactions } from "./AddressTransactions/AddressTransactions";
 export { BlockTransactions } from "./BlockTransactions/BlockTransactions";
 /**
- * @deprecated This component is deprecated. Please use AddressTransactions instead.
+ * @deprecated This component is deprecated. Please use `AddressTransactions` instead.
  */
 export { AddressTransactions as TransactionsList } from "./AddressTransactions/AddressTransactions";
 export { XYKOverviewTransactionsListView } from "./XYK/XYKOverviewTransactionsListView/XYKOverviewTransactionsListView";

src/utils/types/molecules.types.ts

@@ -27,7 +27,6 @@ export interface BlockDetailsProps {
 
 export interface LatestBlocksProps {
     chain_name: Chain;
-    height: number;
     limit?: number;
     on_view_details?: (block: Block) => void;
 }
@@ -40,7 +39,6 @@ export interface GasCardProps {
 export interface AddressDetailsProps {
     address: string;
     chain_name: Chain;
-    show_chain_selector?: boolean;
 }
 
 export interface ChainSelectorProps {