Merge branch 'main' into fix/5060-offer-too-low

components/Navbar.vue

@@ -1,5 +1,6 @@
 <template>
   <b-navbar
+    ref="root"
     :active.sync="isBurgerMenuOpened"
     :class="{ 'navbar-shrink': !showTopNavbar }"
     close-on-click
@@ -18,7 +19,6 @@
       <div
         class="is-hidden-desktop is-flex is-flex-grow-1 is-align-items-center is-justify-content-flex-end"
         @click="closeBurgerMenu">
-        <!-- <HistoryBrowser class="navbar-item" /> -->
         <img
           v-if="showSearchOnNavbar"
           class="mobile-nav-search-btn mr-2"
@@ -65,12 +65,12 @@
         class="navbar-create custom-navbar-item ml-0"
         data-cy="create"
         :is-mobile="isMobile"
-        :chain="chain" />
+        :chain="urlPrefix" />
       <StatsDropdown
         class="navbar-stats custom-navbar-item"
         data-cy="stats"
         :is-mobile="isMobile"
-        :chain="chain" />
+        :chain="urlPrefix" />
 
       <ChainSelectDropdown
         v-if="!isMobile"
@@ -127,16 +127,14 @@
       <ProfileDropdown
         v-if="!isMobile"
         id="NavProfile"
-        :chain="chain"
+        :chain="urlPrefix"
         data-cy="profileDropdown"
         @closeBurgerMenu="closeBurgerMenu" />
     </template>
   </b-navbar>
 </template>
 
-<script lang="ts">
-import { Component, Ref, Watch, mixins } from 'nuxt-property-decorator'
-import BasicImage from '@/components/shared/view/BasicImage.vue'
+<script lang="ts" setup>
 import MobileExpandableSection from '@/components/navbar/MobileExpandableSection.vue'
 import NavbarExploreOptions from '@/components/navbar/NavbarExploreOptions.vue'
 import ProfileDropdown from '~/components/navbar/ProfileDropdown.vue'
@@ -145,173 +143,124 @@ import ExploreDropdown from '~/components/navbar/ExploreDropdown.vue'
 import CreateDropdown from '~/components/navbar/CreateDropdown.vue'
 import KodaBetaDark from '@/assets/Koda_Beta_dark.svg'
 import KodaBeta from '@/assets/Koda_Beta.svg'
-import PrefixMixin from '@/utils/mixins/prefixMixin'
 import ColorModeButton from '~/components/common/ColorModeButton.vue'
 import MobileLanguageOption from '~/components/navbar/MobileLanguageOption.vue'
 import { createVisible } from '@/utils/config/permision.config'
-import AuthMixin from '@/utils/mixins/authMixin'
-import ExperimentMixin from '@/utils/mixins/experimentMixin'
 import ChainSelectDropdown from '~/components/navbar/ChainSelectDropdown.vue'
 import StatsDropdown from '~/components/navbar/StatsDropdown.vue'
 import MobileNavbarProfile from '~/components/navbar/MobileNavbarProfile.vue'
 import ConnectWalletButton from '~/components/shared/ConnectWalletButton.vue'
-import { getKusamaAssetId } from '~/utils/api/bsx/query'
-import { NeoButton } from '@kodadot1/brick'
 import { ConnectWalletModalConfig } from '@/components/common/ConnectWallet/useConnectWallet'
+import { BModalConfig } from 'buefy/types/components'
+import type Vue from 'vue'
 
