From bca42566faf1d719de465e08b8e12729ae5765f3 Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Sat, 5 Oct 2024 17:43:29 +0200
Subject: [PATCH] feat: offer fees displayed in the modal

---
 components/offer/MakeOffer.vue | 21 +++++++++++++++++++--
 locales/en.json                |  1 +
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/components/offer/MakeOffer.vue b/components/offer/MakeOffer.vue
index d4db16a6c4..23fd867e34 100644
--- a/components/offer/MakeOffer.vue
+++ b/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),
 })
diff --git a/locales/en.json b/locales/en.json
index 0fd11b81e2..ecaceecb47 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1485,6 +1485,7 @@
     "newOffer": "New Offer",
     "offerAccept": "Accepting Offer",
     "offerCreation": "Offer Creation",
+    "offerFees": "Offer Fee",
     "offerWithdrawl": "Offer Cancelation",
     "typeOffer": "Type An Offer",
     "yourOffer": "Your Offer",