|
| 1 | +// Initialize |
| 2 | +let bitcoinPrice = 0; |
| 3 | +let recommendedFees = { |
| 4 | + minimumFee: 20, |
| 5 | + economyFee: 40, |
| 6 | + hourFee: 60, |
| 7 | + halfHourFee: 70, |
| 8 | + fastestFee: 80, |
| 9 | +}; |
| 10 | +const transactionSizeInBytes = 400; |
| 11 | + |
| 12 | +// Form targets |
| 13 | +const form = document.querySelector("form"); |
| 14 | +const addressInput = form.querySelector("#address"); |
| 15 | +const amountInput = form.querySelector("#amount"); |
| 16 | +const priorityInput = form.querySelector("#priority"); |
| 17 | +const priorityOptions= form.querySelectorAll("#priorities option"); |
| 18 | + |
| 19 | +// Amounts targets |
| 20 | +const table = form.querySelector("table"); |
| 21 | +const amountUsd = form.querySelector("#amount-usd"); |
| 22 | +const transactionFeesBtc = table.querySelector("#transaction-fees-btc"); |
| 23 | +const transactionFeesUsd = table.querySelector("#transaction-fees-usd"); |
| 24 | +const totalReceivedBtc = table.querySelector("#total-received-btc"); |
| 25 | +const totalReceivedUsd = table.querySelector("#total-received-usd"); |
| 26 | + |
| 27 | +// Fetch Data |
| 28 | +const fetchData = async (url) => { |
| 29 | + const response = await fetch(url); |
| 30 | + return await response.json(); |
| 31 | +}; |
| 32 | + |
| 33 | +// Calculate Transaction |
| 34 | +const calculateTransaction = () => { |
| 35 | + const amount = amountInput.value; |
| 36 | + const priority = priorityInput.value; |
| 37 | + const feesInSats = calculateFeesInSats(priority); |
| 38 | + const feeInBtc = feesInSats / 100_000_000; |
| 39 | + updateUI(amount, feeInBtc); |
| 40 | +}; |
| 41 | + |
| 42 | +// Calculate Fees in Sats |
| 43 | +const calculateFeesInSats = (priority) => { |
| 44 | + const fees = ["minimumFee", "economyFee", "hourFee", "halfHourFee", "fastestFee"]; |
| 45 | + return transactionSizeInBytes * recommendedFees[fees[priority - 1]]; |
| 46 | +}; |
| 47 | + |
| 48 | +// Format Amount |
| 49 | +const formatAmount = (num, maximumFractionDigits = 2) => { |
| 50 | + const formatter = new Intl.NumberFormat("en-US", { |
| 51 | + notation: "compact", |
| 52 | + compactDisplay: "short", |
| 53 | + maximumFractionDigits, |
| 54 | + }); |
| 55 | + return formatter.format(num); |
| 56 | +}; |
| 57 | + |
| 58 | +// Update UI |
| 59 | +const updateUI = (amount, feeInBtc) => { |
| 60 | + transactionFeesBtc.textContent = `-${formatAmount(feeInBtc, 8)} BTC`; |
| 61 | + totalReceivedBtc.textContent = `${formatAmount(amount - feeInBtc, 8)} BTC`; |
| 62 | + if (bitcoinPrice !== 0) { |
| 63 | + const feeInUsd = feeInBtc * bitcoinPrice; |
| 64 | + amountUsd.textContent = `${formatAmount(amount * bitcoinPrice)} USD`; |
| 65 | + transactionFeesUsd.textContent = `-${formatAmount(feeInUsd)} USD`; |
| 66 | + totalReceivedUsd.textContent = `${formatAmount(amount * bitcoinPrice - feeInUsd)} USD`; |
| 67 | + } |
| 68 | +}; |
| 69 | + |
| 70 | +// Set the priority style |
| 71 | +const setPriorityStyle = () => { |
| 72 | + const { value, min, max } = priorityInput; |
| 73 | + const percent = ((value - min) / (max - min)) * 100; |
| 74 | + priorityInput.style.setProperty("--pico-selected-ratio", `${percent}%`); |
| 75 | +}; |
| 76 | + |
| 77 | +// Handle Priority |
| 78 | +const handlePriority = () => { |
| 79 | + setPriorityStyle(); |
| 80 | + calculateTransaction(); |
| 81 | +}; |
| 82 | + |
| 83 | +// Handle Amount |
| 84 | +const handleAmount = () => { |
| 85 | + calculateTransaction(); |
| 86 | +}; |
| 87 | + |
| 88 | +// Handle Priority Option |
| 89 | +const handlePriorityOption = (event) => { |
| 90 | + priorityInput.value = event.target.value; |
| 91 | + setPriorityStyle(); |
| 92 | + calculateTransaction(); |
| 93 | +}; |
| 94 | + |
| 95 | +// Listens for input changes |
| 96 | +amountInput.addEventListener("input", handleAmount); |
| 97 | +priorityInput.addEventListener("input", handlePriority); |
| 98 | + |
| 99 | +// Fetch data and calculate transaction on load |
| 100 | +(async () => { |
| 101 | + const prices = await fetchData("https://mempool.space/api/v1/prices"); |
| 102 | + bitcoinPrice = prices.USD; |
| 103 | + recommendedFees = await fetchData("https://mempool.space/api/v1/fees/recommended"); |
| 104 | + calculateTransaction(); |
| 105 | +})(); |
| 106 | + |
| 107 | +// Listen clicks on priority options |
| 108 | +priorityOptions.forEach((option) => { |
| 109 | + console.log(option); |
| 110 | + option.addEventListener("click", handlePriorityOption); |
| 111 | +}); |
| 112 | + |
| 113 | +// Set the priority style on load |
| 114 | +setPriorityStyle(); |
| 115 | + |
| 116 | +// Prevent form submission |
| 117 | +form.addEventListener("submit", (event) => { |
| 118 | + event.preventDefault(); |
| 119 | +}); |
| 120 | + |
| 121 | +// Focus and move cursor to the end of the input on load |
| 122 | +(function focusAndMoveCursorToEnd(input) { |
| 123 | + input.focus(); |
| 124 | + const value = input.value; |
| 125 | + input.value = ""; |
| 126 | + input.value = value; |
| 127 | +})(amountInput); |
0 commit comments