Update balance message if funds are sufficient

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

@@ -432,6 +432,12 @@ const Configure = () => {
     fetchDeployers();
   }, []);
 
+  useEffect(() => {
+    if(isBalanceSufficient) {
+      setBalanceMessage(undefined);
+    }
+  }, [isBalanceSufficient]);
+
   return (
     <div className="space-y-7 px-4 py-6">
       <div className="flex justify-between mb-6">
@@ -626,15 +632,13 @@ const Configure = () => {
                       <Button
                         {...buttonSize}
                         shape="default"
-                        onClick={() => setBalanceMessage('Waiting for payment')}
+                        onClick={(e: any) => {
+                          e.preventDefault();
+                          setBalanceMessage('Waiting for payment');
+                          window.open('https://store.laconic.com', '_blank', 'noopener,noreferrer');
+                        }}
                       >
-                        <a
+                        Buy prepaid service
-                          href="https://store.laconic.com"
-                          target="_blank"
-                          rel="noopener noreferrer"
-                        >
-                          Buy prepaid service
-                        </a>
                       </Button>
                       <p className="text-gray-700 dark:text-gray-300">
                         {balanceMessage !== undefined ? (
@@ -661,7 +665,7 @@ const Configure = () => {
           setIsDataReceived={setIsAccountsDataReceived}
           isVisible={isFrameVisible}
         />
-        <CheckBalanceIframe onBalanceChange={setIsBalanceSufficient} amount={amountToBePaid} isPollingEnabled={true}/>
+        <CheckBalanceIframe onBalanceChange={setIsBalanceSufficient} amount={amountToBePaid} isPollingEnabled={true} />
       </div>
     </div>
   );