Created
September 14, 2022 16:26
-
-
Save zuketo/2fc450b5527a39ab487936ca556ad076 to your computer and use it in GitHub Desktop.
Twitter.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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/bootstrap@5.1.3/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/terminal.css@0.7.2/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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment