feature: better caching

package.json

@@ -1,12 +1,12 @@
 {
   "name": "data-dex",
-  "version": "1.18.20",
+  "version": "1.18.21",
   "description": "The Itheum Data DEX enables you to trade your data using web3 tech",
   "dependencies": {
     "@chakra-ui/icons": "2.1.1",
     "@chakra-ui/react": "2.8.2",
     "@hookform/resolvers": "3.6.0",
-    "@itheum/sdk-mx-data-nft": "3.8.0-alpha.12",
+    "@itheum/sdk-mx-data-nft": "3.8.0-alpha.15",
     "@itheum/sdk-mx-enterprise": "0.3.0",
     "@multiversx/sdk-core": "13.14.2",
     "@multiversx/sdk-dapp": "2.33.3",

src/components/Sections/RecentDataNFTs.tsx

@@ -80,7 +80,7 @@ const RecentDataNFTs = ({ headingText, headingSize }: { headingText: string; hea
         const recentNonces = offers.map((nft: any) => ({ nonce: nft.offeredTokenNonce }));
 
         console.log("Debug ABOUT TO HIT RecentDataNFTs:createManyFromApi");
-        const dataNfts: DataNft[] = await DataNft.createManyFromApi(recentNonces);
+        const dataNfts: DataNft[] = await DataNft.createManyFromApi(recentNonces, 5 * 60 * 1000);
         const _latestOffers: RecentDataNFTType[] = [];
 
         offers.forEach((offer: Offer) => {

src/libs/MultiversX/api.ts

@@ -147,21 +147,24 @@ export const getClaimTransactions = async (address: string, chainID: string) =>
   }
 };
 
+// Non-Critical workflow, CAN cache -- use private RPC
+// Caching for 15 seconds (not too long as user wont see new Data NFTs), but short enough to prevent react design issues where we hit endpoint too much
+// Gets users Data NFTs, and shows in wallet etc
 export const getNftsOfACollectionForAnAddress = async (address: string, collectionTickers: string[], chainID: string): Promise<DataNft[]> => {
   DataNft.setNetworkConfig(IS_DEVNET ? "devnet" : "mainnet", `https://${getMvxRpcApi(chainID)}`);
 
   try {
-    const ownerByAddress = await DataNft.ownedByAddress(address, collectionTickers);
+    const ownerByAddress = await DataNft.ownedByAddress(address, collectionTickers, 15 * 1000);
     return ownerByAddress;
   } catch (error) {
     console.error(error);
     return [];
   }
 };
 
-/*
-Ideally this should be in the Data NFT SDK so it can be client caches, but for now we can keep it here @TODO
-*/
+// Non-Critical workflow, CAN cache -- use private RPC
+// Caching for 5 mins
+// gets NFTs using IDs, there is a method in the Data NFT SDK that does the same. Should move there @TODO
 export const getNftsByIds = async (nftIds: string[], chainID: string): Promise<NftType[]> => {
   const api = getMvxRpcApi(chainID);
   try {
@@ -185,6 +188,7 @@ export const getNftsByIds = async (nftIds: string[], chainID: string): Promise<N
 
     // match input and output order
     const sorted: NftType[] = [];
+
     for (const nftId of nftIds) {
       for (const nft of jsonDataPayload) {
         if (nftId === nft.identifier) {
@@ -206,6 +210,8 @@ export const getNftsByIds = async (nftIds: string[], chainID: string): Promise<N
   }
 };
 
+// Critical workflow, NO caching -- should use private RPC
+// Gets ITHEUM balance
 export const getAccountTokenFromApi = async (address: string, tokenId: string, chainID: string): Promise<TokenType | undefined> => {
   try {
     const api = getMvxRpcApi(chainID);
@@ -221,6 +227,7 @@ export const getAccountTokenFromApi = async (address: string, tokenId: string, c
   }
 };
 
+// Non-Critical workflow, NO caching -- use public RPC (but always mainnet as this is where the price is)
 export const getItheumPriceFromApi = async (): Promise<number | undefined> => {
   try {
     const url = "https://api.multiversx.com/tokens/ITHEUM-df6f26";
@@ -235,6 +242,7 @@ export const getItheumPriceFromApi = async (): Promise<number | undefined> => {
   }
 };
 
+// Non-Critical workflow, CAN cache -- use public RPC
 export const getAccountDetailFromApi = async (address: string, chainID: string): Promise<AccountType | undefined> => {
   try {
     const api = getMvxRpcPublicOnlyApi(chainID);
@@ -250,6 +258,7 @@ export const getAccountDetailFromApi = async (address: string, chainID: string):
   }
 };
 
+// Critical workflow, NO caching -- should use private RPC
 export const getTokenDecimalsRequest = async (tokenIdentifier: string | undefined, chainID: string) => {
   const tokenIdentifierUrl = `https://${getMvxRpcApi(chainID)}/tokens/${tokenIdentifier}`;
   try {

src/pages/Bonding/Bonding.tsx

@@ -101,8 +101,11 @@ export const Bonding: React.FC = () => {
           .toNumber();
       });
 
-      const dataNfts: DataNft[] = await DataNft.createManyFromApi(pagedBonds.map((bond) => ({ nonce: bond.nonce, tokenIdentifier: bond.tokenIdentifier })));
-      // setTotalAmountBondedForThisPage(_totalAmountBondedForThisPage);
+      const dataNfts: DataNft[] = await DataNft.createManyFromApi(
+        pagedBonds.map((bond) => ({ nonce: bond.nonce, tokenIdentifier: bond.tokenIdentifier })),
+        5 * 60 * 1000
+      );
+
       setContractBonds(pagedBonds);
       setBondingDataNfts(dataNfts);
     })();
@@ -120,7 +123,8 @@ export const Bonding: React.FC = () => {
       }
       const pagedCompensation = await bondContract.viewPagedCompensations(compensationPageIndex * pageSize, (compensationPageIndex + 1) * pageSize - 1);
       const dataNfts: DataNft[] = await DataNft.createManyFromApi(
-        pagedCompensation.map((bond) => ({ nonce: bond.nonce, tokenIdentifier: bond.tokenIdentifier }))
+        pagedCompensation.map((bond) => ({ nonce: bond.nonce, tokenIdentifier: bond.tokenIdentifier })),
+        5 * 60 * 1000
       );
       setCompensationDataNfts(dataNfts.reverse());
       setAllCompensation(pagedCompensation);

src/pages/DataNFT/components/BondingCards.tsx

@@ -124,7 +124,10 @@ export const BondingCards: React.FC = () => {
         });
 
       try {
-        bondedDataNfts = await DataNft.createManyFromApi(myBonds.map((bond) => ({ nonce: bond.nonce, tokenIdentifier: bond.tokenIdentifier })));
+        bondedDataNfts = await DataNft.createManyFromApi(
+          myBonds.map((bond) => ({ nonce: bond.nonce, tokenIdentifier: bond.tokenIdentifier })),
+          5 * 60 * 1000
+        );
       } catch (e) {
         console.error(e);
         setErrDataNFTStreamGeneric(new Error(labels.ERR_BONDING_STAKING_COULD_NOT_GET_DATA_NFTS));

src/pages/DataNFT/components/CompensationCards.tsx

@@ -49,7 +49,7 @@ export const CompensationCards: React.FC = () => {
       });
       const dataNftsInScT = [];
       for (let i = 0; i < nftsInScT.length; i += 50) {
-        const dataNftsInScTChunk = await DataNft.createManyFromApi(nftsInScT.slice(i, i + 50));
+        const dataNftsInScTChunk = await DataNft.createManyFromApi(nftsInScT.slice(i, i + 50), 5 * 60 * 1000);
         dataNftsInScT.push(...dataNftsInScTChunk);
       }
       for (const compT of compsInScT) {

src/pages/DataNFT/components/FavoriteCards.tsx

@@ -47,7 +47,7 @@ export const FavoriteCards: React.FC = () => {
         if (getFavourites.length === 0) {
           return;
         } else {
-          const dataNftsT: DataNft[] = await DataNft.createManyFromApi(_favoriteData);
+          const dataNftsT: DataNft[] = await DataNft.createManyFromApi(_favoriteData, 5 * 60 * 1000);
           setDataNfts(dataNftsT);
         }
       }

src/pages/DataNFT/components/LivelinessStaking.tsx

@@ -125,8 +125,6 @@ export const LivelinessStaking: React.FC = () => {
 
   async function handleClaimRewardsClick() {
     try {
-      alert("handle claim reward 3");
-
       const envNetwork = import.meta.env.VITE_ENV_NETWORK;
       const liveContract = new LivelinessStake(envNetwork);
       const tx = liveContract.claimRewards(new Address(mxAddress));
@@ -136,7 +134,7 @@ export const LivelinessStaking: React.FC = () => {
         transactions: [tx],
       });
     } catch (e: any) {
-      alert("handle claim reward FAILED");
+      alert("Claim rewards method FAILED");
       if (e) {
         alert(e.toString());
       }

src/pages/Home/components/TrendingData.tsx

@@ -62,7 +62,7 @@ export const TrendingData: React.FC = () => {
         _trendingData.push({ nonce: nonce, tokenIdentifier: tokenIdentifier });
       });
 
-      const dataNfts: DataNft[] = await DataNft.createManyFromApi(_trendingData);
+      const dataNfts: DataNft[] = await DataNft.createManyFromApi(_trendingData, 5 * 60 * 1000);
 
       const trending = getTrendingData.map((dataNft) => {
         const ratingNfts = dataNfts.find((nft) => nft.tokenIdentifier === dataNft.tokenIdentifier);

src/pages/Home/components/VolumesDataNfts.tsx

@@ -66,7 +66,7 @@ const VolumesDataNfts: React.FC<VolumesDataNftsProps> = () => {
       });
 
       console.log("Debug ABOUT TO HIT VolumesDataNfts:createManyFromApi");
-      const dataNfts: DataNft[] = await DataNft.createManyFromApi(_volumesData);
+      const dataNfts: DataNft[] = await DataNft.createManyFromApi(_volumesData, 5 * 60 * 1000);
 
       const _volume = dataNftsVolumes.map((dataNft) => {
         const nftDetails = dataNfts.find((nft) => nft.tokenIdentifier === dataNft.tokenIdentifier);