@visualizevalue/mint-app-base 0.1.48 → 0.1.49

package/app.config.ts

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

package/components/CodeEditor.client.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="code-editor">
+    <CodeMirror
+      :value="modelValue"
+      :options="cmOptions"
+      height="100%"
+      :placeholder="placeholder"
+      @change="$emit('update:modelValue', $event)"
+      original-style
+    />
+  </div>
+</template>
+
+<script setup>
+import CodeMirror from 'codemirror-editor-vue3'
+import 'codemirror/addon/display/placeholder.js'
+import 'codemirror/mode/htmlmixed/htmlmixed.js'
+import 'codemirror/mode/javascript/javascript.js'
+// import 'codemirror/theme/ayu-mirage.css'
+
+const props = defineProps({
+  modelValue: String,
+  placeholder: String,
+  mode: {
+    type: String,
+    default: 'text/javascript'
+  },
+})
+const emit = defineEmits(['update:modelValue'])
+
+const cmOptions = computed(() => ({
+  mode: props.mode,
+  // theme: 'ayu-mirage',
+  indentUnit: 2,
+  tabSize: 2,
+  indentWithTab: false
+}))
+</script>
+
+<style scoped>
+.code-editor {
+  text-transform: none;
+  height: 100%;
+
+  :deep(.CodeMirror) {
+    height: 100%;
+  }
+}
+</style>

package/components/Collection/Actions.vue

@@ -8,13 +8,6 @@
       <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>
 

package/components/Embed.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="embed">
+    <iframe
+      ref="frame"
+      frameborder="0"
+      :src="src"
+      sandbox="allow-scripts"
+    ></iframe>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  src: String,
+})
+</script>
+
+<style scoped>
+.embed {
+  width: 100%;
+  height: 0;
+  padding-bottom: 100%;
+  position: relative;
+
+  iframe {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    border: var(--border);
+  }
+}
+</style>
+

package/components/Form/SelectFile.vue

