refactor: programmatic modal

components/Navbar.vue

@@ -190,7 +190,6 @@
 
 <script lang="ts" setup>
 import { NeoIcon } from '@kodadot1/brick'
-import { BModalConfig } from 'buefy/types/components'
 
 import { ConnectWalletModalConfig } from '@/components/common/ConnectWallet/useConnectWallet'
 import ChainSelectDropdown from '@/components/navbar/ChainSelectDropdown.vue'
@@ -210,7 +209,7 @@ import { getChainNameByPrefix } from '@/utils/chain'
 import { createVisible, explorerVisible } from '@/utils/config/permision.config'
 import ShoppingCartButton from './navbar/ShoppingCartButton.vue'
 
-const { $buefy, $nextTick } = useNuxtApp()
+const { $nextTick, $neoModal } = useNuxtApp()
 const instance = getCurrentInstance()
 const showTopNavbar = ref(true)
 const openMobileSearchBar = ref(false)
@@ -248,15 +247,11 @@ const handleMobileChainSelect = () => {
 const openWalletConnectModal = (): void => {
   showMobileNavbar()
 
-  $buefy.modal.open({
+  $neoModal.closeAll()
+
+  $neoModal.open({
     parent: instance?.proxy,
     ...ConnectWalletModalConfig,
-  } as unknown as BModalConfig)
-
-  // close all modal
-  document.querySelectorAll('.modal').forEach((modal) => {
-    modal.__vue__?.$vnode?.context?.close()
-    modal.remove()
   })
 }
 

components/collection/drop/DropContainer.vue

@@ -197,7 +197,7 @@ const Money = defineAsyncComponent(
 const TokenImportButton = defineAsyncComponent(
   () => import('@/components/collection/drop/TokenImportButton.vue')
 )
-const { $buefy, $i18n } = useNuxtApp()
+const { $neoModal, $i18n } = useNuxtApp()
 const root = ref<Vue>()
 
 const { toast } = useToast()
@@ -300,7 +300,7 @@ const handleBuy = async () => {
   }
 
   if (!isLogIn.value) {
-    $buefy.modal.open({
+    $neoModal.open({
       parent: root?.value,
       ...ConnectWalletModalConfig,
     })

components/collection/drop/TokenImportButton.vue

@@ -30,7 +30,7 @@ const { urlPrefix } = usePrefix()
 const { accountId, isLogIn } = useAuth()
 const isLoading = ref(false)
 
-const { $buefy } = useNuxtApp()
+const { $neoModal } = useNuxtApp()
 const root = ref<Vue>()
 
 const Money = defineAsyncComponent(
@@ -46,7 +46,7 @@ const getApi = () => {
 
 const handleTokenImport = async () => {
   if (!isLogIn.value) {
-    $buefy.modal.open({
+    $neoModal.open({
       parent: root?.value,
       ...ConnectWalletModalConfig,
     })

components/collection/unlockable/UnlockableContainer.vue

@@ -156,7 +156,7 @@ import { useCountDown } from './utils/useCountDown'
 const Loader = defineAsyncComponent(
   () => import('@/components/collection/unlockable/UnlockableLoader.vue')
 )
-const { $buefy } = useNuxtApp()
+const { $neoModal } = useNuxtApp()
 const root = ref<Vue<Record<string, string>>>()
 
 const { toast } = useToast()
@@ -271,7 +271,7 @@ const description = unlockableDesc(40)
 
 const handleSubmitMint = async () => {
   if (!isLogIn.value) {
-    $buefy.modal.open({
+    $neoModal.open({
       parent: root?.value,
       ...ConnectWalletModalConfig,
     })

components/common/ConnectWallet/ConnectWalletModal.vue

@@ -80,9 +80,8 @@
 <script setup lang="ts">
 import { SupportedWallets } from '@/utils/config/wallets'
 import { BaseDotsamaWallet } from '@/utils/config/wallets/BaseDotsamaWallet'
-import { NeoButton, NeoIcon } from '@kodadot1/brick'
+import { NeoButton, NeoField, NeoIcon } from '@kodadot1/brick'
 import { Auth, useIdentityStore } from '@/stores/identity'
-import { NeoField } from '@kodadot1/brick'
 import WalletMenuItem from '@/components/common/ConnectWallet/WalletMenuItem.vue'
 import WalletAsset from '@/components/common/ConnectWallet/WalletAsset.vue'
 

components/common/ConnectWallet/useConnectWallet.ts

@@ -1,10 +1,9 @@
 import ConnectWalletModal from './ConnectWalletModal.vue'
-import { ModalProgrammatic as Modal } from 'buefy'
-import { BModalComponent, BModalConfig } from 'buefy/types/components'
+
 export const ConnectWalletModalConfig = {
   component: ConnectWalletModal,
   canCancel: ['escape', 'outside'],
-  customClass: 'connect-wallet-modal',
+  rootClass: 'connect-wallet-modal',
   autoFocus: false,
 }
 
@@ -18,13 +17,15 @@ export const openConnectWalletModal = (
   instance,
   { onConnect, closeAfterConnect, onCancel }: OpenWalletModalConfig = {}
 ) => {
-  const modal = ref<BModalComponent | null>()
+  const { $neoModal } = useNuxtApp()
+
+  const modal = ref()
 
   const closeModal = () => {
     modal.value?.close()
   }
 
-  modal.value = Modal.open({
+  modal.value = $neoModal.open({
     parent: instance?.proxy,
     onCancel: () => {
       if (onCancel) {
@@ -49,5 +50,5 @@ export const openConnectWalletModal = (
       },
     },
     ...ConnectWalletModalConfig,
-  } as unknown as BModalConfig)
+  })
 }

components/common/NotificationBox/useNotificationBox.ts

@@ -3,6 +3,6 @@ import NotificationBoxModal from './NotificationBoxModal.vue'
 export const NotificationBoxModalConfig = {
   component: NotificationBoxModal,
   canCancel: ['outside'],
-  customClass: 'notification-box-modal',
+  rootClass: 'notification-box-modal',
   autoFocus: false,
 }

components/common/shoppingCart/ShoppingCartModal.vue

@@ -3,7 +3,7 @@
     <div
       class="shopping-cart-modal-container theme-background-color border-left is-flex is-flex-direction-column">
       <header
-        class="py-5 px-6 is-flex is-justify-content-space-between border-bottom">
+        class="py-4 px-6 is-flex is-justify-content-space-between border-bottom">
         <span class="modal-card-title is-size-6 has-text-weight-bold">
           {{ $t('shoppingCart.title') }}
         </span>

components/common/shoppingCart/ShoppingCartModalConfig.ts

@@ -1,12 +1,10 @@
 import ShoppingCartModal from './ShoppingCartModal.vue'
-import { ModalProgrammatic as Modal } from 'buefy'
-import { BModalConfig } from 'buefy/types/components'
 import { usePreferencesStore } from '@/stores/preferences'
 
 export const ShoppingCartModalConfig = {
   component: ShoppingCartModal,
   canCancel: ['outside'],
-  customClass: 'shopping-cart-modal',
+  rootClass: 'shopping-cart-modal',
   autoFocus: false,
 }
 
@@ -15,13 +13,17 @@ export const isShoppingCartOpen = () =>
 
 export const openShoppingCart = (instance) => {
   const preferencesStore = usePreferencesStore()
+  const { $neoModal } = useNuxtApp()
 
   preferencesStore.setShoppingCartCollapse(true)
-  Modal.open({
+
+  $neoModal.closeAll()
+
+  $neoModal.open({
     parent: instance?.proxy,
     onCancel: () => {
       preferencesStore.setShoppingCartCollapse(false)
     },
     ...ShoppingCartModalConfig,
-  } as unknown as BModalConfig)
+  })
 }

components/gallery/GalleryItemAction/GalleryItemActionType/GalleryItemOffer.vue

@@ -108,7 +108,7 @@ const props = defineProps<{
 
 const { apiInstance } = useApi()
 const { urlPrefix, tokenId } = usePrefix()
-const { $route, $i18n, $buefy } = useNuxtApp()
+const { $route, $i18n, $neoModal } = useNuxtApp()
 const { transaction, status, isLoading } = useTransaction()
 const { accountId } = useAuth()
 const { decimals } = useChain()
@@ -160,7 +160,7 @@ const disabledConfirmBtn = computed(
 
 function toggleActive() {
   if (!connected.value) {
-    $buefy.modal.open({
+    $neoModal.open({
       parent: root?.value,
       ...ConnectWalletModalConfig,
     })

components/navbar/NotificationBoxButton.vue

@@ -7,8 +7,6 @@
 
 <script setup lang="ts">
 import { NeoIcon } from '@kodadot1/brick'
-import { ModalProgrammatic as Modal } from 'buefy'
-import { BModalConfig } from 'buefy/types/components'
 import { NotificationBoxModalConfig } from '@/components/common/NotificationBox/useNotificationBox'
 import { usePreferencesStore } from '@/stores/preferences'
 
@@ -20,26 +18,25 @@ const instance = getCurrentInstance()
 const emit = defineEmits(['closeBurgerMenu'])
 const isMobile = ref(window.innerWidth < 1024)
 
+const { $neoModal } = useNuxtApp()
+
 function toggleNotificationModal() {
   if (isMobile.value) {
     emit('closeBurgerMenu')
   }
 
+  $neoModal.closeAll()
+
   if (!document.querySelector('.notification-box-modal')) {
     preferencesStore.setNotificationBoxCollapse(true)
-    Modal.open({
+
+    $neoModal.open({
       parent: instance?.proxy,
       onCancel: () => {
         preferencesStore.setNotificationBoxCollapse(false)
       },
       ...NotificationBoxModalConfig,
-    } as unknown as BModalConfig)
+    })
   }
-
-  // close all modal
-  document.querySelectorAll('.modal').forEach((modal) => {
-    modal.__vue__?.$vnode?.context?.close()
-    modal.remove()
-  })
 }
 </script>

components/navbar/ProfileDropdown.vue

@@ -35,7 +35,6 @@
           class="button-connect-wallet px-4"
           variant="k-accent"
           no-shadow
-          :modal-toggle-disabled="true"
           @toggleConnectModal="toggleWalletConnectModal" />
       </div>
     </div>
@@ -72,13 +71,12 @@ import { useIdentityStore } from '@/stores/identity'
 import { useLangStore } from '@/stores/lang'
 import { langsFlags as langsFlagsList } from '@/utils/config/i18n'
 import { ConnectWalletModalConfig } from '@/components/common/ConnectWallet/useConnectWallet'
-import type { BModalConfig } from 'buefy/types/components'
-import { ModalProgrammatic as Modal } from 'buefy'
 
 const identityStore = useIdentityStore()
 const langStore = useLangStore()
 const instance = getCurrentInstance()
 const { isDarkMode } = useTheme()
+const { $neoModal } = useNuxtApp()
 
 const languageDropdown = ref(null)
 const modal = ref<{ close: () => void; isActive?: boolean } | null>(null)
@@ -95,18 +93,14 @@ const setUserLang = (value: string) => {
 }
 
 const toggleWalletConnectModal = () => {
+  $neoModal.closeAll()
+
   if (!document.querySelector('.connect-wallet-modal')) {
-    modal.value = Modal.open({
+    modal.value = $neoModal.open({
       parent: instance?.proxy,
       ...ConnectWalletModalConfig,
-    } as unknown as BModalConfig)
+    })
   }
-
-  // close all modal
-  document.querySelectorAll('.modal').forEach((modal) => {
-    modal.__vue__?.$vnode?.context?.close()
-    modal.remove()
-  })
 }
 
 const toggleLanguageMenu = () => {

components/navbar/ShoppingCartButton.vue

@@ -24,6 +24,7 @@ import ActiveCount from '../explore/ActiveCount.vue'
 import { useShoppingCartStore } from '@/stores/shoppingCart'
 const { urlPrefix } = usePrefix()
 
+const { $neoModal } = useNuxtApp()
 const shoppingCartStore = useShoppingCartStore()
 const numberOfItems = computed(
   () => shoppingCartStore.getItemsByPrefix(urlPrefix.value).length
@@ -43,16 +44,12 @@ function toggleShoppingCartModal() {
     emit('closeBurgerMenu')
   }
 
+  $neoModal.closeAll()
+
   // can use the function in ShoppingCartModalConfig
   if (!isShoppingCartOpen()) {
     openShoppingCart(instance)
   }
-
-  // close all modal
-  document.querySelectorAll('.modal').forEach((modal) => {
-    modal.__vue__?.$vnode?.context?.close()
-    modal.remove()
-  })
 }
 </script>
 

components/redirect/useRedirectModal.ts

@@ -1,7 +1,5 @@
 import RedirectModal from './RedirectModal.vue'
 import { EXTERNAL_LINK_WHITELIST } from '@/utils/constants'
-import { ModalProgrammatic as Modal } from 'buefy'
-import { BModalConfig } from 'buefy/types/components'
 import VueI18n from 'vue-i18n/types'
 import {
   convertSingularCollectionUrlToKodadotUrl,
@@ -26,20 +24,20 @@ function isWhiteList(url: string) {
   })
 }
 
-const showModal = (url: string, i18n: VueI18n) => {
-  Modal.open({
+const showModal = (url: string, i18n: VueI18n, modal) => {
+  modal.open({
     component: RedirectModal,
     canCancel: ['outside', 'escape'],
-    customClass: 'redirect-modal',
+    rootClass: 'redirect-modal',
     props: {
       url,
       i18n,
     },
-  } as unknown as BModalConfig)
+  })
 }
 
 export const useRedirectModal = (target: string) => {
-  const { $i18n } = useNuxtApp()
+  const { $i18n, $neoModal } = useNuxtApp()
   const _dom = computed(() => document.querySelector(target) || document.body)
 
   const handleLink = (event: Event) => {
@@ -51,7 +49,7 @@ export const useRedirectModal = (target: string) => {
     const href = convertSingularCollectionUrlToKodadotUrl(ele.href)
 
     if (href && isExternal(href) && !isWhiteList(href)) {
-      showModal(href, $i18n)
+      showModal(href, $i18n, $neoModal)
     } else if (href) {
       window.open(href, '_blank')
     }

components/rmrk/Gallery/EmotionList.vue

@@ -38,7 +38,7 @@ import Identity from '@/components/identity/IdentityIndex.vue'
 
 const issuerId = (emotion: Emotion) => emotion.caller
 const DISPLAYED_EMOJI = 5
-const { $buefy } = useNuxtApp()
+const { $neoModal } = useNuxtApp()
 const instance = getCurrentInstance()
 
 const props = defineProps<{
@@ -60,7 +60,7 @@ const parseEmoji = (codepoint): string => {
 }
 
 const openEmotionModal = () => {
-  $buefy.modal.open({
+  $neoModal.open({
     parent: instance?.proxy,
     component: EmotionModal,
     canCancel: ['escape', 'outside'],