@visualizevalue/mint-app-base 0.1.42 → 0.1.44

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/MintGasPricePopover.client.vue

@@ -70,7 +70,7 @@
               </td>
               <td>
                 {{ artistPercentage }}%
-                <MintGasPrice v-slot="{ dollarPrice }" :mint-count="amount">
+                <MintGasPrice v-slot="{ dollarPrice }" :mint-count="parseInt(amount)">
                   <span>(${{ dollarPrice }})</span>
                 </MintGasPrice>
               </td>

package/components/MintToken.vue

@@ -81,10 +81,7 @@ const mintRequest = computed(() => async () => {
 })
 
 const minted = async () => {
-  await Promise.all([
-    store.fetchTokenBalance(props.token, address.value),
-    // store.fetchTokenMints(props.token),
-  ])
+  await store.fetchTokenBalance(props.token, address.value)
 
   emit('minted')
 }

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

@@ -10,13 +10,13 @@
           :key="mint.tx"
           :block="currentBlock"
         />
-        <TokenMintTimelineItem v-if="! loading || mints.length">
+        <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 - (token.untilBlock - 7200n)" /></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">
@@ -26,12 +26,17 @@
         </TokenMintTimelineItem>
       </div>
 
+      <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..." />
     </slot>
   </section>
 </template>
 
 <script setup>
+import { useElementVisibility } from '@vueuse/core'
 import { useBlockNumber } from '@wagmi/vue'
 
 const config = useRuntimeConfig()
@@ -45,11 +50,14 @@ const { token, collection } = defineProps({
 const state = useOnchainStore()
 
 const mints = computed(() => state.tokenMints(token.collection, token.tokenId))
+const mintedAtBlock = computed(() => token.untilBlock - MINT_BLOCKS)
+const backfillComplete = computed(() => token.mintsBackfilledUntilBlock <= mintedAtBlock.value)
 
-const loading = ref(false)
+const loading = ref(true)
 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)
   } catch (e) {
@@ -58,7 +66,25 @@ onMounted(async () => {
   loading.value = false
 })
 
-watch(currentBlock, () => state.fetchTokenMints(token))
+watch(currentBlock, () => {
+  if (loading.value) return
+
+  state.fetchTokenMints(token)
+})
+
+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
+
+  backfill()
+})
 </script>
 
 <style scoped>
@@ -80,4 +106,11 @@ h1 {
   display: grid;
   gap: var(--spacer);
 }
+
+.load-more {
+  .button {
+    display: block;
+    width: 100%;
+  }
+}
 </style>

package/components/Token/MintTimelineItem.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="token-mint-timeline-item">
     <slot :mint="mint" :formatted-price="formattedPrice">
-      <Account :address="mint.address" class="account" />
+      <NuxtLink :to="{ name: 'profile-address', params: { address: mint.address } }">
+        <Account :address="mint.address" class="account" />
+      </NuxtLink>
 
       <span class="amount">{{ mint.amount.toString() }}<span>×</span></span>
 

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

@@ -1,9 +1,11 @@
 import { getBalance, getPublicClient, readContract } from '@wagmi/core'
 import { type GetBalanceReturnType } from '@wagmi/core'
-import { parseAbiItem } from 'viem'
-import type { MintEvent } from '~/app/utils/types'
+import { parseAbiItem, type PublicClient } from 'viem'
+import type { MintEvent } from '~/utils/types'
 
