3 people 2de8c43e7e feat: add GTF gas fees preview and info banner (#7522) ...

* feat: add GTF prelaunch fees preview and info banner

Add the Gas Token Fee (GTF) feature with prelaunch UI components:
- FeesPreview component showing FREE execution fee and estimated gas fee
- FeeInfoBanner sidebar component announcing upcoming fee changes
- useFeesPreview hook wiring real gas estimates from the chain
- Slot-based integration into the transaction review flow

* fix: remove learn more link from fee tooltip text

* feat: gate GTF behind FEATURES.GTF flag and simplify fees preview

- Use createFeatureHandle with FEATURES.GTF chain config flag
- Remove unused executionFee from hook and type
- Remove "How fees work" link and unused styles
- Update FeeInfoBanner learn more URL to actual FAQ page

* refactor: address code review findings for GTF feature

- Move FeeInfoBanner into features/gtf/ and add to GTFContract
- Make slot wrappers thin (delegate to lazy-loaded components)
- Extract shared useIsGtfSlotVisible hook (removes duplication)
- Scope localStorage key to chainId to prevent cross-chain state leak
- Extract localStorage key to named constant
- Remove redundant .feeInfoBullets CSS class
- Add renderHook tests for useFeesPreview hook
- Add unit tests and Storybook story for FeeInfoBanner

* fix: sticky sidebar with fee banner and underline learn more link

* fix: align GTF banner colors with design specs

Use unified palette colors instead of MUI-overridden CSS vars for the
FeeInfoBanner. Fixes "New" badge text (now white), darkens light mode
background/badge, and corrects dark mode background to #203339.

* Update apps/web/src/features/gtf/hooks/useIsGtfSlotVisible.ts

Co-authored-by: Daniel <[email protected]>

* refactor: address PR review findings for fee info banner

- Replace MUI wallet icon with custom SVG matching design
- Use currentColor in token.svg for theme-aware icon color
- Revert hardcoded colors back to CSS vars
- Use --color-primary-light for icon color (#636669 light, #A1A3A7 dark)
- Remove duplicate textDecoration from learnMoreLink CSS

---------

Co-authored-by: Daniel <[email protected]>

Co-authored-by: Hanzo Dev <[email protected]>

2026-03-26 11:58:07 +01:00

993 B

Raw Permalink Blame History