@visualizevalue/mint-app-base 0.0.1 → 0.0.4

package/.env.example

@@ -18,6 +18,9 @@ NUXT_PUBLIC_CREATOR_ADDRESS=0xc8f8e2F59Dd95fF67c3d39109ecA2e2A017D4c8a
 # =========================
 NUXT_PUBLIC_BLOCK_EXPLORER=https://etherscan.io
 NUXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=
+NUXT_PUBLIC_RPC1=
+NUXT_PUBLIC_RPC2=
+NUXT_PUBLIC_RPC3=
 
 # =========================
 #         ONCHAIN

package/app/assets/styles/index.css

@@ -1,4 +1,5 @@
 @import "./variables.css";
+@import "./theme.css";
 @import "./normalize.css";
 @import "./base.css";
 @import "./text.css";

package/app/assets/styles/theme.css

@@ -0,0 +1,4 @@
+:root {
+  --card-border: var(--border);
+  --card-border-radius: var(--border-radius);
+}

package/app/assets/styles/variables.css

@@ -30,25 +30,25 @@
   --black-semi:    rgba(0, 0, 0, 0.7);
 
   /* COLORS */
-  --red: #EF4444;
+  --red:   #EF4444;
   --green: #94E337;
 
   /* PRESET COLORS */
-  --error: var(--red);
+  --error:   var(--red);
   --success: var(--green);
 
   /* SIZES */
-  --100vh: 100dvh;
-  --size-0: 0.125rem;
-  --size-1: 0.25rem;
-  --size-2: 0.5rem;
-  --size-3: 0.75rem;
-  --size-4: 1rem;
-  --size-5: 1.25rem;
-  --size-6: 1.5rem;
-  --size-7: 2rem;
-  --size-8: 3rem;
-  --size-9: 4.5rem;
+  --100vh:   100dvh;
+  --size-0:  0.125rem;
+  --size-1:  0.25rem;
+  --size-2:  0.5rem;
+  --size-3:  0.75rem;
+  --size-4:  1rem;
+  --size-5:  1.25rem;
+  --size-6:  1.5rem;
+  --size-7:  2rem;
+  --size-8:  3rem;
+  --size-9:  4.5rem;
   --size-10: 6rem;
 
   --spacer-xs: var(--size-0);
@@ -107,16 +107,13 @@
   --border-color-dark: var(--gray-z-1);
   --border: 1px solid var(--border-color);
   --border-dark: 1px solid var(--border-color-dark);
+  --border-shadow: 0 0 0 1px var(--border-color);
 
   /* SHADOWS */
   --shadow:
     0 var(--size-0) var(--size-2) var(--gray-z-1-semi),
     0 var(--size-2) var(--size-7) calc(-1 * var(--size-5)) var(--gray-z-3-semi);
 
-  --shadow-xl:
-    0 var(--size-3) var(--size-8) var(--gray-z-3-semi),
-    0 var(--size-8) var(--size-6) calc(-1 * var(--size-8)) var(--gray-z-6-semi);
-
   /* BACKGROUNDS */
   --blur: blur(var(--size-1));
 }
@@ -193,3 +190,4 @@
     --font-sm: calc(var(--size-3) + var(--size-0));
   }
 }
+

package/app/components/Collection/Intro.vue

@@ -1,5 +1,5 @@
 <template>
-  <header>
+  <header class="collection-intro">
     <figure v-if="collection.image">
       <Image :src="collection.image" :alt="collection.name" />
     </figure>
@@ -49,7 +49,7 @@ const ownedByMe = useIsMeCheck(collection.owner)
 </script>
 
 <style scoped>
