A web component widget to list your crypto wallets
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.min.js"></script>
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 displayname
: 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 currencydefinition
: the address and buttonsaddress
: the address onlybuttons
: the buttons containerbutton
: the buttons themselves
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 modalcontent
: the modal content itselfheader
: the header of the modaltitle
: the title (h1) on the headerbutton
: the button for closing the modalimage
: the QR code image