💯Tracker Code
Open Source HTML Tracker Code Starter for Tap Tokens
This single page HTML file is a tracker for the $BUNNY tap token. It connects in real-time to the Trac network to fetch and display token details. This can be adapted to your token with minor changes. HOW TO MODIFY
☆ SOURCE CODE ☆
<!DOCTYPE html>
<html lang="en">
<!-- TAP PROTOCOL ASSET HOPPER -----
/\ /|
|||| |
\ | \
_ _ / @ @
/ \ =>X<=
/| | /
\| /__| |
\_____\ \__\
------------------------------------
$BUNNY BY https://x.com/ordinalos -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🐇</text></svg>">
<title>$BUNNY</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #e0e0e0; /* Slightly darker than original to allow for light shadows */
}
header {
background-color: #e0e0e0;
color: #333;
text-align: center;
padding: 20px 0px 1px 0px;
box-shadow: 7px 7px 15px #b8b8b8, -7px -7px 15px #ffffff;
}
section {
padding: 20px;
margin: 20px;
background-color: #e0e0e0;
border-radius: 15px;
box-shadow: 7px 7px 15px #b8b8b8, -7px -7px 15px #ffffff;
}
#notification {
background-color: #dc1c84;
color: white;
}
h1, h2 {
margin-top: 0;
}
.progress-bar {
width: 100%;
background-color: #e0e0e0;
height: 15px;
border-radius: 15px;
box-shadow: inset 5px 5px 10px #b8b8b8, inset -5px -5px 10px #ffffff;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
background-color: #4caf50; /* Green color for filled part */
width: 0%; /* Initially 0% filled */
border-radius: 15px; /* Matching the border-radius of the parent element */
transition: width 0.4s ease-in-out; /* Smooth transition effect */
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.1/socket.io.min.js" integrity="sha512-AI5A3zIoeRSEEX9z3Vyir8NqSMC1pY7r5h2cE+9J6FLsoEmSSGLFaqMQw8SWvoONXogkfFrkQiJfLeHLz3+HOg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<header>
<h1>🐇 $BUNNY Tracker V1</h1>
</header>
<section id="notification">
<!-- Connection and error messages will appear here -->
</section>
<section id="token-info">
<div class="progress-bar">
<div class="progress-bar-fill" id="token-progress-bar"></div>
</div><br>
<h2>Token Details</h2>
<p><span class="label">Token Ticker:</span> <span id="token-ticker"></span></p>
<p><span class="label">Progress:</span> <span id="token-progress"></span>%</p>
<p><span class="label">Maximum Supply:</span> <span id="token-max"></span></p>
<p><span class="label">Limit:</span> <span id="token-lim"></span></p>
<p><span class="label">Decimals:</span> <span id="token-dec"></span></p>
<p><span class="label">Block:</span> <span id="token-blck"></span></p>
<p><span class="label">Transaction ID:</span> <span id="token-tx"></span></p>
<p><span class="label">Inscription:</span> <span id="token-ins"></span></p>
<p><span class="label">Number:</span> <span id="token-num"></span></p>
<p><span class="label">Timestamp:</span> <span id="token-ts"></span></p>
<!-- <p><span class="label">Address:</span> <span id="token-addr"></span></p> -->
<p><span class="label">Cursed:</span> <span id="token-crsd"></span></p>
</section>
<section id="actions">
<h2>Actions</h2>
<!-- Buttons and input fields for different actions will be here -->
</section>
<section id="results">
<h2>Response</h2>
<pre id="results-content"></pre> <!-- This will hold the actual results -->
</section>
<script>
const trac = io("https://tap.trac.network", {
autoConnect: true,
reconnection: true,
reconnectionDelay: 500,
reconnectionDelayMax: 500,
randomizationFactor: 0
});
const notificationEl = document.getElementById('notification');
const resultsEl = document.getElementById('results-content');
trac.connect();
trac.on('connect', () => {
notificationEl.textContent = "Connected to Trac!";
});
trac.on('response', function(msg) {
console.log(msg);
if (msg.error) {
notificationEl.textContent = "Error: " + msg.error;
} else {
// Process and display the token data
displayTokenData(msg.result);
resultsEl.textContent = JSON.stringify(msg.result, null, 2);
}
});
trac.on('error', function(msg) {
notificationEl.textContent = "Trac Internal Error: " + msg;
});
function formatNumberWithDecimals(value, decimals) {
let strValue = value.toString();
let wholePart = strValue.slice(0, -decimals) || "0";
let decimalPart = strValue.slice(-decimals).padStart(decimals, "0");
let formattedNumber = new Intl.NumberFormat().format(wholePart);
// Remove trailing zeros after decimal point
decimalPart = decimalPart.replace(/0+$/, "");
if (decimalPart) {
return `${formattedNumber}.${decimalPart}`;
} else {
return formattedNumber;
}
}
function displayTokenData(data) {
const mintTokensLeft = 0; // Placeholder value. Replace this with the actual value from your response or another source.
let progressPercentage = calculateProgress(data.max, mintTokensLeft);
document.getElementById('token-progress').textContent = progressPercentage + "%";
document.getElementById('token-progress-bar').style.width = progressPercentage + "%";
document.getElementById('token-ticker').textContent = data.tick;
document.getElementById('token-progress').textContent = calculateProgress(data.max, mintTokensLeft);
document.getElementById('token-max').textContent = formatNumberWithDecimals(data.max, 18);
document.getElementById('token-lim').textContent = formatNumberWithDecimals(data.lim, 18);
document.getElementById('token-dec').textContent = data.dec;
document.getElementById('token-blck').textContent = data.blck;
document.getElementById('token-tx').textContent = data.tx;
document.getElementById('token-ins').textContent = data.ins;
document.getElementById('token-num').textContent = data.num;
document.getElementById('token-ts').textContent = new Date(data.ts * 1000).toLocaleString(); // Convert to readable date-time
// document.getElementById('token-addr').textContent = data.addr;
document.getElementById('token-crsd').textContent = data.crsd ? "Yes" : "No";
}
function calculateProgress(max, mintTokensLeft) {
return ((1 - (mintTokensLeft / max)) * 100).toFixed(2); // toFixed(2) to get 2 decimal points
}
// Example function to get token details for $Bunny
function getTokenDetails() {
trac.emit('get', {
func: 'deployment',
args: ['bunny'],
call_id: ''
});
}
// Call the function to get details on page load
getTokenDetails();
</script>
</body>
</html>
HOW TO MODIFY
☆ Changing Assets
To change the tracked asset from $BUNNY to another token, for example $CAT, modify the getTokenDetails function as follows:
function getTokenDetails() {
trac.emit('get', {
func: 'deployment',
args: ['buidl'], // Change 'bunny' to 'buidl'
call_id: ''
});
}☆ BRC-20 Tracking
Before:
const trac = io("https://tap.trac.network", {
autoConnect: true,
reconnection: true,
reconnectionDelay: 500,
reconnectionDelayMax: 500,
randomizationFactor: 0
});After:
const trac = io("https://brc20.trac.network", {
autoConnect: true,
reconnection: true,
reconnectionDelay: 500,
reconnectionDelayMax: 500,
randomizationFactor: 0
});Follow @ordinalOS for more information
Last updated
