Socket
Socket
Sign inDemoInstall

@zoralabs/nft-components

Package Overview
Dependencies
Maintainers
10
Versions
70
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@zoralabs/nft-components - npm Package Compare versions

Comparing version 0.0.2-pre to 0.0.4-pre

dist/components/NFTPageWrapper.d.ts
dist/components/NFTPageWrapper.js
dist/nft-full/index.d.ts
dist/nft-full/index.js
dist/nft-full/PlaceOfferButton.d.ts
dist/nft-full/PlaceOfferButton.js
dist/nft-preview/index.d.ts
dist/nft-preview/index.js
dist/nft-preview/PricingComponent.d.ts
dist/nft-preview/PricingComponent.js

9

dist/components/AddressView.js

@@ -5,8 +5,17 @@ "use strict";

const jsx_runtime_1 = require("react/jsx-runtime");
const nft_hooks_1 = require("@zoralabs/nft-hooks");
const PREFIX_ADDRESS = "0x";
const AddressView = ({ address, showChars = 6 }) => {
var _a;
const username = nft_hooks_1.useZoraUsername(address);
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.jsxs("span", { children: ["@", username.username.username] }, void 0);
}
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));
};
exports.AddressView = AddressView;

2

dist/components/Button.d.ts
/// <reference types="react" />
export declare type ButtonProps = {
primary: boolean;
primary?: boolean;
href?: string;

@@ -5,0 +5,0 @@ onClick?: () => void;

22

dist/components/CountdownDisplay.js
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CountdownDisplay = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importStar(require("react"));
const react_1 = __importStar(require("react"));
function getNumber(time) {

@@ -8,0 +26,0 @@ if (typeof time === "string") {

3

dist/components/MediaObject.js

@@ -25,4 +25,3 @@ "use strict";

return {
hasLoader: false,
mediaTag: jsx_runtime_1.jsx("span", Object.assign({}, getStyles("mediaObjectMessage"), { children: "Loading" }), void 0),
hasLoader: true,
};

@@ -29,0 +28,0 @@ }

1

dist/constants/media-urls.d.ts

@@ -7,1 +7,2 @@ export declare const MEDIA_URL_BASE_BY_NETWORK: {

};
export declare const ZORA_SITE_URL_BASE = "https://zora.co";

3

dist/constants/media-urls.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.VIEW_ETHERSCAN_URL_BASE_BY_NETWORK = exports.MEDIA_URL_BASE_BY_NETWORK = void 0;
exports.ZORA_SITE_URL_BASE = exports.VIEW_ETHERSCAN_URL_BASE_BY_NETWORK = exports.MEDIA_URL_BASE_BY_NETWORK = void 0;
const nft_hooks_1 = require("@zoralabs/nft-hooks");

@@ -13,1 +13,2 @@ exports.MEDIA_URL_BASE_BY_NETWORK = {

};
exports.ZORA_SITE_URL_BASE = "https://zora.co";

1

dist/constants/strings.d.ts

@@ -24,4 +24,5 @@ export declare const Strings: {

OPEN_OFFERS: string;
PLACE_BID: string;
BID_HISTORY_LISTED: string;
BID_HISTORY_MINTED: string;
};

1

dist/constants/strings.js

@@ -27,4 +27,5 @@ "use strict";

OPEN_OFFERS: "Open offers",
PLACE_BID: "Place bid",
BID_HISTORY_LISTED: "listed the NFT",
BID_HISTORY_MINTED: "minted the NFT",
};

22

dist/constants/style-presets/dark.d.ts

@@ -1,1 +0,21 @@

export declare const DarkTheme: any;
export declare const DarkTheme: {
theme: {
previewCard: {
background: string;
};
titleFont: {
fontFamily: string;
color: string;
fontWeight: number;
fontSize: string;
};
bodyFont: {
fontFamily: string;
color: string;
fontWeight: number;
fontSize: string;
};
borderStyle: string;
lineSpacing: number;
};
};

9

dist/constants/style-presets/dark.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DarkTheme = void 0;
const merge_anything_1 = require("merge-anything");
const style_1 = require("../style");
exports.DarkTheme = merge_anything_1.merge(style_1.Style, {
exports.DarkTheme = {
theme: {

@@ -12,2 +10,3 @@ previewCard: {

titleFont: {
fontFamily: 'courier',
color: "#fff",

@@ -18,2 +17,3 @@ fontWeight: 400,

bodyFont: {
fontFamily: 'courier',
color: "#fff",

@@ -26,3 +26,2 @@ fontWeight: 300,

},
style: {}
});
};

278

dist/constants/style.d.ts

@@ -12,14 +12,5 @@ import { ThemeOptionsType } from "./theme";

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -39,236 +30,35 @@ fontFamily: string;

styles: {
auctionHouseList: (_: ThemeOptionsType) => {
display: string;
flexWrap: string;
};
cardOuter: (theme: ThemeOptionsType, { hasClickEvent }: any) => {
transition: string;
"&:active": {
transform: string;
};
auctionHouseList: (_: ThemeOptionsType) => string;
cardOuter: (theme: ThemeOptionsType, { hasClickEvent }: any) => string;
cardHeader: (theme: ThemeOptionsType) => string;
cardMediaWrapper: (theme: ThemeOptionsType) => string;
cardItemInfo: (theme: ThemeOptionsType) => string;
cardAuctionPerpetual: (theme: ThemeOptionsType) => string;
cardAuctionReserveActive: (theme: ThemeOptionsType) => string[];
cardAuctionReservePending: (theme: ThemeOptionsType) => string[];
cardTitle: (theme: ThemeOptionsType) => string;
fullPage: (theme: ThemeOptionsType) => string;
fullMediaWrapper: (_: ThemeOptionsType) => string;
fullItemInfo: (_: ThemeOptionsType) => string;
fullTitle: (_: ThemeOptionsType) => string;
fullDescription: (theme: ThemeOptionsType) => string;
fullOwnerAddress: (theme: ThemeOptionsType) => string[];
fullLabel: (theme: ThemeOptionsType) => string[];
fullPageHistoryItem: (theme: ThemeOptionsType) => string[];
fullPageHistoryItemDatestamp: (theme: ThemeOptionsType) => string[];
fullPageDataGrid: (_: ThemeOptionsType) => string;
infoContainer: (theme: ThemeOptionsType, { bottomPadding }: any) => string;
fullProofLink: (theme: ThemeOptionsType) => string;
fullCreatorOwnerSection: (theme: ThemeOptionsType) => string[];
button: (theme: ThemeOptionsType, { primary }: any) => string;
textSubdued: (theme: ThemeOptionsType) => string[];
pricingAmount: (theme: ThemeOptionsType) => string;
mediaLoader: (_: ThemeOptionsType, { mediaLoaded }: any) => string;
mediaObject: (_: ThemeOptionsType, { mediaLoaded, isFullPage }: any) => string;
mediaObjectMessage: (_: ThemeOptionsType) => string;
mediaContentText: (theme: ThemeOptionsType) => (string | {
fontFamily: string;
fontWeight: number;
cursor: string | undefined;
background: string;
overflow: string;
borderRadius: string;
border: string;
margin: number;
width: string;
lineHeight: string;
};
cardHeader: (theme: ThemeOptionsType) => {
fontFamily: string;
fontWeight: number;
padding: string;
};
cardMediaWrapper: (theme: ThemeOptionsType) => {
width: number;
height: number;
display: string;
overflow: string;
position: string;
justifyContent: string;
};
cardItemInfo: (theme: ThemeOptionsType) => {
padding: string;
borderTop: string;
};
cardAuctionPerpetual: (theme: ThemeOptionsType) => {
display: string;
gridAutoFlow: string;
gridTemplateRows: string;
gridAutoColumns: string;
padding: string;
borderTop: string;
};
cardAuctionReserveActive: (theme: ThemeOptionsType) => {
display: string;
gridAutoFlow: string;
gridTemplateRows: string;
gridAutoColumns: string;
padding: string;
borderTop: string;
background: string;
color: string;
};
cardAuctionReservePending: (theme: ThemeOptionsType) => {
display: string;
gridAutoFlow: string;
gridTemplateRows: string;
gridAutoColumns: string;
padding: string;
borderTop: string;
background: string;
};
cardTitle: (theme: ThemeOptionsType) => {
fontFamily: string;
fontWeight: number;
maxWidth: number;
overflow: string;
whiteSpace: string;
textOverflow: string;
};
fullPage: (theme: ThemeOptionsType) => {
fontFamily: string;
fontWeight: number;
};
fullMediaWrapper: (_: ThemeOptionsType) => {
margin: string;
position: string;
};
fullItemInfo: (_: ThemeOptionsType) => {};
fullTitle: (_: ThemeOptionsType) => {
fontSize: string;
margin: string;
};
fullDescription: (theme: ThemeOptionsType) => {
fontSize: number;
margin: string;
};
fullOwnerAddress: (theme: ThemeOptionsType) => {
fontFamily: string;
fontWeight: number;
fontSize: number;
};
fullLabel: (theme: ThemeOptionsType) => {
fontFamily: string;
fontWeight: number;
textTransform: string;
fontSize: string;
marginBottom: string;
opacity: number;
};
fullPageHistoryItem: (theme: ThemeOptionsType) => {
fontWeight: number;
fontFamily: string;
margin: string;
display: string;
flexDirection: string;
};
fullPageHistoryItemDatestamp: (theme: ThemeOptionsType) => {
fontSize: string;
paddingTop: string;
opacity: number;
fontFamily: string;
fontWeight: number;
};
fullPageDataGrid: (_: ThemeOptionsType) => {
display: string;
gridGap: string;
};
infoContainer: (theme: ThemeOptionsType, { bottomPadding }: any) => {
border: string;
borderRadius: string;
padding: string;
position: string;
};
fullProofLink: (theme: ThemeOptionsType) => {
display: string;
textDecoration: string;
color: string;
padding: string;
margin: string;
borderTop: string;
":hover": {
backgroundColor: string;
};
":after": {
content: string;
width: string;
height: string;
opacity: number;
backgroundImage: string;
color: string;
right: string;
position: string;
};
};
fullCreatorOwnerSection: (theme: ThemeOptionsType) => {
borderTop: number;
display: string;
gridAutoFlow: string;
gridTemplateRows: string;
gridAutoColumns: string;
padding: string;
};
button: (theme: ThemeOptionsType, { primary }: any) => {
transition: string;
"&:active": {
transform: string;
};
fontFamily: string;
fontWeight: number;
background: string;
color: string;
borderRadius: string;
padding: string;
font: string;
textDecoration: string;
margin: string;
border: string;
cursor: string;
display: string;
};
textSubdued: (theme: ThemeOptionsType) => {
fontFamily: string;
fontWeight: number;
opacity: string;
};
pricingAmount: (theme: ThemeOptionsType) => {
fontFamily: string;
fontWeight: number;
};
mediaLoader: (_: ThemeOptionsType, { mediaLoaded }: any) => {
position: string;
pointerEvents: string;
top: number;
left: number;
bottom: number;
right: number;
justifyContent: string;
alignItems: string;
opacity: number;
transition: string;
display: string;
alignContent: string;
justifyItems: string;
};
mediaObject: (_: ThemeOptionsType, { mediaLoaded, isFullPage }: any) => {
opacity: number;
transition: string;
maxHeight: string | undefined;
maxWidth: string | undefined;
display: string;
margin: string;
flexShrink: string;
};
mediaObjectMessage: (_: ThemeOptionsType) => {
alignSelf: string;
};
mediaContentText: (theme: ThemeOptionsType) => {
fontFamily: string;
whiteSpace: string;
textAlign: string;
padding: string;
width: string;
};
mediaAudioButton: (_: ThemeOptionsType, { playing }: any) => {
padding: string;
background: string;
border: number;
borderRadius: string;
color: string;
width: string;
height: string;
backgroundImage: string;
cursor: string;
backgroundRepeat: string;
backgroundPosition: string;
alignSelf: string;
position: string;
left: string;
marginLeft: string;
};
})[];
mediaAudioButton: (_: ThemeOptionsType, { playing }: any) => string;
};
};

438

dist/constants/style.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Style = void 0;
const css_1 = require("@emotion/css");
const svg_icons_1 = require("./svg-icons");
const theme_1 = require("./theme");
const pricingLayout = (theme) => ({
display: "grid",
gridAutoFlow: "column",
gridTemplateRows: "auto auto",
gridAutoColumns: "1fr",
padding: theme.textBlockPadding,
borderTop: theme.borderStyle,
});
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};
`;
exports.Style = {
theme: theme_1.ThemeOptions,
styles: {
auctionHouseList: (_) => ({
display: "flex",
flexWrap: "wrap",
}),
auctionHouseList: (_) => css_1.css `
display: flex;
flex-wrap: wrap;
`,
// Styles for preview card
cardOuter: (theme, { hasClickEvent }) => ({
cursor: hasClickEvent ? "pointer" : undefined,
background: theme.previewCard.background,
overflow: "hidden",
borderRadius: `${theme.defaultBorderRadius}px`,
border: theme.borderStyle,
margin: 15,
width: `${theme.previewCard.width}px`,
lineHeight: `${theme.lineSpacing}px`,
...theme.bodyFont,
transition: "transform 0.1s ease-in-out",
"&:active": {
transform: "scale(.98)",
},
}),
cardHeader: (theme) => ({
padding: theme.textBlockPadding,
...theme.titleFont,
}),
cardMediaWrapper: (theme) => ({
width: theme.previewCard.width,
height: theme.previewCard.height,
display: "flex",
overflow: "hidden",
position: "relative",
justifyContent: "center",
}),
cardItemInfo: (theme) => ({
padding: theme.textBlockPadding,
borderTop: theme.borderStyle,
}),
cardAuctionPerpetual: (theme) => ({
...pricingLayout(theme),
}),
cardAuctionReserveActive: (theme) => ({
background: "#000",
color: "#fff",
...pricingLayout(theme),
}),
cardAuctionReservePending: (theme) => ({
background: "#e6e6e6",
...pricingLayout(theme),
}),
cardTitle: (theme) => ({
maxWidth: theme.previewCard.width - 30,
overflow: "hidden",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
...theme.titleFont,
}),
cardOuter: (theme, { hasClickEvent }) => css_1.css `
${hasClickEvent ? "cursor: pointer;" : ""}
background: ${theme.previewCard.background};
overflow: hidden;
border-radius: ${theme.defaultBorderRadius}px;
border: ${theme.borderStyle};
margin: 15px;
width: ${theme.previewCard.width}px;
line-height: ${theme.lineSpacing}px;
${theme.bodyFont}
transition: transform 0.1s ease-in-out;
&:active {
transform: scale(0.98);
}
`,
cardHeader: (theme) => css_1.css `
padding: ${theme.textBlockPadding};
${theme.titleFont}
`,
cardMediaWrapper: (theme) => css_1.css `
width: ${theme.previewCard.width}px;
height: ${theme.previewCard.height}px;
display: flex;
overflow: hidden;
position: relative;
justify-content: center;
`,
cardItemInfo: (theme) => css_1.css `
padding: ${theme.textBlockPadding};
border-top: ${theme.borderStyle};
`,
cardAuctionPerpetual: (theme) => pricingLayout(theme),
cardAuctionReserveActive: (theme) => [
css_1.css `
background: #000;
color: #fff;
`,
pricingLayout(theme),
],
cardAuctionReservePending: (theme) => [
css_1.css `
background: #e6e6e6;
`,
pricingLayout(theme),
],
cardTitle: (theme) => css_1.css `
max-width: ${theme.previewCard.width - 30},
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
${theme.titleFont}
`,
// Styles for full-page view
fullPage: (theme) => ({
...theme.bodyFont,
}),
fullMediaWrapper: (_) => ({
margin: "5%",
position: "relative",
}),
fullItemInfo: (_) => ({}),
fullTitle: (_) => ({
fontSize: "30px",
margin: "20px 0",
}),
fullDescription: (theme) => ({
fontSize: theme.fontSizeFull,
margin: "10px 0",
}),
fullOwnerAddress: (theme) => ({
fontSize: theme.fontSizeFull,
...theme.titleFont,
}),
fullLabel: (theme) => ({
textTransform: "uppercase",
fontSize: "14px",
marginBottom: "5px",
opacity: 0.5,
...theme.bodyFont,
}),
fullPageHistoryItem: (theme) => ({
margin: "14px 0",
display: "flex",
flexDirection: "column",
...theme.bodyFont,
fontWeight: 300,
}),
fullPageHistoryItemDatestamp: (theme) => ({
...theme.bodyFont,
fontSize: "12px",
paddingTop: "2px",
opacity: 0.5,
}),
fullPageDataGrid: (_) => ({
display: "grid",
gridGap: "20px",
}),
infoContainer: (theme, { bottomPadding }) => ({
border: theme.borderStyle,
borderRadius: `${theme.defaultBorderRadius}px`,
padding: `20px 20px ${bottomPadding ? "20px" : 0}`,
position: "relative",
}),
fullProofLink: (theme) => ({
display: "block",
textDecoration: "none",
color: theme.linkColor,
padding: "20px",
margin: "0 -20px",
borderTop: theme.borderStyle,
":hover": {
backgroundColor: "#f2f2f2",
},
":after": {
content: '" "',
width: "14px",
height: "14px",
opacity: 0.5,
backgroundImage: `url("data:image/svg+xml,${encodeURIComponent(svg_icons_1.SVG_NEXT_ICON)}")`,
color: "#eee",
right: "20px",
position: "absolute",
},
}),
fullCreatorOwnerSection: (theme) => ({
...pricingLayout(theme),
borderTop: 0,
}),
fullPage: (theme) => theme.bodyFont,
fullMediaWrapper: (_) => css_1.css `
margin: 5%;
position: relative;
`,
fullItemInfo: (_) => css_1.css ``,
fullTitle: (_) => css_1.css `
font-size: 30px;
margin: 20px 0;
`,
fullDescription: (theme) => css_1.css `
font-size: ${theme.fontSizeFull};
margin: 10px 0;
`,
fullOwnerAddress: (theme) => [
css_1.css `
font-size: ${theme.fontSizeFull};
`,
theme.titleFont,
],
fullLabel: (theme) => [
css_1.css `
text-transform: uppercase;
font-size: 14px;
margin-bottom: 5px;
opacity: 0.5;
`,
theme.bodyFont,
],
fullPageHistoryItem: (theme) => [
css_1.css `
margin: 14px 0;
display: flex;
flex-direction: column;
font-weight: 300;
`,
theme.bodyFont,
],
fullPageHistoryItemDatestamp: (theme) => [
css_1.css `
font-size: 12px;
padding-top: 2px;
opacity: 0.5;
`,
theme.bodyFont,
],
fullPageDataGrid: (_) => css_1.css `
display: grid;
grid-gap: 20px;
`,
infoContainer: (theme, { bottomPadding }) => css_1.css `
border: ${theme.borderStyle};
border-radius: ${theme.defaultBorderRadius}px;
padding: 20px 20px ${bottomPadding ? "20px" : 0};
position: relative;
`,
fullProofLink: (theme) => css_1.css `
display: block;
text-decoration: none;
color: ${theme.linkColor};
padding: 20px;
margin: 0 -20px;
border-top: ${theme.borderStyle};
:hover {
background-color: #f2f2f2;
}
:after {
content: " ";
width: 14px;
height: 14px;
opacity: 0.5;
background-image: url("data:image/svg+xml,${encodeURIComponent(svg_icons_1.SVG_NEXT_ICON)}");
color: #eee;
right: 20px;
position: absolute;
}
`,
fullCreatorOwnerSection: (theme) => [
pricingLayout(theme),
css_1.css `
border-top: 0;
`,
],
// Generic styles
button: (theme, { primary }) => ({
background: primary
? theme.buttonColor.primaryBackground
: theme.buttonColor.background,
color: primary ? theme.buttonColor.primaryText : theme.buttonColor.text,
borderRadius: `${theme.defaultBorderRadius}px`,
padding: "11px",
font: "inherit",
textDecoration: "none",
margin: "0",
border: "0",
cursor: "pointer",
display: "inline-block",
...theme.bodyFont,
transition: "transform 0.1s ease-in-out",
"&:active": {
transform: "scale(.98)",
},
}),
textSubdued: (theme) => ({
opacity: "0.5",
...theme.bodyFont,
}),
pricingAmount: (theme) => ({
...theme.titleFont,
}),
mediaLoader: (_, { mediaLoaded }) => ({
position: "absolute",
pointerEvents: "none",
top: 0,
left: 0,
bottom: 0,
right: 0,
justifyContent: "center",
alignItems: "center",
opacity: mediaLoaded ? 0 : 1,
transition: "0.1s ease-out opacity",
display: "flex",
alignContent: "center",
justifyItems: "center",
}),
mediaObject: (_, { mediaLoaded, isFullPage }) => ({
opacity: mediaLoaded ? 1 : 0,
transition: "0.2s ease-in opacity",
maxHeight: isFullPage ? "70vh" : undefined,
maxWidth: isFullPage ? "100%" : undefined,
display: "block",
margin: "0 auto",
flexShrink: "1",
}),
mediaObjectMessage: (_) => ({
alignSelf: "center",
}),
mediaContentText: (theme) => ({
whiteSpace: "pre",
textAlign: "left",
padding: "20px",
width: "100%",
...theme.mediaContentFont,
}),
mediaAudioButton: (_, { playing }) => ({
padding: "30px",
background: "#eee",
border: 0,
borderRadius: "200px",
color: "transparent",
width: "30px",
height: "30px",
backgroundImage: `url("data:image/svg+xml,${encodeURIComponent(playing ? svg_icons_1.SVG_PAUSE : svg_icons_1.SVG_PLAY_ARROW)}")`,
cursor: "pointer",
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
alignSelf: "center",
position: "absolute",
left: "50%",
marginLeft: "-30px",
}),
button: (theme, { primary }) => css_1.css `
background: ${primary
? theme.buttonColor.primaryBackground
: theme.buttonColor.background};
color: ${primary
? theme.buttonColor.primaryText
: theme.buttonColor.text};
border-radius: ${theme.defaultBorderRadius}px;
padding: 11px;
font: inherit;
text-decoration: none;
margin: 0;
border: 0;
cursor: pointer;
display: inline-block;
transition: transform 0.1s ease-in-out;
&:active {
transform: scale(0.98);
}
`,
textSubdued: (theme) => [
css_1.css `
opacity: 0.5;
`,
theme.bodyFont,
],
pricingAmount: (theme) => theme.titleFont,
mediaLoader: (_, { mediaLoaded }) => css_1.css `
pointer-events: none;
min-height: 30vh;
width: 100%;
justify-content: center;
align-items: center;
display: ${mediaLoaded ? 'none' : 'flex'};
align-content: center;
justify-items: center;
`,
mediaObject: (_, { mediaLoaded, isFullPage }) => css_1.css `
opacity: ${mediaLoaded ? "1" : "0"};
transition: 0.2s ease-in opacity;
${isFullPage ? "max-height: 70vh;" : ""}
${isFullPage ? "max-width: 100%;" : ""}
display: block;
margin: 0 auto;
flex-shrink: 1;
`,
mediaObjectMessage: (_) => css_1.css `
align-self: center;
`,
mediaContentText: (theme) => [
css_1.css `
white-space: pre;
text-align: left;
padding: 20px;
width: 100%;
`,
theme.mediaContentFont,
],
mediaAudioButton: (_, { playing }) => css_1.css `
padding: 30px;
background: #eee;
border: 0;
border-radius: 200px;
color: transparent;
width: 30px;
height: 30px;
background-image: url("data:image/svg+xml,${encodeURIComponent(playing ? svg_icons_1.SVG_PAUSE : svg_icons_1.SVG_PLAY_ARROW)}");
cursor: pointer;
background-repeat: no-repeat;
background-position: center;
align-self: center;
position: absolute;
left: 50%;
margin-left: -30px;
`,
},
};

15

dist/constants/theme.d.ts

@@ -10,14 +10,5 @@ export declare const ThemeOptions: {

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -24,0 +15,0 @@ fontFamily: string;

24

dist/constants/theme.js

@@ -16,14 +16,14 @@ "use strict";

// Font settings
bodyFont: {
fontFamily: "Inter",
fontWeight: 400,
},
titleFont: {
fontFamily: "Inter",
fontWeight: 500,
},
headerFont: {
fontFamily: "Inter",
fontWeight: 500,
},
bodyFont: `
font-family: Inter;
font-weight: 400;
`,
titleFont: `
font-family: Inter;
font-weight: 500;
`,
headerFont: `
font-family: Inter;
font-weight: 500;
`,
mediaContentFont: {

@@ -30,0 +30,0 @@ fontFamily: "Times New Roman",

9

dist/context/NFTDataProvider.d.ts
import React from "react";
import { useNFTType } from "@zoralabs/nft-hooks/dist/src/hooks/useNFT";
import { useNFTMetadataType } from "@zoralabs/nft-hooks/dist/src/hooks/useNFTMetadata";
import { useNFTType, useNFTMetadataType } from "@zoralabs/nft-hooks";
declare type NFTDataProviderProps = {
id: string;
children: React.ReactNode;
initialData?: {
nft?: useNFTType["data"];
metadata?: useNFTMetadataType["metadata"];
};
};

@@ -13,3 +16,3 @@ declare type NFTDataContext = {

export declare const NFTDataContext: React.Context<NFTDataContext>;
export declare const NFTDataProvider: ({ id, children }: NFTDataProviderProps) => JSX.Element;
export declare const NFTDataProvider: ({ id, children, initialData, }: NFTDataProviderProps) => JSX.Element;
export {};

13

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;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const react_1 = __importDefault(require("react"));
const nft_hooks_1 = require("@zoralabs/nft-hooks");

@@ -16,8 +18,9 @@ const DEFAULT_OBJECT = {

});
const NFTDataProvider = ({ id, children }) => {
const NFTDataProvider = ({ id, children, initialData, }) => {
var _a;
const nft = nft_hooks_1.useNFT(id, true);
const metadata = nft_hooks_1.useNFTMetadata((_a = nft.data) === null || _a === void 0 ? void 0 : _a.nft.metadataURI);
const { nft: nftInitial, metadata: metadataInitial } = initialData || {};
const nft = nft_hooks_1.useNFT(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;

731

dist/context/useMediaContext.d.ts

@@ -16,14 +16,5 @@ import { Strings } from "../constants/strings";

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -52,14 +43,5 @@ fontFamily: string;

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -77,6 +59,3 @@ fontFamily: string;

lineSpacing: number;
}) => {
display: string;
flexWrap: string;
};
}) => string;
cardOuter: (theme: {

@@ -91,14 +70,5 @@ previewCard: {

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -116,18 +86,3 @@ fontFamily: string;

lineSpacing: number;
}, { hasClickEvent }: any) => {
transition: string;
"&:active": {
transform: string;
};
fontFamily: string;
fontWeight: number;
cursor: string | undefined;
background: string;
overflow: string;
borderRadius: string;
border: string;
margin: number;
width: string;
lineHeight: string;
};
}, { hasClickEvent }: any) => string;
cardHeader: (theme: {

@@ -142,14 +97,5 @@ previewCard: {

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -167,7 +113,3 @@ fontFamily: string;

lineSpacing: number;
}) => {
fontFamily: string;
fontWeight: number;
padding: string;
};
}) => string;
cardMediaWrapper: (theme: {

@@ -182,14 +124,5 @@ previewCard: {

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -207,10 +140,3 @@ fontFamily: string;

lineSpacing: number;
}) => {
width: number;
height: number;
display: string;
overflow: string;
position: string;
justifyContent: string;
};
}) => string;
cardItemInfo: (theme: {

@@ -225,14 +151,5 @@ previewCard: {

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -250,6 +167,3 @@ fontFamily: string;

lineSpacing: number;
}) => {
padding: string;
borderTop: string;
};
}) => string;
cardAuctionPerpetual: (theme: {

@@ -264,14 +178,5 @@ previewCard: {

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -289,10 +194,3 @@ fontFamily: string;

lineSpacing: number;
}) => {
display: string;
gridAutoFlow: string;
gridTemplateRows: string;
gridAutoColumns: string;
padding: string;
borderTop: string;
};
}) => string;
cardAuctionReserveActive: (theme: {

@@ -307,14 +205,5 @@ previewCard: {

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -332,12 +221,3 @@ fontFamily: string;

lineSpacing: number;
}) => {
display: string;
gridAutoFlow: string;
gridTemplateRows: string;
gridAutoColumns: string;
padding: string;
borderTop: string;
background: string;
color: string;
};
}) => string[];
cardAuctionReservePending: (theme: {

@@ -352,14 +232,5 @@ previewCard: {

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -377,11 +248,3 @@ fontFamily: string;

lineSpacing: number;
}) => {
display: string;
gridAutoFlow: string;
gridTemplateRows: string;
gridAutoColumns: string;
padding: string;
borderTop: string;
background: string;
};
}) => string[];
cardTitle: (theme: {

@@ -396,14 +259,5 @@ previewCard: {

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -421,10 +275,3 @@ fontFamily: string;

lineSpacing: number;
}) => {
fontFamily: string;
fontWeight: number;
maxWidth: number;
overflow: string;
whiteSpace: string;
textOverflow: string;
};
}) => string;
fullPage: (theme: {

@@ -439,14 +286,5 @@ previewCard: {

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -464,6 +302,3 @@ fontFamily: string;

lineSpacing: number;
}) => {
fontFamily: string;
fontWeight: number;
};
}) => string;
fullMediaWrapper: (_: {

@@ -478,14 +313,5 @@ previewCard: {

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -503,6 +329,3 @@ fontFamily: string;

lineSpacing: number;
}) => {
margin: string;
position: string;
};
}) => string;
fullItemInfo: (_: {

@@ -517,14 +340,5 @@ previewCard: {

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -542,3 +356,3 @@ fontFamily: string;

lineSpacing: number;
}) => {};
}) => string;
fullTitle: (_: {

@@ -553,14 +367,5 @@ previewCard: {

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -578,6 +383,3 @@ fontFamily: string;

lineSpacing: number;
}) => {
fontSize: string;
margin: string;
};
}) => string;
fullDescription: (theme: {

@@ -592,14 +394,5 @@ previewCard: {

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -617,6 +410,3 @@ fontFamily: string;

lineSpacing: number;
}) => {
fontSize: number;
margin: string;
};
}) => string;
fullOwnerAddress: (theme: {

@@ -631,14 +421,5 @@ previewCard: {

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -656,7 +437,3 @@ fontFamily: string;

lineSpacing: number;
}) => {
fontFamily: string;
fontWeight: number;
fontSize: number;
};
}) => string[];
fullLabel: (theme: {

@@ -671,14 +448,5 @@ previewCard: {

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -696,10 +464,3 @@ fontFamily: string;

lineSpacing: number;
}) => {
fontFamily: string;
fontWeight: number;
textTransform: string;
fontSize: string;
marginBottom: string;
opacity: number;
};
}) => string[];
fullPageHistoryItem: (theme: {

@@ -714,14 +475,5 @@ previewCard: {

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -739,9 +491,3 @@ fontFamily: string;

lineSpacing: number;
}) => {
fontWeight: number;
fontFamily: string;
margin: string;
display: string;
flexDirection: string;
};
}) => string[];
fullPageHistoryItemDatestamp: (theme: {

@@ -756,14 +502,5 @@ previewCard: {

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -781,9 +518,3 @@ fontFamily: string;

lineSpacing: number;
}) => {
fontSize: string;
paddingTop: string;
opacity: number;
fontFamily: string;
fontWeight: number;
};
}) => string[];
fullPageDataGrid: (_: {

@@ -798,14 +529,5 @@ previewCard: {

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -823,6 +545,3 @@ fontFamily: string;

lineSpacing: number;
}) => {
display: string;
gridGap: string;
};
}) => string;
infoContainer: (theme: {

@@ -837,14 +556,5 @@ previewCard: {

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -862,8 +572,3 @@ fontFamily: string;

lineSpacing: number;
}, { bottomPadding }: any) => {
border: string;
borderRadius: string;
padding: string;
position: string;
};
}, { bottomPadding }: any) => string;
fullProofLink: (theme: {

@@ -878,14 +583,5 @@ previewCard: {

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -903,23 +599,3 @@ fontFamily: string;

lineSpacing: number;
}) => {
display: string;
textDecoration: string;
color: string;
padding: string;
margin: string;
borderTop: string;
":hover": {
backgroundColor: string;
};
":after": {
content: string;
width: string;
height: string;
opacity: number;
backgroundImage: string;
color: string;
right: string;
position: string;
};
};
}) => string;
fullCreatorOwnerSection: (theme: {

@@ -934,14 +610,5 @@ previewCard: {

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -959,10 +626,3 @@ fontFamily: string;

lineSpacing: number;
}) => {
borderTop: number;
display: string;
gridAutoFlow: string;
gridTemplateRows: string;
gridAutoColumns: string;
padding: string;
};
}) => string[];
button: (theme: {

@@ -977,14 +637,5 @@ previewCard: {

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -1002,20 +653,3 @@ fontFamily: string;

lineSpacing: number;
}, { primary }: any) => {
transition: string;
"&:active": {
transform: string;
};
fontFamily: string;
fontWeight: number;
background: string;
color: string;
borderRadius: string;
padding: string;
font: string;
textDecoration: string;
margin: string;
border: string;
cursor: string;
display: string;
};
}, { primary }: any) => string;
textSubdued: (theme: {

@@ -1030,14 +664,5 @@ previewCard: {

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -1055,7 +680,3 @@ fontFamily: string;

lineSpacing: number;
}) => {
fontFamily: string;
fontWeight: number;
opacity: string;
};
}) => string[];
pricingAmount: (theme: {

@@ -1070,14 +691,5 @@ previewCard: {

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -1095,6 +707,3 @@ fontFamily: string;

lineSpacing: number;
}) => {
fontFamily: string;
fontWeight: number;
};
}) => string;
mediaLoader: (_: {

@@ -1109,14 +718,5 @@ previewCard: {

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -1134,17 +734,3 @@ fontFamily: string;

lineSpacing: number;
}, { mediaLoaded }: any) => {
position: string;
pointerEvents: string;
top: number;
left: number;
bottom: number;
right: number;
justifyContent: string;
alignItems: string;
opacity: number;
transition: string;
display: string;
alignContent: string;
justifyItems: string;
};
}, { mediaLoaded }: any) => string;
mediaObject: (_: {

@@ -1159,14 +745,5 @@ previewCard: {

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -1184,11 +761,3 @@ fontFamily: string;

lineSpacing: number;
}, { mediaLoaded, isFullPage }: any) => {
opacity: number;
transition: string;
maxHeight: string | undefined;
maxWidth: string | undefined;
display: string;
margin: string;
flexShrink: string;
};
}, { mediaLoaded, isFullPage }: any) => string;
mediaObjectMessage: (_: {

@@ -1203,14 +772,5 @@ previewCard: {

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -1228,5 +788,3 @@ fontFamily: string;

lineSpacing: number;
}) => {
alignSelf: string;
};
}) => string;
mediaContentText: (theme: {

@@ -1241,14 +799,5 @@ previewCard: {

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -1266,9 +815,5 @@ fontFamily: string;

lineSpacing: number;
}) => {
}) => (string | {
fontFamily: string;
whiteSpace: string;
textAlign: string;
padding: string;
width: string;
};
})[];
mediaAudioButton: (_: {

@@ -1283,14 +828,5 @@ previewCard: {

linkColor: string;
bodyFont: {
fontFamily: string;
fontWeight: number;
};
titleFont: {
fontFamily: string;
fontWeight: number;
};
headerFont: {
fontFamily: string;
fontWeight: number;
};
bodyFont: string;
titleFont: string;
headerFont: string;
mediaContentFont: {

@@ -1308,22 +844,6 @@ fontFamily: string;

lineSpacing: number;
}, { playing }: any) => {
padding: string;
background: string;
border: number;
borderRadius: string;
color: string;
width: string;
height: string;
backgroundImage: string;
cursor: string;
backgroundRepeat: string;
backgroundPosition: string;
alignSelf: string;
position: string;
left: string;
marginLeft: string;
};
}, { playing }: any) => string;
};
};
networkId: import("@zoralabs/nft-hooks/dist/src/constants/networks").NetworkIDs;
networkId: import("@zoralabs/nft-hooks/dist/constants/networks").NetworkIDs;
showBids: boolean;

@@ -1353,2 +873,3 @@ strings: {

OPEN_OFFERS: string;
PLACE_BID: string;
BID_HISTORY_LISTED: string;

@@ -1355,0 +876,0 @@ BID_HISTORY_MINTED: string;

6

dist/index.d.ts
import { Networks } from '@zoralabs/nft-hooks';
import { AuctionHouseList } from './auction-house/AuctionHouseList';
import { NFTPreview } from './nft-preview/NFTPreview';
import { NFTFullPage } from './nft-full/NFTFullPage';
import { NFTPreview, PreviewComponents } from './nft-preview';
import { NFTFullPage, FullComponents } from './nft-full';
import { MediaConfiguration } from './context/MediaContext';
export { Networks, MediaConfiguration, AuctionHouseList, NFTPreview, NFTFullPage, };
export { Networks, MediaConfiguration, AuctionHouseList, NFTPreview, PreviewComponents, NFTFullPage, FullComponents, };

12

dist/index.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.NFTFullPage = exports.NFTPreview = exports.AuctionHouseList = exports.MediaConfiguration = exports.Networks = void 0;
exports.FullComponents = exports.NFTFullPage = exports.PreviewComponents = exports.NFTPreview = exports.AuctionHouseList = exports.MediaConfiguration = exports.Networks = void 0;
const nft_hooks_1 = require("@zoralabs/nft-hooks");

@@ -8,7 +8,9 @@ Object.defineProperty(exports, "Networks", { enumerable: true, get: function () { return nft_hooks_1.Networks; } });

Object.defineProperty(exports, "AuctionHouseList", { enumerable: true, get: function () { return AuctionHouseList_1.AuctionHouseList; } });
const NFTPreview_1 = require("./nft-preview/NFTPreview");
Object.defineProperty(exports, "NFTPreview", { enumerable: true, get: function () { return NFTPreview_1.NFTPreview; } });
const NFTFullPage_1 = require("./nft-full/NFTFullPage");
Object.defineProperty(exports, "NFTFullPage", { enumerable: true, get: function () { return NFTFullPage_1.NFTFullPage; } });
const nft_preview_1 = require("./nft-preview");
Object.defineProperty(exports, "NFTPreview", { enumerable: true, get: function () { return nft_preview_1.NFTPreview; } });
Object.defineProperty(exports, "PreviewComponents", { enumerable: true, get: function () { return nft_preview_1.PreviewComponents; } });
const nft_full_1 = require("./nft-full");
Object.defineProperty(exports, "NFTFullPage", { enumerable: true, get: function () { return nft_full_1.NFTFullPage; } });
Object.defineProperty(exports, "FullComponents", { enumerable: true, get: function () { return nft_full_1.FullComponents; } });
const MediaContext_1 = require("./context/MediaContext");
Object.defineProperty(exports, "MediaConfiguration", { enumerable: true, get: function () { return MediaContext_1.MediaConfiguration; } });

28

dist/nft-full/AuctionInfo.js
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AuctionInfo = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importStar(require("react"));
const react_1 = __importStar(require("react"));
const AddressView_1 = require("../components/AddressView");

@@ -28,6 +46,6 @@ const CountdownDisplay_1 = require("../components/CountdownDisplay");

return (jsx_runtime_1.jsxs(InfoContainer_1.InfoContainer, Object.assign({ titleString: "AUCTION_ENDS" }, { children: [jsx_runtime_1.jsx(CountdownDisplay_1.CountdownDisplay, { to: auctionInfo.current.endingAt }, void 0),
jsx_runtime_1.jsx("div", { css: { height: "20px" } }, 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),
jsx_runtime_1.jsx("div", { css: { height: "20px" } }, void 0),
jsx_runtime_1.jsx("div", { style: { height: "20px" } }, void 0),
jsx_runtime_1.jsx("div", Object.assign({}, getStyles("fullLabel"), { children: getString("BIDDER") }), void 0),

@@ -38,3 +56,3 @@ jsx_runtime_1.jsx(AddressView_1.AddressView, { address: (_c = auctionInfo.highestBid) === null || _c === void 0 ? void 0 : _c.placedBy }, void 0)] }), void 0));

return (jsx_runtime_1.jsxs(InfoContainer_1.InfoContainer, Object.assign({ titleString: "AUCTION_SOLD_FOR" }, { children: [getPricingString((_d = auctionInfo.highestBid) === null || _d === void 0 ? void 0 : _d.pricing),
jsx_runtime_1.jsx("div", { css: { height: "20px" } }, void 0),
jsx_runtime_1.jsx("div", { style: { height: "20px" } }, void 0),
jsx_runtime_1.jsx("div", Object.assign({}, getStyles("fullLabel"), { children: getString("BIDDER") }), void 0),

@@ -41,0 +59,0 @@ jsx_runtime_1.jsx(AddressView_1.AddressView, { address: (_e = auctionInfo.highestBid) === null || _e === void 0 ? void 0 : _e.placedBy }, void 0)] }), void 0));

24

dist/nft-full/CreatorEquity.js
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CreatorEquity = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importStar(require("react"));
const react_1 = __importStar(require("react"));
const NFTDataProvider_1 = require("../context/NFTDataProvider");

@@ -12,4 +30,4 @@ const InfoContainer_1 = require("./InfoContainer");

const getContent = (nft) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [Math.floor(nft.creatorBidSharePercentage), "%"] }, void 0));
return (jsx_runtime_1.jsxs(InfoContainer_1.InfoContainer, Object.assign({ titleString: "CREATOR_EQUITY" }, { children: [jsx_runtime_1.jsx("div", { css: { height: '15px' } }, void 0), data && getContent(data.nft)] }), void 0));
return (jsx_runtime_1.jsxs(InfoContainer_1.InfoContainer, Object.assign({ titleString: "CREATOR_EQUITY" }, { children: [jsx_runtime_1.jsx("div", { style: { height: '15px' } }, void 0), data && getContent(data.nft)] }), void 0));
};
exports.CreatorEquity = CreatorEquity;

6

dist/nft-full/NFTFullPage.d.ts
/// <reference types="react" />
import { NFTPageWrapperProps } from "../components/NFTPageWrapper";
declare type NFTFullPageProps = {
id: string;
showBids?: boolean;
showAuthenticity?: boolean;
};
export declare const NFTFullPage: ({ id, showBids, showAuthenticity }: NFTFullPageProps) => JSX.Element;
} & Omit<NFTPageWrapperProps, 'children'>;
export declare const NFTFullPage: ({ showBids, showAuthenticity, ...wrapperProps }: NFTFullPageProps) => JSX.Element;
export {};

10

dist/nft-full/NFTFullPage.js

@@ -5,6 +5,5 @@ "use strict";

const jsx_runtime_1 = require("react/jsx-runtime");
const MediaFull_1 = require("./MediaFull");
const useMediaContext_1 = require("../context/useMediaContext");
const ProofAuthenticity_1 = require("./ProofAuthenticity");
const NFTDataProvider_1 = require("../context/NFTDataProvider");
const MediaFull_1 = require("./MediaFull");
const AuctionInfo_1 = require("./AuctionInfo");

@@ -14,6 +13,9 @@ const BidHistory_1 = require("./BidHistory");

const MediaInfo_1 = require("./MediaInfo");
const NFTFullPage = ({ id, showBids = true, showAuthenticity = true }) => {
const NFTPageWrapper_1 = require("../components/NFTPageWrapper");
const PlaceOfferButton_1 = require("./PlaceOfferButton");
const NFTFullPage = ({ showBids = true, showAuthenticity = true, ...wrapperProps }) => {
const { getStyles } = useMediaContext_1.useMediaContext();
return (jsx_runtime_1.jsx(NFTDataProvider_1.NFTDataProvider, Object.assign({ id: id }, { children: jsx_runtime_1.jsxs("div", Object.assign({}, getStyles("fullPage"), { children: [jsx_runtime_1.jsx(MediaFull_1.MediaFull, {}, void 0),
return (jsx_runtime_1.jsx(NFTPageWrapper_1.NFTPageWrapper, Object.assign({}, wrapperProps, { children: jsx_runtime_1.jsxs("div", Object.assign({}, getStyles("fullPage"), { children: [jsx_runtime_1.jsx(MediaFull_1.MediaFull, {}, void 0),
jsx_runtime_1.jsxs("div", Object.assign({}, getStyles("fullPageDataGrid"), { children: [jsx_runtime_1.jsx(MediaInfo_1.MediaInfo, {}, void 0),
jsx_runtime_1.jsx(PlaceOfferButton_1.PlaceOfferButton, {}, void 0),
showBids && jsx_runtime_1.jsx(AuctionInfo_1.AuctionInfo, {}, void 0),

@@ -20,0 +22,0 @@ showAuthenticity && jsx_runtime_1.jsx(ProofAuthenticity_1.ProofAuthenticity, {}, void 0),

24

dist/nft-full/ProofAuthenticity.js
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ProofAuthenticity = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importStar(require("react"));
const react_1 = __importStar(require("react"));
const NFTDataProvider_1 = require("../context/NFTDataProvider");

@@ -19,4 +37,4 @@ const media_urls_1 = require("../constants/media-urls");

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));
return (jsx_runtime_1.jsxs(InfoContainer_1.InfoContainer, Object.assign({ titleString: "PROOF_AUTHENTICITY", bottomPadding: false }, { children: [jsx_runtime_1.jsx("div", { css: { height: '15px' } }, void 0), data && getContent(data.nft)] }), void 0));
return (jsx_runtime_1.jsxs(InfoContainer_1.InfoContainer, Object.assign({ titleString: "PROOF_AUTHENTICITY", bottomPadding: false }, { children: [jsx_runtime_1.jsx("div", { style: { height: '15px' } }, void 0), data && getContent(data.nft)] }), void 0));
};
exports.ProofAuthenticity = ProofAuthenticity;

7

dist/nft-preview/NFTPreview.d.ts
/// <reference types="react" />
import { NFTPageWrapperProps } from "../components/NFTPageWrapper";
export declare type NFTPreviewProps = {
id: string;
style?: any;
onClick?: (evt: React.MouseEvent<HTMLElement>) => void;
showBids?: boolean;
};
export declare const NFTPreview: ({ id, onClick, showBids: showBidsLocal, }: NFTPreviewProps) => JSX.Element;
} & Omit<NFTPageWrapperProps, 'children'>;
export declare const NFTPreview: ({ onClick, showBids: showBidsLocal, ...wrapperProps }: NFTPreviewProps) => JSX.Element;

10

dist/nft-preview/NFTPreview.js

@@ -5,12 +5,12 @@ "use strict";

const jsx_runtime_1 = require("react/jsx-runtime");
const MediaThumbnail_1 = require("./MediaThumbnail");
const PricingComponent_1 = require("../components/PricingComponent");
const PricingComponent_1 = require("./PricingComponent");
const useMediaContext_1 = require("../context/useMediaContext");
const NFTDataProvider_1 = require("../context/NFTDataProvider");
const NFTPageWrapper_1 = require("../components/NFTPageWrapper");
const MediaThumbnailWrapper_1 = require("./MediaThumbnailWrapper");
const NFTPreview = ({ id, onClick = undefined, showBids: showBidsLocal, }) => {
const MediaThumbnail_1 = require("./MediaThumbnail");
const NFTPreview = ({ onClick = undefined, showBids: showBidsLocal, ...wrapperProps }) => {
const { showBids } = useMediaContext_1.useMediaContext();
return (jsx_runtime_1.jsx(NFTDataProvider_1.NFTDataProvider, Object.assign({ id: id }, { children: jsx_runtime_1.jsxs(MediaThumbnailWrapper_1.MediaThumbnailWrapper, Object.assign({ onClick: onClick }, { children: [jsx_runtime_1.jsx(MediaThumbnail_1.MediaThumbnail, {}, void 0),
return (jsx_runtime_1.jsx(NFTPageWrapper_1.NFTPageWrapper, Object.assign({}, wrapperProps, { children: jsx_runtime_1.jsxs(MediaThumbnailWrapper_1.MediaThumbnailWrapper, Object.assign({ onClick: onClick }, { children: [jsx_runtime_1.jsx(MediaThumbnail_1.MediaThumbnail, {}, void 0),
(showBidsLocal === undefined ? showBids : showBidsLocal) && (jsx_runtime_1.jsx(PricingComponent_1.PricingComponent, {}, void 0))] }), void 0) }), void 0));
};
exports.NFTPreview = NFTPreview;

8

package.json
{
"name": "@zoralabs/nft-components",
"version": "0.0.2-pre",
"version": "0.0.4-pre",
"description": "NFT Media Rendering Components",

@@ -18,6 +18,8 @@ "typings": "dist/index.d.ts",

"@types/react": "^17.0.5",
"@zoralabs/nft-hooks": "^0.1.5",
"@zoralabs/nft-hooks": "^0.1.7",
"merge-anything": "^4.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2"
"react-dom": "^17.0.2",
"swr": "^0.5.6",
"tslib": "^2.2.0"
},

@@ -24,0 +26,0 @@ "devDependencies": {

dist/components/PricingComponent.d.ts
dist/components/PricingComponent.js
dist/stories/AuctionHouse.stories.d.ts
dist/stories/AuctionHouse.stories.js
dist/stories/Button.stories.d.ts
dist/stories/Button.stories.js
dist/stories/CountdownDisplay.stories.d.ts
dist/stories/CountdownDisplay.stories.js
dist/stories/NFTFull.stories.d.ts
dist/stories/NFTFull.stories.js
dist/stories/NFTPreview.stories.d.ts
dist/stories/NFTPreview.stories.js
dist/stories/Theming.stories.d.ts
dist/stories/Theming.stories.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc