From 5f38aac3f2500668b5d63cc374f10abff9909f91 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Mon, 5 Aug 2024 12:01:39 +0500
Subject: [PATCH 1/2] add(BasicDropCard.vue): `price` section

---
 components/drops/BasicDropCard.vue          | 28 +++++++++++++++++----
 components/drops/DropCard.vue               |  1 +
 components/drops/DropCardSkeleton.vue       |  2 +-
 components/drops/calendar/DropsCalendar.vue |  1 +
 composables/useAmount.ts                    |  2 +-
 5 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/components/drops/BasicDropCard.vue b/components/drops/BasicDropCard.vue
index 8912861b74..9ac368371d 100644
--- a/components/drops/BasicDropCard.vue
+++ b/components/drops/BasicDropCard.vue
@@ -45,11 +45,20 @@
           <div
             class="h-[28px] flex justify-between items-center flex-wrap gap-y-4 gap-x-2"
           >
-            <slot name="supply">
-              <div>
-                <span>{{ minted }}</span><span class="text-k-grey">/{{ dropMax }}</span>
+            <div class="flex gap-4">
+              <slot name="supply">
+                <div>
+                  <span>{{ minted }}</span><span class="text-k-grey text-xs">/{{ dropMax }}</span>
+                </div>
+              </slot>
+              <div
+                v-if="dropPrice"
+                class="flex gap-1 items-baseline"
+              >
+                <span>{{ formattedPrice }}</span><span class="text-k-grey text-xs">USD</span>
               </div>
-            </slot>
+            </div>
+
             <CollectionDropCollectedBy
               v-if="ownerAddresses.length"
               :addresses="ownerAddresses"
@@ -74,9 +83,10 @@
 <script setup lang="ts">
 import type { Prefix } from '@kodadot1/static'
 import type { DropStatus } from '@/components/drops/useDrops'
+import { chainPropListOf } from '@/utils/config/chain.config'
 
 const emit = defineEmits(['click'])
-withDefaults(
+const props = withDefaults(
   defineProps<{
     image: string | undefined
     name: string
@@ -91,6 +101,7 @@ withDefaults(
     minted?: number
     ownerAddresses?: string[]
     dropCreator?: string | null
+    dropPrice?: string
   }>(),
   {
     loading: false,
@@ -107,6 +118,13 @@ withDefaults(
 )
 
 const { placeholder } = useTheme()
+
+const chainPropList = chainPropListOf(props.dropPrefix)
+const { usd: formattedPrice } = useAmount(
+  computed(() => props.dropPrice),
+  toRef(chainPropList.tokenDecimals),
+  toRef(chainPropList.tokenSymbol),
+)
 </script>
 
 <style scoped lang="scss">
diff --git a/components/drops/DropCard.vue b/components/drops/DropCard.vue
index b67800ad47..5cb4d82121 100644
--- a/components/drops/DropCard.vue
+++ b/components/drops/DropCard.vue
@@ -12,6 +12,7 @@
     :drop-status="drop.status"
     :drop-max="drop.max || FALLBACK_DROP_COLLECTION_MAX"
     :drop-prefix="drop.chain"
+    :drop-price="drop.price"
     :minted="drop.minted"
     @click="click"
   />
diff --git a/components/drops/DropCardSkeleton.vue b/components/drops/DropCardSkeleton.vue
index 80984365b8..11681e1d78 100644
--- a/components/drops/DropCardSkeleton.vue
+++ b/components/drops/DropCardSkeleton.vue
@@ -59,7 +59,7 @@
       <div
         class="flex justify-between items-center flex-wrap gap-y-4 gap-x-2 w-full"
       >
-        <div class="w-16 flex gap-2">
+        <div class="w-32 flex gap-2">
           <NeoSkeleton
             height="28"
             width="100%"
diff --git a/components/drops/calendar/DropsCalendar.vue b/components/drops/calendar/DropsCalendar.vue
index 247922ae9a..8659959332 100644
--- a/components/drops/calendar/DropsCalendar.vue
+++ b/components/drops/calendar/DropsCalendar.vue
@@ -58,6 +58,7 @@
               :time-tag-with-time="calendarHasTime(item)"
               :drop-prefix="item.chain"
               :drop-creator="item.creator"
+              :drop-price="item.price"
               @click="() => handleClick(item)"
             >
               <template
diff --git a/composables/useAmount.ts b/composables/useAmount.ts
index f3c5cf4250..7e55ab93db 100644
--- a/composables/useAmount.ts
+++ b/composables/useAmount.ts
@@ -20,7 +20,7 @@ export default function (
       Number(tokenAmount.value) * Math.pow(10, -tokenDecimals.value),
       Number(getCurrentTokenValue(chainSymbol.value)),
     )
-    return value ? `$${value}` : ''
+    return typeof value === 'number' && value >= 0 ? `$${value}` : ''
   })
 
   return {

From c53cec46542e3fda17757f52756ce81926cd4aba Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Fri, 9 Aug 2024 11:06:34 +0500
Subject: [PATCH 2/2] add(BasicDropCard.vue): `free` text to 0 price drops

---
 components/drops/BasicDropCard.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/components/drops/BasicDropCard.vue b/components/drops/BasicDropCard.vue
index 9ac368371d..95ec0d990d 100644
--- a/components/drops/BasicDropCard.vue
+++ b/components/drops/BasicDropCard.vue
@@ -52,11 +52,16 @@
                 </div>
               </slot>
               <div
-                v-if="dropPrice"
+                v-if="Number(dropPrice)"
                 class="flex gap-1 items-baseline"
               >
                 <span>{{ formattedPrice }}</span><span class="text-k-grey text-xs">USD</span>
               </div>
+              <div
+                v-else
+              >
+                <span>{{ $t('free') }}</span>
+              </div>
             </div>
 
             <CollectionDropCollectedBy