refactor tip ux, get it all working

main
lza_menace 3 years ago
parent 4a09d3c62d
commit 265f7be78e

@ -22,12 +22,14 @@ TEMPLATES_AUTO_RELOAD = getenv('TEMPLATES_AUTO_RELOAD', True)
# Contract
CONTRACT_TESTNET = getenv('TESTNET', True)
CONTRACT_OWNER = 'lzamenace.eth'
if CONTRACT_TESTNET:
WOWX_ADDRESS = '0xc6B039b1e0be1ba0B433f319898438E782E5dEBA' # WOWX testnet
CONTRACT_ADDRESS = '0xE1b6483729557E539cfD9c3Bdb754C54c16cFCe7' # SWX testnet
else:
WOWX_ADDRESS = '0xba5dc7e77d150816b758e9826fcad2d74820e379' # WOWX mainnet
CONTRACT_ADDRESS = '' # SWX mainnet
CONTRACT_ABI = [
{
"inputs": [

@ -43,9 +43,11 @@
{% if meme.meme_ipfs_hash %}
<p><strong>Meme IPFS:</strong> <a href="{{ meme_url }}" target=_self>{{ meme.meme_ipfs_hash }}</a></p>
{% endif %}
<p><strong>WOW Tips:</strong> <span id="wowTips">?</span></p>
<p><strong>WOWX Tips:</strong> <span id="wowxTips">?</span></p>
<p><strong>AVAX Tips:</strong> <span id="wowxTips">?</span></p>
<p><strong>Tips Received:</strong>
<span id="wowTips">?</span> WOW,
<span id="wowxTips">?</span> WOWX,
<span id="avaxTips">?</span> AVAX
</p>
{% if not meme.approved %}
<br/>
@ -61,23 +63,20 @@
<br/>
<div id="tipButtons" class="columns" style="display:none;">
<div class="column">
<a class="button is-info is-12" onclick="tipWOW()" id="tipWOWButton" style="width:100%;">Tip WOW</a>
</div>
<div class="column">
<a class="button is-info is-12" onclick="tipAVAX()" id="tipAVAXButton" style="width:100%;">Tip AVAX</a>
<a class="button is-info is-12" onclick="tipWOW()" id="tipWOWButton" style="width:100%;">Tip via p2p WOW</a>
</div>
<div class="column">
<a class="button is-info is-12" onclick="tipWOWX()" id="tipWOWXButton" style="width:100%;">Tip WOWX</a>
<a class="button is-info is-12" onclick="tipSC()" id="tipSCButton" style="width:100%;">Tip via Smart Contract</a>
</div>
</div>
<div id="mintButtons" class="columns" style="display:none;">
{% if meme.user.wownero_address %}
<div class="column is-one-third">
<a class="button is-info" onclick="tipWOW()" id="tipWOWButton" style="width:100%;">Tip WOW</a>
<a class="button is-info" onclick="tipWOW()" id="tipWOWButton" style="width:100%;">Tip via p2p WOW</a>
</div>
{% endif %}
<div class="column">
<a class="button is-danger" onclick="mint()" id="mintButton" style="width:100%;">Mint</a>
<a class="button is-danger" onclick="mint()" id="mintButton" style="width:100%;">Mint to AVAX</a>
</div>
</div>
{% endif %}
@ -86,7 +85,7 @@
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Tip meme in WOW</p>
<p class="modal-card-title">Tip via WOW p2p</p>
<button class="delete" aria-label="close" id="closeWOWModal"></button>
</header>
<section class="modal-card-body">
@ -100,35 +99,41 @@
p2p transaction on the anonymous, private Wownero network.
Nobody will have visibility into these and will not be shown.
</p>
</br>
<a href="https://wownero.org/#wallets" target="_blank">Wownero Wallets</a>
</section>
<footer class="modal-card-foot">
</footer>
</div>
</div>
<div id="tipWOWXModal" class="modal">
<div id="tipSCModal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Tip meme in WOWX</p>
<button class="delete" aria-label="close" id="closeWOWXModal"></button>
<p class="modal-card-title">Tip via Smart Contract</p>
<button class="delete" aria-label="close" id="closeSCModal"></button>
</header>
<section class="modal-card-body">
<!-- <p style="word-wrap: break-word;">
<strong>Wownero Address (p2p):</strong>
<span id="wowneroAddress">{{ meme.user.wownero_address | default('?') }}</span>
<p>
Sending a tip via the <a href="{{ config.CONTRACT_ADDRESS | show_snowtrace }}" target="_blank">SuchWowX smart contract</a> will send a small amount to the
publisher (the address that minted the meme) and the contract owner ({{ config.CONTRACT_OWNER }}), and the remainder is sent to the meme creator (whoever uploaded it). Everyone gets tipped for their contribution, but primarily the meme creator.
</p>
</br>
<p>
Funds sent to this address will not be tracked as they are a direct,
p2p transaction on the anonymous, private Wownero network.
Nobody will have visibility into these and will not be shown.
</p> -->
sending a WOWX tip
Input the amount of WOWX or AVAX you would like to send and click a button below to sign the transaction in MetaMask wallet.
</p>
</br>
<div class="field">
<label class="label">Tip Amount</label>
<div class="control">
<input id="tipSCAmount" class="input" type="text" placeholder=".042069">
</div>
</div>
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<button class="button">Cancel</button>
<button id="tipWOWXButton" class="button is-success" onclick="tipWOWX()">Tip WOWX</button>
<button id="tipAVAXButton" class="button" onclick="tipAVAX()">Tip AVAX</button>
</footer>
</div>
</div>
@ -143,20 +148,23 @@
{% if meme.approved %}
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', async () => {
// Show buttons depending on if minted or not
let minted = await isMinted('{{ meme.meta_ipfs_hash }}');
if (minted) {
document.getElementById('tipButtons').style.display = "flex";
} else {
document.getElementById('mintButtons').style.display = "flex";
}
// try {
// _walletAddress = w3.utils.toChecksumAddress('{{ meme.user.public_address }}');
// const userProfile = await contract.methods.userProfile(_walletAddress).call();
// console.log(userProfile)
// if (userProfile.wowneroAddress){document.getElementById('wowneroAddress').innerHTML = userProfile.wowneroAddress};
// } catch(e) {
// console.log(e);
// }
// Show tip amounts
try {
const tokenId = await getTokenID('{{ meme.meta_ipfs_hash }}');
const memeDeets = await contract.methods.tokenMeme(tokenId).call();
document.getElementById('wowxTips').innerHTML = await w3.utils.fromWei(memeDeets.creatorTipsWOWX);
document.getElementById('avaxTips').innerHTML = await w3.utils.fromWei(memeDeets.creatorTipsAVAX);
} catch(e) {
console.log(e);
}
});
async function tipWOW() {
@ -168,17 +176,41 @@
}
}
async function tipSC() {
document.getElementById('tipSCButton').classList.add('is-loading');
document.getElementById('tipSCModal').classList.add('is-active');
document.getElementById('closeSCModal').onclick = () => {
document.getElementById('tipSCModal').classList.remove('is-active');
document.getElementById('tipSCButton').classList.remove('is-loading');
}
}
async function getTipAmount() {
const amt = document.getElementById('tipSCAmount').value;
if (isNaN(amt)) {
notif('You must provide a number.', 'warning');
return false;
} else {
return amt;
}
}
async function tipAVAX() {
document.getElementById('tipAVAXButton').classList.add('is-loading');
const tokenId = await getTokenID('{{ meme.meta_ipfs_hash }}');
const walletAddress = await getMetamaskAccount();
const tipAmountWei = w3.utils.toWei('.2');
const tipAmount = await getTipAmount();
if (!tipAmount) {
document.getElementById('tipAVAXButton').classList.remove('is-loading');
return false;
}
const tipAmountWei = w3.utils.toWei(tipAmount);
const gasPrice = await w3.eth.getGasPrice();
try {
const gasLimit = await contract.methods.tipAVAX(tokenId, tipAmountWei).estimateGas({from: walletAddress, value: tipAmountWei}, function(err, gas){
return gas;
});
try {
notif(`Tipping meme "{{ meme.id | shorten_address }}" by "{{ meme.user.handle }} ({{ meme.user.public_address | shorten_address }})" to the Avalanche blockchain.`, 'info');
notif(`Tipping ${tipAmount} AVAX to meme "{{ meme.id | shorten_address }}" by "{{ meme.user.handle }} ({{ meme.user.public_address | shorten_address }})" via the Avalanche blockchain.`, 'info');
let res = await contract.methods.tipAVAX(tokenId, tipAmountWei).send({
from: walletAddress,
value: tipAmountWei,
@ -193,22 +225,19 @@
}
}
async function approveWOWX() {
async function approveWOWX(amountWei) {
const walletAddress = await getMetamaskAccount();
const allowanceWei = await wowxContract.methods.allowance(walletAddress, contractAddress).call();
const allowance = await w3.utils.fromWei(allowanceWei);
console.log(`Current allowance is ${allowance} WOWX`);
const tipAmount = w3.utils.toWei('.2');
if (tipAmount <= allowanceWei) {
if (amountWei <= allowanceWei) {
return true;
}
const gasPrice = await w3.eth.getGasPrice();
const gasLimit = await wowxContract.methods.approve(contractAddress, tipAmount).estimateGas({from: walletAddress}, function(err, gas){
const gasLimit = await wowxContract.methods.approve(contractAddress, amountWei).estimateGas({from: walletAddress}, function(err, gas){
return gas;
});
try {
notif(`Approving usage of WOWX token.`, 'info');
let res = await wowxContract.methods.approve(contractAddress, tipAmount).send({
let res = await wowxContract.methods.approve(contractAddress, amountWei).send({
from: walletAddress,
gasPrice: gasPrice,
gas: gasLimit
@ -222,21 +251,24 @@
async function tipWOWX() {
document.getElementById('tipWOWXButton').classList.add('is-loading');
let approved = await approveWOWX();
if (!approved) {
const tipAmount = await getTipAmount();
if (!tipAmount) {
document.getElementById('tipWOWXButton').classList.remove('is-loading');
return false;
}
const tipAmountWei = w3.utils.toWei(tipAmount);
const tokenId = await getTokenID('{{ meme.meta_ipfs_hash }}');
const walletAddress = await getMetamaskAccount();
const tipAmount = '.2';
const tipAmountWei = await w3.utils.toWei('.2');
const approved = await approveWOWX(tipAmountWei);
if (!approved) {
document.getElementById('tipWOWXButton').classList.remove('is-loading');
return false;
}
const gasPrice = await w3.eth.getGasPrice();
try {
const gasLimit = await contract.methods.tipWOWX(tokenId, tipAmountWei).estimateGas({from: walletAddress}, function(err, gas){
return gas;
});
try {
notif(`Tipping ${tipAmount} WOWX to meme "{{ meme.id | shorten_address }}" by "{{ meme.user.handle }} ({{ meme.user.public_address | shorten_address }})".`, 'info');
let res = await contract.methods.tipWOWX(tokenId, tipAmountWei).send({
from: walletAddress,

Loading…
Cancel
Save