@visualizevalue/mint-app-base 0.0.1

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

@@ -0,0 +1,194 @@
+<template>
+  <article class="token">
+    <div class="artifact">
+      <div :class="{ shaded }">
+        <Image :src="token.artifact" :alt="token.name" class="borderless" />
+      </div>
+    </div>
+
+    <MintToken
+      :token="token"
+      :mint-count="mintCount"
+      #default="{
+        displayPrice,
+        dollarPrice,
+        mintRequest,
+        minted,
+        mintOpen,
+        currentBlock,
+        blocksRemaining,
+        transactionFlowConfig
+      }"
+    >
+      <section class="details">
+        <header class="title">
+          <h1>{{ token.name }} <span class="muted-light">#{{ token.tokenId }}</span></h1>
+          <p v-if="token.description" class="muted-light">
+            <ExpandableText :text="token.description" :length="95" expand-text="Read More" />
+          </p>
+          <p class="muted-light">
+            By <NuxtLink :to="{ name: 'id', params: { id: collection.owner } }">{{ store.displayName(collection.owner) }}</NuxtLink>
+          </p>
+        </header>
+
+        <div v-if="mintOpen">
+          <MintTokenBar
+            v-model:mintCount="mintCount"
+            v-bind="{
+              token,
+              displayPrice,
+              dollarPrice,
+              mintRequest,
+              transactionFlowConfig,
+              minted,
+            }"
+          />
+        </div>
+
+        <div class="mint-status">
+          <p v-if="mintOpen">{{ blocksRemaining }} blocks remaining</p>
+          <p v-else-if="currentBlock" class="muted-light">Closed at block {{ token.untilBlock }}</p>
+          <p class="muted-light" v-if="ownedBalance">You own {{ ownedBalance }} {{ pluralize('token', Number(ownedBalance)) }}</p>
+        </div>
+
+        <TokenMintTimeline :token="token" :collection="collection" class="network-mints" />
+      </section>
+    </MintToken>
+  </article>
+</template>
+
+<script setup lang="ts">
+import ExpandableText from '../ExpandableText.vue'
+
+const { token } = defineProps<{
+  token: Token
+}>()
+
+const breakpoints = useBreakpoints()
+const shaded = computed(() => breakpoints.greater('sm').value && ! isDark.value)
+
+const store = useOnchainStore()
+const collection = computed(() => store.collection(token.collection))
+
+const mintCount = ref('1')
+const ownedBalance = computed(() => store.tokenBalance(collection.value.address, token.tokenId))
+</script>
+
+<style scoped>
+  .token {
+    position: relative;
+    container-type: inline-size;
+
+    display: grid;
+    grid-auto-rows: min-content;
+    padding: 0 !important;
+
+    @media (--md) {
+      height: calc(100dvh - var(--navbar-height));
+      grid-template-columns: 60% 1fr;
+      grid-auto-rows: auto;
+    }
+  }
+
+  .artifact {
+    --padding-x: 0;
+    --padding-top: 0;
+    --padding-bottom: 0;
+    --width: 100cqw;
+    /* --height: calc(100cqh - var(--padding-top) - var(--padding-bottom)); */
+    --height: 100%;
+    --dimension: min(100cqw, 100cqh);
+
+    @media (--md) {
+      --width: 60cqw;
+      --height: calc(100cqh - var(--navbar-height));
+      --padding-top: var(--spacer-lg);
+      --padding-x: var(--spacer-lg);
+      --padding-bottom: calc(var(--spacer-lg) + var(--spacer));
+      --padding-bottom: var(--spacer-lg);
+
+      --dimension: min(
+        calc(60cqw - var(--padding-x)*2),
+        calc(100cqh - var(--padding-top) - var(--padding-bottom))
+      );
+    }
+
+    @media (--lg) {
+      --padding-top: var(--spacer-xl);
+      --padding-x: var(--spacer-xl);
+      --padding-bottom: calc(var(--spacer-xl) + var(--spacer-lg));
+    }
+
+    height: var(--height);
+    width: var(--width);
+    padding: var(--padding-top) var(--padding-x) var(--padding-bottom);
+
+    @media (--md) {
+      border-right: var(--border);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    > * {
+      width: var(--dimension);
+      height: auto;
+      border-bottom: var(--border) !important;
+      transition: transform var(--speed-slow), box-shadow var(--speed-slow);
+
+      @media (--md) {
+        border-bottom: none !important;
+      }
+
+      &.shaded {
+        box-shadow: var(--shadow-xl);
+        transform: translateY(calc(-1 * var(--size-2))) scale(1.001);
+      }
+    }
+ }
+
+  .details {
+
+    @media (--md) {
+      overflow-y: auto;
+      -webkit-overflow-scrolling: auto;
+    }
+
+    > * {
+      border-bottom: var(--border);
+      padding: var(--spacer);
+
+      @media (--md) {
+        padding: var(--spacer) var(--spacer-lg);
+      }
+    }
+
+    header {
+      z-index: 100;
+      display: grid;
+      gap: var(--spacer-sm);
+      background: var(--background-semi);
+      backdrop-filter: var(--blur);
+
+      h1 {
+        font-size: var(--font-lg);
+      }
+
+      @media (--md) {
+        padding: var(--spacer-lg);
+        position: sticky;
+        top: 0;
+      }
+    }
+  }
+
+  .mint-status {
+    display: flex;
+    gap: var(--spacer);
+    flex-wrap: wrap;
+
+    @media (--md) {
+      justify-content: space-between;
+    }
+  }
+</style>

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

@@ -0,0 +1,110 @@
+<template>
+  <section>
+    <h1>Mint Timeline</h1>
+
+    <div v-if="currentBlock" class="table">
+      <TokenMintTimelineItem
+        v-for="mint of mints"
+        :mint="mint"
+        :key="mint.tx"
+        :block="currentBlock"
+      />
+      <div v-if="! loading || mints.length">
+        <span>
+          <Account :address="collection.owner" />
+        </span>
+
+        <span class="right">1<span class="muted-light">×</span></span>
+        <span class="right">Artist Mint</span>
+
+        <span class="right"><BlocksTimeAgo v-if="currentBlock" :blocks="currentBlock - (token.untilBlock - 7200n)" /></span>
+
+        <span class="right muted-light">
+          <NuxtLink :to="`${config.public.blockExplorer}/nft/${token.collection}/${token.tokenId}`" target="_blank">
+            <Icon type="link" />
+          </NuxtLink>
+        </span>
+      </div>
+    </div>
+
+    <Loading v-if="loading || ! currentBlock" txt="Mint History..." />
+  </section>
+</template>
+
+<script setup>
+import { useBlockNumber } from '@wagmi/vue'
+
+const config = useRuntimeConfig()
+const { data: currentBlock } = useBlockNumber({ chainId: config.public.chainId })
+
+const { token, collection } = defineProps({
+  token: Object,
+  collection: Object,
+})
+
+const state = useOnchainStore()
+
+const mints = computed(() => state.tokenMints(token.collection, token.tokenId))
+
+const loading = ref(false)
+onMounted(async () => {
+  loading.value = true
+  try {
+    await state.fetchTokenMints(token)
+    await state.backfillTokenMints(token)
+  } catch (e) {
+    console.error(e)
+  }
+  loading.value = false
+})
+
+watch(currentBlock, () => state.fetchTokenMints(token))
+</script>
+
+<style scoped>
+section {
+  padding-top: var(--spacer-lg) !important;
+  padding-bottom: var(--spacer-lg) !important;
+  container-type: inline-size;
+}
+
+h1 {
+  margin-bottom: var(--spacer);
+  font-size: var(--font-base);
+  border-bottom: var(--border);
+  padding: 0 0 var(--spacer-sm);
+  margin: 0 0 var(--spacer-lg);
+}
+
+.table {
+  display: grid;
+  gap: var(--spacer);
+
+  :deep(> div) {
+    display: grid;
+    gap: var(--spacer);
+
+    .right {
+      text-align: right;
+    }
+
+    span {
+      white-space: nowrap;
+
+      &:nth-child(3) {
+        display: none;
+
+        @container (min-width: 30rem) {
+          display: inline;
+        }
+      }
+    }
+
+    grid-template-columns: 6rem 3rem 1fr 3rem;
+
+    @container (min-width: 30rem) {
+      grid-template-columns: 6rem 3rem 1fr 6rem 1rem;
+    }
+  }
+}
+</style>

package/app/components/Token/MintTimelineItem.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <span>
+      <Account :address="mint.address" />
+    </span>
+
+    <span class="right">{{ mint.amount.toString() }}<span class="muted-light">×</span></span>
+
+    <span class="right">{{ formattedPrice.value }} {{ formattedPrice.format }}</span>
+
+    <span class="right"><BlocksTimeAgo :blocks="block - mint.block" /></span>
+
+    <span class="right muted-light">
+      <NuxtLink :to="`${config.public.blockExplorer}/tx/${mint.tx}`" target="_blank">
+        <Icon type="link" />
+      </NuxtLink>
+    </span>
+  </div>
+</template>
+
+<script setup>
+const config = useRuntimeConfig()
+
+const props = defineProps({
+  mint: Object,
+  block: BigInt,
+})
+
+const formattedPrice = computed(() => customFormatEther(props.mint.price))
+</script>
+
+<style scoped>
+</style>

package/app/components/Token/OverviewCard.vue

@@ -0,0 +1,140 @@
+<template>
+  <MintToken
+    :token="token"
+    :mintCount="mintCount"
+    #default="{
+      displayPrice,
+      dollarPrice,
+      mintRequest,
+      minted,
+      mintOpen,
+      blocksRemaining,
+      transactionFlowConfig
+    }"
+  >
+    <article class="token">
+      <div class="content">
+        <header>
+          <h1>
+            <span>{{ token.name }} <span class="muted">#{{ token.tokenId }}</span></span>
+            <span v-if="token.description">{{ shortString(token.description, 40, 30) }}</span>
+          </h1>
+          <p v-if="mintOpen" class="muted">Closes in {{ blocksRemaining }} {{ pluralize('block', Number(blocksRemaining))}}</p>
+          <p v-else class="muted">Closed at block {{ token.untilBlock }}</p>
+        </header>
+        <Image :src="token.artifact" :alt="token.name" />
+        <CardLink :to="{
+          name: 'id-collection-tokenId',
+          params: { id: collection.owner, collection: token.collection, tokenId: `${token.tokenId}` }
+        }">View {{ token.name }}</CardLink>
+      </div>
+      <footer>
+        <MintTokenBar
+          v-if="mintOpen"
+          v-model:mintCount="mintCount"
+          v-bind="{
+            token,
+            displayPrice,
+            dollarPrice,
+            mintRequest,
+            transactionFlowConfig,
+            minted,
+          }"
+        />
+        <p class="muted" v-if="ownedBalance">You own {{ ownedBalance }} "{{ token.name }}" {{ pluralize('token', Number(ownedBalance)) }}</p>
+      </footer>
+    </article>
+  </MintToken>
+</template>
+
+<script setup lang="ts">
+const { token } = defineProps<{
+  token: Token
+}>()
+
+const store = useOnchainStore()
+const collection = computed(() => store.collection(token.collection)) as ComputedRef<Collection>
+
+const mintCount = ref('1')
+const ownedBalance = computed(() => store.tokenBalance(collection.value.address, token.tokenId))
+</script>
+
+<style scoped>
+  .token,
+  .token > .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: var(--spacer);
+  }
+
+  .token {
+    padding: var(--spacer-xl) var(--spacer) !important;
+    border: 0 !important;
+
+    /* Tokens should be at min the screen height. */
+    &:not(:first-of-type) {
+      min-height: min(60rem, calc(100dvh - 2*var(--navbar-height)));
+
+      @media (--md) {
+        min-height: min(60rem, calc(100dvh - var(--navbar-height)));
+      }
+    }
+
+    > p {
+      color: var(--muted-light);
+      font-size: var(--font-sm);
+      text-align: left;
+    }
+  }
+
+  .token > .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: var(--spacer);
+
+    header {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacer-xs);
+
+      @media (--sm) {
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--spacer);
+      }
+    }
+
+    h1 {
+      span:last-of-type:not(:first-child) {
+        color: var(--muted-light);
+        white-space: wrap;
+        display: none;
+
+        @media (--md) {
+          display: block;
+        }
+      }
+
+      + p {
+        @media (--md) {
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  footer {
+    width: 100%;
+    display: flex;
+    gap: var(--spacer);
+    justify-content: space-between;
+    align-items: baseline;
+
+    > *:first-child:last-child {
+      margin-left: auto;
+    }
+  }
+</style>

package/app/components/TransactionFlow.vue

@@ -0,0 +1,225 @@
+<template>
+  <slot :start="start" name="start"></slot>
+
+  <Modal
+    :open="open"
+    @close="cancel"
+    :x-close="false"
+    class="transaction-flow"
+  >
+    <div class="text">
+      <CheckSpinner class="spinner" />
+      <h1 v-if="text.title[step]">{{ text.title[step] }}</h1>
+      <p class="muted-light">{{ text.lead[step] }}</p>
+      <p v-if="error">{{ error }}</p>
+    </div>
+
+    <slot :name="step" :cancel="cancel"></slot>
+
+    <Button v-if="step === 'waiting'" :to="txLink" target="_blank" class="block-explorer">
+      <Icon type="loader" class="spin" />
+      <span>View on Etherscan</span>
+    </Button>
+
+    <Actions v-if="step === 'chain'" class="centered">
+      <Button @click="cancel" class="secondary">Cancel</Button>
+    </Actions>
+    <Actions v-if="step === 'confirm' || step === 'error'">
+      <Button @click="cancel" class="secondary">Cancel</Button>
+      <Button @click="() => initializeRequest()">{{ text.action[step] || 'Execute' }}</Button>
+    </Actions>
+  </Modal>
+</template>
+
+<script setup>
+import { useChainId } from '@wagmi/vue'
+import { waitForTransactionReceipt } from '@wagmi/core'
+const checkChain = useEnsureChainIdCheck()
+const chainId = useChainId()
+
+const { $wagmi } = useNuxtApp()
+const config = useRuntimeConfig()
+const props = defineProps({
+  text: {
+    type: Object,
+    default: {
+      title: {
+        confirm: '[[Really?]]',
+      },
+      lead: {
+        confirm: '[[Do you really?]]'
+      },
+      action: {
+        confirm: '[[Do!]]',
+      }
+    },
+  },
+  request: Function,
+  delayAfter: {
+    type: Number,
+    default: 2_000,
+  },
+  skipConfirmation: Boolean,
+  autoCloseSuccess: Boolean,
+})
+
+const emit = defineEmits(['complete', 'cancel'])
+
+const open = ref(false)
+
+const switchChain = ref(false)
+watch(chainId, async () => {
+  if (! switchChain.value) return
+
+  if (await checkChain()) {
+    switchChain.value = false
+    initializeRequest()
+  } else {
+    switchChain.value = true
+  }
+})
+
+const requesting = ref(false)
+const waiting = ref(false)
+const complete = ref(false)
+const error = ref('')
+const tx = ref(null)
+const receipt = ref(null)
+const txLink = computed(() => `${config.public.blockExplorer}/tx/${tx.value}`)
+
+const step = computed(() => {
+  if (
+    open.value &&
+    !requesting.value &&
+    !switchChain.value &&
+    !waiting.value &&
+    !complete.value
+  ) {
+    return 'confirm'
+  }
+
+  if (switchChain.value) {
+    return 'chain'
+  }
+
+  if (requesting.value) {
+    return 'requesting'
+  }
+
+  if (waiting.value) {
+    return 'waiting'
+  }
+
+  if (complete.value) {
+    return 'complete'
+  }
+
+  return 'error'
+})
+
+const initializeRequest = async (request = props.request) => {
+  complete.value = false
+  open.value = true
+  error.value = ''
+  tx.value = null
+  receipt.value = null
+
+  if (! await checkChain()) {
+    switchChain.value = true
+    return
+  } else {
+    switchChain.value = false
+  }
+
+  if (requesting.value) return
+
+  try {
+    requesting.value = true
+    tx.value = await request()
+    requesting.value = false
+    waiting.value = true
+    const [receiptObject] = await Promise.all([
+      waitForTransactionReceipt($wagmi, { hash: tx.value }),
+      delay(6_000),
+    ])
+    await delay(props.delayAfter)
+    receipt.value = receiptObject
+    emit('complete', receiptObject)
+    complete.value = true
+  } catch (e) {
+    if (e?.cause?.code === 4001) {
+      open.value = false
+    } else {
+      error.value = e.shortMessage || 'Error submitting transaction request.'
+    }
+    console.log(e)
+  }
+
+  requesting.value = false
+  waiting.value = false
+
+  if (props.autoCloseSuccess) {
+    await delay(2_000)
+    open.value = false
+    await delay(300) // Animations...
+  }
+
+  return receipt.value
+}
+
+const start = () => {
+  if (props.skipConfirmation && !open.value) {
+    initializeRequest()
+  }
+
+  open.value = true
+}
+
+const cancel = () => {
+  open.value = false
+
+  emit('cancel')
+}
+
+defineExpose({
+  initializeRequest,
+})
+</script>
+
+<style>
+.transaction-flow {
+  display: grid;
+  justify-content: center;
+  gap: var(--spacer);
+
+  .spinner {
+    width: var(--size-7);
+    height: var(--size-7);
+    margin: calc(-1 * var(--size-4)) auto var(--size-3);
+  }
+
+  .text {
+    height: min-content;
+  }
+
+  h1 {
+    font-size: var(--font-lg);
+    margin-bottom: var(--size-4);
+    text-align: center;
+  }
+
+  p {
+    white-space: pre-wrap;
+    width: 100%;
+    text-align: center;
+
+    a {
+      text-decoration: underline;
+    }
+  }
+
+  .block-explorer {
+    justify-self: center;
+  }
+}
+</style>

package/app/components/Visual/ImagePreview.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="64" height="64" fill="var(--gray-z-0)"/>
+    <path d="M39 23H25C23.8954 23 23 23.8954 23 25V39C23 40.1046 23.8954 41 25 41H39C40.1046 41 41 40.1046 41 39V25C41 23.8954 40.1046 23 39 23Z" stroke="var(--gray-z-2)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M28.5 30C29.3284 30 30 29.3284 30 28.5C30 27.6716 29.3284 27 28.5 27C27.6716 27 27 27.6716 27 28.5C27 29.3284 27.6716 30 28.5 30Z" stroke="var(--gray-z-2)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M41 35L36 30L25 41" stroke="var(--gray-z-2)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+</template>