@zoralabs/nft-components - npm Package Compare versions

Comparing version 0.1.13 to 0.1.15

dist/components/AddressView.d.ts

@@ -5,4 +5,5 @@ /// <reference types="react" />
     showChars?: number;
+    useEns?: boolean;
 };
-export declare const AddressView: ({ address, showChars }: AddressViewProps) => JSX.Element;
+export declare const AddressView: ({ address, showChars, useEns, }: AddressViewProps) => JSX.Element;
 export {};

dist/components/AddressView.js

@@ -6,16 +6,29 @@ "use strict";
 const nft_hooks_1 = require("@zoralabs/nft-hooks");
+const useMediaContext_1 = require("../context/useMediaContext");
 const PREFIX_ADDRESS = "0x";
-const AddressView = ({ address, showChars = 6 }) => {
-    var _a;
-    const username = nft_hooks_1.useZoraUsername(address);
+const AddressView = ({ address, showChars = 6, useEns = true, }) => {
+    var _a, _b;
+    const { getStyles } = useMediaContext_1.useMediaContext();
+    // @ts-ignore (address can be undefined but not typed correctly for now)
+    const ens = nft_hooks_1.useENSAddress(useEns ? address : undefined);
+    const username = nft_hooks_1.useZoraUsername(!useEns || ens.error ? address : undefined);
     const addressFirst = address.slice(0, showChars + PREFIX_ADDRESS.length);
     const addressLast = address.slice(address.length - showChars);
-    if ((_a = username.username) === null || _a === void 0 ? void 0 : _a.username) {
-        return jsx_runtime_1.jsx("span", { children: `@${username.username.username}` }, void 0);
+    if ((_a = ens.data) === null || _a === void 0 ? void 0 : _a.name) {
+        const zoraLink = ens.data.name.endsWith('.ens') ? ens.data.name : address;
+        return (jsx_runtime_1.jsx("a", Object.assign({}, getStyles("addressLink"), { href: `https://zora.co/${zoraLink}`, target: "_blank", rel: "noreferrer" }, { children: jsx_runtime_1.jsx("span", { children: ens.data.name }, void 0) }), void 0));
     }
+    if ((_b = username.username) === null || _b === void 0 ? void 0 : _b.name) {
+        return (jsx_runtime_1.jsx("a", Object.assign({}, getStyles("addressLink"), { href: `https://zora.co/${username.username.name}`, target: "_blank", rel: "noreferrer" }, { children: jsx_runtime_1.jsx("span", { children: `@${username.username.name}` }, void 0) }), void 0));
+    }
+    // Username loading
     if (!username.error && !username.username) {
         return jsx_runtime_1.jsx("span", { children: "..." }, void 0);
     }
-    return (jsx_runtime_1.jsxs("span", { children: [addressFirst, "...", addressLast] }, void 0));
+    // Ens loading
+    if (useEns && !ens.error && !ens.data) {
+        return jsx_runtime_1.jsx("span", { children: "..." }, void 0);
+    }
+    return (jsx_runtime_1.jsx("a", Object.assign({}, getStyles("addressLink"), { href: `https://etherscan.io/address/${address}`, target: "_blank", rel: "noreferrer" }, { children: jsx_runtime_1.jsxs("span", { children: [addressFirst, "...", addressLast] }, void 0) }), void 0));
 };
 exports.AddressView = AddressView;

dist/constants/strings.d.ts

@@ -117,3 +117,3 @@ export declare const Strings: {
      * Header showing curator information on NFT full page
-     * @default  of proceeds go to the curator
+     * @default  of proceeds go to
      */
@@ -120,0 +120,0 @@ CURATOR_PROCEEDS_DESC: string;

dist/constants/strings.js

@@ -120,5 +120,5 @@ "use strict";
      * Header showing curator information on NFT full page
-     * @default  of proceeds go to the curator
+     * @default  of proceeds go to
      */
-    CURATOR_PROCEEDS_DESC: " of proceeds go to the curator",
+    CURATOR_PROCEEDS_DESC: " of proceeds go to",
     /**
@@ -125,0 +125,0 @@ * Sold for view on full view page auction info box

dist/constants/style.d.ts

@@ -13,3 +13,6 @@ import { ThemeOptionsType } from "./theme";
         };
+        showCreator: boolean;
+        showOwner: boolean;
         showTxnLinks: boolean;
+        spacingUnit: string;
         textBlockPadding: string;
@@ -54,8 +57,10 @@ borderStyle: string;
         fullItemInfo: (_: ThemeOptionsType) => string;
-        fullTitle: (_: ThemeOptionsType) => string;
+        fullTitle: (theme: ThemeOptionsType) => string;
         fullDescription: (theme: ThemeOptionsType) => string;
         fullOwnerAddress: (theme: ThemeOptionsType) => string[];
         fullLabel: (theme: ThemeOptionsType) => string[];
+        fullPageHistoryList: () => string;
         fullPageHistoryItem: (theme: ThemeOptionsType) => string[];
-        fullPageHistoryItemDescription: (theme: ThemeOptionsType) => string;
+        fullPageHistoryItemDescription: () => string;
+        fullPageHistoryItemDescriptionCopy: () => string;
         fullPageHistoryItemMeta: () => string;
@@ -70,3 +75,3 @@ fullPageHistoryTxnLink: () => string;
         fullPageHistoryItemDatestamp: (theme: ThemeOptionsType) => string[];
-        fullPageDataGrid: (_: ThemeOptionsType) => string;
+        fullPageDataGrid: (theme: ThemeOptionsType) => string;
         infoContainer: (theme: ThemeOptionsType, { bottomPadding }: any) => string;
@@ -80,8 +85,9 @@ fullInfoSpacer: (_: any, { height }: {
         fullInfoCuratorFeeContainer: (_: any) => string;
-        fullInfoProofAuthenticityContainer: (_: any) => string;
+        fullInfoProofAuthenticityContainer: (theme: ThemeOptionsType) => string;
         fullProofLink: (theme: ThemeOptionsType) => string;
-        fullCreatorOwnerSection: (theme: ThemeOptionsType) => string[];
+        fullCreatorOwnerSection: (theme: ThemeOptionsType) => string;
         button: (theme: ThemeOptionsType, { primary }: any) => string;
         textSubdued: (theme: ThemeOptionsType) => string[];
         pricingAmount: (theme: ThemeOptionsType) => string;
+        addressLink: (theme: ThemeOptionsType) => string[];
         nftProposal: (theme: ThemeOptionsType) => string;
@@ -104,5 +110,5 @@ nftProposalActions: () => string;
         mediaVideoControls: (_: ThemeOptionsType, { isFullPage }: any) => string;
-        mediaFullscreenButton: (_: ThemeOptionsType) => string;
-        mediaMuteButton: (_: ThemeOptionsType, { muted }: any) => string;
+        mediaFullscreenButton: (theme: ThemeOptionsType) => string;
+        mediaMuteButton: (theme: ThemeOptionsType, { muted }: any) => string;
     };
 };

dist/constants/style.js

@@ -7,10 +7,2 @@ "use strict";
 const theme_1 = require("./theme");
-const pricingLayout = (theme) => css_1.css `
-  display: grid;
-  grid-auto-flow: column;
-  grid-template-rows: auto auto;
-  grid-auto-column: 1fr;
-  padding: ${theme.textBlockPadding};
-  border-top: ${theme.borderStyle};
-`;
 const buttonCommonSize = (size) => `
@@ -125,6 +117,6 @@ padding: ${size};
         grid-template-rows: auto auto;
-        grid-auto-column: 1fr;
+        grid-auto-columns: 1fr;
         padding: ${theme.textBlockPadding};
         border-top: ${theme.borderStyle};
-        ${getActiveStyle()}
+        ${getActiveStyle()};
       `;
@@ -135,7 +127,7 @@ },
       margin: 0;
-      max-width: calc(${theme.previewCard.width} - 30px),
+      max-width: calc(${theme.previewCard.width} - 30px);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      ${theme.titleFont}
+      ${theme.titleFont};
     `,
@@ -149,6 +141,6 @@ // Styles for full-page view
         fullItemInfo: (_) => css_1.css ``,
-        fullTitle: (_) => css_1.css `
+        fullTitle: (theme) => css_1.css `
       font-weight: inherit;
       font-size: 30px;
-      margin: 20px 0;
+      margin: ${theme.spacingUnit} 0;
     `,
@@ -175,5 +167,9 @@ fullDescription: (theme) => css_1.css `
         ],
+        fullPageHistoryList: () => css_1.css `
+      padding: 0;
+      margin: 0;
+    `,
         fullPageHistoryItem: (theme) => [
             css_1.css `
-        margin-top: 14px;
+        margin-top: 15px;
         display: flex;
@@ -186,5 +182,12 @@ flex-direction: column;
         // CSS Class for restyling and targeting
-        fullPageHistoryItemDescription: (theme) => css_1.css `
-      ${theme.showTxnLinks ? "margin-right: 20px;" : ""}
+        fullPageHistoryItemDescription: () => css_1.css `
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
     `,
+        fullPageHistoryItemDescriptionCopy: () => css_1.css `
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+    `,
         fullPageHistoryItemMeta: () => css_1.css `
@@ -209,3 +212,3 @@ position: relative;
         background-position: center;
-        top: 14px;
+        top: 2px;
         z-index: 10;
@@ -274,5 +277,5 @@ right: 0;
         ],
-        fullPageDataGrid: (_) => css_1.css `
+        fullPageDataGrid: (theme) => css_1.css `
       display: grid;
-      grid-gap: 20px;
+      grid-gap: ${theme.spacingUnit};
     `,
@@ -282,3 +285,3 @@ infoContainer: (theme, { bottomPadding }) => css_1.css `
         border-radius: ${theme.defaultBorderRadius}px;
-        padding: 20px 20px ${bottomPadding ? "20px" : 0};
+        padding: ${theme.spacingUnit} ${theme.spacingUnit} ${bottomPadding ? theme.spacingUnit : 0};
         position: relative;
@@ -291,10 +294,10 @@ `,
         fullPlaceOfferButton: (_) => css_1.css ``,
-        fullInfoCreatorEquityContainer: (_) => css_1.css `
-      margin-top: 20px;
-    `,
+        fullInfoCreatorEquityContainer: (_) => css_1.css ``,
         fullInfoCuratorFeeContainer: (_) => css_1.css `
-      margin-top: 20px;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
     `,
-        fullInfoProofAuthenticityContainer: (_) => css_1.css `
-      margin-top: 20px;
+        fullInfoProofAuthenticityContainer: (theme) => css_1.css `
+      margin-top: ${theme.spacingUnit};
     `,
@@ -305,4 +308,4 @@ fullProofLink: (theme) => css_1.css `
       color: ${theme.linkColor};
-      padding: 20px;
-      margin: 0 -20px;
+      padding: ${theme.spacingUnit};
+      margin: 0 -${theme.spacingUnit};
       border-top: ${theme.borderStyle};
@@ -320,12 +323,16 @@
         color: #eee;
-        right: 20px;
+        right: ${theme.spacingUnit};
         position: absolute;
       }
     `,
-        fullCreatorOwnerSection: (theme) => [
-            pricingLayout(theme),
-            css_1.css `
-        border-top: 0;
-      `,
-        ],
+        fullCreatorOwnerSection: (theme) => css_1.css `
+      display: grid;
+      grid-auto-flow: column;
+      grid-template-rows: auto auto;
+      grid-auto-columns: 1fr;
+      padding: ${theme.spacingUnit};
+      border: ${theme.borderStyle};
+      border-radius: ${theme.defaultBorderRadius}px;
+      margin: ${theme.spacingUnit} 0 0;
+    `,
         // Generic styles
@@ -353,3 +360,10 @@ button: (theme, { primary }) => css_1.css `
         ],
-        pricingAmount: (theme) => theme.titleFont,
+        pricingAmount: (theme) => theme.bodyFont,
+        addressLink: (theme) => [
+            css_1.css `
+        text-decoration: none;
+        color: ${theme.linkColor};
+      `,
+            theme.titleFont,
+        ],
         nftProposal: (theme) => css_1.css `
@@ -359,3 +373,3 @@ border: ${theme.borderStyle};
       display: flex;
-      padding: 20px;
+      padding: ${theme.spacingUnit};
     `,
@@ -445,3 +459,3 @@ nftProposalActions: () => css_1.css `
         text-align: left;
-        padding: 20px;
+        padding: ${theme.spacingUnit};
         width: 100%;
@@ -472,9 +486,9 @@ `,
     `,
-        mediaFullscreenButton: (_) => css_1.css `
-      ${buttonCommonSize("20px")}
+        mediaFullscreenButton: (theme) => css_1.css `
+      ${buttonCommonSize(theme.spacingUnit)}
       background-color: #000;
       ${renderSVG(svg_icons_1.SVG_FULLSCREEN)}
     `,
-        mediaMuteButton: (_, { muted }) => css_1.css `
-      ${buttonCommonSize("20px")}
+        mediaMuteButton: (theme, { muted }) => css_1.css `
+      ${buttonCommonSize(theme.spacingUnit)}
       background-color: #000;
@@ -481,0 +495,0 @@ background-image: url("data:image/svg+xml,${encodeURIComponent(muted ? svg_icons_1.SVG_UNMUTED : svg_icons_1.SVG_MUTED)}");

dist/constants/theme.d.ts

@@ -16,2 +16,14 @@ export declare const ThemeOptions: {
     /**
+     * Flag if showing the nft creator on full view
+     * should be enabled
+     * @default true
+     */
+    showCreator: boolean;
+    /**
+     * Flag if showing the nft owner on full view
+     * should be enabled
+     * @default true
+     */
+    showOwner: boolean;
+    /**
      * Flag if showing transaction history links on full view
@@ -24,2 +36,7 @@ * should be enabled
      * Padding for preview card text block
+     * @default 20px
+     */
+    spacingUnit: string;
+    /**
+     * Padding for preview card text block
      * @default 10px 15px
@@ -26,0 +43,0 @@ */

dist/constants/theme.js

@@ -19,2 +19,14 @@ "use strict";
     /**
+     * Flag if showing the nft creator on full view
+     * should be enabled
+     * @default true
+     */
+    showCreator: true,
+    /**
+     * Flag if showing the nft owner on full view
+     * should be enabled
+     * @default true
+     */
+    showOwner: true,
+    /**
      * Flag if showing transaction history links on full view
@@ -27,2 +39,7 @@ * should be enabled
      * Padding for preview card text block
+     * @default 20px
+     */
+    spacingUnit: "20px",
+    /**
+     * Padding for preview card text block
      * @default 10px 15px
@@ -29,0 +46,0 @@ */

dist/content-components/HTML.js

@@ -35,3 +35,3 @@ "use strict";
                 ? RendererConfig_1.RenderingPreference.PRIORITY
-                : RendererConfig_1.RenderingPreference.LOW;
+                : RendererConfig_1.RenderingPreference.INVALID;
         }
@@ -38,0 +38,0 @@ return RendererConfig_1.RenderingPreference.INVALID;

dist/content-components/Model.js

@@ -31,7 +31,8 @@ "use strict";
         }
-        props.request.media.content = {
+        const newProps = { ...props };
+        newProps.request.media.content = {
             uri: `${exports.Model.renderingPage}#${params.toString()}`,
         };
-        return jsx_runtime_1.jsx(HTML_1.HTML.render, Object.assign({}, props), void 0);
+        return jsx_runtime_1.jsx(HTML_1.HTML.render, Object.assign({}, newProps), void 0);
     },
 };

