#MyMonero Web Components plugin
This npm module is a collection of Lit-based web components. These components are used by the desktop, Android and web versions of the MyMonero wallet.
The package is comprised of the following components:
- Activity Indicator
<activity-indicator>- A generic, customisable activity indicator component - Provider Card
<provider-card>- A UI component used to display MyMonero's various Exchange service providers - Searchable Select
<searchable-select>- A dropdown-based searchable select web component - Wallet Selector
<wallet-selector>- A component that renders a list of XMR wallets
npm i @mymonero/mymonero-web-components
Usage
To make use of these components, import this module the same way you would a normal NPM package.
In your javascript file:
require('@mymonero/mymonero-web-components');
This will register the web component custom element tags, making them available for use in your HTML DOM
Then, in your HTML, use any of the custom elements like so:
<activity-indicator></activity-indicator>
Shows an animated indicator alongside an optional text message.
<activity-indicator .loadingText=${"Loading supported currencies"}></activity-indicator>
Suggested usage of this element would include a conditional expression to specify whether it should be hidden or not. For example:
<activity-indicator ?hidden=${this.hideActivityIndicator}></activity-indicator>
<provider-card .service=${service}></provider-card>
.service should be a JSON object in the following format:
{
service_provider: "localmonero",
title: "Buy Monero using LocalMonero",
description: "Long description text"
}
A drop-down based select input field. Pass a list of your values in the following format:
[
{
label: "Text to show inside <option> tag",
value: "Value for `<option value=${value}>`"
}
]
<searchable-select .values=${fiatCurrencies}></searchable-select>
Emits the event searchable-select-update once a user selects a value
<wallet-selector></wallet-selector>