Skip to content

Commit 95214b2

Browse files
nitinawarinitinawari
authored
added multiple QR code for available address and show/hide functionality (#3928)
* added mutiple QR code for availabel address and show/hide functionality * removed QR show/hide functionality
1 parent ee8bc84 commit 95214b2

File tree

3 files changed

+169
-55
lines changed

3 files changed

+169
-55
lines changed

‎website/templates/includes/crypto_donation.html

+163-52
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,176 @@
11
{% load static %}
22
<div class="{% if included_in_issue_page %} {% else %} {% endif %}">
3-
<div class="flex flex-row gap-2 items-start">
4-
<img class="w-[80px] h-[80px] p-1 object-cover border-2 border-[#e74c3c] border-solid rounded-md"
5-
src="{% static 'gif/loader.gif' %}"
6-
alt="crypto address qr code"
7-
id="crypto-qr-image"
8-
width="32px"
9-
height="32px">
10-
<div class="w-full" id="crypto">
11-
{% if user.userprofile.btc_address %}
12-
{% include "./tiny-cards.html" with insideIFCondition=True left="BTC" right=user.userprofile.btc_address lessWidth=True editCrypto=True %}
13-
{% endif %}
14-
{% if user.userprofile.bch_address %}
15-
{% include "./tiny-cards.html" with insideIFCondition=True left="BCH" right=user.userprofile.bch_address lessWidth=True editCrypto=True %}
16-
{% endif %}
17-
{% if user.userprofile.eth_address %}
18-
{% include "./tiny-cards.html" with insideIFCondition=True left="ETH" right=user.userprofile.eth_address lessWidth=True editCrypto=True %}
19-
{% endif %}
3+
<div class="flex flex-col gap-3 items-center">
4+
<!-- Crypto currency selection buttons -->
5+
<div class="flex flex-row gap-2 justify-center">
6+
<button id="btn-btc"
7+
class="crypto-btn flex items-center gap-2 px-4 py-2 bg-white border border-gray-300 rounded-lg shadow hover:bg-gray-100 active:bg-gray-200 transition text-sm {% if user.userprofile.btc_address %}border-[#e74c3c]{% else %}opacity-50{% endif %}"
8+
{% if not user.userprofile.btc_address %}disabled{% endif %}>
9+
<svg width="16"
10+
height="16"
11+
viewBox="0 0 2000 2000"
12+
xmlns="http://www.w3.org/2000/svg">
13+
<path d="M1970,1242c-133.48,535.66-676.18,861.68-1212,728S-103.69,1293.89,30,758.18,706.12-103.7,1241.82,30,2103.69,706.16,1970,1242h0Z" fill="#f7931a" />
14+
<path d="M1441,857.53c19.88-133.07-81.44-204.61-220-252.33l45-180.25-109.76-27.34-43.84,175.51c-28.82-7.18-58.44-14-87.88-20.68l44-176.67L958.87,348.43,914,528.61,692.68,473.79,663.48,591s81.42,18.66,79.7,19.82c44.44,11.1,52.5,40.5,51.14,63.82l-123.14,493.8c-5.44,13.5-19.22,33.74-50.28,26,1.1,1.6-79.76-19.46-79.76-19.46l-54.48,125.79,221,55.8-45.42,182.35,109.6,27.34,45-180.39c30,8.12,59,15.62,87.42,22.68l-44.82,179.55,109.74,27.34,45.42-182c187.13,35.4,327.85,21.12,387-148,47.72-136.25-2.34-214.85-100.8-266.13,71.7-16.6,125.7-63.74,140.11-161.17m-250.71,351.52c-34,136.25-263.35,62.62-337.77,44.12l60.26-241.55c74.38,18.56,312.89,55.32,277.55,197.41m34-353.5c-30.94,124-221.91,61-283.89,45.54L994.91,682c62,15.48,261.51,44.3,229.25,173.59" fill="#fff" />
15+
</svg>
16+
BTC
17+
</button>
18+
<button id="btn-bch"
19+
class="crypto-btn flex items-center gap-2 px-4 py-2 bg-white border border-gray-300 rounded-lg shadow hover:bg-gray-100 active:bg-gray-200 transition text-sm {% if user.userprofile.bch_address %}border-[#e74c3c]{% else %}opacity-50{% endif %}"
20+
{% if not user.userprofile.bch_address %}disabled{% endif %}>
21+
<svg width="16"
22+
height="16"
23+
viewBox="0 0 2000 2000"
24+
xmlns="http://www.w3.org/2000/svg">
25+
<circle cx="1000" cy="1000" r="1000" fill="#8dc351" />
26+
<path d="M1408.64,618.17c-42.89-173.21-183-230.58-372.67-190.54L975.85,169.27,854.54,201.8l58.51,253.9c-31.94,8-64.5,15.43-96.89,22.9l-58.89-255.4L636,256.04l60.09,258.33c-26.42,6.13-52.41,12.21-77.67,18.65l-0.02-.09L467.1,567.62l39.76,164.53s91.05-28.06,90.22-25.79c50.28-12.77,74.23,20.46,85.43,38.28l96.12,414.19,15.29,40.58c-5.68,29.11-29.18,35.26-69.06,44.09,3.74,1.87-90.27,27.58-90.27,27.58l-67.48,178.69,141.8-42.76c26.39-7.21,52.59-14.2,78.13-21.36l60.79,261.15,121.11-32.37-60.68-262.2c33.33-8.26,65.81-16.58,97.12-24.72l60.43,260.57,121.29-32.51-60.55-261.77c205.35-70.94,340.77-164.54,304.51-366.51-29.05-162.59-121.88-211.67-246.72-207.17,61.75-80.9,88.95-183.85,52.9-307.61l0,0Zm-52.33,627.51c41.38,177.27-252.47,245.92-346.59,273.06l-116.76-497.21c94.12-22.87,417.68-136.89,463.35,224.15h0Zm-213.82-398.94c37.47,160.44-207.55,223.59-285.35,247.31L747.9,646.45c77.81-18.77,352.11-113.27,394.59,200.28h0Z" fill="#fff" />
27+
</svg>
28+
BCH
29+
</button>
30+
<button id="btn-eth"
31+
class="crypto-btn flex items-center gap-2 px-4 py-2 bg-white border border-gray-300 rounded-lg shadow hover:bg-gray-100 active:bg-gray-200 transition text-sm {% if user.userprofile.eth_address %}border-[#e74c3c]{% else %}opacity-50{% endif %}"
32+
{% if not user.userprofile.eth_address %}disabled{% endif %}>
33+
<svg width="16"
34+
height="16"
35+
viewBox="0 0 784.37 1277.39"
36+
xmlns="http://www.w3.org/2000/svg">
37+
<path fill="#343434" d="m392.07 0-8.57 29.11v844.63l8.57 8.55 392.06-231.75z" />
38+
<path fill="#8C8C8C" d="M392.07 0 0 650.54l392.07 231.75V472.33z" />
39+
<path fill="#3C3C3B" d="m392.07 956.52-4.83 5.89v300.87l4.83 14.1 392.3-552.49z" />
40+
<path fill="#8C8C8C" d="M392.07 1277.38V956.52L0 724.89z" />
41+
<path fill="#141414" d="m392.07 882.29 392.06-231.75-392.06-178.21z" />
42+
<path fill="#393939" d="m0 650.54 392.07 231.75V472.33z" />
43+
</svg>
44+
ETH
45+
</button>
2046
</div>
21-
<div class="hidden w-full" id="no-crypto">
22-
{% include "./tiny-cards.html" with left="BCH" right="qr5yccf7j4dpjekyz3vpawgaarl352n7yv5d5mtzzc" lessWidth=True editCrypto=True %}
23-
<i class=" text-[12px]">No Address, will go to BLT Donation</i>
47+
<!-- QR code container -->
48+
<div class="relative w-[150px] h-[150px]" id="qr-container">
49+
<!-- QR image -->
50+
<img class="w-full h-full object-cover border-2 border-[#e74c3c] border-solid rounded-md"
51+
src="{% static 'gif/loader.gif' %}"
52+
height="150px"
53+
width="150px"
54+
alt="crypto address qr code"
55+
id="crypto-qr-image">
56+
</div>
57+
<!-- Address display -->
58+
<div class="w-full max-w-md" id="crypto-address-container">
59+
<div id="btc-address" class="crypto-address hidden">
60+
{% if user.userprofile.btc_address %}
61+
{% include "./tiny-cards.html" with insideIFCondition=True left="BTC" right=user.userprofile.btc_address lessWidth=True editCrypto=True %}
62+
{% endif %}
63+
</div>
64+
<div id="bch-address" class="crypto-address hidden">
65+
{% if user.userprofile.bch_address %}
66+
{% include "./tiny-cards.html" with insideIFCondition=True left="BCH" right=user.userprofile.bch_address lessWidth=True editCrypto=True %}
67+
{% endif %}
68+
</div>
69+
<div id="eth-address" class="crypto-address hidden">
70+
{% if user.userprofile.eth_address %}
71+
{% include "./tiny-cards.html" with insideIFCondition=True left="ETH" right=user.userprofile.eth_address lessWidth=True editCrypto=True %}
72+
{% endif %}
73+
</div>
74+
<div id="no-crypto" class="hidden">
75+
{% include "./tiny-cards.html" with left="BCH" right="qr5yccf7j4dpjekyz3vpawgaarl352n7yv5d5mtzzc" lessWidth=True editCrypto=True %}
76+
<i class="text-[12px]">No Address, will go to BLT Donation</i>
77+
</div>
2478
</div>
2579
</div>
2680
</div>
2781
<script>
28-
function loadQRCode(){
29-
var btc_address = "{{user.userprofile.btc_address}}";
30-
var bch_address = "{{user.userprofile.bch_address}}";
31-
var eth_address = "{{user.userprofile.eth_address}}";
32-
33-
if(btc_address != "None" && btc_address != ""){
34-
document.getElementById('crypto-qr-image').src = `https://api.qrserver.com/v1/create-qr-code/?data=${btc_address}&size=400x300`;
35-
}else if(bch_address != "None" && bch_address != ""){
36-
document.getElementById('crypto-qr-image').src = `https://api.qrserver.com/v1/create-qr-code/?data=${bch_address}&size=400x300`;
37-
}else if(eth_address != "None" && eth_address != ""){
38-
document.getElementById('crypto-qr-image').src = `https://api.qrserver.com/v1/create-qr-code/?data=${eth_address}&size=400x300`;
39-
}else{
40-
// User has not set their crypto addresses
41-
// Show BLT QR code
42-
var showBLT = document.getElementById("no-crypto");
43-
showBLT.style.cssText = "display: block !important";
44-
var hideUser = document.getElementById("crypto");
45-
hideUser.style.cssText = "display: none !important";
46-
bch_address = "qr5yccf7j4dpjekyz3vpawgaarl352n7yv5d5mtzzc";
47-
document.getElementById('crypto-qr-image').src = `https://api.qrserver.com/v1/create-qr-code/?data=${bch_address}&size=400x300`;
82+
// Global variables
83+
let currentCrypto = null;
84+
const btcAddress = "{{user.userprofile.btc_address}}";
85+
const bchAddress = "{{user.userprofile.bch_address}}";
86+
const ethAddress = "{{user.userprofile.eth_address}}";
87+
const bltAddress = "qr5yccf7j4dpjekyz3vpawgaarl352n7yv5d5mtzzc";
88+
89+
// DOM elements
90+
const cryptoQrImage = document.getElementById('crypto-qr-image');
91+
const btcBtn = document.getElementById('btn-btc');
92+
const bchBtn = document.getElementById('btn-bch');
93+
const ethBtn = document.getElementById('btn-eth');
94+
const btcAddressDiv = document.getElementById('btc-address');
95+
const bchAddressDiv = document.getElementById('bch-address');
96+
const ethAddressDiv = document.getElementById('eth-address');
97+
const noCryptoDiv = document.getElementById('no-crypto');
98+
99+
// Helper functions
100+
function setActiveButton(button) {
101+
document.querySelectorAll('.crypto-btn').forEach(btn => {
102+
btn.classList.remove('bg-[#e74c3c]', 'text-white');
103+
});
104+
105+
button.classList.add('bg-[#e74c3c]', 'text-white');
106+
}
107+
108+
function hideAllAddresses() {
109+
document.querySelectorAll('.crypto-address').forEach(div => {
110+
div.classList.add('hidden');
111+
});
112+
noCryptoDiv.classList.add('hidden');
113+
}
114+
115+
function updateQRCode(address) {
116+
if (address && address !== "None") {
117+
const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?data=${address}&size=400x300`;
118+
cryptoQrImage.src = qrUrl;
119+
return true;
48120
}
49-
121+
return false;
50122
}
51-
loadQRCode();
52-
53-
// Update to handle all copy buttons
54-
const copyTextElements = document.getElementsByClassName("copy_text");
55123

56-
Array.from(copyTextElements).forEach(element => {
57-
element.addEventListener("click", () => {
58-
navigator.clipboard.writeText(element.innerText);
59-
$.notify("Crypto Address Copied to Clipboard!", {
60-
className: "success",
61-
position: "top right"
62-
});
124+
function selectCrypto(type, address) {
125+
currentCrypto = type;
126+
hideAllAddresses();
127+
128+
if (updateQRCode(address)) {
129+
document.getElementById(`${type.toLowerCase()}-address`).classList.remove('hidden');
130+
} else {
131+
// If no address, show BLT donation
132+
noCryptoDiv.classList.remove('hidden');
133+
updateQRCode(bltAddress);
134+
}
135+
136+
setActiveButton(document.getElementById(`btn-${type.toLowerCase()}`));
137+
}
138+
139+
// Button click handlers
140+
btcBtn.addEventListener('click', () => selectCrypto('BTC', btcAddress));
141+
bchBtn.addEventListener('click', () => selectCrypto('BCH', bchAddress));
142+
ethBtn.addEventListener('click', () => selectCrypto('ETH', ethAddress));
143+
144+
// Initialize with preferred crypto
145+
function initializeDefault() {
146+
// preference order: BCH > BTC > ETH
147+
if (bchAddress && bchAddress !== "None") {
148+
selectCrypto('BCH', bchAddress);
149+
} else if (btcAddress && btcAddress !== "None") {
150+
selectCrypto('BTC', btcAddress);
151+
} else if (ethAddress && ethAddress !== "None") {
152+
selectCrypto('ETH', ethAddress);
153+
} else {
154+
// No addresses, show BLT donation
155+
noCryptoDiv.classList.remove('hidden');
156+
updateQRCode(bltAddress);
157+
}
158+
}
159+
160+
document.addEventListener('DOMContentLoaded', initializeDefault);
161+
162+
// Update to handle all copy buttons
163+
document.addEventListener('DOMContentLoaded', () => {
164+
const copyTextElements = document.getElementsByClassName("copy_text");
165+
166+
Array.from(copyTextElements).forEach(element => {
167+
element.addEventListener("click", () => {
168+
navigator.clipboard.writeText(element.innerText);
169+
$.notify("Crypto Address Copied to Clipboard!", {
170+
className: "success",
171+
position: "top right"
172+
});
173+
});
63174
});
64175
});
65176
</script>

‎website/templates/includes/tiny-cards.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{% if insideIFCondition %}<div class="h-[0.5vh]"></div>{% endif %}
2-
<div class="border-[1px] rounded-xl p-1 border-[#DFDCE4] flex flex-wrap text-[13px]">
2+
<div class="border-[2px] rounded-xl p-1 border-[#DFDCE4] flex flex-wrap text-[13px]">
33
<div class="bg-white border-r-[1px] p-1 border-[#DFDCE4] min-w-[40px] text-center">{{ left }}</div>
4-
<div class="bg-[#FAF9FB] p-2 select-all font-[monospace] text-[11px] copy_text flex-1 cursor-pointer break-all"
4+
<div class="bg-[#FAF9FB] p-2 select-all font-[monospace] text-[13px] copy_text flex-1 cursor-pointer break-all"
55
title="Click to copy">{{ right }}</div>
66
{% if left == "BTC" %}
77
<a href="https://blockchair.com/bitcoin/address/{{ right }}"

‎website/templates/profile.html

+4-1
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,10 @@
139139
</div>
140140
</div>
141141
{% endif %}
142-
<div class="select-none">{% include "./includes/crypto_donation.html" %}</div>
142+
<div class="select-none">
143+
<div class="font-bold text-black/90 mb-3">{% trans "Crypto Addresses" %}</div>
144+
{% include "./includes/crypto_donation.html" %}
145+
</div>
143146
<!-- Points Section -->
144147
<div class=" score-container select-none flex gap-2 items-center justify-center bg-gray-100 text-black/80 p-4 rounded-lg w-full cursor-pointer hover:bg-gray-200/80 transition-all duration-200">
145148
<span class=" text-2xl font-bold text-yellow-500">{{ my_score|default:0 }}</span>

0 commit comments

Comments
 (0)