@visualizevalue/mint-app-base 0.1.113 → 0.1.115

package/.env.example

@@ -30,6 +30,9 @@ NUXT_PUBLIC_ARWEAVE_GATEWAY=
 # NUXT_PUBLIC_RPC2=https://eth.drpc.org
 # NUXT_PUBLIC_RPC3=https://1rpc.io/eth
 
+# This should always be present if on other networks, so we can fetch ENS data
+NUXT_PUBLIC_MAINNET_RPC1=https://eth.llamarpc.com
+
 # =========================
 #         SEPOLIA
 # =========================

package/app.config.ts

@@ -2,19 +2,26 @@ export default defineAppConfig({
   knownRenderers: {
     // Mainnet
     1: [
+      {
+        component: 'Base',
+        name: 'Base Renderer',
+        version: 1n,
+        address: '0xe5d2da253c7d4b7609afce15332bb1a1fb461d09',
+        description: 'The default renderer',
+      },
       {
         component: 'P5',
         name: 'P5 Renderer',
         version: 2n,
         address: '0xbf42cabb7d46bfa290dcc6223477c6afe6a83174',
-        description: 'Allows using P5 scripts as the artifact content'
+        description: 'Allows using P5 scripts as the artifact content',
       },
       {
         component: 'Animation',
         name: 'Animation Renderer',
         version: 1n,
         address: '0xcb681409046e45e6187ec2205498e4adbe19749c',
-        description: 'Allows linking to both an image and an animation url'
+        description: 'Allows linking to both an image and an animation url',
       },
       {
         component: 'P5',
@@ -27,19 +34,26 @@ export default defineAppConfig({
     ],
     // Sepolia
     11155111: [
+      {
+        component: 'Base',
+        name: 'Base Renderer',
+        version: 1n,
+        address: '0x901603b81aae5eb2a1dc3cec77280bf6e4727bfe',
+        description: 'The default renderer',
+      },
       {
         component: 'P5',
         name: 'P5 Renderer (Sepolia)',
         version: 2n,
         address: '0x55b69a4f2db99417c1b211151181ed48b39df438',
-        description: 'Allows using P5 scripts as the artifact content'
+        description: 'Allows using P5 scripts as the artifact content',
       },
       {
         component: 'Animation',
         name: 'Animation Renderer',
         version: 1n,
         address: '0xeeaf428251c477002d52c69e022b357a91f36517',
-        description: 'Allows linking to both an image and an animation url'
+        description: 'Allows linking to both an image and an animation url',
       },
       {
         component: 'P5',
@@ -50,6 +64,5 @@ export default defineAppConfig({
         deprecated: true,
       },
     ],
-  }
+  },
 })
-

package/components/Account.client.vue

@@ -4,7 +4,7 @@
   </span>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { useAccount, useEnsName } from '@wagmi/vue'
 
 const props = defineProps(['address'])
@@ -12,14 +12,16 @@ const props = defineProps(['address'])
 const address = computed(() => props.address?.value || props.address)
 
 const { address: currentAddress } = useAccount()
-const isCurrent = computed(() => currentAddress.value?.toLowerCase() === address.value.toLowerCase())
+const isCurrent = computed(
+  () => currentAddress.value?.toLowerCase() === address.value.toLowerCase(),
+)
 
 const { data: ens } = useEnsName({
   address,
   chainId: 1,
 })
 
-const display = computed(() => ens.value || (
-  isCurrent.value ? `You` : shortAddress(address.value)
-))
+const display = computed(
+  () => ens.value || (isCurrent.value ? `You` : shortAddress(address.value)),
+)
 </script>

package/components/Mint/Detail.client.vue

@@ -1,11 +1,13 @@
 <script setup>
 import Animation from './Renderer/Animation.client.vue'
 import Base from './Renderer/Base.client.vue'
+import Code from './Renderer/Code.client.vue'
 import P5 from './Renderer/P5.client.vue'
 
 const components = {
   Animation,
   Base,
+  Code,
   P5,
 }
 
@@ -54,4 +56,3 @@ const { component } = useCreateMintRendererComponent(props.collection)
   }
 }
 </style>
-

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

@@ -0,0 +1,83 @@
+<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>
+</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,25 +1,26 @@
 <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.p5_script') }}</Button>
+        <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" />
+        <CodeEditor
+          v-if="active === 'script'"
+          v-model="script"
+          class="full"
+          ref="codeEditor"
+        />
       </template>
-
     </Tabs>
   </div>
 </template>
@@ -27,11 +28,7 @@
 <script setup>
 import { watchDebounced } from '@vueuse/core'
 
-const {
-  artifact,
-  image,
-  animationUrl,
-} = useCreateMintData()
+const { artifact, image, animationUrl } = useCreateMintData()
 
 const script = ref(DEFAULT_P5_SCRIPT)
 
@@ -39,18 +36,17 @@ const script = ref(DEFAULT_P5_SCRIPT)
 const updateUrl = () => {
   animationUrl.value = getP5HtmlUri('Preview', script.value)
 }
-watchDebounced(
-  script,
-  updateUrl,
-  { debounce: 500, maxWait: 3000 },
-)
+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 ],
+    [
+      { type: 'string', name: 'image' },
+      { type: 'string', name: 'script' },
+    ],
+    [image.value, script.value],
   )
 })
 </script>
