Update Nebula Waitlist Page UI and invite link

Author: MananTank

apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page-ui.client.tsx

@@ -3,7 +3,7 @@ import { OrbitIcon } from "lucide-react";
 import Link from "next/link";
 import { ShareButton } from "./share-button.client";
 
-export function NebulaWaitListPageUI() {
+export function NebulaWaitListPageUI(props: { teamId: string }) {
   return (
     <div className="flex grow flex-col">
       {/* Header */}
@@ -22,7 +22,15 @@ export function NebulaWaitListPageUI() {
         <CenteredCard
           title="You're on the waitlist"
           description="You should receive access to Nebula soon!"
-          footer={<ShareButton />}
+          footer={
+            <div className="flex flex-col items-center gap-3">
+              <ShareButton teamId={props.teamId} />
+              <p className="text-balance text-center text-muted-foreground">
+                Share this invite link and get moved up the list when your
+                friends sign up!
+              </p>
+            </div>
+          }
         />
       </div>
     </div>
@@ -82,7 +90,7 @@ function CenteredCard(props: {
               {props.description}
             </p>
 
-            <div className="h-6" />
+            <div className="h-10" />
 
             {props.footer}
           </div>

apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page.tsx

@@ -39,7 +39,7 @@ export async function NebulaWaitListPage(props: {
     }
   }
 
-  return <NebulaWaitListPageUI />;
+  return <NebulaWaitListPageUI teamId={team.id} />;
 }
 
 function UnexpectedErrorPage(props: {

apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist.stories.tsx

@@ -29,5 +29,5 @@ export const Mobile: Story = {
 };
 
 function Story() {
-  return <NebulaWaitListPageUI />;
+  return <NebulaWaitListPageUI teamId="foo" />;
 }

apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/share-button.client.tsx

@@ -5,16 +5,21 @@ import { ToolTipLabel } from "@/components/ui/tooltip";
 import { CheckIcon, ShareIcon } from "lucide-react";
 import { useState } from "react";
 
-export function ShareButton() {
+export function ShareButton(props: {
+  teamId: string;
+}) {
   const [isCopied, setIsCopied] = useState(false);
 
   return (
-    <ToolTipLabel label="Copy link for joining waitlist">
+    <ToolTipLabel label="Copy Invite Link">
       <Button
         variant="outline"
         className="gap-2"
         onClick={() => {
-          navigator.clipboard.writeText("https://thirdweb.com/team/~/~/nebula");
+          const url = new URL("https://thirdweb.com/nebula");
+          url.searchParams.append("utm_content", props.teamId);
+          url.searchParams.append("utm_campaign", "nebula");
+          navigator.clipboard.writeText(url.href);
           setIsCopied(true);
           setTimeout(() => setIsCopied(false), 1000);
         }}