@zoralabs/nft-components - npm Package Compare versions

Comparing version 0.0.12 to 0.0.13

dist/components/NFTPageWrapper.d.ts

 /// <reference types="react" />
-import { NFTDataProviderProps } from "../context/NFTDataProvider";
-export declare type NFTPageWrapperProps = NFTDataProviderProps;
-export declare const NFTPageWrapper: ({ id, initialData, children, }: NFTDataProviderProps) => JSX.Element;
+import { ZNFTDataProviderProps } from "../context/ZNFTDataProvider";
+export declare type NFTPageWrapperProps = ZNFTDataProviderProps & {
+    contract?: string;
+};
+export declare const NFTPageWrapper: ({ id, contract, initialData, children, }: NFTPageWrapperProps) => JSX.Element;

dist/components/NFTPageWrapper.js

@@ -5,6 +5,10 @@ "use strict";
 const jsx_runtime_1 = require("react/jsx-runtime");
+const ZNFTDataProvider_1 = require("../context/ZNFTDataProvider");
 const NFTDataProvider_1 = require("../context/NFTDataProvider");
-const NFTPageWrapper = ({ id, initialData, children, }) => {
-    return (jsx_runtime_1.jsx(NFTDataProvider_1.NFTDataProvider, Object.assign({ id: id, initialData: initialData }, { children: children }), void 0));
+const NFTPageWrapper = ({ id, contract, initialData, children, }) => {
+    if (contract) {
+        return (jsx_runtime_1.jsx(NFTDataProvider_1.NFTDataProvider, Object.assign({ id: id, contract: contract, initialData: initialData }, { children: children }), void 0));
+    }
+    return (jsx_runtime_1.jsx(ZNFTDataProvider_1.ZNFTDataProvider, Object.assign({ id: id, initialData: initialData }, { children: children }), void 0));
 };
 exports.NFTPageWrapper = NFTPageWrapper;

dist/constants/media-urls.js

@@ -10,5 +10,5 @@ "use strict";
 exports.VIEW_ETHERSCAN_URL_BASE_BY_NETWORK = {
-    [nft_hooks_1.Networks.MAINNET]: "https://etherscan.io/token/0xabEFBc9fD2F806065b4f3C237d4b59D9A97Bcac7?a=",
-    [nft_hooks_1.Networks.RINKEBY]: "https://rinkeby.etherscan.io/token/0x7C2668BD0D3c050703CEcC956C11Bd520c26f7d4?a=",
+    [nft_hooks_1.Networks.MAINNET]: "https://etherscan.io/token/",
+    [nft_hooks_1.Networks.RINKEBY]: "https://rinkeby.etherscan.io/token/",
 };
 exports.ZORA_SITE_URL_BASE = "https://zora.co";

dist/constants/strings.d.ts

@@ -145,2 +145,8 @@ export declare const Strings: {
     PRICING_LOADING: string;
+    /**
+     * No pricing placeholder, shown if no pricing information
+     * exists but content is loaded
+     * @default --
+     */
+    NO_PRICING_PLACEHOLDER: string;
 };

dist/constants/strings.js

@@ -148,2 +148,8 @@ "use strict";
     PRICING_LOADING: "...",
+    /**
+     * No pricing placeholder, shown if no pricing information
+     * exists but content is loaded
+     * @default --
+     */
+    NO_PRICING_PLACEHOLDER: '--',
 };

dist/content-components/Audio.js

@@ -88,3 +88,3 @@ "use strict";
         }
-    }, [audioRef.current]);
+    }, [audioRef.current, playing]);
     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("mediaPlayButton", { playing }), { children: playing ? "Pause" : "Play" }), void 0),
@@ -91,0 +91,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)),

dist/content-components/Video.js

@@ -48,6 +48,12 @@ "use strict";
     }, [video]);
