107 lines
5.1 KiB
HTML
107 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Payment</title>
|
|
</head>
|
|
<body>
|
|
<h1>Payment</h1>
|
|
|
|
<!-- <div data-bind="hidden:isSubmitted()">
|
|
<p>Please send <code data-bind="text:unsubmitted"></code> XMR to this address: </p>
|
|
<pre><code data-bind="text:xmr_address"></code></pre>
|
|
<p>You can also click, tap, or scan this qr code:</p>
|
|
<a data-bind="attr:{href:xmr_uri}"><div id="qr_wrapper"><div id="xmr_qr"></div></div></a>
|
|
</div> -->
|
|
<!-- <p>Your order is for <code data-bind="text:totalxmr_pretty"></code>.
|
|
<br><code data-bind="text:submitted_pretty"></code> have been submitted to the blockchain.
|
|
<br><code data-bind="text:unlocked_pretty"></code> have been unlocked.
|
|
</p> -->
|
|
<!--<div data-bind="hidden:isPaid">
|
|
<p>Transactions you send will appear on this page when they are accepted into a block. <b><i>THIS COULD TAKE TEN MINUTES OR MORE</i></b>. Transactions "unlock" after receiving 10 confirmations on the blockchain, each taking a few minutes each. Once the full <span data-bind="text:totalxmr_pretty"></span> are unlocked, we'll ship your order.
|
|
<p>You don't have to wait for the payment to unlock. After sumbitting it in your wallet app<span data-bind="visible:isSubmitted()"> (which you've done already)</span>, you can close this window. When the payment confirms, we'll send a link to this page to the email specified, if you ever want to come back and check on the order.</p>
|
|
</div><div data-bind="visible:isPaid">
|
|
<p>Your payment has been confirmed! We will ship your order as soon as possible and send an email with the tracking info.</p>
|
|
</div>-->
|
|
<!--<p data-bind="visible:isOverpaid">You <i>overpaid</I> us by <code data-bind="text:overpaidAmount_pretty"></code>! We would be happy to return the change to you at no extra cost. This process is done by hand so please email us{% if env.SALES_EMAIL %} at {{env.SALES_EMAIL}}{% endif %} to let us know that you overpaid. Be sure to include your order number, <code data-bind="text:orderId"></code>, as well as a monero address where you can receive the refund. </p>-->
|
|
<h2 data-bind="visible:transactions().length>0">Transactions</h2>
|
|
<table data-bind="visible:transactions().length>0">
|
|
<thead>
|
|
<th>Date</th>
|
|
<th>Time</th>
|
|
<th>Amt</th>
|
|
<th>Confs</th>
|
|
<th>Block</th>
|
|
<th>Stat</th>
|
|
</thead>
|
|
<tbody data-bind="foreach:transactions"><tr>
|
|
<td data-bind="text:date"></td>
|
|
<td data-bind="text:time"></td>
|
|
<td data-bind="text:amount"></td>
|
|
<td data-bind="text:confirmations"></td>
|
|
<td data-bind="text:height"></td>
|
|
<td style="cursor:default">
|
|
<span data-bind="visible:locked" title="LOCKED: Wait for 10 confirmations for this transaction to unlock">⏲️</span>
|
|
<span data-bind="visible:double_spend_seen" title="DOUBLE SPENT! Double-spend has been detected! This transaction is invalid.">⛔</span>
|
|
<span data-bind="hidden:(locked||double_spend_seen)" title="CONFIRMED! This transaction is valid and has been confirmed by the blockchain.">✅</span>
|
|
</td>
|
|
</tr></tbody>
|
|
</table>
|
|
<!--<p data-bind="hidden:isPaid"><i data-bind="text:checkingStatus"></i></p>-->
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.5/socket.io.js" integrity="sha512-luMnTJZ7oEchNDZAtQhgjomP1eZefnl82ruTH/3Oj/Yu5qYtwL7+dVRccACS/Snp1lFXq188XFipHKYE75IaQQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js" integrity="sha512-2AL/VEauKkZqQU9BHgnv48OhXcJPx9vdzxN1JrKDVc4FPU/MEE/BZ6d9l0mP7VmvLsjtYwqiYQpDskK9dG8KBA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script type="application/javascript">
|
|
// Read querystring
|
|
const qstr = new Proxy(new URLSearchParams(window.location.search), {
|
|
get: (searchParams, prop) => searchParams.get(prop),
|
|
})
|
|
|
|
const API = 'http://localhost:8080'
|
|
|
|
class Transaction { constructor(data) {
|
|
let self = this
|
|
self.amount = data.amount/1000000000000
|
|
self.confirmations = ko.observable(data.confirmations||0)
|
|
self.double_spend_seen = ko.observable(false)
|
|
self.fee = data.fee/1000000000000
|
|
self.height = data.height
|
|
self.datetime = new Date(data.timestamp)
|
|
self.date = self.datetime.toLocaleDateString()
|
|
self.time = self.datetime.toLocaleTimeString()
|
|
self.txid = data.txid
|
|
self.unlock_time = ko.observable(data.unlock_time||0)
|
|
self.locked = ko.observable(data.locked||false)
|
|
} }
|
|
|
|
class Payment { constructor(api) {
|
|
let self = this
|
|
self.transactions = ko.observableArray([])
|
|
;(async () => {
|
|
let res; try {
|
|
res = await fetch(`${API}/payment/${qstr.subaddr}`)
|
|
} catch (err) { console.error(err) }
|
|
let parsedRes; try {
|
|
parsedRes = await res.json()
|
|
} catch (err) { console.error(err) }
|
|
parsedRes.forEach( (tx) => {
|
|
self.transactions.push(new Transaction({
|
|
amount: tx.amount,
|
|
confirmations: tx.confirmations,
|
|
double_spent: tx.double_spend_seen,
|
|
fee: tx.fee,
|
|
height: tx.height,
|
|
timestamp: tx.timestamp,
|
|
txid: tx.id,
|
|
unlock_time: tx.unlock_time,
|
|
locked: tx.locked,
|
|
}) )
|
|
})
|
|
})()
|
|
} }
|
|
|
|
ko.applyBindings(new Payment(API))
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|