@visualizevalue/mint-app-base 0.0.1

package/app/utils/images.ts

@@ -0,0 +1,27 @@
+export type ImageVersions = {
+  xs?: boolean, // 215
+  sm?: boolean, // 512
+  md?: boolean, // 1024
+  lg?: boolean, // 2048
+}
+
+export type Image = {
+  id: string,
+  versions: ImageVersions,
+  cdn: string,
+  path: string,
+  type: string,
+  aspectRatio?: number,
+}
+
+const CDN_BASE = `cdn.evverydays.com`
+
+export const imageURI = (image: Image, version?: keyof ImageVersions) => {
+  if (! image) return null
+
+  const name = (version && image.versions[version])
+    ? `${image.id}@${version}.webp`
+    : `${image.id}.${image.type}`
+
+  return `https://${image.cdn}.${CDN_BASE}/${image.path}/${name}`
+}

package/app/utils/ipfs.ts

@@ -0,0 +1,13 @@
+import { CID } from 'multiformats/cid'
+
+export const validateCID = (cid: string): string|false => {
+  try {
+    const parsed = CID.parse(cid)
+
+    return parsed.toString()
+  } catch (e) {
+    console.warn(`Invalid CID`)
+
+    return false
+  }
+}

package/app/utils/lowercaseRouteParam.ts

@@ -0,0 +1,10 @@
+import type { RouteLocationNormalizedGeneric } from 'vue-router'
+
+export const lowercaseRouteParam = (to: RouteLocationNormalizedGeneric, param: string) => {
+  if (to.params[param] && typeof to.params[param] === 'string') {
+    const before = `${to.params[param]}`
+    to.params[param] = to.params[param].toLowerCase()
+
+    if (before !== to.params[param]) return navigateTo(to, { redirectCode: 301 })
+  }
+}

package/app/utils/serializer.ts

@@ -0,0 +1,18 @@
+// Custom replacer function for JSON.stringify
+const replacer = (_: string, value: any) => {
+  if (typeof value === 'bigint') {
+    return value.toString() + 'n'
+  }
+  return value
+}
+
+// Custom reviver function for JSON.parse
+const reviver = (_: string, value: any) => {
+  if (typeof value === 'string' && /^\d+n$/.test(value)) {
+    return BigInt(value.slice(0, -1))
+  }
+  return value
+}
+
+export const stringifyJSON = (obj: any): string => JSON.stringify(obj, replacer)
+export const parseJSON = (json: string): any => JSON.parse(json, reviver)

package/app/utils/strings.ts

@@ -0,0 +1,30 @@
+export const pluralize = (word: string, count: number): string => {
+  if (count === 1) return word
+
+  // Basic rules for pluralization
+  if (word.endsWith('y')) {
+    return word.slice(0, -1) + 'ies'
+  } else if (word.endsWith('s') || word.endsWith('ch') || word.endsWith('sh') || word.endsWith('x')) {
+    return word + 'es'
+  } else {
+    return word + 's'
+  }
+}
+
+export const cleanText = (str: string) => str?.replace(/<[^>]*>?/gm, '').trim() || ''
+
+export const shortenedCleanText = (str: string, length: number = 80) => {
+  const txt = cleanText(str)
+
+  const nextSpaceIndex = txt.indexOf(' ', length)
+
+  return txt.length > length && nextSpaceIndex > 0 ? txt.substring(0, nextSpaceIndex) + '...' : txt
+}
+
+const urlPattern = /\b((http|https):\/\/)?(www\.)?([a-zA-Z0-9\-\.]+)\.([a-zA-Z]{2,})(\/[^\s]*)?\b/g
+export const extractURLs = (str: string) => {
+  return {
+    text: str.replace(urlPattern, ''),
+    urls: str.match(urlPattern),
+  }
+}

package/app/utils/time.ts

