Decode & Insert VerifiableCollectible Images

insertCollectibleImages.js

function insertCollectibleImageBeforePreTags() {
  // Find all <pre> tags in the document
  const preTags = document.querySelectorAll('pre');

  if (preTags.length === 0) {
    console.error('No <pre> tags found in the document.');
    return;
  }

  preTags.forEach((preTag) => {
    // Check if the image has already been inserted
    const prevSibling = preTag.previousElementSibling;
    if (prevSibling && prevSibling.tagName.toLowerCase() === 'img') {
      return;
    }

    let jsonData;
    try {
      jsonData = JSON.parse(preTag.textContent);
    } catch (error) {
      console.error('Invalid JSON content in a <pre> tag.');
      return;
    }

    // Check if the "type" value is an array containing "VerifiableCollectible"
    const typeArray = jsonData.type;
    if (Array.isArray(typeArray) && typeArray.includes('VerifiableCollectible')) {
      const imageSrc = jsonData.credentialSubject?.image;

      if (imageSrc) {
        // Create an <img> tag and set its "src" attribute
        const imgTag = document.createElement('img');
        imgTag.src = imageSrc;

        // Insert the <img> tag before the <pre> tag
        preTag.parentNode.insertBefore(imgTag, preTag);
      } else {
        console.error('No "credentialSubject.image" property found in the JSON data.');
      }
    } else {
      console.error('The JSON data does not meet the required conditions.');
    }
  });
}

// Run the function once immediately
insertCollectibleImageBeforePreTags();

// Find the scrolling container with the attribute 'data-test-id' and value 'virtuoso-scroller'
const scrollingContainer = document.querySelector('[data-test-id="virtuoso-scroller"]');

if (scrollingContainer) {
  // Run the function whenever the scrolling container is scrolled
  scrollingContainer.addEventListener('scroll', insertCollectibleImageBeforePreTags);
} else {
  console.error('No scrolling container found with the class "scrolling-container".');
}