tubbymemes/suchwowx/templates/includes/scripts.html

<script src="/static/js/vendor/noty-3.2.0.js"></script>

<!-- <script src="/static/js/main.js"></script> -->

{% with messages = get_flashed_messages(with_categories=true) %}
  {% if messages %}
  <script type="text/javascript">
    {% for category, message in messages %}
      {% if category == None %}{% set category = 'info' %}{% endif %}
      new Noty({
        type: '{{ category }}',
        theme: 'relax',
        layout: 'topCenter',
        text: '{{ message }}',
        timeout: 4500
      }).show();
    {% endfor %}
  </script>
  {% endif %}
{% endwith %}

{% if not current_user.is_authenticated %}
<script src="/static/js/vendor/web3-1.3.6.min.js"></script>
<script src="/static/js/vendor/metamask-onboarding-1.0.1.bundle.js"></script>
<script>
  window.addEventListener('DOMContentLoaded', () => {
    const onboarding = new MetaMaskOnboarding();
    const onboardButton = document.getElementById('metamaskConnect');
    let accounts;
    let nonce = 0;

    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
    }

    const connectButton = async () => {
      if (!MetaMaskOnboarding.isMetaMaskInstalled()) {
        // onboardButton.innerText = 'Click here to install MetaMask!';
        onboardButton.onclick = () => {
          document.getElementById('metamaskConnect').classList.add('is-loading');
          onboardButton.disabled = true;
          onboarding.startOnboarding();
        };
      } else if (accounts && accounts.length > 0) {
        document.getElementById('metamaskConnect').classList.remove('is-loading');
        onboardButton.disabled = true;
        onboarding.stopOnboarding();
      } else {
        onboardButton.onclick = async () => {
          let userExists;
          const allAccounts = await window.ethereum.request({
            method: 'eth_requestAccounts',
          });
          await fetch('{{ url_for("api.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('{{ url_for("api.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 = '/'
                }
            })
          }
      }
    };

    connectButton();
    if (MetaMaskOnboarding.isMetaMaskInstalled()) {
      window.ethereum.on('accountsChanged', (newAccounts) => {
        accounts = newAccounts;
        connectButton();
      });
    }
  });
</script>
{% endif %}