Show service provider IP address while creating custom domain

packages/backend/src/schema.gql

@@ -250,11 +250,11 @@ type Auction {
 }
 
 type DNSRecordAttributes {
-  name: string;
+  name: String
-  value: string;
+  value: String
-  request: string;
+  request: String
-  resourceType: string;
+  resourceType: String
-  version: string;
+  version: String
 }
 
 input AuctionParams {

packages/frontend/src/components/projects/project/settings/DomainCard.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Domain, DomainStatus, Project } from 'gql-client';
 
 import {
@@ -23,6 +23,7 @@ import {
 } from 'components/shared/CustomIcon';
 import { Heading } from 'components/shared/Heading';
 import { Button } from 'components/shared/Button';
+import { useParams } from 'react-router-dom';
 
 enum RefreshStatus {
   IDLE,
@@ -56,9 +57,11 @@ const DomainCard = ({
   onUpdate,
 }: DomainCardProps) => {
   const { toast, dismiss } = useToast();
+  const { id } = useParams();
   const [refreshStatus, SetRefreshStatus] = useState(RefreshStatus.IDLE);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [editDialogOpen, setEditDialogOpen] = useState(false);
+  const [IPAddress, setIPAddress] = useState<string>();
 
   const client = useGQLClient();
 
@@ -83,6 +86,26 @@ const DomainCard = ({
     }
   };
 
+  useEffect(() => {
+    const fetchDNSData = async () => {
+      if (id === undefined) {
+        toast({
+          id: 'domain_cannot_find_project',
+          title: 'Cannot find project',
+          variant: 'error',
+          onDismiss: dismiss,
+        });
+        return;
+      }
+
+      const dnsData = await client.getLatestDNSDataByProjectId(id);
+
+      setIPAddress(dnsData.value);
+    };
+
+    fetchDNSData();
+  }, [id, client]);
+
   return (
     <>
       <div className="flex justify-between py-3">
@@ -192,7 +215,7 @@ const DomainCard = ({
               <tr>
                 <td>{DOMAIN_RECORD.type}</td>
                 <td>{DOMAIN_RECORD.name}</td>
-                <td>{DOMAIN_RECORD.value}</td>
+                <td>{IPAddress}</td>
               </tr>
             </tbody>
           </table>

packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/Config.tsx

@@ -7,6 +7,7 @@ import { InlineNotification } from 'components/shared/InlineNotification';
 import { ArrowRightCircleIcon } from 'components/shared/CustomIcon';
 import { ProjectSettingContainer } from 'components/projects/project/settings/ProjectSettingContainer';
 import { useToast } from 'components/shared/Toast';
+import { useEffect, useState } from 'react';
 
 const Config = () => {
   const { id, orgSlug } = useParams();
@@ -16,6 +17,8 @@ const Config = () => {
   const primaryDomainName = searchParams.get('name');
   const { toast, dismiss } = useToast();
 
+  const [IPAddress, setIPAddress] = useState<string>();
+
   const handleSubmitDomain = async () => {
     if (primaryDomainName === null) {
       toast({
@@ -59,6 +62,26 @@ const Config = () => {
     }
   };
 
+  useEffect(() => {
+    const fetchDNSData = async () => {
+      if (id === undefined) {
+        toast({
+          id: 'domain_cannot_find_project',
+          title: 'Cannot find project',
+          variant: 'error',
+          onDismiss: dismiss,
+        });
+        return;
+      }
+
+      const dnsData = await client.getLatestDNSDataByProjectId(id);
+
+      setIPAddress(dnsData.value);
+    };
+
+    fetchDNSData();
+  }, [id, client]);
+
   // TODO: Figure out DNS Provider if possible and update appropriatly
   return (
     <ProjectSettingContainer headingText="Setup domain name">
@@ -79,13 +102,7 @@ const Config = () => {
           <Table.Row>
             <Table.RowHeaderCell>A</Table.RowHeaderCell>
             <Table.Cell>@</Table.Cell>
-            <Table.Cell>IP.OF.THE.SP</Table.Cell>
+            <Table.Cell>{IPAddress}</Table.Cell>
-          </Table.Row>
-
-          <Table.Row>
-            <Table.RowHeaderCell>CNAME</Table.RowHeaderCell>
-            <Table.Cell>subdomain</Table.Cell>
-            <Table.Cell>domain.of.the.sp</Table.Cell>
           </Table.Row>
         </Table.Body>
       </Table>