@visualizevalue/mint-app-base 0.1.59 → 0.1.61

package/.env.example

@@ -16,7 +16,7 @@ NUXT_PUBLIC_CREATOR_ADDRESS=0xc8f8e2F59Dd95fF67c3d39109ecA2e2A017D4c8a
 # =========================
 #         SERVICES
 # =========================
-NUXT_PUBLIC_BLOCK_EXPLORER=https://etherscan.io
+NUXT_PUBLIC_BLOCK_EXPLORER=https://sepolia.etherscan.io
 NUXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=
 NUXT_PUBLIC_RPC1=
 NUXT_PUBLIC_RPC2=
@@ -25,5 +25,5 @@ NUXT_PUBLIC_RPC3=
 # =========================
 #         ONCHAIN
 # =========================
-NUXT_PUBLIC_FACTORY_ADDRESS=0xfd0edC665A0566EF44f9BD7aB4E45DF7A7601a2b
+NUXT_PUBLIC_FACTORY_ADDRESS=0xdc27b70874E36f00290Bd588D5B31AD510ca88a5
 NUXT_PUBLIC_CHAIN_ID=11155111

package/app.config.ts

@@ -4,7 +4,7 @@ export default defineAppConfig({
       component: 'P5',
       name: 'P5 Renderer',
       version: 1n,
-      address: '0xf6f1f8ea7bbc82a3b3da6fba1c24408e7a9a8fab',
+      address: '0xe7bbcb8aaa9fd0acb720c24b4c44fad521ba621f',
       description: 'Allows using P5 scripts as the artifact content'
     },
   ],

package/components/BlocksTimeAgo.client.vue

@@ -13,7 +13,7 @@ const props = defineProps({
   blocks: BigInt,
 })
 
-const seconds = computed(() => blocksToSeconds(props.blocks))
+const seconds = computed(() => Number(blocksToSeconds(props.blocks)))
 const minutes = computed(() => Math.floor(seconds.value / 60))
 const hours = computed(() => Math.floor(minutes.value / 60))
 const days = computed(() => Math.floor(hours.value / 24))

package/components/Mint/Preview.client.vue

@@ -22,8 +22,6 @@ const { image, animationUrl, name, description } = useCreateMintData()
 
 <style scoped>
 .mint-preview {
-  position: sticky;
-  top: var(--spacer);
   height: min-content;
   place-content: start center;
   border-radius: var(--card-border-radius);
@@ -31,6 +29,11 @@ const { image, animationUrl, name, description } = useCreateMintData()
   grid-template-columns: 20% 1fr;
   gap: var(--spacer);
 
+  @media (--md) {
+    position: sticky;
+    top: var(--spacer);
+  }
+
   > * {
     grid-column: span 2;
   }

package/components/{MintToken.vue → MintToken.client.vue}

@@ -53,10 +53,10 @@ const store = useOnchainStore()
 const priceFeed = usePriceFeedStore()
 
 const { data: currentBlock } = useBlockNumber({ chainId: config.public.chainId })
-const mintOpen = computed(() => currentBlock.value && props.token.untilBlock > currentBlock.value)
-const blocksRemaining = computed(() => props.token.untilBlock - (currentBlock.value || 0n))
-const secondsRemaining = computed(() => blocksToSeconds(blocksRemaining.value))
-const until = computed(() => nowInSeconds() + secondsRemaining.value)
+const blocksRemaining = computed(() => props.token.mintedBlock + 7200n - (currentBlock.value || 0n))
+const mintOpen = computed(() => currentBlock.value && blocksRemaining.value > 0n)
+const secondsRemaining = computed(() => props.token.closeAt - BigInt(nowInSeconds()))
+const until = computed(() => props.token.closeAt)
 
 const mintCount = computed(() => props.mintCount)
 const { price, displayPrice } = useMintPrice(mintCount)

package/components/Token/Detail.client.vue

@@ -55,7 +55,7 @@
 
         <div class="mint-status">
           <p v-if="mintOpen">{{ blocksRemaining }} blocks remaining</p>
-          <p v-else-if="currentBlock">Closed at block {{ token.untilBlock }}</p>
+          <p v-else-if="currentBlock">Closed at block {{ token.mintedBlock + BLOCKS_PER_DAY }}</p>
           <p v-if="ownedBalance">You own {{ ownedBalance }} {{ pluralize('token', Number(ownedBalance)) }}</p>
         </div>
 

package/components/Token/MintTimeline.client.vue

@@ -15,7 +15,7 @@
             <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="time-ago"><BlocksTimeAgo v-if="currentBlock" :blocks="currentBlock - token.mintedBlock" /></span>
 
             <span class="links">
               <NuxtLink :to="`${config.public.blockExplorer}/nft/${token.collection}/${token.tokenId}`" target="_blank">
@@ -51,8 +51,7 @@ 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 backfillComplete = computed(() => token.mintsBackfilledUntilBlock <= token.mintedBlock)
 
 const loading = ref(true)
 const loadMore = ref()

package/components/Token/OverviewCard.vue

@@ -30,7 +30,7 @@
               <span v-if="token.description" class="description">{{ shortString(token.description, 60, 30) }}</span>
             </h1>
             <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>
+            <p v-else class="closed-at">Closed at block {{ token.mintedBlock + BLOCKS_PER_DAY }}</p>
           </header>
           <Embed v-if="token.animationUrl" :src="token.animationUrl" />
           <Image v-else-if="token.image" :src="token.image" :alt="token.name" />

package/components/TransactionFlow.vue

@@ -59,6 +59,10 @@ const props = defineProps({
     type: Number,
     default: 2_000,
   },
+  delayAutoclose: {
+    type: Number,
+    default: 2_000,
+  },
   skipConfirmation: Boolean,
   autoCloseSuccess: Boolean,
 })
