diff options
| author | Adam Soltys <[email protected]> | 2024-11-29 22:49:50 -0800 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2024-11-29 22:49:52 -0800 |
| commit | 68bb0a2ec6ec407e42e4c82d0be00cf13db21c94 (patch) | |
| tree | d070a001d5fb7abf7368ad9a004fab805df1d56f /static/shopify.html | |
| parent | 644d7963b8d108304ba75bb87cacadab66199feb (diff) | |
| download | coinos-ui-68bb0a2ec6ec407e42e4c82d0be00cf13db21c94.tar.gz coinos-ui-68bb0a2ec6ec407e42e4c82d0be00cf13db21c94.zip | |
clean up static files
Diffstat (limited to 'static/shopify.html')
| -rw-r--r-- | static/shopify.html | 168 |
1 files changed, 0 insertions, 168 deletions
diff --git a/static/shopify.html b/static/shopify.html deleted file mode 100644 index 5ce718df..00000000 --- a/static/shopify.html +++ /dev/null @@ -1,168 +0,0 @@ -<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script> -<script> - window.addEventListener("load", async () => { - let sat = (s) => { - s = Math.abs(s); - let p = Math.floor(Math.log(s) / Math.LN10 + 0.000000001); - let d = Math.floor((p + 1) / 3); - - return ( - "⚡️" + - (parseInt(s) > 0 - ? new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 }).format( - s / Math.pow(1000, d), - ) + ["", "K", "M", "G", "T", "P", "E", "Z"][d] - : 0 - ).toString() - ); - }; - - let copy = (text) => { - navigator.clipboard.writeText(text); - }; - - let f = (s, currency) => - new Intl.NumberFormat("en-US", { - style: "currency", - currency, - }) - .format(s) - .replace("CA", ""); - - let s = (s) => - new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(s); - - let { - default: { drawImg }, - } = await import("https://coinos.io/qr.js"); - let base64 = drawImg("test", { size: 300 }); - - let link = document.createElement("link"); - link.setAttribute("rel", "stylesheet"); - link.setAttribute("type", "text/css"); - link.setAttribute( - "href", - "https://fonts.googleapis.com/css?family=Public+Sans:400italic,400,300,700", - ); - - var style = document.createElement("style"); - style.innerHTML = `#check { - transform: scale(0.5); - transition: transform 1s; - } - `; - document.head.appendChild(style); - - document.head.appendChild(link); - document.title = "Pay With Bitcoin"; - - let fiat = Shopify.checkout.payment_due; - let main = document.querySelector("main"); - main.style.fontFamily = "Public Sans, sans-serif"; - main.innerHTML = "Please Pay"; - - let data = await fetch("https://dev.coinos.io/api/invoice", { - method: "POST", - mode: "cors", - headers: { - "Content-Type": "application/json", - accept: "application/json", - }, - body: JSON.stringify({ - invoice: { - fiat, - type: "lightning", - webhook: `https://dev.coinos.io/api/shopify/${Shopify.checkout.order_id}`, - }, - user: { username: "horseradish" }, - }), - }) - .then(function (response) { - return response.json(); - }) - .catch(console.log); - - main.innerHTML = `<a href="lightning:${data.hash}"> - <div style="display: flex; margin-top: 50px; margin-bottom: 80px; position: relative;"> - <img id="qrcode" src="${base64}" /> - <div id="bg"></div> - </div> - </a> - <div style="width: 100%; text-align: center; "> - <div style="font-size: 24px; font-weight: bold; margin-bottom: 12px;">${f( - (data.amount * data.rate) / 100000000, - data.currency, - )}</div> - <div style="color: #666; font-size: 18px;">${sat(data.amount)}</div> - </div> - <div style="text-align: center; margin: 40px auto; max-width: 460px; word-break: break-all; line-height: 1.5rem">${ - data.hash - }</div> - <div style="margin: 20px 0; display: flex; gap: 1rem; justify-content: center; align-items: center;"> - <a href="lightning:${data.hash}" style="text-decoration: none"> - <div style="color: #999; font-size: 18px; border-radius: 9999px; padding: 0.5rem 1rem; border: 1px solid #ccc; background: white;">Open</div> - </a> - - <a id="copy" href="#" style="text-decoration: none"> - <div style="color: #999; font-size: 18px; border-radius: 9999px; padding: 0.5rem 1rem; border: 1px solid #ccc; background: white;">Copy</div></a> - </div> - `; - - let copyButton = document.getElementById("copy"); - copyButton.addEventListener("click", (e) => { - e.preventDefault(); - copy(data.hash); - let copied = document.createElement("div"); - copied.textContent = "Copied!"; - main.appendChild(copied); - setTimeout(() => copied.remove(), 3000); - }); - - let qr = document.getElementById("qrcode"); - qr.style.margin = "auto"; - qr.style.marginTop = "40px"; - qr.style.border = "12px white solid"; - qr.style.zIndex = 10; - - new QRCode(qr, data.hash); - - let bg = document.getElementById("bg"); - bg.style.position = "absolute"; - bg.style.margin = "auto"; - bg.style.left = "0"; - bg.style.right = "0"; - bg.style.width = "400px"; - bg.style.height = "400px"; - bg.style.borderRadius = "50%"; - bg.style.background = "linear-gradient(to right, #F2F6FC, #E1E3FF)"; - bg.style.zIndex = "0"; - - let ws = new WebSocket("wss://dev.coinos.io/ws"); - ws.onmessage = ({ data }) => { - try { - let { type, data: d } = JSON.parse(data); - if (type === "payment") { - main.innerHTML = - '<img id="check" src="https://dev.coinos.io/icons/check.svg" alt="Check" />' + - `<h1>Payment received!</h1> - <h2> - ${((d.amount * d.rate) / 100000000).toFixed(2)} CAD - </h2> - <h3> - ⚡️${d.amount} - </h3>`; - - var image = document.getElementById("check"); - image.addEventListener("load", function () { - image.style.transform = "scale(1)"; - }); - } - } catch (e) { - console.log(e); - } - }; - ws.onopen = () => { - ws.send(JSON.stringify({ type: "subscribe", data })); - }; - }); -</script> |
