feat: split app into libs and NX cloud integration (#3108)

.github/workflows/ci.yml

@@ -129,7 +129,6 @@ jobs:
           key: ${{ runner.os }}-generatedFiles-${{ hashFiles('**/yarn.lock') }}
 
       - name: Run eslint
-        if: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.repo.owner.login != github.repository_owner }}
         run: yarn lint
 
   integration-tests:

apps/cowswap-frontend/.eslintrc.json

@@ -57,7 +57,7 @@
             "position": "before"
           },
           {
-            "pattern": "{@cowswap,@cowprotocol,@uniswap,@safe-global,@ethersproject,@web3-react}/**",
+            "pattern": "{@cowprotocol,@cowprotocol,@uniswap,@safe-global,@ethersproject,@web3-react}/**",
             "group": "external",
             "position": "before"
           },

apps/cowswap-frontend/jest.config.ts

@@ -3,7 +3,7 @@
 /* eslint-disable */
 export default {
   displayName: 'cowswap',
-  preset: './jest.preset.js',
+  preset: '../../jest.preset.js',
   transform: {
     '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
     '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],

apps/cowswap-frontend/project.json

@@ -9,7 +9,7 @@
       "outputs": ["{options.outputPath}"],
       "defaultConfiguration": "production",
       "options": {
-        "outputPath": "dist/apps/cowswap-frontend"
+        "outputPath": "build"
       },
       "configurations": {
         "development": {

apps/cowswap-frontend/src/api/1inch/index.ts

@@ -1,12 +1,12 @@
+import { getTokensFromMarket } from '@cowprotocol/common-utils'
 import { OrderKind } from '@cowprotocol/contracts'
 import { SupportedChainId as ChainId } from '@cowprotocol/cow-sdk'
 
 import { PriceInformation } from 'types'
 
-import { getTokensFromMarket } from 'legacy/utils/misc'
+import { LegacyPriceQuoteParams } from 'legacy/state/price/types'
 import { getValidParams } from 'legacy/utils/price'
 
-import { LegacyPriceQuoteParams } from 'api/gnosisProtocol/legacy/types'
 import { fetchWithRateLimit } from 'common/utils/fetch'
 
 export const API_NAME = '1inch'

apps/cowswap-frontend/src/legacy/utils/blocknative.ts → apps/cowswap-frontend/src/api/blocknative.ts

@@ -1,8 +1,8 @@
+import { ALL_SUPPORTED_CHAIN_IDS } from '@cowprotocol/cow-sdk'
+
 import * as Sentry from '@sentry/browser'
 import BlocknativeSdk from 'bnc-sdk'
 
-import { ALL_SUPPORTED_CHAIN_IDS } from 'legacy/constants/chains'
-
 const BLOCKNATIVE_API_KEY = process.env.REACT_APP_BLOCKNATIVE_API_KEY
 
 interface SDKError {

apps/cowswap-frontend/src/api/gasPrices/index.ts

@@ -1,8 +1,6 @@
+import { DEFAULT_NETWORK_FOR_LISTS, GAS_API_KEYS, GAS_FEE_ENDPOINTS } from '@cowprotocol/common-const'
 import { SupportedChainId as ChainId } from '@cowprotocol/cow-sdk'
 
-import { GAS_FEE_ENDPOINTS, GAS_API_KEYS } from 'legacy/constants'
-import { DEFAULT_NETWORK_FOR_LISTS } from 'legacy/constants/lists'
-
 import { fetchWithRateLimit } from 'common/utils/fetch'
 
 const fetchRateLimitted = fetchWithRateLimit({

apps/cowswap-frontend/src/api/gnosisProtocol/api.ts

@@ -1,3 +1,5 @@
+import { ZERO_ADDRESS } from '@cowprotocol/common-const'
+import { isBarn, isDev, isLocal, isPr, toErc20Address, toNativeBuyAddress } from '@cowprotocol/common-utils'
 import {
   Address,
   CowEnv,
@@ -19,17 +21,13 @@ import {
 
 import { orderBookApi } from 'cowSdk'
 
-import { ZERO_ADDRESS } from 'legacy/constants/misc'
-import { isBarn, isDev, isLocal, isPr } from 'legacy/utils/environments'
-import { toErc20Address, toNativeBuyAddress } from 'legacy/utils/tokens'
+import { LegacyFeeQuoteParams as FeeQuoteParams } from 'legacy/state/price/types'
 
 import { getAppData } from 'modules/appData'
 
 import { ApiErrorCodes, ApiErrorObject } from 'api/gnosisProtocol/errors/OperatorError'
 import GpQuoteError, { GpQuoteErrorDetails, mapOperatorErrorToQuoteError } from 'api/gnosisProtocol/errors/QuoteError'
 
-import { LegacyFeeQuoteParams as FeeQuoteParams } from './legacy/types'
-
 function getProfileUrl(): Partial<Record<ChainId, string>> {
   if (isLocal || isDev || isPr || isBarn) {
     return {

apps/cowswap-frontend/src/api/gnosisProtocol/hooks.ts

@@ -1,11 +1,10 @@
+import { GP_ORDER_UPDATE_INTERVAL } from '@cowprotocol/common-const'
 import { EnrichedOrder } from '@cowprotocol/cow-sdk'
+import { useWalletInfo } from '@cowprotocol/wallet'
 
 import useSWR from 'swr'
 
-import { GP_ORDER_UPDATE_INTERVAL } from 'legacy/constants'
-
 import { useSWROrdersRequest } from 'modules/orders/hooks/useSWROrdersRequest'
-import { useWalletInfo } from 'modules/wallet'
 
 import { getOrders } from './api'
 

apps/cowswap-frontend/src/api/gnosisProtocol/priceApi.ts

@@ -1,8 +1,8 @@
+import { RAW_CODE_LINK } from '@cowprotocol/common-const'
+import { environmentName } from '@cowprotocol/common-utils'
 import { SupportedChainId } from '@cowprotocol/cow-sdk'
 
-import { RAW_CODE_LINK } from 'legacy/constants'
 import { GpPriceStrategy } from 'legacy/state/gas/atoms'
-import { environmentName } from 'legacy/utils/environments'
 
 const API_NAME = 'CoW Protocol'
 const STRATEGY_URL_BASE = RAW_CODE_LINK + '/configuration/config/'

apps/cowswap-frontend/src/api/matcha-0x/index.ts

@@ -1,12 +1,12 @@
+import { getTokensFromMarket } from '@cowprotocol/common-utils'
 import { OrderKind } from '@cowprotocol/contracts'
 import { SupportedChainId as ChainId } from '@cowprotocol/cow-sdk'
 
 import { PriceInformation } from 'types'
 
-import { getTokensFromMarket } from 'legacy/utils/misc'
+import { LegacyPriceQuoteParams } from 'legacy/state/price/types'
 import { getValidParams } from 'legacy/utils/price'
 
-import { LegacyPriceQuoteParams } from 'api/gnosisProtocol/legacy/types'
 import { fetchWithRateLimit } from 'common/utils/fetch'
 
 // copy/pasting as the library types correspond to the internal types, not API response

apps/cowswap-frontend/src/api/proxy/hooks.ts

@@ -1,17 +1,15 @@
 import { atom, useAtomValue, useSetAtom } from 'jotai'
 
+import { isAddress } from '@cowprotocol/common-utils'
 import { SupportedChainId } from '@cowprotocol/cow-sdk'
+import { ALL_SUPPORTED_CHAIN_IDS } from '@cowprotocol/cow-sdk'
 
 import * as Sentry from '@sentry/react'
 import useSWR from 'swr'
-
-import { ALL_SUPPORTED_CHAIN_IDS } from 'legacy/constants/chains'
-import { isAddress } from 'legacy/utils'
+import { Nullish } from 'types'
 
 import { getTokens } from './api'
 
-import { Nullish } from '../../types'
-
 import type { Chain, FetchTokensApiResult, FetchTokensResult, TokenLogoCache } from './types'
 
 function isValidQuery(query: string): boolean {

apps/cowswap-frontend/src/common/constants/featureFlags.ts

@@ -1,4 +1,3 @@
-export const AMOUNTS_FORMATTING_FEATURE_FLAG = 'highlight-amounts-formatting'
 export const ordersTableFeatures = {
   // Temporary hide estimated execution price because it requires rework and retest
   DISPLAY_EST_EXECUTION_PRICE: false,

apps/cowswap-frontend/src/common/constants/routes.ts

@@ -1,4 +1,4 @@
-import { isInjectedWidget } from 'common/utils/isInjectedWidget'
+import { isInjectedWidget } from '@cowprotocol/common-utils'
 
 export const TRADE_WIDGET_PREFIX = isInjectedWidget() ? '/widget' : ''
 
@@ -31,7 +31,6 @@ export const Routes = {
   DOCS: '/docs',
   STATS: '/stats',
   TWITTER: '/twitter',
-  KITCHEN_SINK: '/kitchen-sink',
 } as const
 
 export type RoutesKeys = keyof typeof Routes

apps/cowswap-frontend/src/common/containers/ImportTokenModal/index.tsx

@@ -1,22 +1,21 @@
 import { useAtomValue } from 'jotai'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 
+import { TOKEN_SHORTHANDS, WRAPPED_NATIVE_CURRENCY } from '@cowprotocol/common-const'
+import { useDebounce } from '@cowprotocol/common-hooks'
+import { isInjectedWidget } from '@cowprotocol/common-utils'
 import { SupportedChainId } from '@cowprotocol/cow-sdk'
 import { Token } from '@uniswap/sdk-core'
 
 import TokenWarningModal from 'legacy/components/TokenWarningModal'
-import { TOKEN_SHORTHANDS, WRAPPED_NATIVE_CURRENCY } from 'legacy/constants/tokens'
 import { useSearchInactiveTokenLists } from 'legacy/hooks/Tokens'
-import useDebounce from 'legacy/hooks/useDebounce'
-import { Field } from 'legacy/state/swap/actions'
+import { Field } from 'legacy/state/types'
 import { useAddUserToken } from 'legacy/state/user/hooks'
 
 import { tokensByAddressAtom, tokensBySymbolAtom } from 'modules/tokensList/state/tokensListAtom'
 import { useNavigateOnCurrencySelection } from 'modules/trade/hooks/useNavigateOnCurrencySelection'
 import { useTradeState } from 'modules/trade/hooks/useTradeState'
 
-import { isInjectedWidget } from 'common/utils/isInjectedWidget'
-
 export interface ImportTokenModalProps {
   chainId: SupportedChainId
 }

apps/cowswap-frontend/src/common/containers/MultipleOrdersCancellationModal/index.tsx

@@ -1,14 +1,14 @@
 import { useAtomValue, useSetAtom } from 'jotai'
 import React, { useCallback, useState } from 'react'
 
-import { ButtonPrimary } from 'legacy/components/Button'
-import { ConfirmOperationType } from 'legacy/components/TransactionConfirmationModal'
+import { isRejectRequestProviderError } from '@cowprotocol/common-utils'
+import { ButtonPrimary } from '@cowprotocol/ui'
+import { useWalletInfo } from '@cowprotocol/wallet'
+
 import { LegacyConfirmationModalContent } from 'legacy/components/TransactionConfirmationModal/LegacyConfirmationModalContent'
 import { LegacyConfirmationPendingContent } from 'legacy/components/TransactionConfirmationModal/LegacyConfirmationPendingContent'
 import { useRequestOrderCancellation } from 'legacy/state/orders/hooks'
-import { isRejectRequestProviderError } from 'legacy/utils/misc'
-
-import { useWalletInfo } from 'modules/wallet'
+import { ConfirmOperationType } from 'legacy/state/types'
 
 import { ordersToCancelAtom, updateOrdersToCancelAtom } from 'common/hooks/useMultipleOrdersCancellation/state'
 import { useCancelMultipleOrders } from 'common/hooks/useMultipleOrdersCancellation/useCancelMultipleOrders'

apps/cowswap-frontend/src/common/containers/TradeApprove/TradeApproveModal.tsx

@@ -1,9 +1,10 @@
 import { useAtom } from 'jotai'
 import React from 'react'
 
-import { TransactionConfirmationModal, ConfirmOperationType } from 'legacy/components/TransactionConfirmationModal'
+import { TokenSymbol } from '@cowprotocol/ui'
 
-import { TokenSymbol } from 'common/pure/TokenSymbol'
+import { TransactionConfirmationModal } from 'legacy/components/TransactionConfirmationModal'
+import { ConfirmOperationType } from 'legacy/state/types'
 
 import { tradeApproveStateAtom } from './tradeApproveStateAtom'
 

apps/cowswap-frontend/src/common/containers/TradeApprove/useTradeApproveCallback.ts

@@ -1,12 +1,11 @@
 import { useSetAtom } from 'jotai'
 import { useCallback } from 'react'
 
+import { approvalAnalytics } from '@cowprotocol/analytics'
+import { isRejectRequestProviderError } from '@cowprotocol/common-utils'
 import { TransactionResponse } from '@ethersproject/providers'
 import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 
-import { approvalAnalytics } from 'legacy/components/analytics'
-import { isRejectRequestProviderError } from 'legacy/utils/misc'
-
 import { useApproveCallback } from 'common/hooks/useApproveCallback'
 import { useTradeSpenderAddress } from 'common/hooks/useTradeSpenderAddress'
 

apps/cowswap-frontend/src/common/containers/WalletUnsupportedNetworkBanner/index.tsx

@@ -1,10 +1,10 @@
+import { getChainInfo } from '@cowprotocol/common-const'
+import { ALL_SUPPORTED_CHAIN_IDS } from '@cowprotocol/cow-sdk'
+
 import { Trans } from '@lingui/macro'
 import { AlertCircle } from 'react-feather'
 import styled from 'styled-components/macro'
 
-import { getChainInfo } from 'legacy/constants/chainInfo'
-import { ALL_SUPPORTED_CHAIN_IDS } from 'legacy/constants/chains'
-
 import { useIsProviderNetworkUnsupported } from 'common/hooks/useIsProviderNetworkUnsupported'
 
 export const UNSUPPORTED_WALLET_TEXT = (

apps/cowswap-frontend/src/common/containers/ZeroApprovalModal/ZeroApprovalModal.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 
-import { useWalletDetails, useWalletDisplayedAddress } from 'modules/wallet'
+import { useWalletDetails, useWalletDisplayedAddress } from '@cowprotocol/wallet'
 
 import { ConfirmationPendingContent } from 'common/pure/ConfirmationPendingContent'
 import { CowModal } from 'common/pure/Modal'

apps/cowswap-frontend/src/legacy/components/analytics/hooks/useAnalyticsReporter.ts → apps/cowswap-frontend/src/common/hooks/useAnalyticsReporter.ts

@@ -1,25 +1,28 @@
 import { useEffect } from 'react'
 
+import {
+  Dimensions,
+  GOOGLE_ANALYTICS_CLIENT_ID_STORAGE_KEY,
+  googleAnalytics,
+  PixelEvent,
+  sendAllPixels,
+} from '@cowprotocol/analytics'
+import { usePrevious } from '@cowprotocol/common-hooks'
+import {
+  getConnectionName,
+  getIsMetaMask,
+  getWeb3ReactConnection,
+  useWalletDetails,
+  useWalletInfo,
+} from '@cowprotocol/wallet'
 import { useWeb3React } from '@web3-react/core'
 
 import ReactGA from 'react-ga4'
 import { useLocation } from 'react-router-dom'
 import { getCLS, getFCP, getFID, getLCP, Metric } from 'web-vitals'
 
-// Mod imports
-import usePrevious from 'legacy/hooks/usePrevious'
-
-import { useWalletDetails, useWalletInfo } from 'modules/wallet'
-import { getConnectionName, getIsMetaMask } from 'modules/wallet/api/utils/connection'
-import { getWeb3ReactConnection } from 'modules/wallet/web3-react/connection'
-
 import { useGetMarketDimension } from './useGetMarketDimension'
 
-import { googleAnalytics } from '../googleAnalytics'
-import { GOOGLE_ANALYTICS_CLIENT_ID_STORAGE_KEY } from '../index'
-import { PixelEvent, sendAllPixels } from '../pixel'
-import { Dimensions } from '../types'
-
 export function sendTiming(timingCategory: any, timingVar: any, timingValue: any, timingLabel: any) {
   return googleAnalytics.gaCommandSendTiming(timingCategory, timingVar, timingValue, timingLabel)
 }

apps/cowswap-frontend/src/common/hooks/useApproveCallback.ts

@@ -1,17 +1,16 @@
 import { useCallback } from 'react'
 
-import { Erc20 } from '@cowswap/abis'
+import { Erc20 } from '@cowprotocol/abis'
+import { useTokenContract } from '@cowprotocol/common-hooks'
+import { calculateGasMargin } from '@cowprotocol/common-utils'
+import { useWalletInfo } from '@cowprotocol/wallet'
 import { BigNumber } from '@ethersproject/bignumber'
 import { MaxUint256 } from '@ethersproject/constants'
 import { TransactionResponse } from '@ethersproject/providers'
 import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 
 import { APPROVE_GAS_LIMIT_DEFAULT } from 'legacy/hooks/useApproveCallback/useApproveCallbackMod'
-import { useTokenContract } from 'legacy/hooks/useContract'
 import { useTransactionAdder } from 'legacy/state/enhancedTransactions/hooks'
-import { calculateGasMargin } from 'legacy/utils/calculateGasMargin'
-
-import { useWalletInfo } from 'modules/wallet'
 
 export async function estimateApprove(
   tokenContract: Erc20,

apps/cowswap-frontend/src/common/hooks/useApproveState.ts

@@ -1,19 +1,17 @@
 import { useMemo } from 'react'
 
+import { usePrevious } from '@cowprotocol/common-hooks'
+import { FractionUtils } from '@cowprotocol/common-utils'
+import { useWalletInfo } from '@cowprotocol/wallet'
 import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
 
 import { Nullish } from 'types'
 
-import usePrevious from 'legacy/hooks/usePrevious'
+import { ApprovalState } from 'legacy/hooks/useApproveCallback/useApproveCallbackMod'
 import { useTokenAllowance } from 'legacy/hooks/useTokenAllowance'
 import { useHasPendingApproval } from 'legacy/state/enhancedTransactions/hooks'
 
-import { useWalletInfo } from 'modules/wallet'
-
 import { useSafeMemo } from 'common/hooks/useSafeMemo'
-import { FractionUtils } from 'utils/fractionUtils'
-
-import { ApprovalState } from '../../legacy/hooks/useApproveCallback/useApproveCallbackMod'
 
 function getCurrencyToApprove(amountToApprove: Nullish<CurrencyAmount<Currency>>): Token | undefined {
   if (!amountToApprove) return undefined

apps/cowswap-frontend/src/common/hooks/useAreThereTokensWithSameSymbol.ts

@@ -1,7 +1,7 @@
 import { useAtomValue } from 'jotai'
 import { useCallback } from 'react'
 
-import { isAddress } from 'legacy/utils'
+import { isAddress } from '@cowprotocol/common-utils'
 
 import { tokensBySymbolAtom } from 'modules/tokensList/state/tokensListAtom'
 

apps/cowswap-frontend/src/common/hooks/useCancelOrder/index.ts

@@ -2,15 +2,16 @@ import { useSetAtom } from 'jotai'
 import { useResetAtom } from 'jotai/utils'
 import { useCallback } from 'react'
 
+import { calculateGasMargin } from '@cowprotocol/common-utils'
+import { useWalletDetails, useWalletInfo } from '@cowprotocol/wallet'
+
 import { useCloseModal, useOpenModal } from 'legacy/state/application/hooks'
 import { ApplicationModal } from 'legacy/state/application/reducer'
 import { useGasPrices } from 'legacy/state/gas/hooks'
 import { Order, OrderStatus } from 'legacy/state/orders/actions'
-import { calculateGasMargin } from 'legacy/utils/calculateGasMargin'
 
 import { getIsEthFlowOrder } from 'modules/swap/containers/EthFlowStepper'
 import { getSwapErrorMessage } from 'modules/trade/utils/swapErrorHelper'
-import { useWalletDetails, useWalletInfo } from 'modules/wallet'
 
 import { useGetOnChainCancellation } from 'common/hooks/useCancelOrder/useGetOnChainCancellation'
 import { isOrderCancellable } from 'common/utils/isOrderCancellable'