@visualizevalue/mint-app-base 0.0.1

package/app/components/ExpandableText.vue

@@ -0,0 +1,50 @@
+<template>
+  <span :class="{ expanded }" v-html="visibleText"></span>
+  <slot
+    name="trigger"
+    v-if="wasShortened"
+    :expanded="expanded"
+    :toggle="toggle"
+  >
+    <Button v-if="wasShortened" @click="toggle" class="link">
+      <Icon :type="expanded ? 'chevron-up' : 'chevron-right'" />
+      <span>{{ expanded ? collapseText : expandText }}</span>
+    </Button>
+  </slot>
+</template>
+
+<script setup>
+const { length, text } = defineProps({
+  length: {
+    type: Number,
+    default: 120,
+  },
+  text: String,
+  expandText: {
+    type: String,
+    default: 'Expand',
+  },
+  collapseText: {
+    type: String,
+    default: 'Collapse',
+  },
+})
+
+const cleaned = computed(() => cleanText(text))
+const shortened = computed(() => shortenedCleanText(extractURLs(cleaned.value).text, length))
+const wasShortened = computed(() => shortened.value !== cleaned.value)
+const expanded = ref(false)
+const toggle = () => expanded.value = !expanded.value
+
+const visibleText = computed(() => wasShortened.value && !expanded.value ? shortened.value : cleaned.value)
+</script>
+
+<style scoped>
+span.expanded {
+  white-space: pre-wrap;
+}
+
+.button {
+  margin-top: var(--size-3);
+}
+</style>

package/app/components/Form/Errors.vue

@@ -0,0 +1,18 @@
+<template>
+  <div v-if="errors.length" class="errors">
+    <p v-for="error in errors">{{ error.message }}</p>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  errors: Array,
+})
+</script>
+
+<style scoped>
+.errors {
+  padding: var(--spacer) 0;
+  color: var(--error);
+}
+</style>

package/app/components/Form/Group.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="fieldset-wrapper">
+    <fieldset>
+      <slot />
+    </fieldset>
+  </div>
+</template>
+
+<style scoped>
+.fieldset-wrapper {
+  max-width: -webkit-fill-available;
+  container-type: inline-size;
+  width: 100%;
+}
+
+fieldset {
+  width: 100%;
+  max-width: -webkit-fill-available;
+  display: flex;
+  flex-wrap: wrap;
+
+  > * {
+    width: 100cqw;
+    flex-shrink: 0;
+  }
+
+  @container (min-width: 30rem) {
+    flex-wrap: nowrap;
+
+    > * {
+      width: fit-content;
+      flex-shrink: 1;
+    }
+  }
+
+  :deep(> .form-item),
+  :deep(> .button) {
+    + .form-item,
+    + .button {
+      border-top-color: transparent;
+
+      &:has(.input:focus) {
+        border-top-color: var(--border-color-light);
+      }
+
+      @container (min-width: 30rem) {
+        border-top-color: var(--border-color);
+        border-left-color: transparent;
+
+        &:has(.input:focus) {
+          border-left-color: var(--border-color-light);
+        }
+      }
+    }
+  }
+}
+</style>

package/app/components/Form/Input.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="form-item">
+    <span v-if="prefix" class="prefix">{{ prefix }}</span>
+
+    <input
+      v-bind="inputAttributes"
+      @input="$emit('update:modelValue', $event.target.value)"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      class="input"
+    />
+
+    <span v-if="suffix" class="suffix">{{ suffix }}</span>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  modelValue: [String, Number],
+  type: {
+    type: String,
+    default: 'text',
+  },
+  prefix: String,
+  suffix: String,
+  placeholder: String,
+  disabled: Boolean,
+  required: Boolean,
+  name: String,
+  min: String,
+  max: String,
+  autocomplete: String,
+})
+const emit = defineEmits(['update:modelValue'])
+
+const inputAttributes = computed(() => ({
+  type: props.type,
+  value: props.modelValue,
+  placeholder: props.placeholder || '',
+  disabled: props.disabled || false,
+  required: props.required || false,
+  name: props.name || '',
+  autocomplete: props.autocomplete || 'on',
+  min: props.min,
+  max: props.max,
+}))
+</script>

package/app/components/Form/SelectFile.vue

