@visualizevalue/mint-app-base 0.0.1

package/app/composables/account.ts

@@ -0,0 +1,21 @@
+import { useAccount } from '@wagmi/vue'
+
+export const useIsMeCheck = (checkAddress: Ref|ComputedRef<`0x${string}`>|`0x${string}`|null) => {
+  const { address } = useAccount()
+  const toCheck = toValue(checkAddress)
+
+  const isMe = ref()
+
+  watchEffect(() => {
+    isMe.value = address.value && address.value?.toLowerCase() === toCheck?.toLowerCase()
+  })
+
+  return isMe
+}
+
+export const useIsMe = () => {
+  const id = useArtistId()
+
+  return useIsMeCheck(id.value)
+}
+

package/app/composables/app.ts

@@ -0,0 +1,15 @@
+export const useAppTitle = () => {
+  const config = useRuntimeConfig()
+  const subdomain = useSubdomain()
+  const state = useOnchainStore()
+
+  return computed(() => {
+    return subdomain.value
+      ? state.ens(subdomain.value as `0x${string}`) || shortAddress(subdomain.value)
+      : config.public.title
+  })
+}
+
+export const useAppBreadcrumb = () => {
+  return useState<Breadcrumbs>('breadcrumb', () => [])
+}

package/app/composables/artistData.ts

@@ -0,0 +1,22 @@
+export const useLoadArtistData = (_id: ComputedRef|Ref<`0x${string}`>|`0x${string}`) => {
+  const config = useRuntimeConfig()
+  const store = useOnchainStore()
+
+  const id = toValue(_id)
+
+  const loading = ref(true)
+
+  const load = async () => {
+    loading.value = true
+    if (! id) return
+    await store.fetchArtistScope(id, config.public.factoryAddress as `0x${string}`)
+    loading.value = false
+  }
+
+  onMounted(() => load())
+
+  return {
+    load,
+    loading,
+  }
+}

package/app/composables/chainId.ts

@@ -0,0 +1,25 @@
+import { useAccount, useSwitchChain } from "@wagmi/vue"
+
+export const useMainChainId = () => {
+  const config = useRuntimeConfig()
+
+  return config.public.chainId as 1 | 11155111 | 17000 | 1337
+}
+
+export const useEnsureChainIdCheck = () => {
+  const chainId = useMainChainId()
+  const { switchChain } = useSwitchChain()
+  const { chainId: currentChainId } = useAccount()
+
+  return async () => {
+    if (chainId !== currentChainId.value) {
+      await switchChain({ chainId })
+    }
+
+    if (chainId === currentChainId.value) {
+      return true
+    }
+
+    return false
+  }
+}

package/app/composables/collections.ts

