@visualizevalue/mint-app-base 0.1.47 → 0.1.49

package/components/Renderer/InstallCustom.client.vue

@@ -0,0 +1,91 @@
+<template>
+  <article class="install-custom-renderer">
+    <h1>Add Custom Renderer</h1>
+    <FormInput v-model="rendererAddressInput" placeholder="0x..." />
+
+    <Loading v-if="loading" />
+    <RendererOverviewCard
+      v-else-if="rendererAddress && rendererName"
+      :renderer="renderer"
+    >
+      <template #after>
+        <RendererInstallButton
+          :collection="collection"
+          :renderer="renderer"
+          #after
+        />
+      </template>
+    </RendererOverviewCard>
+  </article>
+</template>
+
+<script setup>
+const { $wagmi } = useNuxtApp()
+const chainId = useMainChainId()
+const { collection } = defineProps(['collection'])
+
+const rendererAddressInput = ref(``)
+const rendererAddress = ref()
+const rendererName = ref()
+const rendererVersion = ref()
+
+const renderer = computed(() => ({
+  address: rendererAddress.value,
+  name: rendererName.value,
+  version: rendererVersion.value,
+}))
+
+watch(rendererAddressInput, () => {
+  if (isAddress(rendererAddressInput.value)) {
+    rendererAddress.value = rendererAddressInput.value
+  } else {
+    rendererAddress.value = ``
+  }
+})
+
+const loading = ref(false)
+watch(rendererAddress, async () => {
+  if (! rendererAddress.value) {
+    rendererName.value = ''
+    rendererVersion.value = null
+    return
+  }
+
+  loading.value = true
+
+  try {
+    const rendererArgs = {
+      abi: RENDERER_ABI,
+      address: rendererAddress.value,
+      chainId
+    }
+
+    const [name, version] = await Promise.all([
+      await readContract($wagmi, {
+        ...rendererArgs,
+        functionName: 'name',
+      }),
+      await readContract($wagmi, {
+        ...rendererArgs,
+        functionName: 'version',
+      }),
+    ])
+
+    rendererName.value = name
+    rendererVersion.value = version
+  } catch (e) {
+    console.error(e)
+  }
+
+  loading.value = false
+})
+</script>
+
+<style scoped>
+.install-custom-renderer {
+  padding: var(--spacer);
+  border: var(--border);
+  display: grid;
+  gap: var(--spacer);
+}
+</style>

package/components/Renderer/Overview.client.vue

@@ -0,0 +1,75 @@
+<template>
+  <section class="renderers" id="installed-renderers">
+    <h1>Installed Renderers</h1>
+
+    <div>
+      <RendererOverviewCard
+        v-for="renderer of installedRenderers"
+        :renderer="renderer"
+      />
+    </div>
+  </section>
+
+  <section class="renderers" id="available-renderers">
+    <h1>Available Renderers</h1>
+
+    <div v-if="availableRenderers.length">
+      <RendererOverviewCard
+        v-for="renderer of availableRenderers"
+        :renderer="renderer"
+      >
+        <template #after>
+          <div class="actions">
+            <RendererInstallButton
+              :collection="collection"
+              :renderer="renderer"
+            />
+          </div>
+        </template>
+      </RendererOverviewCard>
+    </div>
+
+    <div v-if="! availableRenderers.length" class="empty">
+      <p>All known Renderers installed</p>
+    </div>
+
+    <RendererInstallCustom :collection="collection" />
+  </section>
+</template>
+
+<script setup>
+const props = defineProps(['collection'])
+
+const appConfig = useAppConfig()
+const store = useOnchainStore()
+
+const installedRenderers = computed(() => props.collection.renderers)
+
+const availableRenderers = computed(
+  () => appConfig.knownRenderers.filter(r =>
+    !installedRenderers.value.map(cr => cr.address).includes(r.address)
+  )
+)
+
+onMounted(() => {
+  store.fetchCollectionRenderers(props.collection.address)
+})
+</script>
+
+<style scoped>
+.renderers {
+  display: grid;
+  gap: var(--spacer);
+  overflow-x: hidden;
+
+  > h1 {
+    font-size: var(--font-lg);
+    border-bottom: var(--border);
+    padding-bottom: var(--size-2);
+  }
+
+  .empty {
+    color: var(--muted);
+  }
+}
+</style>

