@visualizevalue/mint-app-base 0.0.1

package/app/components/MintToken.vue

@@ -0,0 +1,89 @@
+<template>
+  <slot
+    v-bind="{
+      displayPrice,
+      dollarPrice: priceFeed.weiToUSD(price),
+      mintRequest,
+      minted,
+      mintOpen,
+      currentBlock,
+      blocksRemaining,
+      secondsRemaining,
+      until,
+      transactionFlowConfig: {
+        title: {
+          chain: 'Switch Chain',
+          requesting: 'Confirm In Wallet',
+          waiting: 'Transaction Submitted',
+          complete: 'Success!'
+        },
+        lead: {
+          chain: 'Requesting to switch chain...',
+          requesting: 'Requesting Signature...',
+          waiting: 'Checking Mint Transaction...',
+          complete: `Token minted...`,
+        },
+        action: {
+          confirm: 'Mint',
+          error: 'Retry',
+          complete: 'OK',
+        },
+      },
+    }"
+  />
+</template>
+
+<script setup>
+import { useAccount, useBlockNumber } from '@wagmi/vue'
+
+const config = useRuntimeConfig()
+
+const { $wagmi } = useNuxtApp()
+const { address } = useAccount()
+
+const props = defineProps({
+  token: Object,
+  mintCount: {
+    default: 1,
+    type: [Number, String],
+  },
+})
+const emit = defineEmits(['minted'])
+const store = useOnchainStore()
+const priceFeed = usePriceFeedStore()
+
+const { data: currentBlock } = useBlockNumber({ chainId: config.public.chainId })
+const mintOpen = computed(() => currentBlock.value && props.token.untilBlock > currentBlock.value)
+const blocksRemaining = computed(() => props.token.untilBlock - (currentBlock.value || 0n))
+const secondsRemaining = computed(() => blocksToSeconds(blocksRemaining.value))
+const until = computed(() => nowInSeconds() + secondsRemaining.value)
+
+const mintCount = computed(() => props.mintCount)
+const { price, displayPrice } = await useMintPrice(mintCount)
+
+const mintRequest = computed(() => async () => {
+  const count = BigInt(props.mintCount)
+
+  return writeContract($wagmi, {
+    abi: MINT_ABI,
+    chainId: config.public.chainId,
+    address: props.token.collection,
+    functionName: 'mint',
+    args: [
+      props.token.tokenId,
+      count,
+    ],
+    value: price.value,
+    gas: 80_000n,
+  })
+})
+
+const minted = async () => {
+  await Promise.all([
+    store.fetchTokenBalance(props.token, address.value),
+    // store.fetchTokenMints(props.token),
+  ])
+
+  emit('minted')
+}
+</script>

package/app/components/MintTokenBar.vue

@@ -0,0 +1,79 @@
+<template>
+  <Connect v-if="! isConnected" class="block">Connect To Mint</Connect>
+  <FormGroup v-else ref="el">
+    <FormInput
+      type="number"
+      v-model="mintCount"
+      min="1"
+      required
+      class="amount"
+    />
+    <Button disabled class="price">
+      {{ displayPrice.value }} {{ displayPrice.format }}
+      (${{ dollarPrice }})
+    </Button>
+    <TransactionFlow
+      :request="mintRequest"
+      :text="transactionFlowConfig"
+      @complete="onMinted"
+      skip-confirmation
+      auto-close-success
+    >
+      <template #start="{ start }">
+        <Button @click="start" class="mint">
+          Mint
+        </Button>
+      </template>
+    </TransactionFlow>
+  </FormGroup>
+</template>
+
+<script setup>
+import { useAccount } from '@wagmi/vue'
+
+const { isConnected } = useAccount()
+
+const props = defineProps({
+  token: Object,
+  displayPrice: Object,
+  dollarPrice: String,
+  mintRequest: Function,
+  transactionFlowConfig: Object,
+  minted: Function,
+})
+
+const mintCount = defineModel('mintCount', { default: '1' })
+const onMinted = () => {
+  mintCount.value = '1'
+  props.minted()
+}
+</script>
+
+<style scoped>
+fieldset {
+  container-type: inline-size;
+
+  .amount {
+    width: 100%;
+
+    input {
+      text-align: center;
+    }
+
+    @container (min-width: 30rem) {
+      min-width: 6rem;
+      width: fit-content;
+    }
+  }
+
+  .price {
+    width: 100%;
+  }
+
+  .mint {
+    @container (min-width: 30rem) {
+      min-width: 9rem;
+    }
+  }
+}
+</style>

