trying to improve js, setting up minting

suchwowx/static/js/main.js

@@ -1,12 +1,3 @@
-async function getSignedData(publicAddress, jsonData) {
-  const signedData = await window.ethereum.request({
-    method: 'eth_signTypedData_v3',
-    params: [publicAddress, JSON.stringify(jsonData)]
-  });
-  console.log(signedData);
-  return signedData
-}
-
 async function notif(s, t) {
   new Noty({
     type: t,

suchwowx/static/js/metamask.js

@@ -2,6 +2,15 @@ window.addEventListener('DOMContentLoaded', () => {
   onboardMetaMask();
 })
 
+async function getSignedData(publicAddress, jsonData) {
+  const signedData = await window.ethereum.request({
+    method: 'eth_signTypedData_v3',
+    params: [publicAddress, JSON.stringify(jsonData)]
+  });
+  console.log(signedData);
+  return signedData
+}
+
 async function onboardMetaMask(){
   const onboarding = new MetaMaskOnboarding();
   const onboardButton = document.getElementById('metamaskConnect');

suchwowx/templates/includes/footer.html

@@ -1,5 +1,5 @@
 <footer style="margin: 0 auto; width: 100%; text-align: center;">
-  <p>Made by @lza_menace</p>
+  <p>Made by <a href="https://lzahq.tech" target="_blank">@lza_menace</a></p>
 </footer>
 
 

suchwowx/templates/includes/web3.html

@@ -0,0 +1,15 @@
+<script src="/static/js/vendor/web3-1.3.6.min.js"></script>
+<script type="text/javascript">
+  let contractABI = {{ config.CONTRACT_ABI | tojson }};
+  let contractAddress = "{{ config.CONTRACT_ADDRESS }}";
+  const w3 = new Web3(Web3.givenProvider || "http://127.0.0.1:7545");
+  const contract = new w3.eth.Contract(contractABI, contractAddress);
+
+  async function getMetamaskAccount() {
+    const accounts = await window.ethereum.request({
+      method: 'eth_requestAccounts',
+    });
+    const account = accounts[0];
+    return account
+  }
+</script>

suchwowx/templates/meme.html

@@ -27,7 +27,7 @@
             {% else %}
               <img src="{{ meme_url }}" id="memeImage" />
             {% endif %}
-            </br>
+            <br/>
             <p>Title: <strong>{{ meme.title }}</strong></p>
             <p>Description: <strong>{{ meme.description }}</strong></p>
             <p>Poster Address: <a href="{{ url_for('user.show', handle=meme.user.handle) }}">{{ meme.user.handle }}</a></p>
@@ -39,7 +39,7 @@
             {% endif %}
             <p>Meme ID: <code>{{ meme }}</code></p>
             {% if not meme.meta_ipfs_hash %}
-            </br>
+            <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>
@@ -48,6 +48,25 @@
                 <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 class="columns">
+              {% if meme.minted %}
+                <div class="column">
+                  <a class="button is-info is-12 column">Tip AVAX</a>
+                </div>
+                <div class="column">
+                  <a class="button is-info is-12 column">Tip WOWX</a>
+                </div>
+                <div class="column">
+                  <a class="button is-info is-12 column">Tip WOW</a>
+                </div>
+              {% else %}
+                <div class="column">
+                  <a class="button is-danger is-12 column" onclick="mint()">Mint</a>
+                </div>
+              {% endif %}
+            </div>
             {% endif %}
           </div>
         </div>
@@ -56,5 +75,43 @@
     </div>
   </section>
   {% include 'includes/footer.html' %}
+  {% include 'includes/web3.html' %}
+  <script type="text/javascript">
+    async function isMinted() {
+      const ipfsHash = '{{ meme.meta_ipfs_hash }}';
+      if (ipfsHash != '') {
+        const tokenId = await contract.methods.metadataTokenId(ipfsHash).call();
+        console.log(tokenId);
+        return
+      }
+      // if (userProfile.userHandle){document.getElementById('userHandle').innerHTML = userProfile.userHandle};
+      // if (userProfile.wowneroAddress){document.getElementById('wowneroAddress').innerHTML = userProfile.wowneroAddress};
+      // if (userProfile.metadataIPFSHash){document.getElementById('metadataIPFSHash').innerHTML = userProfile.metadataIPFSHash};
+      // if (userProfile.tippedAVAX){document.getElementById('tippedAVAX').innerHTML = userProfile.tippedAVAX};
+      // document.getElementById('tippedWOWX').innerHTML = 0;
+      // return
+    }
+    
+    async function mint() {
+      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 }}" 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');
+      }
+    }
+  </script>
   </body>
 </html>

suchwowx/templates/profile.html

@@ -11,11 +11,8 @@
       {% if user %}
         <div class="screen">
           <div class="columns">
-            <div class="column is-one-third">
+            <div class="column is-full content">
-              <img src="{{ user.get_profile_image() }}" id="profileImage" />
+              <h3>From Avalanche Blockchain</h3>
-            </div>
-            <div class="column is-full">
-              <p><strong>From Avalanche Blockchain</strong></p>
               <p>Handle: <strong><span id="userHandle" class="mr-4">?</span></strong></p>
               <p>Wownero Address: <strong><span id="wowneroAddress" class="mr-4 wrap">?</span></strong></p>
               <p>Profile IPFS Hash: <strong><span id="metadataIPFSHash">?</span></strong></p>
@@ -23,8 +20,7 @@
               <p>Tipped WOWX: <strong><span id="tippedWOWX">?</span></strong></p>
               <p>Tipped WOW: <strong><span id="tippedWOW">?</span></strong></p>
 
-              </br></br>
+              <h3>From Local Database</h3>
-              <p><strong>From Local Database</strong></p>
               <p>
                 Handle:
                 {% if is_user %}
@@ -64,7 +60,7 @@
               <p>Website: <a href="{{ user.website_url }}" target="_blank">{{ user.website_url }}</a></p>
               {% endif %}
               {% if is_user %}
-              <p></br><a onclick="saveDB()" class="ml-2 button is-primary">Save DB</a></p>
+              <p><a onclick="saveDB()" class="ml-2 button is-primary">Save DB</a></p>
               {% endif %}
             </div>
         </div>
@@ -74,21 +70,8 @@
     </div>
   </section>
   {% include 'includes/footer.html' %}
-  <script src="/static/js/vendor/web3-1.3.6.min.js"></script>
+  {% include 'includes/web3.html' %}
   <script type="text/javascript">
-    let contractABI = {{ config.CONTRACT_ABI | tojson }};
-    let contractAddress = "{{ config.CONTRACT_ADDRESS }}";
-    const w3 = new Web3(Web3.givenProvider || "http://127.0.0.1:7545");
-    const contract = new w3.eth.Contract(contractABI, contractAddress);
-
-    async function getMetamaskAccount() {
-      const accounts = await window.ethereum.request({
-        method: 'eth_requestAccounts',
-      });
-      const account = accounts[0];
-      return account
-    }
-
     async function saveDB() {
       await fetch('{{ url_for("api.update_user"	) }}', {
         method: 'POST',
@@ -106,8 +89,8 @@
         .then(function(data) {
             console.log(data)
             if (data['success']) {
-              notif('Updated user information in this server\'s database', 'success');
+              notif('Updated user information in this server\'s database.', 'success');
-              notif('Publish to AVAX to make the data more available', 'info');
+              notif('Publish to the Avalanche blockchain to make the data globally available.', 'info');
             } else {
               notif(data['message'], 'error');
             }
@@ -137,7 +120,7 @@
         return gas;
       });
       try {
-        notif(`Publishing user handle "${handle}" to the Avalanche blockchain.`, 'info');
+        notif(`Publishing user handle "${handle}" to the Avalanche blockchain for address ${walletAddress.slice(0, 6)}...${walletAddress.slice(-6)}.`, 'info');
         let res = await contract.methods.setUserHandle(handle).send({
           from: walletAddress,
           value: 0,
@@ -162,7 +145,7 @@
         return gas;
       });
       try {
-        notif(`Publishing Wownero address "${address.slice(0, 6)}...${address.slice(-6)}" to the Avalanche blockchain.`, 'info');
+        notif(`Publishing Wownero address "${address.slice(0, 6)}...${address.slice(-6)}" to the Avalanche blockchain for address ${walletAddress.slice(0, 6)}...${walletAddress.slice(-6)}.`, 'info');
         let res = await contract.methods.setUserWowneroAddress(address).send({
           from: walletAddress,
           value: 0,
@@ -187,7 +170,7 @@
         return gas;
       });
       try {
-        notif(`Publishing user profile metadata IPFS hash ${_hash} to the Avalanche network.`, 'info');
+        notif(`Publishing user profile metadata IPFS hash ${_hash} to the Avalanche blockchain for address ${walletAddress.slice(0, 6)}...${walletAddress.slice(-6)}.`, 'info');
         let res = await contract.methods.setUserMetadata(_hash).send({
           from: walletAddress,
           value: 0,