Replace WalletConnect with Google and GitHub authentication

.gitignore

@@ -37,3 +37,5 @@ next-env.d.ts
 .zip
 .gz
 .pack.gz
+
+apigee_key.json

app/(dashboard)/dashboard/layout.tsx

@@ -8,7 +8,6 @@ import { siteConfig } from "@/config/site"
 import { getUser } from "@/lib/app/user-profile"
 import { getSession } from "@/lib/session"
 
-import { WalletConnect } from "@/components/blockchain/wallet-connect"
 import { LoggedUser } from "@/components/layout/logged-user"
 import { SidebarNav } from "@/components/layout/sidebar-nav"
 import { SiteHeader } from "@/components/layout/site-header"
@@ -23,12 +22,16 @@ export default async function DashboardLayout({
 }: DashboardLayoutProps) {
   const session = await getSession()
 
-  if (!session || !session.user) {
+  if (!session?.user) {
     redirect("/")
   }
 
   const user = await getUser(session.user.id)
 
+  if (!user) {
+    redirect("/")
+  }
+
   return (
     <div className="relative flex min-h-screen flex-col">
       <SiteHeader />
@@ -69,9 +72,6 @@ export default async function DashboardLayout({
         </aside>
         <main className="flex w-full flex-col overflow-hidden">{children}</main>
       </div>
-      <div className="fixed bottom-6 right-6">
-        <WalletConnect />
-      </div>
     </div>
   )
 }

app/(dashboard)/dashboard/page.tsx

@@ -1,52 +1,117 @@
+import { Suspense } from "react"
+import Link from "next/link"
 import { redirect } from "next/navigation"
+import { User } from "next-auth"
 
+import { getCurrentSubscription } from "@/lib/app/actions"
 import { getApiKeys } from "@/lib/app/api-key"
 import { getUser } from "@/lib/app/user-profile"
 import { getSession } from "@/lib/session"
 
 import { DashboardGenerateAPIkeysDialog } from "@/components/app/dashboard-generate-apikeys-dialog"
 import { DashboardTableAPIKeys } from "@/components/app/dashboard-table-apikeys"
+import { Button } from "@/components/ui/button"
 import { Card, CardContent } from "@/components/ui/card"
 import { PageHeader } from "@/components/ui/page-header"
 
-import { IsSignedIn } from "@/integrations/siwe/components/is-signed-in"
-import { IsSignedOut } from "@/integrations/siwe/components/is-signed-out"
+// Always revalidate the page to get the latest user data in case of an update
+export const revalidate = 0
+
+const planToApiKeyLimit: Record<number, number> = {
+  0: 0, // Free
+  1: 3, // Basic Monthly
+  2: 3, // Basic Bi-Annually
+  3: 3, // Basic Annually
+  4: 5, // Pro Monthly
+  5: 5, // Pro Bi-Annually
+  6: 5, // Pro Annually
+  7: 25, // Enterprise
+}
+
+async function APIKeysTable({
+  user,
+  apiKeyLimit,
+}: {
+  user: User
+  apiKeyLimit: number
+}) {
+  const apiKeys = await getApiKeys(user.id) // This will be fresh on each render
+
+  return (
+    <DashboardTableAPIKeys
+      apiKeys={apiKeys}
+      user={user}
+      apiKeyLimit={apiKeyLimit}
+    />
+  )
+}
 
 export default async function PageDashboardApiKeys() {
   const session = await getSession()
 
-  if (!session || !session.user) {
+  if (!session?.user) {
     redirect("/")
   }
 
-  const apiKeys = await getApiKeys(session.user.id)
+  // Get user from database
   const user = await getUser(session.user.id)
+  const subscription = await getCurrentSubscription(user.id)
+  const isFreeTier = subscription.planId === 0
+  const apiKeyLimit = planToApiKeyLimit[subscription.planId]
+
+  if (!user) {
+    redirect("/")
+  }
+
+  if (!user.email) {
+    redirect("/dashboard/profile")
+  }
+
+  // Get API keys for the user
+  const apiKeys = await getApiKeys(user.id)
 
   return (
     <section className="w-full py-2 sm:p-10">
-      <div>
-        <PageHeader title="API Keys" description="Manage your API keys." />
-        <IsSignedOut>
-          <div className="flex items-center justify-between gap-x-5 text-center">
-            <span className="text-sm">
-              Authenticate to access your api keys.
-            </span>
+      {isFreeTier ? (
+        <div className="rounded-lg border border-neutral-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md dark:border-neutral-800 dark:bg-neutral-900">
+          <div className="flex flex-col gap-4">
+            <h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
+              Unlock WalletLabels API Access
+            </h3>
+            <p className="text-sm text-neutral-600 dark:text-neutral-400">
+              You’re currently on a free plan. To utilize the WalletLabels API
+              and access advanced features, you’ll need to subscribe to one of
+              our plans. Choose the plan that fits your needs and start
+              leveraging powerful tools to analyze and categorize blockchain
+              wallets.
+            </p>
+            <Link href="/dashboard/subscription">
+              <Button className="w-full rounded-lg bg-secondary-foreground px-6 py-2 text-center font-semibold text-background transition-colors sm:w-auto">
+                Explore Plans
+              </Button>
+            </Link>
+          </div>
+        </div>
+      ) : (
+        <>
+          <div>
+            <PageHeader title="API Keys" description="Manage your API keys." />
           </div>
-        </IsSignedOut>
-      </div>
-      <hr className="my-5 opacity-50" />
-      <IsSignedIn>
-        <Card className="w-full p-6">
-          <CardContent>
-            <DashboardGenerateAPIkeysDialog
-              user={user}
-              apiKeysCount={apiKeys.length}
-            />
-          </CardContent>
-
-          <DashboardTableAPIKeys apiKeys={apiKeys} />
-        </Card>
-      </IsSignedIn>
+          <hr className="my-5 opacity-50" />
+          <Card className="w-full p-6">
+            <CardContent>
+              <DashboardGenerateAPIkeysDialog
+                user={user}
+                apiKeysCount={apiKeys.length}
+                apiKeyLimit={apiKeyLimit}
+              />
+              <Suspense fallback={<div>Loading...</div>}>
+                <APIKeysTable user={user} apiKeyLimit={apiKeyLimit} />
+              </Suspense>
+            </CardContent>
+          </Card>
+        </>
+      )}
     </section>
   )
 }

app/(dashboard)/dashboard/profile/page.tsx

@@ -7,37 +7,31 @@ import { AppAccountForm } from "@/components/app/app-account-form"
 import { Card } from "@/components/ui/card"
 import { PageHeader } from "@/components/ui/page-header"
 
-import { ButtonSIWELogin } from "@/integrations/siwe/components/button-siwe-login"
-import { IsSignedIn } from "@/integrations/siwe/components/is-signed-in"
-import { IsSignedOut } from "@/integrations/siwe/components/is-signed-out"
-
 export default async function PageDashboardAccount() {
   const session = await getSession()
 
-  if (!session || !session.user) {
+  if (!session?.user) {
     redirect("/")
   }
 
   const user = await getUser(session.user.id)
 
+  if (!user) {
+    redirect("/")
+  }
+
   return (
     <section className="w-full py-4 sm:p-10">
       <PageHeader
         title="Account"
         description="Manage your account information"
       />
       <div className="h-4" />
-      <IsSignedIn>
-        <Card className="w-full p-6">
-          <h3 className="text-2xl font-semibold">Profile</h3>
-          <hr className="my-3 dark:opacity-30" />
-
-          <AppAccountForm user={user} />
-        </Card>
-      </IsSignedIn>
-      <IsSignedOut>
-        <ButtonSIWELogin />
-      </IsSignedOut>
+      <Card className="w-full p-6">
+        <h3 className="text-2xl font-semibold">Profile</h3>
+        <hr className="my-3 dark:opacity-30" />
+        <AppAccountForm user={user} />
+      </Card>
     </section>
   )
 }

app/(dashboard)/dashboard/submit/page.tsx

@@ -1,4 +1,3 @@
-import React from "react"
 import { redirect } from "next/navigation"
 
 import { getUser } from "@/lib/app/user-profile"
@@ -8,38 +7,34 @@ import { DashboardSubmitLabel } from "@/components/app/dashboard-submit-label"
 import { Card, CardContent, CardHeader } from "@/components/ui/card"
 import { PageHeader } from "@/components/ui/page-header"
 
-import { ButtonSIWELogin } from "@/integrations/siwe/components/button-siwe-login"
-import { IsSignedIn } from "@/integrations/siwe/components/is-signed-in"
-import { IsSignedOut } from "@/integrations/siwe/components/is-signed-out"
-
 export default async function SubmitPage() {
   const session = await getSession()
 
-  if (!session || !session.user) {
+  if (!session?.user) {
     redirect("/")
   }
 
-  const user = await getUser(session.user.id)
+  // Get user from database using email
+  const user = await getUser(session.user.id!)
+
+  if (!user) {
+    redirect("/")
+  }
 
   return (
     <section className="w-full py-4">
       <div className="h-4" />
-      <IsSignedIn>
-        <Card className="w-full">
-          <CardHeader>
-            <PageHeader
-              title="Submit"
-              description="Contribute new labels and get rewarded!"
-            />
-          </CardHeader>
-          <CardContent>
-            <DashboardSubmitLabel userId={user.id} />
-          </CardContent>
-        </Card>
-      </IsSignedIn>
-      <IsSignedOut>
-        <ButtonSIWELogin />
-      </IsSignedOut>
+      <Card className="w-full">
+        <CardHeader>
+          <PageHeader
+            title="Submit"
+            description="Contribute new labels and get rewarded!"
+          />
+        </CardHeader>
+        <CardContent>
+          <DashboardSubmitLabel userId={user.email} />
+        </CardContent>
+      </Card>
     </section>
   )
 }

app/(general)/layout.tsx

@@ -1,17 +1,21 @@
+"use client"
+
 import { ReactNode } from "react"
+import { signIn, useSession } from "next-auth/react"
 
-import { NetworkStatus } from "@/components/blockchain/network-status"
-import { WalletConnect } from "@/components/blockchain/wallet-connect"
+// import { NetworkStatus } from "@/components/blockchain/network-status"
 import { Footer } from "@/components/layout/footer"
 import { SiteHeader } from "@/components/layout/site-header"
 import { FramerWrapper } from "@/components/providers/framer-wrapper"
 import { Opensource } from "@/components/shared/opensource"
 
 interface RootLayoutProps {
-  children: ReactNode
+  children: React.ReactNode
 }
 
 export default function RootLayout({ children }: RootLayoutProps) {
+  const { data: session } = useSession()
+
   return (
     <FramerWrapper>
       <div className="relative flex min-h-screen flex-col">
@@ -20,9 +24,18 @@ export default function RootLayout({ children }: RootLayoutProps) {
         <Opensource />
         <Footer />
       </div>
-      <NetworkStatus />
+      {/* <NetworkStatus /> */}
       <div className="fixed bottom-6 right-6 z-50 block sm:hidden">
-        <WalletConnect />
+        {!session ? (
+          <button
+            onClick={() => signIn()}
+            className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground"
+          >
+            Sign in
+          </button>
+        ) : (
+          <p>Welcome, {session.user.name}</p>
+        )}
       </div>
     </FramerWrapper>
   )