@1001-digital/layers.evm 1.0.2 → 1.0.4

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

@@ -17,25 +17,12 @@
     <EvmTransactionFlow
       :request="sendTransaction"
       :text="{
-        title: {
-          confirm: 'Send Transaction',
-          requesting: 'Requesting...',
-          waiting: 'Waiting for confirmation...',
-          complete: 'Transaction Complete!',
-          error: 'Transaction Error',
-        },
+        title: { confirm: 'Send Transaction' },
         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',
         },
+        action: { confirm: 'Send Transaction' },
       }"
       @complete="onTransactionComplete"
       @cancel="onTransactionCancel"

package/app/app.config.ts

@@ -8,6 +8,9 @@ export default defineAppConfig({
         blockExplorer: 'https://etherscan.io',
       },
     },
+    ens: {
+      mode: 'indexer',
+    },
   },
 })
 
@@ -25,6 +28,11 @@ declare module '@nuxt/schema' {
       defaultChain?: string
       /** Named chain definitions */
       chains?: Record<string, EvmChainConfig>
+      /** ENS resolution configuration */
+      ens?: {
+        /** Resolution strategy: 'indexer' queries a ponder-ens API, 'chain' resolves on-chain */
+        mode?: 'indexer' | 'chain'
+      }
     }
   }
 }

package/app/components/EvmAccount.client.vue

@@ -6,10 +6,11 @@
 
 <script setup lang="ts">
 import type { Address } from 'viem'
-import { useConnection, useEnsName } from '@wagmi/vue'
+import { useConnection } from '@wagmi/vue'
 
 const props = defineProps<{
   address?: Address
+  mode?: 'indexer' | 'chain'
 }>()
 const address = computed(() => props.address)
 
@@ -19,10 +20,7 @@ const isCurrent = computed<boolean>(
   () => currentAddress.value?.toLowerCase() === address.value?.toLowerCase(),
 )
 
-const { data: ens } = useEnsName({
-  address,
-  chainId: 1,
-})
+const { data: profile } = useEns(address, { mode: computed(() => props.mode) })
 
-const display = computed<string>(() => ens.value || shortAddress(address.value!))
+const display = computed<string>(() => profile.value?.ens || shortAddress(address.value!))
 </script>

package/app/components/EvmTransactionFlow.vue

@@ -93,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 =
@@ -107,6 +107,28 @@ 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()
 
@@ -124,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,
@@ -148,6 +159,12 @@ 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({

package/app/composables/ens.ts

@@ -0,0 +1,68 @@
+import { getPublicClient } from '@wagmi/core'
+import type { Config } from '@wagmi/vue'
+
+interface UseEnsOptions {
+  mode?: MaybeRefOrGetter<'indexer' | 'chain' | undefined>
+}
+
+function useEnsBase(
+  key: string,
+  identifier: MaybeRefOrGetter<string | undefined>,
+  chainKeys: string[],
+  options: UseEnsOptions = {},
+) {
+  const { $wagmi } = useNuxtApp()
+  const appConfig = useAppConfig()
+  const runtimeConfig = useRuntimeConfig()
+
+  const mode = computed(() => toValue(options.mode) || appConfig.evm?.ens?.mode || 'indexer')
+
+  const indexerUrls = computed(() => {
+    const ens = (runtimeConfig.public.evm as { ens?: { indexer1?: string, indexer2?: string, indexer3?: string } }).ens
+    if (!ens) return []
+    return [ens.indexer1, ens.indexer2, ens.indexer3].filter(Boolean) as string[]
+  })
+
+  const strategies = computed(() => {
+    const primary = mode.value
+    const fallback = primary === 'indexer' ? 'chain' : 'indexer'
+    return [primary, fallback] as const
+  })
+
+  return useAsyncData(
+    `ens-${key}-${toValue(identifier)}`,
+    async () => {
+      const id = toValue(identifier)
+      if (!id) return null
+
+      for (const strategy of strategies.value) {
+        try {
+          if (strategy === 'indexer') {
+            if (!indexerUrls.value.length) continue
+            return await fetchEnsFromIndexer(id, indexerUrls.value)
+          }
+
+          if (strategy === 'chain') {
+            const client = getPublicClient($wagmi as Config, { chainId: 1 })
+            if (!client) continue
+            return await fetchEnsFromChain(id, client, chainKeys)
+          }
+        } catch {
+          continue
+        }
+      }
+
+      return null
+    },
+    { watch: [() => toValue(identifier)] },
+  )
+}
+
+export const useEns = (identifier: MaybeRefOrGetter<string | undefined>, options?: UseEnsOptions) =>
+  useEnsBase('resolve', identifier, [], options)
+
+export const useEnsAvatar = (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/utils/ens.ts

@@ -0,0 +1,89 @@
+import type { PublicClient, Address } from 'viem'
+import { isAddress, normalize } from 'viem/ens'
+
+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
+}
+
+const TEXT_RECORD_KEYS = ['avatar', 'header', 'description', 'url', 'email', 'com.twitter', 'com.github'] as const
+
+function buildData(keys: string[], results: string[]): EnsProfile['data'] {
+  const get = (key: string) => {
+    const i = keys.indexOf(key)
+    return i >= 0 ? results[i] || '' : ''
+  }
+
+  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'),
+    },
+  }
+}
+
+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(() => '')),
+  )
+
+  return { address, ens, data: buildData(keys, results) }
+}
+
+export const ENS_KEYS_AVATAR = ['avatar'] as const
+export const ENS_KEYS_PROFILE = [...TEXT_RECORD_KEYS]

package/nuxt.config.ts

@@ -13,6 +13,11 @@ export default defineNuxtConfig({
         chains: {
           mainnet: { rpc1: '', rpc2: '', rpc3: '' },
         },
+        ens: {
+          indexer1: '',
+          indexer2: '',
+          indexer3: '',
+        },
       },
     },
   },

package/package.json

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