package/app/components/Modal.vue

@@ -0,0 +1,36 @@
+<template>
+  <DialogFrame class="modal" ref="dialog">
+    <button v-if="xClose" class="close" @click="$emit('close')"><Icon type="x" /></button>
+
+    <slot />
+  </DialogFrame>
+</template>
+
+<script setup>
+const props = defineProps({
+  open: Boolean,
+  xClose: {
+    type: Boolean,
+    default: true,
+  },
+})
+const emit = defineEmits(['close'])
+
+const dialog = ref()
+
+onMounted(() => {
+  if (props.open) dialog.value.open()
+})
+watch(() => props.open, async () => {
+  if (props.open) dialog.value.open()
+  else {
+    await dialog.value.close()
+
+    // If it's open again (after the animation), open it again...
+    if (props.open) dialog.value.open()
+  }
+})
+</script>
+
+<style>
+</style>

package/app/components/Navbar.client.vue

@@ -0,0 +1,86 @@
+<template>
+  <nav v-if="isConnected">
+    <NuxtLink :to="{ name: 'id', params: { id: account } }">
+      <Icon type="home" />
+      <span>Home</span>
+    </NuxtLink>
+    <NuxtLink :to="{ name: 'profile-address', params: { address: account } }">
+      <Icon type="user" />
+      <span>Profile</span>
+    </NuxtLink>
+  </nav>
+</template>
+
+<script setup>
+import { useAccount } from '@wagmi/vue'
+
+const { address, isConnected } = useAccount()
+
+const account = computed(() => address.value.toLowerCase())
+</script>
+
+<style scoped>
+nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacer-lg);
+
+  > * {
+    padding: var(--size-4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacer-sm);
+    height: var(--size-6);
+    color: var(--gray-z-5);
+
+    :deep(> .icon) {
+      width: var(--size-6);
+      height: var(--size-6);
+    }
+
+    > span {
+      display: none;
+    }
+
+    &.router-link-active {
+      color: var(--color);
+    }
+  }
+}
+
+/* POSITIONAL */
+nav {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  height: var(--navbar-height);
+  z-index: 100;
+
+  @media (--md) {
+    top: 0;
+    right: auto;
+    flex-direction: column;
+    height: 100dvh;
+    width: var(--navbar-width);
+
+    /* FOR NOW */
+    display: none;
+  }
+}
+
+/* COLORS */
+nav {
+  background: var(--background-semi);
+  backdrop-filter: blur(var(--size-1));
+  border-top: var(--border);
+
+  @media (--md) {
+    background: none;
+    backdrop-filter: none;
+    border-top: none;
+  }
+}
+</style>

package/app/components/Page/Frame.vue

@@ -0,0 +1,77 @@
+<template>
+  <section class="frame">
+    <slot />
+  </section>
+</template>
+
+<script setup>
+
+const props = defineProps({
+  title: [String, Array],
+})
+
+const breadcrumbs = useAppBreadcrumb()
+const updateBreadcrumbs = () => {
+  if (Array.isArray(props.title)) {
+    breadcrumbs.value = props.title
+  } else {
+    breadcrumbs.value = []
+  }
+}
+onMounted(() => updateBreadcrumbs())
+watch(props, () => updateBreadcrumbs())
+</script>
+
+<style scoped>
+.frame {
+  margin: 0 auto;
+  gap: 0;
+  max-width: 100vw;
+  display: grid;
+  width: 100%;
+
+  &.inset {
+    gap: var(--spacer);
+    padding: var(--spacer);
+
+    > *:not(.borderless) {
+      border: var(--border);
+      padding: var(--spacer);
+    }
+  }
+
+  &:not(.inset) {
+    > * {
+      padding: var(--spacer);
+
+      &:not(.borderless):not(:last-child) {
+        border-bottom: var(--border);
+      }
+
+      @media (--md) {
+        padding: var(--spacer-lg) var(--spacer);
+      }
+    }
+  }
+
+  :deep(> *) {
+    width: 100%;
+  }
+
+  @media (--sm) {
+    min-height: 0;
+  }
+
+  @media (--md) {
+    max-width: var(--content-width);
+
+    &.wide {
+      max-width: var(--content-width-lg);
+    }
+
+    &.full {
+      max-width: 100%;
+    }
+  }
+}
+</style>

package/app/components/Page/FrameSM.vue

