@visualizevalue/mint-app-base 0.1.47 → 0.1.49

package/app.config.ts

@@ -0,0 +1,12 @@
+export default defineAppConfig({
+  knownRenderers: [
+    {
+      component: 'P5',
+      name: 'P5 Renderer',
+      version: 1n,
+      address: '0xf6f1f8ea7bbc82a3b3da6fba1c24408e7a9a8fab',
+      description: 'Allows using P5 scripts as the artifact content'
+    },
+  ],
+})
+

package/components/CodeEditor.client.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="code-editor">
+    <CodeMirror
+      :value="modelValue"
+      :options="cmOptions"
+      height="100%"
+      :placeholder="placeholder"
+      @change="$emit('update:modelValue', $event)"
+      original-style
+    />
+  </div>
+</template>
+
+<script setup>
+import CodeMirror from 'codemirror-editor-vue3'
+import 'codemirror/addon/display/placeholder.js'
+import 'codemirror/mode/htmlmixed/htmlmixed.js'
+import 'codemirror/mode/javascript/javascript.js'
+// import 'codemirror/theme/ayu-mirage.css'
+
+const props = defineProps({
+  modelValue: String,
+  placeholder: String,
+  mode: {
+    type: String,
+    default: 'text/javascript'
+  },
+})
+const emit = defineEmits(['update:modelValue'])
+
+const cmOptions = computed(() => ({
+  mode: props.mode,
+  // theme: 'ayu-mirage',
+  indentUnit: 2,
+  tabSize: 2,
+  indentWithTab: false
+}))
+</script>
+
+<style scoped>
+.code-editor {
+  text-transform: none;
+  height: 100%;
+
+  :deep(.CodeMirror) {
+    height: 100%;
+  }
+}
+</style>

package/components/Collection/Actions.vue

@@ -0,0 +1,19 @@
+<template>
+  <menu v-if="ownedByMe">
+    <CollectionWithdraw :collection="collection" />
+    <Button
+      :to="{ name: 'id-collection-mint', params: { id, collection: collection.address } }"
+      id="mint-new"
+    >
+      <Icon type="add" />
+      <span>Mint</span>
+    </Button>
+  </menu>
+</template>
+
+<script setup>
+const { collection } = defineProps({ collection: Object })
+
+const id = useArtistId()
+const ownedByMe = useIsMeCheck(collection.owner)
+</script>

package/components/Collection/Intro.vue

@@ -26,16 +26,7 @@
           </p>
         </div>
 
-        <menu v-if="ownedByMe">
-          <CollectionWithdraw :collection="collection" />
-          <Button
-            :to="{ name: 'id-collection-mint', params: { id, collection: collection.address } }"
-            id="mint-new"
-          >
-            <Icon type="add" />
-            <span>Mint New</span>
-          </Button>
-        </menu>
+        <CollectionActions :collection="collection" />
       </div>
     </slot>
   </header>
@@ -48,8 +39,6 @@ const { collection } = defineProps<{
 
 const id = useArtistId()
 const store = useOnchainStore()
-
-const ownedByMe = useIsMeCheck(collection.owner)
 </script>
 
 <style scoped>

package/components/Embed.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="embed">
+    <iframe
+      ref="frame"
+      frameborder="0"
+      :src="src"
+      sandbox="allow-scripts"
+    ></iframe>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  src: String,
+})
+</script>
+
+<style scoped>
+.embed {
+  width: 100%;
+  height: 0;
+  padding-bottom: 100%;
+  position: relative;
+
+  iframe {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    border: var(--border);
+  }
+}
+</style>
+

package/components/Form/Group.vue

@@ -13,7 +13,7 @@
   width: 100%;
 }
 