@@ -0,0 +1,23 @@
+export const BLOCKS_PER_CACHE = 5n * 30n // 30 minutes (5 blocks each)
+export const BLOCKS_PER_HOUR = 300n // 5n * 60n * 24n (5 blocks/min * 60 min * 24 hours)
+export const BLOCKS_PER_DAY = 7200n // 300n * 24n (300 blocks per hour * 24 hours)
+
+export const delay = (ms: number): Promise<void> => new Promise(resolve => setTimeout(resolve, ms))
+
+export const blocksToSeconds = (blocks: bigint): number => Number(blocks * 12n)
+
+export const nowInSeconds = (): number => Math.floor(Date.now() / 1000)
+
+const now = ref(nowInSeconds())
+let nowInterval: NodeJS.Timeout
+export const useNow = () => {
+  onMounted(() => {
+    if (! nowInterval) {
+      nowInterval = setInterval(() => {
+        now.value = nowInSeconds()
+      }, 1000)
+    }
+  })
+
+  return now
+}

package/app/utils/types.ts

@@ -0,0 +1,62 @@
+import type { RouteLocationRaw } from 'vue-router'
+
+// =====================================================================
+// APP-LOGIC
+// =====================================================================
+export type BreadcrumbItem = string|{
+  to: RouteLocationRaw
+  text: string
+}
+export type Breadcrumbs = BreadcrumbItem[]
+
+// =====================================================================
+// DATA
+// =====================================================================
+export interface Artist {
+  address: `0x${string}`
+  ens?: string|null
+  avatar?: string|null
+  description?: string|null
+  url?: string|null
+  email?: string|null
+  twitter?: string|null
+  github?: string|null
+  collections: `0x${string}`[]
+  profileUpdatedAtBlock: bigint
+}
+
+export interface Collection {
+  address: `0x${string}`
+  owner: `0x${string}`
+  image: string
+  name: string
+  symbol: string
+  description: string
+  initBlock: bigint
+  latestTokenId: bigint
+  tokens: { [key: string]: Token }
+  balance: bigint
+}
+
+export interface Token {
+  collection: `0x${string}`
+  tokenId: bigint
+  name: string
+  description: string
+  artifact: string
+  untilBlock: bigint
+  mintsFetchedUntilBlock: bigint
+  mintsBackfilledUntilBlock: bigint
+  mints: MintEvent[]
+}
+
+export interface MintEvent {
+  tokenId: bigint
+  address: `0x${string}`
+  block: bigint
+  logIndex: number
+  tx: string
+  unitPrice: bigint
+  amount: bigint
+  price: bigint
+}

package/app/utils/urls.ts