@@ -0,0 +1,33 @@
+<template>
+  <section class="frame-sm">
+    <slot />
+  </section>
+</template>
+
+<style scoped>
+.frame-sm {
+  width: 100%;
+  max-width: var(--dialog-width);
+  min-height: 100dvh;
+  padding: var(--spacer);
+  margin: 0 auto;
+  display: flex;
+  height: fit-content;
+  align-self: center;
+  flex-direction: column;
+  gap: var(--spacer-lg);
+  justify-content: center;
+  align-items: center;
+  background: var(--gray-z-1);
+
+  :deep(> div) {
+    width: 100%;
+  }
+
+  @media (--sm) {
+    min-height: 0;
+    margin: 0 auto 10vh;
+    border: var(--border);
+  }
+}
+</style>

package/app/components/Popover.client.vue

@@ -0,0 +1,119 @@
+<template>
+  <button
+    :popovertarget="id"
+    class="gas"
+    ref="trigger"
+    @mouseenter="() => popover.showPopover()"
+  ><slot name="trigger" /></button>
+
+  <Teleport to="body">
+    <div
+      popover
+      ref="popover"
+      :id="id"
+      :style="popoverPosition"
+      @mouseleave="() => popover.hidePopover()"
+    >
+      <div class="arrow" :style="popoverArrowPosition"></div>
+      <slot name="content" />
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+const {
+  id,
+} = defineProps({
+  id: String,
+})
+
+const trigger = ref()
+const popover = ref()
+
+const { width: windowWidth } = useWindowSize()
+const { width: dialogWidth } = useElementSize(popover, {}, { box: 'border-box' })
+const { x: targetX, y: targetY, width: targetWidth, height: targetHeight } = useElementBounding(trigger)
+const targetCenterX = computed(() => targetX.value + targetWidth.value / 2)
+const adjustmentX = computed(() => {
+  const popoverLeft = targetCenterX.value - (dialogWidth.value / 2)
+  const overflow = parseInt(windowWidth.value - (popoverLeft + dialogWidth.value) - 29)
+  return overflow < 0 ? overflow : 0
+})
+
+const popoverPosition = computed(() => {
+  return {
+    left: targetCenterX.value + adjustmentX.value + 'px',
+    top: targetY.value + targetHeight.value + 'px',
+  }
+})
+
+const popoverArrowPosition = computed(() => {
+  return {
+    left: dialogWidth.value/2 - adjustmentX.value + 'px',
+  }
+})
+</script>
+
+<style scoped>
+[popover] {
+  --width: min(100vw - var(--spacer)*2, var(--dialog-width));
+
+  position: fixed;
+  overflow: visible;
+  width: var(--width);
+  margin: 0;
+  transition: transform var(--speed), opacity var(--speed);
+  margin-left: calc(-0.5 * var(--width));
+
+  background: var(--background);
+  padding: var(--spacer);
+  border: var(--border);
+  color: var(--color);
+  box-shadow: var(--shadow);
+
+  &:popover-open {
+    opacity: 1;
+    transform: translateY(var(--spacer));
+  }
+
+  .arrow {
+    position: absolute;
+    border-top: var(--border);
+    border-left: var(--border);
+    background: var(--background);
+    transform: rotate(45deg);
+    margin-left: calc(-0.5 * var(--size-3));
+    width: var(--size-3);
+    height: var(--size-3);
+    top: calc(-1 * var(--size-2) + 1px);
+  }
+}
+
+
+@starting-style {
+  [popover]:popover-open {
+    opacity: 0;
+    transform: translateY(var(--spacer-lg));
+  }
+}
+
+/* BACKDROP */
+/* [popover]::backdrop {
+  background-color: var(--background-0);
+  transition:
+    display 0.7s allow-discrete,
+    overlay 0.7s allow-discrete,
+    background-color 0.7s;
+}
+
+[popover]:popover-open::backdrop {
+  background-color: var(--background-semi);
+  backdrop-filter: var(--blur);
+}
+
+@starting-style {
+  [popover]:popover-open::backdrop {
+    background-color: var(--background-0);
+  }
+} */
+</style>

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

