Account Details Page

src/app/address/[address]/page.tsx

@@ -1,6 +1,10 @@
-const AddressPage = ({ params: { address } }: { params: { address: string } }) => (
- <h1>{address}</h1>
- );
-
- export default AddressPage;
-
+import AddressComponent from "@/components/pages/address";
+import { Address } from "viem";
+
+const AddressPage = ({
+ params: { address },
+}: {
+ params: { address: Address };
+}) => <AddressComponent address={address} />;
+
+export default AddressPage;

src/components/common/copy-button/copy-button.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { CommonTooltip } from "@/components/common/tooltip";
+import { Copy, Check } from "lucide-react";
+import React, { useState } from "react";
+
+export function CopyButton({ toCopy }: { toCopy: string }) {
+ const [copied, setCopied] = useState(false); // State to manage copy status
+
+ const copyAddress = () => {
+ navigator.clipboard
+ .writeText(toCopy)
+ .then(() => {
+ setCopied(true); // Set copied state to true
+ setTimeout(() => setCopied(false), 1000); // Revert back after 1 second
+ })
+ .catch((err) => console.error("Failed to copy address: ", err));
+ };
+
+ return (
+ <div>
+ {copied ? (
+ <Check size={16} className="ml-4 text-green-500" />
+ ) : (
+ <CommonTooltip tooltipMessage="Copy Address" asChild>
+ <Copy
+ size={16}
+ className="ml-4 cursor-pointer"
+ onClick={copyAddress}
+ />
+ </CommonTooltip>
+ )}
+ </div>
+ );
+}

src/components/common/copy-button/index.ts

@@ -0,0 +1 @@
+export * from "./copy-button";

src/components/common/tooltip/common-tooltip.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { ReactNode, useRef } from "react";
+
+type Props = {
+ className?: string;
+ tooltipClassName?: string;
+ children: ReactNode;
+ tooltipMessage: ReactNode;
+ asChild?: boolean;
+ hideOnClick?: boolean;
+ delayDuration?: number;
+};
+
+export function CommonTooltip(props: Props) {
+ const {
+ className,
+ children,
+ tooltipMessage,
+ asChild,
+ hideOnClick = true,
+ tooltipClassName,
+ delayDuration = 0,
+ } = props;
+ const triggerRef = useRef(null);
+ return (
+ <TooltipProvider>
+ <Tooltip delayDuration={delayDuration}>
+ <TooltipTrigger
+ className={className}
+ asChild={asChild}
+ onClick={(event) => {
+ if (!hideOnClick) event.preventDefault();
+ }}
+ ref={triggerRef}
+ >
+ {children}
+ </TooltipTrigger>
+ <TooltipContent
+ className={tooltipClassName}
+ onPointerDownOutside={(event) => {
+ if (event.target === triggerRef.current && !hideOnClick)
+ event.preventDefault();
+ }}
+ >
+ {tooltipMessage}
+ </TooltipContent>
+ </Tooltip>
+ </TooltipProvider>
+ );
+}

src/components/common/tooltip/index.ts

@@ -0,0 +1 @@
+export * from "./common-tooltip";

src/components/lib/description-list-item.tsx

