@visualizevalue/mint-app-base 0.0.1

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

@@ -0,0 +1,177 @@
+<template>
+  <Authenticated>
+    <PageFrame
+      :title="[
+        {
+          text: `Create New`
+        }
+      ]"
+      class="inset"
+    >
+
+      <article class="preview">
+        <div class="visual">
+          <Image v-if="image" :src="image" alt="Preview" />
+          <VisualImagePreview v-else />
+        </div>
+        <h1>
+          <span :class="{ 'muted-light': !title }">{{ title || 'Token' }}</span>
+          <small :class="{ 'muted-light': !symbol }">{{ symbol || '$T' }}</small>
+        </h1>
+        <p :class="{ 'muted-light': !description }">
+          {{ description || 'No description' }}
+        </p>
+      </article>
+
+      <form @submit.stop.prevent="deploy" class="card borderless">
+        <div class="card">
+          <div>
+            <FormSelectFile @change="setImage" />
+            <p v-if="! isSmall" class="muted"><small>Note: This should be a small file, prefferably a simple SVG like <a href="/example-contract-icon.svg" target="_blank">this one (273 bytes)</a>. Try to make it less than 10kb.</small></p>
+          </div>
+          <FormGroup>
+            <FormInput v-model="title" placeholder="Title" required class="title" />
+            <FormInput v-model="symbol" placeholder="Symbol" required />
+          </FormGroup>
+          <FormInput v-model="description" placeholder="Description" />
+        </div>
+
+        <Actions class="borderless">
+          <TransactionFlow
+            :request="deployRequest"
+            :text="{
+              title: {
+                chain: 'Switch Chain',
+                requesting: 'Confirm In Wallet',
+                waiting: '2. Transaction Submitted',
+                complete: '3. Success!'
+              },
+              lead: {
+                chain: 'Requesting to switch chain...',
+                requesting: 'Requesting Signature...',
+                waiting: 'Checking Deployment Transaction...',
+                complete: `New Collection Created...`,
+              },
+              action: {
+                confirm: 'Mint',
+                error: 'Retry',
+                complete: 'OK',
+              },
+            }"
+            @complete="deployed"
+            skip-confirmation
+            auto-close-success
+          >
+            <template #start="{ start }">
+              <Button @click="start">
+                Deploy
+              </Button>
+            </template>
+          </TransactionFlow>
+        </Actions>
+      </form>
+
+    </PageFrame>
+  </Authenticated>
+</template>
+
+<script setup>
+const config = useRuntimeConfig()
+const store = useOnchainStore()
+const chainId = useMainChainId()
+
+const image = ref('')
+const title = ref('')
+const symbol = ref('')
+const description = ref('')
+
+const { $wagmi } = useNuxtApp()
+const id = useArtistId()
+
+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
+}
+
+const deployRequest = computed(() => async () => {
+  return await writeContract($wagmi, {
+    abi: FACTORY_ABI,
+    chainId,
+    address: config.public.factoryAddress,
+    functionName: 'create',
+    args: [
+      title.value,
+      symbol.value,
+      description.value,
+      toByteArray(image.value),
+    ],
+  })
+})
+
+const deployed = async (receipt) => {
+  const logs = receipt.logs.map(log => decodeEventLog({
+    abi: [...FACTORY_ABI, ...MINT_ABI],
+    data: log.data,
+    topics: log.topics,
+    strict: false,
+  }))
+
+  const createdEvent = logs.find(log => log.eventName === 'Created')
+
+  const artist = store.artist(id.value)
+  await store.fetchCollections(id.value, config.public.factoryAddress, artist.collectionsFetchedUntilBlock)
+  await navigateTo(`/${id.value}/${createdEvent.args.contractAddress}`)
+}
+
+useMetaData({
+  title: `Create New Collection`,
+})
+</script>
+
+<style scoped>
+.preview {
+  .visual {
+    width: 5rem;
+    margin-bottom: var(--spacer-sm);
+
+    svg {
+      border-radius: var(--border-radius);
+      border: var(--border);
+    }
+  }
+
+  h1 {
+    display: flex;
+    gap: var(--spacer-sm);
+    align-items: baseline;
+    font-size: var(--font-lg);
+
+    small {
+      font-size: var(--font-base);
+      color: var(--muted);
+    }
+  }
+
+  p {
+    color: var(--muted);
+  }
+}
+
+form {
+  width: 100%;
+
+  :deep(fieldset) {
+    @container (min-width: 30rem) {
+      .title {
+        width: 100%;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,43 @@
+<template>
+  <PageFrame :title="breadcrumb">
+    <ProfileHeader :address="id" />
+
+    <CollectionsOverview :id="id" :key="`${isMe}-${id}`">
+      <template #before="{ collections }">
+        <HeaderSection v-if="isMe && collections.length">
+          <h1>Your Collections</h1>
+          <Actions>
+            <Button :to="{ name: `id-create`, params: { id } }" class="small">
+              <Icon type="plus" />
+              <span>Collection</span>
+            </Button>
+          </Actions>
+        </HeaderSection>
+      </template>
+    </CollectionsOverview>
+  </PageFrame>
+</template>
+
+<script setup>
+const id = useArtistId()
+const isMe = useIsMe()
+const store = useOnchainStore()
+
+const hideArtist = useShowArtistInHeader()
+const breadcrumb = computed(() => {
+  if (hideArtist.value) return []
+
+  return [
+    {
+      text: store.displayName(id.value)
+    }
+  ]
+})
+
+useMetaData({
+  title: store.displayName(id.value),
+})
+</script>
+
+<style scoped>
+</style>

package/app/pages/[id].vue

@@ -0,0 +1,9 @@
+<template>
+  <NuxtPage />
+</template>
+
+<script setup>
+definePageMeta({
+  middleware: ['lowercase-id']
+})
+</script>

package/app/pages/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <PageFrame>
+    <header>
+      <p>{{ config.public.description }}</p>
+
+      <ClientOnly>
+        <Connect @connected="$event => navigateTo({ name: 'id', params: { id: $event.address } }, { replace: true })">
+          <template #connected>
+            <span></span>
+          </template>
+        </Connect>
+        <template #fallback>
+          <Button>Connect</Button>
+        </template>
+      </ClientOnly>
+    </header>
+  </PageFrame>
+</template>
+
+<script setup>
+const config = useRuntimeConfig()
+
+useMetaData({
+  title: config.public.title,
+  description: config.public.description,
+})
+</script>
+
+<style scoped>
+header {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacer);
+
+  p {
+    text-align: center;
+    color: var(--muted);
+  }
+}
+
+/* HEIGHT */
+header {
+  height: calc(100dvh - var(--navbar-height) * 3);
+}
+</style>

package/app/pages/profile/[address]/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <Loading v-if="! artist" />
+  <PageFrame v-else title="Profile">
+
+    <ProfileHeader :address="address">
+      <template v-if="isMe" #before>
+        <Actions>
+          <Button :to="`https://app.ens.domains/${address}`" class="small">
+            <Icon type="edit-2" />
+            <span>Edit Profile</span>
+          </Button>
+        </Actions>
+      </template>
+    </ProfileHeader>
+
+    <section v-if="artistScope" class="centered muted">
+      <p>Collected art from <Account :address="artistScope" /> will be indexed on profiles soon...</p>
+      <p v-if="isMyArtistScope">Manage Your collections <NuxtLink :to="{ name: 'id', params: { id: address } }">here</NuxtLink>.</p>
+      <p v-else>You can mint your own art on <NuxtLink :to="config.public.platformUrl" target="_blank">{{ getMainDomain(config.public.platformUrl) }}</NuxtLink>.</p>
+    </section>
+    <section v-else class="centered">
+      <p class="muted">Collected art and curation options for your profile will come soon...</p>
+    </section>
+  </PageFrame>
+</template>
+
+<script setup>
+const config = useRuntimeConfig()
+const route = useRoute()
+const address = computed(() => route.params.address)
+const store = useOnchainStore()
+const isMe = useIsMeCheck(address.value)
+const artistScope = useArtistScope()
+const isMyArtistScope = useIsMeCheck(artistScope)
+
+const artist = ref(null)
+
+const load = async () => {
+  await store.fetchArtistScope(address.value, config.public.factoryAddress)
+
+  artist.value = store.artist(address.value)
+}
+onMounted(() => load())
+
+useMetaData({
+  title: artist.value?.ens || shortAddress(address.value),
+})
+</script>
+
+<style scoped>
+</style>

package/app/pages/profile/[address].vue

@@ -0,0 +1,9 @@
+<template>
+  <NuxtPage />
+</template>
+
+<script setup>
+definePageMeta({
+  middleware: ['lowercase-profile-address']
+})
+</script>

package/app/pages/profile/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <PageFrame>
+    <header>
+      <Connect v-if="! isConnected" />
+    </header>
+  </PageFrame>
+</template>
+
+<script setup>
+import { useAccount } from '@wagmi/vue'
+
+const { address, isConnected } = useAccount()
+
+const redirect = () => {
+  if (isConnected) navigateTo({ name: 'profile-address', params: { address: address.value?.toLowerCase() }}, {
+    replace: true
+  })
+}
+onMounted(() => redirect())
+watch(isConnected, () => redirect())
+
+useMetaData({
+  title: `Profile`,
+})
+</script>
+
+<style scoped>
+</style>

package/app/plugins/1.polyfill.client.ts

@@ -0,0 +1,12 @@
+import { defineNuxtPlugin } from '#app'
+import buffer from 'buffer'
+
+// This also uses the server `polyfill` plugin...
+export default defineNuxtPlugin({
+  name: 'client-polyfill',
+  enforce: 'pre',
+  async setup () {
+    window.global = window
+    window.Buffer = buffer.Buffer
+  }
+})

package/app/plugins/2.wagmi.ts

@@ -0,0 +1,57 @@
+// import { custom, fallback } from 'viem'
+import { VueQueryPlugin } from '@tanstack/vue-query'
+import { http, cookieStorage, createConfig, createStorage, WagmiPlugin } from '@wagmi/vue'
+import { mainnet, sepolia, holesky, localhost } from '@wagmi/vue/chains'
+import { coinbaseWallet, injected, metaMask, walletConnect } from '@wagmi/vue/connectors'
+
+// const isBrowser = typeof window !== 'undefined' && window !== null
+// const transports = isBrowser && window.ethereum
+//   ? fallback([ custom(window.ethereum!), http() ])
+//   : http()
+const transports = http()
+
+export default defineNuxtPlugin(nuxtApp => {
+  const title = nuxtApp.$config.public.title || 'Mint'
+
+  const wagmiConfig = createConfig({
+    chains: [mainnet, sepolia, holesky, localhost],
+    batch: {
+      multicall: true,
+    },
+    connectors: [
+      injected(),
+      walletConnect({
+        projectId: nuxtApp.$config.public.walletConnectProjectId,
+      }),
+      coinbaseWallet({
+        appName: title,
+        appLogoUrl: '',
+      }),
+      metaMask({
+        dappMetadata: {
+          name: title,
+          iconUrl: '',
+          url: '',
+        }
+      }),
+    ],
+    storage: createStorage({
+      storage: cookieStorage,
+    }),
+    ssr: true,
+    transports: {
+      [mainnet.id]: transports,
+      [sepolia.id]: transports,
+      [holesky.id]: transports,
+      [localhost.id]: transports,
+    },
+  })
+
+  nuxtApp.vueApp.use(WagmiPlugin, { config: wagmiConfig }).use(VueQueryPlugin, {})
+
+  return {
+    provide: {
+      wagmi: wagmiConfig,
+    }
+  }
+})

package/app/router.options.ts

@@ -0,0 +1,25 @@
+import type { RouterConfig } from '@nuxt/schema'
+
+export default {
+  routes: (_routes) => {
+    const { ssrContext } = useNuxtApp()
+    const subdomain = useSubdomain()
+
+    if (ssrContext?.event.context.subdomain) subdomain.value = ssrContext?.event.context.subdomain?.toLowerCase()
+
+    const address = useArtistScope()
+
+    if (address) {
+      const normalizedRoutes = _routes
+        .map((i) => ({
+          ...i,
+          path: i.path === '/:id()' ? i.path.replace('/:id()', '/') : i.path.replace('/:id()/', '/'),
+        }))
+        .filter(r => r.name !== 'index')
+
+      return normalizedRoutes
+    }
+
+    return _routes
+  },
+} satisfies RouterConfig

package/app/utils/abis.ts

@@ -0,0 +1,77 @@
+import { parseAbi } from 'viem'
+
+export const FACTORY_ABI = parseAbi([
+  'error ERC1167FailedCreateClone()',
+  'error OwnableInvalidOwner(address owner)',
+  'error OwnableUnauthorizedAccount(address account)',
+  'event Created(address indexed ownerAddress, address contractAddress)',
+  'event OwnershipTransferStarted(address indexed previousOwner, address indexed newOwner)',
+  'event OwnershipTransferred(address indexed previousOwner, address indexed newOwner)',
+  'function acceptOwnership()',
+  'function clone(string name, string symbol, string description, bytes[] image) returns (address)',
+  'function create(string name, string symbol, string description, bytes[] image) returns (address)',
+  'function getCreatorCollections(address creator) view returns (address[])',
+  'function initialize(address mint, address renderer)',
+  'function owner() view returns (address)',
+  'function pendingOwner() view returns (address)',
+  'function renounceOwnership()',
+  'function transferOwnership(address newOwner)',
+  'function version() pure returns (uint256)'
+])
+
+
+export const MINT_ABI = parseAbi([
+  'error ERC1155InsufficientBalance(address sender, uint256 balance, uint256 needed, uint256 tokenId)',
+  'error ERC1155InvalidApprover(address approver)',
+  'error ERC1155InvalidArrayLength(uint256 idsLength, uint256 valuesLength)',
+  'error ERC1155InvalidOperator(address operator)',
+  'error ERC1155InvalidReceiver(address receiver)',
+  'error ERC1155InvalidSender(address sender)',
+  'error ERC1155MissingApprovalForAll(address operator, address owner)',
+  'error Initialized()',
+  'error MintClosed()',
+  'error MintPriceNotMet()',
+  'error NonExistentRenderer()',
+  'error NonExistentToken()',
+  'error OwnableInvalidOwner(address owner)',
+  'error OwnableUnauthorizedAccount(address account)',
+  'error TokenAlreadyMinted()',
+  'event ApprovalForAll(address indexed account, address indexed operator, bool approved)',
+  'event NewMint(uint256 indexed tokenId, uint256 unitPrice, uint256 amount, address minter)',
+  'event NewRenderer(address indexed renderer, uint256 indexed index)',
+  'event OwnershipTransferStarted(address indexed previousOwner, address indexed newOwner)',
+  'event OwnershipTransferred(address indexed previousOwner, address indexed newOwner)',
+  'event TransferBatch(address indexed operator, address indexed from, address indexed to, uint256[] ids, uint256[] values)',
+  'event TransferSingle(address indexed operator, address indexed from, address indexed to, uint256 id, uint256 value)',
+  'event URI(string value, uint256 indexed id)',
+  'event Withdrawal(uint256 amount)',
+  'function acceptOwnership()',
+  'function artifact(uint256 tokenId) view returns (bytes content)',
+  'function balanceOf(address account, uint256 id) view returns (uint256)',
+  'function balanceOfBatch(address[] accounts, uint256[] ids) view returns (uint256[])',
+  'function burn(address account, uint256 tokenId, uint256 amount)',
+  'function contractURI() view returns (string)',
+  'function create(string tokenName, string tokenDescription, bytes[] tokenArtifact, uint32 tokenRenderer, uint192 tokenData)',
+  'function init(string contractName, string contractSymbol, string contractDescription, bytes[] contractImage, address renderer, address owner)',
+  'function initBlock() view returns (uint256)',
+  'function isApprovedForAll(address account, address operator) view returns (bool)',
+  'function latestTokenId() view returns (uint256)',
+  'function metadata() view returns (string name, string symbol, string description)',
+  'function mint(uint256 tokenId, uint256 amount) payable',
+  'function mintOpenUntil(uint256 tokenId) view returns (uint256)',
+  'function owner() view returns (address)',
+  'function pendingOwner() view returns (address)',
+  'function prepareArtifact(uint256 tokenId, bytes[] tokenArtifact, bool clear)',
+  'function registerRenderer(address renderer) returns (uint256)',
+  'function renderers(uint256) view returns (address)',
+  'function renounceOwnership()',
+  'function safeBatchTransferFrom(address from, address to, uint256[] ids, uint256[] values, bytes data)',
+  'function safeTransferFrom(address from, address to, uint256 id, uint256 value, bytes data)',
+  'function setApprovalForAll(address operator, bool approved)',
+  'function supportsInterface(bytes4 interfaceId) view returns (bool)',
+  'function tokens(uint256) view returns (string name, string description, uint32 renderer, uint32 blocks, uint192 data)',
+  'function transferOwnership(address newOwner)',
+  'function uri(uint256 tokenId) view returns (string)',
+  'function version() view returns (uint256)',
+  'function withdraw()'
+])

package/app/utils/arrays.ts

@@ -0,0 +1 @@
+export { chunkArray } from '@visualizevalue/mint-utils'

package/app/utils/artifact.ts

@@ -0,0 +1,21 @@
+export { toByteArray } from '@visualizevalue/mint-utils'
+
+export const imageFileToDataUri = (file: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+
+    reader.onload = (event) => {
+      if (event.target && typeof event.target.result === 'string') {
+        resolve(event.target.result)
+      } else {
+        reject(new Error('Failed to convert image to data URI'))
+      }
+    }
+
+    reader.onerror = (error) => {
+      reject(error)
+    }
+
+    reader.readAsDataURL(file)
+  })
+}

package/app/utils/breakpoints.ts

@@ -0,0 +1,11 @@
+import { useBreakpoints as useBreakpointsCore } from '@vueuse/core'
+
+export const breakpointConfig = {
+  xs: 431,
+  sm: 719,
+  md: 1023,
+}
+
+export const useBreakpoints = () => {
+  return useBreakpointsCore(breakpointConfig)
+}

package/app/utils/dates.ts

@@ -0,0 +1,23 @@
+import { DateTime } from 'luxon'
+
+export const formatDate = (date: string) => {
+  return DateTime.fromISO(date)
+    .setLocale('en')
+    .toLocaleString(DateTime.DATE_MED)
+}
+
+export const formatDateTime = (date: string) => {
+  return DateTime.fromISO(date).setLocale('en-US').toLocaleString({ year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric' })
+}
+
+export const formatTime = (date: string) => {
+  return DateTime.fromISO(date).setLocale('en-US').toLocaleString({ hour: 'numeric', minute: 'numeric' })
+}
+
+export const timeAgo = (date: string) => {
+  const parsed = DateTime.fromISO(date)
+
+  return DateTime.now().diff(parsed).as('days') > 2
+    ? formatDate(date)
+    : parsed.toRelative({ style: 'short', locale: 'us' })
+}

package/app/utils/format.ts

@@ -0,0 +1,60 @@
+import { formatEther, formatGwei } from 'viem'
+
+export const formatNumber = (i: number, digits?: number) => i?.toLocaleString('en-US', { maximumFractionDigits: digits })
+
+export const toFloat = (number: string, digits: number = 2) => parseFloat(number).toFixed(digits)
+
+export const roundNumber = (number: string) => parseInt(Math.round(parseFloat(number)).toString())
+
+export const shortString = (str: string, max: number = 40, length: number = 10) => str?.length > max
+  ? str.substring(0, length) + '...' : str
+
+export const shortAddress = (address: string, length: number = 3) => address.substring(0, length + 2) +
+  '...' +
+  address.substring(address.length - length)
+
+export const customGweiFormat = (price: bigint, digits?: number) => price > 20000000000n
+  ? formatNumber(roundNumber(formatGwei(price)), digits)
+  : formatNumber(parseFloat(formatGwei(price)), digits)
+
+export const customFormatEther = (value: bigint, digits: number = 4) => {
+  const format = value > 100_000_000_000_000n ? 'ETH' : 'GWEI'
+
+  const formatted = format === 'ETH'
+    ? formatNumber(parseFloat(formatEther(value)), digits)
+    : customGweiFormat(value)
+
+  return {
+    value: formatted,
+    format,
+  }
+}
+
+interface FormattedSize {
+  B: string
+  KB: string
+  MB: string
+}
+
+export const formatBytesObject = (bytes: number): FormattedSize => {
+  const KB = bytes / 1024
+  const MB = KB / 1024
+
+  return {
+    B: bytes.toLocaleString('en-US'),
+    KB: KB.toLocaleString('en-US', { maximumFractionDigits: 2 }),
+    MB: MB.toLocaleString('en-US', { maximumFractionDigits: 2 }),
+  }
+}
+
+export const formatBytes = (bytes: number): string => {
+  const formatted = formatBytesObject(bytes)
+
+  if (bytes < 1024) {
+    return `${formatted.B} B`
+  } else if (bytes < 1024 * 1024) {
+    return `${formatted.KB} KB`
+  } else {
+    return `${formatted.MB} MB`
+  }
+}