fix timer
This commit is contained in:
parent
a942a8efd1
commit
d56cf40522
|
|
@ -16,7 +16,8 @@ class Blockonomics {
|
|||
// Bind the method to the instance
|
||||
this.copyToClipboard = this.copyToClipboard.bind(this);
|
||||
this.refreshBTCPrice = this.refreshBTCPrice.bind(this);
|
||||
|
||||
this.fetchAndDisplayQRCode = this.fetchAndDisplayQRCode.bind(this);
|
||||
this.startTimer = this.startTimer.bind(this);
|
||||
}
|
||||
|
||||
copyToClipboard(elementId, passedElement, shouldGrabNextElementSibling) {
|
||||
|
|
@ -48,6 +49,54 @@ class Blockonomics {
|
|||
}, 5000);
|
||||
}
|
||||
|
||||
|
||||
async fetchAndDisplayQRCode (newBtcAmount = null) {
|
||||
try {
|
||||
const btcAddress = document.querySelector('meta[name="btc_address"]').content;
|
||||
const btcAmount = newBtcAmount || '{{$btc_amount}}';
|
||||
const qrString = encodeURIComponent(`bitcoin:${btcAddress}?amount=${btcAmount}`);
|
||||
const response = await fetch(`/api/v1/get-blockonomics-qr-code?qr_string=${qrString}`);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
const svgText = await response.text();
|
||||
document.getElementById('qrcode-container').innerHTML = svgText;
|
||||
} catch (error) {
|
||||
console.error('Error fetching QR code:', error);
|
||||
document.getElementById('qrcode-container').textContent = 'Error loading QR code';
|
||||
}
|
||||
};
|
||||
|
||||
startTimer = (seconds) => {
|
||||
const countDownDate = new Date().getTime() + seconds * 1000;
|
||||
document.getElementById("countdown").innerHTML = "10" + ":" + "00" + " min";
|
||||
|
||||
const updateCountdown = () => {
|
||||
const now = new Date().getTime();
|
||||
const distance = countDownDate - now;
|
||||
|
||||
const isRefreshing = document.getElementsByClassName("btc-value")[0].innerHTML.includes("Refreshing");
|
||||
if (isRefreshing) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (distance < 0) {
|
||||
refreshBTCPrice();
|
||||
return;
|
||||
}
|
||||
|
||||
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
||||
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
||||
const formattedMinutes = String(minutes).padStart(2, '0');
|
||||
const formattedSeconds = String(seconds).padStart(2, '0');
|
||||
document.getElementById("countdown").innerHTML = formattedMinutes + ":" + formattedSeconds + " min";
|
||||
}
|
||||
|
||||
clearInterval(window.countdownInterval);
|
||||
window.countdownInterval = setInterval(updateCountdown, 1000);
|
||||
}
|
||||
|
||||
|
||||
async refreshBTCPrice() {
|
||||
const refreshIcon = document.querySelector('.icon-refresh');
|
||||
refreshIcon.classList.add('rotating');
|
||||
|
|
@ -90,8 +139,8 @@ class Blockonomics {
|
|||
openInWalletLink.href = `bitcoin:${btcAddress}?amount=${newBtcAmount}`;
|
||||
|
||||
// fetch and display the new QR code
|
||||
fetchAndDisplayQRCode(newBtcAmount);
|
||||
startTimer(600); // Restart timer for 10 minutes (600 seconds)
|
||||
await this.fetchAndDisplayQRCode(newBtcAmount);
|
||||
this.startTimer(600); // Restart timer for 10 minutes (600 seconds)
|
||||
}
|
||||
} finally {
|
||||
refreshIcon.classList.remove('rotating');
|
||||
|
|
@ -102,77 +151,30 @@ class Blockonomics {
|
|||
handle() {
|
||||
window.copyToClipboard = this.copyToClipboard;
|
||||
window.refreshBTCPrice = this.refreshBTCPrice;
|
||||
window.fetchAndDisplayQRCode = this.fetchAndDisplayQRCode;
|
||||
window.startTimer = this.startTimer;
|
||||
|
||||
const startTimer = (seconds) => {
|
||||
const countDownDate = new Date().getTime() + seconds * 1000;
|
||||
document.getElementById("countdown").innerHTML = "10" + ":" + "00" + " min";
|
||||
|
||||
const updateCountdown = () => {
|
||||
const now = new Date().getTime();
|
||||
const distance = countDownDate - now;
|
||||
|
||||
const isRefreshing = document.getElementsByClassName("btc-value")[0].innerHTML.includes("Refreshing");
|
||||
if (isRefreshing) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (distance < 0) {
|
||||
refreshBTCPrice();
|
||||
return;
|
||||
}
|
||||
|
||||
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
||||
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
||||
const formattedMinutes = String(minutes).padStart(2, '0');
|
||||
const formattedSeconds = String(seconds).padStart(2, '0');
|
||||
document.getElementById("countdown").innerHTML = formattedMinutes + ":" + formattedSeconds + " min";
|
||||
}
|
||||
|
||||
clearInterval(window.countdownInterval);
|
||||
window.countdownInterval = setInterval(updateCountdown, 1000);
|
||||
}
|
||||
|
||||
const connectToWebsocket = () => {
|
||||
const btcAddress = document.querySelector('meta[name="btc_address"]').content;
|
||||
const webSocketUrl = `wss://www.blockonomics.co/payment/${btcAddress}`;
|
||||
const ws = new WebSocket(webSocketUrl);
|
||||
|
||||
ws.onmessage = function (event) {
|
||||
const data = JSON.parse(event.data);
|
||||
console.log('Payment status:', data.status);
|
||||
const isPaymentUnconfirmed = data.status === 0;
|
||||
const isPaymentPartiallyConfirmed = data.status === 1;
|
||||
// TODO: Do we need to handle Payment confirmed status?
|
||||
// This usually takes too long to happen, so we can just wait for the unconfirmed status?
|
||||
if (isPaymentUnconfirmed || isPaymentPartiallyConfirmed) {
|
||||
document.querySelector('input[name="txid"]').value = data.txid || '';
|
||||
document.getElementById('server-response').submit();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const fetchAndDisplayQRCode = async (newBtcAmount = null) => {
|
||||
try {
|
||||
const connectToWebsocket = () => {
|
||||
const btcAddress = document.querySelector('meta[name="btc_address"]').content;
|
||||
const btcAmount = newBtcAmount || '{{$btc_amount}}';
|
||||
const qrString = encodeURIComponent(`bitcoin:${btcAddress}?amount=${btcAmount}`);
|
||||
const response = await fetch(`/api/v1/get-blockonomics-qr-code?qr_string=${qrString}`);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
const webSocketUrl = `wss://www.blockonomics.co/payment/${btcAddress}`;
|
||||
const ws = new WebSocket(webSocketUrl);
|
||||
|
||||
ws.onmessage = function (event) {
|
||||
const data = JSON.parse(event.data);
|
||||
console.log('Payment status:', data.status);
|
||||
const isPaymentUnconfirmed = data.status === 0;
|
||||
const isPaymentPartiallyConfirmed = data.status === 1;
|
||||
// TODO: Do we need to handle Payment confirmed status?
|
||||
// This usually takes too long to happen, so we can just wait for the unconfirmed status?
|
||||
if (isPaymentUnconfirmed || isPaymentPartiallyConfirmed) {
|
||||
document.querySelector('input[name="txid"]').value = data.txid || '';
|
||||
document.getElementById('server-response').submit();
|
||||
}
|
||||
}
|
||||
const svgText = await response.text();
|
||||
document.getElementById('qrcode-container').innerHTML = svgText;
|
||||
} catch (error) {
|
||||
console.error('Error fetching QR code:', error);
|
||||
document.getElementById('qrcode-container').textContent = 'Error loading QR code';
|
||||
}
|
||||
};
|
||||
|
||||
startTimer(600); // Start timer for 10 minutes (600 seconds)
|
||||
connectToWebsocket();
|
||||
fetchAndDisplayQRCode();
|
||||
|
||||
|
||||
};
|
||||
startTimer(600); // Start timer for 10 minutes (600 seconds)
|
||||
connectToWebsocket();
|
||||
fetchAndDisplayQRCode();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue