chore: Added new useAppKitTheme hook #499
Conversation
🦋 Changeset detectedLatest commit: 32e7408 The changes in this PR will be included in the next version bump. This PR includes changesets to release 9 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Claude finished @ignaciosantise's task —— View job Code Review CompleteTasks:
Issues Found🔴 Critical: Hook Not ExportedFile: The Fix required: Add export to export { useAppKitTheme } from './hooks/useAppKitTheme';🟡 Bug: Incorrect ThemeController BehaviorFile: The hook calls Issue: Recommendation: Either:
🟡 Missing TestsLocation: No test file exists for Per project standards requiring 80%+ test coverage, this hook needs tests. The existing Required test cases:
Reference: See 🟢 Minor: Inconsistent Empty Value HandlingFile: The hook uses setThemeVariables(themeVariables: ThemeControllerState['themeVariables']) {
if (!themeVariables) {
state.themeVariables = {};
}
state.themeVariables = { ...state.themeVariables, ...themeVariables };
}When Controller fix needed: setThemeVariables(themeVariables: ThemeControllerState['themeVariables']) {
if (!themeVariables) {
state.themeVariables = {};
return;
}
state.themeVariables = { ...state.themeVariables, ...themeVariables };
}🟢 Documentation: Missing Type ExportFile: The hook exports Recommendation: Export the type: export { useAppKitTheme, type UseAppKitThemeReturn } from './hooks/useAppKitTheme';This matches the pattern used for other hooks like SummaryBlocking issues:
Non-blocking issues: The implementation is well-documented and follows React hooks best practices (proper use of |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
|
@claude review |
|
Claude encountered an error —— View job I'll analyze this and get back to you. |
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a new useAppKitTheme hook for controlling theme mode and accent color in AppKit React Native modals. It also refactors context handling by introducing a centralized useAppKitContext hook and updates the ThemeController to use undefined as the default for themeVariables.
Key changes:
- Added
useAppKitThemehook with getters/setters for theme mode and variables - Created
useAppKitContextto centralize AppKit context validation - Updated ThemeController default state from
{}toundefinedforthemeVariables
Reviewed Changes
Copilot reviewed 20 out of 20 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/core/src/controllers/ThemeController.ts | Changed default themeVariables from empty object to undefined; updated setThemeVariables to clear variables when passed undefined |
| packages/core/src/tests/controllers/ThemeController.test.ts | Updated tests to reflect undefined default for themeVariables |
| packages/appkit/src/index.ts | Exported new useAppKitTheme hook and its return type |
| packages/appkit/src/hooks/useAppKitTheme.ts | New hook providing theme mode and variables control with proper memoization |
| packages/appkit/src/hooks/useAppKitContext.ts | New internal hook for centralized context validation |
| packages/appkit/src/hooks/useAppKit.ts | Refactored to use useAppKitContext; added comprehensive documentation |
| packages/appkit/src/hooks/useAccount.ts | Updated to use useAppKitContext instead of useAppKit |
| packages/appkit/src/hooks/useProvider.ts | Updated to use useAppKitContext; simplified documentation example |
| packages/appkit/src/hooks/useWalletInfo.ts | Updated to use useAppKitContext; added comprehensive documentation |
| packages/appkit/src/hooks/useAppKitState.ts | Updated to use useAppKitContext; added comprehensive documentation |
| packages/appkit/src/hooks/useAppKitEvents.ts | Updated to use useAppKitContext; added comprehensive documentation |
| packages/appkit/src/hooks/useAppKitLogs.ts | Updated to use useAppKitContext; removed duplicate context validation |
| packages/appkit/src/tests/hooks/useAppKitTheme.test.tsx | Comprehensive test suite for useAppKitTheme hook |
| packages/appkit/src/AppKitContext.tsx | Exported AppKitContextType interface |
| packages/appkit/package.json | Added test script |
| packages/appkit/jest.config.ts | Jest configuration for appkit package |
| packages/appkit/jest-setup.ts | Jest setup importing shared configuration |
| packages/appkit/babel.config.js | Babel configuration for React Native preset |
| package.json | Updated test script to remove turbo build dependency |
| .changeset/spotty-foxes-fry.md | Changeset documenting patch bumps for affected packages |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
This pull request introduces a new hook,
useAppKitTheme, to the AppKit React Native ecosystem, enabling developers to control and customize the theme mode (light/dark) and accent color of the AppKit modal. The hook provides an interface for reading and updating theme settings, improving theming flexibility and integration with host applications.The most important changes are:
New Feature: Theme Control Hook
useAppKitThemehook inpackages/appkit/src/hooks/useAppKitTheme.ts, allowing consumers to get and set the current theme mode and accent color for AppKit modals. The hook provides a typed API and is documented with usage examples.Note
Introduce
useAppKitThemeand a shareduseAppKitContext, refactor hooks to use it, and enhanceThemeControllerwith defaults and tests.useAppKitTheme(packages/appkit/src/hooks/useAppKitTheme.ts) and export fromsrc/index.ts.useAppKitContextand refactoruseAccount,useAppKit,useAppKitEvents,useAppKitLogs,useAppKitState,useProvider,useWalletInfoto use it for provider-scope checks.AppKitContextTypeand keep provider wiring.jest.config.ts,jest-setup.ts, andbabel.config.js; add tests foruseAppKitTheme.themeVariablesnon-optional; adddefaultThemeMode; updatesetThemeModeto fallback to system (default light); support resettingsetThemeVariables; add/expand tests.testscript; addtestscript topackages/appkit/package.json.@reown/*packages.Written by Cursor Bugbot for commit 32e7408. This will update automatically on new commits. Configure here.