Tracker Code

Open Source HTML Tracker Code Starter for Tap Tokens

Last updated 1 year ago

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.

☆ 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
});

PreviousHello $BUNNY☆NextTreasury