Skip to content

feat: migrate GasEducationCarousel from JS to TypeScript#20

Open
devin-ai-integration[bot] wants to merge 1 commit intomainfrom
devin/1758631982-migrate-gas-education-carousel-to-typescript
Open

feat: migrate GasEducationCarousel from JS to TypeScript#20
devin-ai-integration[bot] wants to merge 1 commit intomainfrom
devin/1758631982-migrate-gas-education-carousel-to-typescript

Conversation

@devin-ai-integration
Copy link
Copy Markdown

feat: migrate GasEducationCarousel from JS to TypeScript

Summary

Migrated the GasEducationCarousel component from JavaScript to TypeScript as part of the ongoing JS→TS migration effort. This PR includes:

  • File rename: index.jsindex.tsx
  • Removed PropTypes: Replaced with TypeScript interfaces
  • Redux pattern modernization: Replaced connect HOC with useSelector hooks
  • Comprehensive type annotations: Added proper types for all variables, functions, and React hooks
  • Navigation typing: Used proper @react-navigation/native types for navigation and route props
  • Gas estimation logic typing: Properly typed the complex BigNumber gas fee calculations
  • Test updates: Updated test file with proper TypeScript mocks

Key changes include creating a GasEducationCarouselProps interface, typing the complex gas estimation algorithm with proper BN types, and ensuring strict TypeScript compliance throughout.

Review & Testing Checklist for Human

  • Test gas education carousel end-to-end: Navigate to the carousel and verify gas fee estimates display correctly with proper currency formatting
  • Verify navigation behavior: Confirm the "Get Started" button still navigates correctly (changed from navigation.pop() to navigation.goBack())
  • Check carousel image display: Ensure all three carousel images render with correct sizing (modified dynamic style access for TS compliance)
  • Test Redux state updates: Change currency/conversion rate in settings and verify the carousel updates gas fee display appropriately (changed from connect HOC to useSelector)

Notes

The most significant architectural change is replacing the connect HOC pattern with modern useSelector hooks. The gas estimation logic includes complex BigNumber operations that now have proper typing - this is critical functionality that should be tested thoroughly.

Link to Devin run: https://app.devin.ai/sessions/6d58bef36223461ea9a83fd1e01c9a64
Requested by: @mbatchelor81

- Convert index.js to index.tsx
- Replace PropTypes with TypeScript interfaces
- Replace connect HOC with useSelector hooks
- Add proper type annotations for all variables and functions
- Type navigation and route props using @react-navigation/native types
- Type gas estimation logic with proper BN types
- Update test file with proper TypeScript mocks
- Ensure strict TypeScript compliance

Co-Authored-By: mason.batchelor@windsurf.com <mason.batchelor@windsurf.com>
@devin-ai-integration
Copy link
Copy Markdown
Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

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.

0 participants