feat: Pricing on drop cards

components/drops/BasicDropCard.vue

@@ -45,11 +45,25 @@
           <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="Number(dropPrice)"
+                class="flex gap-1 items-baseline"
+              >
+                <span>{{ formattedPrice }}</span><span class="text-k-grey text-xs">USD</span>
               </div>
-            </slot>
+              <div
+                v-else
+              >
+                <span>{{ $t('free') }}</span>
+              </div>
+            </div>
+
             <CollectionDropCollectedBy
               v-if="ownerAddresses.length"
               :addresses="ownerAddresses"
@@ -74,9 +88,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 +106,7 @@ withDefaults(
     minted?: number
     ownerAddresses?: string[]
     dropCreator?: string | null
+    dropPrice?: string
   }>(),
   {
     loading: false,
@@ -107,6 +123,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">

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"
   />

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%"

components/drops/calendar/DropsCalendar.vue

@@ -61,6 +61,7 @@
               :time-tag-with-time="calendarHasTime(item)"
               :drop-prefix="item.chain"
               :drop-creator="item.creator"
+              :drop-price="item.price"
               @click="() => handleClick(item)"
             >
               <template

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 {