add a small tip button on the leaderboard that opens the QR code for …

…the users BCH address OWASP-BLT#1819

website/templates/_leaderboard_widget.html

@@ -47,6 +47,13 @@
                     <span class="me-auto text-[10px] mb-[0.8px]">{{ forloop.counter|ordinal|slice:"1:" }}</span>
                 </span>
             </a>
+            <div>
+                <button type="button" id="openModal" class="btn btn-danger w-full" style="color: black;">Send a Tip</button>
+                <dialog id="dialog">
+                    <img id="qr-image" alt="QR Code" height="400" width="400">
+                    <p id="bch-address">BCH: {{leader.userprofile.crypto_address }}</p>
+                </dialog>
+            </div>
         {% endfor %}
     </div>
     <div>
@@ -60,6 +67,12 @@
 </div>
 {% comment %} positions the leaderboard rightmost {% endcomment %}
 <script>
+    document.getElementById('openModal').addEventListener('click', function() {
+        var address = "{{ leader.userprofile.crypto_address }}";
+        var qrUrl = "https://api.qrserver.com/v1/create-qr-code/?data=bitcoincash:" + address + "&size=400x400";
+        document.getElementById('qr-image').src = qrUrl;
+        document.getElementById('dialog').showModal();
+    });
     document.addEventListener('DOMContentLoaded', function() {
       const grid = document.querySelector('.hero-bugs-container');
       const child = document.querySelector('.leaderboard-widget');