A Metamask Donation Button
16 Apr 2018Ethereum is cool!
Tip me with ether is better than buy me a coffee nowadays.
The community around Ethereum is awesome. The MetaMask is a great browser plugin for the Ethereum blockchain, serving many Ðapps, like some collectable, breedable and adorable creatures.
MetaMask can serve the tipping purpose easily. This post is largely adapted from their own demo: TipButton. This post demos how to embed such donation link in a Jekyll Github page, very straightforward.
The Tip Button
Here we go:
It is SAFE to click it. An additional window will prompt up BEFORE you actually send the 0.005 ether to me, which is equivalent to a coffee by today 2018-04-16.
If you don’t have MetaMask installed, please consider visiting MetaMask.
What is it doing?
- Metamask provides the web3.js object for your browser that communicates with the blockchain in the air, manages your accounts, and most importantly protects (hopefully) your private keys.
- When you initiate a transaction on the Ethereum blockchain, it prompts a window to ask for your permission to sign the transaction.
- The tipping transaction is constructed in the embedded javascript code.
- If you hit confirm it, I will get the 0.005 ether after this transaction is mined into the chain.
- Thanks!
The Embedded JavaScript
The script is very simple and straightforward:
<script>
var tipButton = document.querySelector('.tip-button');
tipButton.addEventListener('click', function() {
if (typeof web3 === 'undefined') {
return alert('You need to install MetaMask to use this feature.')
}
var user_address = web3.eth.accounts[0];
if (typeof user_address === 'undefined') {
return alert('You need to log in MetaMask to use this feature.')
}
web3.eth.sendTransaction({
to: "0x66454C561Cf137F53321945758b0E4645E9EEae8",
from: user_address,
value: web3.toWei('0.005', 'ether'),
}, function (err, transactionHash) {
if (err) return alert('Thanks for trying out!');
alert('Thanks for the generosity!!');
})
})
</script>Enjoy the blockchain! 