@visualizevalue/mint-app-base 0.2.0 → 0.3.0

package/components/Collected/ItemCard.vue

@@ -0,0 +1,39 @@
+<template>
+  <article class="collected-item-card">
+    <Image
+      v-if="artifact.image"
+      :src="artifact.image"
+      :alt="artifact.name"
+      :aspect-ratio="1"
+    />
+    <ImageVoid v-else />
+    <CardLink
+      :to="{
+        name: 'id-collection-tokenId',
+        params: {
+          id: artifact.collection.owner,
+          collection: artifact.collection.address,
+          tokenId: `${artifact.id}`,
+        },
+      }"
+    >{{ $t('token.view') }} {{ artifact.name }}</CardLink>
+  </article>
+</template>
+
+<script setup lang="ts">
+import type { OwnershipArtifact } from '~/utils/types'
+
+defineProps<{
+  artifact: OwnershipArtifact
+}>()
+</script>
+
+<style scoped>
+.collected-item-card {
+  position: relative;
+
+  :deep(a) {
+    z-index: 2;
+  }
+}
+</style>

package/components/CollectedItems.client.vue

@@ -0,0 +1,217 @@
+<template>
+  <section v-if="ownerships.length" class="collected-items">
+    <slot name="before" :ownerships="ownerships" />
+
+    <div class="collected-items-grid">
+      <CollectedItemCard
+        v-for="ownership in ownerships"
+        :key="`${ownership.artifact.collection.address}-${ownership.artifact.id}`"
+        :artifact="ownership.artifact"
+      />
+    </div>
+
+    <div ref="loadMoreTrigger" class="load-more-trigger">
+      <Loading v-if="loadingMore" :txt="$t('collected.loading')" />
+    </div>
+  </section>
+  <section v-else-if="! loading" class="collected-items-empty">
+    <slot name="before" :ownerships="[]" />
+    <template v-if="isMe">
+      <p>{{ $t('collected.empty') }}</p>
+    </template>
+    <template v-else>
+      <p>{{ $t('collected.empty_other') }}</p>
+    </template>
+  </section>
+  <section v-else>
+    <slot name="before" :ownerships="[]" />
+    <Loading :txt="$t('collected.loading')" />
+  </section>
+</template>
+
+<script setup lang="ts">
+import { useIntersectionObserver } from '@vueuse/core'
+import type { Ownership } from '~/utils/types'
+
+interface PageInfo {
+  hasNextPage: boolean
+  endCursor: string | null
+}
+
+interface OwnershipsResponse {
+  data: {
+    ownerships: {
+      items: Ownership[]
+      pageInfo: PageInfo
+      totalCount: number
+    }
+  }
+  errors?: Array<{ message: string }>
+}
+
+const props = defineProps<{
+  id: string
+}>()
+
+const id = computed(() => props.id)
+const isMe = useIsMeCheck(id)
+const endpoints = useIndexerEndpoints()
+const artistScope = useArtistScope()
+const store = useOnchainStore()
+
+const scopedCollections = computed(() => {
+  if (!artistScope) return null
+  const collections = store.forArtist(artistScope as `0x${string}`)
+  return collections.map(c => c.address)
+})
+
+const ownerships = ref<Ownership[]>([])
+const hasNextPage = ref(false)
+const endCursor = ref<string | null>(null)
+const loading = ref(true)
+const loadingMore = ref(false)
+const loadMoreTrigger = ref<HTMLElement | null>(null)
+
+const buildQuery = (cursor?: string | null) => {
+  const filters = [`account: "${props.id}"`, `balance_gt: "0"`]
+
+  if (scopedCollections.value && scopedCollections.value.length > 0) {
+    const addresses = scopedCollections.value.map(a => `"${a}"`).join(', ')
+    filters.push(`collection_in: [${addresses}]`)
+  }
+
+  return `
+    query Ownerships {
+      ownerships(
+        where: { ${filters.join(', ')} }
+        limit: 24
+        orderBy: "created_at"
+        orderDirection: "desc"
+        ${cursor ? `after: "${cursor}"` : ''}
+      ) {
+        items {
+          artifact {
+            id
+            name
+            image
+            collection {
+              address
+              owner
+              name
+            }
+          }
+          balance
+          created_at
+          updated_at
+        }
+        pageInfo {
+          hasNextPage
+          endCursor
+        }
+        totalCount
+      }
+    }
+  `
+}
+
+const fetchOwnerships = async (cursor?: string | null): Promise<OwnershipsResponse['data']['ownerships']> => {
+  let lastError: Error | undefined
+  for (const endpoint of endpoints.value) {
+    try {
+      const response = await $fetch<OwnershipsResponse>(endpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: { query: buildQuery(cursor) },
+      })
+
+      if (response.errors) {
+        throw new Error(response.errors[0].message)
+      }
+
+      return response.data.ownerships
+    } catch (e) {
+      lastError = e instanceof Error ? e : new Error(String(e))
+    }
+  }
+  throw lastError ?? new Error('All indexer endpoints failed')
+}
+
+const loadInitial = async () => {
+  loading.value = true
+  try {
+    const result = await fetchOwnerships()
+    ownerships.value = result.items
+    hasNextPage.value = result.pageInfo.hasNextPage
+    endCursor.value = result.pageInfo.endCursor
+  } catch (e) {
+    console.error('Failed to load ownerships:', e)
+  } finally {
+    loading.value = false
+  }
+}
+
+const loadMore = async () => {
+  if (!hasNextPage.value || loadingMore.value) return
+
+  loadingMore.value = true
+  try {
+    const result = await fetchOwnerships(endCursor.value)
+    ownerships.value = [...ownerships.value, ...result.items]
+    hasNextPage.value = result.pageInfo.hasNextPage
+    endCursor.value = result.pageInfo.endCursor
+  } catch (e) {
+    console.error('Failed to load more ownerships:', e)
+  } finally {
+    loadingMore.value = false
+  }
+}
+
+useIntersectionObserver(
+  loadMoreTrigger,
+  ([{ isIntersecting }]) => {
+    if (isIntersecting && hasNextPage.value && !loadingMore.value) {
+      loadMore()
+    }
+  },
+  {
+    rootMargin: '100px',
+    threshold: 0.1,
+  },
+)
+
+// In single-artist mode, wait for scoped collections to resolve before fetching.
+// Otherwise, fetch immediately.
+if (artistScope) {
+  const unwatch = watch(scopedCollections, (collections) => {
+    if (collections && collections.length > 0) {
+      loadInitial()
+      nextTick(() => unwatch())
+    }
+  }, { immediate: true })
+} else {
+  onMounted(() => loadInitial())
+}
+</script>
+
+<style scoped>
+.collected-items {
+  display: grid;
+  gap: var(--spacer-lg);
+  padding: var(--spacer-lg) var(--spacer);
+}
+
+.collected-items-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+  gap: var(--spacer);
+}
+
+.collected-items-empty {
+  display: grid;
+  gap: var(--spacer);
+}
+
+.load-more-trigger {
+  min-height: 1px;
+}
+</style>

