use psql

src/components/collection-info/index.js

@@ -35,8 +35,8 @@ const CollectionInfo = ({ collection, isLoading }) => {
               )}
             </div>
             <div className="mb--20">
-              {collection.description && <p>{collection.description}</p>}
-              {!collection.description && isLoading && (
+              {collection?.description && <p>{collection.description}</p>}
+              {!collection?.description && isLoading && (
                 <Skeleton width={200} count={2} />
               )}
             </div>

src/components/collection-inscription/index.js

@@ -49,6 +49,13 @@ const OrdinalCard = ({ overlay, inscription, auction, onClick }) => {
                 <p>Live Auction</p>
               </div>
             )}
+
+          {!auction?.nextPriceDrop?.scheduledTime && inscription?.nostr?.value && (
+              // <CountdownTimer time={auction.nextPriceDrop.scheduledTime} />
+              <div className="card-tag">
+                <p>For Sale</p>
+              </div>
+            )}
           </div>
           <div className="inscription-details-area">
             {inscription && (

src/components/modals/auction-modal/index.js

@@ -33,6 +33,7 @@ import {
 } from "@services/nosft";
 import { useCounter } from "react-use";
 import useBitcoinPrice from "src/hooks/use-bitcoin-price";
+import { refreshInscription } from "@services/nitrous-api";
 
 bitcoin.initEccLib(ecc);
 
@@ -310,8 +311,11 @@ const AuctionModal = ({ show, handleModal, utxo, onSale, isSpent }) => {
         collection: utxo.collection?.slug,
       };
       const auction = await createAuction(dutchAuction);
-      console.log({ auction });
+      await refreshInscription(utxo.inscriptionId);
+
+
       toast.info(`Order successfully scheduled to be published to Nostr!`);
+
     } catch (e) {
       toast.error(e.response?.data?.message || e.message);
       setIsOnSale(false);

src/containers/Collection.js

@@ -17,16 +17,33 @@ const Collection = ({ className, space, collection }) => {
 
   const [utxosType, setUtxosType] = useState("");
 
+  const formatInscriptionToUtxo = (item) => {
+    const auction = item?.auctions?.[0];
+    if (auction) {    
+      const currentEvent = auction?.metadata.find(
+        (m) => m.price == auction.currentPrice,
+      );
+      auction.nextPriceDrop  = currentEvent ? auction?.metadata[currentEvent.index + 1]: undefined;
+    }
+
+    if (item?.sellEvents?.length) {
+      item.inscription.nostr = item.sellEvents[0];
+    }
+
+    return {...item.inscription, auction: auction, bids: item.bids, sellEvents: item.sellEvents };
+  }
+
   useMemo(() => {
     const filteredUtxos = applyFilters({
-      utxos: collection.inscriptions || [],
+      utxos: collection.inscriptions?.map(formatInscriptionToUtxo) || [],
       activeSort,
       sortAsc,
       utxosType,
     });
-
+  
     setFilteredOwnedUtxos(filteredUtxos);
   }, [collection?.inscriptions, activeSort, sortAsc, utxosType]);
+
 
   let { author: name, slug, icon } = collectionAuthor || {};
   if (name) {
@@ -87,6 +104,7 @@ const Collection = ({ className, space, collection }) => {
                       ...inscription,
                       inscriptionId: inscription.id,
                     }}
+                    auction={inscription.auction}
                   />
                 </div>
               ))}

src/containers/CollectionLive.js

@@ -175,7 +175,7 @@ const CollectionOnSale = ({
 
           let nextPriceDrop;
           const currentEvent = auctions.metadata.find(
-            (m) => m.price === auctions.currentPrice,
+            (m) => m.price == auctions.currentPrice,
           );
 
           const nostr = currentEvent.nostr;

src/containers/product-details/index.js

@@ -27,6 +27,7 @@ import useBitcoinPrice from "src/hooks/use-bitcoin-price";
 import BidModal from "@components/modals/bid-modal";
 import BidsModal from "@components/modals/bids-modal";
 import BidsLoadingButton from "./loading-button";
+import { refreshInscription } from "../../services/nitrous-api";
 
 export const toBTC = (sats) => parseFloat((sats / 100000000).toFixed(8));
 
@@ -143,8 +144,16 @@ const ProductDetailsArea = memo(
     const [auctionCanceled, setAuctionCanceled] = useState(false);
     const { bitcoinPrice } = useBitcoinPrice({ nostrOrdinalsAddress });
 
+    const cancelAuctionAndRefreshInscription = async(_inscriptionId) => {
+
+      await cancelAuction(_inscriptionId).catch(console.error);
+      // Tracker service doesn't know about this change. so we should trigger the event manually
+      await refreshInscription(_inscriptionId);
+
+    }
+
     const [{ loading: isCanceling, error: auctionError }, doCancelAction] =
-      useAsyncFn(cancelAuction, []);
+      useAsyncFn(cancelAuctionAndRefreshInscription, []);
 
     const handleSendModal = () => {
       setShowSendModal((prev) => !prev);

src/pages/collection/[slug].js

@@ -10,14 +10,16 @@ import CollectionInfo from "@components/collection-info";
 import { useRouter } from "next/router";
 import { WalletContext } from "@context/wallet-context";
 import { useWalletState, useHeaderHeight } from "@hooks";
-import { getCollection } from "@services/nosft";
+import { getCollection } from "@services/nitrous-api";
 import { SkeletonTheme } from "react-loading-skeleton";
 import clsx from "clsx";
 import SectionTitle from "@components/section-title";
 import Slider, { SliderItem } from "@ui/slider";
 import OrdinalCard from "@components/collection-inscription";
 import LocalStorage, { LocalStorageKeys } from "@services/local-storage";
 
+// Saves up to the amount in storage for faster refresh load.
+const LOCAL_STORAGE_INSCRIPTIONS_SIZE = 20;
 const SliderOptions = {
   infinite: true,
   slidesToShow: 5,
@@ -66,68 +68,77 @@ const Inscription = () => {
 
   const [collection, setCollection] = useState({});
   const [collectionInfo, setCollectionInfo] = useState();
-  const [isDutchLoaded, setIsDutchLoaded] = useState(false);
   const [isCollectionLoading, setIsCollectionLoading] = useState(false);
 
   useEffect(() => {
     if (!slug) return;
     const key = `${LocalStorageKeys.COLLECTION_INFO}:${slug}`;
     const fetchCollection = async () => {
-      setIsCollectionLoading(false);
-      const collectionData = await getCollection(slug, true);
+      setIsCollectionLoading(true);
+
+      const { inscriptions, collection: collectionData } = await getCollection(slug, true);
 
       const links = [];
 
-      if (collectionData.website_link) {
+      if (collectionData.websiteLink) {
         links.push({
           name: "Website",
-          url: collectionData.website_link,
+          url: collectionData.websiteLink,
         });
       }
 
-      if (collectionData.twitter_link) {
+      if (collectionData.twitterLink) {
         links.push({
           name: "Twitter",
-          url: collectionData.twitter_link,
+          url: collectionData.twitterLink,
         });
       }
 
-      if (collectionData.discord_link) {
+      if (collectionData.discordLink) {
         links.push({
           name: "Discord",
-          url: collectionData.discord_link,
+          url: collectionData.discordLink,
         });
       }
 
-      // collectionData.inscriptions = collectionInscriptions.slice(0, 50);
       collectionData.links = links;
-
+      
       const collectionInfoData = {
         ...collectionData,
         inscriptions: [],
       };
-
-      LocalStorage.set(key, collectionInfoData);
+
+      LocalStorage.set(key, {
+        collection: collectionData,
+        inscriptions: inscriptions.slice(0, LOCAL_STORAGE_INSCRIPTIONS_SIZE)
+      });
+
+
+      collectionData.inscriptions = inscriptions;
       setCollectionInfo(collectionInfoData);
-      setIsCollectionLoading(true);
+      setIsCollectionLoading(false);
       setCollection(collectionData);
     };
 
-    const collectionInfoData = LocalStorage.get(key);
-    if (collectionInfoData) {
+    const cacheCollection = LocalStorage.get(key);
+    if (cacheCollection) {
+      const collectionData = cacheCollection.collection;
+      const inscriptionsData = cacheCollection.inscriptions;
+
+      const collectionInfoData = {
+        ...collectionData,
+        inscriptions: [],
+      };
+
+      collectionData.inscriptions = inscriptionsData;
       setCollectionInfo(collectionInfoData);
-      setIsCollectionLoading(true);
+      setCollection(collectionData);
+      setIsCollectionLoading(false);
     }
 
     fetchCollection();
   }, [slug]);
 
-  const onDutchLoaded = () => {
-    setTimeout(() => {
-      setIsDutchLoaded(true);
-    }, 800);
-  };
-
   return (
     <WalletContext.Provider value={walletState}>
       <Wrapper>
@@ -136,23 +147,14 @@ const Inscription = () => {
         />
         <Header ref={elementRef} />
         <main id="main-content" style={{ paddingTop: headerHeight }}>
-          {collectionInfo && (
             <CollectionInfo
               collection={collectionInfo}
               isLoading={isCollectionLoading}
             />
+          {collection?.inscriptions?.length > 0 && (
+            <Collection collection={collection} />
           )}
-          {collection && (
-            <>
-              {/* <CollectionAuction collection={collection} /> */}
-              <CollectionLive
-                collection={collection}
-                onDutchLoaded={onDutchLoaded}
-              />
-              {isDutchLoaded && <Collection collection={collection} />}
-            </>
-          )}
-          {!isDutchLoaded && collectionInfo && (
+          {!collection?.inscriptions?.length > 0 && (
             <SkeletonTheme baseColor="#13131d" highlightColor="#242435">
               <div
                 id="your-collection"
@@ -182,7 +184,7 @@ const Inscription = () => {
                 </div>
               </div>
             </SkeletonTheme>
-          )}
+          )} 
         </main>
 
         <Footer />

src/services/local-storage.js

@@ -9,7 +9,12 @@ const LocalStorage = {
             return undefined;
         }
 
-        window.localStorage.setItem(id, JSON.stringify(data));
+        try {
+            window.localStorage.setItem(id, JSON.stringify(data));
+        } catch(e) {
+            console.error(e);
+        }
+
         return undefined;
     },
     get: (id) => {

src/services/nitrous-api.js

@@ -1,7 +1,5 @@
 const axios = require("axios");
-
-const NITROUS_BASE_API_URL = "api-testnet.deezy.place";
-
+const NOSFT_BASE_API_URL = "https://sv8sa61d52.execute-api.us-east-1.amazonaws.com";
 function mapInscription(obj) {
   console.log("[obj]", obj);
   return {
@@ -71,18 +69,29 @@ function mapAuction(obj) {
   };
 }
 
+async function refreshInscription(inscriptionId) {
+  try {
+    await axios.post(
+      `${NOSFT_BASE_API_URL}/inscription/${inscriptionId}/refresh`,
+    );
+  } catch(e) {
+    console.error(e);
+  } 
+}
+
 async function getInscription(inscriptionId) {
   try {
     const response = await axios.get(
-      `https://${NITROUS_BASE_API_URL}/inscription/${inscriptionId}`,
+      `${NOSFT_BASE_API_URL}/inscription/${inscriptionId}`,
     );
     const inscriptionData = await response.data;
 
     const _auction = inscriptionData.auctions?.find(
       (a) => a.status === "RUNNING" || a.status === "PENDING",
     );
 
-    return {
+
+    const result = {
       ...inscriptionData,
       inscription: mapInscription(inscriptionData.inscription),
       nostr: inscriptionData.sellEvents?.[0]
@@ -91,9 +100,20 @@ async function getInscription(inscriptionId) {
       bids: inscriptionData.bids?.map(mapBidEvent),
       auction: mapAuction(_auction),
     };
+
+    return result;
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+async function getCollection(slug) {
+  try {
+    const response = await axios.get(`${NOSFT_BASE_API_URL}/collection/${slug}`);
+    return response.data;
   } catch (error) {
     console.error(error);
   }
 }
 
-module.exports = { getInscription };
+module.exports = { getInscription, refreshInscription, getCollection };

src/services/nosft.js

@@ -8,7 +8,7 @@ const localConfig = {
 
 // REDIS API
 const NOSFT_WSS = "wss://nostr-service.deezy.place";
-const NOSFT_BASE_API_URL = "https://nostr-service.deezy.place/api/v1";
+const NOSFT_BASE_API_URL = "https://sv8sa61d52.execute-api.us-east-1.amazonaws.com";
 
 // POSTGRES API
 // const NOSFT_WSS = "wss://nostr-service.deezy.place";