8000 feat(bridge): display combined fee in collapsed accordion by shoom3301 · Pull Request #5921 · cowprotocol/cowswap · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

feat(bridge): display combined fee in collapsed accordion #5921

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

feat(bridge): display combined fee in collapsed accordion #5921

wants to merge 3 commits into from
+46 −51

Conversation

shoom3301
Copy link
Collaborator
@shoom3301 shoom3301 commented Jul 3, 2025 •
edited by coderabbitai bot
Loading

Summary

Fixes https://www.notion.so/cownation/Fee-amount-is-wrong-on-the-collapsed-view-2238da5f04ca80ad941aec82a2b7c3ec?source=copy_link

  1. Added combined (swap network costs + bridging fee) fee displaying in collapsed accordion
  2. Added USD value dispaying for bridging fee
image image

To Test

See https://www.notion.so/cownation/Fee-amount-is-wrong-on-the-collapsed-view-2238da5f04ca80ad941aec82a2b7c3ec?source=copy_link

Summary by CodeRabbit

  • New Features

    • Bridge fees are now displayed in USD when available.
    • Total cost calculations now include bridge fees for more accurate summaries.

  • Refactor

    • Improved code consistency and type safety by explicitly specifying return types for several components.
    • Simplified event handling and internal logic for better maintainability.
    • Enhanced the way bridge fee details are integrated and displayed within swap and trade components.

@shoom3301 shoom3301 self-assigned this Jul 3, 2025
@vercel Vercel
Copy link
vercel bot commented Jul 3, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
cosmos ❌ Failed (Inspect) Jul 3, 2025 8:34am
cowfi ✅ Ready (Inspect) Visit Preview Jul 3, 2025 8:34am
explorer-dev ✅ Ready (Inspect) Visit Preview Jul 3, 2025 8:34am
sdk-tools ✅ Ready (Inspect) Visit Preview Jul 3, 2025 8:34am
swap-dev ✅ Ready (Inspect) Visit Preview Jul 3, 2025 8:34am
widget-configurator ✅ Ready (Inspect) Visit Preview Jul 3, 2025 8:34am

@coderabbitai coderabbitai
Copy link
Contributor
coderabbitai bot commented Jul 3, 2025 •
edited
Loading

Walkthrough

The changes introduce explicit ReactNode return types for several React components, enhance type safety, and simplify event handling. Additional logic incorporates bridge fee USD values and integrates bridge fees into total cost calculations. Utility functions are updated to accept optional extra costs, and callback memoization is applied for performance and clarity.

Changes

File(s) Change Summary
.../TradeDetailsAccordion/index.tsx Explicitly typed return as ReactNode, removed unnecessary wrapper function, added explicit void type to internal handler.
.../BridgeAccordionSummary.tsx Added explicit ReactNode return type to function signature.
.../QuoteBridgeContent/index.tsx Integrated useUsdAmount to display bridge fee in USD, conditionally passed to TokenAmountDisplay.
.../SwapRateDetails/index.tsx Added explicit ReactNode return type, introduced memoized feeWrapper callback for bridge details.
.../TradeTotalCostsDetails/index.tsx Explicitly typed return as ReactNode.
.../trade/utils/getReceiveAmountInfo.ts Updated getTotalCosts to accept optional additionalCosts parameter and sum it if provided.
.../TradeRateDetails/index.tsx Integrated bridge fee into total costs via useBridgeQuoteAmounts, updated prop types, added explicit ReactNode return type.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant TradeRateDetails
    participant useBridgeQuoteAmounts
    participant getTotalCosts

    User->>TradeRateDetails: Render component
    TradeRateDetails->>useBridgeQuoteAmounts: Get bridge quote amounts
    TradeRateDetails->>getTotalCosts: Calculate total costs (including bridgeFee)
    getTotalCosts-->>TradeRateDetails: Return total costs
    TradeRateDetails-->>User: Render with updated costs
