From 9c2e607813b81db5f5caf0da0127a4d9abca7397 Mon Sep 17 00:00:00 2001 From: Jennie Date: Thu, 16 Nov 2023 02:29:28 +0400 Subject: [PATCH 1/4] refactor: naming conventions --- tools/obscuroscan_v3/frontend/api/batches.ts | 6 +++--- tools/obscuroscan_v3/frontend/api/blocks.ts | 2 +- tools/obscuroscan_v3/frontend/api/contracts.ts | 4 ++-- tools/obscuroscan_v3/frontend/api/rollups.ts | 2 +- .../obscuroscan_v3/frontend/api/transactions.ts | 8 ++++---- .../pages/batches/{[batch].tsx => [hash].tsx} | 9 ++++----- .../frontend/pages/batches/index.tsx | 4 ++-- .../frontend/pages/blocks/index.tsx | 4 ++-- .../frontend/pages/transactions/index.tsx | 2 +- .../frontend/src/components/main-nav.tsx | 9 +++------ .../src/components/modules/batches/columns.tsx | 2 +- .../modules/batches/{data.tsx => constants.tsx} | 0 .../src/components/modules/blocks/columns.tsx | 2 +- .../modules/blocks/{data.tsx => constants.tsx} | 0 .../src/components/modules/dashboard/index.tsx | 16 ++++++++-------- .../modules/dashboard/recent-blocks.tsx | 14 -------------- .../modules/dashboard/recent-transactions.tsx | 14 ++------------ .../src/components/modules/personal/index.tsx | 2 +- .../src/components/modules/resources/decrypt.tsx | 4 ++-- .../verified-data/VerifiedContracts.tsx | 2 +- .../verified-data/VerifiedSequencerData.tsx | 4 ++-- .../components/modules/transactions/columns.tsx | 4 ++-- .../transactions/{data.tsx => constants.tsx} | 6 ++++++ .../{useBatches.ts => useBatchesService.ts} | 8 ++++---- .../hooks/{useBlocks.ts => useBlocksService.ts} | 6 +++--- .../{useContracts.ts => useContractsService.ts} | 8 ++++---- .../{useRollups.ts => useRollupsService.ts} | 6 +++--- ...Transactions.ts => useTransactionsService.ts} | 14 +++++++------- .../obscuroscan_v3/frontend/src/routes/index.ts | 2 +- 29 files changed, 71 insertions(+), 93 deletions(-) rename tools/obscuroscan_v3/frontend/pages/batches/{[batch].tsx => [hash].tsx} (82%) rename tools/obscuroscan_v3/frontend/src/components/modules/batches/{data.tsx => constants.tsx} (100%) rename tools/obscuroscan_v3/frontend/src/components/modules/blocks/{data.tsx => constants.tsx} (100%) rename tools/obscuroscan_v3/frontend/src/components/modules/transactions/{data.tsx => constants.tsx} (86%) rename tools/obscuroscan_v3/frontend/src/hooks/{useBatches.ts => useBatchesService.ts} (72%) rename tools/obscuroscan_v3/frontend/src/hooks/{useBlocks.ts => useBlocksService.ts} (70%) rename tools/obscuroscan_v3/frontend/src/hooks/{useContracts.ts => useContractsService.ts} (82%) rename tools/obscuroscan_v3/frontend/src/hooks/{useRollups.ts => useRollupsService.ts} (83%) rename tools/obscuroscan_v3/frontend/src/hooks/{useTransactions.ts => useTransactionsService.ts} (90%) diff --git a/tools/obscuroscan_v3/frontend/api/batches.ts b/tools/obscuroscan_v3/frontend/api/batches.ts index 23969ef661..3ab7baf283 100644 --- a/tools/obscuroscan_v3/frontend/api/batches.ts +++ b/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 ): Promise> => { const data = await httpRequest>({ @@ -19,7 +19,7 @@ export const getBatches = async ( return data; }; -export const getLatestBatch = async ( +export const fetchLatestBatch = async ( payload?: Record ): Promise> => { const data = await httpRequest>({ @@ -30,7 +30,7 @@ export const getLatestBatch = async ( return data; }; -export const getBatchByHash = async ( +export const fetchBatchByHash = async ( hash: string ): Promise> => { const data = await httpRequest>({ diff --git a/tools/obscuroscan_v3/frontend/api/blocks.ts b/tools/obscuroscan_v3/frontend/api/blocks.ts index 91a554b4d2..3f492571e3 100644 --- a/tools/obscuroscan_v3/frontend/api/blocks.ts +++ b/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 ): Promise> => { const data = await httpRequest>({ diff --git a/tools/obscuroscan_v3/frontend/api/contracts.ts b/tools/obscuroscan_v3/frontend/api/contracts.ts index 17468d474d..461f847574 100644 --- a/tools/obscuroscan_v3/frontend/api/contracts.ts +++ b/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 ): Promise => { const data = await httpRequest({ @@ -15,7 +15,7 @@ export const getContractCount = async ( return data; }; -export const getVerifiedContracts = async ( +export const fetchVerifiedContracts = async ( payload?: Record ): Promise> => { const data = await httpRequest>({ diff --git a/tools/obscuroscan_v3/frontend/api/rollups.ts b/tools/obscuroscan_v3/frontend/api/rollups.ts index 5361f36ac5..74933d4fa5 100644 --- a/tools/obscuroscan_v3/frontend/api/rollups.ts +++ b/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 ): Promise> => { const data = await httpRequest>({ diff --git a/tools/obscuroscan_v3/frontend/api/transactions.ts b/tools/obscuroscan_v3/frontend/api/transactions.ts index a56eb807ba..7368d62912 100644 --- a/tools/obscuroscan_v3/frontend/api/transactions.ts +++ b/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 ): Promise> => { const data = await httpRequest>({ @@ -19,7 +19,7 @@ export const getTransactions = async ( return data; }; -export const getTransactionCount = async (): Promise => { +export const fetchTransactionCount = async (): Promise => { const data = await httpRequest({ method: "get", url: pathToUrl(apiRoutes.getTransactionCount), @@ -27,10 +27,10 @@ export const getTransactionCount = async (): Promise => { return data; }; -export const getPrice = async (): Promise => { +export const fetchEtherPrice = async (): Promise => { const data = await httpRequest({ method: "get", - url: apiRoutes.getPrice, + url: apiRoutes.getEtherPrice, }); return data; }; diff --git a/tools/obscuroscan_v3/frontend/pages/batches/[batch].tsx b/tools/obscuroscan_v3/frontend/pages/batches/[hash].tsx similarity index 82% rename from tools/obscuroscan_v3/frontend/pages/batches/[batch].tsx rename to tools/obscuroscan_v3/frontend/pages/batches/[hash].tsx index 88f51133d6..5f5ed3d4ac 100644 --- a/tools/obscuroscan_v3/frontend/pages/batches/[batch].tsx +++ b/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; diff --git a/tools/obscuroscan_v3/frontend/pages/batches/index.tsx b/tools/obscuroscan_v3/frontend/pages/batches/index.tsx index c1319d13d0..ba9a64b598 100644 --- a/tools/obscuroscan_v3/frontend/pages/batches/index.tsx +++ b/tools/obscuroscan_v3/frontend/pages/batches/index.tsx @@ -3,7 +3,7 @@ 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", @@ -11,7 +11,7 @@ export const metadata: Metadata = { }; export default function Batches() { - const { batches } = useBatches(); + const { batches } = useBatchesService(); return ( <> diff --git a/tools/obscuroscan_v3/frontend/pages/blocks/index.tsx b/tools/obscuroscan_v3/frontend/pages/blocks/index.tsx index d435be1220..20e6645b3e 100644 --- a/tools/obscuroscan_v3/frontend/pages/blocks/index.tsx +++ b/tools/obscuroscan_v3/frontend/pages/blocks/index.tsx @@ -3,7 +3,7 @@ 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", @@ -11,7 +11,7 @@ export const metadata: Metadata = { }; export default function Blocks() { - const { blocks } = useBlocks(); + const { blocks } = useBlocksService(); return ( <> diff --git a/tools/obscuroscan_v3/frontend/pages/transactions/index.tsx b/tools/obscuroscan_v3/frontend/pages/transactions/index.tsx index 55830282a3..a83c88d1eb 100644 --- a/tools/obscuroscan_v3/frontend/pages/transactions/index.tsx +++ b/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 { useTransactions } from "@/src/hooks/useTransactionsService"; import { Metadata } from "next"; export const metadata: Metadata = { diff --git a/tools/obscuroscan_v3/frontend/src/components/main-nav.tsx b/tools/obscuroscan_v3/frontend/src/components/main-nav.tsx index 65f5d06d57..8d6e5fe69d 100644 --- a/tools/obscuroscan_v3/frontend/src/components/main-nav.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/main-nav.tsx @@ -16,11 +16,6 @@ import { ChevronDownIcon } from "@radix-ui/react-icons"; import { NavLink } from "@/src/types/interfaces"; import { NavLinks } from "../routes"; -interface MainNavProps { - navLinks: NavLink[]; - className?: string; -} - const NavItem: React.FC<{ navLink: NavLink }> = ({ navLink }) => { const router = useRouter(); @@ -50,7 +45,9 @@ const NavItem: React.FC<{ navLink: NavLink }> = ({ navLink }) => { {navLink.subNavLinks && navLink.subNavLinks.map((subNavLink: NavLink) => ( - + + + ))} diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/batches/columns.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/batches/columns.tsx index 05c9993a4d..9935eb1142 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/batches/columns.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/batches/columns.tsx @@ -3,7 +3,7 @@ import { ColumnDef } from "@tanstack/react-table"; import { Checkbox } from "@/src/components/ui/checkbox"; -import { labels, statuses } from "./data"; +import { labels, statuses } from "./constants"; import { DataTableColumnHeader } from "../common/data-table/data-table-column-header"; import TruncatedAddress from "../common/truncated-address"; import { formatTimeAgo } from "@/src/lib/utils"; diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/batches/data.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/batches/constants.tsx similarity index 100% rename from tools/obscuroscan_v3/frontend/src/components/modules/batches/data.tsx rename to tools/obscuroscan_v3/frontend/src/components/modules/batches/constants.tsx diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/blocks/columns.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/blocks/columns.tsx index b179f7a543..88cf5c286a 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/blocks/columns.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/blocks/columns.tsx @@ -3,7 +3,7 @@ import { ColumnDef } from "@tanstack/react-table"; import { Checkbox } from "@/src/components/ui/checkbox"; -import { labels, statuses } from "./data"; +import { labels, statuses } from "./constants"; import { DataTableColumnHeader } from "../common/data-table/data-table-column-header"; import { DataTableRowActions } from "../common/data-table/data-table-row-actions"; import { Block, BlockHeader } from "@/src/types/interfaces/BlockInterfaces"; diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/blocks/data.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/blocks/constants.tsx similarity index 100% rename from tools/obscuroscan_v3/frontend/src/components/modules/blocks/data.tsx rename to tools/obscuroscan_v3/frontend/src/components/modules/blocks/constants.tsx diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/dashboard/index.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/dashboard/index.tsx index 7e3defcc15..d561e54e15 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/dashboard/index.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/dashboard/index.tsx @@ -17,22 +17,22 @@ import { import { RecentBatches } from "./recent-batches"; import { RecentTransactions } from "./recent-transactions"; import { Button } from "@/src/components/ui/button"; -import { useTransactions } from "@/src/hooks/useTransactions"; -import { useBatches } from "@/src/hooks/useBatches"; +import { useTransactionsService } from "@/src/hooks/useTransactionsService"; +import { useBatchesService } from "@/src/hooks/useBatchesService"; import TruncatedAddress from "../common/truncated-address"; -import { useContracts } from "@/src/hooks/useContracts"; +import { useContractsService } from "@/src/hooks/useContractsService"; import { Skeleton } from "@/src/components/ui/skeleton"; import { RecentBlocks } from "./recent-blocks"; -import { useBlocks } from "@/src/hooks/useBlocks"; +import { useBlocksService } from "@/src/hooks/useBlocksService"; import AnalyticsCard from "./analytics-card"; import Link from "next/link"; import { cn } from "@/src/lib/utils"; export default function Dashboard() { - const { price, transactions, transactionCount } = useTransactions(); - const { contractCount } = useContracts(); - const { batches, latestBatch } = useBatches(); - const { blocks } = useBlocks(); + const { price, transactions, transactionCount } = useTransactionsService(); + const { contractCount } = useContractsService(); + const { batches, latestBatch } = useBatchesService(); + const { blocks } = useBlocksService(); const DASHBOARD_DATA = [ { diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/dashboard/recent-blocks.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/dashboard/recent-blocks.tsx index daada0a72f..f869bc720f 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/dashboard/recent-blocks.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/dashboard/recent-blocks.tsx @@ -1,9 +1,6 @@ -import { Button } from "@/src/components/ui/button"; import TruncatedAddress from "../common/truncated-address"; import { formatTimeAgo } from "@/src/lib/utils"; import { Avatar, AvatarFallback } from "@/src/components/ui/avatar"; -import { EyeOpenIcon } from "@radix-ui/react-icons"; -import Link from "next/link"; import { Block } from "@/src/types/interfaces/BlockInterfaces"; export function RecentBlocks({ blocks }: { blocks: any }) { @@ -25,17 +22,6 @@ export function RecentBlocks({ blocks }: { blocks: any }) {
-
- - - -
))} diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/dashboard/recent-transactions.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/dashboard/recent-transactions.tsx index 239a44e56e..5c1260d129 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/dashboard/recent-transactions.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/dashboard/recent-transactions.tsx @@ -1,9 +1,7 @@ -import { Button } from "@/src/components/ui/button"; import TruncatedAddress from "../common/truncated-address"; import { Avatar, AvatarFallback } from "@/src/components/ui/avatar"; -import { EyeOpenIcon } from "@radix-ui/react-icons"; -import Link from "next/link"; import { Transaction } from "@/src/types/interfaces/TransactionInterfaces"; +import { Badge } from "../../ui/badge"; export function RecentTransactions({ transactions }: { transactions: any }) { return ( @@ -23,15 +21,7 @@ export function RecentTransactions({ transactions }: { transactions: any }) {
- - - + {transaction?.Finality}
) diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/personal/index.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/personal/index.tsx index 7b1ccfc275..836990aa9a 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/personal/index.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/personal/index.tsx @@ -1,7 +1,7 @@ import React from "react"; import { columns } from "@/src/components/modules/personal/columns"; import { DataTable } from "@/src/components/modules/common/data-table/data-table"; -import { useTransactions } from "@/src/hooks/useTransactions"; +import { useTransactions } from "@/src/hooks/useTransactionsService"; import { toolbar } from "./data"; import { Skeleton } from "@/src/components/ui/skeleton"; diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/resources/decrypt.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/resources/decrypt.tsx index ced5e28313..bcd2e42f70 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/resources/decrypt.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/resources/decrypt.tsx @@ -14,7 +14,7 @@ import { CopyIcon } from "@radix-ui/react-icons"; import { Terminal } from "lucide-react"; import { useRouter } from "next/router"; import JSONPretty from "react-json-pretty"; -import { useRollups } from "@/src/hooks/useRollups"; +import { useRollupsService } from "@/src/hooks/useRollupsService"; import { Tooltip, TooltipProvider, @@ -24,7 +24,7 @@ import { export default function Decrypt() { const router = useRouter(); - const { decryptedRollup, decryptEncryptedData } = useRollups(); + const { decryptedRollup, decryptEncryptedData } = useRollupsService(); const [encryptedRollup, setEncryptedRollup] = useState(""); diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/resources/verified-data/VerifiedContracts.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/resources/verified-data/VerifiedContracts.tsx index b5f39c2167..d35ec3e2aa 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/resources/verified-data/VerifiedContracts.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/resources/verified-data/VerifiedContracts.tsx @@ -7,7 +7,7 @@ import { TableCell, } from "@/src/components/ui/table"; import { Table } from "@/src/components/ui/table"; -import { useContracts } from "@/src/hooks/useContracts"; +import { useContracts } from "@/src/hooks/useContractsService"; import TruncatedAddress from "../../common/truncated-address"; import { Badge } from "@/src/components/ui/badge"; import { diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/resources/verified-data/VerifiedSequencerData.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/resources/verified-data/VerifiedSequencerData.tsx index 866b2105a8..f4ae5b76ea 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/resources/verified-data/VerifiedSequencerData.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/resources/verified-data/VerifiedSequencerData.tsx @@ -7,7 +7,7 @@ import { TableCell, } from "@/src/components/ui/table"; import { Table } from "@/src/components/ui/table"; -import { useContracts } from "@/src/hooks/useContracts"; +import { useContractsService } from "@/src/hooks/useContractsService"; import TruncatedAddress from "../../common/truncated-address"; import { Badge } from "@/src/components/ui/badge"; import { @@ -18,7 +18,7 @@ import { } from "@/src/components/ui/card"; export default function VerifiedSequencerData() { - const { sequencerData } = useContracts(); + const { sequencerData } = useContractsService(); return ( diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/transactions/columns.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/transactions/columns.tsx index 531965d744..1b2274129b 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/transactions/columns.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/transactions/columns.tsx @@ -4,7 +4,7 @@ import { ColumnDef } from "@tanstack/react-table"; import { Checkbox } from "@/src/components/ui/checkbox"; import { Badge } from "@/src/components/ui/badge"; -import { labels, statuses } from "./data"; +import { labels, statuses } from "./constants"; import { DataTableColumnHeader } from "../common/data-table/data-table-column-header"; import { DataTableRowActions } from "../common/data-table/data-table-row-actions"; import { Transaction } from "@/src/types/interfaces/TransactionInterfaces"; @@ -80,7 +80,7 @@ export const columns: ColumnDef[] = [ {finality.icon && ( )} - {finality.label} + {finality.label} ); }, diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/transactions/data.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/transactions/constants.tsx similarity index 86% rename from tools/obscuroscan_v3/frontend/src/components/modules/transactions/data.tsx rename to tools/obscuroscan_v3/frontend/src/components/modules/transactions/constants.tsx index 395dc4771b..2ab030f09f 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/transactions/data.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/transactions/constants.tsx @@ -3,6 +3,7 @@ import { ArrowRightIcon, ArrowUpIcon, CheckCircledIcon, + ClockIcon, } from "@radix-ui/react-icons"; export const labels = [ @@ -18,6 +19,11 @@ export const statuses = [ label: "Final", icon: CheckCircledIcon, }, + { + value: "Pending", + label: "Pending", + icon: ClockIcon, + }, ]; export const priorities = [ diff --git a/tools/obscuroscan_v3/frontend/src/hooks/useBatches.ts b/tools/obscuroscan_v3/frontend/src/hooks/useBatchesService.ts similarity index 72% rename from tools/obscuroscan_v3/frontend/src/hooks/useBatches.ts rename to tools/obscuroscan_v3/frontend/src/hooks/useBatchesService.ts index 86ba61a3bb..3af587c3eb 100644 --- a/tools/obscuroscan_v3/frontend/src/hooks/useBatches.ts +++ b/tools/obscuroscan_v3/frontend/src/hooks/useBatchesService.ts @@ -1,17 +1,17 @@ -import { getBatches, getLatestBatch } from "@/api/batches"; +import { fetchBatches, fetchLatestBatch } from "@/api/batches"; import { useQuery } from "@tanstack/react-query"; import { pollingInterval } from "../lib/constants"; -export const useBatches = () => { +export const useBatchesService = () => { const { data: batches, isLoading: isBatchesLoading } = useQuery({ queryKey: ["batches"], - queryFn: () => getBatches(), + queryFn: () => fetchBatches(), refetchInterval: pollingInterval, }); const { data: latestBatch, isLoading: isLatestBatchLoading } = useQuery({ queryKey: ["latestBatch"], - queryFn: () => getLatestBatch(), + queryFn: () => fetchLatestBatch(), refetchInterval: pollingInterval, }); diff --git a/tools/obscuroscan_v3/frontend/src/hooks/useBlocks.ts b/tools/obscuroscan_v3/frontend/src/hooks/useBlocksService.ts similarity index 70% rename from tools/obscuroscan_v3/frontend/src/hooks/useBlocks.ts rename to tools/obscuroscan_v3/frontend/src/hooks/useBlocksService.ts index 3b0c682ffa..257c417bdb 100644 --- a/tools/obscuroscan_v3/frontend/src/hooks/useBlocks.ts +++ b/tools/obscuroscan_v3/frontend/src/hooks/useBlocksService.ts @@ -1,11 +1,11 @@ -import { getBlocks } from "@/api/blocks"; +import { fetchBlocks } from "@/api/blocks"; import { useQuery } from "@tanstack/react-query"; import { pollingInterval } from "../lib/constants"; -export const useBlocks = () => { +export const useBlocksService = () => { const { data: blocks, isLoading: isBlocksLoading } = useQuery({ queryKey: ["blocks"], - queryFn: () => getBlocks(), + queryFn: () => fetchBlocks(), refetchInterval: pollingInterval, }); diff --git a/tools/obscuroscan_v3/frontend/src/hooks/useContracts.ts b/tools/obscuroscan_v3/frontend/src/hooks/useContractsService.ts similarity index 82% rename from tools/obscuroscan_v3/frontend/src/hooks/useContracts.ts rename to tools/obscuroscan_v3/frontend/src/hooks/useContractsService.ts index 4e72d6dee7..d85a6d9a71 100644 --- a/tools/obscuroscan_v3/frontend/src/hooks/useContracts.ts +++ b/tools/obscuroscan_v3/frontend/src/hooks/useContractsService.ts @@ -1,15 +1,15 @@ -import { getContractCount, getVerifiedContracts } from "@/api/contracts"; +import { fetchContractCount, fetchVerifiedContracts } from "@/api/contracts"; import { useQuery } from "@tanstack/react-query"; -export const useContracts = () => { +export const useContractsService = () => { const { data: contracts, isLoading: isContractsLoading } = useQuery({ queryKey: ["contracts"], - queryFn: () => getVerifiedContracts(), + queryFn: () => fetchVerifiedContracts(), }); const { data: contractCount, isLoading: isContractCountLoading } = useQuery({ queryKey: ["contractCount"], - queryFn: () => getContractCount(), + queryFn: () => fetchContractCount(), }); const formattedContracts = [ diff --git a/tools/obscuroscan_v3/frontend/src/hooks/useRollups.ts b/tools/obscuroscan_v3/frontend/src/hooks/useRollupsService.ts similarity index 83% rename from tools/obscuroscan_v3/frontend/src/hooks/useRollups.ts rename to tools/obscuroscan_v3/frontend/src/hooks/useRollupsService.ts index c085818b34..e75fc02771 100644 --- a/tools/obscuroscan_v3/frontend/src/hooks/useRollups.ts +++ b/tools/obscuroscan_v3/frontend/src/hooks/useRollupsService.ts @@ -1,14 +1,14 @@ -import { decryptEncryptedRollup, getRollups } from "@/api/rollups"; +import { decryptEncryptedRollup, fetchRollups } from "@/api/rollups"; import { toast } from "@/src/components/ui/use-toast"; import { useMutation, useQuery } from "@tanstack/react-query"; import { useState } from "react"; -export const useRollups = () => { +export const useRollupsService = () => { const [decryptedRollup, setDecryptedRollup] = useState(); const { data: rollups, isLoading: isRollupsLoading } = useQuery({ queryKey: ["rollups"], - queryFn: () => getRollups(), + queryFn: () => fetchRollups(), }); const { mutate: decryptEncryptedData } = useMutation({ diff --git a/tools/obscuroscan_v3/frontend/src/hooks/useTransactions.ts b/tools/obscuroscan_v3/frontend/src/hooks/useTransactionsService.ts similarity index 90% rename from tools/obscuroscan_v3/frontend/src/hooks/useTransactions.ts rename to tools/obscuroscan_v3/frontend/src/hooks/useTransactionsService.ts index 12740bf081..0636acdf91 100644 --- a/tools/obscuroscan_v3/frontend/src/hooks/useTransactions.ts +++ b/tools/obscuroscan_v3/frontend/src/hooks/useTransactionsService.ts @@ -1,7 +1,7 @@ import { - getTransactions, - getTransactionCount, - getPrice, + fetchEtherPrice, + fetchTransactions, + fetchTransactionCount, } from "@/api/transactions"; import { useWalletConnection } from "@/src/components/providers/wallet-provider"; import { useQuery } from "@tanstack/react-query"; @@ -10,7 +10,7 @@ import { pollingInterval, pricePollingInterval } from "../lib/constants"; import { PersonalTransactionsResponse } from "../types/interfaces/TransactionInterfaces"; import { useToast } from "@/src/components/ui/use-toast"; -export const useTransactions = () => { +export const useTransactionsService = () => { const { toast } = useToast(); const { walletAddress, provider } = useWalletConnection(); @@ -25,14 +25,14 @@ export const useTransactions = () => { const { data: transactions, isLoading: isTransactionsLoading } = useQuery({ queryKey: ["transactions"], - queryFn: () => getTransactions(), + queryFn: () => fetchTransactions(), refetchInterval: pollingInterval, }); const { data: transactionCount, isLoading: isTransactionCountLoading } = useQuery({ queryKey: ["transactionCount"], - queryFn: () => getTransactionCount(), + queryFn: () => fetchTransactionCount(), refetchInterval: pollingInterval, }); @@ -64,7 +64,7 @@ export const useTransactions = () => { const { data: price, isLoading: isPriceLoading } = useQuery({ queryKey: ["price"], - queryFn: () => getPrice(), + queryFn: () => fetchEtherPrice(), refetchInterval: pricePollingInterval, }); diff --git a/tools/obscuroscan_v3/frontend/src/routes/index.ts b/tools/obscuroscan_v3/frontend/src/routes/index.ts index 3495243d9e..591c1ce19d 100644 --- a/tools/obscuroscan_v3/frontend/src/routes/index.ts +++ b/tools/obscuroscan_v3/frontend/src/routes/index.ts @@ -17,7 +17,7 @@ export const apiRoutes = { getTransactions: "/items/transactions/", getTransactionCount: "/count/transactions/", - getPrice: + getEtherPrice: "https://api.coingecko.com/api/v3/simple/price?ids=ethereum&vs_currencies=usd", // **** ROLLUPS **** From d878db0355f54cf1a51cde5acfcaa03cfe3621df Mon Sep 17 00:00:00 2001 From: Jennie Date: Thu, 16 Nov 2023 15:46:20 +0400 Subject: [PATCH 2/4] style modifications --- .../frontend/pages/batches/index.tsx | 28 ++++++------- .../frontend/pages/blocks/index.tsx | 28 ++++++------- tools/obscuroscan_v3/frontend/pages/index.tsx | 2 +- .../frontend/pages/transactions/index.tsx | 40 +++++++++---------- .../src/components/layouts/default-layout.tsx | 6 +-- .../src/components/layouts/footer.tsx | 2 +- .../src/components/modules/batches/index.tsx | 0 .../modules/common/connect-wallet.tsx | 8 ++-- .../components/modules/dashboard/index.tsx | 12 +++--- .../src/components/modules/personal/index.tsx | 4 +- .../verified-data/VerifiedContracts.tsx | 6 ++- .../verified-data/VerifiedSequencerData.tsx | 2 + 12 files changed, 67 insertions(+), 71 deletions(-) delete mode 100644 tools/obscuroscan_v3/frontend/src/components/modules/batches/index.tsx diff --git a/tools/obscuroscan_v3/frontend/pages/batches/index.tsx b/tools/obscuroscan_v3/frontend/pages/batches/index.tsx index ba9a64b598..e9a56a2b66 100644 --- a/tools/obscuroscan_v3/frontend/pages/batches/index.tsx +++ b/tools/obscuroscan_v3/frontend/pages/batches/index.tsx @@ -14,22 +14,20 @@ export default function Batches() { const { batches } = useBatchesService(); return ( - <> - -
-
-
-

Batches

-

A table of Batches.

-
+ +
+
+
+

Batches

+

A table of Batches.

- {batches?.result?.BatchesData ? ( - - ) : ( -

Loading...

- )}
- - + {batches?.result?.BatchesData ? ( + + ) : ( +

Loading...

+ )} +
+ ); } diff --git a/tools/obscuroscan_v3/frontend/pages/blocks/index.tsx b/tools/obscuroscan_v3/frontend/pages/blocks/index.tsx index 20e6645b3e..c1092f9ead 100644 --- a/tools/obscuroscan_v3/frontend/pages/blocks/index.tsx +++ b/tools/obscuroscan_v3/frontend/pages/blocks/index.tsx @@ -14,22 +14,20 @@ export default function Blocks() { const { blocks } = useBlocksService(); return ( - <> - -
-
-
-

Blocks

-

A table of Blocks.

-
+ +
+
+
+

Blocks

+

A table of Blocks.

- {blocks?.result?.BlocksData ? ( - - ) : ( -

Loading...

- )}
- - + {blocks?.result?.BlocksData ? ( + + ) : ( +

Loading...

+ )} +
+ ); } diff --git a/tools/obscuroscan_v3/frontend/pages/index.tsx b/tools/obscuroscan_v3/frontend/pages/index.tsx index 4899f97910..2fde5d1991 100644 --- a/tools/obscuroscan_v3/frontend/pages/index.tsx +++ b/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() { diff --git a/tools/obscuroscan_v3/frontend/pages/transactions/index.tsx b/tools/obscuroscan_v3/frontend/pages/transactions/index.tsx index a83c88d1eb..1143fc8482 100644 --- a/tools/obscuroscan_v3/frontend/pages/transactions/index.tsx +++ b/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/useTransactionsService"; +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 ( - <> - -
-
-
-

- Transactions -

-

A table of transactions.

-
+ +
+
+
+

Transactions

+

A table of transactions.

- {transactions?.result?.TransactionsData ? ( - - ) : ( -

Loading...

- )}
- - + {transactions?.result?.TransactionsData ? ( + + ) : ( +

Loading...

+ )} +
+ ); } diff --git a/tools/obscuroscan_v3/frontend/src/components/layouts/default-layout.tsx b/tools/obscuroscan_v3/frontend/src/components/layouts/default-layout.tsx index 9493ea8c27..25ed6a8201 100644 --- a/tools/obscuroscan_v3/frontend/src/components/layouts/default-layout.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/layouts/default-layout.tsx @@ -8,10 +8,10 @@ interface LayoutProps { const Layout = ({ children }: LayoutProps) => { return ( -
-
+
+
-
{children}
+
{children}
diff --git a/tools/obscuroscan_v3/frontend/src/components/layouts/footer.tsx b/tools/obscuroscan_v3/frontend/src/components/layouts/footer.tsx index 561d1548ef..3c89e774f7 100644 --- a/tools/obscuroscan_v3/frontend/src/components/layouts/footer.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/layouts/footer.tsx @@ -7,7 +7,7 @@ import { export default function Footer() { return ( -
+
{ > {walletConnected ? ( <> - - Disconnect Wallet + + Disconnect Wallet ) : ( <> - - Connect to Metamask + + Connect to Metamask )} diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/dashboard/index.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/dashboard/index.tsx index d561e54e15..fb0403db3f 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/dashboard/index.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/dashboard/index.tsx @@ -81,26 +81,26 @@ export default function Dashboard() { data: blocks, component: , goTo: "/blocks", - className: "sm:col-span-1 md:col-span-6 lg:col-span-3", + className: "col-span-1 md:col-span-2 lg:col-span-3", }, { title: "Recent Batches", data: batches, component: , goTo: "/batches", - className: "sm:col-span-1 md:col-span-3 lg:col-span-3", + className: "col-span-1 md:col-span-2 lg:col-span-3", }, { title: "Recent Transactions", data: transactions, component: , goTo: "/transactions", - className: "sm:col-span-1 md:col-span-3 lg:col-span-3", + className: "col-span-1 md:col-span-2 lg:col-span-3", }, ]; return ( - <> +

Obscuroscan

@@ -109,7 +109,7 @@ export default function Dashboard() { ))}
-
+
{RECENT_DATA.map((item: any, index) => ( ))}
- +
); } diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/personal/index.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/personal/index.tsx index 836990aa9a..b2420d484b 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/personal/index.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/personal/index.tsx @@ -1,12 +1,12 @@ import React from "react"; import { columns } from "@/src/components/modules/personal/columns"; import { DataTable } from "@/src/components/modules/common/data-table/data-table"; -import { useTransactions } from "@/src/hooks/useTransactionsService"; +import { useTransactionsService } from "@/src/hooks/useTransactionsService"; import { toolbar } from "./data"; import { Skeleton } from "@/src/components/ui/skeleton"; export default function PersonalTransactions() { - const { personalTxns, personalTxnsLoading } = useTransactions(); + const { personalTxns, personalTxnsLoading } = useTransactionsService(); return ( <> diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/resources/verified-data/VerifiedContracts.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/resources/verified-data/VerifiedContracts.tsx index d35ec3e2aa..acd99cb6bb 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/resources/verified-data/VerifiedContracts.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/resources/verified-data/VerifiedContracts.tsx @@ -7,7 +7,7 @@ import { TableCell, } from "@/src/components/ui/table"; import { Table } from "@/src/components/ui/table"; -import { useContracts } from "@/src/hooks/useContractsService"; +import { useContractsService } from "@/src/hooks/useContractsService"; import TruncatedAddress from "../../common/truncated-address"; import { Badge } from "@/src/components/ui/badge"; import { @@ -16,15 +16,17 @@ import { CardTitle, CardContent, } from "@/src/components/ui/card"; +import { Separator } from "@/src/components/ui/separator"; export default function VerifiedContracts() { - const { formattedContracts } = useContracts(); + const { formattedContracts } = useContractsService(); return ( Verified Contracts + Verified Contracts diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/resources/verified-data/VerifiedSequencerData.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/resources/verified-data/VerifiedSequencerData.tsx index f4ae5b76ea..261eb02443 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/resources/verified-data/VerifiedSequencerData.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/resources/verified-data/VerifiedSequencerData.tsx @@ -16,6 +16,7 @@ import { CardTitle, CardContent, } from "@/src/components/ui/card"; +import { Separator } from "@/src/components/ui/separator"; export default function VerifiedSequencerData() { const { sequencerData } = useContractsService(); @@ -25,6 +26,7 @@ export default function VerifiedSequencerData() { Verified Sequencer Data +
Verified Sequencer Data From 872f9e77aa02548152b1e54192cf652ddebff76a Mon Sep 17 00:00:00 2001 From: Jennie Date: Thu, 16 Nov 2023 17:23:33 +0400 Subject: [PATCH 3/4] update favicon --- .../obscuroscan_v3/frontend/public/favicon.ico | Bin 572 -> 996 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/tools/obscuroscan_v3/frontend/public/favicon.ico b/tools/obscuroscan_v3/frontend/public/favicon.ico index ec512be0204e334756fe4cdb73678b81cc4b8f54..1bb8f324a18a956628274ccbacffa64f1eeabc5f 100644 GIT binary patch literal 996 zcmVPx#1ZP1_K>z@;j|==^1poj532;bRa{vGf6951U69E94oEQKA19?eAK~!i%?U_#~ zJy8_L&-2LhzsUcxV_`wrVId1ik%*KXODVFjKv~Jw#!6W}DK?~}Y$R4F3Qmu&@xu#>QZ6Z4C|%4q#_z2cpp^bar+^I2`7v z-(!^1QdU${gfuWZ866!J#(r5>R~J4$K612|?d@$WC@2v2l{BH#Wl2d%I5aeb4-XGK z?0?3`$Ax_iYiw-9_xE>>^k;8x4V$FMS=?QS9vo;I0SyMr%ggMIPjz)QD}eR&byjXpPEO$R@{+II zePof^Mrp1By&%4dPkMSf(2m7d0LRD2th_kejF%h^Ykz!IR7m=!>6ZLMjs3=a>p0ysN6gWcU-Q&aH>R0u+SeLW;3#D7Hl zSQeR4I?#=_>Gz(v;vRtJZ02Ys1XUOe`rW z!KtY!Zn5a=>$AtC?+o@LPESwUejgJ$ZR_dj;akZuJ3DLlr4Juh-Q>r{#)e(UWoKuz z*W&K(&c2_>;{Ja!GBQ}nk(HIj3Set%3)6-(tuC7dN zaCCIUN=)1zIE>S=zrP=Hb933_kFonui40Wxv&SMQCkJ|adx5G=^Yilc_0_C_78e&` zWo5;4fK^sj!rDtj^(ZA5BMkk;eoq%d|0;k}@P)Px$_DMuRR9Hvtl|RU7aTv$HFM~fx8I+{_iL#KAlF>xjZ8npn6q`sUB?d7tD4X44 zvKW*S785B^5{mrSz5RZJ?pxP;&U@X?9qxIib9&DCKA*nN?|FV70Dj;f#s?3;JHR{e zCl099YB(GYs8lLE9uG{XQ*^ss91e$X5A?UjP^Z(OP$N&*xt&$Ye5%MkA0m zZMR!!G#VU_M@9%%4s<#lxLhtQmrH21THJ28-wMZKF=Vq@nj`0=*=)WKAQFkN+wCA0 zi&3xF5eNicirVdV^m;v-Pb3n^WHRpq==FL`CKFbo3Wb6mP7AOH6K($&$Fc@U24@LlDz1eK0LW{)$tJUhIC@E~UT4{d0USmF= zzYoBu@a6}M4!o()`1}6@K+Xo)oa6EMlPjD!;PH6qQo7&oa5|mn_xn!>P5{W=L2gkJ ze!m}$MuS@bxm=E1E=PAnJRZm8a^V)>t5M*j1v~)n0Pnz84*Ue=PsIV1YR(1#0000< KMNUMnLSTZl Date: Thu, 16 Nov 2023 19:37:00 +0400 Subject: [PATCH 4/4] feat: mobile responsiveness --- .../public/assets/images/obscuro_black.png | Bin 8212 -> 0 bytes .../frontend/public/assets/images/ten.svg | 8 +++ .../src/components/layouts/header.tsx | 49 ++++++++++++-- .../frontend/src/components/main-nav.tsx | 14 ++-- .../modules/common/connect-wallet.tsx | 9 +-- .../components/modules/dashboard/index.tsx | 21 +++--- .../frontend/src/components/ui/button.tsx | 64 ++++++++++-------- 7 files changed, 111 insertions(+), 54 deletions(-) delete mode 100644 tools/obscuroscan_v3/frontend/public/assets/images/obscuro_black.png create mode 100644 tools/obscuroscan_v3/frontend/public/assets/images/ten.svg diff --git a/tools/obscuroscan_v3/frontend/public/assets/images/obscuro_black.png b/tools/obscuroscan_v3/frontend/public/assets/images/obscuro_black.png deleted file mode 100644 index b9a7143b3048c4e10a29c21c2615c6a5d906b494..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 8212 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 + + +TEN. + diff --git a/tools/obscuroscan_v3/frontend/src/components/layouts/header.tsx b/tools/obscuroscan_v3/frontend/src/components/layouts/header.tsx index dd8bd69d3b..eddeb58ca2 100644 --- a/tools/obscuroscan_v3/frontend/src/components/layouts/header.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/layouts/header.tsx @@ -4,6 +4,9 @@ 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 ( @@ -11,19 +14,51 @@ export default function Header() {
- -
- {/* */} - - +
+ +
+ {/* */} + + +
+
+
+
); } + +const MobileMenu = () => { + const [menuOpen, setMenuOpen] = useState(false); + + return ( +
+ + + {menuOpen && ( +
+
+
+ + +
+
+
+ )} +
+ ); +}; diff --git a/tools/obscuroscan_v3/frontend/src/components/main-nav.tsx b/tools/obscuroscan_v3/frontend/src/components/main-nav.tsx index 8d6e5fe69d..eb116fde7b 100644 --- a/tools/obscuroscan_v3/frontend/src/components/main-nav.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/main-nav.tsx @@ -16,7 +16,7 @@ import { ChevronDownIcon } from "@radix-ui/react-icons"; import { NavLink } from "@/src/types/interfaces"; import { NavLinks } from "../routes"; -const NavItem: React.FC<{ navLink: NavLink }> = ({ navLink }) => { +const NavItem = ({ navLink }: { navLink: NavLink }) => { const router = useRouter(); const isDropdownActive = (navLink: NavLink) => { @@ -31,8 +31,9 @@ const NavItem: React.FC<{ navLink: NavLink }> = ({ navLink }) => { diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/dashboard/index.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/dashboard/index.tsx index fb0403db3f..78bc0bb252 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/dashboard/index.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/dashboard/index.tsx @@ -38,17 +38,19 @@ export default function Dashboard() { { title: "Ether Price", value: price?.ethereum?.usd, - change: "+20.1% from last month", + // TODO: add change + // change: "+20.1%", icon: RocketIcon, }, { - title: "Latest Batch", + title: "Latest L2 Batch", value: batches?.result?.Total, - change: "+20.1% from last month", + // TODO: add change + // change: "+20.1%", icon: LayersIcon, }, { - title: "Latest Rollup", + title: "Latest L1 Rollup", value: latestBatch?.item?.l1Proof ? (

Obscuroscan

-
+
{DASHBOARD_DATA.map((item: any, index) => ( ))} diff --git a/tools/obscuroscan_v3/frontend/src/components/ui/button.tsx b/tools/obscuroscan_v3/frontend/src/components/ui/button.tsx index 4a9a357d71..aa0d241a58 100644 --- a/tools/obscuroscan_v3/frontend/src/components/ui/button.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/ui/button.tsx @@ -1,50 +1,58 @@ -import * as React from 'react' -import { Slot } from '@radix-ui/react-slot' -import { cva, type VariantProps } from 'class-variance-authority' +import * as React from "react"; +import { Slot } from "@radix-ui/react-slot"; +import { cva, type VariantProps } from "class-variance-authority"; -import { cn } from '@/src/lib/utils' +import { cn } from "@/src/lib/utils"; const buttonVariants = cva( - 'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', + "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { - default: 'bg-primary text-primary-foreground hover:bg-primary/90', - destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90', - outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground', - secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', - ghost: 'hover:bg-accent hover:text-accent-foreground', - link: 'text-primary underline-offset-4 hover:underline', - clear: 'bg-transparent text-primary-foreground outline-none' + default: "bg-primary text-primary-foreground hover:bg-primary/90", + destructive: + "bg-destructive text-destructive-foreground hover:bg-destructive/90", + outline: + "border border-input bg-background hover:bg-accent hover:text-accent-foreground", + secondary: + "bg-secondary text-secondary-foreground hover:bg-secondary/80", + ghost: "hover:bg-accent hover:text-accent-foreground", + link: "text-primary underline-offset-4 hover:underline", + clear: "bg-transparent text-primary-foreground outline-none", }, size: { - default: 'h-10 px-4 py-2', - sm: 'h-9 rounded-md px-3', - lg: 'h-11 rounded-md px-8', - icon: 'h-10 w-10' - } + default: "h-10 px-4 py-2", + sm: "h-9 rounded-md px-3", + lg: "h-11 rounded-md px-8", + icon: "h-10 w-10 p-1", + wrap: "h-full w-full", + }, }, defaultVariants: { - variant: 'default', - size: 'default' - } + variant: "default", + size: "default", + }, } -) +); export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { - asChild?: boolean + asChild?: boolean; } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { - const Comp = asChild ? Slot : 'button' + const Comp = asChild ? Slot : "button"; return ( - - ) + + ); } -) -Button.displayName = 'Button' +); +Button.displayName = "Button"; -export { Button, buttonVariants } +export { Button, buttonVariants };