@@ -0,0 +1,43 @@
+export const ipfsToHttpURI = (url: string, gateway: string = 'https://ipfs.io/ipfs/') => url.replace('ipfs://', gateway)
+
+export const validateURI = (url: string) => {
+  if (! url || ! url.length) return false
+
+  let validated = url.trim()
+
+  // Normalize protocol
+  if (! validated.startsWith('https://')) validated = `https://${validated}`
+  if (! validated.startsWith('http')) validated = `http://${validated}`
+
+  // Check url validity
+  try {
+    new URL(validated)
+  } catch (e) {
+    return false
+  }
+
+  return validated
+}
+
+export const getMainDomain = (url: string) => {
+  const regex = /^(?:https?:\/\/)?(?:www\.)?([^\/\n]+)/i
+  const match = url.match(regex)
+  return match ? match[1] : null
+}
+
+export const getFirstSubpath = (url: string) => {
+  try {
+    // This will throw an error if the URL is not valid
+    const parsedUrl = new URL(url)
+    const pathname = parsedUrl.pathname
+
+    // Remove the leading slash and split by slash to get path segments
+    const pathSegments = pathname.replace(/^\//, '').split('/')
+
+    // Return the first path segment, if there is one
+    return pathSegments.length > 0 ? pathSegments[0] : null
+  } catch (e) {
+    // The URL is invalid
+    return null
+  }
+}

package/nuxt.config.ts

@@ -0,0 +1,130 @@
+import { fileURLToPath } from 'url'
+import { dirname, join } from 'path'
+
+const currentDir = dirname(fileURLToPath(import.meta.url))
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  devtools: { enabled: true },
+  ssr: process.env.NUXT_SSR !== 'false',
+
+  runtimeConfig: {
+    public: {
+      title: 'Mint',
+      description: 'To mint is a human right.',
+      blockExplorer: 'https://etherscan.io',
+      creatorAddress: '',
+      factoryAddress: '',
+      chainId: 1337,
+      walletConnectProjectId: '',
+      platformUrl: 'https://networked.art',
+    }
+  },
+
+  app: {
+    head: {
+      viewport: 'width=device-width, initial-scale=1, viewport-fit=cover',
+      htmlAttrs: { lang: 'en' },
+      title: process.env.NUXT_PUBLIC_TITLE,
+      meta: [
+        { name: 'twitter:card', content: 'summary_large_image' },
+        { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
+        { name: 'theme-color', content: 'black' },
+        { name: 'theme-color', media: '(prefers-color-scheme: light)', content: 'white' },
+        { name: 'theme-color', media: '(prefers-color-scheme: dark)', content: 'black' },
+      ],
+      link: [
+        { rel: 'icon', href: '/icon.svg', type: 'image/svg+xml' },
+      ]
+    }
+  },
+
+  css: [
+    join(currentDir, './app/assets/styles/index.css'),
+  ],
+
+  postcss: {
+    plugins: {
+      '@csstools/postcss-global-data': {
+        files: [
+          join(currentDir, './app/assets/styles/custom-selectors.css'),
+          join(currentDir, './app/assets/styles/custom-media.css'),
+        ]
+      },
+      'postcss-nested': {},
+      'postcss-custom-selectors': {},
+      'postcss-custom-media': {},
+      'postcss-preset-env': {
+        stage: 3,
+        features: {},
+      },
+      'autoprefixer': {},
+    },
+  },
+
+  modules: [
+    '@pinia/nuxt',
+    '@pinia-plugin-persistedstate/nuxt',
+    '@vueuse/nuxt',
+  ],
+
+  devServer: {
+    port: 1618,
+    host: process.env.NUXT_PUBLIC_DOMAIN || 'localhost',
+  },
+
+  vite: {
+    optimizeDeps: {
+      force: true,
+      include: [
+        '@wagmi/core > eventemitter3'
+      ],
+    },
+  },
+
+  nitro: {
+    preset: 'node-cluster',
+    esbuild: {
+      options: {
+        target: 'esnext'
+      }
+    },
+  },
+
+  imports: {
+    presets: [
+      {
+        from: '@wagmi/core',
+        imports: [
+          'readContract',
+          'waitForTransactionReceipt',
+          'writeContract',
+        ]
+      },
+      {
+        from: 'viem',
+        imports: [
+          'decodeEventLog',
+          'isAddress',
+          'getAddress',
+          'toBytes',
+          'toHex',
+          'getContract',
+          'encodeAbiParameters',
+          'parseAbiParameters',
+          'parseAbiParameter',
+        ]
+      }
+    ]
+  },
+
+  piniaPersistedstate: {
+    storage: 'localStorage'
+  },
+
+  future: {
+    compatibilityVersion: 4,
+  },
+
+  compatibilityDate: '2024-08-14',
+})

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@visualizevalue/mint-app-base",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./nuxt.config.ts",
+  "dependencies": {
+    "@csstools/postcss-global-data": "^2.1.1",
+    "@pinia-plugin-persistedstate/nuxt": "^1.2.1",
+    "@pinia/nuxt": "^0.5.3",
+    "@tanstack/vue-query": ">=5.45.0",
+    "@visualizevalue/mint-utils": "npm:@visualizevalue/mint-utils@^0.0.1",
+    "@vueuse/components": "^10.11.0",
+    "@wagmi/vue": "^0.0.40",
+    "buffer": "^6.0.3",
+    "eventemitter3": "^5.0.1",
+    "feather-icons": "^4.29.2",
+    "multiformats": "^13.2.2",
+    "postcss-custom-media": "^10.0.6",
+    "postcss-custom-selectors": "^7.1.10",
+    "postcss-nested": "^6.0.1",
+    "postcss-preset-env": "^9.5.13",
+    "viem": "2.x",
+    "vue-feather": "^2.0.0",
+    "vue-router": "^4.3.2",
+    "vue-virtual-scroller": "^2.0.0-beta.8"
+  },
+  "devDependencies": {
+    "@types/node": "^22.5.4",
+    "@vue/devtools-api": "^6.6.3",
+    "@vueuse/core": "^11.0.3",
+    "@vueuse/nuxt": "^11.0.3",
+    "eventemitter3": "^5.0.1",
+    "nuxt": "latest",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.3"
+  },
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev --port 1618",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  }
+}

