@visualizevalue/mint-app-base 0.1.47 → 0.1.48

package/app.config.ts

@@ -0,0 +1,10 @@
+export default defineAppConfig({
+  knownRenderers: [
+    {
+      name: 'P5 Renderer',
+      version: 1n,
+      address: '0x6a08e806c7ad85b4f4720e76fdd8219a364b710e',
+      description: 'Allows using P5 scripts as the artifact content'
+    },
+  ],
+})

package/components/Collection/Actions.vue

@@ -0,0 +1,26 @@
+<template>
+  <menu v-if="ownedByMe">
+    <CollectionWithdraw :collection="collection" />
+    <Button
+      :to="{ name: 'id-collection-mint', params: { id, collection: collection.address } }"
+      id="mint-new"
+    >
+      <Icon type="add" />
+      <span>Mint</span>
+    </Button>
+    <Button
+      :to="{ name: 'id-collection-renderers', params: { id, collection: collection.address } }"
+      id="renderers"
+    >
+      <Icon type="code" />
+      <span>Renderers</span>
+    </Button>
+  </menu>
+</template>
+
+<script setup>
+const { collection } = defineProps({ collection: Object })
+
+const id = useArtistId()
+const ownedByMe = useIsMeCheck(collection.owner)
+</script>

package/components/Collection/Intro.vue

@@ -26,16 +26,7 @@
           </p>
         </div>
 
-        <menu v-if="ownedByMe">
-          <CollectionWithdraw :collection="collection" />
-          <Button
-            :to="{ name: 'id-collection-mint', params: { id, collection: collection.address } }"
-            id="mint-new"
-          >
-            <Icon type="add" />
-            <span>Mint New</span>
-          </Button>
-        </menu>
+        <CollectionActions :collection="collection" />
       </div>
     </slot>
   </header>
@@ -48,8 +39,6 @@ const { collection } = defineProps<{
 
 const id = useArtistId()
 const store = useOnchainStore()
-
-const ownedByMe = useIsMeCheck(collection.owner)
 </script>
 
 <style scoped>

package/components/Form/Group.vue

@@ -13,7 +13,7 @@
   width: 100%;
 }
 
