@visualizevalue/mint-app-base 0.1.92 → 0.1.93

package/app.config.ts

@@ -2,13 +2,6 @@ export default defineAppConfig({
   knownRenderers: {
     // Mainnet
     1: [
-      {
-        component: 'P5',
-        name: 'P5 Renderer [Deprecated]',
-        version: 1n,
-        address: '0x32b8ffa14e7f77c252b6d43bec5498fcef2b205f',
-        description: 'Allows using P5 scripts as the artifact content. Deprecated: Please use V2'
-      },
       {
         component: 'P5',
         name: 'P5 Renderer',
@@ -23,16 +16,17 @@ export default defineAppConfig({
         address: '0xcb681409046e45e6187ec2205498e4adbe19749c',
         description: 'Allows linking to both an image and an animation url'
       },
-    ],
-    // Sepolia
-    11155111: [
       {
         component: 'P5',
-        name: 'P5 Renderer (Sepolia) [Deprecated]',
+        name: 'P5 Renderer',
         version: 1n,
-        address: '0xfadf2fb2f8a15fc830c176b71d2c905e95f4169e',
-        description: 'Allows using P5 scripts as the artifact content. Deprecated: Please use V2'
+        address: '0x32b8ffa14e7f77c252b6d43bec5498fcef2b205f',
+        description: 'Allows using P5 scripts as the artifact content.',
+        deprecated: true,
       },
+    ],
+    // Sepolia
+    11155111: [
       {
         component: 'P5',
         name: 'P5 Renderer (Sepolia)',
@@ -47,6 +41,14 @@ export default defineAppConfig({
         address: '0xeeaf428251c477002d52c69e022b357a91f36517',
         description: 'Allows linking to both an image and an animation url'
       },
+      {
+        component: 'P5',
+        name: 'P5 Renderer (Sepolia)',
+        version: 1n,
+        address: '0xfadf2fb2f8a15fc830c176b71d2c905e95f4169e',
+        description: 'Allows using P5 scripts as the artifact content.',
+        deprecated: true,
+      },
     ],
   }
 })

package/assets/styles/variables/colors.css

@@ -6,6 +6,7 @@
 
   /* COLORS */
   --primary:   blue;
+  --error:     red;
 
   /*
   * Z-COLORS

package/components/Mint/SelectRenderer.client.vue

@@ -8,7 +8,10 @@
         v-for="( renderer, index ) in collection.renderers"
         :value="index"
         :title="renderer.name"
-      >{{ renderer.name }}</option>
+        :disabled="renderer.deprecated"
+      >
+        {{ renderer.name }} {{ renderer.version > 1 ? `V${renderer.version}` : ''}}
+      </option>
       <option disabled>----</option>
       <option value="new">{{ $t('mint.select.install_new') }}</option>
     </select>

package/components/Renderer/Overview.client.vue

@@ -48,7 +48,8 @@ const installedRenderers = computed(() => props.collection.renderers)
 
 const availableRenderers = computed(
   () => appConfig.knownRenderers[mainChainId].filter(r =>
-    !installedRenderers.value.map(cr => cr.address).includes(r.address)
+    !installedRenderers.value.map(cr => cr.address).includes(r.address) &&
+    !r.deprecated
   )
 )
 

package/components/Renderer/OverviewCard.vue

@@ -1,7 +1,11 @@
 <template>
   <article class="renderer-overview-card">
     <div class="details">
-      <h1>{{ renderer.name }} <small>v{{ renderer.version }}</small></h1>
+      <h1>
+        <span>{{ renderer.name }}</span>
+        <small> v{{ renderer.version }}</small>
+        <small v-if="renderer.deprecated" class="deprecated"> [DEPRECATED]</small>
+      </h1>
       <p v-if="renderer.description">{{ renderer.description }}</p>
       <p class="address">{{ renderer.address }}</p>
     </div>
@@ -28,5 +32,9 @@ article {
   .address {
     color: var(--muted);
   }
+
+  .deprecated {
+    color: var(--error);
+  }
 }
 </style>

package/composables/collections.ts

@@ -9,6 +9,7 @@ export const MINT_BLOCKS = BLOCKS_PER_DAY
 
 export const useOnchainStore = () => {
   const { $wagmi } = useNuxtApp()
+  const appConfig = useAppConfig()
   const chainId = useMainChainId()
 
   return defineStore('onchainStore', {
@@ -241,13 +242,13 @@ export const useOnchainStore = () => {
         let index = renderers.length
         while (true) {
           try {
-            const rendererAddress = await readContract($wagmi, {
+            const rendererAddress = (await readContract($wagmi, {
               abi: MINT_ABI,
               address,
               functionName: 'renderers',
               args: [BigInt(index)],
               chainId,
-            })
+            }))?.toLowerCase() as `0x${string}`
 
             const rendererArgs = { abi: RENDERER_ABI, address: rendererAddress, chainId }
 
@@ -263,9 +264,11 @@ export const useOnchainStore = () => {
             ])
 
             this.collections[address].renderers[index] = {
-              address: rendererAddress.toLowerCase() as `0x${string}`,
+              address: rendererAddress,
               name,
               version,
+              // Enrich with configured renderer data
+              ...appConfig.knownRenderers[chainId].find(r => r.address === rendererAddress)
             }
 
             index ++

package/package.json

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