feat: dynamic project success page and update links (#220)

### TL;DR

Integrates project data fetching for dynamic subdomain display on the Project Deployment Success page and the OverviewTabPanel.

### What changed?

- Updated `Id.tsx` to fetch project data and dynamically display project's subdomain after deployment.
- Modified `Overview.tsx` to make project's subdomain a clickable link.

### How to test?

1. Deploy a new project and check the deployment success page for correct subdomain display.
2. Open a project's overview tab and click the subdomain link to ensure it navigates correctly.

### Why make this change?

Improves user experience by displaying the actual subdomain and making it clickable, ensuring users can conveniently verify their deployment and access project domain.

---

packages/frontend/src/pages/org-slug/projects/create/success/Id.tsx

@@ -11,14 +11,37 @@ import {
 import { Heading } from 'components/shared/Heading';
 
 import logoAnimation from 'components/../../public/lottie/logo.json';
+import { useGQLClient } from 'context/GQLClientContext';
+import { Project } from 'gql-client';
+import { useEffect, useState } from 'react';
 
 const Id = () => {
   const { id, orgSlug } = useParams();
+  const client = useGQLClient();
+  const [project, setProject] = useState<Project | null>(null);
 
-  const handleSetupDomain = () => {
-    //TODO: Implement this
+  const handleSetupDomain = async () => {
+    if (id) {
+      // console.log('id', id);
+      // console.log('getting project for id', id);
+      const project = await client.getProject(id);
+      // console.log('project found:', project);
+      if (project && project.project) {
+        // console.log('project:', project.project);
+        setProject(project.project);
+      }
+    } else {
+      window.location.href = '/';
+    }
   };
+
+  useEffect(() => {
+    handleSetupDomain();
+  });
+
   return (
+    <>
+      {project ? (
         <div className="flex flex-col gap-8 lg:gap-11 max-w-[522px] mx-auto py-6 lg:py-12">
           {/* Icon */}
           <div className="flex justify-center">
@@ -35,14 +58,13 @@ const Id = () => {
               <Button
                 className="no-underline text-elements-link"
                 // TODO: use dynamic value
-            href="https://www.iglootools.snowballtools.xyz"
+                href={project ? `https://${project.subDomain}` : ''}
                 as="a"
                 variant="link-emphasized"
                 external
                 leftIcon={<LinkChainIcon />}
               >
-            {/* // TODO: use dynamic value */}
-            www.iglootools.snowballtools.xyz
+                {project.subDomain}
               </Button>
             </p>
           </div>
@@ -73,7 +95,11 @@ const Id = () => {
                       custom domain.
                     </p>
                   </div>
-              <Button onClick={handleSetupDomain} variant="tertiary" size="sm">
+                  <Button
+                    onClick={handleSetupDomain}
+                    variant="tertiary"
+                    size="sm"
+                  >
                     Setup domain
                   </Button>
                 </div>
@@ -103,6 +129,10 @@ const Id = () => {
             </div>
           </div>
         </div>
+      ) : (
+        <></>
+      )}
+    </>
   );
 };
 

packages/frontend/src/pages/org-slug/projects/id/Overview.tsx

@@ -131,9 +131,12 @@ const OverviewTabPanel = () => {
             <Heading className="text-lg leading-6 font-medium truncate">
               {project.name}
             </Heading>
-            <p className="text-sm text-elements-low-em tracking-tight truncate">
+            <a
+              href={`https://${project.subDomain}`}
+              className="text-sm text-elements-low-em tracking-tight truncate"
+            >
               {project.subDomain}
-            </p>
+            </a>
           </div>
         </div>
         <OverviewInfo label="Domain" icon={<GlobeIcon />}>