Merge pull request kodadot#5594 from kodadot/feat/set-prefix-to-local…

…storage

fix: set prefix to localStorage

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>

composables/usePrefix.ts

@@ -1,11 +1,22 @@
+import { DEFAULT_PREFIX } from '@kodadot1/static'
 import { getKusamaAssetId } from '@/utils/api/bsx/query'
+import type { Prefix } from '@kodadot1/static'
 
 export default function () {
   const { $store } = useNuxtApp()
   const route = useRoute()
+  const storage = useLocalStorage('urlPrefix', { selected: DEFAULT_PREFIX })
 
-  const prefix = ref(route.params.prefix || $store.getters.currentUrlPrefix)
-  const urlPrefix = computed<string>(() => prefix.value || 'bsx')
+  const prefix = ref(
+    route.params.prefix ||
+      route.path.split('/')[1] ||
+      storage.value.selected ||
+      $store.getters.currentUrlPrefix
+  )
+  const urlPrefix = computed<Prefix>(() => {
+    storage.value = { selected: prefix.value }
+    return prefix.value
+  })
 
   const client = computed<string>(() => {
     return urlPrefix.value === 'rmrk' ? 'subsquid' : urlPrefix.value

libs/static/src/chains.ts

@@ -36,6 +36,8 @@ export const CHAINS: Config<ChainProperties> = {
   glmr: toChainProperty(1284, 18, 'GLMR', 'https://moonbeam.subscan.io/'),
 }
 
+export const DEFAULT_PREFIX: Prefix = 'bsx'
+
 export const chainPrefixes: Prefix[] = [
   'bsx',
   'rmrk',

middleware/prefix.ts

@@ -3,11 +3,10 @@ import { chainPrefixes } from '@kodadot1/static'
 export const rmrk2ChainPrefixesInHostname = ['rmrk2', 'rmrk']
 
 export default function ({ store, route }): void {
-  const prefix = route.params.prefix || route.path.split('/')[1]
-  const chains = [...chainPrefixes]
-  const isAnyChainPrefixInPath = chains.some((prefix) =>
-    route.path.includes(prefix)
-  )
+  const { urlPrefix } = usePrefix()
+
+  const prefix = urlPrefix.value
+  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>

plugins/vuex-persist.ts

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