@visualizevalue/mint-app-base 0.1.93 → 0.1.95

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/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/MintToken.client.vue

@@ -67,7 +67,7 @@ const { price, displayPrice } = useMintPrice(mintCount)
 const mintRequest = computed(() => async () => {
   const count = BigInt(props.mintCount)
 
-  const priceWithBlockBuffer = price.value * 105n / 100n
+  const priceWithBlockBuffer = price.value * 110n / 100n
 
   return writeContract($wagmi, {
     abi: MINT_ABI,

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.93",
+  "version": "0.1.95",
   "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}`
-}