Merge branch 'main' into issue-10663

Author: hassnian

components/buy/Buy.vue

@@ -54,6 +54,7 @@ const { $i18n } = useNuxtApp()
 const { isTransactionSuccessful } = useTransactionSuccessful({
   status,
   isError,
+  isLoading,
 })
 
 const nftSubscription = reactive<{

components/collection/drop/HolderOfGenerative.vue

@@ -33,8 +33,6 @@
     v-if="isHolderOfWithPaidMint"
     v-model="isMintModalActive"
     :action="autoTeleportAction"
-    :status="status"
-    :is-error="isTransactionError"
     @confirm="mintNft"
     @close="closeMintModal"
     @list="handleList"

components/collection/drop/PaidGenerative.vue

@@ -4,8 +4,6 @@
   <CollectionDropModalPaidMint
     v-model="isMintModalActive"
     :action="autoTeleportAction"
-    :status="status"
-    :is-error="isError"
     @confirm="mintNft"
     @close="handleMintModalClose"
     @list="handleList"

components/collection/drop/modal/PaidMint.vue

@@ -65,8 +65,6 @@ const emit = defineEmits(['confirm', 'update:modelValue', 'list', 'close'])
 const props = defineProps<{
   modelValue: boolean
   action: AutoTeleportAction
-  status: TransactionStatus
-  isError: boolean
 }>()
 
 const { canMint, canList } = useDropMassMintState()
@@ -86,6 +84,16 @@ const modalStep = ref<ModalStep>(ModalStep.OVERVIEW)
 const autoteleportCompleted = ref(false)
 const isModalOpen = useVModel(props, 'modelValue')
 
+const isError = computed(() => props.action.details.isError)
+const status = computed(() => props.action.details.status)
+const isLoading = computed(() => props.action.details.isLoading)
+
+const { isTransactionSuccessful } = useTransactionSuccessful({
+  status,
+  isError,
+  isLoading,
+})
+
 const isSingleMintNotReady = computed(
   () => amountToMint.value === 1 && !canMint.value,
 )
@@ -121,7 +129,8 @@ const moveSuccessfulDrop = computed<boolean>(
   () =>
     imagePreloadingCompleted.value
     && Boolean(mintingSession.value.items.length)
-    && Boolean(mintingSession.value.txHash),
+    && Boolean(mintingSession.value.txHash)
+    && isTransactionSuccessful.value,
 )
 
 const transactionStatus = computed(() => {

components/common/autoTeleport/AutoTeleportModal.vue

@@ -282,6 +282,7 @@ watch(
         const { isTransactionSuccessful } = useTransactionSuccessful({
           isError: action.isError,
           status: action.status,
+          isLoading: action.isLoading,
         })
 
         watch(

components/common/listingCart/ListingCartModal.vue

@@ -119,6 +119,7 @@ import useAutoTeleportActionButton from '@/composables/autoTeleport/useAutoTelep
 const { urlPrefix } = usePrefix()
 const preferencesStore = usePreferencesStore()
 const listingCartStore = useListingCartStore()
+const { closeListingCartModal } = useListingCartModal()
 const { $i18n } = useNuxtApp()
 const {
   transaction,
@@ -133,6 +134,7 @@ const {
 const { isTransactionSuccessful } = useTransactionSuccessful({
   status,
   isError,
+  isLoading,
 })
 
 const { chainSymbol, decimals } = useChain()
@@ -143,9 +145,7 @@ const floorPricePercentAdjustment = ref()
 const itemCount = ref(listingCartStore.count)
 const items = ref<ListCartItem[]>([])
 
-const isSuccessModalOpen = computed(
-  () => Boolean(items.value.length) && isTransactionSuccessful.value,
-)
+const isSuccessModalOpen = ref(false)
 
 const teleportTransitionTxFees = computed(() =>
   format(
@@ -283,29 +283,41 @@ async function confirm({ autoteleport }: AutoTeleportActionButtonConfirmEvent) {
       await submitListing()
     }
 
-    listingCartStore.clearListedItems()
     closeListingCartModal()
-    resetCartToDefaults()
+    onModalAnimation(() => {
+      listingCartStore.clearListedItems()
+      resetCartToDefaults()
+    })
   }
   catch (error) {
     warningMessage(error)
   }
 }
 
 const onClose = () => {
-  resetCartToDefaults()
   closeListingCartModal()
+  onModalAnimation(resetCartToDefaults)
 }
 
 const handleSuccessModalClose = () => {
-  items.value = []
+  isSuccessModalOpen.value = false
+  onModalAnimation(() => {
+    items.value = []
+    isTransactionSuccessful.value = false
+  })
 }
 
 const resetCartToDefaults = () => {
   fixedPrice.value = undefined
   floorPricePercentAdjustment.value = undefined
 }
 
+watch(computed(() => Boolean(items.value.length) && isTransactionSuccessful.value), (show) => {
+  if (show) {
+    isSuccessModalOpen.value = show
+  }
+})
+
 watch(
   () => listingCartStore.count,
   () => {
@@ -315,17 +327,10 @@ watch(
   },
 )
 
-watch(
-  () => preferencesStore.listingCartModalOpen,
-  (listingCartModalOpen) => {
-    if (!listingCartModalOpen) {
-      listingCartStore.clearDiscardedItems()
-    }
-  },
-)
-
-const closeListingCartModal = () =>
-  (preferencesStore.listingCartModalOpen = false)
+useModalIsOpenTracker({
+  isOpen: computed(() => preferencesStore.listingCartModalOpen),
+  onChange: () => listingCartStore.clearDiscardedItems(),
+})
 
 onBeforeMount(closeListingCartModal)
 onUnmounted(closeListingCartModal)

components/create/CreateCollection.vue

@@ -248,8 +248,9 @@ const displaySuccessModal = ref(false)
 const { transaction, status, isLoading, isError, blockNumber, txHash }
   = useTransaction()
 const { isTransactionSuccessful } = useTransactionSuccessful({
-  isError: isError,
-  status: status,
+  status,
+  isError,
+  isLoading,
 })
 const { urlPrefix, setUrlPrefix } = usePrefix()
 const { $consola, $i18n } = useNuxtApp()

components/offer/MakeOffer.vue

@@ -28,6 +28,15 @@
           <MakingOfferSingleItem v-if="offerStore.items.length === 1" />
         </div>
 
+        <div class="border-t pt-5 pb-4 px-6">
+          <div
+            class="flex justify-between text-k-grey border-b-k-shade"
+          >
+            <span>{{ $t('offer.offerFees') }}</span>
+            <span class="ml-2">{{ teleportTransitionTxFees }}</span>
+          </div>
+        </div>
+
         <div class="flex justify-between px-6">
           <AutoTeleportActionButton
             ref="autoTeleportButton"
@@ -55,7 +64,7 @@ import ModalBody from '@/components/shared/modals/ModalBody.vue'
 import { usePreferencesStore } from '@/stores/preferences'
 import type { Actions, TokenToOffer } from '@/composables/transaction/types'
 import { useMakingOfferStore } from '@/stores/makeOffer'
-import { calculateBalance } from '@/utils/format/balance'
+import format, { calculateBalance } from '@/utils/format/balance'
 import { warningMessage } from '@/utils/notification'
 import ModalIdentityItem from '@/components/shared/ModalIdentityItem.vue'
 import AutoTeleportActionButton, {
@@ -87,7 +96,7 @@ const {
 const { notification, lastSessionId, updateSession } = useLoadingNotfication()
 const { itemsInChain, hasInvalidOfferPrices, count } = storeToRefs(offerStore)
 
-const { decimals } = useChain()
+const { decimals, chainSymbol } = useChain()
 const { $i18n } = useNuxtApp()
 const items = ref<MakingOfferItem[]>([])
 
@@ -104,6 +113,14 @@ const getAction = (items: MakingOfferItem[]): Actions => {
   }
 }
 
+const teleportTransitionTxFees = computed(() =>
+  format(
+    (autoTeleportButton.value?.optimalTransition.txFees || 0) + OFFER_MINT_PRICE,
+    decimals.value,
+    chainSymbol.value,
+  ),
+)
+
 const { action, autoTeleport, autoTeleportButton, autoTeleportLoaded } = useAutoTeleportActionButton({
   getActionFn: () => getAction(itemsInChain.value),
 })

components/shared/SigningModal/SigningModal.vue

@@ -46,6 +46,7 @@ const { $i18n } = useNuxtApp()
 const { isTransactionSuccessful } = useTransactionSuccessful({
   isError: computed(() => props.isError),
   status: computed(() => props.status),
+  isLoading: computed(() => props.isLoading),
 })
 
 const isModalActive = ref(false)

composables/useListingCartModal.ts

@@ -50,6 +50,9 @@ export default ({
   const openListingCartModal = () =>
     (preferencesStore.listingCartModalOpen = true)
 
+  const closeListingCartModal = () =>
+    (preferencesStore.listingCartModalOpen = false)
+
   const clearItemsInChain = () => {
     listingCartStore.itemsInChain.forEach(item =>
       listingCartStore.removeItem(item.id),
@@ -76,5 +79,6 @@ export default ({
     listNftByShoppingCartItem,
     listNftByNftWithMetadata,
     openListingCartModal,
+    closeListingCartModal,
   }
 }