@visualizevalue/mint-app-base 0.1.126 → 0.2.0

package/composables/collections.ts

@@ -1,23 +1,14 @@
 import { getBalance, getPublicClient, readContract } from '@wagmi/core'
-import { type GetBalanceReturnType } from '@wagmi/core'
-import { parseAbiItem, type PublicClient } from 'viem'
+import { type PublicClient } from 'viem'
 import type { MintEvent } from '~/utils/types'
+import { INDEXER_SYNCED } from '~/queries/sources'
 
-export const CURRENT_STATE_VERSION = 9
-export const MAX_BLOCK_RANGE = 1800n
+export const CURRENT_STATE_VERSION = 10
 export const MINT_BLOCKS = BLOCKS_PER_DAY
 export const MAX_RENDERERS = 20
 
-const inflightRequests = new Map<string, Promise<any>>()
-function dedupe<T>(key: string, fn: () => Promise<T>): Promise<T> {
-  if (!inflightRequests.has(key)) {
-    inflightRequests.set(key, fn().finally(() => inflightRequests.delete(key)))
-  }
-  return inflightRequests.get(key)!
-}
-
 export const useOnchainStore = () => {
-  const { $wagmi } = useNuxtApp()
+  const { $wagmi, $queryClient, $queries } = useNuxtApp()
   const appConfig = useAppConfig()
   const chainId = useMainChainId()
 
@@ -103,54 +94,17 @@ export const useOnchainStore = () => {
 
         if (!this.hasArtist(address)) this.initializeArtist(address)
 
-        await this.fetchArtistProfile(address)
-
-        await this.fetchCollections(address, factory)
+        await Promise.all([
+          this.fetchArtistProfile(address),
+          this.fetchCollections(address, factory),
+        ])
       },
 
       async fetchArtistProfile (address: `0x${string}`): Promise<Artist> {
-        const client = getPublicClient($wagmi, { chainId: 1 }) as PublicClient
-        const block = await client.getBlockNumber()
-
-        // Only update once per hour
-        if (
-          this.hasArtist(address) &&
-          this.artist(address).profileUpdatedAtBlock > 0n &&
-          (block - this.artist(address).profileUpdatedAtBlock) < BLOCKS_PER_CACHE
-        ) {
-          console.info(`Artist profile already fetched...`)
-          return this.artist(address)
-        }
-
-        console.info(`Updating artist profile...`)
-
-        let ens, avatar, description,
-          url, email, twitter, github
-
-        try {
-          ens = await client.getEnsName({ address })
-
-          if (ens) {
-            [avatar, description, url, email, twitter, github] = await Promise.all([
-              client.getEnsAvatar({ name: ens }),
-              client.getEnsText({ name: ens, key: 'description' }),
-              client.getEnsText({ name: ens, key: 'url' }),
-              client.getEnsText({ name: ens, key: 'email' }),
-              client.getEnsText({ name: ens, key: 'com.twitter' }),
-              client.getEnsText({ name: ens, key: 'com.github' }),
-            ])
-          }
-        } catch (e) { }
-
-        this.artists[address].ens = ens
-        this.artists[address].avatar = avatar
-        this.artists[address].description = description
-        this.artists[address].url = url
-        this.artists[address].email = email
-        this.artists[address].twitter = twitter
-        this.artists[address].github = github
-        this.artists[address].profileUpdatedAtBlock = block
+        if (!this.hasArtist(address)) this.initializeArtist(address)
 
+        const profile = await $queryClient.fetch($queries.artistProfile, address)
+        Object.assign(this.artists[address], profile)
         return this.artist(address)
       },
 
@@ -158,95 +112,43 @@ export const useOnchainStore = () => {
         artist: `0x${string}`,
         factory: `0x${string}`
       ) {
-        const collectionAddresses: `0x${string}`[] = (await readContract($wagmi, {
-          abi: FACTORY_ABI,
-          address: factory,
-          functionName: 'getCreatorCollections',
-          args: [artist],
-          chainId,
-        })).map((a: `0x${string}`) => a.toLowerCase() as `0x${string}`)
-           .filter((a: `0x${string}`) => !this.artists[artist].collections.includes(a))
+        const collections = await $queryClient.fetch($queries.artistCollections, artist)
+        const newCollections = collections.filter(c => !this.hasCollection(c.address))
+        await Promise.all(newCollections.map(c => this.addCollection(c)))
 
-        try {
-          await Promise.all(collectionAddresses.map(address => this.fetchCollection(address)))
-
-          this.artists[artist].collections = Array.from(new Set([...this.artists[artist].collections, ...collectionAddresses]))
-        } catch (e) {
-          console.error(e)
-        }
+        this.artists[artist].collections = Array.from(new Set([
+          ...this.artists[artist].collections,
+          ...collections.map(c => c.address),
+        ]))
       },
 
       async fetchCollection (address: `0x${string}`): Promise<Collection> {
-        return dedupe(`collection:${address}`, () => this._fetchCollection(address))
-      },
-
-      async _fetchCollection (address: `0x${string}`): Promise<Collection> {
         this.ensureStoreVersion()
 
-        if (this.hasCollection(address) && this.collection(address).latestTokenId > 0n) {
-          return this.collection(address)
-        }
+        const fresh = await $queryClient.fetch($queries.collection, address)
 
-        const [data, version, initBlock, latestTokenId, owner, balance] = await Promise.all([
-          readContract($wagmi, {
-            abi: MINT_ABI,
-            address,
-            functionName: 'contractURI',
-            chainId,
-          }) as Promise<string>,
-          readContract($wagmi, {
-            abi: MINT_ABI,
-            address,
-            functionName: 'version',
-            chainId,
-          }) as Promise<bigint>,
-          readContract($wagmi, {
-            abi: MINT_ABI,
-            address,
-            functionName: 'initBlock',
-            chainId,
-          }) as Promise<bigint>,
-          readContract($wagmi, {
-            abi: MINT_ABI,
-            address,
-            functionName: 'latestTokenId',
-            chainId,
-          }) as Promise<bigint>,
-          readContract($wagmi, {
-            abi: MINT_ABI,
-            address,
-            functionName: 'owner',
-            chainId,
-          }) as Promise<`0x${string}`>,
-          getBalance($wagmi, {
-            address,
-          }) as Promise<GetBalanceReturnType>,
-        ])
+        if (this.hasCollection(address)) {
+          const existing = this.collections[address]
+          const hadNewTokens = fresh.latestTokenId > existing.latestTokenId
 
-        const artist = owner.toLowerCase() as `0x${string}`
-        const json = Buffer.from(data.substring(29), `base64`).toString()
+          // Update metadata without wiping tokens/renderers
+          existing.owner = fresh.owner
+          existing.name = fresh.name
+          existing.symbol = fresh.symbol
+          existing.description = fresh.description
+          existing.image = fresh.image
+          existing.latestTokenId = fresh.latestTokenId
+          existing.initBlock = fresh.initBlock
 
-        try {
-          const metadata = JSON.parse(json)
+          // Force token re-fetch when new tokens exist
+          if (hadNewTokens) {
+            await $queryClient.invalidate($queries.collectionTokens, address)
+          }
 
-          return await this.addCollection({
-            image: metadata.image,
-            name: metadata.name,
-            symbol: metadata.symbol,
-            version,
-            description: metadata.description,
-            address,
-            initBlock,
-            latestTokenId,
-            owner: artist,
-            tokens: {},
-            balance: balance.value,
-            renderers: [],
-          })
-        } catch (e) {
-          console.warn(`Error parsing collection`, e)
-          this.artists[artist].collections = this.artists[artist].collections.filter(c => c !== address)
+          return existing
         }
+
+        return await this.addCollection(fresh)
       },
 
       async fetchCollectionBalance (address: `0x${string}`) {
@@ -271,11 +173,11 @@ export const useOnchainStore = () => {
             const rendererArgs = { abi: RENDERER_ABI, address: rendererAddress, chainId }
 
             const [name, version] = await Promise.all([
-              await readContract($wagmi, {
+              readContract($wagmi, {
                 ...rendererArgs,
                 functionName: 'name',
               }),
-              await readContract($wagmi, {
+              readContract($wagmi, {
                 ...rendererArgs,
                 functionName: 'version',
               }),
@@ -298,43 +200,25 @@ export const useOnchainStore = () => {
       },
 
       async fetchCollectionTokens (address: `0x${string}`): Promise<Token[]> {
-        this.collections[address].latestTokenId = await readContract($wagmi, {
-          abi: MINT_ABI,
-          address,
-          functionName: 'latestTokenId',
-          chainId,
-        }) as Promise<bigint>
-
-        const collection = this.collection(address)
-
-        const existingTokenIds = new Set(Object.keys(collection.tokens).map(id => BigInt(id)))
+        const tokens = await $queryClient.fetch($queries.collectionTokens, address)
 
-        // If we have all tokens we don't need to do anything
-        if (BigInt(existingTokenIds.size) === collection.latestTokenId) return this.tokens(address)
-
-        // Collect missing token IDs
-        const missingIds: bigint[] = []
-        let id = collection.latestTokenId
-        while (id > 0n) {
-          if (!existingTokenIds.has(id)) {
-            missingIds.push(id)
+        for (const token of tokens) {
+          if (!this.collections[address].tokens[`${token.tokenId}`]) {
+            this.collections[address].tokens[`${token.tokenId}`] = token
           }
-          id--
         }
 
-        // Fetch in parallel chunks of 5
-        for (const chunk of chunkArray(missingIds, 5)) {
-          await Promise.all(chunk.map(tokenId => this.fetchToken(address, tokenId)))
+        if (tokens.length > 0) {
+          const maxId = tokens.reduce((max, t) => t.tokenId > max ? t.tokenId : max, 0n)
+          if (maxId > this.collections[address].latestTokenId) {
+            this.collections[address].latestTokenId = maxId
+          }
         }
 
         return this.tokens(address)
       },
 
       async fetchToken (address: `0x${string}`, id: number | string | bigint, tries: number = 0): Promise<void> {
-        return dedupe(`token:${address}:${id}`, () => this._fetchToken(address, id, tries))
-      },
-
-      async _fetchToken (address: `0x${string}`, id: number | string | bigint, tries: number = 0): Promise<void> {
         const client = getPublicClient($wagmi, { chainId }) as PublicClient
         const mintContract = getContract({
           address,
@@ -342,16 +226,13 @@ export const useOnchainStore = () => {
           client,
         })
 
-        if (this.collection(address).tokens[`${id}`]) {
-          console.info(`Token cached #${id}`)
+        if (this.collection(address)?.tokens[`${id}`]) {
           return
         }
 
-        // Normalize token ID
         const tokenId = BigInt(id)
 
         try {
-          console.info(`Fetching token #${tokenId}`)
           const currentBlock = await client.getBlock()
 
           const [data, dataUri] = await Promise.all([
@@ -369,12 +250,7 @@ export const useOnchainStore = () => {
             const json = Buffer.from(dataUri.substring(29), `base64`).toString()
             metadata = JSON.parse(json)
           } catch (e) {
-            metadata = {
-              name: '',
-              description: '',
-              image: '',
-              animationUrl: '',
-            }
+            metadata = { name: '', description: '', image: '', animationUrl: '' }
             console.warn(`Parsing data uri failed`, e)
           }
 
@@ -385,10 +261,8 @@ export const useOnchainStore = () => {
             description: metadata.description,
             image: metadata.image,
             animationUrl: metadata.animation_url,
-
-            mintedBlock: BigInt(`${mintedBlock}`), // Force bigint
+            mintedBlock: BigInt(`${mintedBlock}`),
             closeAt,
-
             mintsBackfilledUntilBlock: 0n,
             mintsFetchedUntilBlock: 0n,
             mints: []
@@ -396,17 +270,12 @@ export const useOnchainStore = () => {
 
           this.collections[address].tokens[`${token.tokenId}`] = token
 
-          // Update latestTokenId if this token is newer than what's cached
           if (tokenId > this.collections[address].latestTokenId) {
             this.collections[address].latestTokenId = tokenId
           }
         } catch (e) {
-          // Retry 3 times
           if (tries < 3) {
-            console.info(`Retrying fetching data ${tries + 1}`)
-            return await this._fetchToken(address, id, tries + 1)
-          } else {
-            // TODO: Handle impossible to load token
+            return await this.fetchToken(address, id, tries + 1)
           }
         }
       },
@@ -439,91 +308,13 @@ export const useOnchainStore = () => {
 
       async fetchTokenMints (token: Token) {
         const storedToken = this.collections[token.collection].tokens[token.tokenId.toString()]
-        const client = getPublicClient($wagmi, { chainId }) as PublicClient
-        const currentBlock = await client.getBlockNumber()
-        const untilBlock = token.mintedBlock + BLOCKS_PER_DAY
-
-        // We want to sync until now, or when the mint closed
-        const toBlock = currentBlock > untilBlock ? untilBlock : currentBlock
-
-        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 > token.mintedBlock // Otherwise we'll go back as far as possible
-            ? maxRangeBlock // (to our max range)
-            : token.mintedBlock // (or all the way to when the token minted)
-
-        // Load mints in range
-        this.addTokenMints(token, await this.loadMintEvents(token, fromBlock, toBlock))
-
-        // Set sync status
-        storedToken.mintsFetchedUntilBlock = toBlock
-
-        // If this is our first fetch, mark until when we have backfilled
-        if (! token.mintsBackfilledUntilBlock) {
-          storedToken.mintsBackfilledUntilBlock = fromBlock
-        }
+        storedToken.mints = await $queryClient.fetch($queries.tokenMints, token.collection as `0x${string}`, token.tokenId)
+        storedToken.mintsFetchedUntilBlock = INDEXER_SYNCED
+        storedToken.mintsBackfilledUntilBlock = 0n
       },
 
-      async backfillTokenMints (token: Token) {
-        const storedToken = this.collections[token.collection].tokens[token.tokenId.toString()]
-
-        // If we've backfilled all the way;
-        if (storedToken.mintsBackfilledUntilBlock <= token.mintedBlock) return
-
-        // We want to fetch the tokens up until where we stopped backfilling (excluding the last block)
-        const toBlock = storedToken.mintsBackfilledUntilBlock - 1n
-
-        // We want to fetch until our max range (5000), or until when the token minted
-        const fromBlock = toBlock - MAX_BLOCK_RANGE > token.mintedBlock ? toBlock - MAX_BLOCK_RANGE : token.mintedBlock
-        console.info(`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): Promise<MintEvent[]> {
-        const client = getPublicClient($wagmi, { chainId }) as PublicClient
-
-        const logs = await client.getLogs({
-          address: token.collection,
-          event: parseAbiItem('event NewMint(uint256 indexed tokenId, uint256 unitPrice, uint256 amount, address minter)'),
-          args: {
-            tokenId: BigInt(token.tokenId),
-          },
-          fromBlock,
-          toBlock,
-        })
-
-        console.info(`Token mints fetched from ${fromBlock}-${toBlock}`)
-
-        return logs.map(l => ({
-          tokenId: token.tokenId,
-          address: l.args.minter,
-          block: l.blockNumber,
-          logIndex: l.logIndex,
-          tx: l.transactionHash,
-          unitPrice: l.args.unitPrice,
-          amount: l.args.amount,
-          price: ( l.args.amount || 0n ) * ( l.args.unitPrice || 0n ),
-        }) as MintEvent).reverse()
-      },
-
-      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 backfillTokenMints (_token: Token) {
+        // Both indexer and RPC sources return all mints — nothing to backfill
       },
 
       async addCollection (collection: Collection) {

package/composables/transactions.ts

@@ -0,0 +1,51 @@
+import { waitForTransactionReceipt } from '@wagmi/core'
+import type { TransactionReceipt } from 'viem'
+
+export interface TrackedTransaction {
+  hash: string
+  status: 'waiting' | 'complete' | 'error'
+  waitingText: string
+  completeText: string
+  txLink: string
+}
+
+export const useTransactionStore = defineStore('transactions', () => {
+  const { $wagmi } = useNuxtApp()
+  const config = useRuntimeConfig()
+
+  const pending = ref<TrackedTransaction[]>([])
+
+  const track = (
+    hash: string,
+    waitingText: string,
+    completeText: string,
+    onComplete?: (receipt: TransactionReceipt) => void,
+  ) => {
+    const entry: TrackedTransaction = reactive({
+      hash,
+      status: 'waiting',
+      waitingText,
+      completeText,
+      txLink: `${config.public.blockExplorer}/tx/${hash}`,
+    })
+
+    pending.value.push(entry)
+
+    waitForTransactionReceipt($wagmi, { hash: hash as `0x${string}` })
+      .then((receipt) => {
+        entry.status = 'complete'
+        onComplete?.(receipt)
+        setTimeout(() => remove(hash), 4000)
+      })
+      .catch(() => {
+        entry.status = 'error'
+        setTimeout(() => remove(hash), 8000)
+      })
+  }
+
+  const remove = (hash: string) => {
+    pending.value = pending.value.filter((t) => t.hash !== hash)
+  }
+
+  return { pending, track, remove }
+})

package/nuxt.config.ts

@@ -27,6 +27,7 @@ export default defineNuxtConfig({
       mintAmount: 1,
       mintValue: 0,
       title: 'Mint',
+      indexerEndpoints: '',
       walletConnectProjectId: '',
     },
   },

package/package.json

@@ -1,9 +1,37 @@
 {
   "name": "@visualizevalue/mint-app-base",
-  "version": "0.1.126",
+  "version": "0.2.0",
+  "license": "MIT",
   "type": "module",
   "main": "./nuxt.config.ts",
+  "files": [
+    "app",
+    "assets",
+    "components",
+    "composables",
+    "i18n.config.ts",
+    "index.d.ts",
+    "layouts",
+    "locales",
+    "middleware",
+    "pages",
+    "plugins",
+    "public",
+    "queries",
+    "server",
+    "utils",
+    "app.config.ts",
+    "app.vue",
+    "error.vue",
+    "nuxt.config.ts",
+    "tsconfig.json"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
   "dependencies": {
+    "@1001-digital/dapp-query-core": "^1.1.0",
+    "@1001-digital/dapp-query-vue": "^1.1.0",
     "@csstools/postcss-global-data": "^2.1.1",
     "@nuxtjs/i18n": "^9.5.2",
     "@pinia-plugin-persistedstate/nuxt": "^1.2.1",

package/plugins/2.5.dapp-query.client.ts

@@ -0,0 +1,40 @@
+import { createQueryClient } from '@1001-digital/dapp-query-core'
+import { idbCache } from '@1001-digital/dapp-query-core'
+import { dappQueryPlugin } from '@1001-digital/dapp-query-vue'
+import { createQueries, type MintQueries } from '~/queries'
+import type { QueryClient } from '@1001-digital/dapp-query-core'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const queryClient = createQueryClient({
+    cache: idbCache('mint-query'),
+    defaultStaleTime: 60_000,
+  })
+
+  const config = nuxtApp.$config.public
+  const endpoints = config.indexerEndpoints
+    ? String(config.indexerEndpoints).split(/\s+/).filter(Boolean)
+    : []
+
+  const queries = createQueries({
+    wagmi: nuxtApp.$wagmi as any,
+    chainId: Number(config.chainId),
+    factory: config.factoryAddress as `0x${string}`,
+    endpoints,
+  })
+
+  nuxtApp.vueApp.use(dappQueryPlugin, queryClient)
+
+  return {
+    provide: {
+      queryClient,
+      queries,
+    },
+  }
+})
+
+declare module '#app' {
+  interface NuxtApp {
+    $queryClient: QueryClient
+    $queries: MintQueries
+  }
+}

package/plugins/transaction-toasts.client.ts

@@ -0,0 +1,13 @@
+import { createVNode, render } from 'vue'
+import TransactionToasts from '~/components/TransactionToasts.vue'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.hook('app:mounted', () => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+
+    const vnode = createVNode(TransactionToasts)
+    vnode.appContext = nuxtApp.vueApp._context
+    render(vnode, container)
+  })
+})