Display project URLs in Overview tab (#20)

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

- Fix project create not working after failed tx
- Poll for project details for auction details
- Update wallet connect metadata

![image](/attachments/cd0217c9-8a2f-4bc5-ad4c-2654fa92f958)

Co-authored-by: Neeraj <neeraj.rtly@gmail.com>
Co-authored-by: Shreerang Kale <shreerangkale@gmail.com>
Co-authored-by: IshaVenikar <ishavenikar7@gmail.com>
Reviewed-on: #20

packages/backend/src/database.ts

@@ -140,6 +140,7 @@ export class Database {
       )
       .leftJoinAndSelect('deployments.createdBy', 'user')
       .leftJoinAndSelect('deployments.domain', 'domain')
+      .leftJoinAndSelect('deployments.deployer', 'deployer')
       .leftJoinAndSelect('project.owner', 'owner')
       .leftJoinAndSelect('project.deployers', 'deployers')
       .leftJoinAndSelect('project.organization', 'organization')

packages/backend/src/schema.gql

@@ -143,6 +143,7 @@ type Deployer {
   paymentAddress: String
   createdAt: String!
   updatedAt: String!
+  baseDomain: String
 }
 
 type AuthResult {

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

@@ -70,6 +70,7 @@ const Configure = () => {
       maxPrice: DEFAULT_MAX_PRICE,
       lrn: '',
       numProviders: 1,
+      variables: [],
     },
   });
 
@@ -173,6 +174,7 @@ const Configure = () => {
 
   const handleFormSubmit = useCallback(
     async (createFormData: FieldValues) => {
+      try {
         const deployerLrn = createFormData.lrn;
         const deployer = deployers.find(
           (deployer) => deployer.deployerLrn === deployerLrn,
@@ -268,6 +270,15 @@ const Configure = () => {
                 `/${orgSlug}/projects/create/deploy?projectId=${projectId}`,
               );
         }
+      } catch (error) {
+        console.error(error);
+        toast({
+          id: 'error-deploying-app',
+          title: 'Error deploying app',
+          variant: 'error',
+          onDismiss: dismiss,
+        });
+      }
     },
     [client, createProject, dismiss, toast],
   );
@@ -281,10 +292,13 @@ const Configure = () => {
     setSelectedAccount(account);
   }, []);
 
