Jennifer/scan updates

tools/obscuroscan_v3/frontend/package.json

@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -p 80",
     "build": "next build",
-    "start": "next start",
+    "start": "next start -p 80",
     "lint": "next lint"
   },
   "dependencies": {

tools/obscuroscan_v3/frontend/pages/404.tsx

@@ -0,0 +1,38 @@
+import { ErrorType } from "@/src/types/interfaces";
+import Error from "./_error";
+
+export function Custom404Error({
+  customPageTitle,
+  showRedirectText,
+  redirectText,
+  isFullWidth,
+  message,
+  showMessage = true,
+  redirectLink,
+  children,
+}: ErrorType) {
+  return (
+    <Error
+      heading={` ${customPageTitle || "Oops! Page"} Not Found`}
+      statusText={`We can't seem to find the ${
+        customPageTitle || "page"
+      } you're looking for.`}
+      statusCode={404}
+      showRedirectText={showRedirectText}
+      redirectText={redirectText || "Home Page"}
+      message={
+        message ||
+        `The ${
+          customPageTitle || "page"
+        } you are looking for might have been removed, had its name changed, or is temporarily unavailable.`
+      }
+      isFullWidth={isFullWidth}
+      showMessage={showMessage}
+      redirectLink={redirectLink}
+    >
+      {children}
+    </Error>
+  );
+}
+
+export default Custom404Error;

tools/obscuroscan_v3/frontend/pages/500.tsx

@@ -0,0 +1,32 @@
+import { ErrorType } from "@/src/types/interfaces";
+import Error from "./_error";
+
+function Custom500Error({
+  customPageTitle,
+  message,
+  showRedirectText,
+  redirectText,
+  err,
+  redirectLink,
+  children,
+}: ErrorType) {
+  return (
+    <Error
+      heading={"Oops! Something went wrong."}
+      message={
+        message ||
+        "We're experiencing technical difficulties. Please try again later."
+      }
+      statusText={customPageTitle || `An Error occured`}
+      statusCode={500}
+      showRedirectText={showRedirectText || true}
+      redirectText={redirectText || "Home Page"}
+      err={err}
+      redirectLink={redirectLink}
+    >
+      {children}
+    </Error>
+  );
+}
+
+export default Custom500Error;

tools/obscuroscan_v3/frontend/pages/_app.tsx

@@ -12,6 +12,10 @@ 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";
 
 export default function App({ Component, pageProps }: AppProps) {
   const { toast } = useToast();
@@ -47,20 +51,48 @@ export default function App({ Component, pageProps }: AppProps) {
   );
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <ThemeProvider
-        attribute="class"
-        defaultTheme="system"
-        enableSystem
-        disableTransitionOnChange
+    <>
+      <Script
+        strategy="lazyOnload"
+        src={`https://www.googletagmanager.com/gtag/js?id='${GOOGLE_ANALYTICS_ID}'`}
+      />
+
+      <Script strategy="lazyOnload" id="google-analytics">
+        {`
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', '${GOOGLE_ANALYTICS_ID}');
+        `}
+      </Script>
+
+      <HeadSeo
+        title={`${siteMetadata.companyName} `}
+        description={siteMetadata.description}
+        canonicalUrl={`${siteMetadata.siteUrl}`}
+        ogImageUrl={siteMetadata.siteLogo}
+        ogTwitterImage={siteMetadata.siteLogo}
+        ogType={"website"}
       >
-        <WalletConnectionProvider>
-          <Component {...pageProps} />
-          <Toaster />
-          <NetworkStatus />
-          <ReactQueryDevtools initialIsOpen={false} />
-        </WalletConnectionProvider>
-      </ThemeProvider>
-    </QueryClientProvider>
+        <link rel="icon" href="/favicon.ico" />
+        <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
+        <link rel="manifest" href="/manifest.json" />
+      </HeadSeo>
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <WalletConnectionProvider>
+            <Component {...pageProps} />
+            <Toaster />
+            <NetworkStatus />
+            <ReactQueryDevtools initialIsOpen={false} />
+          </WalletConnectionProvider>
+        </ThemeProvider>
+      </QueryClientProvider>
+    </>
   );
 }

