feature: add faucet with Clerk authentication (#84)

* chore: update react and react-dom to version 19.2.0

* chore: remove .env file containing sensitive configuration

* feat: add example environment configuration file

* feat: integrate Clerk for authentication and add faucet functionality

* feat: update Navbar and Faucet components for improved user experience

* fix: ensure signOut is called only when user is signed in

* fix: add missing semicolons for consistency in useLoginLogout hook

* feat: integrate useWatchAsset hook to add asset in wallet manager

* fix: update import path for useWatchAsset hook to ensure correct functionality

* feat: enhance Faucet component with dynamic block explorer URL and improved success message styling

* feat: add nrlcToRlc utility function and update success message in FaucetRoute

* fix: reorder import statements for consistency in FaucetRoute component

* fix: update FAUCET_API_URL to use environment variable and add faucet api URL in .env.example

* chore: add comment header for development environment in .env.example

* feat: update faucet success explorer link

Co-authored-by: Robin Le Caignec <[email protected]>

* fix: clarify fund request message to specify RLC for Arbitrum Sepolia

---------

Co-authored-by: Robin Le Caignec <[email protected]>

Author: ErwanDecoster

.env .env.example.env renamed to .env.example

@@ -1,3 +1,11 @@
+# dev
+
 VITE_POCO_SUBGRAPH_URL="https://thegraph.iex.ec/subgraphs/name/bellecour/poco-v5"
 VITE_DATAPROTECTOR_SUBGRAPH_URL="https://thegraph.iex.ec/subgraphs/name/bellecour/dataprotector-v2"
-VITE_REOWN_PROJECT_ID=b89f75687c01fa0df9e68c903283012d
+VITE_REOWN_PROJECT_ID=
+VITE_CLERK_PUBLISHABLE_KEY=
+VITE_FAUCET_API_URL = 'https://dev-rlc-faucet.iex.ec'
+
+# prod 
+
+VITE_FAUCET_API_URL = 'https://rlc-faucet.iex.ec'

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",
@@ -48,8 +49,8 @@
     "iexec": "^8.18.0",
     "lucide-react": "^0.536.0",
     "prettier-plugin-tailwindcss": "^0.6.14",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "react-hook-form": "^7.62.0",
     "rollbar": "^2.26.4",
     "tailwind-merge": "^3.3.1",

package.json

@@ -24,8 +24,11 @@ export function Navbar() {
         <span className="hidden lg:block">iExec Explorer</span>
       </ChainLink>
       <div className="mr-8 flex items-center gap-4 md:mr-0">
+        <Button variant="link" asChild className="text-foreground -mr-4">
+          <ChainLink to="/faucet">Faucet</ChainLink>
+        </Button>
         {isConnected && (
-          <div className="hidden md:flex">
+          <div className="-mr-4 hidden md:flex">
             <Button variant="link" asChild className="text-foreground">
               <ChainLink to={`/address/${userAddress}?from=my_activity`}>
                 My activity
@@ -34,9 +37,9 @@ export function Navbar() {
             <Button variant="link" asChild className="text-foreground">
               <ChainLink to="/account">iExec Account</ChainLink>
             </Button>
-            <span className="border-secondary border-l" />
           </div>
         )}
+        <span className="border-secondary h-9 border-l" />
         <div className="content hidden gap-4 md:flex">
           <ModeToggle />
           <ChainSelector />

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 = import.meta.env.VITE_FAUCET_API_URL;
 
 export const SUPPORTED_CHAINS = [
   {

src/config.ts

@@ -1,11 +1,16 @@
+import { useAuth } from '@clerk/clerk-react';
 import { useAppKit } from '@reown/appkit/react';
 import { useDisconnect } from 'wagmi';
 
 export function useLoginLogout() {
   const { open } = useAppKit();
   const { disconnectAsync } = useDisconnect();
+  const { signOut, isSignedIn } = useAuth();
 
   const logout = async () => {
+    if (isSignedIn) {
+      signOut();
+    }
     try {
       await disconnectAsync();
     } catch (err) {

src/hooks/useLoginLogout.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>
+  );
+}