Update ReferButton to client component

apps/web/app/api/user/embed-tokens/route.ts

@@ -0,0 +1,20 @@
+import { withSession } from "@/lib/auth";
+import { dub } from "@/lib/dub";
+import { NextResponse } from "next/server";
+
+export const GET = withSession(async ({ session }) => {
+  const referralLinkId = session.user.referralLinkId;
+  console.log("session", session);
+
+  if (!referralLinkId) {
+    return NextResponse.json({ publicToken: null }, { status: 200 });
+  }
+
+  console.log("referralLinkId", referralLinkId);
+
+  const { publicToken } = await dub.embedTokens.create({
+    linkId: referralLinkId,
+  });
+
+  return NextResponse.json({ publicToken });
+});

apps/web/app/app.dub.co/(dashboard)/layout.tsx

@@ -2,7 +2,7 @@ import { MainNav } from "@/ui/layout/main-nav";
 import { AppSidebarNav } from "@/ui/layout/sidebar/app-sidebar-nav";
 import { HelpButtonRSC } from "@/ui/layout/sidebar/help-button-rsc";
 import { NewsRSC } from "@/ui/layout/sidebar/news-rsc";
-import { ReferButtonRSC } from "@/ui/layout/sidebar/refer-button-rsc";
+import { ReferButton } from "@/ui/layout/sidebar/refer-button";
 import Toolbar from "@/ui/layout/toolbar/toolbar";
 import { constructMetadata } from "@dub/utils";
 import { ReactNode } from "react";
@@ -18,7 +18,7 @@ export default async function Layout({ children }: { children: ReactNode }) {
           sidebar={AppSidebarNav}
           toolContent={
             <>
-              <ReferButtonRSC />
+              <ReferButton />
               <HelpButtonRSC />
             </>
           }

apps/web/ui/layout/page-content/index.tsx

@@ -2,7 +2,7 @@ import { MaxWidthWrapper } from "@dub/ui";
 import { cn } from "@dub/utils";
 import { PropsWithChildren, ReactNode } from "react";
 import { HelpButtonRSC } from "../sidebar/help-button-rsc";
-import { ReferButtonRSC } from "../sidebar/refer-button-rsc";
+import { ReferButton } from "../sidebar/refer-button";
 import UserDropdown from "../sidebar/user-dropdown";
 import { NavButton } from "./nav-button";
 
@@ -49,7 +49,7 @@ export function PageContent({
             <div className="hidden md:block">{titleControls}</div>
           )}
           <div className="flex items-center gap-4 md:hidden">
-            <ReferButtonRSC />
+            <ReferButton />
             <HelpButtonRSC />
             <UserDropdown />
           </div>

apps/web/ui/layout/sidebar/refer-button.tsx

@@ -2,10 +2,21 @@
 
 import { DubWidget } from "@dub/embed-react";
 import { Gift } from "@dub/ui/src/icons";
-import { cn } from "@dub/utils";
+import { cn, fetcher } from "@dub/utils";
 import { AnimatePresence, motion } from "framer-motion";
+import { useSession } from "next-auth/react";
+import { memo } from "react";
+import useSWRImmutable from "swr/immutable";
+
+function ReferButtonComponent() {
+  const { data: session } = useSession();
+
+  const { data: { publicToken } = {} } = useSWRImmutable<{
+    publicToken: string;
+  }>(session?.user?.["referralLinkId"] && "/api/user/embed-tokens", fetcher);
+
+  if (!publicToken) return null;
 
-export function ReferButton({ publicToken }: { publicToken: string }) {
   return (
     <DubWidget token={publicToken} options={{ trigger: "manual" }}>
       <button
@@ -29,3 +40,5 @@ export function ReferButton({ publicToken }: { publicToken: string }) {
     </DubWidget>
   );
 }
+
+export const ReferButton = memo(ReferButtonComponent);