Window Events

There are a few events you can leverage when using the Marketplace Widgets.

This page assumes you are using individual listing widgets and have basic programming knowledge about events.

[Deprecated after 3.0.0 ] window.load and m-refresh-widgets

On window load, the marketplace code attempts to replace each element with a recognized data-widget value.

• You can trigger the replacement code again by dispatching a custom event, m-refresh-widgets.

window.dispatchEvent(new Event("m-refresh-widgets"));

• m-refresh-widgets runs the same replacement code.

• If nothing is found, an error will be logged in the console stating that there were no widgets to replace.

m-refresh-widgets can also be a CustomEvent with a detail prop of shape:

interface MRefreshWidgetsEventDetail {
  widget: string;
}

where detail.widget can have value "marketplace" to trigger only a refresh of marketplace widgets. This is useful if you have more than one type of widget that supports this reload event and do not want to trigger the refresh of the other widgets.

m-marketplace_widget_injected

Event emitted when the instantiated widget has been injected into the DOM tree. For a widget to emit this event, it needs to have a non-empty data-widget-key value when the widget is first initiated.

• Do not use conditional rendering (e.g.: v-if with Vue, ternary operators with React) with this event in any usage where replacing the data-widgets are required.

  • If you set a conditional render on a boolean state depending on whether the event has been emitted, the event will not trigger in the first place as the DOM wouldn’t contain the widgets to replace.

• Use this with display: none and display: inherit (or any value to show the DOM element).

The emitted event is a CustomEvent with the detail prop of shape:

interface MMarketplaceWidgetInjectedEventDetail {
  key: string; // the passed-in `data-key` value
  contractAddress: string; // contract to which the listing belongs
  listingId: string;
}

m-marketplace_listing_loaded

Event emitted when the instantiated widget's listing has been completed loaded. This event only fires once per unique listing, even if there are multiple widgets on the page with the same listing ID.

The emitted event is a CustomEvent with the detail prop of shape:

interface MMarketplaceWidgetInjectedEventDetail {
  key: string; // the passed-in `data-key` value
  contractAddress: string; // contract to which the listing belongs
  listingId: string;
}

This event can be used to hide a custom loading screen once captured.

m-marketplace_tx_id_verify

Supported in CDN version: >= 2.4.0.

Event emitted as part of a deferred identity verification process. For a widget to emit this event, it needs to have it's data-emits-identity-verify value set to "true" when the widget is first initiated. The listing must also have been initiated with an identity verifier address.

The emitted event is a CustomEvent with the detail prop of shape:

interface MMarketplaceTxIdVerifyEventDetail {
  contractAddress: string; // contract to which the listing belongs
  listingId: string;
  transactionId: string; // id of the transaction that needs to be passed back once the verification is complete
  buyerAddress: string; // address of the wallet that triggered the identity verification process
  transactionObject: {
    amount: ethers.BigNumber;
    bidOrPurchase: "bid" | "purchase" | "purchaseMultiple";
    bpTxParams: [ethers.BigNumber | undefined , boolean | undefined];
    data?: string;
    referralAddress?: string;
    count?: number;
  };
}

The identity verification process is deferred to an external party and the transaction is put on hold until the m-marketplace_tx_id_complete event is received.

m-marketplace_tx_id_complete

Supported in CDN version: >= 2.4.0.

Expected event as part of a deferred identity verification process. For a widget to listen to this event, it needs to have it's data-emits-identity-verify value set to "true" when the widget is first initiated. The listing must also have been initiated with an identity verifier address.

The expected event is a CustomEvent with the detail prop of shape:

interface MMarketplaceTxIdCompleteEventDetail {
  transactionId: string; // id of the transaction that needs to be passed back once the verification is complete
  verified: boolean; // whether the buyerAddress was successfully verified or not
  identityVerifierData?: string; // any additional identity verification byte data that will be passed to the identity verifier smart contract
}

The identity verification process continues once the event is received.

If verified is a nullish value or omitted, the verification will error. It is possible to re-send another event with the same transactionId with the correct verified prop.

If verified is false, the deferred external identity verification has failed and the transaction will not be submitted.