feat: lazy-load smart-order-router (#7317)

.eslintrc.js

@@ -28,7 +28,20 @@ module.exports = {
     {
       files: ['**/*.ts', '**/*.tsx'],
       rules: {
-        '@typescript-eslint/no-restricted-imports': ['error', restrictedImports],
+        '@typescript-eslint/no-restricted-imports': [
+          'error',
+          {
+            ...restrictedImports,
+            paths: [
+              ...restrictedImports.paths,
+              {
+                name: '@uniswap/smart-order-router',
+                message: 'Only import types, unless you are in the client-side SOR, to preserve lazy-loading.',
+                allowTypeImports: true,
+              },
+            ],
+          },
+        ],
         'import/no-restricted-paths': [
           'error',
           {

src/components/AccountDrawer/MiniPortfolio/Activity/parseLocal.ts

@@ -1,9 +1,9 @@
 import { BigNumber } from '@ethersproject/bignumber'
 import { t } from '@lingui/macro'
 import { ChainId, Currency, CurrencyAmount, TradeType } from '@uniswap/sdk-core'
-import { nativeOnChain } from '@uniswap/smart-order-router'
 import UniswapXBolt from 'assets/svg/bolt.svg'
 import { SupportedLocale } from 'constants/locales'
+import { nativeOnChain } from 'constants/tokens'
 import { TransactionStatus } from 'graphql/data/__generated__/types-and-hooks'
 import { ChainTokenMap, useAllTokensMultichain } from 'hooks/Tokens'
 import { useMemo } from 'react'

src/components/AccountDrawer/MiniPortfolio/Pools/hooks.ts

@@ -4,7 +4,7 @@ import {
   NONFUNGIBLE_POSITION_MANAGER_ADDRESSES as V3NFT_ADDRESSES,
   Token,
 } from '@uniswap/sdk-core'
-import { AddressMap } from '@uniswap/smart-order-router'
+import type { AddressMap } from '@uniswap/smart-order-router'
 import MulticallJSON from '@uniswap/v3-periphery/artifacts/contracts/lens/UniswapInterfaceMulticall.sol/UniswapInterfaceMulticall.json'
 import NFTPositionManagerJSON from '@uniswap/v3-periphery/artifacts/contracts/NonfungiblePositionManager.sol/NonfungiblePositionManager.json'
 import { useWeb3React } from '@web3-react/core'

src/components/AccountDrawer/MiniPortfolio/PortfolioLogo.test.tsx

@@ -1,6 +1,5 @@
 import { ChainId } from '@uniswap/sdk-core'
-import { DAI_ARBITRUM } from '@uniswap/smart-order-router'
+import { BRIDGED_USDC_ARBITRUM, DAI, DAI_ARBITRUM_ONE, USDC_MAINNET } from 'constants/tokens'
-import { BRIDGED_USDC_ARBITRUM, DAI, USDC_MAINNET } from 'constants/tokens'
 import { render } from 'test-utils/render'
 
 import { PortfolioLogo } from './PortfolioLogo'
@@ -13,7 +12,7 @@ describe('PortfolioLogo', () => {
 
   it('renders with L2 icon', () => {
     const { container } = render(
-      <PortfolioLogo chainId={ChainId.ARBITRUM_ONE} currencies={[DAI_ARBITRUM, BRIDGED_USDC_ARBITRUM]} />
+      <PortfolioLogo chainId={ChainId.ARBITRUM_ONE} currencies={[DAI_ARBITRUM_ONE, BRIDGED_USDC_ARBITRUM]} />
     )
     expect(container).toMatchSnapshot()
   })

src/lib/hooks/routing/clientSideSmartOrderRouter.ts

@@ -1,12 +1,30 @@
-import { BigintIsh, CurrencyAmount, Token, TradeType } from '@uniswap/sdk-core'
+import { BigintIsh, ChainId, CurrencyAmount, Token, TradeType } from '@uniswap/sdk-core'
 // This file is lazy-loaded, so the import of smart-order-router is intentional.
-// eslint-disable-next-line no-restricted-imports
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { AlphaRouter, AlphaRouterConfig } from '@uniswap/smart-order-router'
+import { asSupportedChain } from 'constants/chains'
+import { RPC_PROVIDERS } from 'constants/providers'
 import { nativeOnChain } from 'constants/tokens'
 import JSBI from 'jsbi'
 import { GetQuoteArgs, QuoteResult, QuoteState, SwapRouterNativeAssets } from 'state/routing/types'
 import { transformSwapRouteToGetQuoteResult } from 'utils/transformSwapRouteToGetQuoteResult'
 
+const routers = new Map<ChainId, AlphaRouter>()
+export function getRouter(chainId: ChainId): AlphaRouter {
+  const router = routers.get(chainId)
+  if (router) return router
+
+  const supportedChainId = asSupportedChain(chainId)
+  if (supportedChainId) {
+    const provider = RPC_PROVIDERS[supportedChainId]
+    const router = new AlphaRouter({ chainId, provider })
+    routers.set(chainId, router)
+    return router
+  }
+
+  throw new Error(`Router does not support this chain (chainId: ${chainId}).`)
+}
+
 async function getQuote(
   {
     tradeType,

src/state/routing/slice.ts

@@ -3,7 +3,6 @@ import { Protocol } from '@uniswap/router-sdk'
 import { TradeType } from '@uniswap/sdk-core'
 import { sendAnalyticsEvent } from 'analytics'
 import { isUniswapXSupportedChain } from 'constants/chains'
-import { getClientSideQuote } from 'lib/hooks/routing/clientSideSmartOrderRouter'
 import ms from 'ms'
 import { logSwapQuoteRequest } from 'tracing/swapFlowLoggers'
 import { trace } from 'tracing/trace'
@@ -20,7 +19,7 @@ import {
   URAQuoteResponse,
   URAQuoteType,
 } from './types'
-import { getRouter, isExactInput, shouldUseAPIRouter, transformRoutesToTrade } from './utils'
+import { isExactInput, shouldUseAPIRouter, transformRoutesToTrade } from './utils'
 
 const UNISWAP_API_URL = process.env.REACT_APP_UNISWAP_API_URL
 if (UNISWAP_API_URL === undefined) {
@@ -182,6 +181,7 @@ export const routingApi = createApi({
         }
         try {
           const method = fellBack ? QuoteMethod.CLIENT_SIDE_FALLBACK : QuoteMethod.CLIENT_SIDE
+          const { getRouter, getClientSideQuote } = await import('lib/hooks/routing/clientSideSmartOrderRouter')
           const router = getRouter(args.tokenInChainId)
           const quoteResult = await getClientSideQuote(args, router, CLIENT_PARAMS)
           if (quoteResult.state === QuoteState.SUCCESS) {

src/state/routing/utils.ts

@@ -1,12 +1,9 @@
 import { BigNumber } from '@ethersproject/bignumber'
 import { MixedRouteSDK } from '@uniswap/router-sdk'
-import { ChainId, Currency, CurrencyAmount, Token, TradeType } from '@uniswap/sdk-core'
+import { Currency, CurrencyAmount, Token, TradeType } from '@uniswap/sdk-core'
-import { AlphaRouter } from '@uniswap/smart-order-router'
 import { DutchOrderInfo, DutchOrderInfoJSON } from '@uniswap/uniswapx-sdk'
 import { Pair, Route as V2Route } from '@uniswap/v2-sdk'
 import { FeeAmount, Pool, Route as V3Route } from '@uniswap/v3-sdk'
-import { asSupportedChain } from 'constants/chains'
-import { RPC_PROVIDERS } from 'constants/providers'
 import { isAvalanche, isBsc, isMatic, nativeOnChain } from 'constants/tokens'
 import { toSlippagePercent } from 'utils/slippage'
 
@@ -39,22 +36,6 @@ interface RouteResult {
   outputAmount: CurrencyAmount<Currency>
 }
 
-const routers = new Map<ChainId, AlphaRouter>()
-export function getRouter(chainId: ChainId): AlphaRouter {
-  const router = routers.get(chainId)
-  if (router) return router
-
-  const supportedChainId = asSupportedChain(chainId)
-  if (supportedChainId) {
-    const provider = RPC_PROVIDERS[supportedChainId]
-    const router = new AlphaRouter({ chainId, provider })
-    routers.set(chainId, router)
-    return router
-  }
-
-  throw new Error(`Router does not support this chain (chainId: ${chainId}).`)
-}
-
 /**
  * Transforms a Routing API quote into an array of routes that can be used to
  * create a `Trade`.

src/test-utils/constants.ts

@@ -1,4 +1,6 @@
 import { ChainId, CurrencyAmount, Percent, Token, TradeType } from '@uniswap/sdk-core'
+// This is a test file, so the import of smart-order-router is allowed.
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { V3Route } from '@uniswap/smart-order-router'
 import { FeeAmount, Pool } from '@uniswap/v3-sdk'
 import { ZERO_PERCENT } from 'constants/misc'

src/utils/transformSwapRouteToGetQuoteResult.ts

@@ -1,5 +1,7 @@
 import { Protocol } from '@uniswap/router-sdk'
 import { Currency, CurrencyAmount, TradeType } from '@uniswap/sdk-core'
+// This file is lazy-loaded, so the import of smart-order-router is intentional.
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { routeAmountsToString, SwapRoute } from '@uniswap/smart-order-router'
 import { Pool } from '@uniswap/v3-sdk'
 import { QuoteResult, QuoteState, URAQuoteType } from 'state/routing/types'