package/components/Renderer/OverviewCard.vue

@@ -0,0 +1,32 @@
+<template>
+  <article class="renderer-overview-card">
+    <div class="details">
+      <h1>{{ renderer.name }} <small>v{{ renderer.version }}</small></h1>
+      <p v-if="renderer.description">{{ renderer.description }}</p>
+      <p class="address">{{ renderer.address }}</p>
+    </div>
+    <slot name="after" />
+  </article>
+</template>
+
+<script setup>
+const { renderer } = defineProps(['renderer'])
+</script>
+
+<style scoped>
+article {
+  display: flex;
+  gap: var(--spacer);
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacer-sm);
+
+  &:not(:last-child) {
+    border-bottom: var(--border);
+  }
+
+  .address {
+    color: var(--muted);
+  }
+}
+</style>

package/components/Tabs.vue

@@ -0,0 +1,37 @@
+<template>
+  <menu class="tabs">
+    <slot name="menu" :active="active" :select="select" />
+  </menu>
+
+  <section class="tabs-content">
+    <slot name="content" :active="active" />
+  </section>
+</template>
+
+<script setup>
+const props = defineProps(['initial'])
+
+const active = ref(props.initial)
+const select = k => active.value = k
+</script>
+
+<style>
+.tabs {
+  border-bottom: var(--border);
+  padding: 0 var(--size-1);
+  margin: 0;
+  display: flex;
+  gap: var(--size-1);
+
+  > Button {
+    /* border-bottom-color: transparent; */
+    margin-bottom: calc(-1 * var(--border-width));
+
+    &.active {
+      border-color: var(--border-color);
+      border-bottom-color: var(--background);
+    }
+  }
+}
+</style>
+

package/components/Token/Detail.client.vue

@@ -2,7 +2,8 @@
   <article class="token-detail">
     <div class="artifact">
       <div>
-        <Image v-if="token.artifact" :src="token.artifact" :alt="token.name" />
+        <Embed v-if="token.animationUrl" :src="token.animationUrl" />
+        <Image v-else-if="token.image" :src="token.image" :alt="token.name" />
         <ImageVoid v-else />
       </div>
     </div>

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 v-if="token.artifact" :src="token.artifact" :alt="token.name" />
+          <Embed v-if="token.animationUrl" :src="token.animationUrl" />
+          <Image v-else-if="token.image" :src="token.image" :alt="token.name" />
           <ImageVoid v-else />
           <CardLink :to="{
             name: 'id-collection-tokenId',

package/components/TransactionFlow.vue

@@ -34,10 +34,8 @@
 </template>
 
 <script setup>
-import { useChainId } from '@wagmi/vue'
 import { waitForTransactionReceipt, watchChainId } from '@wagmi/core'
 const checkChain = useEnsureChainIdCheck()
-const chainId = useChainId()
 
 const { $wagmi } = useNuxtApp()
 const config = useRuntimeConfig()
@@ -83,6 +81,9 @@ watchChainId($wagmi, {
   }
 })
 
+const cachedRequest = ref(props.request)
+watch(props, () => { cachedRequest.value = props.request })
+
 const requesting = ref(false)
 const waiting = ref(false)
 const complete = ref(false)
@@ -121,7 +122,8 @@ const step = computed(() => {
   return 'error'
 })
 
-const initializeRequest = async (request = props.request) => {
+const initializeRequest = async (request = cachedRequest.value) => {
+  cachedRequest.value = request
   complete.value = false
   open.value = true
   error.value = ''

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 = 4
+export const CURRENT_STATE_VERSION = 6
 export const MAX_BLOCK_RANGE = 1800n
 export const MINT_BLOCKS = BLOCKS_PER_DAY
 
@@ -220,6 +220,7 @@ export const useOnchainStore = () => {
           owner: artist,
           tokens: {},
           balance: balance.value,
+          renderers: [],
         })
       },
 
