hway/pkg/islands/coin_select.templ

71 lines
2.0 KiB
Plaintext
Raw Normal View History

package islands
type Coin struct {
Ticker string
Name string
IsDefault bool
}
var defaultCoins = []Coin{
{Ticker: "SNR", Name: "Sonr", IsDefault: true},
{Ticker: "BTC", Name: "Bitcoin", IsDefault: true},
{Ticker: "ETH", Name: "Ethereum", IsDefault: true},
{Ticker: "SOL", Name: "Solana", IsDefault: false},
{Ticker: "LTC", Name: "Litecoin", IsDefault: false},
{Ticker: "DOGE", Name: "Dogecoin", IsDefault: false},
{Ticker: "XRP", Name: "Ripple", IsDefault: false},
{Ticker: "OSMO", Name: "Osmosis", IsDefault: false},
{Ticker: "ATOM", Name: "Cosmos", IsDefault: false},
{Ticker: "STARZ", Name: "Stargaze", IsDefault: false},
{Ticker: "AKT", Name: "Akash", IsDefault: false},
{Ticker: "EVMOS", Name: "Evmos", IsDefault: false},
{Ticker: "FIL", Name: "Filecoin", IsDefault: false},
{Ticker: "AXL", Name: "Axelar", IsDefault: false},
}
templ CoinSelect() {
<sl-select
label="Accounts"
name="selected_assets"
value="SNR BTC ETH"
help-text="Select Blockchains to connect with your Vault"
multiple
class="custom-tag py-2"
>
for _, a := range defaultCoins {
@CoinOption(a)
}
</sl-select>
<script>
const select = document.querySelector('.custom-tag');
select.getTag = (option, index) => {
// Use the same icon used in the <sl-option>
const name = option.querySelector('sl-icon[slot="prefix"]').name;
// You can return a string, a Lit Template, or an HTMLElement here
return `
<sl-tag removable>
<sl-icon name="${name}" library="crypto" style="padding-inline-end: .5rem;"></sl-icon>
${option.getTextLabel()}
</sl-tag>
`;
};
</script>
}
templ CoinOption(a Coin) {
if a.IsDefault {
<sl-option value={ a.Ticker } selected disabled>
<sl-icon slot="prefix" name={ a.Ticker } library="crypto"></sl-icon>
{ a.Name }
</sl-option>
<sl-divider></sl-divider>
} else {
<sl-option value={ a.Ticker }>
<sl-icon slot="prefix" name={ a.Ticker } library="crypto"></sl-icon>
{ a.Name }
</sl-option>
<sl-divider></sl-divider>
}
}