How can I show the images immediately from opensea api when I stake or unstake in NFT staking website with moralis?

I have built NFT staking website and it is working properly except that I forced to show the image update when staking or unstaking. That is because immediate update of image cannot be done with moralis getnftforcontract api and opensea api. The code is following.

  const get_balanceUrls = async () => {

await Moralis.Web3API.initialize({ apiKey: WEB3APIKEY });
const options = { chain: CHAINETHID, address: walletAddress, token_address: G_ADDRESS, };
let ownedNFTs = await Moralis.Web3API.account.getNFTsForContract(options);
console.log("owning NFTS", ownedNFTs.result);
let stakedNFTs = Object.values(balanceofstakes);

if(ownedNFTs.result.length == 0 && nft_unstakeBalance.length == 0) {
  setBalanceImageUrl([]);
  return;
}
let token_ids = "";

ownedNFTs.result.map((value, index) => {
  if(stakedNFTs.indexOf(value.token_id) < 0) {
    token_ids += 'token_ids=' + value.token_id + "&";        
  }
})  

nft_unstakeBalance.map((value, index) => {
  token_ids += 'token_ids=' + value + "&";
});

if(token_ids == "") {
  setBalanceImageUrl([]);
  return;
}

 
console.log("token_ids", token_ids)

let assets = await Axios.get(`${OPENSEA_URL}assets? 
order_direction=desc&offset=0&limit=20&${token_ids}asset_contract_address=${G_ADDRESS}`)
  .then(res => {
    console.log("balanceurl", res);
    return res.data.assets;
  })
  .catch(err => {
    console.log(err);
    return [];
});

setBalanceImageUrl(assets);

}

I think there should be more convenient way to solve this issue. If you know, feel free to answer or discuss with me.


I think it takes a bit time for opensea to change the owner of NFT asset. And what's more, I have used both of opensea api and moralis api but it took longer to use opensea api and I couldn't update the frontend images immediately.

I think to force update(add) the images with unstaked images with redux state variable when you unstake like this is the best way. But that is only my opinion.

-in reducer

case "nft_unstakeBalance":
    return({
    ...state,
    nft_unstakeBalance : action.payload
    })
  • in frontend

    nft_unstakeBalance.map((value, index) => {
      token_ids += 'token_ids=' + value + "&";
      });