feat: Go to drop page button in calendar sidebar

components/drops/calendar/DropPreviewModal.vue

@@ -21,11 +21,24 @@
             @click="emit('close')" />
         </header>
 
-        <div v-if="dropCalendar.dropStartTime" class="!mt-6">
-          <NeoButton no-shadow rounded @click="isCreateEventModalActive = true">
+        <div class="!mt-6 flex flex-wrap gap-6">
+          <NeoButton
+            v-if="dropCalendar.dropStartTime"
+            no-shadow
+            rounded
+            @click="isCreateEventModalActive = true">
             {{ $t('scheduled') }}<span class="text-neutral-5 mx-2">•</span
             >{{ formattedDate }}
           </NeoButton>
+
+          <NeoButton
+            v-if="dropCalendar.alias"
+            variant="secondary-rounded"
+            icon-left="sparkles"
+            :tag="NuxtLink"
+            :to="`/${chain}/drops/${dropCalendar.alias}`">
+            {{ $t('drops.goToDropPage') }}
+          </NeoButton>
         </div>
 
         <div class="flex justify-between !mt-6">
@@ -124,23 +137,27 @@
 <script lang="ts" setup>
 import { NeoButton, NeoModal } from '@kodadot1/brick'
 import { format } from 'date-fns'
-import { useCollectionMinimal } from '~/components/collection/utils/useCollectionDetails'
+import { useCollectionMinimal } from '@/components/collection/utils/useCollectionDetails'
 import type { InternalDropCalendar } from './DropsCalendar.vue'
+import { chainPropListOf } from '@/utils/config/chain.config'
 
+const NuxtLink = resolveComponent('NuxtLink')
 const placeholder = 'TBA'
 const MOBILE_BREAKPOINT = 768
 
 const emit = defineEmits(['close'])
 const props = defineProps<{ dropCalendar?: InternalDropCalendar }>()
 
 const { $i18n } = useNuxtApp()
-const { decimalsOf } = useChain()
 const { width } = useWindowSize()
+const { urlPrefix } = usePrefix()
+
+const chain = computed(() => props.dropCalendar?.chain ?? urlPrefix.value)
 
 const { formatted: formattedPrice } = useAmount(
   computed(() => props.dropCalendar?.price || ''),
-  computed(() => decimalsOf('ahp')), // drops page only shows ahp drops
-  computed(() => 'DOT'),
+  computed(() => chainPropListOf(chain.value)?.tokenDecimals),
+  computed(() => chainPropListOf(chain.value)?.tokenSymbol),
 )
 
 const { collection } = useCollectionMinimal({

components/drops/calendar/DropsCalendar.vue

@@ -81,14 +81,19 @@ defineProps<{
   defaultSkeletonCount: number
 }>()
 
-const { data, pending } = useAsyncData(() => getDropCalendar(), {
-  transform: (items) => {
-    return items.map((item) => ({
-      ...item,
-      dropStartTime: getDropStartTime(item),
-    })) as InternalDropCalendar[]
+const { urlPrefix } = usePrefix()
+
+const { data, pending } = useAsyncData(
+  () => getDropCalendar({ chain: !isProduction ? [urlPrefix.value] : ['ahp'] }),
+  {
+    transform: (items) => {
+      return items.map((item) => ({
+        ...item,
+        dropStartTime: getDropStartTime(item),
+      })) as InternalDropCalendar[]
+    },
   },
-})
+)
 
 const previewDropCalendar = ref<InternalDropCalendar>()
 const body = ref(document.body)

locales/en.json

@@ -1541,6 +1541,7 @@
   "drops": {
     "title": "Generative Art Drops",
     "drops": "Drops",
+    "goToDropPage": "Go To Drop Page",
     "dropInformation": "Drop Information",
     "dropCalendar": "Drop Calendar",
     "pastArtDrops": "Past Art Drops",

services/fxart.ts

@@ -1,5 +1,6 @@
 import { $fetch, FetchError } from 'ofetch'
 import type { DropItem } from '@/params/types'
+import { Prefix } from '@kodadot1/static'
 
 const BASE_URL =
   window.location.host === 'kodadot.xyz'
@@ -157,14 +158,21 @@ export type DropCalendar = {
   holder_of: string | null
   location: string | null
   items: CalendarItem[]
+  alias: string | null
+  chain: Prefix | null
 }
 
 export type CalendarItem = {
   image: string
 }
 
-export const getDropCalendar = async () => {
+type GetCalendarsQuery = {
+  chain?: Prefix[]
+}
+
+export const getDropCalendar = async (query: GetCalendarsQuery = {}) => {
   return await api<DropCalendar[]>('/calendars', {
     method: 'GET',
+    query: query,
   })
 }