Stake page

package.json

@@ -36,6 +36,7 @@
     "lightweight-charts": "^4.1.3",
     "next": "^14.2.21",
     "papaparse": "^5.4.1",
+    "playwright": "^1.50.0",
     "postcss": "^8.4.32",
     "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
@@ -68,6 +69,7 @@
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
     "jsdom": "^24.0.0",
+    "language-subtag-registry": "^0.3.23",
     "prettier": "2.8.8",
     "serve": "^14.2.3",
     "tailwind-scrollbar": "^3.1.0",

src/app/components/NavBar.tsx

@@ -40,6 +40,10 @@ const NavItems: { path: string; title: string; openInNewTab?: boolean }[] = [
     path: "/trade",
     title: "trade",
   },
+  {
+    path: "/stake",
+    title: "stake",
+  },
   {
     path: "/rewards",
     title: "rewards",
@@ -278,12 +282,12 @@ function MobileMenu({
   const isMobile = useIsMobile();
   return (
     <div
-      className={`flex flex-col 
-          items-end 
-          w-[100vw] h-[100vh] 
-          overflow-hidden 
-          z-[1000] 
-          fixed top-0 left-0 
+      className={`flex flex-col
+          items-end
+          w-[100vw] h-[100vh]
+          overflow-hidden
+          z-[1000]
+          fixed top-0 left-0
           py-5
           bg-[rgba(0,0,0,0.8)] backdrop-blur-lg
            ${isMobile ? "px-6" : "px-10"}
@@ -405,17 +409,17 @@ const AnimatedBurger = ({ menuOpen }: { menuOpen: boolean }) => {
     <div
       className={`
             z-[9999]
-            absolute 
-            top-1/2 
+            absolute
+            top-1/2
             ${menuOpen ? "-translate-y-1" : ""}
-            h-[0.175rem] w-7 
+            h-[0.175rem] w-7
 
             rounded-sm
             ${menuOpen ? "bg-transparent" : "bg-secondary-content"}
             transition-all
             duration-500
-            
-            before:absolute 
+
+            before:absolute
             before:content-[""]
             before:h-[0.175rem] before:w-7
             before:-translate-x-3.5
@@ -426,7 +430,7 @@ const AnimatedBurger = ({ menuOpen }: { menuOpen: boolean }) => {
             before:bg-secondary-content
             ${menuOpen ? "before:rotate-45 before:translate-y-[45%]" : ""}
 
-            after:absolute 
+            after:absolute
             after:content-[""]
             after:h-[0.175rem] after:w-7
             after:-translate-x-3.5