@visualizevalue/mint-app-base 0.1.126 → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Visualize Value
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/components/Collection/Withdraw.client.vue

@@ -17,7 +17,7 @@
       error: 'Retry',
       complete: 'OK',
     },
-  }" skip-confirmation auto-close-success @complete="onComplete">
+  }" skip-confirmation auto-close-success toast @complete="onComplete">
     <template #start="{ start }">
       <Button @click="start">
         <Icon type="withdraw" />

package/components/MintTokenBar.vue

@@ -20,6 +20,7 @@
       @complete="onMinted"
       skip-confirmation
       auto-close-success
+      toast
     >
       <template #start="{ start }">
         <Button @click="start" class="mint">

package/components/Token/MintTimeline.client.vue

@@ -16,7 +16,7 @@
         :block="currentBlock"
       >
         <template #after>
-          <TokenMintTimelineItem v-if="backfillComplete">
+          <TokenMintTimelineItem>
             <Account :address="collection.owner" class="account" />
 
             <span class="amount">1<span>×</span></span>
@@ -34,17 +34,12 @@
       </TokenMintTimelineVirtualScroller>
       </template>
 
-      <div v-if="! backfillComplete" v-show="! loading" ref="loadMore" class="load-more">
-        <Button @click="backfill">{{ $t('token.load_more')}}</Button>
-      </div>
-
       <Loading v-if="loading || ! currentBlock" :txt="$t('token.loading_mint_history')" />
     </slot>
   </section>
 </template>
 
 <script setup>
-import { useElementVisibility } from '@vueuse/core'
 import { useBlockNumber } from '@wagmi/vue'
 
 const config = useRuntimeConfig()
@@ -58,7 +53,6 @@ const { token, collection } = defineProps({
 const state = useOnchainStore()
 
 const mints = computed(() => state.tokenMints(token.collection, token.tokenId))
-const backfillComplete = computed(() => token.mintsBackfilledUntilBlock <= token.mintedBlock)
 
 const sortBy = ref('recent')
 const sortedMints = computed(() => {
@@ -72,46 +66,17 @@ const sortedMints = computed(() => {
 })
 
 const loading = ref(true)
-const loadMore = ref()
-const loadMoreVisible = useElementVisibility(loadMore)
-const backfill = async () => {
-  loading.value = true
-
-  try {
-    await state.backfillTokenMints(token)
-
-    // If we're not fully backfilled and we have less than 20 mints loaded,
-    // continue backfilling events.
-    while (! backfillComplete.value && mints.value?.length < 20) {
-      await delay(250)
-      await state.backfillTokenMints(token)
-    }
-  } catch (e) {
-    console.error(`Issue during backfill`, e)
-  }
-
-  loading.value = false
-}
 
 onMounted(async () => {
   loading.value = true
   try {
-    console.info(`Attempting to load + backfill token mints for #${token.tokenId}`)
     await state.fetchTokenMints(token)
-    await backfill()
   } catch (e) {
     console.error(e)
   }
   loading.value = false
 })
 
-watch(loadMoreVisible, () => {
-  // Skip if we have enough mints for the viewport or we're already loading
-  if (! loadMoreVisible.value || loading.value) return
-
-  backfill()
-})
-
 watch(currentBlock, () => {
   if (loading.value) return
 
@@ -171,11 +136,4 @@ watch(currentBlock, () => {
   }
 }
 
-
-.load-more {
-  .button {
-    display: block;
-    width: 100%;
-  }
-}
 </style>

package/components/TransactionFlow.vue

@@ -35,10 +35,12 @@
 
 <script setup>
 import { waitForTransactionReceipt, watchChainId } from '@wagmi/core'
+
 const checkChain = useEnsureChainIdCheck()
 
 const { $wagmi } = useNuxtApp()
 const config = useRuntimeConfig()
+const txStore = useTransactionStore()
 const props = defineProps({
   text: {
     type: Object,
@@ -65,10 +67,12 @@ const props = defineProps({
   },
   skipConfirmation: Boolean,
   autoCloseSuccess: Boolean,
+  toast: Boolean,
 })
 
 const emit = defineEmits(['complete', 'cancel'])
 
+
 const open = ref(false)
 
 const switchChain = ref(false)
@@ -147,14 +151,30 @@ const initializeRequest = async (request = cachedRequest.value) => {
     requesting.value = true
     tx.value = await request()
     requesting.value = false
-    waiting.value = true
-    const [receiptObject] = await Promise.all([
-      waitForTransactionReceipt($wagmi, { hash: tx.value }),
-    ])
-    await delay(props.delayAfter)
-    receipt.value = receiptObject
-    emit('complete', receiptObject)
-    complete.value = true
+
+    if (!props.toast) {
+      // Blocking mode: wait for receipt in the modal (used for multi-step flows)
+      waiting.value = true
+      const [receiptObject] = await Promise.all([
+        waitForTransactionReceipt($wagmi, { hash: tx.value }),
+      ])
+      await delay(props.delayAfter)
+      receipt.value = receiptObject
+      emit('complete', receiptObject)
+      complete.value = true
+    } else {
+      // Toast mode: close modal and track in background
+      open.value = false
+      txStore.track(
+        tx.value,
+        props.text.lead?.waiting || 'Transaction submitted...',
+        props.text.lead?.complete || 'Transaction confirmed.',
+        (receiptObject) => {
+          receipt.value = receiptObject
+          emit('complete', receiptObject)
+        },
+      )
+    }
   } catch (e) {
     if (e?.cause?.code === 4001) {
       open.value = false
@@ -167,7 +187,7 @@ const initializeRequest = async (request = cachedRequest.value) => {
   requesting.value = false
   waiting.value = false
 
-  if (props.autoCloseSuccess && step.value === 'complete') {
+  if (!props.toast && props.autoCloseSuccess && step.value === 'complete') {
     await delay(props.delayAutoclose)
     open.value = false
     await delay(300) // Animations...

package/components/TransactionToasts.vue

@@ -0,0 +1,43 @@
+<template>
+  <TransitionGroup name="fade" tag="div" class="transaction-toasts">
+    <a
+      v-for="tx in txStore.pending"
+      :key="tx.hash"
+      :href="tx.txLink"
+      target="_blank"
+      class="transaction-toast"
+    >
+      <Icon
+        :type="tx.status === 'waiting' ? 'loader' : 'check'"
+        :class="{ spin: tx.status === 'waiting' }"
+      />
+      <span>{{ tx.status === 'complete' ? tx.completeText : tx.waitingText }}</span>
+    </a>
+  </TransitionGroup>
+</template>
+
+<script setup>
+const txStore = useTransactionStore()
+</script>
+
+<style>
+.transaction-toasts {
+  position: fixed;
+  top: var(--navbar-height);
+  right: var(--size-6);
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacer-sm);
+}
+
+.transaction-toast {
+  display: flex;
+  align-items: center;
+  gap: var(--spacer-sm);
+  padding: var(--ui-padding-y) var(--ui-padding-x);
+  background: var(--background);
+  border: var(--border);
+  font-size: var(--font-sm);
+}
+</style>