feat: add lucide-vue-next dependency and update ChainSelector component for improved select functionality

Author: ErwanDecoster

package-lock.json

@@ -20,6 +20,7 @@
     "@vueuse/core": "^13.6.0",
     "@wagmi/vue": "^0.1.24",
     "clsx": "^2.1.1",
+    "lucide-vue-next": "^0.539.0",
     "pinia": "^3.0.3",
     "reka-ui": "^2.4.1",
     "tailwind-merge": "^3.3.1",

package.json

@@ -1,21 +1,21 @@
 <template>
-  <Select
-    v-model="selectedChainId"
-    :placeholder="'Select Chain'"
-    :class="className"
-    @update:model-value="handleChainChange"
-  >
-    <SelectItem
-      v-for="chain in filteredChains"
-      :key="chain.id"
-      :value="chain.id.toString()"
-      :class="className"
-    >
-      <div class="flex items-center gap-2">
-        <img :src="chain.icon" class="size-4" :alt="chain.name" />
-        {{ chain.name }}
-      </div>
-    </SelectItem>
+  <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 }}
+        </SelectItem>
+      </SelectGroup>
+    </SelectContent>
   </Select>
 </template>
 
@@ -25,8 +25,14 @@ 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 from '@/components/ui/Select.vue';
-import SelectItem from '@/components/ui/SelectItem.vue';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 
 interface Props {
   className?: string;

src/components/ChainSelector.vue

@@ -1,5 +1,7 @@
 import { arbitrum } from 'viem/chains';
 import { bellecour } from './bellecourChainConfig';
+import arbitrumLogo from '@/assets/icons/arbitrum.svg';
+import iexecLogo from '@/assets/icons/iexec-logo.png';
 
 export interface Chain {
   id: number;
@@ -28,15 +30,15 @@ export function getSupportedChains(): Chain[] {
     {
       id: arbitrum.id,
       name: arbitrum.name,
-      icon: '/assets/icons/arbitrum.svg',
+      icon: arbitrumLogo,
       nativeCurrency: arbitrum.nativeCurrency,
       rpcUrls: arbitrum.rpcUrls,
       blockExplorers: arbitrum.blockExplorers,
     },
     {
       id: bellecour.id,
       name: bellecour.name,
-      icon: '/assets/icons/iexec-logo.png',
+      icon: iexecLogo,
       nativeCurrency: bellecour.nativeCurrency,
       rpcUrls: bellecour.rpcUrls,
       blockExplorers: bellecour.blockExplorers,