-header {
+header.collection-intro {
   display: grid;
   gap: var(--spacer);
 

package/app/components/Collection/OverviewCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <article>
+  <article class="collection-overview-card">
     <Image v-if="collection.image" :src="collection.image" :alt="collection.name" />
     <div class="text">
       <div>
@@ -27,11 +27,12 @@ const shortDescription = computed(() => shortString(collection.description, 40,
 </script>
 
 <style scoped>
-article {
+article.collection-overview-card {
   display: grid;
   padding: var(--spacer);
   gap: var(--spacer);
   transition: all var(--speed);
+  border: var(--card-border);
 
   &:has(> a:--highlight) {
     background: var(--gray-z-0);

package/app/components/Image.client.vue

@@ -68,9 +68,8 @@ article.image {
   padding-bottom: 100%;
   display: flex;
 
-  .bordered {
-    border-radius: var(--border-radius);
-    border: 1px solid var(--border-color);
+  &.bordered {
+    box-shadow: var(--border-shadow);
   }
 
   .loader {

package/app/components/Token/Detail.client.vue

@@ -1,8 +1,8 @@
 <template>
-  <article class="token">
+  <article class="token-detail">
     <div class="artifact">
-      <div :class="{ shaded }">
-        <Image :src="token.artifact" :alt="token.name" class="borderless" />
+      <div>
+        <Image :src="token.artifact" :alt="token.name" />
       </div>
     </div>
 
@@ -64,18 +64,15 @@ const { token } = defineProps<{
   token: Token
 }>()
 
-const breakpoints = useBreakpoints()
-const shaded = computed(() => breakpoints.greater('sm').value && ! isDark.value)
-
 const store = useOnchainStore()
 const collection = computed(() => store.collection(token.collection))
 
 const mintCount = ref('1')
-const ownedBalance = computed(() => store.tokenBalance(collection.value.address, token.tokenId))
+const ownedBalance = computed(() => collection.value && store.tokenBalance(collection.value.address, token.tokenId))
 </script>
 
 <style scoped>
-  .token {
+  .token-detail {
     position: relative;
     container-type: inline-size;
 
@@ -116,7 +113,7 @@ const ownedBalance = computed(() => store.tokenBalance(collection.value.address,
     @media (--lg) {
       --padding-top: var(--spacer-xl);
       --padding-x: var(--spacer-xl);
-      --padding-bottom: calc(var(--spacer-xl) + var(--spacer-lg));
+      --padding-bottom: calc(var(--spacer-xl) + var(--spacer));
     }
 
     height: var(--height);
@@ -139,13 +136,8 @@ const ownedBalance = computed(() => store.tokenBalance(collection.value.address,
       @media (--md) {
         border-bottom: none !important;
       }
-
-      &.shaded {
-        box-shadow: var(--shadow-xl);
-        transform: translateY(calc(-1 * var(--size-2))) scale(1.001);
-      }
     }
- }
+  }
 
   .details {
 

package/app/components/Token/OverviewCard.vue

@@ -12,17 +12,17 @@
       transactionFlowConfig
     }"
   >
-    <article class="token">
+    <article class="token-overview-card">
       <div class="content">
         <header>
           <h1>
             <span>{{ token.name }} <span class="muted">#{{ token.tokenId }}</span></span>
-            <span v-if="token.description">{{ shortString(token.description, 40, 30) }}</span>
+            <span v-if="token.description">{{ shortString(token.description, 60, 30) }}</span>
           </h1>
           <p v-if="mintOpen" class="muted">Closes in {{ blocksRemaining }} {{ pluralize('block', Number(blocksRemaining))}}</p>
           <p v-else class="muted">Closed at block {{ token.untilBlock }}</p>
         </header>
-        <Image :src="token.artifact" :alt="token.name" />
+        <Image :src="token.artifact" :alt="token.name" class="bordered" />
         <CardLink :to="{
           name: 'id-collection-tokenId',
           params: { id: collection.owner, collection: token.collection, tokenId: `${token.tokenId}` }
@@ -60,17 +60,16 @@ const ownedBalance = computed(() => store.tokenBalance(collection.value.address,
 </script>
 
 <style scoped>
-  .token,
-  .token > .content {
+  .token-overview-card,
+  .token-overview-card > .content {
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: var(--spacer);
   }
 
-  .token {
+  .token-overview-card {
     padding: var(--spacer-xl) var(--spacer) !important;
-    border: 0 !important;
 
     /* Tokens should be at min the screen height. */
     &:not(:first-of-type) {
@@ -88,7 +87,7 @@ const ownedBalance = computed(() => store.tokenBalance(collection.value.address,
     }
   }
 
-  .token > .content {
+  .token-overview-card > .content {
     display: flex;
     flex-direction: column;
     justify-content: center;

package/app/composables/priceFeed.ts

@@ -1,4 +1,4 @@
-import { getPublicClient } from '@wagmi/core'
+import { readContract } from '@wagmi/core'
 
 const CHAINLINK_PRICE_FEED_ABI = [
   {
@@ -45,17 +45,17 @@ export const usePriceFeedStore = () => {
 
     actions: {
       async fetchEthUsdPrice () {
-        const client = getPublicClient($wagmi, { chainId: 1 })
 
         if (nowInSeconds() - this.lastUpdated < 3_600) {
           return this.ethUSD
         }
 
         try {
-          const [, answer] = await client.readContract({
+          const [, answer] = await readContract($wagmi, {
             address: PRICE_FEED_ADDRESS,
             abi: CHAINLINK_PRICE_FEED_ABI,
-            functionName: 'latestRoundData'
+            functionName: 'latestRoundData',
+            chainId: 1,
           })
 
           this.ethUSDRaw = answer

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

@@ -2,7 +2,7 @@
   <Authenticated>
     <PageFrame :title="breadcrumb" class="inset wide" id="mint-token">
       <article class="preview">
-        <Image v-if="image" :src="image" alt="Preview" />
+        <Image v-if="image" :src="image" alt="Preview" class="bordered" />
         <VisualImagePreview v-else />
         <h1 :class="{ 'muted-light': !name }">{{ name || 'Token' }}</h1>
         <p :class="{ 'muted-light': !description }">
@@ -90,10 +90,11 @@ 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
   }
-  imageSize.value = file.size
 }
 watch(ipfsCid, () => {
   const validated = validateCID(ipfsCid.value)
@@ -115,68 +116,72 @@ const mint = async () => {
 
   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
+  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
+      }
     }
 
-    // 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)
   }
 
-  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
 }
 
@@ -227,12 +232,14 @@ useMetaData({
 
   .image,
   svg {
-    border-radius: var(--border-radius);
-    border: var(--border);
     margin-bottom: var(--spacer-sm);
     width: 100%;
   }
 
+  svg {
+    box-shadow: var(--border-shadow);
+  }
+
   h1 {
     display: flex;
     gap: var(--spacer-sm);

package/app/plugins/2.wagmi.ts

@@ -1,18 +1,22 @@
 // import { custom, fallback } from 'viem'
 import { VueQueryPlugin } from '@tanstack/vue-query'
-import { http, cookieStorage, createConfig, createStorage, WagmiPlugin } from '@wagmi/vue'
+import { http, cookieStorage, createConfig, createStorage, WagmiPlugin, fallback, custom } 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()
+import type { CustomTransport, Transport } from 'viem'
 
 export default defineNuxtPlugin(nuxtApp => {
   const title = nuxtApp.$config.public.title || 'Mint'
 
+  const transportDefinitions: CustomTransport|Transport[] = []
+
+  if (nuxtApp.$config.public.rpc1) transportDefinitions.push(http(nuxtApp.$config.public.rpc1 as string))
+  if (nuxtApp.$config.public.rpc2) transportDefinitions.push(http(nuxtApp.$config.public.rpc2 as string))
+  if (nuxtApp.$config.public.rpc3) transportDefinitions.push(http(nuxtApp.$config.public.rpc3 as string))
+  transportDefinitions.push(http())
+
+  const transports = fallback(transportDefinitions)
+
   const wagmiConfig = createConfig({
     chains: [mainnet, sepolia, holesky, localhost],
     batch: {

package/nuxt.config.ts

@@ -18,6 +18,9 @@ export default defineNuxtConfig({
       chainId: 1337,
       walletConnectProjectId: '',
       platformUrl: 'https://networked.art',
+      rpc1: '',
+      rpc2: '',
+      rpc3: '',
     }
   },
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visualizevalue/mint-app-base",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "type": "module",
   "main": "./nuxt.config.ts",
   "dependencies": {
@@ -10,6 +10,8 @@
     "@tanstack/vue-query": ">=5.45.0",
     "@visualizevalue/mint-utils": "npm:@visualizevalue/mint-utils@^0.0.1",
     "@vueuse/components": "^10.11.0",
+    "@vueuse/core": "^11.0.3",
+    "@vueuse/nuxt": "^11.0.3",
     "@wagmi/vue": "^0.0.40",
     "buffer": "^6.0.3",
     "eventemitter3": "^5.0.1",
@@ -27,8 +29,6 @@
   "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",