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

@@ -70,7 +70,7 @@ const Configure = () => {
       maxPrice: DEFAULT_MAX_PRICE,
       lrn: '',
       numProviders: 1,
-      variables: []
+      variables: [],
     },
   });
 
@@ -175,110 +175,110 @@ const Configure = () => {
   const handleFormSubmit = useCallback(
     async (createFormData: FieldValues) => {
       try {
-      const deployerLrn = createFormData.lrn;
+        const deployerLrn = createFormData.lrn;
-      const deployer = deployers.find(
+        const deployer = deployers.find(
-        (deployer) => deployer.deployerLrn === deployerLrn,
+          (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,
         );
 
-        if (!txHashResponse) {
+        let amount: string;
-          console.error('Tx not successful');
+        let senderAddress: string;
-          return;
+        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) {
+        await client.getEnvironmentVariables(projectId);
-          console.error('Invalid Tx hash', txHash);
+
-          return;
+        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,
+        });
       }
-
-      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],
   );
@@ -292,10 +292,13 @@ const Configure = () => {
     setSelectedAccount(account);
   }, []);
 
-  const onDeployerChange = useCallback((selectedLrn: string) => {
+  const onDeployerChange = useCallback(
-    const deployer = deployers.find((d) => d.deployerLrn === selectedLrn);
+    (selectedLrn: string) => {
-    setSelectedDeployer(deployer);
+      const deployer = deployers.find((d) => d.deployerLrn === selectedLrn);
-  }, [deployers]);
+      setSelectedDeployer(deployer);
+    },
+    [deployers],
+  );
 
   const cosmosSendTokensHandler = useCallback(
     async (selectedAccount: string, amount: string) => {
@@ -507,8 +510,7 @@ const Configure = () => {
               <EnvironmentVariablesForm />
             </div>
 
-            {selectedOption === 'LRN' &&
+            {selectedOption === 'LRN' && !selectedDeployer?.minimumPayment ? (
-            !selectedDeployer?.minimumPayment ? (
               <div>
                 <Button
                   {...buttonSize}

packages/frontend/src/context/Web3Provider.tsx

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

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

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

packages/frontend/src/stories/MockStoriesData.ts

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