@@ -85,4 +81,3 @@ watchEffect(() => {
   }
 }
 </style>
-

package/components/Token/DetailHeader.vue

@@ -43,6 +43,7 @@ header {
 
   h1 {
     font-size: var(--font-lg);
+    overflow-wrap: break-word;
 
     small {
       color: var(--muted);

package/composables/createMint.ts

@@ -1,16 +1,16 @@
-import type { TransactionReceipt } from "viem"
+import type { TransactionReceipt } from 'viem'
 
 // Base token data
-const name        = ref('')
-const artifact    = ref('')
+const name = ref('')
+const artifact = ref('')
 const description = ref('')
 
 // Derived data based on artifact // renderer
-const image        = ref('')
+const image = ref('')
 const animationUrl = ref('')
 
 // Renderer data
-const renderer: Ref<number>  = ref(0)
+const renderer: Ref<number> = ref(0)
 const extraData: Ref<bigint> = ref(0n)
 
 // Main token creation composable
@@ -45,15 +45,16 @@ export const useCreateMintRendererComponent = (collection: Collection) => {
   const appConfig = useAppConfig()
   const mainChainId = useMainChainId()
   const rendererAddress: Ref<string | null> = computed(() => {
-    if (! collection.renderers?.length) return null
+    if (!collection.renderers?.length) return null
 
     return collection.renderers[renderer.value].address.toLowerCase()
   })
 
-  const component = computed(() => appConfig.knownRenderers[mainChainId]
-    .find((r) =>
-      r.address.toLowerCase() === rendererAddress.value
-    )?.component || 'Base'
+  const component = computed(
+    () =>
+      appConfig.knownRenderers[mainChainId].find(
+        (r) => r.address.toLowerCase() === rendererAddress.value,
+      )?.component || 'Code',
   )
 
   return {
@@ -71,7 +72,7 @@ export const useCreateMintFlow = (collection: Collection, txFlow: Ref) => {
   // Mint flow
   const txFlowKey = ref(0)
   const mint = async () => {
-    if (! artifact.value) {
+    if (!artifact.value) {
       alert(`Empty artifact data. Please try again.`)
       return
     }
@@ -82,7 +83,11 @@ export const useCreateMintFlow = (collection: Collection, txFlow: Ref) => {
 
     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.`)) {
+        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
         }
 
@@ -90,39 +95,39 @@ export const useCreateMintFlow = (collection: Collection, txFlow: Ref) => {
         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
-            ],
-          }))
+          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 ++
+          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: [
-          sanitizeForJson(name.value),
-          sanitizeForJson(description.value),
-          multiTransactionPrepare ? [] : artifactByteArray,
-          renderer.value,
-          0n, // Additional Data
-        ],
-      }))
+      await txFlow.value.initializeRequest(() =>
+        writeContract($wagmi, {
+          abi: MINT_ABI,
+          chainId,
+          address: collection.address,
+          functionName: 'create',
+          args: [
+            sanitizeForJson(name.value),
+            sanitizeForJson(description.value),
+            multiTransactionPrepare ? [] : artifactByteArray,
+            renderer.value,
+            0n, // Additional Data
+          ],
+        }),
+      )
     } catch (e) {
       console.error(e)
     }
@@ -130,14 +135,16 @@ export const useCreateMintFlow = (collection: Collection, txFlow: Ref) => {
 
   // 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 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')
+    const mintedEvent = logs.find((log) => log.eventName === 'TransferSingle')
 
     await store.fetchToken(collection.address, mintedEvent.args.id)
 
@@ -146,7 +153,7 @@ export const useCreateMintFlow = (collection: Collection, txFlow: Ref) => {
 
     await navigateTo({
       name: 'id-collection-tokenId',
-      params: { id: id.value, collection: collection.address, tokenId: mintedEvent.args.id }
+      params: { id: id.value, collection: collection.address, tokenId: mintedEvent.args.id },
     })
   }
 
@@ -155,4 +162,3 @@ export const useCreateMintFlow = (collection: Collection, txFlow: Ref) => {
     mintCreated,
   }
 }
-

package/locales/en.json

@@ -50,9 +50,13 @@
             "title_placeholder": "Title",
             "description_placeholder": "Description"
         },
+        "code": {
+            "static": "Static",
+            "script": "Script"
+        },
         "p5": {
             "static": "Static",
-            "p5_script": "P5 Script"
+            "script": "P5 Script"
         },
         "preview": {
             "title": "Preview",

package/nuxt.config.ts

@@ -7,11 +7,7 @@ const currentDir = dirname(fileURLToPath(import.meta.url))
 export default defineNuxtConfig({
   ssr: process.env.NUXT_SSR !== 'false',
 
-  modules: [
-    '@pinia/nuxt',
-    '@pinia-plugin-persistedstate/nuxt',
-    '@nuxtjs/i18n',
-  ],
+  modules: ['@pinia/nuxt', '@pinia-plugin-persistedstate/nuxt', '@nuxtjs/i18n'],
 
   runtimeConfig: {
     public: {
@@ -22,6 +18,7 @@ export default defineNuxtConfig({
       description: 'To mint is a human right.',
       factoryAddress: '0xd717Fe677072807057B03705227EC3E3b467b670',
       platformUrl: 'https://networked.art',
+      mainnetRpc1: 'https://eth.llamarpc.com',
       rpc1: 'https://eth.llamarpc.com',
       rpc2: 'https://ethereum-rpc.publicnode.com',
       rpc3: 'https://eth.drpc.org',
@@ -29,7 +26,7 @@ export default defineNuxtConfig({
       arweaveGateway: 'https://arweave.net/',
       title: 'Mint',
       walletConnectProjectId: '',
-    }
+    },
   },
 
   app: {
@@ -37,15 +34,11 @@ export default defineNuxtConfig({
       viewport: 'width=device-width, initial-scale=1, viewport-fit=cover',
       htmlAttrs: { lang: 'en' },
       title: process.env.NUXT_PUBLIC_TITLE,
-      link: [
-        { rel: 'icon', href: '/icon.svg', type: 'image/svg+xml' },
-      ]
+      link: [{ rel: 'icon', href: '/icon.svg', type: 'image/svg+xml' }],
     },
   },
 
-  css: [
-    join(currentDir, './assets/styles/index.css'),
-  ],
+  css: [join(currentDir, './assets/styles/index.css')],
 
   postcss: {
     plugins: {
@@ -53,7 +46,7 @@ export default defineNuxtConfig({
         files: [
           join(currentDir, './assets/styles/custom-selectors.css'),
           join(currentDir, './assets/styles/custom-media.css'),
-        ]
+        ],
       },
       'postcss-nested': {},
       'postcss-custom-selectors': {},
@@ -62,7 +55,7 @@ export default defineNuxtConfig({
         stage: 3,
         features: {},
       },
-      'autoprefixer': {},
+      autoprefixer: {},
     },
   },
 
@@ -73,16 +66,18 @@ export default defineNuxtConfig({
       config.optimizeDeps.include.push('@visualizevalue/mint-app-base > eventemitter3')
       config.optimizeDeps.include.push('@visualizevalue/mint-app-base > buffer/')
       config.optimizeDeps.include.push('@visualizevalue/mint-app-base > codemirror')
-      config.optimizeDeps.include.push('@visualizevalue/mint-app-base > codemirror-editor-vue3')
-    }
+      config.optimizeDeps.include.push(
+        '@visualizevalue/mint-app-base > codemirror-editor-vue3',
+      )
+    },
   },
 
   nitro: {
     preset: 'node-cluster',
     esbuild: {
       options: {
-        target: 'esnext'
-      }
+        target: 'esnext',
+      },
     },
   },
 
@@ -90,11 +85,7 @@ export default defineNuxtConfig({
     presets: [
       {
         from: '@wagmi/core',
-        imports: [
-          'readContract',
-          'waitForTransactionReceipt',
-          'writeContract',
-        ]
+        imports: ['readContract', 'waitForTransactionReceipt', 'writeContract'],
       },
       {
         from: 'viem',
@@ -108,13 +99,13 @@ export default defineNuxtConfig({
           'encodeAbiParameters',
           'parseAbiParameters',
           'parseAbiParameter',
-        ]
-      }
-    ]
+        ],
+      },
+    ],
   },
 
   piniaPersistedstate: {
-    storage: 'localStorage'
+    storage: 'localStorage',
   },
 
   i18n: {

package/package.json

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

package/plugins/2.wagmi.ts

@@ -1,10 +1,19 @@
 import { VueQueryPlugin } from '@tanstack/vue-query'
-import { http, cookieStorage, createConfig, createStorage, WagmiPlugin, fallback, type Config, type CreateConnectorFn } from '@wagmi/vue'
+import {
+  http,
+  cookieStorage,
+  createConfig,
+  createStorage,
+  WagmiPlugin,
+  fallback,
+  type Config,
+  type CreateConnectorFn,
+} from '@wagmi/vue'
 import { mainnet, sepolia, holesky, localhost } from '@wagmi/vue/chains'
 import { coinbaseWallet, injected, metaMask, walletConnect } from '@wagmi/vue/connectors'
 import type { CustomTransport, Transport } from 'viem'
 
-export default defineNuxtPlugin(nuxtApp => {
+export default defineNuxtPlugin((nuxtApp) => {
   const title = nuxtApp.$config.public.title || 'Mint'
   const mainChainId = nuxtApp.$config.public.chainId
 
@@ -19,19 +28,25 @@ export default defineNuxtPlugin(nuxtApp => {
         name: title,
         iconUrl: '',
         url: '',
-      }
+      },
     }),
   ]
 
-  if (nuxtApp.$config.public.walletConnectProjectId) connectors.push(walletConnect({
-    projectId: nuxtApp.$config.public.walletConnectProjectId,
-  }))
+  if (nuxtApp.$config.public.walletConnectProjectId)
+    connectors.push(
+      walletConnect({
+        projectId: nuxtApp.$config.public.walletConnectProjectId,
+      }),
+    )
 
-  const transportDefinitions: CustomTransport|Transport[] = []
+  const transportDefinitions: CustomTransport | Transport[] = []
 
-  if (nuxtApp.$config.public.rpc1) transportDefinitions.push(http(nuxtApp.$config.public.rpc1 as string))
-  if (nuxtApp.$config.public.rpc2) transportDefinitions.push(http(nuxtApp.$config.public.rpc2 as string))
-  if (nuxtApp.$config.public.rpc3) transportDefinitions.push(http(nuxtApp.$config.public.rpc3 as string))
+  if (nuxtApp.$config.public.rpc1)
+    transportDefinitions.push(http(nuxtApp.$config.public.rpc1 as string))
+  if (nuxtApp.$config.public.rpc2)
+    transportDefinitions.push(http(nuxtApp.$config.public.rpc2 as string))
+  if (nuxtApp.$config.public.rpc3)
+    transportDefinitions.push(http(nuxtApp.$config.public.rpc3 as string))
   transportDefinitions.push(http())
 
   const transports = fallback(transportDefinitions)
@@ -47,11 +62,12 @@ export default defineNuxtPlugin(nuxtApp => {
     }),
     ssr: true,
     transports: {
-      [mainnet.id]: mainChainId == 1
-        // Use configured transports if we're on mainnet
-        ? transports
-        // Default to viem public rpc if not on mainnet
-        : http(),
+      [mainnet.id]:
+        mainChainId == 1
+          ? // Use configured transports if we're on mainnet
+            transports
+          : // Default to viem public rpc if not on mainnet
+            http(nuxtApp.$config.public.mainnetRpc1),
       [sepolia.id]: transports,
       [holesky.id]: transports,
       [localhost.id]: transports,
@@ -63,6 +79,6 @@ export default defineNuxtPlugin(nuxtApp => {
   return {
     provide: {
       wagmi: wagmiConfig,
-    }
+    },
   }
 })