Merge branch 'main' into chore/vue3/PulseChart

kodadot · Aug 16, 2023 · d4015b1 · d4015b1
2 parents 5464486 + 12693a8
commit d4015b1
Show file tree

Hide file tree

Showing 55 changed files with 283 additions and 174 deletions.
diff --git a/components/Navbar.vue b/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()
   })
 }
 

diff --git a/components/TheFooter.vue b/components/TheFooter.vue
@@ -35,7 +35,7 @@
               class="footer-container-info-list-item">
               <a
                 v-if="item.external"
-                :href="item.url"
+                v-safe-href="item.url"
                 target="_blank"
                 rel="nofollow noopener noreferrer"
                 class="is-flex is-align-items-center">
@@ -62,7 +62,7 @@
               class="footer-container-info-list-item">
               <a
                 v-if="item.external"
-                :href="item.url"
+                v-safe-href="item.url"
                 target="_blank"
                 rel="nofollow noopener noreferrer"
                 class="is-flex is-align-items-center">
@@ -89,7 +89,7 @@
               class="footer-container-info-list-item">
               <a
                 v-if="item.external"
-                :href="item.url"
+                v-safe-href="item.url"
                 target="_blank"
                 rel="nofollow noopener noreferrer"
                 class="is-flex is-align-items-center">

diff --git a/components/collection/CollectionHeader/CollectionBanner.vue b/components/collection/CollectionHeader/CollectionBanner.vue
@@ -11,6 +11,7 @@
             <img
               v-if="collectionAvatar"
               :src="collectionAvatar"
+              class="object-fit-cover"
               :alt="collectionName" />
             <img v-else :src="placeholder" />
           </div>

diff --git a/components/collection/drop/DropContainer.vue b/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,
     })

diff --git a/components/collection/drop/TokenImportButton.vue b/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,
     })

diff --git a/components/collection/unlockable/UnlockableCollectionBanner.vue b/components/collection/unlockable/UnlockableCollectionBanner.vue
@@ -8,7 +8,7 @@
       <div class="container is-fluid collection-banner-content">
         <div class="is-flex is-flex-direction-column is-align-items-start">
           <div class="collection-banner-avatar">
-            <img :src="image" alt="avatar" />
+            <img :src="image" alt="avatar" class="object-fit-cover" />
           </div>
           <h1 class="collection-banner-name">{{ title }}</h1>
         </div>

diff --git a/components/collection/unlockable/UnlockableContainer.vue b/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,
     })

diff --git a/components/collection/unlockable/UnlockableLoader.vue b/components/collection/unlockable/UnlockableLoader.vue
@@ -24,7 +24,7 @@
         </div>
         <div class="mt-4">
           {{ $t('mint.unlockable.loader.shareSuccess') }}
-          <a :href="postTwitterUrl" target="_blank" class="has-text-link"
+          <a v-safe-href="postTwitterUrl" target="_blank" class="has-text-link"
             >{{ $t('mint.unlockable.loader.onTwitter') }}
           </a>
         </div>

diff --git a/components/common/ConnectWallet/ConnectWalletModal.vue b/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'
 

diff --git a/components/common/ConnectWallet/WalletAssetMenu.vue b/components/common/ConnectWallet/WalletAssetMenu.vue
@@ -5,7 +5,7 @@
       <a
         v-for="menu in menus"
         :key="menu.label"
-        :href="menu.to"
+        v-safe-href="menu.to"
         class="wallet-asset-menu">
         <span>{{ menu.label }}</span>
         <NeoIcon icon="angle-right" class="has-text-grey" />

diff --git a/components/common/ConnectWallet/WalletAssetNfts.vue b/components/common/ConnectWallet/WalletAssetNfts.vue
@@ -6,7 +6,7 @@
       <a
         v-for="nft in nfts.slice(0, 3)"
         :key="nft.id"
-        :href="`/${urlPrefix}/gallery/${nft.id}`">
+        v-safe-href="`/${urlPrefix}/gallery/${nft.id}`">
         <MediaItem
           :src="sanitizeIpfsUrl(nft.meta.image)"
           :mime-type="nft.type" />

diff --git a/components/common/ConnectWallet/WalletAssetPortfolio.vue b/components/common/ConnectWallet/WalletAssetPortfolio.vue
@@ -3,10 +3,10 @@
     <div>
       <NeoButton
         v-if="isBasilisk"
+        v-safe-href="`/${urlPrefix}/assets`"
         no-shadow
         rounded
         tag="a"
-        :href="`/${urlPrefix}/assets`"
         icon="arrow-right-long">
         Portfolio View
       </NeoButton>

diff --git a/components/common/ConnectWallet/useConnectWallet.ts b/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)
+  })
 }
diff --git a/components/common/NotificationBox/useNotificationBox.ts b/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,
 }
