feat : updated webxr url and added sold to nfts page

MyriadFlow · Nov 7, 2024 · ae38005 · ae38005
1 parent a651980
commit ae38005
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 69 deletions.
diff --git a/src/app/collection/[id]/page.js b/src/app/collection/[id]/page.js
@@ -164,7 +164,7 @@ const Collection = ({ params }) => {
                 }}
               >
                 <div className="text-sm">{desc}</div>
-                <Link href={`/brand/${brandid}`} className="block mt-4 text-sm border border-white rounded-full py-1 px-4">
+                <Link href={`/brand/${name.toLowerCase().replace(/\s+/g, '-')}`} className="block mt-4 text-sm border border-white rounded-full py-1 px-4">
                   View brand page
                 </Link>
               </div>

diff --git a/src/app/nfts/[id]/page.js b/src/app/nfts/[id]/page.js
@@ -24,6 +24,7 @@ const NFTPage = ({ params }) => {
   const [logos, setLogos] = useState("");
   const [brandDesc, setbrandDesc] = useState("");
   const [brandid, setbrandid] = useState("");
+  const [name, setbrandName] = useState("");
   const [loading, setLoading] = useState(false);
   const [sold, setsold] = useState(0);
   const [owner, setOwner] = useState(false);
@@ -182,65 +183,65 @@ const NFTPage = ({ params }) => {
           setLogos(matchedBrand.logo_image);
           setbrandDesc(matchedBrand.description);
           setbrandid(matchedBrand.id);
+          setbrandName(matchedBrand.name);
+        }
 
-          const fetch = async () => {
-
-            try {
-              await Moralis.start({
-                apiKey: process.env.NEXT_PUBLIC_MORALIS_API_KEY
-              });
-
-              const response = await Moralis.EvmApi.events.getContractEvents({
-                "chain": chainId,
-                "order": "DESC",
-                "topic": "0x328ff68d0e66694e405c9f8fc906a346b345aa1f87ec216eaa82f2c654d0d34a",
-                "address": `${onephygital?.contract_address}`,
-                "abi": {
-                  "anonymous": false,
-                  "inputs": [
-                    {
-                      "indexed": false,
-                      "name": "currentIndex",
-                      "type": "uint256",
-                      "internal_type": "uint256"
-                    },
-                    {
-                      "indexed": false,
-                      "name": "quantity",
-                      "type": "uint256",
-                      "internal_type": "uint256"
-                    },
-                    {
-                      "indexed": true,
-                      "name": "creator",
-                      "type": "address",
-                      "internal_type": "address"
-                    }
-                  ],
-                  "name": "PhygitalAAssetCreated",
-                  "type": "event"
-                }
-              });
-
-              if (response.raw.result[0]) {
-                setsold(response.raw.result[0].data.currentIndex);
-              }
-            } catch (e) {
-              console.error(e);
-            }
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    }
 
+    brandmatch();
+  }, [onephygital])
 
+  useEffect(() => {
+    const fetch = async () => {
+      try {
+        // await Moralis.start({
+        //   apiKey: process.env.NEXT_PUBLIC_MORALIS_API_KEY
+        // });
+
+        const response = await Moralis.EvmApi.events.getContractEvents({
+          "chain": chainId,
+          "order": "DESC",
+          "topic": "0x328ff68d0e66694e405c9f8fc906a346b345aa1f87ec216eaa82f2c654d0d34a",
+          "address": `${onephygital?.contract_address}`,
+          "abi": {
+            "anonymous": false,
+            "inputs": [
+              {
+                "indexed": false,
+                "name": "currentIndex",
+                "type": "uint256",
+                "internal_type": "uint256"
+              },
+              {
+                "indexed": false,
+                "name": "quantity",
+                "type": "uint256",
+                "internal_type": "uint256"
+              },
+              {
+                "indexed": true,
+                "name": "creator",
+                "type": "address",
+                "internal_type": "address"
+              }
+            ],
+            "name": "PhygitalAAssetCreated",
+            "type": "event"
           }
+        });
 
-          fetch();
+        if (response.raw.result[0]) {
+          setsold(response.raw.result[0].data.currentIndex);
         }
-
-      } catch (error) {
-        console.error('Error fetching data:', error);
+      } catch (e) {
+        console.error(e);
       }
     }
 
-    brandmatch();
+    fetch();
   }, [onephygital])
 
   const buyasset = async () => {
@@ -445,7 +446,7 @@ const NFTPage = ({ params }) => {
                         <div className="font-bold">{onephygital?.brand_name?.toString()}</div>
                       </div>
                       <div className="mt-4 text-sm lg:text-base">{brandDesc?.toString()}</div>
-                      <Link href={`/brand/${brandid}`} className="mt-4 text-sm border border-white rounded-full px-4 py-1 inline-block">View brand page</Link>
+                      <Link href={`/brand/${name.toLowerCase().replace(/\s+/g, '-')}`} className="mt-4 text-sm border border-white rounded-full px-4 py-1 inline-block">View brand page</Link>
                     </div>
                   )}
                 </span>
