Code Snippet – Comet Tip Button, powered by the VeChainThor Blockchain

557
comettipbutton

We’d like to present you our first code snippet utilizing Comet, a web3 supportive (native) web wallet which enables for the creation and distribution of dApps powered by the VeChainThor Blockchain.

As many people have been asking about this, we’re showing you a bare-bones and simple way of implementing a Comet Tip Button powered by the VeChainThor Blockchain to your website. With it you can specify the amount of VET you’d like to tip. Keep in mind, this is a code snippet meant as a quick and easy example. It is not meant to be used in a live environment without changing it according to your own needs.

We have two pieces of code. First, we have the <head> section which includes web3.min.js and then the <body> section to include the actual button that calls for our sendTippy() function. You’re able to change the amount of VET you wish to send across mainnet by changing the specified target address within the source code. It will show you a transaction link when your Comet tip was successful.

Play around with it, and enjoy!


Comet





Note:

  • You’ll need to put the Account Privacy setting to ‘Automatically share with DApps’ in Comet (Settings > Account Privacy).
  • This works for both mainnet and testnet. However, on testnet you’ll receive a tx URL that is meant for a mainnet transaction, and will thus be invalid.

Head section

This section imports the web3.min.js file, creates an addEventListener and declares all required variables. It also creates the actual sendTippy() function.

<head>
    <title>Comet Tippy</title>
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

// 'Import' ES5 web3 javascript file, cleaner to ES6 but... keep it simple.

    <script type="text/javascript" src="web3.min.js" ></script>
    <script>
        var web3;

// Add an addEventListener, to make sure web3 is fired.

        window.addEventListener('load', function() {
            web3 = new Web3(thor);
            thorifyExtend(web3, "http://localhost:8669");
        });

// Create the sendTippy() function.
// Declare let AMOUNTVET and let YOURADDRESS (change where needed).

        async function sendTippy()
        {
            let AMOUNTVET = web3.utils.toWei(document.getElementById("amount").value);
            let YOURADDRESS = "0x4008ecd943e739cc883e95402ac95ea7af853c4c"; // This is the feed my cat donation address, maybe, perhaps.

// Grab Comet's currently active VET account.

            const [cometAccount] = await web3.eth.getAccounts();

// Basic VTHO (gas) amount.

            web3.eth.sendTransaction({ from: cometAccount, to: YOURADDRESS, value: AMOUNTVET, gas: 25000}, function(error, result) {
                if(!error) {

// If it goes well, show the (mainnet) VeForge page with the transaction. You might want to wait a few seconds before clicking.

                    document.getElementById('response').innerHTML = 'Success: <a href="https://explore.veforge.com/transactions/' + result + '"> View Transaction </a>'
                    console.log('I have sent some VET');
                }

// If it doesn't go well, or you cancel signing, throw a console.log message.

                else {
                    console.log('Woops, I did something wrong.' + error);
                }
            });
        }
    </script>
</head>

Body section

This section shows the actual label and button to fire the function sendTippy().

<body>

// Let's throw in the body, intentionally coded so that it's extra ugly. We love using <center></center> for this purpose.

<center>
    <br><br><br><br>
    <img src="comet_test.png" alt="Comet" style="width:128px;height:128px;">
    <br><br><br><br>
    <div id="wrapper">
        <div id="page-content-wrapper">
            <div class="container-fluid">

// And finally the button that launches the sendTippy() function.

                <fieldset>
                    <label> VET: 

// Input the VET amount you want to tip, refers to the sendTippy() to: within let AMOUNTVET.

                        <input type="text" id="amount"></input>
                    </label>
                    <button onclick="sendTippy()">Donate</button>

// Tie a response to allow the VeForge URL to make sense. We don't want to enter the Void.

                    <div id="response"></div>
                </fieldset>
            </div>
        </div>
    </div>
</center>
</body>

We will be adding more code snippets that work, stay tuned!

If you have any suggestions or feedback, let us know on Twitter, Telegram or by sending an email to contact@theemberworks.com.