chainable-dev · khaosans · Nov 23, 2024 · Nov 23, 2024 · Nov 23, 2024 · Nov 23, 2024
diff --git a/.env.example b/.env.example
@@ -1,31 +1,31 @@
-# OpenAI Configuration
+# Get your OpenAI API Key here: https://platform.openai.com/account/api-keys
 OPENAI_API_KEY=your_openai_api_key_here
-NEXT_PUBLIC_OPENAI_API_KEY=your_openai_api_key_here
 
-# Supabase Configuration
 NEXT_PUBLIC_SUPABASE_URL=your_supabase_url_here
 NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key_here
-SUPABASE_SERVICE_ROLE_KEY=your_service_role_key_here
 
-# Vercel Blob Storage
 BLOB_READ_WRITE_TOKEN=your_blob_token_here
 
-# Coinbase Developer Platform
+# See https://www.coinbase.com/developer-platform/products/base-node
 NEXT_PUBLIC_CDP_API_KEY=your_cdp_api_key_here
-NEXT_PUBLIC_CDP_API_KEY_NAME=your_cdp_key_name_here
-NEXT_PUBLIC_CDP_API_KEY_PRIVATE_KEY=your_cdp_private_key_here
+
+NEXT_PUBLIC_OPENAI_API_KEY=your_openai_api_key_here
 
 # Environment
 NEXT_PUBLIC_ENVIRONMENT=localhost
 NEXT_PUBLIC_SITE_URL=http://localhost:3000
 
-# WalletConnect
+# See https://cloud.walletconnect.com/
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=your_wallet_connect_project_id_here
 
+# CDP Configuration
+NEXT_PUBLIC_CDP_API_KEY_NAME=your_cdp_api_key_name_here
+NEXT_PUBLIC_CDP_API_KEY_PRIVATE_KEY=your_cdp_private_key_here
+
 # Vercel KV (Redis) Configuration
 KV_URL=your_kv_url_here
 KV_REST_API_URL=your_kv_rest_api_url_here
-KV_REST_API_TOKEN=your_kv_api_token_here
+KV_REST_API_TOKEN=your_kv_token_here
 KV_REST_API_READ_ONLY_TOKEN=your_kv_readonly_token_here
 
 # Base Network Configuration
@@ -47,7 +47,20 @@ DEBANK_API_KEY=your_debank_api_key_here
 NEXT_PUBLIC_ALCHEMY_API_KEY=your_alchemy_api_key_here
 BING_API_KEY=your_bing_api_key_here
 DUCKDUCKGO_API_KEY=your_duckduckgo_api_key_here
+SERP_API_KEY=your_serp_api_key_here
+
+# Supabase Service Role
+SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key_here
 
 # Feature Flags
 NEXT_PUBLIC_FEATURE_ATTACHMENTS=true
-NEXT_PUBLIC_FEATURE_WEB_SEARCH=true
+NEXT_PUBLIC_FEATURE_WEB_SEARCH=true
+
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key_here
+CLERK_SECRET_KEY=your_clerk_secret_key_here
+CLERK_JWT_TEMPLATE=supabase
+
+//ad the others
+
+JWKS_URL=https://cute-stallion-6.clerk.accounts.dev/.well-known/jwks.json
+JWT_PUBLIC_KEY=your_jwt_public_key_here
diff --git a/api/websocket.ts b/api/websocket.ts
@@ -0,0 +1,11 @@
+export const createWebSocket = (url: string) => {
+  const ws = new WebSocket(url);
+
+  const send = (data: any) => {
+    if (ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify(data));
+    }
+  };
+
+  return { ws, send };
+};
diff --git a/app/(auth)/auth/callback/route.ts b/app/(auth)/auth/callback/route.ts
@@ -0,0 +1,15 @@
+import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs";
+import { cookies } from "next/headers";
+import { NextResponse } from "next/server";
+
+export async function GET(request: Request) {
+  const requestUrl = new URL(request.url);
+  const code = requestUrl.searchParams.get("code");
+
+  if (code) {
+    const supabase = createRouteHandlerClient({ cookies });
+    await supabase.auth.exchangeCodeForSession(code);
+  }
+
+  return NextResponse.redirect(new URL("/", requestUrl.origin));
+} 
diff --git a/app/(auth)/layout.tsx b/app/(auth)/layout.tsx
@@ -1,34 +1,35 @@
-import { Metadata } from "next";
+"use client";
 
