@visualizevalue/mint-app-base 0.1.117 → 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',
@@ -62,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/Mint/Detail.client.vue

@@ -4,6 +4,7 @@ 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,
@@ -11,6 +12,7 @@ const components = {
   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/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

@@ -61,6 +61,10 @@
             "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.117",
+  "version": "0.1.118",
   "type": "module",
   "main": "./nuxt.config.ts",
   "dependencies": {

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')}`