JSFiddle - React, Tailwind, and code Playground

by jarosciak

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>XENFT NFT Search</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/alchemy-api.min.js"></script>
    <script src="https://apis.google.com/js/platform.js"></script>
  </head>
  <body>
    <h1>XENFT NFT Search</h1>
    <div>
      <label for="address">Ethereum Address:</label>
      <input type="text" id="address" />
      <button onclick="searchNFTs()">Submit</button>
    </div>
    <div id="nft-list"></div>
    <script>
      const XENFT_CONTRACT_ADDRESS = '0x0a252663dbcc0b073063d6420a40319e438cfa59';
      const alchemy = new AlchemyAPI();
      
      function searchNFTs() {
        const address = document.getElementById('address').value;
        alchemy.getAssetsByOwner(address).then(assets => {
          const nftList = document.getElementById('nft-list');
          nftList.innerHTML = '';
          assets.forEach(nft => {
            if(nft.contract_address === XENFT_CONTRACT_ADDRESS) {
              const nftElement = document.createElement('div');
              nftElement.innerHTML = `<a href="${nft.url}" target="_blank">${nft.name}</a> <img src="calendar-icon.png" onclick="addReminder('${nft.expiration_date}')" />`;
              nftList.appendChild(nftElement);
            }
          });
        });
      }
      
      function addReminder(expirationDate) {
        const reminder = {
          'summary': 'XENFT NFT Expiration',
          'start': {
            'dateTime': expirationDate,
            'timeZone': 'UTC',
          },
          'end': {
            'dateTime': expirationDate,
            'timeZone': 'UTC',
          },
        };
        gapi.client.calendar.events.insert({
          'calendarId': 'primary',
          'resource': reminder
        }).then(function(response) {
            console.log(response);
            alert('Reminder added to your Google Calendar.');
          }, function(error) {
            console.log(error);
            alert('Failed to add...