JSFiddle - React, Tailwind, and code Playground

by jarosciak

HTML

<html>
<head>
    <title>XEN Lottery</title>
    <script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.17/moment-timezone-with-data-2012-2022.min.js"></script>
    <script>
        // Global Variables
        const abi = [{ ... }];
        const address = "0x...";
        const nullAddress = "0x0000000000000000000000000000000000000000";

        // Connect to Metamask
        window.addEventListener("load", async () => {
            if (window.ethereum) {
                window.web3 = new Web3(ethereum);
                try {
                    await ethereum.enable();
                    const accounts = await web3.eth.getAccounts();
                    console.log("Metamask connected");
                } catch (error) {
                    console.log("User denied account access");
                }
            } 
            else if (window.web3) {
                window.web3 = new Web3(web3.currentProvider);
            } 
            else {
                console.log("Non-Ethereum browser detected. You should consider trying MetaMask!");
            }
        });

        // Connect to Contract
        let contract;
        if (typeof web3 !== 'undefined') {
            web3 = new Web3(web3.currentProvider);
            contract = new web3.eth.Contract(abi, address);
        }

        // Display the total Xen collected for the next draw
        contract.methods.totalXenCollected().call().then(function(result) {
            $('#totalXenCollected').html(result);
        });

        // Display the total Xen burned since the genesis
        contract.methods.totalXenBurned().call().then(function(result) {
            $('#totalXenBurned').html(result);
        });

 ...