From 60aef5ad2cc309c86435ea629181e65cfa71b72a Mon Sep 17 00:00:00 2001 From: Benedek Robert George Date: Mon, 13 May 2024 14:42:06 +0300 Subject: [PATCH 1/7] chore: add a new data nft to nf-tunes --- src/appsConfig.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/appsConfig.tsx b/src/appsConfig.tsx index 9b054517..9d55b6c2 100644 --- a/src/appsConfig.tsx +++ b/src/appsConfig.tsx @@ -43,6 +43,7 @@ export const NF_TUNES_TOKENS: app_token[] = IS_DEVNET { tokenIdentifier: "DATANFTFT-e0b917", nonce: 138 }, { tokenIdentifier: "DATANFTFT-e0b917", nonce: 187 }, { tokenIdentifier: "DATANFTFT-e0b917", nonce: 295 }, + { tokenIdentifier: "DATANFTFT-e0b917", nonce: 299 }, ...Array.from({ length: 4 }, (_, i) => ({ tokenIdentifier: "OASMUSICPL-47b186", nonce: i })), ...Array.from({ length: 19 }, (_, i) => ({ tokenIdentifier: "FOOWLDMSC-5ee8ec", nonce: i })), From 216023884c20fef1cfa72c4088ee56320baf288b Mon Sep 17 00:00:00 2001 From: Benedek Robert George Date: Tue, 14 May 2024 11:51:26 +0300 Subject: [PATCH 2/7] chore: add new data music nft on devnet --- src/appsConfig.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/appsConfig.tsx b/src/appsConfig.tsx index 9d55b6c2..09d24619 100644 --- a/src/appsConfig.tsx +++ b/src/appsConfig.tsx @@ -44,6 +44,7 @@ export const NF_TUNES_TOKENS: app_token[] = IS_DEVNET { tokenIdentifier: "DATANFTFT-e0b917", nonce: 187 }, { tokenIdentifier: "DATANFTFT-e0b917", nonce: 295 }, { tokenIdentifier: "DATANFTFT-e0b917", nonce: 299 }, + { tokenIdentifier: "DATANFTFT-e0b917", nonce: 301 }, ...Array.from({ length: 4 }, (_, i) => ({ tokenIdentifier: "OASMUSICPL-47b186", nonce: i })), ...Array.from({ length: 19 }, (_, i) => ({ tokenIdentifier: "FOOWLDMSC-5ee8ec", nonce: i })), From be443c34e48c12062cb3c3271bd9a455c37d0831 Mon Sep 17 00:00:00 2001 From: Damian Date: Wed, 15 May 2024 09:18:50 +0300 Subject: [PATCH 3/7] chore: new nf-tunes nft --- src/appsConfig.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/appsConfig.tsx b/src/appsConfig.tsx index 09d24619..dbbc1348 100644 --- a/src/appsConfig.tsx +++ b/src/appsConfig.tsx @@ -45,7 +45,7 @@ export const NF_TUNES_TOKENS: app_token[] = IS_DEVNET { tokenIdentifier: "DATANFTFT-e0b917", nonce: 295 }, { tokenIdentifier: "DATANFTFT-e0b917", nonce: 299 }, { tokenIdentifier: "DATANFTFT-e0b917", nonce: 301 }, - + { tokenIdentifier: "DATANFTFT-e0b917", nonce: 324 }, ...Array.from({ length: 4 }, (_, i) => ({ tokenIdentifier: "OASMUSICPL-47b186", nonce: i })), ...Array.from({ length: 19 }, (_, i) => ({ tokenIdentifier: "FOOWLDMSC-5ee8ec", nonce: i })), ] From 4072bd1e9aaf6f31c7a982c29c69b2f07142a3d2 Mon Sep 17 00:00:00 2001 From: Damian Date: Wed, 15 May 2024 12:07:25 +0300 Subject: [PATCH 4/7] chore: new nf-tunes --- src/appsConfig.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/appsConfig.tsx b/src/appsConfig.tsx index dbbc1348..001ea0d9 100644 --- a/src/appsConfig.tsx +++ b/src/appsConfig.tsx @@ -46,6 +46,7 @@ export const NF_TUNES_TOKENS: app_token[] = IS_DEVNET { tokenIdentifier: "DATANFTFT-e0b917", nonce: 299 }, { tokenIdentifier: "DATANFTFT-e0b917", nonce: 301 }, { tokenIdentifier: "DATANFTFT-e0b917", nonce: 324 }, + { tokenIdentifier: "DATANFTFT-e0b917", nonce: 326 }, ...Array.from({ length: 4 }, (_, i) => ({ tokenIdentifier: "OASMUSICPL-47b186", nonce: i })), ...Array.from({ length: 19 }, (_, i) => ({ tokenIdentifier: "FOOWLDMSC-5ee8ec", nonce: i })), ] From c0d0d2a6ac85898cb0013bc7dce8390f00179dc4 Mon Sep 17 00:00:00 2001 From: Benedek Robert George Date: Wed, 15 May 2024 20:11:04 +0300 Subject: [PATCH 5/7] feat: create nftMedia Component to handle the media of NFTs --- src/components/DataNftCard.tsx | 22 +++++------ src/components/ImageSlider.tsx | 34 +++++++++-------- src/components/NftMediaComponent.tsx | 37 +++++++++++++++++++ src/components/ThreeDCard.tsx | 9 ++++- src/pages/Account/MyListed/index.tsx | 16 +++++--- .../ItheumTrailblazer/ItheumTrailblazer.tsx | 1 - 6 files changed, 83 insertions(+), 36 deletions(-) create mode 100644 src/components/NftMediaComponent.tsx diff --git a/src/components/DataNftCard.tsx b/src/components/DataNftCard.tsx index 06dac2c9..55488533 100644 --- a/src/components/DataNftCard.tsx +++ b/src/components/DataNftCard.tsx @@ -6,9 +6,17 @@ import { cn } from "libs/utils"; import ImageSlider from "./ImageSlider"; import { Modal } from "./Modal/Modal"; import { MXAddressLink } from "./MXAddressLink"; +import NftMediaComponent from "./NftMediaComponent"; import { Button } from "../libComponents/Button"; import { Card, CardContent, CardFooter } from "../libComponents/Card"; import { IFilterData } from "../libComponents/Filter"; +export interface NftMedia { + url: string; + originalUrl: string; + thumbnailUrl: string; + fileType: string; + fileSize: number; +} export function DataNftCard({ index, @@ -48,7 +56,6 @@ export function DataNftCard({ function goToMarketplace(tokenIdentifier: string) { window.open(`${MARKETPLACE_DETAILS_PAGE}${tokenIdentifier}`)?.focus(); } - return (
- {dataNft.media && dataNft.media[0] && (dataNft.media[0] as any).url && (dataNft.media[0] as any).fileType.includes("video") ? ( - - ) : dataNft.extraAssets.length > 0 ? ( - mediaObj.url) ?? [dataNft.nftImgUrl]} autoSlide /> - ) : ( -
- -
- )} +
diff --git a/src/components/ImageSlider.tsx b/src/components/ImageSlider.tsx index 39a30327..9fa72dea 100644 --- a/src/components/ImageSlider.tsx +++ b/src/components/ImageSlider.tsx @@ -3,15 +3,13 @@ import { motion } from "framer-motion"; import { ArrowLeft, ArrowRight, Image } from "lucide-react"; import { cn } from "libs/utils"; import { Button } from "libComponents/Button"; +import NftMediaComponent from "./NftMediaComponent"; interface ImageSliderProps { - imageUrls: string[]; + media: { url: string; type: string }[]; autoSlide?: boolean; autoSlideInterval?: number; - imageWidth?: string; - imageHeight?: string; onLoad?: () => void; - openNftDetailsDrawer?: () => void; } //Spring animation parameters @@ -22,14 +20,14 @@ const spring = { }; const ImageSlider: React.FC = (props) => { - const { imageUrls, autoSlide = false, autoSlideInterval = 6000, imageWidth = "210px", imageHeight = "210px", onLoad, openNftDetailsDrawer } = props; + const { media, autoSlide = false, autoSlideInterval = 6000, onLoad } = props; const [imageIndex, setImageIndex] = useState(0); const [switchedImageManually, setSwitchedImageManually] = useState(false); const [nextImageIndex, setNextImageIndex] = useState(0); const makeFlip = nextImageIndex !== imageIndex; useEffect(() => { - if (autoSlide && imageUrls.length > 1 && !switchedImageManually) { + if (autoSlide && media.length > 1 && !switchedImageManually) { const interval = setInterval(() => { goToNextImage(); }, autoSlideInterval); @@ -38,17 +36,17 @@ const ImageSlider: React.FC = (props) => { }, [switchedImageManually]); function goToPreviousImage(autoSwitch = false) { - setNextImageIndex((prevIndex) => (prevIndex === 0 ? imageUrls.length - 1 : prevIndex - 1)); + setNextImageIndex((prevIndex) => (prevIndex === 0 ? media.length - 1 : prevIndex - 1)); setSwitchedImageManually(autoSwitch); } function goToNextImage(autoSwitch = false) { - setNextImageIndex((prevIndex) => (prevIndex === imageUrls.length - 1 ? 0 : prevIndex + 1)); + setNextImageIndex((prevIndex) => (prevIndex === media.length - 1 ? 0 : prevIndex + 1)); setSwitchedImageManually(autoSwitch); } return ( -
+
= (props) => { backfaceVisibility: "hidden", position: "absolute", }}> - + {media[imageIndex].type.includes("video") ? ( + + ) : ( + + )} {makeFlip && ( = (props) => { onAnimationComplete={() => { setImageIndex(nextImageIndex); }}> - + {media[nextImageIndex].type.includes("video") ? ( + + ) : ( + + )} )}
- {imageUrls.length > 1 && ( + {media.length > 1 && (
-
diff --git a/src/components/NftMediaComponent.tsx b/src/components/NftMediaComponent.tsx new file mode 100644 index 00000000..da93a742 --- /dev/null +++ b/src/components/NftMediaComponent.tsx @@ -0,0 +1,37 @@ +import { cn } from "libs/utils"; +import React from "react"; +import { NftMedia } from "./DataNftCard"; +import ImageSlider from "./ImageSlider"; + +interface NftMediaComponentProps { + nftMedia: NftMedia[]; + isLoading?: boolean; + mediaStyle?: string; +} + +const NftMediaComponent: React.FC = (props) => { + const { nftMedia, isLoading, mediaStyle } = props; + return ( +
+ {nftMedia.length === 0 && } + {nftMedia.length === 1 ? ( +
+ {nftMedia[0].fileType === "video/mp4" ? ( +
+ ) : ( + ({ + url: item.url, + type: item.fileType, + }))} + /> + )} +
+ ); +}; + +export default NftMediaComponent; diff --git a/src/components/ThreeDCard.tsx b/src/components/ThreeDCard.tsx index 57cc8baa..8a6abdd2 100644 --- a/src/components/ThreeDCard.tsx +++ b/src/components/ThreeDCard.tsx @@ -15,12 +15,19 @@ interface ThreeDCardProps { export function ThreeDCard(props: ThreeDCardProps) { const { tokenIdentifier, title, nftImgUrl, supply, rating, wantedTokenAmount, offerIndex } = props; + return ( - thumbnail + {nftImgUrl.includes(".mp4") ? ( +
+ +
+ ) : ( + thumbnail + )} diff --git a/src/pages/Account/MyListed/index.tsx b/src/pages/Account/MyListed/index.tsx index 84e91f67..467fedb7 100644 --- a/src/pages/Account/MyListed/index.tsx +++ b/src/pages/Account/MyListed/index.tsx @@ -10,6 +10,8 @@ import { createNftId } from "libs/utils/token"; import { HeaderComponent } from "components/Layout/HeaderComponent"; import { Card, CardContent } from "libComponents/Card"; import { ExternalLink } from "lucide-react"; +import ImageSlider from "components/ImageSlider"; +import NftMediaComponent from "components/NftMediaComponent"; export const MyListed = () => { const { @@ -29,10 +31,8 @@ export const MyListed = () => { const _totalOfferCount = await dataNftMarket.viewAddressTotalOffers(new Address(address)); setOfferCount(_totalOfferCount); - const _offers = await dataNftMarket.viewAddressListedOffers(new Address(address)); setOffers(_offers); - setIsLoading(false); } @@ -74,13 +74,17 @@ export const MyListed = () => { return (
- +
- dataNftImage + {dataNft.extraAssets.length > 0 ? ( + mediaObj.url) ?? [dataNft.nftImgUrl]} autoSlide /> + ) : ( + + )}
-
Offer Detail
+
Offer Detail
Identifier: @@ -101,7 +105,7 @@ export const MyListed = () => { {offer.quantity}
-
+
Data NFT Detail
diff --git a/src/pages/AppMarketplace/ItheumTrailblazer/ItheumTrailblazer.tsx b/src/pages/AppMarketplace/ItheumTrailblazer/ItheumTrailblazer.tsx index ab87f006..6e227a6d 100644 --- a/src/pages/AppMarketplace/ItheumTrailblazer/ItheumTrailblazer.tsx +++ b/src/pages/AppMarketplace/ItheumTrailblazer/ItheumTrailblazer.tsx @@ -81,7 +81,6 @@ export const ItheumTrailblazer = () => { res = await dataNft.viewDataViaMVXNativeAuth(arg); res.data = await (res.data as Blob).text(); res.data = JSON.parse(res.data); - console.log(res.data); setData(res.data.data.reverse()); setIsFetchingDataMarshal(false); From 05b1365b2b9a807b5b2fa169af9e190f46972da8 Mon Sep 17 00:00:00 2001 From: Benedek Robert George Date: Wed, 15 May 2024 20:26:40 +0300 Subject: [PATCH 6/7] fix: slider arrows strange display --- src/components/DataNftCard.tsx | 2 +- src/components/NftMediaComponent.tsx | 14 ++++++++------ 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/DataNftCard.tsx b/src/components/DataNftCard.tsx index 55488533..a11d7cc5 100644 --- a/src/components/DataNftCard.tsx +++ b/src/components/DataNftCard.tsx @@ -64,7 +64,7 @@ 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]" )}> - +
diff --git a/src/components/NftMediaComponent.tsx b/src/components/NftMediaComponent.tsx index da93a742..42f3b77d 100644 --- a/src/components/NftMediaComponent.tsx +++ b/src/components/NftMediaComponent.tsx @@ -23,12 +23,14 @@ const NftMediaComponent: React.FC = (props) => { )}
) : ( - ({ - url: item.url, - type: item.fileType, - }))} - /> +
+ ({ + url: item.url, + type: item.fileType, + }))} + />{" "} +
)}
); From 6e5a61ef64c8b08dac0fb2cc5b76fc1a50a6ab6e Mon Sep 17 00:00:00 2001 From: Benedek Robert George Date: Wed, 15 May 2024 20:30:42 +0300 Subject: [PATCH 7/7] refactor: add nftMedia type in utils --- src/components/DataNftCard.tsx | 9 +-------- src/components/ImageSlider.tsx | 4 +--- src/components/NftMediaComponent.tsx | 2 +- src/libs/types/common.ts | 7 +++++++ src/pages/Account/MyListed/index.tsx | 7 ++----- 5 files changed, 12 insertions(+), 17 deletions(-) diff --git a/src/components/DataNftCard.tsx b/src/components/DataNftCard.tsx index a11d7cc5..390588bf 100644 --- a/src/components/DataNftCard.tsx +++ b/src/components/DataNftCard.tsx @@ -3,20 +3,13 @@ import { DataNft } from "@itheum/sdk-mx-data-nft/out"; import { useGetNetworkConfig } from "@multiversx/sdk-dapp/hooks/useGetNetworkConfig"; import { MARKETPLACE_DETAILS_PAGE } from "config"; import { cn } from "libs/utils"; -import ImageSlider from "./ImageSlider"; import { Modal } from "./Modal/Modal"; import { MXAddressLink } from "./MXAddressLink"; import NftMediaComponent from "./NftMediaComponent"; import { Button } from "../libComponents/Button"; import { Card, CardContent, CardFooter } from "../libComponents/Card"; import { IFilterData } from "../libComponents/Filter"; -export interface NftMedia { - url: string; - originalUrl: string; - thumbnailUrl: string; - fileType: string; - fileSize: number; -} +import { NftMedia } from "libs/types"; export function DataNftCard({ index, diff --git a/src/components/ImageSlider.tsx b/src/components/ImageSlider.tsx index 9fa72dea..a29d2f26 100644 --- a/src/components/ImageSlider.tsx +++ b/src/components/ImageSlider.tsx @@ -1,9 +1,7 @@ import React, { useEffect, useState } from "react"; import { motion } from "framer-motion"; -import { ArrowLeft, ArrowRight, Image } from "lucide-react"; -import { cn } from "libs/utils"; +import { ArrowLeft, ArrowRight } from "lucide-react"; import { Button } from "libComponents/Button"; -import NftMediaComponent from "./NftMediaComponent"; interface ImageSliderProps { media: { url: string; type: string }[]; diff --git a/src/components/NftMediaComponent.tsx b/src/components/NftMediaComponent.tsx index 42f3b77d..515f4cae 100644 --- a/src/components/NftMediaComponent.tsx +++ b/src/components/NftMediaComponent.tsx @@ -1,6 +1,6 @@ +import { NftMedia } from "libs/types"; import { cn } from "libs/utils"; import React from "react"; -import { NftMedia } from "./DataNftCard"; import ImageSlider from "./ImageSlider"; interface NftMediaComponentProps { diff --git a/src/libs/types/common.ts b/src/libs/types/common.ts index 11145960..a5864f2e 100644 --- a/src/libs/types/common.ts +++ b/src/libs/types/common.ts @@ -18,3 +18,10 @@ export interface TrendingNft { tokenIdentifier: string; rating: number; } +export interface NftMedia { + url: string; + originalUrl: string; + thumbnailUrl: string; + fileType: string; + fileSize: number; +} diff --git a/src/pages/Account/MyListed/index.tsx b/src/pages/Account/MyListed/index.tsx index 467fedb7..a092e2e8 100644 --- a/src/pages/Account/MyListed/index.tsx +++ b/src/pages/Account/MyListed/index.tsx @@ -12,6 +12,7 @@ import { Card, CardContent } from "libComponents/Card"; import { ExternalLink } from "lucide-react"; import ImageSlider from "components/ImageSlider"; import NftMediaComponent from "components/NftMediaComponent"; +import { NftMedia } from "libs/types"; export const MyListed = () => { const { @@ -76,11 +77,7 @@ export const MyListed = () => {
- {dataNft.extraAssets.length > 0 ? ( - mediaObj.url) ?? [dataNft.nftImgUrl]} autoSlide /> - ) : ( - - )} +