From b0e17a096012c25833f377a20d38aaff61a81dce Mon Sep 17 00:00:00 2001
From: Ruben Buniatyan <rubo@users.noreply.github.com>
Date: Thu, 5 Sep 2024 20:49:01 +0200
Subject: [PATCH] Integrate Clerk (#205)

---
 .env.development       |   1 +
 .env.staging           |   1 +
 package-lock.json      | 116 +++++++++++++++++++++++++++++++++++-
 package.json           |   1 +
 src/App.jsx            |  12 +++-
 src/shared/Sidebar.jsx | 131 ++++++++++++++++++++++++++++++++++++++---
 6 files changed, 249 insertions(+), 13 deletions(-)

diff --git a/.env.development b/.env.development
index 7381c9d2..7230ecd1 100644
--- a/.env.development
+++ b/.env.development
@@ -1,2 +1,3 @@
 VITE_API_BASE_URL=http://localhost:3000
+VITE_CLERK_PUBLISHABLE_KEY=pk_test_b3B0aW1hbC1jaGlja2VuLTU3LmNsZXJrLmFjY291bnRzLmRldiQ
 VITE_LOG_LEVEL=debug
diff --git a/.env.staging b/.env.staging
index a4cae626..3381e155 100644
--- a/.env.staging
+++ b/.env.staging
@@ -1,2 +1,3 @@
 VITE_API_BASE_URL=https://api-stage.restaking.info
+VITE_CLERK_PUBLISHABLE_KEY=pk_test_b3B0aW1hbC1jaGlja2VuLTU3LmNsZXJrLmFjY291bnRzLmRldiQ
 VITE_LOG_LEVEL=info
diff --git a/package-lock.json b/package-lock.json
index dc6d747c..eb315d66 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "restaking",
       "version": "0.0.0",
       "dependencies": {
+        "@clerk/clerk-react": "^5.4.5",
         "@nextui-org/react": "^2.4.6",
         "@visx/axis": "^3.10.1",
         "@visx/curve": "^3.3.0",
@@ -431,6 +432,72 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@clerk/clerk-react": {
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/@clerk/clerk-react/-/clerk-react-5.4.5.tgz",
+      "integrity": "sha512-E1TuIIs/LahXrDAaG/Rx8jBHnXnggQqPkM/tW+Kp4REfmXmM4N+ophiILx0l3gz6pCTz49F71klzdR6n7MVvQg==",
+      "dependencies": {
+        "@clerk/shared": "2.5.5",
+        "@clerk/types": "4.16.0",
+        "tslib": "2.4.1"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      },
+      "peerDependencies": {
+        "react": ">=18 || >=19.0.0-beta",
+        "react-dom": ">=18 || >=19.0.0-beta"
+      }
+    },
+    "node_modules/@clerk/clerk-react/node_modules/tslib": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
+    },
+    "node_modules/@clerk/shared": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/@clerk/shared/-/shared-2.5.5.tgz",
+      "integrity": "sha512-hU30nhf7jsMuefkxsNFW5AdQeGZahi43JQ9X+pDk4C52V5Lq4++4tT/gzuTGEo8b9TM7VY0JW8OcsnHdU3wJVA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@clerk/types": "4.16.0",
+        "glob-to-regexp": "0.4.1",
+        "js-cookie": "3.0.5",
+        "std-env": "^3.7.0",
+        "swr": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      },
+      "peerDependencies": {
+        "react": ">=18 || >=19.0.0-beta",
+        "react-dom": ">=18 || >=19.0.0-beta"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@clerk/types": {
+      "version": "4.16.0",
+      "resolved": "https://registry.npmjs.org/@clerk/types/-/types-4.16.0.tgz",
+      "integrity": "sha512-SoE6jFT7UuVtAbA6rSLwAk86VXnJhV2g0+GKQxxa6UFaXIm/s65jLVFpxCDdDZ0RJu2sBrMNfsWQHYyy06nRug==",
+      "dependencies": {
+        "csstype": "3.1.1"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      }
+    },
+    "node_modules/@clerk/types/node_modules/csstype": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -5257,6 +5324,11 @@
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
       "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
     },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
+    },
     "node_modules/clsx": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