+    const playLoop = react_1.useCallback(() => {
+        if (!video.current) {
+            return;
+        }
+        video.current.currentTime = 0;
+    }, [video.current]);
     return (jsx_runtime_1.jsxs(react_1.Fragment, { children: [video.current && (jsx_runtime_1.jsxs("div", Object.assign({}, getStyles("mediaVideoControls", { isFullPage }), { children: [jsx_runtime_1.jsx("button", Object.assign({}, getStyles("mediaFullscreenButton", { muted: isMuted }), { onClick: openFullscreen }, { children: isMuted ? "Unmute" : "Mute" }), void 0),
                     jsx_runtime_1.jsx("button", Object.assign({}, getStyles("mediaPlayButton", { playing: isPlaying }), { onClick: togglePlay }, { children: isPlaying ? "Play" : "Pause" }), void 0),
                     jsx_runtime_1.jsx("button", Object.assign({}, getStyles("mediaMuteButton", { muted: isMuted }), { onClick: toggleMute }, { children: isMuted ? "Unmute" : "Mute" }), void 0)] }), void 0)),
-            jsx_runtime_1.jsx("video", Object.assign({ preload: "metadata", autoPlay: true, loop: true, muted: isMuted }, props, { ref: video, onLoadedData: onLoad }), void 0)] }, void 0));
+            jsx_runtime_1.jsx("video", Object.assign({ preload: "metadata", autoPlay: true, loop: true, muted: isMuted, playsInline: true }, props, { ref: video, onEnded: playLoop, onLoadedData: onLoad }), void 0)] }, void 0));
 });

dist/context/NFTDataProvider.d.ts

@@ -5,2 +5,3 @@ import React from "react";
     id: string;
+    contract: string;
     children: React.ReactNode;
@@ -12,8 +13,2 @@ initialData?: {
 };
-declare type NFTDataContext = {
-    nft: useNFTType;
-    metadata: useNFTMetadataType;
-};
-export declare const NFTDataContext: React.Context<NFTDataContext>;
-export declare const NFTDataProvider: ({ id, children, initialData, }: NFTDataProviderProps) => JSX.Element;
-export {};
+export declare const NFTDataProvider: ({ id, children, contract, initialData, }: NFTDataProviderProps) => JSX.Element;

dist/context/NFTDataProvider.js

 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NFTDataProvider = exports.NFTDataContext = void 0;
+exports.NFTDataProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
 const nft_hooks_1 = require("@zoralabs/nft-hooks");
-const DEFAULT_OBJECT = {
-    loading: true,
-    error: undefined,
+const NFTDataContext_1 = require("./NFTDataContext");
+const NFTDataProvider = ({ id, children, contract, initialData, }) => {
+    var _a, _b, _c, _d, _e;
+    const { nft: nftInitial } = initialData || {};
+    const nft = nft_hooks_1.useNFT(contract, id, {
+        loadCurrencyInfo: true,
+        initialData: nftInitial,
+    });
+    const metadata = {
+        loading: false,
+        metadata: {
+            name: (_a = nft.data) === null || _a === void 0 ? void 0 : _a.openseaInfo.name,
+            description: (_b = nft.data) === null || _b === void 0 ? void 0 : _b.openseaInfo.description,
+            image: (_c = nft.data) === null || _c === void 0 ? void 0 : _c.openseaInfo.image_url,
+            image_thumbnail_url: (_d = nft.data) === null || _d === void 0 ? void 0 : _d.openseaInfo.image_thumbnail_url,
+            animation_url: (_e = nft.data) === null || _e === void 0 ? void 0 : _e.openseaInfo.animation_url,
+        },
+    };
+    return (jsx_runtime_1.jsx(NFTDataContext_1.NFTDataContext.Provider, Object.assign({ value: { nft, metadata } }, { children: children }), void 0));
 };
-exports.NFTDataContext = react_1.default.createContext({
-    nft: { ...DEFAULT_OBJECT, currencyLoaded: false },
-    metadata: { ...DEFAULT_OBJECT, metadata: undefined },
-});
-const NFTDataProvider = ({ id, children, initialData, }) => {
-    var _a;
-    const { nft: nftInitial, metadata: metadataInitial } = initialData || {};
-    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);
-    return (jsx_runtime_1.jsx(exports.NFTDataContext.Provider, Object.assign({ value: { nft, metadata } }, { children: children }), void 0));
-};
 exports.NFTDataProvider = NFTDataProvider;

dist/context/useMediaContext.d.ts

@@ -903,3 +903,4 @@ import { Strings } from "../constants/strings";
         PRICING_LOADING: string;
+        NO_PRICING_PLACEHOLDER: string;
     };
 };

dist/index.d.ts