dist/content-components/Text.js

@@ -10,7 +10,10 @@ "use strict";
     getRenderingPreference: (request) => {
-        var _a, _b, _c, _d;
-        if ((_b = (_a = request.media.content) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.startsWith("text/plain")) {
+        var _a, _b, _c, _d, _e;
+        if (((_a = request.media.content) === null || _a === void 0 ? void 0 : _a.type) === 'text/html') {
+            return RendererConfig_1.RenderingPreference.INVALID;
+        }
+        if ((_c = (_b = request.media.content) === null || _b === void 0 ? void 0 : _b.type) === null || _c === void 0 ? void 0 : _c.startsWith("text/plain")) {
             return RendererConfig_1.RenderingPreference.PRIORITY;
         }
-        if ((_d = (_c = request.media.content) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.startsWith("text/")) {
+        if ((_e = (_d = request.media.content) === null || _d === void 0 ? void 0 : _d.type) === null || _e === void 0 ? void 0 : _e.startsWith("text/")) {
             return RendererConfig_1.RenderingPreference.LOW;
@@ -17,0 +20,0 @@ }

dist/content-components/Unknown.js

@@ -12,3 +12,3 @@ "use strict";
         }
-        return RendererConfig_1.RenderingPreference.INVALID;
+        return RendererConfig_1.RenderingPreference.FALLBACK;
     },
@@ -15,0 +15,0 @@ render: ({ request, getStyles }) => {

dist/nft-full/AuctionInfo.js

@@ -35,3 +35,3 @@ "use strict";
     const { nft } = react_1.useContext(NFTDataContext_1.NFTDataContext);
-    const { getStyles, getString } = useMediaContext_1.useMediaContext();
+    const { getStyles, getString, style } = 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));
@@ -65,6 +65,6 @@ if (!nft.data) {
         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", { style: { height: style.theme.spacingUnit } }, void 0),
                 jsx_runtime_1.jsx("div", Object.assign({}, getStyles("fullLabel"), { children: getString("HIGHEST_BID") }), void 0),
                 jsx_runtime_1.jsx(PricingString_1.PricingString, { pricing: reserve.current.highestBid.pricing }, void 0),
-                jsx_runtime_1.jsx("div", { style: { height: "20px" } }, void 0),
+                jsx_runtime_1.jsx("div", { style: { height: style.theme.spacingUnit } }, void 0),
                 jsx_runtime_1.jsx("div", Object.assign({}, getStyles("fullLabel"), { children: getString("BIDDER") }), void 0),
@@ -87,3 +87,3 @@ jsx_runtime_1.jsx(AddressView_1.AddressView, { address: (_a = reserve.current.highestBid) === null || _a === void 0 ? void 0 : _a.placedBy }, void 0)] }), void 0));
                     ((_c = data.pricing.reserve) === null || _c === void 0 ? void 0 : _c.reservePrice) && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(PricingString_1.PricingString, { pricing: data.pricing.reserve.reservePrice }, void 0),
