Merge pull request #6714 from kodadot/refactor/programmatic-modal

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'],