feat: drop creators to artists offchain profiles & base calendar drops

components/collection/drop/CreatedBy.vue

@@ -1,19 +1,23 @@
 <template>
-  <div
-    class="rounded-full min-w-[236px] h-[62px] md:w-auto border border-k-shade inline-flex justify-start px-2.5"
-    data-testid="drop-created-by-container">
-    <div class="flex items-center">
-      <Avatar :size="48" :value="address" />
-      <div class="ml-3.5">
-        <NuxtLink :to="`/${urlPrefix}/u/${address}`">
-          <IdentityIndex :address="address" />
-        </NuxtLink>
-        <div class="text-k-grey is-size-6">
-          {{ shortenedAddress }}
+  <IdentityModuleIdentityPopover>
+    <template #content>
+      <div
+        class="rounded-full min-w-[236px] h-[62px] md:w-auto border border-k-shade inline-flex justify-start px-2.5"
+        data-testid="drop-created-by-container">
+        <div class="flex items-center">
+          <ProfileAvatar :size="48" :address="address" />
+          <div class="ml-3.5">
+            <NuxtLink :to="`/${urlPrefix}/u/${address}`">
+              {{ identity?.display || shortenedAddress }}
+            </NuxtLink>
+            <div class="text-k-grey is-size-6">
+              {{ shortenedAddress }}
+            </div>
+          </div>
         </div>
       </div>
-    </div>
-  </div>
+    </template>
+  </IdentityModuleIdentityPopover>
 </template>
 
 <script lang="ts" setup>
@@ -23,7 +27,14 @@ const props = defineProps<{
   address: string
 }>()
 
