@1001-digital/layers.evm 1.0.0 → 1.0.2

package/.playground/app/app.config.ts

@@ -1,11 +1,11 @@
 export default defineAppConfig({
   evm: {
     title: 'EVM Layer Playground',
-    defaultChain: 'mainnet',
+    defaultChain: 'sepolia',
     chains: {
-      mainnet: {
-        id: 1,
-        blockExplorer: 'https://etherscan.io',
+      sepolia: {
+        id: 11155111,
+        blockExplorer: 'https://sepolia.etherscan.io',
       },
     },
   },

package/.playground/app/components/SignedIn.client.vue

@@ -14,26 +14,32 @@
     <h2>Transaction Flow Example</h2>
     <p>Send 0 ETH to your own address</p>
 
-    <EvmTransactionFlow :request="sendTransaction" :text="{
-      title: {
-        confirm: 'Send Transaction',
-        requesting: 'Requesting...',
-        waiting: 'Waiting for confirmation...',
-        complete: 'Transaction Complete!',
-        error: 'Transaction Error',
-      },
-      lead: {
-        confirm: 'This will send 0 ETH to your address as a test transaction.',
-        requesting: 'Please confirm the transaction in your wallet.',
-        waiting: 'Your transaction is being processed...',
-        complete: 'Your transaction has been confirmed on-chain.',
-        error: 'An error occurred while processing your transaction.',
-      },
-      action: {
-        confirm: 'Send Transaction',
-        error: 'Try Again',
-      },
-    }" @complete="onTransactionComplete" @cancel="onTransactionCancel">
+    <EvmTransactionFlow
+      :request="sendTransaction"
+      :text="{
+        title: {
+          confirm: 'Send Transaction',
+          requesting: 'Requesting...',
+          waiting: 'Waiting for confirmation...',
+          complete: 'Transaction Complete!',
+          error: 'Transaction Error',
+        },
+        lead: {
+          confirm:
+            'This will send 0 ETH to your address as a test transaction.',
+          requesting: 'Please confirm the transaction in your wallet.',
+          waiting: 'Your transaction is being processed...',
+          complete: 'Your transaction has been confirmed on-chain.',
+          error: 'An error occurred while processing your transaction.',
+        },
+        action: {
+          confirm: 'Send Transaction',
+          error: 'Try Again',
+        },
+      }"
+      @complete="onTransactionComplete"
+      @cancel="onTransactionCancel"
+    >
       <template #start="{ start }">
         <Actions>
           <Button @click="start">Start Transaction</Button>
@@ -47,10 +53,6 @@
           <p><strong>Chain:</strong> {{ chainId }}</p>
         </div>
       </template>
-
-      <template #complete>
-        <p class="success">Transaction confirmed successfully!</p>
-      </template>
     </EvmTransactionFlow>
   </Card>
 </template>

package/.playground/nuxt.config.ts

@@ -1,12 +1,19 @@
 import { fileURLToPath } from 'node:url'
 
+const layerDir = fileURLToPath(new URL('..', import.meta.url))
+
 export default defineNuxtConfig({
   extends: ['@1001-digital/layers.base', '..'],
   modules: ['@nuxt/eslint'],
   eslint: {
     config: {
       // Use the generated ESLint config for lint root project as well
-      rootDir: fileURLToPath(new URL('..', import.meta.url))
+      rootDir: layerDir,
     }
-  }
+  },
+  hooks: {
+    'vite:serverCreated': (server) => {
+      server.watcher.add(layerDir)
+    },
+  },
 })

package/app/components/EvmConnect.client.vue

@@ -1,35 +1,81 @@
 <template>
-  <Button v-if="showConnect" @click="chooseModalOpen = true" :class="className">
+  <Button
+    v-if="showConnect"
+    @click="chooseModalOpen = true"
+    :class="className"
+  >
     <slot>Connect Wallet</slot>
   </Button>
-  <slot v-else name="connected" :address="address">
+  <slot
+    v-else
+    name="connected"
+    :address="address"
+  >
     <EvmAccount :address="address" />
   </slot>
 
-  <Teleport to="body">
-    <Dialog v-if="showConnect" title="Connect Wallet" v-model:open="chooseModalOpen" @closed="onModalClosed">
-      <Alert v-if="errorMessage" type="error">
+  <Dialog
+    v-if="showConnect"
+    title="Connect Wallet"
+    v-model:open="chooseModalOpen"
+    @closed="onModalClosed"
+  >
+      <Alert
+        v-if="errorMessage"
+        type="error"
+      >
         {{ errorMessage }}
       </Alert>
