main -> develop #6473
main -> develop #6473
Conversation
* fix(approve): set partial/full approve amount in Safe * fix: fix safe approval flow * fix(approve): support partial approves in Safe eth flow * refactor: enhance UI components and layout for approval --------- Co-authored-by: Alexandr Kazachenko <[email protected]> Co-authored-by: limitofzero <[email protected]>
Co-authored-by: Denis Makarov <[email protected]>
* feat(hook-dapps): register aave flash-loans hooks * fix: filter out hidden hook dapps
Release/03 11 2025
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded@shoom3301 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 7 minutes and 6 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (9)
WalkthroughThis PR refines the ERC20 approval and bundling logic with UI/styling adjustments across approval modals, input fields, and toggle components. Changes include new bundling support checks, an Unsupported approval reason, responsive breakpoints, and updated approval conditional rendering to handle bundling and unsupported flows. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20–25 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
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.
Actionable comments posted: 1
🧹 Nitpick comments (3)
apps/cowswap-frontend/src/modules/erc20Approve/pure/Toggle/Toggle.tsx (1)
33-33: Consider removing explicit space character.The
{' '}space may be redundant sincePartialAmountWrapperalready usesgap: 5px(line 53 in styled.ts) to space its children. Relying solely on the gap property would provide more consistent spacing.- <TokenAmount amount={amountToApprove} /> <TokenSymbol token={amountToApprove.currency} />{' '} + <TokenAmount amount={amountToApprove} /> <TokenSymbol token={amountToApprove.currency} />apps/cowswap-frontend/src/modules/erc20Approve/containers/ChangeApproveAmountModal/styled.ts (1)
10-10: Note: 21px spacing pattern introduced.The border-radius and gap both use 21px. Ensure this aligns with your design system tokens.
Also applies to: 17-17
libs/hook-dapp-lib/src/hookDappsRegistry.ts (1)
201-202: Consider extracting common description boilerplate.The three Aave dapp descriptions share significant boilerplate text. While this is currently acceptable, consider extracting the common text into a shared constant or template if more Aave-based dapps are added in the future.
Also applies to: 211-212, 221-222
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (18)
apps/cowswap-frontend/src/common/pure/CurrencyArrowSeparator/styled.tsx(1 hunks)apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/styled.tsx(1 hunks)apps/cowswap-frontend/src/modules/erc20Approve/containers/ApprovalAmountInput/ApprovalAmountInput.tsx(1 hunks)apps/cowswap-frontend/src/modules/erc20Approve/containers/ApprovalAmountInput/styled.ts(3 hunks)apps/cowswap-frontend/src/modules/erc20Approve/containers/ChangeApproveAmountModal/ChangeApproveAmountModalPure.tsx(1 hunks)apps/cowswap-frontend/src/modules/erc20Approve/containers/ChangeApproveAmountModal/styled.ts(3 hunks)apps/cowswap-frontend/src/modules/erc20Approve/containers/SwapAmountPreview/SwapAmountPreview.tsx(1 hunks)apps/cowswap-frontend/src/modules/erc20Approve/containers/TradeApproveWithAffectedOrderList/TradeApproveWithAffectedOrderList.tsx(3 hunks)apps/cowswap-frontend/src/modules/erc20Approve/hooks/useIsApprovalOrPermitRequired.test.ts(3 hunks)apps/cowswap-frontend/src/modules/erc20Approve/hooks/useIsApprovalOrPermitRequired.ts(3 hunks)apps/cowswap-frontend/src/modules/erc20Approve/pure/Toggle/Toggle.tsx(2 hunks)apps/cowswap-frontend/src/modules/erc20Approve/pure/Toggle/styled.ts(2 hunks)apps/cowswap-frontend/src/modules/hooksStore/hooks/useInternalHookDapps.ts(2 hunks)apps/cowswap-frontend/src/modules/orderProgressBar/pure/RenderProgressTopSection.tsx(1 hunks)apps/cowswap-frontend/src/modules/swap/containers/SwapWidget/index.tsx(2 hunks)apps/cowswap-frontend/src/modules/trade/hooks/useAmountsToSignFromQuote.ts(4 hunks)apps/cowswap-frontend/src/modules/tradeFormValidation/services/validateTradeForm.ts(1 hunks)libs/hook-dapp-lib/src/hookDappsRegistry.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (14)
📓 Common learnings
Learnt from: limitofzero
Repo: cowprotocol/cowswap PR: 6351
File: apps/cowswap-frontend/src/modules/erc20Approve/containers/TradeApproveModal/useTradeApproveCallback.ts:87-121
Timestamp: 2025-10-13T19:41:31.440Z
Learning: In apps/cowswap-frontend/src/modules/erc20Approve, useApproveCallback returns Promise<TransactionResponse | undefined> and is distinct from useApproveCurrency, which can return Promise<TransactionReceipt | SafeMultisigTransactionResponse>. When reviewing approval flows, verify which hook is actually being used before flagging Safe wallet concerns.
📚 Learning: 2025-10-10T20:28:16.565Z
Learnt from: fairlighteth
Repo: cowprotocol/cowswap PR: 6347
File: apps/cowswap-frontend/src/modules/trade/pure/TradeConfirmation/index.tsx:49-49
Timestamp: 2025-10-10T20:28:16.565Z
Learning: In apps/cowswap-frontend/src/modules/trade, TradeConfirmation follows a two-layer architecture: TradeConfirmationView (pure/stateless) in pure/TradeConfirmation/index.tsx renders the UI, while TradeConfirmation (container) in containers/TradeConfirmation/index.tsx wraps it to freeze props during pending trades (via useStableTradeConfirmationProps), wire in signing state (useSigningStep), and inject trade confirmation state (useTradeConfirmState). Consuming modules should import the container TradeConfirmation from 'modules/trade' to preserve this stateful behavior.
<!-- [add_learning]
When reviewing component refactoring in apps/cowswap-frontend/src/modules/trade, recognize the pattern where a pure view component (e.g., TradeConfirmationView) is separated from a stateful container (e.g., TradeConfirmation) that wraps it. The container adds runtime state management (prop stabilization, signing state, etc.) while the view remains testable and composable. Do not flag usages that import th...
Applied to files:
apps/cowswap-frontend/src/modules/orderProgressBar/pure/RenderProgressTopSection.tsxapps/cowswap-frontend/src/modules/erc20Approve/containers/ChangeApproveAmountModal/ChangeApproveAmountModalPure.tsxapps/cowswap-frontend/src/modules/erc20Approve/containers/SwapAmountPreview/SwapAmountPreview.tsxapps/cowswap-frontend/src/modules/erc20Approve/containers/ApprovalAmountInput/styled.tsapps/cowswap-frontend/src/modules/trade/hooks/useAmountsToSignFromQuote.tsapps/cowswap-frontend/src/modules/tradeFormValidation/services/validateTradeForm.tsapps/cowswap-frontend/src/modules/erc20Approve/containers/TradeApproveWithAffectedOrderList/TradeApproveWithAffectedOrderList.tsxapps/cowswap-frontend/src/modules/erc20Approve/containers/ChangeApproveAmountModal/styled.tsapps/cowswap-frontend/src/modules/erc20Approve/pure/Toggle/Toggle.tsxapps/cowswap-frontend/src/modules/erc20Approve/hooks/useIsApprovalOrPermitRequired.tsapps/cowswap-frontend/src/modules/erc20Approve/containers/ApprovalAmountInput/ApprovalAmountInput.tsxapps/cowswap-frontend/src/modules/erc20Approve/pure/Toggle/styled.tsapps/cowswap-frontend/src/modules/swap/containers/SwapWidget/index.tsx
📚 Learning: 2025-10-13T19:41:31.440Z
Learnt from: limitofzero
Repo: cowprotocol/cowswap PR: 6351
File: apps/cowswap-frontend/src/modules/erc20Approve/containers/TradeApproveModal/useTradeApproveCallback.ts:87-121
Timestamp: 2025-10-13T19:41:31.440Z
Learning: In apps/cowswap-frontend/src/modules/erc20Approve, useApproveCallback returns Promise<TransactionResponse | undefined> and is distinct from useApproveCurrency, which can return Promise<TransactionReceipt | SafeMultisigTransactionResponse>. When reviewing approval flows, verify which hook is actually being used before flagging Safe wallet concerns.
Applied to files:
apps/cowswap-frontend/src/modules/erc20Approve/containers/ChangeApproveAmountModal/ChangeApproveAmountModalPure.tsxapps/cowswap-frontend/src/modules/erc20Approve/containers/SwapAmountPreview/SwapAmountPreview.tsxapps/cowswap-frontend/src/modules/erc20Approve/containers/ApprovalAmountInput/styled.tsapps/cowswap-frontend/src/modules/trade/hooks/useAmountsToSignFromQuote.tsapps/cowswap-frontend/src/modules/tradeFormValidation/services/validateTradeForm.tsapps/cowswap-frontend/src/modules/erc20Approve/containers/TradeApproveWithAffectedOrderList/TradeApproveWithAffectedOrderList.tsxapps/cowswap-frontend/src/modules/hooksStore/hooks/useInternalHookDapps.tsapps/cowswap-frontend/src/modules/erc20Approve/containers/ChangeApproveAmountModal/styled.tsapps/cowswap-frontend/src/modules/erc20Approve/hooks/useIsApprovalOrPermitRequired.test.tsapps/cowswap-frontend/src/modules/erc20Approve/pure/Toggle/Toggle.tsxapps/cowswap-frontend/src/modules/erc20Approve/hooks/useIsApprovalOrPermitRequired.tsapps/cowswap-frontend/src/modules/erc20Approve/containers/ApprovalAmountInput/ApprovalAmountInput.tsxapps/cowswap-frontend/src/modules/swap/containers/SwapWidget/index.tsx
📚 Learning: 2025-09-19T11:38:59.206Z
Learnt from: fairlighteth
Repo: cowprotocol/cowswap PR: 6232
File: apps/cowswap-frontend/src/modules/tokensList/pure/ChainsSelector/index.tsx:199-200
Timestamp: 2025-09-19T11:38:59.206Z
Learning: The makeBuildClickEvent function in apps/cowswap-frontend/src/modules/tokensList/pure/ChainsSelector/index.tsx takes five parameters: defaultChainId, contextLabel, mode, isSwapMode, and chainsCount. The chainsCount parameter is used to determine the CrossChain flag in analytics events.
Applied to files:
apps/cowswap-frontend/src/modules/erc20Approve/containers/ChangeApproveAmountModal/ChangeApproveAmountModalPure.tsxapps/cowswap-frontend/src/modules/swap/containers/SwapWidget/index.tsx
📚 Learning: 2025-02-20T15:59:33.749Z
Learnt from: shoom3301
Repo: cowprotocol/cowswap PR: 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.
Applied to files:
apps/cowswap-frontend/src/modules/erc20Approve/containers/SwapAmountPreview/SwapAmountPreview.tsxapps/cowswap-frontend/src/modules/swap/containers/SwapWidget/index.tsx
📚 Learning: 2025-07-24T16:42:53.154Z
Learnt from: cowdan
Repo: cowprotocol/cowswap PR: 6009
File: apps/cowswap-frontend/src/modules/tradeWidgetAddons/containers/HighFeeWarning/HighFeeWarningTooltipContent.tsx:23-33
Timestamp: 2025-07-24T16:42:53.154Z
Learning: In apps/cowswap-frontend/src/modules/tradeWidgetAddons/containers/HighFeeWarning/HighFeeWarningTooltipContent.tsx, the use of toFixed(2) for percentage formatting in tooltip content is intentional and differs from the banner message formatting that uses toSignificant(2, undefined, Rounding.ROUND_DOWN). This formatting difference serves different UX purposes and should not be flagged as inconsistent.
Applied to files:
apps/cowswap-frontend/src/modules/erc20Approve/containers/SwapAmountPreview/SwapAmountPreview.tsxapps/cowswap-frontend/src/modules/trade/hooks/useAmountsToSignFromQuote.tsapps/cowswap-frontend/src/common/pure/CurrencyArrowSeparator/styled.tsxapps/cowswap-frontend/src/modules/erc20Approve/containers/ChangeApproveAmountModal/styled.tsapps/cowswap-frontend/src/modules/erc20Approve/pure/Toggle/Toggle.tsxapps/cowswap-frontend/src/common/pure/CurrencyInputPanel/styled.tsxapps/cowswap-frontend/src/modules/swap/containers/SwapWidget/index.tsx
📚 Learning: 2025-07-24T16:43:47.639Z
Learnt from: cowdan
Repo: cowprotocol/cowswap PR: 6009
File: apps/cowswap-frontend/src/modules/tradeWidgetAddons/containers/HighFeeWarning/highFeeWarningHelpers.ts:18-20
Timestamp: 2025-07-24T16:43:47.639Z
Learning: In apps/cowswap-frontend/src/modules/tradeWidgetAddons/containers/HighFeeWarning/highFeeWarningHelpers.ts, the formatFeePercentage function uses ROUND_DOWN with toSignificant(2) for "at least X%" messaging. This ensures the displayed percentage is never higher than the actual fee, making the "at least" phrasing accurate. For example, if the actual fee is 25.4%, displaying "at least 25%" is correct, but "at least 26%" would be misleading.
Applied to files:
apps/cowswap-frontend/src/modules/trade/hooks/useAmountsToSignFromQuote.ts
📚 Learning: 2025-06-23T07:03:50.760Z
Learnt from: shoom3301
Repo: cowprotocol/cowswap PR: 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.
Applied to files:
apps/cowswap-frontend/src/modules/erc20Approve/containers/TradeApproveWithAffectedOrderList/TradeApproveWithAffectedOrderList.tsx
📚 Learning: 2025-08-12T05:57:08.021Z
Learnt from: shoom3301
Repo: cowprotocol/cowswap PR: 6138
File: libs/hook-dapp-lib/src/hookDappsRegistry.ts:1-1
Timestamp: 2025-08-12T05:57:08.021Z
Learning: The matchHooksToDapps function in libs/hook-dapp-lib/src/utils.ts provides backward compatibility for permit hooks through function selector detection (EIP_2612_PERMIT_SELECTOR and DAI_PERMIT_SELECTOR) rather than dappId matching, making it robust against dappId changes.
Applied to files:
apps/cowswap-frontend/src/modules/hooksStore/hooks/useInternalHookDapps.tsapps/cowswap-frontend/src/modules/erc20Approve/hooks/useIsApprovalOrPermitRequired.test.tsapps/cowswap-frontend/src/modules/erc20Approve/hooks/useIsApprovalOrPermitRequired.tslibs/hook-dapp-lib/src/hookDappsRegistry.ts
📚 Learning: 2025-09-25T08:49:32.256Z
Learnt from: shoom3301
Repo: cowprotocol/cowswap PR: 6299
File: apps/cowswap-frontend/src/entities/bridgeProvider/useBridgeSupportedNetworks.test.tsx:62-67
Timestamp: 2025-09-25T08:49:32.256Z
Learning: In the cowswap-frontend codebase, when testing hooks that use multiple bridge providers, both providers are always properly mocked as complete jest.Mocked<BridgeProvider<BridgeQuoteResult>> objects with all required methods stubbed, ensuring no undefined returns that could break the hook logic.
Applied to files:
apps/cowswap-frontend/src/modules/erc20Approve/hooks/useIsApprovalOrPermitRequired.test.ts
📚 Learning: 2025-07-28T16:26:08.051Z
Learnt from: cowdan
Repo: cowprotocol/cowswap PR: 6034
File: apps/cowswap-frontend-e2e/src/e2e/fiat-amounts.test.ts:44-47
Timestamp: 2025-07-28T16:26:08.051Z
Learning: In the cowswap codebase, using trivial placeholder tests like `it('should be true', () => { expect(true).to.be.true })` in e2e test files is an intentional pattern when disabling broken tests to keep CI green while maintaining build efficiency.
Applied to files:
apps/cowswap-frontend/src/modules/erc20Approve/hooks/useIsApprovalOrPermitRequired.test.ts
📚 Learning: 2025-06-16T15:58:00.268Z
Learnt from: alfetopito
Repo: cowprotocol/cowswap PR: 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.
Applied to files:
apps/cowswap-frontend/src/modules/erc20Approve/pure/Toggle/Toggle.tsx
📚 Learning: 2025-04-02T09:58:29.374Z
Learnt from: shoom3301
Repo: cowprotocol/cowswap PR: 5549
File: apps/cowswap-frontend/src/modules/tradeFlow/services/safeBundleFlow/safeBundleEthFlow.ts:152-152
Timestamp: 2025-04-02T09:58:29.374Z
Learning: In the `safeBundleEthFlow` function, `account` is guaranteed to be truthy based on the type system (`PostOrderParams` defines it as a required string) and the context in which the function is called, so additional runtime checks are unnecessary.
Applied to files:
apps/cowswap-frontend/src/modules/erc20Approve/hooks/useIsApprovalOrPermitRequired.ts
📚 Learning: 2025-07-18T08:07:55.497Z
Learnt from: alfetopito
Repo: cowprotocol/cowswap PR: 5992
File: libs/tokens/src/const/tokensList.json:135-167
Timestamp: 2025-07-18T08:07:55.497Z
Learning: Token lists for CoW Swap are maintained in a separate repository at https://github.com/cowprotocol/token-lists, not in the main cowswap repository. Issues related to missing token lists should be tracked in the token-lists repository.
Applied to files:
libs/hook-dapp-lib/src/hookDappsRegistry.ts
🧬 Code graph analysis (9)
apps/cowswap-frontend/src/modules/trade/hooks/useAmountsToSignFromQuote.ts (2)
apps/cowswap-frontend/src/modules/trade/hooks/useDerivedTradeState.ts (1)
useDerivedTradeState(7-9)libs/common-utils/src/fractionUtils.ts (1)
FractionUtils(11-186)
apps/cowswap-frontend/src/modules/erc20Approve/containers/TradeApproveWithAffectedOrderList/TradeApproveWithAffectedOrderList.tsx (2)
libs/wallet/src/api/hooks.ts (1)
useIsTxBundlingSupported(55-63)apps/cowswap-frontend/src/modules/erc20Approve/hooks/useIsApprovalOrPermitRequired.ts (1)
useIsApprovalOrPermitRequired(32-69)
apps/cowswap-frontend/src/modules/hooksStore/hooks/useInternalHookDapps.ts (1)
apps/cowswap-frontend/src/modules/hooksStore/utils.ts (1)
isHookDappIframe(6-8)
apps/cowswap-frontend/src/modules/erc20Approve/containers/ChangeApproveAmountModal/styled.ts (1)
libs/ui/src/consts.ts (1)
Media(23-43)
apps/cowswap-frontend/src/modules/erc20Approve/hooks/useIsApprovalOrPermitRequired.test.ts (2)
apps/cowswap-frontend/src/modules/trade/types/index.ts (1)
TradeType(5-5)apps/cowswap-frontend/src/modules/erc20Approve/hooks/useIsApprovalOrPermitRequired.ts (1)
useIsApprovalOrPermitRequired(32-69)
apps/cowswap-frontend/src/modules/erc20Approve/hooks/useIsApprovalOrPermitRequired.ts (1)
libs/common-utils/src/getIsNativeToken.ts (1)
getIsNativeToken(13-33)
apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/styled.tsx (1)
libs/ui/src/consts.ts (1)
Media(23-43)
apps/cowswap-frontend/src/modules/erc20Approve/pure/Toggle/styled.ts (1)
libs/ui/src/consts.ts (1)
Media(23-43)
apps/cowswap-frontend/src/modules/swap/containers/SwapWidget/index.tsx (1)
apps/cowswap-frontend/src/modules/erc20Approve/containers/TradeApproveWithAffectedOrderList/TradeApproveWithAffectedOrderList.tsx (1)
TradeApproveWithAffectedOrderList(17-54)
⏰ 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). (3)
- GitHub Check: Setup
- GitHub Check: Cypress
- GitHub Check: release-please
🔇 Additional comments (31)
apps/cowswap-frontend/src/modules/orderProgressBar/pure/RenderProgressTopSection.tsx (1)
53-53: LGTM! Correct Framer Motion easing format.The array format
[0.4, 0, 0.2, 1]is the proper way to specify custom cubic bezier easing in Framer Motion's API, rather than using a CSS string format. This change improves API compliance while maintaining the same animation behavior.apps/cowswap-frontend/src/modules/trade/hooks/useAmountsToSignFromQuote.ts (4)
4-4: LGTM: Import additions support the new conditional logic.The new imports (
NullishandTradeType) are correctly added and used in the helper function.Also applies to: 11-11
25-25: LGTM: Correctly destructures tradeType for conditional logic.
38-38: Verify the conditional threshold application is intentional.The 1% threshold for buy orders is now only applied when
tradeType === TradeType.SWAP. Previously (per the AI summary), the threshold was applied for all non-sell order paths.This behavioral change means:
- Non-SWAP trade types will no longer receive the 1% buffer
- When
tradeTypeisnullorundefined, no threshold is appliedPlease confirm this is the intended behavior and that other
TradeTypevalues (if any exist) should not receive the 1% buffer to handle price/gas fluctuations.Also applies to: 50-57
47-47: LGTM: Dependency array correctly updated.The
tradeTypeis properly added to theuseMemodependency array since it's now used in the computation.apps/cowswap-frontend/src/modules/erc20Approve/pure/Toggle/Toggle.tsx (1)
34-36: Accessibility improvement with EditIcon wrapper.Wrapping the SVG in a styled component and adding the
descriptionprop enhances both styling control and accessibility.apps/cowswap-frontend/src/modules/erc20Approve/pure/Toggle/styled.ts (3)
5-16: LGTM: Well-structured EditIcon component.The EditIcon component properly sets dimensions, uses flexbox for centering, and correctly applies theme colors with SVG path inheritance.
26-28: LGTM: Responsive design enhancement.The responsive breakpoint switches to column layout on small screens, improving mobile UX.
49-74: LGTM: Enhanced interactive styling with hover effects.The PartialAmountWrapper refactoring adds proper flex layout, spacing, and visual feedback through hover states that cascade to nested elements.
apps/cowswap-frontend/src/modules/erc20Approve/containers/SwapAmountPreview/SwapAmountPreview.tsx (1)
16-18: LGTM!The flex wrapping and horizontal padding improve layout responsiveness without affecting component logic.
apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/styled.tsx (1)
48-51: LGTM!The responsive breakpoint ensures proper single-column stacking on very small viewports, consistent with the Media utility pattern used throughout the codebase.
apps/cowswap-frontend/src/modules/erc20Approve/containers/ApprovalAmountInput/styled.ts (3)
10-10: LGTM!Reducing margin tightens the layout spacing appropriately.
24-24: LGTM!Adding gap provides clean spacing between header elements.
35-43: LGTM!The styling improvements add smooth transitions and hover feedback. Using
line-height: 1instead of100%is more standard and provides better cross-browser consistency.apps/cowswap-frontend/src/common/pure/CurrencyArrowSeparator/styled.tsx (1)
59-63: LGTM!Disabling the hover transform during loading state prevents misleading user interaction feedback.
apps/cowswap-frontend/src/modules/erc20Approve/hooks/useIsApprovalOrPermitRequired.ts (4)
18-24: LGTM!Adding
Unsupportedto represent flows that cannot use ERC20 approval (e.g., native token flows without bundling support) clarifies the approval requirements.
26-35: LGTM!The updated signature with
AdditionalParamsenables bundling-aware approval decisions. The nullable boolean forisBundlingSupportedOrEnabledForContextappropriately handles contexts where bundling may not apply.
42-69: LGTM!The refactored flow correctly handles the approval decision hierarchy:
- Early exit for unsupported flows (native tokens without bundling)
- Check if amount requires approval
- Prefer bundling when available (Line 59)
- Fall back to permit or standard approval
The null-to-false conversion via
!!at Line 43 correctly treats unspecified bundling context as "not supported."
71-86: LGTM!The helper functions provide clear separation of concerns:
isApproveSupportedByFlowOrWallet: Native token SWAP flows require bundling; LIMIT_ORDER flows with native tokens are unsupported.isErc20TokenAmountApproveRequired: Simple non-zero amount check.apps/cowswap-frontend/src/modules/tradeFormValidation/services/validateTradeForm.ts (1)
154-159: LGTM!The updated conditional correctly excludes both
UnsupportedandNotRequiredreasons from triggering approval validations, aligning with the new approval flow logic.apps/cowswap-frontend/src/modules/erc20Approve/containers/ChangeApproveAmountModal/ChangeApproveAmountModalPure.tsx (1)
42-42: LGTM!Minor logo size adjustment for visual consistency.
apps/cowswap-frontend/src/modules/erc20Approve/containers/ApprovalAmountInput/ApprovalAmountInput.tsx (1)
78-78: LGTM!Removing the trailing colon improves the header text flow, especially with the gap spacing added in the styled component.
apps/cowswap-frontend/src/modules/erc20Approve/containers/ChangeApproveAmountModal/styled.ts (2)
1-1: LGTM! Responsive styling correctly implemented.The Media import and responsive font-size adjustment for small screens follow the established pattern from @cowprotocol/ui.
Also applies to: 27-29
19-20: Tighter layout spacing applied.The reduced margins (24px 0 vs 48px 0 19px 0) and updated button wrapper margins create a more compact layout. Verify this meets the intended design specifications.
Also applies to: 39-39
apps/cowswap-frontend/src/modules/swap/containers/SwapWidget/index.tsx (2)
218-218: LGTM! Dependency array correctly updated.Adding
isPartialApproveEnabledto the dependency array ensures the callback re-renders when the feature flag changes.
193-193: The double-gating is intentional and correct—no issue found.
TradeApproveWithAffectedOrderListalready checksisPartialApprovalEnabledInSettings(user setting) internally and returns null if disabled. The outerisPartialApproveEnabledgate (feature flag) in SwapWidget serves a different purpose: preventing unnecessary component evaluation when the feature is globally disabled. This dual-gate pattern is consistent throughout the codebase (e.g., EthFlowModalBottomContent, useEthFlowActions) and represents proper feature-flag + user-preference separation.apps/cowswap-frontend/src/modules/erc20Approve/containers/TradeApproveWithAffectedOrderList/TradeApproveWithAffectedOrderList.tsx (2)
18-20: LGTM! Bundling support correctly integrated.The dynamic bundling check via
useIsTxBundlingSupported()replaces the hardcodedfalse. The hook returnsboolean | null, which is properly handled byuseIsApprovalOrPermitRequired.
34-35: LGTM! BundleApproveRequired handling added.The approval logic now correctly treats
BundleApproveRequiredas a valid reason to show the approval toggle, consistent with the bundling feature enhancement.apps/cowswap-frontend/src/modules/erc20Approve/hooks/useIsApprovalOrPermitRequired.test.ts (2)
183-498: LGTM! Comprehensive test coverage for Unsupported and bundling flows.The new tests thoroughly cover native token scenarios across all trade types and bundling states. The negative tests (lines 394-422) appropriately verify ERC20 tokens don't return Unsupported, preventing false positives.
501-563: LGTM! Bundling scenarios well-tested.The tests correctly verify that
BundleApproveRequiredis returned when bundling is enabled, regardless of permit support or approval state.libs/hook-dapp-lib/src/hookDappsRegistry.ts (1)
197-226: Verify that noconditionsfield is intentional for the new Aave dapps.The three new Aave flash loan dapps don't include a
conditionsfield, which means they'll be available on all networks, usable as both pre-hooks and post-hooks, and compatible with all wallet types. This differs from most other dapps in the registry—CLAIM_GNO_FROM_VALIDATORS restricts tosupportedNetworks: [100]andposition: 'pre', while most external dapps like Bungee and Across restrict towalletCompatibility: ['EOA'].Please confirm whether these Aave dapps are truly network-agnostic and wallet-compatible across all chains, or if appropriate restrictions should be added.
update develop
Summary by CodeRabbit
Release Notes
New Features
Bug Fixes
UI/UX Improvements