sendeth2me
v0.0.21
Published
Handy utility to decorate a `<button>` element to send ether to a pre-defined blockchain address.
Downloads
27
Maintainers
Readme
SendEth2.me Button
Handy utility to decorate a <button>
element to send ether to a pre-defined blockchain address.
Install
To install the latest version of SendEth2.me library issue one of the following commands from command line (according to your preference).
Node.js
yarn add sendeth2me
or
npm install sendeth2me
HTML
Link stylesheets and javascript files in the header of your HTML file as usual.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sendeth2me@latest/dist/sendeth2me.css" />
<script
type="module"
src="https://cdn.jsdelivr.net/npm/sendeth2me@latest/dist/sendeth2me.es.bundled.js"
></script>
In case you have already included ethers.js in your HTML you may use the simple version of sendeth2me.es.js:
<script
type="module"
src="https://cdn.jsdelivr.net/npm/sendeth2me@latest/dist/sendeth2me.es.js"
></script>
Then in the body of your HTML file define a <button>
with sendeth
class, and a custom address
attribute.
<button class="sendeth" data-address="0x778bEe312eA9674955C7C0BA5D8D68b2eB8e2C05">
Ether please
</button>
To turn on debugging and late initialization use the isDebug
and autoInit
variables under sendeth2me
namespace of window
object like so:
<script
type="module"
src="https://cdn.jsdelivr.net/npm/sendeth2me@latest/dist/sendeth2me.es.bundled.js"
onload="window.sendeth2me.isDebug = true; window.sendeth2me.autoInit = false;"
></script>
...
<script>
window.sendeth2me.initAll();
</script>
Usage in source
Examples
See the below examples on jsfiddle which demonstrate basic usage of this library.
- Minimal: https://jsfiddle.net/kisszoltan/aebm3nkr/
- Complete: https://jsfiddle.net/kisszoltan/uzs3a74d/
Element content (innerHTML)
When the <button>
is defined with empty content then a default Send ETH
value will be rendered as button caption.
Attributes
Attributes available for <button>
elements with sendeth
class:
| Attribute | Mandatory | Default value | Description | | :----------- | :-------: | :-----------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | data-address | yes | null | recipient address where the amount should be sent | | data-amount | no | 0.01 | amount in ETH to be sent when clicking on the button | | data-icon | no | null | if defined with any value then the button caption will be prefixed with the official ether icon | | data-network | no | null | if defined button will only be enabled when the given network is selected in MetaMask.Possible values are: 1 - Ethereum Mainnet3 - Ropsten4 - Rinkeby137 - Matic (Polygon) Mainnet42 - Kovan80001 - Mumbai (Polygon) Testnet43114 - Avalanche (AVAX) Mainnet43113 - Avalanche (AVAX) Testnet56 - Binance Smart Chain Mainnet97 - Binance Smart Chain Testnet |
Events
| Event | Description |
| :------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| success | fired when ether transaction has finished successfully event.detail
will carry information about the transaction as defined by ethers.js documentation. |
| failure | emitted when any exception was thrown during the send transaction. event.detail
contains the whole exception object as it was thrown. |
Styling
Additionally to the sendeth
class on a <button>
element, an eth-icon
class is added to the prefix icon. Use this class and its path, polygon and rect elements to change the icon's size and fill color as follows:
.eth-icon {
width: 2em;
height: 2em;
}
.eth-icon path,
.eth-icon polygon,
.eth-icon rect {
fill: #fff;
}
button.sendeth:disabled .eth-icon path,
button.sendeth:disabled .eth-icon polygon,
button.sendeth:disabled .eth-icon rect {
fill: #ccc;
}
There are three pre-defined colors available (default - blue, red and green) for SendEth2Me buttons. Custom colors can be defined in similar way:
button.sendeth.green {
background-color: #98ea62;
color: #b462ea;
}
button.sendeth.green:hover {
background-color: #98ea62cc;
}
button.sendeth.green:active {
background-color: #36b416;
}
Smart contract
SendEth2.me button library uses a smart contract for sending Ether (cryptocurrency) instead of simple transactions. Of course many bullshit(ish) reasons could be listed here, but mainly it is only to pinch a bite from each transaction as developer fee so 1% is held back on contract address to support maintenance and further improvements. Apart from this, the library is free to use and there will be additional features coming like: integration with different platforms/frameworks or further customization of the button, not to mention the single page application which will provide a link option to those who cannot use HTML button (for example in a YouTube video description or on Medium.com) and so much more... These all require time and time is money hence the 1% cut.
Availability
The contract is available on GitHub and for now it is deployed to:
Mainnet(s):
- Mainnet (Ethereum Mainnet network)
- Matic (Polygon Mainnet network)
- BSC Mainnet (Binance Smart Chain network)
- Avalanche (Avalanche Mainnet network)
Test networks:
- Kovan (Ethereum test network)
- Ropsten (Ethereum test network)
- Rinkeby (Ethereum test network)
- Mumbai (Polygon test network)
- Fuji (Avalanche test network)
- BSC Testnet (Binance Smart Chain test network)
Rules
As stated above, the contract substract 1% from each transaction to fill the developer with enough coffee to maintain and further improve this library. This substract mechanism respects the following rules:
- sent amount is 1 wei (what a supporter?!): all 1 wei is sent to the recipient
- sent amount is less than 100 wei: 1 wei is held back on contract and the remaining is sent to the recipient
- sent amount is more than or equal to 100 wei: 1% is held back on contract and the remaining is sent to the recipient
For visual types like me this table shows some examples:
| Amount sent | Recipient receives | Remains on contract | | :---------- | :----------------: | :-----------------: | | 1 wei | 1 wei | 0 wei | | 2 wei | 1 wei | 1 wei | | 10 wei | 9 wei | 1 wei | | 53 wei | 52 wei | 1 wei | | 100 wei | 99 wei | 1 wei | | 110 wei | 109 wei | 1 wei | | 200 wei | 198 wei | 2 wei | | 500 wei | 495 wei | 5 wei | | 1000000 wei | 990000 wei | 10000 wei | | 1 eth | 0.99 eth | 0.01 eth |