refactor: naming conventions

tools/obscuroscan_v3/frontend/api/batches.ts

@@ -8,7 +8,7 @@ import {
   BatchResponse,
 } from "@/src/types/interfaces/BatchInterfaces";
 
-export const getBatches = async (
+export const fetchBatches = async (
   payload?: Record<string, any>
 ): Promise<ResponseDataInterface<BatchResponse>> => {
   const data = await httpRequest<ResponseDataInterface<BatchResponse>>({
@@ -19,7 +19,7 @@ export const getBatches = async (
   return data;
 };
 
-export const getLatestBatch = async (
+export const fetchLatestBatch = async (
   payload?: Record<string, any>
 ): Promise<ResponseDataInterface<Batch>> => {
   const data = await httpRequest<ResponseDataInterface<Batch>>({
@@ -30,7 +30,7 @@ export const getLatestBatch = async (
   return data;
 };
 
-export const getBatchByHash = async (
+export const fetchBatchByHash = async (
   hash: string
 ): Promise<ResponseDataInterface<BatchDetails>> => {
   const data = await httpRequest<ResponseDataInterface<BatchDetails>>({

tools/obscuroscan_v3/frontend/api/blocks.ts

@@ -3,7 +3,7 @@ import { apiRoutes } from "@/src/routes";
 import { pathToUrl } from "@/src/routes/router";
 import { ResponseDataInterface } from "@/src/types/interfaces";
 
-export const getBlocks = async (
+export const fetchBlocks = async (
   payload?: Record<string, any>
 ): Promise<ResponseDataInterface<any>> => {
   const data = await httpRequest<ResponseDataInterface<any>>({

tools/obscuroscan_v3/frontend/api/contracts.ts

@@ -4,7 +4,7 @@ import { pathToUrl } from "@/src/routes/router";
 import { ResponseDataInterface } from "@/src/types/interfaces";
 import { ContractCount } from "@/src/types/interfaces/ContractInterface";
 
-export const getContractCount = async (
+export const fetchContractCount = async (
   payload?: Record<string, any>
 ): Promise<ContractCount> => {
   const data = await httpRequest<ContractCount>({
@@ -15,7 +15,7 @@ export const getContractCount = async (
   return data;
 };
 
-export const getVerifiedContracts = async (
+export const fetchVerifiedContracts = async (
   payload?: Record<string, any>
 ): Promise<ResponseDataInterface<any>> => {
   const data = await httpRequest<ResponseDataInterface<any>>({

tools/obscuroscan_v3/frontend/api/rollups.ts

@@ -3,7 +3,7 @@ import { apiRoutes } from "@/src/routes";
 import { pathToUrl } from "@/src/routes/router";
 import { ResponseDataInterface } from "@/src/types/interfaces";
 
-export const getRollups = async (
+export const fetchRollups = async (
   payload?: Record<string, any>
 ): Promise<ResponseDataInterface<any>> => {
   const data = await httpRequest<ResponseDataInterface<any>>({

tools/obscuroscan_v3/frontend/api/transactions.ts

@@ -8,7 +8,7 @@ import {
   TransactionResponse,
 } from "@/src/types/interfaces/TransactionInterfaces";
 
-export const getTransactions = async (
+export const fetchTransactions = async (
   payload?: Record<string, any>
 ): Promise<ResponseDataInterface<TransactionResponse>> => {
   const data = await httpRequest<ResponseDataInterface<TransactionResponse>>({
@@ -19,18 +19,18 @@ export const getTransactions = async (
   return data;
 };
 
-export const getTransactionCount = async (): Promise<TransactionCount> => {
+export const fetchTransactionCount = async (): Promise<TransactionCount> => {
   const data = await httpRequest<TransactionCount>({
     method: "get",
     url: pathToUrl(apiRoutes.getTransactionCount),
   });
   return data;
 };
 
-export const getPrice = async (): Promise<Price> => {
+export const fetchEtherPrice = async (): Promise<Price> => {
   const data = await httpRequest<Price>({
     method: "get",
-    url: apiRoutes.getPrice,
+    url: apiRoutes.getEtherPrice,
   });
   return data;
 };

tools/obscuroscan_v3/frontend/pages/batches/[batch].tsx → tools/obscuroscan_v3/frontend/pages/batches/[hash].tsx

@@ -1,7 +1,6 @@
-import { getBatchByHash } from "@/api/batches";
+import { fetchBatchByHash } from "@/api/batches";
 import Layout from "@/src/components/layouts/default-layout";
 import { BatchDetails } from "@/src/components/modules/batches/batch-details";
-import TruncatedAddress from "@/src/components/modules/common/truncated-address";
 import {
   Card,
   CardHeader,
@@ -15,11 +14,11 @@ import { useRouter } from "next/router";
 
 export default function Batch() {
   const router = useRouter();
-  const { batch } = router.query;
+  const { hash } = router.query;
 
   const { data, isLoading } = useQuery({
-    queryKey: ["batch", batch],
-    queryFn: () => getBatchByHash(batch as string),
+    queryKey: ["batch", hash],
+    queryFn: () => fetchBatchByHash(hash as string),
   });
 
   const batchDetails = data?.item;

tools/obscuroscan_v3/frontend/pages/batches/index.tsx

@@ -3,33 +3,31 @@ import { columns } from "@/src/components/modules/batches/columns";
 import { DataTable } from "@/src/components/modules/common/data-table/data-table";
 import Layout from "@/src/components/layouts/default-layout";
 import { Metadata } from "next";
-import { useBatches } from "@/src/hooks/useBatches";
+import { useBatchesService } from "@/src/hooks/useBatchesService";
 
 export const metadata: Metadata = {
   title: "Batches",
   description: "A table of Batches.",
 };
 
 export default function Batches() {
-  const { batches } = useBatches();
+  const { batches } = useBatchesService();
 
   return (
-    <>
-      <Layout>
-        <div className="hidden h-full flex-1 flex-col space-y-8 p-8 md:flex">
-          <div className="flex items-center justify-between space-y-2">
-            <div>
-              <h2 className="text-2xl font-bold tracking-tight">Batches</h2>
-              <p className="text-muted-foreground">A table of Batches.</p>
-            </div>
+    <Layout>
+      <div className="h-full flex-1 flex-col space-y-8 md:flex">
+        <div className="flex items-center justify-between space-y-2">
+          <div>
+            <h2 className="text-2xl font-bold tracking-tight">Batches</h2>
+            <p className="text-muted-foreground">A table of Batches.</p>
           </div>
-          {batches?.result?.BatchesData ? (
-            <DataTable columns={columns} data={batches?.result?.BatchesData} />
-          ) : (
-            <p>Loading...</p>
-          )}
         </div>
-      </Layout>
-    </>
+        {batches?.result?.BatchesData ? (
+          <DataTable columns={columns} data={batches?.result?.BatchesData} />
+        ) : (
+          <p>Loading...</p>
+        )}
+      </div>
+    </Layout>
   );
 }

tools/obscuroscan_v3/frontend/pages/blocks/index.tsx

@@ -3,33 +3,31 @@ import { columns } from "@/src/components/modules/blocks/columns";
 import { DataTable } from "@/src/components/modules/common/data-table/data-table";
 import Layout from "@/src/components/layouts/default-layout";
 import { Metadata } from "next";
-import { useBlocks } from "@/src/hooks/useBlocks";
+import { useBlocksService } from "@/src/hooks/useBlocksService";
 
 export const metadata: Metadata = {
   title: "Blocks",
   description: "A table of Blocks.",
 };
 
 export default function Blocks() {
-  const { blocks } = useBlocks();
+  const { blocks } = useBlocksService();
 
   return (
-    <>
-      <Layout>
-        <div className="hidden h-full flex-1 flex-col space-y-8 p-8 md:flex">
-          <div className="flex items-center justify-between space-y-2">
-            <div>
-              <h2 className="text-2xl font-bold tracking-tight">Blocks</h2>
-              <p className="text-muted-foreground">A table of Blocks.</p>
-            </div>
+    <Layout>
+      <div className="h-full flex-1 flex-col space-y-8 md:flex">
+        <div className="flex items-center justify-between space-y-2">
+          <div>
+            <h2 className="text-2xl font-bold tracking-tight">Blocks</h2>
+            <p className="text-muted-foreground">A table of Blocks.</p>
           </div>
-          {blocks?.result?.BlocksData ? (
-            <DataTable columns={columns} data={blocks?.result?.BlocksData} />
-          ) : (
-            <p>Loading...</p>
-          )}
         </div>
-      </Layout>
-    </>
+        {blocks?.result?.BlocksData ? (
+          <DataTable columns={columns} data={blocks?.result?.BlocksData} />
+        ) : (
+          <p>Loading...</p>
+        )}
+      </div>
+    </Layout>
   );
 }

tools/obscuroscan_v3/frontend/pages/index.tsx

@@ -5,7 +5,7 @@ import Dashboard from "@/src/components/modules/dashboard";
 
 export const metadata: Metadata = {
   title: "Dashboard",
-  description: "ObscuroScan Dashboard",
+  description: "Obscuroscan Dashboard",
 };
 
 export default function DashboardPage() {

tools/obscuroscan_v3/frontend/pages/transactions/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { columns } from "@/src/components/modules/transactions/columns";
 import { DataTable } from "@/src/components/modules/common/data-table/data-table";
 import Layout from "@/src/components/layouts/default-layout";
-import { useTransactions } from "@/src/hooks/useTransactions";
+import { useTransactionsService } from "@/src/hooks/useTransactionsService";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -11,30 +11,26 @@ export const metadata: Metadata = {
 };
 
 export default function Transactions() {
-  const { transactions } = useTransactions();
+  const { transactions } = useTransactionsService();
 
   return (
-    <>
-      <Layout>
-        <div className="hidden h-full flex-1 flex-col space-y-8 p-8 md:flex">
-          <div className="flex items-center justify-between space-y-2">
-            <div>
-              <h2 className="text-2xl font-bold tracking-tight">
-                Transactions
-              </h2>
-              <p className="text-muted-foreground">A table of transactions.</p>
-            </div>
+    <Layout>
+      <div className="h-full flex-1 flex-col space-y-8 md:flex">
+        <div className="flex items-center justify-between space-y-2">
+          <div>
+            <h2 className="text-2xl font-bold tracking-tight">Transactions</h2>
+            <p className="text-muted-foreground">A table of transactions.</p>
           </div>
-          {transactions?.result?.TransactionsData ? (
-            <DataTable
-              columns={columns}
-              data={transactions?.result?.TransactionsData}
-            />
-          ) : (
-            <p>Loading...</p>
-          )}
         </div>
-      </Layout>
-    </>
+        {transactions?.result?.TransactionsData ? (
+          <DataTable
+            columns={columns}
+            data={transactions?.result?.TransactionsData}
+          />
+        ) : (
+          <p>Loading...</p>
+        )}
+      </div>
+    </Layout>
   );
 }

tools/obscuroscan_v3/frontend/src/components/layouts/default-layout.tsx

@@ -8,10 +8,10 @@ interface LayoutProps {
 
 const Layout = ({ children }: LayoutProps) => {
   return (
-    <div className="flex-col md:flex">
-      <div className="flex flex-col min-h-screen min-w-[1400px] mx-auto">
+    <div className="flex-col md:flex px-6">
+      <div className="flex flex-col min-h-screen max-w-[1400px] mx-auto">
         <Header />
-        <div className="flex-1 space-y-4 p-8 pt-6">{children}</div>
+        <div className="flex-1 space-y-4 py-6">{children}</div>
         <Footer />
       </div>
     </div>

tools/obscuroscan_v3/frontend/src/components/layouts/footer.tsx

@@ -7,7 +7,7 @@ import {
 
 export default function Footer() {
   return (
-    <div className="border-t">
+    <div className="border-t px-2">
       <div className="flex h-16 items-center px-4">
         <div className="flex-1 flex items-center space-x-4">
           <a

tools/obscuroscan_v3/frontend/src/components/layouts/header.tsx

@@ -4,26 +4,61 @@ import { ModeToggle } from "../mode-toggle";
 import ConnectWalletButton from "../modules/common/connect-wallet";
 import { Search } from "../search";
 import Link from "next/link";
+import { HamburgerMenuIcon } from "@radix-ui/react-icons";
+import { useState } from "react";
+import { Button } from "../ui/button";
 
 export default function Header() {
   return (
     <div className="border-b">
       <div className="flex h-16 justify-between items-center px-4">
         <Link href="/">
           <Image
-            src="/assets/images/obscuro_black.png"
+            src="/assets/images/ten.svg"
             width={150}
             height={32}
-            alt="Obscuro Logo"
+            alt="Ten Logo"
           />
         </Link>
-        <MainNav className="mx-6" />
-        <div className="flex items-center space-x-4">
-          {/* <Search /> */}
-          <ModeToggle />
-          <ConnectWalletButton />
+        <div className="hidden md:flex items-center space-x-4">
+          <MainNav className="mx-6" />
+          <div className="flex items-center space-x-4">
+            {/* <Search /> */}
+            <ModeToggle />
+            <ConnectWalletButton />
+          </div>
+        </div>
+        <div className="flex items-center space-x-4 md:hidden">
+          <MobileMenu />
         </div>
       </div>
     </div>
   );
 }
+
+const MobileMenu = () => {
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  return (
+    <div className="relative">
+      <ModeToggle />
+      <Button
+        variant={"clear"}
+        className="text-muted-foreground hover:text-primary transition-colors"
+        onClick={() => setMenuOpen(!menuOpen)}
+      >
+        <HamburgerMenuIcon />
+      </Button>
+      {menuOpen && (
+        <div className="absolute z-10 top-0 right-0 mt-12">
+          <div className="bg-background border rounded-lg shadow-lg">
+            <div className="flex flex-col p-4 space-y-2">
+              <MainNav className="flex flex-col" />
+              <ConnectWalletButton />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};