@@ -574,7 +575,7 @@ const NFTPage = ({ params }) => {
             <div className="flex flex-col md:flex-row justify-between">
               <div className="w-full md:w-1/2">
                 <Link
-                  href={`https://webxr.myriadflow.com/${onephygital?.id}`}
+                  href={`https://webxr.myriadflow.com/${onephygital?.name?.toLowerCase().replace(/\s+/g, '-')}`}
                   target="_blank"
                   className="rounded"
                   style={{
@@ -738,7 +739,7 @@ const NFTPage = ({ params }) => {
                         <div className="font-bold">{onephygital?.brand_name?.toString()}</div>
                       </div>
                       <div className="mt-4 text-sm lg:text-base">{brandDesc?.toString()}</div>
-                      <Link href={`/brand/${brandid}`} className="mt-4 text-sm border border-white rounded-full px-4 py-1 inline-block">View brand page</Link>
+                      <Link href={`/brand/${name.toLowerCase().replace(/\s+/g, '-')}`} className="mt-4 text-sm border border-white rounded-full px-4 py-1 inline-block">View brand page</Link>
                     </div>
                   )}
                 </span>
@@ -868,7 +869,7 @@ const NFTPage = ({ params }) => {
             <div className="flex flex-col md:flex-row justify-between">
               <div className="w-full md:w-1/2">
                 <Link
-                  href={`https://webxr.myriadflow.com/${onephygital?.id}`}
+                  href={`https://webxr.myriadflow.com/${onephygital?.name?.toLowerCase().replace(/\s+/g, '-')}`}
                   target="_blank"
                   className="rounded"
                   style={{

diff --git a/src/components/hotNftCard.js b/src/components/hotNftCard.js
@@ -13,6 +13,7 @@ const HotNftCard = ({ nft }) => {
   const [logo, setLogos] = useState("");
   const [desc, setdesc] = useState("");
   const [brandid, setbrandid] = useState("");
+  const [name, setbrandName] = useState("");
   const [priceUSD, setPriceUSD] = useState("");
   const [loading, setLoading] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
@@ -59,6 +60,7 @@ const HotNftCard = ({ nft }) => {
             setLogos(matchedBrand.logo_image);
             setdesc(matchedBrand.description);
             setbrandid(matchedBrand.id);
+            setbrandName(matchedBrand.name);
           }
         }
 
@@ -159,7 +161,7 @@ const HotNftCard = ({ nft }) => {
 
     const avatardata = await avatar.json();
 
-    console.log("avatar", avatardata, phyresult);
+    // console.log("avatar", avatardata, phyresult);
 
     const selectedAvatar = avatardata.find(avatar => avatar.phygital_id === nft.id);
 
@@ -357,11 +359,11 @@ const HotNftCard = ({ nft }) => {
           </div>
           <div className="mt-4" style={{ fontSize: '13px', marginBottom: '20px' }}>{desc}</div>
 
-          <Link href={`/brand/${brandid}`} style={{ fontSize: '15px', border: '1px solid white', borderRadius: '30px', padding: '4px' }}>View brand page</Link>
+          <Link href={`/brand/${name.toLowerCase().replace(/\s+/g, '-')}`} style={{ fontSize: '15px', border: '1px solid white', borderRadius: '30px', padding: '4px' }}>View brand page</Link>
         </div>
       )}
 
-      <Link href={`https://webxr.myriadflow.com/${nft?.id}`} target="_blank"
+      <Link href={`https://webxr.myriadflow.com/${nft?.name.toLowerCase().replace(/\s+/g, '-')}`} target="_blank"
         style={{
           position: "absolute",
           top: "10px",

diff --git a/src/components/hotNftCardElevate.js b/src/components/hotNftCardElevate.js
@@ -13,6 +13,7 @@ const HotNftCardElevate = ({ nft }) => {
   const [logo, setLogos] = useState("");
   const [desc, setdesc] = useState("");
   const [brandid, setbrandid] = useState("");
+  const [name, setbrandName] = useState("");
   const [priceUSD, setPriceUSD] = useState("");
   const [loading, setLoading] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
@@ -59,6 +60,7 @@ const HotNftCardElevate = ({ nft }) => {
             setLogos(matchedBrand.logo_image);
             setdesc(matchedBrand.description);
             setbrandid(matchedBrand.id);
+            setbrandName(matchedBrand.name);
           }
         }
 
@@ -357,11 +359,11 @@ const HotNftCardElevate = ({ nft }) => {
           </div>
           <div className="mt-4" style={{ fontSize: '13px', marginBottom: '20px' }}>{desc}</div>
 
-          <Link href={`/brand/${brandid}`} style={{ fontSize: '15px', border: '1px solid white', borderRadius: '30px', padding: '4px' }}>View brand page</Link>
+          <Link href={`/brand/${name.toLowerCase().replace(/\s+/g, '-')}`} style={{ fontSize: '15px', border: '1px solid white', borderRadius: '30px', padding: '4px' }}>View brand page</Link>
         </div>
       )}
 
-      <Link href={`https://webxr.myriadflow.com/${nft?.id}`} target="_blank"
+      <Link href={`https://webxr.myriadflow.com/${nft?.name.toLowerCase().replace(/\s+/g, '-')}`} target="_blank"
         style={{
           position: "absolute",
           top: "10px",

diff --git a/src/components/leaderboard.tsx b/src/components/leaderboard.tsx
@@ -6,12 +6,13 @@ import { getAvatars, getFanTokens, getPhygitals } from '@/utils/queries'
 import { AvatarType, FanTokenType } from '@/types/types'
 import Image from 'next/image'
 import { getFanMainTokens } from '../utils/queries'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
 const baseUri = process.env.NEXT_PUBLIC_URI || 'https://app.myriadflow.com'
 
 const Leaderboard = () => {
 	const [count, setCount] = useState<number[]>([])
+	const [phygitalNames, setPhygitalNames] = useState([]);
 
 	const results = useQueries({
 		queries: [
@@ -77,6 +78,20 @@ const Leaderboard = () => {
 
 	const topAvatars = fanTokenMainResults.data
 
+	useEffect(() => {
+		const fetchPhygitalNames = async () => {
+		  if (topAvatars) {
+			const allPhygitals = await getPhygitals();
+			const names = topAvatars.map((avatar: { phygital_id: any }, index: any) => {
+			  const phygital = allPhygitals.find((p: any) => p.id === avatar.phygital_id);
+			  return phygital?.name?.toLowerCase().replace(/\s+/g, '-');
+			});
+			setPhygitalNames(names);
+		  }
+		};
+		fetchPhygitalNames();
+	  }, [topAvatars]);
+
 	return (
 		<div className='p-4 sm:p-6 lg:p-10'>
 			<div className='font-bold text-3xl sm:text-4xl lg:text-6xl mx-20'>
@@ -155,7 +170,7 @@ const Leaderboard = () => {
 									</div>
 
 									<Link
-										href={`https://webxr.myriadflow.com/${topAvatars?.[1].phygital_id}`}
+										href={`https://webxr.myriadflow.com/${phygitalNames[1]}`}
 									>
 										<div className='bg-gradient-to-b from-[#999999] to-[#DD21DD]  text-center text-2xl px-4 py-2 rounded-full border border-black bg-white cursor-pointer hover:bg-gray-200'>
 											WEBXR
@@ -194,7 +209,7 @@ const Leaderboard = () => {
 										</p>
 									</div>
 									<Link
-										href={`https://webxr.myriadflow.com/${topAvatars?.[0].phygital_id}`}
+										href={`https://webxr.myriadflow.com/${phygitalNames[0]}`}
 									>
 										<div className='bg-gradient-to-b from-[#999999] to-[#DD21DD]  text-center text-2xl px-4 py-2 rounded-full border border-black bg-white cursor-pointer hover:bg-gray-200'>
 											WEBXR
@@ -232,7 +247,7 @@ const Leaderboard = () => {
 									</div>
 
 									<Link
-										href={`https://webxr.myriadflow.com/${topAvatars?.[2].phygital_id}`}
+										href={`https://webxr.myriadflow.com/${phygitalNames[2]}`}
 									>
 										<div className='bg-gradient-to-b from-[#999999] to-[#DD21DD] text-center text-2xl px-4 py-2 rounded-full border border-black bg-white cursor-pointer hover:bg-gray-200'>
 											WEBXR

diff --git a/src/components/mostLovedCard.js b/src/components/mostLovedCard.js
@@ -11,6 +11,7 @@ const MostLovedCard = ({nft}) => {
   const [isHovered, setIsHovered] = useState(false);
   const [desc, setdesc] = useState("");
   const [brandid, setbrandid] = useState("");
+  const [name, setbrandName] = useState("");
   const [phygitals, setPhygitals] = useState([]);
   const [isHoveredNft, setIsHoveredNft] = useState(false);
 
@@ -58,6 +59,7 @@ try {
       setLogos(matchedBrand.logo_image);
       setdesc(matchedBrand.description);
       setbrandid(matchedBrand.id);
+      setbrandName(matchedBrand.name);
     }
   }
 
@@ -290,11 +292,11 @@ try {
               </div>
               <div className="mt-4" style={{fontSize: '13px', marginBottom:'20px'}}>{desc}</div>
 
-              <Link href={`/brand/${brandid}`} style={{fontSize: '15px', border:'1px solid white', borderRadius:'30px', padding:'4px'}}>View brand page</Link>
+              <Link href={`/brand/${name.toLowerCase().replace(/\s+/g, '-')}`} style={{fontSize: '15px', border:'1px solid white', borderRadius:'30px', padding:'4px'}}>View brand page</Link>
             </div>
           )}
 
-<Link href={`https://webxr.myriadflow.com/${phygitals[0]?.id}`} target="_blank"
+<Link href={`https://webxr.myriadflow.com/${phygitals[0]?.name.toLowerCase().replace(/\s+/g, '-')}`} target="_blank"
 style={{
   position: "absolute",
   top: "10px",

diff --git a/src/components/mostLovedCardelElevate.js b/src/components/mostLovedCardelElevate.js
@@ -11,6 +11,7 @@ const MostLovedCardElevate = ({ nft }) => {
   const [isHovered, setIsHovered] = useState(false);
   const [desc, setdesc] = useState("");
   const [brandid, setbrandid] = useState("");
+  const [name, setbrandName] = useState("");
   const [phygitals, setPhygitals] = useState([]);
   const [isHoveredNft, setIsHoveredNft] = useState(false);
 
@@ -58,6 +59,7 @@ const MostLovedCardElevate = ({ nft }) => {
             setLogos(matchedBrand.logo_image);
             setdesc(matchedBrand.description);
             setbrandid(matchedBrand.id);
+            setbrandName(matchedBrand.name);
           }
         }
 
@@ -305,7 +307,7 @@ const MostLovedCardElevate = ({ nft }) => {
           </div>
           <div className="mt-4" style={{ fontSize: '13px', marginBottom: '20px' }}>{desc}</div>
 
-          <Link href={`/brand/${brandid}`} style={{ fontSize: '15px', border: '1px solid white', borderRadius: '30px', padding: '4px' }}>View brand page</Link>
+          <Link href={`/brand/${name.toLowerCase().replace(/\s+/g, '-')}`} style={{ fontSize: '15px', border: '1px solid white', borderRadius: '30px', padding: '4px' }}>View brand page</Link>
         </div>
       )}
     </div>

diff --git a/src/components/profileNftCard.js b/src/components/profileNftCard.js
@@ -12,6 +12,7 @@ const ProfileNftCard = ({ nft }) => {
   const [logo, setLogos] = useState("");
   const [desc, setdesc] = useState("");
   const [brandid, setbrandid] = useState("");
+  const [name, setbrandName] = useState("");
   const [priceUSD, setPriceUSD] = useState("");
   const [loading, setLoading] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
@@ -56,6 +57,7 @@ const ProfileNftCard = ({ nft }) => {
             setLogos(matchedBrand.logo_image);
             setdesc(matchedBrand.description);
             setbrandid(matchedBrand.id);
+            setbrandName(matchedBrand.name);
           }
         }
 
@@ -261,12 +263,12 @@ const ProfileNftCard = ({ nft }) => {
             {/* <div className="font-bold mt-6">{onephygital?.brand_name}</div> */}
           </div>
           <div className="mt-4" style={{ fontSize: '13px', marginBottom: '20px' }}>{desc}</div>
-          <Link href={`/brand/${brandid}`} style={{ fontSize: '15px', border: '1px solid white', borderRadius: '30px', padding: '4px' }}>View brand page</Link>
+          <Link href={`/brand/${name.toLowerCase().replace(/\s+/g, '-')}`} style={{ fontSize: '15px', border: '1px solid white', borderRadius: '30px', padding: '4px' }}>View brand page</Link>
         </div>
       )}
 
       {/* Web XR Link */}
-      <Link href={`https://webxr.myriadflow.com/${nft?.id}`} target="_blank"
+      <Link href={`https://webxr.myriadflow.com/${nft?.name.toLowerCase().replace(/\s+/g, '-')}`} target="_blank"
         style={{
           position: "absolute",
           top: "10px",