From eca9f9ce2fba2fef696c4f5b01df8197871f25c1 Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Mon, 19 Aug 2024 11:06:24 +0200
Subject: [PATCH] refactor: making offer

---
 components/common/CartItemDetails.vue         |  2 +-
 .../common/listingCart/ListingCartModal.vue   | 24 +------
 .../GalleryItemOffer.vue                      | 18 ++---
 components/offer/MakeOffer.vue                |  9 +--
 components/offer/MakingOfferItemDetails.vue   | 72 -------------------
 .../useAutoTeleportActionButton.ts            |  9 ++-
 6 files changed, 14 insertions(+), 120 deletions(-)
 delete mode 100644 components/offer/MakingOfferItemDetails.vue

diff --git a/components/common/CartItemDetails.vue b/components/common/CartItemDetails.vue
index bab6913892..77893b0491 100644
--- a/components/common/CartItemDetails.vue
+++ b/components/common/CartItemDetails.vue
@@ -4,7 +4,7 @@
       <div class="flex">
         <div>
           <BaseMediaItem
-            v-if="nft?.mediaUrl"
+            v-if="nft.mediaUrl"
             class="border border-k-shade image is-48x48"
             :class="{ 'opacity-50': discarded }"
             :alt="nft?.name"
diff --git a/components/common/listingCart/ListingCartModal.vue b/components/common/listingCart/ListingCartModal.vue
index 164cd8ad0c..0ae4b48086 100644
--- a/components/common/listingCart/ListingCartModal.vue
+++ b/components/common/listingCart/ListingCartModal.vue
@@ -139,11 +139,9 @@ const { chainSymbol, decimals } = useChain()
 
 const fixedPrice = ref()
 const floorPricePercentAdjustment = ref()
-const autoTeleport = ref(false)
-const autoTeleportButton = ref()
+
 const itemCount = ref(listingCartStore.count)
 const items = ref<ListCartItem[]>([])
-const autoTeleportLoaded = ref(false)
 
 const isSuccessModalOpen = computed(
   () => Boolean(items.value.length) && isTransactionSuccessful.value,
@@ -188,10 +186,7 @@ const getAction = (items: ListCartItem[]): Actions => {
   }
 }
 
