@visualizevalue/mint-app-base 0.1.32 → 0.1.34

package/README.md

@@ -1,13 +1,21 @@
 # Mint App
 
-This application is built with VueJS and Nuxt; two beautiful frameworks for building web based interfaces. Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+This application interacts with the "Mint" Factory + Collection contracts.
+It enables artists to mint and sell their art on Ethereum mainnet
+while maintaining full control over the contracts and with all freedom
+to customize the application to their liking.
+
+This application is built with VueJS and Nuxt;
+two beautiful frameworks for building web based interfaces.
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction)
+to learn more.
 
 ## Setup
 
 Make sure to install the dependencies:
 
 ```bash
-yarn install
+pnpm install
 ```
 
 ## Development Server
@@ -15,10 +23,10 @@ yarn install
 Start the development server on `http://mint.test:1618`:
 
 ```bash
-yarn dev
+pnpm dev
 ```
 
 ## To-Do's
 
-- [ ] Refactor AppHeader titles (breadcrumb). This is quite hacky right now.
+- [ ] Refactor AppHeader titles (breadcrumb).
 

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.32",
+  "version": "0.1.34",
   "type": "module",
   "main": "./nuxt.config.ts",
   "dependencies": {

package/pages/index.vue

@@ -24,6 +24,10 @@ useMetaData({
   title: config.public.title,
   description: config.public.description,
 })
+
+definePageMeta({
+  middleware: ['redirect-user-scope']
+})
 </script>
 
 <style scoped>

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'