Show custom domain in overview tabs panel

packages/backend/src/database.ts

@@ -605,10 +605,10 @@ export class Database {
 
   async getOldestDomainByProjectId(
     projectId: string,
-  ): Promise<Domain[]> {
+  ): Promise<Domain | null> {
     const domainRepository = this.dataSource.getRepository(Domain);
 
-    const domains = await domainRepository.find({
+    const domain = await domainRepository.findOne({
       where: {
         project: {
           id: projectId
@@ -619,7 +619,7 @@ export class Database {
       }
     });
 
-    return domains;
+    return domain;
   }
 
   async getLatestDNSDataByProjectId(

packages/backend/src/resolvers.ts

@@ -70,6 +70,18 @@ export const createResolvers = async (service: Service): Promise<any> => {
         return service.getDomainsByProjectId(projectId, filter);
       },
 
+      oldestDomain: async (
+        _: any,
+        { projectId }: { projectId: string },
+      ) => {
+        try {
+          return await service.getOldestDomainByProjectId(projectId);
+        } catch (err) {
+          log(err);
+          return false;
+        }
+      },
+
       getAuctionData: async (
         _: any,
         { auctionId }: { auctionId: string },

packages/backend/src/schema.gql

@@ -274,6 +274,7 @@ type Query {
   searchProjects(searchText: String!): [Project!]
   getAuctionData(auctionId: String!): Auction!
   getLatestDNSDataByProjectId(projectId: String!): DNSRecordAttributes
+  oldestDomain(projectId: String!): Domain
   domains(projectId: String!, filter: FilterDomainsInput): [Domain]
   deployers: [Deployer]
   address: String!

packages/backend/src/service.ts

@@ -674,7 +674,7 @@ export class Service {
         appName: repo,
         repository: repoUrl,
         environmentVariables: environmentVariablesObj,
-        dns: domain?.[0]?.name ?? `${newDeployment.project.name}`,
+        dns: domain?.name ?? `${newDeployment.project.name}`,
         lrn: deployer!.deployerLrn!,
         apiUrl: deployer!.deployerApiUrl!,
         payment: data.project.txHash,
@@ -1342,6 +1342,12 @@ export class Service {
     return updateResult;
   }
 
+  async getOldestDomainByProjectId(
+    projectId: string,
+  ): Promise<Domain | null> {
+    return await this.db.getOldestDomainByProjectId(projectId)
+  }
+
   async authenticateGitHub(
     code: string,
     user: User,

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>

packages/gql-client/src/client.ts

@@ -393,6 +393,21 @@ export class GQLClient {
     return data;
   }
 
+  async oldestDomain(
+    projectId: string,
+  ): Promise<types.OldestDomainResponse> {
+    const { data } = await this.client.query({
+      query: queries.oldestDomain,
+      variables: {
+        projectId,
+      },
+    });
+
+    console.log({data})
+
+    return data;
+  }
+
   async authenticateGitHub(
     code: string
   ): Promise<types.AuthenticateGitHubResponse> {

packages/gql-client/src/queries.ts

@@ -261,6 +261,19 @@ query ($projectId: String!, $filter: FilterDomainsInput) {
 }
 `;
 
+export const oldestDomain = gql`
+query ($projectId: String!) {
+  oldestDomain(projectId: $projectId) {
+    branch
+    createdAt
+    id
+    name
+    status
+    updatedAt
+  }
+}
+`
+
 export const getAuctionData = gql`
 query ($auctionId: String!) {
   getAuctionData(auctionId: $auctionId){

packages/gql-client/src/types.ts

@@ -236,6 +236,10 @@ export type GetDomainsResponse = {
   domains: Domain[];
 };
 
+export type OldestDomainResponse = {
+  oldestDomain: Domain | null;
+}
+
 export type GetDeployersResponse = {
   deployers: Deployer[];
 };