@@ -0,0 +1,60 @@
+<template>
+  <Button v-if="! file" type="button" @click="() => open()">
+    <Icon type="image" />
+    <span>Choose file</span>
+  </Button>
+  <FormGroup v-else>
+    <Button type="button" disabled>
+      <span>{{ shortString(file.name) }}</span>
+      <span>({{ formatBytes(file.size) }})</span>
+    </Button>
+    <Button type="button" class="open" @click="() => open()">
+      <Icon type="folder" />
+    </Button>
+    <Button type="button" class="reset" @click="() => reset()">
+      <Icon type="trash" />
+    </Button>
+  </FormGroup>
+</template>
+
+<script setup lang="ts">
+import { useFileDialog } from '@vueuse/core'
+
+const emit = defineEmits<{
+  change: [file: File|null]
+}>()
+
+const { files, open, reset, onChange } = useFileDialog({
+  accept: 'image/*',
+  multiple: false,
+})
+
+const file = computed(() => files.value?.length ? files.value[0] : null)
+onChange(() => emit('change', file.value))
+</script>
+
+<style scoped>
+fieldset {
+  width: fit-content;
+  max-width: -webkit-fill-available;
+
+  .button {
+    white-space: nowrap;
+
+    &:first-child {
+      span:last-child {
+        text-align: right;
+      }
+    }
+  }
+}
+
+.button[disabled] {
+  color: var(--color);
+}
+
+.open,
+.reset {
+  width: min-content;
+}
+</style>

package/app/components/GasPrice.client.vue

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

package/app/components/HeaderSection.vue

@@ -0,0 +1,18 @@
+<template>
+  <header>
+    <slot />
+  </header>
+</template>
+
+<style scoped>
+header {
+  display: flex;
+  gap: var(--spacer);
+  justify-content: space-between;
+  align-items: center;
+
+  :deep(> h1) {
+    white-space: nowrap;
+  }
+}
+</style>

package/app/components/Icon.vue

@@ -0,0 +1,37 @@
+<template>
+  <i v-if="ICONS[type]" class="icon">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" v-html="ICONS[type]"></svg>
+  </i>
+  <FeatherIcon v-else :type="type" class="icon" />
+</template>
+
+<script setup>
+import FeatherIcon from 'vue-feather'
+
+const props = defineProps({
+  type: String,
+})
+
+const ICONS = {
+  'x.com': `<path d="M13.5222 10.7749L19.4785 4H18.0671L12.8952 9.88256L8.76437 4H4L10.2466 12.8955L4 20H5.41155L10.8732 13.7878L15.2356 20H20L13.5222 10.7749Z" fill="currentColor"/><path d="M11.5889 12.9738L10.956 12.0881M12.1522 10.728L12.7851 11.6137L18.0677 19.0075M13.5222 10.7749L19.4785 4H18.0671L12.8952 9.88256L8.76437 4H4L10.2466 12.8955L4 20H5.41155L10.8732 13.7878L15.2356 20H20L13.5222 10.7749Z" stroke="currentColor"/>`,
+  vv: `<path d="M11 14.0646C11 15.0625 10.6833 15.8796 10.05 16.5162L6.6 20H4.4L0.949997 16.5162C0.316667 15.8796 0 15.0625 0 14.0646V5H2.575V13.9614C2.575 14.3915 2.68333 14.7183 2.9 14.942L5.525 17.6775L8.1 14.942C8.31669 14.7183 8.425 14.3915 8.425 13.9614V5H11V14.0646Z" fill="currentColor"/><path d="M24 14.0646C24 15.0625 23.6833 15.8796 23.05 16.5162L19.6 20H17.4L13.95 16.5162C13.3167 15.8796 13 15.0625 13 14.0646V5H15.575V13.9614C15.575 14.3915 15.6833 14.7183 15.9 14.942L18.525 17.6775L21.1 14.942C21.3167 14.7183 21.425 14.3915 21.425 13.9614V5H24V14.0646Z" fill="currentColor"/>`,
+  check: `<path fill-rule="evenodd" clip-rule="evenodd" d="M15.36 3.88585C15.0088 3.30969 14.5152 2.83358 13.9268 2.50331C13.3383 2.17304 12.6748 1.99971 12 2C10.577 2 9.33 2.75494 8.64 3.88685C7.98396 3.72742 7.29792 3.73945 6.64787 3.92179C5.99782 4.10413 5.40562 4.45064 4.92823 4.928C4.45083 5.40536 4.10429 5.99751 3.92194 6.64751C3.73959 7.29751 3.72756 7.98349 3.887 8.63948C3.31061 8.99055 2.83426 9.48402 2.50379 10.0724C2.17331 10.6608 1.99982 11.3244 2 11.9992C2 13.4221 2.755 14.668 3.886 15.359C3.72655 16.0149 3.73859 16.7009 3.92094 17.3509C4.10329 18.0009 4.44983 18.5931 4.92723 19.0704C5.40462 19.5478 5.99682 19.8943 6.64687 20.0766C7.29692 20.259 7.98296 20.271 8.639 20.1116C9.1267 20.913 9.88486 21.5137 10.7766 21.8053C11.6684 22.0968 12.635 22.06 13.502 21.7015C14.2737 21.3815 14.9241 20.8252 15.36 20.1126C16.0161 20.2721 16.7023 20.2601 17.3525 20.0777C18.0026 19.8953 18.5949 19.5487 19.0723 19.0712C19.5498 18.5937 19.8963 18.0014 20.0785 17.3513C20.2608 16.7011 20.2727 16.015 20.113 15.359C20.6894 15.0079 21.1657 14.5144 21.4962 13.926C21.8267 13.3376 22.0002 12.6741 22 11.9992C22.0002 11.3244 21.8267 10.6608 21.4962 10.0724C21.1657 9.48402 20.6894 8.99055 20.113 8.63948C20.2723 7.98354 20.2601 7.29765 20.0776 6.64778C19.8951 5.99791 19.5485 5.40592 19.071 4.92877C18.594 4.45131 18.0022 4.10459 17.3525 3.92194C16.7027 3.7393 16.0169 3.72687 15.361 3.88585H15.36ZM11.402 15.5979L15.964 8.75447C16.53 7.90854 15.213 7.03061 14.648 7.87654L10.622 13.9191L9.251 12.5512C8.534 11.8292 7.415 12.9471 8.135 13.6671L10.305 15.8169C10.3913 15.8749 10.4883 15.9152 10.5903 15.9356C10.6923 15.9559 10.7973 15.9558 10.8993 15.9354C11.0013 15.9149 11.0982 15.8745 11.1845 15.8164C11.2708 15.7583 11.3447 15.6837 11.402 15.5969V15.5979Z" fill="currentColor"/>`,
+}
+</script>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  width: var(--size-4);
+  height: var(--size-4);
+
+  :deep(svg) {
+    width: 100%;
+    height: 100%;
+  }
+
+  &.spin {
+    animation: spin 5s infinite linear;
+  }
+}
+</style>

