@visualizevalue/mint-app-base 0.0.1

package/app/composables/subdomain.ts

@@ -0,0 +1,27 @@
+export const useSubdomain = () => useState<string|null>('subdomain', () => null)
+
+export const useArtistScope = () => {
+  const subdomain = useSubdomain()
+  const creatorAddress = useRuntimeConfig().public.creatorAddress
+
+  return creatorAddress || subdomain.value
+}
+
+export const useShowArtistInHeader = () => {
+  const isMe = useIsMe()
+  const scope = useArtistScope()
+
+  return computed(() => scope || isMe.value)
+}
+
+export const useArtistId = () => {
+  const route = useRoute()
+  const artist = useArtistScope()
+
+  return computed(() => artist
+    ? artist as `0x${string}`
+    : route.params.id
+      ? (route.params.id as string).toLowerCase() as `0x${string}`
+      : null
+  )
+}

package/app/error.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <h1 class="display">{{ error?.statusCode }}</h1>
+    <p class="lead">{{ error?.message }}</p>
+    <Button to="/">Go back home</Button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+defineProps({
+  error: Object as () => NuxtError
+})
+</script>
+
+<style scoped>
+div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacer);
+  height: 100dvh;
+
+  .button {
+    display: flex;
+    margin-top: var(--size-6);
+  }
+}
+</style>

package/app/layouts/default.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <AppHeader />
+
+    <main>
+      <slot />
+    </main>
+
+    <Navbar />
+
+    <ToggleDarkMode />
+  </div>
+</template>
+
+<script setup>
+// Fetch and update price feed
+const priceFeed = usePriceFeedStore()
+onMounted(() => {
+  priceFeed.fetchEthUsdPrice()
+
+  setInterval(() => priceFeed.fetchEthUsdPrice(), 60 * 60 * 1000)
+})
+</script>
+
+<style scoped>
+main {
+  display: grid;
+  gap: var(--spacer);
+  min-height: 100dvh;
+
+  &:not(:has(> .frame-sm)) {
+    grid-auto-rows: min-content;
+  }
+
+  /* Frame space around navbars */
+  padding: var(--navbar-height) 0 var(--navbar-height);
+
+  @media (--md) {
+    padding: var(--navbar-height) 0 0;
+  }
+}
+</style>

package/app/middleware/lowercaseId.ts

@@ -0,0 +1 @@
+export default defineNuxtRouteMiddleware((to) => lowercaseRouteParam(to, 'id'))

package/app/middleware/lowercaseProfileAddress.ts

@@ -0,0 +1 @@
+export default defineNuxtRouteMiddleware((to) => lowercaseRouteParam(to, 'address'))

package/app/middleware/redirectUserScope.ts

@@ -0,0 +1,13 @@
+import { useAccount } from "@wagmi/vue"
+
+export default defineNuxtRouteMiddleware((to) => {
+  if (import.meta.server) return
+
+  const { isConnected, address } = useAccount()
+
+  if (to.name === 'index' && isConnected.value) {
+    return navigateTo({ name: 'id', params: { id: address.value }}, {
+      replace: true
+    })
+  }
+})

package/app/pages/[id]/[collection]/[tokenId]/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <PageFrame :title="breadcrumb" class="full">
+    <TokenDetail :token=token />
+  </PageFrame>
+</template>
+
+<script setup>
+import { useAccount } from '@wagmi/vue'
+
+const id = useArtistId()
+const route = useRoute()
+const { address, isConnected } = useAccount()
+const props = defineProps(['collection', 'token'])
+const collection = computed(() => props.collection)
+const token = computed(() => props.token)
+const tokenId = computed(() => BigInt(route.params.tokenId))
+const store = useOnchainStore()
+
+// Keep track of account token balance
+const ownedBalance = computed(() => store.tokenBalance(collection.value.address, token.value.tokenId))
+const maybeCheckBalance = async (force = false) => {
+  if (isConnected.value && (ownedBalance.value === null || force)) {
+    await store.fetchTokenBalance(token.value, address.value)
+  }
+}
+watch(isConnected, () => maybeCheckBalance(true))
+
+// Navigation guards
+onMounted(async () => {
+  if (collection.value.latestTokenId < tokenId.value) {
+    return navigateTo({ name: 'id-collection', params: { id: id.value, collection: collection.value.address }}, {
+      replace: true
+    })
+  }
+
+  await maybeCheckBalance()
+})
+
+const hideArtist = useShowArtistInHeader()
+const breadcrumb = computed(() => {
+  const path = hideArtist.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: `#${ tokenId.value }`
+    },
+  ]
+})
+
+useMetaData({
+  title: `${ token.value?.name } (#${tokenId.value}) | ${collection.value.name}`,
+})
+</script>
+
+<style scoped>
+</style>

package/app/pages/[id]/[collection]/[tokenId].vue

@@ -0,0 +1,25 @@
+<template>
+  <Loading v-if="loading" />
+  <NuxtPage v-else :collection="collection" :token="token" />
+</template>
+
+<script setup>
+const props = defineProps(['collection'])
+const route = useRoute()
+const collection = computed(() => props.collection)
+
+const store = useOnchainStore()
+const token = computed(() => collection.value.tokens[route.params.tokenId])
+const loading = ref(true)
+
+const load = async () => {
+  loading.value = true
+
+  await store.fetchToken(collection.value.address, route.params.tokenId)
+
+  loading.value = false
+}
+
+onMounted(() => load())
+watch(route, () => load())
+</script>