@@ -7,5 +7,5 @@ import { Networks } from "@zoralabs/nft-hooks";
 import { MediaRendererProps } from "./content-components";
-import { NFTDataContext } from "./context/NFTDataProvider";
 import { NFTPageWrapper } from "./components/NFTPageWrapper";
 import { MediaObject } from "./components/MediaObject";
+import { NFTDataContext } from "./context/NFTDataContext";
 export { Networks, MediaConfiguration, AuctionHouseList, NFTPreview, PreviewComponents, NFTFullPage, FullComponents, NFTPageWrapper, NFTDataContext, MediaRendererProps, MediaObject, };

dist/index.js

@@ -16,4 +16,2 @@ "use strict";
 Object.defineProperty(exports, "MediaConfiguration", { enumerable: true, get: function () { return MediaConfiguration_1.MediaConfiguration; } });
-const NFTDataProvider_1 = require("./context/NFTDataProvider");
-Object.defineProperty(exports, "NFTDataContext", { enumerable: true, get: function () { return NFTDataProvider_1.NFTDataContext; } });
 const NFTPageWrapper_1 = require("./components/NFTPageWrapper");
@@ -23,1 +21,3 @@ Object.defineProperty(exports, "NFTPageWrapper", { enumerable: true, get: function () { return NFTPageWrapper_1.NFTPageWrapper; } });
 Object.defineProperty(exports, "MediaObject", { enumerable: true, get: function () { return MediaObject_1.MediaObject; } });
+const NFTDataContext_1 = require("./context/NFTDataContext");
+Object.defineProperty(exports, "NFTDataContext", { enumerable: true, get: function () { return NFTDataContext_1.NFTDataContext; } });

dist/nft-full/AuctionInfo.js

@@ -28,3 +28,3 @@ "use strict";
 const CountdownDisplay_1 = require("../components/CountdownDisplay");
-const NFTDataProvider_1 = require("../context/NFTDataProvider");
+const NFTDataContext_1 = require("../context/NFTDataContext");
 const useMediaContext_1 = require("../context/useMediaContext");
@@ -34,3 +34,3 @@ const InfoContainer_1 = require("./InfoContainer");
     var _a, _b, _c, _d, _e;
-    const { nft } = react_1.useContext(NFTDataProvider_1.NFTDataContext);
+    const { nft } = react_1.useContext(NFTDataContext_1.NFTDataContext);
     const { getStyles, getString } = useMediaContext_1.useMediaContext();
@@ -46,5 +46,7 @@ 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 (data.pricing.status === nft_hooks_1.AuctionStateInfo.PERPETUAL_BID) {
+    if (data.pricing.status === nft_hooks_1.AuctionStateInfo.NO_PRICING) {
+        return jsx_runtime_1.jsx(react_1.default.Fragment, {}, void 0);
     }
-    if (data.pricing.status === nft_hooks_1.AuctionStateInfo.NO_PRICING) {
+    if (data.pricing.status === nft_hooks_1.AuctionStateInfo.PERPETUAL_ASK ||
+        data.pricing.status === nft_hooks_1.AuctionStateInfo.PERPETUAL_BID) {
         return (jsx_runtime_1.jsx(AuctionInfoWrapper, Object.assign({ titleString: "OPEN_OFFERS" }, { children: "Be the first one to bid on this piece!" }), void 0));
@@ -75,5 +77,9 @@ }
             ? "LIST_PRICE"
-            : "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));
+            : "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

@@ -8,3 +8,3 @@ "use strict";
 const AddressView_1 = require("../components/AddressView");
-const NFTDataProvider_1 = require("../context/NFTDataProvider");
+const NFTDataContext_1 = require("../context/NFTDataContext");
 const useMediaContext_1 = require("../context/useMediaContext");
@@ -20,3 +20,3 @@ const InfoContainer_1 = require("./InfoContainer");
 const BidHistory = () => {
-    const { nft } = react_2.useContext(NFTDataProvider_1.NFTDataContext);
+    const { nft } = react_2.useContext(NFTDataContext_1.NFTDataContext);
     const { getString, getStyles } = useMediaContext_1.useMediaContext();
@@ -51,3 +51,3 @@ const getPricingString = (pricing) => (jsx_runtime_1.jsxs("span", Object.assign({}, getStyles("pricingAmount"), { children: [pricing.prettyAmount, " ", pricing.currency.symbol] }), void 0));
         }
-        if (data.zoraNFT.createdAtTimestamp) {
+        if ("zoraNFT" in data && data.zoraNFT.createdAtTimestamp) {
             eventsList.push({
@@ -60,2 +60,10 @@ activityDescription: getString("BID_HISTORY_MINTED"),
         }
+        if ("openseaInfo" in data) {
+            eventsList.push({
+                activityDescription: getString("BID_HISTORY_MINTED"),
+                pricing: null,
+                actor: data.openseaInfo.creator.address,
+                createdAt: null,
+            });
+        }
         return eventsList
@@ -66,3 +74,3 @@ .sort(({ createdAt: createdAtFirst }, { createdAt: createdAtSecond }) => parseInt(createdAtFirst.createdAt, 10) -
             jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsxs("span", Object.assign({}, getStyles("pricingAmount"), { children: [jsx_runtime_1.jsx(AddressView_1.AddressView, { address: bidItem.actor }, void 0), " "] }), void 0), bidItem.activityDescription, " ", bidItem.pricing] }, void 0),
-            jsx_runtime_1.jsx("div", Object.assign({}, getStyles("fullPageHistoryItemDatestamp"), { children: formatDate(bidItem.createdAt) }), void 0))));
+            bidItem.createdAt && (jsx_runtime_1.jsx("div", Object.assign({}, getStyles("fullPageHistoryItemDatestamp"), { children: formatDate(bidItem.createdAt) }), void 0)))));
     };
