Address price warning feedback

[thal0x]

Closes FRE-474, FRE-473, and FRE-472

• Hides USD percent difference if one value is missing
• Change title to "Bad Trade Warning"
• Make "Go Back" the primary button

Summary by CodeRabbit

• New Features

  • Improved logic for displaying warnings and messages based on trading conditions in the swap interface.

• Bug Fixes

  • Adjusted the price impact calculation to provide more accurate trading feedback.

• Refactor

  • Updated conditional rendering to enhance user interface responsiveness.

• Style

  • Changed warning text to better reflect trading risk and updated button arrangement for clearer user navigation.

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
ibc-dot-fun	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 28, 2023 11:22pm

[coderabbitai]

Walkthrough

The recent updates focus on enhancing user experience by adjusting the visibility of trade information and warnings. The USD difference estimate is now hidden when price feeds for both input and output tokens are unavailable, avoiding misleading zero percent differences. The warning screen has been renamed to "Bad Trade Warning" to better reflect its purpose, and the "Go Back" button has been made the primary action, encouraging users to reconsider potentially unfavorable trades.

Changes

File Path	Change Summary
.../AssetInput.tsx .../PriceImpactWarning.tsx .../SwapWidget/SwapWidget.tsx	Condition added to hide USD difference estimate when lacking price feeds for both tokens. Title changed to "Bad Trade Warning" and "Go Back" button made primary. Adjustment in shouldShowPriceImpactWarning logic and price impact threshold calculation.
.../TransactionDialog/index.tsx	Renamed routeWarning to routeWarningMessage and added routeWarningTitle property to Props interface. Updated references to these properties throughout the component.

Assessment against linked issues

Objective	Addressed	Explanation
Hide USD Difference Estimate if missing price feeds for both tokens (FRE-474)	✅
Change Warning Screen title to "Bad Trade Warning" (FRE-473)	✅
Make "Go Back" button the primary on the warning screen (FRE-472)	✅

Poem

🐇 "Hop and skip, a code tweak here, 🛠️
A button swap, a warning clear.
No bad trades on my watchful screen,
For I am the CodeRabbit, keen!" 🌟

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

• X
• Mastodon
• Reddit
• LinkedIn

---

Tips

Chat with CodeRabbit Bot (@coderabbitai)

• You can directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit-tests for this file.
• You can tag CodeRabbit on specific lines of code or entire files in the PR by tagging @coderabbitai in a comment. Examples:
  • @coderabbitai generate unit tests for this file.
  • @coderabbitai modularize this function.
• You can tag @coderabbitai in a PR comment and ask questions about the PR and the codebase. Examples:
  • @coderabbitai generate interesting stats about this repository from git and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit tests.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid.
  • @coderabbitai read the files in the src/scheduler package and generate README in the markdown format.

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.

CodeRabbit Commands (invoked as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• The JSON schema for the configuration file is available here.
• 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/coderabbit-overrides.v2.json

CodeRabbit Discord Community

Join our Discord Community to get help, request features, and share feedback.

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 41fcac7 and c0a60d1.

Files selected for processing (3)

• src/components/AssetInput.tsx (1 hunks)
• src/components/PriceImpactWarning.tsx (3 hunks)
• src/components/SwapWidget/SwapWidget.tsx (1 hunks)

Additional comments: 5

src/components/PriceImpactWarning.tsx (3)

• 14-14: The condition added ensures that the component renders only when necessary, which is a good practice for performance and user experience.

• 36-36: The text change from "Price Impact Warning" to "Bad Trade Warning" aligns with the PR objectives to provide clearer messaging to the user.

• 52-57: The button order change and the onGoBack function call on the "Go Back" button click are consistent with the PR objectives to make "Go Back" the primary action and encourage users to reconsider their actions.

src/components/AssetInput.tsx (1)

• 188-190: The new condition for rendering the percentage difference is a good addition to ensure that misleading information is not displayed to the user.

src/components/SwapWidget/SwapWidget.tsx (1)

• 271-271: The updated condition for showing the price impact warning seems correct, but ensure that the PRICE_IMPACT_THRESHOLD constant is now expected to be a decimal rather than a percentage, given the removal of the multiplication by 100.

Verification successful

---

The search for PRICE_IMPACT_THRESHOLD has yielded results, showing that it is defined as 0.1 in the useSwapWidget.ts file. This confirms that the threshold is indeed expected to be a decimal value, which aligns with the updated condition in the SwapWidget.tsx file where the multiplication by 100 has been removed.

• The constant PRICE_IMPACT_THRESHOLD is defined as 0.1.
• The updated condition Math.abs(usdDiffPercent) > PRICE_IMPACT_THRESHOLD in SwapWidget.tsx is consistent with this definition.

Scripts Executed

The following scripts were executed for the analysis:

---

Script:

#!/bin/bash
# Verify that PRICE_IMPACT_THRESHOLD is defined as a decimal
rg 'PRICE_IMPACT_THRESHOLD' --type js

Length of output: 37

---

---

Script:

#!/bin/bash
# Search for PRICE_IMPACT_THRESHOLD without specifying file type to ensure all files are searched
rg 'PRICE_IMPACT_THRESHOLD'

Length of output: 658

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between c0a60d1 and 062a055.

Files selected for processing (4)

• src/components/PriceImpactWarning.tsx (2 hunks)
• src/components/SwapWidget/SwapWidget.tsx (3 hunks)
• src/components/SwapWidget/useSwapWidget.ts (4 hunks)
• src/components/TransactionDialog/index.tsx (3 hunks)

Files skipped from review as they are similar to previous changes (2)

• src/components/PriceImpactWarning.tsx
• src/components/SwapWidget/SwapWidget.tsx

Additional comments: 8

src/components/TransactionDialog/index.tsx (2)

• 17-18: The addition of routeWarningMessage and routeWarningTitle to the Props interface aligns with the PR objectives to provide more structured and clear warnings to the user.

• 82-83: The routeWarningMessage and routeWarningTitle properties are correctly passed to the PriceImpactWarning component, ensuring that the warning messages are dynamic and can be set based on the context.

src/components/SwapWidget/useSwapWidget.ts (6)

• 204-206: The initialization of the tuple [routeWarningTitle, routeWarningMessage] with [undefined, undefined] when routeResponse is falsy is correct and ensures that no warning is displayed when there is no route response.

• 204-216: The logic within the useMemo callback correctly handles the scenario where the price impact cannot be calculated due to missing USD amounts, providing a clear warning title and message.

• 234-237: The logic for setting a "Bad Trade Warning" when the USD percent difference exceeds the price impact threshold is correct and aligns with the PR objectives to warn users about potentially unfavorable trades.

• 248-251: The logic for setting a "Bad Trade Warning" when the swap price impact percent exceeds the threshold is correct and provides users with detailed information about the expected price impact of their trade.

• 254-254: The default return value of [undefined, undefined] for the useMemo callback when no conditions are met is appropriate and ensures that no incorrect warnings are displayed.

• 278-279: The routeWarningTitle and routeWarningMessage are correctly included in the return object of the useSwapWidget hook, making them available to the consuming components.