Display wallet connect only when payment is required

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

@@ -35,12 +35,15 @@ type ConfigureDeploymentFormValues = {
 type ConfigureFormValues = ConfigureDeploymentFormValues &
   EnvironmentVariablesFormValues;
 
+const DEFAULT_MAX_PRICE = '10000';
+
 const Configure = () => {
   const { signClient, session, accounts } = useWalletConnectClient();
 
   const [isLoading, setIsLoading] = useState(false);
   const [deployers, setDeployers] = useState<Deployer[]>([]);
   const [selectedAccount, setSelectedAccount] = useState<string>();
+  const [selectedDeployer, setSelectedDeployer] = useState<Deployer>();
   const [isPaymentLoading, setIsPaymentLoading] = useState(false);
   const [isPaymentDone, setIsPaymentDone] = useState(false);
 
@@ -64,9 +67,9 @@ const Configure = () => {
   const methods = useForm<ConfigureFormValues>({
     defaultValues: {
       option: 'Auction',
-      maxPrice: '0',
+      maxPrice: DEFAULT_MAX_PRICE,
       lrn: '',
-      numProviders: 0,
+      numProviders: 1,
     },
   });
 
@@ -214,12 +217,12 @@ const Configure = () => {
 
         txHash = txHashResponse;
 
-        const isTxHashValid = verifyTx(
+        const isTxHashValid = await verifyTx(
           senderAddress,
           txHash,
           amount.toString(),
         );
-        if (!isTxHashValid) {
+        if (isTxHashValid === false) {
           console.error('Invalid Tx hash', txHash);
           return;
         }
@@ -276,6 +279,11 @@ const Configure = () => {
     setSelectedAccount(account);
   }, []);
 
+  const onDeployerChange = useCallback((selectedLrn: string) => {
+    const deployer = deployers.find((d) => d.deployerLrn === selectedLrn);
+    setSelectedDeployer(deployer);
+  }, [deployers]);
+
   const cosmosSendTokensHandler = useCallback(
     async (selectedAccount: string, amount: string) => {
       if (!signClient || !session || !selectedAccount) {
@@ -410,7 +418,10 @@ const Configure = () => {
                       </span>
                       <Select
                         value={value}
-                        onChange={(event) => onChange(event.target.value)}
+                        onChange={(event) => {
+                          onChange(event.target.value);
+                          onDeployerChange(event.target.value);
+                        }}
                         displayEmpty
                         size="small"
                       >
@@ -482,6 +493,27 @@ const Configure = () => {
             <div className="p-4 bg-slate-100 rounded-lg mb-6">
               <EnvironmentVariablesForm />
             </div>
+
+            {selectedOption === 'LRN' &&
+            !selectedDeployer?.minimumPayment ? (
+              <div>
+                <Button
+                  {...buttonSize}
+                  type="submit"
+                  disabled={isLoading}
+                  rightIcon={
+                    isLoading ? (
+                      <LoadingIcon className="animate-spin" />
+                    ) : (
+                      <ArrowRightCircleFilledIcon />
+                    )
+                  }
+                >
+                  {isLoading ? 'Deploying' : 'Deploy'}
+                </Button>
+              </div>
+            ) : (
+              <>
                 <Heading as="h4" className="md:text-lg font-medium mb-3">
                   Connect to your wallet
                 </Heading>
@@ -505,11 +537,13 @@ const Configure = () => {
                           ? 'Transaction Requested'
                           : 'Pay and Deploy'
                         : isLoading
-                      ? 'Deploying repo'
+                          ? 'Deploying'
                           : 'Deploy'}
                     </Button>
                   </div>
                 )}
+              </>
+            )}
           </form>
         </FormProvider>
       </div>

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

@@ -1,4 +1,5 @@
 import { Select, Option } from '@snowballtools/material-tailwind-react-fork';
+
 import { Button } from '../../shared/Button';
 import { useWalletConnectClient } from 'context/WalletConnectContext';
 

packages/frontend/src/context/WalletConnectContext.tsx

@@ -138,8 +138,8 @@ export const WalletConnectClientProvider = ({
       const signClient = await SignClient.init({
         projectId: VITE_WALLET_CONNECT_ID,
         metadata: {
-          name: 'Snowball',
+          name: 'Deploy App',
-          description: 'App for deploying apps',
+          description: '',
           url: window.location.href,
           icons: ['https://avatars.githubusercontent.com/u/92608123'],
         },

packages/frontend/src/utils/web3modal.ts

@@ -1,7 +1,8 @@
 import { WalletConnectModal } from '@walletconnect/modal';
+
 import { VITE_WALLET_CONNECT_ID } from 'utils/constants';
 
 export const walletConnectModal = new WalletConnectModal({
-  projectId: VITE_WALLET_CONNECT_ID!,
+  projectId: VITE_WALLET_CONNECT_ID,
-  chains: ['cosmos:theta-testnet-001', 'cosmos:laconic_9000-1'],
+  chains: [],
 });