From d83a02294336b7d0b5f28f285df8a5b429dedb13 Mon Sep 17 00:00:00 2001
From: Justin <jgriffin555@comcast.net>
Date: Mon, 12 Feb 2024 12:25:02 -0600
Subject: [PATCH] feat: add custom domain setup instructions (#41)

---
 components/dashboard.tsx         | 25 ++++++++++++++++++++-
 components/info.tsx              |  5 ++++-
 components/update-deployment.tsx | 38 +++++++++++++++++++++++++++-----
 config/ghostcloud-infra.ts       |  4 ++++
 pages/dashboard.tsx              | 24 ++++++++++++++++++--
 5 files changed, 87 insertions(+), 9 deletions(-)
 create mode 100644 config/ghostcloud-infra.ts

diff --git a/components/dashboard.tsx b/components/dashboard.tsx
index 19a86ed..48095bf 100644
--- a/components/dashboard.tsx
+++ b/components/dashboard.tsx
@@ -3,6 +3,7 @@ import {
   Box,
   Button,
   Center,
+  Icon,
   Table,
   Thead,
   Tbody,
@@ -13,6 +14,8 @@ import {
   IconButton,
   Spinner,
   HStack,
+  Tooltip,
+  useTheme
 } from "@chakra-ui/react"
 import {
   ArrowBackIcon,
@@ -29,8 +32,12 @@ import {
   GHOSTCLOUD_URL_DOMAIN,
   GHOSTCLOUD_URL_SCHEME,
 } from "../config/ghostcloud-chain"
+import {
+  GHOSTCLOUD_INFRA_LOADBALANCER_IP
+} from "../config/ghostcloud-infra"
 import useWeb3AuthStore from "../store/web3-auth"
 import { truncateAddress } from "../helpers/address"
+import { FaInfoCircle } from "react-icons/fa"
 
 function createUrl(name: string, address: string) {
   return `${GHOSTCLOUD_URL_SCHEME}://${name}-${address}.${GHOSTCLOUD_URL_DOMAIN}`
@@ -54,6 +61,7 @@ const Dashboard = () => {
     handlePageClick,
   ] = useFetchMetas()
   const store = useWeb3AuthStore()
+  const theme = useTheme()
 
   useEffect(() => {
     const fetchAddress = async () => {
@@ -128,7 +136,22 @@ const Dashboard = () => {
                 <Tr key={index}>
                   <Td>{meta.name}</Td>
                   <Td>{meta.description}</Td>
-                  <Td>{meta.domain}</Td>
+                  <Td>
+                  {meta.domain && (
+                      <>
+                        {meta.domain}
+                        <Tooltip label={`Set ${meta.domain} DNS A record to ${GHOSTCLOUD_INFRA_LOADBALANCER_IP} to activate custom domain.`}>
+                        <Box as="span" ml="4px">
+                          <Icon
+                            as={FaInfoCircle}
+                            boxSize={4}
+                            color={theme.colors.gray[400]}
+                          />
+                        </Box>
+                        </Tooltip>
+                      </>
+                    )}
+                  </Td>
                   <Td>
                     <Link
                       href={createUrl(meta.name, address) + "/index.html"}
diff --git a/components/info.tsx b/components/info.tsx
index 4766d59..2f9a9e7 100644
--- a/components/info.tsx
+++ b/components/info.tsx
@@ -1,11 +1,14 @@
 import { Box, Icon, Tooltip, useTheme } from "@chakra-ui/react"
 import { FaInfoCircle } from "react-icons/fa"
+import {
+  GHOSTCLOUD_INFRA_LOADBALANCER_IP
+} from "../config/ghostcloud-infra"
 
 export const tips = {
   name: "The randomly generated identifier for your deployment.",
   description:
     "A description for your deployment. This must be between 1-500 characters in length.",
-  domain: "The domain where your site will be hosted.",
+  domain: `The domain where your site will be hosted. Set your domain's DNS A record to ${GHOSTCLOUD_INFRA_LOADBALANCER_IP} to activate custom domain.`,
   memo: "A string associated with a transaction in Web3",
   file: "Select a zip file less that 5MB in size which contains your site build. This archive must contain an index.html file in the root.",
 }
diff --git a/components/update-deployment.tsx b/components/update-deployment.tsx
index 2af7ff6..7dbe2dd 100644
--- a/components/update-deployment.tsx
+++ b/components/update-deployment.tsx
@@ -1,6 +1,8 @@
 import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik"
 import * as Yup from "yup"
 import {
+  Box,
+  Flex,
   Modal,
   ModalOverlay,
   ModalContent,
@@ -18,6 +20,7 @@ import {
 import { useUpdateDeployment } from "../lib/ghostcloud"
 import FileUpload from "./file-upload"
 import { useDisplayError } from "../helpers/errors"
+import Info from "./info"
 
 export interface DeploymentData {
   name: string
@@ -96,31 +99,56 @@ const UpdateDeploymentModal = ({
             <Form>
               <ModalBody>
                 <FormControl isRequired>
-                  <FormLabel>Name</FormLabel>
+                  <Flex align="center">
+                    <FormLabel>Name</FormLabel>
+                    <Box ml="auto">
+                      <Info id="name" />
+                    </Box>
+                  </Flex>
                   <Field as={Input} isReadOnly name="name" type="text" />
                   <ErrorMessage name="name" component={Text} />
                 </FormControl>
 
                 <FormControl isRequired mt={4}>
-                  <FormLabel>Description</FormLabel>
+                  <Flex align="center">
+                    <FormLabel>Description</FormLabel>
+                    <Box ml="auto">
+                      <Info id="description" />
+                    </Box>
+                  </Flex>
                   <Field as={Textarea} name="description" type="textarea" />
                   <ErrorMessage name="description" component={Text} />
                 </FormControl>
 
                 <FormControl mt={4}>
-                  <FormLabel>Domain</FormLabel>
+                  <Flex align="center">
+                    <FormLabel>Domain</FormLabel>
+                    <Box ml="auto">
+                      <Info id="domain" />
+                    </Box>
+                  </Flex>
                   <Field as={Input} name="domain" type="text" />
                   <ErrorMessage name="domain" component={Text} />
                 </FormControl>
 
                 <FormControl mt={4}>
-                  <FormLabel>Memo</FormLabel>
+                  <Flex align="center">
+                    <FormLabel>Memo</FormLabel>
+                    <Box ml="auto">
+                      <Info id="memo" />
+                    </Box>
+                  </Flex>
                   <Field as={Textarea} name="memo" type="textarea" />
                   <ErrorMessage name="memo" component={Text} />
                 </FormControl>
 
                 <FormControl mt={4}>
-                  <FormLabel>File (Max 5MB)</FormLabel>
+                  <Flex align="center">
+                    <FormLabel>File (Max 5MB)</FormLabel>
+                    <Box ml="auto">
+                      <Info id="file" />
+                    </Box>
+                  </Flex>
                   <Field name="file" component={FileUpload} />
                   <ErrorMessage name="file" component={Text} />
                 </FormControl>
diff --git a/config/ghostcloud-infra.ts b/config/ghostcloud-infra.ts
new file mode 100644
index 0000000..e8d502b
--- /dev/null
+++ b/config/ghostcloud-infra.ts
@@ -0,0 +1,4 @@
+// This file contains the configuration for Ghostcloud infrastrucutre components. 
+
+export const GHOSTCLOUD_INFRA_LOADBALANCER_IP = 
+  process.env["NEXT_PUBLIC_GHOSTCLOUD_INFRA_LOADBALANCER_IP"] ?? "35.131.208.174"
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index a826b0f..c83bf2b 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -1,6 +1,14 @@
 import useWeb3AuthStore from "../store/web3-auth"
 import DashboardComponent from "../components/dashboard"
-import { Box, Container, Grid, GridItem } from "@chakra-ui/react"
+import {
+   Alert,
+   AlertIcon,
+   Box, 
+   Center,
+   Container, 
+   Grid, 
+   GridItem 
+} from "@chakra-ui/react"
 
 export default function Dashboard() {
   const store = useWeb3AuthStore()
@@ -17,6 +25,18 @@ export default function Dashboard() {
       </Box>
     </Container>
   ) : (
-    <center style={{ color: "red" }}>Please login to view this page</center>
+
+    <Container maxW="6xl" >
+    <Grid placeItems="center" minH={"10vh"}>
+      <Center>
+        <Box>
+          <Alert status='error'>
+            <AlertIcon />
+            Please login to view this page
+          </Alert>
+        </Box>
+      </Center>
+    </Grid>
+    </Container>
   )
 }