@@ -6579,6 +6651,11 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
+    },
     "node_modules/globals": {
       "version": "15.8.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-15.8.0.tgz",
@@ -7212,6 +7289,14 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -7423,9 +7508,9 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
-      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dependencies": {
         "braces": "^3.0.3",
         "picomatch": "^2.3.1"
@@ -8621,6 +8706,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/std-env": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.7.0.tgz",
+      "integrity": "sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg=="
+    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -8886,6 +8976,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swr": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-2.2.5.tgz",
+      "integrity": "sha512-QtxqyclFeAsxEUeZIYmsaQ0UjimSq1RZ9Un7I68/0ClKK/U3LoyQunwkQfJZr2fc22DfIXLNDc2wFyTEikCUpg==",
+      "dependencies": {
+        "client-only": "^0.0.1",
+        "use-sync-external-store": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/synckit": {
       "version": "0.9.1",
       "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.1.tgz",
@@ -9270,6 +9372,14 @@
         }
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
+      "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index 5e86baa8..451f1794 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@clerk/clerk-react": "^5.4.5",
     "@nextui-org/react": "^2.4.6",
     "@visx/axis": "^3.10.1",
     "@visx/curve": "^3.3.0",
diff --git a/src/App.jsx b/src/App.jsx
index 0344c14d..2f36fe17 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -7,6 +7,7 @@ import {
 } from 'react-router-dom';
 import AVSDetails from './avs/AVSDetails';
 import AVSList from './avs/AVSList';
+import { ClerkProvider } from '@clerk/clerk-react';
 import Home from './home/Home';
 import Layout from './shared/Layout';
 import log from './shared/logger';
@@ -40,9 +41,14 @@ export default function App() {
   return (
     <NextUIProvider navigate={router.navigate}>
       <ThemeProvider>
-        <ServiceProvider>
-          <RouterProvider router={router} />
-        </ServiceProvider>
+        <ClerkProvider
+          afterSignOutUrl="/"
+          publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY}
+        >
+          <ServiceProvider>
+            <RouterProvider router={router} />
+          </ServiceProvider>
+        </ClerkProvider>
       </ThemeProvider>
     </NextUIProvider>
   );
diff --git a/src/shared/Sidebar.jsx b/src/shared/Sidebar.jsx
index a3180e71..ace51d44 100644
--- a/src/shared/Sidebar.jsx
+++ b/src/shared/Sidebar.jsx
@@ -1,16 +1,28 @@
-import { Link } from '@nextui-org/react';
+import {
+  Button,
+  Dropdown,
+  DropdownItem,
+  DropdownMenu,
+  DropdownSection,
+  DropdownTrigger,
+  Image,
+  Link
+} from '@nextui-org/react';
+import { SignedIn, SignedOut, useClerk, useUser } from '@clerk/clerk-react';
+import { useLocation, useNavigate } from 'react-router-dom';
 import RestakingLogo from './ResatkingLogo';
-import { useLocation } from 'react-router-dom';
+import { useCallback } from 'react';
 
 export default function Sidebar({ onOpenChange }) {
   const location = useLocation();
+  const clerk = useClerk();
 
   return (
-    <div>
-      <header className="flex-none border-l-4 border-transparent px-5 pb-8 pt-6">
+    <header className="flex h-full flex-col">
+      <div className="basis-0 border-l-4 border-transparent px-5 pb-8 pt-6">
         <RestakingLogo />
-      </header>
-      <nav className="flex-none">
+      </div>
+      <nav className="basis-full">
         {navItems.map((item, i) => {
           const selected = new RegExp(`(^|/)${item.href}(/|$)`).test(
             location.pathname
@@ -34,8 +46,113 @@ export default function Sidebar({ onOpenChange }) {
           );
         })}
       </nav>
+      <div className="basis-0 px-5 pb-5">
+        <SignedOut>
+          <Button
+            className="hover:!text-content1"
+            color="primary"
+            fullWidth
+            onClick={() => clerk.redirectToSignIn()}
+            radius="sm"
+            variant="ghost"
+          >
+            Sign in
+          </Button>
+        </SignedOut>
+        <SignedIn>
+          <UserMenu />
+        </SignedIn>
+      </div>
       {/* <Settings /> */}
-    </div>
+    </header>
+  );
+}
+
+function UserMenu() {
+  const clerk = useClerk();
+  const navigate = useNavigate();
+  const { user } = useUser();
+
+
+  const handleAccountAction = useCallback(
+    key => {
+      switch (key) {
+        case 'account':
+          clerk.openUserProfile();
+          break;
+
+        case 'subscriptions':
+          navigate('/subscriptions');
+          break;
+
+        case 'signout':
+          clerk.signOut();
+          break;
+      }
+    },
+    [clerk, navigate]
+  );
+
+  return (
+    <Dropdown className="border border-outline shadow-none">
+      <DropdownTrigger>
+        <Button
+          className="flex"
+          color="default"
+          fullWidth
+          size="md"
+          startContent={
+            <Image
+              className="min-w-5"
+              height={20}
+              src={user?.imageUrl}
+              width={20}
+            />
+          }
+          variant="light"
+        >
+          <span className="overflow-hidden text-ellipsis">
+            {user?.fullName ||
+              user?.username ||
+              user?.primaryEmailAddress?.emailAddress}
+          </span>
+        </Button>
+      </DropdownTrigger>
+      <DropdownMenu
+        aria-label="theme"
+        onAction={handleAccountAction}
+        selectionMode="none"
+      >
+        <DropdownSection classNames={{ divider: 'bg-outline' }} showDivider>
+          <DropdownItem
+            key="subscriptions"
+            startContent={
+              <span className="material-symbols-outlined">subscriptions</span>
+            }
+          >
+            Subscriptions
+          </DropdownItem>
+          <DropdownItem
+            key="account"
+            startContent={
+              <span className="material-symbols-outlined text-foreground">
+                manage_accounts
+              </span>
+            }
+          >
+            Manage account
+          </DropdownItem>
+        </DropdownSection>
+        <DropdownItem
+          key="signout"
+          startContent={
+            <span className="material-symbols-outlined">logout</span>
+          }
+        >
+          Sign out
+        </DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
   );
 }