Skip to content

feat: AI integration baseline#420

Merged
gabitoesmiapodo merged 57 commits intomainfrom
feat/ai-integration
Mar 30, 2026
Merged

feat: AI integration baseline#420
gabitoesmiapodo merged 57 commits intomainfrom
feat/ai-integration

Conversation

@gabitoesmiapodo
Copy link
Copy Markdown
Collaborator

@gabitoesmiapodo gabitoesmiapodo commented Mar 23, 2026

Summary

This branch adds AI agent context files (CLAUDE.md / AGENTS.md) and serves as the destination branch for a complete web quality initiative: a test safety net (5 PRs) followed by a web audit fix chain (5 PRs), all stacked incrementally so tests catch any regressions introduced by fixes.

This branch

  • CLAUDE.md + AGENTS.md — project instructions for AI agents (Claude and others). Both files are kept in sync; AGENTS.md is a regular file copy of CLAUDE.md.
  • .claude/ — Claude Code settings and ignore rules

Stacked PR chain (merge in order)

Test safety net

# Branch Target Scope
#415 test/utils feat/ai-integration Tier 1: Pure utility + env tests
#416 test/enhance-existing test/utils Tier 2: Enhanced BigNumberInput + HashInput tests
#417 test/hooks test/enhance-existing Tier 3: useWeb3Status, useTokenLists, useErc20Balance hook tests
#418 test/components test/hooks Tier 4: TransactionButton, SwitchNetwork, WalletStatusVerifier, suspenseWrapper tests
#419 test/demo-smoke test/components Tier 5: Demo page smoke tests

Web quality fixes (stacked on top of tests)

# Branch Target Scope
#421 fix/a11y test/demo-smoke WCAG AA color contrast, skip link, focus rings, aria attributes
#422 fix/performance fix/a11y Lazy loading, dns-prefetch, vendor chunk splitting
#423 fix/seo fix/performance JSON-LD structured data, sitemap hostname env var
#424 fix/security fix/seo CSP report-only mode + security headers via vercel.json
#425 fix/deps fix/security Minor/patch dependency updates including security vulnerability fixes

What was fixed

Accessibility

  • Warning color #cc0#996600 (light) / #e6b800 (dark) — was 1.3:1 contrast, now ~6-7:1
  • Danger and OK tokens now have separate light/dark values to pass WCAG AA in both modes
  • Skip link added to root layout for keyboard navigation
  • aria-invalid added to BigNumberInput on validation error
  • _focusVisible focus rings restored on CopyButton and ExternalLink (previously outline: none)
  • aria-label added to all icon-only buttons (close buttons, explorer links)

Performance

  • loading="lazy" on TokenLogo and Avatar images
  • DNS prefetch hints for RPC endpoints in index.html
  • Vite manualChunks for React, wagmi/viem, TanStack, Chakra UI, and AppKit vendor bundles

SEO

  • JSON-LD structured data (Organization + WebApplication schemas) in index.html
  • Sitemap hostname now reads from PUBLIC_APP_URL env var with fallback

Security

  • Content-Security-Policy-Report-Only header in vercel.json (non-breaking, report-only mode)
  • X-Content-Type-Options: nosniff, X-Frame-Options: DENY, Referrer-Policy: strict-origin-when-cross-origin

Dependencies

  • Updated all minor/patch packages (react, viem, chakra-ui, tanstack, reown/appkit, etc.)
  • Fixes h3 path traversal vulnerability via @reown/appkit 1.8.19

Merge order

#415#416#417#418#419#421#422#423#424#425#420 (into main)

Test plan

  • All 10 stacked PRs merged in order
  • pnpm test:coverage confirms no regressions
  • pnpm build passes cleanly
  • Lighthouse audit run on preview — target 90+ in all categories
  • Keyboard navigation tested: all interactive elements reachable with visible focus

Copilot AI review requested due to automatic review settings March 23, 2026 21:18
@vercel
Copy link
Copy Markdown

vercel bot commented Mar 23, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
components.dappbooster Ready Ready Preview, Comment Mar 30, 2026 7:21pm
demo.dappbooster Ready Ready Preview Mar 30, 2026 7:21pm
docs.dappbooster Ready Ready Preview, Comment Mar 30, 2026 7:21pm

Request Review

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds baseline documentation and configuration files intended to support AI-assisted workflows (Claude Code) alongside the existing dAppBooster template, plus local-ignore rules for Claude-specific files.

Changes:

  • Add CLAUDE.md with repo setup, architecture, conventions, and testing guidance.
  • Add Claude Code configuration (.claude/settings.json) and ignore local Claude artifacts via .gitignore.
  • Add AGENTS.md pointing at CLAUDE.md (likely as a symlink-style pointer).

Reviewed changes

Copilot reviewed 3 out of 4 changed files in this pull request and generated 2 comments.

File Description
CLAUDE.md Adds repo “operator’s manual” covering setup, structure, conventions, and patterns.
AGENTS.md Adds an agent entry pointing to CLAUDE.md (potentially via symlink representation).
.gitignore Ignores Claude Code local settings and local CLAUDE notes.
.claude/settings.json Allows web fetch access to specific documentation domains.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@gabitoesmiapodo gabitoesmiapodo self-assigned this Mar 23, 2026
…r file

Replace the literal pipe character between the two URLs in the header
with a space separator to avoid Markdown table syntax confusion.

Convert AGENTS.md from a symlink to a regular file copy of CLAUDE.md
so it works reliably on Windows and in CI environments where symlinks
may not be supported.
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 3 out of 4 changed files in this pull request and generated no new comments.


💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Add test safety net before dependency updates. New files:
- src/test-utils.tsx: renderWithProviders, createMockWeb3Status, createMockChain
- src/utils/strings.test.ts: truncateStringInTheMiddle and getTruncatedHash (13 tests)
- src/utils/getExplorerLink.test.ts: getExplorerLink (6 tests)
- src/utils/address.test.ts: isNativeToken (5 tests)
- src/env.test.ts: Zod-validated env schema (9 tests)
- .env.test: Vitest environment variables for required PUBLIC_ fields
- Fix env.test.ts test names that incorrectly claimed to test defaults
  while .env.test was setting those vars explicitly
- Assert exact value for PUBLIC_WALLETCONNECT_PROJECT_ID (was typeof check)
- Fix createMockWeb3Status shape to match actual Web3Status interface
  (was using isConnected/chainId/publicClient; hook uses isWalletConnected/
  walletChainId/readOnlyClient)
- Hardcode expected explorer URL in getExplorerLink assertions instead of
  deriving from mock chain (prevents false positives if mock misconfigured)
BigNumberInput: add 9 tests covering placeholder, disabled state,
onChange with parsed bigint, onError for min/max violations,
decimal precision enforcement, and input clearing.

HashInput: add 7 tests covering placeholder, typed value reflection,
initial value, clear to null, debounced search callback,
onLoading lifecycle, and custom renderInput.
- Rename misleading test names in BigNumberInput (onError absence test,
  maxUint256 constraint test)
- Add beforeEach mock clear in HashInput to prevent cross-test contamination
  from unconsumed mockResolvedValueOnce calls
- Add debounceTime: 0 to clear test to avoid real-timer dependency
- Rename debounce test to accurately describe what it covers; fake-timer
  debounce testing conflicts with waitFor + userEvent in jsdom
- Use @/src/env alias import in env.test.ts (matches repo convention)
- Rename 'checksummed zero address' test to 'zero address string literal'
  (no checksum casing difference in this value; name was misleading)
React global namespace is not available without explicit import; use
named import from 'react' to avoid 'Cannot find namespace React' errors.
- useWeb3Status.test.ts: 8 tests covering disconnected/connected state,
  isWalletSynced, switchingChain, disconnect, switchChain, appChainId
- useWeb3StatusConnected.test.ts: 2 tests (co-located in same file)
  covering throw-on-disconnect and pass-through when connected
- useErc20Balance.test.ts: 5 tests covering missing address/token,
  native token skip, successful balance fetch, and error handling
- useTokenLists.test.ts: 4 tests covering return shape, deduplication,
  native token injection, and schema validation filtering
- Add beforeEach mock clearing in useWeb3Status to prevent shared mock
  call history leaking between tests
- Switch mockReturnValue to mockReturnValueOnce for the connected test in
  useWeb3StatusConnected (hook calls useWeb3Status twice internally)
- Add beforeEach mockReadContract.mockClear() in useErc20Balance to
  prevent cross-test false negatives on not.toHaveBeenCalled assertions
New tests for shared components and utilities:
- TokenLogo: img src/alt/size, IPFS URL conversion, placeholder on error
- TransactionButton: wallet states, pending label, onMined callback
- SwitchNetwork: network display, disabled state, menu item rendering
- WalletStatusVerifier: connect fallback, wrong chain, synced renders children
- withWalletStatusVerifier HOC: fallback and pass-through behavior
- withSuspense/withSuspenseAndRetry: Suspense fallback, error message, retry

Also adds:
- ResizeObserver mock to setupTests.ts (required by @floating-ui in jsdom)
- .env.test and src/test-utils.tsx (shared test utilities from tier 1)
- setupTests.ts: replace vi.fn() ResizeObserver with a real class guarded
  by a conditional check — vi.restoreAllMocks() can no longer clear it
- suspenseWrapper.test.tsx: restore only the console.error spy in afterEach
  instead of vi.restoreAllMocks() which would wipe the ResizeObserver polyfill
- TransactionButton.test.tsx: make useWaitForTransactionReceipt mock hash-aware
  so it only returns the receipt when called with the expected hash
Smoke tests for all demo page components to verify they render
without crashing. Mocks external Web3 deps at module level.

New test files:
- home/index.test.tsx: Home renders Welcome + Examples sections
- NotFound404.test.tsx: 404 page with mocked useNavigate
- demos/ConnectWallet/index.test.tsx: mocked ConnectWalletButton
- demos/EnsName/index.test.tsx: mocked useEnsName
- demos/HashHandling/index.test.tsx: mocked useWeb3Status + detectHash
- demos/SignMessage/index.test.tsx: shows fallback when wallet absent
- demos/SwitchNetwork/index.test.tsx: shows fallback when wallet absent
- demos/TransactionButton/index.test.tsx: shows fallback when wallet absent
- demos/TokenDropdown/index.test.tsx: mocked BaseTokenDropdown
- demos/TokenInput/index.test.tsx: mocked useTokenLists + useTokenSearch

Also adds .env.test and src/test-utils.tsx (shared test utilities).
The module exports detectHash as a default export; the mock only provided
a named export so HashInput would receive undefined and throw on invocation.
Added both default and named exports to the mock factory.
fix(seo): JSON-LD structured data and sitemap hostname
chore(deps): update minor and patch dependencies
…plorer

fix: throw when getExplorerLink has no block explorer URL available
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 45 out of 47 changed files in this pull request and generated 4 comments.


💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants