Step 1: ipfs.js and bundle.js
Create a js file in your project directory called ipfs.js and copy-paste the following in it:
viewing the file stored on ipfs
var ethers = require('ethers');
var url = 'ADD_YOUR_ETHEREUM_NODE_URL';
var provider = new ethers.providers.JsonRpcProvider(url);
var address = 'CONTRACT_ADDRESS_FROM_REMIX';
var abi = [
{
"inputs": [
{
"internalType": "string",
"name": "x",
"type": "string"
}
],
"name": "sendHash",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [],
"name": "getHash",
"outputs": [
{
"internalType": "string",
"name": "",
"type": "string"
}
],
"stateMutability": "view",
"type": "function"
}
];
var contract = new ethers.Contract(address,abi,provider);
contract.getHash().then((result) =>{
document.getElementById("btn").onclick = function () {
location.href = "https://ipfs.io/ipfs/"+result;
};
});
var ethers = require('ethers');
var url = 'ADD_YOUR_ETHEREUM_NODE_URL';
var provider = new ethers.providers.JsonRpcProvider(url);
var address = 'CONTRACT_ADDRESS_FROM_REMIX';
var abi = [
{
"inputs": [
{
"internalType": "string",
"name": "x",
"type": "string"
}
],
"name": "sendHash",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [],
"name": "getHash",
"outputs": [
{
"internalType": "string",
"name": "",
"type": "string"
}
],
"stateMutability": "view",
"type": "function"
}
];
var contract = new ethers.Contract(address,abi,provider);
contract.getHash().then((result) =>{
document.getElementById("btn").onclick = function () {
location.href = "https://ipfs.io/ipfs/"+result;
};
});
var ethers = require('ethers');
var url = 'ADD_YOUR_ETHEREUM_NODE_URL';
var provider = new ethers.providers.JsonRpcProvider(url);
var address = 'CONTRACT_ADDRESS_FROM_REMIX';
var abi = [
{
"inputs": [
{
"internalType": "string",
"name": "x",
"type": "string"
}
],
"name": "sendHash",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [],
"name": "getHash",
"outputs": [
{
"internalType": "string",
"name": "",
"type": "string"
}
],
"stateMutability": "view",
"type": "function"
}
];
var contract = new ethers.Contract(address,abi,provider);
contract.getHash().then((result) =>{
document.getElementById("btn").onclick = function () {
location.href = "https://ipfs.io/ipfs/"+result;
};
});
Go ahead and replace `ADD_YOUR_ETHEREUM_NODE_URL` with the ropsten HTTP provider and `CONTRACT_ADDRESS_FROM_REMIX` with the address of the deployed contract from the above section.
Explanation of the code above:
Line 1: Importing the ethers library.
Line 2: Storing our Quicknode’s URL in the url variable.
Line 3: Instantiating new ethers.providers.JsonRpcProvider instance and storing it in provider.
Line 4: Storing the contract address in the address variable.
Line 5-32: Storing the ABI we got from the previous step in the abi variable.
Line 33:Initializing a contract instance in ethers and connecting to our deployed contract using the address,abi, and provider.
Line 35: Calling the getHash method of our contract, which returns the hash of the image stored in the contract.
Line 36-38: Creating onclick event listener on the ‘btn’ div of our HTML page, which we will create after this and adding our ipfs gateway with the hash as the hyperlink, so when the div is clicked, it will redirect to the image.
Now, save the file and use the browserify package to use the script above on our HTML page.
viewing the file stored on ipfs
$ browserify ipfs.js -o bundle.js
$ browserify ipfs.js -o bundle.js
$ browserify ipfs.js -o bundle.js
Step 2: index.html
Following is a very basic index.html file that will help to view our image in the browser.
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>IPFS with Ethereum</title>
<style>
#btn {
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -150px;
font-size: 400%;
font-family: serif;
text-decoration: underline;
text-decoration-style: double;
color: #65b7ff;
cursor: pointer;
}
body{
background-color: #ffedf3;
}
</style>
</head>
<body>
<div id="btn">View Nyan</div>
<script src="bundle.js"></script>
</body>
</html>
Explanation of the code above.
Line 1-7: Necessary basic HTML tags.
Line 8: Giving a title to our HTML page.
Line 9-26: Some CSS to make the webpage look a bit presentable.
Line 30: Creating a Div with id btn and adding View Nyan text to it.
Line 32: Adding our bundle.js file from the previous step to our HTML page.
Now, open the index.html file in your web browser, and If you used the above CSS. It must look something like this:
Click on View Nyan, and it will take you to the original Image which we published on IPFS.