<?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/bootstrap@5.0.1/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,wght@0,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/vue@next"></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: ' ',
tokenPurchased: ' ',
tokenSelled: ' ',
tokenDistributed: ' ',
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>
