feature(ui-ux): added liquidity overview screen

apps/web/src/components/Header.tsx

@@ -2,8 +2,13 @@ import Image from "next/image";
 import Link from "next/link";
 import ConnectButton from "./ConnectButton";
 import Banner from "./Banner";
+import Navigation from "./Navigation";
 
-export default function Header(): JSX.Element {
+export default function Header({
+  isBridgeUp,
+}: {
+  isBridgeUp: boolean;
+}): JSX.Element {
   return (
     <div className="relative z-[1] flex flex-col">
       <Banner />
@@ -18,10 +23,20 @@ export default function Header(): JSX.Element {
             />
           </div>
         </Link>
+        {isBridgeUp && (
+          <div className="hidden lg:block">
+            <Navigation />
+          </div>
+        )}
         <div className="flex h-9 items-center md:h-10 lg:h-12">
           <ConnectButton />
         </div>
       </div>
+      {isBridgeUp && (
+        <div className="lg:hidden px-5 md:px-10 mb-6 md:mb-12">
+          <Navigation />
+        </div>
+      )}
     </div>
   );
 }

apps/web/src/components/Link.tsx

@@ -0,0 +1,44 @@
+/* eslint-disable no-restricted-imports */
+import { LinkProps as NextLinkProps } from "next/dist/client/link";
+import { useRouter } from "next/router";
+import NextLink from "next/link";
+import { PropsWithChildren } from "react";
+import { UrlObject } from "url";
+import { useNetworkEnvironmentContext } from "@contexts/NetworkEnvironmentContext";
+
+export interface LinkUrlObject extends UrlObject {
+  query?: Record<string, string>;
+}
+
+interface LinkProps extends NextLinkProps {
+  href: LinkUrlObject;
+}
+
+/**
+ * Overrides the default next/link to provide ability to 'keep ?network= query string'.
+ * This allows `<Link>` usage to be network agnostic where ?network= are automatically appended.
+ *
+ * To keep implementation simple, LinkProps enforce href to be strictly a `UrlObject` object
+ * where query is a `Record<string, string>`. Hence only use this for internal linking.
+ *
+ * @param {PropsWithChildren<LinkProps>} props
+ */
+export function Link(props: PropsWithChildren<LinkProps>): JSX.Element {
+  const { children, href } = props;
+  const router = useRouter();
+  const networkQuery = router.query.network;
+
+  const { networkEnv } = useNetworkEnvironmentContext();
+  if (networkQuery) {
+    href.query = {
+      ...(href.query ?? {}),
+      network: networkEnv,
+    };
+  }
+
+  return (
+    <NextLink passHref {...props} legacyBehavior>
+      {children}
+    </NextLink>
+  );
+}

apps/web/src/components/Navigation.tsx

@@ -0,0 +1,33 @@
+import clsx from "clsx";
+import { useRouter } from "next/router";
+import { Link } from "./Link";
+
+export default function Navigation() {
+  const router = useRouter();
+  const isRoot = router.pathname === "/";
+
+  return (
+    <div className="flex flex-row rounded-[40px] bg-dark-100 p-1 border-[0.5px] border-dark-300/50">
+      <Link href={{ pathname: "/" }}>
+        <a
+          className={clsx(
+            "w-1/2 text-xs md:text-sm py-3 min-w-[136px] text-center font-semibold rounded-[40px]",
+            isRoot ? "bg-dark-1000 text-dark-00" : "text-dark-1000"
+          )}
+        >
+          Bridge
+        </a>
+      </Link>
+      <Link href={{ pathname: "/liquidity" }}>
+        <a
+          className={clsx(
+            "w-1/2 text-xs md:text-sm py-3 min-w-[136px] text-center font-semibold rounded-[40px]",
+            !isRoot ? "bg-dark-1000 text-dark-00" : "text-dark-1000"
+          )}
+        >
+          Liquidity
+        </a>
+      </Link>
+    </div>
+  );
+}