package/public/example-contract-icon-original.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="64" height="64" fill="black"/>
+  <path d="M29.3984 34.2759C29.3984 35.7425 28.9263 36.9437 27.9821 37.8793L22.839 43H19.5593L14.4162 37.8793C13.4721 36.9437 13 35.7425 13 34.2759V21H16.8387V34.1241C16.8387 34.7563 17.0002 35.2368 17.3232 35.5655L21.2365 39.5862L25.0752 35.5655C25.3982 35.2368 25.5597 34.7563 25.5597 34.1241V21H29.3984V34.2759Z" fill="white"/>
+  <path d="M52 34.2759C52 35.7425 51.5279 36.9437 50.5838 37.8793L45.4407 43H42.161L37.0178 37.8793C36.0737 36.9437 35.6016 35.7425 35.6016 34.2759V21H39.4403V34.1241C39.4403 34.7563 39.6018 35.2368 39.9248 35.5655L43.8381 39.5862L47.6768 35.5655C47.9998 35.2368 48.1613 34.7563 48.1613 34.1241V21H52V34.2759Z" fill="white"/>
+</svg>

package/public/example-contract-icon.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="64" height="64" fill="#000"/>
+  <path d="m30 36-7 7h-3l-7-7v-15h4v13l4 4h1l4-4v-13h4v15z" fill="#fff"/>
+  <path d="m51 36-7 7h-3l-7-7v-15h4v13l4 4h1l4-4v-13h4v15z" fill="#fff"/>
+</svg>

package/public/icon.svg

@@ -0,0 +1,8 @@
+<svg width="140" height="140" viewBox="0 0 140 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="140" height="140" fill="#131313"/>
+<path d="M24.5 38V24.5H115.5V38V115.5H24.5V38Z" stroke="white" stroke-width="5"/>
+<path d="M24.5 38V24.5H115.5V38V115.5H24.5V38Z" stroke="white" stroke-width="5"/>
+<path d="M118 38H22" stroke="white" stroke-width="5"/>
+<path d="M92.9145 61.0682C92.9145 60.4578 93.3723 60 93.9827 60H97.0347C97.6452 60 98.103 60.4578 98.103 61.0682V81.6696C98.103 81.7714 98.103 81.924 98.0521 82.0766L97.4926 83.3991C97.3908 83.5517 97.34 83.6535 97.2382 83.7552L87.9803 93.0131C87.7768 93.2166 87.5225 93.3183 87.2173 93.3183H84.5722C84.3178 93.3183 84.0126 93.2166 83.8092 93.0131L74.5512 83.7552C74.4495 83.6535 74.3986 83.5517 74.3478 83.3991L73.7882 82.0766C73.7374 81.924 73.6865 81.7714 73.6865 81.6696V61.0682C73.6865 60.4578 74.1443 60 74.7547 60H77.8068C78.4172 60 78.875 60.4578 78.875 61.0682V80.2962C78.875 80.6014 79.0276 80.8557 79.1802 81.0592L85.1317 86.9599C85.5387 87.4177 86.2508 87.4177 86.6577 86.9599L92.6093 81.0592C92.8127 80.8557 92.9145 80.6014 92.9145 80.2962V61.0682Z" fill="white"/>
+<path d="M60.228 61.0682C60.228 60.4578 60.6858 60 61.2962 60H64.3483C64.9587 60 65.4165 60.4578 65.4165 61.0682V81.6696C65.4165 81.7714 65.4165 81.924 65.3656 82.0766L64.8061 83.3991C64.7043 83.5517 64.6535 83.6535 64.5517 83.7552L55.2938 93.0131C55.0903 93.2166 54.836 93.3183 54.5308 93.3183H51.8857C51.6313 93.3183 51.3261 93.2166 51.1227 93.0131L41.8648 83.7552C41.763 83.6535 41.7121 83.5517 41.6613 83.3991L41.1017 82.0766C41.0509 81.924 41 81.7714 41 81.6696V61.0682C41 60.4578 41.4578 60 42.0682 60H45.1203C45.7307 60 46.1885 60.4578 46.1885 61.0682V80.2962C46.1885 80.6014 46.3411 80.8557 46.4937 81.0592L52.4452 86.9599C52.8522 87.4177 53.5643 87.4177 53.9713 86.9599L59.9228 81.0592C60.1262 80.8557 60.228 80.6014 60.228 80.2962V61.0682Z" fill="white"/>
+</svg>