-fieldset {
+.fieldset-wrapper > fieldset {
   width: 100%;
   max-width: -webkit-fill-available;
   display: flex;

package/components/Form/SelectFile.vue

@@ -31,6 +31,10 @@ const { files, open, reset, onChange } = useFileDialog({
 
 const file = computed(() => files.value?.length ? files.value[0] : null)
 onChange(() => emit('change', file.value))
+
+defineExpose({
+  reset,
+})
 </script>
 
 <style scoped>

package/components/Icon.vue

@@ -16,6 +16,7 @@ const ICONS = {
   'chevron-right': '➡️',
   'chevron-up': '⬆️',
   'close': '✖️',
+  'code': '🩻',
   'discord': '🤖',
   'edit': '📝',
   'email': '📧',

package/components/Mint/Action.client.vue

@@ -0,0 +1,51 @@
+<template>
+  <Actions class="borderless">
+    <Button @click="mint">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
+    @complete="mintCreated"
+  />
+</template>
+
+<script setup>
+const props = defineProps({
+  collection: Object,
+})
+
+const txFlow = ref()
+
+const { mint, mintCreated } = useCreateMintFlow(props.collection, txFlow)
+</script>
+
+<style scoped>
+menu {
+  justify-content: flex-end;
+
+  @media (--md) {
+    grid-column: 2;
+  }
+}
+</style>

package/components/Mint/Detail.client.vue

@@ -0,0 +1,49 @@
+<script setup>
+import Base from './Renderer/Base.client.vue'
+import P5 from './Renderer/P5.client.vue'
+
+const components = {
+  Base,
+  P5,
+}
+
+const props = defineProps(['collection'])
+const { component } = useCreateMintRendererComponent(props.collection)
+</script>
+
+<template>
+  <div class="mint-detail">
+    <MintSelectRenderer :collection="collection" class="borderless" />
+
+    <MintPreview />
+
+    <component :is="components[component]" class="card" />
+
+    <MintAction :collection="collection" />
+  </div>
+</template>
+
+<style>
+.mint-detail {
+  display: grid;
+  gap: var(--spacer);
+
+  > *:not(.borderless) {
+    border: var(--border);
+    padding: var(--spacer);
+  }
+
+  @media (--md) {
+    grid-template-columns: 40% 1fr;
+
+    .mint-select-renderer {
+      grid-column: span 2;
+    }
+  }
+
+  @media (--lg) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+</style>
+

package/components/Mint/Preview.client.vue

@@ -0,0 +1,58 @@
+<template>
+  <article class="mint-preview">
+    <div class="static">
+      <Image v-if="image" :src="image" alt="Preview" />
+      <ImagePreview v-else />
+    </div>
+
+    <Embed v-if="animationUrl" :src="animationUrl" />
+
+    <h1 :class="{ '': !name }">{{ name || 'Token' }}</h1>
+    <p :class="{ '': !description }">
+      {{ description || 'No description' }}
+    </p>
+  </article>
+</template>
+
+<script setup>
+const { image, animationUrl, name, description } = useCreateMintData()
+</script>
+
+<style scoped>
+.mint-preview {
+  height: 100%;
+  place-content: center;
+
+  svg {
+    box-shadow: var(--border-shadow);
+  }
+
+  .image,
+  svg {
+    margin-bottom: var(--spacer-sm);
+    width: 100%;
+  }
+
+  .static {
+    &:has(+ .embed) {
+      width: 30%;
+    }
+  }
+
+  .embed {
+    margin: var(--spacer-sm) 0;
+  }
+
+  h1 {
+    display: flex;
+    gap: var(--spacer-sm);
+    align-items: baseline;
+    font-size: var(--font-lg);
+  }
+
+  p {
+    color: var(--muted);
+  }
+}
+</style>
+

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

@@ -0,0 +1,107 @@
+<template>
+  <div class="mint-renderer-base">
+    <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 ref="select" @change="setArtifact" />
+        <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>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  decoupleArtifact: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const {
+  artifact,
+  image,
+  name,
+  description,
+} = useCreateMintData()
+
+const select = ref()
+const mode = ref('file')
+const ipfsCid = ref('')
+const arTxId= ref('')
+
+const imageSize = ref(0)
+const isSmall = computed(() => imageSize.value / 1024 < 10)
+const setArtifact = 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 = '')
+
+watch(image, () => {
+  if (props.decoupleArtifact) return
+
+  // Copy to image (simple and stupid for the base renderer...)
+  artifact.value = image.value
+
+  // If artifact is empty, reset the select field
+  if (! artifact.value) select.value.reset()
+})
+</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/Mint/Renderer/P5.client.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="mint-renderer-p5">
+
+    <Tabs initial="base">
+      <template #menu="{ active, select }">
+        <Button @click="select('base')" :class="{ active: active === 'base' }">Static</Button>
+        <Button @click="select('script')" :class="{ active: active === 'script' }">P5 Script</Button>
+      </template>
+      <template #content="{ active }">
+        <MintRendererBase v-show="active === 'base'" decouple-artifact />
+        <CodeEditor v-show="active === 'script'" v-model="script" class="full" />
+      </template>
+    </Tabs>
+  </div>
+</template>
+
+<script setup>
+const {
+  artifact,
+  image,
+  animationUrl,
+} = useCreateMintData()
+
+const script = ref(DEFAULT_P5_SCRIPT)
+
+// Keep the animationURL (for the preview) up to date
+watchEffect(() => {
+  animationUrl.value = getP5HtmlUri('Preview', script.value)
+})
+
+// Encode the artifact as per how the P5Renderer.sol contract expects it.
+watchEffect(() => {
+  artifact.value = encodeAbiParameters(
+    [ { type: 'string', name: 'image' }, { type: 'string', name: 'script' } ],
+    [ image.value, script.value ],
+  )
+})
+</script>
+
+<style>
+.mint-renderer-p5 {
+  padding: 0 !important;
+  border: 0 !important;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+
+  > .tabs {
+    height: min-content;
+  }
+
+  > .tabs-content {
+    border: var(--border);
+    border-top: 0;
+    height: 100%;
+
+    > * {
+      height: 100%;
+    }
+
+    > *:not(.full) {
+      padding: var(--spacer);
+    }
+  }
+}
+</style>
+

package/components/Mint/SelectRenderer.client.vue

@@ -0,0 +1,52 @@
+<template>
+  <aside class="mint-select-renderer">
+    <select
+      class="select"
+      v-model="selection"
+    >
+      <option
+        v-for="( renderer, index ) in collection.renderers"
+        :value="index"
+        :title="renderer.name"
+      >{{ renderer.name }}</option>
+      <option disabled>----</option>
+      <option value="new">Install New</option>
+    </select>
+  </aside>
+</template>
+
+<script setup>
+const { collection } = defineProps(['collection'])
+const id = useArtistId()
+
+const store = useOnchainStore()
+onMounted(() => store.fetchCollectionRenderers(collection.address))
+
+const { renderer, reset } = useCreateMintData()
+const selection = ref(renderer.value)
+watch(selection, () => {
+  if (selection.value === 'new') {
+    return navigateTo({ name: 'id-collection-renderers', params: { id: id.value, collection: collection.address } })
+  }
+
+  renderer.value = selection.value
+
+  reset()
+})
+</script>
+
+<style scoped>
+.mint-select-renderer {
+  display: grid;
+  gap: var(--spacer);
+
+  @media (--md) {
+    display: flex;
+    justify-content: space-between;
+
+    .select {
+      width: fit-content;
+    }
+  }
+}
+</style>

package/components/Page/Frame.vue

@@ -33,6 +33,7 @@ watch(props, () => updateBreadcrumbs())
   &.inset {
     gap: var(--spacer);
     padding: var(--spacer);
+    overflow-x: hidden;
 
     > *:not(.borderless) {
       border: var(--border);

package/components/Renderer/InstallButton.vue

@@ -0,0 +1,62 @@
+<template>
+  <Button @click="install">Install</Button>
+  <TransactionFlow
+    ref="txFlow"
+    :request="installRequest"
+    :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 Transaction...',
+        complete: `New Renderer registered...`,
+      },
+      action: {
+        confirm: 'Register Renderer',
+        error: 'Retry',
+        complete: 'OK',
+      },
+    }"
+    skip-confirmation
+    auto-close-success
+  />
+</template>
+
+<script setup>
+const { $wagmi } = useNuxtApp()
+const { collection, renderer } = defineProps(['collection', 'renderer'])
+const store = useOnchainStore()
+const chainId = useMainChainId()
+
+const installRequest = computed(() => async () => {
+  return writeContract($wagmi, {
+    abi: MINT_ABI,
+    chainId,
+    address: collection.address,
+    functionName: 'registerRenderer',
+    args: [
+      renderer.address,
+    ],
+  })
+})
+const txFlow = ref()
+const installing = ref(false)
+const install = async () => {
+  installing.value = true
+
+  try {
+    await txFlow.value.initializeRequest(installRequest.value)
+
+    await store.fetchCollectionRenderers(collection.address)
+  } catch (e) {
+    console.error(e)
+  }
+
+  installing.value = false
+}
+</script>