Loading 
sequenceDiagram
    participant QuoteBridgeContent
    participant useUsdAmount
    participant TokenAmountDisplay

    QuoteBridgeContent->>useUsdAmount: Convert bridgeFee to USD
    QuoteBridgeContent->>TokenAmountDisplay: Render with bridgeFee and USD value
Loading

Suggested labels

Bridge

Suggested reviewers

  • elena-zh
  • alfetopito

Poem

A hop and a skip in the code today,
With types so clear, bugs hop away!
Bridge fees in dollars, now easy to see,
Memoized wrappers bring harmony.
Rabbits rejoice as the functions align—
Explicit returns make the codebase shine!
🐇✨

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

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

yarn install v1.22.22
[1/4] Resolving packages...
(node:25596) [DEP0169] DeprecationWarning: url.parse() behavior is not standardized and prone to errors that have security implications. Use the WHATWG URL API instead. CVEs are not issued for url.parse() vulnerabilities.
(Use node --trace-deprecation ... to show where the warning was created)
[2/4] Fetching packages...
error nx@21.0.3: The engine "node" is incompatible with this module. Expected version "^20.19.0 || ^22.12.0". Got "24.3.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d4390bb and aa21628.

📒 Files selected for processing (7)
  • apps/cowswap-frontend/src/common/pure/TradeDetailsAccordion/index.tsx (2 hunks)
  • apps/cowswap-frontend/src/modules/bridge/pure/BridgeAccordionSummary.tsx (1 hunks)
  • apps/cowswap-frontend/src/modules/bridge/pure/contents/QuoteBridgeContent/index.tsx (3 hunks)
  • apps/cowswap-frontend/src/modules/swap/containers/SwapRateDetails/index.tsx (4 hunks)
  • apps/cowswap-frontend/src/modules/trade/containers/TradeTotalCostsDetails/index.tsx (1 hunks)
  • apps/cowswap-frontend/src/modules/trade/utils/getReceiveAmountInfo.ts (1 hunks)
  • apps/cowswap-frontend/src/modules/tradeWidgetAddons/containers/TradeRateDetails/index.tsx (4 hunks)
🧰 Additional context used
🧠 Learnings (7)
📓 Common learnings 
Learnt from: alfetopito
PR: cowprotocol/cowswap#5762
File: apps/cowswap-frontend/src/legacy/state/orders/utils.ts:499-503
Timestamp: 2025-05-27T12:20:54.659Z
Learning: In the CowSwap frontend, when displaying volume fees in the UI (like in ReceiptModal), zero fees (0 bps) should be treated as "free" and hidden from display. Only non-zero fees should show the "Total fee" line. This provides a cleaner UX by not cluttering the interface with "0.00%" fee displays.

Learnt from: fairlighteth
PR: cowprotocol/cowswap#5780
File: CONTRIBUTING.md:121-121
Timestamp: 2025-06-02T12:52:34.606Z
Learning: React 19.0.0 was released on December 5, 2024, introducing new features like Actions, Server Components, and hooks such as useActionState and useOptimistic.
apps/cowswap-frontend/src/modules/bridge/pure/contents/QuoteBridgeContent/index.tsx (2) 
Learnt from: alfetopito
PR: cowprotocol/cowswap#5762
File: apps/cowswap-frontend/src/legacy/state/orders/utils.ts:499-503
Timestamp: 2025-05-27T12:20:54.659Z
Learning: In the CowSwap frontend, when displaying volume fees in the UI (like in ReceiptModal), zero fees (0 bps) should be treated as "free" and hidden from display. Only non-zero fees should show the "Total fee" line. This provides a cleaner UX by not cluttering the interface with "0.00%" fee displays.