@@ -31,6 +31,10 @@ const { files, open, reset, onChange } = useFileDialog({
 
 const file = computed(() => files.value?.length ? files.value[0] : null)
 onChange(() => emit('change', file.value))
+
+defineExpose({
+  reset,
+})
 </script>
 
 <style scoped>

package/components/Mint/Detail.client.vue

@@ -1,29 +1,44 @@
+<script setup>
+import Base from './Renderer/Base.client.vue'
+import P5 from './Renderer/P5.client.vue'
+
+const components = {
+  Base,
+  P5,
+}
+
+const props = defineProps(['collection'])
+const { component } = useCreateMintRendererComponent(props.collection)
+</script>
+
 <template>
   <div class="mint-detail">
+    <MintSelectRenderer :collection="collection" class="borderless" />
+
     <MintPreview />
 
-    <MintRendererBase class="card" />
+    <component :is="components[component]" class="card" />
 
     <MintAction :collection="collection" />
   </div>
 </template>
 
-<script setup>
-const props = defineProps(['collection'])
-</script>
-
 <style>
 .mint-detail {
   display: grid;
   gap: var(--spacer);
 
-  > * {
+  > *:not(.borderless) {
     border: var(--border);
     padding: var(--spacer);
   }
 
   @media (--md) {
     grid-template-columns: 40% 1fr;
+
+    .mint-select-renderer {
+      grid-column: span 2;
+    }
   }
 
   @media (--lg) {
@@ -31,3 +46,4 @@ const props = defineProps(['collection'])
   }
 }
 </style>
+

package/components/Mint/Preview.client.vue

@@ -1,7 +1,12 @@
 <template>
   <article class="mint-preview">
-    <Image v-if="image" :src="image" alt="Preview" />
-    <ImagePreview v-else />
+    <div class="static">
+      <Image v-if="image" :src="image" alt="Preview" />
+      <ImagePreview v-else />
+    </div>
+
+    <Embed v-if="animationUrl" :src="animationUrl" />
+
     <h1 :class="{ '': !name }">{{ name || 'Token' }}</h1>
     <p :class="{ '': !description }">
       {{ description || 'No description' }}
@@ -10,7 +15,7 @@
 </template>
 
 <script setup>
-const { image, name, description } = useCreateMintData()
+const { image, animationUrl, name, description } = useCreateMintData()
 </script>
 
 <style scoped>
@@ -18,14 +23,24 @@ const { image, name, description } = useCreateMintData()
   height: 100%;
   place-content: center;
 
+  svg {
+    box-shadow: var(--border-shadow);
+  }
+
   .image,
   svg {
     margin-bottom: var(--spacer-sm);
     width: 100%;
   }
 
-  svg {
-    box-shadow: var(--border-shadow);
+  .static {
+    &:has(+ .embed) {
+      width: 30%;
+    }
+  }
+
+  .embed {
+    margin: var(--spacer-sm) 0;
   }
 
   h1 {

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

@@ -12,7 +12,7 @@
 
     <div>
       <div v-if="mode === 'file'">
-        <FormSelectFile @change="setArtifact" />
+        <FormSelectFile ref="select" @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>.
@@ -30,6 +30,13 @@
 </template>
 
 <script setup>
+const props = defineProps({
+  decoupleArtifact: {
+    type: Boolean,
+    default: false,
+  },
+})
+
 const {
   artifact,
   image,
@@ -37,36 +44,44 @@ const {
   description,
 } = useCreateMintData()
 
+const select = ref()
 const mode = ref('file')
 const ipfsCid = ref('')
 const arTxId= ref('')
 
-const artifactSize = ref(0)
-const isSmall = computed(() => artifactSize.value / 1024 < 10)
+const imageSize = ref(0)
+const isSmall = computed(() => imageSize.value / 1024 < 10)
 const setArtifact = async (file) => {
   try {
-    artifact.value = await imageFileToDataUri(file)
-    artifactSize.value = file.size
+    image.value = await imageFileToDataUri(file)
+    imageSize.value = file.size
   } catch (e) {
-    artifact.value = ''
-    artifactSize.value = 0
+    image.value = ''
+    imageSize.value = 0
   }
 }
 watch(ipfsCid, () => {
   const validated = validateCID(ipfsCid.value)
   if (! validated) {
-    artifact.value = ''
+    image.value = ''
   } else {
-    artifact.value = ipfsToHttpURI(`ipfs://${validated}`)
+    image.value = ipfsToHttpURI(`ipfs://${validated}`)
   }
 })
 watch(arTxId, () => {
-  artifact.value = `https://arweave.net/${arTxId.value}`
+  image.value = `https://arweave.net/${arTxId.value}`
 })
-watch(mode, () => artifact.value = '')
+watch(mode, () => image.value = '')
+
+watch(image, () => {
+  if (props.decoupleArtifact) return
 
-// Simple and stupid for the base renderer..
-watch(artifact, () => image.value = artifact.value)
+  // Copy to image (simple and stupid for the base renderer...)
+  artifact.value = image.value
+
+  // If artifact is empty, reset the select field
+  if (! artifact.value) select.value.reset()
+})
 </script>
 
 <style scoped>

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

@@ -0,0 +1,67 @@
+<template>
+  <div class="mint-renderer-p5">
+
+    <Tabs initial="base">
+      <template #menu="{ active, select }">
+        <Button @click="select('base')" :class="{ active: active === 'base' }">Static</Button>
+        <Button @click="select('script')" :class="{ active: active === 'script' }">P5 Script</Button>
+      </template>
+      <template #content="{ active }">
+        <MintRendererBase v-show="active === 'base'" decouple-artifact />
+        <CodeEditor v-show="active === 'script'" v-model="script" class="full" />
+      </template>
+    </Tabs>
+  </div>
+</template>
+
+<script setup>
+const {
+  artifact,
+  image,
+  animationUrl,
+} = useCreateMintData()
+
+const script = ref(DEFAULT_P5_SCRIPT)
+
+// Keep the animationURL (for the preview) up to date
+watchEffect(() => {
+  animationUrl.value = getP5HtmlUri('Preview', script.value)
+})
+
+// Encode the artifact as per how the P5Renderer.sol contract expects it.
+watchEffect(() => {
+  artifact.value = encodeAbiParameters(
+    [ { type: 'string', name: 'image' }, { type: 'string', name: 'script' } ],
+    [ image.value, script.value ],
+  )
+})
+</script>
+
+<style>
+.mint-renderer-p5 {
+  padding: 0 !important;
+  border: 0 !important;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+
+  > .tabs {
+    height: min-content;
+  }
+
+  > .tabs-content {
+    border: var(--border);
+    border-top: 0;
+    height: 100%;
+
+    > * {
+      height: 100%;
+    }
+
+    > *:not(.full) {
+      padding: var(--spacer);
+    }
+  }
+}
+</style>
+

package/components/Mint/SelectRenderer.client.vue

@@ -0,0 +1,52 @@
+<template>
+  <aside class="mint-select-renderer">
+    <select
+      class="select"
+      v-model="selection"
+    >
+      <option
+        v-for="( renderer, index ) in collection.renderers"
+        :value="index"
+        :title="renderer.name"
+      >{{ renderer.name }}</option>
+      <option disabled>----</option>
+      <option value="new">Install New</option>
+    </select>
+  </aside>
+</template>
+
+<script setup>
+const { collection } = defineProps(['collection'])
+const id = useArtistId()
+
+const store = useOnchainStore()
+onMounted(() => store.fetchCollectionRenderers(collection.address))
+
+const { renderer, reset } = useCreateMintData()
+const selection = ref(renderer.value)
+watch(selection, () => {
+  if (selection.value === 'new') {
+    return navigateTo({ name: 'id-collection-renderers', params: { id: id.value, collection: collection.address } })
+  }
+
+  renderer.value = selection.value
+
+  reset()
+})
+</script>
+
+<style scoped>
+.mint-select-renderer {
+  display: grid;
+  gap: var(--spacer);
+
+  @media (--md) {
+    display: flex;
+    justify-content: space-between;
+
+    .select {
+      width: fit-content;
+    }
+  }
+}
+</style>

package/components/Renderer/InstallCustom.client.vue

@@ -9,7 +9,7 @@
       :renderer="renderer"
     >
       <template #after>
-        <RendererInstallRendererButton
+        <RendererInstallButton
           :collection="collection"
           :renderer="renderer"
           #after

package/components/Renderer/Overview.client.vue

@@ -4,7 +4,7 @@
 
     <div>
       <RendererOverviewCard
-        v-for="renderer of collection.renderers"
+        v-for="renderer of installedRenderers"
         :renderer="renderer"
       />
     </div>
@@ -20,7 +20,7 @@
       >
         <template #after>
           <div class="actions">
-            <RendererInstallRendererButton
+            <RendererInstallButton
               :collection="collection"
               :renderer="renderer"
             />
@@ -38,19 +38,21 @@
 </template>
 
 <script setup>
-const { collection } = defineProps(['collection'])
+const props = defineProps(['collection'])
 
 const appConfig = useAppConfig()
 const store = useOnchainStore()
 
+const installedRenderers = computed(() => props.collection.renderers)
+
 const availableRenderers = computed(
   () => appConfig.knownRenderers.filter(r =>
-    !collection.renderers.map(cr => cr.address).includes(r.address)
+    !installedRenderers.value.map(cr => cr.address).includes(r.address)
   )
 )
 
 onMounted(() => {
-  store.fetchCollectionRenderers(collection.address)
+  store.fetchCollectionRenderers(props.collection.address)
 })
 </script>
 

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/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 = 5
+export const CURRENT_STATE_VERSION = 6
 export const MAX_BLOCK_RANGE = 1800n
 export const MINT_BLOCKS = BLOCKS_PER_DAY
 
@@ -320,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>,
           ])
 
@@ -332,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,
@@ -340,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

@@ -10,8 +10,8 @@ const image        = ref('')
 const animationUrl = ref('')
 
 // Renderer data
-const renderer  = ref(0)
-const extraData = ref(0n)
+const renderer: Ref<number>  = ref(0)
+const extraData: Ref<bigint> = ref(0n)
 
 // Main token creation composable
 export const useCreateMintData = () => {
@@ -24,7 +24,6 @@ export const useCreateMintData = () => {
     image.value = ''
     animationUrl.value = ''
 
-    renderer.value = 0
     extraData.value = 0n
   }
 
@@ -41,6 +40,24 @@ export const useCreateMintData = () => {
   }
 }
 
+// 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()
@@ -99,7 +116,7 @@ export const useCreateMintFlow = (collection: Collection, txFlow: Ref) => {
           name.value,
           description.value,
           multiTransactionPrepare ? [] : artifactByteArray,
-          0, // Renderer
+          renderer.value,
           0n, // Additional Data
         ],
       }))

package/index.d.ts

@@ -3,7 +3,7 @@ import { Renderer } from './utils/types'
 declare module 'nuxt/schema' {
   interface AppConfigInput {
     // Known renderers besides the base renderer
-    renderers: Renderer[],
+    knownRenderers: Renderer[],
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visualizevalue/mint-app-base",
-  "version": "0.1.48",
+  "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"
   },

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

@@ -9,10 +9,6 @@
 </template>
 
 <script setup>
-// Reset any previously set data on initial load
-const { reset } = useCreateMintData()
-onMounted(() => reset())
-
 // Prepare breadcrumbs
 const props = defineProps(['collection'])
 const collection = computed(() => props.collection)

package/utils/p5Script.ts

@@ -0,0 +1,33 @@
+export const DEFAULT_P5_SCRIPT =
+`let dimension
+
+function setup() {
+  dimension = Math.min(windowWidth, windowHeight)
+
+  createCanvas(dimension, dimension)
+
+  background(150)
+}
+
+function draw() {
+  // ...
+}
+`
+
+export const getP5Html = (title: string, script: string, isUri: boolean = false) =>
+`<html>
+    <head>
+        <title>${title}</title>
+        <link rel="stylesheet" href="data:text/css;base64,aHRtbHtoZWlnaHQ6MTAwJX1ib2R5e21pbi1oZWlnaHQ6MTAwJTttYXJnaW46MDtwYWRkaW5nOjB9Y2FudmFze3BhZGRpbmc6MDttYXJnaW46YXV0bztkaXNwbGF5OmJsb2NrO3Bvc2l0aW9uOmFic29sdXRlO3RvcDowO2JvdHRvbTowO2xlZnQ6MDtyaWdodDowfQ==">
+    </head>
+    <body>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script>
+        ${
+          isUri ? `<script src="${script}"></script>` : `<script>${script}</script>`
+        }
+    </body>
+</html>`
+
+export const getP5HtmlUri = (title: string, script: string, isUri: boolean = false) =>
+  `data:text/html;base64,${Buffer.from(getP5Html(title, script, isUri)).toString('base64')}`
+

package/utils/types.ts

@@ -44,7 +44,9 @@ export interface Token {
   tokenId: bigint
   name: string
   description: string
-  artifact: string
+  image: string,
+  animationUrl?: string,
+  scriptUrl?: string,
   untilBlock: bigint
   mintsFetchedUntilBlock: bigint
   mintsBackfilledUntilBlock: bigint
@@ -66,5 +68,6 @@ export interface Renderer {
   address: `0x${string}`
   name: string
   description?: string
+  component?: string
   version: bigint
 }