-      <EvmWalletConnectQR v-if="walletConnectUri" :uri="walletConnectUri" />
-      <EvmMetaMaskQR v-else-if="metaMaskUri" :uri="metaMaskUri" />
+      <EvmWalletConnectQR
+        v-if="walletConnectUri"
+        :uri="walletConnectUri"
+      />
+      <EvmMetaMaskQR
+        v-else-if="metaMaskUri"
+        :uri="metaMaskUri"
+      />
       <template v-else-if="isConnecting">
-        <Loading txt="Waiting for wallet confirmation..." spinner />
+        <Loading
+          txt="Waiting for wallet confirmation..."
+          spinner
+          stacked
+        />
       </template>
-      <div v-else class="wallet-options">
-        <Button v-for="connector in shownConnectors" :key="connector.uid" @click="() => login(connector)"
-          class="choose-connector">
-          <img v-if="ICONS[connector.name]" :src="connector.icon || `${base}icons/wallets/${ICONS[connector.name]}`"
-            :alt="connector.name" />
+      <div
+        v-else
+        class="wallet-options"
+      >
+        <Button
+          v-for="connector in shownConnectors"
+          :key="connector.uid"
+          @click="() => login(connector)"
+          class="choose-connector"
+        >
+          <img
+            v-if="ICONS[connector.name]"
+            :src="
+              connector.icon || `${base}icons/wallets/${ICONS[connector.name]}`
+            "
+            :alt="connector.name"
+          />
+          <div
+            v-else
+            class="default-wallet-icon"
+          >
+            <Icon type="wallet" />
+          </div>
           <span>{{ connector.name }}</span>
         </Button>
-        <Button to="https://ethereum.org/wallets/" target="_blank" class="link muted small">
+        <Button
+          to="https://ethereum.org/wallets/"
+          target="_blank"
+          class="link muted small"
+        >
           <Icon type="help" />
           <span>New to wallets?</span>
         </Button>
       </div>
-    </Dialog>
-  </Teleport>
+  </Dialog>
 </template>
 
 <script setup lang="ts">
@@ -46,7 +92,7 @@ const ICONS: Record<string, string> = {
 }
 
 const PRIORITY: Record<string, number> = {
-  'WalletConnect': 20,
+  WalletConnect: 20,
   'Coinbase Wallet': 10,
 }
 
