@visualizevalue/mint-app-base 0.1.4 → 0.1.5

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,7 +1,7 @@
 :root {
 
   --ui-font-family:         var(--font-family);
-  --ui-font-size:           var(--font-sm);
+  --ui-font-size:           var(--font-base);
   --ui-font-weight:         var(--font-weight);
   --ui-text-transform:      var(--text-transform);
   --ui-letter-spacing:      var(--letter-spacing);

package/app/components/AppHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <header>
+  <header class="app-header">
     <ClientOnly>
       <Breadcrumbs :items="breadcrumbs" />
 
@@ -41,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);
@@ -50,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);
   }
@@ -78,11 +94,14 @@ header {
     }
   }
 
-  .account {
-    font-family: var(--ui-font-family);
-    font-size: var(--ui-font-size);
-    letter-spacing: var(--ui-letter-spacing);
-    text-transform: var(--ui-text-transform);
+  :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

@@ -16,14 +16,14 @@ defineProps({
 <style>
 :root {
   --breadcrumb-nav-color:        var(--muted);
-  --breadcrumb-nav-active-color: var(--muted);
+  --breadcrumb-nav-active-color: var(--color);
   --breadcrumb-separator-color:  var(--muted);
 
-  --breadcrumb-font-family:      var(--ui-font-family);
-  --breadcrumb-font-size:        var(--ui-font-size);
-  --breadcrumb-font-font-weight: var(--ui-font-weight);
-  --breadcrumb-text-transform:   var(--ui-text-transform);
-  --breadcrumb-letter-spacing:   var(--ui-letter-spacing);
+  --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>
 

package/app/components/Button/AddCollection.vue

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

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

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

package/app/components/Button.vue

@@ -61,12 +61,18 @@ defineProps({
     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/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])

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visualizevalue/mint-app-base",
-  "version": "0.1.4",
+  "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')