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>
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.