@visualizevalue/mint-app-base 0.1.43 → 0.1.45

package/assets/styles/variables/colors.css

@@ -2,7 +2,7 @@
   /* GRAYS */
   --white:    white;
   --gray:     gray;
-  --black:    rgb(0, 0, 0);
+  --black:    black;
 
   /* COLORS */
   --primary:   blue;

package/components/ImageVoid.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="64" height="64" fill="var(--black)"/>
+  </svg>
+</template>

package/components/Token/Detail.client.vue

@@ -2,7 +2,8 @@
   <article class="token-detail">
     <div class="artifact">
       <div>
-        <Image :src="token.artifact" :alt="token.name" />
+        <Image v-if="token.artifact" :src="token.artifact" :alt="token.name" />
+        <ImageVoid v-else />
       </div>
     </div>
 

package/components/Token/MintTimeline.client.vue

@@ -3,34 +3,35 @@
     <slot :mints="mints" :loading="loading">
       <h1>Mint Timeline</h1>
 
-      <div v-if="currentBlock" class="token-mint-timeline-items">
-        <TokenMintTimelineItem
-          v-for="mint of mints"
-          :mint="mint"
-          :key="mint.tx"
-          :block="currentBlock"
-        />
-        <TokenMintTimelineItem v-if="backfillComplete">
-          <Account :address="collection.owner" class="account" />
-
-          <span class="amount">1<span>×</span></span>
-          <span class="price">Artist Mint</span>
-
-          <span class="time-ago"><BlocksTimeAgo v-if="currentBlock" :blocks="currentBlock - mintedAtBlock" /></span>
-
-          <span class="links">
-            <NuxtLink :to="`${config.public.blockExplorer}/nft/${token.collection}/${token.tokenId}`" target="_blank">
-              <Icon type="link" />
-            </NuxtLink>
-          </span>
-        </TokenMintTimelineItem>
-      </div>
+      <template v-if="currentBlock">
+      <TokenMintTimelineVirtualScroller
+        :mints="mints"
+        :block="currentBlock"
+      >
+        <template #after>
+          <TokenMintTimelineItem v-if="backfillComplete">
+            <Account :address="collection.owner" class="account" />
+
+            <span class="amount">1<span>×</span></span>
+            <span class="price">Artist Mint</span>
+
+            <span class="time-ago"><BlocksTimeAgo v-if="currentBlock" :blocks="currentBlock - mintedAtBlock" /></span>
+
+            <span class="links">
+              <NuxtLink :to="`${config.public.blockExplorer}/nft/${token.collection}/${token.tokenId}`" target="_blank">
+                <Icon type="link" />
+              </NuxtLink>
+            </span>
+          </TokenMintTimelineItem>
+        </template>
+      </TokenMintTimelineVirtualScroller>
+      </template>
 
       <div v-if="! backfillComplete" v-show="! loading" ref="loadMore" class="load-more">
         <Button @click="backfill">Load more</Button>
       </div>
 
-      <Loading v-if="loading || ! currentBlock" txt="Mint History..." />
+      <Loading v-if="loading || ! currentBlock" txt="Loading Mint History..." />
     </slot>
   </section>
 </template>
@@ -72,16 +73,27 @@ watch(currentBlock, () => {
   state.fetchTokenMints(token)
 })
 
+const loadMore = ref()
+const loadMoreVisible = useElementVisibility(loadMore)
 const backfill = async () => {
   loading.value = true
-  await state.backfillTokenMints(token)
+
+  try {
+    await state.backfillTokenMints(token)
+
+    if (loadMoreVisible.value) {
+      await delay(300)
+      await backfill()
+    }
+  } catch (e) {
+    console.error(`Issue during backfill`, e)
+  }
+
   loading.value = false
 }
-
-const loadMore = ref()
-const loadMoreVisible = useElementVisibility(loadMore)
 watch(loadMoreVisible, () => {
-  if (! loadMoreVisible.value) return
+  // Skip if we have enough mints for the viewport or we're already loading
+  if (! loadMoreVisible.value || loading.value) return
 
   backfill()
 })
