feat(explorer): display bridging data in order page #5787
Conversation
…sure bridgeDetails is valid
…e fields in DetailsTable
…anced visual context
…lity in existing components
…dling across components
… feat/bridge-explorer-1 # Conflicts: # apps/cowswap-frontend/src/modules/bridge/containers/BridgeRouteBreakdown/BridgeRouteBreakdown.cosmos.tsx # apps/cowswap-frontend/src/modules/bridge/hooks/useBridgeProviderDetails.ts # apps/cowswap-frontend/src/modules/bridge/index.ts # apps/cowswap-frontend/src/modules/bridge/pure/BridgeStopDetails/index.tsx # apps/cowswap-frontend/src/modules/bridge/pure/SwapStopDetails/index.tsx # apps/explorer/src/components/orders/DetailsTable/index.tsx # apps/explorer/src/components/orders/DetailsTable/styled.ts # apps/explorer/src/components/orders/OrderDetails/OrderDetails.fixture.tsx # apps/explorer/src/utils/orderTypeGuards.ts # libs/bridge/src/providers.ts
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
3 Skipped Deployments
|
WalkthroughThis update removes the local Changes
Sequence Diagram(s)sequenceDiagram
participant AppComponent
participant UI_Library
participant Theme
participant ChainInfo
AppComponent->>UI_Library: import { NetworkLogo }
AppComponent->>NetworkLogo: <NetworkLogo chainId=... size=... />
NetworkLogo->>ChainInfo: getChainInfo(chainId)
NetworkLogo->>Theme: useTheme()
NetworkLogo->>AppComponent: Render logo image with correct style and theme
Possibly related PRs
Suggested labels
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 (
|
|
No dependency changes detected. Learn more about Socket for GitHub. 👍 No dependency changes detected in pull request |
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (2)
apps/explorer/src/components/orders/StatusLabel/index.tsx (1)
51-53: Unsafe cast persists – same issue flagged previouslyThe
status as OrderStatuscast is still present and unnecessary. It can admit invalid strings intocanBePartiallyFilled.- const tagPartiallyFilled = - partiallyFilled && typeof status === 'string' && canBePartiallyFilled(status as OrderStatus) + const tagPartiallyFilled = + partiallyFilled && canBePartiallyFilled(_status)apps/explorer/src/components/orders/BridgeDetailsTable/RefundStatus.tsx (1)
43-45: RedundantNOT_INITIATEDcaseBehaviour is identical to the
defaultbranch – remove the extra clause to silence lint and simplify the switch.
🧹 Nitpick comments (3)
apps/explorer/src/components/token/TokenAmount/index.tsx (1)
20-23: Trim trailing space whennoSymbolis enabledThe unconditional space before the symbol causes a visible trailing whitespace when
noSymbolistrue.
Refactor the JSX so the space is rendered only when the symbol is rendered.- <span title={fullAmount + ' ' + displayedSymbol}> - {displayedAmount} {noSymbol ? '' : displayedSymbol} + <span title={fullAmount + (displayedSymbol ? ` ${displayedSymbol}` : '')}> + {displayedAmount} + {!noSymbol && displayedSymbol ? ` ${displayedSymbol}` : null} </span>apps/explorer/src/components/orders/StatusLabel/index.tsx (2)
24-28: Hard-coded lowercase array duplicates enum values – consolidate via.mapto avoid drift-const SHIMMING_STATUSES = [ - OrderStatus.Signing.toLowerCase(), - OrderStatus.Cancelling.toLowerCase(), - BridgeStatus.IN_PROGRESS.toLowerCase(), -] +const SHIMMING_STATUSES = [ + OrderStatus.Signing, + OrderStatus.Cancelling, + BridgeStatus.IN_PROGRESS, +].map((s) => s.toLowerCase())Keeps the list automatically in sync if enum literals ever change or new active states are added.
56-58: Indexing bridge-status map with union type hides intent & type-safety- const displayStatus: StyledGenericStatus = - customizeStatus && partiallyFilled ? OrderStatus.PartiallyFilled : bridgeStatusTitleMap[_status] || status + const displayStatus: StyledGenericStatus = + customizeStatus && partiallyFilled + ? OrderStatus.PartiallyFilled + : _status in bridgeStatusTitleMap + ? bridgeStatusTitleMap[_status as BridgeStatus] + : statusMakes it explicit that only
BridgeStatusvalues should hit the map, removing the silentundefinedfallback and easing TypeScript’s control-flow analysis.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
apps/explorer/src/components/orders/BridgeDetailsTable/BridgeAmountDisplay.tsx(1 hunks)apps/explorer/src/components/orders/BridgeDetailsTable/BridgeDetailsContent/index.tsx(1 hunks)apps/explorer/src/components/orders/BridgeDetailsTable/BridgeReceiveAmount.tsx(1 hunks)apps/explorer/src/components/orders/BridgeDetailsTable/BridgeTxOverview.tsx(1 hunks)apps/explorer/src/components/orders/BridgeDetailsTable/RefundStatus.tsx(1 hunks)apps/explorer/src/components/orders/BridgeDetailsTable/index.tsx(1 hunks)apps/explorer/src/components/orders/BridgeDetailsTable/styled.ts(1 hunks)apps/explorer/src/components/orders/OrderDetails/index.tsx(5 hunks)apps/explorer/src/components/orders/OrderDetails/tabs.tsx(1 hunks)apps/explorer/src/components/orders/StatusLabel/index.tsx(1 hunks)apps/explorer/src/components/token/TokenAmount/index.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (7)
- apps/explorer/src/components/orders/BridgeDetailsTable/BridgeAmountDisplay.tsx
- apps/explorer/src/components/orders/BridgeDetailsTable/BridgeReceiveAmount.tsx
- apps/explorer/src/components/orders/BridgeDetailsTable/index.tsx
- apps/explorer/src/components/orders/BridgeDetailsTable/BridgeDetailsContent/index.tsx
- apps/explorer/src/components/orders/BridgeDetailsTable/BridgeTxOverview.tsx
- apps/explorer/src/components/orders/OrderDetails/index.tsx
- apps/explorer/src/components/orders/OrderDetails/tabs.tsx
🧰 Additional context used
🧬 Code Graph Analysis (2)
apps/explorer/src/components/token/TokenAmount/index.tsx (1)
apps/explorer/src/utils/format.ts (2)
formatSmartMaxPrecision(211-218)formattingAmountPrecision(277-292)
apps/explorer/src/components/orders/StatusLabel/index.tsx (5)
apps/explorer/src/components/orders/StatusLabel/styled.ts (3)
PartiallyTagPosition(8-8)Wrapper(101-109)Label(117-149)apps/explorer/src/api/operator/types.ts (1)
ORDER_FINAL_FAILED_STATUSES(27-27)apps/explorer/src/utils/statusHelpers.ts (1)
canBePartiallyFilled(20-22)apps/explorer/src/utils/format.ts (1)
formatPercentage(114-133)apps/explorer/src/components/orders/StatusLabel/StatusIcon.tsx (1)
StatusIcon(14-21)
🪛 Biome (1.9.4)
apps/explorer/src/components/orders/BridgeDetailsTable/RefundStatus.tsx
[error] 43-43: Useless case clause.
because the default clause is present:
Unsafe fix: Remove the useless case.
(lint/complexity/noUselessSwitchCase)
apps/explorer/src/components/orders/BridgeDetailsTable/styled.ts
[error] 75-75: Useless case clause.
because the default clause is present:
Unsafe fix: Remove the useless case.
(lint/complexity/noUselessSwitchCase)
[error] 76-76: Useless case clause.
because the default clause is present:
Unsafe fix: Remove the useless case.
(lint/complexity/noUselessSwitchCase)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Setup
- GitHub Check: Cypress
🔇 Additional comments (2)
apps/explorer/src/components/token/TokenAmount/index.tsx (1)
21-22: Confirm tooltip behaviour aligns withnoSymbolintentEven when
noSymbolistrue, the tooltip (titleattribute) still includes the symbol.
If the goal ofnoSymbolis purely visual, this is fine; if the intent is to hide the symbol everywhere, the tooltip should omit it as well. Please verify the desired UX.apps/explorer/src/components/orders/BridgeDetailsTable/styled.ts (1)
57-62: Provider logo style looks goodBorder-radius tied to the custom property guarantees a perfect circle and respects any future size change.
|
@shoom3301 , the build has failed |
|
@elena-zh sorry, fixed |
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
apps/explorer/src/components/orders/StatusLabel/index.tsx (1)
47-53: Unsafe cast & redundant type check remain unfixed
statusis always a string (_status.toLowerCase()); thetypeofguard is therefore pointless.
Casting toOrderStatusis still unsafe and was already flagged in a previous review.-const tagPartiallyFilled = - partiallyFilled && typeof status === 'string' && canBePartiallyFilled(status as OrderStatus) +const tagPartiallyFilled = + partiallyFilled && canBePartiallyFilled(_status as OrderStatus)Even better: overload
canBePartiallyFilledto acceptstring | OrderStatus, eliminating the cast entirely.Failure to address this will surface at runtime if an unknown status is passed.
🧹 Nitpick comments (1)
apps/explorer/src/components/orders/StatusLabel/index.tsx (1)
24-28: Rename constant and centralize spinner-state logicThe constant name is misspelled (
SHIMMING→SHIMMERING) and doesn’t convey intent clearly.
Additionally, hard-coding the list risks missing future “in-progress” bridge statuses (e.g.WAITING_FOR_REFUND, etc.).
Consider renaming and deriving the list from a single source of truth instatusHelpers.ts.-const SHIMMING_STATUSES = [ +const SHIMMERING_STATUSES: string[] = [ OrderStatus.Signing.toLowerCase(), OrderStatus.Cancelling.toLowerCase(), BridgeStatus.IN_PROGRESS.toLowerCase(), ]Moving this array next to
canBePartiallyFilledkeeps status logic co-located, reducing future drift.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/explorer/src/components/orders/StatusLabel/index.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Socket Security: Pull Request Alerts
| const displayStatus: StyledGenericStatus = | ||
| customizeStatus && partiallyFilled ? OrderStatus.PartiallyFilled : bridgeStatusTitleMap[_status] || status | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Display logic mixes bridge & order status paths — extract for clarity
bridgeStatusTitleMap[_status] || status works but:
bridgeStatusTitleMapis typedRecord<BridgeStatus, string>; indexing with anOrderStatusviolates the contract and defeats TypeScript safety.- Falling back to
statusyields the lowercase value, relying ontoUpperCase()later for presentation. This double handling lowers readability.
Suggested refactor:
-const displayStatus: StyledGenericStatus =
- customizeStatus && partiallyFilled ? OrderStatus.PartiallyFilled : bridgeStatusTitleMap[_status] || status
+const normalizedStatus =
+ (_status in bridgeStatusTitleMap
+ ? bridgeStatusTitleMap[_status as BridgeStatus]
+ : _status) as StyledGenericStatus
+
+const displayStatus: StyledGenericStatus =
+ isFinalStatus && partiallyFilled ? OrderStatus.PartiallyFilled : normalizedStatusThis keeps typing strict and separates “mapping” from “final display decision.”
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In apps/explorer/src/components/orders/StatusLabel/index.tsx around lines 56 to
58, the current displayStatus logic mixes bridge and order status handling,
causing TypeScript type safety issues by indexing bridgeStatusTitleMap with an
OrderStatus and relying on fallback to lowercase status with later toUpperCase
calls. To fix this, separate the mapping of bridge statuses from order statuses
explicitly by first checking if _status is a BridgeStatus and mapping it via
bridgeStatusTitleMap, otherwise use the order status directly. This preserves
strict typing and improves readability by avoiding fallback and double case
transformations.
… feat/bridge-explorer-1 # Conflicts: # apps/explorer/src/components/orders/DetailsTable/BaseDetailsTable.tsx # apps/explorer/src/components/orders/DetailsTable/FullDetailsTable.tsx # apps/explorer/src/components/orders/DetailsTable/index.tsx
Summary
Example: https://explorer-dev-git-feat-bridge-explorer-1-cowswap-dev.vercel.app/arb1/orders/0x5304214e957c583cf88d1d395d8be45b7fdd458e54ac711b59173f0c4afff969bbcf91605c18a9859c1d47abfeed5d2cca7097cf683edc4b?tab=overview
To Test
Summary by CodeRabbit
New Features
Improvements
Bug Fixes
Chores