@@ -146,7 +150,6 @@ const initializeRequest = async (request = cachedRequest.value) => {
     waiting.value = true
     const [receiptObject] = await Promise.all([
       waitForTransactionReceipt($wagmi, { hash: tx.value }),
-      delay(6_000),
     ])
     await delay(props.delayAfter)
     receipt.value = receiptObject
@@ -165,7 +168,7 @@ const initializeRequest = async (request = cachedRequest.value) => {
   waiting.value = false
 
   if (props.autoCloseSuccess && step.value === 'complete') {
-    await delay(2_000)
+    await delay(props.delayAutoclose)
     open.value = false
     await delay(300) // Animations...
   }

package/composables/collections.ts

@@ -3,7 +3,7 @@ import { type GetBalanceReturnType } from '@wagmi/core'
 import { parseAbiItem, type PublicClient } from 'viem'
 import type { MintEvent } from '~/utils/types'
 
-export const CURRENT_STATE_VERSION = 6
+export const CURRENT_STATE_VERSION = 7
 export const MAX_BLOCK_RANGE = 1800n
 export const MINT_BLOCKS = BLOCKS_PER_DAY
 
@@ -301,7 +301,7 @@ export const useOnchainStore = () => {
       },
 
       async fetchToken (address: `0x${string}`, id: number | string | bigint) {
-        const client = getPublicClient($wagmi, { chainId })
+        const client = getPublicClient($wagmi, { chainId }) as PublicClient
         const mintContract = getContract({
           address,
           abi: MINT_ABI,
@@ -319,23 +319,28 @@ export const useOnchainStore = () => {
         try {
           console.info(`Fetching token #${tokenId}`)
 
-          const [data, untilBlock] = await Promise.all([
+          const [data, dataUri, closeAt] = await Promise.all([
+            mintContract.read.get([tokenId]) as Promise<[string, string, `0x${string}`[], bigint, bigint, bigint, bigint]>,
             mintContract.read.uri([tokenId], { gas: 100_000_000_000 }) as Promise<string>,
             mintContract.read.mintOpenUntil([tokenId]) as Promise<bigint>,
           ])
 
-          const json = Buffer.from(data.substring(29), `base64`).toString()
+          const [ name, description, _artifact, _renderer, mintedBlock, _closeAt, _extraData ] = data
+
+          const json = Buffer.from(dataUri.substring(29), `base64`).toString()
           const metadata = JSON.parse(json)
 
           const token: Token = {
             tokenId,
             collection: address,
-            name: metadata.name,
-            description: metadata.description,
+            name,
+            description,
             image: metadata.image,
             animationUrl: metadata.animation_url,
-            scriptUrl: metadata.script_url,
-            untilBlock,
+
+            mintedBlock: BigInt(`${mintedBlock}`), // Force bigint
+            closeAt,
+
             mintsBackfilledUntilBlock: 0n,
             mintsFetchedUntilBlock: 0n,
             mints: []
@@ -366,13 +371,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 mintedAtBlock = token.untilBlock - MINT_BLOCKS
-        const storedToken = this.collections[token.collection].tokens[token.tokenId.toString()]
+        const untilBlock = token.mintedBlock + BLOCKS_PER_DAY
 
         // We want to sync until now, or when the mint closed
-        const toBlock = currentBlock > token.untilBlock ? token.untilBlock : currentBlock
+        const toBlock = currentBlock > untilBlock ? untilBlock : currentBlock
 
         if (token.mintsFetchedUntilBlock >= toBlock) {
           return console.info(`mints for #${token.tokenId} already fetched`)
@@ -383,9 +388,9 @@ export const useOnchainStore = () => {
         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 > token.mintedBlock // Otherwise we'll go back as far as possible
             ? maxRangeBlock // (to our max range)
-            : mintedAtBlock // (or all the way to when the token minted)
+            : token.mintedBlock // (or all the way to when the token minted)
 
         // Load mints in range
         this.addTokenMints(token, await this.loadMintEvents(token, fromBlock, toBlock))
@@ -400,17 +405,16 @@ export const useOnchainStore = () => {
       },
 
       async backfillTokenMints (token: Token) {
-        const mintedAtBlock = token.untilBlock - MINT_BLOCKS
         const storedToken = this.collections[token.collection].tokens[token.tokenId.toString()]
 
         // If we've backfilled all the way;
-        if (storedToken.mintsBackfilledUntilBlock <= mintedAtBlock) return
+        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 > mintedAtBlock ? toBlock - MAX_BLOCK_RANGE : mintedAtBlock
+        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

package/nuxt.config.ts

@@ -19,7 +19,7 @@ export default defineNuxtConfig({
       creatorAddress: '',
       defaultAvatar: '/icons/opepen.svg',
       description: 'To mint is a human right.',
-      factoryAddress: '0x9B47a8351a080ef055aB81E863CF67F3bdCA8365',
+      factoryAddress: '0xdc27b70874E36f00290Bd588D5B31AD510ca88a5',
       platformUrl: 'https://networked.art',
       rpc1: 'https://ethereum-sepolia.rpc.subquery.network/public',
       rpc2: 'https://ethereum-sepolia-rpc.publicnode.com',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visualizevalue/mint-app-base",
-  "version": "0.1.59",
+  "version": "0.1.61",
   "type": "module",
   "main": "./nuxt.config.ts",
   "dependencies": {
@@ -24,7 +24,7 @@
     "viem": "2.x",
     "vite": "^5.4.3",
     "vue-virtual-scroller": "2.0.0-beta.8",
-    "@visualizevalue/mint-utils": "^0.0.3"
+    "@visualizevalue/mint-utils": "^0.0.4"
   },
   "devDependencies": {
     "@types/codemirror": "^5.60.15",

package/utils/abis.ts

@@ -45,17 +45,16 @@ export const MINT_ABI = parseAbi([
   'event URI(string value, uint256 indexed id)',
   'event Withdrawal(uint256 amount)',
   'function acceptOwnership()',
-  'function artifact(uint256 tokenId) view returns (bytes content)',
   'function balanceOf(address account, uint256 id) view returns (uint256)',
   'function balanceOfBatch(address[] accounts, uint256[] ids) view returns (uint256[])',
   'function burn(address account, uint256 tokenId, uint256 amount)',
   'function contractURI() view returns (string)',
-  'function create(string tokenName, string tokenDescription, bytes[] tokenArtifact, uint32 tokenRenderer, uint192 tokenData)',
+  'function create(string tokenName, string tokenDescription, bytes[] tokenArtifact, uint32 tokenRenderer, uint128 tokenData)',
+  'function get(uint256 tokenId) view returns (string name, string description, address[] artifact, uint32 renderer, uint32 mintedBlock, uint64 closeAt, uint128 data)',
   'function init(string contractName, string contractSymbol, string contractDescription, bytes[] contractImage, address renderer, address owner)',
   'function initBlock() view returns (uint256)',
   'function isApprovedForAll(address account, address operator) view returns (bool)',
   'function latestTokenId() view returns (uint256)',
-  'function metadata() view returns (string name, string symbol, string description)',
   'function mint(uint256 tokenId, uint256 amount) payable',
   'function mintOpenUntil(uint256 tokenId) view returns (uint256)',
   'function owner() view returns (address)',
@@ -68,7 +67,6 @@ export const MINT_ABI = parseAbi([
   'function safeTransferFrom(address from, address to, uint256 id, uint256 value, bytes data)',
   'function setApprovalForAll(address operator, bool approved)',
   'function supportsInterface(bytes4 interfaceId) view returns (bool)',
-  'function tokens(uint256) view returns (string name, string description, uint32 renderer, uint32 blocks, uint192 data)',
   'function transferOwnership(address newOwner)',
   'function uri(uint256 tokenId) view returns (string)',
   'function version() view returns (uint256)',
@@ -76,7 +74,10 @@ export const MINT_ABI = parseAbi([
 ])
 
 export const RENDERER_ABI = parseAbi([
-  'function name() external pure returns (string memory)',
-  'function version() external pure returns (uint version)',
+  'function name() pure returns (string)',
+  'function version() pure returns (uint256)',
+  'function uri(uint256 tokenId, (string name, string description, address[] artifact, uint32 renderer, uint32 mintedBlock, uint64 closeAt, uint128 data) token) view returns (string)',
+  'function animationURI(uint256, (string name, string description, address[] artifact, uint32 renderer, uint32 mintedBlock, uint64 closeAt, uint128 data)) pure returns (string)',
+  'function imageURI(uint256, (string name, string description, address[] artifact, uint32 renderer, uint32 mintedBlock, uint64 closeAt, uint128 data) token) view returns (string)',
 ])
 

package/utils/time.ts

@@ -1,9 +1,9 @@
-import { BLOCKS_PER_CACHE, BLOCKS_PER_HOUR, BLOCKS_PER_DAY } from '@visualizevalue/mint-utils/time'
-import { blocksToSeconds, delay, nowInSeconds } from '@visualizevalue/mint-utils'
+import { BLOCK_TIME, BLOCKS_PER_CACHE, BLOCKS_PER_HOUR, BLOCKS_PER_DAY } from '@visualizevalue/mint-utils/time'
+import { blocksToSeconds, delay, nowInSeconds, secondsToBlocks } from '@visualizevalue/mint-utils'
 
 export {
-  BLOCKS_PER_CACHE, BLOCKS_PER_HOUR, BLOCKS_PER_DAY,
-  blocksToSeconds, delay, nowInSeconds,
+  BLOCK_TIME, BLOCKS_PER_CACHE, BLOCKS_PER_HOUR, BLOCKS_PER_DAY,
+  blocksToSeconds, delay, nowInSeconds, secondsToBlocks,
 }
 
 const now = ref(nowInSeconds())

package/utils/types.ts

@@ -44,10 +44,10 @@ export interface Token {
   tokenId: bigint
   name: string
   description: string
-  image: string,
-  animationUrl?: string,
-  scriptUrl?: string,
-  untilBlock: bigint
+  image: string
+  animationUrl?: string
+  closeAt: bigint
+  mintedBlock: bigint
   mintsFetchedUntilBlock: bigint
   mintsBackfilledUntilBlock: bigint
   mints: MintEvent[]