@1001-digital/layers.evm 0.0.8 → 1.0.1

package/.env.example

@@ -0,0 +1,4 @@
+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=""

package/.playground/app/app.config.ts

@@ -1,5 +1,12 @@
 export default defineAppConfig({
-  myLayer: {
-    name: 'My amazing Nuxt layer (overwritten)'
-  }
+  evm: {
+    title: 'EVM Layer Playground',
+    defaultChain: 'mainnet',
+    chains: {
+      mainnet: {
+        id: 1,
+        blockExplorer: 'https://etherscan.io',
+      },
+    },
+  },
 })

package/AGENTS.md

@@ -22,7 +22,7 @@ Uses modern wagmi 0.4.x patterns:
 - `useConnectionEffect` (not deprecated `useAccountEffect`)
 - `useSwitchConnection` (not deprecated `useSwitchAccount`)
 
-Configured chains: mainnet, sepolia, holesky, localhost
+Configured chains: resolved dynamically from `app.config.ts` via `evm.chains` map (supports mainnet, sepolia, holesky, optimism, arbitrum, base, polygon, localhost out of the box)
 
 Connectors: injected, coinbaseWallet, metaMask, walletConnect
 
@@ -37,7 +37,9 @@ Connectors: injected, coinbaseWallet, metaMask, walletConnect
 
 ## Composables
 
-- `useMainChainId()` - Get configured chain ID from runtime config
+- `useChainConfig(key?)` - Get `{ id, blockExplorer }` for a named chain (defaults to `defaultChain`)
+- `useMainChainId()` - Get main chain ID from app config
+- `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
@@ -46,17 +48,29 @@ Connectors: injected, coinbaseWallet, metaMask, walletConnect
 
 - `shortAddress(address, length)` - Truncate address for display
 - `formatETH(value, maxDecimals)` - Format ETH values
+- `resolveChain(id)` - Resolve chain ID to viem Chain object
 
-## Environment Variables
+## Configuration
+
+Static chain config lives in `app.config.ts` (safe to commit):
+
+```ts
+evm: {
+  title: 'My dApp',
+  defaultChain: 'mainnet',
+  chains: {
+    mainnet: { id: 1, blockExplorer: 'https://etherscan.io' },
+  },
+}
+```
+
+Sensitive RPC URLs live in `runtimeConfig.public.evm` (env-driven):
 
 ```bash
