@1001-digital/layers.evm 1.0.7 → 1.0.8

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/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.7",
+  "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.27"
+    "@1001-digital/layers.base": "^0.0.32"
   },
   "peerDependencies": {
-    "@1001-digital/layers.base": "^0.0.27"
+    "@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>