fix: address details

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/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/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

@@ -39,7 +39,6 @@ export interface GasCardProps {
 export interface AddressDetailsProps {
     address: string;
     chain_name: Chain;
-    show_chain_selector?: boolean;
 }
 
 export interface ChainSelectorProps {