Walisto

A web component widget to list your crypto wallets

Installation

You can use a CDN and add the followin to the head of your page:

<!-- using unpkg -->
<script
  type="module"
  src="https://unpkg.com/walisto@<VERSION>/dist/index.js"
></script>

Usage

There's two components: <walisto-container> and <walisto-item>. <walisto-container> is only used for styling and it is completely optional.

<walisto-item> accepts the following props:

• address: The address to display
• name: The name of the currency

<walisto-container>
  <template>
    <walisto-item
      part="item"
      name="BTC"
      address="testbtcaddress"
    ></walisto-item>
    <walisto-item
      part="item"
      name="ETH"
      address="testethaddress"
    ></walisto-item>
  </template>
</walisto-container>

NOTE: You can add a part attribute to whatever you have in the template to style it.

The following CSS custom properties can be overriden on <walisto-item>:

walisto-item {
  --walisto-item-bg: #222;
  --walisto-font-color: #ddd;
  --walisto-button-font-color: var(--walisto-font-color);
  --walisto-button-bg: #555;
  --walisto-button-bg-hover: #777;
  --walisto-button-bg-active: #999;
  --walisto-outline-fv: 2px solid #07d;
}

And you can style the following parts:

• term: the name of the currency
• definition: the address and buttons
• address: the address only
• buttons: the buttons container
• button: the buttons themselves

Modal styling

Since the modal gets added on the body itself, styling should be done separately using the following CSS custom properties:

walisto-modal {
  --walisto-modal-bg: #222;
  --walisto-modal-backdrop-bg: rgba(250, 250, 250, 0.2);
  --walisto-modal-button-bg: #555;
  --walisto-modal-button-bg-hover: #777;
  --walisto-modal-button-bg-active: #999;
  --walisto-modal-font-color: #ddd;
  --walisto-modal-button-font-color: var(--walisto-modal-font-color);
  --walisto-modal-font-family: monospace;
  --walisto-modal-outline-fv: 2px solid #07d;
}

And the following parts are available:

• backdrop: the backdrop of the modal
• content: the modal content itself
• header: the header of the modal
• title: the title (h1) on the header
• button: the button for closing the modal
• image: the QR code image