-  const onDeployerChange = useCallback((selectedLrn: string) => {
+  const onDeployerChange = useCallback(
+    (selectedLrn: string) => {
       const deployer = deployers.find((d) => d.deployerLrn === selectedLrn);
       setSelectedDeployer(deployer);
-  }, [deployers]);
+    },
+    [deployers],
+  );
 
   const cosmosSendTokensHandler = useCallback(
     async (selectedAccount: string, amount: string) => {
@@ -496,8 +510,7 @@ const Configure = () => {
               <EnvironmentVariablesForm />
             </div>
 
-            {selectedOption === 'LRN' &&
-            !selectedDeployer?.minimumPayment ? (
+            {selectedOption === 'LRN' && !selectedDeployer?.minimumPayment ? (
               <div>
                 <Button
                   {...buttonSize}

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

@@ -46,27 +46,27 @@ export const AuctionCard = ({ project }: { project: Project }) => {
       const result = await client.getAuctionData(project.auctionId);
       setAuctionStatus(result.status);
       setAuctionDetails(result);
-    setDeployers(project.deployers);
-    setFundsStatus(project.fundsReleased);
-  }, []);
+    }, [project.auctionId, project.deployers, project.fundsReleased]);
+
+    const fetchUpdatedProject = useCallback(async () => {
+      const updatedProject = await client.getProject(project.id);
+      setDeployers(updatedProject.project!.deployers!);
+      setFundsStatus(updatedProject.project!.fundsReleased!);
+    }, [project.id]);
+
+    const fetchData = useCallback(async () => {
+      await Promise.all([checkAuctionStatus(), fetchUpdatedProject()]);
+    }, [checkAuctionStatus, fetchUpdatedProject]);
 
     useEffect(() => {
-    if (auctionStatus !== 'completed') {
-      checkAuctionStatus();
-      const intervalId = setInterval(checkAuctionStatus, WAIT_DURATION);
-      return () => clearInterval(intervalId);
-    }
+      fetchData();
 
-    if (auctionStatus === 'completed') {
-      const fetchUpdatedProject = async () => {
-        // Wait for 5 secs since the project is not immediately updated with deployer LRNs
-        await new Promise((resolve) => setTimeout(resolve, WAIT_DURATION));
-        const updatedProject = await client.getProject(project.id);
-        setDeployers(updatedProject.project?.deployers || []);
-      };
-      fetchUpdatedProject();
-    }
-  }, [auctionStatus, client]);
+      const timerId = setInterval(() => {
+        fetchData();
+      }, WAIT_DURATION);
+
+      return () => clearInterval(timerId);
+    }, [fetchData]);
 
   const renderAuctionStatus = useCallback(
     () => (
@@ -134,7 +134,7 @@ export const AuctionCard = ({ project }: { project: Project }) => {
                       size="xs"
                       type={fundsStatus ? 'positive' : 'emphasized'}
                     >
-                      {fundsStatus ? 'RELEASED' : 'LOCKED'}
+                      {fundsStatus ? 'RELEASED' : 'WAITING'}
                     </Tag>
                   </div>
                 </div>

packages/frontend/src/context/Web3Provider.tsx

@@ -31,8 +31,8 @@ const axiosInstance = axios.create({
   withCredentials: true,
 });
 const metadata = {
-  name: 'Web3Modal',
-  description: 'Snowball Web3Modal',
+  name: 'Deploy App Auth',
+  description: '',
   url: window.location.origin,
   icons: ['https://avatars.githubusercontent.com/u/37784886'],
 };

packages/frontend/src/pages/components/modals.tsx

@@ -41,6 +41,7 @@ const deployment: Deployment = {
     deployerId: 'bafyreicrtgmkir4evvvysxdqxddf2ftdq2wrzuodgvwnxr4rmubi4obdfu',
     deployerLrn: 'lrn://example/deployers/webapp-deployer-api.example.com',
     minimumPayment: '1000alnt',
+    baseDomain: 'pwa.example.com',
   },
   status: DeploymentStatus.Ready,
   createdBy: {

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

@@ -129,16 +129,16 @@ const OverviewTabPanel = () => {
             <Heading className="text-lg leading-6 font-medium truncate">
               {project.name}
             </Heading>
-            {project.baseDomains &&
-              project.baseDomains.length > 0 &&
-              project.baseDomains.map((baseDomain, index) => (
+            {project.deployments &&
+              project.deployments.length > 0 &&
+              project.deployments.map((deployment, index) => (
                 <p>
                   <a
                     key={index}
-                    href={`https://${project.name.toLowerCase()}.${baseDomain}`}
+                    href={`https://${project.name.toLowerCase()}.${deployment.deployer.baseDomain}`}
                     className="text-sm text-elements-low-em tracking-tight truncate"
                   >
-                    {baseDomain}
+                    {deployment.deployer.baseDomain}
                   </a>
                 </p>
               ))}

packages/frontend/src/stories/MockStoriesData.ts

@@ -107,6 +107,7 @@ export const deployment0: Deployment = {
     deployerId: 'bafyreicrtgmkir4evvvysxdqxddf2ftdq2wrzuodgvwnxr4rmubi4obdfu',
     deployerLrn: 'lrn://deployer.apps.snowballtools.com ',
     minimumPayment: '1000alnt',
+    baseDomain: 'pwa.example.com',
   },
   applicationDeploymentRequestId:
     'bafyreiaycvq6imoppnpwdve4smj6t6ql5svt5zl3x6rimu4qwyzgjorize',
@@ -134,6 +135,7 @@ export const project: Project = {
       deployerId: 'bafyreicrtgmkir4evvvysxdqxddf2ftdq2wrzuodgvwnxr4rmubi4obdfu',
       deployerLrn: 'lrn://deployer.apps.snowballtools.com ',
       minimumPayment: '1000alnt',
+      baseDomain: 'pwa.example.com',
     },
   ],
   paymentAddress: '0x657868687686rb4787987br8497298r79284797487',

packages/gql-client/src/queries.ts

@@ -57,6 +57,9 @@ query ($projectId: String!) {
       commitHash
       createdAt
       environment
+      deployer {
+        baseDomain
+      }
       domain {
         status
         branch

packages/gql-client/src/types.ts

@@ -119,6 +119,7 @@ export type Deployer = {
   deployerLrn: string;
   deployerId: string;
   deployerApiUrl: string;
+  baseDomain: string;
   minimumPayment: string | null;
 }