feat: update ChainSelector and SelectTrigger components for enhanced styling and functionality

Author: ErwanDecoster

.vitepress/theme/style.css

@@ -76,6 +76,15 @@
   --color-danger-2: var(--vp-c-red-2);
   --color-danger-3: var(--vp-c-red-3);
   --color-danger-soft: var(--vp-c-red-soft);
+
+  /* ShadCN */
+  --color-muted-foreground: var(--vp-c-text-3);
+  --color-ring: var(--vp-c-brand-2);
+  --color-destructive: var(--vp-c-red-2);
+  --color-popover: var(--vp-c-bg);
+  --color-popover-foreground: var(--vp-c-text-1);
+  --color-accent: var(--vp-c-bg-soft);
+  --color-accent-foreground: var(--vp-c-text-1);
 }
 
 :root {

src/components/ChainSelector.vue

@@ -1,35 +1,55 @@
 <template>
-  <Select>
-    <SelectTrigger>
-      <SelectValue placeholder="Select Chain" />
-    </SelectTrigger>
-    <SelectContent>
-      <SelectGroup
-        v-for="chain in filteredChains"
-        :key="chain.id"
-        :value="chain.id.toString()"
-        :class="className"
-      >
-        <SelectItem :value="chain.id.toString()">
-          <img :src="chain.icon" class="size-4" :alt="chain.name" />
-          {{ chain.name }}
+  <div class="flex items-center">
+    <Select v-model="selectedChainId" :class="className">
+      <SelectTrigger>
+        <SelectValue :placeholder="selectedChain?.name || 'Select chain'">
+          <div v-if="selectedChain" class="flex items-center gap-2">
+            <img
+              v-if="selectedChain.icon"
+              :src="selectedChain.icon"
+              :alt="selectedChain.name"
+              class="h-4 w-4 rounded-full"
+            />
+            <span>{{ selectedChain.name }}</span>
+          </div>
+          <span v-else>Select Chain</span>
+        </SelectValue>
+      </SelectTrigger>
+
+      <SelectContent>
+        <SelectItem
+          v-for="chain in filteredChains"
+          :key="chain.id"
+          :value="chain.id.toString()"
+        >
+          <SelectItemText>
+            <div class="flex items-center gap-2">
+              <img
+                v-if="chain.icon"
+                :src="chain.icon"
+                :alt="chain.name"
+                class="h-4 w-4 rounded-full"
+              />
+              <span>{{ chain.name }}</span>
+            </div>
+          </SelectItemText>
         </SelectItem>
-      </SelectGroup>
-    </SelectContent>
-  </Select>
+      </SelectContent>
+    </Select>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
 import { useAccount } from '@wagmi/vue';
 import { useChainSwitch } from '@/hooks/useChainSwitch';
 import { getSupportedChains, getChainById } from '@/utils/chain.utils';
 import useUserStore from '@/stores/useUser.store';
 import {
   Select,
   SelectContent,
-  SelectGroup,
   SelectItem,
+  SelectItemText,
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
@@ -49,32 +69,34 @@ const userStore = useUserStore();
 const filteredChains = getSupportedChains();
 
 // Computed
+const selectedChain = computed(() => {
+  const currentChainId = chainId.value || userStore.chainId;
+  return currentChainId ? getChainById(currentChainId) : undefined;
+});
+
 const selectedChainId = computed({
   get: () => {
-    return (chainId.value || userStore.chainId || -1).toString();
+    const currentChainId = chainId.value || userStore.chainId;
+    return currentChainId ? currentChainId.toString() : '';
   },
-  set: (value: string) => {
+  set: async (value: string) => {
     const numericValue = Number(value);
-    if (numericValue !== -1) {
+    if (numericValue && numericValue !== -1) {
       const chain = getChainById(numericValue);
       if (chain) {
         userStore.setSelectedChain(chain);
+        await requestChainChange(numericValue);
       }
     }
   },
 });
 
-// Methods
-async function handleChainChange(value: string) {
-  const numericValue = Number(value);
-
-  if (numericValue === -1) return;
-
-  const chain = getChainById(numericValue);
-  if (chain) {
-    userStore.setSelectedChain(chain);
-
-    await requestChainChange(numericValue);
+watch(chainId, (newChainId) => {
+  if (newChainId) {
+    const chain = getChainById(newChainId);
+    if (chain) {
+      userStore.setSelectedChain(chain);
+    }
   }
-}
+});
 </script>

src/components/ui/select/SelectTrigger.vue

@@ -27,7 +27,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
     :class="
       cn(
-        `border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+        `border-border! data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive bg-soft-bg! flex w-fit items-center justify-between gap-2 rounded-md border px-3! py-2! text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
         props.class
       )
     "