-                        jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("div", { style: { height: "20px" } }, void 0),
+                        jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("div", { style: { height: style.theme.spacingUnit } }, void 0),
                                 jsx_runtime_1.jsx("div", Object.assign({}, getStyles("fullLabel"), { children: getString("AUCTION_PENDING_DURATION") }), void 0),
@@ -90,0 +90,0 @@ jsx_runtime_1.jsx(CountdownDisplay_1.DurationDisplay, { duration: data.pricing.reserve.duration }, void 0)] }, void 0)] }, void 0))] }), void 0) }), void 0));

dist/nft-full/BidHistory.js

@@ -101,8 +101,8 @@ "use strict";
             .map((bidItem) => (react_1.createElement("li", Object.assign({}, getStyles("fullPageHistoryItem"), { key: `${bidItem.actor}-${bidItem.createdAt}` }),
-            jsx_runtime_1.jsxs("div", Object.assign({}, getStyles("fullPageHistoryItemDescription"), { 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),
-            bidItem.createdAt && (jsx_runtime_1.jsxs("div", Object.assign({}, getStyles("fullPageHistoryItemMeta"), { children: [jsx_runtime_1.jsx("time", Object.assign({ dateTime: dateFromTimestamp(bidItem.createdAt).toISOString() }, getStyles("fullPageHistoryItemDatestamp"), { children: formatDate(bidItem.createdAt) }), void 0),
-                    bidItem.transactionHash && style.theme.showTxnLinks && (jsx_runtime_1.jsx("a", Object.assign({}, getStyles("fullPageHistoryTxnLink"), { href: `https://etherscan.io/tx/${bidItem.transactionHash}`, target: "_blank" }, { children: getString("BID_HISTORY_VIEW_TRANSACTION") }), void 0))] }), void 0)))));
+            jsx_runtime_1.jsxs("div", Object.assign({}, getStyles("fullPageHistoryItemDescription"), { children: [jsx_runtime_1.jsxs("div", Object.assign({}, getStyles("fullPageHistoryItemDescriptionCopy"), { children: [jsx_runtime_1.jsx(AddressView_1.AddressView, { address: bidItem.actor }, void 0), "\u00A0", jsx_runtime_1.jsxs("span", Object.assign({}, getStyles("pricingAmount"), { children: [bidItem.activityDescription, " ", bidItem.pricing] }), void 0)] }), void 0),
+                    bidItem.transactionHash && style.theme.showTxnLinks && (jsx_runtime_1.jsx("a", Object.assign({}, getStyles("fullPageHistoryTxnLink"), { href: `https://etherscan.io/tx/${bidItem.transactionHash}`, target: "_blank", rel: "noreferrer" }, { children: getString("BID_HISTORY_VIEW_TRANSACTION") }), void 0))] }), void 0),
+            bidItem.createdAt && (jsx_runtime_1.jsx("div", Object.assign({}, getStyles("fullPageHistoryItemMeta"), { children: jsx_runtime_1.jsx("time", Object.assign({ dateTime: dateFromTimestamp(bidItem.createdAt).toISOString() }, getStyles("fullPageHistoryItemDatestamp"), { children: formatDate(bidItem.createdAt) }), void 0) }), void 0)))));
     };