@@ -5,18 +5,28 @@ const DescriptionListItem = ({
  title,
  border = false,
  children,
+ secondary = false,
 }: {
  title: string;
  border?: boolean;
+ secondary?: boolean;
  children: ReactNode;
 }) => (
  <div
  className={cn(
  { "border-t border-gray-100 dark:border-white/10": border },
- "px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0",
+ "px-4 py-3 sm:px-0",
+ secondary ? "flex flex-col sm:gap-3" : "sm:grid sm:grid-cols-3 sm:gap-4",
  )}
  >
- <dt className="text-sm font-medium leading-6">{title}:</dt>
+ <dt
+ className={cn("text-sm font-medium leading-6", {
+ "text-muted-foreground": secondary,
+ })}
+ >
+ {title}
+ {secondary ? "" : ":"}
+ </dt>
  <dd className="mt-1 flex items-center text-sm font-medium leading-6 sm:col-span-2 sm:mt-0">
  {children}
  </dd>

src/components/lib/navbar/category-values-list.tsx

@@ -8,12 +8,12 @@ interface Props {
 }
 
 export function CategoryValuesList({ selectedCategory, searchResult }: Props) {
- const categoryToRedirect: string = 
- selectedCategory === "Transactions" 
- ? "tx" 
- : selectedCategory === "Blocks" 
- ? "block" 
- : "address";
+ const categoryToRedirect: string =
+  selectedCategory === "Transactions"
+  ? "tx"
+  : selectedCategory === "Blocks"
+  ? "block"
+  : "address";
 
  return (
  <div className="custom-scroll flex max-h-64 flex-col items-center justify-start overflow-y-auto px-4">

src/components/lib/navbar/search-result-dropdown.tsx

@@ -4,11 +4,11 @@ import { CategoryListDropdown } from "./category-list-dropdown";
 import { CategoryValuesList } from "./category-values-list";
 
 interface Props {
- showResult : boolean;
- selectedCategory : string;
- searchResult : SearchInputResult[];
+ showResult: boolean;
+ selectedCategory: string;
+ searchResult: SearchInputResult[];
  handleCategorySelect: (category: string) => void;
- handleShowResult : (value: boolean) => void
+ handleShowResult: (value: boolean) => void;
 }
 
 export function SearchResultDropDown({
@@ -20,9 +20,13 @@ export function SearchResultDropDown({
 }: Props) {
  const dropdownRef = useRef<HTMLDivElement>(null);
 
- useEffect(() => { // Ensures that the menu is hidden if the user clicks on any part of the screen
+ useEffect(() => {
+ // Ensures that the menu is hidden if the user clicks on any part of the screen
  const handleClickOutside = (event: MouseEvent) => {
- if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+ if (
+ dropdownRef.current &&
+ !dropdownRef.current.contains(event.target as Node)
+ ) {
  handleShowResult(false);
  }
  };
@@ -47,15 +51,15 @@ export function SearchResultDropDown({
  >
  {searchResult.length !== 0 ? (
  <div>
- <CategoryListDropdown 
+ <CategoryListDropdown
  searchResult={searchResult}
  selectedCategory={selectedCategory}
  handleCategorySelect={handleCategorySelect}
- /> 
- <CategoryValuesList 
+ />
+ <CategoryValuesList
  searchResult={searchResult}
  selectedCategory={selectedCategory}
- /> 
+ />
  </div>
  ) : (
  <div className="w-full items-center justify-start p-4 text-base opacity-[0.6]">

src/components/lib/navbar/search.tsx

@@ -5,28 +5,34 @@ import { useSearch } from "@/hooks";
 import { SearchResultDropDown } from "./search-result-dropdown";
 
 const Search = () => {
- const { 
- searchResult, showResult, selectedCategory, handleCategorySelect, onQueryChanged, handleShowResult } = useSearch()
+ const {
+ searchResult,
+ showResult,
+ selectedCategory,
+ handleCategorySelect,
+ onQueryChanged,
+ handleShowResult,
+ } = useSearch();
 
  return (
- <form className="ml-auto flex-1 relative sm:flex-initial">
+ <form className="relative ml-auto flex-1 sm:flex-initial">
  <div className="relative">
  <div className="relative flex items-center">
  <SearchIcon className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
  <Input
  type="search"
  onChange={onQueryChanged}
  placeholder="Search by Address / Txn Hash / Block / Token"
- className="pl-8 w-full sm:w-[400px] md:w-[360px] lg:w-[480px]"
+ className="w-full pl-8 sm:w-[400px] md:w-[360px] lg:w-[480px]"
  />
  </div>
  <SearchResultDropDown
- showResult={showResult} 
+ showResult={showResult}
  searchResult={searchResult}
  selectedCategory={selectedCategory}
  handleCategorySelect={handleCategorySelect}
  handleShowResult={handleShowResult}
- /> 
+ />
  </div>
  </form>
  );

src/components/pages/address/address-details.tsx

@@ -0,0 +1,44 @@
+import DescriptionListItem from "@/components/lib/description-list-item";
+import EthereumIcon from "@/components/lib/ethereum-icon";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { AddressDetails } from "@/lib/types";
+import { formatEther } from "viem";
+
+const AddressDetailsSection = ({
+ address,
+ ethPriceToday,
+}: {
+ address: AddressDetails;
+ ethPriceToday: number;
+}) => (
+ <Card>
+ <CardHeader className="p-4">
+ <CardTitle>Overview</CardTitle>
+ </CardHeader>
+
+ <CardContent>
+ <dl>
+ <DescriptionListItem secondary title="ETH BALANCE">
+ <EthereumIcon className="mr-1 size-4" />
+ {formatEther(address.balance)} ETH
+ </DescriptionListItem>
+ <DescriptionListItem secondary title="ETH VALUE">
+ {(
+ Number(formatEther(address.balance)) * ethPriceToday
+ ).toLocaleString("en-US", {
+ style: "currency",
+ currency: "USD",
+ })}{" "}
+ (@{" "}
+ {ethPriceToday.toLocaleString("en-US", {
+ style: "currency",
+ currency: "USD",
+ })}
+ /ETH)
+ </DescriptionListItem>
+ </dl>
+ </CardContent>
+ </Card>
+);
+
+export default AddressDetailsSection;

src/components/pages/address/index.tsx

@@ -0,0 +1,31 @@
+import { Address } from "viem";
+import { l2PublicClient } from "@/lib/chains";
+import AddressDetails from "./address-details";
+import { fetchTokensPrices } from "@/lib/utils";
+import { CopyButton } from "@/components/common/copy-button";
+
+const AddressComponent = async ({ address }: { address: Address }) => {
+ const ethPrice = await fetchTokensPrices();
+ const byteCode = await l2PublicClient.getCode({ address });
+ const balance = await l2PublicClient.getBalance({ address });
+
+ const addressType = byteCode ? "Contract" : "Address";
+
+ return (
+ <main className="flex flex-1 flex-col gap-4 p-4 md:gap-4 md:p-4">
+ <h2 className="mt-10 flex scroll-m-20 items-end border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
+ {addressType}
+ <span className="ml-2 flex items-center text-base">
+ {address}
+ <CopyButton toCopy={address} />
+ </span>
+ </h2>
+ <AddressDetails
+ address={{ addressType, balance }}
+ ethPriceToday={ethPrice.eth.today}
+ />
+ </main>
+ );
+};
+
+export default AddressComponent;

src/hooks/index.ts

@@ -1 +1 @@
-export * from './useSearch';
+export * from "./useSearch";