Jennifer/scan updates (#1683)

* update `Tenscan` metadata

* change hex values to base 10

* update toast methods

* update table methods/data

* data table updates

* remove logs

* -update public and private txns
- add a `connect wallet` screen for personal txns

* view single block on etherscan

* fix undefined error

* - update hex conversion
- update pagination calculation

* fix: pagination offset

* fix: personal transactions

* fix: copy fallback func

* update single batch component

.github/workflows/manual-deploy-obscuro-scan-3.yml

@@ -1,8 +1,8 @@
-# Deploys Ten Scan on Azure for Testnet
-# Builds the Ten Scan image, pushes the image to dockerhub and starts the Ten Scan on Azure
+# Deploys Tenscan on Azure for Testnet
+# Builds the Tenscan image, pushes the image to dockerhub and starts the Tenscan on Azure
 
-name: "[M] Deploy Ten Scan 3 Testnet"
-run-name: "[M] Deploy Ten Scan Testnet ( ${{ github.event.inputs.testnet_type }} )"
+name: "[M] Deploy Tenscan 3 Testnet"
+run-name: "[M] Deploy Tenscan Testnet ( ${{ github.event.inputs.testnet_type }} )"
 on:
   workflow_dispatch:
     inputs:

tools/obscuroscan_v3/frontend/pages/_app.tsx

@@ -9,30 +9,25 @@ import {
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
 import { Toaster } from "@/src/components/ui/toaster";
-import { useToast } from "@/src/components/ui/use-toast";
 import { WalletConnectionProvider } from "@/src/components/providers/wallet-provider";
 import { NetworkStatus } from "@/src/components/modules/common/network-status";
 import HeadSeo from "@/src/components/head-seo";
 import { siteMetadata } from "@/src/lib/siteMetadata";
 import Script from "next/script";
 import { GOOGLE_ANALYTICS_ID } from "@/src/lib/constants";
+import { showToast } from "@/src/components/ui/use-toast";
+import { ToastType } from "@/src/types/interfaces";
 
 export default function App({ Component, pageProps }: AppProps) {
-  const { toast } = useToast();
-
   const mutationCache = new MutationCache({
     onSuccess: (mutation: any) => {
       if (mutation?.message) {
-        toast({
-          description: mutation?.message,
-        });
+        showToast(ToastType.SUCCESS, mutation?.message);
       }
     },
     onError: (error: any, mutation: any) => {
       if (error?.response?.data?.message) {
-        toast({
-          description: mutation?.message,
-        });
+        showToast(ToastType.DESTRUCTIVE, error?.response?.data?.message);
       }
     },
   });

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

@@ -30,9 +30,9 @@ export default function Batch() {
       ) : batchDetails ? (
         <Card className="col-span-3">
           <CardHeader>
-            <CardTitle>Batch #{batchDetails?.Header?.number}</CardTitle>
+            <CardTitle>Batch #{Number(batchDetails?.Header?.number)}</CardTitle>
             <CardDescription>
-              Overview of the batch #{batchDetails?.Header?.number}
+              Overview of the batch #{Number(batchDetails?.Header?.number)}
             </CardDescription>
           </CardHeader>
           <CardContent>

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

@@ -19,6 +19,7 @@ export default function Blocks() {
 
   React.useEffect(() => {
     setNoPolling(true);
+    return () => setNoPolling(false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

tools/obscuroscan_v3/frontend/pages/docs/[id].tsx

@@ -1,10 +1,11 @@
 import Layout from "@/src/components/layouts/default-layout";
 import Spinner from "@/src/components/ui/spinner";
-import { useToast } from "@/src/components/ui/use-toast";
 import { siteMetadata } from "@/src/lib/siteMetadata";
 import { useRouter } from "next/router";
 import React from "react";
 import Custom404Error from "../404";
+import { showToast } from "@/src/components/ui/use-toast";
+import { ToastType } from "@/src/types/interfaces";
 
 type Document = {
   title: string;
@@ -16,7 +17,6 @@ type Document = {
 };
 
 const Document = () => {
-  const { toast } = useToast();
   const { query } = useRouter();
   const { id } = query;
 
@@ -45,10 +45,7 @@ const Document = () => {
       };
       setDocument(processedData);
     } catch (error) {
-      toast({
-        variant: "destructive",
-        description: "Error fetching document",
-      });
+      showToast(ToastType.DESTRUCTIVE, "Error fetching document");
     } finally {
       setLoading(false);
     }

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

@@ -2,16 +2,29 @@ import React from "react";
 import Layout from "@/src/components/layouts/default-layout";
 import { Metadata } from "next";
 import PersonalTransactions from "@/src/components/modules/personal";
+import { useWalletConnection } from "@/src/components/providers/wallet-provider";
+import ConnectWalletButton from "@/src/components/modules/common/connect-wallet";
+import EmptyState from "@/src/components/modules/common/empty-state";
 
 export const metadata: Metadata = {
   title: "Personal Transactions",
-  description: "ObscuroScan Personal Transactions",
+  description: "Tenscan Personal Transactions",
 };
 
 export default function PersonalPage() {
+  const { walletConnected } = useWalletConnection();
+
   return (
     <Layout>
-      <PersonalTransactions />
+      {walletConnected ? (
+        <PersonalTransactions />
+      ) : (
+        <EmptyState
+          title="Connect your wallet"
+          description="Connect your wallet to view your personal transactions."
+          action={<ConnectWalletButton />}
+        />
+      )}
     </Layout>
   );
 }

tools/obscuroscan_v3/frontend/src/components/main-nav.tsx

@@ -59,7 +59,7 @@ const NavItem = ({ navLink }: { navLink: NavLink }) => {
       <a
         href={navLink.href}
         key={navLink.label}
-        className="text-sm font-medium transition-colors hover:text-primary"
+        className="text-sm font-medium transition-colors hover:text-primary w-full"
       >
         {navLink.label}
       </a>
@@ -70,7 +70,7 @@ const NavItem = ({ navLink }: { navLink: NavLink }) => {
         href={navLink.href || ""}
         key={navLink.label}
         className={cn(
-          "text-sm font-medium text-muted-foreground transition-colors hover:text-primary",
+          "text-sm font-medium text-muted-foreground transition-colors hover:text-primary w-full",
           {
             "text-primary": router.pathname === navLink.href,
           }

tools/obscuroscan_v3/frontend/src/components/modules/batches/batch-details.tsx

@@ -15,7 +15,7 @@ export function BatchDetailsComponent({
       <KeyValueList>
         <KeyValueItem
           label="Batch Number"
-          value={"#" + batchDetails?.Header?.number}
+          value={"#" + Number(batchDetails?.Header?.number)}
         />
         <KeyValueItem
           label="Hash"
@@ -59,10 +59,16 @@ export function BatchDetailsComponent({
         />
         <KeyValueItem
           label="Gas Limit"
-          value={batchDetails?.Header?.gasLimit}
+          value={Number(batchDetails?.Header?.gasLimit)}
+        />
+        <KeyValueItem
+          label="Gas Used"
+          value={Number(batchDetails?.Header?.gasUsed)}
+        />
+        <KeyValueItem
+          label="Base Fee"
+          value={batchDetails?.Header?.baseFee || "-"}
         />
-        <KeyValueItem label="Gas Used" value={batchDetails?.Header?.gasUsed} />
-        <KeyValueItem label="Base Fee" value={batchDetails?.Header?.baseFee} />
         <KeyValueItem
           label="Inbound Cross Chain Hash"
           value={
@@ -87,15 +93,15 @@ export function BatchDetailsComponent({
         />
         <KeyValueItem
           label="Base Fee Per Gas"
-          value={batchDetails?.Header?.baseFeePerGas}
+          value={Number(batchDetails?.Header?.baseFeePerGas)}
           isLastItem
         />
       </KeyValueList>
       <Separator />
       <KeyValueList>
         <KeyValueItem
           label="No. of Transactions"
-          value={batchDetails?.TxHashes?.length || 0}
+          value={batchDetails?.TxHashes?.length || "-"}
           isLastItem
         />
       </KeyValueList>

tools/obscuroscan_v3/frontend/src/components/modules/batches/columns.tsx

@@ -1,9 +1,7 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
-import { Checkbox } from "@/src/components/ui/checkbox";
 
-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";
@@ -12,27 +10,6 @@ import { EyeOpenIcon } from "@radix-ui/react-icons";
 import Link from "next/link";
 
 export const columns: ColumnDef<Batch>[] = [
-  {
-    id: "select",
-    header: ({ table }) => (
-      <Checkbox
-        checked={table.getIsAllPageRowsSelected()}
-        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-        aria-label="Select all"
-        className="translate-y-[2px]"
-      />
-    ),
-    cell: ({ row }) => (
-      <Checkbox
-        checked={row.getIsSelected()}
-        onCheckedChange={(value) => row.toggleSelected(!!value)}
-        aria-label="Select row"
-        className="translate-y-[2px]"
-      />
-    ),
-    enableSorting: false,
-    enableHiding: false,
-  },
   {
     accessorKey: "number",
     header: ({ column }) => (
@@ -41,8 +18,8 @@ export const columns: ColumnDef<Batch>[] = [
     cell: ({ row }) => {
       return (
         <div className="flex space-x-2">
-          <span className="max-w-[500px] truncate font-medium">
-            {row.getValue("number")}
+          <span className="max-w-[500px] truncate">
+            {Number(row.getValue("number"))}
           </span>
         </div>
       );
@@ -58,7 +35,7 @@ export const columns: ColumnDef<Batch>[] = [
     cell: ({ row }) => {
       return (
         <div className="flex space-x-2">
-          <span className="max-w-[500px] truncate font-medium">
+          <span className="max-w-[500px] truncate">
             {row.getValue("timestamp")
               ? formatTimeAgo(row.getValue("timestamp"))
               : "N/A"}
@@ -77,8 +54,8 @@ export const columns: ColumnDef<Batch>[] = [
     cell: ({ row }) => {
       return (
         <div className="flex space-x-2">
-          <span className="max-w-[500px] truncate font-medium">
-            {row.getValue("gasUsed")}
+          <span className="max-w-[500px] truncate">
+            {Number(row.getValue("gasUsed"))}
           </span>
         </div>
       );
@@ -94,8 +71,8 @@ export const columns: ColumnDef<Batch>[] = [
     cell: ({ row }) => {
       return (
         <div className="flex space-x-2">
-          <span className="max-w-[500px] truncate font-medium">
-            {row.getValue("gasLimit")}
+          <span className="max-w-[500px] truncate">
+            {Number(row.getValue("gasLimit"))}
           </span>
         </div>
       );
@@ -137,31 +114,15 @@ export const columns: ColumnDef<Batch>[] = [
     enableHiding: false,
   },
   {
-    accessorKey: "difficulty",
+    accessorKey: "miner",
     header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Difficulty" />
+      <DataTableColumnHeader column={column} title="Miner" />
     ),
     cell: ({ row }) => {
-      const finality = statuses.find(
-        (finality) => finality.value === row.getValue("difficulty")
-      );
-
-      if (!finality) {
-        return null;
-      }
-
-      return (
-        <div className="flex items-center">
-          {finality.icon && (
-            <finality.icon className="mr-2 h-4 w-4 text-muted-foreground" />
-          )}
-          <span>{finality.label || "N/A"}</span>
-        </div>
-      );
-    },
-    filterFn: (row, id, value) => {
-      return value.includes(row.getValue(id));
+      return <TruncatedAddress address={row.original.miner} />;
     },
+    enableSorting: false,
+    enableHiding: false,
   },
   {
     id: "actions",