feat: Multichain

.github/workflows/contracts.yml

@@ -6,6 +6,7 @@ on:
       - main
       - dev
       - release/*
+      - feat/multichain
   push:
     branches:
       - main

.github/workflows/explorer-build.yml

@@ -6,6 +6,7 @@ on:
       - main
       - dev
       - release/*
+      - feat/multichain
   push:
     branches:
       - main

.github/workflows/explorer-deploy-preview.yml

@@ -4,6 +4,7 @@ on:
   pull_request:
     branches:
       - dev
+      - feat/multichain
     paths:
       - explorer/**
 

.github/workflows/lint.yml

@@ -6,6 +6,7 @@ on:
       - main
       - dev
       - release/*
+      - feat/multichain
   push:
     branches:
       - main

.github/workflows/sdk.yml

@@ -6,6 +6,7 @@ on:
       - main
       - dev
       - release/*
+      - feat/multichain
   push:
     branches:
       - main

.github/workflows/subgraph.yml

@@ -6,6 +6,7 @@ on:
       - main
       - dev
       - release/*
+      - feat/multichain
   push:
     branches:
       - main

explorer/package.json

@@ -28,7 +28,7 @@
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@tanstack/react-query": "^5.61.4",
     "@tanstack/react-table": "^8.10.7",
-    "@verax-attestation-registry/verax-sdk": "2.4.0",
+    "@verax-attestation-registry/verax-sdk": "3.0.0-beta-5",
     "abitype": "^0.10.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",

explorer/src/assets/locales/en/en.json

@@ -108,7 +108,8 @@
     },
     "messages": {
       "attestationsConnectWallet": "Connect wallet to see your attestations",
-      "emptyList": "You don’t have any attestations yet"
+      "emptyList": "You don’t have any attestations yet",
+      "isLoading": "Attestations are loading..."
     }
   },
   "module": {

explorer/src/components/DataTable/index.tsx

@@ -1,33 +1,35 @@
 import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
-import { Attestation, Module, Schema } from "@verax-attestation-registry/verax-sdk";
+import { Attestation, ChainName, Module, Schema } from "@verax-attestation-registry/verax-sdk";
 import { t } from "i18next";
 import { generatePath, useNavigate } from "react-router-dom";
 
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { useNetworkContext } from "@/providers/network-provider/context";
+import { NetworkResolver } from "@/utils/networkResolver.ts";
 
 import { DataTableProps } from "./interfaces";
 
 type TRowOriginal = Schema | Attestation | Module;
 
-export function DataTable<TData, TValue>({ columns, data, link }: DataTableProps<TData, TValue>) {
-  const navigate = useNavigate();
-
-  const {
-    network: { network },
-  } = useNetworkContext();
-
+export function DataTable<TData, TValue>({ columns, data, link, linkParams }: DataTableProps<TData, TValue>) {
   const table = useReactTable({
     data,
     columns,
     getCoreRowModel: getCoreRowModel(),
   });
+  const navigate = useNavigate();
 
   const trClickHandler = (original: TRowOriginal) => {
     const id = original.id;
     if (!link || !id) return;
 
-    navigate(generatePath(link, { chainId: network, id }), {
+    if (original.chainName && !linkParams) {
+      const network = NetworkResolver.getNetworkSlugFromChainName(original.chainName as ChainName);
+      linkParams = { network };
+    }
+
+    const params = { id, ...(linkParams || {}) };
+
+    navigate(generatePath(link, params), {
       state: { from: location.pathname },
     });
   };

explorer/src/components/DataTable/interfaces.ts

@@ -4,4 +4,5 @@ export interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
   data: TData[];
   link?: string;
+  linkParams?: Record<string, string | undefined>;
 }

explorer/src/components/Header/index.tsx

@@ -13,15 +13,8 @@ import VeraxLogoDarkMode from "@/assets/logo/verax-logo-dark.svg?react";
 import VeraxLogo from "@/assets/logo/verax-logo-light.svg?react";
 import { LightDarkModeSwitcher } from "@/components/LightDarkModeSwitcher";
 import { Link } from "@/components/Link";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { chains } from "@/config";
+import { NetworkTypeToggle } from "@/components/NetworkTypeToggle";
 import useWindowDimensions from "@/hooks/useWindowDimensions";
-import { useNetworkContext } from "@/providers/network-provider/context";
 import { APP_ROUTES } from "@/routes/constants";
 import { cropString } from "@/utils/stringUtils";
 
@@ -31,8 +24,6 @@ import { EButtonType } from "../Buttons/enum";
 import { NavigationList } from "../NavigationList";
 import { SearchInput } from "../SearchInput";
 
-import "./styles.css";
-
 interface HeaderProps {
   isOpened: boolean;
   setIsOpened: Dispatch<SetStateAction<boolean>>;
@@ -44,10 +35,9 @@ export const Header: React.FC<HeaderProps> = ({ isOpened, setIsOpened }) => {
   const { isDarkMode } = useTernaryDarkMode();
   const { data: ensName } = useEnsName({ address, chainId: mainnet.id });
 
-  const { network, setNetwork } = useNetworkContext();
   const screen = useWindowDimensions();
   const isAdaptive = !screen.xl;
-  const isHomePage = location.pathname === `/${network.network}`;
+  const isHomePage = location.pathname === "/";
 
   const titleByScreen = screen.sm ? t("common.actions.connect") : t("common.actions.connectWallet");
   const title = address && isConnected ? ensName || cropString(address) : titleByScreen;
@@ -73,32 +63,7 @@ export const Header: React.FC<HeaderProps> = ({ isOpened, setIsOpened }) => {
         </div>
         <div className="justify-end items-center gap-4 flex flex-1">
           {!screen.sm && !isHomePage && <SearchInput />}
-          {!isAdaptive && <LightDarkModeSwitcher />}
-          <DropdownMenu>
-            <DropdownMenuTrigger className="DropdownMenuTrigger select-none w-[72px] p-2 rounded-md outline-none hover:bg-jumbotronLight dark:hover:bg-jumbotronDark justify-start items-center gap-2 inline-flex transition dark:text-whiteDefault">
-              {isDarkMode && network.imgDark ? network.imgDark : network.img}
-              <ChevronDown className="header-arrow w-6 h-6 relative" />
-            </DropdownMenuTrigger>
-            <DropdownMenuContent className="flex flex-col gap-2 bg-surface-primary dark:bg-blackDefault dark:border-border-cardDark">
-              {chains.map((chain) => (
-                <DropdownMenuItem
-                  key={chain.name}
-                  className="flex gap-2 focus:bg-jumbotronLight dark:focus:bg-jumbotronDark dark:text-whiteDefault cursor-pointer transition"
-                  onClick={() => setNetwork(chain)}
-                >
-                  <div
-                    style={{
-                      width: "24px",
-                      height: "24px",
-                    }}
-                  >
-                    {isDarkMode && chain.imgDark ? chain.imgDark : chain.img}
-                  </div>
-                  {chain.name}
-                </DropdownMenuItem>
-              ))}
-            </DropdownMenuContent>
-          </DropdownMenu>
+          <NetworkTypeToggle className="mx-2" />
           <ConnectKitButton.Custom>
             {({ isConnected, show }) => {
               if (!show) return <></>;
@@ -114,6 +79,7 @@ export const Header: React.FC<HeaderProps> = ({ isOpened, setIsOpened }) => {
               );
             }}
           </ConnectKitButton.Custom>
+          {!isAdaptive && <LightDarkModeSwitcher />}
           {isAdaptive && <MenuButton isOpened={isOpened} setIsOpened={setIsOpened} />}
         </div>
       </div>

explorer/src/components/Link/index.tsx

@@ -1,14 +1,9 @@
 import { PropsWithChildren } from "react";
 import { LinkProps, Link as RouterLink, generatePath, useLocation } from "react-router-dom";
 
-import { useNetworkContext } from "@/providers/network-provider/context";
-
 export const Link: React.FC<PropsWithChildren & LinkProps> = ({ children, ...props }) => {
-  const {
-    network: { network },
-  } = useNetworkContext();
   const { pathname } = useLocation();
-  const path = generatePath(props.to.toString(), { chainId: network });
+  const path = generatePath(props.to.toString());
   return (
     <RouterLink {...props} to={path} state={{ from: pathname }}>
       {children}

explorer/src/components/NavLink/index.tsx

@@ -1,14 +1,9 @@
 import { PropsWithChildren } from "react";
 import { NavLinkProps, NavLink as RouterNavLink, generatePath, useLocation } from "react-router-dom";
 
-import { useNetworkContext } from "@/providers/network-provider/context";
-
 export const NavLink: React.FC<PropsWithChildren & NavLinkProps> = ({ children, ...props }) => {
-  const {
-    network: { network },
-  } = useNetworkContext();
   const { pathname } = useLocation();
-  const path = generatePath(props.to.toString(), { chainId: network });
+  const path = generatePath(props.to.toString());
   return (
     <RouterNavLink {...props} to={path} state={{ from: pathname }}>
       {children}

explorer/src/components/NetworkTypeToggle/index.tsx

@@ -0,0 +1,76 @@
+import { useTernaryDarkMode } from "usehooks-ts";
+
+import { useNetwork } from "@/contexts/NetworkContext";
+import { cn } from "@/utils";
+
+interface NetworkTypeToggleProps {
+  className?: string;
+}
+
+export const NetworkTypeToggle: React.FC<NetworkTypeToggleProps> = ({ className }) => {
+  const { networkType, setNetworkType } = useNetwork();
+  const { isDarkMode } = useTernaryDarkMode();
+
+  const toggleNetworkType = () => {
+    setNetworkType(networkType === "mainnet" ? "testnet" : "mainnet");
+  };
+
+  return (
+    <div className={cn("flex items-center gap-3", className)}>
+      <div
+        onClick={toggleNetworkType}
+        className={cn("relative flex items-center justify-center cursor-pointer", "h-10 w-[5.6rem]")}
+      >
+        <div className={cn("absolute inset-0 rounded-full", isDarkMode ? "bg-gray-700" : "bg-gray-200")} />
+
+        <div
+          className={cn(
+            "absolute flex items-center justify-center z-10 rounded-full transition-transform duration-200",
+            "h-9 w-9 m-0.5",
+            isDarkMode ? "bg-gray-600" : "bg-white border border-gray-300",
+            networkType === "mainnet" ? "translate-x-[-2.25rem]" : "translate-x-[2.25rem]",
+          )}
+        >
+          <span className={cn("text-sm font-bold", isDarkMode ? "text-white" : "text-gray-800")}>
+            {networkType === "mainnet" ? "M" : "T"}
+          </span>
+        </div>
+
+        <div className="w-full flex justify-between px-4">
+          <span
+            className={cn(
+              "text-sm font-bold z-0 translate-x-[-0.25rem]",
+              networkType === "mainnet"
+                ? isDarkMode
+                  ? "text-white"
+                  : "text-gray-800"
+                : isDarkMode
+                ? "text-gray-400"
+                : "text-gray-400",
+            )}
+          >
+            M
+          </span>
+          <span
+            className={cn(
+              "text-sm font-bold z-0 translate-x-[0.25rem]",
+              networkType === "testnet"
+                ? isDarkMode
+                  ? "text-white"
+                  : "text-gray-800"
+                : isDarkMode
+                ? "text-gray-400"
+                : "text-gray-400",
+            )}
+          >
+            T
+          </span>
+        </div>
+      </div>
+
+      <span className={cn("text-sm font-medium", isDarkMode ? "text-white" : "text-gray-800")}>
+        {networkType === "mainnet" ? "Mainnets" : "Testnets"}
+      </span>
+    </div>
+  );
+};