@visualizevalue/mint-app-base 0.1.126 → 0.1.127

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/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>

package/composables/transactions.ts

@@ -0,0 +1,51 @@
+import { waitForTransactionReceipt } from '@wagmi/core'
+import type { TransactionReceipt } from 'viem'
+
+export interface TrackedTransaction {
+  hash: string
+  status: 'waiting' | 'complete' | 'error'
+  waitingText: string
+  completeText: string
+  txLink: string
+}
+
+export const useTransactionStore = defineStore('transactions', () => {
+  const { $wagmi } = useNuxtApp()
+  const config = useRuntimeConfig()
+
+  const pending = ref<TrackedTransaction[]>([])
+
+  const track = (
+    hash: string,
+    waitingText: string,
+    completeText: string,
+    onComplete?: (receipt: TransactionReceipt) => void,
+  ) => {
+    const entry: TrackedTransaction = reactive({
+      hash,
+      status: 'waiting',
+      waitingText,
+      completeText,
+      txLink: `${config.public.blockExplorer}/tx/${hash}`,
+    })
+
+    pending.value.push(entry)
+
+    waitForTransactionReceipt($wagmi, { hash: hash as `0x${string}` })
+      .then((receipt) => {
+        entry.status = 'complete'
+        onComplete?.(receipt)
+        setTimeout(() => remove(hash), 4000)
+      })
+      .catch(() => {
+        entry.status = 'error'
+        setTimeout(() => remove(hash), 8000)
+      })
+  }
+
+  const remove = (hash: string) => {
+    pending.value = pending.value.filter((t) => t.hash !== hash)
+  }
+
+  return { pending, track, remove }
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visualizevalue/mint-app-base",
-  "version": "0.1.126",
+  "version": "0.1.127",
   "type": "module",
   "main": "./nuxt.config.ts",
   "dependencies": {

package/plugins/transaction-toasts.client.ts

@@ -0,0 +1,13 @@
+import { createVNode, render } from 'vue'
+import TransactionToasts from '~/components/TransactionToasts.vue'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.hook('app:mounted', () => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+
+    const vnode = createVNode(TransactionToasts)
+    vnode.appContext = nuxtApp.vueApp._context
+    render(vnode, container)
+  })
+})