[READY] Add widget mode#580
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a widget mode that deactivates several UI components when the URL parameter mode=widget is present. It refactors the main page structure by wrapping all main sections into a new component and conditionally hides components such as Footer, MobileMenu, and the compare fees button based on widget mode.
- Introduces a new hook, useWidgetMode, to detect widget activation.
- Centralizes the rendering of main sections into MainSections.tsx.
- Conditionally renders UI elements in layouts and components (Navbar, RampSubmitButtons, KYCForm) based on widget mode.
Reviewed Changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/pages/main/index.tsx | Uses MainSections to encapsulate section rendering with widget mode awareness. |
| frontend/src/pages/main/MainSections.tsx | New file that conditionally renders page sections unless widget mode is active. |
| frontend/src/layouts/index.tsx | Hides the Footer component in widget mode. |
| frontend/src/hooks/useWidgetMode.ts | New hook to determine if widget mode is active based on URL parameters. |
| frontend/src/components/RampSubmitButtons/index.tsx | Conditionally renders the compare fees button based on widget mode. |
| frontend/src/components/Navbar/index.tsx | Hides navigation elements (nav block, MobileMenu, MobileMenuList) when widget mode is active. |
| frontend/src/components/BrlaComponents/KYCForm/index.tsx | Conditionally hides the compare fees button in the KYC form when widget mode is active. |
| import { useMemo } from 'react'; | ||
|
|
||
| export const useWidgetMode = (): boolean => { | ||
| const isWidgetMode = useMemo(() => { |
There was a problem hiding this comment.
[nitpick] The useWidgetMode hook memoizes the widget mode state only on mount. If the URL search parameters can change during the session and widget mode should update dynamically, consider updating the dependency array accordingly.
✅ Deploy Preview for pendulum-pay ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
When
mode=widgetis added to the url the widget mode is being activated.