-export const metadata: Metadata = {
-	title: "Chainable",
-	description: "Secure blockchain integration with AI",
-	icons: {
-		icon: [
-			{ url: "/icons/chainable.svg", type: "image/svg+xml", sizes: "any" },
-			{ url: "/icons/chainable-32.png", sizes: "32x32", type: "image/png" },
-			{ url: "/icons/chainable-16.png", sizes: "16x16", type: "image/png" },
-		],
-		apple: [{ url: "/icons/chainable-180.png", sizes: "180x180" }],
-		shortcut: "/icons/favicon.ico",
-	},
-};
+import { ClerkProvider } from "@clerk/nextjs";
+import { dark } from "@clerk/themes";
+import { useTheme } from "next-themes";
 
 export default function AuthLayout({
 	children,
 }: {
 	children: React.ReactNode;
 }) {
+	const { theme } = useTheme();
+
 	return (
-		<html lang="en" suppressHydrationWarning>
-			<head>
-				<link rel="icon" href="/icons/chainable.svg" type="image/svg+xml" />
-				<link rel="alternate icon" href="/icons/favicon.ico" />
-				<link rel="apple-touch-icon" href="/icons/chainable-180.png" />
-			</head>
-			<body className="antialiased" suppressHydrationWarning>
+		<ClerkProvider
+			appearance={{
+				baseTheme: theme === "dark" ? dark : undefined,
+				elements: {
+					card: "bg-background",
+					headerTitle: "text-foreground",
+					headerSubtitle: "text-muted-foreground",
+					socialButtonsBlockButton: "text-foreground",
+					formButtonPrimary: "bg-primary text-primary-foreground hover:bg-primary/90",
+					footerAction: "text-muted-foreground",
+					formFieldLabel: "text-foreground",
+					formFieldInput: "bg-background text-foreground",
+				},
+			}}
+		>
+			<div className="flex min-h-screen items-center justify-center">
 				{children}
-			</body>
-		</html>
+			</div>
+		</ClerkProvider>
 	);
 }
diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx
@@ -1,100 +1,14 @@
 "use client";
 
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { toast } from "sonner";
-import { Loader2 } from "lucide-react";
-
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { signIn } from "@/db/auth";
+import { SignIn } from "@clerk/nextjs";
 
 export default function LoginPage() {
-	const [isLoading, setIsLoading] = useState(false);
-	const [isTransitioning, setIsTransitioning] = useState(false);
-	const router = useRouter();
-
-	async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
-		event.preventDefault();
-		setIsLoading(true);
-
-		try {
-			const formData = new FormData(event.currentTarget);
-			const email = formData.get("email") as string;
-			const password = formData.get("password") as string;
-
-			await signIn(email, password);
-			setIsTransitioning(true);
-			router.push("/");
-			router.refresh();
-		} catch (error: any) {
-			toast.error(error.message);
-			setIsLoading(false);
-		}
-	}
-
-	if (isTransitioning) {
-		return (
-			<div className="fixed inset-0 flex items-center justify-center bg-background">
-				<div className="space-y-4 text-center">
-					<Loader2 className="h-8 w-8 animate-spin" />
-					<p className="text-sm text-muted-foreground">Redirecting...</p>
-				</div>
-			</div>
-		);
-	}
-
-	return (
-		<div className="flex h-[calc(100vh-theme(spacing.16))] items-center justify-center py-10">
-			<div className="w-full max-w-sm space-y-6">
-				<div className="space-y-2 text-center">
-					<h1 className="text-3xl font-bold">Login</h1>
-					<p className="text-gray-500 dark:text-gray-400">
-						Enter your email below to login to your account
-					</p>
-				</div>
-				<form className="space-y-4" onSubmit={handleSubmit}>
-					<div className="space-y-2">
-						<Label htmlFor="email">Email</Label>
-						<Input
-							id="email"
-							name="email"
-							placeholder="m@example.com"
-							required
-							type="email"
-							disabled={isLoading}
-						/>
-					</div>
-					<div className="space-y-2">
-						<Label htmlFor="password">Password</Label>
-						<Input
-							id="password"
-							name="password"
-							required
-							type="password"
-							disabled={isLoading}
-						/>
-					</div>
-					<Button className="w-full" disabled={isLoading}>
-						{isLoading ? (
-							<>
-								<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-								Signing in...
-							</>
-						) : (
-							"Sign in"
-						)}
-					</Button>
-				</form>
-				<div className="text-center text-sm">
-					Don&apos;t have an account?{" "}
-					<Link className="underline" href="/register">
-						Register
-					</Link>
-				</div>
-			</div>
-		</div>
-	);
+  return (
+    <SignIn 
+      path="/login"
+      routing="path"
+      signUpUrl="/register"
+      afterSignInUrl="/"
+    />
+  );
 }