-    return (jsx_runtime_1.jsx(InfoContainer_1.InfoContainer, Object.assign({ titleString: "NFT_HISTORY" }, { children: jsx_runtime_1.jsx("ol", Object.assign({ style: { padding: 0 } }, { children: getPastBids() }), void 0) }), void 0));
+    return (jsx_runtime_1.jsx(InfoContainer_1.InfoContainer, Object.assign({ titleString: "NFT_HISTORY" }, { children: jsx_runtime_1.jsx("ol", Object.assign({}, getStyles("fullPageHistoryList"), { children: getPastBids() }), void 0) }), void 0));
 };
 exports.BidHistory = BidHistory;

dist/nft-full/CreatorEquity.js

@@ -35,5 +35,4 @@ "use strict";
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [data && "zoraNFT" in data && data.zoraNFT && (jsx_runtime_1.jsx(InfoContainer_1.InfoContainer, Object.assign({ titleString: "CREATOR_EQUITY" }, { children: jsx_runtime_1.jsx("div", Object.assign({}, getStyles("fullInfoCreatorEquityContainer"), { children: getContent((_a = data.zoraNFT) === null || _a === void 0 ? void 0 : _a.creatorBidSharePercentage) }), void 0) }), void 0)),
-            data && data.pricing.reserve && ((_b = data.pricing.reserve) === null || _b === void 0 ? void 0 : _b.curatorFeePercentage) > 0 && (jsx_runtime_1.jsx(InfoContainer_1.InfoContainer, Object.assign({ titleString: "CURATOR_FEE" }, { children: jsx_runtime_1.jsxs("div", Object.assign({}, getStyles("fullInfoCuratorFeeContainer"), { children: [jsx_runtime_1.jsxs("p", { children: [getContent((_c = data.pricing.reserve) === null || _c === void 0 ? void 0 : _c.curatorFeePercentage), " ", getString('CURATOR_PROCEEDS_DESC')] }, void 0),
-                        jsx_runtime_1.jsx("p", { children: jsx_runtime_1.jsx(AddressView_1.AddressView, { address: data.pricing.reserve.curator.id }, void 0) }, void 0)] }), void 0) }), void 0))] }, void 0));
+            data && data.pricing.reserve && ((_b = data.pricing.reserve) === null || _b === void 0 ? void 0 : _b.curatorFeePercentage) > 0 && (jsx_runtime_1.jsx(InfoContainer_1.InfoContainer, Object.assign({ titleString: "CURATOR_FEE" }, { children: jsx_runtime_1.jsxs("div", Object.assign({}, getStyles("fullInfoCuratorFeeContainer"), { children: [jsx_runtime_1.jsxs("span", { children: [getContent((_c = data.pricing.reserve) === null || _c === void 0 ? void 0 : _c.curatorFeePercentage), " ", getString('CURATOR_PROCEEDS_DESC')] }, void 0), "\u00A0", jsx_runtime_1.jsx(AddressView_1.AddressView, { address: data.pricing.reserve.curator.id }, void 0)] }), void 0) }), void 0))] }, void 0));
 };
 exports.CreatorEquity = CreatorEquity;

