fix fronted part

web_app/api/templates/base.html

@@ -65,5 +65,6 @@
 
     <!-- Custom JS for Wallet Connection and Logout -->
     <script src="{{ url_for('static', path='js/wallet.js') }}"></script>
+    <script src="{{ url_for('static', path='js/form.js') }}"></script>
 </body>
 </html>

web_app/api/templates/index.html

@@ -15,11 +15,11 @@ <h2>Submit your lending details</h2>
             {% endfor %}
         </div>
 
-        <form action="/submit" method="post" onsubmit="return validateAmount()">
+        <form id="lending-form">
             <!-- Token Selection Field -->
             <div class="mb-3">
                 <label for="token" class="form-label">Select Token</label>
-                <select class="form-select" id="token" name="token" onchange="updateMaxBalance()" required>
+                <select class="form-select" id="token" name="token" required>
                     <option selected disabled>Select Token</option>
                     {% for token in balances.keys() %}
                         <option value="{{ token }}">{{ token }}</option>
@@ -47,11 +47,17 @@ <h2>Submit your lending details</h2>
             </div>
 
             <!-- Submit Button -->
-            <button type="submit" class="btn-submit">Submit</button>
+           <button type="button" class="btn-submit" id="submit-btn">Submit</button>
         </form>
     </div>
 {% endblock %}
 
 {% block scripts %}
-    <script src="{{ url_for('static', path='js/form.js') }}"></script>
+        <script> const balances = {
+        {% for token, value in balances.items() %}
+            "{{ token }}": {{ value | safe }},
+        {% endfor %}
+    };
+    </script>
 {% endblock %}
+

web_app/static/js/form.js

@@ -1,25 +1,66 @@
-const balances = {
-    {% for token, value in balances.items() %}
-        "{{ token }}": {{ value }},
-    {% endfor %}
-};
+console.log("JavaScript is loaded");
+alert("JavaScript is working!");
 
+// Update max balance based on the selected token
 function updateMaxBalance() {
     const selectedToken = document.getElementById('token').value;
     const maxBalance = balances[selectedToken] || 0;
     document.getElementById('amount').setAttribute('max', maxBalance);
 }
 
-function validateAmount() {
-    const selectedToken = document.getElementById('token').value;
-    const enteredAmount = parseFloat(document.getElementById('amount').value);
-    const maxBalance = balances[selectedToken] || 0;
+// Validate the entered amount
+// function validateAmount() {
+//     const selectedToken = document.getElementById("token").value;
+//     const enteredAmount = parseFloat(document.getElementById("amount").value);
+//     const maxBalance = balances[selectedToken] || 0;
+//
+//     if (enteredAmount > maxBalance) {
+//         document.getElementById("balance-warning").style.display = "block";
+//         return false;
+//     } else {
+//         document.getElementById("balance-warning").style.display = "none";
+//         return true;
+//     }
+// }
 
-    if (enteredAmount > maxBalance) {
-        document.getElementById('balance-warning').style.display = 'block';
-        return false;
-    } else {
-        document.getElementById('balance-warning').style.display = 'none';
-        return true;
-    }
-}
+document.addEventListener("DOMContentLoaded", function () {
+    console.log("DOM Content Loaded");
+
+    // Attach change event to token select dropdown
+    // document.getElementById("token").addEventListener("change", updateMaxBalance);
+
+    // Attach click event to submit button
+    document.getElementById("submit-btn").onclick = async function () {
+        console.log("Submit button clicked");
+
+        // Get form values
+        const token = document.getElementById("token").value;
+        const amount = document.getElementById("amount").value;
+        const multiplier = document.getElementById("multiplier").value;
+
+        console.log("Form Values:", { token, amount, multiplier });
+
+        try {
+            const response = await fetch(`/transaction-data?token=${token}&amount=${amount}&multiplier=${multiplier}`, {
+                method: "GET",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(`Failed to fetch transaction data: ${errorData.message || "Unknown error"}`);
+            }
+
+            const transactionData = await response.json();
+            console.log("Transaction data received:", transactionData);
+
+            // Implement sendTransaction here
+            await sendTransaction(transactionData);
+        } catch (error) {
+            console.error("Error while submitting form:", error.message);
+            alert(`Failed to submit the form and fetch transaction data: ${error.message}`);
+        }
+    };
+});

web_app/static/js/wallet.js

@@ -35,3 +35,40 @@ async function logout() {
     await fetch("/logout", { method: "POST" });
     window.location.href = "/login";
 }
+
+
+async function sendTransaction(transactionData) {
+    try {
+        const starknet = window.starknet;
+        if (!starknet) {
+            alert("Please connect to the Argent X wallet.");
+            return;
+        }
+
+        // Connect to the wallet if not connected
+        await connectWallet();
+
+        // Extract approve_data and loop_liquidity_data from transactionData
+        const approveData = transactionData[0].approve_data;
+        const loopLiquidityData = transactionData[0].loop_liquidity_data;
+
+        // Construct transaction details based on approve data
+        const transactionDetails = {
+            contractAddress: approveData.to_address,
+            entrypoint: "approve",
+            calldata: [
+                approveData.spender,
+                approveData.amount,
+            ],
+        };
+
+        // Send the transaction via the Starknet provider
+        const response = await starknet.provider.invokeFunction(transactionDetails);
+        console.log("Transaction response:", response);
+
+        alert(`Transaction sent. Hash: ${response.transaction_hash}`);
+    } catch (error) {
+        console.error("Error sending transaction:", error);
+        alert("An error occurred while sending the transaction.");
+    }
+}