1

I built a simple web application that outputs an "NFT wallet" from opensea based on the wallet address I input.

Now lets say a transaction occur and the owner of the wallet sold or bought an nft, how can I update my web application in real time?

in other words how can I listen for changes in a wallet from the api and output them in real time?

app.js:

async function getNFT(address) {
    const response = await fetch("https://api.opensea.io/api/v1/assets?owner=" + address + "&order_direction=desc&offset=0&limit=20");
    const data = await response.json();
    console.log(data);
    let NFTWallet = [];
    for (const asset of data.assets) {
        const NFT = {
            url: asset.image_url,
            name: asset.asset_contract.name
        }
        NFTWallet.push(NFT);
        let nft = document.createElement("span");
        let image = document.createElement("span");
        image.innerHTML = "<img src='" + NFT.url + "' width=\"84px\" height=\"84px\" title=\"" + NFT.name + "\"/>";
        nft.appendChild(image);
        document.getElementById("nft-wallet").appendChild(nft);
    }
    console.log(NFTWallet);
}

window.addEventListener("load", getNFT("wallet-adress"));//input wallet in getNft()

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenSea Connection</title>
    <script src="app.js"></script>
</head>
<body>
    <h1>NFT Wallet</h1>
    <div id="nft-wallet"></div>
</body>
</html>
Nimantha
  • 6,405
  • 6
  • 28
  • 69
Dor Konis
  • 11
  • 4
  • [Listening to Events](https://github.com/ProjectOpenSea/opensea-js#listening-to-events). – MikeM Nov 19 '21 at 18:43
  • I don't think there's a way to listen to account events but you can subscribe to events for that contract with web3.Contract(). – pguardiario Nov 22 '21 at 00:45

1 Answers1

1

You need to store the results of the first response from the function getNFT locally for example using Window.localStorage, and use setInterval() to call again the function getNFT with a delay in between executions and compare the results with the previous values.

Window.localStorage

setInterval()

ManuelMB
  • 1,254
  • 2
  • 8
  • 16
  • thanks for your answer but its not what I'm looking for, I want to listen for a change from the api rather than pulling a new json and compare it to the old one every set time – Dor Konis Nov 19 '21 at 17:23