@1001-digital/layers.evm 1.0.6 → 1.0.8

package/.claude/settings.local.json

@@ -1,7 +1,5 @@
 {
   "permissions": {
-    "allow": [
-      "Bash(pnpm typecheck:*)"
-    ]
+    "allow": ["Bash(pnpm typecheck:*)"]
   }
 }

package/.env.example

@@ -1,4 +1,9 @@
 NUXT_PUBLIC_EVM_WALLET_CONNECT_PROJECT_ID=""
+
 NUXT_PUBLIC_EVM_CHAINS_MAINNET_RPC1=""
 NUXT_PUBLIC_EVM_CHAINS_MAINNET_RPC2=""
 NUXT_PUBLIC_EVM_CHAINS_MAINNET_RPC3=""
+
+NUXT_PUBLIC_EVM_ENS_INDEXER1=""
+NUXT_PUBLIC_EVM_ENS_INDEXER2=""
+NUXT_PUBLIC_EVM_ENS_INDEXER3=""

package/.playground/app/app.vue

@@ -1,3 +1,4 @@
 <template>
   <NuxtPage />
+  <Toasts />
 </template>

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

@@ -18,8 +18,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
 
 <style scoped>
 .playground {

package/.playground/nuxt.config.ts

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

package/AGENTS.md

@@ -18,6 +18,7 @@ Nuxt layer for building dAPPs (Ethereum-powered applications). Extends `@1001-di
 ## Wagmi Configuration
 
 Uses modern wagmi 0.4.x patterns:
+
 - `useConnection` (not deprecated `useAccount`)
 - `useConnectionEffect` (not deprecated `useAccountEffect`)
 - `useSwitchConnection` (not deprecated `useSwitchAccount`)
@@ -29,7 +30,7 @@ Connectors: injected, coinbaseWallet, metaMask, walletConnect
 ## Components
 
 - `EvmConnect.client.vue` - Wallet connection button with modal
-- `EvmAccount.client.vue` - Address display with ENS resolution
+- `EvmAccount.client.vue` - Address display
 - `EvmTransactionFlow.vue` - Guided transaction execution flow
 - `EvmConnectorQR.client.vue` - Base QR code renderer
 - `EvmWalletConnectQR.client.vue` - WalletConnect QR wrapper
@@ -42,7 +43,6 @@ Connectors: injected, coinbaseWallet, metaMask, walletConnect
 - `useBlockExplorer(key?)` - Get block explorer URL for a named chain
 - `useEnsureChainIdCheck()` - Validate/switch chain before transactions
 - `useBaseURL()` - Get base URL with trailing slash
-- `useClipboard()` - Copy text to clipboard with copied state
 
 ## Utilities
 

package/README.md

@@ -38,7 +38,7 @@ Then add the dependency to their `extends` in `nuxt.config`:
 
 ```ts
 defineNuxtConfig({
-  extends: 'your-layer'
+  extends: 'your-layer',
 })
 ```
 

package/app/composables/base.ts

@@ -1,5 +1 @@
-export const useBaseURL = () => {
-  const config = useRuntimeConfig()
-
-  return config.app.baseURL.endsWith('/') ? config.app.baseURL : config.app.baseURL + '/'
-}
+export { useBaseURL } from '@1001-digital/components'

package/app/composables/chainId.ts

@@ -1,42 +1,6 @@
-import { useConnection, useSwitchChain } from '@wagmi/vue'
-
-interface ChainConfig {
-  id?: number
-  blockExplorer?: string
-}
-
-const getDefaultChainKey = () => useAppConfig().evm?.defaultChain || 'mainnet'
-
-export const useChainConfig = (key?: string) => {
-  const appConfig = useAppConfig()
-  const resolvedKey = key || getDefaultChainKey()
-  const chains = appConfig.evm?.chains as Record<string, ChainConfig> | undefined
-  const chain = chains?.[resolvedKey]
-
-  return {
-    id: chain?.id ?? 1,
-    blockExplorer: chain?.blockExplorer ?? 'https://etherscan.io',
-  }
-}
-
-export const useMainChainId = () => useChainConfig().id
-
-export const useBlockExplorer = (key?: string) => useChainConfig(key).blockExplorer
-
-export const useEnsureChainIdCheck = () => {
-  const chainId = useMainChainId()
-  const { switchChain } = useSwitchChain()
-  const { chainId: currentChainId } = useConnection()
-
-  return async () => {
-    if (chainId !== currentChainId.value) {
-      switchChain({ chainId })
-    }
-
-    if (chainId === currentChainId.value) {
-      return true
-    }
-
-    return false
-  }
-}
+export {
+  useChainConfig,
+  useMainChainId,
+  useBlockExplorer,
+  useEnsureChainIdCheck,
+} from '@1001-digital/components'

package/app/plugins/wagmi.ts

@@ -9,14 +9,25 @@ import {
   type Config,
   type CreateConnectorFn,
 } from '@wagmi/vue'
-import { coinbaseWallet, injected, metaMask, walletConnect } from '@wagmi/vue/connectors'
+import {
+  coinbaseWallet,
+  injected,
+  metaMask,
+  walletConnect,
+} from '@wagmi/vue/connectors'
 import type { Chain, Transport } from 'viem'
+import {
+  EvmConfigKey,
+  resolveChain,
+  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 }>
+    chains: Record<string, { rpc1?: string; rpc2?: string; rpc3?: string }>
+    ens: { indexer1?: string; indexer2?: string; indexer3?: string }
   }
 
   const title = appConfig.evm?.title || 'EVM Layer'
@@ -78,7 +89,33 @@ export default defineNuxtPlugin((nuxtApp) => {
     transports,
   })
 
-  nuxtApp.vueApp.use(WagmiPlugin, { config: wagmiConfig }).use(VueQueryPlugin, {})
+  // 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,
+  }
+
+  nuxtApp.vueApp
+    .use(WagmiPlugin, { config: wagmiConfig })
+    .use(VueQueryPlugin, {})
+    .provide(EvmConfigKey, evmConfig)
 
   return {
     provide: {

package/app/utils/addresses.ts

@@ -1,4 +1 @@
-import type { Address } from 'viem'
-
-export const shortAddress = (address: Address, length: number = 3) =>
-  address.substring(0, length + 2) + '...' + address.substring(address.length - length)
+export { shortAddress } from '@1001-digital/components'

package/app/utils/chains.ts

@@ -1,13 +1 @@
-import { defineChain, type Chain } from 'viem'
-import { mainnet, sepolia, holesky, optimism, arbitrum, base, polygon, localhost } from 'viem/chains'
-
-const KNOWN: Chain[] = [mainnet, sepolia, holesky, optimism, arbitrum, base, polygon, localhost]
-const byId = new Map<number, Chain>(KNOWN.map(c => [c.id, c]))
-
-export const resolveChain = (id: number): Chain =>
-  byId.get(id) ?? defineChain({
-    id,
-    name: `Chain ${id}`,
-    nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
-    rpcUrls: { default: { http: [] } },
-  })
+export { resolveChain } from '@1001-digital/components'

package/app/utils/format-eth.ts

@@ -1,12 +1 @@
-export function formatETH(value: string | number, maxDecimals: number = 3): string {
-  const numberValue = typeof value === 'string' ? parseFloat(value) : value
-
-  if (isNaN(numberValue)) {
-    throw new Error('Invalid number input')
-  }
-
-  return new Intl.NumberFormat('en-US', {
-    minimumFractionDigits: 0,
-    maximumFractionDigits: maxDecimals,
-  }).format(numberValue)
-}
+export { formatETH } from '@1001-digital/components'

package/nuxt.config.ts

@@ -1,9 +1,39 @@
+import { fileURLToPath } from 'node:url'
+
+const componentsDir = fileURLToPath(
+  new URL('../components/src/evm/components', import.meta.url),
+)
+
+const clientOnlyComponents = [
+  'EvmAccount',
+  'EvmConnect',
+  'EvmConnectorQR',
+  'EvmMetaMaskQR',
+  'EvmWalletConnectQR',
+]
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   extends: ['@1001-digital/layers.base'],
 
   modules: ['@wagmi/vue/nuxt'],
 
+  hooks: {
+    'components:dirs': (dirs) => {
+      dirs.push({
+        path: componentsDir,
+        pathPrefix: false,
+      })
+    },
+    'components:extend': (components) => {
+      for (const c of components) {
+        if (clientOnlyComponents.includes(c.pascalName)) {
+          c.mode = 'client'
+        }
+      }
+    },
+  },
+
   ssr: process.env.NUXT_SSR !== 'false',
 
   runtimeConfig: {
@@ -23,6 +53,9 @@ export default defineNuxtConfig({
   },
 
   vite: {
+    resolve: {
+      dedupe: ['@wagmi/vue', '@wagmi/core', 'viem'],
+    },
     optimizeDeps: {
       include: [
         '@1001-digital/layers.evm > @metamask/sdk',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@1001-digital/layers.evm",
   "type": "module",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "main": "./nuxt.config.ts",
   "devDependencies": {
     "@nuxt/eslint": "latest",
@@ -10,20 +10,19 @@
     "nuxt": "^4.3.0",
     "typescript": "^5.9.3",
     "vue": "latest",
-    "@1001-digital/layers.base": "^0.0.26"
+    "@1001-digital/layers.base": "^0.0.32"
   },
   "peerDependencies": {
-    "@1001-digital/layers.base": "^0.0.26"
+    "@1001-digital/layers.base": "^0.0.32"
   },
   "dependencies": {
-    "@types/qrcode": "^1.5.6",
     "@metamask/sdk": "~0.34.0",
     "@tanstack/vue-query": "^5.92.9",
     "@wagmi/core": "^3.3.2",
     "@wagmi/vue": "^0.4.15",
     "@walletconnect/ethereum-provider": "~2.23.4",
-    "qrcode": "^1.5.4",
-    "viem": "~2.45.1"
+    "viem": "~2.45.1",
+    "@1001-digital/components": "^0.0.1"
   },
   "scripts": {
     "dev": "nuxi dev .playground",

package/app/components/EvmAccount.client.vue

@@ -1,26 +0,0 @@
-<template>
-  <slot :display="display" :is-current="isCurrent">
-    <span>{{ display }}</span>
-  </slot>
-</template>
-
-<script setup lang="ts">
-import type { Address } from 'viem'
-import { useConnection } from '@wagmi/vue'
-
-const props = defineProps<{
-  address?: Address
-  mode?: 'indexer' | 'chain'
-}>()
-const address = computed(() => props.address)
-
-const { address: currentAddress } = useConnection()
-
-const isCurrent = computed<boolean>(
-  () => currentAddress.value?.toLowerCase() === address.value?.toLowerCase(),
-)
-
-const { data: profile } = useEns(address, { mode: computed(() => props.mode) })
-
-const display = computed<string>(() => profile.value?.ens || shortAddress(address.value!))
-</script>

package/app/components/EvmConnect.client.vue

@@ -1,238 +0,0 @@
-<template>
-  <Button
-    v-if="showConnect"
-    @click="chooseModalOpen = true"
-    :class="className"
-  >
-    <slot>Connect Wallet</slot>
-  </Button>
-  <slot
-    v-else
-    name="connected"
-    :address="address"
-  >
-    <EvmAccount :address="address" />
-  </slot>
-
-  <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"
-      />
-      <template v-else-if="isConnecting">
-        <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="default-wallet-icon"
-          >
-            <Icon type="wallet" />
-          </div>
-          <span>{{ connector.name }}</span>
-        </Button>
-        <Button
-          to="https://ethereum.org/wallets/"
-          target="_blank"
-          class="link muted small"
-        >
-          <Icon type="help" />
-          <span>New to wallets?</span>
-        </Button>
-      </div>
-  </Dialog>
-</template>
-
-<script setup lang="ts">
-import type { Connector } from '@wagmi/vue'
-import { useConnection, useConnect, useChainId } from '@wagmi/vue'
-
-const ICONS: Record<string, string> = {
-  'Coinbase Wallet': 'coinbase.svg',
-  MetaMask: 'metamask.svg',
-  Phantom: 'phantom.svg',
-  'Rabby Wallet': 'rabby.svg',
-  Rainbow: 'rainbow.svg',
-  WalletConnect: 'walletconnect.svg',
-}
-
-const PRIORITY: Record<string, number> = {
-  WalletConnect: 20,
-  'Coinbase Wallet': 10,
-}
-
-defineProps<{
-  className?: string
-}>()
-const emit = defineEmits<{
-  connected: [{ address: `0x${string}` | undefined }]
-  disconnected: []
-}>()
-const base = useBaseURL()
-
-const chainId = useChainId()
-const { connectors, connectAsync } = useConnect()
-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(),
-  )
-
-  const filtered =
-    unique.length > 1 ? unique.filter((c) => c.id !== 'injected') : unique
-
-  return filtered.sort((a, b) => {
-    const priorityA = PRIORITY[a.name] ?? 5
-    const priorityB = PRIORITY[b.name] ?? 5
-    return priorityA - priorityB
-  })
-})
-
-const chooseModalOpen = ref(false)
-const errorMessage = ref('')
-const isConnecting = ref(false)
-const walletConnectUri = ref('')
-const metaMaskUri = ref('')
-
-const login = async (connector: Connector) => {
-  errorMessage.value = ''
-  isConnecting.value = true
-  walletConnectUri.value = ''
-  metaMaskUri.value = ''
-
-  const handleMessage = (event: { type: string; data?: unknown }) => {
-    if (event.type === 'display_uri' && typeof event.data === 'string') {
-      if (connector.id === 'walletConnect') {
-        walletConnectUri.value = event.data
-      } else if (connector.id === 'metaMaskSDK') {
-        metaMaskUri.value = event.data
-      }
-    }
-  }
-
-  if (connector.id === 'walletConnect' || connector.id === 'metaMaskSDK') {
-    connector.emitter.on('message', handleMessage)
-  }
-
-  try {
-    await connectAsync({ connector, chainId: chainId.value })
-
-    setTimeout(() => {
-      chooseModalOpen.value = false
-      isConnecting.value = false
-      walletConnectUri.value = ''
-      metaMaskUri.value = ''
-    }, 100)
-  } catch (error: unknown) {
-    isConnecting.value = false
-    walletConnectUri.value = ''
-    metaMaskUri.value = ''
-
-    const errorMsg = error instanceof Error ? error.message : ''
-    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.'
-    }
-    console.error('Wallet connection error:', error)
-  } finally {
-    if (connector.id === 'walletConnect' || connector.id === 'metaMaskSDK') {
-      connector.emitter.off('message', handleMessage)
-    }
-  }
-}
-
-const onModalClosed = () => {
-  errorMessage.value = ''
-  isConnecting.value = false
-  walletConnectUri.value = ''
-  metaMaskUri.value = ''
-}
-
-const check = () =>
-  isConnected.value
-    ? emit('connected', { address: address.value })
-    : emit('disconnected')
-watch(isConnected, () => check())
-onMounted(() => check())
-</script>
-
-<style scoped>
-.wallet-options {
-  display: grid;
-  gap: var(--spacer);
-
-  button.choose-connector {
-    width: 100%;
-    inline-size: auto;
-    justify-content: flex-start;
-
-    img,
-    .default-wallet-icon {
-      margin: -1rem 0 -1rem -0.6rem;
-      width: var(--size-5);
-      height: var(--size-5);
-    }
-
-    .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 {
-  justify-self: center;
-  font-size: var(--font-xs);
-}
-</style>

package/app/components/EvmConnectorQR.client.vue

@@ -1,108 +0,0 @@
-<template>
-  <p>
-    <slot name="instruction">Scan the code in your wallet application</slot>
-  </p>
-  <div class="qr-frame">
-    <canvas ref="qrCanvas"></canvas>
-  </div>
-  <p class="uri-label">Or copy the connection URI:</p>
-  <div class="uri-display">
-    <code>{{ uri }}</code>
-    <Button @click="copyUri" class="copy-button" :class="{ copied: isCopied }">
-      <Icon :type="isCopied ? 'check' : 'copy'" />
-    </Button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import QRCode from 'qrcode'
-
-const props = defineProps<{
-  uri: string
-}>()
-
-const qrCanvas = ref<HTMLCanvasElement | null>(null)
-const { copy, copied: isCopied } = useClipboard()
-
-const generateQR = async () => {
-  if (!qrCanvas.value || !props.uri) return
-
-  try {
-    await QRCode.toCanvas(qrCanvas.value, props.uri, {
-      width: 300,
-      margin: 2,
-      color: {
-        dark: '#000000',
-        light: '#FFFFFF',
-      },
-    })
-  } catch (error) {
-    console.error('Failed to generate QR code:', error)
-  }
-}
-
-const copyUri = () => copy(props.uri)
-
-watch(() => props.uri, generateQR, { immediate: true })
-
-onMounted(() => {
-  generateQR()
-})
-</script>
-
-<style scoped>
-p {
-  text-align: center;
-  @mixin ui-font;
-  color: var(--muted);
-  font-size: var(--font-sm);
-}
-
-.qr-frame {
-  background: white;
-  padding: var(--spacer-sm);
-  max-width: 15rem;
-  max-height: 15rem;
-  border: var(--border);
-  border-radius: var(--border-radius);
-  margin: 0 auto;
-
-  canvas {
-    width: 100% !important;
-    height: 100% !important;
-  }
-}
-
-.uri-display {
-  display: flex;
-  align-items: center;
-  gap: var(--spacer-xs);
-  background: var(--color-bg-secondary);
-  border: var(--border);
-  border-radius: var(--border-radius-sm);
-  overflow: hidden;
-  height: min-content;
-  padding: 0;
-
-  code {
-    flex: 1;
-    font-size: var(--font-xs);
-    font-family: monospace;
-    white-space: nowrap;
-    overflow: hidden;
-    padding: 0 var(--spacer-sm);
-    color: var(--muted);
-  }
-
-  .copy-button {
-    flex-shrink: 0;
-    padding: var(--spacer-xs);
-    min-width: auto;
-    margin: -1px;
-
-    &.copied {
-      color: var(--color-success);
-    }
-  }
-}
-</style>

package/app/components/EvmMetaMaskQR.client.vue

@@ -1,13 +0,0 @@
-<template>
-  <EvmConnectorQR :uri="uri">
-    <template #instruction>
-      Scan the code in your MetaMask mobile app
-    </template>
-  </EvmConnectorQR>
-</template>
-
-<script setup lang="ts">
-defineProps<{
-  uri: string
-}>()
-</script>

package/app/components/EvmTransactionFlow.vue

@@ -1,293 +0,0 @@
-<template>
-  <slot
-    :start="start"
-    :step="step"
-    :open="open"
-    name="start"
-  ></slot>
-
-  <Dialog
-    v-model:open="open"
-    :closable="canDismiss"
-    :click-outside="canDismiss"
-    :title="text.title[step]"
-    class="transaction-flow"
-  >
-    <slot name="before" />
-
-    <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>
-
-    <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="link muted small centered"
-    >
-      <Icon type="link" />
-      <span>View on Block Explorer</span>
-    </Button>
-
-    <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'
-
-interface TextConfig {
-  title?: Record<string, string>
-  lead?: Record<string, string>
-  action?: Record<string, string>
-}
-
-type Step =
-  | 'idle'
-  | 'confirm'
-  | 'chain'
-  | 'requesting'
-  | 'waiting'
-  | '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()
-const blockExplorer = useBlockExplorer()
-
-const props = withDefaults(
-  defineProps<{
-    text?: TextConfig
-    request?: () => Promise<Hash>
-    delayAfter?: number
-    delayAutoclose?: number
-    skipConfirmation?: boolean
-    autoCloseSuccess?: boolean
-    dismissable?: boolean
-  }>(),
-  {
-    delayAfter: 2000,
-    delayAutoclose: 2000,
-    skipConfirmation: false,
-    autoCloseSuccess: true,
-    dismissable: true,
-  },
-)
-
-const emit = defineEmits<{
-  complete: [receipt: TransactionReceipt]
-  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'
-      error.value = ''
-    }
-  },
-})
-
-watchChainId($wagmi as Config, {
-  async onChange() {
-    if (step.value !== 'chain') return
-
-    if (await checkChain()) {
-      initializeRequest()
-    }
-  },
-})
-
-const cachedRequest = ref(props.request)
-watch(
-  () => props.request,
-  (v) => {
-    cachedRequest.value = v
-  },
-)
-
-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' &&
-    step.value !== 'waiting',
-)
-
-const initializeRequest = async (request = cachedRequest.value) => {
-  cachedRequest.value = request
-  error.value = ''
-  tx.value = null
-  receipt.value = null
-  step.value = 'confirm'
-
-  if (!(await checkChain())) {
-    step.value = 'chain'
-    return
-  }
-
-  try {
-    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 }
-    if (err?.cause?.code === 4001) {
-      error.value = 'Transaction rejected by user.'
-      step.value = 'error'
-    } else {
-      error.value = err.shortMessage || 'Error submitting transaction request.'
-      step.value = 'error'
-    }
-    console.log(e)
-  }
-
-  if (props.autoCloseSuccess && step.value === 'complete') {
-    await delay(props.delayAutoclose)
-    step.value = 'idle'
-    await delay(300)
-  }
-
-  return receipt.value
-}
-
-const start = () => {
-  if (props.skipConfirmation && step.value === 'idle') {
-    initializeRequest()
-    return
-  }
-
-  step.value = 'confirm'
-}
-
-const cancel = () => {
-  step.value = 'idle'
-  error.value = ''
-  emit('cancel')
-}
-
-defineExpose({
-  initializeRequest,
-})
-</script>
-
-<style>
-.transaction-flow > section {
-  display: grid;
-  gap: var(--spacer);
-
-  .text {
-    width: 100%;
-    height: min-content;
-  }
-
-  p {
-    white-space: pre-wrap;
-    width: 100%;
-
-    a {
-      text-decoration: underline;
-    }
-  }
-}
-</style>

package/app/components/EvmWalletConnectQR.client.vue

@@ -1,13 +0,0 @@
-<template>
-  <EvmConnectorQR :uri="uri">
-    <template #instruction>
-      Scan the code in your wallet application
-    </template>
-  </EvmConnectorQR>
-</template>
-
-<script setup lang="ts">
-defineProps<{
-  uri: string
-}>()
-</script>

package/app/composables/clipboard.ts

@@ -1,26 +0,0 @@
-export const useClipboard = () => {
-  const copied = ref(false)
-  let timeout: ReturnType<typeof setTimeout> | null = null
-
-  const copy = async (text: string) => {
-    try {
-      await navigator.clipboard.writeText(text)
-      copied.value = true
-
-      if (timeout) clearTimeout(timeout)
-      timeout = setTimeout(() => {
-        copied.value = false
-      }, 2000)
-
-      return true
-    } catch (error) {
-      console.error('Failed to copy to clipboard:', error)
-      return false
-    }
-  }
-
-  return {
-    copy,
-    copied,
-  }
-}

package/app/composables/ens.ts

@@ -1,88 +0,0 @@
-import { getPublicClient } from '@wagmi/core'
-import type { Config } from '@wagmi/vue'
-
-type EnsMode = 'indexer' | 'chain'
-
-interface UseEnsOptions {
-  mode?: MaybeRefOrGetter<EnsMode | undefined>
-}
-
-interface EnsRuntimeConfig {
-  ens?: { indexer1?: string, indexer2?: string, indexer3?: string }
-}
-
-function getIndexerUrls(config: EnsRuntimeConfig): string[] {
-  if (!config.ens) return []
-  return [config.ens.indexer1, config.ens.indexer2, config.ens.indexer3].filter(Boolean) as string[]
-}
-
-async function resolve(
-  identifier: string,
-  strategies: EnsMode[],
-  indexerUrls: string[],
-  wagmi: Config,
-  chainKeys: string[],
-): Promise<EnsProfile> {
-  for (const strategy of strategies) {
-    try {
-      if (strategy === 'indexer') {
-        if (!indexerUrls.length) continue
-        return await fetchEnsFromIndexer(identifier, indexerUrls)
-      }
-
-      if (strategy === 'chain') {
-        const client = getPublicClient(wagmi, { chainId: 1 })
-        if (!client) continue
-        return await fetchEnsFromChain(identifier, client, chainKeys)
-      }
-    } catch {
-      continue
-    }
-  }
-
-  return { address: identifier, ens: null, data: null }
-}
-
-function useEnsBase(
-  tier: string,
-  identifier: MaybeRefOrGetter<string | undefined>,
-  chainKeys: string[],
-  options: UseEnsOptions = {},
-) {
-  const { $wagmi } = useNuxtApp()
-  const appConfig = useAppConfig()
-  const runtimeConfig = useRuntimeConfig()
-
-  const mode = computed<EnsMode>(() => toValue(options.mode) || appConfig.evm?.ens?.mode || 'indexer')
-  const indexerUrls = computed(() => getIndexerUrls(runtimeConfig.public.evm as EnsRuntimeConfig))
-  const cacheKey = computed(() => `ens-${tier}-${toValue(identifier)}`)
-
-  return useAsyncData(
-    cacheKey.value,
-    async () => {
-      const id = toValue(identifier)
-      if (!id) return null
-
-      const strategies: EnsMode[] = mode.value === 'indexer'
-        ? ['indexer', 'chain']
-        : ['chain', 'indexer']
-
-      return ensCache.fetch(cacheKey.value, () =>
-        resolve(id, strategies, indexerUrls.value, $wagmi as Config, chainKeys),
-      )
-    },
-    {
-      watch: [() => toValue(identifier)],
-      getCachedData: () => ensCache.get(cacheKey.value) ?? undefined,
-    },
-  )
-}
-
-export const useEns = (identifier: MaybeRefOrGetter<string | undefined>, options?: UseEnsOptions) =>
-  useEnsBase('resolve', identifier, [], options)
-
-export const useEnsWithAvatar = (identifier: MaybeRefOrGetter<string | undefined>, options?: UseEnsOptions) =>
-  useEnsBase('avatar', identifier, [...ENS_KEYS_AVATAR], options)
-
-export const useEnsProfile = (identifier: MaybeRefOrGetter<string | undefined>, options?: UseEnsOptions) =>
-  useEnsBase('profile', identifier, [...ENS_KEYS_PROFILE], options)

package/app/composables/helpers.ts

@@ -1 +0,0 @@
-export const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))

package/app/utils/cache.ts

@@ -1,59 +0,0 @@
-interface CacheEntry<T> {
-  data: T
-  expiresAt: number
-}
-
-export function createCache<T>(ttl: number, max: number) {
-  const entries = new Map<string, CacheEntry<T>>()
-  const pending = new Map<string, Promise<T>>()
-
-  function prune() {
-    const now = Date.now()
-    for (const [key, entry] of entries) {
-      if (entry.expiresAt <= now) entries.delete(key)
-    }
-
-    if (entries.size > max) {
-      const excess = entries.size - max
-      const keys = entries.keys()
-      for (let i = 0; i < excess; i++) {
-        entries.delete(keys.next().value!)
-      }
-    }
-  }
-
-  function get(key: string): T | undefined {
-    const entry = entries.get(key)
-    if (!entry) return undefined
-    if (entry.expiresAt <= Date.now()) {
-      entries.delete(key)
-      return undefined
-    }
-    return entry.data
-  }
-
-  function fetch(key: string, fn: () => Promise<T>): Promise<T> {
-    const cached = get(key)
-    if (cached) return Promise.resolve(cached)
-
-    const inflight = pending.get(key)
-    if (inflight) return inflight
-
-    const promise = fn()
-      .then((result) => {
-        entries.set(key, { data: result, expiresAt: Date.now() + ttl })
-        pending.delete(key)
-        if (entries.size > max) prune()
-        return result
-      })
-      .catch((err) => {
-        pending.delete(key)
-        throw err
-      })
-
-    pending.set(key, promise)
-    return promise
-  }
-
-  return { get, fetch }
-}

package/app/utils/ens.ts

@@ -1,98 +0,0 @@
-import { isAddress, type PublicClient, type Address } from 'viem'
-import { normalize } from 'viem/ens'
-
-// --- Types ---
-
-export interface EnsProfile {
-  address: string
-  ens: string | null
-  data: {
-    avatar: string
-    header: string
-    description: string
-    links: {
-      url: string
-      email: string
-      twitter: string
-      github: string
-    }
-  } | null
-}
-
-// --- Text record keys ---
-
-const ALL_KEYS = ['avatar', 'header', 'description', 'url', 'email', 'com.twitter', 'com.github'] as const
-
-export const ENS_KEYS_AVATAR = ['avatar'] as const
-export const ENS_KEYS_PROFILE = [...ALL_KEYS]
-
-// --- Cache ---
-
-export const ensCache = createCache<EnsProfile>(5 * 60 * 1000, 500)
-
-// --- Fetchers ---
-
-export async function fetchEnsFromIndexer(
-  identifier: string,
-  urls: string[],
-): Promise<EnsProfile> {
-  let lastError: Error | undefined
-
-  for (const url of urls) {
-    try {
-      return await $fetch<EnsProfile>(`${url}/${identifier}`)
-    } catch (err) {
-      lastError = err as Error
-    }
-  }
-
-  throw lastError ?? new Error('No indexer URLs provided')
-}
-
-export async function fetchEnsFromChain(
-  identifier: string,
-  client: PublicClient,
-  keys: string[] = [],
-): Promise<EnsProfile> {
-  const isAddr = isAddress(identifier)
-
-  let address: string
-  let ens: string | null
-
-  if (isAddr) {
-    address = identifier
-    ens = await client.getEnsName({ address: identifier as Address }) ?? null
-  } else {
-    ens = identifier
-    const resolved = await client.getEnsAddress({ name: normalize(identifier) })
-    if (!resolved) return { address: '', ens, data: null }
-    address = resolved
-  }
-
-  if (!ens || !keys.length) return { address, ens: ens ?? null, data: null }
-
-  const name = normalize(ens)
-  const results = await Promise.all(
-    keys.map(key => client.getEnsText({ name, key }).catch(() => null)),
-  )
-
-  return { address, ens, data: toProfileData(keys, results.map(r => r || '')) }
-}
-
-// --- Helpers ---
-
-function toProfileData(keys: string[], results: string[]): EnsProfile['data'] {
-  const get = (key: string) => results[keys.indexOf(key)] || ''
-
-  return {
-    avatar: get('avatar'),
-    header: get('header'),
-    description: get('description'),
-    links: {
-      url: get('url'),
-      email: get('email'),
-      twitter: get('com.twitter'),
-      github: get('com.github'),
-    },
-  }
-}