refactor: update index views to use new nebula components

internal/nebula/form/input_coin_select.templ

@@ -0,0 +1,70 @@
+package form
+
+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 InputCoinSelect() {
+	<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>
+	}
+}