refactor(swap): bundle optimization #6775
Conversation
…-utils methods and hardcode used consts added eslint restrict rules
dynamic import @safe-global/api-kit
@ethereumjs/util (esm) @walletconnect/ethereum-provider @walletconnect/types @walletconnect/utils
…tion and lottie-react
|
@crutch12 is attempting to deploy a commit to the cow Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThis PR performs a comprehensive refactor involving Safe-Global library migration from deprecated packages to Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ 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. Comment |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
| } | ||
|
|
||
| export function getSafeTransaction( | ||
| export async function getSafeTransaction( |
There was a problem hiding this comment.
new versions of SafeApiKit don't requre Web3Provider
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
♻️ Duplicate comments (7)
apps/cowswap-frontend/src/common/hooks/useGetSurplusFiatValue.ts (1)
1-1: Consistent lint rule migration.Same pattern as other files in this PR—correctly migrated to
@typescript-eslint/no-restricted-imports.apps/cowswap-frontend/src/common/containers/OrderHooksDetails/HookItem/index.tsx (1)
1-1: Consistent lint rule migration.apps/cowswap-frontend/src/common/hooks/useSwapResultsContext.ts (1)
1-1: Consistent lint rule migration.apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/types.ts (1)
1-1: Consistent lint rule migration.apps/cowswap-frontend/src/common/pure/ReceiveAmount/index.tsx (1)
1-1: Consistent lint rule migration.apps/cowswap-frontend/src/common/hooks/useRateInfoParams.ts (1)
1-1: Consistent lint rule migration.apps/cowswap-frontend/src/common/updaters/SentryUpdater.ts (1)
1-1: Consistent lint rule migration.
🧹 Nitpick comments (14)
apps/cowswap-frontend/src/lib/i18n.tsx (1)
59-62: Consider prioritizing this TODO to eliminate the initial null render.This TODO correctly identifies a UX issue where I18nProvider may render null during the initial render. Combined with the potential guard logic issue on lines 54-57, this could result in a flash of missing content for users.
Possible solutions:
- Pre-load the default locale messages before the first render (as suggested in the TODO).
- Ensure the synchronous guard on line 54 works correctly to activate the default locale immediately.
- Add a loading state/skeleton instead of rendering null.
apps/cowswap-frontend/src/modules/ordersTable/hooks/useNoOrdersAnimation.ts (1)
5-5: Consider using type-only import.
LottieComponentPropsis only used in type positions (line 17, 18). Usingimport typewould be more explicit and could help with tree-shaking:-import { LottieComponentProps } from 'lottie-react' +import type { LottieComponentProps } from 'lottie-react'However, if this change was intentional due to module resolution issues with
lottie-react, please disregard.apps/cowswap-frontend/src/common/updaters/orders/PendingOrdersUpdater.ts (1)
91-95: BigInt comparison logic is correct but guard differs from similar code.The logic correctly identifies replaced Safe transactions. Note that in
checkSafeTransaction.ts(line 26), the guard usestypeof safeNonce === 'string', while here it uses a truthy checksafeNonce &&.If
safeNoncecould be a number (fromGnosisSafeInfo), the BigInt conversion will still work correctly. However, consider aligning the guard style for consistency:- const isOrderTxReplaced = !!( - safeNonce && - BigInt(safeTransaction.nonce) < BigInt(safeNonce) && - !safeTransaction.isExecuted - ) + const isOrderTxReplaced = !!( + typeof safeNonce !== 'undefined' && + BigInt(safeTransaction.nonce) < BigInt(safeNonce) && + !safeTransaction.isExecuted + )libs/wallet/src/web3-react/connectors/TrezorConnector/getAccountsList.ts (1)
81-82: UseBuffer.from()instead of deprecatednew Buffer()constructor.The
Bufferconstructor with string arguments is deprecated and will show warnings. Consider updating these lines while making changes to this file:🔎 Proposed fix
- hdKey.publicKey = new Buffer(payload.publicKey, 'hex') - hdKey.chainCode = new Buffer(payload.chainCode, 'hex') + hdKey.publicKey = Buffer.from(payload.publicKey, 'hex') + hdKey.chainCode = Buffer.from(payload.chainCode, 'hex')libs/permit-utils/src/consts/1inchPermitUtils.ts (1)
1-68: LGTM! Well-documented rationale for hardcoding these constants.The approach of extracting stable constants from an archived library is sensible for bundle optimization. The permit selectors and typehash are cryptographic constants tied to EIP-2612 specifications and won't change.
Consider adding
as constto the ABI array for stricter typing if consumers need literal types:-export const DAI_EIP_2612_PERMIT_ABI = [ +export const DAI_EIP_2612_PERMIT_ABI = [ { // ... }, -] +] as consteslint.config.js (1)
149-155: Clarify the error message for the dynamic import restriction.The
no-restricted-syntaxrule blocks dynamic imports (import(...)) from@1inch/permit-signed-approvals-utils, but the message says "Please import dynamically from @cowprotocol/permit-utils". This could be confusing since you're blocking dynamic imports, not encouraging them.Consider rewording to clarify that developers should use the
@cowprotocol/permit-utilswrapper instead:🔎 Suggested fix
'no-restricted-syntax': [ 'error', { selector: 'ImportExpression[source.value="@1inch/permit-signed-approvals-utils"]', - message: 'Please import dynamically from @cowprotocol/permit-utils', + message: 'Please use @cowprotocol/permit-utils instead, which provides optimized dynamic imports', }, ],apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/FinishedStep.tsx (1)
40-47: Consider a loading skeleton fallback instead of null.The
nullfallback means users see nothing while the Lottie animation loads. For a better UX, consider a lightweight placeholder (e.g., a static checkmark icon or a small spinner) to avoid layout shift.apps/cowswap-frontend/src/modules/orderProgressBar/pure/StepComponent.tsx (1)
42-50: Consider a fallback for the Suspense boundary.The
nullfallback means users see nothing while the cancellation animation loads. Since this is a cancellation state, consider showing a simple static icon (e.g., an "X" or spinner) to provide immediate visual feedback during the lazy load.libs/permit-utils/src/imports/1inchPermitUtils.ts (1)
1-10: LGTM! Good selective re-export pattern for bundle optimization.The documentation clearly explains the rationale (642kb → 256kb reduction), and the ESLint disable is appropriate since this is the designated entry point for the dynamic import.
Minor typo in line 4: "dymaic" should be "dynamic".
🔎 Optional fix for typo
- * It uses esm, but dymaic import breaks tree shaking, so we re-export here only used variables (642kb -> 256kb). + * It uses esm, but dynamic import breaks tree shaking, so we re-export here only used variables (642kb -> 256kb).apps/cowswap-frontend/src/modules/orderProgressBar/pure/TopSections.tsx (1)
52-58: Consider loading states for better UX.Both components return
nullwhile the Lottie assets are loading. This could cause layout shifts or brief empty states in the UI. Consider whether a skeleton or placeholder would provide a smoother user experience, especially on slower connections.Also applies to: 92-98
tools/formatChunkFileName.ts (1)
8-17: Consider edge case where derived name becomes empty.If the path after the key consists only of segments like
index,dist,node_modules, orbrowser, thenamevariable could become an empty string (or just-), resulting in filenames likestatic/page--[hash].js.🔎 Proposed fix to handle empty name
const name = splitted[splitted.length - 1] .replace(/\/(index|dist|node_modules|browser)/g, '') .replace(/\.(tsx?|jsx?|mjs|mts|cjs)$/, '') .replace(/\//g, '-') + .replace(/^-+|-+$/g, '') // trim leading/trailing hyphens + if (!name) return undefined // fallback to default naming + return chunkGroups[key].replace(/\[name\]/g, name)libs/permit-utils/src/lib/getPermitUtilsInstance.ts (1)
17-51: Potential race condition during concurrent initial calls.If multiple callers invoke
getPermitUtilsInstancesimultaneously before the cache is populated, each will proceed to create a new instance (due to theawait import()), potentially resulting in multiple instances being created and only the last one being cached. This is a minor concern since the instances are functionally equivalent, but it wastes resources.🔎 Optional fix using a pending promise cache
+const PENDING_CACHE = new Map<string, Promise<Eip2612PermitUtils>>() + export async function getPermitUtilsInstance( chainId: number, provider: JsonRpcProvider, account?: string | undefined, ): Promise<Eip2612PermitUtils> { const chainCache = CHAIN_UTILS_CACHE.get(chainId) if (!account && chainCache) { return chainCache } const providerCacheKey = `${chainId}-${account}` const providerCache = PROVIDER_UTILS_CACHE.get(providerCacheKey) if (providerCache) { return providerCache } + const cacheKey = account ? providerCacheKey : `chain-${chainId}` + const pending = PENDING_CACHE.get(cacheKey) + if (pending) return pending + + const promise = (async () => { const web3ProviderConnector = new PermitProviderConnector(provider, account ? undefined : PERMIT_SIGNER) const Eip2612PermitUtilsClass = await import('../imports/1inchPermitUtils').then((r) => r.Eip2612PermitUtils) - const eip2612PermitUtils = new Eip2612PermitUtilsClass(web3ProviderConnector, { enabledCheckSalt: true }) + return new Eip2612PermitUtilsClass(web3ProviderConnector, { enabledCheckSalt: true }) + })() + + PENDING_CACHE.set(cacheKey, promise) + const eip2612PermitUtils = await promise + PENDING_CACHE.delete(cacheKey)libs/core/src/gnosisSafe/index.ts (1)
24-37: Same race condition concern as in permit utils.Similar to
getPermitUtilsInstance, concurrent calls to_getClientbefore the cache is populated could result in multipleSafeApiKitinstances being created. Given this is a heavier module with network-related setup, consider adding a pending promise cache.🔎 Optional fix using pending promise pattern
+const PENDING_CLIENTS = new Map<number, Promise<SafeApiKitType | null>>() + async function _getClient(chainId: number): Promise<SafeApiKitType | null> { const cachedClient = SAFE_TRANSACTION_SERVICE_CACHE[chainId] if (cachedClient !== undefined) { return cachedClient } + const pending = PENDING_CLIENTS.get(chainId) + if (pending) return pending + + const promise = createSafeApiKitInstance(chainId) + PENDING_CLIENTS.set(chainId, promise) + - const client = await createSafeApiKitInstance(chainId) + const client = await promise + PENDING_CLIENTS.delete(chainId) // Add client to cache (or null if unknown network) SAFE_TRANSACTION_SERVICE_CACHE[chainId] = client return client }apps/cowswap-frontend/vite.config.mts (1)
185-185: Update or remove the outdated comment about @1inch.The comment
// was used by @1inchis misleading—theweb3package is actively used in the codebase (imported in explorer utilities), and this manual chunk configuration helps ensure it bundles correctly. Either remove the comment entirely or clarify its actual purpose if there's a specific reason for this chunking strategy.
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (92)
.gitignoreapps/cowswap-frontend/src/common/containers/CoWAmmBanner/index.tsxapps/cowswap-frontend/src/common/containers/CoWAmmBanner/types.tsapps/cowswap-frontend/src/common/containers/OrderHooksDetails/HookItem/index.tsxapps/cowswap-frontend/src/common/containers/OrderHooksDetails/index.tsxapps/cowswap-frontend/src/common/hooks/useCancelOrder/onChainCancellation.tsapps/cowswap-frontend/src/common/hooks/useCancelOrder/useGetOnChainCancellation.tsapps/cowswap-frontend/src/common/hooks/useCancelOrder/useSendOnChainCancellation.tsapps/cowswap-frontend/src/common/hooks/useConvertUsdToTokenValue.tsapps/cowswap-frontend/src/common/hooks/useEnhancedActivityDerivedState.tsapps/cowswap-frontend/src/common/hooks/useGetMarketDimension.tsapps/cowswap-frontend/src/common/hooks/useGetSurplusFiatValue.tsapps/cowswap-frontend/src/common/hooks/useNavigate.tsapps/cowswap-frontend/src/common/hooks/useOnSelectNetwork.tsxapps/cowswap-frontend/src/common/hooks/useRateInfoParams.tsapps/cowswap-frontend/src/common/hooks/useSafeApiKit.tsapps/cowswap-frontend/src/common/hooks/useSwapAndBridgeContext.tsapps/cowswap-frontend/src/common/hooks/useSwapAndBridgeOverview.tsapps/cowswap-frontend/src/common/hooks/useSwapResultsContext.tsapps/cowswap-frontend/src/common/pure/CoWAmmBannerContent/index.tsxapps/cowswap-frontend/src/common/pure/ConfirmationPendingContent/ConfirmationPendingContentShell.tsxapps/cowswap-frontend/src/common/pure/CurrencyInputPanel/CurrencyInputPanel.tsxapps/cowswap-frontend/src/common/pure/CurrencyInputPanel/types.tsapps/cowswap-frontend/src/common/pure/ExecutionPrice/hooks/useExecutionPriceFiat.tsapps/cowswap-frontend/src/common/pure/ReceiveAmount/index.tsxapps/cowswap-frontend/src/common/pure/ReceiveAmountInfo/index.tsxapps/cowswap-frontend/src/common/types.tsapps/cowswap-frontend/src/common/updaters/SentryUpdater.tsapps/cowswap-frontend/src/common/updaters/WidgetTokensUpdater.tsxapps/cowswap-frontend/src/common/updaters/orders/CancelledOrdersUpdater.tsapps/cowswap-frontend/src/common/updaters/orders/OrdersFromApiUpdater.tsapps/cowswap-frontend/src/common/updaters/orders/PendingOrdersUpdater.tsapps/cowswap-frontend/src/common/updaters/orders/SpotPricesUpdater.tsapps/cowswap-frontend/src/common/updaters/orders/UnfillableOrdersUpdater/hooks/useUpdateIsUnfillableFlag.tsapps/cowswap-frontend/src/common/updaters/orders/UnfillableOrdersUpdater/updaters/UnfillableOrderUpdater.tsapps/cowswap-frontend/src/common/utils/doesOrderHavePermit.tsapps/cowswap-frontend/src/legacy/hooks/useGetSafeTxInfo.tsapps/cowswap-frontend/src/legacy/state/enhancedTransactions/actions.tsapps/cowswap-frontend/src/legacy/state/enhancedTransactions/reducer.tsapps/cowswap-frontend/src/legacy/state/orders/actions.tsapps/cowswap-frontend/src/lib/i18n.tsxapps/cowswap-frontend/src/modules/erc20Approve/containers/TradeApproveButton/TradeApproveButton.tsxapps/cowswap-frontend/src/modules/erc20Approve/hooks/useApproveAndSwap.tsapps/cowswap-frontend/src/modules/erc20Approve/hooks/useApproveCurrency.tsapps/cowswap-frontend/src/modules/erc20Approve/utils/getIsTradeApproveResult.tsapps/cowswap-frontend/src/modules/limitOrders/services/safeBundleFlow/index.tsapps/cowswap-frontend/src/modules/onchainTransactions/updaters/FinalizeTxUpdater/services/checkSafeTransaction.tsapps/cowswap-frontend/src/modules/orderProgressBar/pure/LottieContainer.tsxapps/cowswap-frontend/src/modules/orderProgressBar/pure/RenderProgressTopSection.tsxapps/cowswap-frontend/src/modules/orderProgressBar/pure/StepComponent.tsxapps/cowswap-frontend/src/modules/orderProgressBar/pure/TopSections.tsxapps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/FinishedStep.tsxapps/cowswap-frontend/src/modules/ordersTable/hooks/useDoesOrderHaveValidPermit.test.tsapps/cowswap-frontend/src/modules/ordersTable/hooks/useNoOrdersAnimation.tsapps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/NoOrdersContent.tsxapps/cowswap-frontend/src/modules/ordersTable/pure/ReceiptModal/fields/SafeTxFields.tsxapps/cowswap-frontend/src/modules/ordersTable/utils/checkPermitNonceAndAmount.tsapps/cowswap-frontend/src/modules/ordersTable/utils/extractPermitData.tsapps/cowswap-frontend/src/modules/permit/hooks/useGeneratePermitHook.tsapps/cowswap-frontend/src/modules/permit/hooks/useGetCachedPermit.tsapps/cowswap-frontend/src/modules/tradeFlow/services/safeBundleFlow/safeBundleApprovalFlow.tsapps/cowswap-frontend/src/modules/tradeFlow/services/safeBundleFlow/safeBundleEthFlow.tsapps/cowswap-frontend/src/modules/twap/services/cancelTwapOrderTxs.tsapps/cowswap-frontend/src/modules/twap/services/createTwapOrderTxs.tsapps/cowswap-frontend/src/modules/twap/services/extensibleFallbackSetupTxs.tsapps/cowswap-frontend/src/modules/twap/services/fetchTwapOrdersFromSafe.tsapps/cowswap-frontend/src/modules/twap/updaters/TwapOrdersUpdater.tsxapps/cowswap-frontend/src/modules/zeroApproval/hooks/useZeroApprove.tsapps/cowswap-frontend/src/utils/orderUtils/getOrderPermitAmount.test.tsapps/cowswap-frontend/src/utils/orderUtils/isPermitValidForOrder.tsapps/cowswap-frontend/vite.config.mtsapps/explorer/src/storybook/decorators.tsxapps/widget-configurator/src/app/embedDialog/index.tsxeslint.config.jslibs/core/src/gnosisSafe/index.tslibs/permit-utils/README.mdlibs/permit-utils/src/consts/1inchPermitUtils.tslibs/permit-utils/src/imports/1inchPermitUtils.tslibs/permit-utils/src/index.tslibs/permit-utils/src/lib/checkIsCallDataAValidPermit.tslibs/permit-utils/src/lib/getPermitUtilsInstance.tslibs/permit-utils/src/lib/getTokenPermitInfo.tslibs/permit-utils/src/utils/PermitProviderConnector.tslibs/permit-utils/src/utils/buildPermitCallData.tslibs/wallet/src/api/hooks/useSendBatchTransactions.tslibs/wallet/src/api/types.tslibs/wallet/src/web3-react/connectors/TrezorConnector/getAccountsList.tslibs/wallet/src/web3-react/connectors/TrezorConnector/index.tslibs/wallet/src/web3-react/hooks/useSafeAppsSdk.tslibs/wallet/src/web3-react/updater.tspackage.jsontools/formatChunkFileName.ts
💤 Files with no reviewable changes (1)
- .gitignore
🧰 Additional context used
🧠 Learnings (21)
📓 Common learnings
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.
Learnt from: alfetopito
Repo: cowprotocol/cowswap PR: 6234
File: libs/tokens/src/index.ts:1-4
Timestamp: 2025-09-11T08:25:51.460Z
Learning: In the cowprotocol/cowswap project, there is currently no SSR (Server-Side Rendering) support, so localStorage access at module import time does not cause SSR-related issues.
📚 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/legacy/state/orders/actions.tsapps/cowswap-frontend/src/modules/twap/services/fetchTwapOrdersFromSafe.tsapps/cowswap-frontend/src/modules/limitOrders/services/safeBundleFlow/index.tsapps/cowswap-frontend/src/modules/erc20Approve/hooks/useApproveAndSwap.tsapps/cowswap-frontend/src/modules/twap/services/cancelTwapOrderTxs.tsapps/cowswap-frontend/src/common/hooks/useGetSurplusFiatValue.tsapps/cowswap-frontend/src/modules/onchainTransactions/updaters/FinalizeTxUpdater/services/checkSafeTransaction.tsapps/cowswap-frontend/src/modules/erc20Approve/containers/TradeApproveButton/TradeApproveButton.tsxapps/cowswap-frontend/src/legacy/state/enhancedTransactions/actions.tsapps/cowswap-frontend/src/modules/tradeFlow/services/safeBundleFlow/safeBundleApprovalFlow.tsapps/cowswap-frontend/src/modules/ordersTable/utils/checkPermitNonceAndAmount.tsapps/cowswap-frontend/src/modules/ordersTable/utils/extractPermitData.tsapps/cowswap-frontend/src/legacy/hooks/useGetSafeTxInfo.tsapps/cowswap-frontend/src/modules/permit/hooks/useGetCachedPermit.tsapps/cowswap-frontend/src/modules/twap/services/extensibleFallbackSetupTxs.tslibs/permit-utils/src/lib/checkIsCallDataAValidPermit.tslibs/wallet/src/api/hooks/useSendBatchTransactions.tsapps/cowswap-frontend/src/common/hooks/useConvertUsdToTokenValue.tsapps/cowswap-frontend/src/modules/ordersTable/hooks/useDoesOrderHaveValidPermit.test.tslibs/wallet/src/web3-react/hooks/useSafeAppsSdk.tsapps/cowswap-frontend/src/modules/erc20Approve/hooks/useApproveCurrency.tsapps/cowswap-frontend/src/common/hooks/useSafeApiKit.tsapps/cowswap-frontend/src/modules/erc20Approve/utils/getIsTradeApproveResult.tsapps/cowswap-frontend/src/modules/zeroApproval/hooks/useZeroApprove.tsapps/cowswap-frontend/src/utils/orderUtils/isPermitValidForOrder.tsapps/cowswap-frontend/src/modules/permit/hooks/useGeneratePermitHook.tslibs/core/src/gnosisSafe/index.ts
📚 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/legacy/state/orders/actions.tsapps/cowswap-frontend/src/common/containers/CoWAmmBanner/index.tsxapps/cowswap-frontend/src/common/containers/OrderHooksDetails/HookItem/index.tsxapps/cowswap-frontend/src/common/pure/ReceiveAmountInfo/index.tsxapps/cowswap-frontend/src/common/containers/OrderHooksDetails/index.tsxapps/cowswap-frontend/src/modules/twap/services/fetchTwapOrdersFromSafe.tsapps/cowswap-frontend/src/common/hooks/useOnSelectNetwork.tsxapps/cowswap-frontend/src/common/pure/ConfirmationPendingContent/ConfirmationPendingContentShell.tsxapps/cowswap-frontend/src/common/hooks/useSwapAndBridgeContext.tsapps/cowswap-frontend/src/modules/limitOrders/services/safeBundleFlow/index.tsapps/cowswap-frontend/src/modules/erc20Approve/hooks/useApproveAndSwap.tsapps/cowswap-frontend/src/modules/orderProgressBar/pure/StepComponent.tsxapps/cowswap-frontend/src/common/hooks/useCancelOrder/onChainCancellation.tsapps/cowswap-frontend/src/modules/orderProgressBar/pure/TopSections.tsxapps/cowswap-frontend/src/common/pure/CurrencyInputPanel/CurrencyInputPanel.tsxapps/cowswap-frontend/src/common/hooks/useCancelOrder/useSendOnChainCancellation.tsapps/cowswap-frontend/src/modules/twap/services/cancelTwapOrderTxs.tsapps/cowswap-frontend/src/common/pure/ReceiveAmount/index.tsxapps/cowswap-frontend/src/common/hooks/useGetSurplusFiatValue.tsapps/cowswap-frontend/src/modules/tradeFlow/services/safeBundleFlow/safeBundleEthFlow.tsapps/cowswap-frontend/src/common/updaters/orders/CancelledOrdersUpdater.tsapps/cowswap-frontend/src/modules/erc20Approve/containers/TradeApproveButton/TradeApproveButton.tsxapps/cowswap-frontend/src/legacy/state/enhancedTransactions/actions.tsapps/cowswap-frontend/src/modules/tradeFlow/services/safeBundleFlow/safeBundleApprovalFlow.tsapps/cowswap-frontend/src/common/hooks/useCancelOrder/useGetOnChainCancellation.tsapps/cowswap-frontend/src/modules/orderProgressBar/pure/RenderProgressTopSection.tsxapps/cowswap-frontend/src/modules/orderProgressBar/pure/LottieContainer.tsxapps/cowswap-frontend/src/modules/twap/services/extensibleFallbackSetupTxs.tsapps/cowswap-frontend/src/common/hooks/useSwapAndBridgeOverview.tsapps/cowswap-frontend/src/common/hooks/useGetMarketDimension.tsapps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/FinishedStep.tsxapps/cowswap-frontend/src/modules/ordersTable/hooks/useDoesOrderHaveValidPermit.test.tsapps/cowswap-frontend/src/modules/erc20Approve/hooks/useApproveCurrency.tsapps/cowswap-frontend/src/common/containers/CoWAmmBanner/types.tsapps/cowswap-frontend/src/modules/erc20Approve/utils/getIsTradeApproveResult.tsapps/cowswap-frontend/src/modules/zeroApproval/hooks/useZeroApprove.tsapps/cowswap-frontend/src/modules/twap/updaters/TwapOrdersUpdater.tsxapps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/NoOrdersContent.tsxapps/cowswap-frontend/src/modules/twap/services/createTwapOrderTxs.tsapps/cowswap-frontend/src/legacy/state/enhancedTransactions/reducer.ts
📚 Learning: 2025-08-05T14:27:05.023Z
Learnt from: alfetopito
Repo: cowprotocol/cowswap PR: 5992
File: libs/wallet/src/web3-react/utils/switchChain.ts:36-38
Timestamp: 2025-08-05T14:27:05.023Z
Learning: In libs/wallet/src/web3-react/utils/switchChain.ts, the team prefers using Record<SupportedChainId, string | null> over Partial<Record<SupportedChainId, string>> for WALLET_RPC_SUGGESTION to enforce that all supported chain IDs have explicit values set, even if some might be null. This ensures compile-time completeness checking.
Applied to files:
apps/cowswap-frontend/src/legacy/state/orders/actions.tsapps/cowswap-frontend/src/modules/twap/services/fetchTwapOrdersFromSafe.tsapps/cowswap-frontend/src/common/hooks/useOnSelectNetwork.tsxapps/cowswap-frontend/src/common/hooks/useSwapAndBridgeContext.tsapps/cowswap-frontend/src/modules/twap/services/cancelTwapOrderTxs.tsapps/cowswap-frontend/src/common/hooks/useEnhancedActivityDerivedState.tslibs/wallet/src/web3-react/updater.tsapps/cowswap-frontend/src/legacy/hooks/useGetSafeTxInfo.tslibs/wallet/src/web3-react/connectors/TrezorConnector/getAccountsList.tsapps/cowswap-frontend/src/common/hooks/useSwapAndBridgeOverview.tsapps/cowswap-frontend/src/common/hooks/useConvertUsdToTokenValue.tsapps/cowswap-frontend/src/modules/ordersTable/hooks/useDoesOrderHaveValidPermit.test.tslibs/wallet/src/web3-react/hooks/useSafeAppsSdk.tslibs/wallet/src/api/types.tsapps/cowswap-frontend/src/common/hooks/useSafeApiKit.tsapps/cowswap-frontend/src/modules/zeroApproval/hooks/useZeroApprove.tsapps/cowswap-frontend/src/utils/orderUtils/isPermitValidForOrder.tsapps/cowswap-frontend/src/legacy/state/enhancedTransactions/reducer.tslibs/core/src/gnosisSafe/index.ts
📚 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/common/containers/CoWAmmBanner/index.tsxapps/cowswap-frontend/src/common/pure/CurrencyInputPanel/CurrencyInputPanel.tsxapps/cowswap-frontend/src/common/pure/ExecutionPrice/hooks/useExecutionPriceFiat.tsapps/cowswap-frontend/src/common/hooks/useConvertUsdToTokenValue.ts
📚 Learning: 2025-09-11T08:25:51.460Z
Learnt from: alfetopito
Repo: cowprotocol/cowswap PR: 6234
File: libs/tokens/src/index.ts:1-4
Timestamp: 2025-09-11T08:25:51.460Z
Learning: In the cowprotocol/cowswap project, there is currently no SSR (Server-Side Rendering) support, so localStorage access at module import time does not cause SSR-related issues.
Applied to files:
apps/cowswap-frontend/src/common/containers/CoWAmmBanner/index.tsxapps/cowswap-frontend/src/common/containers/OrderHooksDetails/HookItem/index.tsxapps/cowswap-frontend/src/common/containers/OrderHooksDetails/index.tsxapps/cowswap-frontend/src/common/hooks/useOnSelectNetwork.tsxapps/cowswap-frontend/src/common/hooks/useSwapAndBridgeContext.tsapps/cowswap-frontend/src/common/updaters/SentryUpdater.tsapps/cowswap-frontend/src/common/hooks/useCancelOrder/onChainCancellation.tsapps/cowswap-frontend/src/modules/orderProgressBar/pure/TopSections.tsxapps/cowswap-frontend/src/common/pure/CurrencyInputPanel/CurrencyInputPanel.tsxapps/cowswap-frontend/src/common/hooks/useCancelOrder/useSendOnChainCancellation.tsapps/cowswap-frontend/src/common/hooks/useGetSurplusFiatValue.tsapps/cowswap-frontend/src/common/hooks/useEnhancedActivityDerivedState.tsapps/cowswap-frontend/src/common/updaters/orders/CancelledOrdersUpdater.tsapps/cowswap-frontend/src/common/hooks/useCancelOrder/useGetOnChainCancellation.tsapps/cowswap-frontend/src/common/hooks/useSwapAndBridgeOverview.tsapps/cowswap-frontend/src/common/hooks/useRateInfoParams.tsapps/cowswap-frontend/src/common/hooks/useConvertUsdToTokenValue.tsapps/cowswap-frontend/src/common/hooks/useSwapResultsContext.tsapps/cowswap-frontend/src/modules/ordersTable/hooks/useDoesOrderHaveValidPermit.test.tsapps/cowswap-frontend/src/common/updaters/WidgetTokensUpdater.tsxapps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/NoOrdersContent.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/common/containers/OrderHooksDetails/HookItem/index.tsxapps/cowswap-frontend/src/common/hooks/useOnSelectNetwork.tsxapps/cowswap-frontend/src/modules/erc20Approve/hooks/useApproveAndSwap.tsapps/cowswap-frontend/src/common/utils/doesOrderHavePermit.tslibs/permit-utils/src/consts/1inchPermitUtils.tsapps/cowswap-frontend/src/modules/ordersTable/utils/checkPermitNonceAndAmount.tsapps/cowswap-frontend/src/modules/ordersTable/utils/extractPermitData.tsapps/cowswap-frontend/src/legacy/hooks/useGetSafeTxInfo.tsapps/cowswap-frontend/src/modules/permit/hooks/useGetCachedPermit.tslibs/permit-utils/src/lib/getPermitUtilsInstance.tslibs/permit-utils/src/lib/checkIsCallDataAValidPermit.tslibs/permit-utils/src/imports/1inchPermitUtils.tsapps/cowswap-frontend/src/modules/ordersTable/hooks/useDoesOrderHaveValidPermit.test.tslibs/wallet/src/web3-react/hooks/useSafeAppsSdk.tslibs/permit-utils/README.mdlibs/permit-utils/src/lib/getTokenPermitInfo.tslibs/permit-utils/src/utils/PermitProviderConnector.tslibs/permit-utils/src/utils/buildPermitCallData.tsapps/cowswap-frontend/src/utils/orderUtils/isPermitValidForOrder.tsapps/cowswap-frontend/src/utils/orderUtils/getOrderPermitAmount.test.tsapps/cowswap-frontend/src/modules/permit/hooks/useGeneratePermitHook.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/common/containers/OrderHooksDetails/HookItem/index.tsxapps/cowswap-frontend/src/common/hooks/useSwapAndBridgeContext.tsapps/cowswap-frontend/src/legacy/hooks/useGetSafeTxInfo.tsapps/cowswap-frontend/src/common/hooks/useSwapAndBridgeOverview.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/common/pure/ReceiveAmountInfo/index.tsxapps/cowswap-frontend/src/common/pure/CoWAmmBannerContent/index.tsxapps/cowswap-frontend/src/common/pure/ReceiveAmount/index.tsxapps/cowswap-frontend/src/common/pure/CurrencyInputPanel/types.tseslint.config.js
📚 Learning: 2025-09-25T08:48:53.495Z
Learnt from: shoom3301
Repo: cowprotocol/cowswap PR: 6299
File: apps/cowswap-frontend/src/entities/bridgeProvider/useBridgeSupportedNetworks.test.tsx:58-60
Timestamp: 2025-09-25T08:48:53.495Z
Learning: In the cowswap-frontend codebase, when writing SWR tests, the team prefers maximum test isolation by using `provider: () => new Map()` in SWRConfig wrappers, even if it recreates cache on every render, to ensure tests don't share any state.
Applied to files:
apps/cowswap-frontend/src/common/containers/OrderHooksDetails/index.tsxapps/cowswap-frontend/src/common/hooks/useEnhancedActivityDerivedState.tsapps/cowswap-frontend/src/modules/ordersTable/hooks/useDoesOrderHaveValidPermit.test.ts
📚 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/common/hooks/useOnSelectNetwork.tsxapps/cowswap-frontend/src/common/hooks/useSwapAndBridgeContext.tsapps/cowswap-frontend/src/modules/twap/services/cancelTwapOrderTxs.tsapps/cowswap-frontend/src/common/hooks/useEnhancedActivityDerivedState.tsapps/cowswap-frontend/src/common/hooks/useSwapAndBridgeOverview.tsapps/cowswap-frontend/src/common/hooks/useConvertUsdToTokenValue.ts
📚 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/limitOrders/services/safeBundleFlow/index.tsapps/cowswap-frontend/src/modules/tradeFlow/services/safeBundleFlow/safeBundleEthFlow.tsapps/cowswap-frontend/src/modules/onchainTransactions/updaters/FinalizeTxUpdater/services/checkSafeTransaction.tsapps/cowswap-frontend/src/modules/tradeFlow/services/safeBundleFlow/safeBundleApprovalFlow.tslibs/wallet/src/web3-react/updater.tsapps/cowswap-frontend/src/modules/ordersTable/utils/checkPermitNonceAndAmount.ts
📚 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/hooks/useApproveAndSwap.tsapps/cowswap-frontend/src/modules/twap/services/cancelTwapOrderTxs.tsapps/cowswap-frontend/src/common/hooks/useSwapAndBridgeOverview.tsapps/cowswap-frontend/src/common/hooks/useSwapResultsContext.ts
📚 Learning: 2025-08-08T13:56:18.009Z
Learnt from: shoom3301
Repo: cowprotocol/cowswap PR: 6125
File: libs/tokens/src/updaters/TokensListsUpdater/index.tsx:29-31
Timestamp: 2025-08-08T13:56:18.009Z
Learning: In libs/tokens/src/updaters/TokensListsUpdater/index.tsx, the project’s current Jotai version requires using `unstable_getOnInit` (not `getOnInit`) in atomWithStorage options; keep `{ unstable_getOnInit: true }` until Jotai is upgraded.
Applied to files:
apps/cowswap-frontend/src/common/updaters/orders/UnfillableOrdersUpdater/hooks/useUpdateIsUnfillableFlag.tsapps/cowswap-frontend/src/common/updaters/orders/OrdersFromApiUpdater.tsapps/cowswap-frontend/src/common/updaters/orders/SpotPricesUpdater.tslibs/wallet/src/web3-react/updater.tsapps/cowswap-frontend/src/common/updaters/orders/UnfillableOrdersUpdater/updaters/UnfillableOrderUpdater.tslibs/permit-utils/src/lib/getTokenPermitInfo.tsapps/cowswap-frontend/src/common/updaters/WidgetTokensUpdater.tsxapps/cowswap-frontend/src/common/updaters/orders/PendingOrdersUpdater.tsapps/cowswap-frontend/src/modules/twap/updaters/TwapOrdersUpdater.tsx
📚 Learning: 2025-08-08T13:55:17.528Z
Learnt from: shoom3301
Repo: cowprotocol/cowswap PR: 6125
File: libs/tokens/src/state/tokens/allTokensAtom.ts:78-78
Timestamp: 2025-08-08T13:55:17.528Z
Learning: In libs/tokens/src/state/tokens/allTokensAtom.ts (TypeScript/Jotai), the team prefers to wait for token lists to initialize (listsStatesListAtom non-empty) before returning tokens. No fallback to favorites/user-added/native tokens should be used when listsStatesList is empty.
Applied to files:
apps/cowswap-frontend/src/common/updaters/orders/UnfillableOrdersUpdater/hooks/useUpdateIsUnfillableFlag.tsapps/cowswap-frontend/src/common/updaters/orders/OrdersFromApiUpdater.tsapps/cowswap-frontend/src/common/hooks/useCancelOrder/useSendOnChainCancellation.tsapps/cowswap-frontend/src/common/hooks/useCancelOrder/useGetOnChainCancellation.tsapps/cowswap-frontend/src/common/updaters/orders/SpotPricesUpdater.tsapps/cowswap-frontend/src/common/updaters/orders/UnfillableOrdersUpdater/updaters/UnfillableOrderUpdater.tsapps/cowswap-frontend/src/common/containers/CoWAmmBanner/types.tsapps/cowswap-frontend/src/common/updaters/orders/PendingOrdersUpdater.ts
📚 Learning: 2025-06-16T16:01:46.729Z
Learnt from: alfetopito
Repo: cowprotocol/cowswap PR: 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.
Applied to files:
apps/cowswap-frontend/src/common/hooks/useNavigate.tseslint.config.js
📚 Learning: 2025-06-16T16:01:46.729Z
Learnt from: alfetopito
Repo: cowprotocol/cowswap PR: 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.
Applied to files:
apps/cowswap-frontend/src/common/hooks/useNavigate.ts
📚 Learning: 2025-09-24T14:52:37.874Z
Learnt from: cowdan
Repo: cowprotocol/cowswap PR: 6285
File: apps/cowswap-frontend/src/modules/swap/updaters/index.tsx:49-53
Timestamp: 2025-09-24T14:52:37.874Z
Learning: UnfillableOrdersUpdater instances can be safely mounted in multiple locations (SwapUpdaters and OrdersTableWidget) because they use window visibility checks to prevent simultaneous network calls, ensuring only one instance makes API requests at a time.
Applied to files:
apps/cowswap-frontend/src/common/updaters/orders/UnfillableOrdersUpdater/updaters/UnfillableOrderUpdater.ts
📚 Learning: 2025-12-03T19:23:35.789Z
Learnt from: kernelwhisperer
Repo: cowprotocol/cowswap PR: 6610
File: apps/cowswap-frontend/project.json:38-39
Timestamp: 2025-12-03T19:23:35.789Z
Learning: In the cowswap-frontend project configuration (apps/cowswap-frontend/project.json), the Vite dev server option `"host": true` is set to support Windows + WSL development environments, where binding to all network interfaces is required for the Windows host to access the dev server running in WSL.
Applied to files:
apps/cowswap-frontend/vite.config.mts
📚 Learning: 2025-08-12T06:33:19.348Z
Learnt from: shoom3301
Repo: cowprotocol/cowswap PR: 6137
File: libs/tokens/src/state/tokens/allTokensAtom.ts:34-65
Timestamp: 2025-08-12T06:33:19.348Z
Learning: In libs/tokens/src/utils/parseTokenInfo.ts, the parseTokenInfo() function returns a new instance of TokenInfo using object spread syntax ({ ...token, ... }), making it safe to mutate properties like lpTokenProvider on the returned object without side effects.
Applied to files:
apps/cowswap-frontend/src/common/containers/CoWAmmBanner/types.tslibs/permit-utils/src/lib/getTokenPermitInfo.ts
📚 Learning: 2025-08-12T06:33:19.348Z
Learnt from: shoom3301
Repo: cowprotocol/cowswap PR: 6137
File: libs/tokens/src/state/tokens/allTokensAtom.ts:34-65
Timestamp: 2025-08-12T06:33:19.348Z
Learning: In libs/tokens/src/state/tokens/allTokensAtom.ts, the parseTokenInfo() function returns a new instance of TokenInfo each time, making it safe to mutate properties like lpTokenProvider on the returned object without side effects.
Applied to files:
apps/cowswap-frontend/src/common/containers/CoWAmmBanner/types.tslibs/permit-utils/src/lib/getTokenPermitInfo.ts
🧬 Code graph analysis (12)
apps/cowswap-frontend/src/modules/onchainTransactions/updaters/FinalizeTxUpdater/services/checkSafeTransaction.ts (1)
apps/cowswap-frontend/src/modules/onchainTransactions/updaters/FinalizeTxUpdater/services/handleTransactionReplacement.ts (1)
handleTransactionReplacement(8-18)
apps/cowswap-frontend/src/modules/orderProgressBar/pure/RenderProgressTopSection.tsx (3)
apps/cowswap-frontend/src/modules/orderProgressBar/pure/ProgressSkeleton.tsx (1)
ProgressSkeleton(71-90)apps/cowswap-frontend/src/modules/orderProgressBar/pure/styled.ts (1)
ProgressTopSection(75-92)apps/cowswap-frontend/src/modules/orderProgressBar/pure/ProgressTopSection/index.tsx (1)
ProgressTopSection(32-95)
libs/wallet/src/web3-react/updater.ts (1)
libs/core/src/gnosisSafe/index.ts (1)
getSafeInfo(81-90)
apps/cowswap-frontend/src/modules/ordersTable/utils/checkPermitNonceAndAmount.ts (2)
libs/permit-utils/src/index.ts (1)
getPermitUtilsInstance(5-5)libs/permit-utils/src/lib/getPermitUtilsInstance.ts (1)
getPermitUtilsInstance(17-51)
apps/cowswap-frontend/src/legacy/hooks/useGetSafeTxInfo.ts (3)
libs/wallet/src/api/hooks.ts (1)
useWalletInfo(24-26)libs/core/src/gnosisSafe/index.ts (2)
getSafeInfo(81-90)getSafeTransaction(71-79)apps/explorer/src/utils/miscellaneous.ts (1)
retry(120-138)
tools/formatChunkFileName.ts (1)
apps/cowswap-frontend/public/emergency.js (1)
key(22-22)
libs/permit-utils/src/lib/checkIsCallDataAValidPermit.ts (2)
libs/permit-utils/src/imports/1inchPermitUtils.ts (1)
Eip2612PermitUtils(10-10)libs/permit-utils/src/types.ts (1)
PermitInfo(8-13)
apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/FinishedStep.tsx (1)
apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/styled.ts (1)
TransactionStatus(262-291)
apps/cowswap-frontend/vite.config.mts (1)
tools/formatChunkFileName.ts (1)
formatChunkFileName(3-20)
apps/cowswap-frontend/src/common/hooks/useSafeApiKit.ts (3)
libs/wallet/src/api/hooks.ts (1)
useWalletInfo(24-26)libs/wallet/src/web3-react/hooks/useWalletMetadata.ts (1)
useIsSafeWallet(133-135)libs/core/src/gnosisSafe/index.ts (1)
createSafeApiKitInstance(39-48)
libs/permit-utils/src/lib/getTokenPermitInfo.ts (2)
libs/permit-utils/src/index.ts (1)
getPermitUtilsInstance(5-5)libs/permit-utils/src/lib/getPermitUtilsInstance.ts (1)
getPermitUtilsInstance(17-51)
apps/cowswap-frontend/src/lib/i18n.tsx (2)
jest.setup.ts (1)
i18n(51-51)libs/common-const/src/locales.ts (1)
DEFAULT_LOCALE(10-10)
🪛 Biome (2.1.2)
apps/cowswap-frontend/src/modules/orderProgressBar/pure/LottieContainer.tsx
[error] 65-65: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/FinishedStep.tsx
[error] 39-39: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/NoOrdersContent.tsx
[error] 107-107: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
⏰ 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). (2)
- GitHub Check: Cypress
- GitHub Check: Setup
apps/cowswap-frontend/src/modules/orderProgressBar/pure/LottieContainer.tsx
Show resolved
Hide resolved
apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/FinishedStep.tsx
Outdated
Show resolved
Hide resolved
apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/NoOrdersContent.tsx
Outdated
Show resolved
Hide resolved
apps/cowswap-frontend/src/modules/twap/services/fetchTwapOrdersFromSafe.ts
Show resolved
Hide resolved
| threshold, | ||
| owners, | ||
| nonce, | ||
| nonce: String(nonce), |
There was a problem hiding this comment.
Verify nonce type consistency across both code paths.
Line 95 explicitly converts nonce to a string when using the Safe Apps SDK, but line 114 assigns nonce directly from the getSafeInfo API without conversion. This inconsistency could cause type mismatches in the GnosisSafeInfo object if the two sources return different types.
Given that the PR migrates to new @safe-global/** versions with type changes, ensure both paths produce the same nonce type. Consider applying String() conversion on line 114 as well, or verify that both APIs return string values.
🔎 Proposed fix to ensure consistent nonce type handling
const _safeInfo = await getSafeInfo(chainId, account)
const { address, threshold, owners, nonce } = _safeInfo
setSafeInfo((prevSafeInfo) => ({
...prevSafeInfo,
chainId,
address,
threshold,
owners,
- nonce,
+ nonce: String(nonce),
isReadOnly: false,
}))Also applies to: 114-114
🤖 Prompt for AI Agents
In libs/wallet/src/web3-react/updater.ts around lines 95 and 114, the nonce is
explicitly converted to a string at line 95 but assigned raw at line 114,
causing inconsistent types in the GnosisSafeInfo object; make the nonce type
consistent by converting the value at line 114 to a string (e.g., wrap with
String(...) or otherwise coerce to string) so both code paths produce the same
nonce type and update any related typings if necessary.
There was a problem hiding this comment.
@crutch12, understood! Thank you for clarifying. If the Safe Apps SDK returns a number while the getSafeInfo API returns a string in the new version, then the different handling makes sense. Appreciate the confirmation! 👍
🧠 Learnings used
Learnt from: alfetopito
Repo: cowprotocol/cowswap PR: 5992
File: libs/wallet/src/web3-react/utils/switchChain.ts:36-38
Timestamp: 2025-08-05T14:27:05.023Z
Learning: In libs/wallet/src/web3-react/utils/switchChain.ts, the team prefers using Record<SupportedChainId, string | null> over Partial<Record<SupportedChainId, string>> for WALLET_RPC_SUGGESTION to enforce that all supported chain IDs have explicit values set, even if some might be null. This ensures compile-time completeness checking.
Learnt from: shoom3301
Repo: cowprotocol/cowswap PR: 6125
File: libs/tokens/src/updaters/TokensListsUpdater/index.tsx:29-31
Timestamp: 2025-08-08T13:56:18.009Z
Learning: In libs/tokens/src/updaters/TokensListsUpdater/index.tsx, the project’s current Jotai version requires using `unstable_getOnInit` (not `getOnInit`) in atomWithStorage options; keep `{ unstable_getOnInit: true }` until Jotai is upgraded.
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.
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.
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (2)
apps/cowswap-frontend/src/modules/orderProgressBar/pure/LottieContainer.tsx (1)
65-73: JSX comment syntax fixed; consider a loading skeleton.The invalid JSX comment from the previous review has been corrected. The Suspense wrapper is properly implemented with a valid
fallback={null}.Since the TODO already flags this, consider whether a loading skeleton or placeholder would improve UX by preventing a brief flash when the Lottie animation loads. For a progress indicator,
nullmay be acceptable if the load is fast enough.apps/cowswap-frontend/vite.config.mts (1)
182-190: Manual chunks configuration looks good.The chunking strategy for large dependencies (
@sentry,@uniswap,@ethersproject, etc.) is sensible for code splitting. Thebn.jschunk complements thededupesetting above.One minor note: the comment on line 187 states web3 "was used by @1inch" - if @1inch no longer uses web3 after this refactor, consider verifying this chunk is still needed.
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (7)
CONTRIBUTING.mdapps/cowswap-frontend/src/modules/orderProgressBar/pure/LottieContainer.tsxapps/cowswap-frontend/src/modules/orderProgressBar/pure/TopSections.tsxapps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/FinishedStep.tsxapps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/NoOrdersContent.tsxapps/cowswap-frontend/vite.config.mtspackage.json
🚧 Files skipped from review as they are similar to previous changes (3)
- apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/FinishedStep.tsx
- apps/cowswap-frontend/src/modules/orderProgressBar/pure/TopSections.tsx
- apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/NoOrdersContent.tsx
🧰 Additional context used
🧠 Learnings (4)
📓 Common learnings
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.
📚 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:
CONTRIBUTING.md
📚 Learning: 2025-12-03T19:23:35.789Z
Learnt from: kernelwhisperer
Repo: cowprotocol/cowswap PR: 6610
File: apps/cowswap-frontend/project.json:38-39
Timestamp: 2025-12-03T19:23:35.789Z
Learning: In the cowswap-frontend project configuration (apps/cowswap-frontend/project.json), the Vite dev server option `"host": true` is set to support Windows + WSL development environments, where binding to all network interfaces is required for the Windows host to access the dev server running in WSL.
Applied to files:
apps/cowswap-frontend/vite.config.mts
📚 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/LottieContainer.tsx
🧬 Code graph analysis (1)
apps/cowswap-frontend/vite.config.mts (1)
tools/formatChunkFileName.ts (1)
formatChunkFileName(3-20)
🪛 LanguageTool
CONTRIBUTING.md
[grammar] ~168-~168: Use a hyphen to join words.
Context: ...ially if it's cjs module (cjs is non tree-shakable) - [Bundlephobia](https://...
(QB_NEW_EN_HYPHEN)
⏰ 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). (2)
- GitHub Check: Cypress
- GitHub Check: Setup
🔇 Additional comments (13)
CONTRIBUTING.md (3)
155-156: Verify build analysis output paths are implemented.The documentation references
build/cowswap/analyse.htmlandbuild/cowswap/bundle-stats.html, but the PR objectives list "Add rollup-plugin-bundle-stats" as a TODO. Ensure these output paths are available and that theyarn analyze-buildcommand is properly configured before merging, or update the guidance to reflect the current state of implementation.
151-171: Bundle optimization section is well-structured and actionable.The new section provides clear, practical guidance aligned with the PR's bundle optimization objectives. The problem-detection steps, dynamic import rules, and dependency-size considerations are directly applicable to contributors and enforce key optimization patterns introduced in this PR.
173-194: Section numbering correctly updated after restructuring.All downstream sections (Testing, Interaction Contract, Development Communication) are properly renumbered to account for the new Bundle optimization section.
apps/cowswap-frontend/src/modules/orderProgressBar/pure/LottieContainer.tsx (1)
1-1: LGTM! Lazy loading correctly implemented.The lazy import of
lottie-reactfollows the standard React.lazy pattern and aligns with the PR's bundle optimization goals. This will defer loading the Lottie library until the component is actually rendered.Also applies to: 5-5
apps/cowswap-frontend/vite.config.mts (6)
5-5: LGTM on imports and type annotations.The new imports for
bundleStats,formatChunkFileName, and type-only imports forTemplateTypeandPluginOptionare correctly structured. The ESLint directive update to@typescript-eslint/no-restricted-importsaligns with the broader rule transition in this PR.Also applies to: 17-17, 21-23
37-37: Good addition of explicit type annotation.Typing
pluginsasPluginOption[]improves type safety and aligns with the casts used when pushing analyzer plugins.
75-87: Verify intended behavior withopen: trueandemitFile: true.With
emitFile: true, the analysis HTML will be written to the build output directory. Note thatopen: true(line 79) combined withemitFile: truemay still attempt to open the file in a browser after the build. If the intent is only to emit the file without opening it, consider settingopen: false.
138-143: Good ESM prioritization for dependency optimization.Setting
mainFields: ['exports', 'module', 'main']ensures esbuild prefers ESM builds when available, improving tree-shaking effectiveness. The comment appropriately documents the rationale.
149-154: Effective deduplication and ESM resolution strategy.The
bn.jsdeduplication with the v5/v4 compatibility note is a good optimization. Theconditionsarray correctly prioritizes ESM resolution. These settings work well together with theoptimizeDeps.mainFieldsconfiguration above.
169-181: Improved chunk naming for better debuggability.The
formatChunkFileNamehelper with descriptive prefixes (page-,connectors-,lottie-react-, etc.) makes it much easier to identify chunk origins in build output and DevTools. The fallback tostatic/[name]-[hash].jsensures all chunks are handled.package.json (3)
46-46: LGTM: Improved visualization format.The treemap template generally provides better visibility for bundle size analysis compared to sunburst.
93-93: LGTM: New dependency addition.The @ethereumjs/util package is properly versioned with a caret for receiving updates.
338-338: No action needed. Therollup-plugin-bundle-statspackage is properly integrated into the Vite build configuration (imported and added to the plugins array in vite.config.mts).Likely an incorrect or invalid review comment.
| "@safe-global/api-kit": "^4.0.1", | ||
| "@safe-global/safe-apps-sdk": "^9.1.0", | ||
| "@safe-global/safe-core-sdk-types": "^2.2.0", | ||
| "@safe-global/safe-ethers-lib": "^1.9.4", | ||
| "@safe-global/types-kit": "^3.0.0", |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Find all usages of Safe Global types and nonce handling
rg -n --type=ts --type=tsx 'SafeMultisigTransactionResponse|SafeApiKit|nonce' --max-count=50Repository: cowprotocol/cowswap
Length of output: 90
🏁 Script executed:
# Check for test files related to Safe operations
fd -e 'test.ts' -e 'test.tsx' -e 'spec.ts' -e 'spec.tsx' | xargs rg -l 'Safe|nonce' 2>/dev/null | head -20Repository: cowprotocol/cowswap
Length of output: 623
🏁 Script executed:
# Look for the actual Safe Global package versions and their changelog implications
rg -n '@safe-global' package.jsonRepository: cowprotocol/cowswap
Length of output: 352
🏁 Script executed:
# Search for SafeApiKit usage patterns in the codebase
rg -n 'SafeApiKit' --type=ts --type=tsx -B2 -A5Repository: cowprotocol/cowswap
Length of output: 90
🏁 Script executed:
# Search for SafeApiKit and SafeMultisigTransactionResponse usage
rg -n 'SafeApiKit|SafeMultisigTransactionResponse' --type=ts --max-count=30Repository: cowprotocol/cowswap
Length of output: 5579
🏁 Script executed:
# Search for nonce handling patterns
rg -n 'nonce' --type=ts apps/cowswap-frontend/ | head -30Repository: cowprotocol/cowswap
Length of output: 4892
🏁 Script executed:
# Find where Safe Global types are imported
rg -n 'from.*@safe-global' --type=ts --max-count=30Repository: cowprotocol/cowswap
Length of output: 3094
🏁 Script executed:
# Check the actual Safe approval-related code mentioned in learnings
cat apps/cowswap-frontend/src/modules/erc20Approve/containers/TradeApproveModal/useTradeApproveCallback.tsRepository: cowprotocol/cowswap
Length of output: 5470
🏁 Script executed:
# Check test coverage in Safe-related test files
cat apps/explorer/src/test/hooks/useSafeState.hooks.test.tsxRepository: cowprotocol/cowswap
Length of output: 2040
🏁 Script executed:
# Check useTradeApproveCallback test file to see what's tested
head -100 apps/cowswap-frontend/src/modules/erc20Approve/containers/TradeApproveModal/useTradeApproveCallback.test.tsRepository: cowprotocol/cowswap
Length of output: 4213
🏁 Script executed:
# Search for TODO or FIXME related to testing in Safe modules
rg -n 'TODO|FIXME' --type=ts apps/cowswap-frontend/src/modules/zeroApproval/ apps/cowswap-frontend/src/modules/twap/ libs/core/src/gnosisSafe/Repository: cowprotocol/cowswap
Length of output: 7331
🏁 Script executed:
# Verify SafeApiKit instantiation and version compatibility
cat libs/core/src/gnosisSafe/index.tsRepository: cowprotocol/cowswap
Length of output: 3556
🏁 Script executed:
# Check Safe-related test implementations
cat apps/cowswap-frontend/src/modules/erc20Approve/containers/TradeApproveModal/useTradeApproveCallback.test.ts | tail -200Repository: cowprotocol/cowswap
Length of output: 7133
🏁 Script executed:
# Look for Safe scenario tests
rg -n 'Safe|nonce|safeApiKit' apps/cowswap-frontend/src/modules/erc20Approve/containers/TradeApproveModal/useTradeApproveCallback.test.tsRepository: cowprotocol/cowswap
Length of output: 82
🏁 Script executed:
# Check if there are integration tests for Safe flows
fd -path '*/test*' -o -path '*/spec*' | xargs rg -l 'SafeApiKit\|SafeMultisigTransactionResponse' 2>/dev/nullRepository: cowprotocol/cowswap
Length of output: 233
🏁 Script executed:
# Search for actual Safe wallet test coverage in approval flows
rg -n 'Safe|safeMultisig|safeApiKit' --type=ts apps/cowswap-frontend/src/modules/erc20Approve/ apps/cowswap-frontend/src/modules/zeroApproval/ -i | grep -i testRepository: cowprotocol/cowswap
Length of output: 45
🏁 Script executed:
# Check if there are dedicated Safe approval integration tests
find apps/cowswap-frontend -name '*.test.ts' -o -name '*.test.tsx' | xargs rg -l 'SafeMultisigTransactionResponse|useApproveCurrency|useZeroApprove' 2>/dev/nullRepository: cowprotocol/cowswap
Length of output: 257
🏁 Script executed:
# Look at the actual useApproveCurrency hook which handles Safe responses
cat apps/cowswap-frontend/src/modules/erc20Approve/hooks/useApproveCurrency.tsRepository: cowprotocol/cowswap
Length of output: 1198
🏁 Script executed:
# Check for useZeroApprove tests
find apps/cowswap-frontend -name '*useZeroApprove*test*'Repository: cowprotocol/cowswap
Length of output: 45
🏁 Script executed:
# Check for useApproveCurrency tests
find apps/cowswap-frontend -name '*useApproveCurrency*test*'Repository: cowprotocol/cowswap
Length of output: 45
🏁 Script executed:
# Look at useZeroApprove implementation to understand its Safe interaction
cat apps/cowswap-frontend/src/modules/zeroApproval/hooks/useZeroApprove.tsRepository: cowprotocol/cowswap
Length of output: 2568
Add test coverage for Safe wallet approval flows.
The Safe Global package updates are properly integrated with BigInt chainId conversion already in place (libs/core/src/gnosisSafe/index.ts) and defensive nonce type handling established. However, the approval flows lack dedicated test coverage for Safe-specific scenarios:
useZeroApprovedirectly callsSafeApiKit.getTransaction()and polls for transaction execution withwaitForSafeTransactionExecution()— needs tests for this polling behavior and Safe wallet detection conditionsuseApproveCurrencycombines trade approval with zero approval but has no tests- Current test coverage focuses on standard transactions; Safe wallet scenarios (isSafeWallet + isWalletConnect conditional logic) are untested
Add tests for Safe transaction execution flows, Safe wallet routing, and transaction polling edge cases before merging.
🤖 Prompt for AI Agents
In package.json around lines 119 to 121, tests for Safe wallet approval flows
are missing; add unit/integration tests that mock SafeApiKit.getTransaction and
waitForSafeTransactionExecution to cover polling behavior, simulate Safe wallet
detection (isSafeWallet true/false and isWalletConnect branches), and assert
useZeroApprove and useApproveCurrency handle zero-approval flow, combined
approval flow, retries, and timeout/edge cases; update test
scripts/devDependencies as needed to run these tests and ensure mocks restore
state between cases.
| "@walletconnect/ethereum-provider": "^2.23.0", | ||
| "@walletconnect/types": "^2.23.0", | ||
| "@walletconnect/utils": "^2.23.0", |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
@walletconnect/ethereum-provider latest version npm
💡 Result:
Latest version: 2.21.8 (as of December 28, 2025). Install: npm i @walletconnect/ethereum-provider. [1]
Sources:
[1] npm package page for @walletconnect/ethereum-provider. [2] jsDelivr package info.
🌐 Web query:
WalletConnect v2 deprecated Reown migration 2024
💡 Result:
Short summary — yes: WalletConnect Inc. rebranded to Reown and deprecated the WalletConnect-branded SDK packages (including v2 SDK packages under the WalletConnect org). A limited‑support window ran Sept 17, 2024 → Feb 17, 2025; full end‑of‑life (no updates/support) began Feb 18, 2025. Reown published replacement packages (AppKit / WalletKit, Reown org repos) and migration guides for Web, React Native, Swift, Flutter, etc. Action: identify which WalletConnect packages you use, follow the corresponding Reown migration guide (replace @walletconnect/* / Web3Modal / Web3Wallet with @reown/* equivalents), and complete migration to Reown packages. [1][2][3]
Sources:
- Reown — Deprecated WalletConnect SDKs (deprecation schedule + affected packages). [1]
- WalletConnect / Reown migration docs — Upgrade from Web3Wallet to Reown WalletKit (migration steps). [2]
- Reown announcement / rebrand blog. [3]
🌐 Web query:
@walletconnect/types @walletconnect/utils latest version
💡 Result:
As of today (December 28, 2025):
- @walletconnect/types — 2.21.8. Install: npm i @walletconnect/types. [1]
- @walletconnect/utils — 2.21.8. Install: npm i @walletconnect/utils. [2]
Sources: npm package pages. [1] https://www.npmjs.com/package/%40walletconnect/types [2] https://www.npmjs.com/package/%40walletconnect/utils
Migrate from deprecated WalletConnect v2 packages to Reown equivalents—this is critical.
The @WalletConnect v2 packages (@walletconnect/ethereum-provider, @walletconnect/types, @walletconnect/utils) reached end-of-life on February 18, 2025 and no longer receive updates or support. WalletConnect Inc. rebranded to Reown and deprecated the entire v2 SDK. Migration to @reown/* packages (AppKit/WalletKit) is required. Additionally, version 2.23.0 does not appear to exist on npm; the latest v2 release is 2.21.8—verify the actual resolved versions and migrate to Reown's replacement packages per their official migration guides.
| }, | ||
| "dependencies": { | ||
| "@1inch/permit-signed-approvals-utils": "^1.4.10", | ||
| "@1inch/permit-signed-approvals-utils": "1.5.1", |
| "@rjsf/core": "^4.2.2", | ||
| "@safe-global/api-kit": "^1.3.0", | ||
| "@safe-global/protocol-kit": "^1.2.0", | ||
| "@safe-global/api-kit": "^4.0.1", |
There was a problem hiding this comment.
@elena-zh please test integration with Safe (web/walletConnect)
| )} | ||
| </motion.div> | ||
| </AnimatePresence> | ||
| <Suspense fallback={<ProgressSkeleton />}> |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
@crutch12 thank you! |
|
@shoom3301 I fixed eslint error @kernelwhisperer wdyt about PR to fix all eslint warnings? It would be really useful, so we could run |
I agree, but I don't think we are there yet, we have 2-3 PRs (e.g. token selector, affiliate, fast-refresh fix) that are touching a lot of files and it will become a pain to fix the conflicts for them... 😞 |
apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/FinishedStep.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/FinishedStep.tsx (1)
39-47: Lazy loading with Suspense implemented correctly.The Suspense boundary is properly placed and the Lottie component will load on demand. The
fallback={null}means no visual indicator appears while the Lottie library loads, which might cause a brief delay before the checkmark animation appears. The TODO comment indicates you're aware of this consideration.💡 Optional: Consider a minimal fallback
If you'd like to avoid any visual gap, you could use a simple placeholder:
- {/* TODO: what fallback should be used here? */} - <Suspense fallback={null}> + <Suspense fallback={<div style={{ width: '36px', height: '36px' }} />}>Alternatively, a static SVG checkmark or spinner could provide immediate feedback. However, given the likely fast load time of Lottie, the current
nullfallback may be perfectly acceptable.
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/cowswap-frontend/src/modules/orderProgressBar/pure/StepComponent.tsxapps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/FinishedStep.tsx
🧰 Additional context used
🧠 Learnings (4)
📓 Common learnings
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.
📚 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/steps/FinishedStep.tsxapps/cowswap-frontend/src/modules/orderProgressBar/pure/StepComponent.tsx
📚 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/orderProgressBar/pure/steps/FinishedStep.tsx
📚 Learning: 2025-09-11T08:25:51.460Z
Learnt from: alfetopito
Repo: cowprotocol/cowswap PR: 6234
File: libs/tokens/src/index.ts:1-4
Timestamp: 2025-09-11T08:25:51.460Z
Learning: In the cowprotocol/cowswap project, there is currently no SSR (Server-Side Rendering) support, so localStorage access at module import time does not cause SSR-related issues.
Applied to files:
apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/FinishedStep.tsx
🧬 Code graph analysis (1)
apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/FinishedStep.tsx (1)
apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/styled.ts (1)
TransactionStatus(262-291)
⏰ 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). (2)
- GitHub Check: Cypress
- GitHub Check: Setup
🔇 Additional comments (5)
apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/FinishedStep.tsx (2)
1-1: LGTM: Imports for lazy loading added correctly.The addition of
Suspenseandlazyto the React imports is necessary for the dynamic import pattern introduced in this file.
34-35: LGTM: Lazy loading for Lottie implemented correctly.The dynamic import of
lottie-reactusingReact.lazyis correctly implemented and aligns with the PR's bundle optimization objectives.apps/cowswap-frontend/src/modules/orderProgressBar/pure/StepComponent.tsx (3)
1-1: LGTM: Imports for lazy loading added correctly.The addition of
Suspenseandlazyto the React imports supports the dynamic import pattern implemented below.
10-11: LGTM: Consistent lazy loading pattern.The dynamic import of
lottie-reactfollows the same pattern as other files in this PR and correctly implements lazy loading for bundle optimization.
42-50: Lazy loading with Suspense correctly implemented.The Suspense boundary correctly wraps the Lottie component in the CANCELLING branch. The
fallback={null}means there's no placeholder during load, which is acknowledged by your TODO comment. Given that the Lottie library should load quickly (especially after first use), the current implementation is acceptable.
| const PROVIDER_UTILS_CACHE = new Map<string, Eip2612PermitUtils>() | ||
|
|
||
| export function getPermitUtilsInstance( | ||
| export async function getPermitUtilsInstance( |
There was a problem hiding this comment.
it's a breaking change, @cowprotocol/permit-utils should be published with new major version
limitofzero
left a comment
limitofzero
left a comment
There was a problem hiding this comment.
Great job! Thank you!
I've tested it for swap/limit orders, works as expected
|
Hello @crutch12 , any thoughts on this warning? ➜ yarn
yarn install v1.22.22
[1/4] Resolving packages...
success Already up-to-date.
$ yarn run patch-package
yarn run v1.22.22
$ /home/daniel/repos/cow/cowswap/node_modules/.bin/patch-package
patch-package 8.0.1
Applying patches...
@1inch/permit-signed-approvals-utils@1.4.10 ✔
@ethersproject/providers@5.7.2 ✔
Warning: patch-package detected a patch file version mismatch
Don't worry! This is probably fine. The patch was still applied
successfully. Here's the deets:
Patch file created for
@1inch/permit-signed-approvals-utils@1.4.10
applied to
@1inch/permit-signed-approvals-utils@1.5.1
At path
node_modules/@1inch/permit-signed-approvals-utils
This warning is just to give you a heads-up. There is a small chance of
breakage even though the patch was applied successfully. Make sure the package
still behaves like you expect (you wrote tests, right?) and then run
patch-package @1inch/permit-signed-approvals-utils
to update the version in the patch file name and make this warning go away.
---
patch-package finished with 1 warning(s).
Done in 0.18s.
$ huskyAlso, vercel seems to always fail on the first try, if I hit redeploy it works: ✗ Build failed in 24.81s
NX [commonjs--resolver] Missing "./legacy" specifier in "@noble/hashes" packageHave you encountered this before? |
kernelwhisperer
left a comment
kernelwhisperer
left a comment
There was a problem hiding this comment.
LGTM, I did a simple Safe tx that went through!
|
@kernelwhisperer thx 1st warning - idk, I will check it later 2nd error with |
Yes, exactly, same locally, I had to remove node_modules first. I think we can live with that though.
It's just a warning but please check it out, maybe we can also upgrade 
|
4 participants
Summary
Bundle size optimization for swap.cow.fi (see grant proposal)
Results:
devmode should start fasterInitial loading size before/after
Before
After
Done
@safe-global/api-kit- dynamic import +@safe-global/**new versions (esm support)@1inch/permit-signed-approvals-utils- dynamic import + partial re-export (for better tree-shaking) + new version (esm support) + hardcode used constants@use-gesture/coreand@safe-global/safe-apps-sdk)bn.jslottie-react- dynamic importframer-motion- dynamic importOther
index-[hash].js->metamask-[hash].js)Todo
Caveats
@safe-global/**new versions have slightly different types (e.g. fornonce), there may be problems I couldn't catch (e.g. on the sdk side)To Test
rimraf node_modulesbeforeyarn installusageBackground
Optional: Give background information for changes you've made, that might be difficult to explain via comments
Summary by CodeRabbit
Performance Improvements
Bug Fixes
Chores
✏️ Tip: You can customize this high-level summary in your review settings.