search

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.

chevron-rightm-listing-attributeshashtag

Displays the attributes and their values for the token.

<div
  data-widget="m-listing-attributes"
  data-id="LISTING_ID"
  data-network="NETWORK"
></div>
chevron-rightm-listing-bid-formhashtag

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>
chevron-rightm-listing-bid-form-richhashtag

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>
chevron-rightm-listing-countdownhashtag

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>
chevron-rightm-listing-descriptionhashtag

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>
chevron-rightm-listing-interactionshashtag

[Updated name] In versions < 3.2.0: m-listing-bids.

Shows the listing's bid/offer history as a table.

m-listing-interactions: offers, dark

chevron-rightm-listing-image-expandablehashtag

Displays the listing media and a floating action button on the bottom-right to allow for expanding the media into a full-screen view.

To customize the widget background, provide a data-media-background prop.

chevron-rightm-listing-inventoryhashtag

For ERC-1155 listings only. Displays the following text

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).

chevron-rightm-listing-linkshashtag

Shows a list of links related to the listing.

chevron-rightm-listing-minted-counterhashtag

For ERC-1155s listings only. Displays the following text

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.

chevron-rightm-listing-namehashtag

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

chevron-rightm-listing-pricehashtag

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.

Last updated