@1001-digital/layers.evm 0.0.7 → 0.0.8

package/app/components/EvmTransactionFlow.vue

@@ -1,7 +1,12 @@
 <template>
-  <slot :start="start" name="start"></slot>
-
-  <Dialog v-model:open="open" :x-close="false" class="transaction-flow">
+  <slot :start="start" :step="step" :open="open" name="start"></slot>
+
+  <Dialog
+    v-model:open="open"
+    :x-close="canDismiss"
+    :click-outside="canDismiss"
+    class="transaction-flow"
+  >
     <slot name="before" />
 
     <h1 v-if="text.title[step]">{{ text.title[step] }}</h1>
@@ -13,7 +18,12 @@
 
     <slot :name="step" :cancel="cancel"></slot>
 
-    <Button v-if="step === 'waiting'" :to="txLink" target="_blank" class="block-explorer">
+    <Button
+      v-if="step === 'waiting'"
+      :to="txLink"
+      target="_blank"
+      class="block-explorer"
+    >
       <Icon type="loader" class="spin" />
       <span>View on Block Explorer</span>
     </Button>
@@ -24,85 +34,95 @@
 
     <Actions v-if="step === 'confirm' || step === 'error'">
       <Button @click="cancel" class="secondary">Cancel</Button>
-      <Button @click="() => initializeRequest()">{{ text.action[step] || 'Execute' }}</Button>
+      <Button @click="() => initializeRequest()">{{
+        text.action[step] || "Execute"
+      }}</Button>
     </Actions>
   </Dialog>
 </template>
 
 <script setup lang="ts">
-import { waitForTransactionReceipt, watchChainId } from '@wagmi/core'
-import type { Config } from '@wagmi/vue'
-import type { TransactionReceipt, Hash } from 'viem'
+import { waitForTransactionReceipt, watchChainId } from "@wagmi/core";
+import type { Config } from "@wagmi/vue";
+import type { TransactionReceipt, Hash } from "viem";
 
 interface TextConfig {
-  title: Record<string, string>
-  lead: Record<string, string>
-  action: Record<string, string>
+  title: Record<string, string>;
+  lead: Record<string, string>;
+  action: Record<string, string>;
 }
 
-const checkChain = useEnsureChainIdCheck()
-
-const { $wagmi } = useNuxtApp()
-const config = useRuntimeConfig()
-
-const props = withDefaults(defineProps<{
-  text?: TextConfig
-  request?: () => Promise<Hash>
-  delayAfter?: number
-  delayAutoclose?: number
-  skipConfirmation?: boolean
-  autoCloseSuccess?: boolean
-}>(), {
-  text: () => ({
-    title: {
-      confirm: 'Confirm Transaction',
-    },
-    lead: {
-      confirm: 'Please review and confirm this transaction.',
-    },
-    action: {
-      confirm: 'Execute',
-    },
-  }),
-  delayAfter: 2000,
-  delayAutoclose: 2000,
-  skipConfirmation: false,
-  autoCloseSuccess: false,
-})
+const checkChain = useEnsureChainIdCheck();
+
+const { $wagmi } = useNuxtApp();
+const config = useRuntimeConfig();
+
+const props = withDefaults(
+  defineProps<{
+    text?: TextConfig;
+    request?: () => Promise<Hash>;
+    delayAfter?: number;
+    delayAutoclose?: number;
+    skipConfirmation?: boolean;
+    autoCloseSuccess?: boolean;
+    dismissable?: boolean;
+  }>(),
+  {
+    text: () => ({
+      title: {
+        confirm: "Confirm Transaction",
+      },
+      lead: {
+        confirm: "Please review and confirm this transaction.",
+      },
+      action: {
+        confirm: "Execute",
+      },
+    }),
+    delayAfter: 2000,
+    delayAutoclose: 2000,
+    skipConfirmation: false,
+    autoCloseSuccess: true,
+    dismissable: true,
+  },
+);
 
 const emit = defineEmits<{
-  complete: [receipt: TransactionReceipt]
-  cancel: []
-}>()
+  complete: [receipt: TransactionReceipt];
+  cancel: [];
+}>();
 
-const open = ref(false)
+const open = ref(false);
 
-const switchChain = ref(false)
+const switchChain = ref(false);
 watchChainId($wagmi as Config, {
   async onChange() {
-    if (!switchChain.value) return
+    if (!switchChain.value) return;
 
     if (await checkChain()) {
-      switchChain.value = false
-      initializeRequest()
+      switchChain.value = false;
+      initializeRequest();
     } else {
-      switchChain.value = true
+      switchChain.value = true;
     }
   },
-})
+});
 
-const cachedRequest = ref(props.request)
-watch(() => props.request, () => {
-  cachedRequest.value = props.request
-})
+const cachedRequest = ref(props.request);
+watch(
+  () => props.request,
+  () => {
+    cachedRequest.value = props.request;
+  },
+);
 
