add supporer key program

server/db/schema.ts

@@ -405,6 +405,15 @@ export const resourceRules = sqliteTable("resourceRules", {
     value: text("value").notNull()
 });
 
+export const supporterKey = sqliteTable("supporterKey", {
+    keyId: integer("keyId").primaryKey({ autoIncrement: true }),
+    key: text("key").notNull(),
+    githubUsername: text("githubUsername").notNull(),
+    phrase: text("phrase"),
+    tier: text("tier"),
+    valid: integer("valid", { mode: "boolean" }).notNull().default(false)
+});
+
 export type Org = InferSelectModel<typeof orgs>;
 export type User = InferSelectModel<typeof users>;
 export type Site = InferSelectModel<typeof sites>;
@@ -439,3 +448,4 @@ export type ResourceWhitelist = InferSelectModel<typeof resourceWhitelist>;
 export type VersionMigration = InferSelectModel<typeof versionMigrations>;
 export type ResourceRule = InferSelectModel<typeof resourceRules>;
 export type Domain = InferSelectModel<typeof domains>;
+export type SupporterKey = InferSelectModel<typeof supporterKey>;

server/lib/config.ts

@@ -10,6 +10,8 @@ import {
 } from "@server/lib/consts";
 import { passwordSchema } from "@server/auth/passwordSchema";
 import stoi from "./stoi";
+import db from "@server/db";
+import { SupporterKey, supporterKey } from "@server/db/schema";
 
 const portSchema = z.number().positive().gt(0).lte(65535);
 
