Connect Widget Incorporation; Displaying users NFTs

0x63F33007C57F0DaC6A · November 13, 2022, 2:30am

Hello, I am a very noob web dev as I am doing this for a college capstone and this is my first time dealing with APIs and HTML/JS in general. I have been looking through the documentation and github on the connect widget and ability to access client data in order to display the NFTs of the user. I am currently following the nft_profile_page on github manifold_templates for html and I have done the necessary edits it states to do but for some reason the users NFTs will not be displayed.

github.com

manifoldxyz/manifold-templates/blob/main/html/nft_profile_page/index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://connect.manifoldxyz.dev/2.2.4/connect.umd.min.js"></script>
    <link rel="stylesheet" href="https://connect.manifoldxyz.dev/2.2.4/connect.css">
  </head>
  <body>
    <script>
      window.addEventListener('m-authenticated', async (event) => {
        // Get the data client instance
        const client = event.detail.client;

        // Get the NFTs owned by the currently connected wallet
        const tokens = await client.getNFTsOfOwner();
        const h2 = document.createElement("h2");
        h2.innerHTML = "Your NFTs";
        document.getElementById("nfts").appendChild(h2)
        // Create a div element for each token you own
        for (let i = 0; i < tokens.length; i++) {
          const img = document.createElement("img");

This file has been truncated. show original

I have basically copied this link exactly, only changing the neccesary things for the connect widget at the bottom. Do I need to add another div or use the script in a certain way? Any help would be appreciated.

yungwknd · November 29, 2022, 4:20pm

What have you changed? Do you have the code you are using somewhere we can look at? Happy to look, but will need more information.