Feature new time capsule widget + nftunes landing page fixes

src/App.tsx

@@ -9,6 +9,7 @@ import { TransactionsToastList, NotificationModal, SignTransactionsModals } from
 import { apiTimeout, walletConnectV2ProjectId, sampleAuthenticatedDomains, ELROND_NETWORK } from "config";
 import { MultiversxBubbles, MultiversxInfographics, MyWallet, PageNotFound, Unlock } from "pages";
 import { ItheumTrailblazer } from "pages/AppMarketplace/ItheumTrailblazer/ItheumTrailblazer";
+import { TimeCapsule } from "pages/AppMarketplace/TimeCapsule/TimeCapsule";
 import { NFTunes } from "pages/AppMarketplace/NFTunes";
 import { routes, routeNames } from "routes";
 import { ThemeProvider } from "./libComponents/ThemeProvider";
@@ -44,6 +45,7 @@ export const App = () => {
                   <Route path={`${routeNames.multiversxbubbles}/:targetNonce/:targetMessageToBeSigned`} element={<MultiversxBubbles />} />
                   <Route path={`${routeNames.multiversxinfographics}/:targetNonce/:targetMessageToBeSigned`} element={<MultiversxInfographics />} />
                   <Route path={`${routeNames.nftunes}/:targetNonce/:targetMessageToBeSigned`} element={<NFTunes />} />
+                  <Route path={`${routeNames.timecapsule}/:targetNonce/:targetMessageToBeSigned`} element={<TimeCapsule />} />
                   <Route path={`${routeNames.mywallet}/:targetNonce/:targetMessageToBeSigned`} element={<MyWallet />} />
                   <Route path="*" element={<PageNotFound />} />
                 </Routes>

src/appsConfig.tsx

@@ -50,7 +50,10 @@ export const PLAYSTATION_GAMER_PASSPORT_TOKENS: app_token[] = [
 export const ESDT_BUBBLE_TOKENS: app_token[] = [
   // { tokenIdentifier: "DATANFTFT-e0b917", nonce: 417 }
 ];
+export const TIMECAPSULE_TOKENS: app_token[] = IS_DEVNET
+  ? [{ tokenIdentifier: "DATANFTFT-e0b917", nonce: 57 }]
+  : [{ tokenIdentifier: "DATANFTFT-e936d4", nonce: 5 }];
 
 export const SUPPORTED_APPS = IS_DEVNET
-  ? ["itheumtrailblazer", "multiversxbubbles", "esdtBubble", "playstationgamerpassport", "multiversxinfographics", "nftunes"]
+  ? ["itheumtrailblazer", "multiversxbubbles", "esdtBubble", "playstationgamerpassport", "multiversxinfographics", "nftunes", "timecapsule"]
   : ["itheumtrailblazer", "multiversxbubbles", "multiversxinfographics", "nftunes"];

src/components/Layout/Footer.tsx

@@ -12,8 +12,8 @@ export const Footer = () => {
           {...{
             target: "_blank",
           }}
-          className="flex items-center dark:text-white text-black"
-          href="https://itheum.com">
+          className="flex items-center dark:text-white text-black text-sm"
+          href="https://itheum.io">
           Made with ♥ by Itheum
         </a>
         <div className="flex justify-center items-center gap-2">

src/libComponents/YouTubeEmbed.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+const YouTubeEmbed = ({ embedId, title }: { embedId: string; title: string }) => {
+  return (
+    <iframe
+      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>
+  );
+};
+
+export default YouTubeEmbed;

src/libs/utils/constant.ts

@@ -1,6 +1,7 @@
 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";
 
 export const ERROR_CONNECT_WALLET = "Connect your wallet";
@@ -50,6 +51,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: "Time Capsule",
+    appDescription: "Time Capsule",
+    routeKey: "timecapsule",
+    desc: "Capture, archive, and relive historic social media events through photos and videos, preserving memories for future generations. Join the nostalgia journey!",
+    img: iconTimeCapsule,
+  },
 ];
 
 export const ITHEUM_EXPLORER_PROD_URL = "https://explorer.itheum.io";

src/pages/AppMarketplace/ItheumTrailblazer/components/TrailBlazerModal.tsx

@@ -1,24 +1,21 @@
 import React, { useEffect, useState } from "react";
-import { useGetLoginInfo } from "@multiversx/sdk-dapp/hooks";
-import { Banknote, BarChart3, CalendarCheck, Flag, HeartHandshake, Map, ShoppingCart, Trophy } from "lucide-react";
+import { Banknote, BarChart3, CalendarCheck, Flag, HeartHandshake, Map, ShoppingCart, Trophy, Drama } from "lucide-react";
 import { VerticalTimeline, VerticalTimelineElement } from "react-vertical-timeline-component";
 import { Loader } from "components";
-import { Modal } from "../../../../components/Modal/Modal";
-import { NoDataFound } from "../../../../components/NoDataFound";
-import { Button } from "../../../../libComponents/Button";
-import { Card } from "../../../../libComponents/Card";
-import { useFilterStore } from "../../../../store/FilterStore";
+import { Modal } from "components/Modal/Modal";
+import { NoDataFound } from "components/NoDataFound";
+import { Button } from "libComponents/Button";
+import { Card } from "libComponents/Card";
+import { useFilterStore } from "store/FilterStore";
 
 export const TrailBlazerModal = ({ owned, isFetchingDataMarshal, data }: { owned: boolean; isFetchingDataMarshal?: boolean; data: any }) => {
   const { filter } = useFilterStore();
-  const { loginMethod } = useGetLoginInfo();
   const [filteredData, setFilteredData] = useState<number>(1000);
 
   useEffect(() => {
     const filteredDataTemp = new Set();
     const allData = new Set(data);
     allData.forEach((dataT: any) => {
-      // console.log(data.category);
       if (dataT.category === filter) {
         filteredDataTemp.add(dataT);
       } else {
@@ -28,8 +25,6 @@ export const TrailBlazerModal = ({ owned, isFetchingDataMarshal, data }: { owned
     });
   }, [filter]);
 
-  // console.log(allData);
-
   const getIconForCategory = (dataItem: any) => {
     switch (dataItem.category) {
       case "Partnership":
@@ -47,6 +42,9 @@ export const TrailBlazerModal = ({ owned, isFetchingDataMarshal, data }: { owned
       case "Leaderboard":
         return <BarChart3 strokeWidth={2.5} />;
         break;
+      case "Meme":
+        return <Drama />;
+        break;
       default:
         return <CalendarCheck strokeWidth={2.5} />;
         break;
@@ -165,6 +163,24 @@ export const TrailBlazerModal = ({ owned, isFetchingDataMarshal, data }: { owned
           </div>
         );
         break;
+      case "Meme":
+        tileCode = (
+          <div className="bg-gradient-to-r from-yellow-300 to-orange-500 p-[1px] rounded-xl">
+            <Card className="flex flex-col items-start justify-center !p-4 text-foreground bg-background border-0 rounded-xl">
+              <h2>{dataItem.title}</h2>
+              <h3>{new Date(dataItem.date).toDateString()}</h3>
+              {dataItem.file && dataItem["file_mimeType"] && (
+                <video className="w-auto h-auto mx-auto my-4" style={{ maxHeight: "600px" }} controls>
+                  <source src={dataItem.file} type={dataItem["file_mimeType"]}></source>
+                </video>
+              )}
+              <a href={dataItem.link} target="_blank" className="!text-blue-500">
+                See more...
+              </a>
+            </Card>
+          </div>
+        );
+        break;
       default:
         tileCode = (
           <div className="bg-gradient-to-r from-yellow-300 to-orange-500 p-[1px] rounded-xl">