@visualizevalue/mint-app-base 0.0.1

package/app/components/CheckSpinner.vue

@@ -0,0 +1,39 @@
+<template>
+  <svg viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M36 16C38.8457 16 41.3379 17.5098 42.7207 19.7715C45.2979 19.1484 48.1299 19.8457 50.1416 21.8574C52.1543 23.8691 52.8486 26.7012 52.2266 29.2793C54.4893 30.6621 56 33.1543 56 36C56 38.8457 54.4893 41.3379 52.2266 42.7207C52.8496 45.2988 52.1543 48.1289 50.1426 50.1426C48.1299 52.1543 45.2988 52.8516 42.7207 52.2285C41.8545 53.6445 40.5537 54.7656 39.0039 55.4062C38.0781 55.7891 37.0635 56 36 56C33.1543 56 30.6611 54.4902 29.2783 52.2266C26.7012 52.8477 23.8701 52.1543 21.8574 50.1426C19.8457 48.1309 19.1504 45.2988 19.7725 42.7207C17.5098 41.3379 16 38.8457 16 36C16 33.1543 17.5107 30.6621 19.7734 29.2793C19.1514 26.7012 19.8457 23.8711 21.8584 21.8594C23.8701 19.8477 26.7012 19.1523 29.2783 19.7734C30.6611 17.5098 33.1543 16 36 16Z" fill="currentColor"/>
+    <path d="M43.9359 29.5111L34.811 43.197C34.3261 43.9227 33.3467 44.1237 32.6193 43.6349L28.2769 39.3362C26.8372 37.8964 29.0747 35.6606 30.5087 37.1044L33.2509 39.8408L41.3041 27.7551C42.4333 26.0612 45.0673 27.8188 43.9359 29.5111Z" fill="var(--background)"/>
+  </svg>
+</template>
+
+<script setup>
+const { fill } = defineProps({
+  fill: {
+    type: String,
+    default: 'currentColor',
+  },
+})
+</script>
+
+<style scoped>
+svg {
+  height: var(--size-5);
+
+  :not(.clear) {
+    background-color: var(--background);
+  }
+
+  path:first-child {
+    animation: spin 9s infinite linear;
+    transform-origin: center;
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/app/components/Collection/Intro.vue

@@ -0,0 +1,111 @@
+<template>
+  <header>
+    <figure v-if="collection.image">
+      <Image :src="collection.image" :alt="collection.name" />
+    </figure>
+    <div class="text">
+      <div>
+        <h1>{{ collection.name }} <small>({{ collection.symbol }})</small></h1>
+        <p v-if="collection.description" class="muted-light">
+          <ExpandableText :text="collection.description" />
+        </p>
+      </div>
+
+      <div>
+        <p v-if="id" class="muted-light">
+          <span>
+            By <NuxtLink :to="{ name: 'id', params: { id } }">{{ store.displayName(id) }}</NuxtLink>
+          </span>
+          <span>
+            {{ collection.latestTokenId }} {{ pluralize('token', Number(collection.latestTokenId)) }}
+          </span>
+          <span>
+            Created at Block {{ collection.initBlock }}
+          </span>
+        </p>
+      </div>
+
+      <menu v-if="ownedByMe">
+        <CollectionWithdraw :collection="collection" />
+        <Button
+          :to="{ name: 'id-collection-mint', params: { id, collection: collection.address } }"
+          id="mint-new"
+          class="small"
+        >Mint New</Button>
+      </menu>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+const { collection } = defineProps<{
+  collection: Collection
+}>()
+
+const id = useArtistId()
+const store = useOnchainStore()
+
+const ownedByMe = useIsMeCheck(collection.owner)
+</script>
+
+<style scoped>
+header {
+  display: grid;
+  gap: var(--spacer);
+
+  figure {
+    max-width: var(--size-10);
+  }
+
+  @media (--sm) {
+    max-width: 100%;
+
+    &:has(> figure) {
+      grid-template-columns: 20% 1fr;
+    }
+  }
+
+  .text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: var(--spacer);
+    position: relative;
+
+    > div {
+      display: grid;
+      gap: var(--spacer-sm);
+
+      &:nth-child(2) {
+        span {
+          &:not(:last-child):after {
+            content: ' · ';
+          }
+        }
+      }
+    }
+
+    h1 {
+      small {
+        color: var(--muted-light);
+        font-size: var(--font-base);
+      }
+    }
+
+    menu {
+      margin: 0;
+      display: flex;
+      padding: 0;
+      gap: var(--spacer-sm);
+
+      button {
+        width: auto;
+
+        @media (--md) {
+          width: fit-content;
+        }
+      }
+    }
+  }
+}
+</style>

package/app/components/Collection/OverviewCard.vue

@@ -0,0 +1,73 @@
+<template>
+  <article>
+    <Image v-if="collection.image" :src="collection.image" :alt="collection.name" />
+    <div class="text">
+      <div>
+        <h1>{{ collection.name }} <small>({{ collection.symbol }})</small></h1>
+        <p v-if="collection.description" class="muted-light">{{ shortDescription }}</p>
+      </div>
+
+      <div>
+        <p>{{ collection.latestTokenId }} {{ pluralize('token', Number(collection.latestTokenId)) }} · Created at Block {{ collection.initBlock }}</p>
+      </div>
+    </div>
+    <CardLink
+      :to="{ name: 'id-collection', params: { id: collection.owner, collection: collection.address } }"
+      :title="`View ${collection.name}`"
+    />
+  </article>
+</template>
+
+<script setup lang="ts">
+const { collection } = defineProps<{
+  collection: Collection
+}>()
+
+const shortDescription = computed(() => shortString(collection.description, 40, 30))
+</script>
+
+<style scoped>
+article {
+  display: grid;
+  padding: var(--spacer);
+  gap: var(--spacer);
+  transition: all var(--speed);
+
+  &:has(> a:--highlight) {
+    background: var(--gray-z-0);
+  }
+
+  @media (--sm) {
+    &:has(> .image) {
+      grid-template-columns: 20% 1fr;
+    }
+  }
+
+  img {
+    width: 100%;
+  }
+
+  .text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: var(--spacer);
+
+    > div {
+      display: grid;
+      gap: var(--spacer-sm);
+    }
+
+    > div:last-child {
+      color: var(--muted-light);
+    }
+
+    h1 {
+      small {
+        color: var(--muted-light);
+        font-size: var(--font-base);
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,61 @@
+<template>
+  <TransactionFlow v-if="showWithdrawButton" :request="withdraw" :text="{
+    title: {
+      chain: 'Switch Chain',
+      requesting: 'Confirm In Wallet',
+      waiting: 'Transaction Submitted',
+      complete: 'Success!'
+    },
+    lead: {
+      chain: 'Requesting to switch chain...',
+      requesting: 'Requesting Signature...',
+      waiting: 'Checking withdraw transaction...',
+      complete: `Contract balance withdrawn...`,
+    },
+    action: {
+      confirm: 'Withdraw',
+      error: 'Retry',
+      complete: 'OK',
+    },
+  }" skip-confirmation auto-close-success @complete="onComplete">
+    <template #start="{ start }">
+      <Button @click="start" class="small">
+        Withdraw ({{ balance.value }} {{ balance.format }})
+      </Button>
+    </template>
+  </TransactionFlow>
+</template>
+
+<script setup>
+const { $wagmi } = useNuxtApp()
+const chainId = useMainChainId()
+
+const { collection } = defineProps({
+  collection: Object,
+})
+
+const forceHide = ref(false)
+const showWithdrawButton = computed(() => collection.balance && ! forceHide.value)
+const balance = computed(() => customFormatEther(collection.balance))
+
+const withdraw = computed(() => async () => {
+  return await writeContract($wagmi, {
+    abi: MINT_ABI,
+    chainId,
+    address: collection.address,
+    functionName: 'withdraw',
+  })
+})
+
+const store = useOnchainStore()
+const onComplete = async () => {
+  forceHide.value = true
+  await store.fetchCollectionBalance(collection.address)
+  await delay(1000)
+  forceHide.value = false
+}
+
+onMounted(async () => {
+  await store.fetchCollectionBalance(collection.address)
+})
+</script>

package/app/components/CollectionsOverview.client.vue

@@ -0,0 +1,58 @@
+<template>
+  <section v-if="collections.length" class="collections borderless">
+    <slot name="before" :collections="collections" />
+
+    <CollectionOverviewCard
+      v-for="collection in collections"
+      :key="collection.address"
+      :collection="collection"
+    />
+  </section>
+  <section v-else-if="! loading" class="centered borderless">
+    <template v-if="isMe">
+      <p>It looks like you haven't deployed any collections.</p>
+      <div>
+        <Button :to="{ name: `id-create`, params: { id } }">
+          <Icon type="plus" />
+          <span>Create Your First</span>
+        </Button>
+      </div>
+    </template>
+    <template v-else>
+      <p>It looks like this account hasn't deployed any collections.</p>
+    </template>
+  </section>
+  <Loading v-if="loading" txt="Querying the blockchain..." />
+</template>
+
+<script setup>
+const store = useOnchainStore()
+
+const props = defineProps({
+  id: String,
+})
+const id = computed(() => props.id)
+
+const isMe = useIsMeCheck(id)
+
+const { loading } = useLoadArtistData(id)
+const collections = computed(() => isMe.value
+  ? store.forArtist(id.value)
+  : store.forArtistOnlyMinted(id.value)
+)
+
+// Force update collections with no mints
+if (store.forArtist(id.value).length !== collections.length) {
+  store.forArtist(id.value)
+    .filter(c => c.latestTokenId === 0n)
+    .forEach(c => store.fetchCollection(c.address))
+}
+</script>
+
+<style scoped>
+.collections {
+  display: grid;
+  gap: var(--spacer-lg);
+  padding: var(--spacer-lg) var(--spacer) !important;
+}
+</style>

package/app/components/Connect.client.vue

@@ -0,0 +1,88 @@
+<template>
+  <Button v-if="showConnect" @click="chooseModalOpen = true" :class="class">
+    <slot>Connect</slot>
+  </Button>
+  <slot v-else name="connected">
+    <Account :address="address" />
+  </slot>
+
+  <Teleport to="body">
+    <Modal
+      v-if="showConnect"
+      :open="chooseModalOpen"
+      @close="closeModal"
+    >
+      <div class="wallet-options">
+        <Button
+          v-for="connector in shownConnectors"
+          @click="() => login(connector)"
+          class="choose-connector-button"
+        >
+          <img v-if="ICONS[connector.name]" :src="connector.icon || `/icons/wallets/${ICONS[connector.name]}`" alt="">
+          {{ connector.name }}
+        </Button>
+      </div>
+    </Modal>
+  </Teleport>
+</template>
+
+<script setup>
+import { useAccount, useConnect, useChainId } from '@wagmi/vue'
+
+const ICONS = {
+  'Coinbase Wallet': 'coinbase.svg',
+  'MetaMask': 'metamask.svg',
+  'WalletConnect': 'walletconnect.svg',
+  'Rainbow': 'rainbow.svg',
+}
+
+const props = defineProps(['class'])
+const emit = defineEmits(['connected', 'disconnected'])
+
+const chainId = useChainId()
+const { connectors, connect } = useConnect()
+const { address, isConnected } = useAccount()
+
+const showConnect = computed(() => !isConnected.value)
+const shownConnectors = computed(() => {
+  const unique = Array.from(
+    new Map(
+      connectors.map(connector => [connector.name, connector])
+    ).values()
+  )
+
+  return unique.length > 1
+    ? unique.filter(c => c.id !== 'injected')
+    : unique
+})
+
+const chooseModalOpen = ref(false)
+const closeModal = () => {
+  chooseModalOpen.value = false
+}
+const login = async (connector) => {
+  connect({ connector, chainId })
+
+  setTimeout(() => {
+    chooseModalOpen.value = false
+  }, 100)
+}
+
+const check = () => isConnected.value ? emit('connected', { address: address.value }) : emit('disconnected')
+watch(isConnected, () => check())
+onMounted(() => check())
+</script>
+
+<style scoped>
+.wallet-options {
+  display: flex;
+  gap: var(--spacer);
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.choose-connector-button {
+  img {
+    width: var(--size-5);
+  }
+}
+</style>

package/app/components/CountDown.vue

@@ -0,0 +1,153 @@
+<template>
+<div v-if="countDownComplete" class="complete countdown">
+  <slot name="complete"></slot>
+</div>
+<div v-else class="countdown">
+  <slot name="header"></slot>
+  <span v-if="timeUntil">{{ countdown }}</span>
+  <span v-else>_d _h _m _s</span>
+  <slot />
+  <slot name="footer" />
+</div>
+</template>
+
+<script>
+export default {
+  emits: ['start', 'complete'],
+
+  props: {
+    adjustSeconds: {
+      type: Number,
+      default: 0,
+    },
+    until: {
+      type: Number,
+      default: 1632552931,
+    },
+    minimal: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data () {
+    return {
+      timeUntil: null,
+      interval: null,
+    }
+  },
+
+  computed: {
+    countDownComplete () {
+      return this.timeUntil <= 0
+    },
+
+    years () {
+      return Math.floor(this.timeUntil / 60 / 60 / 24 / 365)
+    },
+
+    accountedForYears () {
+      return this.years * 60 * 60 * 24 * 365
+    },
+
+    days () {
+      return Math.floor((this.timeUntil - this.accountedForYears) / 60 / 60 / 24)
+    },
+
+    accountedForDays () {
+      return this.days * 60 * 60 * 24
+    },
+
+    hours () {
+      return Math.floor((this.timeUntil - this.accountedForYears - this.accountedForDays) / 60 / 60)
+    },
+
+    accountedForHours () {
+      return this.hours * 60 * 60
+    },
+
+    minutes () {
+      return Math.floor((this.timeUntil - this.accountedForYears - this.accountedForDays - this.accountedForHours) / 60)
+    },
+
+    totalSeconds () {
+      return this.timeUntil / 60
+    },
+
+    seconds () {
+      return this.timeUntil % 60
+    },
+
+    countdown () {
+      const yearsString = this.years + 'y'
+      const daysString = this.days + 'd'
+      const hoursString = this.hours + 'h'
+      const minutesString = this.minutes + 'm'
+      const secondsString = this.seconds + 's'
+
+      return [
+        this.years && yearsString,
+        this.days && daysString,
+        this.hours && hoursString,
+        minutesString,
+        (!this.minimal || this.totalSeconds < 600) && secondsString,
+      ].filter(i => !!i).join(' ')
+    }
+  },
+
+  mounted () {
+    this.update()
+    this.interval = setInterval(() => this.update(), 1000)
+  },
+
+  beforeUnmount () {
+    clearInterval(this.interval)
+  },
+
+  methods: {
+    update () {
+      let start = this.until
+
+      start += this.adjustSeconds
+
+      this.timeUntil = start - nowInSeconds()
+
+      if (this.countDownComplete) {
+        this.$emit('complete')
+        clearInterval(this.interval)
+      }
+    },
+  },
+
+}
+</script>
+
+<style scoped>
+.countdown {
+  text-align: center;
+
+  small,
+  span {
+    display: block;
+  }
+
+  > *:first-child {
+    margin-top: 0;
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+
+  &.inline,
+  &.inline * {
+    display: inline !important;
+    text-align: left !important;
+    font-size: 1em !important;
+  }
+}
+
+.complete {
+  padding: 0;
+}
+</style>

package/app/components/DialogFrame.vue

@@ -0,0 +1,96 @@
+<template>
+  <dialog ref="dialog">
+    <slot />
+  </dialog>
+</template>
+
+<script setup>
+const dialog = ref()
+
+const close = () => {
+  return new Promise((resolve) => {
+    const keyFrame = new KeyframeEffect(
+      dialog.value,
+      [{ translate: '0 var(--spacer)', opacity: '0' }],
+      { duration: 300, easing: 'ease', direction: 'normal' }
+    )
+
+    const animation = new Animation(keyFrame, document.timeline)
+    animation.play()
+    animation.onfinish = () => {
+      dialog.value.close()
+      resolve()
+    }
+  })
+}
+
+const open = () => {
+  dialog.value.showModal()
+}
+
+defineExpose({
+  close,
+  open,
+})
+</script>
+
+<style>
+dialog {
+  position: fixed;
+  padding: calc(var(--spacer)*2);
+  max-width: var(--dialog-width);
+  width: 100%;
+  background: var(--background);
+  color: var(--color);
+  border: var(--border);
+  overscroll-behavior: contain;
+  height: min-content;
+  opacity: 0;
+  pointer-events: none;
+  align-content: center;
+
+  &[open] {
+    animation: fade-in var(--speed);
+    opacity: 1;
+    pointer-events: all;
+  }
+
+  &::backdrop {
+    background-image: linear-gradient(
+      45deg,
+      var(--gray-z-0-semi),
+      var(--gray-z-1-semi),
+      var(--gray-z-2-semi)
+    );
+    backdrop-filter: var(--blur);
+    pointer-events: none;
+  }
+
+  > .close {
+    position: absolute;
+    top: var(--spacer);
+    right: var(--spacer);
+    width: min-content;
+  }
+
+  > h1 {
+    padding-right: var(--size-6);
+    font-family: var(--font-family-ui);
+    font-size: var(--font-lg);
+    text-transform: var(--text-transform);
+    margin-bottom: var(--size-3);
+  }
+
+  > .actions {
+    margin-top: var(--spacer);
+    display: flex;
+    gap: var(--spacer);
+    justify-content: flex-end;
+  }
+}
+
+html:has(dialog[open]),
+body:has(dialog[open]) {
+  overflow: hidden;
+}
+</style>