Add time capsule to 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.11.0",
+  "version": "1.11.1",
   "author": "Itheum",
   "license": "GPL-3.0-or-later",
   "dependencies": {

src/appsConfig.tsx

@@ -56,4 +56,4 @@ export const TIMECAPSULE_TOKENS: app_token[] = IS_DEVNET
 
 export const SUPPORTED_APPS = IS_DEVNET
   ? ["itheumtrailblazer", "multiversxbubbles", "esdtBubble", "playstationgamerpassport", "multiversxinfographics", "nftunes", "timecapsule"]
-  : ["itheumtrailblazer", "multiversxbubbles", "multiversxinfographics", "nftunes"];
+  : ["itheumtrailblazer", "multiversxbubbles", "multiversxinfographics", "nftunes", "timecapsule"];

src/components/DataNftCard.tsx

@@ -22,7 +22,7 @@ export function DataNftCard({
   modalTitleStyle,
   hasFilter,
   filterData,
-  className,
+  cardStyles,
 }: {
   index: number;
   dataNft: DataNft;
@@ -36,7 +36,7 @@ export function DataNftCard({
   modalTitleStyle?: string;
   hasFilter?: boolean;
   filterData?: Array<IFilterData>;
-  className?: string;
+  cardStyles?: string;
 }) {
   const {
     network: { explorerAddress },
@@ -49,7 +49,7 @@ export function DataNftCard({
     <div className="mb-3">
       <Card
         className={cn(
-          className,
+          cardStyles,
           "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">

src/libComponents/YouTubeEmbed.tsx → src/components/YouTubeEmbed.tsx

@@ -6,13 +6,7 @@ const YouTubeEmbed = ({ embedId, title }: { embedId: string; title: string }) =>
       className="h-full w-full"
       src={`https://www.youtube.com/embed/${embedId}?controls=1&playsinline=1&color=white&autoplay=0`}
       title={title}
-      frameborder="0"
-      allowfullscreen="allowfullscreen"
-      mozallowfullscreen="mozallowfullscreen"
-      msallowfullscreen="msallowfullscreen"
-      oallowfullscreen="oallowfullscreen"
-      webkitallowfullscreen="webkitallowfullscreen"
-      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
   );
 };
 

src/index.css

@@ -173,3 +173,9 @@ h6 {
 .dapp-core-component__confirmAddressStyles__ledger-confirm-address-heading {
   @apply text-black !important;
 }
+
+.bg-manu-image {
+  background-image: url("./assets/img/nf-tunes/bg-manu.jpg");
+  background-size: cover;
+  background-position: top;
+}

src/pages/AppMarketplace/NFTunes/index.tsx

@@ -40,7 +40,7 @@ import benefitsLogo1 from "../../../assets/img/nf-tunes/benefits-logo1.png";
 import benefitsLogo2 from "../../../assets/img/nf-tunes/benefits-logo2.png";
 import benefitsLogo3 from "../../../assets/img/nf-tunes/benefits-logo3.png";
 import { motion } from "framer-motion";
-import YouTubeEmbed from "libComponents/YouTubeEmbed";
+import YouTubeEmbed from "components/YouTubeEmbed";
 import { useTheme } from "libComponents/ThemeProvider";
 
 interface ExtendedViewDataReturnType extends ViewDataReturnType {
@@ -272,7 +272,7 @@ export const NFTunes = () => {
         {/* Featured Artist Section */}
         <div
           id="featured-artist"
-          className="bg-manu-image bg-cover bg-top flex flex-col xl:flex-row  justify-center items-center xl:items-start w-full h-full gap-12 mb-16 xl:mb-32">
+          className="bg-manu-image flex flex-col xl:flex-row  justify-center items-center xl:items-start w-full h-full gap-12 mb-16 xl:mb-32">
           <div className="py-8 flex flex-col w-[100%] justify-center items-center xl:items-start p-8 xl:p-12">
             <div className="flex flex-row rounded-lg mb-4 px-8 xl:px-16 text-center gap-4 bg-foreground md:text-2xl xl:text-3xl justify-center items-center ">
               <Music className="text-secondary" />
@@ -343,7 +343,7 @@ export const NFTunes = () => {
                 <div className="scale-[0.9] -mt-6 pt-4 xl:pt-0 rounded-[2.37rem]">
                   {featuredArtistDataNft ? (
                     <DataNftCard
-                      className="text-white"
+                      cardStyles="text-white"
                       index={featuredDataNftIndex}
                       dataNft={featuredArtistDataNft}
                       isLoading={isLoading}

tailwind.config.js

@@ -91,9 +91,6 @@ module.exports = {
         "gradient": "gradient 10s linear infinite",
         "cube-down": "cube-down 1s ease-in-out infinite",
       },
-      backgroundImage: (theme) => ({
-        "manu-image": "url('../src/assets/img/nf-tunes/bg-manu.jpg')",
-      }),
     },
   },