@@ -66,10 +112,13 @@ const { address, isConnected } = useConnection()
 const showConnect = computed(() => !isConnected.value)
 const shownConnectors = computed(() => {
   const unique = Array.from(
-    new Map(connectors?.map((connector) => [connector.name, connector])).values(),
+    new Map(
+      connectors?.map((connector) => [connector.name, connector]),
+    ).values(),
   )
 
-  const filtered = unique.length > 1 ? unique.filter((c) => c.id !== 'injected') : unique
+  const filtered =
+    unique.length > 1 ? unique.filter((c) => c.id !== 'injected') : unique
 
   return filtered.sort((a, b) => {
     const priorityA = PRIORITY[a.name] ?? 5
@@ -119,7 +168,11 @@ const login = async (connector: Connector) => {
     metaMaskUri.value = ''
 
     const errorMsg = error instanceof Error ? error.message : ''
-    if (errorMsg.includes('User rejected') || errorMsg.includes('rejected') || errorMsg.includes('denied')) {
+    if (
+      errorMsg.includes('User rejected') ||
+      errorMsg.includes('rejected') ||
+      errorMsg.includes('denied')
+    ) {
       errorMessage.value = 'Connection cancelled. Please try again.'
     } else {
       errorMessage.value = 'Failed to connect. Please try again.'
@@ -140,7 +193,9 @@ const onModalClosed = () => {
 }
 
 const check = () =>
-  isConnected.value ? emit('connected', { address: address.value }) : emit('disconnected')
+  isConnected.value
+    ? emit('connected', { address: address.value })
+    : emit('disconnected')
 watch(isConnected, () => check())
 onMounted(() => check())
 </script>
@@ -155,18 +210,25 @@ onMounted(() => check())
     inline-size: auto;
     justify-content: flex-start;
 
-    img {
+    img,
+    .default-wallet-icon {
       margin: -1rem 0 -1rem -0.6rem;
       width: var(--size-5);
       height: var(--size-5);
     }
 
-    span {
+    .default-wallet-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--gray-z-2);
+    }
+
+    span:last-child {
       border-left: var(--border);
       padding-left: var(--spacer-sm);
     }
   }
-
 }
 
 .link.muted {

package/app/components/EvmTransactionFlow.vue

@@ -1,82 +1,138 @@
 <template>
-  <slot :start="start" :step="step" :open="open" name="start"></slot>
+  <slot
+    :start="start"
+    :step="step"
+    :open="open"
+    name="start"
+  ></slot>
 
   <Dialog
     v-model:open="open"
-    :x-close="canDismiss"
+    :closable="canDismiss"
     :click-outside="canDismiss"
+    :title="text.title[step]"
     class="transaction-flow"
   >
     <slot name="before" />
 
-    <h1 v-if="text.title[step]">{{ text.title[step] }}</h1>
+    <Loading
+      v-if="step === 'requesting' || step === 'waiting'"
+      spinner
+      stacked
+      :txt="text.lead[step] || ''"
+    />
+
+    <p
+      v-if="
+        step !== 'requesting' &&
+        step !== 'waiting' &&
+        step !== 'error' &&
+        text.lead[step]
+      "
+    >
+      {{ text.lead[step] }}
+    </p>
 
-    <div class="text">
+    <Alert
+      v-if="error"
+      type="error"
+    >
       <p v-if="text.lead[step]">{{ text.lead[step] }}</p>
-      <p v-if="error">{{ error }}</p>
-    </div>
-
-    <slot :name="step" :cancel="cancel"></slot>
+      <p>{{ error }}</p>
+    </Alert>
 
     <Button
       v-if="step === 'waiting'"
       :to="txLink"
       target="_blank"
-      class="block-explorer"
+      class="link muted small centered"
     >
-      <Icon type="loader" class="spin" />
+      <Icon type="link" />
       <span>View on Block Explorer</span>
     </Button>
 
-    <Actions v-if="step === 'chain'">
-      <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>
+    <slot
+      :name="step"
+      :cancel="cancel"
+    ></slot>
+
+    <template #footer>
+      <template v-if="step === 'chain'">
+        <Button
+          @click="cancel"
+          class="secondary"
+          >Cancel</Button
+        >
+      </template>
+
+      <template v-if="step === 'confirm' || step === 'error'">
+        <Button
+          @click="cancel"
+          class="secondary"
+          >Cancel</Button
+        >
+        <Button @click="() => initializeRequest()">
+          {{ text.action[step] || 'Execute' }}
+        </Button>
+      </template>
+
+      <slot
+        name="actions"
+        :step="step"
+        :cancel="cancel"
+        :execute="() => initializeRequest()"
+        :tx-link="txLink"
+      />
+    </template>
   </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();
+type Step =
+  | 'idle'
+  | 'confirm'
+  | 'chain'
+  | 'requesting'
+  | 'waiting'
+  | 'complete'
+  | 'error'
 
-const { $wagmi } = useNuxtApp();
-const blockExplorer = useBlockExplorer();
+const slots = useSlots()
+const checkChain = useEnsureChainIdCheck()
+
+const { $wagmi } = useNuxtApp()
+const blockExplorer = useBlockExplorer()
 
 const props = withDefaults(
   defineProps<{
-    text?: TextConfig;
-    request?: () => Promise<Hash>;
-    delayAfter?: number;
-    delayAutoclose?: number;
-    skipConfirmation?: boolean;
-    autoCloseSuccess?: boolean;
-    dismissable?: boolean;
+    text?: TextConfig
+    request?: () => Promise<Hash>
+    delayAfter?: number
+    delayAutoclose?: number
+    skipConfirmation?: boolean
+    autoCloseSuccess?: boolean
+    dismissable?: boolean
   }>(),
   {
     text: () => ({
       title: {
-        confirm: "Confirm Transaction",
+        confirm: 'Confirm Transaction',
       },
       lead: {
-        confirm: "Please review and confirm this transaction.",
+        confirm: 'Please review and confirm this transaction.',
       },
       action: {
-        confirm: "Execute",
+        confirm: 'Execute',
       },
     }),
     delayAfter: 2000,
@@ -85,170 +141,129 @@ const props = withDefaults(
     autoCloseSuccess: true,
     dismissable: true,
   },
-);
+)
 
 const emit = defineEmits<{
-  complete: [receipt: TransactionReceipt];
-  cancel: [];
-}>();
-
-const open = ref(false);
+  complete: [receipt: TransactionReceipt]
+  cancel: []
+}>()
+
+const step = ref<Step>('idle')
+
+const open = computed({
+  get: () => step.value !== 'idle',
+  set: (v) => {
+    if (!v) {
+      step.value = 'idle'
+      error.value = ''
+    }
+  },
+})
 
-const switchChain = ref(false);
 watchChainId($wagmi as Config, {
   async onChange() {
-    if (!switchChain.value) return;
+    if (step.value !== 'chain') return
 
     if (await checkChain()) {
-      switchChain.value = false;
-      initializeRequest();
-    } else {
-      switchChain.value = true;
+      initializeRequest()
     }
   },
-});
+})
 
-const cachedRequest = ref(props.request);
+const cachedRequest = ref(props.request)
 watch(
   () => props.request,
-  () => {
-    cachedRequest.value = props.request;
+  (v) => {
+    cachedRequest.value = v
   },
-);
-
-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(() => `${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 error = ref('')
+const tx = ref<Hash | null>(null)
+const receipt = ref<TransactionReceipt | null>(null)
+const txLink = computed(() => `${blockExplorer}/tx/${tx.value}`)
 
 const canDismiss = computed(
-  () => props.dismissable && step.value !== "requesting",
-);
+  () =>
+    props.dismissable &&
+    step.value !== 'requesting' &&
+    step.value !== 'waiting',
+)
 
 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
+  error.value = ''
+  tx.value = null
+  receipt.value = null
+  step.value = 'confirm'
 
   if (!(await checkChain())) {
-    switchChain.value = true;
-    return;
-  } else {
-    switchChain.value = false;
+    step.value = 'chain'
+    return
   }
 
-  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 as Config, { hash: tx.value }),
-    ]);
-    await delay(props.delayAfter);
-    receipt.value = receiptObject;
-    emit("complete", receiptObject);
-    complete.value = true;
+    step.value = 'requesting'
+    tx.value = await request!()
+    step.value = 'waiting'
+    const receiptObject = await waitForTransactionReceipt($wagmi as Config, {
+      hash: tx.value,
+    })
+    await delay(props.delayAfter)
+    receipt.value = receiptObject
+    emit('complete', receiptObject)
+    step.value = 'complete'
   } 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;
+      error.value = 'Transaction rejected by user.'
+      step.value = 'error'
     } else {
-      error.value = err.shortMessage || "Error submitting transaction request.";
+      error.value = err.shortMessage || 'Error submitting transaction request.'
+      step.value = 'error'
     }
-    console.log(e);
+    console.log(e)
   }
 
-  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)
+    step.value = 'idle'
+    await delay(300)
   }
 
-  return receipt.value;
-};
+  return receipt.value
+}
 
 const start = () => {
-  if (props.skipConfirmation && !open.value) {
-    initializeRequest();
+  if (props.skipConfirmation && step.value === 'idle') {
+    initializeRequest()
+    return
   }
 
-  open.value = true;
-};
+  step.value = 'confirm'
+}
 
 const cancel = () => {
-  open.value = false;
-
-  emit("cancel");
-};
+  step.value = 'idle'
+  error.value = ''
+  emit('cancel')
+}
 
 defineExpose({
   initializeRequest,
-});
+})
 </script>
 
 <style>
-.transaction-flow {
+.transaction-flow > section {
   display: grid;
   gap: var(--spacer);
 
-  .spinner {
-    width: var(--size-7);
-    height: var(--size-7);
-    margin: calc(-1 * var(--size-4)) 0 var(--size-3);
-  }
-
   .text {
     width: 100%;
     height: min-content;
   }
 
-  h1 {
-    font-size: var(--font-lg);
-    margin-bottom: var(--size-4);
-  }
-
   p {
     white-space: pre-wrap;
     width: 100%;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@1001-digital/layers.evm",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "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.17"
+    "@1001-digital/layers.base": "^0.0.19"
   },
   "peerDependencies": {
-    "@1001-digital/layers.base": "^0.0.17"
+    "@1001-digital/layers.base": "^0.0.19"
   },
   "dependencies": {
     "@types/qrcode": "^1.5.6",