From 4057f84a1ce5aca77875dd7e71f41aef5006aa67 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Thu, 19 Sep 2024 11:23:21 +0500
Subject: [PATCH] add(offers): Visible second currency in the offer creation
 modal

---
 components/offer/OfferPriceInput.vue | 33 ++++++++++++++++++----------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/components/offer/OfferPriceInput.vue b/components/offer/OfferPriceInput.vue
index 088cd98cba..c373ec55ad 100644
--- a/components/offer/OfferPriceInput.vue
+++ b/components/offer/OfferPriceInput.vue
@@ -33,20 +33,27 @@
       </NeoButton>
     </div>
 
-    <div class="flex justify-end text-k-grey text-xs mt-3 gap-1">
-      {{ $t('general.balance') }}:
-      <span v-if="isSymbolMode">
-        {{ balance }} {{ chainSymbol }}
-      </span>
-      <span v-else>
-        {{ balanceUsd }} USD
+    <div class="flex justify-between text-xs mt-3">
+      <span class="text-k-grey">
+        ~ {{ formattedOppositeCurrency }}
       </span>
+
+      <div class="flex gap-1">
+        {{ $t('general.balance') }}:
+        <span v-if="isSymbolMode">
+          {{ balance }} {{ chainSymbol }}
+        </span>
+        <span v-else>
+          {{ balanceUsd }} USD
+        </span>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { NeoButton, NeoIcon } from '@kodadot1/brick'
+import { roundTo } from '@/utils/format/balance'
 
 const props = defineProps<{
   modelValue?: number | string
@@ -59,16 +66,20 @@ const fiatStore = useFiatStore()
 const emit = defineEmits(['update:modelValue'])
 
 const isSymbolMode = ref(true)
+const tokenAmount = ref<string | number | undefined>(props.modelValue || '')
+
 const tokenPrice = computed(() => fiatStore.getCurrentTokenValue(chainSymbol.value as Token) as number)
 const switchSymbolMode = () => {
   isSymbolMode.value = !isSymbolMode.value
 }
 
-const balanceUsd = computed(() => {
-  return balance.value * tokenPrice.value
-})
+const balanceUsd = computed(() => roundTo(balance.value * tokenPrice.value))
 
-const tokenAmount = ref<string | number | undefined>(props.modelValue || '')
+const formattedOppositeCurrency = computed(() => {
+  const value = roundTo(isSymbolMode.value ? Number(tokenAmount.value || 0) * tokenPrice.value : Number(tokenAmount.value || 0) / tokenPrice.value)
+  const symbol = isSymbolMode.value ? 'USD' : chainSymbol.value
+  return `${value} ${symbol}`
+})
 
 const model = computed({
   get: () => tokenAmount.value,