@visualizevalue/mint-app-base 0.1.33 → 0.1.35

package/assets/styles/prose.css

@@ -12,6 +12,7 @@
   > table {
     margin: var(--spacer) 0;
 
+    th,
     td {
       padding: calc(var(--spacer-sm) - var(--spacer-xs)) var(--spacer-sm);
       border: var(--border);

package/components/MintGasPrice.client.vue

@@ -1,9 +1,11 @@
 <template>
-  <span>
-    {{ displayPrice.value }} {{ displayPrice.format }}
+  <slot v-bind="{ displayPrice, dollarPrice }">
+    <span>
+      {{ displayPrice.value }} {{ displayPrice.format }}
 
-    <span class="usd">(${{ dollarPrice }})</span>
-  </span>
+      <span class="usd">(${{ dollarPrice }})</span>
+    </span>
+  </slot>
 </template>
 
 <script setup>

package/components/MintGasPricePopover.client.vue

@@ -5,7 +5,7 @@
       <div class="prose">
         <h1>Mint Pricing</h1>
         <p>Artifacts are priced based on the Ethereum network fees at the time of collecting.</p>
-        <p>Network fees (Gas fees) are an essential component of of securing and running decentralized blockchains.</p>
+        <p>Network fees (Gas fees) are an essential component of securing and running decentralized blockchains.</p>
         <p>
           The cost to store and secure the object on the network is mirrored as compensation to the artist,
           creating a direct link between network value and creator reward.
@@ -38,12 +38,70 @@
             </tr>
           </tbody>
         </table>
+        <p>
+          Mints of more than one don't increase the Ethereum fee, resulting in higher
+          artist compensation.
+        </p>
+        <table>
+          <thead>
+            <tr>
+              <th>Amount</th>
+              <th>Ethereum fee</th>
+              <th>Artist <abbr title="Artist Compensation">comp.</abbr></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <input
+                  type="number"
+                  min="1"
+                  :value="amount"
+                  @input="amount = $event.target.value"
+                  @focus="animate = false"
+                  :class="{ animate }"
+                />
+              </td>
+              <td>
+                {{ ethPercentage }}%
+                <MintGasPrice v-slot="{ dollarPrice }" :mint-count="1">
+                  <span>(${{ dollarPrice }})</span>
+                </MintGasPrice>
+              </td>
+              <td>
+                {{ artistPercentage }}%
+                <MintGasPrice v-slot="{ dollarPrice }" :mint-count="amount">
+                  <span>(${{ dollarPrice }})</span>
+                </MintGasPrice>
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     </template>
   </Popover>
 </template>
 
 <script setup>
+const amount = ref('2')
+const ethPercentage = computed(() => (100 / (parseInt(amount.value) + 1)).toFixed(2))
+const artistPercentage = computed(() => (100 - ethPercentage.value).toFixed(2))
+
+const animate = ref(true)
+const runAnimation = async () => {
+  await delay(3000)
+  if (! animate.value) return
+  const amounts = [1, 2, 5, 10, 20, 50, 100, 200, 500, 1000]
+  const mints = takeRandom(amounts)
+
+  amount.value = mints
+
+  runAnimation()
+}
+
+onMounted(() => {
+  runAnimation()
+})
 </script>
 
 <style scoped>
@@ -58,6 +116,28 @@
           white-space: nowrap;
         }
       }
+
+      &:has(input) {
+        padding: 0;
+        width: 33%;
+      }
+
+      input {
+        border-radius: 0;
+        border: 0;
+
+        &.animate:not(:focus) {
+          animation: highlight var(--speed-slow) infinite alternate;
+        }
+      }
+    }
+
+    thead {
+      th {
+        text-align: left;
+        white-space: nowrap;
+        font-weight: var(--font-weight);
+      }
     }
 
     :deep(.usd) {
@@ -65,5 +145,14 @@
       margin-left: auto;
     }
   }
+
+  @keyframes highlight {
+    from {
+      background: var(--button-background);
+    }
+    to {
+      background: var(--button-background-highlight);
+    }
+  }
 </style>
 

package/composables/priceFeed.ts

@@ -45,7 +45,6 @@ export const usePriceFeedStore = () => {
 
     actions: {
       async fetchEthUsdPrice () {
-
         if (nowInSeconds() - this.lastUpdated < 3_600) {
           return this.ethUSD
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visualizevalue/mint-app-base",
-  "version": "0.1.33",
+  "version": "0.1.35",
   "type": "module",
   "main": "./nuxt.config.ts",
   "dependencies": {
@@ -9,7 +9,6 @@
     "@pinia/nuxt": "^0.5.3",
     "@tanstack/vue-query": ">=5.45.0",
     "@types/node": "^22.5.4",
-    "@visualizevalue/mint-utils": "npm:@visualizevalue/mint-utils@^0.0.1",
     "@vueuse/components": "^10.11.0",
     "@vueuse/core": "^11.1.0",
     "@wagmi/core": "^2.13.5",
@@ -22,7 +21,8 @@
     "viem": "2.x",
     "vite": "^5.4.3",
     "vite-plugin-node-polyfills": "^0.17.0",
-    "vue-virtual-scroller": "^2.0.0-beta.8"
+    "vue-virtual-scroller": "^2.0.0-beta.8",
+    "@visualizevalue/mint-utils": "^0.0.2"
   },
   "devDependencies": {
     "nuxt": "^3.13.2",

package/server/middleware/subdomain.ts

@@ -4,8 +4,6 @@ export default defineEventHandler(({ node, context }) => {
   const sub = hostname.split('.')[0]?.toLowerCase() as string
   const main = process.env.NUXT_PUBLIC_DOMAIN?.split('.')[0] || `localhost`
 
-  console.log('sub, main', sub, main)
-
   if (sub !== main) {
     context.subdomain = sub
   }

package/utils/arrays.ts

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