refactor tip ux, get it all working

suchwowx/config.py

@@ -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": [

suchwowx/templates/meme.html

@@ -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>
+                <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="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>
+                <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();
-      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');
+        const gasLimit = await contract.methods.tipAVAX(tokenId, tipAmountWei).estimateGas({from: walletAddress, value: tipAmountWei}, function(err, gas){
+          return gas;
+        });
+        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();
+      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 approved = await approveWOWX(tipAmountWei);
       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 {
+        const gasLimit = await contract.methods.tipWOWX(tokenId, tipAmountWei).estimateGas({from: walletAddress}, function(err, gas){
+          return gas;
+        });
         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,