More assets and collections

package.json

@@ -21,6 +21,7 @@
     "react-error-boundary": "^3.1.4",
     "react-flippy": "^1.1.0",
     "react-helmet": "^6.1.0",
+    "react-html5video": "^2.5.1",
     "react-infinite-scroll-component": "^6.1.0",
     "react-lazy-load-image-component": "^1.5.1",
     "react-lazyload": "^3.2.0",

src/components/AssetImageFigure/index.js

@@ -9,7 +9,7 @@ const AssetImageFigure = ({ asset, setShow, show_trigger, width, no_figure, clas
     <>
       {
         no_figure ? (
-          <FadeImg className={className} src={get_asset_image_source(asset.details.onchainMetadata.image)} alt={asset.details.onchainMetadata.name} style={{ width: width, height: width }} />
+          <img className={className} src={get_asset_image_source(asset.details.onchainMetadata.image)} alt={asset.details.onchainMetadata.name} style={{ width: width, height: width }} />
         ) :
           setShow ? (
             <div onClick={() => setShow(show_trigger ? show_trigger : false)} style={{ cursor: "pointer" }}>

src/components/CollectionBanner/index.js

@@ -139,10 +139,11 @@ const CollectionBanner = ({thisCollection, size, asset, is_collection_page, is_a
                             <div>
                               <p className="heading has-text-weight-semibold">Floor price</p>
                               <p className="is-size-4">
-                                ₳{
+                                ₳{numFormatter(
                                 thisCollection.opencnft.reduce(function (result, policy){
                                   return Math.min(result, policy.floor_price)
-                                },999999*1000000)/1000000}</p>
+                                },999999*1000000)/1000000)
+                                }</p>
                             </div>
                           </div>
                         </td>
@@ -151,10 +152,10 @@ const CollectionBanner = ({thisCollection, size, asset, is_collection_page, is_a
                             <div>
                               <p className="heading has-text-weight-semibold">Total assets</p>
                               <p className="is-size-4">
-                                {
+                                {numFormatter(
                                   thisCollection.opencnft.reduce(function (result, policy){
                                     return result + policy.asset_minted
-                                  },0)
+                                  },0))
                                 }
                               </p>
                             </div>
@@ -165,10 +166,10 @@ const CollectionBanner = ({thisCollection, size, asset, is_collection_page, is_a
                             <div>
                               <p className="heading has-text-weight-semibold">Number owners</p>
                               <p className="is-size-4">
-                                {
+                                {numFormatter(
                               thisCollection.opencnft.reduce(function (result, policy){
                                   return result + policy.asset_holders
-                                },0)
+                                },0))
                               }
                               </p>
                             </div>

src/components/Navbar/index.js

@@ -18,8 +18,8 @@ const Navbar = () => {
 
       <div className="navbar-menu">
         <div className="navbar-start">
-          <Link className="navbar-item" to="/explore">
-            Explore
+          <Link className="navbar-item" to="/marketplace">
+            Marketplace
           </Link>
 
           <div className="navbar-item has-dropdown is-hoverable">
@@ -34,10 +34,14 @@ const Navbar = () => {
             </div>
           </div>
 
-          <Link className="navbar-item" to="/about">
+          <a
+            className="navbar-item"
+            href="https://martify.io"
+            target="_blank"
+            rel="noreferrer"
+          >
             About Us
-          </Link>
-
+          </a>
         </div>
 
         <div className="navbar-end">

src/components/VideoPlayer/index.jsx

@@ -0,0 +1,10 @@
+import videoConnect from "react-html5video";
+import "react-html5video/dist/styles.css";
+
+const VideoPlayer = ({ video, videoEl, children, ...restProps }) => (
+  <div>
+    <video {...restProps}>{children}</video>
+  </div>
+);
+
+export default videoConnect(VideoPlayer);

src/database/assets.js

@@ -192,8 +192,8 @@ export const getLockedAssets = async (count = 100, lastVisible) => {
     const reference = await query(
       collection(firestore, "assets"),
       where("status.locked", "==", true),
-      orderBy("status.submittedOn"),
-      startAfter(lastVisible?.status?.submittedOn ?? 0),
+      orderBy("status.submittedOn", "desc"),
+      startAfter(lastVisible?.status?.submittedOn ?? Number.MAX_VALUE),
       limit(count)
     );
 

src/database/collections.js

@@ -53,3 +53,134 @@ export const setCollectionCreator = async (address, percentage, policyId) => {
 export const setCollectionStatus = async (verified: Boolean, policyId) => {
   await saveCollection({ verified }, policyId);
 };
+
+
+/* get opencnft */
+
+export const saveOpencnft = async (data, key) => {
+  try {
+    if (data) {
+      const reference = doc(firestore, "opencnft", key);
+      await setDoc(reference, data, { merge: true });
+    }
+  } catch (error) {
+    console.error(
+      `Unexpected error in saveCollection. [Message: ${error.message}]`
+    );
+    throw error;
+  }
+};
+
+export const getOpencnftTopProjects = async (time) => {
+  try {
+
+    let time_outdated = 60 * 60 * 1000; // every hour
+    let time_now = new Date().getTime();
+
+    const reference = doc(firestore, "opencnft", "_top_projects_"+time);
+    const snapshot = await getDoc(reference);
+
+    let return_top_projects = false;
+    let backup_return_top_projects = false
+
+    if (snapshot.exists()){
+      let data = snapshot.data();
+      // console.log("gotten data", data);
+      // console.log("get existing top projects", time_now, data.last_updated, (time_now - data.last_updated) < time_outdated);
+      if((time_now - data.last_updated) < time_outdated){
+        return_top_projects = data.rankings;
+      }else{
+        backup_return_top_projects = data.rankings;
+      }
+    }
+
+    if(return_top_projects == false){
+      const top_projects = await fetch(`https://api.opencnft.io/1/rank?window=${time}` , {})
+        .then((res) => res.json())
+        .then((res) => {
+          return res.ranking ? res.ranking : res;
+        })
+        .catch((err) => {
+          return false;
+        });
+      if(top_projects){
+        let to_db = {
+          last_updated: time_now,
+          rankings: top_projects
+        }
+
+        await saveOpencnft(to_db, "_top_projects_"+time);
+        return_top_projects = top_projects;
+      }
+      else if(backup_return_top_projects){ // for some reason opencnft is down, but lucky we have records in our own database
+        return_top_projects = backup_return_top_projects;
+      }
+    }
+    return return_top_projects;
+
+  } catch (error) {
+    console.error(
+      `Unexpected error in getOpencnft. [Message: ${error.message}]`
+    );
+    throw error;
+  }
+};
+
+export const getOpencnftPolicy = async (policy_id) => {
+  try {
+
+    let time_outdated = 60 * 60 * 1000; // every hour
+    let time_now = new Date().getTime();
+
+    const reference = doc(firestore, "opencnft", "policy_"+policy_id);
+    const snapshot = await getDoc(reference);
+
+    let return_project_stats = false;
+    let backup_return_project_stats = false
+
+    if (snapshot.exists()){
+      let data = snapshot.data();
+      // console.log("gotten data", data);
+      if((time_now - data.last_updated) < time_outdated){
+        // console.log("get existing opencnft data", time_now, data.last_updated, (time_now - data.last_updated) < time_outdated);
+        return_project_stats = data.rankings;
+      }else{
+        backup_return_project_stats = data.rankings;
+      }
+    }
+
+    if(return_project_stats == false){
+
+      const project_stats = await fetch(`https://api.opencnft.io/1/policy/${policy_id}`, {})
+        .then((res) => res.json())
+        .then((res) => {
+          return res;
+        })
+        .catch((err) => {
+          return false;
+        });
+
+      if(project_stats){
+        let to_db = {
+          last_updated: time_now,
+          rankings: project_stats
+        }
+
+        await saveOpencnft(to_db, "policy_"+policy_id);
+        // console.log("updated opencnft collection", policy_id);
+        return_project_stats = project_stats;
+      }
+      else if(backup_return_project_stats){ // for some reason opencnft is down, but lucky we have records in our own database
+        return_project_stats = backup_return_project_stats;
+      }
+
+    }
+    return return_project_stats;
+
+  } catch (error) {
+    console.error(
+      `Unexpected error in getOpencnft. [Message: ${error.message}]`
+    );
+    throw error;
+  }
+};

src/hooks/usePolicyMetadatas.js

@@ -17,19 +17,26 @@ export const usePolicyMetadatas = (policyIds) => {
           })
         );
 
+        let validMetadatas = [];
+
         if (metadatas.length === 1) {
           if (metadatas[0].statusCode === 404) {
             console.log(
               "usePolicyMetadatas: this collection is not in opencnft",
               policyIds
             );
+            validMetadatas.push({policy: policyIds[0]});
           }
         }
 
-        const validMetadatas = metadatas.filter(
-          (metadata) => metadata.policy !== undefined
-        );
+        if(validMetadatas.length==0){
+          validMetadatas = metadatas.filter(
+            (metadata) => metadata.policy !== undefined
+          );
+        }
+
         setPolicyMetadatas(validMetadatas);
+
       } catch (error) {
         // console.error(
         //   `Unexpected error in usePolicyMetadatas. [Message: ${error.message}]`

src/pages/About/index.js

@@ -128,6 +128,7 @@ const About = () => {
             <div className="content is-medium">
               <ul>
                 <li>Handle Audio & Video Assets.</li>
+                <li>Add Support for More Wallets (GeroWallet, ccvault.io...).</li>
                 <li>Build The Martify Backend APIs.</li>
                 <li>Implement Trading & Bundle Swaps for NFTs.</li>
                 <li>Enable Buying & Selling NFTs Using Native Tokens.</li>
@@ -150,7 +151,7 @@ const About = () => {
             <div className="content is-medium">
               <ul>
                 <li>Implement On-Chain Auctions & Bidding.</li>
-                <li>Add Support to More Wallets (Yoroi, ccvault.io...).</li>
+                <li>Add Support for More Wallets (Yoroi...).</li>
                 <li>Create & Launch a Stake Pool for Martify.</li>
                 <li>
                   Write a Whitepaper for Smart Contract On-Chain Governance.

src/pages/Account/AllAssets.js

@@ -258,7 +258,7 @@ const NoAssetFound = ({ state_wallet }) => {
               <p className="title">No assets</p>
               <p className="subtitle">
                 Looks like your wallet is empty,{" "}
-                <a href="/explore">start browsing</a>!
+                <a href="/marketplace">Start browsing marketplace</a>!
               </p>
             </>
           ) : (

src/pages/Account/Holdings.js

@@ -248,7 +248,7 @@ const NoAssetFound = ({ state_wallet }) => {
               <p className="title">No assets</p>
               <p className="subtitle">
                 Looks like your wallet is empty,{" "}
-                <a href="/explore">start browsing</a>!
+                <a href="/marketplace">Start browsing marketplace</a>!
               </p>
             </>
           ) : (