@@ -0,0 +1,96 @@
+<template>
+  <header v-if="artist">
+    <slot name="before" />
+
+    <img :src="artist.avatar || `/icons/opepen.svg`" :alt="name">
+    <h1 @click="() => copy(address)">
+      <span>{{ name }}</span>
+      <small v-if="copied">copied...</small>
+      <small v-else-if="artist.ens">{{ shortAddress(address) }}</small>
+    </h1>
+    <p v-if="artist?.description">{{ artist.description }}</p>
+
+    <ul v-if="hasTags">
+      <Button v-if="validateURI(artist.url)" :to="validateURI(artist.url)" class="small">
+        <Icon type="globe" />
+        <span>{{ getMainDomain(artist.url) }}</span>
+      </Button>
+      <Button v-if="artist.email" :to="`mailto:${artist.email}`" class="small">
+        <Icon type="mail" />
+        <span>{{ artist.email }}</span>
+      </Button>
+      <Button v-if="artist.twitter" :to="`https://x.com/${artist.twitter}`" class="small">
+        <Icon type="x.com" />
+        <span>{{ artist.twitter }}</span>
+      </Button>
+      <Button v-if="artist.github" :to="`https://github.com/${artist.github}`" class="small">
+        <Icon type="github" />
+        <span>{{ artist.github }}</span>
+      </Button>
+    </ul>
+  </header>
+</template>
+
+<script setup>
+import { useClipboard } from '@vueuse/core'
+
+const props = defineProps({
+  address: String,
+})
+
+const store = useOnchainStore()
+
+const artist = computed(() => store.artist(props.address))
+const name = computed(() => artist.value?.ens || shortAddress(props.address))
+const artistAddress = computed(() => props.address)
+const { copy, copied } = useClipboard({ source: artistAddress })
+
+const hasTags = computed(() => artist.value.url ||
+  artist.value.email ||
+  artist.value.twitter ||
+  artist.value.github
+)
+</script>
+
+<style scoped>
+header {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacer);
+
+  img {
+    width: var(--size-9);
+    height: var(--size-9);
+    border-radius: 50%;
+    border: var(--border);
+  }
+
+  h1 {
+    cursor: pointer;
+    text-align: center;
+
+    > * {
+      display: block;
+    }
+
+    small {
+      color: var(--muted);
+      font-size: var(--font-xs);
+    }
+  }
+
+  p {
+    color: var(--muted);
+    text-align: center;
+  }
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacer-sm);
+    justify-content: center;
+  }
+}
+</style>

package/app/components/QueryDialog.vue

@@ -0,0 +1,38 @@
+<template>
+  <DialogFrame ref="dialog">
+    <div v-if="dialogId === 'email_verified'" class="inner">
+      <button class="close" @click="close"><Icon type="x" /></button>
+      <h1>Email verified!</h1>
+      <p>Thank you for verifying your email. We'll be in touch as soon as we're ready to launch.</p>
+      <div class="actions">
+        <button @click="close" class="button">Ok</button>
+      </div>
+    </div>
+  </DialogFrame>
+</template>
+
+<script setup>
+const route = useRoute()
+const router = useRouter()
+
+const KNOWN = [
+  'email_verified'
+]
+
+const dialog = ref()
+const dialogId = computed(() => route.query?.dialog)
+
+const close = () => {
+  dialog.value.close()
+  router.replace({ query: { ...route.query, dialog: undefined }})
+}
+
+onMounted(() => {
+  if (KNOWN.includes(dialogId.value)) {
+    dialog.value.open()
+  }
+})
+</script>
+
+<style>
+</style>

package/app/components/ToggleDarkMode.client.vue

@@ -0,0 +1,58 @@
+<template>
+  <button @click="() => toggleDark()" title="Switch Light/Dark mode">
+    <Icon v-if="isDark" type="sun" :size="20" />
+    <Icon v-else type="moon" :size="20" />
+  </button>
+</template>
+
+<script setup>
+import { useToggle } from '@vueuse/core'
+
+const toggleDark = useToggle(isDark)
+
+watch(isDark, () => {
+  if (isDark.value) {
+    document.documentElement.classList.remove('lightmode')
+    localStorage.setItem('color-scheme', 'dark')
+  } else {
+    document.documentElement.classList.add('lightmode')
+    localStorage.setItem('color-scheme', 'light')
+  }
+})
+
+onMounted(() => {
+  if (! isDark.value) {
+    document.documentElement.classList.add('lightmode')
+  }
+})
+</script>
+
+<style scoped>
+  button {
+    display: none;
+    position: fixed;
+    bottom: calc(var(--navbar-height) + var(--spacer));
+    right: var(--spacer);
+    height: var(--size-5);
+    width: var(--size-5);
+    outline: none;
+    z-index: 200;
+
+    .vue-feather {
+      height: var(--size-5);
+      width: var(--size-5);
+      transition: all var(--speed);
+    }
+
+    &:--highlight {
+      .vue-feather {
+        color: var(--gray-z-7);
+      }
+    }
+
+    @media (--md) {
+      display: block;
+      bottom: var(--spacer);
+    }
+  }
+</style>