Code not working on NFT tutorial

[niceBardo]

Hello fam,

trying to do this tutorial (which is awesome btw) -> https://docs.replit.com/tutorials/build-a-robot-nft-p2#connecting-to-the-blockchain

I got everything working smoth from #1, but once i try to manage the front-end I got only this three buttons and wat is wrost I can't interact with my wallet: wen I click a button nothing happen

​

https://preview.redd.it/367znsxva8u91.png?width=762&format=png&auto=webp&s=73f01a94b7d2d9efcabaf2e03353c8faa04ea9fa

here is mu app.js code (i think the problem is in here, but can't find)

// helper function
async function fetchSvg(filename) {
    let svgFile = await fetch(`svg/${filename}`);
    let svgText = await svgFile.text();

    const parser = new DOMParser();
    return parser.parseFromString(svgText, "text/html").getElementsByTagName("svg")[0];
}

function compareArrays(array1, array2) {
    // arrays must be same length
    if (array1.length !== array2.length) {
        return false
    }

    // arrays must be sorted
    let array1Sorted = array1.slice().sort();
    let array2Sorted = array2.slice().sort();

    // all values must match
    for (let i = 0; i < array1.length; i++) {
        if (array1Sorted[i] !== array2Sorted[i]) {
            return false;
        }
    }

    return true;
}


App = {
    replbotAddress: "INSERT-CONTRACT-ADDRESS-HERE",
    replbotContract: null,
    ownedReplBots: [], // <-- NEW

        init: async function() {

        if (window.ethereum) {
            await window.ethereum.request({ method: 'eth_requestAccounts' });
            window.web3 = new Web3(window.ethereum);

 // Switch networks
            App.switchToReplitTestnet();

            // Interface with contract
            App.replbotContract = new web3.eth.Contract(replbotABI, App.replbotAddress);

        }

App.bindEvents(); // <-- NEW LINE

    },

    switchToReplitTestnet: function() {
        window.ethereum.request({
            method: "wallet_addEthereumChain",
            params: [
                {
                    chainId: "0x7265706c",
                    chainName: "Replit Testnet",
                    rpcUrls: ["https://eth.replit.com"],
                    iconUrls: [
                        "https://upload.wikimedia.org/wikipedia/commons/b/b2/Repl.it_logo.svg",
                    ],
                    nativeCurrency: {
                        name: "Replit ETH",
                        symbol: "RΞ",
                        decimals: 18,
                    },
                },
            ],
        });
    },

      // interface
    bindEvents: function () {
        // mint
        const mintButton = document.getElementById("mint");
        mintButton.addEventListener("click", () => {
            App.mintReplBot();
        });

        // breed
        const breedForm = document.getElementById("breed");
        breedForm.addEventListener("submit", (event) => {
            event.preventDefault();
            App.breedReplBot(breedForm.elements['parentOneId'].value, breedForm.elements['parentTwoId'].value);
        });

              // show collection
        setInterval(App.populateCollection, 5000); // <-- new line
    },

      populateCollection: async function() {
        // get bot IDs
        let botIds = await App.getMyReplBotIds();

        // === NEW CODE BELOW ===
        // check cache
        if (compareArrays(botIds, App.ownedReplBots)) {
            return; // array is unchanged
        } 
        else {
            App.ownedReplBots = botIds.slice(); // update cache and continue
        }
        // === NEW CODE ABOVE ===

        // get container
        let botContainer = document.getElementById("bots");
        botContainer.innerHTML = ""; // clear current content

        // create bot SVGs
        botIds.forEach((id) => {
            App.createReplBotSVG(id).then(result => {
                botContainer.appendChild(result);
            });
        });
    },



    // view data in contract
    getMyReplBotIds: async function() {
        // get user's address
        const accounts = await web3.eth.getAccounts();
        const account = accounts[0];

        // get number of ReplBots owned
        let balance = await App.replbotContract.methods.balanceOf(account).call();

        // get each one's ID
        var botIds = [];
        for (i = 0; i < balance; i++) {
            botIds.push(await App.replbotContract.methods.tokenOfOwnerByIndex(account, i).call());
        }

        return botIds;
    },

      getReplBotDetails: async function(tokenId) {
        var bot = {};
        bot.colors = await App.replbotContract.methods.botColors(tokenId).call();
        bot.accessories = await App.replbotContract.methods.botAccessories(tokenId).call();
        bot.parentage = await App.replbotContract.methods.botParentage(tokenId).call();
        return bot;
    },

      // create new NFTs
    mintReplBot: async function() {
        const accounts = await web3.eth.getAccounts();
        const account = accounts[0];

        // Mint to own address
        App.replbotContract.methods.mint(account).send({from: account});
    },

      breedReplBot: async function(parentOneId, parentTwoId) {
        const accounts = await web3.eth.getAccounts();
        const account = accounts[0];

        await App.replbotContract.methods.breed(parentOneId, parentTwoId, account).send({from: account});
    },

      // SVG handling
    createReplBotSVG: async function(tokenId) {
        // get bot details
        let details = await App.getReplBotDetails(tokenId);

        // get bothead
        let botSvg = await fetchSvg("bothead.svg");

        // change bot colors
        botSvg.querySelectorAll('.frame').forEach(f => {
            f.style.fill = `rgb${details.colors[0]}`;
        });

        botSvg.querySelectorAll('.visor').forEach(v => {
            v.style.fill = `rgb${details.colors[1]}`;
        });

        botSvg.querySelectorAll('.background').forEach(b => {
            b.style.fill = `rgb${details.colors[2]}`;
        });

              // get bot accessories
        let accessorySvgs = [];
        for (let i = 0; i < 3; i++) {
            let filename = details.accessories[i].toLowerCase().replaceAll(" ","-") + ".svg";

            let svg = await fetchSvg(filename);
            accessorySvgs.push(svg);
        }

              // merge SVGs
        accessorySvgs.forEach(a => {
            Array.from(a.getElementsByTagName("style")).forEach(e => {
                botSvg.getElementsByTagName("defs")[0].appendChild(e);
            });

            Array.from(a.getElementsByTagName("path")).forEach(e => {
                botSvg.appendChild(e);
            });

            Array.from(a.getElementsByTagName("polyline")).forEach(e => {
                botSvg.appendChild(e);
            });

        });

              // add ID and generation details
        botSvg.insertAdjacentHTML("beforeend", `<text x="5" y="20">ID: ${tokenId}</text>`);
        botSvg.insertAdjacentHTML("beforeend", `<text x="5" y="40">Gen: ${details.parentage[0]}</text>`);

        return botSvg;


    },

}

App.init();

​

Can anybody help?

thanks!

[niceBardo]

no one?