zuketo · September 14, 2022 16:26
diff --git a/Twitter.html b/Twitter.html
 <html>
  <head>
    <title>Twitter on the Blockchain</title>

    <!-- RESOURCES -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.1/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://js.pusher.com/7.2.0/pusher.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/terminal.min.css" />

    <!-- PAGE STYLES -->
    <style>
      body { background-color: #ffe7e7; }
      .tweet-box { background-color: rgb(248, 248, 255); font-size: 22; line-height: 24px; padding: 20px 30px; box-shadow: 5px 10px; border: 2px solid #000; font-family: "sans-serif"; margin: 60px 60px 0px 0px; }
    </style>

    <!-- JAVASCRIPT CODE -->
    <script>

      /*
         _____ ____  ____  ______
        / ___// __ \/ __ \/_  __/.   ★·.·´¯`·.·★ Easily query contract data on Ethereum!
        \__ \/ / / / /_/ / / /                       Full docs and examples: https://docs.sort.xyz
       ___/ / /_/ / _, _/ / /       Join the Discord: https://discord.gg/sort ★·.·´¯`·.·★
      /____/\____/_/ |_| /_/

        EDIT THIS CONTRACT ADDRESS WITH YOUR GOERLI CONTRACT ADDRESS
      */

      const CONTRACT_ADDRESS = '0x2d93fc7afaac27f2d1b1e4db15b2126813e5b47a';


      <!-- Query Sort for recent tweets -->
      async function getTweets() {
        // Create sort.xyz api request
        var sortxyz_sql_result = await axios.post('https://api.sort.xyz/v0/sql',
          {
            "query": "select t.function.params[1].value as tweet from goerli.transaction t where t.to='"+CONTRACT_ADDRESS.toLowerCase()+"'",
            "api_key": "ce4c9316-f7ce-4955-b6b3-2292a8be7afc"
          }
        );

        let tweets = [];

        console.log(sortxyz_sql_result);

        let list = document.getElementById("tweets");

        // Add results to a list of recent contract events
        let sortxyz_data = sortxyz_sql_result.data.query_response.results;
        for (var i=0; i<sortxyz_data.length; i++) {
          let div = document.createElement("div");
          div.innerText = sortxyz_data[i].tweet;
          div.className = 'tweet-box'
          list.appendChild(div);
        }
      }

      // Get latest tweets from the blockchain
      getTweets();
    </script>
  </head>
  <body>
    <!-- HEADER -->
    <div class="header">
      <div class="container">
        <div class="row" >
          <div class="col-12 col-md-12">
            <div class="logo terminal-prompt">My First Ethereum Twitter</div>
          </div>
        </div>
      </div>
    </div>

    <!-- MAIN SECTION -->
    <div class="container">
      <div class="row" >
        <div class="col-12 col-md-12">
          <div class="tweets" id="tweets">
            <!-- RECENT CONTRACT EVENTS -->
          </div>
        </div>
      </div>
    </div>
    <div>
      &nbsp;
    </div>
  </body>
 </html>
	<html>
	<head>
	<title>Twitter on the Blockchain</title>

	<!-- RESOURCES -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.1/axios.min.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
	<script src="https://js.pusher.com/7.2.0/pusher.min.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/terminal.min.css" />

	<!-- PAGE STYLES -->
	<style>
	body { background-color: #ffe7e7; }
	.tweet-box { background-color: rgb(248, 248, 255); font-size: 22; line-height: 24px; padding: 20px 30px; box-shadow: 5px 10px; border: 2px solid #000; font-family: "sans-serif"; margin: 60px 60px 0px 0px; }
	</style>

	<!-- JAVASCRIPT CODE -->
	<script>

	/*
	_____ ____ ____ ______
	/ ___// __ \/ __ \/_ __/. ★·.·´¯`·.·★ Easily query contract data on Ethereum!
	\__ \/ / / / /_/ / / / Full docs and examples: https://docs.sort.xyz
	___/ / /_/ / _, _/ / / Join the Discord: https://discord.gg/sort ★·.·´¯`·.·★
	/____/\____/_/ \|_\| /_/

	EDIT THIS CONTRACT ADDRESS WITH YOUR GOERLI CONTRACT ADDRESS
	*/

	const CONTRACT_ADDRESS = '0x2d93fc7afaac27f2d1b1e4db15b2126813e5b47a';


	<!-- Query Sort for recent tweets -->
	async function getTweets() {
	// Create sort.xyz api request
	var sortxyz_sql_result = await axios.post('https://api.sort.xyz/v0/sql',
	{
	"query": "select t.function.params[1].value as tweet from goerli.transaction t where t.to='"+CONTRACT_ADDRESS.toLowerCase()+"'",
	"api_key": "ce4c9316-f7ce-4955-b6b3-2292a8be7afc"
	}
	);

	let tweets = [];

	console.log(sortxyz_sql_result);

	let list = document.getElementById("tweets");

	// Add results to a list of recent contract events
	let sortxyz_data = sortxyz_sql_result.data.query_response.results;
	for (var i=0; i<sortxyz_data.length; i++) {
	let div = document.createElement("div");
	div.innerText = sortxyz_data[i].tweet;
	div.className = 'tweet-box'
	list.appendChild(div);
	}
	}

	// Get latest tweets from the blockchain
	getTweets();
	</script>
	</head>
	<body>
	<!-- HEADER -->
	<div class="header">
	<div class="container">
	<div class="row" >
	<div class="col-12 col-md-12">
	<div class="logo terminal-prompt">My First Ethereum Twitter</div>
	</div>
	</div>
	</div>
	</div>

	<!-- MAIN SECTION -->
	<div class="container">
	<div class="row" >
	<div class="col-12 col-md-12">
	<div class="tweets" id="tweets">
	<!-- RECENT CONTRACT EVENTS -->
	</div>
	</div>
	</div>
	</div>
	<div>

	</div>
	</body>
	</html>