fix(walletkit-example): UI refactor - phase 2

[ignaciosantise]

This pull request introduces significant improvements to theming, UI consistency, and code organization in the example app. The main changes include implementing a centralized theme system, refactoring navigation and header components for a more modern look, updating navigation icons to use SVG assets, and simplifying the apps page to focus on sessions. These changes enhance maintainability, visual consistency, and user experience.

Theming and UI Consistency:

• Integrated a centralized theme system using AppColors, AppTheme, and ThemeProvider, replacing hardcoded colors and style constants throughout the app. The theme now responds to user preference and system settings. [1] [2] [3]
• Updated UI components (such as bottom sheets and navigation elements) to use theme-based colors, spacing, and radii for consistent styling. [1] [2] [3]

Navigation and Header Refactor:

• Refactored the main navigation to use SVG icons instead of Material icons, updating PageData and navigation components accordingly. [1] [2] [3]
• Redesigned the app header with a WalletConnect logo and a scan button, moving away from the standard AppBar for a more customized appearance.

Bottom Sheet Improvements:

• Introduced a custom _SheetIconButton widget for consistent icon button styling in bottom sheets, and updated the bottom sheet to use theme values for background, spacing, and radius. [1] [2]

Code Cleanup and Simplification:

• Removed unused or commented-out code related to platform brightness and widget observers, relying on the new theme provider for dark/light mode handling. [1] [2]
• Simplified the apps page by removing unused imports and focusing on session data instead of pairings. [1] [2]

Navigation Data Model Update:

• Changed the PageData model to use an SVG icon path (svgIcon) instead of an IconData, supporting the new SVG-based navigation. [1] [2]

These changes collectively modernize the app's appearance, improve maintainability, and lay the groundwork for future UI enhancements.

[claude]

Claude finished @ignaciosantise's task in 1m 20s —— View job

---

Code Review Complete

Found 3 issue(s)

Issue 1: PR too large for atomic review

ID: phase2-widgets-pr-size-a8d4
Files: 40 changed files
Severity: HIGH
Category: maintainability

Context:

• Pattern: PR modifying 40 files with +2462/-775 lines
• Risk: Large PRs mix concerns (dispose fix + major UI refactor), making review difficult and increasing merge conflict risk
• Impact: Harder to review, test, debug, and revert if issues arise
• Trigger: Any reviewer attempting thorough code review

Recommendation: Split into focused PRs:

1. PR 1: Critical bug fix - secret_keys_page.dart, settings_page.dart dispose fixes (2 files)
2. PR 2: Theme system - theme/ directory, theme_provider.dart (6 files)
3. PR 3: Widget refactors - widgets/session_item.dart, scan_modal.dart, button/modal updates (8 files)
4. PR 4: Page updates - apps_page.dart, balances_page.dart, main.dart layout changes (3 files)

---

Issue 2: Missing dispose in settings_page.dart _EVMAccountsState

ID: settings-evm-missing-dispose-b3f7
File: packages/reown_walletkit/example/lib/pages/settings_page.dart:342-658
Severity: HIGH
Category: code_quality

Context:

• Pattern: _EVMAccountsState in settings_page.dart registers listener on singleton at line 362 but has no dispose() override
• Risk: Same memory leak and setState-after-dispose crash as secret_keys_page.dart
• Impact: Memory leak, crash on navigation, undisposed PageController
• Trigger: Navigate to Settings page, then away while chain selection changes

Recommendation: Add dispose override:

@override
void dispose() {
  _walletKitService.currentSelectedChain.removeListener(_onChainChanged);
  _pageController.dispose();
  super.dispose();
}

---

Issue 3: Missing mounted guard in settings_page.dart setState

ID: settings-evm-missing-mounted-f9a1
File: packages/reown_walletkit/example/lib/pages/settings_page.dart:388
Severity: MEDIUM
Category: code_quality

Context:

• Pattern: _switchToChain at line 371-392 calls setState at line 388 without mounted check
• Risk: setState() called after dispose() if widget disposed during async session event emission (lines 373-387)
• Impact: Framework assertion failure, app crash
• Trigger: Navigate away from Settings while chain switching is in progress

Recommendation: Add mounted guard before setState:

if (!mounted) return;
setState(() => _selectedChain = chainMetadata);

Summary

PR correctly fixes the dispose issue in secret_keys_page.dart (lines 87-91), but the same issue exists in settings_page.dart's duplicate _EVMAccountsState class. The PR is very large (40 files) and mixes a critical bug fix with a major UI refactoring, making it harder to review and test.

[Copilot]

Pull request overview

This pull request addresses a critical memory leak and crash issue in the walletkit example app by adding proper resource cleanup to _EVMAccountsState, along with a comprehensive theming system refactor to support dark mode.

Changes:

• Fixes missing dispose() method in _EVMAccountsState that removes listener and disposes PageController
• Adds mounted guards before setState() calls in async operations to prevent crashes
• Introduces new theming system with AppColors, AppTypography, ThemeProvider for dark mode support
• Refactors UI components to use theme-aware styling via context extensions
• Adds new session and scan modal widgets with improved UX

Reviewed changes

Copilot reviewed 31 out of 40 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
lib/pages/secret_keys_page.dart	New file: Implements dispose() with listener removal and PageController cleanup, adds mounted guards
lib/theme/app_spacing.dart	New file: Defines spacing constants (missing s3, s2, s5, s05 constants - critical bug)
lib/theme/app_colors.dart	New file: Theme extension for light/dark color schemes with context.colors extension
lib/theme/app_typography.dart	New file: Typography system with context.textStyles extension
lib/theme/app_theme.dart	New file: ThemeData builders for light and dark modes
lib/theme/theme_provider.dart	New file: Theme mode state management with persistence
lib/theme/app_radius.dart	New file: Border radius constants
lib/main.dart	Integrates ThemeProvider, adds theme switching, updates navigation with new design
lib/widgets/session_item.dart	New file: Displays session information with chain icons
lib/widgets/scan_modal.dart	New file: Bottom sheet for QR scanning and URL pasting
lib/pages/apps_page.dart	Refactored to show sessions instead of pairings
lib/pages/balances_page.dart	Updated to use theme-aware styling
lib/pages/settings_page.dart	Adds dark mode toggle widget
lib/widgets/custom_button.dart	Enhanced with outlined style and disabled state support
lib/utils/constants.dart	Deprecated color/text constants, delegates to AppColors for backward compatibility
pubspec.yaml	Adds KH Teka font family with Light, Regular, and Medium weights
assets/*.svg	New files: Icon assets for navigation and UI

---

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