-NUXT_PUBLIC_TITLE="App Name"
-NUXT_PUBLIC_CHAIN_ID=1
-NUXT_PUBLIC_BLOCK_EXPLORER="https://etherscan.io"
-NUXT_PUBLIC_RPC1=""
-NUXT_PUBLIC_RPC2=""
-NUXT_PUBLIC_RPC3=""
-NUXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=""
+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=""
 ```
 
 ## Key directories

package/app/app.config.ts

@@ -1,14 +1,30 @@
 export default defineAppConfig({
   evm: {
-    name: 'Hello from Nuxt layer'
-  }
+    title: 'EVM Layer',
+    defaultChain: 'mainnet',
+    chains: {
+      mainnet: {
+        id: 1,
+        blockExplorer: 'https://etherscan.io',
+      },
+    },
+  },
 })
 
+interface EvmChainConfig {
+  id?: number
+  blockExplorer?: string
+}
+
 declare module '@nuxt/schema' {
   interface AppConfigInput {
     evm?: {
-      /** Project name */
-      name?: string
+      /** App title */
+      title?: string
+      /** Key into `chains` that serves as the app's primary chain */
+      defaultChain?: string
+      /** Named chain definitions */
+      chains?: Record<string, EvmChainConfig>
     }
   }
 }

package/app/components/EvmTransactionFlow.vue

@@ -1,5 +1,10 @@
 <template>
-  <slot :start="start" :step="step" :open="open" name="start"></slot>
+  <slot
+    :start="start"
+    :step="step"
+    :open="open"
+    name="start"
+  ></slot>
 
   <Dialog
     v-model:open="open"
@@ -11,12 +16,21 @@
 
     <h1 v-if="text.title[step]">{{ text.title[step] }}</h1>
 
+    <Loading
+      v-if="step === 'requesting' || step === 'waiting'"
+      spinner
+      txt=""
+    />
+
     <div class="text">
       <p v-if="text.lead[step]">{{ text.lead[step] }}</p>
       <p v-if="error">{{ error }}</p>
     </div>
 
-    <slot :name="step" :cancel="cancel"></slot>
+    <slot
+      :name="step"
+      :cancel="cancel"
+    ></slot>
 
     <Button
       v-if="step === 'waiting'"
@@ -24,59 +38,75 @@
       target="_blank"
       class="block-explorer"
     >
-      <Icon type="loader" class="spin" />
-      <span>View on Block Explorer</span>
+      View on Block Explorer
     </Button>
 
     <Actions v-if="step === 'chain'">
-      <Button @click="cancel" class="secondary">Cancel</Button>
+      <Button
+        @click="cancel"
+        class="secondary"
+        >Cancel</Button
+      >
     </Actions>
 
     <Actions v-if="step === 'confirm' || step === 'error'">
-      <Button @click="cancel" class="secondary">Cancel</Button>
-      <Button @click="() => initializeRequest()">{{
-        text.action[step] || "Execute"
-      }}</Button>
+      <Button
+        @click="cancel"
+        class="secondary"
+        >Cancel</Button
+      >
+      <Button @click="() => initializeRequest()">
+        {{ text.action[step] || 'Execute' }}
+      </Button>
     </Actions>
   </Dialog>
 </template>
 
 <script setup lang="ts">
-import { waitForTransactionReceipt, watchChainId } from "@wagmi/core";
-import type { Config } from "@wagmi/vue";
-import type { TransactionReceipt, Hash } from "viem";
+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>;
+  title: Record<string, string>
+  lead: Record<string, string>
+  action: Record<string, string>
 }
 
-const checkChain = useEnsureChainIdCheck();
+type Step =
+  | 'idle'
+  | 'confirm'
+  | 'chain'
+  | 'requesting'
+  | 'waiting'
+  | 'complete'
+  | 'error'
+
+const checkChain = useEnsureChainIdCheck()
 
-const { $wagmi } = useNuxtApp();
-const config = useRuntimeConfig();
+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;
+    text?: TextConfig
+    request?: () => Promise<Hash>
+    delayAfter?: number
+    delayAutoclose?: number
+    skipConfirmation?: boolean
+    autoCloseSuccess?: boolean
+    dismissable?: boolean
   }>(),
   {
     text: () => ({
       title: {
-        confirm: "Confirm Transaction",
+        confirm: 'Confirm Transaction',
       },
       lead: {
-        confirm: "Please review and confirm this transaction.",
+        confirm: 'Please review and confirm this transaction.',
       },
       action: {
-        confirm: "Execute",
+        confirm: 'Execute',
       },
     }),
     delayAfter: 2000,
@@ -85,147 +115,112 @@ const props = withDefaults(
     autoCloseSuccess: true,
     dismissable: true,
   },
-);
+)
 
 const emit = defineEmits<{
-  complete: [receipt: TransactionReceipt];
-  cancel: [];
-}>();
+  complete: [receipt: TransactionReceipt]
+  cancel: []
+}>()
+
+const step = ref<Step>('idle')
 
-const open = ref(false);
+const open = computed({
+  get: () => step.value !== 'idle',
+  set: (v) => {
+    if (!v) step.value = 'idle'
+  },
+})
 
-const switchChain = ref(false);
 watchChainId($wagmi as Config, {
   async onChange() {
-    if (!switchChain.value) return;
+    if (step.value !== 'chain') return
 
     if (await checkChain()) {
-      switchChain.value = false;
-      initializeRequest();
-    } else {
-      switchChain.value = true;
+      initializeRequest()
     }
   },
-});
+})
 
-const cachedRequest = ref(props.request);
+const cachedRequest = ref(props.request)
 watch(
   () => props.request,
-  () => {
-    cachedRequest.value = props.request;
+  (v) => {
+    cachedRequest.value = v
   },
-);
-
-const requesting = ref(false);
-const waiting = ref(false);
-const complete = ref(false);
-const error = ref("");
-const tx = ref<Hash | null>(null);
-const receipt = ref<TransactionReceipt | null>(null);
-const txLink = computed(() => `${config.public.blockExplorer}/tx/${tx.value}`);
-
-const step = computed(() => {
-  if (
-    open.value &&
-    !requesting.value &&
-    !switchChain.value &&
-    !waiting.value &&
-    !complete.value
-  ) {
-    return "confirm";
-  }
-
-  if (switchChain.value) {
-    return "chain";
-  }
-
-  if (requesting.value) {
-    return "requesting";
-  }
-
-  if (waiting.value) {
-    return "waiting";
-  }
+)
 
-  if (complete.value) {
-    return "complete";
-  }
-
-  return "error";
-});
+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",
-);
+  () =>
+    props.dismissable &&
+    step.value !== 'requesting' &&
+    step.value !== 'waiting',
+)
 
 const initializeRequest = async (request = cachedRequest.value) => {
-  cachedRequest.value = request;
-  complete.value = false;
-  open.value = true;
-  error.value = "";
-  tx.value = null;
-  receipt.value = null;
+  cachedRequest.value = request
+  error.value = ''
+  tx.value = null
+  receipt.value = null
+  step.value = 'confirm'
 
   if (!(await checkChain())) {
-    switchChain.value = true;
-    return;
-  } else {
-    switchChain.value = false;
+    step.value = 'chain'
+    return
   }
 
-  if (requesting.value) return;
-
   try {
-    requesting.value = true;
-    tx.value = await request!();
-    requesting.value = false;
-    waiting.value = true;
-    const [receiptObject] = await Promise.all([
-      waitForTransactionReceipt($wagmi as Config, { hash: tx.value }),
-    ]);
-    await delay(props.delayAfter);
-    receipt.value = receiptObject;
-    emit("complete", receiptObject);
-    complete.value = true;
+    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 };
+    const err = e as { cause?: { code?: number }; shortMessage?: string }
     if (err?.cause?.code === 4001) {
-      open.value = false;
+      step.value = 'idle'
     } else {
-      error.value = err.shortMessage || "Error submitting transaction request.";
+      error.value = err.shortMessage || 'Error submitting transaction request.'
+      step.value = 'error'
     }
-    console.log(e);
+    console.log(e)
   }
 
-  requesting.value = false;
-  waiting.value = false;
-
-  if (props.autoCloseSuccess && step.value === "complete") {
-    await delay(props.delayAutoclose);
-    open.value = false;
-    await delay(300);
+  if (props.autoCloseSuccess && step.value === 'complete') {
+    await delay(props.delayAutoclose)
+    step.value = 'idle'
+    await delay(300)
   }
 
-  return receipt.value;
-};
+  return receipt.value
+}
 
 const start = () => {
-  if (props.skipConfirmation && !open.value) {
-    initializeRequest();
+  if (props.skipConfirmation && step.value === 'idle') {
+    initializeRequest()
+    return
   }
 
-  open.value = true;
-};
+  step.value = 'confirm'
+}
 
 const cancel = () => {
-  open.value = false;
-
-  emit("cancel");
-};
+  step.value = 'idle'
+  emit('cancel')
+}
 
 defineExpose({
   initializeRequest,
-});
+})
 </script>
 
 <style>
@@ -233,22 +228,11 @@ defineExpose({
   display: grid;
   gap: var(--spacer);
 
-  .spinner {
-    width: var(--size-7);
-    height: var(--size-7);
-    margin: calc(-1 * var(--size-4)) 0 var(--size-3);
-  }
-
   .text {
     width: 100%;
     height: min-content;
   }
 
-  h1 {
-    font-size: var(--font-lg);
-    margin-bottom: var(--size-4);
-  }
-
   p {
     white-space: pre-wrap;
     width: 100%;

package/app/composables/chainId.ts

@@ -1,11 +1,28 @@
 import { useConnection, useSwitchChain } from '@wagmi/vue'
 
-export const useMainChainId = () => {
-  const config = useRuntimeConfig()
+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 config.public.chainId as 1 | 11155111 | 17000 | 1337 | 31337
+  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()

package/app/plugins/wagmi.ts

@@ -9,14 +9,38 @@ import {
   type Config,
   type CreateConnectorFn,
 } from '@wagmi/vue'
-import { mainnet, sepolia, holesky, localhost } from '@wagmi/vue/chains'
 import { coinbaseWallet, injected, metaMask, walletConnect } from '@wagmi/vue/connectors'
-import type { CustomTransport, Transport } from 'viem'
+import type { Chain, Transport } from 'viem'
 
 export default defineNuxtPlugin((nuxtApp) => {
-  const title = nuxtApp.$config.public.title || 'EVM Layer'
-  const mainChainId = nuxtApp.$config.public.chainId
+  const appConfig = useAppConfig()
+  const runtimeConfig = nuxtApp.$config.public.evm as {
+    walletConnectProjectId: string
+    chains: Record<string, { rpc1?: string, rpc2?: string, rpc3?: string }>
+  }
+
+  const title = appConfig.evm?.title || 'EVM Layer'
+  const chainEntries = appConfig.evm?.chains || {}
+
+  // Build chains and transports from config
+  const chains: [Chain, ...Chain[]] = [] as unknown as [Chain, ...Chain[]]
+  const transports: Record<number, Transport> = {}
 
+  for (const [key, entry] of Object.entries(chainEntries)) {
+    const chain = resolveChain(entry.id!)
+    chains.push(chain)
+
+    const rpcs = runtimeConfig.chains?.[key]
+    const transportList = []
+    if (rpcs?.rpc1) transportList.push(http(rpcs.rpc1))
+    if (rpcs?.rpc2) transportList.push(http(rpcs.rpc2))
+    if (rpcs?.rpc3) transportList.push(http(rpcs.rpc3))
+    transportList.push(http())
+
+    transports[chain.id] = fallback(transportList)
+  }
+
+  // Connectors
   const connectors: CreateConnectorFn[] = [
     injected(),
     coinbaseWallet({
@@ -33,28 +57,16 @@ export default defineNuxtPlugin((nuxtApp) => {
     }),
   ]
 
-  if (import.meta.client && nuxtApp.$config.public.walletConnectProjectId)
+  if (import.meta.client && runtimeConfig.walletConnectProjectId)
     connectors.push(
       walletConnect({
-        projectId: nuxtApp.$config.public.walletConnectProjectId,
+        projectId: runtimeConfig.walletConnectProjectId,
         showQrModal: false,
       }),
     )
 
-  const transportDefinitions: CustomTransport | Transport[] = []
-
-  if (nuxtApp.$config.public.rpc1)
-    transportDefinitions.push(http(nuxtApp.$config.public.rpc1 as string))
-  if (nuxtApp.$config.public.rpc2)
-    transportDefinitions.push(http(nuxtApp.$config.public.rpc2 as string))
-  if (nuxtApp.$config.public.rpc3)
-    transportDefinitions.push(http(nuxtApp.$config.public.rpc3 as string))
-  transportDefinitions.push(http())
-
-  const transports = fallback(transportDefinitions)
-
   const wagmiConfig: Config = createConfig({
-    chains: [mainnet, sepolia, holesky, localhost],
+    chains,
     batch: {
       multicall: true,
     },
@@ -63,12 +75,7 @@ export default defineNuxtPlugin((nuxtApp) => {
       storage: cookieStorage,
     }),
     ssr: true,
-    transports: {
-      [mainnet.id]: mainChainId == 1 ? transports : http(),
-      [sepolia.id]: transports,
-      [holesky.id]: transports,
-      [localhost.id]: transports,
-    },
+    transports,
   })
 
   nuxtApp.vueApp.use(WagmiPlugin, { config: wagmiConfig }).use(VueQueryPlugin, {})

package/app/utils/chains.ts

@@ -0,0 +1,13 @@
+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: [] } },
+  })

package/nuxt.config.ts

@@ -8,13 +8,12 @@ export default defineNuxtConfig({
 
   runtimeConfig: {
     public: {
-      title: 'EVM Layer',
-      blockExplorer: 'https://etherscan.io',
-      chainId: 1,
-      rpc1: '',
-      rpc2: '',
-      rpc3: '',
-      walletConnectProjectId: '',
+      evm: {
+        walletConnectProjectId: '',
+        chains: {
+          mainnet: { rpc1: '', rpc2: '', rpc3: '' },
+        },
+      },
     },
   },
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@1001-digital/layers.evm",
   "type": "module",
-  "version": "0.0.8",
+  "version": "1.0.1",
   "main": "./nuxt.config.ts",
   "devDependencies": {
     "@nuxt/eslint": "latest",
@@ -19,6 +19,7 @@
     "@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",

package/.playground/.env.example

@@ -1,7 +0,0 @@
-NUXT_PUBLIC_TITLE="EVM Layer Playground"
-NUXT_PUBLIC_CHAIN_ID=1
-NUXT_PUBLIC_BLOCK_EXPLORER="https://etherscan.io"
-NUXT_PUBLIC_RPC1=""
-NUXT_PUBLIC_RPC2=""
-NUXT_PUBLIC_RPC3=""
-NUXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=""