tubbymemes/suchwowx/templates/includes/web3.html

<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);
  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 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') {
      tokenAddress = '0xc6B039b1e0be1ba0B433f319898438E782E5dEBA';
    } else {
      tokenAddress = '0xba5dc7e77d150816b758e9826fcad2d74820e379';
    }
    try {
      await ethereum.request({
        method: 'wallet_watchAsset',
        params: {
          type: 'ERC20',
          options: {
            address: tokenAddress.toLowerCase(),
            symbol: 'WOWX',
            decimals: 18,
            image: 'https://github.com/wownerox/meta/raw/main/logo.png'
          }
        },
      });
    } catch(e) {
      console.log(e);
    }
  }

  async function addAvalancheNetwork(){
    let chainId, rpcUrl, explorerUrl, name;
    if ('{{ config.CONTRACT_TESTNET }}' == 'True') {
      name = 'Avalanche Testnet';
      chainId = '0xA869';
      rpcUrl = 'https://api.avax-test.network/ext/bc/C/rpc';
      explorerUrl = 'https://testnet.snowtrace.io';
    } else {
      name = 'Avalanche Mainnet';
      chainId = '0xA86A';
      rpcUrl = 'https://api.avax.network/ext/bc/C/rpc';
      explorerUrl = 'https://snowtrace.io';
    }
    try {
      await ethereum.request({
        method: 'wallet_switchEthereumChain',
        params: [{ chainId: chainId }],
      });
    } catch (switchError) {
      // This error code indicates that the chain has not been added to MetaMask.
      if (switchError.code === 4902) {
        try {
          await ethereum.request({
            method: 'wallet_addEthereumChain',
            params: [{
              chainId: chainId,
              chainName: name,
              nativeCurrency: {
                name: 'Avalanche',
                symbol: 'AVAX',
                decimals: 18,
              },
              rpcUrls: [rpcUrl],
              blockExplorerUrls: [explorerUrl],
            }],
          });
        } catch (addError) {
          // handle "add" error
        }
      }
      // handle other "switch" errors
    }
  }

  async function getTokenID(ipfsHash) {
    await addAvalancheNetwork();
    if (ipfsHash != '') {
      const tokenId = await contract.methods.metadataTokenId(ipfsHash).call();
      return tokenId;
    }
  }

  async function isMinted(ipfsHash) {
    await addAvalancheNetwork();
    if (ipfsHash != '') {
      const tokenId = await getTokenID(ipfsHash)
      if (tokenId == 0) {
        return false;
      } else {
        return true;
      }
    } else {
      return false
    }
  }
</script>