beta update

assets/styles/global.scss

@@ -446,6 +446,9 @@ a.has-text-grey {
     background-color: theme('k-redaccent');
   }
 }
+.k-grey-light {
+  background-color: var(--k-grey-light) !important;
+}
 .theme-background-color {
   @include ktheme() {
     background-color: theme('background-color');
@@ -587,3 +590,15 @@ a.has-text-grey {
 .has-text-inherit {
   color: inherit !important;
 }
+
+.cursor-default {
+  cursor: default;
+}
+
+.min-width-0 {
+  min-width: 0;
+}
+
+.pointer-events-none {
+  pointer-events: none !important;
+}

assets/styles/layouts/_main-navigation.scss

@@ -185,6 +185,8 @@
           height: 40px;
         }
       }
+
+      max-width: 100% !important;
     }
   }
 

components/balance/MultipleBalances.vue

@@ -18,15 +18,15 @@
       </div>
 
       <div
-        v-for="(chain, key) in multiBalances.chains"
+        v-for="(data, key) in multiBalancesChainsList"
         :key="key"
         class="is-size-6">
         <div
-          v-for="token in filterEmptyBalanceChains(chain)"
+          v-for="token in filterEmptyBalanceChains(data.chain)"
           :key="token.name"
           class="balance-row">
           <div class="is-capitalized is-flex-grow-3">
-            {{ key }}
+            {{ data.key }}
           </div>
           <div class="has-text-right is-flex-grow-1">
             {{ token.name.toUpperCase() }}
@@ -61,12 +61,32 @@
 import { formatNumber } from '@/utils/format/balance'
 
 import { NeoSkeleton } from '@kodadot1/brick'
-import { ChainToken, useIdentityStore } from '@/stores/identity'
+import { ChainToken, type ChainType, useIdentityStore } from '@/stores/identity'
 
+const displayChainOrder: ChainType[] = [
+  'polkadot',
+  'polkadotHub',
+  'kusama',
+  'kusamaHub',
+  'basilisk',
+]
 const identityStore = useIdentityStore()
 
 const { multiBalances } = useMultipleBalance(true)
 
+const multiBalancesChainsList = computed(() => {
+  return Object.keys(multiBalances.value.chains)
+    .sort(
+      (a, b) =>
+        displayChainOrder.indexOf(a as ChainType) -
+        displayChainOrder.indexOf(b as ChainType),
+    )
+    .map((key) => ({
+      key,
+      chain: multiBalances.value.chains[key],
+    }))
+})
+
 const isBalanceLoading = computed(
   () => identityStore.getStatusMultiBalances === 'loading',
 )

components/collection/drop/Generative.vue

@@ -62,6 +62,7 @@
                     v-dompurify-html="
                       $t('mint.unlockable.minimumFundsDescription', [
                         `${minimumFunds} ${token}`,
+                        chainName,
                       ])
                     "
                     class="minimum-funds-description" />
@@ -192,6 +193,7 @@ const isImageFetching = ref(false)
 const isConfirmModalActive = ref(false)
 const isAddFundModalActive = ref(false)
 