package/composables/indexer.ts

@@ -0,0 +1,12 @@
+export const useIndexerEndpoints = () => {
+  const config = useRuntimeConfig()
+  return computed(() => {
+    const endpoints = config.public.indexerEndpoints
+    return endpoints ? String(endpoints).split(/\s+/).filter(Boolean) : []
+  })
+}
+
+export const useHasIndexer = () => {
+  const endpoints = useIndexerEndpoints()
+  return computed(() => endpoints.value.length > 0)
+}

package/locales/en.json

@@ -100,6 +100,12 @@
         "view_on_etherscan": "View on Etherscan",
         "cancel": "Cancel"
     },
+    "collected": {
+        "title": "Collected",
+        "loading": "Loading collected items...",
+        "empty": "No collected items yet.",
+        "empty_other": "This account hasn't collected any items yet."
+    },
     "create": {
         "title": "Create New",
         "alert_new": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visualizevalue/mint-app-base",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "MIT",
   "type": "module",
   "main": "./nuxt.config.ts",

package/pages/profile/[address]/index.vue

@@ -10,21 +10,13 @@
       </template>
     </ProfileHeader>
 
-    <section v-if="artistScope">
-      <p>Collected art from <Account :address="artistScope" /> will be indexed on profiles soon...</p>
-      <p v-if="isMyArtistScope">
-        Manage Your collections <NuxtLink :to="{ name: 'id', params: { id: address } }">here</NuxtLink>.
-      </p>
-      <p v-else>
-        You can mint your own art on
-        <NuxtLink :to="config.public.platformUrl" target="_blank">
-          {{ getMainDomain(config.public.platformUrl) }}
-        </NuxtLink>.
-      </p>
-    </section>
-    <section v-else>
-      <p>Collected art and curation options for your profile will come soon...</p>
-    </section>
+    <CollectedItems v-if="hasIndexer" :id="address" :key="`collected-${address}`">
+      <template #before>
+        <HeaderSection>
+          <h1>{{ $t('collected.title') }}</h1>
+        </HeaderSection>
+      </template>
+    </CollectedItems>
   </PageFrame>
 </template>
 
@@ -34,8 +26,7 @@ const route = useRoute()
 const address = computed(() => route.params.address)
 const store = useOnchainStore()
 const isMe = useIsMeCheck(address.value)
-const artistScope = useArtistScope()
-const isMyArtistScope = useIsMeCheck(artistScope)
+const hasIndexer = useHasIndexer()
 
 const artist = ref(null)
 

package/queries/sources.ts

@@ -151,7 +151,9 @@ export async function rpcFetchProfile (
   wagmi: Config,
   address: `0x${string}`,
 ): Promise<Partial<Artist>> {
-  const client = getPublicClient(wagmi, { chainId: 1 }) as PublicClient
+  const client = getPublicClient(wagmi, { chainId: 1 })
+  if (!client) return {}
+
   const block = await client.getBlockNumber()
 
   let ens, avatar, description, url, email, twitter, github

package/utils/types.ts

@@ -72,3 +72,21 @@ export interface Renderer {
   component?: string
   version: bigint
 }
+
+export interface OwnershipArtifact {
+  id: string
+  name: string
+  image: string
+  collection: {
+    address: string
+    owner: string
+    name: string
+  }
+}
+
+export interface Ownership {
+  artifact: OwnershipArtifact
+  balance: string
+  created_at: string
+  updated_at: string
+}