From 05bd7661339d50d812fc828062255f5f9b15db25 Mon Sep 17 00:00:00 2001 From: nabarun Date: Tue, 29 Oct 2024 14:10:01 +0000 Subject: [PATCH] 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 Co-authored-by: Shreerang Kale Co-authored-by: IshaVenikar Reviewed-on: https://git.vdb.to/cerc-io/snowballtools-base/pulls/20 --- packages/backend/src/database.ts | 1 + packages/backend/src/schema.gql | 1 + .../components/projects/create/Configure.tsx | 193 ++++++++++-------- .../project/overview/Activity/AuctionCard.tsx | 48 ++--- .../frontend/src/context/Web3Provider.tsx | 4 +- .../frontend/src/pages/components/modals.tsx | 1 + .../pages/org-slug/projects/id/Overview.tsx | 10 +- .../frontend/src/stories/MockStoriesData.ts | 2 + packages/gql-client/src/queries.ts | 3 + packages/gql-client/src/types.ts | 1 + 10 files changed, 143 insertions(+), 121 deletions(-) diff --git a/packages/backend/src/database.ts b/packages/backend/src/database.ts index bae1769c..71b2323b 100644 --- a/packages/backend/src/database.ts +++ b/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') diff --git a/packages/backend/src/schema.gql b/packages/backend/src/schema.gql index b8a292a6..ff51098a 100644 --- a/packages/backend/src/schema.gql +++ b/packages/backend/src/schema.gql @@ -143,6 +143,7 @@ type Deployer { paymentAddress: String createdAt: String! updatedAt: String! + baseDomain: String } type AuthResult { diff --git a/packages/frontend/src/components/projects/create/Configure.tsx b/packages/frontend/src/components/projects/create/Configure.tsx index f4cd0092..9dca4915 100644 --- a/packages/frontend/src/components/projects/create/Configure.tsx +++ b/packages/frontend/src/components/projects/create/Configure.tsx @@ -70,6 +70,7 @@ const Configure = () => { maxPrice: DEFAULT_MAX_PRICE, lrn: '', numProviders: 1, + variables: [], }, }); @@ -173,100 +174,110 @@ const Configure = () => { const handleFormSubmit = useCallback( async (createFormData: FieldValues) => { - const deployerLrn = createFormData.lrn; - const deployer = deployers.find( - (deployer) => deployer.deployerLrn === deployerLrn, - ); - - let amount: string; - let senderAddress: string; - let txHash: string; - if (createFormData.option === 'LRN' && !deployer?.minimumPayment) { - toast({ - id: 'no-payment-required', - title: 'No payment required. Deploying app...', - variant: 'info', - onDismiss: dismiss, - }); - - txHash = ''; - senderAddress = ''; - } else { - if (!selectedAccount) return; - - senderAddress = selectedAccount.split(':')[2]; - - if (createFormData.option === 'LRN') { - amount = deployer?.minimumPayment!; - } else { - amount = ( - createFormData.numProviders * createFormData.maxPrice - ).toString(); - } - - const amountToBePaid = amount.replace(/\D/g, '').toString(); - - const txHashResponse = await cosmosSendTokensHandler( - selectedAccount, - amountToBePaid, + try { + const deployerLrn = createFormData.lrn; + const deployer = deployers.find( + (deployer) => deployer.deployerLrn === deployerLrn, ); - if (!txHashResponse) { - console.error('Tx not successful'); - return; + let amount: string; + let senderAddress: string; + let txHash: string; + if (createFormData.option === 'LRN' && !deployer?.minimumPayment) { + toast({ + id: 'no-payment-required', + title: 'No payment required. Deploying app...', + variant: 'info', + onDismiss: dismiss, + }); + + txHash = ''; + senderAddress = ''; + } else { + if (!selectedAccount) return; + + senderAddress = selectedAccount.split(':')[2]; + + if (createFormData.option === 'LRN') { + amount = deployer?.minimumPayment!; + } else { + amount = ( + createFormData.numProviders * createFormData.maxPrice + ).toString(); + } + + const amountToBePaid = amount.replace(/\D/g, '').toString(); + + const txHashResponse = await cosmosSendTokensHandler( + selectedAccount, + amountToBePaid, + ); + + if (!txHashResponse) { + console.error('Tx not successful'); + return; + } + + txHash = txHashResponse; + + const isTxHashValid = await verifyTx( + senderAddress, + txHash, + amountToBePaid.toString(), + ); + + if (isTxHashValid === false) { + console.error('Invalid Tx hash', txHash); + return; + } } - txHash = txHashResponse; + const environmentVariables = createFormData.variables.map( + (variable: any) => { + return { + key: variable.key, + value: variable.value, + environments: Object.entries(createFormData.environment) + .filter(([, value]) => value === true) + .map(([key]) => key.charAt(0).toUpperCase() + key.slice(1)), + }; + }, + ); - const isTxHashValid = await verifyTx( + const projectId = await createProject( + createFormData, + environmentVariables, senderAddress, txHash, - amountToBePaid.toString(), ); - if (isTxHashValid === false) { - console.error('Invalid Tx hash', txHash); - return; + await client.getEnvironmentVariables(projectId); + + if (templateId) { + createFormData.option === 'Auction' + ? navigate( + `/${orgSlug}/projects/create/success/${projectId}?isAuction=true`, + ) + : navigate( + `/${orgSlug}/projects/create/template/deploy?projectId=${projectId}&templateId=${templateId}`, + ); + } else { + createFormData.option === 'Auction' + ? navigate( + `/${orgSlug}/projects/create/success/${projectId}?isAuction=true`, + ) + : navigate( + `/${orgSlug}/projects/create/deploy?projectId=${projectId}`, + ); } - } - - const environmentVariables = createFormData.variables.map( - (variable: any) => { - return { - key: variable.key, - value: variable.value, - environments: Object.entries(createFormData.environment) - .filter(([, value]) => value === true) - .map(([key]) => key.charAt(0).toUpperCase() + key.slice(1)), - }; - }, - ); - - const projectId = await createProject( - createFormData, - environmentVariables, - senderAddress, - txHash, - ); - - await client.getEnvironmentVariables(projectId); - - if (templateId) { - createFormData.option === 'Auction' - ? navigate( - `/${orgSlug}/projects/create/success/${projectId}?isAuction=true`, - ) - : navigate( - `/${orgSlug}/projects/create/template/deploy?projectId=${projectId}&templateId=${templateId}`, - ); - } else { - createFormData.option === 'Auction' - ? navigate( - `/${orgSlug}/projects/create/success/${projectId}?isAuction=true`, - ) - : navigate( - `/${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 deployer = deployers.find((d) => d.deployerLrn === selectedLrn); - setSelectedDeployer(deployer); - }, [deployers]); + const onDeployerChange = useCallback( + (selectedLrn: string) => { + const deployer = deployers.find((d) => d.deployerLrn === selectedLrn); + setSelectedDeployer(deployer); + }, + [deployers], + ); const cosmosSendTokensHandler = useCallback( async (selectedAccount: string, amount: string) => { @@ -496,8 +510,7 @@ const Configure = () => { - {selectedOption === 'LRN' && - !selectedDeployer?.minimumPayment ? ( + {selectedOption === 'LRN' && !selectedDeployer?.minimumPayment ? (
diff --git a/packages/frontend/src/context/Web3Provider.tsx b/packages/frontend/src/context/Web3Provider.tsx index 1d3b0854..7ab1229f 100644 --- a/packages/frontend/src/context/Web3Provider.tsx +++ b/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'], }; diff --git a/packages/frontend/src/pages/components/modals.tsx b/packages/frontend/src/pages/components/modals.tsx index cf734d31..1eb60c6c 100644 --- a/packages/frontend/src/pages/components/modals.tsx +++ b/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: { diff --git a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx index 9346deb0..8e840bb3 100644 --- a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx +++ b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx @@ -129,16 +129,16 @@ const OverviewTabPanel = () => { {project.name} - {project.baseDomains && - project.baseDomains.length > 0 && - project.baseDomains.map((baseDomain, index) => ( + {project.deployments && + project.deployments.length > 0 && + project.deployments.map((deployment, index) => (

- {baseDomain} + {deployment.deployer.baseDomain}

))} diff --git a/packages/frontend/src/stories/MockStoriesData.ts b/packages/frontend/src/stories/MockStoriesData.ts index d6dbb544..50f11469 100644 --- a/packages/frontend/src/stories/MockStoriesData.ts +++ b/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', diff --git a/packages/gql-client/src/queries.ts b/packages/gql-client/src/queries.ts index 467e0583..48760dbd 100644 --- a/packages/gql-client/src/queries.ts +++ b/packages/gql-client/src/queries.ts @@ -57,6 +57,9 @@ query ($projectId: String!) { commitHash createdAt environment + deployer { + baseDomain + } domain { status branch diff --git a/packages/gql-client/src/types.ts b/packages/gql-client/src/types.ts index b4685706..3c690fc6 100644 --- a/packages/gql-client/src/types.ts +++ b/packages/gql-client/src/types.ts @@ -119,6 +119,7 @@ export type Deployer = { deployerLrn: string; deployerId: string; deployerApiUrl: string; + baseDomain: string; minimumPayment: string | null; }