Merge pull request #4863 from kodadot/feat/explorer-chain-selector

feat: network selector on explorer

components/explore/ExploreChain.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <NeoDropdown position="bottom-right" @active-change="isActive = $event">
+      <NeoButton
+        :label="`Network: ${selected.text}`"
+        :icon="isActive ? 'caret-up' : 'caret-down'" />
+
+      <template #items>
+        <NeoDropdownItem
+          v-for="chain in availableChains"
+          :key="chain.value"
+          :active="route.params.prefix === chain.value"
+          @click.native="onSwitchChain(chain.value)">
+          {{ chain.text }}
+        </NeoDropdownItem>
+      </template>
+    </NeoDropdown>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NeoButton, NeoDropdown, NeoDropdownItem } from '@kodadot1/brick'
+
+const route = useRoute()
+const router = useRouter()
+const { $store } = useNuxtApp()
+
+const { availableChains } = useChain()
+const isActive = ref(false)
+const selected = computed(() =>
+  availableChains.value.find((chain) => chain.value === route.params.prefix)
+)
+
+function onSwitchChain(chain) {
+  $store.dispatch('setUrlPrefix', chain)
+
+  router.push({
+    params: {
+      prefix: chain,
+    },
+    query: {
+      page: '1',
+      sort: route.query.sort,
+    },
+  })
+}
+</script>
+
+<style scoped></style>

components/explore/ExploreIndex.vue

@@ -1,13 +1,17 @@
 <template>
   <div class="explore is-flex">
     <ExploreTabItem />
-    <ExploreSort />
+    <div class="explore-menu is-flex">
+      <ExploreSort />
+      <ExploreChain />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts" scoped>
 import ExploreTabItem from './ExploreTabItem.vue'
 import ExploreSort from './ExploreSort.vue'
+import ExploreChain from './ExploreChain.vue'
 </script>
 
 <style lang="scss" scoped>
@@ -17,9 +21,17 @@ import ExploreSort from './ExploreSort.vue'
   margin-bottom: 2.5rem;
   gap: 2rem;
 
+  &-menu {
+    gap: 2rem;
+  }
+
   @include mobile {
     gap: 1rem;
     flex-direction: column;
+
+    &-menu {
+      gap: 1rem;
+    }
   }
 }
 </style>

composables/useChain.ts

@@ -1,7 +1,9 @@
 import { chainPropListOf } from '@/utils/config/chain.config'
 import { ChainProperties } from '@/utils/api/Query'
+import { getChainTestList } from '@/utils/constants'
 
 export default function () {
+  const { $store, $config } = useNuxtApp()
   const { urlPrefix } = usePrefix()
 
   const chainProperties = computed<ChainProperties>(() => {
@@ -20,10 +22,23 @@ export default function () {
     return urlPrefix.value !== 'snek' && urlPrefix.value !== 'bsx'
   })
 
+  const availableChains = computed(() => {
+    const availableUrlPrefixes = $store.getters['availableUrlPrefixes']
+
+    if (!$config.public.dev) {
+      return availableUrlPrefixes.filter(
+        (urlPrefix) => !getChainTestList().includes(urlPrefix.value)
+      )
+    }
+
+    return availableUrlPrefixes
+  })
+
   return {
     decimals,
     unit,
     offersDisabled,
     chainProperties,
+    availableChains,
   }
 }

libs/ui/src/components/NeoDropdown/NeoDropdown.vue

@@ -6,7 +6,7 @@
     class="neo-dropdown"
     :class="{ 'o-drop-active': isActive }"
     :mobile-modal="mobileModal"
-    @active-change="isActive = $event">
+    @active-change="onActiveChange($event)">
     <template #trigger>
       <slot />
     </template>
@@ -15,6 +15,7 @@
 </template>
 
 <script lang="ts" setup>
+import { defineEmits } from 'vue'
 import { ODropdown } from '@oruga-ui/oruga'
 
 const isActive = ref(false)
@@ -31,6 +32,13 @@ withDefaults(
     mobileModal: false,
   }
 )
+
+const emit = defineEmits(['active-change'])
+
+function onActiveChange(event) {
+  isActive.value = event
+  emit('active-change', event)
+}
 </script>
 
 <style lang="scss">