package/public/icons/check.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M15.36 3.88585C15.0088 3.30969 14.5152 2.83358 13.9268 2.50331C13.3383 2.17304 12.6748 1.99971 12 2C10.577 2 9.33 2.75494 8.64 3.88685C7.98396 3.72742 7.29792 3.73945 6.64787 3.92179C5.99782 4.10413 5.40562 4.45064 4.92823 4.928C4.45083 5.40536 4.10429 5.99751 3.92194 6.64751C3.73959 7.29751 3.72756 7.98349 3.887 8.63948C3.31061 8.99055 2.83426 9.48402 2.50379 10.0724C2.17331 10.6608 1.99982 11.3244 2 11.9992C2 13.4221 2.755 14.668 3.886 15.359C3.72655 16.0149 3.73859 16.7009 3.92094 17.3509C4.10329 18.0009 4.44983 18.5931 4.92723 19.0704C5.40462 19.5478 5.99682 19.8943 6.64687 20.0766C7.29692 20.259 7.98296 20.271 8.639 20.1116C9.1267 20.913 9.88486 21.5137 10.7766 21.8053C11.6684 22.0968 12.635 22.06 13.502 21.7015C14.2737 21.3815 14.9241 20.8252 15.36 20.1126C16.0161 20.2721 16.7023 20.2601 17.3525 20.0777C18.0026 19.8953 18.5949 19.5487 19.0723 19.0712C19.5498 18.5937 19.8963 18.0014 20.0785 17.3513C20.2608 16.7011 20.2727 16.015 20.113 15.359C20.6894 15.0079 21.1657 14.5144 21.4962 13.926C21.8267 13.3376 22.0002 12.6741 22 11.9992C22.0002 11.3244 21.8267 10.6608 21.4962 10.0724C21.1657 9.48402 20.6894 8.99055 20.113 8.63948C20.2723 7.98354 20.2601 7.29765 20.0776 6.64778C19.8951 5.99791 19.5485 5.40592 19.071 4.92877C18.594 4.45131 18.0022 4.10459 17.3525 3.92194C16.7027 3.7393 16.0169 3.72687 15.361 3.88585H15.36ZM11.402 15.5979L15.964 8.75447C16.53 7.90854 15.213 7.03061 14.648 7.87654L10.622 13.9191L9.251 12.5512C8.534 11.8292 7.415 12.9471 8.135 13.6671L10.305 15.8169C10.3913 15.8749 10.4883 15.9152 10.5903 15.9356C10.6923 15.9559 10.7973 15.9558 10.8993 15.9354C11.0013 15.9149 11.0982 15.8745 11.1845 15.8164C11.2708 15.7583 11.3447 15.6837 11.402 15.5969V15.5979Z" fill="white"></path>
+</svg>