fix(bridge): fix progress bar background #5888
Conversation
WalkthroughThe changes introduce explicit return type annotations for several React components, update import statements, and adjust a styled component's background color to use a CSS variable. Additionally, a new theme configuration updater component is inserted into the application component tree, without affecting existing logic or control flow. Changes
Sequence Diagram(s)sequenceDiagram
participant App
participant BlockNumberProvider
participant ThemeConfigUpdater
participant WalletUpdater
App->>BlockNumberProvider: Render
BlockNumberProvider->>ThemeConfigUpdater: Render as child
ThemeConfigUpdater->>WalletUpdater: Render as sibling
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
yarn install v1.22.22 ✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/BridgingStep.tsx (1)
34-36: Add a fallback colour for robustness.
IfUI.COLOR_PAPER_DARKERis not injected into the runtime CSS variables, the element will render withunsetbackground. Consider supplying a fallback.- background: var(${UI.COLOR_PAPER_DARKER}); + /* Fallback keeps legacy colour when CSS variable is absent */ + background: var(${UI.COLOR_PAPER_DARKER}, #f2f2f2);apps/cowswap-frontend/src/modules/bridge/pure/CollapsibleBridgeRoute/index.tsx (1)
38-40: Remove obsolete TODO comment.The TODO is now satisfied; keep the file tidy.
- // TODO: Add proper return type annotation const toggleExpanded = (): void => setIsExpanded((state) => !state)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/cowswap-frontend/src/cosmos.decorator.tsx(2 hunks)apps/cowswap-frontend/src/modules/bridge/pure/CollapsibleBridgeRoute/index.tsx(1 hunks)apps/cowswap-frontend/src/modules/bridge/pure/ProgressDetails/index.tsx(2 hunks)apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/BridgingStep.tsx(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
apps/cowswap-frontend/src/cosmos.decorator.tsx (1)
apps/cowswap-frontend/src/theme/ThemeConfigUpdater.ts (1)
ThemeConfigUpdater(13-30)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Setup
- GitHub Check: Cypress
🔇 Additional comments (5)
apps/cowswap-frontend/src/cosmos.decorator.tsx (2)
24-24: Import path looks good.
The relative path resolves correctly (src/theme/ThemeConfigUpdater). No concerns.
110-112: Verify side-effect duplication under React StrictMode.
ThemeConfigUpdaterfires auseEffectthat writes to the Jotai atom every time it mounts. BecauseStrictModeintentionally mounts components twice in development, the atom will be set twice. That is generally harmless but can spam dev tools/loggers if future logic adds expensive work inside the same effect.apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/BridgingStep.tsx (1)
3-3: Named import verified.
UIis now required for theme tokens; the bundle size impact is negligible.apps/cowswap-frontend/src/modules/bridge/pure/ProgressDetails/index.tsx (1)
1-2: Explicit return type improves readability.
Nice cleanup and ESLint-compliance.apps/cowswap-frontend/src/modules/bridge/pure/CollapsibleBridgeRoute/index.tsx (1)
33-34: Return type annotation added.
This removes the need for the previous ESLint suppression – good improvement.
|
This issue has been addressed in #5782 |
Summary
Before:
After:
To Test
The progress bar (bridge steps) background should look good both for light and dark themes
Summary by CodeRabbit
New Features
Style
Refactor