feat: integrate Clerk for authentication and add faucet functionality

Author: ErwanDecoster

package-lock.json

@@ -18,6 +18,7 @@
     "watch:codegen:poco": "graphql-codegen --config codegenPoco.ts --watch"
   },
   "dependencies": {
+    "@clerk/clerk-react": "^5.51.0",
     "@fontsource-variable/anybody": "^5.2.6",
     "@fontsource-variable/mulish": "^5.2.6",
     "@fontsource/space-mono": "^5.2.8",

package.json

@@ -26,6 +26,9 @@ export function Navbar() {
       <div className="mr-8 flex items-center gap-4 md:mr-0">
         {isConnected && (
           <div className="hidden md:flex">
+            <Button variant="link" asChild className="text-foreground">
+              <ChainLink to="/faucet">Faucet</ChainLink>
+            </Button>
             <Button variant="link" asChild className="text-foreground">
               <ChainLink to={`/address/${userAddress}?from=my_activity`}>
                 My activity

src/components/navbar/NavBar.tsx

@@ -12,6 +12,7 @@ export const TABLE_REFETCH_INTERVAL = 10_000;
 
 export const IPFS_GATEWAY_URL = 'https://ipfs.iex.ec';
 export const API_COINGECKO_URL = 'https://api.coingecko.com/api/v3/simple/';
+export const FAUCET_API_URL = 'https://dev-rlc-faucet.iex.ec';
 
 export const SUPPORTED_CHAINS = [
   {

src/config.ts

@@ -1,3 +1,4 @@
+import { ClerkProvider } from '@clerk/clerk-react';
 import '@fontsource-variable/anybody/wdth.css';
 import '@fontsource-variable/mulish/index.css';
 import {
@@ -24,8 +25,12 @@ const { rollbar, rollbarConfig } = initRollbarAlerting();
 const queryClient = initQueryClient({ rollbar });
 
 const router = initRouter(queryClient);
-
 const rootElement = document.getElementById('root')!;
+const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
+
+if (!PUBLISHABLE_KEY) {
+  throw new Error('Add your Clerk Publishable Key to the .env file');
+}
 if (!rootElement.innerHTML) {
   const root = createRoot(rootElement);
   root.render(
@@ -37,7 +42,9 @@ if (!rootElement.innerHTML) {
           >
             <RollbarErrorBoundary>
               <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
-                <RouterProvider router={router} />
+                <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
+                  <RouterProvider router={router} />
+                </ClerkProvider>
               </ThemeProvider>
             </RollbarErrorBoundary>
           </RollbarProvider>

src/main.tsx

@@ -0,0 +1,27 @@
+import { ChainLink } from '@/components/ChainLink';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
+
+export function FaucetBreadcrumbs() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <ChainLink to="/">Homepage</ChainLink>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Faucets</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}

src/modules/faucet/FaucetBreadcrumbs.tsx

@@ -16,6 +16,7 @@ import { Route as ChainSlugLayoutRouteImport } from './routes/$chainSlug/_layout
 import { Route as ChainSlugLayoutIndexRouteImport } from './routes/$chainSlug/_layout/index'
 import { Route as ChainSlugLayoutWorkerpoolsRouteImport } from './routes/$chainSlug/_layout/workerpools'
 import { Route as ChainSlugLayoutTasksRouteImport } from './routes/$chainSlug/_layout/tasks'
+import { Route as ChainSlugLayoutFaucetRouteImport } from './routes/$chainSlug/_layout/faucet'
 import { Route as ChainSlugLayoutDealsRouteImport } from './routes/$chainSlug/_layout/deals'
 import { Route as ChainSlugLayoutDatasetsRouteImport } from './routes/$chainSlug/_layout/datasets'
 import { Route as ChainSlugLayoutAppsRouteImport } from './routes/$chainSlug/_layout/apps'
@@ -62,6 +63,11 @@ const ChainSlugLayoutTasksRoute = ChainSlugLayoutTasksRouteImport.update({
   path: '/tasks',
   getParentRoute: () => ChainSlugLayoutRoute,
 } as any)
+const ChainSlugLayoutFaucetRoute = ChainSlugLayoutFaucetRouteImport.update({
+  id: '/faucet',
+  path: '/faucet',
+  getParentRoute: () => ChainSlugLayoutRoute,
+} as any)
 const ChainSlugLayoutDealsRoute = ChainSlugLayoutDealsRouteImport.update({
   id: '/deals',
   path: '/deals',
@@ -143,6 +149,7 @@ export interface FileRoutesByFullPath {
   '/$chainSlug/apps': typeof ChainSlugLayoutAppsRoute
   '/$chainSlug/datasets': typeof ChainSlugLayoutDatasetsRoute
   '/$chainSlug/deals': typeof ChainSlugLayoutDealsRoute
+  '/$chainSlug/faucet': typeof ChainSlugLayoutFaucetRoute
   '/$chainSlug/tasks': typeof ChainSlugLayoutTasksRoute
   '/$chainSlug/workerpools': typeof ChainSlugLayoutWorkerpoolsRoute
   '/$chainSlug/': typeof ChainSlugLayoutIndexRoute
@@ -163,6 +170,7 @@ export interface FileRoutesByTo {
   '/$chainSlug/apps': typeof ChainSlugLayoutAppsRoute
   '/$chainSlug/datasets': typeof ChainSlugLayoutDatasetsRoute
   '/$chainSlug/deals': typeof ChainSlugLayoutDealsRoute
+  '/$chainSlug/faucet': typeof ChainSlugLayoutFaucetRoute
   '/$chainSlug/tasks': typeof ChainSlugLayoutTasksRoute
   '/$chainSlug/workerpools': typeof ChainSlugLayoutWorkerpoolsRoute
   '/$chainSlug/address/$addressAddress': typeof ChainSlugLayoutAddressAddressAddressRoute
@@ -184,6 +192,7 @@ export interface FileRoutesById {
   '/$chainSlug/_layout/apps': typeof ChainSlugLayoutAppsRoute
   '/$chainSlug/_layout/datasets': typeof ChainSlugLayoutDatasetsRoute
   '/$chainSlug/_layout/deals': typeof ChainSlugLayoutDealsRoute
+  '/$chainSlug/_layout/faucet': typeof ChainSlugLayoutFaucetRoute
   '/$chainSlug/_layout/tasks': typeof ChainSlugLayoutTasksRoute
   '/$chainSlug/_layout/workerpools': typeof ChainSlugLayoutWorkerpoolsRoute
   '/$chainSlug/_layout/': typeof ChainSlugLayoutIndexRoute
@@ -206,6 +215,7 @@ export interface FileRouteTypes {
     | '/$chainSlug/apps'
     | '/$chainSlug/datasets'
     | '/$chainSlug/deals'
+    | '/$chainSlug/faucet'
     | '/$chainSlug/tasks'
     | '/$chainSlug/workerpools'
     | '/$chainSlug/'
@@ -226,6 +236,7 @@ export interface FileRouteTypes {
     | '/$chainSlug/apps'
     | '/$chainSlug/datasets'
     | '/$chainSlug/deals'
+    | '/$chainSlug/faucet'
     | '/$chainSlug/tasks'
     | '/$chainSlug/workerpools'
     | '/$chainSlug/address/$addressAddress'
@@ -246,6 +257,7 @@ export interface FileRouteTypes {
     | '/$chainSlug/_layout/apps'
     | '/$chainSlug/_layout/datasets'
     | '/$chainSlug/_layout/deals'
+    | '/$chainSlug/_layout/faucet'
     | '/$chainSlug/_layout/tasks'
     | '/$chainSlug/_layout/workerpools'
     | '/$chainSlug/_layout/'
@@ -308,6 +320,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ChainSlugLayoutTasksRouteImport
       parentRoute: typeof ChainSlugLayoutRoute
     }
+    '/$chainSlug/_layout/faucet': {
+      id: '/$chainSlug/_layout/faucet'
+      path: '/faucet'
+      fullPath: '/$chainSlug/faucet'
+      preLoaderRoute: typeof ChainSlugLayoutFaucetRouteImport
+      parentRoute: typeof ChainSlugLayoutRoute
+    }
     '/$chainSlug/_layout/deals': {
       id: '/$chainSlug/_layout/deals'
       path: '/deals'
@@ -408,6 +427,7 @@ interface ChainSlugLayoutRouteChildren {
   ChainSlugLayoutAppsRoute: typeof ChainSlugLayoutAppsRoute
   ChainSlugLayoutDatasetsRoute: typeof ChainSlugLayoutDatasetsRoute
   ChainSlugLayoutDealsRoute: typeof ChainSlugLayoutDealsRoute
+  ChainSlugLayoutFaucetRoute: typeof ChainSlugLayoutFaucetRoute
   ChainSlugLayoutTasksRoute: typeof ChainSlugLayoutTasksRoute
   ChainSlugLayoutWorkerpoolsRoute: typeof ChainSlugLayoutWorkerpoolsRoute
   ChainSlugLayoutIndexRoute: typeof ChainSlugLayoutIndexRoute
@@ -427,6 +447,7 @@ const ChainSlugLayoutRouteChildren: ChainSlugLayoutRouteChildren = {
   ChainSlugLayoutAppsRoute: ChainSlugLayoutAppsRoute,
   ChainSlugLayoutDatasetsRoute: ChainSlugLayoutDatasetsRoute,
   ChainSlugLayoutDealsRoute: ChainSlugLayoutDealsRoute,
+  ChainSlugLayoutFaucetRoute: ChainSlugLayoutFaucetRoute,
   ChainSlugLayoutTasksRoute: ChainSlugLayoutTasksRoute,
   ChainSlugLayoutWorkerpoolsRoute: ChainSlugLayoutWorkerpoolsRoute,
   ChainSlugLayoutIndexRoute: ChainSlugLayoutIndexRoute,