Display DNS deployment URLs in overview section (#21)

Part of [Service provider auctions for web deployments](https://www.notion.so/Service-provider-auctions-for-web-deployments-104a6b22d47280dbad51d28aa3a91d75)

- Disable `Deploy` button in configure step if account and deployer not selected
- Update organization slug
- Only display project if current user is project owner

Co-authored-by: IshaVenikar <ishavenikar7@gmail.com>
Co-authored-by: Adw8 <adwaitgharpure@gmail.com>
Reviewed-on: #21

packages/backend/src/resolvers.ts

@@ -22,8 +22,8 @@ export const createResolvers = async (service: Service): Promise<any> => {
         return service.getOrganizationsByUserId(context.user);
       },
 
-      project: async (_: any, { projectId }: { projectId: string }) => {
+      project: async (_: any, { projectId }: { projectId: string }, context: any) => {
-        return service.getProjectById(projectId);
+        return service.getProjectById(context.user, projectId);
       },
 
       projectsInOrganization: async (

packages/backend/src/service.ts

@@ -407,8 +407,13 @@ export class Service {
     return dbOrganizations;
   }
 
-  async getProjectById(projectId: string): Promise<Project | null> {
+  async getProjectById(user: User, projectId: string): Promise<Project | null> {
     const dbProject = await this.db.getProjectById(projectId);
+
+    if (dbProject && dbProject.owner.id !== user.id) {
+      return null;
+    }
+
     return dbProject;
   }
 

packages/backend/test/fixtures/organizations.json

@@ -1,8 +1,8 @@
 [
   {
     "id": "2379cf1f-a232-4ad2-ae14-4d881131cc26",
-    "name": "Snowball Tools",
+    "name": "Deploy Tools",
-    "slug": "snowball-tools-1"
+    "slug": "deploy-tools"
   },
   {
     "id": "7eb9b3eb-eb74-4b53-b59a-69884c82a7fb",

packages/frontend/src/components/projects/create/Configure.tsx

@@ -515,7 +515,7 @@ const Configure = () => {
                 <Button
                   {...buttonSize}
                   type="submit"
-                  disabled={isLoading}
+                  disabled={isLoading || !selectedDeployer || !selectedAccount}
                   rightIcon={
                     isLoading ? (
                       <LoadingIcon className="animate-spin" />
@@ -538,7 +538,9 @@ const Configure = () => {
                     <Button
                       {...buttonSize}
                       type="submit"
-                      disabled={isLoading || isPaymentLoading}
+                      disabled={
+                        isLoading || isPaymentLoading || !selectedAccount
+                      }
                       rightIcon={
                         isLoading || isPaymentLoading ? (
                           <LoadingIcon className="animate-spin" />

packages/frontend/src/components/projects/project/overview/Activity/AuctionCard.tsx

@@ -42,31 +42,31 @@ export const AuctionCard = ({ project }: { project: Project }) => {
       <LoadingIcon className="animate-spin" />
     );
 
-    const checkAuctionStatus = useCallback(async () => {
+  const checkAuctionStatus = useCallback(async () => {
-      const result = await client.getAuctionData(project.auctionId);
+    const result = await client.getAuctionData(project.auctionId);
-      setAuctionStatus(result.status);
+    setAuctionStatus(result.status);
-      setAuctionDetails(result);
+    setAuctionDetails(result);
-    }, [project.auctionId, project.deployers, project.fundsReleased]);
+  }, [project.auctionId, project.deployers, project.fundsReleased]);
 
-    const fetchUpdatedProject = useCallback(async () => {
+  const fetchUpdatedProject = useCallback(async () => {
-      const updatedProject = await client.getProject(project.id);
+    const updatedProject = await client.getProject(project.id);
-      setDeployers(updatedProject.project!.deployers!);
+    setDeployers(updatedProject.project!.deployers!);
-      setFundsStatus(updatedProject.project!.fundsReleased!);
+    setFundsStatus(updatedProject.project!.fundsReleased!);
-    }, [project.id]);
+  }, [project.id]);
 
-    const fetchData = useCallback(async () => {
+  const fetchData = useCallback(async () => {
-      await Promise.all([checkAuctionStatus(), fetchUpdatedProject()]);
+    await Promise.all([checkAuctionStatus(), fetchUpdatedProject()]);
-    }, [checkAuctionStatus, fetchUpdatedProject]);
+  }, [checkAuctionStatus, fetchUpdatedProject]);
 
-    useEffect(() => {
+  useEffect(() => {
+    fetchData();
+
+    const timerId = setInterval(() => {
       fetchData();
+    }, WAIT_DURATION);
 
-      const timerId = setInterval(() => {
+    return () => clearInterval(timerId);
-        fetchData();
+  }, [fetchData]);
-      }, WAIT_DURATION);
-
-      return () => clearInterval(timerId);
-    }, [fetchData]);
 
   const renderAuctionStatus = useCallback(
     () => (

packages/frontend/src/context/WalletConnectContext.tsx

@@ -10,7 +10,6 @@ import {
 import SignClient from '@walletconnect/sign-client';
 import { getSdkError } from '@walletconnect/utils';
 import { SessionTypes } from '@walletconnect/types';
-import { StargateClient } from '@cosmjs/stargate';
 
 import { walletConnectModal } from '../utils/web3modal';
 import {
@@ -46,10 +45,6 @@ export const WalletConnectClientProvider = ({
 
   const isSignClientInitializing = useRef<boolean>(false);
 
-  const createCosmosClient = useCallback(async (endpoint: string) => {
-    return await StargateClient.connect(endpoint);
-  }, []);
-
   const onSessionConnect = useCallback(async (session: SessionTypes.Struct) => {
     setSession(session);
   }, []);
@@ -166,6 +161,11 @@ export const WalletConnectClientProvider = ({
       if (!session) {
         return;
       }
+      if (!session.namespaces['cosmos']) {
+        console.log('Accounts for cosmos namespace not found');
+        return;
+      }
+
       const cosmosAddresses = session.namespaces['cosmos'].accounts;
 
       const cosmosAccounts = cosmosAddresses.map((address) => ({
@@ -178,7 +178,7 @@ export const WalletConnectClientProvider = ({
     };
 
     populateAccounts();
-  }, [session, createCosmosClient]);
+  }, [session]);
 
   useEffect(() => {
     if (!signClient) {

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

@@ -92,9 +92,13 @@ const Id = () => {
                   Open repo
                 </Button>
               </Link>
-              <Button {...buttonSize} className="h-11 transition-colors">
+              {(project.deployments.length > 0) &&
-                Go to app
+                <Link to={`https://${project.name.toLowerCase()}.${project.deployments[0].deployer.baseDomain}`}>
-              </Button>
+                  <Button {...buttonSize} className="h-11 transition-colors">
+                    Go to app
+                  </Button>
+                </Link>
+              }
             </div>
           </div>
           <WavyBorder />

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

@@ -180,14 +180,18 @@ const OverviewTabPanel = () => {
 
             {/* DEPLOYMENT */}
             <OverviewInfo label="Deployment URL" icon={<CursorBoxIcon />}>
+            {project.deployments &&
+              project.deployments.length > 0 &&
+              project.deployments.map((deployment) => (
               <div className="flex gap-2 items-center">
-                <Link to="#">
+                <Link to={`https://${project.name.toLowerCase()}.${deployment.deployer.baseDomain}`}>
                   <span className="text-controls-primary group hover:border-controls-primary transition-colors border-b border-b-transparent flex gap-2 items-center text-sm tracking-tight">
-                    {liveDomain?.name}{' '}
+                    {`https://${project.name.toLowerCase()}.${deployment.deployer.baseDomain}`}
                     <LinkIcon className="group-hover:rotate-45 transition-transform" />
                   </span>
                 </Link>
               </div>
+            ))}
             </OverviewInfo>
 
             {/* DEPLOYMENT DATE */}

packages/frontend/src/stories/Project/Settings/AddEnvironmentVariableRow.stories.tsx

@@ -17,7 +17,7 @@ const meta: Meta<typeof AddEnvironmentVariableRow> = {
         pathParams: { userId: 'me' },
       },
       routing: {
-        path: '/snowball-tools-1/projects/6bb3bec2-d71b-4fc0-9e32-4767f68668f4/settings',
+        path: '/deploy-tools/projects/6bb3bec2-d71b-4fc0-9e32-4767f68668f4/settings',
       },
     }),
   },

packages/frontend/src/stories/Project/Settings/Config.stories.tsx

@@ -17,7 +17,7 @@ const meta: Meta<typeof Config> = {
         pathParams: { userId: 'me' },
       },
       routing: {
-        path: '/snowball-tools-1/projects/6bb3bec2-d71b-4fc0-9e32-4767f68668f4/settings/domains/add/config',
+        path: '/deploy-tools/projects/6bb3bec2-d71b-4fc0-9e32-4767f68668f4/settings/domains/add/config',
       },
     }),
   },

packages/frontend/src/stories/Project/Settings/DeleteProjectDialog.stories.tsx

@@ -18,7 +18,7 @@ const meta: Meta<typeof DeleteProjectDialog> = {
         pathParams: { userId: 'me' },
       },
       routing: {
-        path: '/snowball-tools-1/projects/6bb3bec2-d71b-4fc0-9e32-4767f68668f4/settings',
+        path: '/deploy-tools/projects/6bb3bec2-d71b-4fc0-9e32-4767f68668f4/settings',
       },
     }),
   },

packages/frontend/src/stories/Project/Settings/SetupDomains.stories.tsx

@@ -17,7 +17,7 @@ const meta: Meta<typeof SetupDomain> = {
         pathParams: { userId: 'me' },
       },
       routing: {
-        path: '/snowball-tools-1/projects/6bb3bec2-d71b-4fc0-9e32-4767f68668f4/settings/domains',
+        path: '/deploy-tools/projects/6bb3bec2-d71b-4fc0-9e32-4767f68668f4/settings/domains',
       },
     }),
   },