@@ -92,6 +104,11 @@ watch(loadMoreVisible, () => {
   padding-top: var(--spacer-lg);
   padding-bottom: var(--spacer-lg);
   container-type: inline-size;
+
+  :deep(.token-mint-timeline-items) {
+    display: grid;
+    gap: var(--spacer);
+  }
 }
 
 h1 {
@@ -102,10 +119,6 @@ h1 {
   margin: 0 0 var(--spacer);
 }
 
-.token-mint-timeline-items {
-  display: grid;
-  gap: var(--spacer);
-}
 
 .load-more {
   .button {

package/components/Token/MintTimelineItem.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="token-mint-timeline-item">
     <slot :mint="mint" :formatted-price="formattedPrice">
-      <NuxtLink :to="{ name: 'profile-address', params: { address: mint.address } }">
-        <Account :address="mint.address" class="account" />
+      <NuxtLink :to="{ name: 'profile-address', params: { address: mint.address } }" class="account">
+        <Account :address="mint.address" />
       </NuxtLink>
 
       <span class="amount">{{ mint.amount.toString() }}<span>×</span></span>
@@ -49,7 +49,7 @@ const formattedPrice = computed(() => props.mint && customFormatEther(props.mint
     span {
       white-space: nowrap;
 
-      &:not(.account) {
+      &:not(.account):not(.account *) {
         color: var(--muted);
         font-size: var(--font-sm);
       }
@@ -57,6 +57,8 @@ const formattedPrice = computed(() => props.mint && customFormatEther(props.mint
 
     a,
     button {
+      color: var(--color);
+
       &:--highlight {
         color: var(--color);
       }

package/components/Token/MintTimelineVirtualScroller.client.vue

@@ -0,0 +1,44 @@
+<template>
+  <div ref="wrapper">
+    <RecycleScroller
+      :items="mints"
+      :item-size="itemSize"
+      key-field="tx"
+      list-class="token-mint-timeline-items"
+      page-mode
+    >
+      <template #before>
+        <slot name="before" />
+      </template>
+
+      <template #default="{ item: mint }">
+        <TokenMintTimelineItem
+          :mint="mint"
+          :key="mint.tx"
+          :block="block"
+        />
+      </template>
+
+      <template #after>
+        <slot name="after" />
+      </template>
+    </RecycleScroller>
+  </div>
+</template>
+
+<script setup>
+import { useElementSize } from '@vueuse/core'
+import { RecycleScroller } from 'vue-virtual-scroller'
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+
+defineProps({
+  mints: Array,
+  block: BigInt,
+})
+
+const wrapper = ref()
+const REM = 16
+const { width: wrapperWidth } = useElementSize(wrapper)
+const itemSize = computed(() => 24 * REM > wrapperWidth.value ? 60 : 40)
+</script>
+

package/components/Token/OverviewCard.vue

@@ -32,7 +32,8 @@
             <p v-if="mintOpen" class="closes-in">Closes in {{ blocksRemaining }} {{ pluralize('block', Number(blocksRemaining))}}</p>
             <p v-else class="closed-at">Closed at block {{ token.untilBlock }}</p>
           </header>
-          <Image :src="token.artifact" :alt="token.name" />
+          <Image v-if="token.artifact" :src="token.artifact" :alt="token.name" />
+          <ImageVoid v-else />
           <CardLink :to="{
             name: 'id-collection-tokenId',
             params: { id: collection.owner, collection: token.collection, tokenId: `${token.tokenId}` }

package/composables/collections.ts

@@ -4,7 +4,7 @@ import { parseAbiItem, type PublicClient } from 'viem'
 import type { MintEvent } from '~/utils/types'
 
 export const CURRENT_STATE_VERSION = 4
-export const MAX_BLOCK_RANGE = 2500n
+export const MAX_BLOCK_RANGE = 1000n
 export const MINT_BLOCKS = BLOCKS_PER_DAY
 
 export const useOnchainStore = () => {
@@ -320,7 +320,7 @@ export const useOnchainStore = () => {
       },
 
       async fetchTokenMints (token: Token) {
-        const client = getPublicClient($wagmi) as PublicClient
+        const client = getPublicClient($wagmi, { chainId }) as PublicClient
         const currentBlock = await client.getBlockNumber()
         const mintedAtBlock = token.untilBlock - MINT_BLOCKS
         const storedToken = this.collections[token.collection].tokens[token.tokenId.toString()]
@@ -365,7 +365,7 @@ export const useOnchainStore = () => {
 
         // We want to fetch until our max range (5000), or until when the token minted
         const fromBlock = toBlock - MAX_BLOCK_RANGE > mintedAtBlock ? toBlock - MAX_BLOCK_RANGE : mintedAtBlock
-        console.log(`Backfilling token mints blocks ${fromBlock}-${toBlock}`)
+        console.info(`Backfilling token mints blocks ${fromBlock}-${toBlock}`)
 
         // Finally, we update our database
         this.addTokenMints(token, await this.loadMintEvents(token, fromBlock, toBlock), 'append')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visualizevalue/mint-app-base",
-  "version": "0.1.43",
+  "version": "0.1.45",
   "type": "module",
   "main": "./nuxt.config.ts",
   "dependencies": {
@@ -21,8 +21,8 @@
     "postcss-preset-env": "^9.5.13",
     "viem": "2.x",
     "vite": "^5.4.3",
-    "vue-virtual-scroller": "^2.0.0-beta.8",
-    "@visualizevalue/mint-utils": "^0.0.2"
+    "vue-virtual-scroller": "2.0.0-beta.8",
+    "@visualizevalue/mint-utils": "^0.0.3"
   },
   "devDependencies": {
     "nuxt": "^3.13.2",

package/utils/time.ts

@@ -1,12 +1,10 @@
-export const BLOCKS_PER_CACHE = 5n * 30n // 30 minutes (5 blocks each)
-export const BLOCKS_PER_HOUR = 300n // 5n * 60n * 24n (5 blocks/min * 60 min * 24 hours)
-export const BLOCKS_PER_DAY = 7200n // 300n * 24n (300 blocks per hour * 24 hours)
+import { BLOCKS_PER_CACHE, BLOCKS_PER_HOUR, BLOCKS_PER_DAY } from '@visualizevalue/mint-utils/time'
+import { blocksToSeconds, delay, nowInSeconds } from '@visualizevalue/mint-utils'
 
-export const delay = (ms: number): Promise<void> => new Promise(resolve => setTimeout(resolve, ms))
-
-export const blocksToSeconds = (blocks: bigint): number => Number(blocks * 12n)
-
-export const nowInSeconds = (): number => Math.floor(Date.now() / 1000)
+export {
+  BLOCKS_PER_CACHE, BLOCKS_PER_HOUR, BLOCKS_PER_DAY,
+  blocksToSeconds, delay, nowInSeconds,
+}
 
 const now = ref(nowInSeconds())
 let nowInterval: NodeJS.Timeout