Listing Widgets
Individual widgets, prepended by m-listing-
, are standalone widgets that pull specific data from a listing. They are exported to give creators more freedom as to how they want to organise their listing page.
m-listing-attributes
Displays the attributes and their values for the token.
<div
data-widget="m-listing-attributes"
data-id="LISTING_ID"
data-network="NETWORK"
></div>
m-listing-bid-form
Shows an input field for the bid and a CTA. It displays nothing when the listing has ended (replaces the parent div with a comment, <!---->
).
<div
data-widget="m-listing-bid-form"
data-address="CONTRACT_ADDRESS"
data-id="LISTING_ID"
data-network="NETWORK"
data-version="2"
></div>
m-listing-bid-form-rich
Contains text for the minimum bid or offer/bid or offer status, the current bid currency, and the balance of the connected wallet. Displays nothing (<!---->
) if the listing has ended.
<div
data-widget="m-listing-bid-form-rich"
data-id="LISTING_ID"
data-network="NETWORK"
></div>
m-listing-countdown
Displays a countdown ticker for the auction or the appropriate if the listing has not yet started/has ended.
<div
data-widget="m-listing-countdown"
data-id="LISTING_ID"
data-network="NETWORK"
></div>
m-listing-description
Loads the token's on-chain description.
The equivalent HTML code looks something like this:
<div class="m-description">
::before
<p>test</p>
</div>
The ::before
pseudo-component contains the “DESCRIPTION” header.
<div
data-widget="m-listing-description"
data-id="LISTING_ID"
data-network="NETWORK"
></div>
m-listing-interactions
[Updated name] In versions < 3.2.0: m-listing-bids
.
Shows the listing's bid/offer history as a table.
<div
data-widget="m-listing-interactions"
data-id="LISTING_ID"
data-network="NETWORK"
></div>
m-listing-image-expandable
Displays the listing media and a floating action button on the bottom-right to allow for expanding the media into a full-screen view.
<div
data-widget="m-listing-image-expandable"
data-id="LISTING_ID"
data-network="NETWORK"
></div>
To customize the widget background, provide a data-media-background
prop.
m-listing-inventory
For ERC-1155 listings only. Displays the following text
${ tokenRemaining } of ${ tokenMax } left
when tokenRemaining > 0
with a progress bar above it.
When tokenRemaining = 0
, we display
tokenRemaining
and tokenMax
come from the listing
details (listing.totalSold
and listing.totalAvailable
respectively).
<div
data-widget="m-listing-inventory"
data-id="LISTING_ID"
data-network="NETWORK"
></div>
m-listing-links
Shows a list of links related to the listing.
<div
data-widget="m-listing-links"
data-id="LISTING_ID"
data-network="NETWORK"
></div>
m-listing-minted-counter
For ERC-1155s listings only. Displays the following text
`${amount_of_tokens_minted} out of ${max_mintable_token_amount} minted so far`
where amount_of_tokens_minted
and max_mintable_token_amount
are pulled from the listing
details (listing.totalSold
and listing.totalAvailable
respectively). Also has a progress bar above the counter text. Similar to m-listing-inventory
.
<div
data-widget="m-listing-minted-counter"
data-id="LISTING_ID"
data-network="NETWORK"
></div>
Last updated