220 lines
6.4 KiB
HTML
220 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<!-- Refresh every hour (3600 seconds) -->
|
|
<meta http-equiv="refresh" content="3600" />
|
|
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 20px 0;
|
|
}
|
|
th,
|
|
td {
|
|
padding: 12px;
|
|
text-align: left;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
th {
|
|
background-color: #f2f2f2;
|
|
}
|
|
a {
|
|
color: #3498db;
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
</style>
|
|
|
|
<title>Ledgr</title>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
|
|
<script type="module">
|
|
import {
|
|
html, // Import html from htm instead of h
|
|
render,
|
|
Component
|
|
} from 'https://unpkg.com/htm/preact/standalone.module.js'
|
|
|
|
import 'https://cdn.skypack.dev/nostrefresh'
|
|
|
|
class App extends Component {
|
|
constructor() {
|
|
super()
|
|
this.state = { fileContent: '', readmeContent: '' } // Initialize state to store file content
|
|
}
|
|
|
|
async componentDidMount() {
|
|
try {
|
|
var response = await fetch('./.txo/txo.txt') // Fetch the file
|
|
if (!response.ok) {
|
|
throw new Error(
|
|
`Failed to fetch text file: ${response.statusText}`
|
|
)
|
|
}
|
|
var txt = await response.text()
|
|
this.setState({ fileContent: txt }) // Update state with file content
|
|
|
|
response = await fetch('./ledgr.json') // Fetch the file
|
|
if (!response.ok) {
|
|
throw new Error(
|
|
`Failed to fetch text file: ${response.statusText}`
|
|
)
|
|
}
|
|
txt = await response.text()
|
|
this.setState({ ledgrContent: txt }) // Update state with file content
|
|
|
|
response = await fetch('./state.json') // Fetch the file
|
|
if (!response.ok) {
|
|
throw new Error(
|
|
`Failed to fetch text file: ${response.statusText}`
|
|
)
|
|
}
|
|
txt = await response.text()
|
|
this.setState({ stateContent: txt }) // Update state with file content
|
|
|
|
response = await fetch('./README.md') // Fetch the file
|
|
if (!response.ok) {
|
|
throw new Error(
|
|
`Failed to fetch text file: ${response.statusText}`
|
|
)
|
|
}
|
|
txt = await response.text()
|
|
this.setState({ readmeContent: txt }) // Update state with file content
|
|
} catch (error) {
|
|
console.error('Error fetching file:', error)
|
|
}
|
|
}
|
|
|
|
render() {
|
|
var lines = this.state.fileContent.split('\n')
|
|
// Use the html function for creating elements
|
|
var assets = 0
|
|
var ledgr
|
|
var chain = 'tbtc4'
|
|
console.log('ledgr', this.state.ledgrContent)
|
|
if (this.state.ledgrContent) {
|
|
ledgr = JSON.parse(this.state.ledgrContent)
|
|
ledgr = Object.entries(ledgr)
|
|
}
|
|
if (this?.state?.stateContent) {
|
|
var hue = JSON.parse(this.state.stateContent)
|
|
console.log('hue', hue.hue)
|
|
document.body.style.backgroundColor = `hsl(${hue.hue}, 66%, 89%)`
|
|
}
|
|
console.log('ledgr', ledgr)
|
|
var href
|
|
return html`
|
|
<div>
|
|
<h2>README</h2>
|
|
<pre>${this.state.readmeContent}</pre>
|
|
|
|
<h2>State</h2>
|
|
|
|
<pre>
|
|
${this.state.stateContent}
|
|
</pre
|
|
>
|
|
|
|
<h2>Contract</h2>
|
|
|
|
<a href="./contract.lua">view source</a>
|
|
|
|
<h2>Proofs</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Transaction</th>
|
|
<th>Reserves</th>
|
|
<th>Proof</th>
|
|
<th>Verified</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${lines.map((l, i) => {
|
|
var double = l.split(' ')
|
|
console.log(double)
|
|
if (double.length !== 2) return
|
|
chain = double[0].split(':')[1]
|
|
assets = double[1]
|
|
if (chain === 'tbtc4') {
|
|
href =
|
|
'https://mempool.space/testnet4/tx/' +
|
|
double[0].split(':')[2]
|
|
}
|
|
if (chain === 'vtc') {
|
|
href =
|
|
'https://vtc5.trezor.io/tx/' + double[0].split(':')[2]
|
|
}
|
|
return html`<tr>
|
|
<td>
|
|
<a target="_blank" href="${href}">${double[0]}</a>
|
|
</td>
|
|
<td>${assets}</td>
|
|
<td><a href="${href}">Proof</a></td>
|
|
<td>✅</td>
|
|
</tr>`
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h2>Reserves</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Reserves</th>
|
|
<th>Chain</th>
|
|
<th>Proof</th>
|
|
<th>Verified</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>${assets}</td>
|
|
<td>${chain}</td>
|
|
<td><a href="${href}">Proof</a></td>
|
|
<td>✅</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h2>Ledgr</h2>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>User</th>
|
|
<th>Amount</th>
|
|
<th>Proof</th>
|
|
<th>Verified</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${ledgr?.map((i, l) => {
|
|
return html`<tr>
|
|
<td>${i[0]}</td>
|
|
<td>${i[1]}</td>
|
|
<td><a href="${href}">Proof</a></td>
|
|
<td>✅</td>
|
|
</tr>`
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
`
|
|
}
|
|
}
|
|
|
|
render(html`<${App} />`, document.getElementById('root'))
|
|
</script>
|
|
</body>
|
|
</html>
|