@1001-digital/layers.evm 1.0.1 → 1.0.3

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,19 @@
     <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' },
+        lead: {
+          confirm:
+            'This will send 0 ETH to your address as a test transaction.',
+        },
+        action: { confirm: 'Send Transaction' },
+      }"
+      @complete="onTransactionComplete"
+      @cancel="onTransactionCancel"
+    >
       <template #start="{ start }">
         <Actions>
           <Button @click="start">Start Transaction</Button>
@@ -47,10 +40,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

@@ -8,57 +8,82 @@
 
   <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
-      txt=""
+      stacked
+      :txt="text.lead[step] || ''"
     />
 
-    <div class="text">
-      <p v-if="text.lead[step]">{{ text.lead[step] }}</p>
-      <p v-if="error">{{ error }}</p>
-    </div>
+    <p
+      v-if="
+        step !== 'requesting' &&
+        step !== 'waiting' &&
+        step !== 'error' &&
+        text.lead[step]
+      "
+    >
+      {{ text.lead[step] }}
+    </p>
 
-    <slot
-      :name="step"
-      :cancel="cancel"
-    ></slot>
+    <Alert
+      v-if="error"
+      type="error"
+    >
+      <p v-if="text.lead[step]">{{ text.lead[step] }}</p>
+      <p>{{ error }}</p>
+    </Alert>
 
     <Button
       v-if="step === 'waiting'"
       :to="txLink"
       target="_blank"
-      class="block-explorer"
+      class="link muted small centered"
     >
-      View on Block Explorer
+      <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>
 
@@ -68,9 +93,9 @@ 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>
 }
 
 type Step =
@@ -82,6 +107,29 @@ type Step =
   | 'complete'
   | 'error'
 
+const defaultText = {
+  title: {
+    confirm: 'Confirm Transaction',
+    chain: 'Switch Network',
+    requesting: 'Requesting',
+    waiting: 'Processing',
+    complete: 'Complete',
+    error: 'Error',
+  },
+  lead: {
+    confirm: 'Please review and confirm this transaction.',
+    chain: 'Please switch to the correct network to continue.',
+    requesting: 'Requesting transaction signature...',
+    waiting: 'Waiting for transaction confirmation...',
+    complete: 'Transaction confirmed successfully.',
+  },
+  action: {
+    confirm: 'Execute',
+    error: 'Try Again',
+  },
+} satisfies TextConfig
+
+const slots = useSlots()
 const checkChain = useEnsureChainIdCheck()
 
 const { $wagmi } = useNuxtApp()
@@ -98,17 +146,6 @@ const props = withDefaults(
     dismissable?: boolean
   }>(),
   {
-    text: () => ({
-      title: {
-        confirm: 'Confirm Transaction',
-      },
-      lead: {
-        confirm: 'Please review and confirm this transaction.',
-      },
-      action: {
-        confirm: 'Execute',
-      },
-    }),
     delayAfter: 2000,
     delayAutoclose: 2000,
     skipConfirmation: false,
@@ -122,12 +159,21 @@ const emit = defineEmits<{
   cancel: []
 }>()
 
+const text = computed<Required<TextConfig>>(() => ({
+  title: { ...defaultText.title, ...props.text?.title },
+  lead: { ...defaultText.lead, ...props.text?.lead },
+  action: { ...defaultText.action, ...props.text?.action },
+}))
+
 const step = ref<Step>('idle')
 
 const open = computed({
   get: () => step.value !== 'idle',
   set: (v) => {
-    if (!v) step.value = 'idle'
+    if (!v) {
+      step.value = 'idle'
+      error.value = ''
+    }
   },
 })
 
@@ -187,7 +233,8 @@ const initializeRequest = async (request = cachedRequest.value) => {
   } catch (e: unknown) {
     const err = e as { cause?: { code?: number }; shortMessage?: string }
     if (err?.cause?.code === 4001) {
-      step.value = 'idle'
+      error.value = 'Transaction rejected by user.'
+      step.value = 'error'
     } else {
       error.value = err.shortMessage || 'Error submitting transaction request.'
       step.value = 'error'
@@ -215,6 +262,7 @@ const start = () => {
 
 const cancel = () => {
   step.value = 'idle'
+  error.value = ''
   emit('cancel')
 }
 
@@ -224,7 +272,7 @@ defineExpose({
 </script>
 
 <style>
-.transaction-flow {
+.transaction-flow > section {
   display: grid;
   gap: var(--spacer);
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@1001-digital/layers.evm",
   "type": "module",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "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",