move js into html tpl

suchwowx/static/js/metamask.js

@@ -1,92 +0,0 @@
-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');
-  let accounts;
-  let nonce = 0;
-
-  const connectButton = async () => {
-    if (!MetaMaskOnboarding.isMetaMaskInstalled()) {
-      onboardButton.onclick = () => {
-        onboardButton.classList.add('is-loading');
-        onboardButton.disabled = true;
-        onboarding.startOnboarding();
-      };
-    } else if (accounts && accounts.length > 0) {
-      onboardButton.classList.remove('is-loading');
-      onboardButton.disabled = false;
-      onboarding.stopOnboarding();
-    } else {
-      onboardButton.onclick = async () => {
-        try {
-        onboardButton.classList.add('is-loading');
-        onboardButton.disabled = true;
-        let userExists;
-        await addAvalancheNetwork();
-        const allAccounts = await window.ethereum.request({
-          method: 'eth_requestAccounts',
-        });
-        await fetch('/api/v1/user_exists?public_address=' + allAccounts[0])
-          .then((resp) => resp.json())
-          .then(function(data) {
-              if (!data['success']) {
-                console.log('error checking user_exists!')
-                return
-              }
-              console.log(data);
-              nonce = data['nonce'];
-          })
-
-        const msg = 'Authentication request from SuchWowX app! Verifying message with nonce ' + nonce
-        const signedData = await window.ethereum.request({
-          method: 'personal_sign',
-          params: [msg, allAccounts[0]]
-        });
-        console.log(`Signing data with msg "${msg}", address "${allAccounts[0]}", signed data: ${signedData}`)
-
-        await fetch('/api/v1/authenticate/metamask', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json;charset=utf-8'
-          },
-          body: JSON.stringify({
-            'signed_data': signedData,
-            'public_address': allAccounts[0],
-            'nonce': nonce,
-            'message': msg,
-          })
-        })
-          .then((resp) => resp.json())
-          .then(function(data) {
-              console.log(data);
-              if (data['success']) {
-                window.location.href = '/';
-              }
-          })
-        } catch(e) {
-          console.log(e);
-          onboardButton.classList.remove('is-loading');
-        }
-      }
-    }
-  };
-
-  connectButton();
-  if (MetaMaskOnboarding.isMetaMaskInstalled()) {
-    window.ethereum.on('accountsChanged', (newAccounts) => {
-      window.location.href = '/disconnect';
-    });
-  }
-};

suchwowx/templates/includes/scripts.html

@@ -1,12 +1,8 @@
+<script src="/static/js/vendor/metamask-onboarding-1.0.1.bundle.js"></script>
 <script src="/static/js/vendor/noty-3.2.0.js"></script>
 <script src="/static/js/main.js"></script>
 {% include 'includes/web3.html' %}
 
-{% if not current_user.is_authenticated %}
-<script src="/static/js/vendor/metamask-onboarding-1.0.1.bundle.js"></script>
-<script src="/static/js/metamask.js"></script>
-{% endif %}
-
 {% with messages = get_flashed_messages(with_categories=true) %}
   {% if messages %}
   <script type="text/javascript">

suchwowx/templates/includes/web3.html

@@ -1,5 +1,19 @@
 <script src="/static/js/vendor/web3-1.3.6.min.js"></script>
 <script type="text/javascript">
+
+  window.addEventListener('DOMContentLoaded', () => {
+    // Arm connect button
+    onboardMetaMask();
+
+    // Detect account changes in MetaMask
+    if (MetaMaskOnboarding.isMetaMaskInstalled()) {
+      window.ethereum.on('accountsChanged', (newAccounts) => {
+        window.location.href = '/disconnect';
+      });
+    }
+  })
+
+  // Web3 and smart contract details
   let contractABI = {{ config.CONTRACT_ABI | tojson }};
   let contractAddress = "{{ config.CONTRACT_ADDRESS }}";
   const w3 = new Web3(Web3.givenProvider);
@@ -13,6 +27,94 @@
     return account
   }
 
+  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');
+    let accounts;
+    let nonce = 0;
+
+    if (!onboardButton) {
+      return false;
+    }
+
+    onboardButton.onclick = async () => {
+      if (!MetaMaskOnboarding.isMetaMaskInstalled()) {
+        onboardButton.onclick = () => {
+          onboardButton.classList.add('is-loading');
+          onboardButton.disabled = true;
+          onboarding.startOnboarding();
+        };
+      } else if (accounts && accounts.length > 0) {
+        onboardButton.classList.remove('is-loading');
+        onboardButton.disabled = false;
+        onboarding.stopOnboarding();
+      } else {
+        try {
+          onboardButton.classList.add('is-loading');
+          onboardButton.disabled = true;
+          let userExists;
+          await addAvalancheNetwork();
+          const allAccounts = await window.ethereum.request({
+            method: 'eth_requestAccounts',
+          });
+          await fetch('/api/v1/user_exists?public_address=' + allAccounts[0])
+            .then((resp) => resp.json())
+            .then(function(data) {
+                if (!data['success']) {
+                  console.log('error checking user_exists!')
+                  return
+                }
+                console.log(data);
+                nonce = data['nonce'];
+            })
+
+          const msg = 'Authentication request from SuchWowX app! Verifying message with nonce ' + nonce
+          const signedData = await window.ethereum.request({
+            method: 'personal_sign',
+            params: [msg, allAccounts[0]]
+          });
+          console.log(`Signing data with msg "${msg}", address "${allAccounts[0]}", signed data: ${signedData}`)
+
+          await fetch('/api/v1/authenticate/metamask', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json;charset=utf-8'
+            },
+            body: JSON.stringify({
+              'signed_data': signedData,
+              'public_address': allAccounts[0],
+              'nonce': nonce,
+              'message': msg,
+            })
+          })
+            .then((resp) => resp.json())
+            .then(function(data) {
+                console.log(data);
+                if (data['success']) {
+                  window.location.href = '/';
+                }
+            })
+        } catch(e) {
+          console.log(e);
+          onboardButton.classList.remove('is-loading');
+        }
+      }
+    };
+
+    // connectButton();
+
+  };
+
+
   async function addWOWX() {
     let tokenAddress;
     if ('{{ config.CONTRACT_TESTNET }}' == 'True') {