diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 6bf8cf6f..ad3815fd 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -21,6 +21,7 @@ import { AnimatePresence, motion } from "motion/react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { useCallback, useEffect, useMemo, useState } from "react"
+import { useReferralTracking } from "@lib/use-referral-tracking"
import type { z } from "zod"
import { ConnectAIModal } from "@/components/connect-ai-modal"
import { InstallPrompt } from "@/components/install-prompt"
@@ -744,6 +745,9 @@ export default function Page() {
const router = useRouter()
const { user } = useAuth()
+ // Track referral if present
+ useReferralTracking(user)
+
useEffect(() => {
// save the token for chrome extension
const url = new URL(window.location.href)
diff --git a/apps/web/app/ref/[code]/page.tsx b/apps/web/app/ref/[code]/page.tsx
index 98afcfe5..8d7bc6fe 100644
--- a/apps/web/app/ref/[code]/page.tsx
+++ b/apps/web/app/ref/[code]/page.tsx
@@ -1,156 +1,87 @@
-"use client";
+"use client"
-import { $fetch } from "@lib/api";
-import { Button } from "@ui/components/button";
+import { $fetch } from "@repo/lib/api"
+import { useQuery } from "@tanstack/react-query"
+import { Button } from "@ui/components/button"
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
-} from "@ui/components/card";
-import { CheckIcon, CopyIcon, LoaderIcon, ShareIcon } from "lucide-react";
-import Link from "next/link";
-import { useParams, useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-import { toast } from "sonner";
+} from "@ui/components/card"
+import { Avatar, AvatarFallback, AvatarImage } from "@ui/components/avatar"
+import { ShareIcon, LoaderIcon } from "lucide-react"
+import Link from "next/link"
+import { useParams } from "next/navigation"
-export default function ReferralPage() {
- const router = useRouter();
- const params = useParams();
- const referralCode = params.code as string;
+export default function ReferralInvitePage() {
+ const params = useParams()
+ const code = params.code as string
- const [isLoading, setIsLoading] = useState(true);
- const [referralData, setReferralData] = useState<{
- referrerName?: string;
- valid: boolean;
- } | null>(null);
- const [copiedLink, setCopiedLink] = useState(false);
-
- const referralLink = `https://supermemory.ai/ref/${referralCode}`;
-
- // Verify referral code and get referrer info
- useEffect(() => {
- async function checkReferral() {
- if (!referralCode) {
- setIsLoading(false);
- return;
+ const {
+ data: referrerData,
+ isLoading,
+ error,
+ } = useQuery({
+ queryKey: ["referral", code],
+ queryFn: async () => {
+ if (!code) {
+ throw new Error("Missing referral code")
}
- try {
- // Check if referral code is valid
- // For now, we'll assume it's valid - in the future this should call an API
- setReferralData({
- valid: true,
- referrerName: "A supermemory user", // Placeholder - should come from API
- });
- } catch (error) {
- console.error("Error checking referral:", error);
- setReferralData({ valid: false });
- } finally {
- setIsLoading(false);
+ const response = await $fetch("@get/referral/:code", {
+ params: {
+ code,
+ },
+ })
+
+ if (response.error) {
+ throw new Error(
+ response.error?.message || "Failed to load referral information",
+ )
}
- }
- checkReferral();
- }, [referralCode]);
+ return response.data
+ },
+ enabled: !!code,
+ retry: 1,
+ })
-
-
- const handleCopyLink = async () => {
- try {
- await navigator.clipboard.writeText(referralLink);
- setCopiedLink(true);
- toast.success("Referral link copied!");
- setTimeout(() => setCopiedLink(false), 2000);
- } catch (error) {
- toast.error("Failed to copy link");
- }
- };
-
- const handleShare = () => {
- if (navigator.share) {
- navigator.share({
- title: "Join supermemory",
- text: "I'm excited about supermemory - it's going to change how we store and interact with our memories!",
- url: referralLink,
- });
- } else {
- handleCopyLink();
- }
- };
+ const referrer = referrerData?.referrer
if (isLoading) {
return (
-
Checking invitation...
+
Loading invitation...
- );
+ )
}
- if (!referralData?.valid) {
+ if (error || !code) {
return (
-
- Invalid Referral
-
-
- This referral link is not valid or has expired.
-
-
-
-
-
-
-
-
-
- );
- }
-
- return (
-
-
- {/* Welcome Card */}
-
-
-
-
+
+
- You're invited to supermemory!
+ Invalid Referral Link
- {referralData.referrerName} invited you to join the future of
- memory management.
+ {error instanceof Error ? error.message : "Invalid referral code"}
-
-
- What is supermemory?
-
-
- supermemory is an AI-powered personal knowledge base that
- helps you store, organize, and interact with all your digital
- memories - from documents and links to conversations and
- ideas.
-
-
-
-
Learn more about supermemory
@@ -158,51 +89,62 @@ export default function ReferralPage() {
-
- {/* Share Card */}
-
-
-
- Share with friends
-
-
- Help others discover supermemory and earn priority access.
-
-
-
-