Merge pull request #5390 from kodadot/fix/chain-list

components/landing/SearchLanding.vue

@@ -22,7 +22,7 @@
         id="networkList"
         class="is-flex is-justify-content-center is-flex-wrap-wrap is-align-items-baseline">
         <a
-          v-for="chain in chainList"
+          v-for="chain in availableChains"
           :key="chain.value"
           :class="['m-2', 'chain-option active']"
           @click="switchChain(chain.value)">
@@ -39,13 +39,10 @@
 </template>
 
 <script lang="ts" setup>
-import { Option } from '@kodadot1/vuex-options/dist/types'
-
-import { getChainTestList } from '~/utils/constants'
-
 const { urlPrefix } = usePrefix()
 const { $store, $router } = useNuxtApp()
 const { isDarkMode } = useTheme()
+const { availableChains } = useChain()
 
 const chainText = (chain: string) => {
   if (chain.includes('[Beta]')) {
@@ -68,13 +65,6 @@ const landingImage = computed(() => {
   }
 })
 
-const chainList = computed(() => {
-  const availableUrlPrefixes: Option[] = $store.getters['availableUrlPrefixes']
-  return availableUrlPrefixes.filter(
-    (urlPrefix) => !getChainTestList().includes(urlPrefix.value as string)
-  )
-})
-
 const switchChain = (value) => {
   if (value === urlPrefix.value) {
     return

components/navbar/ChainSelectDropdown.vue

@@ -4,7 +4,7 @@
       <div class="navbar-item" data-cy="chain">{{ chainName }}</div>
     </template>
     <b-dropdown-item
-      v-for="option in options"
+      v-for="option in availableChains"
       :key="option.value"
       aria-role="listitem"
       :value="option.value"
@@ -15,37 +15,20 @@
   </b-dropdown>
 </template>
 
-<script lang="ts">
-import { Component, Vue } from 'nuxt-property-decorator'
-import { Option } from '@kodadot1/vuex-options/dist/types'
-import { getChainTestList } from '~/utils/constants'
-import { getChainNameByPrefix } from '~/utils/chain'
+<script lang="ts" setup>
+import { getChainNameByPrefix } from '@/utils/chain'
 
-@Component({})
-export default class ChainSelect extends Vue {
-  get options() {
-    const availableUrlPrefixes: Option[] =
-      this.$store.getters['availableUrlPrefixes']
+const { availableChains } = useChain()
+const { $store } = useNuxtApp()
+const router = useRouter()
 
-    if (!this.$config.public.dev) {
-      return availableUrlPrefixes.filter(
-        (urlPrefix) => !getChainTestList().includes(urlPrefix.value as string)
-      )
-    }
-    return availableUrlPrefixes
-  }
+const selected = computed({
+  get: () => $store.getters.getSettings['urlPrefix'],
+  set: (value) => {
+    $store.dispatch('setUrlPrefix', value)
+    router.push({ path: `/${value}` })
+  },
+})
 
-  get selected() {
-    return this.$store.getters.getSettings['urlPrefix']
-  }
-
-  set selected(value) {
-    this.$store.dispatch('setUrlPrefix', value)
-    this.$router.push({ path: `/${value}` })
-  }
-
-  get chainName() {
-    return getChainNameByPrefix(this.selected)
-  }
-}
+const chainName = computed(() => getChainNameByPrefix(selected.value))
 </script>

components/navbar/CreateDropdown.vue

@@ -101,35 +101,15 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, mixins } from 'nuxt-property-decorator'
-import { getChainTestList } from '@/utils/constants'
-import PrefixMixin from '@/utils/mixins/prefixMixin'
+<script lang="ts" setup>
 import MobileExpandableSection from '@/components/navbar/MobileExpandableSection.vue'
-import AuthMixin from '@/utils/mixins/authMixin'
 
-@Component({
-  components: {
-    MobileExpandableSection,
-  },
-})
-export default class NavbarCreate extends mixins(PrefixMixin, AuthMixin) {
-  @Prop({ type: String }) chain!: string
-  @Prop({ type: Boolean, default: false }) isMobile!: boolean
+defineProps<{
+  chain: string
+  isMobile: boolean
+}>()
 
-  get redesign() {
-    return useExperiments().redesign.value
-  }
-
-  get options() {
-    const availableUrlPrefixes = this.$store.getters['availableUrlPrefixes']
-
-    if (!this.$config.public.dev) {
-      return availableUrlPrefixes.filter(
-        (urlPrefix) => !getChainTestList().includes(urlPrefix.value as string)
-      )
-    }
-    return availableUrlPrefixes
-  }
-}
+const { urlPrefix } = usePrefix()
+const { accountId } = useAuth()
+const { redesign } = useExperiments()
 </script>

components/navbar/NavbarExploreOptions.vue

@@ -16,7 +16,7 @@
     </span>
     <hr aria-role="menuitem" class="dropdown-divider my-4" />
     <span
-      v-for="option in options.slice(0, 3)"
+      v-for="option in availableChains.slice(0, 3)"
       :key="option.value"
       :class="[
         'menu-item',
@@ -31,21 +31,9 @@
 </template>
 
 <script lang="ts" setup>
-import { getChainTestList } from '~/utils/constants'
-
-const { $store, $config, $router } = useNuxtApp()
+const { $store, $router } = useNuxtApp()
 const { urlPrefix } = usePrefix()
-
-const options = computed(() => {
-  const availableUrlPrefixes = $store.getters['availableUrlPrefixes']
-
-  if (!$config.public.dev) {
-    return availableUrlPrefixes.filter(
-      (urlPrefix) => !getChainTestList().includes(urlPrefix.value as string)
-    )
-  }
-  return availableUrlPrefixes
-})
+const { availableChains } = useChain()
 
 const selectedChain = $store.getters.getSettings['urlPrefix']
 

composables/useChain.ts

@@ -1,9 +1,10 @@
 import { chainPropListOf } from '@/utils/config/chain.config'
 import { ChainProperties } from '@/utils/api/Query'
 import { getChainTestList } from '@/utils/constants'
+import { availablePrefixes } from '@/utils/chain'
 
 export default function () {
-  const { $store, $config } = useNuxtApp()
+  const { $config } = useNuxtApp()
   const { urlPrefix, tokenId, assets } = usePrefix()
   const { symbol } = assets(tokenId.value)
 
@@ -24,15 +25,15 @@ export default function () {
   })
 
   const availableChains = computed(() => {
-    const availableUrlPrefixes = $store.getters['availableUrlPrefixes']
+    const chainList = availablePrefixes()
 
     if (!$config.public.dev) {
-      return availableUrlPrefixes.filter(
-        (urlPrefix) => !getChainTestList().includes(urlPrefix.value)
+      return chainList.filter(
+        (urlPrefix) => !getChainTestList().includes(String(urlPrefix.value))
       )
     }
 
-    return availableUrlPrefixes
+    return chainList
   })
 
   const chainSymbol = computed(() => {

middleware/prefix.ts

@@ -1,7 +1,17 @@
+import { chainPrefixes } from '@/utils/chain'
+
 export default function ({ store, route }): void {
-  const prefix = route.params.prefix
+  const prefix = route.params.prefix || route.path.split('/')[1]
+  const chains = ['rmrk', ...chainPrefixes]
+  const isAnyChainPrefixInPath = chains.some((prefix) =>
+    route.path.includes(prefix)
+  )
 
-  if (store.getters.currentUrlPrefix !== prefix && prefix) {
+  if (
+    store.getters.currentUrlPrefix !== prefix &&
+    prefix &&
+    isAnyChainPrefixInPath
+  ) {
     store.dispatch('setUrlPrefix', prefix)
   }
 }

package.json

@@ -69,6 +69,7 @@
     "@google/model-viewer": "^1.12.1",
     "@kodadot1/brick": "workspace:*",
     "@kodadot1/minimark": "^0.0.1-rc.10",
+    "@kodadot1/static": "0.0.1-rc.0",
     "@kodadot1/sub-api": "0.1.1-alpha.5",
     "@kodadot1/vuex-options": "0.0.5-rc.4",
     "@nuxtjs/apollo": "^4.0.1-rc.5",

plugins/vuex-persist.ts

@@ -1,12 +1,9 @@
 import VuexPersistence from 'vuex-persist'
 
 export default ({ store }): void => {
-  new VuexPersistence({
-    key: 'preferences',
-    storage: window.localStorage,
-  }).plugin(store)
   new VuexPersistence({
     key: 'setting',
     storage: window.sessionStorage,
+    modules: ['identity'],
   }).plugin(store)
 }