<?php
/*
Template Name: Earnings
Template Post Type: page
*/?>
<!doctype html>
<html lang="en" class="h-100">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Barlow:ital,[email protected],100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <title>SMOON How many SaylorMoons have you won Holding?</title>
    <style>
        body {
          background-color: #202444;
          font-family: 'Barlow', sans-serif;
        }
        p {
            color: #FFFA0F;
        }

        .card {
            padding: 2.2em;
            background-color: #202444;
            border-radius: 33px;
        }
        .spacer {
            height: 1em;
        }

        .cardwrapper {
            position: relative;
            max-width: 536px;
            width: 100%;
            background: rgb(46,81,245);
            background: linear-gradient(15deg, rgba(46,81,245,.5) 0%, rgba(64,224,255,.5) 23%, rgba(240,20,178,.5) 49%, rgba(253,223,6,.5) 77%, rgba(245,138,37,.5) 100%);
            border-radius: 35px;
            padding: 2px;
            overflow: visible;
            border: 2px solid #0c0e1c;
            box-shadow: 0 30px 30px -20px black;
            margin: 2em auto 2em auto;
        }

        .cardwrapper::before {
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            right: 0;
            height: 100%;
            width: 100%;
            margin: 0 auto;
            filter: blur(80px);
            transform: scale(.82);
            background: linear-gradient(15deg, rgba(46,81,245,.5) 0%, rgba(64,224,255,.5) 23%, rgba(240,20,178,.5) 49%, rgba(253,223,6,.5) 77%, rgba(245,138,37,.5) 100%);
        }

        h2 {
          font-weight: 800;
          color: #fff;
        }

        .form-label {
            color: #FFFA0F;
        }

        .form-control {
            color: #F5142B;
            border-radius: 1rem;
            padding: 1rem;
            margin-bottom: .5rem;
            border: 2px solid #FFFA0F;
            background-color: #202444!important;
        }

        .btn-primary {
            color: #202444;
            border-radius: 1rem;
            padding: 1rem;
            margin-bottom: .5rem;
            border: 2px solid #FFFA0F!important;
            border-color: #FFFA0F;
            background-color: #202444;
        }

        .btn-enter {
            border: 2px solid #FFFA0F!important;
            background: #FFFA0F!important;
            font-weight: 800;
        }

        .btn-enter:hover {
            background: #F5142B!important;
        }

        .btn-enter:focus {
            border-color:#FFFA0F!important;
            background: #FFFA0F!important;
            box-shadow: none!important;
            outline: 0 none!important;
        }

        input[type="text"] {
            background-color: #202444!important;
        }

        .input-group>.form-control {
            background-color: #202444!important;
            color: #F5142B;
        }

        textarea:focus,
        input[type="text"]:focus,
        .uneditable-input:focus {
        border-color:#FFFA0F!important;
        box-shadow: none!important;
        outline: 0 none!important;
        }

        hr {
            border: 2px solid #FFFA0F;
            border-radius: 2px;
        }
        </style>
 <link rel="icon" type="image/png" href="/wp-content/uploads/assets/icon.png" />
</head>

<body class="h-100">
    <div class="container h-100" id="app">
        <div class="row h-100 justify-content-center align-items-center">
                <smoon-holder-calculator />

</div>
    </div>
