@1001-digital/layers.evm 1.0.9 → 1.0.10

package/.playground/app/pages/index.vue

@@ -15,6 +15,11 @@
     </Card>
 
     <SignedIn />
+
+    <Card>
+      <h2>Pages</h2>
+      <NuxtLink to="/transaction-flow">Transaction Flow States</NuxtLink>
+    </Card>
   </div>
 </template>
 

package/.playground/app/pages/transaction-flow.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="playground">
+    <h1>EvmTransactionFlow States</h1>
+    <p><NuxtLink to="/">&larr; Back</NuxtLink></p>
+
+    <Card>
+      <h2>Confirm</h2>
+      <p>Opens the dialog at the confirmation step.</p>
+
+      <EvmTransactionFlow
+        :request="hangingRequest"
+        :text="{
+          title: { confirm: 'Confirm Transfer' },
+          lead: {
+            confirm: 'You are about to send 1 ETH to vitalik.eth.',
+          },
+          action: { confirm: 'Send' },
+        }"
+      >
+        <template #start="{ start }">
+          <Actions>
+            <Button @click="start">Open Confirm</Button>
+          </Actions>
+        </template>
+
+        <template #confirm>
+          <div class="tx-details">
+            <p><strong>To:</strong> vitalik.eth</p>
+            <p><strong>Amount:</strong> 1 ETH</p>
+            <p><strong>Network:</strong> Sepolia</p>
+          </div>
+        </template>
+      </EvmTransactionFlow>
+    </Card>
+
+    <Card>
+      <h2>Requesting</h2>
+      <p>Skips confirmation, shows the loading spinner while awaiting wallet signature.</p>
+
+      <EvmTransactionFlow
+        skip-confirmation
+        :dismissable="false"
+        :request="hangingRequest"
+        :text="{
+          title: { requesting: 'Awaiting Signature' },
+          lead: { requesting: 'Please confirm in your wallet...' },
+        }"
+      >
+        <template #start="{ start }">
+          <Actions>
+            <Button @click="start">Open Requesting</Button>
+          </Actions>
+        </template>
+      </EvmTransactionFlow>
+    </Card>
+
+    <Card>
+      <h2>Error: User Rejected</h2>
+      <p>Simulates a user rejecting the transaction in their wallet.</p>
+
+      <EvmTransactionFlow
+        skip-confirmation
+        :request="rejectedRequest"
+      >
+        <template #start="{ start }">
+          <Actions>
+            <Button @click="start">Open Rejected</Button>
+          </Actions>
+        </template>
+      </EvmTransactionFlow>
+    </Card>
+
+    <Card>
+      <h2>Error: Transaction Failed</h2>
+      <p>Simulates a generic transaction error.</p>
+
+      <EvmTransactionFlow
+        skip-confirmation
+        :request="failedRequest"
+        :text="{
+          title: { error: 'Transfer Failed' },
+          action: { error: 'Retry' },
+        }"
+      >
+        <template #start="{ start }">
+          <Actions>
+            <Button @click="start">Open Failed</Button>
+          </Actions>
+        </template>
+      </EvmTransactionFlow>
+    </Card>
+
+    <Card>
+      <h2>Waiting &amp; Complete (Toast)</h2>
+      <p>
+        After signing, the dialog closes and a toast tracks the receipt.
+        This mock resolves instantly and shows the success toast.
+      </p>
+
+      <EvmTransactionFlow
+        skip-confirmation
+        :request="successRequest"
+        :delay-after="0"
+        :delay-autoclose="5000"
+        :text="{
+          title: {
+            waiting: 'Transfer Pending',
+            complete: 'Transfer Complete',
+          },
+          lead: {
+            waiting: 'Waiting for on-chain confirmation...',
+            complete: 'Your transfer has been confirmed.',
+          },
+        }"
+      >
+        <template #start="{ start }">
+          <Actions>
+            <Button @click="start">Open Waiting/Complete</Button>
+          </Actions>
+        </template>
+      </EvmTransactionFlow>
+    </Card>
+
+    <Card>
+      <h2>Chain Switch</h2>
+      <p>
+        Shown when the connected wallet is on a different chain.
+        Connect to a non-Sepolia network to see this state.
+      </p>
+
+      <EvmTransactionFlow
+        :request="hangingRequest"
+        :text="{
+          title: { chain: 'Wrong Network' },
+          lead: { chain: 'Please switch to Sepolia to continue.' },
+        }"
+      >
+        <template #start="{ start }">
+          <Actions>
+            <Button @click="start">Open Chain Switch</Button>
+          </Actions>
+        </template>
+      </EvmTransactionFlow>
+    </Card>
+
+    <Card>
+      <h2>Custom Actions Slot</h2>
+      <p>Uses the <code>actions</code> slot to add custom footer buttons.</p>
+
+      <EvmTransactionFlow
+        :request="hangingRequest"
+        :text="{
+          title: { confirm: 'Custom Actions' },
+          lead: { confirm: 'This dialog has custom footer actions.' },
+        }"
+      >
+        <template #start="{ start }">
+          <Actions>
+            <Button @click="start">Open Custom Actions</Button>
+          </Actions>
+        </template>
+
+        <template #actions="{ cancel, step }">
+          <template v-if="step === 'confirm'">
+            <Button class="secondary" @click="cancel">Nevermind</Button>
+            <Button class="secondary">Save Draft</Button>
+            <Button>Approve &amp; Send</Button>
+          </template>
+        </template>
+      </EvmTransactionFlow>
+    </Card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Hash } from 'viem'
+
+const delay = (ms: number) => new Promise((r) => setTimeout(r, ms))
+
+const hangingRequest = () => new Promise<Hash>(() => {})
+
+const rejectedRequest = async (): Promise<Hash> => {
+  await delay(500)
+  const err = new Error('User rejected the request.')
+  ;(err as any).cause = { code: 4001 }
+  ;(err as any).shortMessage = 'User rejected the request.'
+  throw err
+}
+
+const failedRequest = async (): Promise<Hash> => {
+  await delay(500)
+  const err = new Error('Insufficient funds for gas.')
+  ;(err as any).shortMessage = 'Insufficient funds for gas.'
+  throw err
+}
+
+const successRequest = async (): Promise<Hash> => {
+  await delay(500)
+  return '0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef' as Hash
+}
+</script>
+
+<style scoped>
+.playground {
+  max-width: 50rem;
+  margin: 0 auto;
+  padding: var(--spacer);
+  display: grid;
+  gap: var(--spacer);
+}
+
+.tx-details {
+  padding: var(--size-4);
+  background: var(--gray-z-1);
+  border-radius: var(--radius);
+  display: grid;
+  gap: var(--size-3);
+}
+
+.tx-details p {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: var(--font-sm);
+}
+</style>

