You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

284 lines
12 KiB
HTML

<!DOCTYPE html>
<html>
{% include 'includes/head.html' %}
<body>
<section class="section">
<div class="container">
{% include 'includes/navbar.html' %}
{% if meme %}
{% if meme.meta_ipfs_hash %}
{% set meta_url = config.IPFS_SERVER + "/ipfs/" + meme.meta_ipfs_hash %}
{% set meme_url = config.IPFS_SERVER + "/ipfs/" + meme.meme_ipfs_hash %}
{% else %}
{% set meta_url = "" %}
{% set meme_url = url_for('meta.uploaded_file', filename=meme.file_name, _external=True) %}
{% endif %}
<div id="screen">
<div class="screen">
{% if meme.file_name %}
{% if meme.file_name.endswith('mp4') %}
<video style="max-height: 60vh!important;max-width:100%;" {% if not request.MOBILE %}autoplay{% else %}controls{% endif %} muted loop>
<source src="{{ meme_url }}" type="video/mp4">
Your browser does not support the video tag.
</video>
{% else %}
<img src="{{ meme_url }}" id="memeImage" />
{% endif %}
{% endif %}
<br/>
<p><strong>Meme ID:</strong> <code>{{ meme }}</code></p>
<p><strong>Title:</strong> {{ meme.title }}</p>
<p><strong>Description:</strong> {{ meme.description }}</p>
<p><strong>Poster Address:</strong> <a href="{{ url_for('user.show', handle=meme.user.handle) }}">{{ meme.user.handle }}</a></p>
{% if meme.user.wownero_address %}
<p><strong>Wownero Address:</strong> <span style="word-wrap: break-word">{{ meme.user.wownero_address }}</p>
{% endif %}
{% if meme.meta_ipfs_hash %}
<p><strong>Meta IPFS:</strong> <a href="{{ meta_url }}" target=_self>{{ meme.meta_ipfs_hash }}</a></p>
{% endif %}
{% 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>
{% if not meme.approved %}
<br/>
<div class="columns">
<div class="column">
<a class="button is-info is-12 column" href="{{ url_for('meme.approve', meme_id=meme.id, action='approve') }}">Approve</a>
</div>
<div class="column">
<a class="button is-danger is-12 column" href="{{ url_for('meme.approve', meme_id=meme.id, action='deny') }}">Deny</a>
</div>
</div>
{% else %}
<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>
</div>
<div class="column">
<a class="button is-info is-12" onclick="tipWOWX()" id="tipWOWXButton" style="width:100%;">Tip WOWX</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>
</div>
{% endif %}
<div class="column">
<a class="button is-danger" onclick="mint()" id="mintButton" style="width:100%;">Mint</a>
</div>
</div>
{% endif %}
<div id="tipWOWModal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Tip meme in WOW</p>
<button class="delete" aria-label="close" id="closeWOWModal"></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>
</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>
</section>
<footer class="modal-card-foot">
</footer>
</div>
</div>
<div id="tipWOWXModal" 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>
</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>
</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
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<button class="button">Cancel</button>
</footer>
</div>
</div>
</div>
</div>
{% endif %}
</div>
</section>
{% include 'includes/footer.html' %}
{% if meme.approved %}
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', async () => {
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);
// }
});
async function tipWOW() {
document.getElementById('tipWOWButton').classList.add('is-loading');
document.getElementById('tipWOWModal').classList.add('is-active');
document.getElementById('closeWOWModal').onclick = () => {
document.getElementById('tipWOWModal').classList.remove('is-active');
document.getElementById('tipWOWButton').classList.remove('is-loading');
}
}
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 gasPrice = await w3.eth.getGasPrice();
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');
let res = await contract.methods.tipAVAX(tokenId, tipAmountWei).send({
from: walletAddress,
value: tipAmountWei,
gasPrice: gasPrice,
gas: gasLimit
});
console.log(res);
window.location.href = "";
} catch(e) {
notif(e.message, 'warning');
document.getElementById('tipAVAXButton').classList.remove('is-loading');
}
}
async function approveWOWX() {
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) {
return true;
}
const gasPrice = await w3.eth.getGasPrice();
const gasLimit = await wowxContract.methods.approve(contractAddress, tipAmount).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({
from: walletAddress,
gasPrice: gasPrice,
gas: gasLimit
});
console.log(res);
return true;
} catch(e) {
notif(e.message, 'warning');
}
}
async function tipWOWX() {
document.getElementById('tipWOWXButton').classList.add('is-loading');
let approved = await approveWOWX();
if (!approved) {
document.getElementById('tipWOWXButton').classList.remove('is-loading');
return false;
}
const tokenId = await getTokenID('{{ meme.meta_ipfs_hash }}');
const walletAddress = await getMetamaskAccount();
const tipAmount = '.2';
const tipAmountWei = await w3.utils.toWei('.2');
const gasPrice = await w3.eth.getGasPrice();
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,
gasPrice: gasPrice,
gas: gasLimit
});
console.log(res);
window.location.href = "";
} catch(e) {
notif(e.message, 'warning');
document.getElementById('tipWOWXButton').classList.remove('is-loading');
}
}
async function mint() {
if (await isMinted('{{ meme.meta_ipfs_hash }}')) {
notif('Already minted!', 'warning');
return
}
document.getElementById('mintButton').classList.add('is-loading');
const walletAddress = await getMetamaskAccount();
const gasPrice = await w3.eth.getGasPrice();
const gasLimit = await contract.methods.mint("{{ meme.meta_ipfs_hash }}", "{{ meme.user.public_address }}").estimateGas({from: walletAddress}, function(err, gas){
return gas;
});
try {
notif(`Minting meme "{{ meme.id | shorten_address }}" by "{{ meme.user.handle }} ({{ meme.user.public_address | shorten_address }})" to the Avalanche blockchain.`, 'info');
let res = await contract.methods.mint("{{ meme.meta_ipfs_hash }}", "{{ meme.user.public_address }}").send({
from: walletAddress,
value: 0,
gasPrice: gasPrice,
gas: gasLimit
});
console.log(res);
window.location.href = "";
} catch(e) {
notif(e.message, 'warning');
document.getElementById('mintButton').classList.remove('is-loading');
}
}
</script>
{% endif %}
</body>
</html>