refactor: add a test rpc button in settings to verify

.changeset/settings-rpc-test-button.md

@@ -0,0 +1,7 @@
+---
+'@evmnow/dapp': minor
+---
+
+Add a "Test RPC Connection" button to the settings page.
+
+The button sends an `eth_chainId` request to the effective reader RPC and reports success, connection failures, or a mismatch between the returned chain ID and the configured one — handy for verifying a local dev endpoint before using it.

packages/dapp/app/components/AppRpcTester.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="rpc-tester">
+    <Alert v-if="testStatus === 'success'" type="info" dismissable>
+      <p>RPC connection successful! Connected to chain ID {{ testResult?.chainId }}.</p>
+    </Alert>
+
+    <Alert v-if="testStatus === 'error'" type="error" dismissable>
+      <p>{{ testError }}</p>
+    </Alert>
+
+    <Actions>
+      <Button
+        class="tertiary small"
+        :disabled="!rpc || testing"
+        @click="onTest"
+      >
+        {{ testing ? 'Testing...' : (label || 'Test RPC Connection') }}
+      </Button>
+    </Actions>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ rpc?: string | null; chainId?: string | number | null; label?: string }>()
+const { rpc, chainId, label } = toRefs(props)
+
+const { testing, testStatus, testResult, testError, testRpcConnection } = useRpcTester()
+
+function onTest() {
+  void testRpcConnection(rpc.value, chainId.value)
+}
+</script>
+
+<style scoped>
+@layer components {
+  .rpc-tester {
+    display: grid;
+    gap: var(--size-3);
+  }
+}
+</style>

packages/dapp/app/composables/useRpcTester.ts

@@ -0,0 +1,50 @@
+export function useRpcTester() {
+  const testing = ref(false)
+  const testStatus = ref<'idle' | 'success' | 'error'>('idle')
+  const testResult = ref<{ chainId: string } | null>(null)
+  const testError = ref('')
+
+  async function testRpcConnection(rpc: string | null | undefined, chainId?: string | number | null) {
+    if (!rpc) return
+
+    testing.value = true
+    testStatus.value = 'idle'
+    testError.value = ''
+    testResult.value = null
+
+    try {
+      const response = await fetch(rpc, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ jsonrpc: '2.0', method: 'eth_chainId', params: [], id: 1 }),
+      })
+
+      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
+
+      const data = await response.json()
+      if (data.error) throw new Error(data.error.message || 'RPC request failed')
+
+      const returnedChainId = parseInt(data.result, 16)
+      if (Number.isNaN(returnedChainId)) {
+        throw new Error('RPC returned an invalid chain ID')
+      }
+      testResult.value = { chainId: returnedChainId.toString() }
+
+      const configuredChainId = chainId != null ? parseInt(String(chainId), 10) : null
+
+      if (configuredChainId != null && !Number.isNaN(configuredChainId) && returnedChainId !== configuredChainId) {
+        testError.value = `Warning: RPC returned chain ID ${returnedChainId}, but settings specify chain ID ${chainId}`
+        testStatus.value = 'error'
+      } else {
+        testStatus.value = 'success'
+      }
+    } catch (err) {
+      testStatus.value = 'error'
+      testError.value = err instanceof Error ? err.message : 'Failed to connect to RPC endpoint'
+    } finally {
+      testing.value = false
+    }
+  }
+
+  return { testing, testStatus, testResult, testError, testRpcConnection }
+}

packages/dapp/app/pages/settings.vue

@@ -24,11 +24,17 @@
       v-model="rpc"
       v-model:chain-id="chainId"
     />
+
+    <AppRpcTester
+      :rpc="effectiveRpc"
+      :chain-id="effectiveChainId"
+    />
   </AppPage>
 </template>
 
 <script setup lang="ts">
-const { chainId, rpc, rpcOverride } = useReaderRpc()
+const { chainId, effectiveChainId, effectiveRpc, rpc, rpcOverride } =
+  useReaderRpc()
 
 useHead({ title: 'Settings' })
 </script>