diff --git a/src/components/Molecules/AddressDetails/AddressDetails.stories.tsx b/src/components/Molecules/AddressDetails/AddressDetails.stories.tsx new file mode 100644 index 00000000..41092918 --- /dev/null +++ b/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; + +const meta: Meta = { + title: "Molecules/Address Details", + component: AddressDetailsComponent, +}; + +export default meta; + +export const AddressDetails: Story = { + args: { + address: "0xf15689636571dba322b48E9EC9bA6cFB3DF818e1", + chain_name: "eth-mainnet", + }, +}; diff --git a/src/components/Organisms/AddressDetailsView/AddressDetailsView.tsx b/src/components/Molecules/AddressDetails/AddressDetails.tsx similarity index 91% rename from src/components/Organisms/AddressDetailsView/AddressDetailsView.tsx rename to src/components/Molecules/AddressDetails/AddressDetails.tsx index 82203fad..28521e8e 100644 --- a/src/components/Organisms/AddressDetailsView/AddressDetailsView.tsx +++ b/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,13 +22,11 @@ import { } from "@radix-ui/react-dropdown-menu"; import { CaretDownIcon } from "@radix-ui/react-icons"; -export const AddressDetailsView: React.FC = ({ +export const AddressDetails: React.FC = ({ 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<{ @@ -38,7 +34,6 @@ export const AddressDetailsView: React.FC = ({ summary: TransactionsSummary; }> >(None); - const [chainName, setChainName] = useState(initialChainName); useEffect(() => { (async () => { @@ -50,11 +45,11 @@ export const AddressDetailsView: React.FC = ({ { 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 = ({ ); } 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 ( -
-
- -
- - {show_chain_selector && ( - - setChainName(name as Chain) - } - /> - )} -
- {maybeResult.match({ None: () => (
diff --git a/src/components/Molecules/BlockDetails/BlockDetails.tsx b/src/components/Molecules/BlockDetails/BlockDetails.tsx index 4fc8b775..07596d62 100644 --- a/src/components/Molecules/BlockDetails/BlockDetails.tsx +++ b/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 = ({ return ( - Overview {maybeResult.match({ None: () => (
diff --git a/src/components/Molecules/LatestBlocks/LatestBlocks.stories.tsx b/src/components/Molecules/LatestBlocks/LatestBlocks.stories.tsx index 99c1a091..284fcd5e 100644 --- a/src/components/Molecules/LatestBlocks/LatestBlocks.stories.tsx +++ b/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, }, }; diff --git a/src/components/Molecules/LatestBlocks/LatestBlocks.tsx b/src/components/Molecules/LatestBlocks/LatestBlocks.tsx index 8cb08a7e..bae6e96a 100644 --- a/src/components/Molecules/LatestBlocks/LatestBlocks.tsx +++ b/src/components/Molecules/LatestBlocks/LatestBlocks.tsx @@ -13,7 +13,6 @@ import { useEffect, useState } from "react"; export const LatestBlocks: React.FC = ({ chain_name, - height, limit = 5, on_view_details, }) => { @@ -44,7 +43,7 @@ export const LatestBlocks: React.FC = ({ console.error(error); } })(); - }, [chain_name, height, limit]); + }, [chain_name, limit]); return maybeResult.match({ None: () => ( @@ -61,7 +60,7 @@ export const LatestBlocks: React.FC = ({ blocks.map((block) => (
BLOCK HEIGHT diff --git a/src/components/Molecules/SearchBar/SearchBar.tsx b/src/components/Molecules/SearchBar/SearchBar.tsx index c3881600..b713538a 100644 --- a/src/components/Molecules/SearchBar/SearchBar.tsx +++ b/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 (
-
diff --git a/src/components/Molecules/TransactionDetails/TransactionDetails.tsx b/src/components/Molecules/TransactionDetails/TransactionDetails.tsx index c2ca3fdb..3c91c5a3 100644 --- a/src/components/Molecules/TransactionDetails/TransactionDetails.tsx +++ b/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 = ({ return ( - Overview {maybeResult.match({ None: () => (
diff --git a/src/components/Molecules/index.ts b/src/components/Molecules/index.ts index d0e09818..0c04c82b 100644 --- a/src/components/Molecules/index.ts +++ b/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"; diff --git a/src/components/Organisms/AddressDetailsView/AddressDetailsView.stories.tsx b/src/components/Organisms/AddressDetailsView/AddressDetailsView.stories.tsx deleted file mode 100644 index 103d8635..00000000 --- a/src/components/Organisms/AddressDetailsView/AddressDetailsView.stories.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { type Meta, type StoryObj } from "@storybook/react"; -import { AddressDetailsView as AddressInfoComponent } from "./AddressDetailsView"; - -type Story = StoryObj; - -const meta: Meta = { - title: "Organisms/Address Details", - component: AddressInfoComponent, -}; - -export default meta; - -export const AddressDetails: Story = { - args: { - address: "0xf15689636571dba322b48E9EC9bA6cFB3DF818e1", - chain_name: "eth-mainnet", - show_chain_selector: true, - }, -}; diff --git a/src/components/Organisms/index.ts b/src/components/Organisms/index.ts index ded0ff05..a904d952 100644 --- a/src/components/Organisms/index.ts +++ b/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"; diff --git a/src/utils/types/molecules.types.ts b/src/utils/types/molecules.types.ts index 02a58898..df52599e 100644 --- a/src/utils/types/molecules.types.ts +++ b/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 {