@@ -69,0 +77,0 @@ return (jsx_runtime_1.jsx(InfoContainer_1.InfoContainer, Object.assign({ titleString: "NFT_HISTORY" }, { children: getPastBids() }), void 0));

dist/nft-full/CreatorEquity.js

@@ -26,7 +26,10 @@ "use strict";
 const useMediaContext_1 = require("../context/useMediaContext");
-const NFTDataProvider_1 = require("../context/NFTDataProvider");
+const NFTDataContext_1 = require("../context/NFTDataContext");
 const InfoContainer_1 = require("./InfoContainer");
 const CreatorEquity = () => {
-    const { nft: { data }, } = react_1.useContext(NFTDataProvider_1.NFTDataContext);
+    const { nft: { data }, } = react_1.useContext(NFTDataContext_1.NFTDataContext);
     const { getStyles } = useMediaContext_1.useMediaContext();
+    if (!data || !('zoraNFT' in data)) {
+        return jsx_runtime_1.jsx(react_1.default.Fragment, {}, void 0);
+    }
     const getContent = (zoraNFT) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [Math.floor(zoraNFT.creatorBidSharePercentage), "%"] }, void 0));
@@ -33,0 +36,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));

dist/nft-full/MediaFull.js

@@ -6,3 +6,3 @@ "use strict";
 const react_1 = require("react");
-const NFTDataProvider_1 = require("../context/NFTDataProvider");
+const NFTDataContext_1 = require("../context/NFTDataContext");
 const MediaObject_1 = require("../components/MediaObject");
@@ -12,7 +12,7 @@ const useMediaContext_1 = require("../context/useMediaContext");
     const { getStyles } = useMediaContext_1.useMediaContext();
-    const { nft: { data }, metadata: { metadata, error }, } = react_1.useContext(NFTDataProvider_1.NFTDataContext);
+    const { nft: { data }, metadata: { metadata, error }, } = react_1.useContext(NFTDataContext_1.NFTDataContext);
     const getContent = () => {
         var _a;
         if (metadata && data) {
-            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));
+            return (jsx_runtime_1.jsx(MediaObject_1.MediaObject, { isFullPage: true, contentURI: 'zoraNFT' in data ? (_a = data.zoraNFT) === null || _a === void 0 ? void 0 : _a.contentURI : undefined, metadata: metadata }, void 0));
         }
