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>

m-listing-name

Displays the name of the listed token in a span. Pulls the data from on-chain.

<div
  data-widget="m-listing-name"
  data-id="LISTING_ID"
  data-network="NETWORK"
></div>

m-listing-price

Displays the listing price’s label and the listing’s price, along with a bid status if the listing is an auction and the user has participated in the bid.

The listing label is one of the following:

• “Bidding Starts At” — if the listing is of type auction, is still ongoing, and does not have any bids.
• “Price” — if listing is not of type auction or if the listing has ended and there is a current bid amount.
• “Current Bid” — if the listing is of type auction, is still ongoing, and has at least one bid.
• “Winning Bid” — if the listing is of type auction, has ended, and has a current bid amount.

If the listing is a ranked auction, the price widget also displays the highest offer and the floor value.

<div
  data-widget="m-listing-price"
  data-id="LISTING_ID"
  data-network="NETWORK"
></div>