From b11a9aa4addb439c4bea6641818097d29506b937 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Tue, 5 Dec 2023 14:44:37 +0500
Subject: [PATCH 01/65] add: profile collection filter working

---
 assets/styles/global.scss                   |   7 +
 components/explore/ActiveCount.vue          |  16 +-
 components/profile/CollectionFilter.vue     | 159 ++++++++++++++++++++
 components/profile/ProfileDetail.vue        |  28 +++-
 libs/ui/src/scss/tailwind.scss              |   3 +
 queries/fragments/collectionDetails.graphql |   3 +
 6 files changed, 210 insertions(+), 6 deletions(-)
 create mode 100644 components/profile/CollectionFilter.vue

diff --git a/assets/styles/global.scss b/assets/styles/global.scss
index 98bf9938a3..b91d72800c 100644
--- a/assets/styles/global.scss
+++ b/assets/styles/global.scss
@@ -440,6 +440,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');
@@ -572,3 +575,7 @@ a.has-text-grey {
 .has-text-inherit {
   color: inherit !important;
 }
+
+.min-width-0 {
+  min-width: 0;
+}
\ No newline at end of file
diff --git a/components/explore/ActiveCount.vue b/components/explore/ActiveCount.vue
index d1950f830b..c477185b56 100644
--- a/components/explore/ActiveCount.vue
+++ b/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');
diff --git a/components/profile/CollectionFilter.vue b/components/profile/CollectionFilter.vue
new file mode 100644
index 0000000000..186257595a
--- /dev/null
+++ b/components/profile/CollectionFilter.vue
@@ -0,0 +1,159 @@
+<template>
+  <NeoDropdown
+    v-model="checked"
+    :disabled="collections.length === 0"
+    class="py-0"
+    scrollable
+    :mobile-modal="false"
+    :close-on-click="false"
+    multiple>
+    <template #trigger="{ active }">
+      <NeoButton
+        :active="active"
+        no-shadow
+        rounded
+        label="Collections"
+        :icon="active ? 'chevron-up' : 'chevron-down'" />
+
+      <ActiveCount :count="checked.length" position="top-right" />
+    </template>
+
+    <NeoDropdownItem
+      v-for="collection in collections"
+      :key="collection.id"
+      class="is-flex no-border is-justify-content-center is-align-items-center max-width"
+      aria-role="listitem"
+      :value="collection.id">
+      <NeoCheckbox
+        :model-value="isSelected(collection)"
+        class="m-0"
+        label-class="m-0" />
+
+      <div
+        class="is-flex is-align-items-center filter-container pl-2 is-flex-grow-1 min-width-0">
+        <img
+          :src="sanitizeIpfsUrl(collection.meta.image)"
+          class="image is-32x32 is-flex-shrink-0 border mr-2"
+          :alt="collection.name || collection.id" />
+        <div
+          class="is-flex is-flex-direction-column is-flex-grow-1 min-width-0">
+          <div class="is-ellipsis">
+            {{ collection.name || collection.id }}
+          </div>
+
+          <div
+            class="is-flex is-justify-content-space-between is-size-7 has-text-grey">
+            <div>{{ $t('search.owners') }}: {{ collection.owners }}</div>
+          </div>
+        </div>
+
+        <div class="rounded ml-5 px-3 k-grey-light">
+          {{ collection.owned }}
+        </div>
+      </div>
+    </NeoDropdownItem>
+  </NeoDropdown>
+</template>
+
+<script setup lang="ts">
+import {
+  NeoButton,
+  NeoCheckbox,
+  NeoDropdown,
+  NeoDropdownItem,
+} from '@kodadot1/brick'
+import collectionListWithSearch from '@/queries/subsquid/general/collectionListWithSearch.graphql'
+import ActiveCount from '../explore/ActiveCount.vue'
+import { CollectionEntityMinimal } from '@/components/collection/utils/types'
+import { getDenyList } from '@/utils/prefix'
+
+type Collection = CollectionEntityMinimal & {
+  owners: number
+  owned: number
+}
+
+const props = defineProps<{
+  id: string
+  search: Record<string, string | number>
+  tabKey: string
+}>()
+
+const checked = ref<string[]>([])
+
+const { urlPrefix, client } = usePrefix()
+const { replaceUrl } = useReplaceUrl()
+const { accountId } = useAuth()
+
+const collections = ref<Collection[]>([])
+
+const nonCollectionSearchParams = computed(() => {
+  const search = { ...props.search }
+  delete search.collection
+  return search
+})
+
+useLazyAsyncData('profileCollections', async () => {
+  await getProfileCollections()
+})
+
+const getProfileCollections = async () => {
+  const collectionSearch = {
+    nfts_some: props.search,
+  }
+
+  const { data } = await useAsyncQuery({
+    query: collectionListWithSearch,
+    variables: {
+      search: [collectionSearch],
+      denyList: getDenyList(urlPrefix.value),
+      first: 100,
+      offset: 0,
+    },
+    clientId: client.value,
+  })
+
+  const collectionEntities = data.value?.collectionEntities || []
+
+  collections.value = formatCollections(collectionEntities)
+}
+
+const formatCollections = (collectionEntities) => {
+  return collectionEntities.map((collection) => {
+    const currentOwners = collection.nfts.map((nft) => nft.currentOwner)
+
+    return {
+      ...collection,
+      owners: new Set(currentOwners).size,
+      owned: currentOwners.filter(
+        (currentOwner: string) => accountId.value === currentOwner,
+      ).length,
+    }
+  })
+}
+
+const isSelected = (collection: Collection) => {
+  return checked.value.includes(collection.id)
+}
+
+watch(checked, (value) => {
+  replaceUrl({ collections: value.toString() })
+})
+
+watch(nonCollectionSearchParams, (x, y) => console.log(x, y))
+
+watch(
+  [() => props.tabKey, nonCollectionSearchParams],
+  () => {
+    checked.value = []
+    collections.value = []
+    getProfileCollections()
+  },
+  { deep: true },
+)
+</script>
+
+<style scoped lang="scss">
+.rounded {
+  border-radius: 1rem;
+}
+</style>
diff --git a/components/profile/ProfileDetail.vue b/components/profile/ProfileDetail.vue
index 4e6dee70d9..6e28f811f7 100644
--- a/components/profile/ProfileDetail.vue
+++ b/components/profile/ProfileDetail.vue
@@ -149,6 +149,12 @@
               :label="$t('activity.sold')"
               url-param="sold"
               class="ml-4" />
+
+            <CollectionFilter
+              :id="id.toString()"
+              :search="itemsGridSearch"
+              :tab-key="tabKey"
+              class="ml-4" />
           </div>
           <div class="is-hidden-mobile">
             <ProfileGrid class="is-hidden-mobile" />
@@ -187,6 +193,7 @@ import { useListingCartStore } from '@/stores/listingCart'
 import resolveQueryPath from '@/utils/queryPathResolver'
 import { chainsWithMintInteraction } from '@/composables/collectionActivity/helpers'
 import { Interaction } from '@kodadot1/minimark/v1'
+import CollectionFilter from './CollectionFilter.vue'
 
 enum ProfileTab {
   OWNED = 'owned',
@@ -226,11 +233,13 @@ const legal = ref('')
 const riot = ref('')
 const isModalActive = ref(false)
 
+const tabKey = computed(() =>
+  activeTab.value === ProfileTab.OWNED ? 'currentOwner_eq' : 'issuer_eq',
+)
+
 const itemsGridSearch = computed(() => {
-  const tabKey =
-    activeTab.value === ProfileTab.OWNED ? 'currentOwner_eq' : 'issuer_eq'
   const query: Record<string, unknown> = {
-    [tabKey]: id.value,
+    [tabKey.value]: id.value,
   }
 
   if (listed.value) {
@@ -243,6 +252,19 @@ const itemsGridSearch = computed(() => {
     }
   }
 
+  const collections = route.query.collections
+    ?.toString()
+    .split(',')
+    .filter(Boolean)
+
+  if (collections?.length !== 0) {
+    query['collection'] = {
+      id_in: collections,
+    }
+  }
+
+  console.log('new saearch')
+
   return query
 })
 
diff --git a/libs/ui/src/scss/tailwind.scss b/libs/ui/src/scss/tailwind.scss
index e5947797c1..6189a225f8 100644
--- a/libs/ui/src/scss/tailwind.scss
+++ b/libs/ui/src/scss/tailwind.scss
@@ -31,6 +31,7 @@
     --k-red-accent-2: #ffe6e6;
     --k-grey: #999999;
     --k-grey-fix: #999999;
+    --k-grey-light: #D9D9D9;
     --k-pink: #ffb6ef;
     --k-yellow: #feffb6;
     --k-blue-accent: #b6cbff;
@@ -77,6 +78,7 @@
       --k-red-accent-2: #390b0b;
       --k-grey: #cccccc;
       --k-grey-fix: #999999;
+      --k-grey-light: #454545;
       --k-pink: #7a2a68;
       --k-yellow: #363234;
       --k-blue-accent: #2e50a2;
@@ -119,6 +121,7 @@
     --k-red-accent-2: #390b0b;
     --k-grey: #cccccc;
     --k-grey-fix: #999999;
+    --k-grey-light: #454545;
     --k-pink: #7a2a68;
     --k-yellow: #363234;
     --k-blue-accent: #2e50a2;
diff --git a/queries/fragments/collectionDetails.graphql b/queries/fragments/collectionDetails.graphql
index 86922f6da7..42568f0c0c 100644
--- a/queries/fragments/collectionDetails.graphql
+++ b/queries/fragments/collectionDetails.graphql
@@ -1,4 +1,7 @@
 fragment collectionDetails on CollectionEntity {
   name
+  meta {
+    image
+  }
   # max
 }

From 79d252cb8c7401ef23758a6fc3837fddba558479 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Tue, 5 Dec 2023 16:15:26 +0500
Subject: [PATCH 02/65] fix: collection clear on tab change

---
 assets/styles/global.scss               |  4 ++
 components/profile/CollectionFilter.vue | 72 +++++++++++++------------
 components/profile/ProfileDetail.vue    |  2 -
 3 files changed, 41 insertions(+), 37 deletions(-)

diff --git a/assets/styles/global.scss b/assets/styles/global.scss
index b91d72800c..187063295a 100644
--- a/assets/styles/global.scss
+++ b/assets/styles/global.scss
@@ -578,4 +578,8 @@ a.has-text-grey {
 
 .min-width-0 {
   min-width: 0;
+}
+
+.pointer-events-none {
+  pointer-events: none !important;
 }
\ No newline at end of file
diff --git a/components/profile/CollectionFilter.vue b/components/profile/CollectionFilter.vue
index 186257595a..c71ff2a9c9 100644
--- a/components/profile/CollectionFilter.vue
+++ b/components/profile/CollectionFilter.vue
@@ -3,7 +3,6 @@
     v-model="checked"
     :disabled="collections.length === 0"
     class="py-0"
-    scrollable
     :mobile-modal="false"
     :close-on-click="false"
     multiple>
@@ -18,40 +17,41 @@
       <ActiveCount :count="checked.length" position="top-right" />
     </template>
 
-    <NeoDropdownItem
-      v-for="collection in collections"
-      :key="collection.id"
-      class="is-flex no-border is-justify-content-center is-align-items-center max-width"
-      aria-role="listitem"
-      :value="collection.id">
-      <NeoCheckbox
-        :model-value="isSelected(collection)"
-        class="m-0"
-        label-class="m-0" />
-
-      <div
-        class="is-flex is-align-items-center filter-container pl-2 is-flex-grow-1 min-width-0">
-        <img
-          :src="sanitizeIpfsUrl(collection.meta.image)"
-          class="image is-32x32 is-flex-shrink-0 border mr-2"
-          :alt="collection.name || collection.id" />
+    <div class="py-5">
+      <NeoDropdownItem
+        v-for="collection in collections"
+        :key="collection.id"
+        class="is-flex no-border is-justify-content-center is-align-items-center"
+        aria-role="listitem"
+        :value="collection.id">
+        <NeoCheckbox
+          :model-value="isSelected(collection)"
+          class="m-0 pointer-events-none"
+          label-class="m-0" />
         <div
-          class="is-flex is-flex-direction-column is-flex-grow-1 min-width-0">
-          <div class="is-ellipsis">
-            {{ collection.name || collection.id }}
-          </div>
-
+          class="is-flex is-align-items-center filter-container pl-2 is-flex-grow-1 min-width-0">
+          <img
+            :src="sanitizeIpfsUrl(collection.meta.image)"
+            class="image is-32x32 is-flex-shrink-0 border mr-2"
+            :alt="collection.name || collection.id" />
           <div
-            class="is-flex is-justify-content-space-between is-size-7 has-text-grey">
-            <div>{{ $t('search.owners') }}: {{ collection.owners }}</div>
+            class="is-flex is-flex-direction-column is-flex-grow-1 min-width-0">
+            <div class="is-ellipsis">
+              {{ collection.name || collection.id }}
+            </div>
+
+            <div
+              class="is-flex is-justify-content-space-between is-size-7 has-text-grey">
+              <div>{{ $t('search.owners') }}: {{ collection.owners }}</div>
+            </div>
           </div>
-        </div>
 
-        <div class="rounded ml-5 px-3 k-grey-light">
-          {{ collection.owned }}
+          <div class="rounded ml-5 px-3 k-grey-light">
+            {{ collection.owned }}
+          </div>
         </div>
-      </div>
-    </NeoDropdownItem>
+      </NeoDropdownItem>
+    </div>
   </NeoDropdown>
 </template>
 
@@ -66,6 +66,7 @@ import collectionListWithSearch from '@/queries/subsquid/general/collectionListW
 import ActiveCount from '../explore/ActiveCount.vue'
 import { CollectionEntityMinimal } from '@/components/collection/utils/types'
 import { getDenyList } from '@/utils/prefix'
+import isEqual from 'lodash/isEqual'
 
 type Collection = CollectionEntityMinimal & {
   owners: number
@@ -82,7 +83,6 @@ const checked = ref<string[]>([])
 
 const { urlPrefix, client } = usePrefix()
 const { replaceUrl } = useReplaceUrl()
-const { accountId } = useAuth()
 
 const collections = ref<Collection[]>([])
 
@@ -125,7 +125,7 @@ const formatCollections = (collectionEntities) => {
       ...collection,
       owners: new Set(currentOwners).size,
       owned: currentOwners.filter(
-        (currentOwner: string) => accountId.value === currentOwner,
+        (currentOwner: string) => props.id === currentOwner,
       ).length,
     }
   })
@@ -139,11 +139,13 @@ watch(checked, (value) => {
   replaceUrl({ collections: value.toString() })
 })
 
-watch(nonCollectionSearchParams, (x, y) => console.log(x, y))
-
 watch(
   [() => props.tabKey, nonCollectionSearchParams],
-  () => {
+  ([tabKey, search], [oldTabKey, oldSearch]) => {
+    if (isEqual(search, oldSearch) || tabKey === oldTabKey) {
+      return
+    }
+
     checked.value = []
     collections.value = []
     getProfileCollections()
diff --git a/components/profile/ProfileDetail.vue b/components/profile/ProfileDetail.vue
index 6e28f811f7..96fbe9229f 100644
--- a/components/profile/ProfileDetail.vue
+++ b/components/profile/ProfileDetail.vue
@@ -263,8 +263,6 @@ const itemsGridSearch = computed(() => {
     }
   }
 
-  console.log('new saearch')
-
   return query
 })
 

From c89ee33129e23df480ca6f0ff731b464b40a8590 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Tue, 5 Dec 2023 16:47:24 +0500
Subject: [PATCH 03/65] fix: modal width

---
 components/profile/CollectionFilter.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/components/profile/CollectionFilter.vue b/components/profile/CollectionFilter.vue
index c71ff2a9c9..51528b9387 100644
--- a/components/profile/CollectionFilter.vue
+++ b/components/profile/CollectionFilter.vue
@@ -3,7 +3,7 @@
     v-model="checked"
     :disabled="collections.length === 0"
     class="py-0"
-    :mobile-modal="false"
+    :mobile-modal="true"
     :close-on-click="false"
     multiple>
     <template #trigger="{ active }">
@@ -17,7 +17,7 @@
       <ActiveCount :count="checked.length" position="top-right" />
     </template>
 
-    <div class="py-5">
+    <div class="py-5 width">
       <NeoDropdownItem
         v-for="collection in collections"
         :key="collection.id"
@@ -155,7 +155,16 @@ watch(
 </script>
 
 <style scoped lang="scss">
+@import '@/assets/styles/abstracts/variables';
+
 .rounded {
   border-radius: 1rem;
 }
+.width {
+  width: 300px;
+
+  @include mobile {
+    width: unset;
+  }
+}
 </style>

From ea62f1b426bc0a123978a20d08d21a7636c0ee12 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Tue, 5 Dec 2023 17:37:49 +0500
Subject: [PATCH 04/65] fix: profile tab change reset filters

---
 components/profile/CollectionFilter.vue | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/components/profile/CollectionFilter.vue b/components/profile/CollectionFilter.vue
index 51528b9387..8a28f0be19 100644
--- a/components/profile/CollectionFilter.vue
+++ b/components/profile/CollectionFilter.vue
@@ -98,7 +98,7 @@ useLazyAsyncData('profileCollections', async () => {
 
 const getProfileCollections = async () => {
   const collectionSearch = {
-    nfts_some: props.search,
+    nfts_some: nonCollectionSearchParams.value,
   }
 
   const { data } = await useAsyncQuery({
@@ -140,14 +140,13 @@ watch(checked, (value) => {
 })
 
 watch(
-  [() => props.tabKey, nonCollectionSearchParams],
-  ([tabKey, search], [oldTabKey, oldSearch]) => {
-    if (isEqual(search, oldSearch) || tabKey === oldTabKey) {
-      return
+  [() => props.tabKey, () => props.search],
+  ([, search], [, oldSearch]) => {
+    if (isEqual(search.collection, oldSearch.collection)) {
+      checked.value = []
+      collections.value = []
     }
 
-    checked.value = []
-    collections.value = []
     getProfileCollections()
   },
   { deep: true },

From 69485474891106ae2a204d2bffa13eaa177b6ff1 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Thu, 7 Dec 2023 12:07:13 +0500
Subject: [PATCH 05/65] ref: pr review

---
 components/profile/CollectionFilter.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/components/profile/CollectionFilter.vue b/components/profile/CollectionFilter.vue
index 8a28f0be19..d6b50cbc04 100644
--- a/components/profile/CollectionFilter.vue
+++ b/components/profile/CollectionFilter.vue
@@ -17,7 +17,7 @@
       <ActiveCount :count="checked.length" position="top-right" />
     </template>
 
-    <div class="py-5 width">
+    <div class="py-5 dropdown-width">
       <NeoDropdownItem
         v-for="collection in collections"
         :key="collection.id"
@@ -26,8 +26,7 @@
         :value="collection.id">
         <NeoCheckbox
           :model-value="isSelected(collection)"
-          class="m-0 pointer-events-none"
-          label-class="m-0" />
+          class="m-0 pointer-events-none" />
         <div
           class="is-flex is-align-items-center filter-container pl-2 is-flex-grow-1 min-width-0">
           <img
@@ -159,8 +158,8 @@ watch(
 .rounded {
   border-radius: 1rem;
 }
-.width {
-  width: 300px;
+.dropdown-width {
+  width: 18.75rem;
 
   @include mobile {
     width: unset;

From 5fd080d513916f80c2e3ba7df1774338eb9d9915 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Thu, 7 Dec 2023 13:33:30 +0500
Subject: [PATCH 06/65] ref: remove paddings and margins chekcbox

---
 components/profile/CollectionFilter.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/profile/CollectionFilter.vue b/components/profile/CollectionFilter.vue
index d6b50cbc04..b91726706d 100644
--- a/components/profile/CollectionFilter.vue
+++ b/components/profile/CollectionFilter.vue
@@ -26,9 +26,9 @@
         :value="collection.id">
         <NeoCheckbox
           :model-value="isSelected(collection)"
-          class="m-0 pointer-events-none" />
+          class="pointer-events-none" />
         <div
-          class="is-flex is-align-items-center filter-container pl-2 is-flex-grow-1 min-width-0">
+          class="is-flex is-align-items-center filter-container is-flex-grow-1 min-width-0">
           <img
             :src="sanitizeIpfsUrl(collection.meta.image)"
             class="image is-32x32 is-flex-shrink-0 border mr-2"

From 8de93ff4757f5278d55548922537cff32eecc99a Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Thu, 7 Dec 2023 14:02:57 +0500
Subject: [PATCH 07/65] fix: show skeleton on new search

---
 components/items/ItemsGrid/ItemsGrid.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/items/ItemsGrid/ItemsGrid.vue b/components/items/ItemsGrid/ItemsGrid.vue
index 804c25217e..834fd43954 100644
--- a/components/items/ItemsGrid/ItemsGrid.vue
+++ b/components/items/ItemsGrid/ItemsGrid.vue
@@ -101,6 +101,7 @@ const gotoPage = (page: number) => {
   endPage.value = page
   isFetchingData.value = false
   isLoading.value = true
+  total.value = 0
 
   clearFetchResults()
   fetchSearch({ page, search: parseSearch(props.search) })

From c10bdba9f0c4bcf622c49c47ac37666874393ef7 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Thu, 7 Dec 2023 17:05:41 +0500
Subject: [PATCH 08/65] add: is ready satte auto teleport

---
 .../autoTeleport/AutoTeleportActionButton.vue | 10 +++----
 .../ConfirmPurchaseModal.vue                  |  2 +-
 .../common/listingCart/ListingCartModal.vue   |  4 +--
 .../create/Confirm/MintConfirmModal.vue       |  2 +-
 composables/autoTeleport/useAutoTeleport.ts   |  4 +--
 .../autoTeleport/useAutoTeleportTransition.ts |  6 ++--
 .../useAutoTeleportTransitionDetails.ts       | 28 +++++++++++++++----
 7 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/components/common/autoTeleport/AutoTeleportActionButton.vue b/components/common/autoTeleport/AutoTeleportActionButton.vue
index d6766632b4..e9f095beb1 100644
--- a/components/common/autoTeleport/AutoTeleportActionButton.vue
+++ b/components/common/autoTeleport/AutoTeleportActionButton.vue
@@ -130,7 +130,7 @@ const amount = ref()
 
 const {
   isAvailable: isAutoTeleportAvailable,
-  hasBalances,
+  isReady,
   hasEnoughInCurrentChain,
   hasEnoughInRichestChain,
   optimalTransition,
@@ -179,12 +179,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(
@@ -202,7 +202,7 @@ const autoTeleportLabel = computed(() => {
     return props.label
   }
 
-  if (!hasBalances.value) {
+  if (!isReady.value) {
     return $i18n.t('autoTeleport.checking')
   }
 
@@ -293,7 +293,7 @@ watchSyncEffect(() => {
   }
 })
 
-defineExpose({ hasBalances, optimalTransition })
+defineExpose({ isReady, optimalTransition })
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue b/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue
index 9a32db1a54..18ce48c683 100644
--- a/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue
+++ b/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)
 
diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index 0d0928bce6..8a052b26d9 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -96,9 +96,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(
diff --git a/components/create/Confirm/MintConfirmModal.vue b/components/create/Confirm/MintConfirmModal.vue
index 7db432f4eb..55cd78c091 100644
--- a/components/create/Confirm/MintConfirmModal.vue
+++ b/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,
diff --git a/composables/autoTeleport/useAutoTeleport.ts b/composables/autoTeleport/useAutoTeleport.ts
index 9aaa4a0ac6..3074e0fabb 100644
--- a/composables/autoTeleport/useAutoTeleport.ts
+++ b/composables/autoTeleport/useAutoTeleport.ts
@@ -26,7 +26,7 @@ export default function (
   const {
     hasEnoughInCurrentChain,
     hasEnoughInRichestChain,
-    hasBalances,
+    isReady,
     optimalTransition,
   } = useAutoTeleportTransition({
     actions,
@@ -83,7 +83,7 @@ export default function (
   return {
     hasEnoughInCurrentChain,
     hasEnoughInRichestChain,
-    hasBalances,
+    isReady,
     optimalTransition,
     transactions,
     isAvailable,
diff --git a/composables/autoTeleport/useAutoTeleportTransition.ts b/composables/autoTeleport/useAutoTeleportTransition.ts
index 5e56595341..2fe7a13b8d 100644
--- a/composables/autoTeleport/useAutoTeleportTransition.ts
+++ b/composables/autoTeleport/useAutoTeleportTransition.ts
@@ -24,12 +24,12 @@ export default function ({
 
   const {
     amountToTeleport,
-    hasBalances,
     hasEnoughInCurrentChain,
     hasEnoughInRichestChain,
     sourceChain,
     chainSymbol,
     txFees,
+    isReady,
   } = useAutoTeleportTransitionDetails(actions, neededAmount, fees)
 
   const { formatted: amountFormatted, usd: amountUsd } = useAmount(
@@ -48,7 +48,7 @@ export default function ({
 
     let source: TeleportChain | null = null
 
-    if (hasEnoughInRichestChain.value && sourceChain.value) {
+    if (hasEnoughInRichestChain.value && sourceChain.value && isReady.value) {
       source = {
         chain: sourceChain.value,
         prefix: chainToPrefixMap[sourceChain.value],
@@ -73,7 +73,7 @@ export default function ({
 
   return {
     isAvailable,
-    hasBalances,
+    isReady,
     hasEnoughInCurrentChain,
     hasEnoughInRichestChain,
     optimalTransition,
diff --git a/composables/autoTeleport/useAutoTeleportTransitionDetails.ts b/composables/autoTeleport/useAutoTeleportTransitionDetails.ts
index b0a9f44dc9..db3941ed28 100644
--- a/composables/autoTeleport/useAutoTeleportTransitionDetails.ts
+++ b/composables/autoTeleport/useAutoTeleportTransitionDetails.ts
@@ -27,7 +27,8 @@ export default function (
   const { apiInstance, apiInstanceByPrefix } = useApi()
   const { balance } = useBalance()
 
-  const hasBalances = ref(false)
+  const fetched = reactive({ teleportTxFee: false })
+
   const teleportTxFee = ref(0)
   const actionTxFees = ref<number[]>([])
   const extraActionFees = computed(() =>
@@ -71,6 +72,10 @@ export default function (
       Number(transferableCurrentChainBalance.value),
   )
 
+  const needsSourceChainBalances = computed(
+    () => !hasEnoughInCurrentChain.value,
+  )
+
   const sourceChainsBalances = computed<{ [key: Chain]: string }>(() =>
     allowedSourceChains.value.reduce(
       (reducer, chainPrefix) => ({
@@ -81,6 +86,18 @@ export default function (
     ),
   )
 
+  const hasBalances = computed(
+    () =>
+      Boolean(currentChainBalance.value) &&
+      Object.values(sourceChainsBalances.value).every(Boolean),
+  )
+
+  const isFetchingDetails = computed(
+    () => !Object.values(fetched).every(Boolean),
+  )
+
+  const isReady = computed(() => hasBalances.value && !isFetchingDetails.value)
+
   const richestChain = computed<Chain | undefined>(
     () => getMaxKeyByValue(sourceChainsBalances.value) as Chain | undefined,
   )
@@ -150,8 +167,10 @@ export default function (
 
   watch(fetchTeleportFee, async () => {
     if (fetchTeleportFee.value) {
+      fetched.teleportTxFee = false
       const fee = await getTeleportTransactionFee()
       teleportTxFee.value = Number(fee) || 0
+      fetched.teleportTxFee = true
     }
   })
 
@@ -189,11 +208,10 @@ export default function (
   )
 
   watch(
-    [allowedSourceChains, hasEnoughInCurrentChain],
+    [allowedSourceChains, needsSourceChainBalances],
     async () => {
-      if (allowedSourceChains.value.length && !hasEnoughInCurrentChain.value) {
+      if (allowedSourceChains.value.length && needsSourceChainBalances.value) {
         await getTransitionBalances()
-        hasBalances.value = true
       }
     },
     { immediate: true },
@@ -201,7 +219,7 @@ export default function (
 
   return {
     amountToTeleport,
-    hasBalances,
+    isReady,
     hasEnoughInCurrentChain,
     hasEnoughInRichestChain,
     sourceChain: richestChain,

From d00716132cbef70250d37bcef7ec1be760030e97 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Thu, 7 Dec 2023 18:15:10 +0500
Subject: [PATCH 09/65] add: actionTxFees fetched state

---
 .../useAutoTeleportTransitionDetails.ts       | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/composables/autoTeleport/useAutoTeleportTransitionDetails.ts b/composables/autoTeleport/useAutoTeleportTransitionDetails.ts
index db3941ed28..7ca0e9d659 100644
--- a/composables/autoTeleport/useAutoTeleportTransitionDetails.ts
+++ b/composables/autoTeleport/useAutoTeleportTransitionDetails.ts
@@ -27,14 +27,13 @@ export default function (
   const { apiInstance, apiInstanceByPrefix } = useApi()
   const { balance } = useBalance()
 
-  const fetched = reactive({ teleportTxFee: false })
+  const fetched = ref({ teleportTxFee: false, actionTxFees: false })
 
   const teleportTxFee = ref(0)
   const actionTxFees = ref<number[]>([])
   const extraActionFees = computed(() =>
     fees.actions ? Math.ceil(fees.actions) : 0,
   )
-  const actionAutoFees = computed(() => fees.actionAutoFees || true)
 
   const chainSymbol = computed(
     () => currentChain.value && getChainCurrency(currentChain.value),
@@ -76,6 +75,10 @@ export default function (
     () => !hasEnoughInCurrentChain.value,
   )
 
+  const actionAutoFees = computed(() =>
+    fees.actionAutoFees ? needsSourceChainBalances.value : false,
+  )
+
   const sourceChainsBalances = computed<{ [key: Chain]: string }>(() =>
     allowedSourceChains.value.reduce(
       (reducer, chainPrefix) => ({
@@ -92,11 +95,14 @@ export default function (
       Object.values(sourceChainsBalances.value).every(Boolean),
   )
 
-  const isFetchingDetails = computed(
-    () => !Object.values(fetched).every(Boolean),
+  const isFetchingDetails = computed(() =>
+    [
+      fetched.value.teleportTxFee,
+      actionAutoFees.value || fetched.value.actionTxFees,
+    ].every(Boolean),
   )
 
-  const isReady = computed(() => hasBalances.value && !isFetchingDetails.value)
+  const isReady = computed(() => hasBalances.value && isFetchingDetails.value)
 
   const richestChain = computed<Chain | undefined>(
     () => getMaxKeyByValue(sourceChainsBalances.value) as Chain | undefined,
@@ -167,10 +173,10 @@ export default function (
 
   watch(fetchTeleportFee, async () => {
     if (fetchTeleportFee.value) {
-      fetched.teleportTxFee = false
+      fetched.value.teleportTxFee = false
       const fee = await getTeleportTransactionFee()
       teleportTxFee.value = Number(fee) || 0
-      fetched.teleportTxFee = true
+      fetched.value.teleportTxFee = true
     }
   })
 
@@ -183,6 +189,7 @@ export default function (
     async () => {
       if (actionAutoFees.value) {
         try {
+          fetched.value.actionTxFees = false
           const feesPromisses = actions.value.map(
             async ({ action, prefix }) => {
               let api = await apiInstance.value
@@ -201,6 +208,8 @@ export default function (
           actionTxFees.value = fees.map(Number)
         } catch (error) {
           console.error(`[AUTOTELEPORT]: Failed getting action fee  ${error}`)
+        } finally {
+          fetched.value.actionTxFees = true
         }
       }
     },

From a9d3bcabcca8a266fdb2438fed3c7c84bd666202 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Fri, 8 Dec 2023 13:34:14 +0500
Subject: [PATCH 10/65] fix: add scrollabale dropdown

---
 components/profile/CollectionFilter.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/profile/CollectionFilter.vue b/components/profile/CollectionFilter.vue
index b91726706d..402e5cf13f 100644
--- a/components/profile/CollectionFilter.vue
+++ b/components/profile/CollectionFilter.vue
@@ -2,6 +2,7 @@
   <NeoDropdown
     v-model="checked"
     :disabled="collections.length === 0"
+    :scrollable="collections.length > 4"
     class="py-0"
     :mobile-modal="true"
     :close-on-click="false"

From 72c8e4f519880b2b1f7f89e8437e89ce4c2001ca Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Sat, 9 Dec 2023 11:28:31 +0500
Subject: [PATCH 11/65] add: keep collection filter on new search

---
 components/profile/CollectionFilter.vue | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/components/profile/CollectionFilter.vue b/components/profile/CollectionFilter.vue
index 402e5cf13f..615340c3ff 100644
--- a/components/profile/CollectionFilter.vue
+++ b/components/profile/CollectionFilter.vue
@@ -66,7 +66,6 @@ import collectionListWithSearch from '@/queries/subsquid/general/collectionListW
 import ActiveCount from '../explore/ActiveCount.vue'
 import { CollectionEntityMinimal } from '@/components/collection/utils/types'
 import { getDenyList } from '@/utils/prefix'
-import isEqual from 'lodash/isEqual'
 
 type Collection = CollectionEntityMinimal & {
   owners: number
@@ -135,19 +134,23 @@ const isSelected = (collection: Collection) => {
   return checked.value.includes(collection.id)
 }
 
+const syncCheckedCollections = () => {
+  const filteredChecked = collections.value
+    .map((c) => c.id)
+    .filter((id) => checked.value.includes(id))
+
+  checked.value = filteredChecked
+}
+
 watch(checked, (value) => {
   replaceUrl({ collections: value.toString() })
 })
 
 watch(
-  [() => props.tabKey, () => props.search],
-  ([, search], [, oldSearch]) => {
-    if (isEqual(search.collection, oldSearch.collection)) {
-      checked.value = []
-      collections.value = []
-    }
-
-    getProfileCollections()
+  () => props.search,
+  async () => {
+    await getProfileCollections()
+    syncCheckedCollections()
   },
   { deep: true },
 )

From ab99ee88f5f13b9bc4b31ea04432e93d1b101166 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Sat, 9 Dec 2023 14:27:47 +0500
Subject: [PATCH 12/65] ref: collection filter checked values

---
 components/profile/CollectionFilter.vue | 16 +++++++++-------
 components/profile/ProfileDetail.vue    | 20 +++++++++++++-------
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/components/profile/CollectionFilter.vue b/components/profile/CollectionFilter.vue
index 615340c3ff..522b5566a5 100644
--- a/components/profile/CollectionFilter.vue
+++ b/components/profile/CollectionFilter.vue
@@ -66,6 +66,7 @@ import collectionListWithSearch from '@/queries/subsquid/general/collectionListW
 import ActiveCount from '../explore/ActiveCount.vue'
 import { CollectionEntityMinimal } from '@/components/collection/utils/types'
 import { getDenyList } from '@/utils/prefix'
+import isEqual from 'lodash/isEqual'
 
 type Collection = CollectionEntityMinimal & {
   owners: number
@@ -74,14 +75,14 @@ type Collection = CollectionEntityMinimal & {
 
 const props = defineProps<{
   id: string
+  modelValue: string[]
   search: Record<string, string | number>
   tabKey: string
 }>()
 
-const checked = ref<string[]>([])
+const checked = useVModel(props, 'modelValue')
 
 const { urlPrefix, client } = usePrefix()
-const { replaceUrl } = useReplaceUrl()
 
 const collections = ref<Collection[]>([])
 
@@ -114,6 +115,8 @@ const getProfileCollections = async () => {
   const collectionEntities = data.value?.collectionEntities || []
 
   collections.value = formatCollections(collectionEntities)
+
+  syncCheckedCollections()
 }
 
 const formatCollections = (collectionEntities) => {
@@ -139,18 +142,17 @@ const syncCheckedCollections = () => {
     .map((c) => c.id)
     .filter((id) => checked.value.includes(id))
 
+  if (isEqual(checked.value, filteredChecked)) {
+    return
+  }
+
   checked.value = filteredChecked
 }
 
-watch(checked, (value) => {
-  replaceUrl({ collections: value.toString() })
-})
-
 watch(
   () => props.search,
   async () => {
     await getProfileCollections()
-    syncCheckedCollections()
   },
   { deep: true },
 )
diff --git a/components/profile/ProfileDetail.vue b/components/profile/ProfileDetail.vue
index 96fbe9229f..fae8c46bff 100644
--- a/components/profile/ProfileDetail.vue
+++ b/components/profile/ProfileDetail.vue
@@ -152,6 +152,7 @@
 
             <CollectionFilter
               :id="id.toString()"
+              v-model="collections"
               :search="itemsGridSearch"
               :tab-key="tabKey"
               class="ml-4" />
@@ -237,6 +238,10 @@ const tabKey = computed(() =>
   activeTab.value === ProfileTab.OWNED ? 'currentOwner_eq' : 'issuer_eq',
 )
 
+const collections = ref(
+  route.query.collections?.toString().split(',').filter(Boolean) || [],
+)
+
 const itemsGridSearch = computed(() => {
   const query: Record<string, unknown> = {
     [tabKey.value]: id.value,
@@ -252,14 +257,9 @@ const itemsGridSearch = computed(() => {
     }
   }
 
-  const collections = route.query.collections
-    ?.toString()
-    .split(',')
-    .filter(Boolean)
-
-  if (collections?.length !== 0) {
+  if (collections.value?.length) {
     query['collection'] = {
-      id_in: collections,
+      id_in: collections.value,
     }
   }
 
@@ -344,6 +344,12 @@ watch(itemsGridSearch, (searchTerm, prevSearchTerm) => {
     listingCartStore.clear()
   }
 })
+
+watch(collections, (value) => {
+  replaceUrl({
+    collections: Boolean(value.toString()) ? value.toString() : undefined,
+  })
+})
 </script>
 
 <style lang="scss" scoped>

From 13afbd7dd602139bca475753a6c592c645c3bc67 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Sat, 9 Dec 2023 14:28:13 +0500
Subject: [PATCH 13/65] fix: multiple new search queries

---
 components/items/ItemsGrid/ItemsGrid.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/items/ItemsGrid/ItemsGrid.vue b/components/items/ItemsGrid/ItemsGrid.vue
index 834fd43954..e4d035b3d7 100644
--- a/components/items/ItemsGrid/ItemsGrid.vue
+++ b/components/items/ItemsGrid/ItemsGrid.vue
@@ -132,6 +132,7 @@ const {
 const skeletonCount = first.value
 
 const resetPage = useDebounceFn(() => {
+  isLoading.value = true
   gotoPage(1)
 }, 500)
 
@@ -180,8 +181,7 @@ watch(
       return
     }
     if (!isEqual(newSearch, oldSearch)) {
-      isLoading.value = true
-      gotoPage(1)
+      resetPage()
     }
   },
   { deep: true },

From c9e4eb5d38553d9a95e8746b2b6109bc1721f878 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Sat, 9 Dec 2023 14:45:39 +0500
Subject: [PATCH 14/65] fix: disable auto page reset

---
 components/items/ItemsGrid/ItemsGrid.vue | 20 ++++++++++++++------
 components/profile/ProfileDetail.vue     |  2 +-
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/components/items/ItemsGrid/ItemsGrid.vue b/components/items/ItemsGrid/ItemsGrid.vue
index e4d035b3d7..58e6c821ea 100644
--- a/components/items/ItemsGrid/ItemsGrid.vue
+++ b/components/items/ItemsGrid/ItemsGrid.vue
@@ -83,9 +83,15 @@ const { listingCartEnabled } = useListingCartConfig()
 const listingCartStore = useListingCartStore()
 const route = useRoute()
 
-const props = defineProps<{
-  search?: Record<string, string | number>
-}>()
+const props = withDefaults(
+  defineProps<{
+    search?: Record<string, string | number>
+    disableAutoPageReset: boolean
+  }>(),
+  {
+    disableAutoPageReset: false,
+  },
+)
 
 const emit = defineEmits(['total', 'loading'])
 
@@ -131,17 +137,19 @@ 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: props.disableAutoPageReset ? () => ({}) : debouncedResetPage,
 })
 
 watch(
diff --git a/components/profile/ProfileDetail.vue b/components/profile/ProfileDetail.vue
index fae8c46bff..005d5763f4 100644
--- a/components/profile/ProfileDetail.vue
+++ b/components/profile/ProfileDetail.vue
@@ -162,7 +162,7 @@
           </div>
         </div>
         <hr class="my-0" />
-        <ItemsGrid :search="itemsGridSearch" />
+        <ItemsGrid :search="itemsGridSearch" disable-auto-page-reset />
       </div>
 
       <CollectionGrid

From 3268cf9c93ab3a9735ae2fe295775a00cb212a21 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Sat, 9 Dec 2023 14:52:56 +0500
Subject: [PATCH 15/65] fix: add sold query only for created tab

---
 components/profile/ProfileDetail.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/profile/ProfileDetail.vue b/components/profile/ProfileDetail.vue
index 005d5763f4..deafc138cb 100644
--- a/components/profile/ProfileDetail.vue
+++ b/components/profile/ProfileDetail.vue
@@ -250,7 +250,8 @@ const itemsGridSearch = computed(() => {
   if (listed.value) {
     query['price_gt'] = 0
   }
-  if (sold.value) {
+
+  if (addSold.value) {
     query['events_some'] = {
       interaction_eq: 'BUY',
       AND: { caller_not_eq: id.value },
@@ -278,6 +279,9 @@ const activeTab = computed({
 const listed = computed(() => route.query.buy_now === 'true')
 
 const sold = computed(() => route.query.sold === 'true')
+const addSold = computed(
+  () => activeTab.value === ProfileTab.OWNED && sold.value,
+)
 
 const isMyProfile = computed(() => id.value === accountId.value)
 const hasBlockExplorer = computed(() => hasExplorer(urlPrefix.value))

From 033a57923a6159238e1a3a36d4d60401b22bfc74 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Sat, 9 Dec 2023 15:19:11 +0500
Subject: [PATCH 16/65] fix: wrong tab

---
 components/profile/ProfileDetail.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/profile/ProfileDetail.vue b/components/profile/ProfileDetail.vue
index deafc138cb..2b809e326a 100644
--- a/components/profile/ProfileDetail.vue
+++ b/components/profile/ProfileDetail.vue
@@ -280,7 +280,7 @@ const listed = computed(() => route.query.buy_now === 'true')
 
 const sold = computed(() => route.query.sold === 'true')
 const addSold = computed(
-  () => activeTab.value === ProfileTab.OWNED && sold.value,
+  () => activeTab.value === ProfileTab.CREATED && sold.value,
 )
 
 const isMyProfile = computed(() => id.value === accountId.value)

From 0ca6e9b14d775f5e07abc40f5e1853a4418f4323 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Sat, 9 Dec 2023 15:28:48 +0500
Subject: [PATCH 17/65] ref: fix sonarcloud issue

---
 components/profile/ProfileDetail.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/profile/ProfileDetail.vue b/components/profile/ProfileDetail.vue
index 2b809e326a..b06f0e6d97 100644
--- a/components/profile/ProfileDetail.vue
+++ b/components/profile/ProfileDetail.vue
@@ -351,7 +351,7 @@ watch(itemsGridSearch, (searchTerm, prevSearchTerm) => {
 
 watch(collections, (value) => {
   replaceUrl({
-    collections: Boolean(value.toString()) ? value.toString() : undefined,
+    collections: value.length ? value.toString() : undefined,
   })
 })
 </script>

From fa80d6c7a4b30e7d575189071d923992b0b8802b Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Sat, 9 Dec 2023 16:35:13 +0500
Subject: [PATCH 18/65] ref:added needsTeleport to  has fetched details

---
 .../useAutoTeleportTransitionDetails.ts       | 44 +++++++++++--------
 1 file changed, 26 insertions(+), 18 deletions(-)

diff --git a/composables/autoTeleport/useAutoTeleportTransitionDetails.ts b/composables/autoTeleport/useAutoTeleportTransitionDetails.ts
index 7ca0e9d659..32e8c10b3d 100644
--- a/composables/autoTeleport/useAutoTeleportTransitionDetails.ts
+++ b/composables/autoTeleport/useAutoTeleportTransitionDetails.ts
@@ -95,15 +95,6 @@ export default function (
       Object.values(sourceChainsBalances.value).every(Boolean),
   )
 
-  const isFetchingDetails = computed(() =>
-    [
-      fetched.value.teleportTxFee,
-      actionAutoFees.value || fetched.value.actionTxFees,
-    ].every(Boolean),
-  )
-
-  const isReady = computed(() => hasBalances.value && isFetchingDetails.value)
-
   const richestChain = computed<Chain | undefined>(
     () => getMaxKeyByValue(sourceChainsBalances.value) as Chain | undefined,
   )
@@ -144,6 +135,32 @@ export default function (
     return sourceChainProperties?.tokenSymbol === chainSymbol.value
   })
 
+  const fetchTeleportFee = computed(
+    () =>
+      richestChain.value &&
+      !teleportTxFee.value &&
+      addTeleportFee.value &&
+      hasEnoughInRichestChain.value &&
+      amountToTeleport.value > 0,
+  )
+
+  const needsTeleport = computed(
+    () => currentChainBalance.value && !hasEnoughInCurrentChain.value,
+  )
+
+  const hasFetchedDetails = computed(() => {
+    if (!needsTeleport.value) {
+      return true
+    }
+
+    return [
+      fetched.value.teleportTxFee,
+      actionAutoFees.value || fetched.value.actionTxFees,
+    ].every(Boolean)
+  })
+
+  const isReady = computed(() => hasBalances.value && hasFetchedDetails.value)
+
   const getTeleportTransactionFee = async () => {
     return await getTransactionFee({
       amount: amountToTeleport.value,
@@ -155,15 +172,6 @@ export default function (
     })
   }
 
-  const fetchTeleportFee = computed(
-    () =>
-      richestChain.value &&
-      !teleportTxFee.value &&
-      addTeleportFee.value &&
-      hasEnoughInRichestChain.value &&
-      amountToTeleport.value > 0,
-  )
-
   const getTransitionBalances = () => {
     return fetchChainsBalances([
       ...allowedSourceChains.value,

From 97effeb9486e2d96ad91cce1ac244b2343955201 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Sun, 10 Dec 2023 10:51:21 +0500
Subject: [PATCH 19/65] ref: does not need teleport

---
 .../useAutoTeleportTransitionDetails.ts           | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/composables/autoTeleport/useAutoTeleportTransitionDetails.ts b/composables/autoTeleport/useAutoTeleportTransitionDetails.ts
index 32e8c10b3d..592122fb20 100644
--- a/composables/autoTeleport/useAutoTeleportTransitionDetails.ts
+++ b/composables/autoTeleport/useAutoTeleportTransitionDetails.ts
@@ -144,12 +144,19 @@ export default function (
       amountToTeleport.value > 0,
   )
 
-  const needsTeleport = computed(
-    () => currentChainBalance.value && !hasEnoughInCurrentChain.value,
-  )
+  const doesNotNeedsTeleport = computed<boolean>(() => {
+    const needsTeleport =
+      Boolean(currentChainBalance.value) && !hasEnoughInCurrentChain.value
+
+    if (!needsTeleport) {
+      return true
+    }
+
+    return Boolean(richestChain.value) && !hasEnoughInRichestChain.value
+  })
 
   const hasFetchedDetails = computed(() => {
-    if (!needsTeleport.value) {
+    if (doesNotNeedsTeleport.value) {
       return true
     }
 

From 9ac43f75efcaee9f44b7faf4145dba7f9fa5d0d1 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Sun, 10 Dec 2023 11:40:03 +0500
Subject: [PATCH 20/65] add: acive grid size controls

---
 components/explore/DesktopControls.vue   |  4 +-
 components/explore/ExploreGrid.vue       | 35 --------------
 components/profile/ProfileDetail.vue     |  4 +-
 components/profile/ProfileGrid.vue       | 31 ------------
 components/shared/GridLayoutControls.vue | 60 ++++++++++++++++++++++++
 5 files changed, 64 insertions(+), 70 deletions(-)
 delete mode 100644 components/explore/ExploreGrid.vue
 delete mode 100644 components/profile/ProfileGrid.vue
 create mode 100644 components/shared/GridLayoutControls.vue

diff --git a/components/explore/DesktopControls.vue b/components/explore/DesktopControls.vue
index 7b10333a35..562d43df39 100644
--- a/components/explore/DesktopControls.vue
+++ b/components/explore/DesktopControls.vue
@@ -9,7 +9,7 @@
       <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>
@@ -17,10 +17,10 @@
 <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()
 
diff --git a/components/explore/ExploreGrid.vue b/components/explore/ExploreGrid.vue
deleted file mode 100644
index 5ac0e28b7d..0000000000
--- a/components/explore/ExploreGrid.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <NeoField addons-class="mb-0" class="mb-0">
-    <NeoButton
-      icon-left="grid-2"
-      :active="gridSize === 'large'"
-      @click="changeGridLayout(smallGridLayout, 'large')" />
-    <NeoButton
-      icon-left="grid"
-      :active="gridSize === 'medium'"
-      @click="changeGridLayout(smallGridLayout, 'medium')" />
-    <NeoButton
-      icon-left="grid-4"
-      :active="gridSize === 'small'"
-      @click="changeGridLayout(largeGridLayout, 'small')" />
-  </NeoField>
-</template>
-
-<script setup lang="ts">
-import { NeoButton, NeoField } from '@kodadot1/brick'
-import { usePreferencesStore } from '@/stores/preferences'
-
-const preferencesStore = usePreferencesStore()
-
-const gridSize = computed(() => preferencesStore.getGridSize)
-
-const smallGridLayout = ref('is-half-desktop is-half-tablet is-half-mobile')
-const largeGridLayout = ref(
-  'is-one-quarter-desktop is-one-third-tablet is-half-mobile',
-)
-
-const changeGridLayout = (layout: string, grid: string) => {
-  preferencesStore.setGalleryLayoutClass(layout)
-  preferencesStore.setGridSize(grid)
-}
-</script>
diff --git a/components/profile/ProfileDetail.vue b/components/profile/ProfileDetail.vue
index 4e6dee70d9..757c3f6541 100644
--- a/components/profile/ProfileDetail.vue
+++ b/components/profile/ProfileDetail.vue
@@ -151,7 +151,7 @@
               class="ml-4" />
           </div>
           <div class="is-hidden-mobile">
-            <ProfileGrid class="is-hidden-mobile" />
+            <GridLayoutControls class="is-hidden-mobile" />
           </div>
         </div>
         <hr class="my-0" />
@@ -174,7 +174,6 @@ import { NeoButton, NeoModal } from '@kodadot1/brick'
 import TabItem from '@/components/shared/TabItem.vue'
 import Identity from '@/components/identity/IdentityIndex.vue'
 import ItemsGrid from '@/components/items/ItemsGrid/ItemsGrid.vue'
-import ProfileGrid from './ProfileGrid.vue'
 import ProfileActivity from './ProfileActivitySummery.vue'
 import FilterButton from './FilterButton.vue'
 import ChainDropdown from '@/components/common/ChainDropdown.vue'
@@ -187,6 +186,7 @@ import { useListingCartStore } from '@/stores/listingCart'
 import resolveQueryPath from '@/utils/queryPathResolver'
 import { chainsWithMintInteraction } from '@/composables/collectionActivity/helpers'
 import { Interaction } from '@kodadot1/minimark/v1'
+import GridLayoutControls from '@/components/shared/GridLayoutControls.vue'
 
 enum ProfileTab {
   OWNED = 'owned',
diff --git a/components/profile/ProfileGrid.vue b/components/profile/ProfileGrid.vue
deleted file mode 100644
index e1cb147a95..0000000000
--- a/components/profile/ProfileGrid.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <NeoField addons-class="mb-0" class="mb-0">
-    <NeoButton
-      icon-left="grid-2"
-      no-shadow
-      :active="gridSize === 'large'"
-      @click="changeGridLayout(smallGridLayout, 'large')" />
-    <NeoButton
-      icon-left="grid"
-      no-shadow
-      class="no-border-left"
-      :active="gridSize === 'medium'"
-      @click="changeGridLayout(smallGridLayout, 'medium')" />
-  </NeoField>
-</template>
-
-<script setup lang="ts">
-import { NeoButton, NeoField } from '@kodadot1/brick'
-import { usePreferencesStore } from '@/stores/preferences'
-
-const preferencesStore = usePreferencesStore()
-
-const gridSize = computed(() => preferencesStore.getGridSize)
-
-const smallGridLayout = ref('is-half-desktop is-half-tablet is-half-mobile')
-
-const changeGridLayout = (layout: string, grid: string) => {
-  preferencesStore.setGalleryLayoutClass(layout)
-  preferencesStore.setGridSize(grid)
-}
-</script>
diff --git a/components/shared/GridLayoutControls.vue b/components/shared/GridLayoutControls.vue
new file mode 100644
index 0000000000..fef8cec727
--- /dev/null
+++ b/components/shared/GridLayoutControls.vue
@@ -0,0 +1,60 @@
+<template>
+  <NeoField addons-class="mb-0" class="mb-0">
+    <template v-for="grid in grids">
+      <NeoButton
+        v-if="sizes.includes(grid.size)"
+        :key="grid.size"
+        :icon-left="grid.icon"
+        :active="gridSize === grid.size"
+        @click="changeGridLayout(grid.class, grid.size)" />
+    </template>
+  </NeoField>
+</template>
+
+<script setup lang="ts">
+import { NeoButton, NeoField } from '@kodadot1/brick'
+import { usePreferencesStore } from '@/stores/preferences'
+
+type GridSize = 'large' | 'medium' | 'small'
+type Grid = { icon: string; size: GridSize; class: string }
+
+withDefaults(
+  defineProps<{
+    sizes: GridSize[]
+  }>(),
+  {
+    sizes: () => ['small', 'large', 'medium'],
+  },
+)
+
+const smallGridLayout = 'is-half-desktop is-half-tablet is-half-mobile'
+const largeGridLayout =
+  'is-one-quarter-desktop is-one-third-tablet is-half-mobile'
+
+const grids: Grid[] = [
+  {
+    icon: 'grid-2',
+    size: 'large',
+    class: smallGridLayout,
+  },
+  {
+    icon: 'grid',
+    size: 'medium',
+    class: smallGridLayout,
+  },
+  {
+    icon: 'grid-4',
+    size: 'small',
+    class: largeGridLayout,
+  },
+]
+
+const preferencesStore = usePreferencesStore()
+
+const gridSize = computed(() => preferencesStore.getGridSize)
+
+const changeGridLayout = (layout: string, grid: GridSize) => {
+  preferencesStore.setGalleryLayoutClass(layout)
+  preferencesStore.setGridSize(grid)
+}
+</script>

From d4a87ad907659c3349a4311f59d0e656e9549b3c Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Sun, 10 Dec 2023 23:52:45 +0800
Subject: [PATCH 21/65] fix: Profile: Every time you refresh - The token order
 changes

---
 components/balance/MultipleBalances.vue | 28 +++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/components/balance/MultipleBalances.vue b/components/balance/MultipleBalances.vue
index 29ecd57590..3928274867 100644
--- a/components/balance/MultipleBalances.vue
+++ b/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',
 )

From 160fb0a0cb1a4de967aceafb6eeccbf8d3b8af8d Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Mon, 11 Dec 2023 09:08:37 +0500
Subject: [PATCH 22/65] add: grid configs

---
 components/items/ItemsGrid/ItemsGrid.vue |  4 +++
 components/profile/ProfileDetail.vue     |  6 ++--
 components/shared/DynamicGrid.vue        | 18 ++++++++--
 components/shared/GridLayoutControls.vue | 33 ++++++++++-------
 stores/preferences.ts                    | 45 ++++++++++++++++--------
 5 files changed, 75 insertions(+), 31 deletions(-)

diff --git a/components/items/ItemsGrid/ItemsGrid.vue b/components/items/ItemsGrid/ItemsGrid.vue
index 804c25217e..04ebb9234a 100644
--- a/components/items/ItemsGrid/ItemsGrid.vue
+++ b/components/items/ItemsGrid/ItemsGrid.vue
@@ -8,6 +8,7 @@
       v-if="total !== 0 && (!isLoading || !isFetchingData)"
       :id="scrollContainerId"
       v-slot="slotProps"
+      :grid-section="gridSection"
       class="my-5">
       <div
         v-for="(entity, index) in items"
@@ -53,6 +54,7 @@
     <!-- skeleton on first load -->
     <DynamicGrid
       v-if="total === 0 && (isLoading || isFetchingData)"
+      :grid-section="gridSection"
       class="my-5">
       <NeoNftCardSkeleton
         v-for="n in skeletonCount"
@@ -78,6 +80,7 @@ import isEqual from 'lodash/isEqual'
 import { useListingCartStore } from '@/stores/listingCart'
 import { getTokensNfts } from './useNftActions'
 import { NFT } from '@/components/rmrk/service/scheme'
+import { type GridSection } from '@/stores/preferences'
 
 const { listingCartEnabled } = useListingCartConfig()
 const listingCartStore = useListingCartStore()
@@ -85,6 +88,7 @@ const route = useRoute()
 
 const props = defineProps<{
   search?: Record<string, string | number>
+  gridSection?: GridSection
 }>()
 
 const emit = defineEmits(['total', 'loading'])
diff --git a/components/profile/ProfileDetail.vue b/components/profile/ProfileDetail.vue
index 757c3f6541..b83e5cfdfa 100644
--- a/components/profile/ProfileDetail.vue
+++ b/components/profile/ProfileDetail.vue
@@ -151,11 +151,13 @@
               class="ml-4" />
           </div>
           <div class="is-hidden-mobile">
-            <GridLayoutControls class="is-hidden-mobile" />
+            <GridLayoutControls
+              class="is-hidden-mobile"
+              section="profile-gallery" />
           </div>
         </div>
         <hr class="my-0" />
-        <ItemsGrid :search="itemsGridSearch" />
+        <ItemsGrid grid-section="profile-gallery" :search="itemsGridSearch" />
       </div>
 
       <CollectionGrid
diff --git a/components/shared/DynamicGrid.vue b/components/shared/DynamicGrid.vue
index dcc73b83dd..b43af4cf8f 100644
--- a/components/shared/DynamicGrid.vue
+++ b/components/shared/DynamicGrid.vue
@@ -6,7 +6,12 @@
 
 <script setup lang="ts">
 import { useResizeObserver } from '@vueuse/core'
-import { usePreferencesStore } from '@/stores/preferences'
+import {
+  DEFAULT_GRID_SECTION,
+  type GridSection,
+  type GridSize,
+  usePreferencesStore,
+} from '@/stores/preferences'
 
 const props = withDefaults(
   defineProps<{
@@ -15,8 +20,9 @@ const props = withDefaults(
       medium: number
       large: number
     }
-    gridSize?: 'small' | 'medium' | 'large'
+    gridSize?: GridSize
     mobileVariant?: boolean
+    gridSection?: GridSection
   }>(),
   {
     defaultWidth: () => ({
@@ -25,6 +31,7 @@ const props = withDefaults(
       large: 16 * 20, // 20rem
     }),
     mobileVariant: true,
+    gridSection: DEFAULT_GRID_SECTION,
   },
 )
 
@@ -34,7 +41,12 @@ const cols = ref(5)
 const containerWidth = ref(0)
 const container = ref<HTMLDivElement | null>(null)
 
-const grid = computed(() => props.gridSize || preferencesStore.getGridSize)
+const grid = computed(
+  () =>
+    props.gridSize ||
+    (props.gridSection &&
+      preferencesStore.getGridConfigBySection(props.gridSection)?.size),
+)
 const isMobileVariant = computed(
   () => props.mobileVariant && containerWidth.value <= 768,
 )
diff --git a/components/shared/GridLayoutControls.vue b/components/shared/GridLayoutControls.vue
index fef8cec727..5c562cd7b6 100644
--- a/components/shared/GridLayoutControls.vue
+++ b/components/shared/GridLayoutControls.vue
@@ -13,24 +13,28 @@
 
 <script setup lang="ts">
 import { NeoButton, NeoField } from '@kodadot1/brick'
-import { usePreferencesStore } from '@/stores/preferences'
+import {
+  DEFAULT_GRID_SECTION,
+  type GridSection,
+  type GridSize,
+  largeGridLayout,
+  smallGridLayout,
+  usePreferencesStore,
+} from '@/stores/preferences'
 
-type GridSize = 'large' | 'medium' | 'small'
 type Grid = { icon: string; size: GridSize; class: string }
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
-    sizes: GridSize[]
+    sizes?: GridSize[]
+    section: GridSection
   }>(),
   {
     sizes: () => ['small', 'large', 'medium'],
+    section: DEFAULT_GRID_SECTION,
   },
 )
 
-const smallGridLayout = 'is-half-desktop is-half-tablet is-half-mobile'
-const largeGridLayout =
-  'is-one-quarter-desktop is-one-third-tablet is-half-mobile'
-
 const grids: Grid[] = [
   {
     icon: 'grid-2',
@@ -51,10 +55,15 @@ const grids: Grid[] = [
 
 const preferencesStore = usePreferencesStore()
 
-const gridSize = computed(() => preferencesStore.getGridSize)
+const gridSize = computed(
+  () => preferencesStore.getGridConfigBySection(props.section)?.size,
+)
 
-const changeGridLayout = (layout: string, grid: GridSize) => {
-  preferencesStore.setGalleryLayoutClass(layout)
-  preferencesStore.setGridSize(grid)
+const changeGridLayout = (layoutClass: string, size: GridSize) => {
+  preferencesStore.setGridConfig({
+    section: props.section,
+    size: size,
+    class: layoutClass,
+  })
 }
 </script>
diff --git a/stores/preferences.ts b/stores/preferences.ts
index e0810d7350..8b5bf167eb 100644
--- a/stores/preferences.ts
+++ b/stores/preferences.ts
@@ -1,20 +1,36 @@
 import { defineStore } from 'pinia'
 
-type completePurchaseModalState = {
+type CompletePurchaseModalState = {
   isOpen: boolean
   mode: 'shopping-cart' | 'buy-now'
 }
 
+export const DEFAULT_GRID_SECTION = 'explore-gallery'
+export type GridSection = 'profile-gallery' | typeof DEFAULT_GRID_SECTION
+export type GridSize = 'small' | 'medium' | 'large'
+type GridConfig = { section: GridSection; class: string; size: GridSize }
+
+export const smallGridLayout = 'is-half-desktop is-half-tablet is-half-mobile'
+export const largeGridLayout =
+  'is-one-quarter-desktop is-one-third-tablet is-half-mobile'
+
+const defaultGridConfigs: GridConfig[] = [
+  { section: DEFAULT_GRID_SECTION, class: smallGridLayout, size: 'small' },
+  { section: 'profile-gallery', class: largeGridLayout, size: 'large' },
+]
+
 interface State {
   sidebarFilterCollapseOpen: boolean
   mobileFilterCollapseOpen: boolean
   notificationBoxCollapseOpen: boolean
   shoppingCartCollapseOpen: boolean
   listingCartModalOpen: boolean
-  completePurchaseModal: completePurchaseModalState
+  completePurchaseModal: CompletePurchaseModalState
   triggerBuySuccess: boolean
+  // Layout
   layoutClass: string
-  galleryLayoutClass: string
+  gridConfigs: GridConfig[]
+  gridSize: GridSize
   advancedUI: boolean
   theatreView: string
   compactGalleryItem: boolean
@@ -28,7 +44,6 @@ interface State {
   replaceBuyNowWithYolo: boolean
   enableAllArtwork: boolean
   enableGyroEffect: boolean
-  gridSize: 'small' | 'medium' | 'large'
   firstTimeAutoTeleport: boolean
   subscribedToNewsletter: boolean
   // Minting
@@ -51,8 +66,7 @@ export const usePreferencesStore = defineStore('preferences', {
     },
     triggerBuySuccess: false,
     layoutClass: 'is-one-quarter-desktop is-one-third-tablet',
-    galleryLayoutClass:
-      'is-one-quarter-desktop is-one-third-tablet is-half-mobile',
+    gridConfigs: defaultGridConfigs,
     advancedUI: false,
     theatreView: 'default',
     compactGalleryItem: true,
@@ -81,7 +95,8 @@ export const usePreferencesStore = defineStore('preferences', {
     getCompletePurchaseModal: (state) => state.completePurchaseModal,
     getTriggerBuySuccess: (state) => state.triggerBuySuccess,
     getLayoutClass: (state) => state.layoutClass,
-    getGalleryLayoutClass: (state) => state.galleryLayoutClass,
+    getGridConfigBySection: (state) => (section: GridSection) =>
+      state.gridConfigs.find((grid) => grid.section === section),
     getTheatreView: (state) => state.theatreView,
     getCompactCollection: (state) => state.compactCollection,
     getShowPriceValue: (state) => state.showPriceGallery,
@@ -95,7 +110,6 @@ export const usePreferencesStore = defineStore('preferences', {
     getHasCarbonOffset: (state) => state.hasCarbonOffset,
     getLoadAllArtwork: (state) => state.enableAllArtwork,
     getEnableGyroEffect: (state) => state.enableGyroEffect,
-    getGridSize: (state) => state.gridSize,
     getVisitedOnboarding: (state) => state.visitedOnboarding,
     getFirstTimeAutoTeleport: (state) => state.firstTimeAutoTeleport,
     getSubscribedToNewsletter: (state) => state.subscribedToNewsletter,
@@ -113,7 +127,7 @@ export const usePreferencesStore = defineStore('preferences', {
     setShoppingCartCollapse(payload) {
       this.shoppingCartCollapseOpen = payload
     },
-    setCompletePurchaseModal(payload: completePurchaseModalState) {
+    setCompletePurchaseModal(payload: CompletePurchaseModalState) {
       this.completePurchaseModal = payload
     },
     setCompletePurchaseModalOpen(payload) {
@@ -125,15 +139,11 @@ export const usePreferencesStore = defineStore('preferences', {
     setLayoutClass(payload) {
       this.layoutClass = payload
     },
-    setGalleryLayoutClass(payload) {
-      this.galleryLayoutClass = payload
-    },
     setAdvancedUI(payload) {
       // if set to false reset state back to default
       if (!payload) {
         this.layoutClass = 'is-one-quarter-desktop is-one-third-tablet'
-        this.galleryLayoutClass =
-          'is-one-quarter-desktop is-one-third-tablet is-half-mobile'
+        this.gridConfigs = defaultGridConfigs
         this.theatreView = 'theatre'
         this.compactGalleryItem = true
         this.compactCollection = false
@@ -187,6 +197,13 @@ export const usePreferencesStore = defineStore('preferences', {
     setGridSize(payload) {
       this.gridSize = payload
     },
+    setGridConfig({ class: layoutClass, size, section }: GridConfig) {
+      const gridConfig = this.getGridConfigBySection(section)
+      if (gridConfig) {
+        gridConfig.size = size
+        gridConfig.class = layoutClass
+      }
+    },
     setVisitedOnboarding(payload: boolean) {
       this.visitedOnboarding = payload
     },

From 3c1a86e180dfca383bdc562ec364b65408a1efc3 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Mon, 11 Dec 2023 10:07:44 +0500
Subject: [PATCH 23/65] fix: actionAutoFees added lazy fee fetch

---
 .../common/listingCart/ListingCartModal.vue   |  1 +
 composables/autoTeleport/types.ts             |  1 +
 .../useAutoTeleportTransitionDetails.ts       | 24 ++++++++++++++++---
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index 8a052b26d9..5eca197b3b 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/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>
diff --git a/composables/autoTeleport/types.ts b/composables/autoTeleport/types.ts
index 7d005d02b8..bda63654a9 100644
--- a/composables/autoTeleport/types.ts
+++ b/composables/autoTeleport/types.ts
@@ -46,4 +46,5 @@ export type AutoTeleportAction = {
 export type AutoTeleportFeeParams = {
   actions?: number
   actionAutoFees?: boolean
+  actionLazyFetch?: boolean
 }
diff --git a/composables/autoTeleport/useAutoTeleportTransitionDetails.ts b/composables/autoTeleport/useAutoTeleportTransitionDetails.ts
index 592122fb20..91b72db07e 100644
--- a/composables/autoTeleport/useAutoTeleportTransitionDetails.ts
+++ b/composables/autoTeleport/useAutoTeleportTransitionDetails.ts
@@ -13,10 +13,16 @@ import type { AutoTeleportAction, AutoTeleportFeeParams } from './types'
 const BUFFER_FEE_PERCENT = 0.2
 const BUFFER_AMOUNT_PERCENT = 0.02
 
+const DEFAULT_AUTO_TELEPORT_FEE_PARAMS = {
+  actionAutoFees: true,
+  actions: 0,
+  actionLazyFetch: false,
+}
+
 export default function (
   actions: ComputedRef<AutoTeleportAction[]>,
   neededAmount: ComputedRef<number>,
-  fees: AutoTeleportFeeParams = { actionAutoFees: true, actions: 0 },
+  feesParams: AutoTeleportFeeParams = DEFAULT_AUTO_TELEPORT_FEE_PARAMS,
 ) {
   const {
     chainBalances,
@@ -24,11 +30,12 @@ export default function (
     fetchChainsBalances,
     getAddressByChain,
   } = useTeleport()
+  const fees = { ...DEFAULT_AUTO_TELEPORT_FEE_PARAMS, ...feesParams }
+
   const { apiInstance, apiInstanceByPrefix } = useApi()
   const { balance } = useBalance()
 
   const fetched = ref({ teleportTxFee: false, actionTxFees: false })
-
   const teleportTxFee = ref(0)
   const actionTxFees = ref<number[]>([])
   const extraActionFees = computed(() =>
@@ -76,7 +83,9 @@ export default function (
   )
 
   const actionAutoFees = computed(() =>
-    fees.actionAutoFees ? needsSourceChainBalances.value : false,
+    fees.actionAutoFees
+      ? fees.actionLazyFetch || needsSourceChainBalances.value
+      : false,
   )
 
   const sourceChainsBalances = computed<{ [key: Chain]: string }>(() =>
@@ -202,6 +211,15 @@ export default function (
   watch(
     actionsId,
     async () => {
+      console.log(
+        'action' + actionAutoFees.value,
+        fees.actionAutoFees,
+        fees.actionLazyFetch,
+        needsSourceChainBalances.value,
+        feesParams,
+        fees,
+      )
+
       if (actionAutoFees.value) {
         try {
           fetched.value.actionTxFees = false

From 9bbbf3ee97def4024573205d5bc6c40084c2621d Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Mon, 11 Dec 2023 10:09:32 +0500
Subject: [PATCH 24/65] ref: remove log

---
 .../autoTeleport/useAutoTeleportTransitionDetails.ts     | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/composables/autoTeleport/useAutoTeleportTransitionDetails.ts b/composables/autoTeleport/useAutoTeleportTransitionDetails.ts
index 91b72db07e..80258161ec 100644
--- a/composables/autoTeleport/useAutoTeleportTransitionDetails.ts
+++ b/composables/autoTeleport/useAutoTeleportTransitionDetails.ts
@@ -211,15 +211,6 @@ export default function (
   watch(
     actionsId,
     async () => {
-      console.log(
-        'action' + actionAutoFees.value,
-        fees.actionAutoFees,
-        fees.actionLazyFetch,
-        needsSourceChainBalances.value,
-        feesParams,
-        fees,
-      )
-
       if (actionAutoFees.value) {
         try {
           fetched.value.actionTxFees = false

From aaf1d1568343244332c6f9e08e89e32f35982fa2 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Mon, 11 Dec 2023 14:35:39 +0700
Subject: [PATCH 25/65] ensure copy works on all devices

---
 plugins/vueClipboard.ts  | 37 +++++++++++++------------------------
 utils/copyToClipboard.ts | 22 ++++++++++++++++++++++
 2 files changed, 35 insertions(+), 24 deletions(-)
 create mode 100644 utils/copyToClipboard.ts

diff --git a/plugins/vueClipboard.ts b/plugins/vueClipboard.ts
index 21580470db..7e5a8b9a17 100644
--- a/plugins/vueClipboard.ts
+++ b/plugins/vueClipboard.ts
@@ -1,34 +1,23 @@
 export default defineNuxtPlugin((nuxtApp) => {
-  const { text, copy, copied, isSupported } = useClipboard({ legacy: true })
-
   nuxtApp.vueApp.directive('clipboard', {
     beforeMount(el, { value, arg }) {
-      el.dataset._clipboard_value = value
-      useEventListener(el, 'click', () => {
-        switch (arg) {
-          case 'copy':
-            copy(el.dataset._clipboard_value)
-            break
+      const clickEventHandler = () => {
+        if (arg === 'copy') {
+          copyToClipboard(value, { toast: false, toastMessage: '' })
         }
-      })
+      }
+      el.addEventListener('click', clickEventHandler)
+
+      el._cleanup = () => el.removeEventListener('click', clickEventHandler)
     },
     updated(el, { value, arg }) {
-      switch (arg) {
-        case 'copy':
-          el.dataset._clipboard_value = value
-          break
+      el.dataset._clipboard_value = value
+      el.dataset._clipboard_arg = arg
+    },
+    unmounted(el) {
+      if (el._cleanup) {
+        el._cleanup()
       }
     },
   })
-
-  return {
-    provide: {
-      clipboard: {
-        text,
-        copy,
-        copied,
-        isSupported,
-      },
-    },
-  }
 })
diff --git a/utils/copyToClipboard.ts b/utils/copyToClipboard.ts
new file mode 100644
index 0000000000..5b143ca419
--- /dev/null
+++ b/utils/copyToClipboard.ts
@@ -0,0 +1,22 @@
+export function copyToClipboard(
+  value: string,
+  options = { toast: true, toastMessage: 'Copied to clipboard' },
+) {
+  const { copy } = useClipboard()
+  const { toast } = useToast()
+
+  copy(value)
+  fallbackCopyToClipboard(value)
+  if (options.toast) {
+    toast(options.toastMessage)
+  }
+}
+
+const fallbackCopyToClipboard = (value: string) => {
+  const element = document.createElement('textarea')
+  element.value = value
+  document.body.appendChild(element)
+  element.select()
+  document.execCommand('copy')
+  document.body.removeChild(element)
+}

From a901e71f27c7d97efd4293459af51059c1068a1c Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Mon, 11 Dec 2023 14:48:32 +0700
Subject: [PATCH 26/65] better interface

---
 plugins/vueClipboard.ts  |  2 +-
 utils/copyToClipboard.ts | 13 ++++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/plugins/vueClipboard.ts b/plugins/vueClipboard.ts
index 7e5a8b9a17..374a79fdb8 100644
--- a/plugins/vueClipboard.ts
+++ b/plugins/vueClipboard.ts
@@ -3,7 +3,7 @@ export default defineNuxtPlugin((nuxtApp) => {
     beforeMount(el, { value, arg }) {
       const clickEventHandler = () => {
         if (arg === 'copy') {
-          copyToClipboard(value, { toast: false, toastMessage: '' })
+          copyToClipboard(value, { toast: false })
         }
       }
       el.addEventListener('click', clickEventHandler)
diff --git a/utils/copyToClipboard.ts b/utils/copyToClipboard.ts
index 5b143ca419..1170e36fc6 100644
--- a/utils/copyToClipboard.ts
+++ b/utils/copyToClipboard.ts
@@ -1,14 +1,21 @@
 export function copyToClipboard(
   value: string,
-  options = { toast: true, toastMessage: 'Copied to clipboard' },
+  options?: {
+    toast?: boolean
+    toastMessage?: string
+  },
 ) {
   const { copy } = useClipboard()
   const { toast } = useToast()
 
+  // Set default values for options
+  const { toast: shouldToast = true, toastMessage = 'Copied to clipboard' } =
+    options ?? {}
+
   copy(value)
   fallbackCopyToClipboard(value)
-  if (options.toast) {
-    toast(options.toastMessage)
+  if (shouldToast) {
+    toast(toastMessage)
   }
 }
 

From 95c415c79852538a885523067fa3f2860dd0076b Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Mon, 11 Dec 2023 15:38:10 +0700
Subject: [PATCH 27/65] rename

---
 plugins/{vueClipboard.ts => clipboard.client.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename plugins/{vueClipboard.ts => clipboard.client.ts} (100%)

diff --git a/plugins/vueClipboard.ts b/plugins/clipboard.client.ts
similarity index 100%
rename from plugins/vueClipboard.ts
rename to plugins/clipboard.client.ts

From 45e237c0f9710cdbc6c140e941c28071e9eeb8fe Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Mon, 11 Dec 2023 14:49:45 +0500
Subject: [PATCH 28/65] fix: add burned_eq: false to query

---
 components/profile/ProfileDetail.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/profile/ProfileDetail.vue b/components/profile/ProfileDetail.vue
index b06f0e6d97..0dd5148732 100644
--- a/components/profile/ProfileDetail.vue
+++ b/components/profile/ProfileDetail.vue
@@ -245,6 +245,7 @@ const collections = ref(
 const itemsGridSearch = computed(() => {
   const query: Record<string, unknown> = {
     [tabKey.value]: id.value,
+    burned_eq: false,
   }
 
   if (listed.value) {

From 10312bca2c97cd6ffd9f5752acb432ee6d2eaafd Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Wed, 13 Dec 2023 09:48:46 +0500
Subject: [PATCH 29/65] fix: remove collection filter on url prefix change

---
 composables/useChainRedirect.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/composables/useChainRedirect.ts b/composables/useChainRedirect.ts
index 51d754163a..e850382524 100644
--- a/composables/useChainRedirect.ts
+++ b/composables/useChainRedirect.ts
@@ -53,6 +53,8 @@ function getRedirectPathForPrefix({
   if (routeName === 'prefix-u-id') {
     const accountId = getAddress(chain, route.params.id)
 
+    delete route.query.collections
+
     return {
       params: {
         prefix: chain,

From 3018028d1b292bad00b919ae71dbe66ddf60e34c Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Wed, 13 Dec 2023 11:00:09 +0500
Subject: [PATCH 30/65] ref: disabled filter onloading

---
 components/profile/CollectionFilter.vue | 28 ++++++++++++++++++-------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/components/profile/CollectionFilter.vue b/components/profile/CollectionFilter.vue
index 522b5566a5..1110e5b0c0 100644
--- a/components/profile/CollectionFilter.vue
+++ b/components/profile/CollectionFilter.vue
@@ -1,7 +1,7 @@
 <template>
   <NeoDropdown
     v-model="checked"
-    :disabled="collections.length === 0"
+    :disabled="isDisabled"
     :scrollable="collections.length > 4"
     class="py-0"
     :mobile-modal="true"
@@ -80,27 +80,30 @@ const props = defineProps<{
   tabKey: string
 }>()
 
+const isLoading = ref(false)
 const checked = useVModel(props, 'modelValue')
 
 const { urlPrefix, client } = usePrefix()
 
 const collections = ref<Collection[]>([])
 
+const isDisabled = computed(
+  () => collections.value.length === 0 || isLoading.value,
+)
+
 const nonCollectionSearchParams = computed(() => {
   const search = { ...props.search }
   delete search.collection
   return search
 })
 
-useLazyAsyncData('profileCollections', async () => {
-  await getProfileCollections()
-})
-
 const getProfileCollections = async () => {
   const collectionSearch = {
     nfts_some: nonCollectionSearchParams.value,
   }
 
+  isLoading.value = true
+
   const { data } = await useAsyncQuery({
     query: collectionListWithSearch,
     variables: {
@@ -110,6 +113,7 @@ const getProfileCollections = async () => {
       offset: 0,
     },
     clientId: client.value,
+    cache: true,
   })
 
   const collectionEntities = data.value?.collectionEntities || []
@@ -117,6 +121,8 @@ const getProfileCollections = async () => {
   collections.value = formatCollections(collectionEntities)
 
   syncCheckedCollections()
+
+  isLoading.value = false
 }
 
 const formatCollections = (collectionEntities) => {
@@ -150,12 +156,18 @@ const syncCheckedCollections = () => {
 }
 
 watch(
-  () => props.search,
-  async () => {
-    await getProfileCollections()
+  nonCollectionSearchParams,
+  async (search, prevSearch) => {
+    if (!isEqual(search, prevSearch)) {
+      await getProfileCollections()
+    }
   },
   { deep: true },
 )
+
+useLazyAsyncData('profileCollections', async () => {
+  await getProfileCollections()
+})
 </script>
 
 <style scoped lang="scss">

From a8c2d84a2fc45772eb22d136fcdf7aa28af8139b Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Wed, 13 Dec 2023 13:03:59 +0700
Subject: [PATCH 31/65] bug fix- directive did not update properly

---
 plugins/clipboard.client.ts | 21 +++++++++++----------
 utils/copyToClipboard.ts    |  2 +-
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/plugins/clipboard.client.ts b/plugins/clipboard.client.ts
index 374a79fdb8..0457609b4c 100644
--- a/plugins/clipboard.client.ts
+++ b/plugins/clipboard.client.ts
@@ -1,22 +1,23 @@
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.directive('clipboard', {
-    beforeMount(el, { value, arg }) {
+    beforeMount(el, binding) {
+      el._clipboardValue = binding.value
+
       const clickEventHandler = () => {
-        if (arg === 'copy') {
-          copyToClipboard(value, { toast: false })
+        if (binding.arg === 'copy') {
+          console.log('copy', el._clipboardValue)
+          copyToClipboard(el._clipboardValue, { toast: false })
         }
       }
       el.addEventListener('click', clickEventHandler)
-
-      el._cleanup = () => el.removeEventListener('click', clickEventHandler)
+      el._clickEventHandler = clickEventHandler
     },
-    updated(el, { value, arg }) {
-      el.dataset._clipboard_value = value
-      el.dataset._clipboard_arg = arg
+    updated(el, binding) {
+      el._clipboardValue = binding.value
     },
     unmounted(el) {
-      if (el._cleanup) {
-        el._cleanup()
+      if (el._clickEventHandler) {
+        el.removeEventListener('click', el._clickEventHandler)
       }
     },
   })
diff --git a/utils/copyToClipboard.ts b/utils/copyToClipboard.ts
index 1170e36fc6..6341c78d54 100644
--- a/utils/copyToClipboard.ts
+++ b/utils/copyToClipboard.ts
@@ -5,7 +5,7 @@ export function copyToClipboard(
     toastMessage?: string
   },
 ) {
-  const { copy } = useClipboard()
+  const { copy } = useClipboard({ legacy: true })
   const { toast } = useToast()
 
   // Set default values for options

From 4ce68310516e627e390523da8ec67ac06f7740c8 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Wed, 13 Dec 2023 13:04:41 +0700
Subject: [PATCH 32/65] remove console log

---
 plugins/clipboard.client.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/plugins/clipboard.client.ts b/plugins/clipboard.client.ts
index 0457609b4c..5ec80deb48 100644
--- a/plugins/clipboard.client.ts
+++ b/plugins/clipboard.client.ts
@@ -5,7 +5,6 @@ export default defineNuxtPlugin((nuxtApp) => {
 
       const clickEventHandler = () => {
         if (binding.arg === 'copy') {
-          console.log('copy', el._clipboardValue)
           copyToClipboard(el._clipboardValue, { toast: false })
         }
       }

From b6e698b2e54479c05ba86218b60588191a7f39a1 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Wed, 13 Dec 2023 12:24:05 +0500
Subject: [PATCH 33/65] ref: add grid section as enum

---
 components/items/ItemsGrid/ItemsGrid.vue |  2 +-
 components/shared/DynamicGrid.vue        |  2 +-
 components/shared/GridLayoutControls.vue |  2 +-
 stores/preferences.ts                    | 14 +++++++++++---
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/components/items/ItemsGrid/ItemsGrid.vue b/components/items/ItemsGrid/ItemsGrid.vue
index 04ebb9234a..3c8ae4bb7f 100644
--- a/components/items/ItemsGrid/ItemsGrid.vue
+++ b/components/items/ItemsGrid/ItemsGrid.vue
@@ -80,7 +80,7 @@ import isEqual from 'lodash/isEqual'
 import { useListingCartStore } from '@/stores/listingCart'
 import { getTokensNfts } from './useNftActions'
 import { NFT } from '@/components/rmrk/service/scheme'
-import { type GridSection } from '@/stores/preferences'
+import { GridSection } from '@/stores/preferences'
 
 const { listingCartEnabled } = useListingCartConfig()
 const listingCartStore = useListingCartStore()
diff --git a/components/shared/DynamicGrid.vue b/components/shared/DynamicGrid.vue
index b43af4cf8f..ead6fb1aa3 100644
--- a/components/shared/DynamicGrid.vue
+++ b/components/shared/DynamicGrid.vue
@@ -8,7 +8,7 @@
 import { useResizeObserver } from '@vueuse/core'
 import {
   DEFAULT_GRID_SECTION,
-  type GridSection,
+  GridSection,
   type GridSize,
   usePreferencesStore,
 } from '@/stores/preferences'
diff --git a/components/shared/GridLayoutControls.vue b/components/shared/GridLayoutControls.vue
index 5c562cd7b6..98f6a5e205 100644
--- a/components/shared/GridLayoutControls.vue
+++ b/components/shared/GridLayoutControls.vue
@@ -15,7 +15,7 @@
 import { NeoButton, NeoField } from '@kodadot1/brick'
 import {
   DEFAULT_GRID_SECTION,
-  type GridSection,
+  GridSection,
   type GridSize,
   largeGridLayout,
   smallGridLayout,
diff --git a/stores/preferences.ts b/stores/preferences.ts
index 8b5bf167eb..981b8b70b6 100644
--- a/stores/preferences.ts
+++ b/stores/preferences.ts
@@ -5,8 +5,12 @@ type CompletePurchaseModalState = {
   mode: 'shopping-cart' | 'buy-now'
 }
 
-export const DEFAULT_GRID_SECTION = 'explore-gallery'
-export type GridSection = 'profile-gallery' | typeof DEFAULT_GRID_SECTION
+export enum GridSection {
+  EXPLORE_GALLERY = 'explore-gallery',
+  PROFILE_GALLERY = 'profile-gallery',
+}
+
+export const DEFAULT_GRID_SECTION = GridSection.EXPLORE_GALLERY
 export type GridSize = 'small' | 'medium' | 'large'
 type GridConfig = { section: GridSection; class: string; size: GridSize }
 
@@ -16,7 +20,11 @@ export const largeGridLayout =
 
 const defaultGridConfigs: GridConfig[] = [
   { section: DEFAULT_GRID_SECTION, class: smallGridLayout, size: 'small' },
-  { section: 'profile-gallery', class: largeGridLayout, size: 'large' },
+  {
+    section: GridSection.PROFILE_GALLERY,
+    class: largeGridLayout,
+    size: 'large',
+  },
 ]
 
 interface State {

From a174dfe8915c6ee2c642e4edde54300a2739acc0 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Wed, 13 Dec 2023 13:50:53 +0500
Subject: [PATCH 34/65] fix: force integer number

---
 utils/support.ts | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/utils/support.ts b/utils/support.ts
index 0238538894..953e95812b 100644
--- a/utils/support.ts
+++ b/utils/support.ts
@@ -50,9 +50,8 @@ export const feeTx = (api: ApiPromise, price: string): Extrinsic => {
   return asBalanceTransfer(api, resolveSupportAddress(api), price)
 }
 
-export const getPercentSupportFee = (price: number | string) => {
-  return Number(price) * SUPPORT_FEE_PERCENT
-}
+export const getPercentSupportFee = (price: number | string) =>
+  Math.round(Number(price) * SUPPORT_FEE_PERCENT)
 
 export const somePercentFromTX = (api: ApiPromise, price: number | string) => {
   const fee = getPercentSupportFee(price)
@@ -60,7 +59,7 @@ export const somePercentFromTX = (api: ApiPromise, price: number | string) => {
 }
 
 export const royaltyFee = (price: string | number, royaltyPercent: number) =>
-  Number(price) * (royaltyPercent / 100)
+  Math.round(Number(price) * (royaltyPercent / 100))
 
 export const payRoyaltyTx = (
   api: ApiPromise,

From 0bda4cc06fe3a97d3f77546f4bdf6827a2358550 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Wed, 13 Dec 2023 15:53:10 +0500
Subject: [PATCH 35/65] add: Check ED on auto teleport

---
 .../useAutoTeleportTransitionDetails.ts           | 15 +++++++++++----
 utils/teleport.ts                                 |  5 +++++
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/composables/autoTeleport/useAutoTeleportTransitionDetails.ts b/composables/autoTeleport/useAutoTeleportTransitionDetails.ts
index b0a9f44dc9..5df6ce3f2e 100644
--- a/composables/autoTeleport/useAutoTeleportTransitionDetails.ts
+++ b/composables/autoTeleport/useAutoTeleportTransitionDetails.ts
@@ -2,6 +2,7 @@ import {
   type Chain,
   chainToPrefixMap,
   getChainCurrency,
+  getChainExistentialDeposit,
   allowedTransitions as teleportRoutes,
 } from '@/utils/teleport'
 import { chainPropListOf } from '@/utils/config/chain.config'
@@ -57,12 +58,13 @@ export default function (
       Number(balance.value),
   )
 
-  const { existentialDeposit } = useDeposit(
-    computed(() => chainToPrefixMap[currentChain.value]),
+  const currentChainExistentialDeposit = computed(() =>
+    getChainExistentialDeposit(currentChain.value),
   )
 
   const transferableCurrentChainBalance = computed(
-    () => Number(currentChainBalance.value) - existentialDeposit.value,
+    () =>
+      Number(currentChainBalance.value) - currentChainExistentialDeposit.value,
   )
 
   const hasEnoughInCurrentChain = computed(
@@ -85,9 +87,14 @@ export default function (
     () => getMaxKeyByValue(sourceChainsBalances.value) as Chain | undefined,
   )
 
+  const richestChainExistentialDeposit = computed(() =>
+    getChainExistentialDeposit(richestChain.value),
+  )
+
   const richestChainBalance = computed(() =>
     richestChain.value
-      ? Number(sourceChainsBalances.value[richestChain.value])
+      ? Number(sourceChainsBalances.value[richestChain.value]) -
+        richestChainExistentialDeposit.value
       : 0,
   )
 
diff --git a/utils/teleport.ts b/utils/teleport.ts
index af0f58bde9..22a2e84b08 100644
--- a/utils/teleport.ts
+++ b/utils/teleport.ts
@@ -13,6 +13,7 @@ import { getChainEndpointByPrefix } from '@/utils/chain'
 import { TeleportParams } from '@/composables/useTeleport'
 import { getAddress } from '@/utils/extension'
 import { toDefaultAddress } from '@/utils/account'
+import { existentialDeposit } from '@kodadot1/static'
 
 type Extrisic = SubmittableExtrinsicFunction<'promise', AnyTuple>
 
@@ -259,3 +260,7 @@ export const getChainCurrency = (chain: Chain) => {
       return 'DOT'
   }
 }
+
+export const getChainExistentialDeposit = (
+  chain: Chain | undefined | null,
+): number => (chain ? existentialDeposit[chainToPrefixMap[chain]] : 0)

From e454f941fd58102cc6f57dff50c402daaa8b31b7 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Wed, 13 Dec 2023 19:19:18 +0700
Subject: [PATCH 36/65] teleport ED modal  + bug fix

---
 components/teleport/EDWarningModal.vue |  86 +++++++++++++++++++
 components/teleport/Teleport.vue       | 113 ++++++++++++++++++-------
 locales/en.json                        |  10 ++-
 3 files changed, 176 insertions(+), 33 deletions(-)
 create mode 100644 components/teleport/EDWarningModal.vue

diff --git a/components/teleport/EDWarningModal.vue b/components/teleport/EDWarningModal.vue
new file mode 100644
index 0000000000..15e7840edc
--- /dev/null
+++ b/components/teleport/EDWarningModal.vue
@@ -0,0 +1,86 @@
+<template>
+  <NeoModal
+    :value="isModalActive"
+    scroll="clip"
+    :enable-mobile="false"
+    content-class="mx-4 "
+    :can-cancel="false">
+    <div class="px-6 py-5 width-350">
+      <div class="is-flex mb-4 is-align-items-center">
+        <NeoIcon
+          icon="triangle-exclamation"
+          pack="fasr"
+          class="mr-3"
+          size="medium" />
+        <span class="has-text-weight-bold">{{
+          $t('teleport.fundLossRisk')
+        }}</span>
+      </div>
+      <div
+        class="is-flex is-flex-direction-column px-4 bakground-warning-red border border-color-k-red">
+        <span class="my-3">
+          {{
+            $t('teleport.insufficientExistentialDeposit', [existentialDeposit])
+          }}
+          <b>{{ $t('teleport.lossOfFunds') }}</b>
+        </span>
+        <div class="is-flex py-4">
+          <NeoCheckbox
+            v-model="checked"
+            class="mr-3 is-size-7"
+            :label="$t('teleport.checkboxLabel')" />
+        </div>
+      </div>
+      <div
+        class="is-flex mt-5 is-align-items-center is-justify-content-space-between">
+        <NeoButton
+          variant="pill"
+          :disabled="!checked"
+          class="mr-4"
+          no-shadow
+          :label="$t('massmint.mobileDisclaimer.continueAnyway')"
+          @click="emit('continue')" />
+        <NeoButton
+          variant="pill"
+          :label="$t('autoTeleport.close')"
+          @click="emit('close')" />
+      </div>
+    </div>
+  </NeoModal>
+</template>
+
+<script setup lang="ts">
+import { NeoButton, NeoCheckbox, NeoIcon, NeoModal } from '@kodadot1/brick'
+
+const props = defineProps<{
+  modelValue: boolean
+  existentialDeposit: number
+}>()
+
+const isModalActive = useVModel(props, 'modelValue')
+const checked = ref(false)
+watch(isModalActive, () => {
+  checked.value = false
+})
+
+const emit = defineEmits(['close', 'continue'])
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/abstracts/variables.scss';
+
+.width-350 {
+  max-width: 350px;
+}
+
+.bakground-warning-red {
+  @include ktheme() {
+    background-color: theme('k-redaccent2');
+  }
+}
+.border-color-k-red {
+  @include ktheme() {
+    border-color: theme('k-red') !important;
+  }
+}
+</style>
diff --git a/components/teleport/Teleport.vue b/components/teleport/Teleport.vue
index 11054e7f3f..a8f4fcfb7e 100644
--- a/components/teleport/Teleport.vue
+++ b/components/teleport/Teleport.vue
@@ -1,5 +1,7 @@
 <template>
-  <form class="mx-auto teleport-container" @submit.prevent="teleport">
+  <form
+    class="mx-auto teleport-container"
+    @submit.prevent="checkEDBeforeTeleport">
     <Loader v-model="isLoading" :status="status" />
     <h1 class="is-size-3 has-text-weight-bold">
       {{ $t('teleport.page') }}
@@ -81,36 +83,58 @@
 
     <div
       v-if="myBalance !== undefined"
-      class="is-size-7 is-flex is-justify-content-end is-align-items-center">
-      <span class="is-flex is-align-items-center">
-        <span class="mr-2">{{ $t('general.balance') }}:</span
-        >{{ myBalanceWithoutDivision.toFixed(4) }}{{ currency }}
-      </span>
-      <NeoButton
-        no-shadow
-        rounded
-        size="small"
-        class="ml-2"
-        @click="handleMaxClick"
-        >{{ $t('teleport.max') }}</NeoButton
-      >
+      class="is-size-7 is-flex is-justify-content-space-between is-align-items-center">
+      <div
+        v-if="insufficientExistentialDeposit"
+        class="has-text-danger is-flex is-align-items-center">
+        <NeoIcon
+          icon="triangle-exclamation"
+          pack="fasr"
+          class="mr-3"
+          size="medium" />
+        <span>{{ $t('teleport.fundsAtRisk') }} -&nbsp;</span>
+        <NeoTooltip
+          multiline
+          :multiline-width="256"
+          :auto-close="['outside', 'inside']">
+          <u>{{ $t('teleport.why') }}</u>
+          <template #content>
+            <div class="has-text-left py-2 is-flex is-flex-direction-column">
+              <span class="mb-3">
+                {{
+                  $t('teleport.existentialDepositTooltip', [
+                    targetExistentialDepositAmount,
+                  ])
+                }}
+              </span>
+              <a
+                v-safe-href="
+                  'https://hello.kodadot.xyz/multi-chain/existential-deposit'
+                "
+                target="_blank"
+                class="has-text-k-blue">
+                {{ $t('teleport.whatIsExistentialDeposit') }}
+              </a>
+            </div>
+          </template>
+        </NeoTooltip>
+      </div>
+      <div class="is-flex">
+        <span class="is-flex is-align-items-center">
+          <span class="mr-2">{{ $t('general.balance') }}:</span
+          >{{ myBalanceWithoutDivision.toFixed(4) }}{{ currency }}
+        </span>
+        <NeoButton
+          no-shadow
+          rounded
+          size="small"
+          class="ml-2"
+          @click="handleMaxClick"
+          >{{ $t('teleport.max') }}</NeoButton
+        >
+      </div>
     </div>
 
-    <a
-      v-if="insufficientExistentialDeposit"
-      v-safe-href="
-        `https://support.polkadot.network/support/solutions/articles/65000168651-what-is-the-existential-deposit`
-      "
-      target="_blank"
-      class="has-text-danger">
-      {{
-        $t('teleport.insufficientExistentialDeposit', [
-          targetExistentialDepositAmount,
-          currency,
-        ])
-      }}
-    </a>
-
     <NeoButton
       :label="teleportLabel"
       size="large"
@@ -139,6 +163,16 @@
       {{ $t('teleport.ownerMessage') }}
     </div>
   </form>
+  <EDWarningModal
+    v-model="insufficientEDModalOpen"
+    :existential-deposit="targetExistentialDepositAmount"
+    @continue="
+      () => {
+        insufficientEDModalOpen = false
+        teleport()
+      }
+    "
+    @close="insufficientEDModalOpen = false" />
 </template>
 
 <script setup lang="ts">
@@ -155,13 +189,19 @@ import formatBalance from '@/utils/format/balance'
 import Loader from '@/components/shared/Loader.vue'
 import shortAddress from '@/utils/shortAddress'
 import { chainIcons, getChainName } from '@/utils/chain'
-import NeoInput from '~/libs/ui/src/components/NeoInput/NeoInput.vue'
 import NetworkDropdown from './NetworkDropdown.vue'
-import { NeoButton, NeoField } from '@kodadot1/brick'
+import {
+  NeoButton,
+  NeoField,
+  NeoIcon,
+  NeoInput,
+  NeoTooltip,
+} from '@kodadot1/brick'
 import { blockExplorerOf } from '@/utils/config/chain.config'
 import { simpleDivision } from '@/utils/balance'
 import { useFiatStore } from '@/stores/fiat'
 import { existentialDeposit } from '@kodadot1/static'
+import EDWarningModal from './EDWarningModal.vue'
 
 const {
   chainBalances,
@@ -180,6 +220,7 @@ const toChain = ref(Chain.ASSETHUBPOLKADOT) //Selected destination parachain
 const amount = ref(0) //Required amount to be transfered is stored here
 const unsubscribeKusamaBalance = ref()
 const teleportFee = ref()
+const insufficientEDModalOpen = ref(false)
 
 const DOT_BUFFER_FEE = 100000000 // 0.01
 const KSM_BUFFER_FEE = 1000000000 // 0.001
@@ -222,7 +263,7 @@ const insufficientExistentialDeposit = computed(() => {
 
 const teleportLabel = computed(() => {
   if (insufficientBalance.value) {
-    return $i18n.t('teleport.insufficientBalance', [currency])
+    return $i18n.t('teleport.insufficientBalance', [currency.value])
   }
 
   if (insufficientAmountAfterFees.value && amount.value !== 0) {
@@ -403,6 +444,14 @@ const handleMaxClick = () => {
     Math.floor((myBalanceWithoutDivision.value || 0) * 10 ** 4) / 10 ** 4
 }
 
+const checkEDBeforeTeleport = () => {
+  if (insufficientExistentialDeposit.value) {
+    insufficientEDModalOpen.value = true
+  } else {
+    teleport()
+  }
+}
+
 const teleport = async () => {
   await sendXCM({
     amount: amountToTeleport.value,
diff --git a/locales/en.json b/locales/en.json
index c80910bc4d..4f67c98cc1 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1085,7 +1085,15 @@
     "tweetDonation": "Tweet about your awesome donation",
     "donationSentTo": "Your donation will be sent to:",
     "ownerMessage": "(You Are Owner)",
-    "insufficientExistentialDeposit": "Sending less than the required Existential Deposit amount will result in fund loss, min value to send is [ {0} + fees ] {1}"
+    "insufficientExistentialDeposit": "Transferring Less Than {0} + Fees Will Lead To An Irreversible",
+    "fundsAtRisk": "Funds at risk",
+    "fundLossRisk": "Funds Loss Risk",
+    "lossOfFunds": "Loss Of Funds.",
+    "why": "Why?",
+    "existentialDepositTooltip": "Amounts Below {0} + Fees Risk Being Lost. Enter The Minimum To Proceed.",
+    "whatIsExistentialDeposit": "What is Existential Deposit?",
+    "checkboxLabel": "I understand this action will lead to an irreversible loss of funds."
+
   },
   "preferences": {
     "basic": "basic user interface",

From e724e551813314611d7536679cbf6a5dde5ffb54 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Thu, 14 Dec 2023 11:05:09 +0700
Subject: [PATCH 37/65] code review

---
 assets/styles/global.scss                  |  3 +
 components/teleport/FundsAtRiskWarning.vue | 42 +++++++++++++
 components/teleport/Teleport.vue           | 70 ++++++++--------------
 3 files changed, 71 insertions(+), 44 deletions(-)
 create mode 100644 components/teleport/FundsAtRiskWarning.vue

diff --git a/assets/styles/global.scss b/assets/styles/global.scss
index 7164593029..2d81db7d31 100644
--- a/assets/styles/global.scss
+++ b/assets/styles/global.scss
@@ -587,3 +587,6 @@ a.has-text-grey {
 .has-text-inherit {
   color: inherit !important;
 }
+.cursor-default {
+  cursor: default;
+}
diff --git a/components/teleport/FundsAtRiskWarning.vue b/components/teleport/FundsAtRiskWarning.vue
new file mode 100644
index 0000000000..fc21a8a571
--- /dev/null
+++ b/components/teleport/FundsAtRiskWarning.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="has-text-danger is-flex is-align-items-center cursor-default">
+    <NeoIcon
+      icon="triangle-exclamation"
+      pack="fasr"
+      class="mr-3"
+      size="medium" />
+    <span>{{ $t('teleport.fundsAtRisk') }} -&nbsp;</span>
+    <NeoTooltip
+      multiline
+      :multiline-width="256"
+      :auto-close="['outside', 'inside']">
+      <u>{{ $t('teleport.why') }}</u>
+      <template #content>
+        <div class="has-text-left py-2 is-flex is-flex-direction-column">
+          <span class="mb-3">
+            {{
+              $t('teleport.existentialDepositTooltip', [
+                targetExistentialDepositAmount,
+              ])
+            }}
+          </span>
+          <a
+            v-safe-href="
+              'https://hello.kodadot.xyz/multi-chain/existential-deposit'
+            "
+            target="_blank"
+            class="has-text-k-blue">
+            {{ $t('teleport.whatIsExistentialDeposit') }}
+          </a>
+        </div>
+      </template>
+    </NeoTooltip>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NeoIcon, NeoTooltip } from '@kodadot1/brick'
+defineProps<{
+  targetExistentialDepositAmount: number
+}>()
+</script>
diff --git a/components/teleport/Teleport.vue b/components/teleport/Teleport.vue
index a8f4fcfb7e..c6dd51c1f7 100644
--- a/components/teleport/Teleport.vue
+++ b/components/teleport/Teleport.vue
@@ -83,42 +83,10 @@
 
     <div
       v-if="myBalance !== undefined"
-      class="is-size-7 is-flex is-justify-content-space-between is-align-items-center">
-      <div
+      class="is-size-7 is-flex justify-content align-items flex-direction">
+      <TeleportFundsAtRiskWarning
         v-if="insufficientExistentialDeposit"
-        class="has-text-danger is-flex is-align-items-center">
-        <NeoIcon
-          icon="triangle-exclamation"
-          pack="fasr"
-          class="mr-3"
-          size="medium" />
-        <span>{{ $t('teleport.fundsAtRisk') }} -&nbsp;</span>
-        <NeoTooltip
-          multiline
-          :multiline-width="256"
-          :auto-close="['outside', 'inside']">
-          <u>{{ $t('teleport.why') }}</u>
-          <template #content>
-            <div class="has-text-left py-2 is-flex is-flex-direction-column">
-              <span class="mb-3">
-                {{
-                  $t('teleport.existentialDepositTooltip', [
-                    targetExistentialDepositAmount,
-                  ])
-                }}
-              </span>
-              <a
-                v-safe-href="
-                  'https://hello.kodadot.xyz/multi-chain/existential-deposit'
-                "
-                target="_blank"
-                class="has-text-k-blue">
-                {{ $t('teleport.whatIsExistentialDeposit') }}
-              </a>
-            </div>
-          </template>
-        </NeoTooltip>
-      </div>
+        :target-existential-deposit-amount="targetExistentialDepositAmount" />
       <div class="is-flex">
         <span class="is-flex is-align-items-center">
           <span class="mr-2">{{ $t('general.balance') }}:</span
@@ -163,7 +131,7 @@
       {{ $t('teleport.ownerMessage') }}
     </div>
   </form>
-  <EDWarningModal
+  <TeleportEdWarningModal
     v-model="insufficientEDModalOpen"
     :existential-deposit="targetExistentialDepositAmount"
     @continue="
@@ -190,18 +158,11 @@ import Loader from '@/components/shared/Loader.vue'
 import shortAddress from '@/utils/shortAddress'
 import { chainIcons, getChainName } from '@/utils/chain'
 import NetworkDropdown from './NetworkDropdown.vue'
-import {
-  NeoButton,
-  NeoField,
-  NeoIcon,
-  NeoInput,
-  NeoTooltip,
-} from '@kodadot1/brick'
+import { NeoButton, NeoField, NeoInput } from '@kodadot1/brick'
 import { blockExplorerOf } from '@/utils/config/chain.config'
 import { simpleDivision } from '@/utils/balance'
 import { useFiatStore } from '@/stores/fiat'
 import { existentialDeposit } from '@kodadot1/static'
-import EDWarningModal from './EDWarningModal.vue'
 
 const {
   chainBalances,
@@ -486,6 +447,20 @@ onBeforeUnmount(() => {
 </script>
 <style lang="scss" scoped>
 @import '@/assets/styles/abstracts/variables';
+$xs-breakpoint: 400px;
+
+.flex-direction {
+  @include until($xs-breakpoint) {
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+}
+.align-items {
+  align-items: center;
+  @include until($xs-breakpoint) {
+    align-items: flex-start;
+  }
+}
 
 .teleport-container {
   @include tablet {
@@ -500,6 +475,13 @@ onBeforeUnmount(() => {
   }
 }
 
+.justify-content {
+  justify-content: space-between;
+  @include until($xs-breakpoint) {
+    justify-content: flex-end;
+  }
+}
+
 .is-absolute-right {
   position: absolute;
   right: 2rem;

From 1835930319de7a22ddbfec8b063f016817844fce Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Thu, 14 Dec 2023 12:32:15 +0700
Subject: [PATCH 38/65] override container max-width

---
 assets/styles/layouts/_main-navigation.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/assets/styles/layouts/_main-navigation.scss b/assets/styles/layouts/_main-navigation.scss
index 412e4fcd62..39ef823017 100644
--- a/assets/styles/layouts/_main-navigation.scss
+++ b/assets/styles/layouts/_main-navigation.scss
@@ -185,6 +185,8 @@
           height: 40px;
         }
       }
+
+      max-width: 100% !important;
     }
   }
 

From 9fa6eb63833d1cf9cbe865c35fc8e09a22797d9f Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Thu, 14 Dec 2023 11:25:24 +0500
Subject: [PATCH 39/65] add: drop autotelport

---
 components/collection/drop/AddFundsModal.vue  | 132 ++++++++++--------
 components/collection/drop/Generative.vue     | 111 ++++++++-------
 components/collection/unlockable/const.ts     |   3 -
 .../autoTeleport/AutoTeleportActionButton.vue |  11 +-
 .../common/autoTeleport/AutoTeleportModal.vue |  35 +++--
 components/shared/format/Money.vue            |  12 +-
 composables/useAmount.ts                      |  13 +-
 locales/en.json                               |  13 +-
 utils/format/balance.ts                       |  12 ++
 9 files changed, 198 insertions(+), 144 deletions(-)

diff --git a/components/collection/drop/AddFundsModal.vue b/components/collection/drop/AddFundsModal.vue
index 37a2c03664..4c419d72e4 100644
--- a/components/collection/drop/AddFundsModal.vue
+++ b/components/collection/drop/AddFundsModal.vue
@@ -8,6 +8,7 @@
     <ModalBody
       :title="$t('mint.unlockable.addFundsModal.title')"
       :scrollable="false"
+      :loading="loading"
       @close="onClose">
       <div
         class="rounded border shade-border-color is-flex is-justify-content-start is-flex-grow-1 pl-3 mb-6">
@@ -23,87 +24,92 @@
       <p
         v-dompurify-html="
           $t('mint.unlockable.addFundsModal.textP1', [
-            `${minimumFunds} ${token}`,
+            formattedMinimumFunds,
+            chain,
           ])
         "
         class="mb-4" />
-      <p class="mb-4">{{ $t('mint.unlockable.addFundsModal.textP2') }}</p>
-      <NeoTooltip multiline multiline-width="256px" content-class="p-4">
-        <div
-          class="is-flex is-justify-items-space-between is-align-items-center has-text-grey add-funds-note">
-          <NeoIcon icon="circle-info" class="mr-3" />
-          <p class="is-size-7">
-            {{ $t('mint.unlockable.addFundsModal.howToAddFunds') }}
-          </p>
-        </div>
-        <template #content>
-          <h3 class="tooltip__title">
-            {{ $t('mint.unlockable.addFundsModal.tooltip.title', [token]) }}
-          </h3>
-          <p
-            v-dompurify-html="
-              $t('mint.unlockable.addFundsModal.tooltip.onramp', [token])
-            "
-            class="tooltip__text mb-2" />
-          <p
-            v-dompurify-html="
-              $t('mint.unlockable.addFundsModal.tooltip.exchange')
-            "
-            class="tooltip__text mb-2"></p>
-          <p
-            v-dompurify-html="
-              $t('mint.unlockable.addFundsModal.tooltip.transfer', [token])
-            "
-            class="tooltip__text mb-6" />
-          <p class="tooltip__note has-text-grey">
-            {{ $t('mint.unlockable.addFundsModal.tooltip.note') }}
-          </p>
-        </template>
-      </NeoTooltip>
+      <template v-if="!hasSource">
+        <p class="mb-4">{{ $t('mint.unlockable.addFundsModal.textP2') }}</p>
+        <NeoTooltip multiline multiline-width="256px" content-class="p-4">
+          <div
+            class="is-flex is-justify-items-space-between is-align-items-center has-text-grey add-funds-note">
+            <NeoIcon icon="circle-info" class="mr-3" />
+            <p class="is-size-7">
+              {{ $t('mint.unlockable.addFundsModal.howToAddFunds') }}
+            </p>
+          </div>
+          <template #content>
+            <h3 class="tooltip__title">
+              {{ $t('mint.unlockable.addFundsModal.tooltip.title', [token]) }}
+            </h3>
+            <p
+              v-dompurify-html="
+                $t('mint.unlockable.addFundsModal.tooltip.onramp', [token])
+              "
+              class="tooltip__text mb-2" />
+            <p
+              v-dompurify-html="
+                $t('mint.unlockable.addFundsModal.tooltip.exchange')
+              "
+              class="tooltip__text mb-2"></p>
+
+            <p
+              v-dompurify-html="
+                $t('mint.unlockable.addFundsModal.tooltip.transfer', [token])
+              "
+              class="tooltip__text mb-6" />
+            <p class="tooltip__note has-text-grey">
+              {{ $t('mint.unlockable.addFundsModal.tooltip.note') }}
+            </p>
+          </template>
+        </NeoTooltip>
+      </template>
+
       <div class="is-flex">
-        <NeoButton
-          class="is-flex-1 h-14 is-capitalized shine"
-          no-shadow
-          variant="k-accent"
-          @click="onShowRamp">
-          {{ $t('autoTeleport.addFundsViaOnramp') }}
-        </NeoButton>
+        <AutoTeleportActionButton
+          ref="autoteleport"
+          :amount="minimumFunds"
+          interaction="drop"
+          @actions:completed="$emit('confirm')" />
       </div>
     </ModalBody>
   </NeoModal>
-  <OnRampModal v-model="onRampActive" @close="onRampActive = false" />
 </template>
 
 <script setup lang="ts">
-import { NeoButton, NeoIcon, NeoModal, NeoTooltip } from '@kodadot1/brick'
+import { NeoIcon, NeoModal, NeoTooltip } from '@kodadot1/brick'
 import ModalBody from '@/components/shared/modals/ModalBody.vue'
-import OnRampModal from '@/components/shared/OnRampModal.vue'
-
-type Props = {
-  modelValue: boolean
-  minimumFunds: number
-  token: string
-}
+import AutoTeleportActionButton from '@/components/common/autoTeleport/AutoTeleportActionButton.vue'
 
-withDefaults(defineProps<Props>(), {
-  modelValue: false,
-})
+const emit = defineEmits(['confirm', 'update:modelValue'])
+withDefaults(
+  defineProps<{
+    modelValue: boolean
+    minimumFunds: number
+    formattedMinimumFunds: string
+    token: string
+    chain: string
+  }>(),
+  {
+    modelValue: false,
+  },
+)
 
 const { urlPrefix } = usePrefix()
 const { accountId } = useAuth()
 
-const onRampActive = ref(false)
+const autoteleport = ref()
 
-const emit = defineEmits(['confirm', 'update:modelValue'])
+const hasSource = computed(() =>
+  Boolean(autoteleport.value?.optimalTransition?.source),
+)
+
+const loading = computed(() => !autoteleport.value?.hasBalances)
 
 const onClose = () => {
   emit('update:modelValue', false)
 }
-
-const onShowRamp = () => {
-  onRampActive.value = true
-  onClose()
-}
 </script>
 
 <style lang="scss" scoped>
@@ -155,4 +161,10 @@ const onShowRamp = () => {
     height: initial;
   }
 }
+
+@include mobile() {
+  .modal-width {
+    width: unset;
+  }
+}
 </style>
diff --git a/components/collection/drop/Generative.vue b/components/collection/drop/Generative.vue
index 032d891f2c..083e2e2b82 100644
--- a/components/collection/drop/Generative.vue
+++ b/components/collection/drop/Generative.vue
@@ -61,7 +61,8 @@
                   <div
                     v-dompurify-html="
                       $t('mint.unlockable.minimumFundsDescription', [
-                        `${minimumFunds} ${token}`,
+                        formattedMinimumFunds,
+                        urlPrefix,
                       ])
                     "
                     class="minimum-funds-description" />
@@ -114,8 +115,11 @@
   <CollectionDropAddFundsModal
     v-model="isAddFundModalActive"
     :minimum-funds="minimumFunds"
+    :formatted-minimum-funds="formattedMinimumFunds"
     :token="token"
-    @close="isAddFundModalActive = false" />
+    :chain="urlPrefix"
+    @close="isAddFundModalActive = false"
+    @confirm="handleDropAddModalConfirm" />
 
   <ListingCartModal />
 </template>
@@ -135,21 +139,22 @@ import { makeScreenshot } from '@/services/capture'
 import { pinFileToIPFS } from '@/services/nftStorage'
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
 import newsletterApi from '@/utils/newsletter'
-import { formatBsxBalanceToNumber } from '@/utils/format/balance'
 import { prefixToToken } from '@/components/common/shoppingCart/utils'
-import { useIdentityStore } from '@/stores/identity'
-import {
-  DOT_EXISTENTIAL_DEPOSIT,
-  KSM_EXISTENTIAL_DEPOSIT,
-} from '@/components/collection/unlockable/const'
 import DropConfirmModal from './modal/DropConfirmModal.vue'
 import ListingCartModal from '@/components/common/listingCart/ListingCartModal.vue'
 import { nftToListingCartItem } from '@/components/common/shoppingCart/utils'
 import { fetchNft } from '@/components/items/ItemsGrid/useNftActions'
+import { existentialDeposit } from '@kodadot1/static'
 
 const NuxtLink = resolveComponent('NuxtLink')
 const MINTING_SECOND = 120
 
+export type DropMintedNft = DoResult & {
+  id: string
+  collectionName: string
+  name: string
+}
+
 const props = defineProps({
   drop: {
     type: Object,
@@ -159,53 +164,57 @@ const props = defineProps({
   },
 })
 
-useMultipleBalance(true)
-
-const minimumFunds = computed<number>(
-  () => (props.drop.meta && formatBsxBalanceToNumber(props.drop.meta)) || 0,
-)
-const store = useIdentityStore()
-
-const isWalletConnecting = ref(false)
-const collectionId = computed(() => props.drop?.collection)
-const disabledByBackend = computed(() => props.drop?.disabled)
-const defaultImage = computed(() => props.drop?.image)
-const defaultName = computed(() => props.drop?.name)
-const defaultMax = computed(() => props.drop?.max || 255)
-const { currentAccountMintedToken, mintedDropCount, fetchDropStatus } =
-  useDropStatus(props.drop.alias)
 const instance = getCurrentInstance()
 const listingCartStore = useListingCartStore()
 const preferencesStore = usePreferencesStore()
 
-const { doAfterLogin } = useDoAfterlogin(instance)
 const { $i18n } = useNuxtApp()
-const root = ref()
-
+const { decimals, chainSymbol } = useChain()
 const { toast } = useToast()
 const { accountId, isLogIn } = useAuth()
-
 const { urlPrefix } = usePrefix()
+const { currentAccountMintedToken, mintedDropCount, fetchDropStatus } =
+  useDropStatus(props.drop.alias)
+const { doAfterLogin } = useDoAfterlogin(instance)
+const { fetchMultipleBalance } = useMultipleBalance()
+const { chainBalances, chain: currentChain } = useTeleport()
+
+const isWalletConnecting = ref(false)
+const root = ref()
 const selectedImage = ref<string>('')
 const isLoading = ref(false)
 const isImageFetching = ref(false)
 const isConfirmModalActive = ref(false)
 const isAddFundModalActive = ref(false)
+const mintedNft = ref<DropMintedNft>()
+const mintedNftWithMetadata = ref<NFTWithMetadata>()
 
+const collectionId = computed(() => props.drop?.collection)
+const disabledByBackend = computed(() => props.drop?.disabled)
+const defaultImage = computed(() => props.drop?.image)
+const defaultName = computed(() => props.drop?.name)
+const defaultMax = computed(() => props.drop?.max || 255)
 const token = computed(() => prefixToToken[props.drop.chain])
+const currentChainBalance = computed(
+  () =>
+    (currentChain.value && Number(chainBalances[currentChain.value]())) || 0,
+)
+const minimumFunds = computed<number>(() => props.drop.meta || 0)
 
-export type DropMintedNft = DoResult & {
-  id: string
-  collectionName: string
-  name: string
-}
+const { formatted: formattedMinimumFunds } = useAmount(
+  computed(() => props.drop.meta || 0),
+  decimals,
+  chainSymbol,
+  2,
+)
 
-const mintedNft = ref<DropMintedNft>()
-const mintedNftWithMetadata = ref<NFTWithMetadata>()
+const transferableDropChainBalance = computed(
+  () => currentChainBalance.value - existentialDeposit[urlPrefix.value],
+)
 
-const handleSelectImage = (image: string) => {
-  selectedImage.value = image
-}
+const hasMinimumFunds = computed(
+  () => transferableDropChainBalance.value >= minimumFunds.value,
+)
 
 const { data: collectionData } = useGraphql({
   queryName: 'unlockableCollectionById',
@@ -254,6 +263,10 @@ const collectionName = computed(
   () => collectionData.value?.collectionEntity?.name,
 )
 
+const handleSelectImage = (image: string) => {
+  selectedImage.value = image
+}
+
 const tryCapture = async () => {
   try {
     const imgFile = await makeScreenshot(sanitizeIpfsUrl(selectedImage.value))
@@ -279,21 +292,12 @@ const handleSubmitMint = async () => {
 
     return
   }
+
   if (isLoading.value || isImageFetching.value) {
     return false
   }
 
-  const dropChainBalance = Number(store.getAuthBalanceByChain(props.drop.chain))
-  const relayChainBalance = Number(
-    store.getAuthBalanceByRelayChain(props.drop.chain),
-  )
-  const existentialDeposit =
-    token.value === 'KSM' ? KSM_EXISTENTIAL_DEPOSIT : DOT_EXISTENTIAL_DEPOSIT
-
-  if (
-    dropChainBalance >= minimumFunds.value ||
-    relayChainBalance >= existentialDeposit + minimumFunds.value
-  ) {
+  if (hasMinimumFunds.value) {
     openConfirmModal()
   } else {
     openAddFundModal()
@@ -312,6 +316,10 @@ const openAddFundModal = () => {
   isAddFundModalActive.value = true
 }
 
+const closeAddFundModal = () => {
+  isAddFundModalActive.value = false
+}
+
 const subscribe = async (email: string) => {
   try {
     await newsletterApi.subscribe(email)
@@ -416,6 +424,13 @@ const clear = () => {
   listingCartStore.removeItem(mintedNftWithMetadata.value?.id)
 }
 
+const handleDropAddModalConfirm = () => {
+  closeAddFundModal()
+  openConfirmModal()
+  fetchMultipleBalance([urlPrefix.value])
+}
+
+onBeforeMount(fetchMultipleBalance)
 onBeforeUnmount(clear)
 </script>
 
diff --git a/components/collection/unlockable/const.ts b/components/collection/unlockable/const.ts
index bcb5b88ef8..451772909a 100644
--- a/components/collection/unlockable/const.ts
+++ b/components/collection/unlockable/const.ts
@@ -6,6 +6,3 @@ export const countDownTime = endOfHour(now).getTime()
 export const slidesCountOnTimeCountdown = 10
 
 export const DISPLAY_SLIDE_IMAGE_COUNT = 4
-
-export const DOT_EXISTENTIAL_DEPOSIT = 1
-export const KSM_EXISTENTIAL_DEPOSIT = 0.000333
diff --git a/components/common/autoTeleport/AutoTeleportActionButton.vue b/components/common/autoTeleport/AutoTeleportActionButton.vue
index 0b0558833f..b62646e1ee 100644
--- a/components/common/autoTeleport/AutoTeleportActionButton.vue
+++ b/components/common/autoTeleport/AutoTeleportActionButton.vue
@@ -55,6 +55,7 @@
     :can-do-action="hasEnoughInCurrentChain"
     :transactions="transactions"
     :auto-close="autoCloseModal"
+    :interaction="interaction"
     @close="handleAutoTeleportModalClose"
     @telport:retry="teleport"
     @action:start="(i) => actionRun(i)"
@@ -92,17 +93,20 @@ const emit = defineEmits([
 const props = withDefaults(
   defineProps<{
     amount: number
-    label: string
+    label?: string
     disabled: boolean
-    actions: AutoTeleportAction[]
+    actions?: AutoTeleportAction[]
     fees?: AutoTeleportFeeParams
     autoCloseModal: boolean
+    interaction?: string
   }>(),
   {
     fees: () => ({ actions: 0, actionAutoFees: true }),
     disabled: false,
     amount: 0,
     autoCloseModal: false,
+    actions: () => [],
+    label: '',
   },
 )
 
@@ -177,6 +181,7 @@ const hasNoFundsAtAll = computed(
 
 const confirmButtonTitle = computed(() => {
   const interaction =
+    props.interaction ||
     transactions.value.actions[0].interaction?.toLocaleLowerCase()
   return $i18n.t(`autoTeleport.steps.${interaction}.confirm`)
 })
@@ -185,7 +190,7 @@ const showAddFunds = computed(() => hasBalances.value && hasNoFundsAtAll.value)
 
 const autoTeleportLabel = computed(() => {
   if (hasEnoughInCurrentChain.value || props.disabled) {
-    return props.label
+    return props.label || confirmButtonTitle.value
   }
 
   if (!hasBalances.value) {
diff --git a/components/common/autoTeleport/AutoTeleportModal.vue b/components/common/autoTeleport/AutoTeleportModal.vue
index 36809b1d51..360b51fda5 100644
--- a/components/common/autoTeleport/AutoTeleportModal.vue
+++ b/components/common/autoTeleport/AutoTeleportModal.vue
@@ -102,6 +102,7 @@ const props = withDefaults(
     transactions: AutoTeleportTransactions
     autoClose?: boolean
     autoCloseDelay?: number
+    interaction?: string
   }>(),
   {
     autoClose: false,
@@ -129,14 +130,16 @@ const checkBalanceState = computed<TransactionStepStatus>(() => {
   return status
 })
 
-const mainActionDetails = computed(() => {
-  const interaction =
-    props.transactions.actions[0].interaction?.toLocaleLowerCase()
-  return {
-    action: $i18n.t(`autoTeleport.steps.${interaction}.action`),
-    item: $i18n.t(`autoTeleport.steps.${interaction}.item`),
-  }
-})
+const mainInteraction = computed(
+  () =>
+    props.interaction ||
+    props.transactions.actions[0].interaction?.toLocaleLowerCase(),
+)
+
+const mainActionDetails = computed(() => ({
+  action: $i18n.t(`autoTeleport.steps.${mainInteraction.value}.action`),
+  item: $i18n.t(`autoTeleport.steps.${mainInteraction.value}.item`),
+}))
 
 const steps = computed<TransactionStep[]>(() => {
   return [
@@ -180,7 +183,7 @@ const handleActiveStep = (step) => {
 }
 
 const btnDisabled = computed(() => {
-  return !actionsFinalized.value
+  return !autoteleportFinalized.value
 })
 
 const actionsFinalized = computed(() =>
@@ -189,8 +192,14 @@ const actionsFinalized = computed(() =>
     .every((status) => status.value === TransactionStatus.Finalized),
 )
 
+const hasActions = computed(() => props.transactions.actions.length)
+
+const autoteleportFinalized = computed(() =>
+  hasActions.value ? actionsFinalized.value : props.canDoAction,
+)
+
 const btnLabel = computed(() => {
-  if (!props.canDoAction || !activeStepInteraction.value) {
+  if (!hasActions.value || !props.canDoAction || !activeStepInteraction.value) {
     return $i18n.t('autoTeleport.completeAllRequiredSteps')
   }
 
@@ -224,7 +233,7 @@ watch(activeStep, () => {
 })
 
 const submit = () => {
-  if (actionsFinalized.value) {
+  if (autoteleportFinalized.value) {
     onClose()
   }
 }
@@ -233,8 +242,8 @@ const onClose = () => {
   emit('close')
 }
 
-watch(actionsFinalized, () => {
-  if (actionsFinalized.value) {
+watch(autoteleportFinalized, () => {
+  if (autoteleportFinalized.value) {
     emit('completed')
 
     if (props.autoClose) {
diff --git a/components/shared/format/Money.vue b/components/shared/format/Money.vue
index 7bc3af27f9..2f3f4adeba 100644
--- a/components/shared/format/Money.vue
+++ b/components/shared/format/Money.vue
@@ -14,7 +14,7 @@
 import {
   checkInvalidBalanceFilter,
   default as formatBalance,
-  roundTo,
+  roundAmount,
 } from '@/utils/format/balance'
 import { chainPropListOf } from '@/utils/config/chain.config'
 import type { Prefix } from '@kodadot1/static'
@@ -47,7 +47,7 @@ const displayUnit = computed(
     (props.prefix ? chainPropListOf(props.prefix).tokenSymbol : unit.value),
 )
 const finalValue = computed(() =>
-  round(
+  roundAmount(
     formatBalance(
       checkInvalidBalanceFilter(props.value),
       tokenDecimals.value,
@@ -57,12 +57,4 @@ const finalValue = computed(() =>
     true,
   ),
 )
-
-const round = (value: string, limit: number, disableFilter: boolean) => {
-  const number = Number(value.replace(/,/g, ''))
-  if (disableFilter) {
-    return parseFloat(number.toString())
-  }
-  return roundTo(value, limit)
-}
 </script>
diff --git a/composables/useAmount.ts b/composables/useAmount.ts
index 6594ddb9b5..c3c5fc26d2 100644
--- a/composables/useAmount.ts
+++ b/composables/useAmount.ts
@@ -1,15 +1,20 @@
-import format from '@/utils/format/balance'
+import format, { roundAmount } from '@/utils/format/balance'
 
 export default function (
   tokenAmount: ComputedRef<number>,
   tokenDecimals: ComputedRef<number>,
   chainSymbol: ComputedRef<string>,
+  round: undefined | number = undefined,
 ) {
   const { getCurrentTokenValue } = useFiatStore()
 
-  const amountFormatted = computed(() =>
-    format(tokenAmount.value, tokenDecimals.value, chainSymbol.value),
-  )
+  const amountFormatted = computed(() => {
+    const amount = format(tokenAmount.value, tokenDecimals.value, '')
+    return `${round ? roundAmount(amount, round, false) : amount} ${
+      chainSymbol.value
+    }`
+  })
+
   const amountUsd = computed(() => {
     const value = calculateUsdFromToken(
       Number(tokenAmount.value) * Math.pow(10, -tokenDecimals.value),
diff --git a/locales/en.json b/locales/en.json
index c80910bc4d..7bf79272ec 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -11,6 +11,7 @@
   "collections": "Collections",
   "items": "Items",
   "users": "Users",
+  "bridging": "Bridging",
   "recent": "Recent",
   "user": "User",
   "soon": "Soon",
@@ -604,7 +605,7 @@
       "onlyOneExample": "Example Of Drop",
       "mintThisNft": "Mint This NFT",
       "seeYourNft": "See Your NFT",
-      "minimumFundsDescription": "Holding a Minimum of <strong>{0}</strong> in Your Wallet is Required for This Free Mint.",
+      "minimumFundsDescription": "Holding a Minimum of <strong>{0} on {1}</strong> in Your Wallet is Required for This Free Mint.",
       "claimNftNow": "Claim NFT Now",
       "nftAlreadyMinted": "NFT Already Minted",
       "yourVariation": "Your Unique Variation",
@@ -625,7 +626,7 @@
       "howItemWork": "How unlockable item works",
       "addFundsModal": {
         "title": "Action Required",
-        "textP1": "To participate in this free, gasless drop, your wallet must hold a minimum of <strong>{0}</<strong>",
+        "textP1": "To participate in this free, gasless drop, your wallet must hold a minimum of <strong>{0} on {1}</<strong>",
         "textP2": "Please add funds to continue",
         "howToAddFunds": "How to add funds",
         "tooltip": {
@@ -1447,7 +1448,8 @@
     "artBy": "{0} By",
     "viewNft": "View NFT",
     "listNft": "List NFT",
-    "canList": "NFT ready for listing!"
+    "canList": "NFT ready for listing!",
+    "teleportRequiredAmount": "Teleport required amount"
   },
   "confirmPurchase": {
     "action": "Confirm Purchase",
@@ -1650,6 +1652,11 @@
         "title": "Minting NFT Collection",
         "submit": "Minting NFT Collection..."
       },
+      "drop": {
+        "confirm": "Teleport Required Amount",
+        "action": "Claim free",
+        "item": "NFT"
+      },
       "mintnft": {
         "confirm": "Teleport and Mint NFT",
         "action": "Mint",
diff --git a/utils/format/balance.ts b/utils/format/balance.ts
index ccf121d0e3..b3e5f31ed7 100644
--- a/utils/format/balance.ts
+++ b/utils/format/balance.ts
@@ -117,4 +117,16 @@ export const formatBsxBalanceToNumber = (amount) => {
   return parseFloat(format(amount, 12, false).replace(/,/g, ''))
 }
 
+export const roundAmount = (
+  value: string,
+  limit: number,
+  disableFilter: boolean,
+) => {
+  const number = Number(value.replace(/,/g, ''))
+  if (disableFilter) {
+    return parseFloat(number.toString())
+  }
+  return roundTo(value, limit)
+}
+
 export default format

From bfa54c3d9a204ac8f3fec59081db0431bde63bcf Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Thu, 14 Dec 2023 11:32:00 +0500
Subject: [PATCH 40/65] ref: hide top button section

---
 components/collection/drop/AddFundsModal.vue               | 7 ++++---
 .../common/autoTeleport/AutoTeleportActionButton.vue       | 6 ++++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/components/collection/drop/AddFundsModal.vue b/components/collection/drop/AddFundsModal.vue
index 4c419d72e4..2f99a6b4ff 100644
--- a/components/collection/drop/AddFundsModal.vue
+++ b/components/collection/drop/AddFundsModal.vue
@@ -29,7 +29,7 @@
           ])
         "
         class="mb-4" />
-      <template v-if="!hasSource">
+      <template v-if="!canAutoTeleport">
         <p class="mb-4">{{ $t('mint.unlockable.addFundsModal.textP2') }}</p>
         <NeoTooltip multiline multiline-width="256px" content-class="p-4">
           <div
@@ -70,6 +70,7 @@
         <AutoTeleportActionButton
           ref="autoteleport"
           :amount="minimumFunds"
+          :hide-top="!canAutoTeleport"
           interaction="drop"
           @actions:completed="$emit('confirm')" />
       </div>
@@ -101,8 +102,8 @@ const { accountId } = useAuth()
 
 const autoteleport = ref()
 
-const hasSource = computed(() =>
-  Boolean(autoteleport.value?.optimalTransition?.source),
+const canAutoTeleport = computed(() =>
+  Boolean(autoteleport.value?.canAutoTeleport),
 )
 
 const loading = computed(() => !autoteleport.value?.hasBalances)
diff --git a/components/common/autoTeleport/AutoTeleportActionButton.vue b/components/common/autoTeleport/AutoTeleportActionButton.vue
index b62646e1ee..8762c94e5d 100644
--- a/components/common/autoTeleport/AutoTeleportActionButton.vue
+++ b/components/common/autoTeleport/AutoTeleportActionButton.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="is-flex is-flex-direction-column w-full">
     <div
-      v-if="showAutoTeleport"
+      v-if="showAutoTeleport && !hideTop"
       class="is-flex is-justify-content-space-between w-full mb-4">
       <div class="is-flex">
         <div class="has-accent-blur">
@@ -99,6 +99,7 @@ const props = withDefaults(
     fees?: AutoTeleportFeeParams
     autoCloseModal: boolean
     interaction?: string
+    hideTop?: boolean
   }>(),
   {
     fees: () => ({ actions: 0, actionAutoFees: true }),
@@ -107,6 +108,7 @@ const props = withDefaults(
     autoCloseModal: false,
     actions: () => [],
     label: '',
+    hideTop: false,
   },
 )
 
@@ -296,7 +298,7 @@ watchSyncEffect(() => {
   }
 })
 
-defineExpose({ hasBalances, optimalTransition })
+defineExpose({ hasBalances, optimalTransition, canAutoTeleport })
 </script>
 
 <style lang="scss" scoped>

From c60dc7d76f3aed214f5aca6c7138f5b334d18697 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Thu, 14 Dec 2023 11:39:58 +0500
Subject: [PATCH 41/65] ref: chain uppercased

---
 components/collection/drop/AddFundsModal.vue | 4 +---
 components/collection/drop/Generative.vue    | 7 ++++---
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/components/collection/drop/AddFundsModal.vue b/components/collection/drop/AddFundsModal.vue
index 2f99a6b4ff..1767ccfbab 100644
--- a/components/collection/drop/AddFundsModal.vue
+++ b/components/collection/drop/AddFundsModal.vue
@@ -102,9 +102,7 @@ const { accountId } = useAuth()
 
 const autoteleport = ref()
 
-const canAutoTeleport = computed(() =>
-  Boolean(autoteleport.value?.canAutoTeleport),
-)
+const canAutoTeleport = computed(() => autoteleport.value?.canAutoTeleport)
 
 const loading = computed(() => !autoteleport.value?.hasBalances)
 
diff --git a/components/collection/drop/Generative.vue b/components/collection/drop/Generative.vue
index 083e2e2b82..a0646e0ca8 100644
--- a/components/collection/drop/Generative.vue
+++ b/components/collection/drop/Generative.vue
@@ -62,7 +62,7 @@
                     v-dompurify-html="
                       $t('mint.unlockable.minimumFundsDescription', [
                         formattedMinimumFunds,
-                        urlPrefix,
+                        chain,
                       ])
                     "
                     class="minimum-funds-description" />
@@ -117,8 +117,8 @@
     :minimum-funds="minimumFunds"
     :formatted-minimum-funds="formattedMinimumFunds"
     :token="token"
-    :chain="urlPrefix"
-    @close="isAddFundModalActive = false"
+    :chain="chain"
+    @close="closeAddFundModal"
     @confirm="handleDropAddModalConfirm" />
 
   <ListingCartModal />
@@ -189,6 +189,7 @@ const isAddFundModalActive = ref(false)
 const mintedNft = ref<DropMintedNft>()
 const mintedNftWithMetadata = ref<NFTWithMetadata>()
 
+const chain = computed(() => urlPrefix.value.toUpperCase())
 const collectionId = computed(() => props.drop?.collection)
 const disabledByBackend = computed(() => props.drop?.disabled)
 const defaultImage = computed(() => props.drop?.image)

From 0084608c427f838fe04c92129e540bf5692e260d Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Thu, 14 Dec 2023 11:46:45 +0500
Subject: [PATCH 42/65] removed: duplicate import

---
 utils/teleport.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/utils/teleport.ts b/utils/teleport.ts
index 22a2e84b08..53518c851c 100644
--- a/utils/teleport.ts
+++ b/utils/teleport.ts
@@ -1,7 +1,7 @@
 // Copyright 2017-2021 @polkadot/app-config authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { Prefix } from '@kodadot1/static'
+import { Prefix, existentialDeposit } from '@kodadot1/static'
 import type { ApiPromise } from '@polkadot/api'
 import { SubmittableExtrinsicFunction } from '@polkadot/api/types'
 import { XcmVersionedMultiLocation } from '@polkadot/types/lookup'
@@ -13,7 +13,6 @@ import { getChainEndpointByPrefix } from '@/utils/chain'
 import { TeleportParams } from '@/composables/useTeleport'
 import { getAddress } from '@/utils/extension'
 import { toDefaultAddress } from '@/utils/account'
-import { existentialDeposit } from '@kodadot1/static'
 
 type Extrisic = SubmittableExtrinsicFunction<'promise', AnyTuple>
 

From 891c84055292567f2eeaca6e051bfaad4400fd35 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Thu, 14 Dec 2023 12:41:38 +0500
Subject: [PATCH 43/65] ref: open confirm modal on autoteleport modal close

---
 components/collection/drop/AddFundsModal.vue              | 8 +++++++-
 .../common/autoTeleport/AutoTeleportActionButton.vue      | 4 ++--
 components/common/autoTeleport/AutoTeleportModal.vue      | 2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/components/collection/drop/AddFundsModal.vue b/components/collection/drop/AddFundsModal.vue
index 1767ccfbab..c6a63a5947 100644
--- a/components/collection/drop/AddFundsModal.vue
+++ b/components/collection/drop/AddFundsModal.vue
@@ -72,7 +72,7 @@
           :amount="minimumFunds"
           :hide-top="!canAutoTeleport"
           interaction="drop"
-          @actions:completed="$emit('confirm')" />
+          @modal:close="handleModalClose" />
       </div>
     </ModalBody>
   </NeoModal>
@@ -109,6 +109,12 @@ const loading = computed(() => !autoteleport.value?.hasBalances)
 const onClose = () => {
   emit('update:modelValue', false)
 }
+
+const handleModalClose = (completed: boolean) => {
+  if (completed) {
+    emit('confirm')
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/common/autoTeleport/AutoTeleportActionButton.vue b/components/common/autoTeleport/AutoTeleportActionButton.vue
index 8762c94e5d..633e7cbe9d 100644
--- a/components/common/autoTeleport/AutoTeleportActionButton.vue
+++ b/components/common/autoTeleport/AutoTeleportActionButton.vue
@@ -280,10 +280,10 @@ const submit = () => {
   }
 }
 
-const handleAutoTeleportModalClose = () => {
+const handleAutoTeleportModalClose = (completed: boolean) => {
   isModalOpen.value = false
   clear()
-  emit('modal:close')
+  emit('modal:close', completed)
 }
 
 watch(allowAutoTeleport, (allow) => {
diff --git a/components/common/autoTeleport/AutoTeleportModal.vue b/components/common/autoTeleport/AutoTeleportModal.vue
index 360b51fda5..2280c69656 100644
--- a/components/common/autoTeleport/AutoTeleportModal.vue
+++ b/components/common/autoTeleport/AutoTeleportModal.vue
@@ -239,7 +239,7 @@ const submit = () => {
 }
 
 const onClose = () => {
-  emit('close')
+  emit('close', autoteleportFinalized.value)
 }
 
 watch(autoteleportFinalized, () => {

From c9623ace16dab90f77b0cbad5ec7aa19c4945146 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Thu, 14 Dec 2023 15:55:57 +0500
Subject: [PATCH 44/65] fix: sort not working

---
 components/items/ItemsGrid/ItemsGrid.vue   | 16 ++++-----
 components/items/ItemsGrid/useItemsGrid.ts | 41 +++++++++++++---------
 components/profile/ProfileDetail.vue       |  4 ++-
 3 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/components/items/ItemsGrid/ItemsGrid.vue b/components/items/ItemsGrid/ItemsGrid.vue
index 58e6c821ea..b128647798 100644
--- a/components/items/ItemsGrid/ItemsGrid.vue
+++ b/components/items/ItemsGrid/ItemsGrid.vue
@@ -83,15 +83,10 @@ const { listingCartEnabled } = useListingCartConfig()
 const listingCartStore = useListingCartStore()
 const route = useRoute()
 
-const props = withDefaults(
-  defineProps<{
-    search?: Record<string, string | number>
-    disableAutoPageReset: boolean
-  }>(),
-  {
-    disableAutoPageReset: false,
-  },
-)
+const props = defineProps<{
+  search?: Record<string, string | number>
+  resetSearchQueryParams?: string[]
+}>()
 
 const emit = defineEmits(['total', 'loading'])
 
@@ -149,7 +144,8 @@ const { items, fetchSearch, clearFetchResults, usingTokens } = useFetchSearch({
   total,
   isFetchingData,
   isLoading,
-  resetSearch: props.disableAutoPageReset ? () => ({}) : debouncedResetPage,
+  resetSearch: debouncedResetPage,
+  resetSearchQueryParams: props.resetSearchQueryParams,
 })
 
 watch(
diff --git a/components/items/ItemsGrid/useItemsGrid.ts b/components/items/ItemsGrid/useItemsGrid.ts
index e009c9c243..173be223fe 100644
--- a/components/items/ItemsGrid/useItemsGrid.ts
+++ b/components/items/ItemsGrid/useItemsGrid.ts
@@ -11,18 +11,30 @@ import { nftToListingCartItem } from '@/components/common/shoppingCart/utils'
 import { useListingCartStore } from '@/stores/listingCart'
 import { NFT, TokenId } from '@/components/rmrk/service/scheme'
 
+const DEFAULT_RESET_SEARCH_QUERY_PARAMS = [
+  'sort',
+  'search',
+  'listed',
+  'min',
+  'max',
+  'owned',
+  'collections',
+]
+
 export function useFetchSearch({
   first,
   total,
   isFetchingData,
   resetSearch,
   isLoading,
+  resetSearchQueryParams = DEFAULT_RESET_SEARCH_QUERY_PARAMS,
 }: {
   first: Ref<number>
   total: Ref<number>
   isFetchingData: Ref<boolean>
   isLoading: Ref<boolean>
   resetSearch: () => void
+  resetSearchQueryParams?: string[]
 }) {
   const { client, urlPrefix } = usePrefix()
   const { isAssetHub } = useIsChain(urlPrefix)
@@ -173,25 +185,20 @@ export function useFetchSearch({
     fetchSearch({ search })
   }
 
-  watch(
-    [
-      () => route.query.sort,
-      () => route.query.search,
-      () => route.query.listed,
-      () => route.query.min,
-      () => route.query.max,
-      () => route.query.owned,
-      () => route.query.collections,
-    ],
-    (currentQuery, prevQuery) => {
-      if (isEqual(currentQuery, prevQuery)) {
-        return
-      }
-      loadedPages.value = []
-      resetSearch()
-    },
+  const watchResetSearchValues = computed(() =>
+    Object.fromEntries(
+      resetSearchQueryParams.map((key) => [key, route.query[key]]),
+    ),
   )
 
+  watch(watchResetSearchValues, (currentQuery, prevQuery) => {
+    if (isEqual(currentQuery, prevQuery)) {
+      return
+    }
+    loadedPages.value = []
+    resetSearch()
+  })
+
   return {
     items,
     fetchSearch,
diff --git a/components/profile/ProfileDetail.vue b/components/profile/ProfileDetail.vue
index 0dd5148732..457a9f6933 100644
--- a/components/profile/ProfileDetail.vue
+++ b/components/profile/ProfileDetail.vue
@@ -162,7 +162,9 @@
           </div>
         </div>
         <hr class="my-0" />
-        <ItemsGrid :search="itemsGridSearch" disable-auto-page-reset />
+        <ItemsGrid
+          :search="itemsGridSearch"
+          :reset-search-query-params="['sort']" />
       </div>
 
       <CollectionGrid

From 05e4ae37eda43fb67651f22fd91ee0990f0d6d80 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Thu, 14 Dec 2023 16:08:07 +0500
Subject: [PATCH 45/65] ref: rename resetSearchQueryParamsValues

---
 components/items/ItemsGrid/useItemsGrid.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/items/ItemsGrid/useItemsGrid.ts b/components/items/ItemsGrid/useItemsGrid.ts
index 173be223fe..a8f9d69cdd 100644
--- a/components/items/ItemsGrid/useItemsGrid.ts
+++ b/components/items/ItemsGrid/useItemsGrid.ts
@@ -185,13 +185,13 @@ export function useFetchSearch({
     fetchSearch({ search })
   }
 
-  const watchResetSearchValues = computed(() =>
+  const resetSearchQueryParamsValues = computed(() =>
     Object.fromEntries(
       resetSearchQueryParams.map((key) => [key, route.query[key]]),
     ),
   )
 
-  watch(watchResetSearchValues, (currentQuery, prevQuery) => {
+  watch(resetSearchQueryParamsValues, (currentQuery, prevQuery) => {
     if (isEqual(currentQuery, prevQuery)) {
       return
     }

From dce616ec079be2612896ec19e2f43ca8df0bd063 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Fri, 15 Dec 2023 10:00:41 +0700
Subject: [PATCH 46/65] add currency to EDWarningModal

---
 components/teleport/EDWarningModal.vue | 6 +++++-
 components/teleport/Teleport.vue       | 1 +
 locales/en.json                        | 2 +-
 utils/teleport.ts                      | 4 +++-
 4 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/components/teleport/EDWarningModal.vue b/components/teleport/EDWarningModal.vue
index 15e7840edc..b979cb2ed4 100644
--- a/components/teleport/EDWarningModal.vue
+++ b/components/teleport/EDWarningModal.vue
@@ -20,7 +20,10 @@
         class="is-flex is-flex-direction-column px-4 bakground-warning-red border border-color-k-red">
         <span class="my-3">
           {{
-            $t('teleport.insufficientExistentialDeposit', [existentialDeposit])
+            $t('teleport.insufficientExistentialDeposit', [
+              existentialDeposit,
+              currency,
+            ])
           }}
           <b>{{ $t('teleport.lossOfFunds') }}</b>
         </span>
@@ -55,6 +58,7 @@ import { NeoButton, NeoCheckbox, NeoIcon, NeoModal } from '@kodadot1/brick'
 const props = defineProps<{
   modelValue: boolean
   existentialDeposit: number
+  currency: Currency
 }>()
 
 const isModalActive = useVModel(props, 'modelValue')
diff --git a/components/teleport/Teleport.vue b/components/teleport/Teleport.vue
index c6dd51c1f7..7cf5a7af65 100644
--- a/components/teleport/Teleport.vue
+++ b/components/teleport/Teleport.vue
@@ -134,6 +134,7 @@
   <TeleportEdWarningModal
     v-model="insufficientEDModalOpen"
     :existential-deposit="targetExistentialDepositAmount"
+    :currency="currency"
     @continue="
       () => {
         insufficientEDModalOpen = false
diff --git a/locales/en.json b/locales/en.json
index 4f67c98cc1..40ef3fd842 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1085,7 +1085,7 @@
     "tweetDonation": "Tweet about your awesome donation",
     "donationSentTo": "Your donation will be sent to:",
     "ownerMessage": "(You Are Owner)",
-    "insufficientExistentialDeposit": "Transferring Less Than {0} + Fees Will Lead To An Irreversible",
+    "insufficientExistentialDeposit": "Transferring Less Than {0} {1} (existential deposit) + Fees Will Lead To An Irreversible",
     "fundsAtRisk": "Funds at risk",
     "fundLossRisk": "Funds Loss Risk",
     "lossOfFunds": "Loss Of Funds.",
diff --git a/utils/teleport.ts b/utils/teleport.ts
index af0f58bde9..f047e9bb7a 100644
--- a/utils/teleport.ts
+++ b/utils/teleport.ts
@@ -248,7 +248,9 @@ export const getTransactionFee = async ({
   return info.partialFee.toString()
 }
 
-export const getChainCurrency = (chain: Chain) => {
+export type Currency = 'KSM' | 'DOT'
+
+export const getChainCurrency = (chain: Chain): Currency => {
   switch (chain) {
     case Chain.KUSAMA:
     case Chain.BASILISK:

From c0eae016b262730f1e31c541cdc052bfc45d3478 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Fri, 15 Dec 2023 10:35:58 +0500
Subject: [PATCH 47/65] fix: autoteleport button enabled too soon

---
 components/common/autoTeleport/AutoTeleportModal.vue | 10 +++++++++-
 locales/en.json                                      |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/components/common/autoTeleport/AutoTeleportModal.vue b/components/common/autoTeleport/AutoTeleportModal.vue
index 2280c69656..fe48f8879c 100644
--- a/components/common/autoTeleport/AutoTeleportModal.vue
+++ b/components/common/autoTeleport/AutoTeleportModal.vue
@@ -194,11 +194,19 @@ const actionsFinalized = computed(() =>
 
 const hasActions = computed(() => props.transactions.actions.length)
 
+const hasCompletedBalanceCheck = computed(
+  () => steps.value[1].stepStatus === TransactionStepStatus.COMPLETED,
+)
+
 const autoteleportFinalized = computed(() =>
-  hasActions.value ? actionsFinalized.value : props.canDoAction,
+  hasActions.value ? actionsFinalized.value : hasCompletedBalanceCheck.value,
 )
 
 const btnLabel = computed(() => {
+  if (!hasActions.value && hasCompletedBalanceCheck.value) {
+    return $i18n.t('redirect.continue')
+  }
+
   if (!hasActions.value || !props.canDoAction || !activeStepInteraction.value) {
     return $i18n.t('autoTeleport.completeAllRequiredSteps')
   }
diff --git a/locales/en.json b/locales/en.json
index 7bf79272ec..7362b8584c 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1653,7 +1653,7 @@
         "submit": "Minting NFT Collection..."
       },
       "drop": {
-        "confirm": "Teleport Required Amount",
+        "confirm": "Teleport required amount",
         "action": "Claim free",
         "item": "NFT"
       },

From 51bbc8733d6a1967b317499315ef4cc98e28e80f Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Fri, 15 Dec 2023 11:08:15 +0500
Subject: [PATCH 48/65] ref: change drop key to generative_drop

---
 components/collection/drop/AddFundsModal.vue | 2 +-
 locales/en.json                              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/collection/drop/AddFundsModal.vue b/components/collection/drop/AddFundsModal.vue
index c6a63a5947..1ee9fe4c57 100644
--- a/components/collection/drop/AddFundsModal.vue
+++ b/components/collection/drop/AddFundsModal.vue
@@ -71,7 +71,7 @@
           ref="autoteleport"
           :amount="minimumFunds"
           :hide-top="!canAutoTeleport"
-          interaction="drop"
+          interaction="generative_drop"
           @modal:close="handleModalClose" />
       </div>
     </ModalBody>
diff --git a/locales/en.json b/locales/en.json
index 7362b8584c..8560802af5 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1652,7 +1652,7 @@
         "title": "Minting NFT Collection",
         "submit": "Minting NFT Collection..."
       },
-      "drop": {
+      "generative_drop": {
         "confirm": "Teleport required amount",
         "action": "Claim free",
         "item": "NFT"

From 14a73c4d70b733ef9a445238a6a6d1c86ebef192 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Fri, 15 Dec 2023 11:13:43 +0500
Subject: [PATCH 49/65] fix: identity item border color

---
 components/collection/drop/AddFundsModal.vue | 28 +++-----------------
 1 file changed, 3 insertions(+), 25 deletions(-)

diff --git a/components/collection/drop/AddFundsModal.vue b/components/collection/drop/AddFundsModal.vue
index 1ee9fe4c57..b2574e8278 100644
--- a/components/collection/drop/AddFundsModal.vue
+++ b/components/collection/drop/AddFundsModal.vue
@@ -10,17 +10,8 @@
       :scrollable="false"
       :loading="loading"
       @close="onClose">
-      <div
-        class="rounded border shade-border-color is-flex is-justify-content-start is-flex-grow-1 pl-3 mb-6">
-        <IdentityItem
-          :label="$t('confirmPurchase.connectedWith')"
-          hide-identity-popover
-          disable-identity-link
-          :prefix="urlPrefix"
-          :account="accountId"
-          class="identity-name-font-weight-regular"
-          data-testid="item-creator" />
-      </div>
+      <ModalIdentityItem class="mb-5" />
+
       <p
         v-dompurify-html="
           $t('mint.unlockable.addFundsModal.textP1', [
@@ -82,6 +73,7 @@
 import { NeoIcon, NeoModal, NeoTooltip } from '@kodadot1/brick'
 import ModalBody from '@/components/shared/modals/ModalBody.vue'
 import AutoTeleportActionButton from '@/components/common/autoTeleport/AutoTeleportActionButton.vue'
+import ModalIdentityItem from '@/components/shared/ModalIdentityItem.vue'
 
 const emit = defineEmits(['confirm', 'update:modelValue'])
 withDefaults(
@@ -97,13 +89,9 @@ withDefaults(
   },
 )
 
-const { urlPrefix } = usePrefix()
-const { accountId } = useAuth()
-
 const autoteleport = ref()
 
 const canAutoTeleport = computed(() => autoteleport.value?.canAutoTeleport)
-
 const loading = computed(() => !autoteleport.value?.hasBalances)
 
 const onClose = () => {
@@ -120,16 +108,6 @@ const handleModalClose = (completed: boolean) => {
 <style lang="scss" scoped>
 @import '@/assets/styles/abstracts/variables';
 
-.shade-border-color {
-  @include ktheme() {
-    border-color: theme('k-shade');
-  }
-}
-
-.rounded {
-  border-radius: 10rem;
-}
-
 .add-funds-note {
   cursor: default;
   margin-bottom: 16px;

From 5640f53d8b8bbf161d7893383f34e742a3d8b31b Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Fri, 15 Dec 2023 11:35:42 +0500
Subject: [PATCH 50/65] fix: isTestnet no longer computed

---
 composables/useMultipleBalance.ts | 2 +-
 stores/identity.ts                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/composables/useMultipleBalance.ts b/composables/useMultipleBalance.ts
index 27c3199db9..881801f670 100644
--- a/composables/useMultipleBalance.ts
+++ b/composables/useMultipleBalance.ts
@@ -129,7 +129,7 @@ export default function (refetchPeriodically: boolean = false) {
   ) => {
     await fetchFiatPrice(forceFiat)
 
-    const assets = isTestnet.value
+    const assets = isTestnet
       ? multiBalanceAssetsTestnet.value
       : multiBalanceAssets.value
 
diff --git a/stores/identity.ts b/stores/identity.ts
index a3935805a9..d44c0af207 100644
--- a/stores/identity.ts
+++ b/stores/identity.ts
@@ -166,7 +166,7 @@ export const useIdentityStore = defineStore('identity', {
       }
 
       const { isTestnet } = usePrefix()
-      const assets = isTestnet.value
+      const assets = isTestnet
         ? state.multiBalanceAssetsTestnet
         : state.multiBalanceAssets
 

From 6b85c088d9d08fe6ee723efa5b908d3dad0766e5 Mon Sep 17 00:00:00 2001
From: roiLeo <medina.leo42@gmail.com>
Date: Fri, 15 Dec 2023 11:40:22 +0100
Subject: [PATCH 51/65] =?UTF-8?q?=F0=9F=92=85=20landing=20top=20collection?=
 =?UTF-8?q?=20asset=20hub?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/landing/LandingPage.vue            | 15 +--
 .../topCollections/TopCollectionsAh.vue       | 84 ++++++++++++++++
 .../utils/useTopCollectionsAh.ts              | 98 +++++++++++++++++++
 .../subsquid/general/topCollections.graphql   | 17 ++++
 4 files changed, 207 insertions(+), 7 deletions(-)
 create mode 100644 components/landing/topCollections/TopCollectionsAh.vue
 create mode 100644 components/landing/topCollections/utils/useTopCollectionsAh.ts
 create mode 100644 queries/subsquid/general/topCollections.graphql

diff --git a/components/landing/LandingPage.vue b/components/landing/LandingPage.vue
index fa7e2bafed..9d3c0b728e 100644
--- a/components/landing/LandingPage.vue
+++ b/components/landing/LandingPage.vue
@@ -25,7 +25,8 @@
       <!-- top collections -->
       <section v-if="showTopCollections" class="py-8 instance">
         <div class="container is-fluid">
-          <TopCollections class="my-5" />
+          <LandingTopCollectionsAh v-if="isAssetHub" class="my-5" />
+          <LandingTopCollections v-else class="my-5" />
         </div>
       </section>
 
@@ -34,13 +35,13 @@
         <section class="py-8 instance">
           <div class="container is-fluid">
             <!-- new listings -->
-            <LazyCarouselTypeNewestList />
+            <!-- <LazyCarouselTypeNewestList /> -->
 
             <!-- latest sales -->
-            <LazyCarouselTypeLatestSales class="mt-8" />
+            <!-- <LazyCarouselTypeLatestSales class="mt-8" /> -->
 
             <!-- generative  -->
-            <LazyCarouselTypeGenerative class="mt-8" />
+            <!-- <LazyCarouselTypeGenerative class="mt-8" /> -->
           </div>
         </section>
       </ClientOnly>
@@ -57,20 +58,20 @@
 <script lang="ts" setup>
 import type { Prefix } from '@kodadot1/static'
 import SearchLanding from './SearchLanding.vue'
-import TopCollections from './topCollections/TopCollections.vue'
 import CarouselTypeSpotlight from '@/components/carousel/CarouselTypeSpotlight.vue'
 import { usePreferencesStore } from '@/stores/preferences'
 
 const hiddenCarrouselPrefixes: Prefix[] = ['dot']
 const forbiddenPrefixesForTopCollections: Prefix[] = [
   'ksm',
-  'ahk',
-  'ahp',
+  // 'ahk',
+  // 'ahp',
   'dot',
   // 'ahr',
 ]
 
 const { urlPrefix } = usePrefix()
+const { isAssetHub } = useIsChain(urlPrefix)
 const preferencesStore = usePreferencesStore()
 const { width } = useWindowSize()
 
diff --git a/components/landing/topCollections/TopCollectionsAh.vue b/components/landing/topCollections/TopCollectionsAh.vue
new file mode 100644
index 0000000000..c5c3dfdcbc
--- /dev/null
+++ b/components/landing/topCollections/TopCollectionsAh.vue
@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <div class="is-flex is-justify-content-space-between mobile">
+      <div class="title is-2">{{ $t('general.topCollectionsHeading') }}</div>
+      <div
+        class="top-collection-controls buttons is-align-items-flex-start pt-2">
+        <NeoButton
+          v-for="{ value, label } in timeRanges"
+          :key="value"
+          class="control column p-0 has-fixed-width px-4 mobile-padding"
+          :active="state.timeRange === value"
+          :label="`${$t(`topCollections.timeFrames.${label}`)}`"
+          @click="setTimeRange(value)" />
+      </div>
+      <div></div>
+    </div>
+
+    <div class="top-collections-grid mb-5">
+      <div v-for="(collection, index) in data" :key="index">
+        <TopCollectionsItem
+          :collection="collection"
+          :index="index + 1"
+          :time-range="state.timeRange" />
+      </div>
+    </div>
+
+    <div v-if="loading" class="top-collections-grid">
+      <div
+        v-for="index in limit"
+        :key="index"
+        class="top-collections-item py-2 is-flex is-align-items-center is-justify-content-space-between">
+        <div class="is-flex is-align-items-center">
+          <div class="p-4 has-text-weight-bold">
+            {{ index }}
+          </div>
+          <div>
+            <BasicImage custom-class="is-48x48 image-outline" rounded />
+          </div>
+        </div>
+        <div class="px-2" style="width: 60%">
+          <NeoSkeleton width="70%" />
+          <NeoSkeleton width="20%" size="small" />
+        </div>
+        <div class="is-pulled-right has-text-right px-4" style="width: 20%">
+          <NeoSkeleton width="80%" position="right" />
+          <NeoSkeleton width="70%" size="small" position="right" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { TimeRange, TimeRangeOption } from '@/components/series/types'
+import BasicImage from '@/components/shared/view/BasicImage.vue'
+import { NeoButton, NeoSkeleton } from '@kodadot1/brick'
+import TopCollectionsItem from './TopCollectionsItem.vue'
+import { useTopCollections } from './utils/useTopCollectionsAh'
+import { useFiatStore } from '@/stores/fiat'
+
+const fiatStore = useFiatStore()
+
+const limit = 12
+const { data, loading } = useTopCollections(limit)
+
+const state = reactive<{ timeRange: TimeRange }>({ timeRange: 'All' })
+
+const timeRanges: TimeRangeOption[] = [
+  // { value: 'Week', label: 'week' },
+  // { value: 'Month', label: 'month' },
+  // { value: 'Quarter', label: 'quarter' },
+  { value: 'All', label: 'all' },
+]
+
+const setTimeRange = (timeRange: TimeRange) => {
+  state.timeRange = timeRange
+}
+
+onMounted(() => {
+  if (fiatStore.getCurrentKSMValue) {
+    fiatStore.fetchFiatPrice()
+  }
+})
+</script>
diff --git a/components/landing/topCollections/utils/useTopCollectionsAh.ts b/components/landing/topCollections/utils/useTopCollectionsAh.ts
new file mode 100644
index 0000000000..a9e7cd0b67
--- /dev/null
+++ b/components/landing/topCollections/utils/useTopCollectionsAh.ts
@@ -0,0 +1,98 @@
+import { sanitizeIpfsUrl } from '@/utils/ipfs'
+import {
+  calculateAvgPrice,
+  monthlyVolume,
+  monthlyrangeVolume,
+  threeMonthRangeVolume,
+  threeMonthlyVolume,
+  volume,
+  weeklyVolume,
+  weeklyrangeVolume,
+} from '@/components/series/utils'
+import {
+  CollectionEntity,
+  CollectionEntityWithVolumes,
+  CollectionSales,
+  CollectionsSalesResult,
+  TopCollectionListResult,
+} from './types'
+import topCollectionsList from '@/queries/subsquid/general/topCollections.graphql'
+import collectionsSales from '@/queries/subsquid/general/collectionsSales.graphql'
+
+const proccessData = (
+  collectionsList: CollectionEntity[],
+  collectionsSales: CollectionSales[],
+) => {
+  return collectionsList.map((e): CollectionEntityWithVolumes => {
+    const thisCollectionSales = collectionsSales.find(
+      ({ id }) => id === e.id,
+    ) as CollectionSales
+    const saleEvents = thisCollectionSales.sales.map((nft) => nft.events).flat()
+
+    return {
+      ...e,
+      image: sanitizeIpfsUrl(e.image),
+      averagePrice: calculateAvgPrice(e.volume as string, e.buys),
+      volume: volume(saleEvents),
+      weeklyVolume: weeklyVolume(saleEvents),
+      monthlyVolume: monthlyVolume(saleEvents),
+      threeMonthVolume: threeMonthlyVolume(saleEvents),
+      weeklyrangeVolume: weeklyrangeVolume(saleEvents),
+      monthlyrangeVolume: monthlyrangeVolume(saleEvents),
+      threeMonthlyrangeVolume: threeMonthRangeVolume(saleEvents),
+    }
+  })
+}
+
+export const useTopCollections = (limit: number) => {
+  const { client } = usePrefix()
+  const topCollectionWithVolumeList = useState<CollectionEntityWithVolumes[]>(
+    'topCollectionWithVolumeList',
+    () => [],
+  )
+  const error = ref(null)
+  // const loading = ref(false)
+  const collectionsSalesResults = ref<CollectionsSalesResult>()
+
+  const { result: topCollections, loading } = useQuery(
+    topCollectionsList,
+    { limit },
+    { clientId: client.value },
+  )
+
+  watch([topCollections, error], () => {
+    if (error.value) {
+      loading.value = false
+      return
+    }
+    if (topCollections.value) {
+      const ids = (
+        topCollections.value as TopCollectionListResult
+      ).collectionEntities.map((c) => c.id)
+
+      const { onResult } = useQuery(
+        collectionsSales,
+        { ids },
+        { clientId: client.value },
+      )
+      onResult((result) => (collectionsSalesResults.value = result.data))
+    }
+  })
+
+  watch(collectionsSalesResults, () => {
+    if (collectionsSalesResults.value) {
+      const collectionsList = (topCollections.value as TopCollectionListResult)
+        .collectionEntities
+      topCollectionWithVolumeList.value = proccessData(
+        collectionsList,
+        collectionsSalesResults.value.collectionsSales,
+      )
+    }
+  })
+
+  return {
+    data: topCollectionWithVolumeList,
+    error,
+    loading,
+  }
+}
diff --git a/queries/subsquid/general/topCollections.graphql b/queries/subsquid/general/topCollections.graphql
new file mode 100644
index 0000000000..504ffc66cc
--- /dev/null
+++ b/queries/subsquid/general/topCollections.graphql
@@ -0,0 +1,17 @@
+query topCollections(
+	$limit: Int
+) {
+  collectionEntities(
+    orderBy: volume_DESC
+    limit: $limit
+    where: { volume_gt: "0" }
+  ) {
+    id
+    name
+    image
+    media
+    volume
+    floor
+    nftCount
+  }
+}

From 0d9fb694090a73e71a46bc17ef7c1346df48df54 Mon Sep 17 00:00:00 2001
From: roiLeo <medina.leo42@gmail.com>
Date: Fri, 15 Dec 2023 11:42:37 +0100
Subject: [PATCH 52/65] =?UTF-8?q?=F0=9F=94=A7=20hotfix=20floor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/landing/topCollections/TopCollectionsItem.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/landing/topCollections/TopCollectionsItem.vue b/components/landing/topCollections/TopCollectionsItem.vue
index ac58c2bfbc..4463b7c940 100644
--- a/components/landing/topCollections/TopCollectionsItem.vue
+++ b/components/landing/topCollections/TopCollectionsItem.vue
@@ -18,10 +18,12 @@
           </div>
           <div class="is-flex is-justify-content-start">
             <div class="is-hidden-mobile">
-              <div v-if="collection.floorPrice" class="no-wrap">
+              <div
+                v-if="collection.floorPrice || collection.floor"
+                class="no-wrap">
                 {{ $t('general.floor') }}:
                 <CommonTokenMoney
-                  :value="collection.floorPrice"
+                  :value="collection.floorPrice || collection.floor"
                   inline
                   :round="2" />
               </div>

From 4cbfeab702da824f4287e4df5780b9abbcd67c2b Mon Sep 17 00:00:00 2001
From: roiLeo <medina.leo42@gmail.com>
Date: Fri, 15 Dec 2023 11:46:04 +0100
Subject: [PATCH 53/65] =?UTF-8?q?=F0=9F=94=A7=20comments?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/landing/LandingPage.vue | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/components/landing/LandingPage.vue b/components/landing/LandingPage.vue
index 9d3c0b728e..0e6946fc07 100644
--- a/components/landing/LandingPage.vue
+++ b/components/landing/LandingPage.vue
@@ -35,13 +35,13 @@
         <section class="py-8 instance">
           <div class="container is-fluid">
             <!-- new listings -->
-            <!-- <LazyCarouselTypeNewestList /> -->
+            <LazyCarouselTypeNewestList />
 
             <!-- latest sales -->
-            <!-- <LazyCarouselTypeLatestSales class="mt-8" /> -->
+            <LazyCarouselTypeLatestSales class="mt-8" />
 
             <!-- generative  -->
-            <!-- <LazyCarouselTypeGenerative class="mt-8" /> -->
+            <LazyCarouselTypeGenerative class="mt-8" />
           </div>
         </section>
       </ClientOnly>
@@ -62,13 +62,7 @@ import CarouselTypeSpotlight from '@/components/carousel/CarouselTypeSpotlight.v
 import { usePreferencesStore } from '@/stores/preferences'
 
 const hiddenCarrouselPrefixes: Prefix[] = ['dot']
-const forbiddenPrefixesForTopCollections: Prefix[] = [
-  'ksm',
-  // 'ahk',
-  // 'ahp',
-  'dot',
-  // 'ahr',
-]
+const forbiddenPrefixesForTopCollections: Prefix[] = ['ksm', 'dot']
 
 const { urlPrefix } = usePrefix()
 const { isAssetHub } = useIsChain(urlPrefix)

From 33bb62b9774adf804e5f6569896fbf0735742823 Mon Sep 17 00:00:00 2001
From: roiLeo <medina.leo42@gmail.com>
Date: Fri, 15 Dec 2023 12:00:24 +0100
Subject: [PATCH 54/65] =?UTF-8?q?=F0=9F=94=A7=20USD=20value?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../landing/topCollections/TopCollectionsItem.vue | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/components/landing/topCollections/TopCollectionsItem.vue b/components/landing/topCollections/TopCollectionsItem.vue
index 4463b7c940..e11dab8d41 100644
--- a/components/landing/topCollections/TopCollectionsItem.vue
+++ b/components/landing/topCollections/TopCollectionsItem.vue
@@ -46,7 +46,11 @@
             <CommonTokenMoney :value="volume" inline :round="2" />
           </div>
           <div class="no-wrap is-hidden-mobile">
-            <BasicMoney :value="usdValue" inline :unit="'USD'" :round="0" />
+            <BasicMoney
+              :value="usdValue"
+              inline
+              hide-unit
+              :round="0" />&nbsp;USD
           </div>
 
           <div class="is-hidden-tablet is-size-7 no-wrap">
@@ -70,10 +74,8 @@
 
 <script lang="ts" setup>
 import { TimeRange } from '@/components/series/types'
-import { calculateUsdFromToken } from '@/utils/calculation'
 import { CollectionEntityWithVolumes } from './utils/types'
 import { getChainNameByPrefix } from '@/utils/chain'
-import { useFiatStore } from '@/stores/fiat'
 
 const BasicImage = defineAsyncComponent(
   () => import('@/components/shared/view/BasicImage.vue'),
@@ -89,7 +91,7 @@ const BasicMoney = defineAsyncComponent(
 
 const { urlPrefix } = usePrefix()
 const { placeholder } = useTheme()
-const fiatStore = useFiatStore()
+const { toUsdPrice } = useUsdValue()
 const props = defineProps<{
   collection: CollectionEntityWithVolumes
   index: number
@@ -146,9 +148,8 @@ const diffPercentString = computed(() => {
   return `${sign.value} ${Math.abs(Math.round(diffPercent.value))}%`
 })
 
-const usdValue = computed(() =>
-  calculateUsdFromToken(volume.value, fiatStore.getCurrentKSMValue as number),
-)
+const usdValue = computed(() => toUsdPrice(volume.value, chainName))
+// calculateUsdFromToken(volume.value, fiatStore.getCurrentKSMValue as number),
 
 const color = computed(() => {
   if (diffPercent.value) {

From 24417ed824e089449db5eabbd494a31225bbc867 Mon Sep 17 00:00:00 2001
From: roiLeo <medina.leo42@gmail.com>
Date: Fri, 15 Dec 2023 14:27:35 +0100
Subject: [PATCH 55/65] =?UTF-8?q?=F0=9F=94=A7=20topCollection=20from=20pre?=
 =?UTF-8?q?fix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/landing/LandingPage.vue            |  4 +-
 .../topCollections/TopCollectionsAh.vue       | 84 ----------------
 .../topCollections/TopCollectionsItem.vue     |  1 -
 .../topCollections/utils/useTopCollections.ts |  7 +-
 .../utils/useTopCollectionsAh.ts              | 98 -------------------
 5 files changed, 5 insertions(+), 189 deletions(-)
 delete mode 100644 components/landing/topCollections/TopCollectionsAh.vue
 delete mode 100644 components/landing/topCollections/utils/useTopCollectionsAh.ts

diff --git a/components/landing/LandingPage.vue b/components/landing/LandingPage.vue
index 0e6946fc07..a8f0eb083d 100644
--- a/components/landing/LandingPage.vue
+++ b/components/landing/LandingPage.vue
@@ -25,8 +25,7 @@
       <!-- top collections -->
       <section v-if="showTopCollections" class="py-8 instance">
         <div class="container is-fluid">
-          <LandingTopCollectionsAh v-if="isAssetHub" class="my-5" />
-          <LandingTopCollections v-else class="my-5" />
+          <LandingTopCollections class="my-5" />
         </div>
       </section>
 
@@ -65,7 +64,6 @@ const hiddenCarrouselPrefixes: Prefix[] = ['dot']
 const forbiddenPrefixesForTopCollections: Prefix[] = ['ksm', 'dot']
 
 const { urlPrefix } = usePrefix()
-const { isAssetHub } = useIsChain(urlPrefix)
 const preferencesStore = usePreferencesStore()
 const { width } = useWindowSize()
 
diff --git a/components/landing/topCollections/TopCollectionsAh.vue b/components/landing/topCollections/TopCollectionsAh.vue
deleted file mode 100644
index c5c3dfdcbc..0000000000
--- a/components/landing/topCollections/TopCollectionsAh.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div>
-    <div class="is-flex is-justify-content-space-between mobile">
-      <div class="title is-2">{{ $t('general.topCollectionsHeading') }}</div>
-      <div
-        class="top-collection-controls buttons is-align-items-flex-start pt-2">
-        <NeoButton
-          v-for="{ value, label } in timeRanges"
-          :key="value"
-          class="control column p-0 has-fixed-width px-4 mobile-padding"
-          :active="state.timeRange === value"
-          :label="`${$t(`topCollections.timeFrames.${label}`)}`"
-          @click="setTimeRange(value)" />
-      </div>
-      <div></div>
-    </div>
-
-    <div class="top-collections-grid mb-5">
-      <div v-for="(collection, index) in data" :key="index">
-        <TopCollectionsItem
-          :collection="collection"
-          :index="index + 1"
-          :time-range="state.timeRange" />
-      </div>
-    </div>
-
-    <div v-if="loading" class="top-collections-grid">
-      <div
-        v-for="index in limit"
-        :key="index"
-        class="top-collections-item py-2 is-flex is-align-items-center is-justify-content-space-between">
-        <div class="is-flex is-align-items-center">
-          <div class="p-4 has-text-weight-bold">
-            {{ index }}
-          </div>
-          <div>
-            <BasicImage custom-class="is-48x48 image-outline" rounded />
-          </div>
-        </div>
-        <div class="px-2" style="width: 60%">
-          <NeoSkeleton width="70%" />
-          <NeoSkeleton width="20%" size="small" />
-        </div>
-        <div class="is-pulled-right has-text-right px-4" style="width: 20%">
-          <NeoSkeleton width="80%" position="right" />
-          <NeoSkeleton width="70%" size="small" position="right" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { TimeRange, TimeRangeOption } from '@/components/series/types'
-import BasicImage from '@/components/shared/view/BasicImage.vue'
-import { NeoButton, NeoSkeleton } from '@kodadot1/brick'
-import TopCollectionsItem from './TopCollectionsItem.vue'
-import { useTopCollections } from './utils/useTopCollectionsAh'
-import { useFiatStore } from '@/stores/fiat'
-
-const fiatStore = useFiatStore()
-
-const limit = 12
-const { data, loading } = useTopCollections(limit)
-
-const state = reactive<{ timeRange: TimeRange }>({ timeRange: 'All' })
-
-const timeRanges: TimeRangeOption[] = [
-  // { value: 'Week', label: 'week' },
-  // { value: 'Month', label: 'month' },
-  // { value: 'Quarter', label: 'quarter' },
-  { value: 'All', label: 'all' },
-]
-
-const setTimeRange = (timeRange: TimeRange) => {
-  state.timeRange = timeRange
-}
-
-onMounted(() => {
-  if (fiatStore.getCurrentKSMValue) {
-    fiatStore.fetchFiatPrice()
-  }
-})
-</script>
diff --git a/components/landing/topCollections/TopCollectionsItem.vue b/components/landing/topCollections/TopCollectionsItem.vue
index e11dab8d41..55896bed16 100644
--- a/components/landing/topCollections/TopCollectionsItem.vue
+++ b/components/landing/topCollections/TopCollectionsItem.vue
@@ -149,7 +149,6 @@ const diffPercentString = computed(() => {
 })
 
 const usdValue = computed(() => toUsdPrice(volume.value, chainName))
-// calculateUsdFromToken(volume.value, fiatStore.getCurrentKSMValue as number),
 
 const color = computed(() => {
   if (diffPercent.value) {
diff --git a/components/landing/topCollections/utils/useTopCollections.ts b/components/landing/topCollections/utils/useTopCollections.ts
index ed9b5e5c01..522c082a18 100644
--- a/components/landing/topCollections/utils/useTopCollections.ts
+++ b/components/landing/topCollections/utils/useTopCollections.ts
@@ -17,6 +17,7 @@ import {
   TopCollectionListResult,
 } from './types'
 import topCollectionList from '@/queries/subsquid/general/topCollectionList.graphql'
+import topCollectionsListAh from '@/queries/subsquid/general/topCollections.graphql'
 import collectionsSales from '@/queries/subsquid/general/collectionsSales.graphql'
 
 const proccessData = (
@@ -45,7 +46,8 @@ const proccessData = (
 }
 
 export const useTopCollections = (limit: number) => {
-  const { client } = usePrefix()
+  const { client, urlPrefix } = usePrefix()
+  const { isAssetHub } = useIsChain(urlPrefix)
   const topCollectionWithVolumeList = useState<CollectionEntityWithVolumes[]>(
     'topCollectionWithVolumeList',
     () => [],
@@ -53,9 +55,8 @@ export const useTopCollections = (limit: number) => {
   const error = ref(null)
   // const loading = ref(false)
   const collectionsSalesResults = ref<CollectionsSalesResult>()
-
   const { result: topCollections, loading } = useQuery(
-    topCollectionList,
+    isAssetHub.value ? topCollectionsListAh : topCollectionList,
     { orderBy: 'volume_DESC', limit },
     { clientId: client.value },
   )
diff --git a/components/landing/topCollections/utils/useTopCollectionsAh.ts b/components/landing/topCollections/utils/useTopCollectionsAh.ts
deleted file mode 100644
index a9e7cd0b67..0000000000
--- a/components/landing/topCollections/utils/useTopCollectionsAh.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import { sanitizeIpfsUrl } from '@/utils/ipfs'
-import {
-  calculateAvgPrice,
-  monthlyVolume,
-  monthlyrangeVolume,
-  threeMonthRangeVolume,
-  threeMonthlyVolume,
-  volume,
-  weeklyVolume,
-  weeklyrangeVolume,
-} from '@/components/series/utils'
-import {
-  CollectionEntity,
-  CollectionEntityWithVolumes,
-  CollectionSales,
-  CollectionsSalesResult,
-  TopCollectionListResult,
-} from './types'
-import topCollectionsList from '@/queries/subsquid/general/topCollections.graphql'
-import collectionsSales from '@/queries/subsquid/general/collectionsSales.graphql'
-
-const proccessData = (
-  collectionsList: CollectionEntity[],
-  collectionsSales: CollectionSales[],
-) => {
-  return collectionsList.map((e): CollectionEntityWithVolumes => {
-    const thisCollectionSales = collectionsSales.find(
-      ({ id }) => id === e.id,
-    ) as CollectionSales
-    const saleEvents = thisCollectionSales.sales.map((nft) => nft.events).flat()
-
-    return {
-      ...e,
-      image: sanitizeIpfsUrl(e.image),
-      averagePrice: calculateAvgPrice(e.volume as string, e.buys),
-      volume: volume(saleEvents),
-      weeklyVolume: weeklyVolume(saleEvents),
-      monthlyVolume: monthlyVolume(saleEvents),
-      threeMonthVolume: threeMonthlyVolume(saleEvents),
-      weeklyrangeVolume: weeklyrangeVolume(saleEvents),
-      monthlyrangeVolume: monthlyrangeVolume(saleEvents),
-      threeMonthlyrangeVolume: threeMonthRangeVolume(saleEvents),
-    }
-  })
-}
-
-export const useTopCollections = (limit: number) => {
-  const { client } = usePrefix()
-  const topCollectionWithVolumeList = useState<CollectionEntityWithVolumes[]>(
-    'topCollectionWithVolumeList',
-    () => [],
-  )
-  const error = ref(null)
-  // const loading = ref(false)
-  const collectionsSalesResults = ref<CollectionsSalesResult>()
-
-  const { result: topCollections, loading } = useQuery(
-    topCollectionsList,
-    { limit },
-    { clientId: client.value },
-  )
-
-  watch([topCollections, error], () => {
-    if (error.value) {
-      loading.value = false
-      return
-    }
-    if (topCollections.value) {
-      const ids = (
-        topCollections.value as TopCollectionListResult
-      ).collectionEntities.map((c) => c.id)
-
-      const { onResult } = useQuery(
-        collectionsSales,
-        { ids },
-        { clientId: client.value },
-      )
-      onResult((result) => (collectionsSalesResults.value = result.data))
-    }
-  })
-
-  watch(collectionsSalesResults, () => {
-    if (collectionsSalesResults.value) {
-      const collectionsList = (topCollections.value as TopCollectionListResult)
-        .collectionEntities
-      topCollectionWithVolumeList.value = proccessData(
-        collectionsList,
-        collectionsSalesResults.value.collectionsSales,
-      )
-    }
-  })
-
-  return {
-    data: topCollectionWithVolumeList,
-    error,
-    loading,
-  }
-}

From 877d849ac97c12e7fb6ca198303bf5fd805c50d8 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Sat, 16 Dec 2023 12:22:40 +0500
Subject: [PATCH 56/65] ref: reduce duplicate translation keys

---
 components/collection/drop/AddFundsModal.vue  | 23 +++---
 .../autoTeleport/AutoTeleportActionButton.vue | 11 +--
 .../common/autoTeleport/AutoTeleportModal.vue | 34 ++++-----
 components/common/autoTeleport/utils.ts       | 72 +++++++++++++++++++
 locales/en.json                               | 49 +++++--------
 5 files changed, 118 insertions(+), 71 deletions(-)
 create mode 100644 components/common/autoTeleport/utils.ts

diff --git a/components/collection/drop/AddFundsModal.vue b/components/collection/drop/AddFundsModal.vue
index b2574e8278..2f22dfc1b9 100644
--- a/components/collection/drop/AddFundsModal.vue
+++ b/components/collection/drop/AddFundsModal.vue
@@ -62,7 +62,7 @@
           ref="autoteleport"
           :amount="minimumFunds"
           :hide-top="!canAutoTeleport"
-          interaction="generative_drop"
+          :interaction="interaction"
           @modal:close="handleModalClose" />
       </div>
     </ModalBody>
@@ -74,22 +74,19 @@ import { NeoIcon, NeoModal, NeoTooltip } from '@kodadot1/brick'
 import ModalBody from '@/components/shared/modals/ModalBody.vue'
 import AutoTeleportActionButton from '@/components/common/autoTeleport/AutoTeleportActionButton.vue'
 import ModalIdentityItem from '@/components/shared/ModalIdentityItem.vue'
+import { ActionlessInteraction } from '@/components/common/autoTeleport/utils'
 
 const emit = defineEmits(['confirm', 'update:modelValue'])
-withDefaults(
-  defineProps<{
-    modelValue: boolean
-    minimumFunds: number
-    formattedMinimumFunds: string
-    token: string
-    chain: string
-  }>(),
-  {
-    modelValue: false,
-  },
-)
+defineProps<{
+  modelValue: boolean
+  minimumFunds: number
+  formattedMinimumFunds: string
+  token: string
+  chain: string
+}>()
 
 const autoteleport = ref()
+const interaction = ActionlessInteraction.FREE_DROP // Check drop type
 
 const canAutoTeleport = computed(() => autoteleport.value?.canAutoTeleport)
 const loading = computed(() => !autoteleport.value?.hasBalances)
diff --git a/components/common/autoTeleport/AutoTeleportActionButton.vue b/components/common/autoTeleport/AutoTeleportActionButton.vue
index 633e7cbe9d..0018314861 100644
--- a/components/common/autoTeleport/AutoTeleportActionButton.vue
+++ b/components/common/autoTeleport/AutoTeleportActionButton.vue
@@ -78,6 +78,7 @@ import type {
   AutoTeleportAction,
   AutoTeleportFeeParams,
 } from '@/composables/autoTeleport/types'
+import { ActionlessInteraction, getActionDetails } from './utils'
 
 export type AutoTeleportActionButtonConfirmEvent = {
   autoteleport: boolean
@@ -98,7 +99,7 @@ const props = withDefaults(
     actions?: AutoTeleportAction[]
     fees?: AutoTeleportFeeParams
     autoCloseModal: boolean
-    interaction?: string
+    interaction?: ActionlessInteraction
     hideTop?: boolean
   }>(),
   {
@@ -181,11 +182,11 @@ const hasNoFundsAtAll = computed(
   () => !hasEnoughInCurrentChain.value && !hasEnoughInRichestChain.value,
 )
 
-const confirmButtonTitle = computed(() => {
+const confirmButtonTitle = computed<string>(() => {
   const interaction =
-    props.interaction ||
-    transactions.value.actions[0].interaction?.toLocaleLowerCase()
-  return $i18n.t(`autoTeleport.steps.${interaction}.confirm`)
+    props.interaction || transactions.value.actions[0].interaction
+
+  return getActionDetails(interaction)?.confirm || ''
 })
 
 const showAddFunds = computed(() => hasBalances.value && hasNoFundsAtAll.value)
diff --git a/components/common/autoTeleport/AutoTeleportModal.vue b/components/common/autoTeleport/AutoTeleportModal.vue
index fe48f8879c..b218d21e33 100644
--- a/components/common/autoTeleport/AutoTeleportModal.vue
+++ b/components/common/autoTeleport/AutoTeleportModal.vue
@@ -78,6 +78,7 @@ import TransactionSteps, {
 } from '@/components/shared/TransactionSteps/TransactionSteps.vue'
 import { TransactionStepStatus } from '@/components/shared/TransactionSteps/utils'
 import { type AutoTeleportTransactions } from '@/composables/autoTeleport/types'
+import { AutoTeleportInteractions, getActionDetails } from './utils'
 
 export type ActionDetails = {
   title: string
@@ -102,7 +103,7 @@ const props = withDefaults(
     transactions: AutoTeleportTransactions
     autoClose?: boolean
     autoCloseDelay?: number
-    interaction?: string
+    interaction?: AutoTeleportInteractions
   }>(),
   {
     autoClose: false,
@@ -131,15 +132,17 @@ const checkBalanceState = computed<TransactionStepStatus>(() => {
 })
 
 const mainInteraction = computed(
-  () =>
-    props.interaction ||
-    props.transactions.actions[0].interaction?.toLocaleLowerCase(),
+  () => props.interaction || props.transactions.actions[0].interaction,
 )
 
-const mainActionDetails = computed(() => ({
-  action: $i18n.t(`autoTeleport.steps.${mainInteraction.value}.action`),
-  item: $i18n.t(`autoTeleport.steps.${mainInteraction.value}.item`),
-}))
+const mainActionDetails = computed(() => {
+  const details = getActionDetails(mainInteraction.value)
+
+  return {
+    action: details.action,
+    item: details.item,
+  }
+})
 
 const steps = computed<TransactionStep[]>(() => {
   return [
@@ -163,9 +166,8 @@ const steps = computed<TransactionStep[]>(() => {
       },
     },
     props.transactions.actions.map((action) => {
-      const { title } = getActionDetails(action.interaction)
       return {
-        title,
+        title: getActionDetails(action.interaction)?.title,
         status: action.status.value,
         isError: action.isError.value,
         txId: action.txId.value,
@@ -202,7 +204,7 @@ const autoteleportFinalized = computed(() =>
   hasActions.value ? actionsFinalized.value : hasCompletedBalanceCheck.value,
 )
 
-const btnLabel = computed(() => {
+const btnLabel = computed<string>(() => {
   if (!hasActions.value && hasCompletedBalanceCheck.value) {
     return $i18n.t('redirect.continue')
   }
@@ -212,20 +214,12 @@ const btnLabel = computed(() => {
   }
 
   if (!actionsFinalized.value) {
-    return getActionDetails(activeStepInteraction.value).submit
+    return getActionDetails(activeStepInteraction.value)?.submit || ''
   }
 
   return $i18n.t('autoTeleport.close')
 })
 
-const getActionDetails = (interaction: string) => {
-  const i = interaction.toLocaleLowerCase()
-  return {
-    title: $i18n.t(`autoTeleport.steps.${i}.title`),
-    submit: $i18n.t(`autoTeleport.steps.${i}.submit`),
-  }
-}
-
 const FIRST_ACTION_STEP = 2
 const activeStepInteraction = computed(
   () =>
diff --git a/components/common/autoTeleport/utils.ts b/components/common/autoTeleport/utils.ts
new file mode 100644
index 0000000000..80a1411d25
--- /dev/null
+++ b/components/common/autoTeleport/utils.ts
@@ -0,0 +1,72 @@
+import { Interaction } from '@kodadot1/minimark/v1'
+import {
+  type ActionsInteractions,
+  Collections,
+} from '@/composables/transaction/types'
+
+export enum ActionlessInteraction {
+  FREE_DROP = 'FREE_DROP',
+}
+
+export type AutoTeleportInteractions =
+  | ActionsInteractions
+  | ActionlessInteraction
+
+type AutoTeleportStepDetails = {
+  confirm: string
+  action: string
+  item: string
+  title: string
+  submit: string
+}
+
+const interactionMap: {
+  [key in AutoTeleportInteractions]?: { action: string; item: string }
+} = {
+  [Interaction.BUY]: { action: 'purchase', item: 'general.nft' },
+  [Interaction.LIST]: { action: 'list', item: 'general.nfts' },
+  [Interaction.MINT]: { action: 'create', item: 'collection' },
+  [Interaction.MINTNFT]: { action: 'mint', item: 'general.nft' },
+  [Interaction.SEND]: { action: 'transfer', item: 'general.nft' },
+  [Collections.DELETE]: { action: 'delete', item: 'collection' },
+  [Interaction.CONSUME]: { action: 'burn', item: 'general.nft' },
+  [ActionlessInteraction.FREE_DROP]: {
+    action: 'drops.claimFree',
+    item: 'general.nft',
+  },
+}
+
+const getTransalationKey = (
+  interaction: AutoTeleportInteractions,
+): { item: string; action: string } => {
+  const { action, item } = interactionMap[interaction] || {
+    action: '',
+    item: '',
+  }
+
+  return {
+    action,
+    item,
+  }
+}
+
+export const getActionDetails = (
+  interaction: AutoTeleportInteractions,
+): AutoTeleportStepDetails => {
+  const { $i18n } = useNuxtApp()
+  const getTranslation = (key: string) => $i18n.t(key) || ''
+
+  const { action, item } = getTransalationKey(interaction)
+
+  const i = interaction.toLocaleLowerCase()
+
+  const title = getTranslation(`autoTeleport.steps.${i}.title`)
+
+  return {
+    confirm: getTranslation(`autoTeleport.steps.${i}.confirm`),
+    action: getTranslation(action),
+    item: getTranslation(item),
+    title: title,
+    submit: `${title}...`,
+  }
+}
diff --git a/locales/en.json b/locales/en.json
index 8560802af5..b4bc9b5279 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -11,6 +11,9 @@
   "collections": "Collections",
   "items": "Items",
   "users": "Users",
+  "burn": "Burn",
+  "purchase":"Purchase",
+  "delete": "Delete",
   "bridging": "Bridging",
   "recent": "Recent",
   "user": "User",
@@ -937,6 +940,8 @@
   },
   "tutorial": "Tutorial",
   "general": {
+    "nft": "NFT",
+    "nfts": "NFT(s)",
     "apply": "Apply",
     "resetAll": "Reset All",
     "filters": "Filters",
@@ -1449,7 +1454,8 @@
     "viewNft": "View NFT",
     "listNft": "List NFT",
     "canList": "NFT ready for listing!",
-    "teleportRequiredAmount": "Teleport required amount"
+    "teleportRequiredAmount": "Teleport required amount",
+    "claimFree": "Claim free"
   },
   "confirmPurchase": {
     "action": "Confirm Purchase",
@@ -1633,57 +1639,34 @@
       },
       "buy": {
         "confirm": "Teleport And Confirm Purchase",
-        "action": "Purchase",
-        "item": "NFT",
-        "title": "Buying NFT",
-        "submit": "Buying NFT..."
+        "title": "Buying NFT"
       },
       "list": {
         "confirm": "Teleport And Confirm Listing(s)",
-        "action": "List",
-        "item": "NFT(s)",
-        "title": "Listing NFT",
-        "submit": "Listing NFT..."
+        "title": "Listing NFT"
       },
       "mint": {
         "confirm": "Teleport and Create Collection",
-        "action": "Create",
-        "item": "Collection",
-        "title": "Minting NFT Collection",
-        "submit": "Minting NFT Collection..."
+        "title": "Minting NFT Collection"
       },
-      "generative_drop": {
-        "confirm": "Teleport required amount",
-        "action": "Claim free",
-        "item": "NFT"
+      "free_drop": {
+        "confirm": "Teleport required amount"
       },
       "mintnft": {
         "confirm": "Teleport and Mint NFT",
-        "action": "Mint",
-        "item": "NFT",
-        "title": "Minting NFT",
-        "submit": "Minting NFT..."
+        "title": "Minting NFT"
       },
       "send": {
         "confirm": "Teleport and Transfer NFT",
-        "action": "Transfer",
-        "item": "NFT",
-        "title": "Transferring NFT",
-        "submit": "Transferring NFT..."
+        "title": "Transferring NFT"
       },
       "delete": {
         "confirm": "Teleport and Delete Collection",
-        "action": "Delete",
-        "item": "Collection",
-        "title": "Deleting Collection",
-        "submit": "Deleting Collection..."
+        "title": "Deleting Collection"
       },
       "consume": {
         "confirm": "Teleport and Burn NFT",
-        "action": "Burn",
-        "item": "NFT",
-        "title": "Burning NFT",
-        "submit": "Burning NFT..."
+        "title": "Burning NFT"
       }
     }
   },

From 574c0a02d35cf6649572d282bb1e134d8dfe40b5 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Sat, 16 Dec 2023 15:21:51 +0500
Subject: [PATCH 57/65] add: new add funds modal for holder of generative

---
 components/collection/drop/AddFundsModal.vue  | 27 +++++++----
 components/collection/drop/Generative.vue     | 37 ++++-----------
 .../collection/drop/HolderOfGenerative.vue    | 45 +++++++++----------
 components/common/autoTeleport/utils.ts       |  5 +++
 components/drops/useDrops.ts                  | 40 +++++++++++++++++
 locales/en.json                               |  6 ++-
 6 files changed, 97 insertions(+), 63 deletions(-)

diff --git a/components/collection/drop/AddFundsModal.vue b/components/collection/drop/AddFundsModal.vue
index 2f22dfc1b9..e765128a35 100644
--- a/components/collection/drop/AddFundsModal.vue
+++ b/components/collection/drop/AddFundsModal.vue
@@ -77,16 +77,27 @@ import ModalIdentityItem from '@/components/shared/ModalIdentityItem.vue'
 import { ActionlessInteraction } from '@/components/common/autoTeleport/utils'
 
 const emit = defineEmits(['confirm', 'update:modelValue'])
-defineProps<{
-  modelValue: boolean
-  minimumFunds: number
-  formattedMinimumFunds: string
-  token: string
-  chain: string
-}>()
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    minimumFunds: number
+    formattedMinimumFunds: string
+    token: string
+    chain: string
+    free: boolean
+  }>(),
+  {
+    free: false,
+  },
+)
 
 const autoteleport = ref()
-const interaction = ActionlessInteraction.FREE_DROP // Check drop type
+const interaction = computed(() => {
+  //tmp solution till drop type check is fixed
+  return props.free
+    ? ActionlessInteraction.FREE_DROP
+    : ActionlessInteraction.DROP
+})
 
 const canAutoTeleport = computed(() => autoteleport.value?.canAutoTeleport)
 const loading = computed(() => !autoteleport.value?.hasBalances)
diff --git a/components/collection/drop/Generative.vue b/components/collection/drop/Generative.vue
index a0646e0ca8..6d7da7b56b 100644
--- a/components/collection/drop/Generative.vue
+++ b/components/collection/drop/Generative.vue
@@ -60,9 +60,9 @@
                   <NeoIcon icon="circle-info" class="mr-3" />
                   <div
                     v-dompurify-html="
-                      $t('mint.unlockable.minimumFundsDescription', [
+                      $t('mint.unlockable.freeMinimumFundsDescription', [
                         formattedMinimumFunds,
-                        chain,
+                        chainName,
                       ])
                     "
                     class="minimum-funds-description" />
@@ -117,7 +117,8 @@
     :minimum-funds="minimumFunds"
     :formatted-minimum-funds="formattedMinimumFunds"
     :token="token"
-    :chain="chain"
+    :chain="chainName"
+    free
     @close="closeAddFundModal"
     @confirm="handleDropAddModalConfirm" />
 
@@ -134,7 +135,7 @@ import { createUnlockableMetadata } from '../unlockable/utils'
 import GenerativePreview from '@/components/collection/drop/GenerativePreview.vue'
 import { DropItem } from '@/params/types'
 import { DoResult, doWaifu } from '@/services/waifu'
-import { useDropStatus } from '@/components/drops/useDrops'
+import { useDropMinimumFunds, useDropStatus } from '@/components/drops/useDrops'
 import { makeScreenshot } from '@/services/capture'
 import { pinFileToIPFS } from '@/services/nftStorage'
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
@@ -144,7 +145,6 @@ import DropConfirmModal from './modal/DropConfirmModal.vue'
 import ListingCartModal from '@/components/common/listingCart/ListingCartModal.vue'
 import { nftToListingCartItem } from '@/components/common/shoppingCart/utils'
 import { fetchNft } from '@/components/items/ItemsGrid/useNftActions'
-import { existentialDeposit } from '@kodadot1/static'
 
 const NuxtLink = resolveComponent('NuxtLink')
 const MINTING_SECOND = 120
@@ -169,15 +169,16 @@ const listingCartStore = useListingCartStore()
 const preferencesStore = usePreferencesStore()
 
 const { $i18n } = useNuxtApp()
-const { decimals, chainSymbol } = useChain()
 const { toast } = useToast()
 const { accountId, isLogIn } = useAuth()
 const { urlPrefix } = usePrefix()
+const { name: chainName } = useChain()
 const { currentAccountMintedToken, mintedDropCount, fetchDropStatus } =
   useDropStatus(props.drop.alias)
 const { doAfterLogin } = useDoAfterlogin(instance)
 const { fetchMultipleBalance } = useMultipleBalance()
-const { chainBalances, chain: currentChain } = useTeleport()
+const { hasMinimumFunds, formattedMinimumFunds, minimumFunds } =
+  useDropMinimumFunds(props.drop)
 
 const isWalletConnecting = ref(false)
 const root = ref()
@@ -189,33 +190,12 @@ const isAddFundModalActive = ref(false)
 const mintedNft = ref<DropMintedNft>()
 const mintedNftWithMetadata = ref<NFTWithMetadata>()
 
-const chain = computed(() => urlPrefix.value.toUpperCase())
 const collectionId = computed(() => props.drop?.collection)
 const disabledByBackend = computed(() => props.drop?.disabled)
 const defaultImage = computed(() => props.drop?.image)
 const defaultName = computed(() => props.drop?.name)
 const defaultMax = computed(() => props.drop?.max || 255)
 const token = computed(() => prefixToToken[props.drop.chain])
-const currentChainBalance = computed(
-  () =>
-    (currentChain.value && Number(chainBalances[currentChain.value]())) || 0,
-)
-const minimumFunds = computed<number>(() => props.drop.meta || 0)
-
-const { formatted: formattedMinimumFunds } = useAmount(
-  computed(() => props.drop.meta || 0),
-  decimals,
-  chainSymbol,
-  2,
-)
-
-const transferableDropChainBalance = computed(
-  () => currentChainBalance.value - existentialDeposit[urlPrefix.value],
-)
-
-const hasMinimumFunds = computed(
-  () => transferableDropChainBalance.value >= minimumFunds.value,
-)
 
 const { data: collectionData } = useGraphql({
   queryName: 'unlockableCollectionById',
@@ -431,7 +411,6 @@ const handleDropAddModalConfirm = () => {
   fetchMultipleBalance([urlPrefix.value])
 }
 
-onBeforeMount(fetchMultipleBalance)
 onBeforeUnmount(clear)
 </script>
 
diff --git a/components/collection/drop/HolderOfGenerative.vue b/components/collection/drop/HolderOfGenerative.vue
index ab65c5fb21..4914941981 100644
--- a/components/collection/drop/HolderOfGenerative.vue
+++ b/components/collection/drop/HolderOfGenerative.vue
@@ -68,7 +68,8 @@
                   <div
                     v-dompurify-html="
                       $t('mint.unlockable.minimumFundsDescription', [
-                        `${minimumFunds} ${token}`,
+                        formattedMinimumFunds,
+                        chainName,
                       ])
                     "
                     class="minimum-funds-description" />
@@ -108,8 +109,11 @@
   <CollectionDropAddFundsModal
     v-model="isAddFundModalActive"
     :minimum-funds="minimumFunds"
+    :formatted-minimum-funds="formattedMinimumFunds"
     :token="token"
-    @close="isAddFundModalActive = false" />
+    :chain="chainName"
+    @close="closeAddFundModal"
+    @confirm="handleDropAddModalConfirm" />
 </template>
 
 <script setup lang="ts">
@@ -122,17 +126,11 @@ import { createUnlockableMetadata } from '../unlockable/utils'
 import GenerativePreview from '@/components/collection/drop/GenerativePreview.vue'
 import { DropItem } from '@/params/types'
 import { DoResult, claimDropItem } from '@/services/waifu'
-import { useDropStatus } from '@/components/drops/useDrops'
+import { useDropMinimumFunds, useDropStatus } from '@/components/drops/useDrops'
 import { makeScreenshot } from '@/services/capture'
 import { pinFileToIPFS } from '@/services/nftStorage'
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
-import { formatBsxBalanceToNumber } from '@/utils/format/balance'
 import { prefixToToken } from '@/components/common/shoppingCart/utils'
-import { useIdentityStore } from '@/stores/identity'
-import {
-  DOT_EXISTENTIAL_DEPOSIT,
-  KSM_EXISTENTIAL_DEPOSIT,
-} from '@/components/collection/unlockable/const'
 import { fetchNft } from '@/components/items/ItemsGrid/useNftActions'
 import holderOfCollectionById from '@/queries/subsquid/general/holderOfCollectionById.graphql'
 import unlockableCollectionById from '@/queries/subsquid/general/unlockableCollectionById.graphql'
@@ -157,12 +155,10 @@ export type DropMintedNft = DoResult & {
   name: string
 }
 
-useMultipleBalance(true)
+const { fetchMultipleBalance } = useMultipleBalance()
 
-const minimumFunds = computed<number>(
-  () => (props.drop.meta && formatBsxBalanceToNumber(props.drop.meta)) || 0.2,
-)
-const store = useIdentityStore()
+const { hasMinimumFunds, formattedMinimumFunds, minimumFunds } =
+  useDropMinimumFunds(props.drop)
 
 const isWalletConnecting = ref(false)
 const collectionId = computed(() => props.drop?.collection)
@@ -177,6 +173,7 @@ const mintNftSN = ref('0')
 const { doAfterLogin } = useDoAfterlogin(instance)
 const { $i18n, $consola } = useNuxtApp()
 const root = ref()
+const { name: chainName } = useChain()
 const { urlPrefix } = usePrefix()
 const { toast } = useToast()
 const { accountId, isLogIn } = useAuth()
@@ -381,16 +378,7 @@ const handleSubmitMint = async () => {
     return false
   }
 
-  const dropChainBalance = Number(store.getAuthBalanceByChain(props.drop.chain))
-  const relayChainBalance = Number(
-    store.getAuthBalanceByRelayChain(props.drop.chain),
-  )
-  const existentialDeposit =
-    token.value === 'KSM' ? KSM_EXISTENTIAL_DEPOSIT : DOT_EXISTENTIAL_DEPOSIT
-  if (
-    dropChainBalance >= minimumFunds.value ||
-    relayChainBalance >= existentialDeposit + minimumFunds.value
-  ) {
+  if (hasMinimumFunds.value) {
     mintNft()
   } else {
     openAddFundModal()
@@ -401,6 +389,10 @@ const openAddFundModal = () => {
   isAddFundModalActive.value = true
 }
 
+const closeAddFundModal = () => {
+  isAddFundModalActive.value = false
+}
+
 const subscribeToMintedNft = (id: string, onReady: (data) => void) => {
   useSubscriptionGraphql({
     query: `nftEntityById(id: "${id}") {
@@ -457,6 +449,11 @@ const submitMint = async (sn: string) => {
     throw error
   }
 }
+
+const handleDropAddModalConfirm = () => {
+  closeAddFundModal()
+  fetchMultipleBalance([urlPrefix.value])
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/components/common/autoTeleport/utils.ts b/components/common/autoTeleport/utils.ts
index 80a1411d25..80c5e98d06 100644
--- a/components/common/autoTeleport/utils.ts
+++ b/components/common/autoTeleport/utils.ts
@@ -5,6 +5,7 @@ import {
 } from '@/composables/transaction/types'
 
 export enum ActionlessInteraction {
+  DROP = 'DROP',
   FREE_DROP = 'FREE_DROP',
 }
 
@@ -34,6 +35,10 @@ const interactionMap: {
     action: 'drops.claimFree',
     item: 'general.nft',
   },
+  [ActionlessInteraction.DROP]: {
+    action: 'drops.claim',
+    item: 'general.nft',
+  },
 }
 
 const getTransalationKey = (
diff --git a/components/drops/useDrops.ts b/components/drops/useDrops.ts
index f99eeece4f..89a25c2a0a 100644
--- a/components/drops/useDrops.ts
+++ b/components/drops/useDrops.ts
@@ -7,6 +7,7 @@ import {
   getDrops,
 } from '@/services/waifu'
 import unlockableCollectionById from '@/queries/subsquid/general/unlockableCollectionById.graphql'
+import { existentialDeposit } from '@kodadot1/static'
 
 export interface Drop {
   collection: CollectionWithMeta
@@ -83,3 +84,42 @@ export const useDropStatus = (id: string) => {
     fetchDropStatus,
   }
 }
+
+export const useDropMinimumFunds = (drop) => {
+  const { chainBalances, chain: currentChain } = useTeleport()
+  const { urlPrefix } = usePrefix()
+  const { decimals, chainSymbol } = useChain()
+  const { fetchMultipleBalance } = useMultipleBalance()
+
+  const meta = computed(() => drop.meta || 0)
+
+  const currentChainBalance = computed(
+    () =>
+      (currentChain.value && Number(chainBalances[currentChain.value]())) || 0,
+  )
+
+  const minimumFunds = computed<number>(() => meta.value)
+
+  const transferableDropChainBalance = computed(
+    () => currentChainBalance.value - existentialDeposit[urlPrefix.value],
+  )
+
+  const hasMinimumFunds = computed(
+    () => transferableDropChainBalance.value >= minimumFunds.value,
+  )
+
+  const { formatted: formattedMinimumFunds } = useAmount(
+    meta,
+    decimals,
+    chainSymbol,
+    2,
+  )
+
+  onBeforeMount(fetchMultipleBalance)
+
+  return {
+    minimumFunds,
+    hasMinimumFunds,
+    formattedMinimumFunds,
+  }
+}
diff --git a/locales/en.json b/locales/en.json
index 5f34ae781c..9afce75d0b 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -608,7 +608,8 @@
       "onlyOneExample": "Example Of Drop",
       "mintThisNft": "Mint This NFT",
       "seeYourNft": "See Your NFT",
-      "minimumFundsDescription": "Holding a Minimum of <strong>{0} on {1}</strong> in Your Wallet is Required for This Free Mint.",
+      "minimumFundsDescription": "Holding a Minimum of <strong>{0} on {1}</strong> in Your Wallet is Required",
+      "freeMinimumFundsDescription": "Holding a Minimum of <strong>{0} on {1}</strong> in Your Wallet is Required for This Free Mint.",
       "claimNftNow": "Claim NFT Now",
       "claimPaidNft": "Claim For {0}",
       "nftAlreadyMinted": "NFT Already Minted",
@@ -1458,7 +1459,8 @@
     "listNft": "List NFT",
     "canList": "NFT ready for listing!",
     "teleportRequiredAmount": "Teleport required amount",
-    "claimFree": "Claim free"
+    "claimFree": "Claim free",
+    "claim": "Claim"
   },
   "confirmPurchase": {
     "action": "Confirm Purchase",

From 35ce04ca326bdc64a2f77c3faae5bef58d86c5b3 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Sat, 16 Dec 2023 15:28:20 +0500
Subject: [PATCH 58/65] add: on chain name

---
 components/collection/drop/Generative.vue         | 2 ++
 components/collection/drop/HolderOfGenerative.vue | 2 ++
 locales/en.json                                   | 2 +-
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/collection/drop/Generative.vue b/components/collection/drop/Generative.vue
index 032d891f2c..6168d493b8 100644
--- a/components/collection/drop/Generative.vue
+++ b/components/collection/drop/Generative.vue
@@ -62,6 +62,7 @@
                     v-dompurify-html="
                       $t('mint.unlockable.minimumFundsDescription', [
                         `${minimumFunds} ${token}`,
+                        chainName,
                       ])
                     "
                     class="minimum-funds-description" />
@@ -186,6 +187,7 @@ const { toast } = useToast()
 const { accountId, isLogIn } = useAuth()
 
 const { urlPrefix } = usePrefix()
+const { name: chainName } = useChain()
 const selectedImage = ref<string>('')
 const isLoading = ref(false)
 const isImageFetching = ref(false)
diff --git a/components/collection/drop/HolderOfGenerative.vue b/components/collection/drop/HolderOfGenerative.vue
index ab65c5fb21..738deff243 100644
--- a/components/collection/drop/HolderOfGenerative.vue
+++ b/components/collection/drop/HolderOfGenerative.vue
@@ -69,6 +69,7 @@
                     v-dompurify-html="
                       $t('mint.unlockable.minimumFundsDescription', [
                         `${minimumFunds} ${token}`,
+                        chainName,
                       ])
                     "
                     class="minimum-funds-description" />
@@ -180,6 +181,7 @@ const root = ref()
 const { urlPrefix } = usePrefix()
 const { toast } = useToast()
 const { accountId, isLogIn } = useAuth()
+const { name: chainName } = useChain()
 
 const { client } = usePrefix()
 const selectedImage = ref<string>('')
diff --git a/locales/en.json b/locales/en.json
index bb31f07965..bd277c0dfb 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -604,7 +604,7 @@
       "onlyOneExample": "Example Of Drop",
       "mintThisNft": "Mint This NFT",
       "seeYourNft": "See Your NFT",
-      "minimumFundsDescription": "Holding a Minimum of <strong>{0}</strong> in Your Wallet is Required",
+      "minimumFundsDescription": "Holding a Minimum of <strong>{0} On {1}</strong> in Your Wallet is Required",
       "claimNftNow": "Claim NFT Now",
       "claimPaidNft": "Claim For {0}",
       "nftAlreadyMinted": "NFT Already Minted",

From 8c00ec08353f5c9b03fff868c57b81daa1b7f839 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Sat, 16 Dec 2023 15:46:29 +0500
Subject: [PATCH 59/65] fix: use drop chain

---
 components/collection/drop/Generative.vue         | 2 +-
 components/collection/drop/HolderOfGenerative.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/collection/drop/Generative.vue b/components/collection/drop/Generative.vue
index 6168d493b8..48ca7903ca 100644
--- a/components/collection/drop/Generative.vue
+++ b/components/collection/drop/Generative.vue
@@ -187,13 +187,13 @@ const { toast } = useToast()
 const { accountId, isLogIn } = useAuth()
 
 const { urlPrefix } = usePrefix()
-const { name: chainName } = useChain()
 const selectedImage = ref<string>('')
 const isLoading = ref(false)
 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 & {
diff --git a/components/collection/drop/HolderOfGenerative.vue b/components/collection/drop/HolderOfGenerative.vue
index 738deff243..011bd94eda 100644
--- a/components/collection/drop/HolderOfGenerative.vue
+++ b/components/collection/drop/HolderOfGenerative.vue
@@ -181,7 +181,6 @@ const root = ref()
 const { urlPrefix } = usePrefix()
 const { toast } = useToast()
 const { accountId, isLogIn } = useAuth()
-const { name: chainName } = useChain()
 
 const { client } = usePrefix()
 const selectedImage = ref<string>('')
@@ -196,6 +195,7 @@ const {
   status,
 } = useMetaTransaction()
 
+const chainName = computed(() => getChainName(props.drop.chain))
 const token = computed(() => prefixToToken[props.drop.chain])
 
 const mintedNft = ref<DropMintedNft>()

From bb4619ae22928084ee2cf2b4fb8c1241e59c0da0 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Sat, 16 Dec 2023 15:51:27 +0500
Subject: [PATCH 60/65] fix: use chain drop chain

---
 components/collection/drop/Generative.vue         | 2 +-
 components/collection/drop/HolderOfGenerative.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/collection/drop/Generative.vue b/components/collection/drop/Generative.vue
index 6d7da7b56b..be948edb08 100644
--- a/components/collection/drop/Generative.vue
+++ b/components/collection/drop/Generative.vue
@@ -172,7 +172,6 @@ const { $i18n } = useNuxtApp()
 const { toast } = useToast()
 const { accountId, isLogIn } = useAuth()
 const { urlPrefix } = usePrefix()
-const { name: chainName } = useChain()
 const { currentAccountMintedToken, mintedDropCount, fetchDropStatus } =
   useDropStatus(props.drop.alias)
 const { doAfterLogin } = useDoAfterlogin(instance)
@@ -195,6 +194,7 @@ const disabledByBackend = computed(() => props.drop?.disabled)
 const defaultImage = computed(() => props.drop?.image)
 const defaultName = computed(() => props.drop?.name)
 const defaultMax = computed(() => props.drop?.max || 255)
+const chainName = computed(() => getChainName(props.drop.chain))
 const token = computed(() => prefixToToken[props.drop.chain])
 
 const { data: collectionData } = useGraphql({
diff --git a/components/collection/drop/HolderOfGenerative.vue b/components/collection/drop/HolderOfGenerative.vue
index 4914941981..101c9b2b5b 100644
--- a/components/collection/drop/HolderOfGenerative.vue
+++ b/components/collection/drop/HolderOfGenerative.vue
@@ -173,7 +173,6 @@ const mintNftSN = ref('0')
 const { doAfterLogin } = useDoAfterlogin(instance)
 const { $i18n, $consola } = useNuxtApp()
 const root = ref()
-const { name: chainName } = useChain()
 const { urlPrefix } = usePrefix()
 const { toast } = useToast()
 const { accountId, isLogIn } = useAuth()
@@ -191,6 +190,7 @@ const {
   status,
 } = useMetaTransaction()
 
+const chainName = computed(() => getChainName(props.drop.chain))
 const token = computed(() => prefixToToken[props.drop.chain])
 
 const mintedNft = ref<DropMintedNft>()

From f8acfc73b6961c7fe37f44b8e2b37fe8c34b1878 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Sat, 16 Dec 2023 15:53:53 +0500
Subject: [PATCH 61/65] fix: uppercase

---
 locales/en.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/locales/en.json b/locales/en.json
index 9afce75d0b..87a98524c0 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -608,8 +608,8 @@
       "onlyOneExample": "Example Of Drop",
       "mintThisNft": "Mint This NFT",
       "seeYourNft": "See Your NFT",
-      "minimumFundsDescription": "Holding a Minimum of <strong>{0} on {1}</strong> in Your Wallet is Required",
-      "freeMinimumFundsDescription": "Holding a Minimum of <strong>{0} on {1}</strong> in Your Wallet is Required for This Free Mint.",
+      "minimumFundsDescription": "Holding a Minimum of <strong>{0} On {1}</strong> in Your Wallet is Required",
+      "freeMinimumFundsDescription": "Holding a Minimum of <strong>{0} On {1}</strong> in Your Wallet is Required for This Free Mint.",
       "claimNftNow": "Claim NFT Now",
       "claimPaidNft": "Claim For {0}",
       "nftAlreadyMinted": "NFT Already Minted",

From e3ceb8450edd50b695dea3f3e5fe3b8bf9c3e715 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Sat, 16 Dec 2023 15:58:15 +0500
Subject: [PATCH 62/65] removed: unused code

---
 stores/identity.ts | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/stores/identity.ts b/stores/identity.ts
index d44c0af207..9ea8d5cf7e 100644
--- a/stores/identity.ts
+++ b/stores/identity.ts
@@ -19,16 +19,6 @@ const DEFAULT_BALANCE_STATE = {
   // movr: '0',
 }
 
-const prefixToToken = {
-  ksm: 'KSM',
-  rmrk: 'KSM',
-  bsx: 'KSM',
-  ahk: 'KSM',
-  ahp: 'DOT',
-  dot: 'DOT',
-  ahr: 'ROC',
-}
-
 export interface IdentityMap {
   [address: string]: Registration
 }
@@ -135,14 +125,6 @@ export const useIdentityStore = defineStore('identity', {
         ? state.auth.balance[urlPrefix.value] || '0'
         : '0'
     },
-    getAuthBalanceByChain: (state) => (prefix: Prefix) => {
-      return state.auth.balance ? state.auth.balance[prefix] || '0' : '0'
-    },
-    getAuthBalanceByRelayChain: (state) => (prefix: Prefix) => {
-      const relayChain = prefixToToken[prefix] === 'DOT' ? 'dot' : 'ksm'
-
-      return state.auth.balance ? state.auth.balance[relayChain] || '0' : '0'
-    },
     getTotalUsd: (state) => {
       if (
         state.multiBalances &&

From f426f2ccdb9d01301f9743eb837dae51dabddaad Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Sat, 16 Dec 2023 16:18:54 +0500
Subject: [PATCH 63/65] fix: use chain properties

---
 components/drops/useDrops.ts | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/components/drops/useDrops.ts b/components/drops/useDrops.ts
index 89a25c2a0a..d2dc082c96 100644
--- a/components/drops/useDrops.ts
+++ b/components/drops/useDrops.ts
@@ -8,6 +8,7 @@ import {
 } from '@/services/waifu'
 import unlockableCollectionById from '@/queries/subsquid/general/unlockableCollectionById.graphql'
 import { existentialDeposit } from '@kodadot1/static'
+import { chainPropListOf } from '@/utils/config/chain.config'
 
 export interface Drop {
   collection: CollectionWithMeta
@@ -86,32 +87,30 @@ export const useDropStatus = (id: string) => {
 }
 
 export const useDropMinimumFunds = (drop) => {
-  const { chainBalances, chain: currentChain } = useTeleport()
+  const chainProperties = chainPropListOf(drop.chain)
+
+  const { chainBalances } = useTeleport()
   const { urlPrefix } = usePrefix()
-  const { decimals, chainSymbol } = useChain()
   const { fetchMultipleBalance } = useMultipleBalance()
 
+  const currentChain = computed(() => prefixToChainMap[drop.chain])
   const meta = computed(() => drop.meta || 0)
-
   const currentChainBalance = computed(
     () =>
       (currentChain.value && Number(chainBalances[currentChain.value]())) || 0,
   )
-
   const minimumFunds = computed<number>(() => meta.value)
-
   const transferableDropChainBalance = computed(
     () => currentChainBalance.value - existentialDeposit[urlPrefix.value],
   )
-
   const hasMinimumFunds = computed(
     () => transferableDropChainBalance.value >= minimumFunds.value,
   )
 
   const { formatted: formattedMinimumFunds } = useAmount(
     meta,
-    decimals,
-    chainSymbol,
+    computed(() => chainProperties.tokenDecimals),
+    computed(() => chainProperties.tokenSymbol),
     2,
   )
 

From 8dd058dc70051ab2108dc188c58e10b4d412a9bb Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Sat, 16 Dec 2023 16:40:31 +0500
Subject: [PATCH 64/65] fix: deepscan issue

---
 components/common/autoTeleport/AutoTeleportActionButton.vue | 2 +-
 components/common/autoTeleport/AutoTeleportModal.vue        | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/common/autoTeleport/AutoTeleportActionButton.vue b/components/common/autoTeleport/AutoTeleportActionButton.vue
index 0018314861..0331970950 100644
--- a/components/common/autoTeleport/AutoTeleportActionButton.vue
+++ b/components/common/autoTeleport/AutoTeleportActionButton.vue
@@ -186,7 +186,7 @@ const confirmButtonTitle = computed<string>(() => {
   const interaction =
     props.interaction || transactions.value.actions[0].interaction
 
-  return getActionDetails(interaction)?.confirm || ''
+  return getActionDetails(interaction).confirm
 })
 
 const showAddFunds = computed(() => hasBalances.value && hasNoFundsAtAll.value)
diff --git a/components/common/autoTeleport/AutoTeleportModal.vue b/components/common/autoTeleport/AutoTeleportModal.vue
index b218d21e33..9cbf1d075c 100644
--- a/components/common/autoTeleport/AutoTeleportModal.vue
+++ b/components/common/autoTeleport/AutoTeleportModal.vue
@@ -167,7 +167,7 @@ const steps = computed<TransactionStep[]>(() => {
     },
     props.transactions.actions.map((action) => {
       return {
-        title: getActionDetails(action.interaction)?.title,
+        title: getActionDetails(action.interaction).title,
         status: action.status.value,
         isError: action.isError.value,
         txId: action.txId.value,
@@ -214,7 +214,7 @@ const btnLabel = computed<string>(() => {
   }
 
   if (!actionsFinalized.value) {
-    return getActionDetails(activeStepInteraction.value)?.submit || ''
+    return getActionDetails(activeStepInteraction.value).submit
   }
 
   return $i18n.t('autoTeleport.close')

From 1103eb52d522866f26f745a575a433b1af1dd17b Mon Sep 17 00:00:00 2001
From: Matej yangwao <5887929+yangwao@users.noreply.github.com>
Date: Sat, 16 Dec 2023 14:57:55 +0100
Subject: [PATCH 65/65] Revert "feat: Drops requiring funds to enable
 auto-teleport"

---
 components/collection/drop/AddFundsModal.vue  | 167 +++++++++---------
 components/collection/drop/Generative.vue     |  99 ++++++-----
 .../collection/drop/HolderOfGenerative.vue    |  43 +++--
 components/collection/unlockable/const.ts     |   3 +
 .../autoTeleport/AutoTeleportActionButton.vue |  28 ++-
 .../common/autoTeleport/AutoTeleportModal.vue |  53 +++---
 components/common/autoTeleport/utils.ts       |  77 --------
 components/drops/useDrops.ts                  |  39 ----
 components/shared/format/Money.vue            |  12 +-
 .../useAutoTeleportTransitionDetails.ts       |  15 +-
 composables/useAmount.ts                      |  13 +-
 composables/useMultipleBalance.ts             |   2 +-
 locales/en.json                               |  52 +++---
 stores/identity.ts                            |  20 ++-
 utils/format/balance.ts                       |  12 --
 utils/teleport.ts                             |   6 +-
 16 files changed, 262 insertions(+), 379 deletions(-)
 delete mode 100644 components/common/autoTeleport/utils.ts

diff --git a/components/collection/drop/AddFundsModal.vue b/components/collection/drop/AddFundsModal.vue
index e765128a35..37a2c03664 100644
--- a/components/collection/drop/AddFundsModal.vue
+++ b/components/collection/drop/AddFundsModal.vue
@@ -8,114 +8,117 @@
     <ModalBody
       :title="$t('mint.unlockable.addFundsModal.title')"
       :scrollable="false"
-      :loading="loading"
       @close="onClose">
-      <ModalIdentityItem class="mb-5" />
-
+      <div
+        class="rounded border shade-border-color is-flex is-justify-content-start is-flex-grow-1 pl-3 mb-6">
+        <IdentityItem
+          :label="$t('confirmPurchase.connectedWith')"
+          hide-identity-popover
+          disable-identity-link
+          :prefix="urlPrefix"
+          :account="accountId"
+          class="identity-name-font-weight-regular"
+          data-testid="item-creator" />
+      </div>
       <p
         v-dompurify-html="
           $t('mint.unlockable.addFundsModal.textP1', [
-            formattedMinimumFunds,
-            chain,
+            `${minimumFunds} ${token}`,
           ])
         "
         class="mb-4" />
-      <template v-if="!canAutoTeleport">
-        <p class="mb-4">{{ $t('mint.unlockable.addFundsModal.textP2') }}</p>
-        <NeoTooltip multiline multiline-width="256px" content-class="p-4">
-          <div
-            class="is-flex is-justify-items-space-between is-align-items-center has-text-grey add-funds-note">
-            <NeoIcon icon="circle-info" class="mr-3" />
-            <p class="is-size-7">
-              {{ $t('mint.unlockable.addFundsModal.howToAddFunds') }}
-            </p>
-          </div>
-          <template #content>
-            <h3 class="tooltip__title">
-              {{ $t('mint.unlockable.addFundsModal.tooltip.title', [token]) }}
-            </h3>
-            <p
-              v-dompurify-html="
-                $t('mint.unlockable.addFundsModal.tooltip.onramp', [token])
-              "
-              class="tooltip__text mb-2" />
-            <p
-              v-dompurify-html="
-                $t('mint.unlockable.addFundsModal.tooltip.exchange')
-              "
-              class="tooltip__text mb-2"></p>
-
-            <p
-              v-dompurify-html="
-                $t('mint.unlockable.addFundsModal.tooltip.transfer', [token])
-              "
-              class="tooltip__text mb-6" />
-            <p class="tooltip__note has-text-grey">
-              {{ $t('mint.unlockable.addFundsModal.tooltip.note') }}
-            </p>
-          </template>
-        </NeoTooltip>
-      </template>
-
+      <p class="mb-4">{{ $t('mint.unlockable.addFundsModal.textP2') }}</p>
+      <NeoTooltip multiline multiline-width="256px" content-class="p-4">
+        <div
+          class="is-flex is-justify-items-space-between is-align-items-center has-text-grey add-funds-note">
+          <NeoIcon icon="circle-info" class="mr-3" />
+          <p class="is-size-7">
+            {{ $t('mint.unlockable.addFundsModal.howToAddFunds') }}
+          </p>
+        </div>
+        <template #content>
+          <h3 class="tooltip__title">
+            {{ $t('mint.unlockable.addFundsModal.tooltip.title', [token]) }}
+          </h3>
+          <p
+            v-dompurify-html="
+              $t('mint.unlockable.addFundsModal.tooltip.onramp', [token])
+            "
+            class="tooltip__text mb-2" />
+          <p
+            v-dompurify-html="
+              $t('mint.unlockable.addFundsModal.tooltip.exchange')
+            "
+            class="tooltip__text mb-2"></p>
+          <p
+            v-dompurify-html="
+              $t('mint.unlockable.addFundsModal.tooltip.transfer', [token])
+            "
+            class="tooltip__text mb-6" />
+          <p class="tooltip__note has-text-grey">
+            {{ $t('mint.unlockable.addFundsModal.tooltip.note') }}
+          </p>
+        </template>
+      </NeoTooltip>
       <div class="is-flex">
-        <AutoTeleportActionButton
-          ref="autoteleport"
-          :amount="minimumFunds"
-          :hide-top="!canAutoTeleport"
-          :interaction="interaction"
-          @modal:close="handleModalClose" />
+        <NeoButton
+          class="is-flex-1 h-14 is-capitalized shine"
+          no-shadow
+          variant="k-accent"
+          @click="onShowRamp">
+          {{ $t('autoTeleport.addFundsViaOnramp') }}
+        </NeoButton>
       </div>
     </ModalBody>
   </NeoModal>
+  <OnRampModal v-model="onRampActive" @close="onRampActive = false" />
 </template>
 
 <script setup lang="ts">
-import { NeoIcon, NeoModal, NeoTooltip } from '@kodadot1/brick'
+import { NeoButton, NeoIcon, NeoModal, NeoTooltip } from '@kodadot1/brick'
 import ModalBody from '@/components/shared/modals/ModalBody.vue'
-import AutoTeleportActionButton from '@/components/common/autoTeleport/AutoTeleportActionButton.vue'
-import ModalIdentityItem from '@/components/shared/ModalIdentityItem.vue'
-import { ActionlessInteraction } from '@/components/common/autoTeleport/utils'
+import OnRampModal from '@/components/shared/OnRampModal.vue'
 
-const emit = defineEmits(['confirm', 'update:modelValue'])
-const props = withDefaults(
-  defineProps<{
-    modelValue: boolean
-    minimumFunds: number
-    formattedMinimumFunds: string
-    token: string
-    chain: string
-    free: boolean
-  }>(),
-  {
-    free: false,
-  },
-)
-
-const autoteleport = ref()
-const interaction = computed(() => {
-  //tmp solution till drop type check is fixed
-  return props.free
-    ? ActionlessInteraction.FREE_DROP
-    : ActionlessInteraction.DROP
+type Props = {
+  modelValue: boolean
+  minimumFunds: number
+  token: string
+}
+
+withDefaults(defineProps<Props>(), {
+  modelValue: false,
 })
 
-const canAutoTeleport = computed(() => autoteleport.value?.canAutoTeleport)
-const loading = computed(() => !autoteleport.value?.hasBalances)
+const { urlPrefix } = usePrefix()
+const { accountId } = useAuth()
+
+const onRampActive = ref(false)
+
+const emit = defineEmits(['confirm', 'update:modelValue'])
 
 const onClose = () => {
   emit('update:modelValue', false)
 }
 
-const handleModalClose = (completed: boolean) => {
-  if (completed) {
-    emit('confirm')
-  }
+const onShowRamp = () => {
+  onRampActive.value = true
+  onClose()
 }
 </script>
 
 <style lang="scss" scoped>
 @import '@/assets/styles/abstracts/variables';
 
+.shade-border-color {
+  @include ktheme() {
+    border-color: theme('k-shade');
+  }
+}
+
+.rounded {
+  border-radius: 10rem;
+}
+
 .add-funds-note {
   cursor: default;
   margin-bottom: 16px;
@@ -152,10 +155,4 @@ const handleModalClose = (completed: boolean) => {
     height: initial;
   }
 }
-
-@include mobile() {
-  .modal-width {
-    width: unset;
-  }
-}
 </style>
diff --git a/components/collection/drop/Generative.vue b/components/collection/drop/Generative.vue
index be948edb08..48ca7903ca 100644
--- a/components/collection/drop/Generative.vue
+++ b/components/collection/drop/Generative.vue
@@ -60,8 +60,8 @@
                   <NeoIcon icon="circle-info" class="mr-3" />
                   <div
                     v-dompurify-html="
-                      $t('mint.unlockable.freeMinimumFundsDescription', [
-                        formattedMinimumFunds,
+                      $t('mint.unlockable.minimumFundsDescription', [
+                        `${minimumFunds} ${token}`,
                         chainName,
                       ])
                     "
@@ -115,12 +115,8 @@
   <CollectionDropAddFundsModal
     v-model="isAddFundModalActive"
     :minimum-funds="minimumFunds"
-    :formatted-minimum-funds="formattedMinimumFunds"
     :token="token"
-    :chain="chainName"
-    free
-    @close="closeAddFundModal"
-    @confirm="handleDropAddModalConfirm" />
+    @close="isAddFundModalActive = false" />
 
   <ListingCartModal />
 </template>
@@ -135,12 +131,18 @@ import { createUnlockableMetadata } from '../unlockable/utils'
 import GenerativePreview from '@/components/collection/drop/GenerativePreview.vue'
 import { DropItem } from '@/params/types'
 import { DoResult, doWaifu } from '@/services/waifu'
-import { useDropMinimumFunds, useDropStatus } from '@/components/drops/useDrops'
+import { useDropStatus } from '@/components/drops/useDrops'
 import { makeScreenshot } from '@/services/capture'
 import { pinFileToIPFS } from '@/services/nftStorage'
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
 import newsletterApi from '@/utils/newsletter'
+import { formatBsxBalanceToNumber } from '@/utils/format/balance'
 import { prefixToToken } from '@/components/common/shoppingCart/utils'
+import { useIdentityStore } from '@/stores/identity'
+import {
+  DOT_EXISTENTIAL_DEPOSIT,
+  KSM_EXISTENTIAL_DEPOSIT,
+} from '@/components/collection/unlockable/const'
 import DropConfirmModal from './modal/DropConfirmModal.vue'
 import ListingCartModal from '@/components/common/listingCart/ListingCartModal.vue'
 import { nftToListingCartItem } from '@/components/common/shoppingCart/utils'
@@ -149,12 +151,6 @@ import { fetchNft } from '@/components/items/ItemsGrid/useNftActions'
 const NuxtLink = resolveComponent('NuxtLink')
 const MINTING_SECOND = 120
 
-export type DropMintedNft = DoResult & {
-  id: string
-  collectionName: string
-  name: string
-}
-
 const props = defineProps({
   drop: {
     type: Object,
@@ -164,39 +160,55 @@ const props = defineProps({
   },
 })
 
+useMultipleBalance(true)
+
+const minimumFunds = computed<number>(
+  () => (props.drop.meta && formatBsxBalanceToNumber(props.drop.meta)) || 0,
+)
+const store = useIdentityStore()
+
+const isWalletConnecting = ref(false)
+const collectionId = computed(() => props.drop?.collection)
+const disabledByBackend = computed(() => props.drop?.disabled)
+const defaultImage = computed(() => props.drop?.image)
+const defaultName = computed(() => props.drop?.name)
+const defaultMax = computed(() => props.drop?.max || 255)
+const { currentAccountMintedToken, mintedDropCount, fetchDropStatus } =
+  useDropStatus(props.drop.alias)
 const instance = getCurrentInstance()
 const listingCartStore = useListingCartStore()
 const preferencesStore = usePreferencesStore()
 
+const { doAfterLogin } = useDoAfterlogin(instance)
 const { $i18n } = useNuxtApp()
+const root = ref()
+
 const { toast } = useToast()
 const { accountId, isLogIn } = useAuth()
-const { urlPrefix } = usePrefix()
-const { currentAccountMintedToken, mintedDropCount, fetchDropStatus } =
-  useDropStatus(props.drop.alias)
-const { doAfterLogin } = useDoAfterlogin(instance)
-const { fetchMultipleBalance } = useMultipleBalance()
-const { hasMinimumFunds, formattedMinimumFunds, minimumFunds } =
-  useDropMinimumFunds(props.drop)
 
-const isWalletConnecting = ref(false)
-const root = ref()
+const { urlPrefix } = usePrefix()
 const selectedImage = ref<string>('')
 const isLoading = ref(false)
 const isImageFetching = ref(false)
 const isConfirmModalActive = ref(false)
 const isAddFundModalActive = ref(false)
-const mintedNft = ref<DropMintedNft>()
-const mintedNftWithMetadata = ref<NFTWithMetadata>()
 
-const collectionId = computed(() => props.drop?.collection)
-const disabledByBackend = computed(() => props.drop?.disabled)
-const defaultImage = computed(() => props.drop?.image)
-const defaultName = computed(() => props.drop?.name)
-const defaultMax = computed(() => props.drop?.max || 255)
 const chainName = computed(() => getChainName(props.drop.chain))
 const token = computed(() => prefixToToken[props.drop.chain])
 
+export type DropMintedNft = DoResult & {
+  id: string
+  collectionName: string
+  name: string
+}
+
+const mintedNft = ref<DropMintedNft>()
+const mintedNftWithMetadata = ref<NFTWithMetadata>()
+
+const handleSelectImage = (image: string) => {
+  selectedImage.value = image
+}
+
 const { data: collectionData } = useGraphql({
   queryName: 'unlockableCollectionById',
   variables: {
@@ -244,10 +256,6 @@ const collectionName = computed(
   () => collectionData.value?.collectionEntity?.name,
 )
 
-const handleSelectImage = (image: string) => {
-  selectedImage.value = image
-}
-
 const tryCapture = async () => {
   try {
     const imgFile = await makeScreenshot(sanitizeIpfsUrl(selectedImage.value))
@@ -273,12 +281,21 @@ const handleSubmitMint = async () => {
 
     return
   }
-
   if (isLoading.value || isImageFetching.value) {
     return false
   }
 
-  if (hasMinimumFunds.value) {
+  const dropChainBalance = Number(store.getAuthBalanceByChain(props.drop.chain))
+  const relayChainBalance = Number(
+    store.getAuthBalanceByRelayChain(props.drop.chain),
+  )
+  const existentialDeposit =
+    token.value === 'KSM' ? KSM_EXISTENTIAL_DEPOSIT : DOT_EXISTENTIAL_DEPOSIT
+
+  if (
+    dropChainBalance >= minimumFunds.value ||
+    relayChainBalance >= existentialDeposit + minimumFunds.value
+  ) {
     openConfirmModal()
   } else {
     openAddFundModal()
@@ -297,10 +314,6 @@ const openAddFundModal = () => {
   isAddFundModalActive.value = true
 }
 
-const closeAddFundModal = () => {
-  isAddFundModalActive.value = false
-}
-
 const subscribe = async (email: string) => {
   try {
     await newsletterApi.subscribe(email)
@@ -405,12 +418,6 @@ const clear = () => {
   listingCartStore.removeItem(mintedNftWithMetadata.value?.id)
 }
 
-const handleDropAddModalConfirm = () => {
-  closeAddFundModal()
-  openConfirmModal()
-  fetchMultipleBalance([urlPrefix.value])
-}
-
 onBeforeUnmount(clear)
 </script>
 
diff --git a/components/collection/drop/HolderOfGenerative.vue b/components/collection/drop/HolderOfGenerative.vue
index 101c9b2b5b..011bd94eda 100644
--- a/components/collection/drop/HolderOfGenerative.vue
+++ b/components/collection/drop/HolderOfGenerative.vue
@@ -68,7 +68,7 @@
                   <div
                     v-dompurify-html="
                       $t('mint.unlockable.minimumFundsDescription', [
-                        formattedMinimumFunds,
+                        `${minimumFunds} ${token}`,
                         chainName,
                       ])
                     "
@@ -109,11 +109,8 @@
   <CollectionDropAddFundsModal
     v-model="isAddFundModalActive"
     :minimum-funds="minimumFunds"
-    :formatted-minimum-funds="formattedMinimumFunds"
     :token="token"
-    :chain="chainName"
-    @close="closeAddFundModal"
-    @confirm="handleDropAddModalConfirm" />
+    @close="isAddFundModalActive = false" />
 </template>
 
 <script setup lang="ts">
@@ -126,11 +123,17 @@ import { createUnlockableMetadata } from '../unlockable/utils'
 import GenerativePreview from '@/components/collection/drop/GenerativePreview.vue'
 import { DropItem } from '@/params/types'
 import { DoResult, claimDropItem } from '@/services/waifu'
-import { useDropMinimumFunds, useDropStatus } from '@/components/drops/useDrops'
+import { useDropStatus } from '@/components/drops/useDrops'
 import { makeScreenshot } from '@/services/capture'
 import { pinFileToIPFS } from '@/services/nftStorage'
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
+import { formatBsxBalanceToNumber } from '@/utils/format/balance'
 import { prefixToToken } from '@/components/common/shoppingCart/utils'
+import { useIdentityStore } from '@/stores/identity'
+import {
+  DOT_EXISTENTIAL_DEPOSIT,
+  KSM_EXISTENTIAL_DEPOSIT,
+} from '@/components/collection/unlockable/const'
 import { fetchNft } from '@/components/items/ItemsGrid/useNftActions'
 import holderOfCollectionById from '@/queries/subsquid/general/holderOfCollectionById.graphql'
 import unlockableCollectionById from '@/queries/subsquid/general/unlockableCollectionById.graphql'
@@ -155,10 +158,12 @@ export type DropMintedNft = DoResult & {
   name: string
 }
 
-const { fetchMultipleBalance } = useMultipleBalance()
+useMultipleBalance(true)
 
-const { hasMinimumFunds, formattedMinimumFunds, minimumFunds } =
-  useDropMinimumFunds(props.drop)
+const minimumFunds = computed<number>(
+  () => (props.drop.meta && formatBsxBalanceToNumber(props.drop.meta)) || 0.2,
+)
+const store = useIdentityStore()
 
 const isWalletConnecting = ref(false)
 const collectionId = computed(() => props.drop?.collection)
@@ -378,7 +383,16 @@ const handleSubmitMint = async () => {
     return false
   }
 
-  if (hasMinimumFunds.value) {
+  const dropChainBalance = Number(store.getAuthBalanceByChain(props.drop.chain))
+  const relayChainBalance = Number(
+    store.getAuthBalanceByRelayChain(props.drop.chain),
+  )
+  const existentialDeposit =
+    token.value === 'KSM' ? KSM_EXISTENTIAL_DEPOSIT : DOT_EXISTENTIAL_DEPOSIT
+  if (
+    dropChainBalance >= minimumFunds.value ||
+    relayChainBalance >= existentialDeposit + minimumFunds.value
+  ) {
     mintNft()
   } else {
     openAddFundModal()
@@ -389,10 +403,6 @@ const openAddFundModal = () => {
   isAddFundModalActive.value = true
 }
 
-const closeAddFundModal = () => {
-  isAddFundModalActive.value = false
-}
-
 const subscribeToMintedNft = (id: string, onReady: (data) => void) => {
   useSubscriptionGraphql({
     query: `nftEntityById(id: "${id}") {
@@ -449,11 +459,6 @@ const submitMint = async (sn: string) => {
     throw error
   }
 }
-
-const handleDropAddModalConfirm = () => {
-  closeAddFundModal()
-  fetchMultipleBalance([urlPrefix.value])
-}
 </script>
 
 <style scoped lang="scss">
diff --git a/components/collection/unlockable/const.ts b/components/collection/unlockable/const.ts
index 451772909a..bcb5b88ef8 100644
--- a/components/collection/unlockable/const.ts
+++ b/components/collection/unlockable/const.ts
@@ -6,3 +6,6 @@ export const countDownTime = endOfHour(now).getTime()
 export const slidesCountOnTimeCountdown = 10
 
 export const DISPLAY_SLIDE_IMAGE_COUNT = 4
+
+export const DOT_EXISTENTIAL_DEPOSIT = 1
+export const KSM_EXISTENTIAL_DEPOSIT = 0.000333
diff --git a/components/common/autoTeleport/AutoTeleportActionButton.vue b/components/common/autoTeleport/AutoTeleportActionButton.vue
index 23a31e9afc..87d5bdccc0 100644
--- a/components/common/autoTeleport/AutoTeleportActionButton.vue
+++ b/components/common/autoTeleport/AutoTeleportActionButton.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="is-flex is-flex-direction-column w-full">
     <div
-      v-if="showAutoTeleport && !hideTop"
+      v-if="showAutoTeleport"
       class="is-flex is-justify-content-space-between w-full mb-4">
       <div class="is-flex">
         <div class="has-accent-blur">
@@ -55,7 +55,6 @@
     :can-do-action="hasEnoughInCurrentChain"
     :transactions="transactions"
     :auto-close="autoCloseModal"
-    :interaction="interaction"
     @close="handleAutoTeleportModalClose"
     @telport:retry="teleport"
     @action:start="(i) => actionRun(i)"
@@ -78,7 +77,6 @@ import type {
   AutoTeleportAction,
   AutoTeleportFeeParams,
 } from '@/composables/autoTeleport/types'
-import { ActionlessInteraction, getActionDetails } from './utils'
 
 export type AutoTeleportActionButtonConfirmEvent = {
   autoteleport: boolean
@@ -94,22 +92,17 @@ const emit = defineEmits([
 const props = withDefaults(
   defineProps<{
     amount: number
-    label?: string
+    label: string
     disabled: boolean
-    actions?: AutoTeleportAction[]
+    actions: AutoTeleportAction[]
     fees?: AutoTeleportFeeParams
     autoCloseModal: boolean
-    interaction?: ActionlessInteraction
-    hideTop?: boolean
   }>(),
   {
     fees: () => ({ actions: 0, actionAutoFees: true }),
     disabled: false,
     amount: 0,
     autoCloseModal: false,
-    actions: () => [],
-    label: '',
-    hideTop: false,
   },
 )
 
@@ -182,18 +175,17 @@ const hasNoFundsAtAll = computed(
   () => !hasEnoughInCurrentChain.value && !hasEnoughInRichestChain.value,
 )
 
-const confirmButtonTitle = computed<string>(() => {
+const confirmButtonTitle = computed(() => {
   const interaction =
-    props.interaction || transactions.value.actions[0].interaction
-
-  return getActionDetails(interaction).confirm
+    transactions.value.actions[0].interaction?.toLocaleLowerCase()
+  return $i18n.t(`autoTeleport.steps.${interaction}.confirm`)
 })
 
 const showAddFunds = computed(() => hasBalances.value && hasNoFundsAtAll.value)
 
 const autoTeleportLabel = computed(() => {
   if (hasEnoughInCurrentChain.value || props.disabled) {
-    return props.label || confirmButtonTitle.value
+    return props.label
   }
 
   if (!isReady.value) {
@@ -281,10 +273,10 @@ const submit = () => {
   }
 }
 
-const handleAutoTeleportModalClose = (completed: boolean) => {
+const handleAutoTeleportModalClose = () => {
   isModalOpen.value = false
   clear()
-  emit('modal:close', completed)
+  emit('modal:close')
 }
 
 watch(allowAutoTeleport, (allow) => {
@@ -299,7 +291,7 @@ watchSyncEffect(() => {
   }
 })
 
-defineExpose({ isReady, optimalTransition, canAutoTeleport })
+defineExpose({ isReady, optimalTransition })
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/common/autoTeleport/AutoTeleportModal.vue b/components/common/autoTeleport/AutoTeleportModal.vue
index 9cbf1d075c..36809b1d51 100644
--- a/components/common/autoTeleport/AutoTeleportModal.vue
+++ b/components/common/autoTeleport/AutoTeleportModal.vue
@@ -78,7 +78,6 @@ import TransactionSteps, {
 } from '@/components/shared/TransactionSteps/TransactionSteps.vue'
 import { TransactionStepStatus } from '@/components/shared/TransactionSteps/utils'
 import { type AutoTeleportTransactions } from '@/composables/autoTeleport/types'
-import { AutoTeleportInteractions, getActionDetails } from './utils'
 
 export type ActionDetails = {
   title: string
@@ -103,7 +102,6 @@ const props = withDefaults(
     transactions: AutoTeleportTransactions
     autoClose?: boolean
     autoCloseDelay?: number
-    interaction?: AutoTeleportInteractions
   }>(),
   {
     autoClose: false,
@@ -131,16 +129,12 @@ const checkBalanceState = computed<TransactionStepStatus>(() => {
   return status
 })
 
-const mainInteraction = computed(
-  () => props.interaction || props.transactions.actions[0].interaction,
-)
-
 const mainActionDetails = computed(() => {
-  const details = getActionDetails(mainInteraction.value)
-
+  const interaction =
+    props.transactions.actions[0].interaction?.toLocaleLowerCase()
   return {
-    action: details.action,
-    item: details.item,
+    action: $i18n.t(`autoTeleport.steps.${interaction}.action`),
+    item: $i18n.t(`autoTeleport.steps.${interaction}.item`),
   }
 })
 
@@ -166,8 +160,9 @@ const steps = computed<TransactionStep[]>(() => {
       },
     },
     props.transactions.actions.map((action) => {
+      const { title } = getActionDetails(action.interaction)
       return {
-        title: getActionDetails(action.interaction).title,
+        title,
         status: action.status.value,
         isError: action.isError.value,
         txId: action.txId.value,
@@ -185,7 +180,7 @@ const handleActiveStep = (step) => {
 }
 
 const btnDisabled = computed(() => {
-  return !autoteleportFinalized.value
+  return !actionsFinalized.value
 })
 
 const actionsFinalized = computed(() =>
@@ -194,22 +189,8 @@ const actionsFinalized = computed(() =>
     .every((status) => status.value === TransactionStatus.Finalized),
 )
 
-const hasActions = computed(() => props.transactions.actions.length)
-
-const hasCompletedBalanceCheck = computed(
-  () => steps.value[1].stepStatus === TransactionStepStatus.COMPLETED,
-)
-
-const autoteleportFinalized = computed(() =>
-  hasActions.value ? actionsFinalized.value : hasCompletedBalanceCheck.value,
-)
-
-const btnLabel = computed<string>(() => {
-  if (!hasActions.value && hasCompletedBalanceCheck.value) {
-    return $i18n.t('redirect.continue')
-  }
-
-  if (!hasActions.value || !props.canDoAction || !activeStepInteraction.value) {
+const btnLabel = computed(() => {
+  if (!props.canDoAction || !activeStepInteraction.value) {
     return $i18n.t('autoTeleport.completeAllRequiredSteps')
   }
 
@@ -220,6 +201,14 @@ const btnLabel = computed<string>(() => {
   return $i18n.t('autoTeleport.close')
 })
 
+const getActionDetails = (interaction: string) => {
+  const i = interaction.toLocaleLowerCase()
+  return {
+    title: $i18n.t(`autoTeleport.steps.${i}.title`),
+    submit: $i18n.t(`autoTeleport.steps.${i}.submit`),
+  }
+}
+
 const FIRST_ACTION_STEP = 2
 const activeStepInteraction = computed(
   () =>
@@ -235,17 +224,17 @@ watch(activeStep, () => {
 })
 
 const submit = () => {
-  if (autoteleportFinalized.value) {
+  if (actionsFinalized.value) {
     onClose()
   }
 }
 
 const onClose = () => {
-  emit('close', autoteleportFinalized.value)
+  emit('close')
 }
 
-watch(autoteleportFinalized, () => {
-  if (autoteleportFinalized.value) {
+watch(actionsFinalized, () => {
+  if (actionsFinalized.value) {
     emit('completed')
 
     if (props.autoClose) {
diff --git a/components/common/autoTeleport/utils.ts b/components/common/autoTeleport/utils.ts
deleted file mode 100644
index 80c5e98d06..0000000000
--- a/components/common/autoTeleport/utils.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { Interaction } from '@kodadot1/minimark/v1'
-import {
-  type ActionsInteractions,
-  Collections,
-} from '@/composables/transaction/types'
-
-export enum ActionlessInteraction {
-  DROP = 'DROP',
-  FREE_DROP = 'FREE_DROP',
-}
-
-export type AutoTeleportInteractions =
-  | ActionsInteractions
-  | ActionlessInteraction
-
-type AutoTeleportStepDetails = {
-  confirm: string
-  action: string
-  item: string
-  title: string
-  submit: string
-}
-
-const interactionMap: {
-  [key in AutoTeleportInteractions]?: { action: string; item: string }
-} = {
-  [Interaction.BUY]: { action: 'purchase', item: 'general.nft' },
-  [Interaction.LIST]: { action: 'list', item: 'general.nfts' },
-  [Interaction.MINT]: { action: 'create', item: 'collection' },
-  [Interaction.MINTNFT]: { action: 'mint', item: 'general.nft' },
-  [Interaction.SEND]: { action: 'transfer', item: 'general.nft' },
-  [Collections.DELETE]: { action: 'delete', item: 'collection' },
-  [Interaction.CONSUME]: { action: 'burn', item: 'general.nft' },
-  [ActionlessInteraction.FREE_DROP]: {
-    action: 'drops.claimFree',
-    item: 'general.nft',
-  },
-  [ActionlessInteraction.DROP]: {
-    action: 'drops.claim',
-    item: 'general.nft',
-  },
-}
-
-const getTransalationKey = (
-  interaction: AutoTeleportInteractions,
-): { item: string; action: string } => {
-  const { action, item } = interactionMap[interaction] || {
-    action: '',
-    item: '',
-  }
-
-  return {
-    action,
-    item,
-  }
-}
-
-export const getActionDetails = (
-  interaction: AutoTeleportInteractions,
-): AutoTeleportStepDetails => {
-  const { $i18n } = useNuxtApp()
-  const getTranslation = (key: string) => $i18n.t(key) || ''
-
-  const { action, item } = getTransalationKey(interaction)
-
-  const i = interaction.toLocaleLowerCase()
-
-  const title = getTranslation(`autoTeleport.steps.${i}.title`)
-
-  return {
-    confirm: getTranslation(`autoTeleport.steps.${i}.confirm`),
-    action: getTranslation(action),
-    item: getTranslation(item),
-    title: title,
-    submit: `${title}...`,
-  }
-}
diff --git a/components/drops/useDrops.ts b/components/drops/useDrops.ts
index d2dc082c96..f99eeece4f 100644
--- a/components/drops/useDrops.ts
+++ b/components/drops/useDrops.ts
@@ -7,8 +7,6 @@ import {
   getDrops,
 } from '@/services/waifu'
 import unlockableCollectionById from '@/queries/subsquid/general/unlockableCollectionById.graphql'
-import { existentialDeposit } from '@kodadot1/static'
-import { chainPropListOf } from '@/utils/config/chain.config'
 
 export interface Drop {
   collection: CollectionWithMeta
@@ -85,40 +83,3 @@ export const useDropStatus = (id: string) => {
     fetchDropStatus,
   }
 }
-
-export const useDropMinimumFunds = (drop) => {
-  const chainProperties = chainPropListOf(drop.chain)
-
-  const { chainBalances } = useTeleport()
-  const { urlPrefix } = usePrefix()
-  const { fetchMultipleBalance } = useMultipleBalance()
-
-  const currentChain = computed(() => prefixToChainMap[drop.chain])
-  const meta = computed(() => drop.meta || 0)
-  const currentChainBalance = computed(
-    () =>
-      (currentChain.value && Number(chainBalances[currentChain.value]())) || 0,
-  )
-  const minimumFunds = computed<number>(() => meta.value)
-  const transferableDropChainBalance = computed(
-    () => currentChainBalance.value - existentialDeposit[urlPrefix.value],
-  )
-  const hasMinimumFunds = computed(
-    () => transferableDropChainBalance.value >= minimumFunds.value,
-  )
-
-  const { formatted: formattedMinimumFunds } = useAmount(
-    meta,
-    computed(() => chainProperties.tokenDecimals),
-    computed(() => chainProperties.tokenSymbol),
-    2,
-  )
-
-  onBeforeMount(fetchMultipleBalance)
-
-  return {
-    minimumFunds,
-    hasMinimumFunds,
-    formattedMinimumFunds,
-  }
-}
diff --git a/components/shared/format/Money.vue b/components/shared/format/Money.vue
index 2f3f4adeba..7bc3af27f9 100644
--- a/components/shared/format/Money.vue
+++ b/components/shared/format/Money.vue
@@ -14,7 +14,7 @@
 import {
   checkInvalidBalanceFilter,
   default as formatBalance,
-  roundAmount,
+  roundTo,
 } from '@/utils/format/balance'
 import { chainPropListOf } from '@/utils/config/chain.config'
 import type { Prefix } from '@kodadot1/static'
@@ -47,7 +47,7 @@ const displayUnit = computed(
     (props.prefix ? chainPropListOf(props.prefix).tokenSymbol : unit.value),
 )
 const finalValue = computed(() =>
-  roundAmount(
+  round(
     formatBalance(
       checkInvalidBalanceFilter(props.value),
       tokenDecimals.value,
@@ -57,4 +57,12 @@ const finalValue = computed(() =>
     true,
   ),
 )
+
+const round = (value: string, limit: number, disableFilter: boolean) => {
+  const number = Number(value.replace(/,/g, ''))
+  if (disableFilter) {
+    return parseFloat(number.toString())
+  }
+  return roundTo(value, limit)
+}
 </script>
diff --git a/composables/autoTeleport/useAutoTeleportTransitionDetails.ts b/composables/autoTeleport/useAutoTeleportTransitionDetails.ts
index 23e542395c..80258161ec 100644
--- a/composables/autoTeleport/useAutoTeleportTransitionDetails.ts
+++ b/composables/autoTeleport/useAutoTeleportTransitionDetails.ts
@@ -2,7 +2,6 @@ import {
   type Chain,
   chainToPrefixMap,
   getChainCurrency,
-  getChainExistentialDeposit,
   allowedTransitions as teleportRoutes,
 } from '@/utils/teleport'
 import { chainPropListOf } from '@/utils/config/chain.config'
@@ -65,13 +64,12 @@ export default function (
       Number(balance.value),
   )
 
-  const currentChainExistentialDeposit = computed(() =>
-    getChainExistentialDeposit(currentChain.value),
+  const { existentialDeposit } = useDeposit(
+    computed(() => chainToPrefixMap[currentChain.value]),
   )
 
   const transferableCurrentChainBalance = computed(
-    () =>
-      Number(currentChainBalance.value) - currentChainExistentialDeposit.value,
+    () => Number(currentChainBalance.value) - existentialDeposit.value,
   )
 
   const hasEnoughInCurrentChain = computed(
@@ -110,14 +108,9 @@ export default function (
     () => getMaxKeyByValue(sourceChainsBalances.value) as Chain | undefined,
   )
 
-  const richestChainExistentialDeposit = computed(() =>
-    getChainExistentialDeposit(richestChain.value),
-  )
-
   const richestChainBalance = computed(() =>
     richestChain.value
-      ? Number(sourceChainsBalances.value[richestChain.value]) -
-        richestChainExistentialDeposit.value
+      ? Number(sourceChainsBalances.value[richestChain.value])
       : 0,
   )
 
diff --git a/composables/useAmount.ts b/composables/useAmount.ts
index c3c5fc26d2..6594ddb9b5 100644
--- a/composables/useAmount.ts
+++ b/composables/useAmount.ts
@@ -1,20 +1,15 @@
-import format, { roundAmount } from '@/utils/format/balance'
+import format from '@/utils/format/balance'
 
 export default function (
   tokenAmount: ComputedRef<number>,
   tokenDecimals: ComputedRef<number>,
   chainSymbol: ComputedRef<string>,
-  round: undefined | number = undefined,
 ) {
   const { getCurrentTokenValue } = useFiatStore()
 
-  const amountFormatted = computed(() => {
-    const amount = format(tokenAmount.value, tokenDecimals.value, '')
-    return `${round ? roundAmount(amount, round, false) : amount} ${
-      chainSymbol.value
-    }`
-  })
-
+  const amountFormatted = computed(() =>
+    format(tokenAmount.value, tokenDecimals.value, chainSymbol.value),
+  )
   const amountUsd = computed(() => {
     const value = calculateUsdFromToken(
       Number(tokenAmount.value) * Math.pow(10, -tokenDecimals.value),
diff --git a/composables/useMultipleBalance.ts b/composables/useMultipleBalance.ts
index 881801f670..27c3199db9 100644
--- a/composables/useMultipleBalance.ts
+++ b/composables/useMultipleBalance.ts
@@ -129,7 +129,7 @@ export default function (refetchPeriodically: boolean = false) {
   ) => {
     await fetchFiatPrice(forceFiat)
 
-    const assets = isTestnet
+    const assets = isTestnet.value
       ? multiBalanceAssetsTestnet.value
       : multiBalanceAssets.value
 
diff --git a/locales/en.json b/locales/en.json
index f87ce59418..1bf898a613 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -11,10 +11,6 @@
   "collections": "Collections",
   "items": "Items",
   "users": "Users",
-  "burn": "Burn",
-  "purchase":"Purchase",
-  "delete": "Delete",
-  "bridging": "Bridging",
   "recent": "Recent",
   "user": "User",
   "soon": "Soon",
@@ -609,7 +605,6 @@
       "mintThisNft": "Mint This NFT",
       "seeYourNft": "See Your NFT",
       "minimumFundsDescription": "Holding a Minimum of <strong>{0} On {1}</strong> in Your Wallet is Required",
-      "freeMinimumFundsDescription": "Holding a Minimum of <strong>{0} On {1}</strong> in Your Wallet is Required for This Free Mint.",
       "claimNftNow": "Claim NFT Now",
       "claimPaidNft": "Claim For {0}",
       "nftAlreadyMinted": "NFT Already Minted",
@@ -633,7 +628,7 @@
       "notEligibility": "Not Eligible",
       "addFundsModal": {
         "title": "Action Required",
-        "textP1": "To participate in this free, gasless drop, your wallet must hold a minimum of <strong>{0} on {1}</<strong>",
+        "textP1": "To participate in this free, gasless drop, your wallet must hold a minimum of <strong>{0}</<strong>",
         "textP2": "Please add funds to continue",
         "howToAddFunds": "How to add funds",
         "tooltip": {
@@ -944,8 +939,6 @@
   },
   "tutorial": "Tutorial",
   "general": {
-    "nft": "NFT",
-    "nfts": "NFT(s)",
     "apply": "Apply",
     "resetAll": "Reset All",
     "filters": "Filters",
@@ -1465,10 +1458,7 @@
     "artBy": "{0} By",
     "viewNft": "View NFT",
     "listNft": "List NFT",
-    "canList": "NFT ready for listing!",
-    "teleportRequiredAmount": "Teleport required amount",
-    "claimFree": "Claim free",
-    "claim": "Claim"
+    "canList": "NFT ready for listing!"
   },
   "confirmPurchase": {
     "action": "Confirm Purchase",
@@ -1652,34 +1642,52 @@
       },
       "buy": {
         "confirm": "Teleport And Confirm Purchase",
-        "title": "Buying NFT"
+        "action": "Purchase",
+        "item": "NFT",
+        "title": "Buying NFT",
+        "submit": "Buying NFT..."
       },
       "list": {
         "confirm": "Teleport And Confirm Listing(s)",
-        "title": "Listing NFT"
+        "action": "List",
+        "item": "NFT(s)",
+        "title": "Listing NFT",
+        "submit": "Listing NFT..."
       },
       "mint": {
         "confirm": "Teleport and Create Collection",
-        "title": "Minting NFT Collection"
-      },
-      "free_drop": {
-        "confirm": "Teleport required amount"
+        "action": "Create",
+        "item": "Collection",
+        "title": "Minting NFT Collection",
+        "submit": "Minting NFT Collection..."
       },
       "mintnft": {
         "confirm": "Teleport and Mint NFT",
-        "title": "Minting NFT"
+        "action": "Mint",
+        "item": "NFT",
+        "title": "Minting NFT",
+        "submit": "Minting NFT..."
       },
       "send": {
         "confirm": "Teleport and Transfer NFT",
-        "title": "Transferring NFT"
+        "action": "Transfer",
+        "item": "NFT",
+        "title": "Transferring NFT",
+        "submit": "Transferring NFT..."
       },
       "delete": {
         "confirm": "Teleport and Delete Collection",
-        "title": "Deleting Collection"
+        "action": "Delete",
+        "item": "Collection",
+        "title": "Deleting Collection",
+        "submit": "Deleting Collection..."
       },
       "consume": {
         "confirm": "Teleport and Burn NFT",
-        "title": "Burning NFT"
+        "action": "Burn",
+        "item": "NFT",
+        "title": "Burning NFT",
+        "submit": "Burning NFT..."
       }
     }
   },
diff --git a/stores/identity.ts b/stores/identity.ts
index 9ea8d5cf7e..a3935805a9 100644
--- a/stores/identity.ts
+++ b/stores/identity.ts
@@ -19,6 +19,16 @@ const DEFAULT_BALANCE_STATE = {
   // movr: '0',
 }
 
+const prefixToToken = {
+  ksm: 'KSM',
+  rmrk: 'KSM',
+  bsx: 'KSM',
+  ahk: 'KSM',
+  ahp: 'DOT',
+  dot: 'DOT',
+  ahr: 'ROC',
+}
+
 export interface IdentityMap {
   [address: string]: Registration
 }
@@ -125,6 +135,14 @@ export const useIdentityStore = defineStore('identity', {
         ? state.auth.balance[urlPrefix.value] || '0'
         : '0'
     },
+    getAuthBalanceByChain: (state) => (prefix: Prefix) => {
+      return state.auth.balance ? state.auth.balance[prefix] || '0' : '0'
+    },
+    getAuthBalanceByRelayChain: (state) => (prefix: Prefix) => {
+      const relayChain = prefixToToken[prefix] === 'DOT' ? 'dot' : 'ksm'
+
+      return state.auth.balance ? state.auth.balance[relayChain] || '0' : '0'
+    },
     getTotalUsd: (state) => {
       if (
         state.multiBalances &&
@@ -148,7 +166,7 @@ export const useIdentityStore = defineStore('identity', {
       }
 
       const { isTestnet } = usePrefix()
-      const assets = isTestnet
+      const assets = isTestnet.value
         ? state.multiBalanceAssetsTestnet
         : state.multiBalanceAssets
 
diff --git a/utils/format/balance.ts b/utils/format/balance.ts
index b3e5f31ed7..ccf121d0e3 100644
--- a/utils/format/balance.ts
+++ b/utils/format/balance.ts
@@ -117,16 +117,4 @@ export const formatBsxBalanceToNumber = (amount) => {
   return parseFloat(format(amount, 12, false).replace(/,/g, ''))
 }
 
-export const roundAmount = (
-  value: string,
-  limit: number,
-  disableFilter: boolean,
-) => {
-  const number = Number(value.replace(/,/g, ''))
-  if (disableFilter) {
-    return parseFloat(number.toString())
-  }
-  return roundTo(value, limit)
-}
-
 export default format
diff --git a/utils/teleport.ts b/utils/teleport.ts
index d3990a558e..f047e9bb7a 100644
--- a/utils/teleport.ts
+++ b/utils/teleport.ts
@@ -1,7 +1,7 @@
 // Copyright 2017-2021 @polkadot/app-config authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { Prefix, existentialDeposit } from '@kodadot1/static'
+import { Prefix } from '@kodadot1/static'
 import type { ApiPromise } from '@polkadot/api'
 import { SubmittableExtrinsicFunction } from '@polkadot/api/types'
 import { XcmVersionedMultiLocation } from '@polkadot/types/lookup'
@@ -261,7 +261,3 @@ export const getChainCurrency = (chain: Chain): Currency => {
       return 'DOT'
   }
 }
-
-export const getChainExistentialDeposit = (
-  chain: Chain | undefined | null,
-): number => (chain ? existentialDeposit[chainToPrefixMap[chain]] : 0)