@@ -0,0 +1,435 @@
+import { getBalance, getPublicClient, readContract } from '@wagmi/core'
+import { type GetBalanceReturnType } from '@wagmi/core'
+import { parseAbiItem } from 'viem'
+import type { MintEvent } from '~/app/utils/types'
+
+export const CURRENT_STATE_VERSION = 3
+
+export const useOnchainStore = () => {
+  const { $wagmi } = useNuxtApp()
+  const chainId = useMainChainId()
+
+  return defineStore('onchainStore', {
+
+    state: () => ({
+      version: CURRENT_STATE_VERSION,
+      artists: {} as { [key: `0x${string}`]: Artist },
+      collections: {} as { [key: `0x${string}`]: Collection },
+      // Collection -> Balance (just for the current user)
+      tokenBalances: {} as { [key: `0x${string}`]: { [key: string]: bigint } },
+    }),
+
+    getters: {
+      all (state) {
+        return Object.values(state.collections)
+      },
+      hasArtist (state) {
+        return (address: `0x${string}`) => state.artists[address] !== undefined
+      },
+      artist (state) {
+        return (address: `0x${string}`) => state.artists[address]
+      },
+      ens () {
+        return (address: `0x${string}`) => this.artist(address)?.ens
+      },
+      displayName () {
+        return (address: `0x${string}`) => this.ens(address) || shortAddress(address)
+      },
+      forArtist (state) {
+        return (address: `0x${string}`) => {
+          if (! this.hasArtist(address)) return []
+
+          return this.artist(address).collections
+            .map(c => state.collections[c])
+            .sort((a, b) => a.initBlock > b.initBlock ? -1 : 1)
+        }
+      },
+      forArtistOnlyMinted () {
+        return (address: `0x${string}`) => this.forArtist(address).filter(c => c.latestTokenId > 0n)
+      },
+      hasCollection: (state) => (address: `0x${string}`) => state.collections[address] !== undefined,
+      collection: (state) => (address: `0x${string}`) => state.collections[address],
+      tokens: (state) => (address: `0x${string}`) =>
+        Object.values(state.collections[address].tokens)
+          .sort((a: Token, b: Token) => a.tokenId > b.tokenId ? -1 : 1),
+      tokenMints: (state) => (address: `0x${string}`, tokenId: bigint): MintEvent[] =>
+        state.collections[address].tokens[tokenId.toString()].mints,
+      tokenBalance: (state) => (address: `0x${string}`, tokenId: bigint): bigint | null =>
+        (state.tokenBalances[address] && (state.tokenBalances[address][`${tokenId}`] !== undefined))
+          ? state.tokenBalances[address][`${tokenId}`]
+          : null,
+    },
+
+    actions: {
+      initializeArtist (address: `0x${string}`) {
+        const artist: Artist = {
+          address,
+          ens: '',
+          avatar: '',
+          description: '',
+          collections: [],
+          profileUpdatedAtBlock: 0n,
+        }
+
+        this.artists[artist.address] = artist
+
+        return artist
+      },
+
+      ensureStoreVersion () {
+        if (this.version < CURRENT_STATE_VERSION) {
+          console.info(`Reset store`)
+          this.$reset()
+        }
+      },
+
+      async fetchArtistScope (address: `0x${string}`, factory: `0x${string}`) {
+        this.ensureStoreVersion()
+
+        if (!this.hasArtist(address)) this.initializeArtist(address)
+
+        await this.fetchArtistProfile(address)
+
+        await this.fetchCollections(address, factory)
+      },
+
+      async fetchArtistProfile (address: `0x${string}`): Promise<Artist> {
+        const client = getPublicClient($wagmi, { chainId: 1 })
+        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
+
+        return this.artist(address)
+      },
+
+      async fetchCollections (
+        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())
+
+        if (this.artists[artist].collections.length === collectionAddresses.length) {
+          console.info(`Collections fetched already (${collectionAddresses.length} collections)`)
+          return
+        }
+
+        try {
+          await Promise.all(collectionAddresses.map(address => this.fetchCollection(address)))
+
+          this.artists[artist].collections = collectionAddresses
+        } catch (e) {
+          console.error(e)
+        }
+      },
+
+      async fetchCollection (address: `0x${string}`): Promise<Collection> {
+        this.ensureStoreVersion()
+
+        if (this.hasCollection(address) && this.collection(address).latestTokenId > 0n) {
+          return this.collection(address)
+        }
+
+        const [data, 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: '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>,
+        ])
+
+        const json = Buffer.from(data.substring(29), `base64`).toString()
+        const metadata = JSON.parse(json)
+
+        const artist = owner.toLowerCase() as `0x${string}`
+
+        return await this.addCollection({
+          image: metadata.image,
+          name: metadata.name,
+          symbol: metadata.symbol,
+          description: metadata.description,
+          address,
+          initBlock,
+          latestTokenId,
+          owner: artist,
+          tokens: {},
+          balance: balance.value,
+        })
+      },
+
+      async fetchCollectionBalance (address: `0x${string}`) {
+        const balance = await getBalance($wagmi, { address })
+        this.collections[address].balance = balance.value
+      },
+
+      async fetchCollectionTokens (address: `0x${string}`): Promise<Token[]> {
+        this.collections[address].latestTokenId = await readContract($wagmi, {
+          abi: MINT_ABI,
+          address,
+          functionName: 'latestTokenId',
+          chainId,
+        })
+
+        const collection = this.collection(address)
+
+        const existingTokenIds = new Set(Object.keys(collection.tokens).map(id => BigInt(id)))
+
+        // If we have all tokens we don't need to do anything
+        if (BigInt(existingTokenIds.size) === collection.latestTokenId) return this.tokens(address)
+
+        // Go over each token
+        let id = collection.latestTokenId
+        while (id > 0n) {
+          if (! existingTokenIds.has(id)) {
+            await this.fetchToken(address, id)
+          } else {
+            console.info(`Skipping token #${id} since we already have it.`)
+          }
+
+          id --
+        }
+
+        return this.tokens(address)
+      },
+
+      async fetchToken (address: `0x${string}`, id: number | string | bigint) {
+        const client = getPublicClient($wagmi, { chainId })
+        const mintContract = getContract({
+          address,
+          abi: MINT_ABI,
+          client,
+        })
+
+        if (this.collection(address).tokens[`${id}`]) {
+          console.info(`Token cached #${id}`)
+          return
+        }
+
+        // Normalize token ID
+        const tokenId = BigInt(id)
+
+        try {
+          console.info(`Fetching token #${tokenId}`)
+
+          const [data, untilBlock] = await Promise.all([
+            mintContract.read.uri([tokenId], { gas: 10_000_000_000 }) as Promise<string>,
+            mintContract.read.mintOpenUntil([tokenId]) as Promise<bigint>,
+          ])
+
+          const json = Buffer.from(data.substring(29), `base64`).toString()
+          const metadata = JSON.parse(json)
+
+          const token: Token = {
+            tokenId,
+            collection: address,
+            name: metadata.name,
+            description: metadata.description,
+            artifact: metadata.image,
+            untilBlock,
+            mintsBackfilledUntilBlock: 0n,
+            mintsFetchedUntilBlock: 0n,
+            mints: []
+          }
+
+          this.collections[address].tokens[`${token.tokenId}`] = token
+        } catch (e) { }
+      },
+
+      async fetchTokenBalance (token: Token, address: `0x${string}`) {
+        const client = getPublicClient($wagmi, { chainId })
+        const mintContract = getContract({
+          address: token.collection,
+          abi: MINT_ABI,
+          client
+        })
+
+        if (! this.tokenBalances[token.collection]) {
+          this.tokenBalances[token.collection] = {}
+        }
+
+        this.tokenBalances[token.collection][`${token.tokenId}`] =
+          await mintContract.read.balanceOf([address, token.tokenId])
+
+        console.info('fetched token balance', this.tokenBalances[token.collection][`${token.tokenId}`])
+      },
+
+      async fetchTokenMints (token: Token) {
+        const client = getPublicClient($wagmi)
+
+        // We want to sync backwards from now
+        const currentBlock = await client.getBlockNumber({ chainId })
+
+        // Until when
+        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
+          : 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) || [],
+        ]
+
+        console.info(`Token mints fetched from ${fromBlock}-${toBlock}`)
+
+        // Set sync status
+        this.collections[token.collection].tokens[token.tokenId.toString()].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
+        }
+      },
+
+      async backfillTokenMints (token: Token) {
+        const mintedAtBlock = token.untilBlock - 7200n
+
+        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}`)
+
+          this.collections[token.collection].tokens[token.tokenId.toString()].mints = [
+            ...this.collections[token.collection].tokens[token.tokenId.toString()].mints,
+            ...await this.loadMintEvents(token, fromBlock, toBlock)
+          ]
+
+          this.collections[token.collection].tokens[token.tokenId.toString()].mintsBackfilledUntilBlock = fromBlock
+        }
+      },
+
+      async loadMintEvents (token: Token, fromBlock: bigint, toBlock: bigint) {
+        const client = getPublicClient($wagmi, { chainId })
+
+        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,
+        })
+
+        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 * l.args.unitPrice,
+        })).reverse()
+      },
+
+      async addCollection (collection: Collection) {
+        if (this.hasCollection(collection.address)) {
+          console.warn(`Replacing existing collection`)
+        }
+
+        this.collections[collection.address] = collection
+
+        if (! this.hasArtist(collection.owner)) {
+          this.initializeArtist(collection.owner)
+          this.fetchArtistProfile(collection.owner)
+        }
+
+        this.artists[collection.owner].collections = Array.from(new Set([
+          ...this.artists[collection.owner].collections,
+          collection.address
+        ]))
+
+        return collection
+      },
+    },
+
+    persist: {
+      storage: persistedState.localStorage,
+      serializer: {
+        serialize: stringifyJSON,
+        deserialize: parseJSON,
+      },
+    },
+
+  })()
+}

package/app/composables/darkMode.ts

@@ -0,0 +1 @@
+export const isDark = ref(localStorage.getItem('color-scheme') !== 'light')

package/app/composables/gasPrice.ts

@@ -0,0 +1,46 @@
+import type { WatchStopHandle } from 'vue'
+import { formatEther, formatGwei } from 'viem'
+import { getGasPrice } from '@wagmi/core'
+import { useConfig, useBlockNumber } from '@wagmi/vue'
+
+let priceWatcher: WatchStopHandle|null = null
+const price: Ref<bigint> = ref(0n)
+export const useGasPrice = async () => {
+  const config = useConfig()
+  const { data: blockNumber } = useBlockNumber()
+
+  if (! priceWatcher) {
+    priceWatcher = watch(blockNumber, async () => price.value = await getGasPrice(config))
+  }
+
+  if (price.value === null && priceWatcher === null) {
+    price.value = await getGasPrice(config)
+  }
+
+  const unitPrice = computed(() => ({
+    wei: price.value,
+    gwei: formatGwei(price.value as bigint),
+    eth: formatEther(price.value as bigint),
+
+    formatted: {
+      gwei: price.value as bigint > 20000000000n
+        ? roundNumber(formatGwei(price.value as bigint))
+        : toFloat(formatGwei(price.value as bigint), 1),
+      eth: formatEther(price.value as bigint),
+    }
+  }))
+
+  return unitPrice
+}
+
+export const useMintPrice = async (mintCount: Ref<number>) => {
+  const gasPrice = await useGasPrice()
+
+  const price = computed(() => (gasPrice.value.wei || 0n) * 60_000n * BigInt(mintCount.value))
+  const displayPrice = computed(() => customFormatEther(price.value))
+
+  return {
+    price,
+    displayPrice,
+  }
+}

package/app/composables/head.ts

@@ -0,0 +1,29 @@
+type HeadConfig = {
+  title: string;
+  description?: string;
+  og?: string;
+  append?: string;
+  meta?: { name: string, content: string }[];
+}
+
+const makeHead = ({
+  title,
+  append = '',
+  description = '',
+  og = '',
+  meta = [],
+}: HeadConfig) => {
+  const titleCompleted = `${title}${append}`
+  return {
+    title: titleCompleted,
+    meta: [
+      { name: 'description', content: description },
+      { property: 'og:title', content: titleCompleted },
+      { property: 'og:description', content: description },
+      { property: 'og:image', content: og },
+      ...meta,
+    ]
+  }
+}
+
+export const useMetaData = (config: HeadConfig) => useHead(makeHead(config))

package/app/composables/priceFeed.ts

@@ -0,0 +1,80 @@
+import { getPublicClient } from '@wagmi/core'
+
+const CHAINLINK_PRICE_FEED_ABI = [
+  {
+    inputs: [],
+    name: 'latestRoundData',
+    outputs: [
+      { internalType: 'uint80', name: 'roundId', type: 'uint80' },
+      { internalType: 'int256', name: 'answer', type: 'int256' },
+      { internalType: 'uint256', name: 'startedAt', type: 'uint256' },
+      { internalType: 'uint256', name: 'updatedAt', type: 'uint256' },
+      { internalType: 'uint80', name: 'answeredInRound', type: 'uint80' }
+    ],
+    stateMutability: 'view',
+    type: 'function'
+  }
+] as const
+
+const PRICE_FEED_ADDRESS = '0x5f4eC3Df9cbd43714FE2740f5E3616155c5b8419'
+
+export const usePriceFeedStore = () => {
+  const { $wagmi } = useNuxtApp()
+
+  return defineStore('priceFeedStore', {
+
+    state: () => ({
+      version: 1,
+      lastUpdated: 0,
+      ethUSDRaw: null as bigint|null,
+    }),
+    getters: {
+      ethUSD: store => store.ethUSDRaw ? (store.ethUSDRaw / BigInt(1e8)) : 0n,
+      ethUSC: store => store.ethUSDRaw ? (store.ethUSDRaw / BigInt(1e6)) : 0n,
+      ethUSDFormatted () {
+        return formatNumber(Number(this.ethUSC) / 100, 2)
+      },
+      weiToUSD (store) {
+        return (wei: bigint) => {
+          const cents = (wei * (store.ethUSDRaw || 0n)) / (10n ** 18n) / (10n ** 6n)
+
+          return formatNumber(Number(cents) / 100, 2)
+        }
+      },
+    },
+
+    actions: {
+      async fetchEthUsdPrice () {
+        const client = getPublicClient($wagmi, { chainId: 1 })
+
+        if (nowInSeconds() - this.lastUpdated < 3_600) {
+          return this.ethUSD
+        }
+
+        try {
+          const [, answer] = await client.readContract({
+            address: PRICE_FEED_ADDRESS,
+            abi: CHAINLINK_PRICE_FEED_ABI,
+            functionName: 'latestRoundData'
+          })
+
+          this.ethUSDRaw = answer
+          this.lastUpdated = nowInSeconds()
+        } catch (error) {
+          console.error('Error fetching price:', error)
+        }
+
+        return this.ethUSD
+      }
+    },
+
+    persist: {
+      storage: persistedState.localStorage,
+      serializer: {
+        serialize: stringifyJSON,
+        deserialize: parseJSON,
+      },
+    },
+
+  })()
+}