@zoralabs/nft-components - npm Package Compare versions

Comparing version 0.0.7 to 0.0.9

dist/components/MediaObject.d.ts

@@ -6,9 +6,11 @@ /// <reference types="react" />
     description: string;
+    animation_url?: string;
+    image?: string;
 };
 declare type MediaObjectProps = {
-    uri: string;
+    contentURI?: string;
     metadata: MetadataIsh;
     isFullPage?: boolean;
 };
-export declare const MediaObject: ({ uri, metadata, isFullPage, }: MediaObjectProps) => JSX.Element;
+export declare const MediaObject: ({ contentURI, metadata, isFullPage, }: MediaObjectProps) => JSX.Element;
 export {};

dist/components/MediaObject.js

@@ -8,10 +8,32 @@ "use strict";
 const useMediaContext_1 = require("../context/useMediaContext");
-const MediaObject = ({ uri, metadata, isFullPage = false, }) => {
-    const { content } = nft_hooks_1.useNFTContent(uri, metadata.mimeType);
-    const { getStyles, mediaRenderers } = useMediaContext_1.useMediaContext();
+const MediaObject = ({ contentURI, metadata, isFullPage = false, }) => {
     const [mediaError, setMediaErrorMessage] = react_1.useState();
     const [mediaLoaded, setMediaLoaded] = react_1.useState(false);
+    const [firstLoadFailed, setFirstLoadFailed] = react_1.useState(false);
     const setMediaError = react_1.useCallback((error) => {
+        if (!firstLoadFailed) {
+            setFirstLoadFailed(true);
+            return;
+        }
         setMediaErrorMessage(error.description || "Error loading content");
     }, []);
+    const getURI = () => {
+        if (contentURI) {
+            if (firstLoadFailed) {
+                return contentURI;
+            }
+            // Replace main fleek instance for zora instance only with Zora NFTs
+            return contentURI.replace("ipfs.fleek.co", "zora.fleek.co");
+        }
+        if (metadata.animation_url && !firstLoadFailed) {
+            return metadata.animation_url;
+        }
+        if (metadata.image) {
+            return metadata.image;
+        }
+        return undefined;
+    };
+    const uri = getURI();
+    const { content } = nft_hooks_1.useNFTContent(uri, metadata.mimeType);
+    const { getStyles, mediaRenderers } = useMediaContext_1.useMediaContext();
     const getMediaObjectTag = () => {
@@ -18,0 +40,0 @@ const renderMediaConfig = (mediaRenderer) => {

dist/constants/strings.d.ts

@@ -58,2 +58,10 @@ export declare const Strings: {
     /**
+     * Created by text in preview card
+     */
+    CARD_CREATED_BY: string;
+    /**
+     * Owned by text in preview card
+     */
+    CARD_OWNED_BY: string;
+    /**
      * Ends in used in pricing components
@@ -60,0 +68,0 @@ * @default Ends in

dist/constants/strings.js

@@ -61,2 +61,10 @@ "use strict";
     /**
+     * Created by text in preview card
+     */
+    CARD_CREATED_BY: "Created by",
+    /**
+     * Owned by text in preview card
+     */
+    CARD_OWNED_BY: "Owned by",
+    /**
      * Ends in used in pricing components
@@ -63,0 +71,0 @@ * @default Ends in

dist/constants/style.d.ts

@@ -64,2 +64,3 @@ import { ThemeOptionsType } from "./theme";
         mediaAudioWrapper: (_: ThemeOptionsType) => string;
+        mediaAudioWaveform: (_: ThemeOptionsType) => string;
         mediaObjectMessage: (_: ThemeOptionsType) => string;
@@ -66,0 +67,0 @@ mediaContentText: (theme: ThemeOptionsType) => (string | {

dist/constants/style.js

@@ -247,7 +247,12 @@ "use strict";
         mediaAudioWrapper: (_) => css_1.css `
-      height: 30vh;
       display: flex;
       justify-content: center;
       align-items: center;
+      flex-direction: column;
+      width: 100%;
     `,
+        mediaAudioWaveform: (_) => css_1.css `
+      width: 100%;
+      cursor: pointer;
+    `,
         mediaObjectMessage: (_) => css_1.css `
@@ -267,2 +272,3 @@ align-self: center;
       padding: 30px;
+      margin-top: 50px;
       background: #eee;
@@ -269,0 +275,0 @@ border: 0;

dist/content-components/Audio.js

@@ -7,2 +7,61 @@ "use strict";
 const useMediaContext_1 = require("../context/useMediaContext");
+const FakeWaveformCanvas = ({ audioRef, setPlaying, }) => {
+    const canvasRef = react_1.useRef(null);
+    const [width, setWidth] = react_1.useState();
+    const updateWidth = react_1.useCallback(() => {
+        var _a, _b, _c;
+        const newWidth = (_c = (_b = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) === null || _c === void 0 ? void 0 : _c.width;
+        if (newWidth && newWidth !== width) {
+            setWidth(newWidth);
+        }
+    }, [canvasRef.current]);
+    react_1.useEffect(() => {
+        updateWidth();
+        window.addEventListener("resize", updateWidth);
+        return () => {
+            window.removeEventListener("resize", updateWidth);
+        };
+    }, [updateWidth]);
+    react_1.useEffect(() => {
+        updateCanvasLines();
+        const updateInterval = setInterval(updateCanvasLines, 1000);
+        return () => clearInterval(updateInterval);
+    }, [width]);
+    const seekAudio = react_1.useCallback((evt) => {
+        if (audioRef.current && canvasRef.current && width) {
+            const position = (evt.clientX - canvasRef.current.getBoundingClientRect().left) /
+                width;
+            audioRef.current.currentTime = position * audioRef.current.duration;
+            if (!audioRef.current.isPlaying) {
+                audioRef.current.play();
+            }
+            setPlaying(true);
+            updateCanvasLines();
+        }
+    }, [audioRef.current, width]);
+    const height = 200;
+    const updateCanvasLines = react_1.useCallback(() => {
+        if (canvasRef.current && width && audioRef.current) {
+            const context = canvasRef.current.getContext("2d");
+            if (!context) {
+                return;
+            }
+            context.clearRect(0, 0, width, height);
+            for (let i = 0; i < width; i += 5) {
+                const sinRnd = Math.sin(i) * 10000;
+                const lineHeight = Math.floor(Math.min(Math.sin((i / width) * 0.2) +
+                    2 * (sinRnd - Math.floor(sinRnd)) * 40, height));
+                if (audioRef.current.currentTime / audioRef.current.duration >
+                    i / width) {
+                    context.fillStyle = "#333";
+                }
+                else {
+                    context.fillStyle = "#999";
+                }
+                context.fillRect(i, (height - lineHeight) / 2, 2, lineHeight);
+            }
+        }
+    }, [canvasRef.current, audioRef.current, width]);
+    return (jsx_runtime_1.jsx("canvas", { ref: canvasRef, height: height, width: width, onClick: seekAudio }, void 0));
+};
 const Audio = ({ objectProps: { onLoad, ...mediaObject }, mediaLoaded, }) => {
@@ -12,2 +71,3 @@ const { getStyles } = useMediaContext_1.useMediaContext();
     const [playing, setPlaying] = react_1.useState(false);
+    const wrapper = react_1.useRef();
     const togglePlay = react_1.useCallback((evt) => {
@@ -21,5 +81,6 @@ evt.preventDefault();
     }, [audioRef, playing]);
-    return (jsx_runtime_1.jsxs("div", Object.assign({}, getStyles("mediaAudioWrapper"), { children: [mediaLoaded && (jsx_runtime_1.jsx("button", Object.assign({ onClick: togglePlay }, getStyles("mediaAudioButton", { playing }), { children: playing ? "Pause" : "Play" }), void 0)),
+    return (jsx_runtime_1.jsxs("div", Object.assign({ ref: wrapper }, getStyles("mediaAudioWrapper"), { children: [mediaLoaded && (jsx_runtime_1.jsxs(react_1.Fragment, { children: [jsx_runtime_1.jsx("button", Object.assign({ onClick: togglePlay }, getStyles("mediaAudioButton", { playing }), { children: playing ? "Pause" : "Play" }), void 0),
+                    jsx_runtime_1.jsx("div", Object.assign({}, getStyles("mediaAudioWaveform"), { children: jsx_runtime_1.jsx(FakeWaveformCanvas, { audioRef: audioRef, setPlaying: setPlaying }, void 0) }), void 0)] }, void 0)),
             jsx_runtime_1.jsx("audio", Object.assign({ loop: true, ref: audioRef, style: { display: "none" }, preload: "auto", onLoadedData: onLoad }, mediaObject), void 0)] }), void 0));
 };
 exports.Audio = Audio;

dist/content-components/index.js

@@ -27,9 +27,12 @@ "use strict";
         renderer: Image_1.Image,
+        hasLoader: true,
     },
     "uri:video": {
         renderer: Video_1.Video,
+        hasLoader: true,
     },
     "uri:audio": {
         renderer: Audio_1.Audio,
+        hasLoader: true,
     },
 };

dist/context/NFTDataProvider.js

@@ -21,3 +21,3 @@ "use strict";
     const { nft: nftInitial, metadata: metadataInitial } = initialData || {};
-    const nft = nft_hooks_1.useNFT(id, { loadCurrencyInfo: true, initialData: nftInitial });
+    const nft = nft_hooks_1.useZNFT(id, { loadCurrencyInfo: true, initialData: nftInitial });
     const metadata = nft_hooks_1.useNFTMetadata((_a = nft.data) === null || _a === void 0 ? void 0 : _a.nft.metadataURI, metadataInitial);
@@ -24,0 +24,0 @@ return (jsx_runtime_1.jsx(exports.NFTDataContext.Provider, Object.assign({ value: { nft, metadata } }, { children: children }), void 0));

dist/context/useMediaContext.d.ts

@@ -693,2 +693,27 @@ import { Strings } from "../constants/strings";
             }) => string;
+            mediaAudioWaveform: (_: {
+                previewCard: {
+                    width: string;
+                    height: string;
+                    background: string;
+                };
+                textBlockPadding: string;
+                borderStyle: string;
+                lineSpacing: number;
+                linkColor: string;
+                bodyFont: string;
+                titleFont: string;
+                headerFont: string;
+                mediaContentFont: {
+                    fontFamily: string;
+                };
+                buttonColor: {
+                    primaryBackground: string;
+                    primaryText: string;
+                    background: string;
+                    text: string;
+                };
+                defaultBorderRadius: number;
+                fontSizeFull: number;
+            }) => string;
             mediaObjectMessage: (_: {
@@ -786,2 +811,4 @@ previewCard: {
         SOLD_FOR: string;
+        CARD_CREATED_BY: string;
+        CARD_OWNED_BY: string;
         ENDS_IN: string;
@@ -788,0 +815,0 @@ CREATOR: string;

dist/nft-full/AuctionInfo.js

@@ -32,6 +32,10 @@ "use strict";
 const AuctionInfo = () => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const { nft } = react_1.useContext(NFTDataProvider_1.NFTDataContext);
     const { getStyles, getString } = useMediaContext_1.useMediaContext();
     const AuctionInfoWrapper = ({ children, ...containerArgs }) => (jsx_runtime_1.jsx(InfoContainer_1.InfoContainer, Object.assign({}, containerArgs, { children: jsx_runtime_1.jsx("div", Object.assign({}, getStyles("fullInfoAuctionWrapper"), { children: children }), void 0) }), void 0));
+    if (!nft.data) {
+        return jsx_runtime_1.jsx(react_1.Fragment, {}, void 0);
+    }
+    const { data } = nft;
     const getPricingString = (pricing) => {
@@ -41,20 +45,24 @@ var _a;
     };
-    if (!((_a = nft.data) === null || _a === void 0 ? void 0 : _a.auction.current.reservePrice)) {
+    if (data.pricing.status === nft_hooks_1.AuctionStateInfo.PERPETUAL_BID) {
+    }
+    if (data.pricing.status === nft_hooks_1.AuctionStateInfo.NO_PRICING) {
         return (jsx_runtime_1.jsx(AuctionInfoWrapper, Object.assign({ titleString: "OPEN_OFFERS" }, { children: "Be the first one to bid on this piece!" }), void 0));
     }
-    const auctionInfo = nft.data.auction;
-    if (!auctionInfo.current.likelyHasEnded &&
-        auctionInfo.current.endingAt &&
-        auctionInfo.highestBid) {
-        return (jsx_runtime_1.jsxs(AuctionInfoWrapper, Object.assign({ titleString: "AUCTION_ENDS" }, { children: [jsx_runtime_1.jsx(CountdownDisplay_1.CountdownDisplay, { to: auctionInfo.current.endingAt }, void 0),
+    const reserve = data.pricing.reserve;
+    if (reserve !== undefined &&
+        !reserve.current.likelyHasEnded &&
+        reserve.expectedEndTimestamp &&
+        reserve.current.highestBid !== undefined) {
+        return (jsx_runtime_1.jsxs(AuctionInfoWrapper, Object.assign({ titleString: "AUCTION_ENDS" }, { children: [jsx_runtime_1.jsx(CountdownDisplay_1.CountdownDisplay, { to: reserve.expectedEndTimestamp }, void 0),
                 jsx_runtime_1.jsx("div", { style: { height: "20px" } }, void 0),
                 jsx_runtime_1.jsx("div", Object.assign({}, getStyles("fullLabel"), { children: getString("HIGHEST_BID") }), void 0),
-                getPricingString((_b = auctionInfo.highestBid) === null || _b === void 0 ? void 0 : _b.pricing),
+                getPricingString((_a = reserve.current.highestBid) === null || _a === void 0 ? void 0 : _a.pricing),
                 jsx_runtime_1.jsx("div", { style: { height: "20px" } }, void 0),
                 jsx_runtime_1.jsx("div", Object.assign({}, getStyles("fullLabel"), { children: getString("BIDDER") }), void 0),
-                jsx_runtime_1.jsx(AddressView_1.AddressView, { address: (_c = auctionInfo.highestBid) === null || _c === void 0 ? void 0 : _c.placedBy }, void 0)] }), void 0));
+                jsx_runtime_1.jsx(AddressView_1.AddressView, { address: (_b = reserve.current.highestBid) === null || _b === void 0 ? void 0 : _b.placedBy }, void 0)] }), void 0));
     }
-    if (!nft.data.auction.highestBid &&
-        ((_d = nft.data.pricing.reserve) === null || _d === void 0 ? void 0 : _d.previousBids.length)) {
-        const highestPreviousBid = nft.data.pricing.reserve.previousBids[0];
+    if (reserve !== undefined &&
+        !(reserve === null || reserve === void 0 ? void 0 : reserve.current.highestBid) &&
+        reserve.previousBids.length) {
+        const highestPreviousBid = reserve.previousBids[0];
         return (jsx_runtime_1.jsxs(AuctionInfoWrapper, Object.assign({ titleString: "AUCTION_SOLD_FOR" }, { children: [getPricingString(highestPreviousBid.pricing), jsx_runtime_1.jsx("div", Object.assign({}, getStyles("fullInfoSpacer", { width: 15 })), void 0),
@@ -64,8 +72,7 @@ jsx_runtime_1.jsx("div", Object.assign({}, getStyles("fullLabel"), { children: getString("WINNER") }), void 0),
     }
-    return (jsx_runtime_1.jsx(AuctionInfoWrapper, Object.assign({ titleString: nft.data.auction.current.auctionType === nft_hooks_1.AuctionType.PERPETUAL
+    return (jsx_runtime_1.jsx(AuctionInfoWrapper, Object.assign({ titleString: nft.data.pricing.auctionType === nft_hooks_1.AuctionType.PERPETUAL
             ? "LIST_PRICE"
-            : "RESERVE_PRICE" }, { children: jsx_runtime_1.jsx("div", Object.assign({}, getStyles("pricingAmount"), { children: nft.data.auction.current.reservePrice
-                ? getPricingString(nft.data.auction.current.reservePrice)
-                : " " }), void 0) }), void 0));
+            : "RESERVE_PRICE" }, { children: jsx_runtime_1.jsxs("div", Object.assign({}, getStyles("pricingAmount"), { children: [data.pricing.auctionType === nft_hooks_1.AuctionType.PERPETUAL && data.pricing.perpetual.highestBid && (getPricingString((_c = data.pricing.perpetual.highestBid) === null || _c === void 0 ? void 0 : _c.pricing)),
+                data.pricing.auctionType === nft_hooks_1.AuctionType.RESERVE && ((_d = data.pricing.reserve) === null || _d === void 0 ? void 0 : _d.current.highestBid) && (getPricingString((_e = data.pricing.reserve.current.highestBid) === null || _e === void 0 ? void 0 : _e.pricing)), ' '] }), void 0) }), void 0));
 };
 exports.AuctionInfo = AuctionInfo;

dist/nft-full/BidHistory.js

@@ -49,8 +49,8 @@ "use strict";
         }
-        if (data.nft.createdAtTimestamp) {
+        if (data.zoraNFT.createdAtTimestamp) {
             eventsList.push({
                 activityDescription: getString("BID_HISTORY_MINTED"),
                 pricing: null,
-                actor: data.nft.creator.id,
-                createdAt: data.nft.createdAtTimestamp,
+                actor: data.nft.creator || '',
+                createdAt: data.zoraNFT.createdAtTimestamp,
             });
@@ -57,0 +57,0 @@ }

dist/nft-full/CreatorEquity.js

@@ -31,5 +31,5 @@ "use strict";
     const { getStyles } = useMediaContext_1.useMediaContext();
-    const getContent = (nft) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [Math.floor(nft.creatorBidSharePercentage), "%"] }, void 0));
-    return (jsx_runtime_1.jsx(InfoContainer_1.InfoContainer, Object.assign({ titleString: "CREATOR_EQUITY" }, { children: jsx_runtime_1.jsx("div", Object.assign({}, getStyles("fullInfoCreatorEquityContainer"), { children: data && getContent(data.nft) }), void 0) }), void 0));
+    const getContent = (zoraNFT) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [Math.floor(zoraNFT.creatorBidSharePercentage), "%"] }, void 0));
+    return (jsx_runtime_1.jsx(InfoContainer_1.InfoContainer, Object.assign({ titleString: "CREATOR_EQUITY" }, { children: jsx_runtime_1.jsx("div", Object.assign({}, getStyles("fullInfoCreatorEquityContainer"), { children: data && getContent(data.zoraNFT) }), void 0) }), void 0));
 };
 exports.CreatorEquity = CreatorEquity;

dist/nft-full/MediaFull.js

@@ -13,4 +13,5 @@ "use strict";
     const getContent = () => {
+        var _a;
         if (metadata && data) {
-            return (jsx_runtime_1.jsx(MediaObject_1.MediaObject, { isFullPage: true, uri: data.nft.contentURI, metadata: metadata }, void 0));
+            return (jsx_runtime_1.jsx(MediaObject_1.MediaObject, { isFullPage: true, contentURI: (_a = data.zoraNFT) === null || _a === void 0 ? void 0 : _a.contentURI, metadata: metadata }, void 0));
         }
@@ -17,0 +18,0 @@ if (error) {

dist/nft-full/MediaInfo.js

@@ -33,7 +33,7 @@ "use strict";
             jsx_runtime_1.jsx("div", Object.assign({}, getStyles("fullDescription"), { children: description }), void 0),
-            jsx_runtime_1.jsxs("div", Object.assign({}, getStyles("fullCreatorOwnerSection"), { children: [jsx_runtime_1.jsx("div", Object.assign({}, getStyles("fullLabel"), { children: getString("CREATOR") }), void 0),
-                    jsx_runtime_1.jsx("div", Object.assign({}, getStyles("fullOwnerAddress"), { children: data ? jsx_runtime_1.jsx(AddressView_1.AddressView, { address: data.nft.creator.id }, void 0) : " " }), void 0),
+            jsx_runtime_1.jsxs("div", Object.assign({}, getStyles("fullCreatorOwnerSection"), { children: [(data === null || data === void 0 ? void 0 : data.nft.creator) && (jsx_runtime_1.jsxs(react_1.Fragment, { children: [jsx_runtime_1.jsx("div", Object.assign({}, getStyles("fullLabel"), { children: getString("CREATOR") }), void 0),
+                            jsx_runtime_1.jsx("div", Object.assign({}, getStyles("fullOwnerAddress"), { children: data ? jsx_runtime_1.jsx(AddressView_1.AddressView, { address: data.nft.creator }, void 0) : " " }), void 0)] }, void 0)),
                     jsx_runtime_1.jsx("div", Object.assign({}, getStyles("fullLabel"), { children: getString("OWNER") }), void 0),
-                    jsx_runtime_1.jsx("div", Object.assign({}, getStyles("fullOwnerAddress"), { children: data ? jsx_runtime_1.jsx(AddressView_1.AddressView, { address: data.nft.owner.id }, void 0) : " " }), void 0)] }), void 0)] }), void 0));
+                    jsx_runtime_1.jsx("div", Object.assign({}, getStyles("fullOwnerAddress"), { children: data ? jsx_runtime_1.jsx(AddressView_1.AddressView, { address: data.nft.owner }, void 0) : " " }), void 0)] }), void 0)] }), void 0));
 };
 exports.MediaInfo = MediaInfo;

dist/nft-full/PlaceOfferButton.js

@@ -19,4 +19,4 @@ "use strict";
                 media_urls_1.ZORA_SITE_URL_BASE,
-                (_a = nft.data) === null || _a === void 0 ? void 0 : _a.nft.creator.id,
-                nft.data.nft.id,
+                (_a = nft.data) === null || _a === void 0 ? void 0 : _a.nft.creator,
+                nft.data.nft.tokenId,
                 "bid",
@@ -23,0 +23,0 @@ ].join("/") }, { children: getString("PLACE_BID") }), void 0) }), void 0));

dist/nft-full/ProofAuthenticity.js

@@ -34,7 +34,7 @@ "use strict";
     const linkStyles = getStyles("fullProofLink");
-    const getContent = (nft) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [jsx_runtime_1.jsx(ProofLink, Object.assign({ styles: linkStyles, href: `${media_urls_1.VIEW_ETHERSCAN_URL_BASE_BY_NETWORK[networkId]}${nft.id}` }, { children: getString("ETHERSCAN_TXN") }), void 0),
-            jsx_runtime_1.jsx(ProofLink, Object.assign({ styles: linkStyles, href: nft.contentURI }, { children: getString("VIEW_IPFS") }), void 0),
-            jsx_runtime_1.jsx(ProofLink, Object.assign({ styles: linkStyles, href: `${media_urls_1.MEDIA_URL_BASE_BY_NETWORK[networkId]}${nft.creator.id}/${nft.id}` }, { children: getString("VIEW_ZORA") }), void 0)] }, void 0));
+    const getContent = (nft) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [jsx_runtime_1.jsx(ProofLink, Object.assign({ styles: linkStyles, href: `${media_urls_1.VIEW_ETHERSCAN_URL_BASE_BY_NETWORK[networkId]}${nft.tokenId}` }, { children: getString("ETHERSCAN_TXN") }), void 0),
+            jsx_runtime_1.jsx(ProofLink, Object.assign({ styles: linkStyles, href: (data === null || data === void 0 ? void 0 : data.zoraNFT.contentURI) || (data === null || data === void 0 ? void 0 : data.nft.metadataURI) }, { children: getString("VIEW_IPFS") }), void 0),
+            jsx_runtime_1.jsx(ProofLink, Object.assign({ styles: linkStyles, href: `${media_urls_1.MEDIA_URL_BASE_BY_NETWORK[networkId]}${nft.creator}/${nft.tokenId}` }, { children: getString("VIEW_ZORA") }), void 0)] }, void 0));
     return (jsx_runtime_1.jsx(InfoContainer_1.InfoContainer, Object.assign({ titleString: "PROOF_AUTHENTICITY", bottomPadding: false }, { children: jsx_runtime_1.jsx("div", Object.assign({}, getStyles("fullInfoProofAuthenticityContainer"), { children: data && getContent(data.nft) }), void 0) }), void 0));
 };
 exports.ProofAuthenticity = ProofAuthenticity;

dist/nft-preview/MediaThumbnail.js

@@ -12,7 +12,7 @@ "use strict";
     const { nft: { data }, metadata: { metadata }, } = react_1.useContext(NFTDataProvider_1.NFTDataContext);
-    const { getStyles } = useMediaContext_1.useMediaContext();
+    const { getStyles, getString } = useMediaContext_1.useMediaContext();
     const getContent = () => {
         if (metadata && data) {
             return {
-                media: jsx_runtime_1.jsx(MediaObject_1.MediaObject, { uri: data.nft.contentURI, metadata: metadata }, void 0),
+                media: jsx_runtime_1.jsx(MediaObject_1.MediaObject, { contentURI: data.zoraNFT.contentURI, metadata: metadata }, void 0),
                 title: metadata.name,
@@ -27,6 +27,8 @@ };
     const { media, title } = getContent();
+    const hasCreator = data === null || data === void 0 ? void 0 : data.nft.creator;
+    const address = hasCreator ? data === null || data === void 0 ? void 0 : data.nft.creator : data === null || data === void 0 ? void 0 : data.nft.owner;
     return (jsx_runtime_1.jsxs(react_1.Fragment, { children: [jsx_runtime_1.jsx("div", Object.assign({}, getStyles("cardMediaWrapper"), { children: media }), void 0),
             jsx_runtime_1.jsxs("div", Object.assign({}, getStyles("cardItemInfo"), { children: [jsx_runtime_1.jsx("div", Object.assign({}, getStyles("cardTitle"), { children: title }), void 0),
-                    jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("span", Object.assign({}, getStyles("textSubdued"), { children: "Created by" }), void 0), " ", jsx_runtime_1.jsx("span", { children: data && jsx_runtime_1.jsx(AddressView_1.AddressView, { address: data.nft.creator.id }, void 0) }, void 0)] }, void 0)] }), void 0)] }, void 0));
+                    jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("span", Object.assign({}, getStyles("textSubdued"), { children: hasCreator ? getString("CARD_CREATED_BY") : getString("CARD_OWNED_BY") }), void 0), " ", jsx_runtime_1.jsx("span", { children: address && jsx_runtime_1.jsx(AddressView_1.AddressView, { address: address }, void 0) }, void 0)] }, void 0)] }), void 0)] }, void 0));
 };
 exports.MediaThumbnail = MediaThumbnail;

dist/nft-preview/MediaThumbnailWrapper.js

@@ -12,5 +12,5 @@ "use strict";
     const { nft } = react_1.useContext(NFTDataProvider_1.NFTDataContext);
-    const auctionStatus = (_a = nft.data) === null || _a === void 0 ? void 0 : _a.auction.status;
+    const auctionStatus = (_a = nft.data) === null || _a === void 0 ? void 0 : _a.pricing.status;
     return (jsx_runtime_1.jsx("div", Object.assign({}, getStyles("cardOuter", { hasClickEvent: !!onClick, auctionStatus }), { onClick: onClick }, { children: children }), void 0));
 };
 exports.MediaThumbnailWrapper = MediaThumbnailWrapper;

dist/nft-preview/PricingComponent.js

@@ -10,15 +10,21 @@ "use strict";
 const nft_hooks_1 = require("@zoralabs/nft-hooks");
+function isInFuture(timestamp) {
+    const timestampParsed = parseInt(timestamp);
+    return timestampParsed > Math.floor(new Date().getTime() / 1000);
+}
 const PricingComponent = () => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const { nft: { data }, } = react_1.useContext(NFTDataProvider_1.NFTDataContext);
     const { getStyles, getString } = useMediaContext_1.useMediaContext();
-    if (data && data.auction.current.auctionType === nft_hooks_1.AuctionType.PERPETUAL) {
+    const pricing = data === null || data === void 0 ? void 0 : data.pricing;
+    if (pricing && pricing.auctionType === nft_hooks_1.AuctionType.PERPETUAL) {
         let listPrice = null;
-        if (data.auction.current.reservePrice) {
+        if ((_a = pricing.perpetual.ask) === null || _a === void 0 ? void 0 : _a.pricing) {
+            const perpetualPricing = (_b = pricing.perpetual.ask) === null || _b === void 0 ? void 0 : _b.pricing;
             listPrice = (jsx_runtime_1.jsxs(react_1.Fragment, { children: [jsx_runtime_1.jsx("span", Object.assign({}, getStyles("textSubdued"), { children: getString("LIST_PRICE") }), void 0),
-                    jsx_runtime_1.jsxs("span", { children: [data.auction.current.reservePrice.prettyAmount, " ", data.auction.current.reservePrice.currency.symbol] }, void 0)] }, void 0));
+                    jsx_runtime_1.jsxs("span", { children: [perpetualPricing.prettyAmount, " ", perpetualPricing.currency.symbol] }, void 0)] }, void 0));
         }
-        const { highestBid } = data.auction;
-        if (!highestBid && ((_a = data.pricing.reserve) === null || _a === void 0 ? void 0 : _a.previousBids.length)) {
-            const highestPreviousBid = data.pricing.reserve.previousBids[0];
+        const highestBid = pricing.perpetual.highestBid;
+        if (!highestBid && ((_c = pricing.reserve) === null || _c === void 0 ? void 0 : _c.previousBids.length)) {
+            const highestPreviousBid = pricing.reserve.previousBids[0];
             return (jsx_runtime_1.jsxs("div", Object.assign({}, getStyles("cardAuctionPricing", { type: "reserve-pending" }), { children: [jsx_runtime_1.jsx("span", Object.assign({}, getStyles("textSubdued"), { children: getString("SOLD_FOR") }), void 0),
@@ -30,15 +36,15 @@ jsx_runtime_1.jsxs("span", Object.assign({}, getStyles("pricingAmount"), { children: [highestPreviousBid === null || highestPreviousBid === void 0 ? void 0 : highestPreviousBid.pricing.prettyAmount, " ", highestPreviousBid === null || highestPreviousBid === void 0 ? void 0 : highestPreviousBid.pricing.currency.symbol] }), void 0), listPrice] }), void 0));
     }
-    if (data && data.auction.current.auctionType === nft_hooks_1.AuctionType.RESERVE) {
-        if (data.auction.current.reserveMet &&
-            !data.auction.current.likelyHasEnded) {
+    if (pricing && pricing.auctionType === nft_hooks_1.AuctionType.RESERVE) {
+        if (((_d = pricing.reserve) === null || _d === void 0 ? void 0 : _d.current.reserveMet) &&
+            !((_e = pricing.reserve) === null || _e === void 0 ? void 0 : _e.current.likelyHasEnded)) {
+            const highestBid = (_f = pricing.reserve) === null || _f === void 0 ? void 0 : _f.current.highestBid;
             return (jsx_runtime_1.jsxs("div", Object.assign({}, getStyles("cardAuctionPricing", { type: "reserve-active" }), { children: [jsx_runtime_1.jsx("span", Object.assign({}, getStyles("textSubdued"), { children: getString("TOP_BID") }), void 0),
-                    jsx_runtime_1.jsxs("span", Object.assign({}, getStyles("pricingAmount"), { children: [(_b = data.auction.highestBid) === null || _b === void 0 ? void 0 : _b.pricing.prettyAmount, " ", (_c = data.auction.highestBid) === null || _c === void 0 ? void 0 : _c.pricing.currency.symbol] }), void 0),
-                    data.auction.current.endingAt && (jsx_runtime_1.jsxs(react_1.Fragment, { children: [jsx_runtime_1.jsx("span", Object.assign({}, getStyles("textSubdued"), { children: getString("ENDS_IN") }), void 0),
-                            jsx_runtime_1.jsx("span", Object.assign({}, getStyles("pricingAmount"), { children: jsx_runtime_1.jsx(CountdownDisplay_1.CountdownDisplay, { to: data.auction.current.endingAt }, void 0) }), void 0)] }, void 0))] }), void 0));
+                    jsx_runtime_1.jsxs("span", Object.assign({}, getStyles("pricingAmount"), { children: [highestBid === null || highestBid === void 0 ? void 0 : highestBid.pricing.prettyAmount, " ", highestBid === null || highestBid === void 0 ? void 0 : highestBid.pricing.currency.symbol] }), void 0),
+                    ((_g = pricing.reserve) === null || _g === void 0 ? void 0 : _g.expectedEndTimestamp) &&
+                        isInFuture(pricing.reserve.expectedEndTimestamp) && (jsx_runtime_1.jsxs(react_1.Fragment, { children: [jsx_runtime_1.jsx("span", Object.assign({}, getStyles("textSubdued"), { children: getString("ENDS_IN") }), void 0),
+                            jsx_runtime_1.jsx("span", Object.assign({}, getStyles("pricingAmount"), { children: jsx_runtime_1.jsx(CountdownDisplay_1.CountdownDisplay, { to: pricing.reserve.expectedEndTimestamp }, void 0) }), void 0)] }, void 0))] }), void 0));
         }
-        if (data.auction.current.reservePrice) {
+        if ((_h = pricing.reserve) === null || _h === void 0 ? void 0 : _h.reservePrice) {
             return (jsx_runtime_1.jsxs("div", Object.assign({}, getStyles("cardAuctionPricing", { type: "reserve-pending" }), { children: [jsx_runtime_1.jsx("span", Object.assign({}, getStyles("textSubdued"), { children: getString("RESERVE_PRICE") }), void 0),
-                    jsx_runtime_1.jsxs("span", { children: [data.auction.current.reservePrice.prettyAmount, " ", data.auction.current.reservePrice.currency.symbol] }, void 0),
-                    data.auction.current.endingAt && (jsx_runtime_1.jsxs(react_1.Fragment, { children: [jsx_runtime_1.jsx("span", Object.assign({}, getStyles("textSubdued"), { children: getString("ENDS_IN") }), void 0),
-                            jsx_runtime_1.jsx("span", Object.assign({}, getStyles("pricingAmount"), { children: jsx_runtime_1.jsx(CountdownDisplay_1.CountdownDisplay, { to: data.auction.current.endingAt }, void 0) }), void 0)] }, void 0))] }), void 0));
+                    jsx_runtime_1.jsxs("span", { children: [pricing.reserve.reservePrice.prettyAmount, " ", pricing.reserve.reservePrice.currency.symbol] }, void 0)] }), void 0));
         }
@@ -45,0 +51,0 @@ }

package.json

 {
   "name": "@zoralabs/nft-components",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "NFT Media Rendering Components",
@@ -18,3 +18,3 @@ "typings": "dist/index.d.ts",
     "@types/react": "^17.0.5",
-    "@zoralabs/nft-hooks": "^0.1.9",
+    "@zoralabs/nft-hooks": "^0.2.1",
     "merge-anything": "^4.0.1",
@@ -21,0 +21,0 @@ "react": "^17.0.2",

README.md

@@ -7,2 +7,4 @@ # @zoralabs/nft-components
 
+These libraires with the zora [auction house](https://zora.mirror.xyz/9mQ9AeJK84USTnQ9eBY4Sc7s1bi0N8RoZd3Oy4q82FM) ([code](https://github.com/ourzora/auction-house)) allows for DAOs and individuals to run their own decentralized auction house. Currently, only zNFTs are supported by this library but plans are to add in support for arbitary NFTs.
+
 ## NFT Components
@@ -9,0 +11,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

133595

increased by5.73%

Lines of code

3071

increased by5.42%

Number of lines in readme file

57

increased by3.64%

Dependency changes

• + Added@zoralabs/nft-hooks@0.2.3(transitive)

• - Removed@zoralabs/nft-hooks@0.1.9(transitive)

• Updated@zoralabs/nft-hooks@^0.2.1