tools/obscuroscan_v3/frontend/pages/_error.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import NextErrorComponent from "next/error";
+import Link from "next/link";
+import Image from "next/image";
+import { ErrorType } from "@/src/types/interfaces";
+
+function ErrorMessage({
+  statusText,
+  message,
+  showMessage,
+  showStatusText,
+}: any) {
+  return (
+    <div className="error-message">
+      {showStatusText && <h3>{statusText}</h3>}
+      {message && showMessage && (
+        <p className="text-muted-foreground">{message}</p>
+      )}
+    </div>
+  );
+}
+
+export function CustomError({
+  showRedirectText = true,
+  heading = "Oops! Something went wrong.",
+  statusText = "500",
+  message = "We're experiencing technical difficulties. Please try again later.",
+  redirectText = "Home Page",
+  isFullWidth,
+  err,
+  showMessage = true,
+  showStatusText,
+  statusCode,
+  isModal,
+  redirectLink = "/",
+  children,
+  ...props
+}: ErrorType) {
+  return (
+    <section
+      className="h-full flex flex-col justify-center items-center"
+      {...props}
+    >
+      <main className={isFullWidth ? "max-w-full" : ""}>
+        <div className="text-center">
+          <h1 className="text-4xl font-extrabold mb-6">{heading}</h1>
+          <div className={isFullWidth ? "w-full" : ""}>
+            <ErrorMessage
+              showStatusText={showStatusText}
+              showMessage={showMessage}
+              message={message}
+              statusText={statusText}
+            />
+          </div>
+          {showRedirectText && (
+            <div>
+              Go to{" "}
+              <Link
+                href={redirectLink}
+                passHref
+                className="text-primary pointer underline"
+              >
+                {redirectText}
+              </Link>{" "}
+              {/* <div>
+                Looks like you&apos;re on the wrong side of town, buddy.
+                Let&apos;s get you back on the <Link href="/">right side</Link>.
+              </div> */}
+            </div>
+          )}
+          {children}
+        </div>
+      </main>
+    </section>
+  );
+}
+
+CustomError.getInitialProps = async ({ res, err }: any) => {
+  const statusCode = res ? res.statusCode : err?.statusCode || 404;
+  const errorInitialProps = await NextErrorComponent.getInitialProps({
+    res,
+    err,
+  } as any);
+  errorInitialProps.statusCode = statusCode;
+
+  return statusCode < 500
+    ? errorInitialProps
+    : { ...errorInitialProps, statusCode };
+};
+
+export default CustomError;

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

@@ -1,6 +1,6 @@
 import { fetchBatchByHash } from "@/api/batches";
 import Layout from "@/src/components/layouts/default-layout";
-import { BatchDetails } from "@/src/components/modules/batches/batch-details";
+import { BatchDetailsComponent } from "@/src/components/modules/batches/batch-details";
 import {
   Card,
   CardHeader,
@@ -36,7 +36,7 @@ export default function Batch() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <BatchDetails batchDetails={batchDetails} />
+            <BatchDetailsComponent batchDetails={batchDetails} />
           </CardContent>
         </Card>
       ) : (

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

@@ -11,19 +11,35 @@ export const metadata: Metadata = {
 };
 
 export default function Batches() {
-  const { batches } = useBatchesService();
+  const { batches, refetchBatches, setNoPolling } = useBatchesService();
+  const { BatchesData, Total } = batches?.result || {
+    BatchesData: [],
+    Total: 0,
+  };
+
+  React.useEffect(() => {
+    setNoPolling(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return (
     <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>
+            <p className="text-sm text-muted-foreground">
+              {Total} Batches found.
+            </p>
           </div>
         </div>
-        {batches?.result?.BatchesData ? (
-          <DataTable columns={columns} data={batches?.result?.BatchesData} />
+        {BatchesData ? (
+          <DataTable
+            columns={columns}
+            data={BatchesData}
+            refetch={refetchBatches}
+            total={+Total}
+          />
         ) : (
           <p>Loading...</p>
         )}

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

@@ -11,19 +11,35 @@ export const metadata: Metadata = {
 };
 
 export default function Blocks() {
-  const { blocks } = useBlocksService();
+  const { blocks, setNoPolling, refetchBlocks } = useBlocksService();
+  const { BlocksData, Total } = blocks?.result || {
+    BlocksData: [],
+    Total: 0,
+  };
+
+  React.useEffect(() => {
+    setNoPolling(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return (
     <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>
+            <p className="text-sm text-muted-foreground">
+              {Total} Blocks found.
+            </p>
           </div>
         </div>
-        {blocks?.result?.BlocksData ? (
-          <DataTable columns={columns} data={blocks?.result?.BlocksData} />
+        {BlocksData ? (
+          <DataTable
+            columns={columns}
+            data={BlocksData}
+            total={+Total}
+            refetch={refetchBlocks}
+          />
         ) : (
           <p>Loading...</p>
         )}