diff --git a/.gitignore b/.gitignore index 2f358e3a8d2..d4dde30e716 100644 --- a/.gitignore +++ b/.gitignore @@ -50,8 +50,6 @@ yalc.lock # vercel .vercel -analyse.html - # NX .nx diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index ab5fc022288..cfc6ea84545 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -148,7 +148,29 @@ Additional Guidelines: --- -## 8. Testing +## 8. Bundle optimization + +Problems detection: + +1. run `yarn analyze-build` +2. check `build/cowswap/analyse.html` and `build/cowswap/bundle-stats.html` + +Optimization rules: + +1. Dynamic imports + +- Every huge (> 100kb) dependency should be loaded via dynamic `import()` +- Dynamic import breaks tree-shaking, so re-export only used variables when possible (see imports/1inchPermitUtils) +- Add eslint `@typescript-eslint/no-restricted-imports` rules for dynamically imported modules + +2. Dependency size + +- Always check if huge dependency has a new version, especially if it's `cjs` module (`cjs` is non tree-shakable) +- [Bundlephobia](https://bundlephobia.com/) shows if module is tree-shakeable and it's actual size + +--- + +## 9. Testing - Unit tests / integration tests required when applicable - Jest unit tests for logic @@ -159,7 +181,7 @@ Additional Guidelines: --- -## 9. Interaction Contract +## 10. Interaction Contract 1. Ask clarifying questions when requirements are ambiguous 2. Output only ready-to-paste code, using repo-root-relative paths @@ -169,7 +191,7 @@ Additional Guidelines: --- -## 10. Development Communication +## 11. Development Communication - Use descriptive commit messages, inline comments, and rich PR descriptions (expected behaviour & QA scope) - Plan work up-front to keep each PR scoped to a single feature/fix diff --git a/apps/cowswap-frontend/src/common/containers/CoWAmmBanner/index.tsx b/apps/cowswap-frontend/src/common/containers/CoWAmmBanner/index.tsx index 0a73dd5e488..28b38599ad5 100644 --- a/apps/cowswap-frontend/src/common/containers/CoWAmmBanner/index.tsx +++ b/apps/cowswap-frontend/src/common/containers/CoWAmmBanner/index.tsx @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import { useCallback } from 'react' import { useCowAnalytics } from '@cowprotocol/analytics' diff --git a/apps/cowswap-frontend/src/common/containers/CoWAmmBanner/types.ts b/apps/cowswap-frontend/src/common/containers/CoWAmmBanner/types.ts index 505c2f41193..d3b24d570e5 100644 --- a/apps/cowswap-frontend/src/common/containers/CoWAmmBanner/types.ts +++ b/apps/cowswap-frontend/src/common/containers/CoWAmmBanner/types.ts @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import { LpToken } from '@cowprotocol/common-const' import { LpTokenProvider } from '@cowprotocol/types' import { BigNumber } from '@ethersproject/bignumber' diff --git a/apps/cowswap-frontend/src/common/containers/OrderHooksDetails/HookItem/index.tsx b/apps/cowswap-frontend/src/common/containers/OrderHooksDetails/HookItem/index.tsx index d39ed3cc81d..f4c202c8449 100644 --- a/apps/cowswap-frontend/src/common/containers/OrderHooksDetails/HookItem/index.tsx +++ b/apps/cowswap-frontend/src/common/containers/OrderHooksDetails/HookItem/index.tsx @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import { ReactNode, useState } from 'react' import { CowHookDetails, HookToDappMatch } from '@cowprotocol/hook-dapp-lib' diff --git a/apps/cowswap-frontend/src/common/containers/OrderHooksDetails/index.tsx b/apps/cowswap-frontend/src/common/containers/OrderHooksDetails/index.tsx index 22a22069fb0..a13fcfe825a 100644 --- a/apps/cowswap-frontend/src/common/containers/OrderHooksDetails/index.tsx +++ b/apps/cowswap-frontend/src/common/containers/OrderHooksDetails/index.tsx @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import { ReactElement, useEffect, useMemo, useState } from 'react' import { cowAppDataLatestScheme } from '@cowprotocol/cow-sdk' diff --git a/apps/cowswap-frontend/src/common/hooks/useCancelOrder/onChainCancellation.ts b/apps/cowswap-frontend/src/common/hooks/useCancelOrder/onChainCancellation.ts index 133cab6c1e4..755995673ec 100644 --- a/apps/cowswap-frontend/src/common/hooks/useCancelOrder/onChainCancellation.ts +++ b/apps/cowswap-frontend/src/common/hooks/useCancelOrder/onChainCancellation.ts @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import { GPv2Settlement, CoWSwapEthFlow } from '@cowprotocol/abis' import { calculateGasMargin } from '@cowprotocol/common-utils' import { BigNumber } from '@ethersproject/bignumber' diff --git a/apps/cowswap-frontend/src/common/hooks/useCancelOrder/useGetOnChainCancellation.ts b/apps/cowswap-frontend/src/common/hooks/useCancelOrder/useGetOnChainCancellation.ts index 91708c02b28..d46ad9928a2 100644 --- a/apps/cowswap-frontend/src/common/hooks/useCancelOrder/useGetOnChainCancellation.ts +++ b/apps/cowswap-frontend/src/common/hooks/useCancelOrder/useGetOnChainCancellation.ts @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import { useCallback } from 'react' import { getIsNativeToken } from '@cowprotocol/common-utils' diff --git a/apps/cowswap-frontend/src/common/hooks/useCancelOrder/useSendOnChainCancellation.ts b/apps/cowswap-frontend/src/common/hooks/useCancelOrder/useSendOnChainCancellation.ts index 0af6a4afdd8..a5e76786d34 100644 --- a/apps/cowswap-frontend/src/common/hooks/useCancelOrder/useSendOnChainCancellation.ts +++ b/apps/cowswap-frontend/src/common/hooks/useCancelOrder/useSendOnChainCancellation.ts @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import { useCallback } from 'react' import { getIsNativeToken } from '@cowprotocol/common-utils' diff --git a/apps/cowswap-frontend/src/common/hooks/useConvertUsdToTokenValue.ts b/apps/cowswap-frontend/src/common/hooks/useConvertUsdToTokenValue.ts index 1d36a7f3237..38db1ae0af4 100644 --- a/apps/cowswap-frontend/src/common/hooks/useConvertUsdToTokenValue.ts +++ b/apps/cowswap-frontend/src/common/hooks/useConvertUsdToTokenValue.ts @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import { USDC } from '@cowprotocol/common-const' import { getWrappedToken, tryParseCurrencyAmount } from '@cowprotocol/common-utils' import { SupportedChainId } from '@cowprotocol/cow-sdk' diff --git a/apps/cowswap-frontend/src/common/hooks/useEnhancedActivityDerivedState.ts b/apps/cowswap-frontend/src/common/hooks/useEnhancedActivityDerivedState.ts index f989606efa8..b851dab61cf 100644 --- a/apps/cowswap-frontend/src/common/hooks/useEnhancedActivityDerivedState.ts +++ b/apps/cowswap-frontend/src/common/hooks/useEnhancedActivityDerivedState.ts @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import { useMemo } from 'react' import { SupportedChainId } from '@cowprotocol/cow-sdk' diff --git a/apps/cowswap-frontend/src/common/hooks/useGetMarketDimension.ts b/apps/cowswap-frontend/src/common/hooks/useGetMarketDimension.ts index b91da3b7e62..a01f158653e 100644 --- a/apps/cowswap-frontend/src/common/hooks/useGetMarketDimension.ts +++ b/apps/cowswap-frontend/src/common/hooks/useGetMarketDimension.ts @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import { useMemo } from 'react' import { useTradeTypeInfo } from 'modules/trade' diff --git a/apps/cowswap-frontend/src/common/hooks/useGetSurplusFiatValue.ts b/apps/cowswap-frontend/src/common/hooks/useGetSurplusFiatValue.ts index eda0565b0ba..5ed5c08a4d6 100644 --- a/apps/cowswap-frontend/src/common/hooks/useGetSurplusFiatValue.ts +++ b/apps/cowswap-frontend/src/common/hooks/useGetSurplusFiatValue.ts @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import { useMemo } from 'react' import { MIN_FIAT_SURPLUS_VALUE, MIN_FIAT_SURPLUS_VALUE_MODAL, MIN_SURPLUS_UNITS } from '@cowprotocol/common-const' diff --git a/apps/cowswap-frontend/src/common/hooks/useNavigate.ts b/apps/cowswap-frontend/src/common/hooks/useNavigate.ts index bbf3ff43240..7027a10998d 100644 --- a/apps/cowswap-frontend/src/common/hooks/useNavigate.ts +++ b/apps/cowswap-frontend/src/common/hooks/useNavigate.ts @@ -2,7 +2,7 @@ import { useCallback } from 'react' import { isInjectedWidget } from '@cowprotocol/common-utils' -// eslint-disable-next-line no-restricted-imports +// eslint-disable-next-line @typescript-eslint/no-restricted-imports import { NavigateOptions, To, useNavigate as useNavigateOriginal } from 'react-router' export type NavigateFunction = (to: To, options?: NavigateOptions) => void | Promise diff --git a/apps/cowswap-frontend/src/common/hooks/useOnSelectNetwork.tsx b/apps/cowswap-frontend/src/common/hooks/useOnSelectNetwork.tsx index 68db37ca544..411d360832e 100644 --- a/apps/cowswap-frontend/src/common/hooks/useOnSelectNetwork.tsx +++ b/apps/cowswap-frontend/src/common/hooks/useOnSelectNetwork.tsx @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import { useCallback } from 'react' import { getChainInfo } from '@cowprotocol/common-const' diff --git a/apps/cowswap-frontend/src/common/hooks/useRateInfoParams.ts b/apps/cowswap-frontend/src/common/hooks/useRateInfoParams.ts index 36645f32076..067e69a428d 100644 --- a/apps/cowswap-frontend/src/common/hooks/useRateInfoParams.ts +++ b/apps/cowswap-frontend/src/common/hooks/useRateInfoParams.ts @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import { useCallback } from 'react' import { tryParseCurrencyAmount } from '@cowprotocol/common-utils' diff --git a/apps/cowswap-frontend/src/common/hooks/useSafeApiKit.ts b/apps/cowswap-frontend/src/common/hooks/useSafeApiKit.ts index 14580761113..7c6a8ddefaa 100644 --- a/apps/cowswap-frontend/src/common/hooks/useSafeApiKit.ts +++ b/apps/cowswap-frontend/src/common/hooks/useSafeApiKit.ts @@ -2,22 +2,22 @@ import { useEffect, useState } from 'react' import { createSafeApiKitInstance } from '@cowprotocol/core' import { useIsSafeWallet, useWalletInfo } from '@cowprotocol/wallet' -import { useWalletProvider } from '@cowprotocol/wallet-provider' -import SafeApiKit from '@safe-global/api-kit' +import type SafeApiKit from '@safe-global/api-kit' export function useSafeApiKit(): SafeApiKit | null { const [safeApiClient, setSafeApiClient] = useState(null) const { chainId } = useWalletInfo() - const provider = useWalletProvider() const isSafeWallet = useIsSafeWallet() useEffect(() => { - if (provider && chainId && isSafeWallet) { - setSafeApiClient(createSafeApiKitInstance(chainId, provider)) - } else { - setSafeApiClient(null) - } - }, [chainId, isSafeWallet, provider]) + ;(async () => { + if (chainId && isSafeWallet) { + setSafeApiClient(await createSafeApiKitInstance(chainId)) + } else { + setSafeApiClient(null) + } + })() + }, [chainId, isSafeWallet]) return safeApiClient } diff --git a/apps/cowswap-frontend/src/common/hooks/useSwapAndBridgeContext.ts b/apps/cowswap-frontend/src/common/hooks/useSwapAndBridgeContext.ts index b9dd78c4df2..e9f083b7084 100644 --- a/apps/cowswap-frontend/src/common/hooks/useSwapAndBridgeContext.ts +++ b/apps/cowswap-frontend/src/common/hooks/useSwapAndBridgeContext.ts @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import { useMemo } from 'react' import { getChainInfo, TokenWithLogo } from '@cowprotocol/common-const' diff --git a/apps/cowswap-frontend/src/common/hooks/useSwapAndBridgeOverview.ts b/apps/cowswap-frontend/src/common/hooks/useSwapAndBridgeOverview.ts index d77cb064f50..0ebf5ac4879 100644 --- a/apps/cowswap-frontend/src/common/hooks/useSwapAndBridgeOverview.ts +++ b/apps/cowswap-frontend/src/common/hooks/useSwapAndBridgeOverview.ts @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import { useMemo } from 'react' import { getChainInfo, TokenWithLogo } from '@cowprotocol/common-const' diff --git a/apps/cowswap-frontend/src/common/hooks/useSwapResultsContext.ts b/apps/cowswap-frontend/src/common/hooks/useSwapResultsContext.ts index dc024130d77..a75e0a8dc42 100644 --- a/apps/cowswap-frontend/src/common/hooks/useSwapResultsContext.ts +++ b/apps/cowswap-frontend/src/common/hooks/useSwapResultsContext.ts @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import { useMemo } from 'react' import { TokenWithLogo } from '@cowprotocol/common-const' diff --git a/apps/cowswap-frontend/src/common/pure/CoWAmmBannerContent/index.tsx b/apps/cowswap-frontend/src/common/pure/CoWAmmBannerContent/index.tsx index 40cf462c75c..aa42fbd28c9 100644 --- a/apps/cowswap-frontend/src/common/pure/CoWAmmBannerContent/index.tsx +++ b/apps/cowswap-frontend/src/common/pure/CoWAmmBannerContent/index.tsx @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import React, { useCallback, useMemo, useRef } from 'react' import { useMediaQuery } from '@cowprotocol/common-hooks' diff --git a/apps/cowswap-frontend/src/common/pure/ConfirmationPendingContent/ConfirmationPendingContentShell.tsx b/apps/cowswap-frontend/src/common/pure/ConfirmationPendingContent/ConfirmationPendingContentShell.tsx index a1265bab29b..7ae033ce503 100644 --- a/apps/cowswap-frontend/src/common/pure/ConfirmationPendingContent/ConfirmationPendingContentShell.tsx +++ b/apps/cowswap-frontend/src/common/pure/ConfirmationPendingContent/ConfirmationPendingContentShell.tsx @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import React, { ReactNode } from 'react' import { Command } from '@cowprotocol/types' diff --git a/apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/CurrencyInputPanel.tsx b/apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/CurrencyInputPanel.tsx index 415d305db13..75c810e71d0 100644 --- a/apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/CurrencyInputPanel.tsx +++ b/apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/CurrencyInputPanel.tsx @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import React, { ReactNode, useCallback, useEffect, useMemo, useState } from 'react' import { NATIVE_CURRENCIES } from '@cowprotocol/common-const' diff --git a/apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/types.ts b/apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/types.ts index ba02700c998..5d1a9898a5c 100644 --- a/apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/types.ts +++ b/apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/types.ts @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import { ReactNode } from 'react' import { Currency, CurrencyAmount } from '@uniswap/sdk-core' diff --git a/apps/cowswap-frontend/src/common/pure/ExecutionPrice/hooks/useExecutionPriceFiat.ts b/apps/cowswap-frontend/src/common/pure/ExecutionPrice/hooks/useExecutionPriceFiat.ts index fa8aa03edd8..db244838e15 100644 --- a/apps/cowswap-frontend/src/common/pure/ExecutionPrice/hooks/useExecutionPriceFiat.ts +++ b/apps/cowswap-frontend/src/common/pure/ExecutionPrice/hooks/useExecutionPriceFiat.ts @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import { rawToTokenAmount } from '@cowprotocol/common-utils' import { Currency, CurrencyAmount, Price } from '@uniswap/sdk-core' diff --git a/apps/cowswap-frontend/src/common/pure/ReceiveAmount/index.tsx b/apps/cowswap-frontend/src/common/pure/ReceiveAmount/index.tsx index 7eb9de37d01..19862c42aee 100644 --- a/apps/cowswap-frontend/src/common/pure/ReceiveAmount/index.tsx +++ b/apps/cowswap-frontend/src/common/pure/ReceiveAmount/index.tsx @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import { ReactNode } from 'react' import { TokenAmount } from '@cowprotocol/ui' diff --git a/apps/cowswap-frontend/src/common/pure/ReceiveAmountInfo/index.tsx b/apps/cowswap-frontend/src/common/pure/ReceiveAmountInfo/index.tsx index ce17b4695d4..71fc8a6c332 100644 --- a/apps/cowswap-frontend/src/common/pure/ReceiveAmountInfo/index.tsx +++ b/apps/cowswap-frontend/src/common/pure/ReceiveAmountInfo/index.tsx @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import React, { ReactNode } from 'react' import { isFractionFalsy } from '@cowprotocol/common-utils' diff --git a/apps/cowswap-frontend/src/common/types.ts b/apps/cowswap-frontend/src/common/types.ts index d9895ef6d85..bb6c67ab7a2 100644 --- a/apps/cowswap-frontend/src/common/types.ts +++ b/apps/cowswap-frontend/src/common/types.ts @@ -24,7 +24,7 @@ export type SafeTransactionParams = { submissionDate: string executionDate: string | null isExecuted: boolean - nonce: number + nonce: string confirmationsRequired: number confirmations: number safeTxHash: string diff --git a/apps/cowswap-frontend/src/common/updaters/SentryUpdater.ts b/apps/cowswap-frontend/src/common/updaters/SentryUpdater.ts index 3b34c8f680f..792d3d42543 100644 --- a/apps/cowswap-frontend/src/common/updaters/SentryUpdater.ts +++ b/apps/cowswap-frontend/src/common/updaters/SentryUpdater.ts @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import { useEffect } from 'react' import { useIsWindowVisible } from '@cowprotocol/common-hooks' diff --git a/apps/cowswap-frontend/src/common/updaters/WidgetTokensUpdater.tsx b/apps/cowswap-frontend/src/common/updaters/WidgetTokensUpdater.tsx index 95a2b9525ed..7857bb9210d 100644 --- a/apps/cowswap-frontend/src/common/updaters/WidgetTokensUpdater.tsx +++ b/apps/cowswap-frontend/src/common/updaters/WidgetTokensUpdater.tsx @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import { ReactNode } from 'react' import { useCowAnalytics } from '@cowprotocol/analytics' diff --git a/apps/cowswap-frontend/src/common/updaters/orders/CancelledOrdersUpdater.ts b/apps/cowswap-frontend/src/common/updaters/orders/CancelledOrdersUpdater.ts index a9ae05383ae..d57ddda39e9 100644 --- a/apps/cowswap-frontend/src/common/updaters/orders/CancelledOrdersUpdater.ts +++ b/apps/cowswap-frontend/src/common/updaters/orders/CancelledOrdersUpdater.ts @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import { useCallback, useEffect, useRef } from 'react' import { CANCELLED_ORDERS_PENDING_TIME } from '@cowprotocol/common-const' diff --git a/apps/cowswap-frontend/src/common/updaters/orders/OrdersFromApiUpdater.ts b/apps/cowswap-frontend/src/common/updaters/orders/OrdersFromApiUpdater.ts index 0f14ac60df5..a128a4338a0 100644 --- a/apps/cowswap-frontend/src/common/updaters/orders/OrdersFromApiUpdater.ts +++ b/apps/cowswap-frontend/src/common/updaters/orders/OrdersFromApiUpdater.ts @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import { useSetAtom } from 'jotai' import { useCallback, useEffect, useMemo, useRef } from 'react' diff --git a/apps/cowswap-frontend/src/common/updaters/orders/PendingOrdersUpdater.ts b/apps/cowswap-frontend/src/common/updaters/orders/PendingOrdersUpdater.ts index c40a601234a..d8b6ed50b60 100644 --- a/apps/cowswap-frontend/src/common/updaters/orders/PendingOrdersUpdater.ts +++ b/apps/cowswap-frontend/src/common/updaters/orders/PendingOrdersUpdater.ts @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import { useSetAtom } from 'jotai' import { useCallback, useEffect, useMemo, useRef } from 'react' @@ -87,7 +87,11 @@ async function _updatePresignGnosisSafeTx( * If an order has a nonce lower than the current Safe nonce, it means that the proposed transaction was replaced by another one. * In this case, we should cancel the order. */ - const isOrderTxReplaced = !!(safeNonce && safeTransaction.nonce < safeNonce && !safeTransaction.isExecuted) + const isOrderTxReplaced = !!( + safeNonce && + BigInt(safeTransaction.nonce) < BigInt(safeNonce) && + !safeTransaction.isExecuted + ) if (CREATING_STATES.includes(order.status) && isOrderTxReplaced) { cancelOrdersBatch({ diff --git a/apps/cowswap-frontend/src/common/updaters/orders/SpotPricesUpdater.ts b/apps/cowswap-frontend/src/common/updaters/orders/SpotPricesUpdater.ts index 7fdba8752a1..c9e8bde6f70 100644 --- a/apps/cowswap-frontend/src/common/updaters/orders/SpotPricesUpdater.ts +++ b/apps/cowswap-frontend/src/common/updaters/orders/SpotPricesUpdater.ts @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import { useSetAtom } from 'jotai' import { useEffect, useMemo } from 'react' diff --git a/apps/cowswap-frontend/src/common/updaters/orders/UnfillableOrdersUpdater/hooks/useUpdateIsUnfillableFlag.ts b/apps/cowswap-frontend/src/common/updaters/orders/UnfillableOrdersUpdater/hooks/useUpdateIsUnfillableFlag.ts index 4f534301583..34e18028a2c 100644 --- a/apps/cowswap-frontend/src/common/updaters/orders/UnfillableOrdersUpdater/hooks/useUpdateIsUnfillableFlag.ts +++ b/apps/cowswap-frontend/src/common/updaters/orders/UnfillableOrdersUpdater/hooks/useUpdateIsUnfillableFlag.ts @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import { useSetAtom } from 'jotai' import { useCallback } from 'react' diff --git a/apps/cowswap-frontend/src/common/updaters/orders/UnfillableOrdersUpdater/updaters/UnfillableOrderUpdater.ts b/apps/cowswap-frontend/src/common/updaters/orders/UnfillableOrdersUpdater/updaters/UnfillableOrderUpdater.ts index 8c21eece741..36495878bed 100644 --- a/apps/cowswap-frontend/src/common/updaters/orders/UnfillableOrdersUpdater/updaters/UnfillableOrderUpdater.ts +++ b/apps/cowswap-frontend/src/common/updaters/orders/UnfillableOrdersUpdater/updaters/UnfillableOrderUpdater.ts @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import { useAtom, useSetAtom } from 'jotai' import { useRef } from 'react' diff --git a/apps/cowswap-frontend/src/common/utils/doesOrderHavePermit.ts b/apps/cowswap-frontend/src/common/utils/doesOrderHavePermit.ts index 9c5ec6de780..895e8534903 100644 --- a/apps/cowswap-frontend/src/common/utils/doesOrderHavePermit.ts +++ b/apps/cowswap-frontend/src/common/utils/doesOrderHavePermit.ts @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import +/* eslint-disable @typescript-eslint/no-restricted-imports */ // TODO: Don't use 'modules' import import { doesHookHavePermit } from '@cowprotocol/hook-dapp-lib' import { getAppDataHooks } from 'modules/appData' diff --git a/apps/cowswap-frontend/src/legacy/hooks/useGetSafeTxInfo.ts b/apps/cowswap-frontend/src/legacy/hooks/useGetSafeTxInfo.ts index ee97f82fcd0..44c53e7b497 100644 --- a/apps/cowswap-frontend/src/legacy/hooks/useGetSafeTxInfo.ts +++ b/apps/cowswap-frontend/src/legacy/hooks/useGetSafeTxInfo.ts @@ -3,10 +3,8 @@ import { useCallback } from 'react' import { retry, RetryOptions } from '@cowprotocol/common-utils' import { getSafeTransaction } from '@cowprotocol/core' import { useWalletInfo } from '@cowprotocol/wallet' -import { useWalletProvider } from '@cowprotocol/wallet-provider' -import type { SafeMultisigTransactionResponse } from '@safe-global/safe-core-sdk-types' +import type { SafeMultisigTransactionResponse } from '@safe-global/types-kit' -import { t } from '@lingui/core/macro' import { RetryResult } from 'types' const DEFAULT_RETRY_OPTIONS: RetryOptions = { n: 3, minWait: 1000, maxWait: 3000 } @@ -14,20 +12,15 @@ const DEFAULT_RETRY_OPTIONS: RetryOptions = { n: 3, minWait: 1000, maxWait: 3000 export type GetSafeTxInfo = (hash: string) => RetryResult export function useGetSafeTxInfo(): GetSafeTxInfo { - const provider = useWalletProvider() const { chainId } = useWalletInfo() const getSafeInfo = useCallback( (hash) => { return retry(() => { - if (!provider) { - throw new Error(t`There is no provider to get Gnosis safe info`) - } - - return getSafeTransaction(chainId, hash, provider) + return getSafeTransaction(chainId, hash) }, DEFAULT_RETRY_OPTIONS) }, - [chainId, provider], + [chainId], ) return getSafeInfo diff --git a/apps/cowswap-frontend/src/legacy/state/enhancedTransactions/actions.ts b/apps/cowswap-frontend/src/legacy/state/enhancedTransactions/actions.ts index b14b10d5231..9ded31c8c82 100644 --- a/apps/cowswap-frontend/src/legacy/state/enhancedTransactions/actions.ts +++ b/apps/cowswap-frontend/src/legacy/state/enhancedTransactions/actions.ts @@ -1,4 +1,4 @@ -import type { SafeMultisigTransactionResponse } from '@safe-global/safe-core-sdk-types' +import type { SafeMultisigTransactionResponse } from '@safe-global/types-kit' import { createAction } from '@reduxjs/toolkit' diff --git a/apps/cowswap-frontend/src/legacy/state/enhancedTransactions/reducer.ts b/apps/cowswap-frontend/src/legacy/state/enhancedTransactions/reducer.ts index 1cdabb12112..ef2d8f4c85a 100644 --- a/apps/cowswap-frontend/src/legacy/state/enhancedTransactions/reducer.ts +++ b/apps/cowswap-frontend/src/legacy/state/enhancedTransactions/reducer.ts @@ -1,5 +1,5 @@ import { OrderClass } from '@cowprotocol/cow-sdk' -import type { SafeMultisigTransactionResponse } from '@safe-global/safe-core-sdk-types' +import type { SafeMultisigTransactionResponse } from '@safe-global/types-kit' import { createReducer } from '@reduxjs/toolkit' @@ -22,7 +22,7 @@ export enum HashType { export interface EnhancedTransactionDetails { hash: string // The hash of the transaction, normally Ethereum one, but not necessarily hashType: HashType // Transaction hash: could be Ethereum tx, or for multisigs could be some kind of hash identifying the order (i.e. Gnosis Safe) - transactionHash?: string // Transaction hash. For EOA this field is immediately available, however, other wallets go through a process of offchain signing before the transactionHash is available + transactionHash: string | null // Transaction hash. For EOA this field is immediately available, however, other wallets go through a process of offchain signing before the transactionHash is available nonce: number // Params using for polling handling @@ -122,7 +122,7 @@ export default createReducer(initialState, (builder) => const txs = transactions[chainId] ?? {} txs[hash] = { hash, - transactionHash: hashType === HashType.ETHEREUM_TX ? hash : undefined, + transactionHash: hashType === HashType.ETHEREUM_TX ? hash : null, nonce, hashType, addedTime: now(), diff --git a/apps/cowswap-frontend/src/legacy/state/orders/actions.ts b/apps/cowswap-frontend/src/legacy/state/orders/actions.ts index e1a0a787a4a..d87966a8798 100644 --- a/apps/cowswap-frontend/src/legacy/state/orders/actions.ts +++ b/apps/cowswap-frontend/src/legacy/state/orders/actions.ts @@ -1,6 +1,6 @@ import { EnrichedOrder, OrderClass, OrderCreation, SupportedChainId as ChainId, UID } from '@cowprotocol/cow-sdk' import { BigNumberish } from '@ethersproject/bignumber' -import type { SafeMultisigTransactionResponse } from '@safe-global/safe-core-sdk-types' +import type { SafeMultisigTransactionResponse } from '@safe-global/types-kit' import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core' import { createAction } from '@reduxjs/toolkit' diff --git a/apps/cowswap-frontend/src/lib/i18n.tsx b/apps/cowswap-frontend/src/lib/i18n.tsx index 20667e7af85..9a63a252b33 100644 --- a/apps/cowswap-frontend/src/lib/i18n.tsx +++ b/apps/cowswap-frontend/src/lib/i18n.tsx @@ -50,10 +50,15 @@ export function Provider({ locale, onActivate, children }: ProviderProps): React // This renders the translation _keys_, not the translation _messages_, which is only acceptable while loading the DEFAULT_LOCALE, // as [there are no "default" messages](https://github.com/lingui/js-lingui/issues/388#issuecomment-497779030). // See https://github.com/lingui/js-lingui/issues/1194#issuecomment-1068488619. + // TODO: i18n.locale is '', not undefined if (i18n.locale === undefined && locale === DEFAULT_LOCALE) { i18n.load(DEFAULT_LOCALE, {}) i18n.activate(DEFAULT_LOCALE) } + /** + * TODO: if i18n is not activated (i18n.locale === ''), then I18nProvider renders null on initial render + * we should detect locale and load messages BEFORE initial render + */ return {children} } diff --git a/apps/cowswap-frontend/src/modules/erc20Approve/containers/TradeApproveButton/TradeApproveButton.tsx b/apps/cowswap-frontend/src/modules/erc20Approve/containers/TradeApproveButton/TradeApproveButton.tsx index 6503625911a..43b08ab4878 100644 --- a/apps/cowswap-frontend/src/modules/erc20Approve/containers/TradeApproveButton/TradeApproveButton.tsx +++ b/apps/cowswap-frontend/src/modules/erc20Approve/containers/TradeApproveButton/TradeApproveButton.tsx @@ -26,7 +26,7 @@ export interface TradeApproveButtonProps { children?: ReactNode isDisabled?: boolean enablePartialApprove?: boolean - onApproveConfirm?: (txHash?: string) => void + onApproveConfirm?: (txHash: string | null) => void label?: string buttonSize?: ButtonSize useModals?: boolean diff --git a/apps/cowswap-frontend/src/modules/erc20Approve/hooks/useApproveAndSwap.ts b/apps/cowswap-frontend/src/modules/erc20Approve/hooks/useApproveAndSwap.ts index 8ff99d09b69..93e2c441c01 100644 --- a/apps/cowswap-frontend/src/modules/erc20Approve/hooks/useApproveAndSwap.ts +++ b/apps/cowswap-frontend/src/modules/erc20Approve/hooks/useApproveAndSwap.ts @@ -17,7 +17,7 @@ import { getIsTradeApproveResult } from '../utils/getIsTradeApproveResult' export interface ApproveAndSwapProps { amountToApprove: CurrencyAmount minAmountToSignForSwap?: CurrencyAmount - onApproveConfirm?: (transactionHash?: string) => void + onApproveConfirm?: (transactionHash: string | null) => void ignorePermit?: boolean useModals?: boolean } @@ -41,7 +41,7 @@ export function useApproveAndSwap({ if (isPermitSupported && onApproveConfirm) { const isPermitSigned = await generatePermitToTrade() if (isPermitSigned) { - onApproveConfirm() + onApproveConfirm(null) } return true diff --git a/apps/cowswap-frontend/src/modules/erc20Approve/hooks/useApproveCurrency.ts b/apps/cowswap-frontend/src/modules/erc20Approve/hooks/useApproveCurrency.ts index 9eb0427d611..aad7d763800 100644 --- a/apps/cowswap-frontend/src/modules/erc20Approve/hooks/useApproveCurrency.ts +++ b/apps/cowswap-frontend/src/modules/erc20Approve/hooks/useApproveCurrency.ts @@ -1,7 +1,7 @@ import { useCallback } from 'react' import { Nullish } from '@cowprotocol/types' -import { SafeMultisigTransactionResponse } from '@safe-global/safe-core-sdk-types' +import type { SafeMultisigTransactionResponse } from '@safe-global/types-kit' import { Currency, CurrencyAmount } from '@uniswap/sdk-core' import { GenerecTradeApproveResult, useTradeApproveCallback } from 'modules/erc20Approve' diff --git a/apps/cowswap-frontend/src/modules/erc20Approve/utils/getIsTradeApproveResult.ts b/apps/cowswap-frontend/src/modules/erc20Approve/utils/getIsTradeApproveResult.ts index f14d7ad6616..16604299418 100644 --- a/apps/cowswap-frontend/src/modules/erc20Approve/utils/getIsTradeApproveResult.ts +++ b/apps/cowswap-frontend/src/modules/erc20Approve/utils/getIsTradeApproveResult.ts @@ -1,5 +1,5 @@ import { Nullish } from '@cowprotocol/types' -import { SafeMultisigTransactionResponse } from '@safe-global/safe-core-sdk-types' +import type { SafeMultisigTransactionResponse } from '@safe-global/types-kit' import { GenerecTradeApproveResult } from '../containers' diff --git a/apps/cowswap-frontend/src/modules/limitOrders/services/safeBundleFlow/index.ts b/apps/cowswap-frontend/src/modules/limitOrders/services/safeBundleFlow/index.ts index 533d0875546..31b26aba9f7 100644 --- a/apps/cowswap-frontend/src/modules/limitOrders/services/safeBundleFlow/index.ts +++ b/apps/cowswap-frontend/src/modules/limitOrders/services/safeBundleFlow/index.ts @@ -1,7 +1,7 @@ import { SigningScheme } from '@cowprotocol/cow-sdk' import { Command, UiOrderType } from '@cowprotocol/types' import { MaxUint256 } from '@ethersproject/constants' -import type { MetaTransactionData } from '@safe-global/safe-core-sdk-types' +import type { MetaTransactionData } from '@safe-global/types-kit' import { Percent } from '@uniswap/sdk-core' import { tradingSdk } from 'tradingSdk/tradingSdk' diff --git a/apps/cowswap-frontend/src/modules/onchainTransactions/updaters/FinalizeTxUpdater/services/checkSafeTransaction.ts b/apps/cowswap-frontend/src/modules/onchainTransactions/updaters/FinalizeTxUpdater/services/checkSafeTransaction.ts index 50147850162..de4a8a2cb7e 100644 --- a/apps/cowswap-frontend/src/modules/onchainTransactions/updaters/FinalizeTxUpdater/services/checkSafeTransaction.ts +++ b/apps/cowswap-frontend/src/modules/onchainTransactions/updaters/FinalizeTxUpdater/services/checkSafeTransaction.ts @@ -23,18 +23,18 @@ export function checkSafeTransaction(transaction: EnhancedTransactionDetails, pa const { isExecuted, transactionHash } = safeTransaction const safeNonce = safeInfo?.nonce - if (typeof safeNonce === 'number' && safeNonce > safeTransaction.nonce && !isExecuted) { + if (typeof safeNonce === 'string' && BigInt(safeNonce) > BigInt(safeTransaction.nonce) && !isExecuted) { handleTransactionReplacement(transaction, params) return } // If the safe transaction is executed, but we don't have a tx receipt yet - if (isExecuted && !receipt) { + if (isExecuted && transactionHash && !receipt) { // Get the ethereum tx receipt console.log( '[FinalizeTxUpdater] Safe transaction is executed, but we have not fetched the receipt yet. Tx: ', - transactionHash + transactionHash, ) // Get the transaction receipt const { promise: receiptPromise } = getReceipt(transactionHash) diff --git a/apps/cowswap-frontend/src/modules/orderProgressBar/pure/LottieContainer.tsx b/apps/cowswap-frontend/src/modules/orderProgressBar/pure/LottieContainer.tsx index 2e5b52e801a..cefe8cc6d67 100644 --- a/apps/cowswap-frontend/src/modules/orderProgressBar/pure/LottieContainer.tsx +++ b/apps/cowswap-frontend/src/modules/orderProgressBar/pure/LottieContainer.tsx @@ -1,8 +1,9 @@ -import { ReactNode, useRef, useEffect } from 'react' +import { ReactNode, useRef, useEffect, lazy, Suspense } from 'react' -import Lottie from 'lottie-react' import styled from 'styled-components/macro' +const Lottie = lazy(() => import('lottie-react')) + const LottieWrapper = styled.div` --size: 100%; width: var(--size); @@ -61,7 +62,15 @@ export function FullSizeLottie({ animationData, loop = true, autoplay = true }: return ( - + {/* TODO: what fallback should be used here? */} + + + ) } diff --git a/apps/cowswap-frontend/src/modules/orderProgressBar/pure/RenderProgressTopSection.tsx b/apps/cowswap-frontend/src/modules/orderProgressBar/pure/RenderProgressTopSection.tsx index 4142db8b040..929a2e3ce05 100644 --- a/apps/cowswap-frontend/src/modules/orderProgressBar/pure/RenderProgressTopSection.tsx +++ b/apps/cowswap-frontend/src/modules/orderProgressBar/pure/RenderProgressTopSection.tsx @@ -1,9 +1,8 @@ -import { ReactNode, useMemo } from 'react' +import { ReactNode, useMemo, lazy, Suspense } from 'react' import { getRandomInt } from '@cowprotocol/common-utils' import { useLingui } from '@lingui/react/macro' -import { AnimatePresence, motion } from 'framer-motion' import { FinishedStepContentSection } from './FinishedStepContentSection' import { ProgressSkeleton } from './ProgressSkeleton' @@ -27,6 +26,9 @@ interface ProgressContentProps { shouldShowSurplus: boolean } +const AnimatePresence = lazy(() => import('framer-motion').then((r) => ({ default: r.AnimatePresence }))) +const MotionDiv = lazy(() => import('framer-motion').then((r) => ({ default: r.motion.div }))) + function ProgressContent({ isLayoutReady, stepName, @@ -42,34 +44,36 @@ function ProgressContent({ } return ( - - - {stepName && ( - - )} - - + }> + + + {stepName && ( + + )} + + + ) } diff --git a/apps/cowswap-frontend/src/modules/orderProgressBar/pure/StepComponent.tsx b/apps/cowswap-frontend/src/modules/orderProgressBar/pure/StepComponent.tsx index 6b51a900dfa..b88f313cb83 100644 --- a/apps/cowswap-frontend/src/modules/orderProgressBar/pure/StepComponent.tsx +++ b/apps/cowswap-frontend/src/modules/orderProgressBar/pure/StepComponent.tsx @@ -1,14 +1,14 @@ -import React from 'react' +import React, { Suspense, lazy } from 'react' import LOTTIE_RED_CROSS from '@cowprotocol/assets/lottie/red-cross.json' -import Lottie from 'lottie-react' - import * as styledEl from './styled' import { StepStatus } from '../constants' import { Description } from '../sharedStyled' +const Lottie = lazy(() => import('lottie-react')) + // TODO: Add proper return type annotation // eslint-disable-next-line @typescript-eslint/explicit-function-return-type export function StepComponent({ @@ -39,12 +39,15 @@ export function StepComponent({ $isCancelling={isCancelling} > {status === StepStatus.CANCELLING ? ( - + // TODO: what fallback should be used here? + + + ) : ( <> {index + 1} diff --git a/apps/cowswap-frontend/src/modules/orderProgressBar/pure/TopSections.tsx b/apps/cowswap-frontend/src/modules/orderProgressBar/pure/TopSections.tsx index 34072c49282..330d026d3be 100644 --- a/apps/cowswap-frontend/src/modules/orderProgressBar/pure/TopSections.tsx +++ b/apps/cowswap-frontend/src/modules/orderProgressBar/pure/TopSections.tsx @@ -4,13 +4,12 @@ import STEP_IMAGE_CANCELLED from '@cowprotocol/assets/cow-swap/progressbar-step- import STEP_IMAGE_EXPIRED from '@cowprotocol/assets/cow-swap/progressbar-step-expired.svg' import STEP_IMAGE_SOLVING from '@cowprotocol/assets/cow-swap/progressbar-step-solving.svg' import STEP_IMAGE_UNFILLABLE from '@cowprotocol/assets/cow-swap/progressbar-step-unfillable.svg' -import STEP_LOTTIE_EXECUTING from '@cowprotocol/assets/lottie/progressbar-step-executing.json' -import STEP_LOTTIE_NEXTBATCH from '@cowprotocol/assets/lottie/progressbar-step-nextbatch.json' import LOTTIE_TIME_EXPIRED_DARK from '@cowprotocol/assets/lottie/time-expired-dark.json' import { ProductLogo, ProductVariant, UI } from '@cowprotocol/ui' import { t } from '@lingui/core/macro' import SVG from 'react-inlinesvg' +import useSWR from 'swr' import { NoSurplus, ShowSurplus } from './BenefitComponents' import { PROCESS_IMAGE_WRAPPER_BG_COLOR } from './constants' @@ -51,6 +50,13 @@ export function UnfillableTopSection(): ReactNode { // delayed, submissionFailed, solved export function DelayedSolvedSubmissionFailedTopSection(): ReactNode { + const { data: STEP_LOTTIE_NEXTBATCH } = useSWR( + ['progressbar-step-nextbatch'], + () => import('@cowprotocol/assets/lottie/progressbar-step-nextbatch.json'), + ) + + if (!STEP_LOTTIE_NEXTBATCH) return null + return } @@ -84,6 +90,13 @@ export function SolvingTopSection({ countdown }: SolvingTopSectionProps): ReactN } export function ExecutingTopSection({ stepName }: BaseTopSectionProps): ReactNode { + const { data: STEP_LOTTIE_EXECUTING } = useSWR( + ['progressbar-step-executing'], + () => import('@cowprotocol/assets/lottie/progressbar-step-executing.json'), + ) + + if (!STEP_LOTTIE_EXECUTING) return null + return ( diff --git a/apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/FinishedStep.tsx b/apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/FinishedStep.tsx index 0f7e1d554f8..804fe9856c6 100644 --- a/apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/FinishedStep.tsx +++ b/apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/FinishedStep.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode, useCallback, useMemo, useState } from 'react' +import React, { ReactNode, useCallback, useMemo, useState, Suspense, lazy } from 'react' import ICON_SOCIAL_X from '@cowprotocol/assets/images/icon-social-x.svg' import LOTTIE_GREEN_CHECKMARK_DARK from '@cowprotocol/assets/lottie/green-checkmark-dark.json' @@ -12,7 +12,6 @@ import { Currency, CurrencyAmount } from '@uniswap/sdk-core' import { i18n } from '@lingui/core' import { Trans, useLingui } from '@lingui/react/macro' -import Lottie from 'lottie-react' import { PiCaretDown, PiCaretUp, PiTrophyFill } from 'react-icons/pi' import SVG from 'react-inlinesvg' @@ -32,15 +31,20 @@ import { getSurplusText, getTwitterShareUrl, getTwitterShareUrlForBenefit } from import { useWithConfetti } from '../../hooks/useWithConfetti' import { OrderProgressBarStepName } from '../../types' +const Lottie = lazy(() => import('lottie-react')) + function TransactionStatus({ isDarkMode }: { isDarkMode: boolean }): ReactNode { return ( - + {/* TODO: what fallback should be used here? */} + + + Transaction completed! ) diff --git a/apps/cowswap-frontend/src/modules/ordersTable/hooks/useDoesOrderHaveValidPermit.test.ts b/apps/cowswap-frontend/src/modules/ordersTable/hooks/useDoesOrderHaveValidPermit.test.ts index 93ebd5a05e4..ee6fb9c971f 100644 --- a/apps/cowswap-frontend/src/modules/ordersTable/hooks/useDoesOrderHaveValidPermit.test.ts +++ b/apps/cowswap-frontend/src/modules/ordersTable/hooks/useDoesOrderHaveValidPermit.test.ts @@ -1,11 +1,11 @@ import { Erc20__factory } from '@cowprotocol/abis' import { COW_PROTOCOL_VAULT_RELAYER_ADDRESS, SupportedChainId } from '@cowprotocol/cow-sdk' +import { oneInchPermitUtilsConsts } from '@cowprotocol/permit-utils' import { useWalletInfo } from '@cowprotocol/wallet' import { useWalletProvider } from '@cowprotocol/wallet-provider' import { BigNumber as EthersBigNumber } from '@ethersproject/bignumber' import type { Web3Provider } from '@ethersproject/providers' -import { EIP_2612_PERMIT_SELECTOR } from '@1inch/permit-signed-approvals-utils' import { renderHook } from '@testing-library/react' import useSWR from 'swr' @@ -14,8 +14,6 @@ import { Order } from 'legacy/state/orders/actions' import { usePermitInfo } from 'modules/permit' import { TradeType } from 'modules/trade' - - import { isPending } from 'common/hooks/useCategorizeRecentActivity' import { getOrderPermitIfExists } from 'common/utils/doesOrderHavePermit' @@ -79,7 +77,7 @@ function createEip2612PermitCallData(owner: string, spender: string, value: Ethe '0x0000000000000000000000000000000000000000000000000000000000000000', // s ]) // Replace standard permit selector (first 10 chars: 0x + 4 bytes) with EIP_2612_PERMIT_SELECTOR - return EIP_2612_PERMIT_SELECTOR + permitData.slice(10) + return oneInchPermitUtilsConsts.EIP_2612_PERMIT_SELECTOR + permitData.slice(10) } describe('useDoesOrderHaveValidPermit', () => { diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/NoOrdersContent.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/NoOrdersContent.tsx index d749025d1a4..92bc54b5781 100644 --- a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/NoOrdersContent.tsx +++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/NoOrdersContent.tsx @@ -1,10 +1,9 @@ -import { ReactNode, memo } from 'react' +import { ReactNode, memo, lazy, Suspense } from 'react' import { CowSwapSafeAppLink } from '@cowprotocol/ui' import { t } from '@lingui/core/macro' import { Trans, useLingui } from '@lingui/react/macro' -import Lottie from 'lottie-react' import * as styledEl from './OrdersTableContainer.styled' @@ -13,6 +12,8 @@ import { useNoOrdersAnimation } from '../../hooks/useNoOrdersAnimation' import { useOrdersTableState } from '../../hooks/useOrdersTableState' import { TabOrderTypes } from '../../types' +const Lottie = lazy(() => import('lottie-react')) + interface NoOrdersDescriptionProps { currentTab: OrderTabId orderType: TabOrderTypes | undefined @@ -103,7 +104,10 @@ export function NoOrdersContent({ {t`There ) : animationData ? ( - + {/* TODO: what fallback should be used here? */} + + + ) : (