+const chainName = computed(() => getChainName(props.drop.chain))
 const token = computed(() => prefixToToken[props.drop.chain])
 
 export type DropMintedNft = DoResult & {

components/collection/drop/HolderOfGenerative.vue

@@ -69,6 +69,7 @@
                     v-dompurify-html="
                       $t('mint.unlockable.minimumFundsDescription', [
                         `${minimumFunds} ${token}`,
+                        chainName,
                       ])
                     "
                     class="minimum-funds-description" />
@@ -194,6 +195,7 @@ const {
   status,
 } = useMetaTransaction()
 
+const chainName = computed(() => getChainName(props.drop.chain))
 const token = computed(() => prefixToToken[props.drop.chain])
 
 const mintedNft = ref<DropMintedNft>()

components/common/autoTeleport/AutoTeleportActionButton.vue

@@ -114,7 +114,7 @@ const amount = ref()
 
 const {
   isAvailable: isAutoTeleportAvailable,
-  hasBalances,
+  isReady,
   hasEnoughInCurrentChain,
   hasEnoughInRichestChain,
   optimalTransition,
@@ -163,12 +163,12 @@ const showAutoTeleport = computed(
   () =>
     !hasEnoughInCurrentChain.value &&
     isAutoTeleportAvailable.value &&
-    hasBalances.value &&
+    isReady.value &&
     !props.disabled,
 )
 
 const allowAutoTeleport = computed(
-  () => needsAutoTelport.value && canAutoTeleport.value && hasBalances.value,
+  () => needsAutoTelport.value && canAutoTeleport.value && isReady.value,
 )
 
 const hasNoFundsAtAll = computed(
@@ -188,7 +188,7 @@ const autoTeleportLabel = computed(() => {
     return props.label
   }
 
-  if (!hasBalances.value) {
+  if (!isReady.value) {
     return $i18n.t('autoTeleport.checking')
   }
 
@@ -291,7 +291,7 @@ watchSyncEffect(() => {
   }
 })
 
-defineExpose({ hasBalances, optimalTransition })
+defineExpose({ isReady, optimalTransition })
 </script>
 
 <style lang="scss" scoped>

components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue

@@ -83,7 +83,7 @@ const { urlPrefix } = usePrefix()
 const autoteleport = ref()
 const actions = computed(() => [props.action])
 
-const loading = computed(() => !autoteleport.value?.hasBalances)
+const loading = computed(() => !autoteleport.value?.isReady)
 
 const mode = computed(() => prefrencesStore.getCompletePurchaseModal.mode)
 

components/common/listingCart/ListingCartModal.vue

@@ -52,6 +52,7 @@
             ref="autoteleportButton"
             :actions="actions"
             :disabled="Boolean(listingCartStore.incompleteListPrices)"
+            :fees="{ actionLazyFetch: true }"
             :label="confirmListingLabel"
             @confirm="confirm" />
         </div>
@@ -96,9 +97,7 @@ const floorPricePercentAdjustment = ref()
 const autoTeleport = ref(false)
 const autoteleportButton = ref()
 
-const loadingAutoTeleport = computed(
-  () => !autoteleportButton.value?.hasBalances,
-)
+const loadingAutoTeleport = computed(() => !autoteleportButton.value?.isReady)
 
 const teleportTransitionTxFees = computed(() =>
   format(

components/create/Confirm/MintConfirmModal.vue

@@ -118,7 +118,7 @@ const emit = defineEmits(['confirm', 'update:modelValue'])
 const networkFee = ref(0)
 const autoteleport = ref()
 
-const loading = computed(() => !autoteleport.value?.hasBalances)
+const loading = computed(() => !autoteleport.value?.isReady)
 
 const isNFT = computed(
   () => props.nftInformation.mintType === CreateComponent.NFT,

components/explore/ActiveCount.vue

@@ -2,7 +2,7 @@
   <div
     v-if="count"
     class="count is-flex is-justify-content-center is-align-items-center"
-    :class="{ rounded: rounded }">
+    :class="[`count--${position}`, { rounded: rounded }]">
     {{ count }}
   </div>
 </template>
@@ -12,10 +12,12 @@ withDefaults(
   defineProps<{
     count?: number
     rounded?: boolean
+    position?: string
   }>(),
   {
     rounded: false,
     count: 0,
+    position: 'top-left' as 'top-left' | 'top-right',
   },
 )
 </script>
@@ -25,13 +27,21 @@ withDefaults(
 
 .count {
   position: absolute;
-  bottom: 1.5rem;
-  left: -0.75rem;
   height: 1.5rem;
   width: 1.5rem;
   line-height: 1.5rem;
   text-align: center;
 
+  &--top-left {
+    bottom: 1.5rem;
+    left: -0.75rem;
+  }
+
+  &--top-right {
+    bottom: 1.5rem;
+    right: -0.75rem;
+  }
+
   @include ktheme() {
     border: 1px solid theme('border-color');
     background: theme('k-primary');

components/explore/DesktopControls.vue

@@ -9,18 +9,18 @@
       <ExploreSort />
       <ExploreOffer class="is-flex-grow-1" />
       <ChainDropdown v-if="!route.name?.includes('prefix-collection-id')" />
-      <ExploreGrid v-if="!isCollection" />
+      <GridLayoutControls v-if="!isCollection" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import ExploreTabs from './ExploreTabs.vue'
 import ExploreSort from './ExploreSort.vue'
-import ExploreGrid from './ExploreGrid.vue'
 import ExploreOffer from './ExploreOffer.vue'
 import FilterMenuButton from './FilterMenuButton.vue'
 import ChainDropdown from '@/components/common/ChainDropdown.vue'
+import GridLayoutControls from '@/components/shared/GridLayoutControls.vue'
 
 const route = useRoute()
 

components/items/ItemsGrid/ItemsGrid.vue

@@ -8,6 +8,7 @@
       v-if="total !== 0 && (!isLoading || !isFetchingData)"
       :id="scrollContainerId"
       v-slot="slotProps"
+      :grid-section="gridSection"
       :mobile-cols="2"
       class="my-5">
       <div
@@ -54,6 +55,7 @@
     <!-- skeleton on first load -->
     <DynamicGrid
       v-if="total === 0 && (isLoading || isFetchingData)"
+      :grid-section="gridSection"
       class="my-5"
       :mobile-cols="2">
       <NeoNftCardSkeleton
@@ -80,13 +82,16 @@ import isEqual from 'lodash/isEqual'
 import { useListingCartStore } from '@/stores/listingCart'
 import { getTokensNfts } from './useNftActions'
 import { NFT } from '@/components/rmrk/service/scheme'
+import { GridSection } from '@/stores/preferences'
 
 const { listingCartEnabled } = useListingCartConfig()
 const listingCartStore = useListingCartStore()
 const route = useRoute()
 
 const props = defineProps<{
   search?: Record<string, string | number>
+  resetSearchQueryParams?: string[]
+  gridSection?: GridSection
 }>()
 
 const emit = defineEmits(['total', 'loading'])
@@ -103,6 +108,7 @@ const gotoPage = (page: number) => {
   endPage.value = page
   isFetchingData.value = false
   isLoading.value = true
+  total.value = 0
 
   clearFetchResults()
   fetchSearch({ page, search: parseSearch(props.search) })
@@ -132,16 +138,20 @@ const {
 
 const skeletonCount = first.value
 
-const resetPage = useDebounceFn(() => {
+const resetPage = () => {
+  isLoading.value = true
   gotoPage(1)
-}, 500)
+}
+
+const debouncedResetPage = useDebounceFn(resetPage, 500)
 
 const { items, fetchSearch, clearFetchResults, usingTokens } = useFetchSearch({
   first,
   total,
   isFetchingData,
   isLoading,
-  resetSearch: resetPage,
+  resetSearch: debouncedResetPage,
+  resetSearchQueryParams: props.resetSearchQueryParams,
 })
 
 watch(
@@ -181,8 +191,7 @@ watch(
       return
     }
     if (!isEqual(newSearch, oldSearch)) {
-      isLoading.value = true
-      gotoPage(1)
+      resetPage()
     }
   },
   { deep: true },