diff --git a/components/common/shoppingCart/ShoppingCartItemRow.vue b/components/common/shoppingCart/ShoppingCartItemRow.vue
@@ -2,33 +2,39 @@
   <div
     ref="hoverRef"
     class="is-flex is-justify-content-space-between background-hover">
-    <div class="is-flex pr-2">
-      <nuxt-link
-        :to="`/${urlPrefix}/gallery/${nft.id}`"
-        @click.native="emit('click-item')">
-        <BasicImage
-          :src="avatar"
-          :alt="nft?.name"
-          class="border image is-48x48" />
-      </nuxt-link>
-
-      <div
-        class="is-flex is-flex-direction-column is-justify-content-space-between ml-4 limit-width">
+    <div class="pr-2 w-full no-wrap is-clipped ellipsis">
+      <div class="is-flex">
         <nuxt-link
           :to="`/${urlPrefix}/gallery/${nft.id}`"
-          class="has-text-weight-bold has-text-color line-height-1 no-wrap is-clipped ellipsis"
           @click.native="emit('click-item')">
-          {{ nft.name }}
+          <BasicImage
+            :src="avatar"
+            :alt="nft?.name"
+            class="border image is-48x48" />
         </nuxt-link>
-        <div class="line-height-1 no-wrap is-clipped ellipsis">
-          {{ nft.collection?.name || nft.collection.id }}
+        <div
+          class="is-flex is-flex-direction-column is-justify-content-space-between ml-4 min-width w-full line-height-1">
+          <nuxt-link
+            :to="`/${urlPrefix}/gallery/${nft.id}`"
+            class="has-text-weight-bold has-text-color no-wrap is-clipped ellipsis"
+            @click.native="emit('click-item')">
+            {{ nft.name }}
+          </nuxt-link>
+          <div class="is-flex is-justify-content-space-between w-full">
+            <div class="no-wrap is-clipped ellipsis">
+              {{ nft.collection?.name || nft.collection.id }}
+            </div>
+
+            <div :class="[{ hidden: isHovered }, 'ml-2']">
+              <CommonTokenMoney :value="nft.price" :round="2" />
+            </div>
+          </div>
         </div>
       </div>
     </div>
-
     <div
       v-if="isHovered"
-      class="is-flex is-justify-content-end is-align-items-center">
+      class="is-flex is-justify-content-end is-align-self-center h-full ml-2">
       <NeoButton
         variant="text"
         class="inherit-background-color"
@@ -37,10 +43,6 @@
         icon-pack="far"
         @click.native="emit('delete', nft.id)" />
     </div>
-
-    <div v-else class="is-flex is-align-items-end no-wrap line-height-1">
-      <CommonTokenMoney :value="nft.price" />
-    </div>
   </div>
 </template>
 
@@ -84,10 +86,13 @@ onMounted(() => {
   }
 }
 
+.min-width {
+  min-width: 0;
+}
+
 .limit-width {
   max-width: 130px;
 }
-
 .ellipsis {
   text-overflow: ellipsis;
 }
@@ -99,4 +104,7 @@ onMounted(() => {
 .inherit-background-color {
   background-color: inherit !important;
 }
+.hidden {
+  opacity: 0;
+}
 </style>
diff --git a/components/common/shoppingCart/ShoppingCartModal.vue b/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>
@@ -19,10 +19,10 @@
         <span> {{ numberOfItems }} {{ $t('items') }}</span>
 
         <NeoButton
+          v-safe-href="`/${urlPrefix}/explore/items`"
           :label="$t('shoppingCart.clearAll')"
           no-shadow
           variant="text"
-          :href="`/${urlPrefix}/explore/items`"
           @click.native="clearAllItems" />
       </div>
       <div v-if="numberOfItems" class="scroll-y">
@@ -73,11 +73,11 @@
             $t('shoppingCart.emptyCart.line2')
           }}</span>
           <NeoButton
+            v-safe-href="`/${urlPrefix}/explore/items`"
             :label="$t('shoppingCart.exploreNfts')"
             rounded
             no-shadow
             tag="a"
-            :href="`/${urlPrefix}/explore/items`"
             icon="magnifying-glass" />
         </div>
         <div class="pt-4">

diff --git a/components/common/shoppingCart/ShoppingCartModalConfig.ts b/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)
+  })
 }
diff --git a/components/drops/DropCard.vue b/components/drops/DropCard.vue
@@ -3,7 +3,7 @@
     <component
       :is="externalUrl ? 'a' : 'nuxt-link'"
       v-if="drop.collection && !isLoadingMeta"
-      :href="externalUrl"
+      v-safe-href="externalUrl"
       rel="nofollow noopener noreferrer"
       :to="`/${correctUrlPrefix}/drops/${correctDropUrl}`">
       <div