-const requesting = ref(false)
-const waiting = ref(false)
-const complete = ref(false)
-const error = ref('')
-const tx = ref<Hash | null>(null)
-const receipt = ref<TransactionReceipt | null>(null)
-const txLink = computed(() => `${config.public.blockExplorer}/tx/${tx.value}`)
+const requesting = ref(false);
+const waiting = ref(false);
+const complete = ref(false);
+const error = ref("");
+const tx = ref<Hash | null>(null);
+const receipt = ref<TransactionReceipt | null>(null);
+const txLink = computed(() => `${config.public.blockExplorer}/tx/${tx.value}`);
 
 const step = computed(() => {
   if (
@@ -112,96 +132,100 @@ const step = computed(() => {
     !waiting.value &&
     !complete.value
   ) {
-    return 'confirm'
+    return "confirm";
   }
 
   if (switchChain.value) {
-    return 'chain'
+    return "chain";
   }
 
   if (requesting.value) {
-    return 'requesting'
+    return "requesting";
   }
 
   if (waiting.value) {
-    return 'waiting'
+    return "waiting";
   }
 
   if (complete.value) {
-    return 'complete'
+    return "complete";
   }
 
-  return 'error'
-})
+  return "error";
+});
+
+const canDismiss = computed(
+  () => props.dismissable && step.value !== "requesting",
+);
 
 const initializeRequest = async (request = cachedRequest.value) => {
-  cachedRequest.value = request
-  complete.value = false
-  open.value = true
-  error.value = ''
-  tx.value = null
-  receipt.value = null
+  cachedRequest.value = request;
+  complete.value = false;
+  open.value = true;
+  error.value = "";
+  tx.value = null;
+  receipt.value = null;
 
   if (!(await checkChain())) {
-    switchChain.value = true
-    return
+    switchChain.value = true;
+    return;
   } else {
-    switchChain.value = false
+    switchChain.value = false;
   }
 
-  if (requesting.value) return
+  if (requesting.value) return;
 
   try {
-    requesting.value = true
-    tx.value = await request!()
-    requesting.value = false
-    waiting.value = true
+    requesting.value = true;
+    tx.value = await request!();
+    requesting.value = false;
+    waiting.value = true;
     const [receiptObject] = await Promise.all([
       waitForTransactionReceipt($wagmi as Config, { hash: tx.value }),
-    ])
-    await delay(props.delayAfter)
-    receipt.value = receiptObject
-    emit('complete', receiptObject)
-    complete.value = true
+    ]);
+    await delay(props.delayAfter);
+    receipt.value = receiptObject;
+    emit("complete", receiptObject);
+    complete.value = true;
   } catch (e: unknown) {
-    const err = e as { cause?: { code?: number }; shortMessage?: string }
+    const err = e as { cause?: { code?: number }; shortMessage?: string };
     if (err?.cause?.code === 4001) {
-      open.value = false
+      open.value = false;
     } else {
-      error.value = err.shortMessage || 'Error submitting transaction request.'
+      error.value = err.shortMessage || "Error submitting transaction request.";
     }
-    console.log(e)
+    console.log(e);
   }
 
-  requesting.value = false
-  waiting.value = false
+  requesting.value = false;
+  waiting.value = false;
 
-  if (props.autoCloseSuccess && step.value === 'complete') {
-    await delay(props.delayAutoclose)
-    open.value = false
-    await delay(300)
+  if (props.autoCloseSuccess && step.value === "complete") {
+    await delay(props.delayAutoclose);
+    open.value = false;
+    await delay(300);
   }
 
-  return receipt.value
-}
+  return receipt.value;
+};
 
 const start = () => {
   if (props.skipConfirmation && !open.value) {
-    initializeRequest()
+    initializeRequest();
   }
 
-  open.value = true
-}
+  open.value = true;
+};
 
 const cancel = () => {
-  open.value = false
+  open.value = false;
 
-  emit('cancel')
-}
+  emit("cancel");
+};
 
 defineExpose({
   initializeRequest,
-})
+});
 </script>
 
 <style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@1001-digital/layers.evm",
   "type": "module",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "main": "./nuxt.config.ts",
   "devDependencies": {
     "@nuxt/eslint": "latest",
@@ -10,10 +10,10 @@
     "nuxt": "^4.3.0",
     "typescript": "^5.9.3",
     "vue": "latest",
-    "@1001-digital/layers.base": "^0.0.14"
+    "@1001-digital/layers.base": "^0.0.17"
   },
   "peerDependencies": {
-    "@1001-digital/layers.base": "^0.0.14"
+    "@1001-digital/layers.base": "^0.0.17"
   },
   "dependencies": {
     "@types/qrcode": "^1.5.6",