-@Component({
-  components: {
-    NeoButton,
-    Search,
-    BasicImage,
-    MobileExpandableSection,
-    ProfileDropdown,
-    ExploreDropdown,
-    CreateDropdown,
-    ChainSelectDropdown,
-    StatsDropdown,
-    MobileNavbarProfile,
-    NavbarExploreOptions,
-    ConnectWalletButton,
-    ColorModeButton,
-    MobileLanguageOption,
-  },
-})
-export default class NavbarMenu extends mixins(
-  PrefixMixin,
-  AuthMixin,
-  ExperimentMixin
-) {
-  public showTopNavbar = true
-  public openMobileSearchBar = false
-  private fixedTitleNavAppearDistance = 85
-  private lastScrollPosition = 0
-  private artistName = ''
-  public isBurgerMenuOpened = false
-  private isMobile = window.innerWidth < 1024
+const { $store, $colorMode, $buefy, $nextTick } = useNuxtApp()
+const root = ref<Vue<Record<string, string>>>()
+const showTopNavbar = ref(true)
+const openMobileSearchBar = ref(false)
+const fixedTitleNavAppearDistance = ref(85)
+const lastScrollPosition = ref(0)
+const isBurgerMenuOpened = ref(false)
+const isMobile = ref(window.innerWidth < 1024)
+const { urlPrefix } = usePrefix()
 
-  @Ref('mobilSearchRef') readonly mobilSearchRef
+const mobilSearchRef = ref<{ focusInput: () => void } | null>(null)
 
-  get account() {
-    return this.$store.getters.getAuthAddress
-  }
+const route = useRoute()
 
-  get chain(): string {
-    return this.urlPrefix
-  }
+const account = computed(() => $store.getters.getAuthAddress)
 
-  get tokens() {
-    return ['', getKusamaAssetId(this.urlPrefix)]
-  }
+const isCreateVisible = computed(() => createVisible(urlPrefix.value))
+const isLandingPage = computed(() => route.name === 'index')
 
-  get isCreateVisible(): boolean {
-    return createVisible(this.urlPrefix)
-  }
+const isDarkMode = computed(
+  () =>
+    $colorMode.preference === 'dark' ||
+    document.documentElement.className.includes('dark-mode')
+)
 
-  get currentCollection() {
-    return this.$store.getters['history/getCurrentlyViewedCollection'] || {}
-  }
+const logoSrc = computed(() => (isDarkMode.value ? KodaBetaDark : KodaBeta))
 
-  get currentGalleryItemName() {
-    return this.$store.getters['history/getCurrentlyViewedItem']?.name || ''
-  }
+const showSearchOnNavbar = computed(
+  () => !isLandingPage.value || !showTopNavbar.value || isBurgerMenuOpened.value
+)
 
-  get isLandingPage() {
-    return this.$route.name === 'index'
-  }
+const openWalletConnectModal = (): void => {
+  closeBurgerMenu()
 
-  get isDarkMode() {
-    return (
-      this.$colorMode.preference === 'dark' ||
-      document.documentElement.className.includes('dark-mode')
-    )
-  }
+  $buefy.modal.open({
+    parent: root?.value,
+    ...ConnectWalletModalConfig,
+  } as any as BModalConfig)
+}
 
-  get logoSrc() {
-    return this.isDarkMode ? KodaBetaDark : KodaBeta
-  }
+watch([isBurgerMenuOpened], () => {
+  setBodyScroll(!isBurgerMenuOpened.value)
+})
 
-  get showSearchOnNavbar(): boolean {
-    return !this.isLandingPage || !this.showTopNavbar || this.isBurgerMenuOpened
+const onScroll = () => {
+  const currentScrollPosition = document.documentElement.scrollTop
+  const searchBarPosition = document
+    .getElementById('networkList')
+    ?.getBoundingClientRect()?.top
+  if (currentScrollPosition <= 0) {
+    showTopNavbar.value = true
+    return
   }
-
-  public openWalletConnectModal(): void {
-    this.closeBurgerMenu()
-
-    this.$buefy.modal.open({
-      parent: this,
-      ...ConnectWalletModalConfig,
-    })
+  if (Math.abs(currentScrollPosition - lastScrollPosition.value) < 30) {
+    return
   }
-
-  @Watch('isBurgerMenuOpened')
-  onBurgerMenuOpenedChanged() {
-    this.setBodyScroll(!this.isBurgerMenuOpened)
+  if (isLandingPage.value && searchBarPosition) {
+    showTopNavbar.value = searchBarPosition > fixedTitleNavAppearDistance.value
+  } else {
+    showTopNavbar.value =
+      currentScrollPosition < fixedTitleNavAppearDistance.value
   }
+  lastScrollPosition.value = currentScrollPosition
+}
 
-  onScroll() {
-    const currentScrollPosition = document.documentElement.scrollTop
-    const searchBarPosition = document
-      .getElementById('networkList')
-      ?.getBoundingClientRect()?.top
-    if (currentScrollPosition <= 0) {
-      this.showTopNavbar = true
-      return
-    }
-    if (Math.abs(currentScrollPosition - this.lastScrollPosition) < 30) {
-      return
-    }
-    if (this.isLandingPage && searchBarPosition) {
-      this.showTopNavbar = searchBarPosition > this.fixedTitleNavAppearDistance
+const setBodyScroll = (allowScroll: boolean) => {
+  $nextTick(() => {
+    const body = document.querySelector('body') as HTMLBodyElement
+    if (allowScroll) {
+      body.classList.remove('is-clipped')
     } else {
-      this.showTopNavbar =
-        currentScrollPosition < this.fixedTitleNavAppearDistance
+      body.classList.add('is-clipped')
     }
-    this.lastScrollPosition = currentScrollPosition
-  }
-  setBodyScroll(allowScroll: boolean) {
-    this.$nextTick(() => {
-      const body = document.querySelector('body') as HTMLBodyElement
-      if (allowScroll) {
-        body.classList.remove('is-clipped')
-      } else {
-        body.classList.add('is-clipped')
-      }
-    })
-  }
+  })
+}
 
-  showMobileSearchBar() {
-    this.openMobileSearchBar = true
-    this.$nextTick(() => {
-      this.mobilSearchRef?.focusInput()
-    })
-    this.setBodyScroll(false)
-  }
+const showMobileSearchBar = () => {
+  openMobileSearchBar.value = true
+  $nextTick(() => {
+    mobilSearchRef.value?.focusInput()
+  })
+  setBodyScroll(false)
+}
 
-  hideMobileSearchBar() {
-    this.openMobileSearchBar = false
-    this.setBodyScroll(true)
-  }
+const hideMobileSearchBar = () => {
+  openMobileSearchBar.value = false
+  setBodyScroll(true)
+}
 
-  closeBurgerMenu() {
-    this.isBurgerMenuOpened = false
-  }
+const closeBurgerMenu = () => {
+  isBurgerMenuOpened.value = false
+}
 
-  handleResize() {
-    this.isMobile = window.innerWidth < 1024
-  }
+const handleResize = () => {
+  isMobile.value = window.innerWidth < 1024
+}
 
-  mounted() {
-    window.addEventListener('scroll', this.onScroll)
-    document.body.style.overflowY = 'initial'
-    window.addEventListener('resize', this.handleResize)
-  }
+onMounted(() => {
+  window.addEventListener('scroll', onScroll)
+  document.body.style.overflowY = 'initial'
+  window.addEventListener('resize', handleResize)
+})
 
-  beforeDestroy() {
-    window.removeEventListener('scroll', this.onScroll)
-    this.setBodyScroll(true)
-    document.documentElement.classList.remove('is-clipped-touch')
-    window.removeEventListener('resize', this.handleResize)
-  }
-}
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', onScroll)
+  setBodyScroll(true)
+  document.documentElement.classList.remove('is-clipped-touch')
+  window.removeEventListener('resize', handleResize)
+})
 </script>