Learnt from: shoom3301
PR: cowprotocol/cowswap#5859
File: apps/cowswap-frontend/src/modules/tradeQuote/hooks/useTradeQuotePolling.ts:76-82
Timestamp: 2025-06-23T07:03:50.760Z
Learning: In the useTradeQuotePolling hook, there are two useLayoutEffect hooks that work together: one resets the counter to 0 when the confirmation modal closes, and another automatically triggers pollQuote(false, true) whenever the counter reaches 0. This creates an intentional chain reaction for immediate quote updates.
apps/cowswap-frontend/src/modules/trade/utils/getReceiveAmountInfo.ts (1) 
Learnt from: alfetopito
PR: cowprotocol/cowswap#5762
File: apps/cowswap-frontend/src/legacy/state/orders/utils.ts:499-503
Timestamp: 2025-05-27T12:20:54.659Z
Learning: In the CowSwap frontend, when displaying volume fees in the UI (like in ReceiptModal), zero fees (0 bps) should be treated as "free" and hidden from display. Only non-zero fees should show the "Total fee" line. This provides a cleaner UX by not cluttering the interface with "0.00%" fee displays.
apps/cowswap-frontend/src/common/pure/TradeDetailsAccordion/index.tsx (1) 
Learnt from: fairlighteth
PR: cowprotocol/cowswap#5768
File: apps/cow-fi/components/LearnPageComponent.tsx:184-185
Timestamp: 2025-05-28T16:50:12.273Z
Learning: In apps/cow-fi/components/LearnPageComponent.tsx, the user prefers to keep the inconsistent link behavior where featured articles always open in new tabs (target="_blank") while media coverage links conditionally open in new tabs based on the linkExternal flag. This inconsistency should not be flagged as an issue in future reviews.
apps/cowswap-frontend/src/modules/trade/containers/TradeTotalCostsDetails/index.tsx (1) 
Learnt from: shoom3301
PR: cowprotocol/cowswap#5443
File: apps/cowswap-frontend/src/modules/swap/containers/ConfirmSwapModalSetup/index.tsx:71-71
Timestamp: 2025-02-20T15:59:33.749Z
Learning: The swap module in apps/cowswap-frontend/src/modules/swap/ is marked for deletion in PR #5444 as part of the swap widget unification effort.
apps/cowswap-frontend/src/modules/swap/containers/SwapRateDetails/index.tsx (6) 
Learnt from: shoom3301
PR: cowprotocol/cowswap#5443
File: apps/cowswap-frontend/src/modules/swap/containers/ConfirmSwapModalSetup/index.tsx:71-71
Timestamp: 2025-02-20T15:59:33.749Z
Learning: The swap module in ap
8000
ps/cowswap-frontend/src/modules/swap/ is marked for deletion in PR #5444 as part of the swap widget unification effort.

Learnt from: alfetopito
PR: cowprotocol/cowswap#5762
File: apps/cowswap-frontend/src/legacy/state/orders/utils.ts:499-503
Timestamp: 2025-05-27T12:20:54.659Z
Learning: In the CowSwap frontend, when displaying volume fees in the UI (like in ReceiptModal), zero fees (0 bps) should be treated as "free" and hidden from display. Only non-zero fees should show the "Total fee" line. This provides a cleaner UX by not cluttering the interface with "0.00%" fee displays.

Learnt from: alfetopito
PR: cowprotocol/cowswap#5831
File: apps/cowswap-frontend/src/modules/application/containers/AppMenu/index.tsx:7-9
Timestamp: 2025-06-16T16:01:46.729Z
Learning: React Router v7 restructured packages - NavLink and other core routing components should be imported from 'react-router' (not 'react-router-dom'). In v7, 'react-router-dom' mainly re-exports for backward compatibility, while 'react-router' is the new preferred import path for most components.

Learnt from: alfetopito
PR: cowprotocol/cowswap#5830
File: apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/index.tsx:1-2
Timestamp: 2025-06-16T15:58:00.268Z
Learning: JSX can be imported as a named export from React in modern React versions (React 17+). The import `import { JSX } from 'react'` is valid and does not cause compilation errors.