@@ -155,6 +157,10 @@ const configSchema = z.object({
 export class Config {
     private rawConfig!: z.infer<typeof configSchema>;
 
+    supporterData: SupporterKey | null = null;
+
+    supporterHiddenUntil: number | null = null;
+
     constructor() {
         this.loadConfig();
     }
@@ -183,7 +189,9 @@ export class Config {
         }
 
         if (process.env.APP_BASE_DOMAIN) {
-            console.log("You're using deprecated environment variables. Transition to the configuration file. https://docs.fossorial.io/");
+            console.log(
+                "You're using deprecated environment variables. Transition to the configuration file. https://docs.fossorial.io/"
+            );
         }
 
         if (!environment) {
@@ -235,6 +243,17 @@ export class Config {
             : "false";
         process.env.DASHBOARD_URL = parsedConfig.data.app.dashboard_url;
 
+        try {
+            this.checkSupporterKey();
+        } catch (error) {
+            console.error("Error checking supporter key:", error);
+        }
+
+        if (this.supporterData) {
+            process.env.SUPPORTER_DATA = JSON.stringify(this.supporterData);
+            console.log("Thank you for being a supporter of Pangolin!");
+        }
+
         this.rawConfig = parsedConfig.data;
     }
 
@@ -251,6 +270,86 @@ export class Config {
     public getDomain(domainId: string) {
         return this.rawConfig.domains[domainId];
     }
+
+    public hideSupporterKey(days: number = 7) {
+        const now = new Date().getTime();
+
+        if (this.supporterHiddenUntil && now < this.supporterHiddenUntil) {
+            return;
+        }
+
+        this.supporterHiddenUntil = now + 1000 * 60 * 60 * 24 * days;
+    }
+
+    public isSupporterKeyHidden() {
+        const now = new Date().getTime();
+
+        if (this.supporterHiddenUntil && now < this.supporterHiddenUntil) {
+            return true;
+        }
+
+        return false;
+    }
+
+    public async checkSupporterKey() {
+        const [key] = await db.select().from(supporterKey).limit(1);
+
+        if (!key) {
+            return;
+        }
+
+        const { key: licenseKey, githubUsername } = key;
+
+        const response = await fetch(
+            "https://api.dev.fossorial.io/api/v1/license/validate",
+            {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify({
+                    licenseKey,
+                    githubUsername
+                })
+            }
+        );
+
+        if (!response.ok) {
+            this.supporterData = key;
+            return;
+        }
+
+        const data = await response.json();
+
+        if (!data.data.valid) {
+            this.supporterData = {
+                ...key,
+                valid: false
+            };
+            return;
+        }
+
+        this.supporterData = {
+            ...key,
+            valid: true
+        };
+
+        // update the supporter key in the database
+        await db.transaction(async (trx) => {
+            await trx.delete(supporterKey);
+            await trx.insert(supporterKey).values({
+                githubUsername,
+                key: licenseKey,
+                tier: data.data.tier || null,
+                phrase: data.data.cutePhrase || null,
+                valid: true
+            });
+        });
+    }
+
+    public getSupporterData() {
+        return this.supporterData;
+    }
 }
 
 export const config = new Config();

server/routers/external.ts

@@ -8,6 +8,7 @@ import * as target from "./target";
 import * as user from "./user";
 import * as auth from "./auth";
 import * as role from "./role";
+import * as supporterKey from "./supporterKey";
 import * as accessToken from "./accessToken";
 import HttpCode from "@server/types/HttpCode";
 import {
@@ -239,7 +240,6 @@ authenticated.delete(
     target.deleteTarget
 );
 
-
 authenticated.put(
     "/org/:orgId/role",
     verifyOrgAccess,
@@ -382,6 +382,9 @@ authenticated.get(
 
 authenticated.get(`/org/:orgId/overview`, verifyOrgAccess, org.getOrgOverview);
 
+authenticated.post(`/supporter-key/validate`, supporterKey.validateSupporterKey);
+authenticated.post(`/supporter-key/hide`, supporterKey.hideSupporterKey);
+
 unauthenticated.get("/resource/:resourceId/auth", resource.getResourceAuthInfo);
 
 // authenticated.get(

server/routers/internal.ts

@@ -4,8 +4,12 @@ import * as traefik from "@server/routers/traefik";
 import * as resource from "./resource";
 import * as badger from "./badger";
 import * as auth from "@server/routers/auth";
+import * as supporterKey from "@server/routers/supporterKey";
 import HttpCode from "@server/types/HttpCode";
-import { verifyResourceAccess, verifySessionUserMiddleware } from "@server/middlewares";
+import {
+    verifyResourceAccess,
+    verifySessionUserMiddleware
+} from "@server/middlewares";
 
 // Root routes
 const internalRouter = Router();
@@ -28,6 +32,11 @@ internalRouter.post(
     resource.getExchangeToken
 );
 
+internalRouter.get(
+    `/supporter-key/visible`,
+    supporterKey.isSupporterKeyVisible
+);
+
 // Gerbil routes
 const gerbilRouter = Router();
 internalRouter.use("/gerbil", gerbilRouter);

server/routers/supporterKey/hideSupporterKey.ts

@@ -0,0 +1,35 @@
+import { Request, Response, NextFunction } from "express";
+import HttpCode from "@server/types/HttpCode";
+import createHttpError from "http-errors";
+import logger from "@server/logger";
+import { response as sendResponse } from "@server/lib";
+import config from "@server/lib/config";
+
+export type HideSupporterKeyResponse = {
+    hidden: boolean;
+};
+
+export async function hideSupporterKey(
+    req: Request,
+    res: Response,
+    next: NextFunction
+): Promise<any> {
+    try {
+        config.hideSupporterKey();
+
+        return sendResponse<HideSupporterKeyResponse>(res, {
+            data: {
+                hidden: true
+            },
+            success: true,
+            error: false,
+            message: "Hidden",
+            status: HttpCode.OK
+        });
+    } catch (error) {
+        logger.error(error);
+        return next(
+            createHttpError(HttpCode.INTERNAL_SERVER_ERROR, "An error occurred")
+        );
+    }
+}

server/routers/supporterKey/index.ts

@@ -0,0 +1,3 @@
+export * from "./validateSupporterKey";
+export * from "./isSupporterKeyVisible";
+export * from "./hideSupporterKey";

server/routers/supporterKey/isSupporterKeyVisible.ts

@@ -0,0 +1,54 @@
+import { Request, Response, NextFunction } from "express";
+import HttpCode from "@server/types/HttpCode";
+import createHttpError from "http-errors";
+import logger from "@server/logger";
+import { response as sendResponse } from "@server/lib";
+import config from "@server/lib/config";
+import db from "@server/db";
+import { count } from "drizzle-orm";
+import { users } from "@server/db/schema";
+
+export type IsSupporterKeyVisibleResponse = {
+    visible: boolean;
+};
+
+const USER_LIMIT = 5;
+
+export async function isSupporterKeyVisible(
+    req: Request,
+    res: Response,
+    next: NextFunction
+): Promise<any> {
+    try {
+        const hidden = config.isSupporterKeyHidden();
+        const key = config.getSupporterData();
+
+        let visible = !hidden && key?.valid !== true;
+
+        if (key?.tier === "Limited Supporter") {
+            const [numUsers] = await db.select({ count: count() }).from(users);
+
+            if (numUsers.count > USER_LIMIT) {
+                visible = true;
+            }
+        }
+
+        logger.debug(`Supporter key visible: ${visible}`);
+        logger.debug(JSON.stringify(key));
+
+        return sendResponse<IsSupporterKeyVisibleResponse>(res, {
+            data: {
+                visible
+            },
+            success: true,
+            error: false,
+            message: "Status",
+            status: HttpCode.OK
+        });
+    } catch (error) {
+        logger.error(error);
+        return next(
+            createHttpError(HttpCode.INTERNAL_SERVER_ERROR, "An error occurred")
+        );
+    }
+}

server/routers/supporterKey/validateSupporterKey.ts

@@ -0,0 +1,115 @@
+import { Request, Response, NextFunction } from "express";
+import { z } from "zod";
+import HttpCode from "@server/types/HttpCode";
+import createHttpError from "http-errors";
+import logger from "@server/logger";
+import { fromError } from "zod-validation-error";
+import { response as sendResponse } from "@server/lib";
+import { suppressDeprecationWarnings } from "moment";
+import { supporterKey } from "@server/db/schema";
+import db from "@server/db";
+import { eq } from "drizzle-orm";
+import config from "@server/lib/config";
+
+const validateSupporterKeySchema = z
+    .object({
+        githubUsername: z.string().nonempty(),
+        key: z.string().nonempty()
+    })
+    .strict();
+
+export type ValidateSupporterKeyResponse = {
+    valid: boolean;
+    githubUsername?: string;
+    tier?: string;
+    phrase?: string;
+};
+
+export async function validateSupporterKey(
+    req: Request,
+    res: Response,
+    next: NextFunction
+): Promise<any> {
+    try {
+        const parsedBody = validateSupporterKeySchema.safeParse(req.body);
+        if (!parsedBody.success) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    fromError(parsedBody.error).toString()
+                )
+            );
+        }
+
+        const { githubUsername, key } = parsedBody.data;
+
+        const response = await fetch(
+            "https://api.dev.fossorial.io/api/v1/license/validate",
+            {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify({
+                    licenseKey: key,
+                    githubUsername: githubUsername
+                })
+            }
+        );
+
+        if (!response.ok) {
+            logger.error(response);
+            return next(
+                createHttpError(
+                    HttpCode.INTERNAL_SERVER_ERROR,
+                    "An error occurred"
+                )
+            );
+        }
+
+        const data = await response.json();
+
+        if (!data || !data.data.valid) {
+            return sendResponse<ValidateSupporterKeyResponse>(res, {
+                data: {
+                    valid: false
+                },
+                success: true,
+                error: false,
+                message: "Invalid supporter key",
+                status: HttpCode.OK
+            });
+        }
+
+        await db.transaction(async (trx) => {
+            await trx.delete(supporterKey);
+            await trx.insert(supporterKey).values({
+                githubUsername: githubUsername,
+                key: key,
+                tier: data.data.tier || null,
+                phrase: data.data.cutePhrase || null,
+                valid: true
+            });
+        });
+
+        await config.checkSupporterKey();
+
+        return sendResponse<ValidateSupporterKeyResponse>(res, {
+            data: {
+                valid: true,
+                githubUsername: data.data.githubUsername,
+                tier: data.data.tier,
+                phrase: data.data.cutePhrase
+            },
+            success: true,
+            error: false,
+            message: "Valid supporter key",
+            status: HttpCode.OK
+        });
+    } catch (error) {
+        logger.error(error);
+        return next(
+            createHttpError(HttpCode.INTERNAL_SERVER_ERROR, "An error occurred")
+        );
+    }
+}

server/setup/migrations.ts

@@ -17,6 +17,7 @@ import m8 from "./scripts/1.0.0-beta12";
 import m13 from "./scripts/1.0.0-beta13";
 import m15 from "./scripts/1.0.0-beta15";
 import m16 from "./scripts/1.0.0";
+import m17 from "./scripts/1.1.0";
 
 // THIS CANNOT IMPORT ANYTHING FROM THE SERVER
 // EXCEPT FOR THE DATABASE AND THE SCHEMA
@@ -33,7 +34,8 @@ const migrations = [
     { version: "1.0.0-beta.12", run: m8 },
     { version: "1.0.0-beta.13", run: m13 },
     { version: "1.0.0-beta.15", run: m15 },
-    { version: "1.0.0", run: m16 }
+    { version: "1.0.0", run: m16 },
+    { version: "1.1.0", run: m17 }
     // Add new migrations here as they are created
 ] as const;
 

server/setup/scripts/1.1.0.ts

@@ -0,0 +1,28 @@
+import db from "@server/db";
+import { sql } from "drizzle-orm";
+
+const version = "1.1.0";
+
+export default async function migration() {
+    console.log(`Running setup script ${version}...`);
+
+    try {
+        db.transaction((trx) => {
+            trx.run(sql`CREATE TABLE 'supporterKey' (
+	'keyId' integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	'key' text NOT NULL,
+	'githubUsername' text NOT NULL,
+	'phrase' text,
+	'tier' text,
+	'valid' integer DEFAULT false NOT NULL
+);`);
+        });
+
+        console.log(`Migrated database schema`);
+    } catch (e) {
+        console.log("Unable to migrate database schema");
+        throw e;
+    }
+
+    console.log(`${version} migration complete`);
+}

src/app/auth/resource/[resourceId]/ResourceAuthPortal.tsx

@@ -23,14 +23,7 @@ import {
     FormLabel,
     FormMessage
 } from "@/components/ui/form";
-import {
-    LockIcon,
-    Binary,
-    Key,
-    User,
-    Send,
-    AtSign
-} from "lucide-react";
+import { LockIcon, Binary, Key, User, Send, AtSign } from "lucide-react";
 import {
     InputOTP,
     InputOTPGroup,
@@ -50,6 +43,7 @@ import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { toast } from "@app/hooks/useToast";
 import Link from "next/link";
+import { useSupporterStatusContext } from "@app/hooks/useSupporterStatusContext";
 
 const pinSchema = z.object({
     pin: z
@@ -115,6 +109,8 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
 
     const api = createApiClient({ env });
 
+    const { supporterStatus } = useSupporterStatusContext();
+
     function getDefaultSelectedMethod() {
         if (props.methods.sso) {
             return "sso";
@@ -194,7 +190,10 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
 
                 const session = res.data.data.session;
                 if (session) {
-                    window.location.href = appendRequestToken(props.redirect, session);
+                    window.location.href = appendRequestToken(
+                        props.redirect,
+                        session
+                    );
                 }
             })
             .catch((e) => {
@@ -216,7 +215,10 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
                 setPincodeError(null);
                 const session = res.data.data.session;
                 if (session) {
-                    window.location.href = appendRequestToken(props.redirect, session);
+                    window.location.href = appendRequestToken(
+                        props.redirect,
+                        session
+                    );
                 }
             })
             .catch((e) => {
@@ -241,7 +243,10 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
                 setPasswordError(null);
                 const session = res.data.data.session;
                 if (session) {
-                    window.location.href = appendRequestToken(props.redirect, session);
+                    window.location.href = appendRequestToken(
+                        props.redirect,
+                        session
+                    );
                 }
             })
             .catch((e) => {
@@ -621,6 +626,15 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
                             </Tabs>
                         </CardContent>
                     </Card>
+                    {supporterStatus?.visible && (
+                        <div className="text-center mt-2">
+                            <span className="text-sm text-muted-foreground opacity-50">
+                                Server is running without a supporter key.
+                                <br />
+                                Consider supporting the project!
+                            </span>
+                        </div>
+                    )}
                 </div>
             ) : (
                 <ResourceAccessDenied />

src/app/layout.tsx

@@ -8,6 +8,10 @@ import { Separator } from "@app/components/ui/separator";
 import { pullEnv } from "@app/lib/pullEnv";
 import { BookOpenText, ExternalLink } from "lucide-react";
 import Image from "next/image";
+import SupportStatusProvider from "@app/providers/SupporterStatusProvider";
+import { createApiClient, internal, priv } from "@app/lib/api";
+import { AxiosResponse } from "axios";
+import { IsSupporterKeyVisibleResponse } from "@server/routers/supporterKey";
 
 export const metadata: Metadata = {
     title: `Dashboard - Pangolin`,
@@ -24,6 +28,15 @@ export default async function RootLayout({
 }>) {
     const env = pullEnv();
 
+    let supporterData = {
+        visible: true
+    };
+
+    const res = await priv.get<
+        AxiosResponse<IsSupporterKeyVisibleResponse>
+    >("supporter-key/visible");
+    supporterData.visible = res.data.data.visible;
+
     const version = env.app.version;
 
     return (
@@ -36,8 +49,11 @@ export default async function RootLayout({
                     disableTransitionOnChange
                 >
                     <EnvProvider env={pullEnv()}>
+                        <SupportStatusProvider supporterStatus={supporterData}>
                             {/* Main content */}
-                        <div className="flex-grow pb-3 md:pb-0">{children}</div>
+                            <div className="flex-grow pb-3 md:pb-0">
+                                {children}
+                            </div>
 
                             {/* Footer */}
                             <footer className="hidden md:block w-full mt-12 py-3 mb-6 px-4">
@@ -95,6 +111,7 @@ export default async function RootLayout({
                                     )}
                                 </div>
                             </footer>
+                        </SupportStatusProvider>
                     </EnvProvider>
                     <Toaster />
                 </ThemeProvider>

src/components/Header.tsx

@@ -24,6 +24,7 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useUserContext } from "@app/hooks/useUserContext";
 import ProfileIcon from "./ProfileIcon";
+import SupporterStatus from "./SupporterStatus";
 
 type HeaderProps = {
     orgId?: string;
@@ -42,8 +43,14 @@ export function Header({ orgId, orgs }: HeaderProps) {
     return (
         <>
             <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
                     <ProfileIcon />
 
+                    <div className="hidden md:block">
+                        <SupporterStatus />
+                    </div>
+                </div>
+
                 <div className="flex items-center">
                     <div className="hidden md:block">
                         <div className="flex items-center gap-4 mr-4">

src/components/SupporterStatus.tsx

@@ -0,0 +1,364 @@
+"use client";
+
+import Image from "next/image";
+import { Separator } from "@app/components/ui/separator";
+import { useSupporterStatusContext } from "@app/hooks/useSupporterStatusContext";
+import { useState } from "react";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger
+} from "@app/components/ui/popover";
+import { Button } from "./ui/button";
+import {
+    Credenza,
+    CredenzaBody,
+    CredenzaClose,
+    CredenzaContent,
+    CredenzaDescription,
+    CredenzaFooter,
+    CredenzaHeader,
+    CredenzaTitle
+} from "./Credenza";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "./ui/form";
+import { Input } from "./ui/input";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { AxiosResponse } from "axios";
+import { ValidateSupporterKeyResponse } from "@server/routers/supporterKey";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import {
+    Card,
+    CardContent,
+    CardFooter,
+    CardHeader,
+    CardTitle
+} from "./ui/card";
+import { Check, ExternalLink } from "lucide-react";
+
+const formSchema = z.object({
+    githubUsername: z
+        .string()
+        .nonempty({ message: "GitHub username is required" }),
+    key: z.string().nonempty({ message: "Supporter key is required" })
+});
+
+export default function SupporterStatus() {
+    const { supporterStatus, updateSupporterStatus } =
+        useSupporterStatusContext();
+    const [supportOpen, setSupportOpen] = useState(false);
+    const [keyOpen, setKeyOpen] = useState(false);
+    const [purchaseOptionsOpen, setPurchaseOptionsOpen] = useState(false);
+
+    const api = createApiClient(useEnvContext());
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            githubUsername: "",
+            key: ""
+        }
+    });
+
+    async function hide() {
+        await api.post("/supporter-key/hide");
+
+        updateSupporterStatus({
+            visible: false
+        });
+    }
+
+    async function onSubmit(values: z.infer<typeof formSchema>) {
+        try {
+            const res = await api.post<
+                AxiosResponse<ValidateSupporterKeyResponse>
+            >("/supporter-key/validate", {
+                githubUsername: values.githubUsername,
+                key: values.key
+            });
+
+            const data = res.data.data;
+
+            if (!data || !data.valid) {
+                toast({
+                    variant: "destructive",
+                    title: "Invalid Key",
+                    description: "Your supporter key is invalid."
+                });
+                return;
+            }
+
+            toast({
+                variant: "default",
+                title: "Valid Key",
+                description:
+                    "Your supporter key has been validated. Thank you for your support!"
+            });
+
+            setPurchaseOptionsOpen(false);
+            setKeyOpen(false);
+
+            updateSupporterStatus({
+                visible: false
+            });
+        } catch (error) {
+            toast({
+                variant: "destructive",
+                title: "Error",
+                description: formatAxiosError(
+                    error,
+                    "Failed to validate supporter key."
+                )
+            });
+            return;
+        }
+    }
+
+    return (
+        <>
+            <Credenza
+                open={purchaseOptionsOpen}
+                onOpenChange={(val) => {
+                    setPurchaseOptionsOpen(val);
+                }}
+            >
+                <CredenzaContent className="max-w-3xl">
+                    <CredenzaHeader>
+                        <CredenzaTitle>
+                            Support Development and Adopt a Pangolin!
+                        </CredenzaTitle>
+                    </CredenzaHeader>
+                    <CredenzaBody>
+                        <p>
+                            Purchase a supporter key to help us continue
+                            developing Pangolin. Your contribution allows us
+                            commit more time to maintain and add new features to
+                            the application for everyone. We will never use this
+                            to paywall features.
+                        </p>
+
+                        <p>
+                            You will also get to adopt and meet your very own
+                            pet Pangolin!
+                        </p>
+
+                        <p>
+                            Payments are processed via GitHub. Afterward, you
+                            can retrieve your key on{" "}
+                            <Link
+                                href="https://supporters.dev.fossorial.io/"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="underline"
+                            >
+                                our website
+                            </Link>{" "}
+                            and redeem it here.{" "}
+                            <Link
+                                href="https://supporters.dev.fossorial.io/"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="underline"
+                            >
+                                Learn more.
+                            </Link>
+                        </p>
+
+                        <p>Please select the option that best suits you.</p>
+
+                        <div className="grid md:grid-cols-2 grid-cols-1 gap-8">
+                            <Card>
+                                <CardHeader>
+                                    <CardTitle>Full Supporter</CardTitle>
+                                </CardHeader>
+                                <CardContent>
+                                    <p className="text-4xl mb-6">$95</p>
+                                    <ul className="space-y-3">
+                                        <li className="flex items-center gap-2">
+                                            <Check className="h-6 w-6 text-green-500" />
+                                            <span className="text-muted-foreground">
+                                                For the whole server
+                                            </span>
+                                        </li>
+                                        <li className="flex items-center gap-2">
+                                            <Check className="h-6 w-6 text-green-500" />
+                                            <span className="text-muted-foreground">
+                                                Lifetime purchase
+                                            </span>
+                                        </li>
+                                        <li className="flex items-center gap-2">
+                                            <Check className="h-6 w-6 text-green-500" />
+                                            <span className="text-muted-foreground">
+                                                Supporter status
+                                            </span>
+                                        </li>
+                                    </ul>
+                                </CardContent>
+                                <CardFooter>
+                                    <Link
+                                        href="https://www.google.com"
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className="w-full"
+                                    >
+                                        <Button className="w-full">Buy</Button>
+                                    </Link>
+                                </CardFooter>
+                            </Card>
+
+                            <Card>
+                                <CardHeader>
+                                    <CardTitle>Limited Supporter</CardTitle>
+                                </CardHeader>
+                                <CardContent>
+                                    <p className="text-4xl mb-6">$25</p>
+                                    <ul className="space-y-3">
+                                        <li className="flex items-center gap-2">
+                                            <Check className="h-6 w-6 text-green-500" />
+                                            <span className="text-muted-foreground">
+                                                For 5 or less users
+                                            </span>
+                                        </li>
+                                        <li className="flex items-center gap-2">
+                                            <Check className="h-6 w-6 text-green-500" />
+                                            <span className="text-muted-foreground">
+                                                Lifetime purchase
+                                            </span>
+                                        </li>
+                                        <li className="flex items-center gap-2">
+                                            <Check className="h-6 w-6 text-green-500" />
+                                            <span className="text-muted-foreground">
+                                                Supporter status
+                                            </span>
+                                        </li>
+                                    </ul>
+                                </CardContent>
+                                <CardFooter>
+                                    <Link
+                                        href="https://www.google.com"
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className="w-full"
+                                    >
+                                        <Button className="w-full">Buy</Button>
+                                    </Link>
+                                </CardFooter>
+                            </Card>
+                        </div>
+
+                        <div className="w-full pt-6 space-y-2">
+                            <Button
+                                className="w-full"
+                                variant="outlinePrimary"
+                                onClick={() => {
+                                    setKeyOpen(true);
+                                }}
+                            >
+                                Redeem Supporter Key
+                            </Button>
+                            <Button
+                                variant="ghost"
+                                className="w-full"
+                                onClick={() => hide()}
+                            >
+                                Hide for 7 days
+                            </Button>
+                        </div>
+                    </CredenzaBody>
+                    <CredenzaFooter>
+                        <CredenzaClose asChild>
+                            <Button variant="outline">Close</Button>
+                        </CredenzaClose>
+                    </CredenzaFooter>
+                </CredenzaContent>
+            </Credenza>
+
+            <Credenza
+                open={keyOpen}
+                onOpenChange={(val) => {
+                    setKeyOpen(val);
+                }}
+            >
+                <CredenzaContent>
+                    <CredenzaHeader>
+                        <CredenzaTitle>Enter Supporter Key</CredenzaTitle>
+                        <CredenzaDescription>
+                            Meet your very own pet Pangolin!
+                        </CredenzaDescription>
+                    </CredenzaHeader>
+                    <CredenzaBody>
+                        <Form {...form}>
+                            <form
+                                onSubmit={form.handleSubmit(onSubmit)}
+                                className="space-y-4"
+                                id="form"
+                            >
+                                <FormField
+                                    control={form.control}
+                                    name="githubUsername"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>
+                                                GitHub Username
+                                            </FormLabel>
+                                            <FormControl>
+                                                <Input {...field} />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="key"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Supporter Key</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                            </form>
+                        </Form>
+                    </CredenzaBody>
+                    <CredenzaFooter>
+                        <CredenzaClose asChild>
+                            <Button variant="outline">Close</Button>
+                        </CredenzaClose>
+                        <Button type="submit" form="form">
+                            Submit
+                        </Button>
+                    </CredenzaFooter>
+                </CredenzaContent>
+            </Credenza>
+
+            {supporterStatus?.visible ? (
+                <Button
+                    variant="outlinePrimary"
+                    size="sm"
+                    className="gap-2"
+                    onClick={() => {
+                        setPurchaseOptionsOpen(true);
+                    }}
+                >
+                    Buy Supporter Key
+                </Button>
+            ) : null}
+        </>
+    );
+}

src/contexts/supporterStatusContext.ts

@@ -0,0 +1,16 @@
+import { createContext } from "react";
+
+export type SupporterStatus = {
+    visible: boolean;
+};
+
+type SupporterStatusContextType = {
+    supporterStatus: SupporterStatus | null;
+    updateSupporterStatus: (updatedSite: Partial<SupporterStatus>) => void;
+};
+
+const SupporterStatusContext = createContext<
+    SupporterStatusContextType | undefined
+>(undefined);
+
+export default SupporterStatusContext;

src/hooks/useSupporterStatusContext.ts

@@ -0,0 +1,12 @@
+import SupporterStatusContext from "@app/contexts/supporterStatusContext";
+import { useContext } from "react";
+
+export function useSupporterStatusContext() {
+    const context = useContext(SupporterStatusContext);
+    if (context === undefined) {
+        throw new Error(
+            "useSupporterStatusContext must be used within an SupporterStatusProvider"
+        );
+    }
+    return context;
+}

src/providers/SupporterStatusProvider.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import SupportStatusContext, {
+    SupporterStatus
+} from "@app/contexts/supporterStatusContext";
+import { useState } from "react";
+
+interface ProviderProps {
+    children: React.ReactNode;
+    supporterStatus: SupporterStatus | null;
+}
+
+export function SupporterStatusProvider({
+    children,
+    supporterStatus
+}: ProviderProps) {
+    const [supporterStatusState, setSupporterStatusState] =
+        useState<SupporterStatus | null>(supporterStatus);
+
+    const updateSupporterStatus = (
+        updatedSupporterStatus: Partial<SupporterStatus>
+    ) => {
+        setSupporterStatusState((prev) => {
+            if (!prev) {
+                return updatedSupporterStatus as SupporterStatus;
+            }
+            return {
+                ...prev,
+                ...updatedSupporterStatus
+            };
+        });
+    };
+
+    return (
+        <SupportStatusContext.Provider
+            value={{
+                supporterStatus: supporterStatusState,
+                updateSupporterStatus
+            }}
+        >
+            {children}
+        </SupportStatusContext.Provider>
+    );
+}
+
+export default SupporterStatusProvider;