diff --git a/app/(auth)/metadata.ts b/app/(auth)/metadata.ts
@@ -0,0 +1,15 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Chainable",
+  description: "Secure blockchain integration with AI",
+  icons: {
+    icon: [
+      { url: "/icons/chainable.svg", type: "image/svg+xml", sizes: "any" },
+      { url: "/icons/chainable-32.png", sizes: "32x32", type: "image/png" },
+      { url: "/icons/chainable-16.png", sizes: "16x16", type: "image/png" },
+    ],
+    apple: [{ url: "/icons/chainable-180.png", sizes: "180x180" }],
+    shortcut: "/icons/favicon.ico",
+  },
+}; 
diff --git a/app/(auth)/register/page.tsx b/app/(auth)/register/page.tsx
@@ -1,73 +1,14 @@
 "use client";
 
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { toast } from "sonner";
-
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { signUp } from "@/db/auth";
+import { SignUp } from "@clerk/nextjs";
 
 export default function RegisterPage() {
-	const [isLoading, setIsLoading] = useState(false);
-	const router = useRouter();
-
-	async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
-		event.preventDefault();
-		setIsLoading(true);
-
-		try {
-			const formData = new FormData(event.currentTarget);
-			const email = formData.get("email") as string;
-			const password = formData.get("password") as string;
-
-			await signUp(email, password);
-			toast.success("Check your email to confirm your account");
-			router.push("/login");
-		} catch (error: any) {
-			toast.error(error.message);
-		} finally {
-			setIsLoading(false);
-		}
-	}
-
-	return (
-		<div className="flex h-[calc(100vh-theme(spacing.16))] items-center justify-center py-10">
-			<div className="w-full max-w-sm space-y-6">
-				<div className="space-y-2 text-center">
-					<h1 className="text-3xl font-bold">Register</h1>
-					<p className="text-gray-500 dark:text-gray-400">
-						Enter your information to create an account
-					</p>
-				</div>
-				<form className="space-y-4" onSubmit={handleSubmit}>
-					<div className="space-y-2">
-						<Label htmlFor="email">Email</Label>
-						<Input
-							id="email"
-							name="email"
-							placeholder="m@example.com"
-							required
-							type="email"
-						/>
-					</div>
-					<div className="space-y-2">
-						<Label htmlFor="password">Password</Label>
-						<Input id="password" name="password" required type="password" />
-					</div>
-					<Button className="w-full" disabled={isLoading}>
-						{isLoading ? "Loading..." : "Register"}
-					</Button>
-				</form>
-				<div className="text-center text-sm">
-					Already have an account?{" "}
-					<Link className="underline" href="/login">
-						Login
-					</Link>
-				</div>
-			</div>
-		</div>
-	);
+  return (
+    <SignUp
+      path="/register"
+      routing="path"
+      signInUrl="/login"
+      afterSignUpUrl="/"
+    />
+  );
 }
diff --git a/app/(auth)/sign-in/page.tsx b/app/(auth)/sign-in/page.tsx
@@ -0,0 +1 @@
+