@visualizevalue/mint-app-base 0.1.116 → 0.1.118

package/.env.example

@@ -8,6 +8,13 @@ NUXT_PUBLIC_DOMAIN=localhost
 NUXT_PUBLIC_TITLE=Mint
 NUXT_PUBLIC_DESCRIPTION=To mint is a human right.
 
+# =========================
+#       MINT DEFAULTS
+# =========================
+# NUXT_PUBLIC_MINT_AMOUNT=1
+# NUXT_PUBLIC_MINT_STEP=1
+# NUXT_PUBLIC_MINT_VALUE=5
+
 # =========================
 #       ARTIST SCOPE
 # =========================

package/app.config.ts

@@ -9,6 +9,13 @@ export default defineAppConfig({
         address: '0xe5d2da253c7d4b7609afce15332bb1a1fb461d09',
         description: 'The default renderer',
       },
+      // {
+      //   component: 'Markdown',
+      //   name: 'Markdown Renderer',
+      //   version: 1n,
+      //   address: '0x0000000000000000000000000000000000000000',
+      //   description: 'Renders markdown content as onchain text artifacts',
+      // },
       {
         component: 'P5',
         name: 'P5 Renderer',
@@ -23,6 +30,13 @@ export default defineAppConfig({
         address: '0xcb681409046e45e6187ec2205498e4adbe19749c',
         description: 'Allows linking to both an image and an animation url',
       },
+      // {
+      //   component: 'Tone',
+      //   name: 'Tone Renderer',
+      //   version: 1n,
+      //   address: '0x0000000000000000000000000000000000000000',
+      //   description: 'Allows using Tone.js scripts for generative audio',
+      // },
       {
         component: 'P5',
         name: 'P5 Renderer',
@@ -41,6 +55,13 @@ export default defineAppConfig({
         address: '0x901603b81aae5eb2a1dc3cec77280bf6e4727bfe',
         description: 'The default renderer',
       },
+      {
+        component: 'Markdown',
+        name: 'Markdown Renderer',
+        version: 1n,
+        address: '0x31e819f6a2fdf77af11648b6d571416aa48eb650',
+        description: 'Renders markdown content as onchain text artifacts',
+      },
       {
         component: 'P5',
         name: 'P5 Renderer (Sepolia)',
@@ -55,6 +76,13 @@ export default defineAppConfig({
         address: '0xeeaf428251c477002d52c69e022b357a91f36517',
         description: 'Allows linking to both an image and an animation url',
       },
+      {
+        component: 'Tone',
+        name: 'Tone Renderer',
+        version: 1n,
+        address: '0xcc95b3cbbefa6ef3a657f1fb7848115b79bfef24',
+        description: 'Allows using Tone.js scripts for generative audio',
+      },
       {
         component: 'P5',
         name: 'P5 Renderer (Sepolia)',

package/components/CodeEditor.client.vue

@@ -17,6 +17,7 @@ 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/mode/markdown/markdown.js'
 
 const props = defineProps({
   modelValue: String,

package/components/Mint/Detail.client.vue

@@ -2,13 +2,17 @@
 import Animation from './Renderer/Animation.client.vue'
 import Base from './Renderer/Base.client.vue'
 import Code from './Renderer/Code.client.vue'
+import Markdown from './Renderer/Markdown.client.vue'
 import P5 from './Renderer/P5.client.vue'
+import Tone from './Renderer/Tone.client.vue'
 
 const components = {
   Animation,
   Base,
   Code,
+  Markdown,
   P5,
+  Tone,
 }
 
 const props = defineProps(['collection'])

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

@@ -1,83 +1,7 @@
 <template>
-  <div class="mint-renderer-p5">
-    <Tabs initial="base">
-      <template #menu="{ active, select }">
-        <Button @click="select('base')" :class="{ active: active === 'base' }">
-          {{ $t('mint.code.static') }}
-        </Button>
-        <Button @click="select('script')" :class="{ active: active === 'script' }">
-          {{ $t('mint.code.script') }}
-        </Button>
-      </template>
-
-      <template #content="{ active }">
-        <!-- We only hide the form to maintain the file select state -->
-        <MintRendererBase v-show="active === 'base'" decouple-artifact />
-        <!-- We force rerender the code editor on active -->
-        <CodeEditor
-          v-if="active === 'script'"
-          v-model="script"
-          class="full"
-          ref="codeEditor"
-        />
-      </template>
-    </Tabs>
-  </div>
+  <MintRendererScriptRenderer
+    i18n-key="code"
+    :default-script="DEFAULT_P5_SCRIPT"
+    :get-html-uri="getP5HtmlUri"
+  />
 </template>
-
-<script setup>
-import { watchDebounced } from '@vueuse/core'
-
-const { artifact, image, animationUrl } = useCreateMintData()
-
-const script = ref(DEFAULT_P5_SCRIPT)
-
-// Keep the animationURL (for the preview) up to date
-const updateUrl = () => {
-  animationUrl.value = getP5HtmlUri('Preview', script.value)
-}
-watchDebounced(script, updateUrl, { debounce: 500, maxWait: 3000 })
-onMounted(updateUrl)
-
-// 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;
-  overflow: hidden;
-  width: 100%;
-
-  > .tabs {
-    height: min-content;
-  }
-
-  > .tabs-content {
-    border: var(--border);
-    border-radius: var(--card-border-radius);
-    overflow: hidden;
-    height: 100%;
-
-    > * {
-      height: 100%;
-    }
-
-    > *:not(.full) {
-      padding: var(--spacer);
-    }
-  }
-}
-</style>

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

@@ -0,0 +1,65 @@
+<template>
+  <div class="mint-renderer-markdown">
+    <div class="fields">
+      <FormInput v-model="name" :placeholder="$t('mint.base.title_placeholder')" required />
+      <FormInput v-model="description" :placeholder="$t('mint.base.description_placeholder')" />
+    </div>
+
+    <CodeEditor v-model="markdown" mode="text/x-markdown" :placeholder="$t('mint.markdown.placeholder')" class="full" />
+  </div>
+</template>
+
+<script setup>
+import { watchDebounced } from '@vueuse/core'
+import { getMarkdownSvgUri, getMarkdownHtmlUri } from '~/utils/markdown'
+
+const { artifact, image, animationUrl, name, description } = useCreateMintData()
+
+const markdown = ref('')
+
+const updatePreview = () => {
+  if (!markdown.value) {
+    image.value = ''
+    animationUrl.value = ''
+    return
+  }
+
+  image.value = getMarkdownSvgUri(name.value || '', markdown.value)
+  animationUrl.value = getMarkdownHtmlUri(markdown.value)
+}
+watchDebounced([markdown, name], updatePreview, { debounce: 500, maxWait: 3000 })
+
+// The MarkdownRenderer contract stores raw markdown bytes (not ABI-encoded).
+watchEffect(() => {
+  artifact.value = markdown.value
+})
+</script>
+
+<style>
+.mint-renderer-markdown {
+  padding: 0 !important;
+  border: 0 !important;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  overflow: hidden;
+  width: 100%;
+
+  >.fields {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer);
+    padding: var(--spacer);
+    border: var(--border);
+    border-radius: var(--card-border-radius);
+  }
+
+  >.code-editor {
+    border: var(--border);
+    border-top: none;
+    border-radius: var(--card-border-radius);
+    overflow: hidden;
+    min-height: 24rem;
+  }
+}
+</style>

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

@@ -1,83 +1,7 @@
 <template>
-  <div class="mint-renderer-p5">
-    <Tabs initial="base">
-      <template #menu="{ active, select }">
-        <Button @click="select('base')" :class="{ active: active === 'base' }">
-          {{ $t('mint.p5.static') }}
-        </Button>
-        <Button @click="select('script')" :class="{ active: active === 'script' }">
-          {{ $t('mint.p5.script') }}
-        </Button>
-      </template>
-
-      <template #content="{ active }">
-        <!-- We only hide the form to maintain the file select state -->
-        <MintRendererBase v-show="active === 'base'" decouple-artifact />
-        <!-- We force rerender the code editor on active -->
-        <CodeEditor
-          v-if="active === 'script'"
-          v-model="script"
-          class="full"
-          ref="codeEditor"
-        />
-      </template>
-    </Tabs>
-  </div>
+  <MintRendererScriptRenderer
+    i18n-key="p5"
+    :default-script="DEFAULT_P5_SCRIPT"
+    :get-html-uri="getP5HtmlUri"
+  />
 </template>
-
-<script setup>
-import { watchDebounced } from '@vueuse/core'
-
-const { artifact, image, animationUrl } = useCreateMintData()
-
-const script = ref(DEFAULT_P5_SCRIPT)
-
-// Keep the animationURL (for the preview) up to date
-const updateUrl = () => {
-  animationUrl.value = getP5HtmlUri('Preview', script.value)
-}
-watchDebounced(script, updateUrl, { debounce: 500, maxWait: 3000 })
-onMounted(updateUrl)
-
-// 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;
-  overflow: hidden;
-  width: 100%;
-
-  > .tabs {
-    height: min-content;
-  }
-
-  > .tabs-content {
-    border: var(--border);
-    border-radius: var(--card-border-radius);
-    overflow: hidden;
-    height: 100%;
-
-    > * {
-      height: 100%;
-    }
-
-    > *:not(.full) {
-      padding: var(--spacer);
-    }
-  }
-}
-</style>

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

@@ -0,0 +1,89 @@
+<template>
+  <div class="mint-renderer-script">
+    <Tabs initial="base">
+      <template #menu="{ active, select }">
+        <Button @click="select('base')" :class="{ active: active === 'base' }">
+          {{ $t(`mint.${i18nKey}.static`) }}
+        </Button>
+        <Button @click="select('script')" :class="{ active: active === 'script' }">
+          {{ $t(`mint.${i18nKey}.script`) }}
+        </Button>
+      </template>
+
+      <template #content="{ active }">
+        <!-- We only hide the form to maintain the file select state -->
+        <MintRendererBase v-show="active === 'base'" decouple-artifact />
+        <!-- We force rerender the code editor on active -->
+        <CodeEditor
+          v-if="active === 'script'"
+          v-model="script"
+          class="full"
+          ref="codeEditor"
+        />
+      </template>
+    </Tabs>
+  </div>
+</template>
+
+<script setup>
+import { watchDebounced } from '@vueuse/core'
+
+const props = defineProps({
+  i18nKey: { type: String, required: true },
+  defaultScript: { type: String, required: true },
+  getHtmlUri: { type: Function, required: true },
+})
+
+const { artifact, image, animationUrl } = useCreateMintData()
+
+const script = ref(props.defaultScript)
+
+// Keep the animationURL (for the preview) up to date
+const updateUrl = () => {
+  animationUrl.value = props.getHtmlUri('Preview', script.value)
+}
+watchDebounced(script, updateUrl, { debounce: 500, maxWait: 3000 })
+onMounted(updateUrl)
+
+// Encode the artifact as per how the renderer contract expects it.
+watchEffect(() => {
+  artifact.value = encodeAbiParameters(
+    [
+      { type: 'string', name: 'image' },
+      { type: 'string', name: 'script' },
+    ],
+    [image.value, script.value],
+  )
+})
+</script>
+
+<style>
+.mint-renderer-script {
+  padding: 0 !important;
+  border: 0 !important;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  overflow: hidden;
+  width: 100%;
+
+  > .tabs {
+    height: min-content;
+  }
+
+  > .tabs-content {
+    border: var(--border);
+    border-radius: var(--card-border-radius);
+    overflow: hidden;
+    height: 100%;
+
+    > * {
+      height: 100%;
+    }
+
+    > *:not(.full) {
+      padding: var(--spacer);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,7 @@
+<template>
+  <MintRendererScriptRenderer
+    i18n-key="tone"
+    :default-script="DEFAULT_TONE_SCRIPT"
+    :get-html-uri="getToneHtmlUri"
+  />
+</template>

package/components/MintTokenBar.vue

@@ -5,6 +5,7 @@
       type="number"
       v-model="mintCount"
       min="1"
+      :step="step"
       required
       class="amount"
     />
@@ -40,11 +41,13 @@ const props = defineProps({
   mintRequest: Function,
   transactionFlowConfig: Object,
   minted: Function,
+  step: { type: Number, default: 1 },
+  defaultAmount: { type: Number, default: 1 },
 })
 
 const mintCount = defineModel('mintCount', { default: '1' })
 const onMinted = () => {
-  mintCount.value = '1'
+  mintCount.value = String(props.defaultAmount)
   props.minted()
 }
 </script>

package/components/Token/Detail.client.vue

@@ -41,6 +41,8 @@
               mintRequest,
               transactionFlowConfig,
               minted,
+              step,
+              defaultAmount,
             }"
           />
         </div>
@@ -72,7 +74,9 @@ const { token } = defineProps<{
 const store = useOnchainStore()
 const collection = computed(() => store.collection(token.collection))
 
-const mintCount = ref('1')
+const { defaultAmount, step } = useMintDefault()
+const mintCount = ref(String(defaultAmount.value))
+watch(defaultAmount, (v) => { mintCount.value = String(v) })
 const ownedBalance = computed(
   () => collection.value && store.tokenBalance(collection.value.address, token.tokenId),
 )

package/composables/mintConfig.ts

@@ -0,0 +1,11 @@
+export const useMintConfig = () => {
+  const route = useRoute()
+  const config = useRuntimeConfig()
+
+  // Query param > ENV > default
+  const amount = computed(() => Number(route.query.amount) || Number(config.public.mintAmount) || 1)
+  const step = computed(() => Number(route.query.step) || Number(config.public.mintStep) || 1)
+  const value = computed(() => Number(route.query.value) || Number(config.public.mintValue) || 0)
+
+  return { amount, step, value }
+}

package/composables/mintDefault.ts

@@ -0,0 +1,29 @@
+export const useMintDefault = () => {
+  const { amount, step, value } = useMintConfig()
+  const gasPrice = useGasPrice()
+  const priceFeed = usePriceFeedStore()
+
+  const defaultAmount = computed(() => {
+    if (! value.value) return amount.value
+
+    const gasPriceWei = gasPrice.value.wei || 0n
+    const ethUSDRaw = priceFeed.ethUSDRaw || 0n
+
+    if (! gasPriceWei || ! ethUSDRaw) return amount.value
+
+    // Unit price in wei: basefee * 60_000
+    const unitPriceWei = gasPriceWei * 60_000n
+
+    // Convert target USD to cents, compute unit price in cents
+    // ethUSDRaw has 8 decimals from Chainlink
+    // unitPriceCents = (unitPriceWei * ethUSDRaw) / 1e18 / 1e6
+    const targetCents = BigInt(Math.round(value.value * 100))
+    const unitPriceCents = (unitPriceWei * ethUSDRaw) / (10n ** 18n) / (10n ** 6n)
+
+    if (! unitPriceCents) return amount.value
+
+    return Math.max(1, Number(targetCents / unitPriceCents))
+  })
+
+  return { defaultAmount, step }
+}

package/locales/en.json

@@ -54,10 +54,17 @@
             "static": "Static",
             "script": "Script"
         },
+        "markdown": {
+            "placeholder": "Write your markdown here..."
+        },
         "p5": {
             "static": "Static",
             "script": "P5 Script"
         },
+        "tone": {
+            "static": "Static",
+            "script": "Tone.js Script"
+        },
         "preview": {
             "title": "Preview",
             "no_description": "No description"

package/nuxt.config.ts

@@ -24,6 +24,9 @@ export default defineNuxtConfig({
       rpc3: 'https://eth.drpc.org',
       ipfsGateway: 'https://ipfs.io/ipfs/',
       arweaveGateway: 'https://arweave.net/',
+      mintAmount: 1,
+      mintStep: 1,
+      mintValue: 0,
       title: 'Mint',
       walletConnectProjectId: '',
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visualizevalue/mint-app-base",
-  "version": "0.1.116",
+  "version": "0.1.118",
   "type": "module",
   "main": "./nuxt.config.ts",
   "dependencies": {

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

@@ -18,12 +18,13 @@ const load = async () => {
   try {
     await store.fetchToken(collection.value.address, route.params.tokenId)
   } catch (e) {
-    navigateTo({ name: 'id-collection' }, { replace: true })
+    console.debug(`Error`, e, `Redirecting to collection`)
+    return navigateTo({ name: 'id-collection' }, { replace: true })
   }
 
   loading.value = false
 }
 
 onMounted(() => load())
-watch(route, () => load())
+watch(() => route.params.tokenId, () => load())
 </script>

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

@@ -22,7 +22,7 @@ const load = async () => {
       throw new Error('Invalid owner')
     }
   } catch (e) {
-    navigateTo({ name: 'id' }, { replace: true })
+    return navigateTo({ name: 'id' }, { replace: true })
   }
 
   loading.value = false

package/utils/markdown.ts

@@ -0,0 +1,50 @@
+const MAX_PREVIEW_LENGTH = 800
+
+const escapeXml = (str: string) => str
+  .replace(/&/g, '&')
+  .replace(/</g, '&lt;')
+  .replace(/>/g, '&gt;')
+  .replace(/"/g, '&quot;')
+  .replace(/'/g, '&apos;')
+
+const toBase64DataUri = (mime: string, content: string) =>
+  `data:${mime};base64,${btoa(unescape(encodeURIComponent(content)))}`
+
+/**
+ * Generate an SVG preview matching the on-chain MarkdownRenderer output.
+ */
+export const getMarkdownSvg = (title: string, content: string) => {
+  const truncated = content.length > MAX_PREVIEW_LENGTH
+    ? content.slice(0, MAX_PREVIEW_LENGTH) + '...'
+    : content
+
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">` +
+    `<rect width="400" height="400" fill="#111"/>` +
+    `<text x="20" y="36" font-family="monospace" font-size="18" font-weight="bold" fill="white">${escapeXml(title)}</text>` +
+    `<line x1="20" y1="50" x2="380" y2="50" stroke="#333" stroke-width="1"/>` +
+    `<foreignObject x="20" y="60" width="360" height="320">` +
+      `<div xmlns="http://www.w3.org/1999/xhtml" style="` +
+        `font-family:monospace;font-size:12px;color:#999;` +
+        `white-space:pre-wrap;word-break:break-word;` +
+        `overflow:hidden;height:320px;` +
+        `mask-image:linear-gradient(to bottom,black 60%,transparent 100%);` +
+        `-webkit-mask-image:linear-gradient(to bottom,black 60%,transparent 100%)` +
+      `">${escapeXml(truncated)}</div>` +
+    `</foreignObject>` +
+  `</svg>`
+}
+
+export const getMarkdownSvgUri = (title: string, content: string) =>
+  toBase64DataUri('image/svg+xml', getMarkdownSvg(title, content))
+
+/**
+ * Generate a simple HTML preview for the markdown content.
+ */
+export const getMarkdownHtml = (content: string) =>
+  `<!DOCTYPE html><html><head><meta charset="utf-8"><style>` +
+  `*{margin:0;padding:0;box-sizing:border-box}` +
+  `body{font-family:monospace;font-size:14px;color:#999;background:#111;padding:2rem;white-space:pre-wrap;word-break:break-word}` +
+  `</style></head><body>${escapeXml(content)}</body></html>`
+
+export const getMarkdownHtmlUri = (content: string) =>
+  toBase64DataUri('text/html', getMarkdownHtml(content))

package/utils/toneScript.ts

@@ -0,0 +1,36 @@
+export const DEFAULT_TONE_SCRIPT =
+`const synth = new Tone.Synth().toDestination()
+
+document.addEventListener('click', async () => {
+  await Tone.start()
+  synth.triggerAttackRelease('C4', '8n')
+})
+
+// Display a simple visual indicator
+const canvas = document.createElement('canvas')
+document.body.appendChild(canvas)
+canvas.width = canvas.height = Math.min(window.innerWidth, window.innerHeight)
+const ctx = canvas.getContext('2d')
+
+ctx.fillStyle = '#000'
+ctx.fillRect(0, 0, canvas.width, canvas.height)
+ctx.fillStyle = '#fff'
+ctx.font = canvas.width / 20 + 'px monospace'
+ctx.textAlign = 'center'
+ctx.fillText('Click to play', canvas.width / 2, canvas.height / 2)
+`
+
+export const getToneHtml = (title: string, script: string) =>
+`<html>
+    <head>
+        <title>${title}</title>
+        <link rel="stylesheet" href="data:text/css;base64,aHRtbHtoZWlnaHQ6MTAwJX1ib2R5e21pbi1oZWlnaHQ6MTAwJTttYXJnaW46MDtwYWRkaW5nOjB9Y2FudmFze3BhZGRpbmc6MDttYXJnaW46YXV0bztkaXNwbGF5OmJsb2NrO3Bvc2l0aW9uOmFic29sdXRlO3RvcDowO2JvdHRvbTowO2xlZnQ6MDtyaWdodDowfQ==">
+    </head>
+    <body>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js"></script>
+        <script>${script}</script>
+    </body>
+</html>`
+
+export const getToneHtmlUri = (title: string, script: string) =>
+  `data:text/html;base64,${Buffer.from(getToneHtml(title, script)).toString('base64')}`