@visualizevalue/mint-app-base 0.1.92 → 0.1.94

package/.env.example

@@ -17,6 +17,8 @@ NUXT_PUBLIC_CREATOR_ADDRESS=0xc8f8e2f59dd95ff67c3d39109eca2e2a017d4c8a
 #         SERVICES
 # =========================
 NUXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=
+NUXT_PUBLIC_IPFS_GATEWAY=
+NUXT_PUBLIC_ARWEAVE_GATEWAY=
 
 # =========================
 #         MAINNET

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/Embed.vue

@@ -42,12 +42,13 @@ async function fetchMediaType(url: string): Promise<string | null> {
   }
 }
 
+const config = useRuntimeConfig()
 const props = defineProps({
   src: String,
 })
 
 // Update on input change
-const src = ref(props.src)
+const src = ref()
 const mediaType = ref()
 const isPlayable = computed(() => {
   if (! mediaType.value) return false
@@ -55,7 +56,7 @@ const isPlayable = computed(() => {
 })
 
 watchEffect(async () => {
-  src.value = props.src
+  src.value = validateURI(props.src, config.public)
   mediaType.value = await fetchMediaType(src.value)
 })
 

package/components/Image.client.vue

@@ -20,6 +20,7 @@
 <script setup>
 import { vIntersectionObserver } from '@vueuse/components'
 
+const config = useRuntimeConfig()
 const props = defineProps({
   src: String,
   alt: String,
@@ -46,7 +47,7 @@ const loadImage = ([{ isIntersecting }]) => {
 
   if (! props.src) return
 
-  uri.value = props.src
+  uri.value = validateURI(props.src, config.public)
 }
 watch(() => props.src, () => loadImage([{ isIntersecting: true }]))
 

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

@@ -50,6 +50,7 @@
 </template>
 
 <script setup>
+const config = useRuntimeConfig()
 const {
   artifact,
   image,
@@ -92,28 +93,18 @@ const setAnimationArtifact = async (file) => {
 }
 
 watch(imageIpfsCid, () => {
-  const validated = validateCID(imageIpfsCid.value)
-  if (! validated) {
-    image.value = ''
-  } else {
-    image.value = ipfsToHttpURI(`ipfs://${validated}`)
-  }
+  image.value = getValidIpfsURI(imageIpfsCid.value)
 })
 watch(imageArTxId, () => {
-  image.value = `https://arweave.net/${imageArTxId.value}`
+  image.value = getValidArweaveURI(imageArTxId.value)
 })
 watch(mode, () => image.value = '')
 
 watch(animationIpfsCid, () => {
-  const validated = validateCID(animationIpfsCid.value)
-  if (! validated) {
-    animationUrl.value = ''
-  } else {
-    animationUrl.value = ipfsToHttpURI(`ipfs://${validated}`)
-  }
+  animationUrl.value = getValidIpfsURI(animationIpfsCid.value)
 })
 watch(animationArTxId, () => {
-  animationUrl.value = `https://arweave.net/${animationArTxId.value}`
+  animationUrl.value = getValidArweaveURI(animationArTxId.value)
 })
 watch(mode, () => {
   image.value = ''

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

@@ -36,6 +36,7 @@ const props = defineProps({
   },
 })
 
+const config = useRuntimeConfig()
 const {
   artifact,
   image,
@@ -60,15 +61,10 @@ const setArtifact = async (file) => {
   }
 }
 watch(ipfsCid, () => {
-  const validated = validateCID(ipfsCid.value)
-  if (! validated) {
-    image.value = ''
-  } else {
-    image.value = ipfsToHttpURI(`ipfs://${validated}`)
-  }
+  image.value = getValidIpfsURI(ipfsCid.value)
 })
 watch(arTxId, () => {
-  image.value = `https://arweave.net/${arTxId.value}`
+  image.value = getValidArweaveURI(arTxId.value)
 })
 watch(mode, () => image.value = '')
 

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/nuxt.config.ts

@@ -25,6 +25,8 @@ export default defineNuxtConfig({
       rpc1: 'https://eth.llamarpc.com',
       rpc2: 'https://ethereum-rpc.publicnode.com',
       rpc3: 'https://eth.drpc.org',
+      ipfsGateway: 'https://ipfs.io/ipfs/',
+      arweaveGateway: 'https://arweave.net/',
       title: 'Mint',
       walletConnectProjectId: '',
     }

package/package.json

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

package/utils/arweave.ts

@@ -0,0 +1,12 @@
+export const validateArweaveTx = (tx: string): string|false => {
+  return tx
+}
+
+export const getValidArweaveURI = (tx: string): string => {
+  const validated = validateArweaveTx(tx)
+
+  return validated ? `ipfs://${validated}` : ''
+}
+
+export const arweaveToHttpURI = (url: string, gateway: string = 'https://arweave.net/') => url.replace('ar://', gateway)
+

package/utils/ipfs.ts

@@ -11,3 +11,17 @@ export const validateCID = (cid: string): string|false => {
     return false
   }
 }
+
+export const getValidIpfsURI = (cid: string): string => {
+  const validated = validateCID(cid)
+
+  return validated ? `ipfs://${validated}` : ''
+}
+
+export const ipfsToHttpURI = (
+  url: string,
+  gateway: string = 'https://ipfs.io/ipfs/'
+) => url
+  .replace('https://ipfs.io/ipfs/', gateway)
+  .replace('ipfs://', gateway)
+

package/utils/urls.ts

@@ -1,13 +1,24 @@
-export const ipfsToHttpURI = (url: string, gateway: string = 'https://ipfs.io/ipfs/') => url.replace('ipfs://', gateway)
+type UrlValidationConfig = {
+  ipfsGateway?: string,
+  arweaveGateway?: string,
+}
 
-export const validateURI = (url: string) => {
+export const validateURI = (url: string, config: UrlValidationConfig = {}) => {
   if (! url || ! url.length) return false
 
   let validated = url.trim()
 
   // Normalize protocol
-  if (! validated.startsWith('https://')) validated = `https://${validated}`
-  if (! validated.startsWith('http')) validated = `http://${validated}`
+  // if (validated.startsWith('ipfs://') || validated.contains('ipfs')) {
+  if (validated.indexOf('ipfs') > -1) {
+    validated = ipfsToHttpURI(validated, config.ipfsGateway)
+  }
+  if (validated.startsWith('ar://')) {
+    validated = arweaveToHttpURI(validated, config.arweaveGateway)
+  }
+  if (! validated.startsWith('data:') && ! validated.startsWith('http')) {
+    validated = `https://${validated}`
+  }
 
   // Check url validity
   try {

package/utils/images.ts

@@ -1,27 +0,0 @@
-export type ImageVersions = {
-  xs?: boolean, // 215
-  sm?: boolean, // 512
-  md?: boolean, // 1024
-  lg?: boolean, // 2048
-}
-
-export type Image = {
-  id: string,
-  versions: ImageVersions,
-  cdn: string,
-  path: string,
-  type: string,
-  aspectRatio?: number,
-}
-
-const CDN_BASE = `cdn.evverydays.com`
-
-export const imageURI = (image: Image, version?: keyof ImageVersions) => {
-  if (! image) return null
-
-  const name = (version && image.versions[version])
-    ? `${image.id}@${version}.webp`
-    : `${image.id}.${image.type}`
-
-  return `https://${image.cdn}.${CDN_BASE}/${image.path}/${name}`
-}