@1001-digital/layers.evm 1.0.7 → 1.0.9

package/.claude/settings.local.json

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

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/composables/ens.ts

@@ -1,88 +1 @@
-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)
+export { useEns, useEnsWithAvatar, useEnsProfile } from '@1001-digital/components'

package/app/composables/gasPrice.ts

@@ -1,36 +1 @@
-import type { WatchStopHandle } from 'vue'
-import { formatEther, formatGwei } from 'viem'
-import { getGasPrice } from '@wagmi/core'
-import { useConfig, useBlockNumber } from '@wagmi/vue'
-
-let priceWatcher: WatchStopHandle | null = null
-const price: Ref<bigint> = ref(0n)
-
-export const useGasPrice = () => {
-  const config = useConfig()
-  const { data: blockNumber } = useBlockNumber()
-
-  const updatePrice = async () => {
-    price.value = await getGasPrice(config)
-  }
-
-  if (!priceWatcher) {
-    updatePrice()
-    priceWatcher = watch(blockNumber, () => updatePrice())
-  }
-
-  const unitPrice = computed(() => ({
-    wei: price.value,
-    gwei: formatGwei(price.value),
-    eth: formatEther(price.value),
-
-    formatted: {
-      gwei: price.value > 2_000_000_000_000n
-        ? Math.round(parseFloat(formatGwei(price.value)))
-        : parseFloat(formatGwei(price.value)).toFixed(1),
-      eth: formatEther(price.value),
-    },
-  }))
-
-  return unitPrice
-}
+export { useGasPrice } from '@1001-digital/components'

package/app/composables/priceFeed.ts

@@ -1,103 +1 @@
-import { readContract } from '@wagmi/core'
-
-const CHAINLINK_ETH_USD_ABI = [
-  {
-    inputs: [],
-    name: 'latestRoundData',
-    outputs: [
-      { internalType: 'uint80', name: 'roundId', type: 'uint80' },
-      { internalType: 'int256', name: 'answer', type: 'int256' },
-      { internalType: 'uint256', name: 'startedAt', type: 'uint256' },
-      { internalType: 'uint256', name: 'updatedAt', type: 'uint256' },
-      { internalType: 'uint80', name: 'answeredInRound', type: 'uint80' },
-    ],
-    stateMutability: 'view',
-    type: 'function',
-  },
-] as const
-
-const CHAINLINK_ETH_USD = '0x5f4eC3Df9cbd43714FE2740f5E3616155c5b8419'
-const STORAGE_KEY = 'evm:price-feed'
-const CACHE_TTL = 3_600 // 1 hour in seconds
-
-interface PriceFeedState {
-  ethUSDRaw: bigint | null
-  lastUpdated: number
-}
-
-const state = reactive<PriceFeedState>({
-  ethUSDRaw: null,
-  lastUpdated: 0,
-})
-
-function loadFromStorage() {
-  if (!import.meta.client) return
-
-  try {
-    const stored = localStorage.getItem(STORAGE_KEY)
-    if (!stored) return
-
-    const parsed = parseJSON(stored) as PriceFeedState
-    if (parsed.ethUSDRaw) state.ethUSDRaw = parsed.ethUSDRaw
-    if (parsed.lastUpdated) state.lastUpdated = parsed.lastUpdated
-  } catch {
-    // Ignore corrupted storage
-  }
-}
-
-function saveToStorage() {
-  if (!import.meta.client) return
-
-  try {
-    localStorage.setItem(STORAGE_KEY, stringifyJSON({
-      ethUSDRaw: state.ethUSDRaw,
-      lastUpdated: state.lastUpdated,
-    }))
-  } catch {
-    // Ignore storage errors
-  }
-}
-
-export const usePriceFeed = () => {
-  const { $wagmi } = useNuxtApp()
-
-  // Load cached data on first use
-  if (!state.lastUpdated) loadFromStorage()
-
-  const ethUSD = computed(() => state.ethUSDRaw ? state.ethUSDRaw / BigInt(1e8) : 0n)
-  const ethUSC = computed(() => state.ethUSDRaw ? state.ethUSDRaw / BigInt(1e6) : 0n)
-  const ethUSDFormatted = computed(() => formatPrice(Number(ethUSC.value) / 100, 2))
-
-  const weiToUSD = (wei: bigint) => {
-    const cents = (wei * (state.ethUSDRaw || 0n)) / (10n ** 18n) / (10n ** 6n)
-    return formatPrice(Number(cents) / 100, 2)
-  }
-
-  async function fetchPrice() {
-    if (nowInSeconds() - state.lastUpdated < CACHE_TTL) return
-
-    try {
-      const [, answer] = await readContract($wagmi, {
-        address: CHAINLINK_ETH_USD,
-        abi: CHAINLINK_ETH_USD_ABI,
-        functionName: 'latestRoundData',
-        chainId: 1,
-      })
-
-      state.ethUSDRaw = answer
-      state.lastUpdated = nowInSeconds()
-      saveToStorage()
-    } catch (error) {
-      console.warn('Error fetching ETH/USD price:', error)
-    }
-  }
-
-  return {
-    ethUSDRaw: computed(() => state.ethUSDRaw),
-    ethUSD,
-    ethUSC,
-    ethUSDFormatted,
-    weiToUSD,
-    fetchPrice,
-  }
-}
+export { usePriceFeed } 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/cache.ts

@@ -1,59 +1 @@
-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 }
-}
+export { createCache } 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/ens.ts

@@ -1,98 +1,2 @@
-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'),
-    },
-  }
-}
+export { ensCache, fetchEnsFromIndexer, fetchEnsFromChain, ENS_KEYS_AVATAR, ENS_KEYS_PROFILE } from '@1001-digital/components'
+export type { EnsProfile } 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/app/utils/price.ts

@@ -1,15 +1 @@
-const replacer = (_: string, value: unknown) => {
-  if (typeof value === 'bigint') return value.toString() + 'n'
-  return value
-}
-
-const reviver = (_: string, value: unknown) => {
-  if (typeof value === 'string' && /^\d+n$/.test(value)) return BigInt(value.slice(0, -1))
-  return value
-}
-
-export const stringifyJSON = (obj: unknown): string => JSON.stringify(obj, replacer)
-export const parseJSON = (json: string): unknown => JSON.parse(json, reviver)
-
-export const formatPrice = (num: number, digits: number = 2) =>
-  num?.toLocaleString('en-US', { maximumFractionDigits: digits })
+export { stringifyJSON, parseJSON, formatPrice } from '@1001-digital/components'