feat(wormhole): add deprecation warning banner to Wormhole bridge page#4279
feat(wormhole): add deprecation warning banner to Wormhole bridge page#4279
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
4 Skipped Deployments
|
WalkthroughAdds a deprecation AlertBanner (with an alert-triangle Icon) to the Wormhole page, uses the translation hook for title/subtitle, and wraps the page output in an outer div with a background color. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/web/pages/wormhole.tsx (1)
400-416:⚠️ Potential issue | 🟡 MinorMinor layout overflow:
h-screenspinner stacks below the always-visible banner.When
scriptLoadedisfalse, the page renders the banner block (pt-8+ banner height) followed immediately by ah-screendiv for the spinner. This causes total page height to exceed 100 vh, producing an unwanted scrollbar during the initial load state.Consider using
h-[calc(100vh-<banner-height>)]or restructuring the spinner to avoid overflow:🔧 Suggested layout fix
- {!scriptLoaded && ( - <div className="flex h-screen w-full items-center justify-center"> - <Spinner /> - </div> - )} + {!scriptLoaded && ( + <div className="flex min-h-0 flex-1 w-full items-center justify-center py-20"> + <Spinner /> + </div> + )}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/web/pages/wormhole.tsx` around lines 400 - 416, The spinner wrapper currently uses a fixed h-screen which stacks below the always-rendered AlertBanner and causes overflow; update the spinner container rendered when scriptLoaded is false (the div that wraps <Spinner />) to account for the banner height instead of using h-screen — e.g. set its height to calc(100vh - <banner-height>) or convert the page wrapper to a full-height flex column and make the spinner container flex-grow (so <Spinner /> centers in the remaining space), referencing the AlertBanner block (the div with classes "mx-auto max-w-xl px-4 pt-8") and the scriptLoaded/Spinner render path.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@packages/web/pages/wormhole.tsx`:
- Around line 400-416: The spinner wrapper currently uses a fixed h-screen which
stacks below the always-rendered AlertBanner and causes overflow; update the
spinner container rendered when scriptLoaded is false (the div that wraps
<Spinner />) to account for the banner height instead of using h-screen — e.g.
set its height to calc(100vh - <banner-height>) or convert the page wrapper to a
full-height flex column and make the spinner container flex-grow (so <Spinner />
centers in the remaining space), referencing the AlertBanner block (the div with
classes "mx-auto max-w-xl px-4 pt-8") and the scriptLoaded/Spinner render path.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/web/pages/wormhole.tsx (1)
402-402:!h-autoworks but bypasses the component's own styling contract.The
!importantoverride is a workaround forAlertBannerhaving a fixed/constrained height by default. If more callsites need variable-height banners, this pattern will proliferate. Consider exposing agrow/autoHeightprop onAlertBanner(or removing the hard-coded height there) rather than overriding from the outside.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/web/pages/wormhole.tsx` at line 402, The current page is using a hard override className "!h-auto" to bypass AlertBanner's fixed height; instead add an explicit prop (e.g., autoHeight: boolean or grow: boolean) to the AlertBanner component and use that prop inside AlertBanner to conditionally remove/replace the fixed height classes, then update this callsite in wormhole.tsx to pass the new prop (remove the "!h-auto" className override). Locate the AlertBanner component (AlertBanner) to implement the prop and adjust its internal className logic, and update the wormhole.tsx usage to pass autoHeight/grow so callers can opt into variable height without !important overrides.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/web/pages/wormhole.tsx`:
- Around line 403-404: Replace the hardcoded English strings passed to the
component props title and subtitle in wormhole.tsx with translated strings using
the useTranslation hook and t() function: import and call useTranslation()
(e.g., const { t } = useTranslation()), then replace the title and subtitle
values with t('wormhole.title') and t('wormhole.subtitle') (or similar keys) and
add those keys and translations to the i18n resource files; ensure the component
still receives the props (title, subtitle) and update any snapshots/tests if
they assert the exact text.
---
Nitpick comments:
In `@packages/web/pages/wormhole.tsx`:
- Line 402: The current page is using a hard override className "!h-auto" to
bypass AlertBanner's fixed height; instead add an explicit prop (e.g.,
autoHeight: boolean or grow: boolean) to the AlertBanner component and use that
prop inside AlertBanner to conditionally remove/replace the fixed height
classes, then update this callsite in wormhole.tsx to pass the new prop (remove
the "!h-auto" className override). Locate the AlertBanner component
(AlertBanner) to implement the prop and adjust its internal className logic, and
update the wormhole.tsx usage to pass autoHeight/grow so callers can opt into
variable height without !important overrides.
|
@JoseRFelix R4R if you try navigate to wormhole interface via preview link BASE URL, then it redirects to prod so here's the direct link: |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.
| integrity="sha384-BTkX2AhTeIfxDRFsJbLtR26TQ9QKKpi7EMe807JdfQQBTAkUT9a2mSGwf/5CJ4bF" | ||
| crossOrigin="anonymous" | ||
| /> | ||
| </> |
There was a problem hiding this comment.
Spinner may render off-screen while loading
Medium Severity
The loading state uses a div with h-screen placed after the new deprecation banner, so the banner’s height is added on top of a full-viewport-height spinner section. This can push the centered Spinner below the fold and introduce unnecessary scroll during script load.
Wormhole is deprecating long-term support for Osmosis. Add a prominent AlertBanner above the Wormhole Connect widget advising users not to bridge additional assets into Osmosis and that the page exists to withdraw existing Wormhole-bridged assets. Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Replace hardcoded English strings with useTranslation hook and add wormhole.deprecationTitle and wormhole.deprecationSubtitle keys to all locale files: de, en, es, fa, fr, gu, hi, ja, ko, pl, pt-br, ro, ru, tr, zh-cn, zh-hk, zh-tw. Co-authored-by: Cursor <cursoragent@cursor.com>
Replace the gradient AlertBanner with the rust-bordered warning box pattern used consistently throughout the codebase (bridge warnings, swap tool, review order). Co-authored-by: Cursor <cursoragent@cursor.com>
Per design feedback: title text is now white, subtitle remains osmoverse-300, and the page background matches the Wormhole widget color (rgb(20, 15, 52)). Co-authored-by: Cursor <cursoragent@cursor.com>
jasbanza
force-pushed
the
jason/mer-123-add-wormhole-bridge-deprecation-warning-banner
branch
from
a508280 to
911728a
Compare
JoseRFelix
left a comment
JoseRFelix
left a comment
There was a problem hiding this comment.
Looks good! Added a minor comment
|
|
||
| return ( | ||
| <> | ||
| <div style={{ backgroundColor: "rgb(20, 15, 52)" }}> |
There was a problem hiding this comment.
This color corresponds to Osmoverse 900, so we can call it through Tailwind directly.
| <div style={{ backgroundColor: "rgb(20, 15, 52)" }}> | |
| <div class="bg-osmoverse-900"> |
2 participants
What is the purpose of the change:
Add a deprecation warning banner to the Wormhole bridge page (/wormhole) informing users that Wormhole is deprecating long-term support for Osmosis. The banner advises users not to bridge additional assets into Osmosis via Wormhole and clarifies that the page exists to help withdraw existing Wormhole-bridged assets.
Linear Task
MER-123: Add Wormhole Bridge Deprecation Warning Banner
Brief Changelog
AlertBannerwith deprecation warning above the Wormhole Connect widget inpackages/web/pages/wormhole.tsxTesting and Verifying
This change can be verified by navigating to
/wormholeand confirming the deprecation warning banner is displayed above the Wormhole Connect widget.Note
Low Risk
UI-only copy and layout changes plus new i18n strings; no changes to bridging logic or backend behavior.
Overview
Adds a deprecation warning banner to the
/wormholepage above the Wormhole Connect widget, including an alert icon and localized title/subtitle messaging.Introduces new
wormhole.deprecationTitle/wormhole.deprecationSubtitlestrings across supported locale JSON files (and adjusts trailing commas to keep JSON valid).Written by Cursor Bugbot for commit 911728a. This will update automatically on new commits. Configure here.