Learnt from: alfetopito
PR: cowprotocol/cowswap#5831
File: apps/cowswap-frontend/src/modules/application/containers/AppMenu/index.tsx:7-9
Timestamp: 2025-06-16T16:01:46.729Z
Learning: In React Router v6+, NavLink can be imported directly from 'react-router' package, not just 'react-router-dom'. The package structure has evolved and the import from 'react-router' is valid for the latest versions.

Learnt from: shoom3301
PR: cowprotocol/cowswap#5859
File: apps/cowswap-frontend/src/modules/tradeQuote/hooks/useTradeQuotePolling.ts:76-82
Timestamp: 2025-06-23T07:03:50.760Z
Learning: In the useTradeQuotePolling hook, there are two useLayoutEffect hooks that work together: one resets the counter to 0 when the confirmation modal closes, and another automatically triggers pollQuote(false, true) whenever the counter reaches 0. This creates an intentional chain reaction for immediate quote updates.
apps/cowswap-frontend/src/modules/tradeWidgetAddons/containers/TradeRateDetails/index.tsx (2) 
Learnt from: alfetopito
PR: cowprotocol/cowswap#5762
File: apps/cowswap-frontend/src/legacy/state/orders/utils.ts:499-503
Timestamp: 2025-05-27T12:20:54.659Z
Learning: In the CowSwap frontend, when displaying volume fees in the UI (like in ReceiptModal), zero fees (0 bps) should be treated as "free" and hidden from display. Only non-zero fees should show the "Total fee" line. This provides a cleaner UX by not cluttering the interface with "0.00%" fee displays.

Learnt from: shoom3301
PR: cowprotocol/cowswap#5859
File: apps/cowswap-frontend/src/modules/tradeQuote/hooks/useTradeQuotePolling.ts:76-82
Timestamp: 2025-06-23T07:03:50.760Z
Learning: In the useTradeQuotePolling hook, there are two useLayoutEffect hooks that work together: one resets the counter to 0 when the confirmation modal closes, and another automatically triggers pollQuote(false, true) whenever the counter reaches 0. This creates an intentional chain reaction for immediate quote updates.
🧬 Code Graph Analysis (3)
apps/cowswap-frontend/src/modules/bridge/pure/contents/QuoteBridgeContent/index.tsx (1)
apps/cowswap-frontend/src/modules/bridge/pure/TokenAmountDisplay/index.tsx (1)
  • TokenAmountDisplay (19-51)
apps/cowswap-frontend/src/common/pure/TradeDetailsAccordion/index.tsx (1)
apps/cowswap-frontend/src/common/pure/TradeDetailsAccordion/styled.ts (1)
  • SummaryClickable (47-78)
apps/cowswap-frontend/src/modules/swap/containers/SwapRateDetails/index.tsx (1)
apps/cowswap-frontend/src/modules/bridge/pure/BridgeAccordionSummary.tsx (1)
  • BridgeAccordionSummary (25-43)
🔇 Additional comments (19)
apps/cowswap-frontend/src/modules/trade/utils/getReceiveAmountInfo.ts (1)

24-33: LGTM! Clean implementation of additional costs support.

The enhancement to include optional additional costs (like bridge fees) in the total cost calculation is well-implemented. The parameter typing is correct and the conditional logic is clear.

apps/cowswap-frontend/src/modules/bridge/pure/contents/QuoteBridgeContent/index.tsx (3)

7-7: LGTM! Appropriate import for USD value conversion.

The addition of useUsdAmount hook import supports the enhancement to display bridge fee USD values, aligning with the PR objective of improving fee transparency.

22-22: LGTM! Clean USD value calculation for bridge fees.

The implementation correctly uses the useUsdAmount hook to convert bridge fees to USD, providing better cost transparency for users.

35-39: LGTM! Proper USD value integration with preserved zero fee handling.

The enhancement correctly passes the USD value to TokenAmountDisplay while maintaining the existing "FREE" display for zero fees, consistent with the learned UX pattern of hiding zero fees from display.

apps/cowswap-frontend/src/modules/trade/containers/TradeTotalCostsDetails/index.tsx (1)

21-21: LGTM! Improved type safety with explicit return type.