@@ -228,6 +229,47 @@ export const useOnchainStore = () => {
         this.collections[address].balance = balance.value
       },
 
+      async fetchCollectionRenderers (address: `0x${string}`) {
+        const renderers = this.collections[address].renderers
+
+        let index = renderers.length
+        while (true) {
+          try {
+            const rendererAddress = await readContract($wagmi, {
+              abi: MINT_ABI,
+              address,
+              functionName: 'renderers',
+              args: [BigInt(index)],
+              chainId,
+            })
+
+            const rendererArgs = { abi: RENDERER_ABI, address: rendererAddress, chainId }
+
+            const [name, version] = await Promise.all([
+              await readContract($wagmi, {
+                ...rendererArgs,
+                functionName: 'name',
+              }),
+              await readContract($wagmi, {
+                ...rendererArgs,
+                functionName: 'version',
+              }),
+            ])
+
+            this.collections[address].renderers.push({
+              address: rendererAddress.toLowerCase() as `0x${string}`,
+              name,
+              version,
+            })
+
+            index ++
+          } catch (e) {
+            console.info(`Stopped parsing renderers ${e.shortMessage || e.message}`)
+            return
+          }
+        }
+      },
+
       async fetchCollectionTokens (address: `0x${string}`): Promise<Token[]> {
         this.collections[address].latestTokenId = await readContract($wagmi, {
           abi: MINT_ABI,
@@ -278,7 +320,7 @@ export const useOnchainStore = () => {
           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.uri([tokenId], { gas: 100_000_000_000 }) as Promise<string>,
             mintContract.read.mintOpenUntil([tokenId]) as Promise<bigint>,
           ])
 
@@ -290,7 +332,9 @@ export const useOnchainStore = () => {
             collection: address,
             name: metadata.name,
             description: metadata.description,
-            artifact: metadata.image,
+            image: metadata.image,
+            animationUrl: metadata.animation_url,
+            scriptUrl: metadata.script_url,
             untilBlock,
             mintsBackfilledUntilBlock: 0n,
             mintsFetchedUntilBlock: 0n,
@@ -298,7 +342,9 @@ export const useOnchainStore = () => {
           }
 
           this.collections[address].tokens[`${token.tokenId}`] = token
-        } catch (e) { }
+        } catch (e) {
+          console.error(e)
+        }
       },
 
       async fetchTokenBalance (token: Token, address: `0x${string}`) {

package/composables/createMint.ts

@@ -0,0 +1,155 @@
+import type { TransactionReceipt } from "viem"
+
+// Base token data
+const name        = ref('')
+const artifact    = ref('')
+const description = ref('')
+
+// Derived data based on artifact // renderer
+const image        = ref('')
+const animationUrl = ref('')
+
+// Renderer data
+const renderer: Ref<number>  = ref(0)
+const extraData: Ref<bigint> = ref(0n)
+
+// Main token creation composable
+export const useCreateMintData = () => {
+  // Reset the creation form values
+  const reset = () => {
+    name.value = ''
+    artifact.value = ''
+    description.value = ''
+
+    image.value = ''
+    animationUrl.value = ''
+
+    extraData.value = 0n
+  }
+
+  return {
+    name,
+    artifact,
+    description,
+    image,
+    animationUrl,
+    renderer,
+    extraData,
+
+    reset,
+  }
+}
+
+// Expose the mint component based on the selected renderer
+export const useCreateMintRendererComponent = (collection: Collection) => {
+  const appConfig = useAppConfig()
+  const rendererAddress: Ref<string | null> = computed(() => {
+    if (! collection.renderers?.length) return null
+
+    return collection.renderers[renderer.value].address.toLowerCase()
+  })
+
+  const component = computed(() => appConfig.knownRenderers
+    .find((r: Renderer) => r.address.toLowerCase() === rendererAddress.value)?.component || 'Base'
+  )
+
+  return {
+    component,
+  }
+}
+
+// Token creation flow
+export const useCreateMintFlow = (collection: Collection, txFlow: Ref) => {
+  const { $wagmi } = useNuxtApp()
+  const id = useArtistId()
+  const chainId = useMainChainId()
+  const store = useOnchainStore()
+
+  // Mint flow
+  const txFlowKey = ref(0)
+  const mint = async () => {
+    if (! artifact.value) {
+      alert(`Empty artifact data. Please try again.`)
+      return
+    }
+
+    const artifactByteArray = toByteArray(artifact.value)
+    const artifactChunks = chunkArray(artifactByteArray, 4)
+    const multiTransactionPrepare = artifactChunks.length > 1
+
+    try {
+      if (multiTransactionPrepare) {
+        if (! confirm(`Due to the large artifact size, we have to split it into ${artifactChunks.length} chunks and store them in separate transactions. You will be prompted with multiple transaction requests before minting the final token.`)) {
+          return
+        }
+
+        // On the first iteration we want to clear existing artifact data
+        let clearExisting = true
+
+        for (const chunk of artifactChunks) {
+          await txFlow.value.initializeRequest(() => writeContract($wagmi, {
+            abi: MINT_ABI,
+            chainId,
+            address: collection.address,
+            functionName: 'prepareArtifact',
+            args: [
+              collection.latestTokenId + 1n,
+              chunk,
+              clearExisting
+            ],
+          }))
+
+          // Make sure to rerender the tx flow component
+          txFlowKey.value ++
+
+          // On following iterations we want to keep existing artifact data
+          clearExisting = false
+        }
+      }
+
+      await txFlow.value.initializeRequest(() => writeContract($wagmi, {
+        abi: MINT_ABI,
+        chainId,
+        address: collection.address,
+        functionName: 'create',
+        args: [
+          name.value,
+          description.value,
+          multiTransactionPrepare ? [] : artifactByteArray,
+          renderer.value,
+          0n, // Additional Data
+        ],
+      }))
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  // On created
+  const mintCreated = async (receipt: TransactionReceipt) => {
+    const logs = receipt.logs.map(log => decodeEventLog({
+      abi: MINT_ABI,
+      data: log.data,
+      topics: log.topics,
+      strict: false,
+    }))
+
+    const mintedEvent = logs.find(log => log.eventName === 'TransferSingle')
+
+    await store.fetchToken(collection.address, mintedEvent.args.id)
+
+    // Force update the collection mint ID
+    store.collections[collection.address].latestTokenId = mintedEvent.args.id
+
+    await navigateTo({
+      name: 'id-collection-tokenId',
+      params: { id: id.value, collection: collection.address, tokenId: mintedEvent.args.id }
+    })
+  }
+
+  return {
+    mint,
+    mintCreated,
+  }
+}
+

package/index.d.ts

@@ -0,0 +1,11 @@
+import { Renderer } from './utils/types'
+
+declare module 'nuxt/schema' {
+  interface AppConfigInput {
+    // Known renderers besides the base renderer
+    knownRenderers: Renderer[],
+  }
+}
+
+// It is always important to ensure you import/export something when augmenting a type
+export {}

package/nuxt.config.ts

@@ -37,7 +37,7 @@ export default defineNuxtConfig({
       link: [
         { rel: 'icon', href: '/icon.svg', type: 'image/svg+xml' },
       ]
-    }
+    },
   },
 
   css: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visualizevalue/mint-app-base",
-  "version": "0.1.47",
+  "version": "0.1.49",
   "type": "module",
   "main": "./nuxt.config.ts",
   "dependencies": {
@@ -14,6 +14,8 @@
     "@wagmi/core": "^2.13.5",
     "@wagmi/vue": "^0.0.40",
     "buffer": "^6.0.3",
+    "codemirror": "^5",
+    "codemirror-editor-vue3": "^2.8.0",
     "multiformats": "^13.2.2",
     "postcss-custom-media": "^10.0.6",
     "postcss-custom-selectors": "^7.1.10",
@@ -25,6 +27,7 @@
     "@visualizevalue/mint-utils": "^0.0.3"
   },
   "devDependencies": {
+    "@types/codemirror": "^5.60.15",
     "nuxt": "^3.13.2",
     "typescript": "^5.5.4"
   },