package/app/components/IconLink.vue

@@ -0,0 +1,29 @@
+<template>
+  <NuxtLink :to="to" :title="title">
+    <Icon :type="type" />
+  </NuxtLink>
+</template>
+
+<script setup>
+defineProps({
+  to: String,
+  title: String,
+  type: String,
+})
+</script>
+
+<style scoped>
+a {
+  color: var(--muted);
+  transition: all var(--speed);
+  width: var(--size-5);
+  height: var(--size-5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:--highlight {
+    color: var(--color);
+  }
+}
+</style>

package/app/components/Image.client.vue

@@ -0,0 +1,120 @@
+<template>
+  <article
+    class="image"
+    :class="{ loaded }"
+    @click="$emit('click')"
+    :style="{ padding: `0 0 ${height}` }"
+    v-intersection-observer="loadImage"
+  >
+    <Loading v-if="! loaded" txt=""/>
+    <img
+      v-if="uri"
+      ref="imageEl"
+      :alt="alt"
+      :src="uri"
+      @load="imageLoaded"
+    >
+  </article>
+</template>
+
+<script setup>
+import { vIntersectionObserver } from '@vueuse/components'
+
+const props = defineProps({
+  src: String,
+  alt: String,
+  aspectRatio: Number,
+})
+const emit = defineEmits(['click', 'loaded'])
+
+const uri = ref('')
+const loaded = ref(false)
+const imageEl = ref(null)
+const aspectRatio = ref(1)
+const computeAspectRatio = () => {
+  aspectRatio.value = (
+    props.aspectRatio || // The passed aspect ratio
+    (imageEl.value?.naturalWidth / (imageEl.value?.naturalHeight || 1)) || // The natural image element ratio
+    1 // The default square ratio
+  )
+}
+computeAspectRatio()
+const height = computed(() => (1 / aspectRatio.value) * 100 + '%')
+
+const loadImage = ([{ isIntersecting }]) => {
+  if (! isIntersecting) return
+
+  if (! props.src) return
+
+  uri.value = props.src
+}
+watch(() => props.src, () => loadImage([{ isIntersecting: true }]))
+
+// Image loaded event
+const imageLoaded = () => {
+  loaded.value = true
+  emit('loaded')
+  computeAspectRatio()
+}
+</script>
+
+<style scoped>
+article.image {
+  overflow: hidden;
+  background-color: var(--gray-z-2);
+  overflow: hidden;
+  position: relative;
+  height: 0;
+  padding-bottom: 100%;
+  display: flex;
+
+  .bordered {
+    border-radius: var(--border-radius);
+    border: 1px solid var(--border-color);
+  }
+
+  .loader {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-fit: contain;
+    transform: scale(1.2);
+    width: 100%;
+    opacity: 0;
+    transition: all var(--speed);
+  }
+
+  &:not(.loaded) {
+    animation: imageLoading alternate infinite 1s;
+  }
+
+  &.loaded {
+    img {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+}
+
+@keyframes imageLoading {
+  from {
+    background-color: var(--gray-z-1);
+  }
+  to {
+    background-color: var(--gray-z-2);
+  }
+}
+</style>

package/app/components/Loading.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="loader">
+    <span class="spinner"></span>
+    <span v-if="txt" class="text">{{ txt }}</span>
+  </div>
+</template>
+
+<script setup>
+const { txt } = defineProps({
+  txt: {
+    type: String,
+    default: 'Loading...',
+  },
+})
+</script>
+
+<style scoped>
+.loader {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacer-sm);
+
+  .text {
+    text-transform: var(--text-transform-ui);
+    color: var(--muted);
+    font-family: var(--font-family-ui);
+    font-weight: var(--font-weight-bold);
+  }
+
+  &:not(.inline) {
+    text-align: center;
+    margin: calc(var(--size-6)) 0;
+  }
+
+  &.inline {
+    display: inline-flex;
+    gap: var(--size-1);
+    margin-left: var(--size-1);
+  }
+
+  &.large {
+    font-size: var(--font-size-xl);
+
+    .spinner {
+      border-width: 4px;
+    }
+  }
+
+  &.simple {
+    .text {
+      display: none;
+    }
+  }
+
+  .spinner {
+    position: relative;
+    display: inline-block;
+    width: 0.75em;
+    height: 0.75em;
+    border-radius: 50%;
+    border: 2px solid var(--gray-z-6);
+    border-right-color: var(--gray-z-3);
+    flex-shrink: 0;
+    animation: spin infinite linear 1s;
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/app/components/MintGasPrice.client.vue

@@ -0,0 +1,20 @@
+<template>
+  <span>
+    {{ displayPrice.value }} {{ displayPrice.format }}
+
+    <span class="usd">(${{ dollarPrice }})</span>
+  </span>
+</template>
+
+<script setup>
+const props = defineProps({
+  mintCount: {
+    type: Number,
+    default: 1,
+  }
+})
+const mintCount = computed(() => props.mintCount)
+const { price, displayPrice } = await useMintPrice(mintCount)
+const priceFeed = usePriceFeedStore()
+const dollarPrice = computed(() => priceFeed.weiToUSD(price.value))
+</script>

package/app/components/MintGasPricePopover.client.vue

@@ -0,0 +1,69 @@
+<template>
+  <Popover id="about-gas">
+    <template #trigger><MintGasPrice :mint-count="2" /></template>
+    <template #content>
+      <div class="minimal-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>
+          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.
+        </p>
+        <table>
+          <tbody>
+            <tr>
+              <td>Gas price</td>
+              <td><GasPrice /></td>
+            </tr>
+            <tr>
+              <td>Cost to mint</td>
+              <td>
+                <span>
+                  60.000 gas * <GasPrice />
+                </span>
+              </td>
+            </tr>
+            <tr>
+              <td>Ethereum fee (50%)</td>
+              <td><MintGasPrice /></td>
+            </tr>
+            <tr>
+              <td>Artist <abbr title="Artist Compensation">comp.</abbr> (50%)</td>
+              <td><MintGasPrice /></td>
+            </tr>
+            <tr>
+              <td>Mint price</td>
+              <td><MintGasPrice :mint-count="2" /></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </template>
+  </Popover>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+  table {
+    width: 100%;
+
+    td {
+      > div {
+        display: grid;
+
+        > span {
+          white-space: nowrap;
+        }
+      }
+    }
+
+    :deep(.usd) {
+      display: inline-block;
+      margin-left: auto;
+    }
+  }
+
+</style>