Problem
Six legacy component files use require(\../../theme/colors.json') which does not exist in the project. The actual colors are in constants/colors.ts.
Files that will crash:
components/pages/PayScreen.tsx:7 — CRITICAL
components/pages/InvestScreen.tsx:17 — CRITICAL
components/pages/SettingsScreen.tsx:6 — CRITICAL
components/shared/Header.tsx:5 — CRITICAL
components/shared/BottomBar.tsx:5 — CRITICAL
components/shared/NotificationsPanel.tsx:25 — CRITICAL
These components are imported from App.tsx via MainLayout → InvestScreen.
User impact: The app crashes at startup with a MODULE_NOT_FOUND error. Users cannot use the app.
Before Starting
Read: context/architecture-context.md, context/code-standards.md
Root Cause
These are legacy components from a previous branding era ("Trust Up"). They were never removed or updated after the project rebranded to StepFi and migrated to Expo Router.
What To Build
- Fix the require paths to import from
constants/colors.ts
- Replace all Ionicons icons with
lucide-react-native
- Verify the entire component set loads without errors
Better approach: Remove these legacy components entirely since they are dead code. The Expo Router app in app/ already provides the same functionality.
Files To Touch
components/pages/PayScreen.tsx — fix or remove
components/pages/InvestScreen.tsx — fix or remove
components/pages/SettingsScreen.tsx — fix or remove
components/shared/Header.tsx — fix or remove
components/shared/BottomBar.tsx — fix or remove
components/shared/NotificationsPanel.tsx — fix or remove
Acceptance Criteria
Mandatory Checks
Problem
Six legacy component files use
require(\../../theme/colors.json')which does not exist in the project. The actual colors are inconstants/colors.ts.Files that will crash:
components/pages/PayScreen.tsx:7— CRITICALcomponents/pages/InvestScreen.tsx:17— CRITICALcomponents/pages/SettingsScreen.tsx:6— CRITICALcomponents/shared/Header.tsx:5— CRITICALcomponents/shared/BottomBar.tsx:5— CRITICALcomponents/shared/NotificationsPanel.tsx:25— CRITICALThese components are imported from
App.tsxviaMainLayout→InvestScreen.User impact: The app crashes at startup with a MODULE_NOT_FOUND error. Users cannot use the app.
Before Starting
Read: context/architecture-context.md, context/code-standards.md
Root Cause
These are legacy components from a previous branding era ("Trust Up"). They were never removed or updated after the project rebranded to StepFi and migrated to Expo Router.
What To Build
constants/colors.tslucide-react-nativeBetter approach: Remove these legacy components entirely since they are dead code. The Expo Router app in
app/already provides the same functionality.Files To Touch
components/pages/PayScreen.tsx— fix or removecomponents/pages/InvestScreen.tsx— fix or removecomponents/pages/SettingsScreen.tsx— fix or removecomponents/shared/Header.tsx— fix or removecomponents/shared/BottomBar.tsx— fix or removecomponents/shared/NotificationsPanel.tsx— fix or removeAcceptance Criteria
Mandatory Checks