[Tenscan] implement monorepo changes

packages/ui/components/shared/badge.tsx

@@ -1,21 +1,31 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
-
 import { cn } from "../../lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold",
   {
     variants: {
       variant: {
-        default: "border-transparent bg-primary hover:bg-primary/80",
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
         secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
         destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
         success:
-          "border-transparent bg-success text-success-foreground hover:bg-success/80",
-        outline: "text-foreground",
+          "border-transparent bg-success text-success-foreground hover:bg-success/80 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+        outline:
+          "text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+        "static-default":
+          "border-transparent bg-primary text-primary-foreground",
+        "static-secondary":
+          "border-transparent bg-secondary text-secondary-foreground",
+        "static-destructive":
+          "border-transparent bg-destructive text-destructive-foreground",
+        "static-success":
+          "border-transparent bg-success text-success-foreground",
+        "static-outline": "border-current text-foreground",
       },
     },
     defaultVariants: {

tools/bridge-frontend/src/lib/siteMetadata.ts

@@ -7,7 +7,7 @@ export const siteMetadata = {
     "Bridge tokens between Layer 1 and Layer 2 networks effortlessly with TEN Bridge. Ensure secure and efficient cross-chain transactions",
   keywords:
     "token bridging, cross-chain transactions, Layer 1 to Layer 2 bridge, blockchain bridge, Ten Bridge, crypto bridging, TEN network, TEN blockchain, TEN ecosystem",
-  siteUrl: `https://${environment}-bridge.ten.xyz`,
+  siteUrl: `https://${environment && environment + "-"}bridge.ten.xyz`,
   siteLogo: `/assets/images/cover.png`,
   siteLogoSquare: `/assets/images/cover.png`,
   email: "[email protected]",

tools/tenscan/frontend/Dockerfile

@@ -1,12 +1,17 @@
 FROM node:18-buster as runner
-# Install pnpm
+
 RUN npm install -g pnpm
-# setup container data structure
-RUN mkdir -p /home/obscuro/go-obscuro/tools/tenscan/
-COPY ./tools/tenscan/frontend /home/obscuro/go-obscuro/tools/tenscan/frontend
 
-WORKDIR /home/obscuro/go-obscuro/tools/tenscan/frontend
+COPY . /home/obscuro/go-obscuro/
+
+WORKDIR /home/obscuro/go-obscuro/
 
 RUN pnpm install
 
-EXPOSE 80
+WORKDIR /home/obscuro/go-obscuro/tools/tenscan/frontend
+
+RUN pnpm install --filter ./tools/tenscan/frontend...
+
+EXPOSE 80
+
+CMD ["pnpm", "run", "start"]

tools/tenscan/frontend/api/batches.ts

@@ -1,13 +1,13 @@
 import { httpRequest } from ".";
 import { apiRoutes } from "@/src/routes";
 import { pathToUrl } from "@/src/routes/router";
-import { ResponseDataInterface } from "@/src/types/interfaces";
 import {
   Batch,
   BatchDetails,
   BatchResponse,
   LatestBatch,
 } from "@/src/types/interfaces/BatchInterfaces";
+import { ResponseDataInterface } from "@repo/ui/lib/types/common";
 
 export const fetchBatches = async (
   payload?: Record<string, any>

tools/tenscan/frontend/api/blocks.ts

@@ -1,12 +1,13 @@
 import { httpRequest } from ".";
 import { apiRoutes } from "@/src/routes";
 import { pathToUrl } from "@/src/routes/router";
-import { ResponseDataInterface } from "@/src/types/interfaces";
+import { BlockResponse } from "@/src/types/interfaces/BlockInterfaces";
+import { ResponseDataInterface } from "@repo/ui/lib/types/common";
 
 export const fetchBlocks = async (
   payload?: Record<string, any>
-): Promise<ResponseDataInterface<any>> => {
-  return await httpRequest<ResponseDataInterface<any>>({
+): Promise<ResponseDataInterface<BlockResponse>> => {
+  return await httpRequest<ResponseDataInterface<BlockResponse>>({
     method: "get",
     url: pathToUrl(apiRoutes.getBlocks),
     searchParams: payload,

tools/tenscan/frontend/api/contracts.ts

@@ -1,8 +1,8 @@
 import { httpRequest } from ".";
 import { apiRoutes } from "@/src/routes";
 import { pathToUrl } from "@/src/routes/router";
-import { ResponseDataInterface } from "@/src/types/interfaces";
 import { ContractCount } from "@/src/types/interfaces/ContractInterface";
+import { ResponseDataInterface } from "@repo/ui/lib/types/common";
 
 export const fetchContractCount = async (
   payload?: Record<string, any>

tools/tenscan/frontend/api/general.ts

@@ -1,4 +1,4 @@
-import { ResponseDataInterface } from "@/src/types/interfaces";
+import { ResponseDataInterface } from "@repo/ui/lib/types/common";
 import { httpRequest } from ".";
 import { pathToUrl } from "@/src/routes/router";
 import { apiRoutes } from "@/src/routes";

tools/tenscan/frontend/api/rollups.ts

@@ -1,8 +1,8 @@
 import { httpRequest } from ".";
 import { apiRoutes } from "@/src/routes";
 import { pathToUrl } from "@/src/routes/router";
-import { ResponseDataInterface } from "@/src/types/interfaces";
-import { Batch, BatchResponse } from "@/src/types/interfaces/BatchInterfaces";
+import { ResponseDataInterface } from "@repo/ui/lib/types/common";
+import { BatchResponse } from "@/src/types/interfaces/BatchInterfaces";
 import {
   Rollup,
   RollupsResponse,

tools/tenscan/frontend/api/transactions.ts

@@ -1,15 +1,16 @@
-import { jsonHexToObj } from "@/src/lib/utils";
+import { jsonHexToObj } from "@repo/ui/lib/utils";
 import { httpRequest } from ".";
 import { apiRoutes, ethMethods, tenCustomQueryMethods } from "@/src/routes";
 import { pathToUrl } from "@/src/routes/router";
-import { ResponseDataInterface, ToastType } from "@/src/types/interfaces";
 import {
   TransactionCount,
   Price,
   TransactionResponse,
   Transaction,
 } from "@/src/types/interfaces/TransactionInterfaces";
-import { showToast } from "@/src/components/ui/use-toast";
+import { showToast } from "@repo/ui/components/shared/use-toast";
+import { ResponseDataInterface } from "@repo/ui/lib/types/common";
+import { ToastType } from "@repo/ui/lib/enums/toast";
 
 export const fetchTransactions = async (
   payload?: Record<string, any>

tools/tenscan/frontend/next.config.js

@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  transpilePackages: ["@repo/ui"],
   images: {
     unoptimized: true,
   },

tools/tenscan/frontend/package.json

@@ -10,20 +10,6 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@radix-ui/react-avatar": "^1.0.4",
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-dialog": "^1.0.5",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-navigation-menu": "^1.1.4",
-    "@radix-ui/react-popover": "^1.0.7",
-    "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-separator": "^1.0.3",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-toast": "^1.1.5",
-    "@radix-ui/react-tooltip": "^1.0.7",
     "@tanstack/react-query": "^5.8.1",
     "@tanstack/react-query-devtools": "^5.8.1",
     "@tanstack/react-table": "^8.10.7",
@@ -33,7 +19,6 @@
     "cmdk": "^0.2.0",
     "date-fns": "^2.30.0",
     "ethers": "^5.7.2",
-    "lucide-react": "^0.292.0",
     "next": "14.0.1",
     "next-themes": "^0.2.1",
     "path-to-regexp": "^6.2.1",
@@ -43,18 +28,18 @@
     "react-json-pretty": "^2.2.0",
     "recharts": "^2.9.3",
     "tailwind-merge": "^2.0.0",
-    "tailwindcss-animate": "^1.0.7",
-    "zustand": "^4.4.6"
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "@types/node": "^20",
-    "@types/react": "^18",
+    "@repo/ui": "workspace:*",
+    "@types/node": "^20.12.12",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
     "eslint": "^8",
     "eslint-config-next": "14.0.1",
     "postcss": "^8",
-    "tailwindcss": "^3.3.0",
-    "typescript": "^5"
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.4.5"
   }
 }

tools/tenscan/frontend/pages/404.tsx

@@ -1,38 +1,7 @@
-import { ErrorType } from "@/src/types/interfaces";
-import Error from "./_error";
+import Custom404Error from "@repo/ui/components/common/404";
 
-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>
-  );
-}
+const Custom404 = () => {
+  return <Custom404Error />;
+};
 
-export default Custom404Error;
+export default Custom404;

tools/tenscan/frontend/pages/500.tsx

@@ -1,32 +1,7 @@
-import { ErrorType } from "@/src/types/interfaces";
-import Error from "./_error";
+import Custom500Error from "@repo/ui/components/common/500";
 
-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>
-  );
-}
+const Custom404 = () => {
+  return <Custom500Error />;
+};
 
-export default Custom500Error;
+export default Custom404;

tools/tenscan/frontend/pages/_app.tsx

@@ -8,15 +8,14 @@ import {
 } from "@tanstack/react-query";
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
-import { Toaster } from "@/src/components/ui/toaster";
-import { WalletConnectionProvider } from "@/src/components/providers/wallet-provider";
-import { NetworkStatus } from "@/src/components/modules/common/network-status";
+import { Toaster } from "@repo/ui/components/shared/toaster";
+import { NetworkStatus } from "@repo/ui/components/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";
+import { showToast } from "@repo/ui/components/shared/use-toast";
+import { ToastType } from "@repo/ui/lib/enums/toast";
 
 export default function App({ Component, pageProps }: AppProps) {
   const mutationCache = new MutationCache({
@@ -76,12 +75,10 @@ export default function App({ Component, pageProps }: AppProps) {
           enableSystem
           disableTransitionOnChange
         >
-          <WalletConnectionProvider>
-            <Component {...pageProps} />
-            <Toaster />
-            <NetworkStatus />
-            <ReactQueryDevtools initialIsOpen={false} />
-          </WalletConnectionProvider>
+          <Component {...pageProps} />
+          <Toaster />
+          <NetworkStatus />
+          <ReactQueryDevtools initialIsOpen={false} />
         </ThemeProvider>
       </QueryClientProvider>
     </>