-export const CURRENT_STATE_VERSION = 3
+export const CURRENT_STATE_VERSION = 4
+export const MAX_BLOCK_RANGE = 2500n
+export const MINT_BLOCKS = BLOCKS_PER_DAY
 
 export const useOnchainStore = () => {
   const { $wagmi } = useNuxtApp()
@@ -94,7 +96,7 @@ export const useOnchainStore = () => {
       },
 
       async fetchArtistProfile (address: `0x${string}`): Promise<Artist> {
-        const client = getPublicClient($wagmi, { chainId: 1 })
+        const client = getPublicClient($wagmi, { chainId: 1 }) as PublicClient
         const block = await client.getBlockNumber()
 
         // Only update once per hour
@@ -149,7 +151,7 @@ export const useOnchainStore = () => {
           functionName: 'getCreatorCollections',
           args: [artist],
           chainId,
-        })).map((a: `0x${string}`) => a.toLowerCase())
+        })).map((a: `0x${string}`) => a.toLowerCase() as `0x${string}`)
 
         if (this.artists[artist].collections.length === collectionAddresses.length) {
           console.info(`Collections fetched already (${collectionAddresses.length} collections)`)
@@ -318,67 +320,62 @@ export const useOnchainStore = () => {
       },
 
       async fetchTokenMints (token: Token) {
-        const client = getPublicClient($wagmi)
+        const client = getPublicClient($wagmi) as PublicClient
+        const currentBlock = await client.getBlockNumber()
+        const mintedAtBlock = token.untilBlock - MINT_BLOCKS
+        const storedToken = this.collections[token.collection].tokens[token.tokenId.toString()]
 
-        // We want to sync backwards from now
-        const currentBlock = await client.getBlockNumber({ chainId })
-
-        // Until when
+        // We want to sync until now, or when the mint closed
         const toBlock = currentBlock > token.untilBlock ? token.untilBlock : currentBlock
 
-        if (token.mintsFetchedUntilBlock >= toBlock) return console.info(`token mints already fetched`)
-
-        // From when
-        const maxRangeBlock = toBlock - 5000n
-        const mintedAtBlock = token.untilBlock - 7200n
-        const fromBlock = token.mintsFetchedUntilBlock > maxRangeBlock
-          ? token.mintsFetchedUntilBlock + 1n
-          : maxRangeBlock > mintedAtBlock
-            ? maxRangeBlock
-            : mintedAtBlock
-
-        // Load mints
-        this.collections[token.collection].tokens[token.tokenId.toString()].mints = [
-          ...await this.loadMintEvents(
-            token,
-            fromBlock,
-            toBlock
-          ),
-          ...(this.collections[token.collection].tokens[token.tokenId.toString()].mints) || [],
-        ]
+        if (token.mintsFetchedUntilBlock >= toBlock) {
+          return console.info(`mints for #${token.tokenId} already fetched`)
+        }
+
+        // Initially, we want to sync backwards,
+        // but at most 5000 blocks (the general max range for an event query)
+        const maxRangeBlock = toBlock - MAX_BLOCK_RANGE
+        const fromBlock = token.mintsFetchedUntilBlock > maxRangeBlock // If we've already fetched
+          ? token.mintsFetchedUntilBlock + 1n // we want to continue where we left off
+          : maxRangeBlock > mintedAtBlock // Otherwise we'll go back as far as possible
+            ? maxRangeBlock // (to our max range)
+            : mintedAtBlock // (or all the way to when the token minted)
 
-        console.info(`Token mints fetched from ${fromBlock}-${toBlock}`)
+        // Load mints in range
+        this.addTokenMints(token, await this.loadMintEvents(token, fromBlock, toBlock))
 
         // Set sync status
-        this.collections[token.collection].tokens[token.tokenId.toString()].mintsFetchedUntilBlock = toBlock
+        storedToken.mintsFetchedUntilBlock = toBlock
 
         // If this is our first fetch, mark until when we have backfilled
         if (! token.mintsBackfilledUntilBlock) {
-          this.collections[token.collection].tokens[token.tokenId.toString()].mintsBackfilledUntilBlock = fromBlock
+          storedToken.mintsBackfilledUntilBlock = fromBlock
         }
       },
 
       async backfillTokenMints (token: Token) {
-        const mintedAtBlock = token.untilBlock - 7200n
+        const mintedAtBlock = token.untilBlock - MINT_BLOCKS
+        const storedToken = this.collections[token.collection].tokens[token.tokenId.toString()]
 
-        while (
-          this.collections[token.collection].tokens[token.tokenId.toString()].mintsBackfilledUntilBlock > mintedAtBlock
-        ) {
-          const toBlock = this.collections[token.collection].tokens[token.tokenId.toString()].mintsBackfilledUntilBlock
-          const fromBlock = toBlock - 5000n > mintedAtBlock ? toBlock - 5000n : mintedAtBlock
-          console.log(`Backfilling token mints blocks ${fromBlock}-${toBlock}`)
+        // If we've backfilled all the way;
+        if (storedToken.mintsBackfilledUntilBlock <= mintedAtBlock) return
 
-          this.collections[token.collection].tokens[token.tokenId.toString()].mints = [
-            ...this.collections[token.collection].tokens[token.tokenId.toString()].mints,
-            ...await this.loadMintEvents(token, fromBlock, toBlock)
-          ]
+        // We want to fetch the tokens up until where we stopped backfilling (excluding the last block)
+        const toBlock = storedToken.mintsBackfilledUntilBlock - 1n
 
-          this.collections[token.collection].tokens[token.tokenId.toString()].mintsBackfilledUntilBlock = fromBlock
-        }
+        // 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}`)
+
+        // Finally, we update our database
+        this.addTokenMints(token, await this.loadMintEvents(token, fromBlock, toBlock), 'append')
+
+        // And save until when we have backfilled our tokens.
+        storedToken.mintsBackfilledUntilBlock = fromBlock
       },
 
-      async loadMintEvents (token: Token, fromBlock: bigint, toBlock: bigint) {
-        const client = getPublicClient($wagmi, { chainId })
+      async loadMintEvents (token: Token, fromBlock: bigint, toBlock: bigint): Promise<MintEvent[]> {
+        const client = getPublicClient($wagmi, { chainId }) as PublicClient
 
         const logs = await client.getLogs({
           address: token.collection,
@@ -390,6 +387,8 @@ export const useOnchainStore = () => {
           toBlock,
         })
 
+        console.info(`Token mints fetched from ${fromBlock}-${toBlock}`)
+
         return logs.map(l => ({
           tokenId: token.tokenId,
           address: l.args.minter,
@@ -398,8 +397,16 @@ export const useOnchainStore = () => {
           tx: l.transactionHash,
           unitPrice: l.args.unitPrice,
           amount: l.args.amount,
-          price: l.args.amount * l.args.unitPrice,
-        })).reverse()
+          price: ( l.args.amount || 0n ) * ( l.args.unitPrice || 0n ),
+        }) as MintEvent).reverse()
+      },
+
+      async addTokenMints (token: Token, mints: MintEvent[], location: 'prepend'|'append' = 'prepend') {
+        const storedToken = this.collections[token.collection].tokens[token.tokenId.toString()]
+
+        storedToken.mints = location === 'prepend'
+          ? [ ...mints, ...storedToken.mints ]
+          : [ ...storedToken.mints, ...mints ]
       },
 
       async addCollection (collection: Collection) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visualizevalue/mint-app-base",
-  "version": "0.1.42",
+  "version": "0.1.44",
   "type": "module",
   "main": "./nuxt.config.ts",
   "dependencies": {