@visualizevalue/mint-app-base 0.1.3 → 0.1.5

package/app/assets/styles/forms.css

@@ -5,6 +5,7 @@ textarea,
 select {
   width: 100%;
   font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size);
   font-weight: var(--ui-font-weight);
   text-transform: var(--ui-text-transform);
   transition: all var(--speed);
@@ -62,12 +63,6 @@ select {
   &::-ms-input-placeholder {
     color: var(--border-color-light);
   }
-
-  &.small {
-    min-height: 0;
-    font-size: var(--font-sm);
-    padding: calc(var(--size-1) + var(--size-0)) var(--size-3);
-  }
 }
 
 .form-item {

package/app/assets/styles/prose.css

@@ -20,7 +20,7 @@
 
   > * {
     margin: var(--spacer-sm) 0;
-    color: var(--muted);
+    color: var(--color);
 
     &:first-child {
       margin-top: 0;

package/app/assets/styles/variables/fonts.css

@@ -2,7 +2,6 @@
 
   --rem: 16px;
   --font-base: var(--rem);
-  --font-xs: calc(var(--font-base) * 0.8);
   --font-sm: calc(var(--font-base) * 0.8);
   --font-lg: calc(var(--font-base) * 1.2);
   --font-weight-light: 300;

package/app/assets/styles/variables/ui.css

@@ -1,17 +1,18 @@
 :root {
 
-  --ui-font-family: var(--font-family);
-  --ui-font-weight: var(--font-weight);
-  --ui-text-transform: var(--text-transform);
+  --ui-font-family:         var(--font-family);
+  --ui-font-size:           var(--font-base);
+  --ui-font-weight:         var(--font-weight);
+  --ui-text-transform:      var(--text-transform);
+  --ui-letter-spacing:      var(--letter-spacing);
+  --ui-line-height:         var(--line-height);
 
-  --ui-placeholder-color: var(--muted);
-  --ui-color: var(--primary);
-  --ui-color-visited: var(--primary);
-  --ui-letter-spacing: var(--letter-spacing);
-  --ui-line-height: var(--line-height);
+  --ui-color:               var(--primary);
+  --ui-placeholder-color:   var(--muted);
+  --ui-color-visited:       var(--primary);
 
-  --ui-padding-y: var(--spacer-sm);
-  --ui-padding-x: var(--spacer-sm);
+  --ui-padding-y:           var(--spacer-sm);
+  --ui-padding-x:           var(--spacer);
 
 }
 

package/app/components/AppHeader.vue

@@ -1,12 +1,18 @@
 <template>
-  <header>
+  <header class="app-header">
     <ClientOnly>
       <Breadcrumbs :items="breadcrumbs" />
 
       <MintGasPricePopover />
 
       <Connect v-if="! isConnected" />
-      <NuxtLink v-else :to="{ name: 'profile-address', params: { address: address?.toLowerCase() } }">
+      <NuxtLink v-else
+        :to="{
+          name: 'profile-address',
+          params: { address: address?.toLowerCase() }
+        }"
+        class="account"
+      >
         <Account :address="address" />
       </NuxtLink>
     </ClientOnly>
@@ -35,6 +41,16 @@ const breadcrumbs = computed(() => {
 })
 </script>
 
+<style>
+:root {
+  --app-header-font-family:      var(--ui-font-family);
+  --app-header-font-size:        var(--ui-font-size);
+  --app-header-font-weight:      var(--ui-font-weight);
+  --app-header-text-transform:   var(--ui-text-transform);
+  --app-header-letter-spacing:   var(--ui-letter-spacing);
+}
+</style>
+
 <style scoped>
 header {
   height: var(--navbar-height);
@@ -44,6 +60,12 @@ header {
   gap: var(--spacer);
   padding: var(--size-3) var(--size-6);
 
+  font-size: var(--app-header-font-size);
+  font-family: var(--app-header-font-family);
+  font-weight: var(--app-header-font-weight);
+  text-transform: var(--app-header-text-transform);
+  letter-spacing: var(--app-header-letter-spacing);
+
   @media (--md) {
     gap: var(--spacer-lg);
   }
@@ -71,6 +93,16 @@ header {
       display: block;
     }
   }
+
+  :deep(> .button),
+  :deep(> button),
+  :deep(> a) {
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+    text-transform: inherit;
+    letter-spacing: inherit;
+  }
 }
 </style>
 

package/app/components/Breadcrumbs.vue

@@ -15,9 +15,15 @@ defineProps({
 
 <style>
 :root {
-  --breadcrumb-nav-color: var(--muted);
-  --breadcrumb-nav-active-color: var(--muted);
-  --breadcrumb-separator-color: var(--muted);
+  --breadcrumb-nav-color:        var(--muted);
+  --breadcrumb-nav-active-color: var(--color);
+  --breadcrumb-separator-color:  var(--muted);
+
+  --breadcrumb-font-family:      var(--app-header-font-family);
+  --breadcrumb-font-size:        var(--app-header-font-size);
+  --breadcrumb-font-font-weight: var(--app-header-font-weight);
+  --breadcrumb-text-transform:   var(--app-header-text-transform);
+  --breadcrumb-letter-spacing:   var(--app-header-letter-spacing);
 }
 </style>
 
@@ -27,6 +33,11 @@ defineProps({
   align-items: center;
   justify-content: center;
   gap: var(--spacer-sm);
+  font-family: var(--breadcrumb-font-family);
+  font-weight: var(--breadcrumb-font-weight);
+  text-transform: var(--breadcrumb-text-transform);
+  font-size: var(--breadcrumb-font-size);
+  letter-spacing: var(--breadcrumb-letter-spacing);
 
   > span {
     white-space: nowrap;

package/app/components/Button/AddCollection.vue

@@ -1,6 +1,6 @@
 <template>
-  <Button :to="{ name: `id-create`, params: { id } }" class="small">
-    <Icon type="add"/>
+  <Button :to="{ name: `id-create`, params: { id } }">
+    <Icon type="add" />
     <span>Collection</span>
   </Button>
 </template>

package/app/components/Button/EditProfile.vue

@@ -1,5 +1,5 @@
 <template>
-  <Button :to="`https://app.ens.domains/${address}`" class="small">
+  <Button :to="`https://app.ens.domains/${address}`">
     <Icon type="edit" />
     <span>Edit Profile</span>
   </Button>

package/app/components/Button/Profile/Discord.vue

@@ -1,6 +1,6 @@
 <template>
-  <Button v-if="validateURI(profile.url)" :to="validateURI(profile.url)" class="small">
-    <Icon type="website" />
+  <Button v-if="validateURI(profile.url)" :to="validateURI(profile.url)">
+    <Icon type="discord" />
     {{ getMainDomain(profile.url) }}
   </Button>
 </template>

package/app/components/Button/Profile/Email.vue

@@ -1,5 +1,5 @@
 <template>
-  <Button v-if="profile.email" :to="`mailto:${profile.email}`" class="small">
+  <Button v-if="profile.email" :to="`mailto:${profile.email}`">
     <Icon type="email" />
     <span>{{ profile.email }}</span>
   </Button>

package/app/components/Button/Profile/Github.vue

@@ -1,5 +1,5 @@
 <template>
-  <Button v-if="profile.github" :to="`https://github.com/${profile.github}`" class="small">
+  <Button v-if="profile.github" :to="`https://github.com/${profile.github}`">
     <Icon type="github" />
     <span>{{ profile.github }}</span>
   </Button>

package/app/components/Button/Profile/Twitter.vue

@@ -1,5 +1,5 @@
 <template>
-  <Button v-if="profile.twitter" :to="`https://x.com/${profile.twitter}`" class="small">
+  <Button v-if="profile.twitter" :to="`https://x.com/${profile.twitter}`">
     <Icon type="twitter" />
     <span>{{ profile.twitter }}</span>
   </Button>

package/app/components/Button/Profile/Website.vue

@@ -1,5 +1,5 @@
 <template>
-  <Button v-if="validateURI(profile.url)" :to="validateURI(profile.url)" class="small">
+  <Button v-if="validateURI(profile.url)" :to="validateURI(profile.url)">
     <Icon type="website" />
     <span>{{ getMainDomain(profile.url) }}</span>
   </Button>

package/app/components/Button.vue

@@ -5,7 +5,7 @@
 
 <script setup>
 defineProps({
-  to: [String,Object],
+  to: [String, Object],
   target: {
     type: String,
     default: '_self',
@@ -23,7 +23,7 @@ defineProps({
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  gap: var(--ui-padding-x);
+  gap: calc(var(--ui-padding-x) / 2);
   letter-spacing: var(--ui-letter-spacing);
   line-height: var(--ui-line-height);
 
@@ -55,25 +55,24 @@ defineProps({
     height: 100%;
   }
 
-  &.small,
-  &.small > * {
-    font-size: var(--font-sm);
-    min-height: 0;
-    gap: calc(var(--ui-padding-x) / 2);
-  }
-
   &.link {
     display: inline-flex;
     align-self: baseline;
     align-items: baseline;
     height: inherit;
     margin: 0 !important;
-    padding-top: 0;
-    padding-bottom: 0;
+    padding: 0 calc(var(--ui-padding-x)/2) !important;
+    border: 0;
     line-height: inherit;
+    color: var(--muted);
+
+    &:--highlight {
+      color: var(--color);
+    }
 
     .icon {
       align-self: center;
+      height: inherit;
     }
   }
 }

package/app/components/Collection/Intro.vue

@@ -30,7 +30,6 @@
         <Button
           :to="{ name: 'id-collection-mint', params: { id, collection: collection.address } }"
           id="mint-new"
-          class="small"
         >
           <Icon type="add" />
           <span>Mint New</span>

package/app/components/Collection/Withdraw.client.vue

@@ -19,7 +19,7 @@
     },
   }" skip-confirmation auto-close-success @complete="onComplete">
     <template #start="{ start }">
-      <Button @click="start" class="small">
+      <Button @click="start">
         <Icon type="withdraw" />
         <span>Withdraw ({{ balance.value }} {{ balance.format }})</span>
       </Button>

package/app/components/GasPrice.client.vue

@@ -1,9 +1,7 @@
 <template>
-  <slot :price="unitPrice">
-    <span>{{ unitPrice.formatted.gwei }} GWEI</span>
-  </slot>
+  <span>{{ unitPrice.formatted.gwei }} GWEI</span>
 </template>
 
 <script setup>
-const unitPrice = await useGasPrice()
+const unitPrice = useGasPrice()
 </script>

package/app/components/Icon.vue

@@ -10,22 +10,27 @@ const props = defineProps({
 })
 
 const ICONS = {
-  home: '🜂',
-  trash: '✕',
-  times: '✕',
-  close: '✕',
-  folder: '✏',
-  edit: '✏',
-  check: '✓',
-  add: '+',
-  image: '+',
-  link: '↗︎',
-  user: '☻',
-  loader: 'ⴵ',
-  'chevron-up': '↑',
-  'chevron-down': '↓',
-  'chevron-right': '→',
-  withdraw: 'Ξ',
+  'add': '➕',
+  'check': '☑️',
+  'chevron-down': '⬇️',
+  'chevron-right': '➡️',
+  'chevron-up': '⬆️',
+  'close': '✖️',
+  'discord': '＠',
+  'edit': '📝',
+  'email': '📧',
+  'folder': '📁',
+  'github': '＠',
+  'home': '🏠',
+  'image': '🏞️',
+  'link': '🔗',
+  'loader': '⏳',
+  'times': '✖️',
+  'trash': '🗑️',
+  'twitter': '＠',
+  'user': '👤',
+  'website': '🌐',
+  'withdraw': '💵',
 }
 
 const symbol = computed(() => ICONS[props.type])
@@ -34,8 +39,10 @@ const symbol = computed(() => ICONS[props.type])
 <style scoped>
 .icon {
   display: inline-flex;
-  width: var(--size-4);
-  height: var(--size-4);
+  width: 1em;
+  height: 1em;
   align-items: center;
+  justify-content: center;
+  text-align: center;
 }
 </style>

package/app/components/MintGasPrice.client.vue

@@ -14,7 +14,10 @@ const props = defineProps({
   }
 })
 const mintCount = computed(() => props.mintCount)
-const { price, displayPrice } = await useMintPrice(mintCount)
+const { price, displayPrice } = useMintPrice(mintCount)
 const priceFeed = usePriceFeedStore()
-const dollarPrice = computed(() => priceFeed.weiToUSD(price.value))
+const dollarPrice = computed(() => {
+  const usd = priceFeed.weiToUSD(price.value)
+  return parseFloat(usd) > 0 ? usd : `<0.00`
+})
 </script>

package/app/components/MintGasPricePopover.client.vue

@@ -4,7 +4,7 @@
     <template #content>
       <div class="prose">
         <h1>Mint Pricing</h1>
-        <p>Artifacts are priced based on the ethereum network fees at the time of collecting.</p>
+        <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>
           The cost to store and secure the object on the network is mirrored as compensation to the artist,

package/app/components/MintToken.vue

@@ -59,7 +59,7 @@ const secondsRemaining = computed(() => blocksToSeconds(blocksRemaining.value))
 const until = computed(() => nowInSeconds() + secondsRemaining.value)
 
 const mintCount = computed(() => props.mintCount)
-const { price, displayPrice } = await useMintPrice(mintCount)
+const { price, displayPrice } = useMintPrice(mintCount)
 
 const mintRequest = computed(() => async () => {
   const count = BigInt(props.mintCount)

package/app/components/Modal.vue

@@ -1,6 +1,8 @@
 <template>
   <DialogFrame class="modal" :class="class" ref="dialog">
-    <button v-if="xClose" class="close" @click="$emit('close')"><Icon type="close" /></button>
+    <button v-if="xClose" class="close" @click="$emit('close')">
+      <Icon type="close" />
+    </button>
 
     <slot />
   </DialogFrame>

package/app/components/Profile/Header.client.vue

@@ -1,8 +1,8 @@
 <template>
-  <header v-if="artist">
+  <header v-if="artist" class="profile-header">
     <slot name="before" />
 
-    <img :src="artist.avatar || `/icons/opepen.svg`" :alt="name">
+    <img :src="artist.avatar || `/icons/opepen.svg`" :alt="name" />
     <h1 @click="() => copy(address)">
       <span>{{ name }}</span>
       <small v-if="copied">copied...</small>
@@ -60,7 +60,10 @@ header {
 
     small {
       color: var(--muted);
-      font-size: var(--font-xs);
+      font-size: var(--font-sm);
+      font-family: var(--ui-font-family);
+      letter-spacing: var(--ui-letter-spacing);
+      text-transform: var(--ui-text-transform);
     }
   }
 }

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

@@ -70,7 +70,7 @@ h1 {
   margin-bottom: var(--spacer);
   font-size: var(--font-base);
   border-bottom: var(--border);
-  padding: 0 0 var(--spacer-sm);
+  padding: 0 0 var(--spacer);
   margin: 0 0 var(--spacer);
 }
 

package/app/components/Token/MintTimelineItem.vue

@@ -65,6 +65,10 @@ const formattedPrice = computed(() => customFormatEther(props.mint.price))
       .amount {
         text-align: right;
       }
+
+      span:not(.account) {
+        font-size: var(--font-base);
+      }
     }
   }
 </style>

package/app/composables/gasPrice.ts

@@ -5,16 +5,18 @@ import { useConfig, useBlockNumber } from '@wagmi/vue'
 
 let priceWatcher: WatchStopHandle|null = null
 const price: Ref<bigint> = ref(0n)
-export const useGasPrice = async () => {
+export const useGasPrice = () => {
   const config = useConfig()
   const { data: blockNumber } = useBlockNumber()
 
-  if (! priceWatcher) {
-    priceWatcher = watch(blockNumber, async () => price.value = await getGasPrice(config))
+  const updatePrice = async () => {
+    price.value = await getGasPrice(config)
   }
 
-  if (price.value === null && priceWatcher === null) {
-    price.value = await getGasPrice(config)
+  if (! priceWatcher) {
+    updatePrice()
+
+    priceWatcher = watch(blockNumber, () => updatePrice())
   }
 
   const unitPrice = computed(() => ({
@@ -23,7 +25,7 @@ export const useGasPrice = async () => {
     eth: formatEther(price.value as bigint),
 
     formatted: {
-      gwei: price.value as bigint > 20000000000n
+      gwei: price.value as bigint > 2_000_000_000_000n
         ? roundNumber(formatGwei(price.value as bigint))
         : toFloat(formatGwei(price.value as bigint), 1),
       eth: formatEther(price.value as bigint),
@@ -33,8 +35,8 @@ export const useGasPrice = async () => {
   return unitPrice
 }
 
-export const useMintPrice = async (mintCount: Ref<number>) => {
-  const gasPrice = await useGasPrice()
+export const useMintPrice = (mintCount: Ref<number>) => {
+  const gasPrice = useGasPrice()
 
   const price = computed(() => (gasPrice.value.wei || 0n) * 60_000n * BigInt(mintCount.value))
   const displayPrice = computed(() => customFormatEther(price.value))
@@ -42,5 +44,7 @@ export const useMintPrice = async (mintCount: Ref<number>) => {
   return {
     price,
     displayPrice,
+    gasPrice,
   }
 }
+

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

@@ -12,7 +12,7 @@
 
       <form @submit.stop.prevent="mint" class="card">
         <Actions>
-          <select class="select small choose-mode" v-model="mode">
+          <select class="select choose-mode" v-model="mode">
             <option value="file" title="Data URI Encoded File Upload">DATA-URI</option>
             <option value="ipfs" title="Interplanetary File System">IPFS</option>
             <option value="http" title="Hypertext Transfer Protocol" disabled>HTTP</option>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visualizevalue/mint-app-base",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "type": "module",
   "main": "./nuxt.config.ts",
   "dependencies": {

package/app/composables/darkMode.ts

@@ -1 +0,0 @@
-export const isDark = ref(localStorage.getItem('color-scheme') !== 'light')