Skip to content

Instantly share code, notes, and snippets.

@manabubannai
Created March 29, 2022 06:00
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save manabubannai/df5765a968905dc3e868db1a862f7bfd to your computer and use it in GitHub Desktop.
Save manabubannai/df5765a968905dc3e868db1a862f7bfd to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Donation app</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css"/>
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
</head>
<body>
<div class="cover">
<h1>Top Contributor’s Ranking</h1>
<div class="top_ranker">
<?php for ($i=0; $i <= 2 ; $i++) { ?>
<div class="box">
<img src="" id="contributor<?php echo $i; ?>_pic">
<p class="name"><span id="contributor<?php echo $i; ?>_name"></span></p>
<p class="price"><span id="contributor<?php echo $i; ?>_value"></span> ETH</p>
<p><a href="" id="contributor<?php echo $i; ?>_address" target="_blank">&raquo;View on Etherscan</a></p>
<img src="" class="rank_icon" id="rank_icon<?php echo $i; ?>">
</div>
<?php } ?>
<p class="donate-btn"><a href="#donate">Donate with Ether</a></p>
</div>
<div class="ranking">
<?php for ($i=3; $i < 10 ; $i++) { ?>
<div class="box-left">
<ul>
<li><?php echo $i+1; ?>th</li>
<li><img src="https://unavatar.io/twitter/" id="contributor<?php echo $i; ?>_pic"></li>
<li><span id="contributor<?php echo $i; ?>_name"></span></li>
<li class="price"><span id="contributor<?php echo $i; ?>_value">0</span> ETH</li>
</ul>
</div>
<div class="box-right">
<p><a href="" id="contributor<?php echo $i; ?>_address" target="_blank">&raquo;View on Etherscan</a></p>
</div>
<?php } ?>
<div style="clear:both"></div>
<div class="donate-form" id="donate">
<h2>Donate Today</h2>
<ul>
<li><input type="text" placeholder="@Your Twitter ID" id="your_name"> </li>
<li><input type="text" placeholder="0.01 ETH" id="your_eth"> </li>
<li><button onclick="donateFunction();">Donate with Ether</button></li>
</ul>
</div>
</div>
</div>
<script>
// Check if Metamask is installed
if (typeof window.ethereum === 'undefined') {
openModal();
}
//Enable Web3
async function loadWeb3(){
if(window.ethereum) {
window.web3 = new Web3(window.ethereum);
}
}
// Load Contract
async function loadContract(){
return await new window.web3.eth.Contract(
[
{
"inputs": [
{
"internalType": "string",
"name": "name",
"type": "string"
}
],
"name": "doDonation",
"outputs": [],
"stateMutability": "payable",
"type": "function"
},
{
"inputs": [],
"stateMutability": "nonpayable",
"type": "constructor"
},
{
"inputs": [
{
"internalType": "address payable",
"name": "_to",
"type": "address"
}
],
"name": "withdrawMoney",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"name": "contributor",
"outputs": [
{
"internalType": "uint256",
"name": "id",
"type": "uint256"
},
{
"internalType": "string",
"name": "name",
"type": "string"
},
{
"internalType": "uint256",
"name": "amount",
"type": "uint256"
},
{
"internalType": "address",
"name": "sender_address",
"type": "address"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "getBalance",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "owner",
"outputs": [
{
"internalType": "address",
"name": "",
"type": "address"
}
],
"stateMutability": "view",
"type": "function"
}
]
,'0x0aDA78BBE98B7D19e828B416EFfabBB3AA3d7Ae3');
}
// Read data from the contract
async function getFunction() {
contributors = [];
for ( num = 1; num <= 10; num++ ) {
get = await window.contract.methods.contributor(num).call();
contributors.push(
{
"name":get[1],
"value":get[2]/1000000000000000000,
"address":get[3],
},
);
}
ranking = contributors.sort(
function(a, b){
return b.value - a.value;
}
);
for ( i = 0; i < 10; i++) {
$contributor_name = ranking[i].name.trim();
$contributor_name = $contributor_name.replace(/@/, '');
document.getElementById('contributor' + i + '_name').innerHTML = $contributor_name;
$contributor_value = ranking[i].value;
document.getElementById('contributor' + i + '_value').innerHTML = $contributor_value;
$contributor_address = ranking[i].address;
document.getElementById('contributor' + i + '_address').href = "https://goerli.etherscan.io/address/" + $contributor_address;
document.getElementById('contributor' + i + '_pic').src = "https://unavatar.io/twitter/" + $contributor_name;
}
for ( i = 0; i < 2; i++) {
document.getElementById('rank_icon' + i ).src = "/images/donation/"+ i + ".png";
}
}
// Load all functions
async function load(){
await loadWeb3(); //Enable Web3
window.contract = await loadContract(); //Load Contract
getFunction(); //Read data from the contract
}
load();
// Get the user's wallet address
async function getAccount() {
const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
return account = accounts[0];
showAccount.innerHTML = account;
}
// Donate function
async function donateFunction() {
$name = document.getElementById('your_name').value;
$wei = document.getElementById('your_eth').value;
$eth = $wei * 1000000000000000000; // Change wei to ETH
$account = await getAccount();
set = await window.contract.methods.doDonation($name).send(
{
from: $account,
value: $eth
}
);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment