{"version":3,"file":"1ienck-j.js","sources":["../../../../components/CollectionTopTable.vue","../../../../pages/collections/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ExclamationIcon } from '@heroicons/vue/outline';\nimport { BadgeCheckIcon } from '@heroicons/vue/solid';\nimport type { PropType } from 'vue';\nimport { differenceInMilliseconds, parseISO } from 'date-fns';\nimport Popper from 'vue3-popper';\nimport { useInfiniteScroll } from '~/composables/infinite-scroll';\nimport { getApiRoot } from '~/utilities/api';\nimport { formatXchPrice } from '~/utilities/chia-display-utils';\nimport { getUrlForCollection } from '~/utilities/url-slugs';\n\nconst props = defineProps({\n  intervalInDays: String as PropType<'7' | '30' | 'all'>,\n  limit: Number,\n  rows: { type: Number, default: 1 },\n  excludeSus: { type: Boolean, default: false },\n  hideNumTrades: { type: Boolean, default: false },\n  hideNumItems: { type: Boolean, default: false },\n});\n\nconst intervalInDays = toRef(props, 'intervalInDays');\n\nconst target = ref();\nconst { items: collections, pending } = useInfiniteScroll(\n  target,\n  () =>\n    `${getApiRoot()}/collections?interval=${intervalInDays.value}&include_nft_count=True&include_floor_price=True${\n      props.excludeSus ? '&exclude_sus=True' : ''\n    }`,\n  [intervalInDays],\n  props.limit || 12\n);\n\n// const sortDirection = ref(1);\n// const sortKey = ref('volume');\n\nconst isSuspicious = (collection: any) =>\n  collection.suspicious_activity_timeout_until &&\n  differenceInMilliseconds(parseISO(collection.suspicious_activity_timeout_until), new Date()) > 0;\n</script>\n<template>\n  <div>\n    <div class=\"mt-1 rounded-lg bg-white ring-1 ring-neutral-300 dark:bg-black dark:ring-neutral-600\">\n      <table class=\"min-w-full table-fixed\">\n        <thead>\n          <tr>\n            <th class=\"w-12 px-3 sm:py-3.5\"></th>\n            <th class=\"w-20 px-3 sm:py-3.5\"></th>\n            <CollectionTopTableHeader header-key=\"name\" hide-below=\"sm\">{{\n              $t('collections.collection')\n            }}</CollectionTopTableHeader>\n            <CollectionTopTableHeader header-key=\"volume\" hide-below=\"sm\" align=\"end\"\n              >{{ $t('collections.volume') }}\n            </CollectionTopTableHeader>\n            <CollectionTopTableHeader header-key=\"floor_price\" hide-below=\"sm\" align=\"end\"\n              >{{ $t('collections.floorPrice') }}\n            </CollectionTopTableHeader>\n            <CollectionTopTableHeader\n              v-if=\"!props.hideNumTrades\"\n              header-key=\"trade_count\"\n              hide-below=\"md\"\n              align=\"center\"\n              >{{ $t('collections.numTrades') }}\n            </CollectionTopTableHeader>\n            <CollectionTopTableHeader v-if=\"!props.hideNumItems\" header-key=\"num_items\" hide-below=\"lg\" align=\"center\"\n              >{{ $t('collections.numItems') }}\n            </CollectionTopTableHeader>\n          </tr>\n        </thead>\n        <tbody>\n          <NuxtLink\n            v-for=\"(collection, planIdx) in collections\"\n            :key=\"collection.id\"\n            v-slot=\"{ navigate }\"\n            :to=\"getUrlForCollection(collection)\"\n            custom\n          >\n            <tr class=\"cursor-pointer hover:bg-neutral-50 dark:hover:bg-neutral-900\" @click=\"navigate\">\n              <td\n                :class=\"[\n                  planIdx === 0\n                    ? 'border-neutral-300 dark:border-neutral-600 sm:border-t'\n                    : 'border-t border-neutral-200 dark:border-neutral-700',\n                  'relative py-4 pl-4',\n                ]\"\n              >\n                <div class=\"text-center text-xl font-bold text-neutral-600 dark:text-neutral-300\">\n                  {{ planIdx + 1 }}\n                </div>\n              </td>\n              <td\n                :class=\"[\n                  planIdx === 0\n                    ? 'border-neutral-300 dark:border-neutral-600 sm:border-t'\n                    : 'border-t border-neutral-200 dark:border-neutral-700',\n                  'relative py-4 pl-4 pr-3 lg:text-lg',\n                ]\"\n              >\n                <div class=\"aspect-h-1 aspect-w-1 group-hover:opacity-75\">\n                  <div v-if=\"collection.creator?.verification_state === 2\" class=\"flex items-center justify-center\">\n                    <ExclamationIcon class=\"h-1/2 w-1/2 text-red-600\" />\n                  </div>\n                  <img\n                    v-else-if=\"collection.thumbnail_uri\"\n                    :alt=\"`${collection.name} image`\"\n                    :src=\"collection.thumbnail_uri\"\n                    loading=\"lazy\"\n                    :class=\"isSuspicious(collection) ? 'opacity-50' : ''\"\n                    class=\"aspect-1 rounded-md object-cover\"\n                  />\n                </div>\n              </td>\n              <td\n                :class=\"[\n                  planIdx === 0\n                    ? 'border-neutral-300 dark:border-neutral-600 sm:border-t'\n                    : 'border-t border-neutral-200 dark:border-neutral-700',\n                  'lg:text-md relative py-8 pl-4 pr-3',\n                ]\"\n              >\n                <div\n                  :class=\"isSuspicious(collection) ? 'opacity-50' : ''\"\n                  class=\"flex items-center gap-1 font-semibold text-neutral-900 dark:text-neutral-50\"\n                >\n                  {{ collection.name }}\n                  <BadgeCheckIcon\n                    v-if=\"collection.creator?.verification_state === 1\"\n                    class=\"h-5 w-5 text-emerald-600\"\n                  />\n                </div>\n                <div class=\"mt-1 flex flex-col font-medium text-neutral-900 dark:text-neutral-50 lg:hidden\">\n                  <span class=\"flex items-center gap-1 sm:hidden\">\n                    <span :class=\"isSuspicious(collection) ? 'opacity-50' : ''\">\n                      Volume: {{ formatXchPrice(collection.volume) }}\n                    </span>\n                    <Popper arrow hover content=\"Suspicious trading activity (inflated volume)\">\n                      <ExclamationIcon v-if=\"isSuspicious(collection)\" class=\"h-5 w-5 text-orange-600\" /> </Popper\n                  ></span>\n                  <span :class=\"isSuspicious(collection) ? 'opacity-50' : ''\" class=\"sm:hidden\"\n                    >Floor: {{ collection.floor_price ? formatXchPrice(collection.floor_price) : '---' }}</span\n                  >\n                  <span\n                    v-if=\"!props.hideNumTrades\"\n                    :class=\"isSuspicious(collection) ? 'opacity-50' : ''\"\n                    class=\"md:hidden\"\n                    >Trades: {{ collection.trade_count.toLocaleString('en') }}</span\n                  >\n                  <span v-if=\"!props.hideNumItems\" class=\"md:hidden\"\n                    >Items: {{ collection.nft_count.toLocaleString('en') }}</span\n                  >\n                </div>\n              </td>\n              <td\n                :class=\"[\n                  planIdx === 0\n                    ? 'border-neutral-300 dark:border-neutral-600 sm:border-t'\n                    : 'border-t border-neutral-200 dark:border-neutral-700',\n                  'lg:text-md hidden w-44 px-3 py-3.5 font-bold text-neutral-900 dark:text-neutral-50 sm:table-cell',\n                ]\"\n              >\n                <div class=\"flex items-center justify-end gap-1\">\n                  <Popper arrow hover content=\"Suspicious trading activity (inflated volume)\">\n                    <ExclamationIcon v-if=\"isSuspicious(collection)\" class=\"h-5 w-5 text-orange-600\" />\n                  </Popper>\n                  <span :class=\"isSuspicious(collection) ? 'opacity-50' : ''\">\n                    {{ formatXchPrice(collection.volume) }}\n                  </span>\n                </div>\n              </td>\n              <td\n                :class=\"[\n                  isSuspicious(collection) ? 'opacity-50' : '',\n                  planIdx === 0\n                    ? 'border-neutral-300 dark:border-neutral-600 sm:border-t'\n                    : 'border-t border-neutral-200 dark:border-neutral-700',\n                  'lg:text-md hidden w-36 px-3 py-3.5 font-bold text-neutral-900 dark:text-neutral-50 sm:table-cell',\n                ]\"\n              >\n                <div class=\"flex items-center justify-end gap-1\">\n                  <span>\n                    {{ collection.floor_price ? formatXchPrice(collection.floor_price) : '---' }}\n                  </span>\n                </div>\n              </td>\n              <td\n                v-if=\"!props.hideNumTrades\"\n                :class=\"[\n                  isSuspicious(collection) ? 'opacity-50' : '',\n                  planIdx === 0\n                    ? 'border-neutral-300 dark:border-neutral-600 sm:border-t'\n                    : 'border-t border-neutral-200 dark:border-neutral-700',\n                  'lg:text-md hidden w-36 px-3 py-3.5 text-center font-medium text-neutral-900 dark:text-neutral-50 md:table-cell',\n                ]\"\n              >\n                {{ collection.trade_count.toLocaleString('en') }}\n              </td>\n              <td\n                v-if=\"!props.hideNumItems\"\n                :class=\"[\n                  isSuspicious(collection) ? 'opacity-50' : '',\n                  planIdx === 0\n                    ? 'border-neutral-300 dark:border-neutral-600 sm:border-t'\n                    : 'border-t border-neutral-200 dark:border-neutral-700',\n                  'lg:text-md hidden w-44 px-3 py-3.5 text-center font-medium text-neutral-900 dark:text-neutral-50 lg:table-cell',\n                ]\"\n              >\n                {{ collection.nft_count.toLocaleString('en') }}\n              </td>\n            </tr>\n          </NuxtLink>\n          <template v-if=\"pending && !collections?.length\">\n            <tr v-for=\"index in 10\" :key=\"index\" class=\"cursor-pointer hover:bg-emerald-50\">\n              <td\n                :class=\"[\n                  index === 0\n                    ? 'border-neutral-300 dark:border-neutral-600 sm:border-t'\n                    : 'border-t border-neutral-200 dark:border-neutral-700',\n                  'relative py-4 pl-4 text-sm sm:pl-6',\n                ]\"\n              ></td>\n              <td\n                :class=\"[\n                  index === 0\n                    ? 'border-neutral-300 dark:border-neutral-600 sm:border-t'\n                    : 'border-t border-neutral-200 dark:border-neutral-700',\n                  'relative py-4 pl-4 text-sm sm:pl-6',\n                ]\"\n              >\n                <div class=\"aspect-h-1 aspect-w-1 group-hover:opacity-75\">\n                  <div class=\"h-full w-full animate-pulse rounded-md bg-neutral-100 dark:bg-neutral-800\"></div>\n                </div>\n              </td>\n              <td\n                :class=\"[\n                  index === 0\n                    ? 'border-neutral-300 dark:border-neutral-600 sm:border-t'\n                    : 'border-t border-neutral-200 dark:border-neutral-700',\n                  'relative py-8 pl-4 pr-3 lg:text-lg',\n                ]\"\n              >\n                <div class=\"flex items-center gap-1 font-semibold text-neutral-900 dark:text-neutral-50\">\n                  <div class=\"h-6 w-3/4 animate-pulse rounded-full bg-neutral-100 dark:bg-neutral-800\"></div>\n                </div>\n              </td>\n              <td\n                :class=\"[\n                  index === 0\n                    ? 'border-neutral-300 dark:border-neutral-600 sm:border-t'\n                    : 'border-t border-neutral-200 dark:border-neutral-700',\n                  'hidden w-72 px-3 py-3.5 sm:table-cell',\n                ]\"\n              >\n                <div class=\"flex justify-end\">\n                  <div class=\"h-6 w-3/4 animate-pulse rounded-full bg-neutral-100 dark:bg-neutral-800\"></div>\n                </div>\n              </td>\n              <td\n                :class=\"[\n                  index === 0\n                    ? 'border-neutral-300 dark:border-neutral-600 sm:border-t'\n                    : 'border-t border-neutral-200 dark:border-neutral-700',\n                  'hidden w-36 px-3 py-3.5 font-medium text-neutral-900 dark:text-neutral-50 md:table-cell lg:text-lg',\n                ]\"\n              >\n                <div class=\"flex justify-end\">\n                  <div class=\"h-6 w-3/4 animate-pulse rounded-full bg-neutral-100 dark:bg-neutral-800\"></div>\n                </div>\n              </td>\n              <td\n                v-if=\"!props.hideNumTrades\"\n                :class=\"[\n                  index === 0\n                    ? 'border-neutral-300 dark:border-neutral-600 sm:border-t'\n                    : 'border-t border-neutral-200 dark:border-neutral-700',\n                  'hidden w-36 px-3 py-3.5 font-medium text-neutral-900 dark:text-neutral-50 lg:table-cell lg:text-lg',\n                ]\"\n              >\n                <div class=\"flex justify-center\">\n                  <div class=\"h-6 w-3/4 animate-pulse rounded-full bg-neutral-100 dark:bg-neutral-800\"></div>\n                </div>\n              </td>\n              <td\n                v-if=\"!props.hideNumItems\"\n                :class=\"[\n                  index === 0\n                    ? 'border-neutral-300 dark:border-neutral-600 sm:border-t'\n                    : 'border-t border-neutral-200 dark:border-neutral-700',\n                  'hidden w-44 px-3 py-3.5 font-medium text-neutral-900 dark:text-neutral-50 lg:table-cell lg:text-lg',\n                ]\"\n              >\n                <div class=\"flex justify-center\">\n                  <div class=\"h-6 w-3/4 animate-pulse rounded-full bg-neutral-100 dark:bg-neutral-800\"></div>\n                </div>\n              </td>\n            </tr>\n          </template>\n        </tbody>\n      </table>\n    </div>\n    <div v-if=\"collections && !props.limit\" ref=\"target\" />\n  </div>\n</template>\n\n<style scoped>\n:deep(.popper) {\n  --popper-theme-background-color: #333333;\n  --popper-theme-background-color-hover: #333333;\n  --popper-theme-text-color: #ffffff;\n  --popper-theme-border-width: 0px;\n  --popper-theme-border-style: solid;\n  --popper-theme-border-radius: 12px;\n  --popper-theme-padding: 4px 8px;\n  --popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25);\n  font-size: 12px;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { useHead } from '#app';\nimport { ref } from 'vue';\nimport { BASE_TITLE } from '~/utilities/constants';\n\nuseHead({\n  title: `Top Collections ${BASE_TITLE}`,\n  meta: [{ property: 'og:title', content: `Top Collections ${BASE_TITLE}` }],\n});\n\nconst route = useRoute();\nconst router = useRouter();\n\nconst intervalInDays = ref(route.query.interval ? route.query.interval : '30');\nwatch(intervalInDays, (intervalInDays) => {\n  router.replace({\n    path: route.path,\n    query: { interval: intervalInDays },\n  });\n});\n</script>\n\n<template>\n  <div>\n    <div>\n      <Container>\n        <div class=\"py-8 sm:py-16\">\n          <div class=\"text-center\">\n            <p\n              class=\"text-4xl font-extrabold text-neutral-900 dark:text-neutral-50 sm:text-5xl sm:tracking-tight lg:text-5xl\"\n            >\n              {{ $t('collections.topCollections') }}\n            </p>\n          </div>\n        </div>\n        <div class=\"w-full\">\n          <div class=\"mb-4 flex justify-center\">\n            <span class=\"relative z-0 inline-flex rounded-md shadow-sm\">\n              <button\n                type=\"button\"\n                :class=\"[\n                  intervalInDays === '7' ? 'z-10 border-emerald-500 outline-none ring-1 ring-emerald-500' : '',\n                  'relative inline-flex items-center rounded-l-md border border-neutral-300 bg-white px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-50 dark:border-neutral-600 dark:bg-black dark:text-neutral-200 dark:hover:bg-neutral-900 ',\n                ]\"\n                @click=\"intervalInDays = '7'\"\n              >\n                {{ $t('collections.days7') }}\n              </button>\n              <button\n                type=\"button\"\n                :class=\"[\n                  intervalInDays === '30' ? 'z-10 border-emerald-500 outline-none ring-1 ring-emerald-500' : '',\n                  'relative inline-flex items-center border border-neutral-300 bg-white px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-50 dark:border-neutral-600 dark:bg-black dark:text-neutral-200 dark:hover:bg-neutral-900 ',\n                ]\"\n                @click=\"intervalInDays = '30'\"\n              >\n                {{ $t('collections.days30') }}\n              </button>\n              <button\n                type=\"button\"\n                :class=\"[\n                  intervalInDays === 'all' ? 'z-10 border-emerald-500 outline-none ring-1 ring-emerald-500' : '',\n                  'relative inline-flex items-center rounded-r-md border border-neutral-300 bg-white px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-50 dark:border-neutral-600 dark:bg-black dark:text-neutral-200 dark:hover:bg-neutral-900 ',\n                ]\"\n                @click=\"intervalInDays = 'all'\"\n              >\n                {{ $t('collections.allTime') }}\n              </button>\n            </span>\n          </div>\n          <CollectionTopTable :interval-in-days=\"intervalInDays\" />\n        </div>\n      </Container>\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","intervalInDays","toRef","target","ref","collections","pending","useInfiniteScroll","getApiRoot","isSuspicious","collection","differenceInMilliseconds","parseISO","useHead","BASE_TITLE","route","useRoute","router","useRouter","watch"],"mappings":"+lFAWA,MAAMA,EAAQC,EASRC,EAAiBC,EAAMH,EAAO,gBAAgB,EAE9CI,EAASC,IACT,CAAE,MAAOC,EAAa,QAAAC,CAAY,EAAAC,EACtCJ,EACA,IACE,GAAGK,GAAY,yBAAyBP,EAAe,KAAK,mDAC1DF,EAAM,WAAa,oBAAsB,EAC3C,GACF,CAACE,CAAc,EACfF,EAAM,OAAS,EAAA,EAMXU,EAAgBC,GACpBA,EAAW,mCACXC,EAAyBC,EAASF,EAAW,iCAAiC,EAAO,IAAA,IAAM,EAAI,+yMCjCzFG,EAAA,CACN,MAAO,mBAAmBC,CAAU,GACpC,KAAM,CAAC,CAAE,SAAU,WAAY,QAAS,mBAAmBA,CAAU,GAAI,CAAA,CAC1E,EAED,MAAMC,EAAQC,IACRC,EAASC,IAETjB,EAAiBG,EAAIW,EAAM,MAAM,SAAWA,EAAM,MAAM,SAAW,IAAI,EACvE,OAAAI,EAAAlB,EAAiBA,GAAmB,CACxCgB,EAAO,QAAQ,CACb,KAAMF,EAAM,KACZ,MAAO,CAAE,SAAUd,CAAe,CAAA,CACnC,CAAA,CACF"}