Desarrollé una aplicación web simple que genera una "billetera NFT" de opensea en función de la dirección de la billetera que ingresé.
Ahora digamos que ocurre una transacción y el propietario de la billetera vendió o compró un nft, ¿cómo puedo actualizar mi aplicación web en tiempo real?
en otras palabras, ¿cómo puedo escuchar los cambios en una billetera desde la API y generarlos en tiempo real?
aplicación.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()índice.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>Debe almacenar los resultados de la primera respuesta de la función getNFT localmente, por ejemplo, usando Window.localStorage, y usar setInterval() para volver a llamar a la función getNFT con un retraso entre ejecuciones y comparar los resultados con los valores anteriores.