fix: navbar selector

components/navbar/ChainSelectDropdown.vue

@@ -20,10 +20,11 @@ import { getChainNameByPrefix } from '@/utils/chain'
 
 const { availableChains } = useChain()
 const { $store } = useNuxtApp()
+const { urlPrefix } = usePrefix()
 const router = useRouter()
 
 const selected = computed({
-  get: () => $store.getters.getSettings['urlPrefix'],
+  get: () => urlPrefix.value,
   set: (value) => {
     $store.dispatch('setUrlPrefix', value)
     router.push({ path: `/${value}` })

components/navbar/NavbarExploreOptions.vue

@@ -29,17 +29,18 @@
 </template>
 
 <script lang="ts" setup>
-const { $router } = useNuxtApp()
+const { $router, $store } = useNuxtApp()
 const { urlPrefix } = usePrefix()
 const { availableChains } = useChain()
 
 const filteredChains = computed(() => {
   return availableChains?.value.filter((chain) => {
-    return ['ksm', 'bsx', 'rmrk'].includes(chain.value)
+    return ['ksm', 'bsx', 'rmrk'].includes(chain.value as string)
   })
 })
 
 const setSelectedChain = (value) => {
+  $store.dispatch('setUrlPrefix', value)
   $router.push({ path: `/${value}/explore` })
 }
 </script>

middleware/prefix.ts

@@ -6,8 +6,7 @@ export default function ({ store, route }): void {
   const { urlPrefix } = usePrefix()
 
   const prefix = urlPrefix.value
-  const chains = [...chainPrefixes]
-  const isAnyChainPrefixInPath = chains.includes(prefix)
+  const isAnyChainPrefixInPath = chainPrefixes.includes(prefix)
   const rmrk2ChainPrefixInHostname = rmrk2ChainPrefixesInHostname.find(
     (prefix) => location.hostname.startsWith(`${prefix}.`)
   )

pages/_prefix/explore/index.vue

@@ -1,19 +1,12 @@
-<script lang="ts">
-import { Component, Vue } from 'nuxt-property-decorator'
+<template>
+  <!-- empty template, to remove warning "[Vue warn]: Failed to mount component: template or render function not defined." -->
+  <div></div>
+</template>
 
-@Component({
-  components: {},
-})
-export default class LandingPage extends Vue {
-  layout() {
-    return 'full-width-layout'
-  }
-
-  middleware({ store, redirect }) {
-    // If the user is not authenticated
-    const prefix = store.getters.currentUrlPrefix
+<script lang="ts" setup>
+const router = useRouter()
 
-    setTimeout(() => redirect(`/${prefix}/explore/collectibles`))
-  }
-}
+onBeforeMount(() => {
+  router.replace(`${window.location.pathname}/collectibles`)
+})
 </script>