package/.playground/nuxt.config.ts

@@ -1,7 +1,9 @@
 import { fileURLToPath } from 'node:url'
 
 const layerDir = fileURLToPath(new URL('..', import.meta.url))
-const componentsDir = fileURLToPath(new URL('../../components/src', import.meta.url))
+const componentsDir = fileURLToPath(
+  new URL('../../components/src', import.meta.url),
+)
 
 export default defineNuxtConfig({
   extends: ['@1001-digital/layers.base', '..'],

package/app/composables/ens.ts

@@ -1 +1,5 @@
-export { useEns, useEnsWithAvatar, useEnsProfile } from '@1001-digital/components'
+export {
+  useEns,
+  useEnsWithAvatar,
+  useEnsProfile,
+} from '@1001-digital/components'

package/app/plugins/price-feed.client.ts

@@ -1,7 +1,11 @@
-export default defineNuxtPlugin(() => {
-  const priceFeed = usePriceFeed()
+export default defineNuxtPlugin({
+  name: 'price-feed',
+  dependsOn: ['wagmi'],
+  setup() {
+    const priceFeed = usePriceFeed()
 
-  priceFeed.fetchPrice()
+    priceFeed.fetchPrice()
 
-  setInterval(() => priceFeed.fetchPrice(), 60 * 60 * 1000)
+    setInterval(() => priceFeed.fetchPrice(), 60 * 60 * 1000)
+  },
 })

package/app/plugins/wagmi.ts

@@ -22,104 +22,107 @@ import {
   type EvmConfig,
 } from '@1001-digital/components'
 
-export default defineNuxtPlugin((nuxtApp) => {
-  const appConfig = useAppConfig()
-  const runtimeConfig = nuxtApp.$config.public.evm as {
-    walletConnectProjectId: string
-    chains: Record<string, { rpc1?: string; rpc2?: string; rpc3?: string }>
-    ens: { indexer1?: string; indexer2?: string; indexer3?: string }
-  }
+export default defineNuxtPlugin({
+  name: 'wagmi',
+  setup(nuxtApp) {
+    const appConfig = useAppConfig()
+    const runtimeConfig = nuxtApp.$config.public.evm as {
+      walletConnectProjectId: string
+      chains: Record<string, { rpc1?: string; rpc2?: string; rpc3?: string }>
+      ens: { indexer1?: string; indexer2?: string; indexer3?: string }
+    }
 
-  const title = appConfig.evm?.title || 'EVM Layer'
-  const chainEntries = appConfig.evm?.chains || {}
+    const title = appConfig.evm?.title || 'EVM Layer'
+    const chainEntries = appConfig.evm?.chains || {}
 
-  // Build chains and transports from config
-  const chains: [Chain, ...Chain[]] = [] as unknown as [Chain, ...Chain[]]
-  const transports: Record<number, Transport> = {}
+    // Build chains and transports from config
+    const chains: [Chain, ...Chain[]] = [] as unknown as [Chain, ...Chain[]]
+    const transports: Record<number, Transport> = {}
 
-  for (const [key, entry] of Object.entries(chainEntries)) {
-    const chain = resolveChain(entry.id!)
-    chains.push(chain)
+    for (const [key, entry] of Object.entries(chainEntries)) {
+      const chain = resolveChain(entry.id!)
+      chains.push(chain)
 
-    const rpcs = runtimeConfig.chains?.[key]
-    const transportList = []
-    if (rpcs?.rpc1) transportList.push(http(rpcs.rpc1))
-    if (rpcs?.rpc2) transportList.push(http(rpcs.rpc2))
-    if (rpcs?.rpc3) transportList.push(http(rpcs.rpc3))
-    transportList.push(http())
+      const rpcs = runtimeConfig.chains?.[key]
+      const transportList = []
+      if (rpcs?.rpc1) transportList.push(http(rpcs.rpc1))
+      if (rpcs?.rpc2) transportList.push(http(rpcs.rpc2))
+      if (rpcs?.rpc3) transportList.push(http(rpcs.rpc3))
+      transportList.push(http())
 
-    transports[chain.id] = fallback(transportList)
-  }
+      transports[chain.id] = fallback(transportList)
+    }
 
-  // Connectors
-  const connectors: CreateConnectorFn[] = [
-    injected(),
-    coinbaseWallet({
-      appName: title,
-      appLogoUrl: '',
-    }),
-    metaMask({
-      headless: true,
-      dappMetadata: {
-        name: title,
-        iconUrl: '',
-        url: '',
-      },
-    }),
-  ]
-
-  if (import.meta.client && runtimeConfig.walletConnectProjectId)
-    connectors.push(
-      walletConnect({
-        projectId: runtimeConfig.walletConnectProjectId,
-        showQrModal: false,
+    // Connectors
+    const connectors: CreateConnectorFn[] = [
+      injected(),
+      coinbaseWallet({
+        appName: title,
+        appLogoUrl: '',
       }),
-    )
+      metaMask({
+        headless: true,
+        dappMetadata: {
+          name: title,
+          iconUrl: '',
+          url: '',
+        },
+      }),
+    ]
+
+    if (import.meta.client && runtimeConfig.walletConnectProjectId)
+      connectors.push(
+        walletConnect({
+          projectId: runtimeConfig.walletConnectProjectId,
+          showQrModal: false,
+        }),
+      )
 
-  const wagmiConfig: Config = createConfig({
-    chains,
-    batch: {
-      multicall: true,
-    },
-    connectors,
-    storage: createStorage({
-      storage: cookieStorage,
-    }),
-    ssr: true,
-    transports,
-  })
+    const wagmiConfig: Config = createConfig({
+      chains,
+      batch: {
+        multicall: true,
+      },
+      connectors,
+      storage: createStorage({
+        storage: cookieStorage,
+      }),
+      ssr: true,
+      transports,
+    })
 
-  // Build EvmConfig from Nuxt app/runtime config
-  const indexerUrls = [
-    runtimeConfig.ens?.indexer1,
-    runtimeConfig.ens?.indexer2,
-    runtimeConfig.ens?.indexer3,
-  ].filter(Boolean) as string[]
+    // Build EvmConfig from Nuxt app/runtime config
+    const indexerUrls = [
+      runtimeConfig.ens?.indexer1,
+      runtimeConfig.ens?.indexer2,
+      runtimeConfig.ens?.indexer3,
+    ].filter(Boolean) as string[]
 
-  const evmConfig: EvmConfig = {
-    title,
-    defaultChain: appConfig.evm?.defaultChain || 'mainnet',
-    chains: Object.fromEntries(
-      Object.entries(chainEntries).map(([key, entry]) => [
-        key,
-        { id: entry.id!, blockExplorer: entry.blockExplorer },
-      ]),
-    ),
-    ens: {
-      mode: appConfig.evm?.ens?.mode || 'indexer',
-      indexerUrls,
-    },
-    baseURL: nuxtApp.$config.app.baseURL,
-  }
+    const evmConfig: EvmConfig = {
+      title,
+      defaultChain: appConfig.evm?.defaultChain || 'mainnet',
+      chains: Object.fromEntries(
+        Object.entries(chainEntries).map(([key, entry]) => [
+          key,
+          { id: entry.id!, blockExplorer: entry.blockExplorer },
+        ]),
+      ),
+      ens: {
+        mode: appConfig.evm?.ens?.mode || 'indexer',
+        indexerUrls,
+      },
+      baseURL: nuxtApp.$config.app.baseURL,
+    }
 
-  nuxtApp.vueApp
-    .use(WagmiPlugin, { config: wagmiConfig })
-    .use(VueQueryPlugin, {})
-    .provide(EvmConfigKey, evmConfig)
+    nuxtApp.vueApp
+      .use(WagmiPlugin, { config: wagmiConfig })
+      .use(VueQueryPlugin, {})
+      .provide(EvmConfigKey, evmConfig)
 
-  return {
-    provide: {
-      wagmi: wagmiConfig,
-    },
-  }
+    return {
+      provide: {
+        wagmi: wagmiConfig,
+      },
+    }
+  },
 })

package/app/utils/ens.ts

@@ -1,2 +1,8 @@
-export { ensCache, fetchEnsFromIndexer, fetchEnsFromChain, ENS_KEYS_AVATAR, ENS_KEYS_PROFILE } from '@1001-digital/components'
+export {
+  ensCache,
+  fetchEnsFromIndexer,
+  fetchEnsFromChain,
+  ENS_KEYS_AVATAR,
+  ENS_KEYS_PROFILE,
+} from '@1001-digital/components'
 export type { EnsProfile } from '@1001-digital/components'

package/nuxt.config.ts

@@ -1,14 +1,24 @@
 import { fileURLToPath } from 'node:url'
+import { createRequire } from 'node:module'
+import { dirname } from 'node:path'
+
+const require = createRequire(import.meta.url)
 
 const componentsDir = fileURLToPath(
   new URL('../components/src/evm/components', import.meta.url),
 )
 
+// Force all @wagmi/vue imports to resolve to a single copy.
+// pnpm creates separate instances per dependency set, each with its own
+// Symbol-based configKey — breaking Vue's provide/inject across packages.
+const wagmiVue = dirname(require.resolve('@wagmi/vue/package.json'))
+
 const clientOnlyComponents = [
   'EvmAccount',
   'EvmConnect',
   'EvmConnectorQR',
   'EvmMetaMaskQR',
+  'EvmTransactionFlow',
   'EvmWalletConnectQR',
 ]
 
@@ -54,7 +64,9 @@ export default defineNuxtConfig({
 
   vite: {
     resolve: {
-      dedupe: ['@wagmi/vue', '@wagmi/core', 'viem'],
+      alias: {
+        '@wagmi/vue': wagmiVue,
+      },
     },
     optimizeDeps: {
       include: [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@1001-digital/layers.evm",
   "type": "module",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "main": "./nuxt.config.ts",
   "devDependencies": {
     "@nuxt/eslint": "latest",
@@ -10,19 +10,18 @@
     "nuxt": "^4.3.0",
     "typescript": "^5.9.3",
     "vue": "latest",
-    "@1001-digital/layers.base": "^0.0.32"
+    "@1001-digital/layers.base": "^0.0.33"
   },
   "peerDependencies": {
-    "@1001-digital/layers.base": "^0.0.32"
+    "@1001-digital/layers.base": "^0.0.33"
   },
   "dependencies": {
-    "@metamask/sdk": "~0.34.0",
+    "@metamask/sdk": "~0.33.1",
     "@tanstack/vue-query": "^5.92.9",
-    "@wagmi/core": "^3.3.2",
-    "@wagmi/vue": "^0.4.15",
+    "@wagmi/vue": "^0.5.0",
     "@walletconnect/ethereum-provider": "~2.23.4",
     "viem": "~2.45.1",
-    "@1001-digital/components": "^0.0.2"
+    "@1001-digital/components": "^0.0.3"
   },
   "scripts": {
     "dev": "nuxi dev .playground",