-const { shortenedAddress } = useIdentity({
+const { shortenedAddress, identity } = useIdentity({
   address: computed(() => props.address),
 })
+
+provide(
+  'address',
+  computed(() => props.address),
+)
+provide('shortenedAddress', shortenedAddress)
+provide('identity', identity)
 </script>

components/collection/drop/GenerativeLayout.vue

@@ -5,11 +5,11 @@
       <div class="columns is-variable is-4-tablet">
         <div class="column is-half-desktop mobile-padding lg:max-w-[600px]">
           <div class="flex justify-between flex-wrap max-w-[504px]">
-            <div class="mt-7 mr-2">
+            <div v-if="address" class="mt-7 mr-2">
               <div class="font-bold is-size-5 mb-4 capitalize">
                 {{ $t('tooltip.created') }}
               </div>
-              <CollectionDropCreatedBy v-if="address" :address="address" />
+              <CollectionDropCreatedBy :address="address" />
             </div>
             <div v-if="ownerAddresses.length" class="mt-7">
               <div class="font-bold is-size-5 mb-4 capitalize">
@@ -100,7 +100,7 @@ const { collection: collectionInfo } = useCollectionMinimal({
 
 const divider = ref()
 
-const address = computed(() => collectionInfo.value?.currentOwner)
+const address = computed(() => drop.value?.creator)
 
 const { owners } = useCollectionActivity({
   collectionId: computed(() => drop.value?.collection),

components/drops/BasicDropCard.vue

@@ -16,10 +16,20 @@
 
         <div
           class="min-h-[115px] py-5 px-2 sm:!px-5 flex flex-col justify-between gap-4 border-t border-card-border-color">
-          <span
-            class="font-bold overflow-hidden text-ellipsis whitespace-nowrap text-xl"
-            >{{ name }}</span
-          >
+          <div class="flex flex-col gap-2 min-h-[60px]">
+            <div class="flex justify-between items-center">
+              <span
+                class="font-bold overflow-hidden text-ellipsis whitespace-nowrap text-xl"
+                >{{ name }}</span
+              >
+              <DropsChainPill :prefix="dropPrefix" />
+            </div>
+
+            <div v-if="dropCreator" class="flex gap-2 items-center">
+              <ProfileAvatar :size="24" :address="dropCreator" />
+              <IdentityIndex :address="dropCreator" hide-identity-popover />
+            </div>
+          </div>
           <div
             class="h-[28px] flex justify-between items-center flex-wrap gap-y-4 gap-x-2">
             <slot name="supply">
@@ -58,14 +68,15 @@ withDefaults(
     name: string
     dropStartTime?: Date | null
     dropStatus: DropStatus
-    dropPrefix?: Prefix
+    dropPrefix?: Prefix | null
     loading?: boolean
     cardIs?: string | object
     to?: string
     timeTagWithTime?: boolean
     dropMax?: number
     minted?: number
     ownerAddresses?: string[]
+    dropCreator?: string | null
   }>(),
   {
     loading: false,
@@ -76,6 +87,7 @@ withDefaults(
     minted: 0,
     dropMax: 0,
     timeTagWithTime: false,
+    dropCreator: undefined,
     ownerAddresses: () => [],
   },
 )

components/drops/ChainPill.vue

@@ -0,0 +1,31 @@
+<template>
+  <div
+    v-if="prefix"
+    class="flex items-center rounded-full bg-neutral-3 dark:bg-neutral-11 px-[6px] py-[3px] h-[22px] gap-[0.375rem]">
+    <img
+      v-if="dropIcon"
+      :src="dropIcon"
+      class="w-[12.5px] aspect-square flex-shrink-0"
+      alt="chain icon" />
+    <span class="text-sm uppercase">{{
+      UserFriendlyPrefixNameMap[prefix] ?? prefix
+    }}</span>
+  </div>
+</template>
+<script lang="ts" setup>
+import { Prefix } from '@kodadot1/static'
+
+const UserFriendlyPrefixNameMap: Partial<Record<Prefix, string>> = {
+  ahp: 'dot',
+  base: 'base',
+  ahk: 'ahk',
+}
+
+const props = defineProps<{
+  prefix: Prefix | null
+}>()
+
+const { getChainIcon } = useIcon()
+
+const dropIcon = computed(() => getChainIcon(props.prefix))
+</script>

components/drops/DropCard.vue

@@ -6,10 +6,12 @@
     :name="drop.collection.name"
     :image="image"
     :show-time-tag="Boolean(drop.dropStartTime || ended)"
+    :owner-addresses="ownerAddresses"
+    :drop-creator="drop.creator"
     :drop-start-time="drop.dropStartTime"
     :drop-status="drop.status"
-    :owner-addresses="ownerAddresses"
     :drop-max="drop.max || FALLBACK_DROP_COLLECTION_MAX"
+    :drop-prefix="drop.chain"
     :minted="drop.minted" />
 </template>
 

components/drops/DropCardSkeleton.vue

@@ -6,8 +6,44 @@
 
     <div
       class="min-h-[115px] py-5 px-2 sm:!px-5 flex flex-col justify-between gap-4">
-      <div class="w-52">
-        <NeoSkeleton no-margin class="w-full" :rounded="false" height="28" />
+      <div class="flex justify-between min-h-[60px]">
+        <div class="flex flex-col gap-2">
+          <div class="w-40">
+            <NeoSkeleton
+              no-margin
+              class="w-full"
+              :rounded="false"
+              height="28" />
+          </div>
+          <div class="w-32 !h-6 flex gap-2">
+            <div class="w-[22px] flex-shrink-0">
+              <NeoSkeleton
+                no-margin
+                class="w-full"
+                circle
+                height="24"
+                width="24" />
+            </div>
+
+            <div class="w-full">
+              <NeoSkeleton
+                no-margin
+                class="w-full"
+                height="24"
+                :rounded="false" />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class="w-[58px] relative">
+            <NeoSkeleton
+              no-margin
+              class="w-full"
+              border-radius="5rem"
+              full-size
+              height="22" />
+          </div>
+        </div>
       </div>
 
       <div

components/drops/calendar/DropPreviewModal.vue

@@ -95,6 +95,14 @@
                 )
               }}</span>
             </div>
+
+            <div class="flex gap-3 items-center">
+              <span class="text-k-grey">{{ $t('chain') }}:</span>
+              <DropsChainPill
+                v-if="dropCalendar?.chain"
+                :prefix="dropCalendar?.chain" />
+              <span v-else>{{ placeholder }}</span>
+            </div>
           </div>
         </div>
 

components/drops/calendar/DropsCalendar.vue

@@ -45,6 +45,8 @@
               :drop-status="DropStatus.SCHEDULED"
               :drop-max="item.supply as number"
               :time-tag-with-time="calendarHasTime(item)"
+              :drop-prefix="item.chain"
+              :drop-creator="item.creator"
               @click="() => handleClick(item)">
               <template v-if="item.supply === null" #supply>
                 <span class="text-k-grey">
@@ -65,6 +67,7 @@
 <script lang="ts" setup>
 import { DropStatus } from '@/components/drops/useDrops'
 import { NeoButton, NeoIcon } from '@kodadot1/brick'
+import { Prefix } from '@kodadot1/static'
 import { addMonths, format } from 'date-fns'
 import DropPreviewModal from './DropPreviewModal.vue'
 import { DropCalendar, getDropCalendar } from '@/services/fxart'
@@ -83,8 +86,15 @@ defineProps<{
 
 const { urlPrefix } = usePrefix()
 
+const dropCalendarChains: Prefix[] = ['ahp', 'base']
+
 const { data, pending } = useAsyncData(
-  () => getDropCalendar({ chain: !isProduction ? [urlPrefix.value] : ['ahp'] }),
+  () =>
+    getDropCalendar({
+      chain: !isProduction
+        ? [...new Set([urlPrefix.value, ...dropCalendarChains])]
+        : dropCalendarChains,
+    }),
   {
     transform: (items) => {
       return items.map((item) => ({

components/drops/useDrops.ts

@@ -25,6 +25,7 @@ export interface Drop {
   status: DropStatus
   image?: string
   banner?: string
+  creator?: string
 }
 
 export enum DropStatus {

components/identity/IdentityIndex.vue

@@ -63,15 +63,12 @@ const showIdentityBadge = computed(() =>
   Boolean(props.showBadge && hasIdentity.value),
 )
 
-provide('address', props.address)
 provide(
-  'shortenedAddress',
-  computed(() => shortenedAddress.value),
-)
-provide(
-  'identity',
-  computed(() => identity.value),
+  'address',
+  computed(() => props.address),
 )
+provide('shortenedAddress', shortenedAddress)
+provide('identity', identity)
 
 const emit = defineEmits(['change'])
 

components/identity/module/IdentityPopoverFooter.vue

@@ -57,7 +57,7 @@ const GalleryCard = defineAsyncComponent(
 
 const NFT_AMOUNT = 2
 
-const address = inject('address') as string
+const address = inject('address') as ComputedRef<string>
 
 const { urlPrefix } = usePrefix()
 const { totalCreated } = useIdentityStats({
@@ -68,7 +68,7 @@ const {
   data: followersData,
   refresh,
   pending: loading,
-} = useAsyncData(() => fetchFollowersOf(address))
+} = useAsyncData(() => fetchFollowersOf(address.value))
 
 const followers = computed(() =>
   loading.value ? 0 : followersData.value?.totalCount || 0,
@@ -82,12 +82,12 @@ const { data } = useSearchNfts({
           OR: [
             {
               // created
-              issuer_eq: address,
+              issuer_eq: address.value,
             },
             {
               // bought
-              issuer_not_eq: address,
-              currentOwner_eq: address,
+              issuer_not_eq: address.value,
+              currentOwner_eq: address.value,
             },
           ],
         },

components/identity/utils/useIdentityStats.ts

@@ -4,7 +4,7 @@ import { useIdentityMintStore } from '@/stores/identityMint'
 import { formatToNow } from '@/utils/format/time'
 import buyEventByProfile from '@/queries/subsquid/general/buyEventByProfile.query'
 
-const useLastBought = ({ address }) => {
+const useLastBought = ({ address }: { address: Ref<string> }) => {
   const lastBoughtDate = ref(new Date())
 
   const { data } = useAsyncQuery({
@@ -48,14 +48,18 @@ const cacheTotalCount = ({ data, totalCreated }) => {
     created: {
       totalCount: totalCreated,
     },
-    firstMintDate: data.value?.firstMint[0]?.createdAt || new Date(),
+    firstMintDate: data?.value?.firstMint[0]?.createdAt || new Date(),
     updatedAt: Date.now(),
   }
 
   return cacheData
 }
 
-export default function useIdentityStats({ address }) {
+export default function useIdentityStats({
+  address,
+}: {
+  address: Ref<string>
+}) {
   const identityMintStore = useIdentityMintStore()
 
   const totalCreated = ref(0)
@@ -65,7 +69,7 @@ export default function useIdentityStats({ address }) {
   const { data: stats } = useGraphql({
     queryName: 'userStatsByAccount',
     variables: {
-      account: address,
+      account: address.value,
     },
   })
 
@@ -88,14 +92,14 @@ export default function useIdentityStats({ address }) {
     firstMintDate.value = cacheData.firstMintDate
 
     identityMintStore.setIdentity({
-      address,
+      address: address.value,
       cacheData,
     })
   }
 
   const fetchNFTStats = () => {
     // if cache exist and within 12h
-    const data = identityMintStore.getIdentityMintFor(address)
+    const data = identityMintStore.getIdentityMintFor(address.value)
     if (data?.updatedAt && isAfter(data.updatedAt, subHours(Date.now(), 12))) {
       return handleNFTStats({ data, type: 'cache' })
     }