Building a No-Code Bitcoin Jackpot Inscription with Randomness result

#bitcoin #ordinal #insription #randomness

Prerequisite

Familiarize yourself with Chat GPT
Install the latest version of Google Chrome on your computer
Create an account on Xverse Wallet (if you haven't already) to access your cryptocurrency funds.

Let's hack

Ordinals Protocol introduced the ability for anyone to inscribe files fully on-chain onto Bitcoin. These inscriptions are self-contained and unaware of the other files that had been inscribed. With the introduction of recursive inscription that is about to change.

With the endpoint /blockhash/<HEIGHT>, we can retrieve the block hash at a given block height, which provides us with a way to obtain a random number using the block height in the future.

Create html template

1. Ask ChatGPT to generate a HTML template

2. We got the result

<!DOCTYPE html>
<html>
<head>
  <title>Reminder of a uint256 Number</title>
</head>
<body>
  <h1>Reminder of a uint256 Number</h1>
  <div id="reminder"></div>

  <script>
    document.addEventListener("DOMContentLoaded", function() {
      // Fetch the uint256 number from the external API
      fetch("https://api.example.com/getNumber")
        .then(response => response.json())
        .then(data => {
          // Extract the uint256 number from the API response
          var number = data.number;

          // Calculate the reminder of the uint256 number
          var reminder = number % 10;

          // Render the reminder on the HTML page
          var reminderElement = document.getElementById("reminder");
          reminderElement.textContent = "Reminder of the number " + number + " is: " + reminder;
        })
        .catch(error => {
          var reminderElement = document.getElementById("reminder");
          reminderElement.textContent = "Failed to fetch the number from the API.";
        });
    });
  </script>
</body>
</html>

We need to customize HTML template to fetch to the future block height. Example 795999

<!DOCTYPE html>
<html>

<head>
    <title>Jackpot</title>
    <style>
        html,
        body {
            width: 400px;
            height: 400px;
            margin: 0;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #reminder {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>Lucky number: <div id="reminder"></div></h1>


    <script>
        document.addEventListener("DOMContentLoaded", function () {
            // Fetch the uint256 number from the external API
            fetch("/blockhash/795999")
                .then(response => response.json())
                .then(data => {
                    // Extract the uint256 number from the API response
                    var number = BigInt(data.number); // Parse as BigInt

                    // Calculate the reminder of the uint256 number
                    var reminder = number % BigInt(100); // Perform modulo operation as BigInt

                    // Render the reminder on the HTML page
                    var reminderElement = document.getElementById("reminder");
                    reminderElement.textContent = reminder.toString();
                })
                .catch(error => {
                    var reminderElement = document.getElementById("reminder");
                    reminderElement.textContent = "TBA";
                });
        });
    </script>
</body>

</html>