The addition of explicit ReactNode return type annotation enhances code clarity and type safety, consistent with similar improvements across the codebase.

apps/cowswap-frontend/src/modules/bridge/pure/BridgeAccordionSummary.tsx (1)

25-29: LGTM! Enhanced type safety and improved formatting.

The addition of explicit ReactNode return type annotation and multi-line parameter formatting improves code clarity and type safety, consistent with similar improvements across the codebase.

apps/cowswap-frontend/src/modules/swap/containers/SwapRateDetails/index.tsx (4)

1-1: LGTM! Appropriate import for callback memoization.

The addition of useCallback import supports the performance optimization introduced in the component's fee wrapper logic.

20-20: LGTM! Improved type safety with explicit return type.

The addition of explicit ReactNode return type annotation enhances code clarity and type safety, consistent with similar improvements across the codebase.

31-42: LGTM! Well-implemented callback memoization.

The useCallback implementation correctly:

  • Includes proper dependencies (providerDetails, bridgeEstimatedTime)
  • Handles the null case when providerDetails is unavailable
  • Wraps the fee element in BridgeAccordionSummary with appropriate props
  • Prevents unnecessary re-renders by memoizing the function

59-59: LGTM! Proper conditional usage of memoized callback.

The conditional passing of the memoized feeWrapper function ensures it's only used when bridge details should be displayed and provider details are available, maintaining clean component logic.

apps/cowswap-frontend/src/modules/tradeWidgetAddons/containers/TradeRateDetails/index.tsx (5)

5-5: LGTM: Bridge fee integration import added.

The import of useBridgeQuoteAmounts is correctly placed and necessary for the bridge fee integration.

32-32: LGTM: Type annotation consistency improvement.

The change from React.ReactNode to ReactNode improves consistency with the import statement and follows React best practices.

41-41: LGTM: Explicit return type annotation added.

Adding the explicit ReactNode return type annotation improves type safety and code clarity.

50-50: LGTM: Bridge quote amounts hook integration.

The useBridgeQuoteAmounts hook is correctly called with the appropriate parameters (receiveAmountInfo and tradeQuote.bridgeQuote) to retrieve bridge fee information.

83-83: LGTM: Combined fee calculation implementation.

The modification to include bridgeQuoteAmounts?.bridgeFee as an additional cost parameter in getTotalCosts correctly implements the combined fee calculation objective. The optional chaining ensures safe access to the bridge fee data.

apps/cowswap-frontend/src/common/pure/TradeDetailsAccordion/index.tsx (4)

34-34: LGTM: Explicit return type annotation added.

Adding the explicit ReactNode return type annotation improves type safety and follows the consistent pattern across the codebase.

35-35: LGTM: Function return type annotation added.

The explicit void return type annotation for handleKeyDown improves type clarity and safety.

38-38: LGTM: Simplified event handling.

The direct call to onToggle?.() removes the unnecessary handleToggle wrapper function, simplifying the code while maintaining the same functionality.

60-60: LGTM: Consistent direct callback usage.

The change to call onToggle directly in the onClick handler maintains consistency with the keyboard event handler and completes the simplification of removing the intermediate wrapper function.

✨ Finishing Touches
  • 📝 Generate Docstrings

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.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@shoom3301 shoom3301 marked this pull request as ready for review July 3, 2025 09:10
@shoom3301 shoom3301 requested review from a team July 3, 2025 09:10
elena-zh
elena-zh approved these changes Jul 3, 2025
View reviewed changes
Copy link
Contributor
@elena-zh elena-zh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, works fine now!

@shoom3301
Copy link
Collaborator Author

@coderabbitai review

@coderabbitai coderabbitai
Copy link
Contributor
coderabbitai bot commented Jul 3, 2025
✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@elena-zh elena-zh elena-zh approved these changes

At least 2 approving reviews are required to merge this pull request.

Assignees

@shoom3301 shoom3301

Labels
Bridge
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@shoom3301 @elena-zh
3088
0