I wanted to play around with IPFS and hive keychain with the ultimate goal of making my own hive game.
This is part one of my experimentation.
I wanted to create a simple website that allowed for a user to enter their username and then broadcast a transaction securely using the hive keychain extension.
I decided to make myself a simple page that allows hive keychain users to vote for my witness.
For getting started with IPFS I followed the tutorial that I found here.
My code is different from the above tutorial so I have posted it below.
There are 3 parts to the code all saved as their own file.
index.html, script.js, and style.css
There is also a logo.png file.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hive Witness Vote</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<img src="logo.png" alt="JeffBuilds" class="center-image">
<h1>Vote for JeffBuilds Hive Witness</h1>
<div class="input-group">
<input type="text" id="username" placeholder="Enter Hive Username">
<button onclick="voteWitness()">Vote using Hive Keychain</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
script.js
// Check if Hive Keychain is installed
function isKeychainInstalled() {
if (typeof hive_keychain !== 'undefined') {
return true;
} else {
alert("Hive Keychain is not installed. Please install it to use this feature.");
return false;
}
}
function voteWitness() {
if (!isKeychainInstalled()) return;
const username = document.getElementById('username').value;
// Use Hive Keychain to send a witness vote
hive_keychain.requestWitnessVote(username, 'jeffbuilds', true, function(response) {
console.log(response);
if (response.success) {
alert("Your vote for Jeffbuilds has been successfully cast!");
} else {
alert("There was an error casting your vote.");
}
});
}
style.css
h1 {
font-family: Arial, sans-serif;
}
body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.container {
text-align: center;
}
.center-image {
width: 128px;
height: 128px;
margin-bottom: 20px;
}
.input-group {
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
input[type=text] {
margin-right: 10px;
}
I used the Pinata App as a pinning service for the files. I hosted the files on my own IPFS desktop app in a folder then I used the CID to pin the folder to Pinata. This makes the page load much faster than just hosting it off one node.
The page looks like this and keychain works. Give it a try if you like.
Note: If you try to run this code locally. (make the files and open index.html) the website will load but the hive keychain portion will not work. This is because CORS policy will not let extensions interact with local files by default. Once you pin the files and open with IPFS the keychain will function as intended.
I also set my domain name www.jeffreybuilds.com to forward to the address but as of right now that is not working. I think it can take up to 72 hours for the domain to properly forward.
Edit: The domain is working now
Once I get the domain working I can move on to the next step in my experimentation.
Have a great day!