feat: Added modal and fixed brave wallet errors

templates/index.html

@@ -103,7 +103,68 @@
                         <div class="mb-3">
                             <p>Select your vote or split your votes between options.</p>{{options|safe}}
                         </div>
-                        <div class="mb-3"><button class="btn btn-primary" type="submit" style="margin-top: 25px;" {% if not enabled %}disabled{% endif %}>Vote</button></div>
+                        <div class="mb-3"><button type="button" style="margin-top: 25px;" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#confirmationModal" {% if not enabled %}disabled{% endif %}>Vote</button>
+<!-- <button class="btn btn-primary" type="submit" style="margin-top: 25px;" {% if not enabled %}disabled{% endif %}>Vote</button> -->
+
+
+<div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content" style="background-color:black;">
+      <div class="modal-header">
+        <h5 class="modal-title" id="confirmationModalLabel">Confirmation</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        Are you sure you want to submit your vote?
+          <p>Your vote is:</p>
+          <span id="voteContent"></span>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
+        <button id="confirmButton" type="button" class="btn btn-primary" data-bs-dismiss="modal">Yes</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+    document.getElementById('confirmationModal').addEventListener('show.bs.modal', function(event) {
+        const inputs = document.querySelectorAll('#advancedOptions input');
+
+        // Store values in json with matching names
+        const options = {};
+        inputs.forEach(input => {
+            if (input.value.trim() === '') {
+        input.value = '0';
+    }
+            
+            options[input.name] = input.value;
+        }
+        );
+        // Make sure the votes total 100
+        let total = 0;
+        let vote = "";
+        for (const key in options) {
+            if (options.hasOwnProperty(key)) {
+                const element = options[key];
+                total += parseInt(element);
+                // If value less than 0 or greater than 100, alert and return
+                if (element < 0 || element > 100) {
+                    alert('Votes must be between 0 and 100');
+                    return;
+                }
+                vote += "<br>" + element + "% for " +key;
+            }
+        }
+        if (total > 100) {
+            alert('Votes must be less than or equal to 100');
+            return;
+        }
+        vote += "<br><br>"+total+"% of voting power used";
+        
+        document.getElementById('voteContent').innerHTML = vote;
+    });
+</script></div>
                     </form>
                 </div>
             </div>