# Window Events

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

{% hint style="info" %}
This page assumes you are using individual listing widgets and have basic programming knowledge about events.
{% endhint %}

<details>

<summary>[Deprecated after <code>3.0.0</code> ] <code>window.load</code> and <code>m-refresh-widgets</code></summary>

On window load, the marketplace code attempts to replace each element with a recognized [`data-widget` value](https://docs.manifold.xyz/manifold-for-developers/resources/widgets/widgets/data-attributes#data-widget-required).

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

```javascript
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:

```javascript
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.

</details>

<details>

<summary><code>m-marketplace_widget_injected</code></summary>

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](https://docs.manifold.xyz/manifold-for-developers/resources/widgets/widgets/data-attributes#data-key) 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:

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

</details>

<details>

<summary><code>m-marketplace_listing_loaded</code></summary>

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:

<pre class="language-javascript"><code class="lang-javascript"><strong>interface MMarketplaceWidgetInjectedEventDetail {
</strong>  key: string; // the passed-in `data-key` value
  contractAddress: string; // contract to which the listing belongs
  listingId: string;
}
</code></pre>

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

</details>

<details>

<summary><code>m-marketplace_tx_id_verify</code></summary>

**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](https://docs.manifold.xyz/manifold-for-developers/resources/widgets/widgets/data-attributes#data-emits-identity-verify) 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:

<pre class="language-typescript"><code class="lang-typescript"><strong>interface MMarketplaceTxIdVerifyEventDetail {
</strong>  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;
  };
}
</code></pre>

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.

</details>

<details>

<summary><code>m-marketplace_tx_id_complete</code></summary>

**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](https://docs.manifold.xyz/manifold-for-developers/resources/widgets/widgets/data-attributes#data-emits-identity-verify) 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:

<pre class="language-typescript"><code class="lang-typescript"><strong>interface MMarketplaceTxIdCompleteEventDetail {
</strong>  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
}
</code></pre>

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.

</details>