dist/nft-full/MediaInfo.js

@@ -10,3 +10,3 @@ "use strict";
 const MediaInfo = ({ a11yIdPrefix }) => {
-    const { getStyles, getString } = useMediaContext_1.useMediaContext();
+    const { getStyles, getString, style } = useMediaContext_1.useMediaContext();
     const { nft: { data }, metadata: { metadata, error }, } = react_1.useContext(NFTDataContext_1.NFTDataContext);
@@ -34,7 +34,9 @@ const getContent = () => {
             jsx_runtime_1.jsx("div", Object.assign({ id: `${a11yIdPrefix}description` }, getStyles("fullDescription"), { children: description }), void 0),
-            jsx_runtime_1.jsxs("dl", 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("dt", Object.assign({}, getStyles("fullLabel"), { children: getString("CREATOR") }), void 0),
-                            jsx_runtime_1.jsx("dd", 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("dt", Object.assign({}, getStyles("fullLabel"), { children: getString("OWNER") }), void 0),
-                    jsx_runtime_1.jsx("dd", 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));
+            !style.theme.showCreator && !style.theme.showOwner
+                ? jsx_runtime_1.jsx(react_1.Fragment, {}, void 0)
+                : jsx_runtime_1.jsxs("dl", Object.assign({}, getStyles("fullCreatorOwnerSection"), { children: [(data === null || data === void 0 ? void 0 : data.nft.creator) && style.theme.showCreator && (jsx_runtime_1.jsxs(react_1.Fragment, { children: [jsx_runtime_1.jsx("dt", Object.assign({}, getStyles("fullLabel"), { children: getString("CREATOR") }), void 0),
+                                jsx_runtime_1.jsx("dd", Object.assign({}, getStyles("fullOwnerAddress"), { children: data ? jsx_runtime_1.jsx(AddressView_1.AddressView, { address: data.nft.creator }, void 0) : " " }), void 0)] }, void 0)),
+                        (data === null || data === void 0 ? void 0 : data.nft.creator) && style.theme.showOwner && (jsx_runtime_1.jsxs(react_1.Fragment, { children: [jsx_runtime_1.jsx("dt", Object.assign({}, getStyles("fullLabel"), { children: getString("OWNER") }), void 0),
+                                jsx_runtime_1.jsx("dd", 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)] }), void 0));
 };
 exports.MediaInfo = MediaInfo;

dist/nft-full/PlaceOfferButton.js

@@ -34,5 +34,6 @@ "use strict";
                 media_urls_1.ZORA_SITE_URL_BASE,
-                "auction",
+                "collections",
                 data.nft.contract.address,
                 data.nft.tokenId,
+                "auction",
                 "bid",
@@ -39,0 +40,0 @@ ];

dist/nft-full/ProofAuthenticity.js

@@ -29,3 +29,3 @@ "use strict";
 const InfoContainer_1 = require("./InfoContainer");
-const ProofLink = ({ href, children, styles, }) => (jsx_runtime_1.jsx("a", Object.assign({}, styles, { href: href, target: "_blank" }, { children: children }), void 0));
+const ProofLink = ({ href, children, styles, }) => (jsx_runtime_1.jsx("a", Object.assign({}, styles, { href: href, target: "_blank", rel: "noreferrer" }, { children: children }), void 0));
 const ProofAuthenticity = () => {
@@ -32,0 +32,0 @@ const { nft: { data }, } = react_1.useContext(NFTDataContext_1.NFTDataContext);

package.json

 {
   "name": "@zoralabs/nft-components",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "NFT Media Rendering Components",
@@ -18,3 +18,3 @@ "typings": "dist/index.d.ts",
     "@types/react": "^17.0.5",
-    "@zoralabs/nft-hooks": "^0.5.1",
+    "@zoralabs/nft-hooks": "^0.7.0",
     "merge-anything": "^4.0.1",
@@ -46,3 +46,3 @@ "react": "^17.0.2",
   "peerDependencies": {
-    "@zoralabs/nft-hooks": "^0.5.1"
+    "@zoralabs/nft-hooks": "^0.7.0"
   },
@@ -49,0 +49,0 @@ "lint-staged": {

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

267585

increased by3.78%

Lines of code

5322

increased by4.78%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of package files

107

decreased by-1.83%

Dependency changes

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

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

• Updated@zoralabs/nft-hooks@^0.7.0