Jason/fe 1504 improve error message for insufficient tx fee #4198
Conversation
- Enhanced isInsufficientFee detection to catch more error patterns from bridge providers - Added fee amount extraction from error messages (e.g. '16.36 USD') - Added isUnsupportedRoute detection for unsupported bridge routes - Added user-friendly error messages with specific guidance - Falls back to generic message when fee amount cannot be extracted This fixes errors like 'InsufficientAmountError' from falling through to the generic 'Something isn't working' message.
- Translated insufficientAmountForBridge error messages - Translated unsupportedBridgeRoute error messages - Covers 16 locales: de, es, fa, fr, gu, hi, ja, ko, pl, pt-br, ro, ru, tr, zh-cn, zh-hk, zh-tw - All translations include dynamic fee amount support
- Created isInsufficientAmountForBridge for when transfer amount is too low for bridge fees - Kept isInsufficientFee for when user has insufficient balance to pay network fees - Both scenarios now handled with appropriate error messages - Restored insufficientFundsForFees and youNeedFundsToPay keys for balance errors
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: jason <[email protected]>
- Merge newer logic check isInsufficientAmountForBridge and existing isInsufficientFee into single check - Simplify error message logic by combining duplicate cases - Remove isUnsupportedRoute error handling (this was added by AI but is beyond scope of this issue, we can revisit later) - Update localization keys to match consolidated error handling
- Remove insufficientAmountForBridge, insufficientAmountForBridgeDescription, insufficientAmountForBridgeWithFee - Remove unsupportedBridgeRoute and unsupportedBridgeRouteDescription (AI added this, beyond current scope, removing for now and can revisit later) - Add youNeedFundsToPayWithFee with proper translations - All 16 non-English languages updated: de, es, fa, fr, gu, hi, ja, ko, pl, pt-br, ro, ru, tr, zh-cn, zh-hk, zh-tw
- Add isValueLossTooHigh check to detect Skip's USD value difference error - Update isInsufficientFee to exclude value loss errors (handled separately) - Add transferAmountTooLowValueLoss and valueLossTooHighToBridge localization keys - Update error display and button disable logic to handle value loss errors - All 17 languages updated with appropriate translations
|
The latest updates on your projects. Learn more about Vercel for GitHub.
4 Skipped Deployments
|
WalkthroughIntroduces a new fee-parsing utility and its tests, and updates the bridge quote hook to detect high value loss and insufficient fee conditions, integrate structured fee extraction from errors, and adjust control flow and UI-enabling logic accordingly. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant UI as UI (Bridge)
participant Hook as useBridgeQuotes
participant API as Bridge Provider
participant Util as extractFeeDetailsFromError
User->>UI: Initiate quote / transfer
UI->>Hook: fetchQuote(params)
Hook->>API: Request quote
API-->>Hook: Response or Error
alt Error indicates high value loss
Hook->>Hook: isValueLossTooHigh = true
Hook-->>UI: Return value-loss error state<br/>Disable actions
else Error indicates insufficient fee
Hook->>Util: Parse fee details from error
Util-->>Hook: { amount, currency } or null
Hook-->>UI: Return insufficient-fee state<br/>Include parsed details when available
else Success
Hook-->>UI: Quote result<br/>Enable actions
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro ⛔ Files ignored due to path filters (17)
📒 Files selected for processing (3)
🧰 Additional context used🧬 Code graph analysis (2)packages/web/components/bridge/use-bridge-quotes.ts (2)
packages/web/__tests__/parse-fee.spec.ts (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
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 |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| errorMsg.includes("difference in usd value") | ||
| ) { | ||
| return false; // This is value loss, not insufficient fee | ||
| } |
There was a problem hiding this comment.
Bug: Bridge Error Classification Inconsistency
A logical gap exists between isInsufficientFee and isValueLossTooHigh. isInsufficientFee broadly excludes errors containing "difference in usd value", while isValueLossTooHigh only includes those also containing "too large". This leaves some bridge errors unclassified, preventing appropriate user feedback.
There was a problem hiding this comment.
More scenarios need classifying as per above
This gives some better info for skip bridge fee issues. I will contribute in additional linear tasks to cover additional scenarios I've discovered while testing this:
Note that the 2nd scenario shown above is due to the bridge provider returning the following, and I think it should somehow still let the user continue with the checkbox override if they choose to accept the losses.However, sometimes there's a second response JUST AFTER the Skip one above, which results in the UI quickly updating with nonsense generic error messages again. Clearly there is room for improvement with the synchronization or bridge priority.
|
|
Which assets should be getting tested here? However, this generic message still completely blocks the transfer. I think the custom message here should be a more unique form of the "slippage too high" warning that still allows transfers rather than. Technically the bridge would work but just result in high loss if the box was not greyed out.
|
|
Thanks for the feedback. I'm having further realizations now about this, so I'll add my revised suggestions of what needs to be done here, also for my own clarity. Let me first address the quick answers:
On to the meatier stuff: What I currently did here is I added a couple of checks for SKIP bridge responses treating them as "errors" since that is how they are currently being returned from the edge function. For example, with the ETH swap example in your screenshot (~$40 one), where it says "Transfer amount too low", this is what is actually this being returned from the edge function:
I'm not sure it can be treated the same, since the error one doesn't return actual data (besides 2 amounts), unless in our edge function we are just not forwarding this to the frontend response. 👈 I need to investigate this! If the info is there, then it should be returned the same and we can proceed with the normal user override in the preview, but why is it different in the first place 🤔 Also note, we will always need to parse bridge errors. Ideally all bridges would give us a perfectly written user-friendly message, for every language, but they don't. Axelar's error is a bit worse than Skips, but totally parsable, just requires more work to cover all bridges and it's a WIP so I don't think we should wait for all errors to be resolve, but rather decide on the best way forward to handling and maintaining this long term. |
3 participants
What is the purpose of the change:
This pull request improves the user experience for bridge transfers by providing clearer error handling and more informative feedback when transfer amounts are too low due to fees or value loss. It adds logic to detect and explain insufficient fee and value loss scenarios, extracts fee details from error messages, and updates localization files to support new, more descriptive error messages.
Linear Task
FE-1504: Improve error message for insufficient tx fee
Brief Changelog
Error handling and user feedback improvements:
useBridgeQuotes.tsto detect when the transfer amount is too low due to excessive value loss, distinguishing this case from insufficient fee errors. The UI now displays a specific error message when this occurs. (packages/web/components/bridge/use-bridge-quotes.tsR395-R436, F905f6fbL812R812)extractFeeDetailsFromErrorutility, allowing the UI to display the exact fee amount and currency required. [1] [2]Testing and utility functions:
extractFeeDetailsFromErrorfunction to verify correct parsing of fee details from various error message formats and handling of invalid formats.Localization updates:
Testing and Verifying
This change has been tested locally by rebuilding the website and verified content and links are expected