@@ -19,0 +19,0 @@ if (error) {

dist/nft-full/MediaInfo.js

@@ -6,3 +6,3 @@ "use strict";
 const react_1 = require("react");
-const NFTDataProvider_1 = require("../context/NFTDataProvider");
+const NFTDataContext_1 = require("../context/NFTDataContext");
 const AddressView_1 = require("../components/AddressView");
@@ -12,3 +12,3 @@ const useMediaContext_1 = require("../context/useMediaContext");
     const { getStyles, getString } = useMediaContext_1.useMediaContext();
-    const { nft: { data }, metadata: { metadata, error }, } = react_1.useContext(NFTDataProvider_1.NFTDataContext);
+    const { nft: { data }, metadata: { metadata, error }, } = react_1.useContext(NFTDataContext_1.NFTDataContext);
     const getContent = () => {
@@ -15,0 +15,0 @@ if (metadata && data) {

dist/nft-full/PlaceOfferButton.js

@@ -9,6 +9,6 @@ "use strict";
 const Button_1 = require("../components/Button");
-const NFTDataProvider_1 = require("../context/NFTDataProvider");
+const NFTDataContext_1 = require("../context/NFTDataContext");
 const nft_hooks_1 = require("@zoralabs/nft-hooks");
 const PlaceOfferButton = ({ allowOffer }) => {
-    const { nft } = react_1.useContext(NFTDataProvider_1.NFTDataContext);
+    const { nft } = react_1.useContext(NFTDataContext_1.NFTDataContext);
     const { getString, getStyles } = useMediaContext_1.useMediaContext();
@@ -19,3 +19,3 @@ if (!nft.data) {
     // Disable offer functionality if not a zora NFT or if offers are disabled
-    if ((allowOffer === false || !nft.data.zoraNFT) &&
+    if ((allowOffer === false || !('zoraNFT' in nft.data)) &&
         nft.data.pricing.auctionType !== nft_hooks_1.AuctionType.RESERVE) {
@@ -22,0 +22,0 @@ return jsx_runtime_1.jsx(react_1.Fragment, {}, void 0);

dist/nft-full/ProofAuthenticity.js

@@ -25,3 +25,3 @@ "use strict";
 const react_1 = __importStar(require("react"));
-const NFTDataProvider_1 = require("../context/NFTDataProvider");
+const NFTDataContext_1 = require("../context/NFTDataContext");
 const media_urls_1 = require("../constants/media-urls");
@@ -32,10 +32,11 @@ const useMediaContext_1 = require("../context/useMediaContext");
 const ProofAuthenticity = () => {
-    const { nft: { data }, } = react_1.useContext(NFTDataProvider_1.NFTDataContext);
+    const { nft: { data }, } = react_1.useContext(NFTDataContext_1.NFTDataContext);
     const { getString, getStyles, networkId } = useMediaContext_1.useMediaContext();
     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.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));
+    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.contract.address}?a=${nft.tokenId}` }, { children: getString("ETHERSCAN_TXN") }), void 0),
+            jsx_runtime_1.jsx(ProofLink, Object.assign({ styles: linkStyles, href: (data && "zoraNFT" in data && (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),
+            data && "zoraNFT" in data && (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

@@ -9,5 +9,8 @@ "use strict";
 const useMediaContext_1 = require("../context/useMediaContext");
-const NFTDataProvider_1 = require("../context/NFTDataProvider");
+const NFTDataContext_1 = require("../context/NFTDataContext");
+function isZoraNFT(nftData) {
+    return "zoraNFT" in nftData;
+}
 const MediaThumbnail = () => {
-    const { nft: { data }, metadata: { metadata }, } = react_1.useContext(NFTDataProvider_1.NFTDataContext);
+    const { nft: { data }, metadata: { metadata }, } = react_1.useContext(NFTDataContext_1.NFTDataContext);
     const { getStyles, getString } = useMediaContext_1.useMediaContext();
@@ -17,3 +20,3 @@ const getContent = () => {
             return {
-                media: jsx_runtime_1.jsx(MediaObject_1.MediaObject, { contentURI: data.zoraNFT.contentURI, metadata: metadata }, void 0),
+                media: (jsx_runtime_1.jsx(MediaObject_1.MediaObject, { contentURI: isZoraNFT(data) ? data.zoraNFT.contentURI : undefined, metadata: metadata }, void 0)),
                 title: metadata.name,
@@ -32,4 +35,6 @@ };
             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: 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));
+                    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

@@ -6,3 +6,3 @@ "use strict";
 const react_1 = require("react");
-const NFTDataProvider_1 = require("../context/NFTDataProvider");
+const NFTDataContext_1 = require("../context/NFTDataContext");
 const useMediaContext_1 = require("../context/useMediaContext");
@@ -12,3 +12,3 @@ const MediaThumbnailWrapper = ({ children, onClick, }) => {
     const { getStyles } = useMediaContext_1.useMediaContext();
-    const { nft } = react_1.useContext(NFTDataProvider_1.NFTDataContext);
+    const { nft } = react_1.useContext(NFTDataContext_1.NFTDataContext);
     const auctionStatus = (_a = nft.data) === null || _a === void 0 ? void 0 : _a.pricing.status;
@@ -15,0 +15,0 @@ return (jsx_runtime_1.jsx("div", Object.assign({}, getStyles("cardOuter", { hasClickEvent: !!onClick, auctionStatus }), { onClick: onClick }, { children: children }), void 0));

dist/nft-preview/PricingComponent.js

@@ -7,3 +7,3 @@ "use strict";
 const useMediaContext_1 = require("../context/useMediaContext");
-const NFTDataProvider_1 = require("../context/NFTDataProvider");
+const NFTDataContext_1 = require("../context/NFTDataContext");
 const CountdownDisplay_1 = require("../components/CountdownDisplay");
@@ -17,5 +17,11 @@ const nft_hooks_1 = require("@zoralabs/nft-hooks");
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    const { nft: { data }, } = react_1.useContext(NFTDataProvider_1.NFTDataContext);
+    const { nft: { data }, } = react_1.useContext(NFTDataContext_1.NFTDataContext);
     const { getStyles, getString } = useMediaContext_1.useMediaContext();
     const pricing = data === null || data === void 0 ? void 0 : data.pricing;
+    if (pricing && pricing.status === nft_hooks_1.AuctionStateInfo.NO_PRICING) {
+        return (jsx_runtime_1.jsxs("div", Object.assign({}, getStyles("cardAuctionPricing", { type: "unknown" }), { children: [jsx_runtime_1.jsx("div", Object.assign({}, getStyles("textSubdued"), { children: getString("RESERVE_PRICE") }), void 0),
+                jsx_runtime_1.jsx("div", Object.assign({}, getStyles("pricingAmount"), { children: getString("NO_PRICING_PLACEHOLDER") }), void 0),
+                jsx_runtime_1.jsx("div", Object.assign({}, getStyles("textSubdued"), { children: getString("HIGHEST_BID") }), void 0),
+                jsx_runtime_1.jsx("div", Object.assign({}, getStyles("pricingAmount"), { children: getString("NO_PRICING_PLACEHOLDER") }), void 0)] }), void 0));
+    }
     if (pricing && pricing.auctionType === nft_hooks_1.AuctionType.PERPETUAL) {
@@ -35,3 +41,3 @@ let listPrice = null;
         return (jsx_runtime_1.jsxs("div", Object.assign({}, getStyles("cardAuctionPricing", { type: "perpetual" }), { children: [jsx_runtime_1.jsx("span", Object.assign({}, getStyles("textSubdued"), { children: getString("HIGHEST_BID") }), void 0),
-                jsx_runtime_1.jsxs("span", Object.assign({}, getStyles("pricingAmount"), { children: [!highestBid && "--", highestBid === null || highestBid === void 0 ? void 0 : highestBid.pricing.prettyAmount, " ", highestBid === null || highestBid === void 0 ? void 0 : highestBid.pricing.currency.symbol] }), void 0), listPrice] }), void 0));
+                jsx_runtime_1.jsxs("span", Object.assign({}, getStyles("pricingAmount"), { children: [!highestBid && getString("NO_PRICING_PLACEHOLDER"), highestBid === null || highestBid === void 0 ? void 0 : highestBid.pricing.prettyAmount, " ", highestBid === null || highestBid === void 0 ? void 0 : highestBid.pricing.currency.symbol] }), void 0), listPrice] }), void 0));
     }
@@ -38,0 +44,0 @@ if (pricing && pricing.auctionType === nft_hooks_1.AuctionType.RESERVE) {

package.json

 {
   "name": "@zoralabs/nft-components",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "NFT Media Rendering Components",
@@ -5,0 +5,0 @@ "typings": "dist/index.d.ts",

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

150304

increased by3.1%

Number of package files

93

increased by4.49%

Lines of code

3393

increased by2.76%

No dependency changes