@visualizevalue/mint-app-base 0.1.47 → 0.1.49

package/pages/[id]/[collection]/mint.vue

@@ -1,202 +1,19 @@
 <template>
   <Authenticated>
-    <PageFrame :title="breadcrumb" class="inset wide" id="mint-token">
-      <article class="preview">
-        <Image v-if="image" :src="image" alt="Preview" />
-        <ImagePreview v-else />
-        <h1 :class="{ '': !name }">{{ name || 'Token' }}</h1>
-        <p :class="{ '': !description }">
-          {{ description || 'No description' }}
-        </p>
-      </article>
+    <PageFrame :title="breadcrumb" class="inset wide">
 
-      <form @submit.stop.prevent="mint" class="card">
-        <Actions>
-          <select class="select choose-mode" v-model="mode">
-            <option value="file" title="Data URI Encoded File Upload">DATA-URI</option>
-            <option value="ipfs" title="Interplanetary File System">IPFS</option>
-            <option value="ar" title="Arweave">ARWEAVE</option>
-            <option value="http" title="Hypertext Transfer Protocol" disabled>HTTP</option>
-            <option value="svg" title="Scalable Vector Graphic" disabled>SVG</option>
-          </select>
-        </Actions>
-
-        <div>
-          <div v-if="mode === 'file'">
-            <FormSelectFile @change="setImage" />
-            <p v-if="! isSmall" class="muted">
-              <small>
-                Note: This should be a small file, prefferably an SVG like <a href="https://presence.art/tokens/perspective.svg" target="_blank">this one (810 bytes)</a>.
-                If it is larger than what we can store within one transaction, the token creation will be split up into multiple transactions.
-              </small>
-            </p>
-          </div>
-          <FormInput v-else-if="mode === 'ipfs'" v-model="ipfsCid" placeholder="CID (qmx...)" prefix="ipfs://" required />
-          <FormInput v-else-if="mode === 'ar'" v-model="arTxId" placeholder="TX ID (frV...)" prefix="ar://" required />
-
-          <FormInput v-model="name" placeholder="Title" required />
-          <FormInput v-model="description" placeholder="Description" />
-        </div>
-
-        <Actions>
-          <Button>Mint</Button>
-        </Actions>
-        <TransactionFlow
-          ref="txFlow"
-          :text="{
-            title: {
-              chain: 'Switch Chain',
-              requesting: 'Confirm In Wallet',
-              waiting: 'Transaction Submitted',
-              complete: 'Success!'
-            },
-            lead: {
-              chain: 'Requesting to switch chain...',
-              requesting: 'Requesting Signature...',
-              waiting: 'Checking mint Transaction...',
-              complete: `New token minted...`,
-            },
-            action: {
-              confirm: 'Mint',
-              error: 'Retry',
-              complete: 'OK',
-            },
-          }"
-          skip-confirmation
-          auto-close-success
-        />
-
-      </form>
+      <MintDetail :collection="collection" class="borderless" />
 
     </PageFrame>
   </Authenticated>
 </template>
 
 <script setup>
-const { $wagmi } = useNuxtApp()
-const id = useArtistId()
-const chainId = useMainChainId()
-
+// Prepare breadcrumbs
 const props = defineProps(['collection'])
-const store = useOnchainStore()
 const collection = computed(() => props.collection)
