Show custom domain in overview tabs panel

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

@@ -32,6 +32,7 @@ const OverviewTabPanel = () => {
   const [activities, setActivities] = useState<GitCommitWithBranch[]>([]);
   const [fetchingActivities, setFetchingActivities] = useState(true);
   const [liveDomain, setLiveDomain] = useState<Domain>();
+  const [customDomain, setCustomDomain] = useState<Domain | null>(null);
 
   const client = useGQLClient();
   const { project, onUpdate } = useOutletContext<OutletContextType>();
@@ -124,6 +125,16 @@ const OverviewTabPanel = () => {
     fetchLiveProdDomain();
   }, [project]);
 
+  useEffect(() => {
+    const fetchCustomDomain = async () => {
+      const { oldestDomain } = await client.oldestDomain(project.id);
+
+      setCustomDomain(oldestDomain);
+    };
+
+    fetchCustomDomain();
+  }, [project]);
+
   return (
     <div className="grid grid-cols-5 gap-6 md:gap-[72px]">
       <div className="col-span-5 md:col-span-3">
@@ -194,10 +205,15 @@ const OverviewTabPanel = () => {
                 project.deployments.map((deployment) => (
                   <div className="flex gap-2 items-center">
                     <Link
-                      to={`https://${project.name.toLowerCase()}.${deployment.deployer.baseDomain}`}
+                      to={
+                        customDomain && customDomain.name
+                          ? `https://${customDomain.name}`
+                          : `https://${project.name.toLowerCase()}.${deployment.deployer.baseDomain}`
+                      }
                     >
                       <span className="text-controls-primary dark:text-foreground group hover:border-controls-primary transition-colors border-b border-b-transparent flex gap-2 items-center text-sm tracking-tight">
-                        {`https://${project.name.toLowerCase()}.${deployment.deployer.baseDomain}`}
+                        {customDomain?.name ??
+                          `https://${project.name.toLowerCase()}.${deployment.deployer.baseDomain}`}
                         <LinkIcon className="group-hover:rotate-45 transition-transform" />
                       </span>
                     </Link>