feat: Convert GasEducationCarousel from JavaScript to TypeScript

[devin-ai-integration]

feat: Convert GasEducationCarousel from JavaScript to TypeScript

Summary

Converted app/components/Views/GasEducationCarousel/index.js to TypeScript (.tsx) as part of the ongoing JavaScript to TypeScript migration in MetaMask Mobile. This change improves type safety and development experience while maintaining all existing functionality.

Key Changes:

• Renamed index.js → index.tsx
• Replaced PropTypes with TypeScript interface GasEducationCarouselProps
• Added proper type annotations for React hooks (useState, useEffect)
• Updated Redux mapStateToProps to use RootState type
• Fixed navigation typing to use NavigationProp<ParamListBase>
• Updated test file with proper TypeScript mocks and type assertions
• Resolved all TypeScript compilation errors and ESLint warnings

Review & Testing Checklist for Human

• Test gas education carousel end-to-end: Navigate through all 3 carousel slides and verify gas fee estimates display correctly
• Verify navigation behavior: Ensure the "Get Started" button properly navigates back to the previous screen (changed from navigation.pop() to navigation.goBack())
• Check gas fee calculations: Verify that gas estimates show accurate fiat conversions for both EIP1559 and legacy gas types
• Run tests: Execute yarn test app/components/Views/GasEducationCarousel/ to ensure updated test file passes
• Validate TypeScript compilation: Run yarn lint:tsc to confirm no type errors

---

Diagram

%%{ init : { "theme" : "default" }}%%
graph TD
    GasCarousel["app/components/Views/GasEducationCarousel/<br/>index.tsx"]:::major-edit
    GasTest["app/components/Views/GasEducationCarousel/<br/>index.test.tsx"]:::minor-edit
    ThemeModels["app/util/theme/models.ts<br/>(Colors type)"]:::context
    CurrencySelectors["app/selectors/currencyRateController.ts<br/>(RootState, selectors)"]:::context
    Reducers["app/reducers<br/>(RootState type)"]:::context
    Navigation["@react-navigation/native<br/>(NavigationProp)"]:::context

    GasCarousel -->|imports Colors type| ThemeModels
    GasCarousel -->|imports RootState| Reducers
    GasCarousel -->|uses navigation typing| Navigation
    GasCarousel -->|connects to Redux| CurrencySelectors
    GasTest -->|tests component| GasCarousel

    subgraph Legend
        L1[Major Edit]:::major-edit
        L2[Minor Edit]:::minor-edit  
        L3[Context/No Edit]:::context
    end

    classDef major-edit fill:#90EE90
    classDef minor-edit fill:#87CEEB
    classDef context fill:#FFFFFF

Loading

Notes

• Navigation Change: Replaced navigation.pop() with navigation.goBack() to fix TypeScript compatibility - verify this doesn't change user experience
• Gas Calculation Types: Added strict typing to EIP1559 gas fee calculations - monitor for any runtime type mismatches
• Test Updates: Modified test to use proper TypeScript navigation mocks instead of legacy getParam approach
• Redux Typing: Connected to proper RootState type from currency rate selectors for better type safety

Session Info: Requested by @mbatchelor81
Devin Session: https://app.devin.ai/sessions/e3abd704f554465aa7da332166904ac7

[devin-ai-integration]

🤖 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