package/app/pages/[id]/[collection]/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <PageFrame :title="breadcrumb">
+    <CollectionIntro :collection="collection" />
+
+    <TokenOverviewCard v-for="token of tokens" :key="token.tokenId" :token="token" />
+
+    <Loading v-if="loading" />
+    <div v-if="! tokens.length && !loading" class="centered">
+      <p class="muted">No tokens yet</p>
+    </div>
+  </PageFrame>
+</template>
+
+<script setup>
+const props = defineProps(['collection'])
+const collection = computed(() => props.collection)
+const id = useArtistId()
+const store = useOnchainStore()
+
+const hideArtist = useShowArtistInHeader()
+const breadcrumb = computed(() => {
+  const path = hideArtist.value ? [] : [
+    {
+      text: store.displayName(id.value),
+      to: { name: 'id', params: { id } }
+    }
+  ]
+
+  return [
+    ...path,
+    {
+      text: collection.value.name
+    }
+  ]
+})
+
+useMetaData({
+  title: `${collection.value.name}`,
+})
+
+const tokens = computed(() => store.tokens(collection.value.address))
+const loading = ref(false)
+onMounted(async () => {
+  loading.value = true
+  await store.fetchCollectionTokens(collection.value.address)
+  loading.value = false
+})
+</script>
+
+<style scoped>
+</style>

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

@@ -0,0 +1,260 @@
+<template>
+  <Authenticated>
+    <PageFrame :title="breadcrumb" class="inset wide" id="mint-token">
+      <article class="preview">
+        <Image v-if="image" :src="image" alt="Preview" />
+        <VisualImagePreview v-else />
+        <h1 :class="{ 'muted-light': !name }">{{ name || 'Token' }}</h1>
+        <p :class="{ 'muted-light': !description }">
+          {{ description || 'No description' }}
+        </p>
+      </article>
+
+      <form @submit.stop.prevent="mint" class="card">
+        <Actions>
+          <select class="select small 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="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-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>
+
+    </PageFrame>
+  </Authenticated>
+</template>
+
+<script setup>
+const { $wagmi } = useNuxtApp()
+const id = useArtistId()
+const chainId = useMainChainId()
+
+const props = defineProps(['collection'])
+const store = useOnchainStore()
+const collection = computed(() => props.collection)
+
+const mode = ref('file')
+const ipfsCid = 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)
+  } catch (e) {
+    image.value = ''
+  }
+  imageSize.value = file.size
+}
+watch(ipfsCid, () => {
+  const validated = validateCID(ipfsCid.value)
+  if (! validated) {
+    image.value = ''
+  } else {
+    image.value = ipfsToHttpURI(`ipfs://${validated}`)
+  }
+})
+watch(mode, () => image.value = '')
+
+const txFlow = ref()
+const txFlowKey = ref(0)
+const minting = ref(false)
+const mint = async () => {
+  const artifact = toByteArray(image.value)
+  const artifactChunks = chunkArray(artifact, 4)
+  const multiTransactionPrepare = artifactChunks.length > 1
+
+  minting.value = true
+
+  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 }
+  })
+
+  minting.value = false
+}
+
+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: `New Mint`
+    },
+  ]
+})
+
+useMetaData({
+  title: `Mint New Token | ${collection.value.name}`,
+})
+</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 {
+    border-radius: var(--border-radius);
+    border: var(--border);
+    margin-bottom: var(--spacer-sm);
+    width: 100%;
+  }
+
+  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/app/pages/[id]/[collection].vue

@@ -0,0 +1,24 @@
+<template>
+  <Loading v-if="loading" />
+  <NuxtPage v-else :collection="collection" />
+</template>
+
+<script setup>
+const route = useRoute()
+const address = computed(() => route.params.collection.toLowerCase())
+
+const store = useOnchainStore()
+const loading = ref(true)
+const collection = ref(null)
+
+const load = async () => {
+  loading.value = true
+
+  collection.value = await store.fetchCollection(address.value)
+
+  loading.value = false
+}
+
+onMounted(() => load())
+watch(address, () => load())
+</script>

package/app/pages/[id]/add.vue

@@ -0,0 +1,40 @@
+<template>
+  <Authenticated>
+    <PageFrame :title="[
+      {
+        text: `Add existing`
+      }
+    ]">
+      <form @submit.stop.prevent="add">
+        <FormInput v-model="address" placeholder="Contract Address (0x...)" />
+
+        <Button>Add</Button>
+      </form>
+    </PageFrame>
+  </Authenticated>
+</template>
+
+<script setup>
+const id = useArtistId()
+
+const address = ref('')
+
+const add = async () => {
+  if (! isAddress(address.value)) {
+    alert('Not an address')
+    return
+  }
+
+  await navigateTo(`/${id.value}/${address.value}`)
+}
+
+useMetaData({
+  title: `Add Existing Collection`,
+})
+</script>
+
+<style scoped>
+form {
+  width: 100%;
+}
+</style>