-fieldset {
+.fieldset-wrapper > fieldset {
   width: 100%;
   max-width: -webkit-fill-available;
   display: flex;

package/components/Icon.vue

@@ -16,6 +16,7 @@ const ICONS = {
   'chevron-right': '➡️',
   'chevron-up': '⬆️',
   'close': '✖️',
+  'code': '🩻',
   'discord': '🤖',
   'edit': '📝',
   'email': '📧',

package/components/Mint/Action.client.vue

@@ -0,0 +1,51 @@
+<template>
+  <Actions class="borderless">
+    <Button @click="mint">Mint</Button>
+  </Actions>
+
+  <TransactionFlow
+    ref="txFlow"
+    :text="{
+      title: {
+        chain: 'Switch Chain',
+        requesting: 'Confirm In Wallet',
+        waiting: 'Transaction Submitted',
+        complete: 'Success!'
+      },
+      lead: {
+        chain: 'Requesting to switch chain...',
+        requesting: 'Requesting Signature...',
+        waiting: 'Checking mint Transaction...',
+        complete: `New token minted...`,
+      },
+      action: {
+        confirm: 'Mint',
+        error: 'Retry',
+        complete: 'OK',
+      },
+    }"
+    skip-confirmation
+    auto-close-success
+    @complete="mintCreated"
+  />
+</template>
+
+<script setup>
+const props = defineProps({
+  collection: Object,
+})
+
+const txFlow = ref()
+
+const { mint, mintCreated } = useCreateMintFlow(props.collection, txFlow)
+</script>
+
+<style scoped>
+menu {
+  justify-content: flex-end;
+
+  @media (--md) {
+    grid-column: 2;
+  }
+}
+</style>

package/components/Mint/Detail.client.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="mint-detail">
+    <MintPreview />
+
+    <MintRendererBase class="card" />
+
+    <MintAction :collection="collection" />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps(['collection'])
+</script>
+
+<style>
+.mint-detail {
+  display: grid;
+  gap: var(--spacer);
+
+  > * {
+    border: var(--border);
+    padding: var(--spacer);
+  }
+
+  @media (--md) {
+    grid-template-columns: 40% 1fr;
+  }
+
+  @media (--lg) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+</style>

package/components/Mint/Preview.client.vue

@@ -0,0 +1,43 @@
+<template>
+  <article class="mint-preview">
+    <Image v-if="image" :src="image" alt="Preview" />
+    <ImagePreview v-else />
+    <h1 :class="{ '': !name }">{{ name || 'Token' }}</h1>
+    <p :class="{ '': !description }">
+      {{ description || 'No description' }}
+    </p>
+  </article>
+</template>
+
+<script setup>
+const { image, name, description } = useCreateMintData()
+</script>
+
+<style scoped>
+.mint-preview {
+  height: 100%;
+  place-content: center;
+
+  .image,
+  svg {
+    margin-bottom: var(--spacer-sm);
+    width: 100%;
+  }
+
+  svg {
+    box-shadow: var(--border-shadow);
+  }
+
+  h1 {
+    display: flex;
+    gap: var(--spacer-sm);
+    align-items: baseline;
+    font-size: var(--font-lg);
+  }
+
+  p {
+    color: var(--muted);
+  }
+}
+</style>
+

package/components/Mint/Renderer/Base.client.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="mint-renderer-base">
+    <Actions>
+      <select class="select choose-mode" v-model="mode">
+        <option value="file" title="Data URI Encoded File Upload">DATA-URI</option>
+        <option value="ipfs" title="Interplanetary File System">IPFS</option>
+        <option value="ar" title="Arweave">ARWEAVE</option>
+        <option value="http" title="Hypertext Transfer Protocol" disabled>HTTP</option>
+        <option value="svg" title="Scalable Vector Graphic" disabled>SVG</option>
+      </select>
+    </Actions>
+
+    <div>
+      <div v-if="mode === 'file'">
+        <FormSelectFile @change="setArtifact" />
+        <p v-if="! isSmall" class="muted">
+          <small>
+            Note: This should be a small file, prefferably an SVG like <a href="https://presence.art/tokens/perspective.svg" target="_blank">this one (810 bytes)</a>.
+            If it is larger than what we can store within one transaction, the token creation will be split up into multiple transactions.
+          </small>
+        </p>
+      </div>
+      <FormInput v-else-if="mode === 'ipfs'" v-model="ipfsCid" placeholder="CID (qmx...)" prefix="ipfs://" required />
+      <FormInput v-else-if="mode === 'ar'" v-model="arTxId" placeholder="TX ID (frV...)" prefix="ar://" required />
+
+      <FormInput v-model="name" placeholder="Title" required />
+      <FormInput v-model="description" placeholder="Description" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const {
+  artifact,
+  image,
+  name,
+  description,
+} = useCreateMintData()
+
+const mode = ref('file')
+const ipfsCid = ref('')
+const arTxId= ref('')
+
+const artifactSize = ref(0)
+const isSmall = computed(() => artifactSize.value / 1024 < 10)
+const setArtifact = async (file) => {
+  try {
+    artifact.value = await imageFileToDataUri(file)
+    artifactSize.value = file.size
+  } catch (e) {
+    artifact.value = ''
+    artifactSize.value = 0
+  }
+}
+watch(ipfsCid, () => {
+  const validated = validateCID(ipfsCid.value)
+  if (! validated) {
+    artifact.value = ''
+  } else {
+    artifact.value = ipfsToHttpURI(`ipfs://${validated}`)
+  }
+})
+watch(arTxId, () => {
+  artifact.value = `https://arweave.net/${arTxId.value}`
+})
+watch(mode, () => artifact.value = '')
+
+// Simple and stupid for the base renderer..
+watch(artifact, () => image.value = artifact.value)
+</script>
+
+<style scoped>
+  .mint-renderer-base {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer);
+    height: 100%;
+
+    > div {
+      display: flex;
+      height: 100%;
+      flex-direction: column;
+      justify-content: center;
+      gap: var(--spacer);
+    }
+  }
+
+  select.choose-mode {
+    width: fit-content;
+  }
+</style>
+

package/components/Page/Frame.vue

@@ -33,6 +33,7 @@ watch(props, () => updateBreadcrumbs())
   &.inset {
     gap: var(--spacer);
     padding: var(--spacer);
+    overflow-x: hidden;
 
     > *:not(.borderless) {
       border: var(--border);

package/components/Renderer/InstallButton.vue

@@ -0,0 +1,62 @@
+<template>
+  <Button @click="install">Install</Button>
+  <TransactionFlow
+    ref="txFlow"
+    :request="installRequest"
+    :text="{
+      title: {
+        chain: 'Switch Chain',
+        requesting: 'Confirm In Wallet',
+        waiting: 'Transaction Submitted',
+        complete: 'Success!'
+      },
+      lead: {
+        chain: 'Requesting to switch chain...',
+        requesting: 'Requesting Signature...',
+        waiting: 'Checking Transaction...',
+        complete: `New Renderer registered...`,
+      },
+      action: {
+        confirm: 'Register Renderer',
+        error: 'Retry',
+        complete: 'OK',
+      },
+    }"
+    skip-confirmation
+    auto-close-success
+  />
+</template>
+
+<script setup>
+const { $wagmi } = useNuxtApp()
+const { collection, renderer } = defineProps(['collection', 'renderer'])
+const store = useOnchainStore()
+const chainId = useMainChainId()
+
+const installRequest = computed(() => async () => {
+  return writeContract($wagmi, {
+    abi: MINT_ABI,
+    chainId,
+    address: collection.address,
+    functionName: 'registerRenderer',
+    args: [
+      renderer.address,
+    ],
+  })
+})
+const txFlow = ref()
+const installing = ref(false)
+const install = async () => {
+  installing.value = true
+
+  try {
+    await txFlow.value.initializeRequest(installRequest.value)
+
+    await store.fetchCollectionRenderers(collection.address)
+  } catch (e) {
+    console.error(e)
+  }
+
+  installing.value = false
+}
+</script>

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>
+        <RendererInstallRendererButton
+          :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,73 @@
+<template>
+  <section class="renderers" id="installed-renderers">
+    <h1>Installed Renderers</h1>
+
+    <div>
+      <RendererOverviewCard
+        v-for="renderer of collection.renderers"
+        :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">
+            <RendererInstallRendererButton
+              :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 { collection } = defineProps(['collection'])
+
+const appConfig = useAppConfig()
+const store = useOnchainStore()
+
+const availableRenderers = computed(
+  () => appConfig.knownRenderers.filter(r =>
+    !collection.renderers.map(cr => cr.address).includes(r.address)
+  )
+)
+
+onMounted(() => {
+  store.fetchCollectionRenderers(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/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 = 5
 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,

package/composables/createMint.ts

@@ -0,0 +1,138 @@
+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(0)
+const extraData = 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 = ''
+
+    renderer.value = 0
+    extraData.value = 0n
+  }
+
+  return {
+    name,
+    artifact,
+    description,
+    image,
+    animationUrl,
+    renderer,
+    extraData,
+
+    reset,
+  }
+}
+
+// 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,
+          0, // Renderer
+          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
+    renderers: 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.48",
   "type": "module",
   "main": "./nuxt.config.ts",
   "dependencies": {

package/pages/[id]/[collection]/mint.vue

@@ -1,202 +1,23 @@
 <template>
   <Authenticated>
-    <PageFrame :title="breadcrumb" class="inset wide" id="mint-token">
-      <article class="preview">
-        <Image v-if="image" :src="image" alt="Preview" />
-        <ImagePreview v-else />
-        <h1 :class="{ '': !name }">{{ name || 'Token' }}</h1>
-        <p :class="{ '': !description }">
-          {{ description || 'No description' }}
-        </p>
-      </article>
+    <PageFrame :title="breadcrumb" class="inset wide">
 
-      <form @submit.stop.prevent="mint" class="card">
-        <Actions>
-          <select class="select choose-mode" v-model="mode">
-            <option value="file" title="Data URI Encoded File Upload">DATA-URI</option>
-            <option value="ipfs" title="Interplanetary File System">IPFS</option>
-            <option value="ar" title="Arweave">ARWEAVE</option>
-            <option value="http" title="Hypertext Transfer Protocol" disabled>HTTP</option>
-            <option value="svg" title="Scalable Vector Graphic" disabled>SVG</option>
-          </select>
-        </Actions>
-
-        <div>
-          <div v-if="mode === 'file'">
-            <FormSelectFile @change="setImage" />
-            <p v-if="! isSmall" class="muted">
-              <small>
-                Note: This should be a small file, prefferably an SVG like <a href="https://presence.art/tokens/perspective.svg" target="_blank">this one (810 bytes)</a>.
-                If it is larger than what we can store within one transaction, the token creation will be split up into multiple transactions.
-              </small>
-            </p>
-          </div>
-          <FormInput v-else-if="mode === 'ipfs'" v-model="ipfsCid" placeholder="CID (qmx...)" prefix="ipfs://" required />
-          <FormInput v-else-if="mode === 'ar'" v-model="arTxId" placeholder="TX ID (frV...)" prefix="ar://" required />
-
-          <FormInput v-model="name" placeholder="Title" required />
-          <FormInput v-model="description" placeholder="Description" />
-        </div>
-
-        <Actions>
-          <Button>Mint</Button>
-        </Actions>
-        <TransactionFlow
-          ref="txFlow"
-          :text="{
-            title: {
-              chain: 'Switch Chain',
-              requesting: 'Confirm In Wallet',
-              waiting: 'Transaction Submitted',
-              complete: 'Success!'
-            },
-            lead: {
-              chain: 'Requesting to switch chain...',
-              requesting: 'Requesting Signature...',
-              waiting: 'Checking mint Transaction...',
-              complete: `New token minted...`,
-            },
-            action: {
-              confirm: 'Mint',
-              error: 'Retry',
-              complete: 'OK',
-            },
-          }"
-          skip-confirmation
-          auto-close-success
-        />
-
-      </form>
+      <MintDetail :collection="collection" class="borderless" />
 
     </PageFrame>
   </Authenticated>
 </template>
 
 <script setup>
-const { $wagmi } = useNuxtApp()
-const id = useArtistId()
-const chainId = useMainChainId()
+// Reset any previously set data on initial load
+const { reset } = useCreateMintData()
+onMounted(() => reset())
 
+// Prepare breadcrumbs
 const props = defineProps(['collection'])
-const store = useOnchainStore()
 const collection = computed(() => props.collection)
-
-const mode = ref('file')
-const ipfsCid = ref('')
-// TODO: Rework to plugin architecture. Or at least per renderer logic.
-const arTxId= ref('')
-const image = ref('')
-const name = ref('')
-const description = ref('')
-
-const imageSize = ref(0)
-const isSmall = computed(() => imageSize.value / 1024 < 10)
-const setImage = async (file) => {
-  try {
-    image.value = await imageFileToDataUri(file)
-    imageSize.value = file.size
-  } catch (e) {
-    image.value = ''
-    imageSize.value = 0
-  }
-}
-watch(ipfsCid, () => {
-  const validated = validateCID(ipfsCid.value)
-  if (! validated) {
-    image.value = ''
-  } else {
-    image.value = ipfsToHttpURI(`ipfs://${validated}`)
-  }
-})
-watch(arTxId, () => {
-  image.value = `https://arweave.net/${arTxId.value}`
-})
-watch(mode, () => image.value = '')
-
-const txFlow = ref()
-const txFlowKey = ref(0)
-const minting = ref(false)
-const mint = async () => {
-  if (! image.value) {
-    alert(`Empty image data. Please try again.`)
-    return
-  }
-
-  const artifact = toByteArray(image.value)
-  const artifactChunks = chunkArray(artifact, 4)
-  const multiTransactionPrepare = artifactChunks.length > 1
-
-  minting.value = true
-
-  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.value.address,
-          functionName: 'prepareArtifact',
-          args: [
-            collection.value.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
-      }
-    }
-
-    const receipt = await txFlow.value.initializeRequest(() => writeContract($wagmi, {
-      abi: MINT_ABI,
-      chainId,
-      address: collection.value.address,
-      functionName: 'create',
-      args: [
-        name.value,
-        description.value,
-        multiTransactionPrepare ? [] : artifact,
-        0,
-        0n,
-      ],
-    }))
-
-    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.value.address, mintedEvent.args.id)
-
-    // Force update the collection mint ID
-    store.collections[collection.value.address].latestTokenId = mintedEvent.args.id
-
-    await navigateTo({
-      name: 'id-collection-tokenId',
-      params: { id: id.value, collection: collection.value.address, tokenId: mintedEvent.args.id }
-    })
-  } catch (e) {
-    console.error(e)
-  }
-
-  minting.value = false
-}
-
+const id = useArtistId()
+const store = useOnchainStore()
 const subdomain = useSubdomain()
 const isMe = useIsMe()
 
@@ -225,55 +46,3 @@ useMetaData({
 })
 </script>
 
-<style scoped>
-#mint-token {
-  display: grid;
-
-  @media (--md) {
-    grid-template-columns: 40% 1fr;
-  }
-
-  @media (--lg) {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-.preview {
-  height: 100%;
-  place-content: center;
-
-  .image,
-  svg {
-    margin-bottom: var(--spacer-sm);
-    width: 100%;
-  }
-
-  svg {
-    box-shadow: var(--border-shadow);
-  }
-
-  h1 {
-    display: flex;
-    gap: var(--spacer-sm);
-    align-items: baseline;
-    font-size: var(--font-lg);
-  }
-
-  p {
-    color: var(--muted);
-  }
-}
-
-form {
-  width: 100%;
-
-  > div {
-    display: grid;
-    gap: var(--spacer);
-  }
-}
-
-select.choose-mode {
-  width: fit-content;
-}
-</style>

package/pages/[id]/[collection]/renderers.vue

@@ -0,0 +1,43 @@
+<template>
+  <Authenticated>
+    <PageFrame :title="breadcrumb" class="inset" id="manage-renderers">
+      <RendererOverview :collection="collection" />
+    </PageFrame>
+  </Authenticated>
+</template>
+
+<script setup>
+const id = useArtistId()
+
+const props = defineProps(['collection'])
+const store = useOnchainStore()
+const collection = computed(() => props.collection)
+
+const subdomain = useSubdomain()
+const isMe = useIsMe()
+
+const breadcrumb = computed(() => {
+  const path = subdomain.value || isMe.value ? [] : [
+    {
+      text: store.displayName(id.value),
+      to: { name: 'id', params: { id: id.value } }
+    }
+  ]
+
+  return [
+    ...path,
+    {
+      text: `${ collection.value.name }`,
+      to: { name: 'id-collection', params: { id: id.value, collection: collection.value.address } }
+    },
+    {
+      text: `Manage Renderers`
+    },
+  ]
+})
+
+useMetaData({
+  title: `Manage Renderers | ${collection.value.name}`,
+})
+</script>
+

package/utils/abis.ts

@@ -19,7 +19,6 @@ export const FACTORY_ABI = parseAbi([
   'function version() pure returns (uint256)'
 ])
 
-
 export const MINT_ABI = parseAbi([
   'error ERC1155InsufficientBalance(address sender, uint256 balance, uint256 needed, uint256 tokenId)',
   'error ERC1155InvalidApprover(address approver)',
@@ -75,3 +74,9 @@ export const MINT_ABI = parseAbi([
   'function version() view returns (uint256)',
   'function withdraw()'
 ])
+
+export const RENDERER_ABI = parseAbi([
+  'function name() external pure returns (string memory)',
+  'function version() external pure returns (uint version)',
+])
+

package/utils/types.ts

@@ -34,8 +34,9 @@ export interface Collection {
   description: string
   initBlock: bigint
   latestTokenId: bigint
-  tokens: { [key: string]: Token }
   balance: bigint
+  tokens: { [key: string]: Token }
+  renderers: Renderer[]
 }
 
 export interface Token {
@@ -60,3 +61,10 @@ export interface MintEvent {
   amount: bigint
   price: bigint
 }
+
+export interface Renderer {
+  address: `0x${string}`
+  name: string
+  description?: string
+  version: bigint
+}