@visualizevalue/mint-app-base 0.1.44 → 0.1.47

package/components/Connect.client.vue

@@ -18,7 +18,11 @@
           @click="() => login(connector)"
           class="choose-connector-button"
         >
-          <img v-if="ICONS[connector.name]" :src="connector.icon || `/icons/wallets/${ICONS[connector.name]}`" alt="">
+          <img
+            v-if="ICONS[connector.name]"
+            :src="connector.icon || `${base}icons/wallets/${ICONS[connector.name]}`"
+            :alt="connector.name"
+          >
           {{ connector.name }}
         </Button>
       </div>
@@ -38,6 +42,7 @@ const ICONS = {
 
 const props = defineProps(['class'])
 const emit = defineEmits(['connected', 'disconnected'])
+const base = useBaseURL()
 
 const chainId = useChainId()
 const { connectors, connect } = useConnect()

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>
@@ -54,36 +55,50 @@ const mintedAtBlock = computed(() => token.untilBlock - MINT_BLOCKS)
 const backfillComplete = computed(() => token.mintsBackfilledUntilBlock <= mintedAtBlock.value)
 
 const loading = ref(true)
+const loadMore = ref()
+const loadMoreVisible = useElementVisibility(loadMore)
+const backfill = async () => {
+  loading.value = true
+
+  try {
+    await state.backfillTokenMints(token)
+
+    // If we're not fully backfilled and we have less than 20 mints loaded,
+    // continue backfilling events.
+    while (! backfillComplete.value && mints.value?.length < 20) {
+      await delay(250)
+      await state.backfillTokenMints(token)
+    }
+  } catch (e) {
+    console.error(`Issue during backfill`, e)
+  }
+
+  loading.value = false
+}
+
 onMounted(async () => {
   loading.value = true
   try {
     console.info(`Attempting to load + backfill token mints for #${token.tokenId}`)
     await state.fetchTokenMints(token)
-    await state.backfillTokenMints(token)
+    await backfill()
   } catch (e) {
     console.error(e)
   }
   loading.value = false
 })
 
-watch(currentBlock, () => {
-  if (loading.value) return
+watch(loadMoreVisible, () => {
+  // Skip if we have enough mints for the viewport or we're already loading
+  if (! loadMoreVisible.value || loading.value) return
 
-  state.fetchTokenMints(token)
+  backfill()
 })
 
-const backfill = async () => {
-  loading.value = true
-  await state.backfillTokenMints(token)
-  loading.value = false
-}
-
-const loadMore = ref()
-const loadMoreVisible = useElementVisibility(loadMore)
-watch(loadMoreVisible, () => {
-  if (! loadMoreVisible.value) return
+watch(currentBlock, () => {
+  if (loading.value) return
 
-  backfill()
+  state.fetchTokenMints(token)
 })
 </script>
 
@@ -92,6 +107,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 +122,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/composables/base.ts

@@ -0,0 +1,7 @@
+export const useBaseURL = () => {
+  const config = useRuntimeConfig()
+
+  return config.app.baseURL.endsWith('/')
+    ? config.app.baseURL
+    : config.app.baseURL + '/'
+}

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 = 1800n
 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.44",
+  "version": "0.1.47",
   "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/pages/[id]/create.vue

@@ -53,7 +53,9 @@
             <div class="card">
               <div>
                 <FormSelectFile @change="setImage" />
-                <p v-if="! isSmall" class="muted"><small>Note: This should be a small file, prefferably a simple SVG like <a href="/example-contract-icon.svg" target="_blank">this one (273 bytes)</a>. Try to make it less than 10kb.</small></p>
+                <p v-if="! isSmall" class="muted">
+                  <small>Note: This should be a small file, prefferably a simple SVG like <a :href="`${base}example-contract-icon.svg`" target="_blank">this one (273 bytes)</a>. Try to make it less than 10kb.</small>
+                </p>
               </div>
               <FormGroup>
                 <FormInput v-model="title" placeholder="Title" required class="title" />
@@ -77,6 +79,7 @@
 
 <script setup>
 const config = useRuntimeConfig()
+const base = useBaseURL()
 const store = useOnchainStore()
 const chainId = useMainChainId()
 

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