-const { action } = useAutoTeleportActionButton({
-  autoTeleport,
-  autoTeleportButton,
-  autoTeleportLoaded,
+const { action, autoTeleport, autoTeleportButton, autoTeleportLoaded } = useAutoTeleportActionButton({
   getActionFn: () => getAction(listingCartStore.itemsInChain),
 })
 
@@ -329,21 +324,6 @@ watch(
   },
 )
 
-// watch(
-//   () => autoTeleportButton.value?.isReady,
-//   () => {
-//     if (autoTeleportButton.value?.isReady && !autoTeleportLoaded.value) {
-//       autoTeleportLoaded.value = true
-//     }
-//   },
-// )
-
-// watchSyncEffect(() => {
-//   if (!autoTeleport.value) {
-//     action.value = getAction(listingCartStore.itemsInChain)
-//   }
-// })
-
 const closeListingCartModal = () =>
   (preferencesStore.listingCartModalOpen = false)
 
diff --git a/components/gallery/GalleryItemAction/GalleryItemActionType/GalleryItemOffer.vue b/components/gallery/GalleryItemAction/GalleryItemActionType/GalleryItemOffer.vue
index 746f152b49..7d36d0a382 100644
--- a/components/gallery/GalleryItemAction/GalleryItemActionType/GalleryItemOffer.vue
+++ b/components/gallery/GalleryItemAction/GalleryItemActionType/GalleryItemOffer.vue
@@ -34,20 +34,10 @@ const openOfferModal = () => {
   preferencesStore.setMakeOfferModalOpen(true)
 }
 
-watch(
-  () => preferencesStore.makeOfferModalOpen,
-  (isOpen) => {
-    if (!isOpen) {
-      onOfferModalClose()
-    }
-  },
-)
-
-const onOfferModalClose = () => {
-  setTimeout(() => {
-    makeOfferStore.clear()
-  }, 500) // wait for modal animation
-}
+useModalIsOpenTracker({
+  isOpen: computed(() => preferencesStore.makeOfferModalOpen),
+  onChange: () => makeOfferStore.clear(),
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/offer/MakeOffer.vue b/components/offer/MakeOffer.vue
index 96c6df50b6..3fd83ed86f 100644
--- a/components/offer/MakeOffer.vue
+++ b/components/offer/MakeOffer.vue
@@ -104,12 +104,8 @@ const { isTransactionSuccessful } = useTransactionSuccessful({
 
 const { decimals } = useChain()
 const { $i18n } = useNuxtApp()
-
-const autoTeleport = ref(false)
-const autoTeleportButton = ref()
 const itemCount = ref(offerStore.count)
 const items = ref<MakingOfferItem[]>([])
-const autoTeleportLoaded = ref(false)
 
 const isSuccessModalOpen = computed(
   () => Boolean(items.value.length) && isTransactionSuccessful.value,
@@ -130,10 +126,7 @@ const getAction = (items: MakingOfferItem[]): Actions => {
   }
 }
 
-const { action } = useAutoTeleportActionButton({
-  autoTeleport,
-  autoTeleportButton,
-  autoTeleportLoaded,
+const { action, autoTeleport, autoTeleportButton, autoTeleportLoaded } = useAutoTeleportActionButton({
   getActionFn: () => getAction(offerStore.itemsInChain),
 })
 
diff --git a/components/offer/MakingOfferItemDetails.vue b/components/offer/MakingOfferItemDetails.vue
deleted file mode 100644
index 1aece79303..0000000000
--- a/components/offer/MakingOfferItemDetails.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-  <div>
-    <div class="flex justify-between">
-      <div class="flex">
-        <div>
-          <BasicImage
-            :src="avatar"
-            :alt="nft?.name"
-            class="border image is-48x48"
-            :class="{ 'opacity-50': discarded }"
-          />
-        </div>
-
-        <div class="flex flex-col justify-between ml-4 limit-width">
-          <div
-            class="font-bold line-height-1 whitespace-nowrap is-clipped is-ellipsis"
-            :class="[discarded ? 'text-k-grey' : 'text-text-color']"
-          >
-            {{ nameWithIndex(nft.name, nft.sn) }}
-          </div>
-          <div
-            class="line-height-1 whitespace-nowrap is-clipped is-ellipsis"
-            :class="{ 'text-k-grey': discarded }"
-          >
-            {{ nft.collection?.name || nft.collection.id }}
-          </div>
-        </div>
-      </div>
-
-      <slot name="right" />
-    </div>
-    <slot name="footer" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { parseNftAvatar } from '@/utils/nft'
-import type { ListCartItem } from '@/stores/listingCart'
-import BasicImage from '@/components/shared/view/BasicImage.vue'
-
-const avatar = ref<string>()
-
-const props = defineProps<{
-  nft: ListCartItem
-  discarded?: boolean
-}>()
-
-const getAvatar = async () => {
-  if (props.nft) {
-    avatar.value = await parseNftAvatar(props.nft)
-  }
-}
-
-onMounted(() => {
-  getAvatar()
-})
-</script>
-
-<style scoped lang="scss">
-@import '@/assets/styles/abstracts/variables';
-
-.limit-width {
-  width: 170px;
-  @include mobile {
-    width: 100px;
-  }
-}
-
-.line-height-1 {
-  line-height: 1;
-}
-</style>
diff --git a/composables/autoTeleport/useAutoTeleportActionButton.ts b/composables/autoTeleport/useAutoTeleportActionButton.ts
index f4b678042b..1b3a0603e1 100644
--- a/composables/autoTeleport/useAutoTeleportActionButton.ts
+++ b/composables/autoTeleport/useAutoTeleportActionButton.ts
@@ -1,11 +1,11 @@
 import type { Actions } from '@/composables/transaction/types'
 
 export default ({
-  autoTeleport,
-  autoTeleportButton,
-  autoTeleportLoaded,
   getActionFn,
 }) => {
+  const autoTeleport = ref(false)
+  const autoTeleportButton = ref()
+  const autoTeleportLoaded = ref(false)
   const action = ref<Actions>(emptyObject<Actions>())
 
   watch(
@@ -25,5 +25,8 @@ export default ({
 
   return {
     action,
+    autoTeleport,
+    autoTeleportButton,
+    autoTeleportLoaded,
   }
 }