-
-const mode = ref('file')
-const ipfsCid = ref('')
-// TODO: Rework to plugin architecture. Or at least per renderer logic.
-const arTxId= ref('')
-const image = ref('')
-const name = ref('')
-const description = ref('')
-
-const imageSize = ref(0)
-const isSmall = computed(() => imageSize.value / 1024 < 10)
-const setImage = async (file) => {
-  try {
-    image.value = await imageFileToDataUri(file)
-    imageSize.value = file.size
-  } catch (e) {
-    image.value = ''
-    imageSize.value = 0
-  }
-}
-watch(ipfsCid, () => {
-  const validated = validateCID(ipfsCid.value)
-  if (! validated) {
-    image.value = ''
-  } else {
-    image.value = ipfsToHttpURI(`ipfs://${validated}`)
-  }
-})
-watch(arTxId, () => {
-  image.value = `https://arweave.net/${arTxId.value}`
-})
-watch(mode, () => image.value = '')
-
-const txFlow = ref()
-const txFlowKey = ref(0)
-const minting = ref(false)
-const mint = async () => {
-  if (! image.value) {
-    alert(`Empty image data. Please try again.`)
-    return
-  }
-
-  const artifact = toByteArray(image.value)
-  const artifactChunks = chunkArray(artifact, 4)
-  const multiTransactionPrepare = artifactChunks.length > 1
-
-  minting.value = true
-
-  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.`)) {
-        return
-      }
-
-      // On the first iteration we want to clear existing artifact data
-      let clearExisting = true
-
-      for (const chunk of artifactChunks) {
-        await txFlow.value.initializeRequest(() => writeContract($wagmi, {
-          abi: MINT_ABI,
-          chainId,
-          address: collection.value.address,
-          functionName: 'prepareArtifact',
-          args: [
-            collection.value.latestTokenId + 1n,
-            chunk,
-            clearExisting
-          ],
-        }))
-
-        // Make sure to rerender the tx flow component
-        txFlowKey.value ++
-
-        // On following iterations we want to keep existing artifact data
-        clearExisting = false
-      }
-    }
-
-    const receipt = await txFlow.value.initializeRequest(() => writeContract($wagmi, {
-      abi: MINT_ABI,
-      chainId,
-      address: collection.value.address,
-      functionName: 'create',
-      args: [
-        name.value,
-        description.value,
-        multiTransactionPrepare ? [] : artifact,
-        0,
-        0n,
-      ],
-    }))
-
-    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')
-
-    await store.fetchToken(collection.value.address, mintedEvent.args.id)
-
-    // Force update the collection mint ID
-    store.collections[collection.value.address].latestTokenId = mintedEvent.args.id
-
-    await navigateTo({
-      name: 'id-collection-tokenId',
-      params: { id: id.value, collection: collection.value.address, tokenId: mintedEvent.args.id }
-    })
-  } catch (e) {
-    console.error(e)
-  }
-
-  minting.value = false
-}
-
+const id = useArtistId()
+const store = useOnchainStore()
 const subdomain = useSubdomain()
 const isMe = useIsMe()
 
@@ -225,55 +42,3 @@ useMetaData({
 })
 </script>
 
-<style scoped>
-#mint-token {
-  display: grid;
-
-  @media (--md) {
-    grid-template-columns: 40% 1fr;
-  }
-
-  @media (--lg) {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-.preview {
-  height: 100%;
-  place-content: center;
-
-  .image,
-  svg {
-    margin-bottom: var(--spacer-sm);
-    width: 100%;
-  }
-
-  svg {
-    box-shadow: var(--border-shadow);
-  }
-
-  h1 {
-    display: flex;
-    gap: var(--spacer-sm);
-    align-items: baseline;
-    font-size: var(--font-lg);
-  }
-
-  p {
-    color: var(--muted);
-  }
-}
-
-form {
-  width: 100%;
-
-  > div {
-    display: grid;
-    gap: var(--spacer);
-  }
-}
-
-select.choose-mode {
-  width: fit-content;
-}
-</style>

package/pages/[id]/[collection]/renderers.vue

@@ -0,0 +1,43 @@
+<template>
+  <Authenticated>
+    <PageFrame :title="breadcrumb" class="inset" id="manage-renderers">
+      <RendererOverview :collection="collection" />
+    </PageFrame>
+  </Authenticated>
+</template>
+
+<script setup>
+const id = useArtistId()
+
+const props = defineProps(['collection'])
+const store = useOnchainStore()
+const collection = computed(() => props.collection)
+
+const subdomain = useSubdomain()
+const isMe = useIsMe()
+
+const breadcrumb = computed(() => {
+  const path = subdomain.value || isMe.value ? [] : [
+    {
+      text: store.displayName(id.value),
+      to: { name: 'id', params: { id: id.value } }
+    }
+  ]
+
+  return [
+    ...path,
+    {
+      text: `${ collection.value.name }`,
+      to: { name: 'id-collection', params: { id: id.value, collection: collection.value.address } }
+    },
+    {
+      text: `Manage Renderers`
+    },
+  ]
+})
+
+useMetaData({
+  title: `Manage Renderers | ${collection.value.name}`,
+})
+</script>
+

package/utils/abis.ts

@@ -19,7 +19,6 @@ export const FACTORY_ABI = parseAbi([
   'function version() pure returns (uint256)'
 ])
 
-
 export const MINT_ABI = parseAbi([
   'error ERC1155InsufficientBalance(address sender, uint256 balance, uint256 needed, uint256 tokenId)',
   'error ERC1155InvalidApprover(address approver)',
@@ -75,3 +74,9 @@ export const MINT_ABI = parseAbi([
   'function version() view returns (uint256)',
   'function withdraw()'
 ])
+
+export const RENDERER_ABI = parseAbi([
+  'function name() external pure returns (string memory)',
+  'function version() external pure returns (uint version)',
+])
+

package/utils/p5Script.ts

@@ -0,0 +1,33 @@
+export const DEFAULT_P5_SCRIPT =
+`let dimension
+
+function setup() {
+  dimension = Math.min(windowWidth, windowHeight)
+
+  createCanvas(dimension, dimension)
+
+  background(150)
+}
+
+function draw() {
+  // ...
+}
+`
+
+export const getP5Html = (title: string, script: string, isUri: boolean = false) =>
+`<html>
+    <head>
+        <title>${title}</title>
+        <link rel="stylesheet" href="data:text/css;base64,aHRtbHtoZWlnaHQ6MTAwJX1ib2R5e21pbi1oZWlnaHQ6MTAwJTttYXJnaW46MDtwYWRkaW5nOjB9Y2FudmFze3BhZGRpbmc6MDttYXJnaW46YXV0bztkaXNwbGF5OmJsb2NrO3Bvc2l0aW9uOmFic29sdXRlO3RvcDowO2JvdHRvbTowO2xlZnQ6MDtyaWdodDowfQ==">
+    </head>
+    <body>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script>
+        ${
+          isUri ? `<script src="${script}"></script>` : `<script>${script}</script>`
+        }
+    </body>
+</html>`
+
+export const getP5HtmlUri = (title: string, script: string, isUri: boolean = false) =>
+  `data:text/html;base64,${Buffer.from(getP5Html(title, script, isUri)).toString('base64')}`
+

package/utils/types.ts

@@ -34,8 +34,9 @@ export interface Collection {
   description: string
   initBlock: bigint
   latestTokenId: bigint
-  tokens: { [key: string]: Token }
   balance: bigint
+  tokens: { [key: string]: Token }
+  renderers: Renderer[]
 }
 
 export interface Token {
@@ -43,7 +44,9 @@ export interface Token {
   tokenId: bigint
   name: string
   description: string
-  artifact: string
+  image: string,
+  animationUrl?: string,
+  scriptUrl?: string,
   untilBlock: bigint
   mintsFetchedUntilBlock: bigint
   mintsBackfilledUntilBlock: bigint
@@ -60,3 +63,11 @@ export interface MintEvent {
   amount: bigint
   price: bigint
 }
+
+export interface Renderer {
+  address: `0x${string}`
+  name: string
+  description?: string
+  component?: string
+  version: bigint
+}