Merge pull request #439 from Itheum/stg

1.15.0 STG -> MAIN

package.json

@@ -1,7 +1,7 @@
 {
   "name": "explorer-dapp",
   "description": "Itheum Explorer is a DApp for the public to explore and visualize data within the Itheum protocol",
-  "version": "1.15.1",
+  "version": "1.15.3",
   "author": "Itheum",
   "license": "GPL-3.0-or-later",
   "dependencies": {

src/App.tsx

@@ -10,6 +10,7 @@ import { TimeCapsule } from "pages/AppMarketplace/TimeCapsule/TimeCapsule";
 import { routes, routeNames } from "routes";
 import { ThemeProvider } from "./libComponents/ThemeProvider";
 import { StoreProvider } from "./store/StoreProvider";
+import { DeepForestMusic } from "pages/AppMarketplace/DeepForestMusic/DeepForestMusic";
 
 export const App = () => {
   return (
@@ -38,6 +39,7 @@ export const App = () => {
                 <Route path={`${routeNames.itheumtrailblazer}/:targetNonce/:targetMessageToBeSigned`} element={<ItheumTrailblazer />} />
                 <Route path={`${routeNames.multiversxinfographics}/:targetNonce/:targetMessageToBeSigned`} element={<MultiversxInfographics />} />
                 <Route path={`${routeNames.nftunes}/:targetNonce/:targetMessageToBeSigned`} element={<NFTunes />} />
+                <Route path={`${routeNames.deepforestmusic}/:targetNonce/:targetMessageToBeSigned`} element={<DeepForestMusic />} />
                 <Route path={`${routeNames.timecapsule}/:targetNonce/:targetMessageToBeSigned`} element={<TimeCapsule />} />
                 <Route path={`${routeNames.mywallet}/:targetNonce/:targetMessageToBeSigned`} element={<MyWallet />} />
                 <Route path={`${routeNames.getbitz}/:targetNonce/:targetMessageToBeSigned`} element={<GetBitz />} />

src/appsConfig.tsx

@@ -42,6 +42,8 @@ export const NF_TUNES_TOKENS: app_token[] = IS_DEVNET
       { tokenIdentifier: "DATANFTFT-e0b917", nonce: 134 },
       { tokenIdentifier: "DATANFTFT-e0b917", nonce: 138 },
       { tokenIdentifier: "DATANFTFT-e0b917", nonce: 187 },
+      { tokenIdentifier: "DATANFTFT-e0b917", nonce: 295 },
+
       ...Array.from({ length: 4 }, (_, i) => ({ tokenIdentifier: "OASMUSICPL-47b186", nonce: i })),
       ...Array.from({ length: 19 }, (_, i) => ({ tokenIdentifier: "FOOWLDMSC-5ee8ec", nonce: i })),
     ]
@@ -75,8 +77,9 @@ export const SUPPORTED_APPS = IS_DEVNET
       "playstationgamerpassport",
       "multiversxinfographics",
       "nftunes",
+      "deepforestmusic",
       "timecapsule",
       "getbitz",
       "bobergameroom",
     ]
-  : ["itheumtrailblazer", "multiversxbubbles", "multiversxinfographics", "nftunes", "timecapsule", "getbitz", "bobergameroom"];
+  : ["itheumtrailblazer", "multiversxbubbles", "multiversxinfographics", "nftunes", "deepforestmusic", "timecapsule", "getbitz", "bobergameroom"];

src/components/DataNftCard.tsx

@@ -57,7 +57,9 @@ export function DataNftCard({
           "border-[0.5px]  dark:border-slate-100/30 border-slate-300  bg-transparent rounded-[2.37rem] base:w-[18.5rem] md:w-[20.6rem]"
         )}>
         <CardContent className="flex flex-col p-3">
-          {dataNft.extraAssets.length > 0 ? (
+          {dataNft.media && dataNft.media[0] && (dataNft.media[0] as any).url && (dataNft.media[0] as any).fileType.includes("video") ? (
+            <video autoPlay loop src={(dataNft.media[0] as any).url} className=" mb-8 md:w-auto rounded-3xl base:h-[15rem] md:h-[18rem]"></video>
+          ) : dataNft.extraAssets.length > 0 ? (
             <ImageSlider imageUrls={dataNft.media.map((mediaObj: any) => mediaObj.url) ?? [dataNft.nftImgUrl]} autoSlide />
           ) : (
             <div className="mb-8 flex justify-center base:max-h-[15rem] md:max-h-[18rem] object-cover">

src/components/Layout/Navbar.tsx

@@ -33,6 +33,7 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from "../../libComponents/Popover";
 import { BIT_GAME_WINDOW_HOURS } from "../../pages/AppMarketplace/GetBitz";
 import { useAccountStore } from "../../store/account";
+import { cn } from "libs/utils";
 
 export const Navbar = () => {
   const isLoggedIn = useGetIsLoggedIn();
@@ -176,7 +177,7 @@ export const Navbar = () => {
           <NavigationMenuItem>
             <NavigationMenuTrigger>Data Widgets</NavigationMenuTrigger>
             <NavigationMenuContent>
-              <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
+              <ul className={cn("grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]", isLoggedIn ? "" : "!w-[400px]")}>
                 {APP_MAPPINGS.filter((app) => SUPPORTED_APPS.includes(app.routeKey)).map((item) => (
                   <Link
                     to={returnRoute(item.routeKey)}
@@ -239,17 +240,19 @@ export const Navbar = () => {
               </NavigationMenuItem>
             </>
           ) : (
-            <NavigationMenuItem>
-              <Link to={routeNames.unlock} state={{ from: location.pathname }}>
-                <div className="bg-gradient-to-r from-yellow-300 to-orange-500 p-[1px] px-[2px] rounded-lg justify-center">
-                  <Button
-                    className="bg-background text-foreground hover:bg-background/90 border-0 rounded-md font-medium tracking-wide !text-lg"
-                    variant="outline">
-                    Login
-                  </Button>
-                </div>
-              </Link>
-            </NavigationMenuItem>
+            <>
+              <NavigationMenuItem>
+                <Link to={routeNames.unlock} state={{ from: location.pathname }}>
+                  <div className="bg-gradient-to-r from-yellow-300 to-orange-500 p-[1px] px-[2px] rounded-lg justify-center">
+                    <Button
+                      className="bg-background text-foreground hover:bg-background/90 border-0 rounded-md font-medium tracking-wide !text-lg"
+                      variant="outline">
+                      Login
+                    </Button>
+                  </div>
+                </Link>
+              </NavigationMenuItem>{" "}
+            </>
           )}
           <NavigationMenuItem>
             <SwitchButton />

src/components/RecentDataNftsSection.tsx

@@ -9,6 +9,7 @@ import { Address } from "@multiversx/sdk-core/out";
 import toast from "react-hot-toast";
 import { convertWeiToEsdt } from "libs/utils";
 import { IS_DEVNET } from "appsConfig";
+import { Loader } from "./sdkDappComponents";
 
 export interface RecentDataNFTType {
   index: BigNumber.Value;
@@ -30,8 +31,9 @@ export interface RecentDataNFTType {
 
 const RecentDataNFTsSection: React.FC = () => {
   const { chainID } = useGetNetworkConfig();
-  const [latestOffers, setLatestOffers] = useState<RecentDataNFTType[]>();
+  const [latestOffers, setLatestOffers] = useState<RecentDataNFTType[]>([]);
   const [isApiUp, setIsApiUp] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     async function fetchApiHealthCheck() {
@@ -54,7 +56,7 @@ const RecentDataNFTsSection: React.FC = () => {
 
   const apiWrapper = async () => {
     DataNft.setNetworkConfig(IS_DEVNET ? "devnet" : "mainnet");
-
+    setIsLoading(true);
     try {
       const offers = await getRecentOffersFromBackendApi(chainID);
       const recentNonces = offers.map((nft: any) => ({ nonce: nft.offeredTokenNonce }));
@@ -88,6 +90,7 @@ const RecentDataNFTsSection: React.FC = () => {
     } catch (error) {
       console.error(error);
     }
+    setIsLoading(false);
   };
 
   return (
@@ -96,7 +99,13 @@ const RecentDataNFTsSection: React.FC = () => {
         <div>
           <h2 className="mt-12 py-2 mb-0">Recent Data NFTs</h2>
           <div className="w-full flex flex-row flex-wrap items-center justify-center md:items-start md:justify-start">
-            {latestOffers &&
+            {isLoading ? (
+              <Loader className="h-[20rem]" />
+            ) : latestOffers?.length === 0 ? (
+              <div className="flex flex-col items-center justify-center w-full h-[20rem]">
+                <h3 className="text-lg">No recent offers available</h3>
+              </div>
+            ) : (
               latestOffers
                 .slice(0, 10)
                 .map((nft, index) => (
@@ -110,7 +119,8 @@ const RecentDataNFTsSection: React.FC = () => {
                     wantedTokenAmount={Number(convertWeiToEsdt(nft.wantedTokenAmount))}
                     offerIndex={Number(nft.index)}
                   />
-                ))}
+                ))
+            )}
           </div>
         </div>
       ) : (

src/components/TrendingSection.tsx

@@ -4,12 +4,8 @@ import { getHealthCheckFromBackendApi, getTrendingFromBackendApi } from "libs/ba
 import React, { useEffect, useState } from "react";
 import { ThreeDCard } from "./ThreeDCard";
 import toast from "react-hot-toast";
+import { Loader } from "./sdkDappComponents";
 
-// interface NftItem {
-//   title: string;
-//   supply: number;
-//   price: number;
-// }
 type TrendingDataCreationNftsType = {
   nonce: number;
   tokenIdentifier: string;
@@ -23,6 +19,7 @@ const TrendingSection: React.FC = () => {
   const { chainID } = useGetNetworkConfig();
   const [trendingDataNfts, setTrendingDataNfts] = useState<TrendingDataNftsType[]>([]);
   const [isApiUp, setIsApiUp] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     async function fetchApiHealthCheck() {
@@ -44,6 +41,7 @@ const TrendingSection: React.FC = () => {
   }, [isApiUp]);
 
   async function fetchTrendingNfts() {
+    setIsLoading(true);
     DataNft.setNetworkConfig(chainID === "1" ? "mainnet" : "devnet");
     const getTrendingData = await getTrendingFromBackendApi(chainID);
     const _trendingData: Array<TrendingDataCreationNftsType> = [];
@@ -61,6 +59,7 @@ const TrendingSection: React.FC = () => {
       }
     });
     setTrendingDataNfts(trending as TrendingDataNftsType[]);
+    setIsLoading(false);
   }
 
   return (
@@ -69,7 +68,13 @@ const TrendingSection: React.FC = () => {
         <div>
           <h2 className="mt-12 py-2 mb-0 ">Trending Offers</h2>
           <div className="w-full flex flex-row flex-wrap items-center justify-center md:items-start md:justify-start">
-            {trendingDataNfts &&
+            {isLoading ? (
+              <Loader className="h-[20rem]" />
+            ) : trendingDataNfts?.length === 0 ? (
+              <div className="flex flex-col items-center justify-center w-full h-[20rem]">
+                <h3 className="text-lg">No trending offers available</h3>
+              </div>
+            ) : (
               trendingDataNfts
                 .slice(0, 10)
                 .map((nft, index) => (
@@ -81,7 +86,8 @@ const TrendingSection: React.FC = () => {
                     nftImgUrl={nft.nftImgUrl || ""}
                     rating={nft.rating}
                   />
-                ))}
+                ))
+            )}
           </div>
         </div>
       ) : (

src/libComponents/animated/HoverEffect.tsx

@@ -0,0 +1,94 @@
+import { useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Link } from "react-router-dom";
+import { cn } from "libs/utils";
+import { PlayCircle, Search } from "lucide-react";
+
+export const HoverEffect = ({
+  items,
+  className,
+  viewData,
+}: {
+  items: {
+    title?: string;
+    description?: string;
+    image?: string;
+    ownedDataNftIndex?: number;
+    link?: string;
+  }[];
+  className?: string;
+  viewData: (index: number) => void;
+}) => {
+  let [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+
+  return (
+    <div className={cn("grid grid-cols-1 md:grid-cols-2  lg:grid-cols-3  py-10", className)}>
+      {items.map((item, idx) => (
+        <div key={idx} className="relative group  block p-2 h-full w-full" onMouseEnter={() => setHoveredIndex(idx)} onMouseLeave={() => setHoveredIndex(null)}>
+          <AnimatePresence>
+            {hoveredIndex === idx && (
+              <motion.span
+                className="absolute inset-0 h-full w-full bg-teal-950/[0.6] block  rounded-3xl"
+                layoutId="hoverBackground"
+                initial={{ opacity: 0 }}
+                animate={{
+                  opacity: 1,
+                  transition: { duration: 0.15 },
+                }}
+                exit={{
+                  opacity: 0,
+                  transition: { duration: 0.15, delay: 0.2 },
+                }}
+              />
+            )}
+          </AnimatePresence>
+          <Card>
+            <div className="relative flex justify-center items-center group">
+              <img
+                onClick={() => {
+                  if (item.ownedDataNftIndex && item.ownedDataNftIndex >= 0) viewData(item.ownedDataNftIndex ?? 0);
+                  else window.open("https://nft.ici.ro/ethereal-echoes", "_blank");
+                }}
+                src={item.image}
+                className="group-hover:scale-110 transition-all duration-500 rounded-2xl cursor-pointer"
+              />
+              {item.ownedDataNftIndex && item.ownedDataNftIndex >= 0 ? (
+                <PlayCircle
+                  onClick={() => viewData(item.ownedDataNftIndex ?? 0)}
+                  className="absolute z-[100] text-white fill-black/90 w-36 h-16 md:h-36 hover:cursor-pointer  transition-all duration-500"
+                />
+              ) : (
+                <Link
+                  to={"https://nft.ici.ro/ethereal-echoes"}
+                  target="_blank"
+                  className="hover:scale-125 transition-all bottom-0 right-0 gap-1 p-1 absolute bg-teal-900/80 rounded-2xl px-2 flex flex-row md:text-xl">
+                  Find <Search className="w-8" />
+                </Link>
+              )}
+            </div>
+            <CardTitle>{item.title}</CardTitle>
+            {item.description && <CardDescription>{item.description}</CardDescription>}
+          </Card>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const Card = ({ className, children }: { className?: string; children: React.ReactNode }) => {
+  return (
+    <div className={cn("rounded-2xl h-full w-full p-4 overflow-hidden border border-teal-900/[0.5] group-hover:border-teal-900 relative z-20", className)}>
+      <div className="relative z-50">
+        <div className=" ">{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export const CardTitle = ({ className, children }: { className?: string; children: React.ReactNode }) => {
+  return <h4 className={cn("!text-base font-semibold	text-foreground tracking-wide mt-4", className)}>{children}</h4>;
+};
+
+export const CardDescription = ({ className, children }: { className?: string; children: React.ReactNode }) => {
+  return <p className={cn("mt-8 text-zinc-400 tracking-wide leading-relaxed text-sm", className)}>{children}</p>;
+};

src/libs/utils/constant.ts

@@ -1,11 +1,11 @@
+import iconBober from "assets/img/bober-game-room/BoberLast.png";
+import iconDeepForest from "assets/img/deep-forest-music/header.png";
 import iconBubbleMaps from "assets/img/expl-app-bubblemaps-icon.png";
 import iconInfrographics from "assets/img/expl-app-infographics-icon.png";
 import iconTrailblazer from "assets/img/expl-app-trailblazer-icon.png";
-import iconTimeCapsule from "assets/img/timecapsule/expl-app-timecapsule-icon.png";
-import iconNFTunes from "assets/img/nf-tunes-logo.png";
 import iconGetBitz from "assets/img/getbitz/expl-app-getbitz-icon.gif";
-import iconBober from "assets/img/bober-game-room/BoberLast.png";
-
+import iconNFTunes from "assets/img/nf-tunes-logo.png";
+import iconTimeCapsule from "assets/img/timecapsule/expl-app-timecapsule-icon.png";
 export const ERROR_CONNECT_WALLET = "Connect your wallet";
 export const ERROR_TRANSACTION_ONGOING = "A transaction is ongoing";
 export const ERROR_DATA_LOADING = "Data is still loading";
@@ -32,6 +32,13 @@ export const APP_MAPPINGS = [
     desc: "Explore a multisensory journey with this app, extending art beyond visuals. Through vibrations, it unveils the creative potentials of Data NFTs, offering a unique and immersive experience.",
     img: iconNFTunes,
   },
+  {
+    appName: "Deep Forest Music Data NFT Player",
+    appDescription: "The Chronicles of Deep Forest",
+    routeKey: "deepforestmusic",
+    desc: "Experience Grammy Award winner Deep Forest's timeless music reimagined in a limited edition 90-piece Music Data NFT collection",
+    img: iconDeepForest,
+  },
   {
     appName: "Bober Game Room",
     appDescription: "Play a fun Bober Video Game",

src/pages/Account/MyWallet/index.tsx

@@ -224,7 +224,6 @@ export const MyWallet = () => {
             className="border-0 text-background rounded-lg font-medium tracking-tight base:!text-sm md:!text-base hover:opacity-80 hover:text-black"
             onClick={() => {
               setNumberOfNftsShown(numberOfNftsShown + SHOW_NFTS_STEP);
-              console.log(nfts.length, numberOfNftsShown);
             }}
             disabled={false}>
             Load more