</body>

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    const { createApp } = Vue;
    const app = createApp({});

    app.component('smoon-holder-calculator', {
        data() {
            return {
                walletAddress: '',
                tokenTotals: '&nbsp;',
                tokenPurchased: '&nbsp;',
                tokenSelled: '&nbsp;',
                tokenDistributed: '&nbsp;',
                parameters: {
                    smoon: {
                        contract: "0x5d6CDf1b7F7C35EAE688E4C563b6f16eeAC2cB6b",
                        priceUrl: "https://bsc.api.0x.org/swap/v1/price?sellToken=0x5d6cdf1b7f7c35eae688e4c563b6f16eeac2cb6b&buyToken=BUSD&sellAmount=1000000000000000000"
                    },
                    bscscan: {
                        apiKey: "7DQM2EY9W6AZWDEVJETA4T8KNGSMY8QRH1",
                        baseUrl: "https://api.bscscan.com/api?"
                    }
                }

            }
        },
        methods: {

            async getWalletTransactions() {

                let wAddressLC = this.walletAddress.toLowerCase();

                return await axios.get(this.parameters.bscscan.baseUrl, {
                    params: {
                        module: "account",
                        action: "tokentx",
                        address: wAddressLC,
                        apikey: this.parameters.bscscan.apiKey,
                        startblock: 0,
                        endblock: 99999999999999,
                        sort: "desc",
                        contractaddress: this.parameters.smoon.contract
                    }
                })
                    .then(function (response) {



                        const tokenIn = response.data.result.filter(x => { return x.to == wAddressLC })
                            .reduce((total, x) => {
                                return total + Number(x.value);
                            }, 0);

                        console.log(tokenIn);

                        const tokenOut = response.data.result.filter(x => { return x.from == wAddressLC })
                            .reduce((total, x) => {
                                return total + Number(x.value);
                            }, 0);

                        console.log(tokenOut);

                        return {
                            "tokenIn": tokenIn,
                            "tokenOut": tokenOut
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            async getWalletTotals() {

                return await axios.get(this.parameters.bscscan.baseUrl, {
                    params: {
                        module: "account",
                        action: "tokenbalance",
                        address: this.walletAddress,
                        tag: "latest",
                        contractaddress: this.parameters.smoon.contract,
                        apikey: this.parameters.bscscan.apiKey,

                        tokenPriceUSD: "tokenPriceUSD"
                    }
                })
                    .then(function (response) {

                        return response.data.result / 1000000000;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            async getTokenPrice() {
                return await axios.get(this.parameters.smoon.priceUrl)
                    .then(function (response) {

                        return response.data.price;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            formatWalletTotals(_walletTransactions, _walletTotal, _tokenPrice) {

                let dTotal = _walletTotal - (_walletTransactions.

tokenIn / 1000000000 - _walletTransactions.tokenOut / 1000000000);
                let profit = dTotal * _tokenPrice;

                this.tokenTotals = Intl.NumberFormat('en-US', { maximumFractionDigits: 3, notation: "compact", compactDisplay: "long" }).format(_walletTotal);
                this.tokenPurchased = Intl.NumberFormat('en-US', { maximumFractionDigits: 3, notation: "compact", compactDisplay: "long" }).format(_walletTransactions.tokenIn / 1000000000);
                this.tokenSelled = Intl.NumberFormat('en-US', { maximumFractionDigits: 3, notation: "compact", compactDisplay: "long" }).format(_walletTransactions.tokenOut / 1000000000);
                this.tokenDistributed = Intl.NumberFormat('en-US', { maximumFractionDigits: 3, notation: "compact", compactDisplay: "long" }).format(dTotal)
                    + ", which is "
                    + Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(profit)
                    + " at the current market price.";
            },
            async calculateTotals() {

                this.tokenTotals = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
                this.tokenPurchased = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
                this.tokenSelled = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
                this.tokenDistributed = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';

                const tokenPrice = await this.getTokenPrice();
                const walletTransactions = await this.getWalletTransactions();
                const walletTotal = await this.getWalletTotals();

                this.formatWalletTotals(walletTransactions, walletTotal, tokenPrice);

            },
        },
        template: `
<div class="cardwrapper">
    <div class="card">
        <h2>How many SaylorMoons have you won Holding?</h2>

        <p class="description"> 5% of every SMOON transfer gets redistributed to all holders automatically! This is why your balance grows just by holding SMOON.
        </p>
        <hr>
        <form class="row g-3">

            <div class="col-12">

                <label class="form-label">Wallet Address</label>
                <div class="input-group">
                    <input type="text" class="form-control" v-model="walletAddress">
                    <button class="btn btn-primary btn-enter" type="button" @click="calculateTotals">CHECK</button>
                </div>
            </div>

            <div class="col-12 m-0">
            </div>

            <div class="col-12 mt-0">
                <label class="form-label">SaylorMoon´s Total:</label>
                <button class="btn btn-primary text-start form-control" type="button" disabled v-html="tokenTotals" />
            </div>

            <div class="col-12">
                <label class="form-label">Purchased:</label>
                <button class="btn btn-primary text-start form-control" type="button" disabled v-html="tokenPurchased" />
            </div>

            <div class="col-12">
                <label class="form-label">Sold:</label>
                <button class="btn btn-primary text-start form-control" type="button" disabled v-html="tokenSelled" />
            </div>

            <div class="col-12">
                <label class="form-label">SaylorMoon´s won by hold:</label>
                <button class="btn btn-primary text-start form-control" type="button" disabled v-html="tokenDistributed" />
            </div>

            </form>
        </div>
    </div>
    <div class="spacer"></div>`
    });
    const smoon = app.component('smoon-holder-calculator')
    app.mount('#app')
</script>
</body>

</html>