refactor(swap): bundle optimization

.gitignore

@@ -50,8 +50,6 @@ yalc.lock
 # vercel
 .vercel
 
-analyse.html
-
 # NX
 .nx
 

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

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'

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'

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'

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'

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'

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'

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'

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'

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'

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'

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'

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<void>

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'

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'

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<SafeApiKit | null>(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
 }

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'

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'

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'

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'

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'

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'

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'

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'
 

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'

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'

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

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'

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'

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'

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'
 

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({

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'
 

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'
 

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'
 

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'

apps/cowswap-frontend/src/legacy/hooks/useGetSafeTxInfo.ts

@@ -3,31 +3,24 @@ 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 }
 
 export type GetSafeTxInfo = (hash: string) => RetryResult<SafeMultisigTransactionResponse>
 
 export function useGetSafeTxInfo(): GetSafeTxInfo {
-  const provider = useWalletProvider()
   const { chainId } = useWalletInfo()
 
   const getSafeInfo = useCallback<GetSafeTxInfo>(
     (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

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'
 

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(),

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'