@visualizevalue/mint-app-base 0.1.45 → 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

@@ -55,24 +55,6 @@ const mintedAtBlock = computed(() => token.untilBlock - MINT_BLOCKS)
 const backfillComplete = computed(() => token.mintsBackfilledUntilBlock <= mintedAtBlock.value)
 
 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) {
-    console.error(e)
-  }
-  loading.value = false
-})
-
-watch(currentBlock, () => {
-  if (loading.value) return
-
-  state.fetchTokenMints(token)
-})
-
 const loadMore = ref()
 const loadMoreVisible = useElementVisibility(loadMore)
 const backfill = async () => {
@@ -81,9 +63,11 @@ const backfill = async () => {
   try {
     await state.backfillTokenMints(token)
 
-    if (loadMoreVisible.value) {
-      await delay(300)
-      await backfill()
+    // 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)
@@ -91,12 +75,31 @@ const backfill = async () => {
 
   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 backfill()
+  } catch (e) {
+    console.error(e)
+  }
+  loading.value = false
+})
+
 watch(loadMoreVisible, () => {
   // Skip if we have enough mints for the viewport or we're already loading
   if (! loadMoreVisible.value || loading.value) return
 
   backfill()
 })
+
+watch(currentBlock, () => {
+  if (loading.value) return
+
+  state.fetchTokenMints(token)
+})
 </script>
 
 <style scoped>

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 = 1000n
+export const MAX_BLOCK_RANGE = 1800n
 export const MINT_BLOCKS = BLOCKS_PER_DAY
 
 export const useOnchainStore = () => {

package/package.json

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

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()