@1001-digital/layers.evm

Nuxt layer for building Ethereum dAPPs. Extends the base layer with wallet connection, chain management, and Web3 utilities.

Installation

pnpm add @1001-digital/layers.evm

export default defineNuxtConfig({
  extends: ['@1001-digital/layers.evm'],
})

Features

• Wallet connection (MetaMask, Coinbase, WalletConnect, Safe, injected)
• Multiple RPC endpoints with fallback
• Chain switching (mainnet, sepolia, holesky, optimism, arbitrum, base, polygon, localhost)
• ENS resolution (via indexer or on-chain)
• ETH price feed with hourly refresh
• IPFS and Arweave gateway support

Components

• EvmAccount - Account display
• EvmAvatar - ENS avatar with generative fallback
• EvmConnect - Wallet connection UI
• EvmConnectorQR / EvmMetaMaskQR / EvmWalletConnectQR - QR code connectors
• EvmProfile - ENS profile with avatar and header
• EvmSwitchNetwork - Network switching UI
• EvmTransactionFlow - Transaction status flow
• EvmWalletConnectWallets - WalletConnect wallet list

All components are client-only.

Composables

• useChainConfig(key?) - Get chain configuration (id, block explorer)
• useMainChainId() - Get the main chain ID
• useBlockExplorer(key?) - Get block explorer URL
• useEnsureChainIdCheck() - Validate and switch chain before transactions
• useEns() / useEnsWithAvatar() / useEnsProfile() - ENS resolution
• useGasPrice() - Current gas prices
• usePriceFeed() - ETH price feed
• useDwebClient() - Decentralized web fetch client (IPFS, IPNS, Arweave)
• useResolvedUrl() - Reactive URI resolution
• useWalletExplorer() - Wallet connection explorer with search
• useBaseURL() - Base URL helper

Utilities

shortAddress('0x1234...abcd')           // '0x123...bcd'
formatETH(1000000000000000000n)          // '1'
resolveChain(1)                          // mainnet Chain object

Configuration

// nuxt.config.ts
export default defineNuxtConfig({
  extends: ['@1001-digital/layers.evm'],
})

// app.config.ts
export default defineAppConfig({
  evm: {
    title: 'My dApp',
    defaultChain: 'mainnet',
    chains: {
      mainnet: {
        id: 1,
        blockExplorer: 'https://etherscan.io',
      },
    },
    ens: { mode: 'indexer' },
    ipfsGateway: 'https://ipfs.io/ipfs/',
    arweaveGateway: 'https://arweave.net/',
  },
})

RPC and API endpoints are configured via environment variables:

NUXT_PUBLIC_EVM_WALLET_CONNECT_PROJECT_ID=...
NUXT_PUBLIC_EVM_CHAINS_MAINNET_RPC1=https://...
NUXT_PUBLIC_EVM_CHAINS_MAINNET_RPC2=https://...
NUXT_PUBLIC_EVM_CHAINS_MAINNET_RPC3=https://...
NUXT_PUBLIC_EVM_ENS_INDEXER1=https://...

Dependencies

• @1001-digital/layers.base - Foundation layer
• Wagmi - Vue hooks for Ethereum
• Viem - Type-safe Ethereum utilities
• TanStack Query - Data fetching and caching

Development

pnpm dev        # Start playground dev server
pnpm build      # Build playground
pnpm typecheck  # Run type checks
pnpm lint       # Lint