diff --git a/package-lock.json b/package-lock.json index aba38620..f348fee8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,7 +26,7 @@ "clsx": "2.1.0", "d3": "7.8.5", "dompurify": "3.0.8", - "framer-motion": "^11.0.3", + "framer-motion": "11.0.3", "lucide-react": "0.309.0", "moment": "2.30.1", "moment-timezone": "0.5.44", diff --git a/src/App.tsx b/src/App.tsx index ccb48d6b..ba49a857 100644 --- a/src/App.tsx +++ b/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 = () => { } /> } /> } /> + } /> } /> } /> diff --git a/src/appsConfig.tsx b/src/appsConfig.tsx index 24bb48f5..4452e968 100644 --- a/src/appsConfig.tsx +++ b/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"]; diff --git a/src/assets/img/timecapsule/custom-app-header-timecapsule.png b/src/assets/img/timecapsule/custom-app-header-timecapsule.png new file mode 100644 index 00000000..74d1d486 Binary files /dev/null and b/src/assets/img/timecapsule/custom-app-header-timecapsule.png differ diff --git a/src/assets/img/timecapsule/expl-app-timecapsule-icon.png b/src/assets/img/timecapsule/expl-app-timecapsule-icon.png new file mode 100644 index 00000000..61d5acb9 Binary files /dev/null and b/src/assets/img/timecapsule/expl-app-timecapsule-icon.png differ diff --git a/src/components/AudioPlayer.tsx b/src/components/AudioPlayer.tsx index b8b529d2..1885a340 100644 --- a/src/components/AudioPlayer.tsx +++ b/src/components/AudioPlayer.tsx @@ -340,9 +340,9 @@ export const AudioPlayer = (props: AudioPlayerProps) => { {props.previewUrl ? (
{props.songs[currentTrackIndex]?.title}{" "} - {props.songs[currentTrackIndex]?.category} - - {props.songs[currentTrackIndex]?.album} + Preview + + {props.songs[currentTrackIndex]?.description}
) : ( diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx index e3ea70a1..7787380d 100644 --- a/src/components/Layout/Footer.tsx +++ b/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
diff --git a/src/libComponents/YouTubeEmbed.tsx b/src/libComponents/YouTubeEmbed.tsx new file mode 100644 index 00000000..75a5d082 --- /dev/null +++ b/src/libComponents/YouTubeEmbed.tsx @@ -0,0 +1,19 @@ +import React from "react"; + +const YouTubeEmbed = ({ embedId, title }: { embedId: string; title: string }) => { + return ( + + ); +}; + +export default YouTubeEmbed; diff --git a/src/libs/utils/constant.ts b/src/libs/utils/constant.ts index 7765d266..237e529b 100644 --- a/src/libs/utils/constant.ts +++ b/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"; diff --git a/src/pages/AppMarketplace/ItheumTrailblazer/components/TrailBlazerModal.tsx b/src/pages/AppMarketplace/ItheumTrailblazer/components/TrailBlazerModal.tsx index 3b93e956..39dc91f3 100644 --- a/src/pages/AppMarketplace/ItheumTrailblazer/components/TrailBlazerModal.tsx +++ b/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(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 ; break; + case "Meme": + return ; + break; default: return ; break; @@ -165,6 +163,24 @@ export const TrailBlazerModal = ({ owned, isFetchingDataMarshal, data }: { owned
); break; + case "Meme": + tileCode = ( +
+ +

{dataItem.title}

+

{new Date(dataItem.date).toDateString()}

+ {dataItem.file && dataItem["file_mimeType"] && ( + + )} + + See more... + + +
+ ); + break; default: tileCode = (
diff --git a/src/pages/AppMarketplace/NFTunes/index.tsx b/src/pages/AppMarketplace/NFTunes/index.tsx index b18978a3..19a80414 100644 --- a/src/pages/AppMarketplace/NFTunes/index.tsx +++ b/src/pages/AppMarketplace/NFTunes/index.tsx @@ -34,6 +34,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"; interface ExtendedViewDataReturnType extends ViewDataReturnType { blobDataType: BlobDataType; @@ -41,12 +42,8 @@ interface ExtendedViewDataReturnType extends ViewDataReturnType { export const NFTunes = () => { const { address } = useGetAccount(); - - ///native auth const { tokenLogin } = useGetLoginInfo(); - const { hasPendingTransactions } = useGetPendingTransactions(); - const [dataNfts, setDataNfts] = useState([]); const [featuredArtistDataNft, setFeaturedArtistDataNft] = useState(); const [featuredDataNftIndex, setFeaturedDataNftIndex] = useState(-1); @@ -73,28 +70,29 @@ export const NFTunes = () => { } }, [isLoading, address]); - ///get the nfts that are able to open nfTunes app + // get the nfts that are able to open nfTunes app async function fetchDataNfts() { setIsLoading(true); const _nfts: DataNft[] = await DataNft.createManyFromApi(NF_TUNES_TOKENS.map((v) => ({ nonce: v.nonce, tokenIdentifier: v.tokenIdentifier }))); - const _featuredNft: DataNft = await DataNft.createFromApi(FEATURED_NF_TUNES_TOKEN); - setDataNfts(_nfts); - setFeaturedArtistDataNft(_featuredNft); + setDataNfts(_nfts); + _nfts.map((currentNft, index) => { + if (currentNft.nonce === FEATURED_NF_TUNES_TOKEN.nonce && currentNft.collection === FEATURED_NF_TUNES_TOKEN.tokenIdentifier) { + setFeaturedDataNftIndex(index); + setFeaturedArtistDataNft(currentNft); + } + }); setIsLoading(false); } - ///fetch the nfts owned by the logged in address and if the user has any of them set flag to true, - //on those will be shown view data otherwise show market place explore button + // fetch the nfts owned by the logged in address and if the user has any of them set flag to true, + // on those will be shown view data otherwise show market place explore button async function fetchMyNfts() { const _dataNfts = await DataNft.ownedByAddress(address); const _flags = []; for (const currentNft of dataNfts) { - if (currentNft.nonce == FEATURED_NF_TUNES_TOKEN.nonce) { - setFeaturedDataNftIndex(_flags.length); - } const matches = _dataNfts.filter((ownedNft) => currentNft.nonce === ownedNft.nonce); _flags.push(matches.length > 0); } @@ -102,19 +100,16 @@ export const NFTunes = () => { setFlags(_flags); } - /// after pressing the button to view data open modal + // after pressing the button to view data open modal async function viewData(index: number) { try { if (!(index >= 0 && index < dataNfts.length)) { toastError("Data is not loaded"); return; } - const _owned = flags[index]; - if (_owned) { setIsFetchingDataMarshal(true); - const dataNft = dataNfts[index]; let res: any; if (!(tokenLogin && tokenLogin.nativeAuthToken)) { @@ -171,15 +166,15 @@ export const NFTunes = () => {
- Empowering Indie musicians to engage with a fresh fan community and discover alternative avenues for music distribution.{" "} + Empowering Indie musicians to engage with a fresh fan community and discover alternative avenues for music distribution{" "}
@@ -191,7 +186,7 @@ export const NFTunes = () => {
disk - stick + stick
@@ -199,47 +194,48 @@ export const NFTunes = () => {
- Driven by the innovation of Itheum's Music Data NFTs + Driven by the innovation of Itheum Music Data NFTs {/* Benefits of NF-Tunes */} -
+
-
+
- Benefits of NF-Tunes + Benefits of NF-Tunes
-
-
+
+
Transform your music streams into NFT Masterpieces - - Forge a direct connection with your fans, experiment with diverse royalty and distribution approaches, showcase the demand for your music. + + Release single music tracks or entire playlists, mixes, or extended compositions through a unified Music Data NFT. Update your music at any + time and your NFT holders receive the latest content instantly.{" "}
-
-
+
+
- Cultivate a DeGeN Fan Community for Your Music NFTs - + Cultivate a DeGeN Fan Community for Your Music NFTs + Explore the availability of Music Data NFTs across various NFT platforms, connecting you with "new fans" and fostering a direct relationship with your audience.{" "}
-
+
-
+
- Take Command of Royalties and Distribution for Your Music NFTs - + Take Command of Royalties and Distribution + Forge a direct connection with your fans, experiment with diverse royalty and distribution approaches, showcase the demand for your music.
@@ -247,33 +243,52 @@ export const NFTunes = () => {
+ {/* What Musicians are saying */} +
+
+
+
+
Hear what Indie Musicians are saying about Music Data NFTs and NF-Tunes
+
+
+
+ +
+
+
+
+
+ {/* Featured Artist Section */}