@visualizevalue/mint-app-base 0.1.80 → 0.1.82

package/app.config.ts

@@ -6,9 +6,16 @@ export default defineAppConfig({
         component: 'P5',
         name: 'P5 Renderer',
         version: 1n,
-        address: '0x32B8Ffa14e7F77c252b6D43BEC5498FCef2b205F',
+        address: '0x32b8ffa14e7f77c252b6d43bec5498fcef2b205f',
         description: 'Allows using P5 scripts as the artifact content'
       },
+      // {
+      //   component: 'Animation',
+      //   name: 'Animation Renderer',
+      //   version: 1n,
+      //   address: '', // TODO: Deploy...
+      //   description: 'Allows linking to both an image and an animation url'
+      // },
     ],
     // Sepolia
     11155111: [
@@ -16,9 +23,16 @@ export default defineAppConfig({
         component: 'P5',
         name: 'P5 Renderer (Sepolia)',
         version: 1n,
-        address: '0xfaDF2fB2F8a15Fc830c176B71D2c905E95f4169e',
+        address: '0xfadf2fb2f8a15fc830c176b71d2c905e95f4169e',
         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'
+      },
     ],
   }
 })

package/assets/styles/forms.css

@@ -124,22 +124,25 @@ select.select:--highlight {
 form {
   display: grid;
   gap: var(--spacer);
+}
 
-  label {
-    display: block;
-    font-family: var(--ui-font-family);
-    text-transform: var(--text-transform-ui);
-    margin: var(--size-2) 0;
-    color: var(--muted);
-    transition: all var(--speed);
+form label,
+label.form-label,
+label:has(.form-item) {
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size);
+  text-transform: var(--text-transform-ui);
+  margin: var(--size-2) 0;
+  transition: all var(--speed);
+  display: grid;
+  gap: var(--size-2);
 
-    > span:first-child {
-      display: block;
-      margin: 0 0 var(--size-2) 0
-    }
+  > span:first-child {
+    display: block;
+  }
 
-    &:hover {
-      color: var(--color);
-    }
+  &:hover {
+    color: var(--color);
   }
 }
+

package/components/Embed.vue

@@ -3,7 +3,12 @@
     class="embed"
     @touchmove.stop.prevent="() => null"
   >
+    <video v-if="isPlayable" autoplay muted playsinline loop crossorigin="anonymous" >
+      <source :src="src" :type="mediaType">
+      Your browser does not support the video tag.
+    </video>
     <iframe
+      v-else
       ref="frame"
       frameborder="0"
       :src="src"
@@ -12,17 +17,46 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { useWindowSize } from '@vueuse/core'
 
+async function fetchMediaType(url: string): Promise<string | null> {
+  try {
+    // Send a HEAD request to get only the headers
+    const response = await fetch(url, { method: 'HEAD' })
+
+    // Check if the request was successful
+    if (!response.ok) {
+      console.error(`Failed to fetch media type. Status: ${response.status}`)
+      return null
+    }
+
+    // Get the Content-Type header
+    const contentType = response.headers.get('Content-Type')
+
+    // Return the media type or null if unavailable
+    return contentType ? contentType.split(';')[0] : null
+  } catch (error) {
+    console.error(`Error fetching media type: ${error}`)
+    return null
+  }
+}
+
 const props = defineProps({
   src: String,
 })
 
 // Update on input change
 const src = ref(props.src)
-watch(props, () => {
+const mediaType = ref()
+const isPlayable = computed(() => {
+  if (! mediaType.value) return false
+  return document.createElement('video').canPlayType(mediaType.value) !== ""
+})
+
+watchEffect(async () => {
   src.value = props.src
+  mediaType.value = await fetchMediaType(src.value)
 })
 
 // Force reload on resize

package/components/Form/SelectFile.vue

@@ -20,12 +20,19 @@
 <script setup lang="ts">
 import { useFileDialog } from '@vueuse/core'
 
+const props = defineProps({
+  accept: {
+    type: String,
+    default: 'image/*'
+  }
+})
+
 const emit = defineEmits<{
   change: [file: File|null|undefined]
 }>()
 
 const { files, open, reset, onChange } = useFileDialog({
-  accept: 'image/*',
+  accept: props.accept,
   multiple: false,
 })
 

package/components/Mint/Detail.client.vue

@@ -1,8 +1,10 @@
 <script setup>
+import Animation from './Renderer/Animation.client.vue'
 import Base from './Renderer/Base.client.vue'
 import P5 from './Renderer/P5.client.vue'
 
 const components = {
+  Animation,
   Base,
   P5,
 }

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

@@ -0,0 +1,152 @@
+<template>
+  <div class="mint-renderer-base">
+    <Actions>
+      <select class="select choose-mode" v-model="mode">
+        <option value="ipfs" title="Interplanetary File System">IPFS Identifier</option>
+        <option value="ar" title="Arweave">Arweave Transaction</option>
+        <option value="file" title="Data URI Encoded File Upload">Onchain Artifact</option>
+      </select>
+    </Actions>
+
+    <div>
+      <label class="form-label">
+        <span>Image</span>
+
+        <FormInput v-if="mode === 'ipfs'" v-model="imageIpfsCid" placeholder="CID (qmx...)" prefix="ipfs://" required />
+        <FormInput v-else-if="mode === 'ar'" v-model="imageArTxId" placeholder="TX ID (frV...)" prefix="ar://" required />
+        <div v-else-if="mode === 'file'">
+          <FormSelectFile ref="imageSelect" @change="setImageArtifact" />
+          <p v-if="! imageIsSmall" class="muted">
+            <small>
+              {{ $t('mint.base.note.start') }}
+              <a href="https://presence.art/tokens/perspective.svg" target="_blank">{{ $t('mint.base.note.link_text') }}</a>.
+              {{ $t('mint.base.note.end') }}
+            </small>
+          </p>
+        </div>
+      </label>
+
+      <label class="form-label">
+        <span>Animation</span>
+
+        <FormInput v-if="mode === 'ipfs'" v-model="animationIpfsCid" placeholder="CID (qmx...)" prefix="ipfs://" required />
+        <FormInput v-else-if="mode === 'ar'" v-model="animationArTxId" placeholder="TX ID (frV...)" prefix="ar://" required />
+        <div v-else-if="mode === 'file'">
+          <FormSelectFile ref="animationSelect" @change="setAnimationArtifact" accept="video/*" />
+          <p v-if="! animationIsSmall" class="muted">
+            <small>
+              {{ $t('mint.base.note.start') }}
+              <a href="https://presence.art/tokens/perspective.svg" target="_blank">{{ $t('mint.base.note.link_text') }}</a>.
+              {{ $t('mint.base.note.end') }}
+            </small>
+          </p>
+        </div>
+      </label>
+
+      <FormInput v-model="name" :placeholder="$t('mint.base.title_placeholder')" required />
+      <FormInput v-model="description" :placeholder="$t('mint.base.description_placeholder')" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const {
+  artifact,
+  image,
+  name,
+  animationUrl,
+  description,
+} = useCreateMintData()
+
+const mode = ref('ipfs')
+
+const imageSelect = ref()
+const imageIpfsCid = ref('')
+const imageArTxId= ref('')
+
+const animationSelect = ref()
+const animationIpfsCid = ref('')
+const animationArTxId= ref('')
+
+const imageSize = ref(0)
+const imageIsSmall = computed(() => imageSize.value / 1024 < 10)
+const setImageArtifact = async (file) => {
+  try {
+    image.value = await imageFileToDataUri(file)
+    imageSize.value = file.size
+  } catch (e) {
+    image.value = ''
+    imageSize.value = 0
+  }
+}
+const animationSize = ref(0)
+const animationIsSmall = computed(() => animationSize.value / 1024 < 10)
+const setAnimationArtifact = async (file) => {
+  try {
+    animationUrl.value = await imageFileToDataUri(file)
+    animationSize.value = file.size
+  } catch (e) {
+    animationUrl.value = ''
+    animationSize.value = 0
+  }
+}
+
+watch(imageIpfsCid, () => {
+  const validated = validateCID(imageIpfsCid.value)
+  if (! validated) {
+    image.value = ''
+  } else {
+    image.value = ipfsToHttpURI(`ipfs://${validated}`)
+  }
+})
+watch(imageArTxId, () => {
+  image.value = `https://arweave.net/${imageArTxId.value}`
+})
+watch(mode, () => image.value = '')
+
+watch(animationIpfsCid, () => {
+  const validated = validateCID(animationIpfsCid.value)
+  if (! validated) {
+    animationUrl.value = ''
+  } else {
+    animationUrl.value = ipfsToHttpURI(`ipfs://${validated}`)
+  }
+})
+watch(animationArTxId, () => {
+  animationUrl.value = `https://arweave.net/${animationArTxId.value}`
+})
+watch(mode, () => {
+  image.value = ''
+  animationUrl.value = ''
+})
+
+// Encode the artifact as per how the P5Renderer.sol contract expects it.
+watchEffect(() => {
+  artifact.value = encodeAbiParameters(
+    [ { type: 'string', name: 'image' }, { type: 'string', name: 'animation' } ],
+    [ image.value, animationUrl.value ],
+  )
+})
+</script>
+
+<style scoped>
+  .mint-renderer-base {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer);
+    height: 100%;
+
+    > div {
+      display: flex;
+      height: 100%;
+      flex-direction: column;
+      justify-content: center;
+      gap: var(--spacer);
+    }
+  }
+
+  select.choose-mode {
+    width: fit-content;
+  }
+</style>
+

package/components/Renderer/InstallButton.vue

@@ -33,7 +33,7 @@ const { collection, renderer } = defineProps(['collection', 'renderer'])
 const store = useOnchainStore()
 const chainId = useMainChainId()
 
-const installRequest = computed(() => async () => {
+const installRequest = computed(() => () => {
   return writeContract($wagmi, {
     abi: MINT_ABI,
     chainId,

package/composables/collections.ts

@@ -276,7 +276,7 @@ export const useOnchainStore = () => {
           address,
           functionName: 'latestTokenId',
           chainId,
-        })
+        }) as Promise<bigint>
 
         const collection = this.collection(address)
 

package/locales/en.json

@@ -93,7 +93,7 @@
     },
     "note": {
       "start": "Note: This should be a small file, preferably a simple SVG like",
-      "link_text": "this one (273 bytes)",
+      "link_text": "this one (153 bytes)",
       "end": "Try to make it less than 10kb."
     },
     "preview": {

package/package.json

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