sonr/gateway/islands/coin_select.templ

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>
	}
}