feat: lazy load the lib's smart-order-router (#3624)

* feat: lazy-load the smart-order-router * chore: guard against regression
2022-03-30 14:09:18 -07:00 · 2022-03-30 14:09:18 -07:00 · 1303416eca
commit 1303416eca
parent 124f6420a5
6 changed files with 100 additions and 29 deletions
--- a/src/constants/tokens.ts
+++ b/src/constants/tokens.ts
@ -1,23 +1,86 @@
 import { Currency, Ether, NativeCurrency, Token, WETH9 } from '@uniswap/sdk-core'
-import {
-  USDC_ARBITRUM,
-  USDC_ARBITRUM_RINKEBY,
-  USDC_GÖRLI,
-  USDC_KOVAN,
-  USDC_MAINNET,
-  USDC_OPTIMISM,
-  USDC_OPTIMISTIC_KOVAN,
-  USDC_POLYGON,
-  USDC_POLYGON_MUMBAI,
-  USDC_RINKEBY,
-  USDC_ROPSTEN,
-} from '@uniswap/smart-order-router'
 import invariant from 'tiny-invariant'

 import { UNI_ADDRESS } from './addresses'
 import { SupportedChainId } from './chains'

-export { USDC_ARBITRUM, USDC_MAINNET, USDC_OPTIMISM, USDC_POLYGON }
+export const USDC_MAINNET = new Token(
+  SupportedChainId.MAINNET,
+  '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
+  6,
+  'USDC',
+  'USD//C'
+)
+export const USDC_ROPSTEN = new Token(
+  SupportedChainId.ROPSTEN,
+  '0x07865c6e87b9f70255377e024ace6630c1eaa37f',
+  6,
+  'USDC',
+  'USD//C'
+)
+export const USDC_RINKEBY = new Token(
+  SupportedChainId.RINKEBY,
+  '0x4DBCdF9B62e891a7cec5A2568C3F4FAF9E8Abe2b',
+  6,
+  'tUSDC',
+  'test USD//C'
+)
+export const USDC_GOERLI = new Token(
+  SupportedChainId.GOERLI,
+  '0x07865c6e87b9f70255377e024ace6630c1eaa37f',
+  6,
+  'USDC',
+  'USD//C'
+)
+export const USDC_KOVAN = new Token(
+  SupportedChainId.KOVAN,
+  '0x31eeb2d0f9b6fd8642914ab10f4dd473677d80df',
+  6,
+  'USDC',
+  'USD//C'
+)
+export const USDC_OPTIMISM = new Token(
+  SupportedChainId.OPTIMISM,
+  '0x7F5c764cBc14f9669B88837ca1490cCa17c31607',
+  6,
+  'USDC',
+  'USD//C'
+)
+export const USDC_OPTIMISTIC_KOVAN = new Token(
+  SupportedChainId.OPTIMISTIC_KOVAN,
+  '0x3b8e53b3ab8e01fb57d0c9e893bc4d655aa67d84',
+  6,
+  'USDC',
+  'USD//C'
+)
+export const USDC_ARBITRUM = new Token(
+  SupportedChainId.ARBITRUM_ONE,
+  '0xFF970A61A04b1cA14834A43f5dE4533eBDDB5CC8',
+  6,
+  'USDC',
+  'USD//C'
+)
+export const USDC_ARBITRUM_RINKEBY = new Token(
+  SupportedChainId.ARBITRUM_RINKEBY,
+  '0x09b98f8b2395d076514037ff7d39a091a536206c',
+  6,
+  'USDC',
+  'USD//C'
+)
+export const USDC_POLYGON = new Token(
+  SupportedChainId.POLYGON,
+  '0x2791bca1f2de4661ed88a30c99a7a9449aa84174',
+  6,
+  'USDC',
+  'USD//C'
+)
+export const USDC_POLYGON_MUMBAI = new Token(
+  SupportedChainId.POLYGON_MUMBAI,
+  '0xe11a86849d99f524cac3e7a0ec1241828e332c62',
+  6,
+  'USDC',
+  'USD//C'
+)

 export const AMPL = new Token(
  SupportedChainId.MAINNET,
@ -55,7 +118,7 @@ export const USDC: { [chainId in SupportedChainId]: Token } = {
  [SupportedChainId.OPTIMISTIC_KOVAN]: USDC_OPTIMISTIC_KOVAN,
  [SupportedChainId.POLYGON]: USDC_POLYGON,
  [SupportedChainId.POLYGON_MUMBAI]: USDC_POLYGON_MUMBAI,
-  [SupportedChainId.GOERLI]: USDC_GÖRLI,
+  [SupportedChainId.GOERLI]: USDC_GOERLI,
  [SupportedChainId.RINKEBY]: USDC_RINKEBY,
  [SupportedChainId.KOVAN]: USDC_KOVAN,
  [SupportedChainId.ROPSTEN]: USDC_ROPSTEN,
@ -310,7 +373,7 @@ export const TOKEN_SHORTHANDS: { [shorthand: string]: { [chainId in SupportedCha
    [SupportedChainId.OPTIMISTIC_KOVAN]: USDC_OPTIMISTIC_KOVAN.address,
    [SupportedChainId.POLYGON]: USDC_POLYGON.address,
    [SupportedChainId.POLYGON_MUMBAI]: USDC_POLYGON_MUMBAI.address,
-    [SupportedChainId.GOERLI]: USDC_GÖRLI.address,
+    [SupportedChainId.GOERLI]: USDC_GOERLI.address,
    [SupportedChainId.RINKEBY]: USDC_RINKEBY.address,
    [SupportedChainId.KOVAN]: USDC_KOVAN.address,
    [SupportedChainId.ROPSTEN]: USDC_ROPSTEN.address,
--- a/src/hooks/usePoolTickData.ts
+++ b/src/hooks/usePoolTickData.ts
@ -1,7 +1,7 @@
 import { skipToken } from '@reduxjs/toolkit/query/react'
 import { Currency } from '@uniswap/sdk-core'
-import { ChainId } from '@uniswap/smart-order-router'
 import { FeeAmount, nearestUsableTick, Pool, TICK_SPACINGS, tickToPrice } from '@uniswap/v3-sdk'
+import { SupportedChainId } from 'constants/chains'
 import { ZERO_ADDRESS } from 'constants/misc'
 import JSBI from 'jsbi'
 import { useSingleContractMultipleData } from 'lib/hooks/multicall'
@ -14,7 +14,7 @@ import { useTickLens } from './useContract'
 import { PoolState, usePool } from './usePools'

 const PRICE_FIXED_DIGITS = 8
-const CHAIN_IDS_MISSING_SUBGRAPH_DATA = [ChainId.ARBITRUM_ONE, ChainId.ARBITRUM_RINKEBY]
+const CHAIN_IDS_MISSING_SUBGRAPH_DATA = [SupportedChainId.ARBITRUM_ONE, SupportedChainId.ARBITRUM_RINKEBY]

 export interface TickData {
  tick: number
--- a/src/lib/.eslintrc.json
+++ b/src/lib/.eslintrc.json
@ -10,6 +10,10 @@
          {
            "name": "react-feather",
            "message": "Please import from lib/icons to ensure performant usage."
+          },
+          {
+            "name": "@uniswap/smart-order-router",
+            "message": "Forbidden import; smart-order-router is lazy-loaded."
          }
        ],
        "patterns": [
--- a/src/lib/hooks/routing/clientSideSmartOrderRouter.ts
+++ b/src/lib/hooks/routing/clientSideSmartOrderRouter.ts
@ -1,4 +1,6 @@
 import { BigintIsh, 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
 import { AlphaRouter, AlphaRouterConfig, AlphaRouterParams, ChainId } from '@uniswap/smart-order-router'
 import JSBI from 'jsbi'
 import { GetQuoteResult } from 'state/routing/types'
--- a/src/lib/hooks/routing/useClientSideSmartOrderRouterTrade.ts
+++ b/src/lib/hooks/routing/useClientSideSmartOrderRouterTrade.ts
@ -2,7 +2,7 @@ import 'setimmediate'

 import { Protocol } from '@uniswap/router-sdk'
 import { Currency, CurrencyAmount, TradeType } from '@uniswap/sdk-core'
-import { ChainId } from '@uniswap/smart-order-router'
+import { SupportedChainId } from 'constants/chains'
 import useDebounce from 'hooks/useDebounce'
 import { useStablecoinAmountFromFiatValue } from 'hooks/useUSDCPrice'
 import { useCallback, useMemo } from 'react'
@ -13,7 +13,6 @@ import useWrapCallback, { WrapType } from '../swap/useWrapCallback'
 import useActiveWeb3React from '../useActiveWeb3React'
 import { useGetIsValidBlock } from '../useIsValidBlock'
 import usePoll from '../usePoll'
-import { getClientSideQuote } from './clientSideSmartOrderRouter'
 import { useRoutingAPIArguments } from './useRoutingAPIArguments'

 /**
@ -21,14 +20,14 @@ import { useRoutingAPIArguments } from './useRoutingAPIArguments'
 * Defaults are defined in https://github.com/Uniswap/smart-order-router/blob/309e6f6603984d3b5aef0733b0cfaf129c29f602/src/routers/alpha-router/config.ts#L83.
 */
 const DistributionPercents: { [key: number]: number } = {
-  [ChainId.MAINNET]: 10,
-  [ChainId.OPTIMISM]: 10,
-  [ChainId.OPTIMISTIC_KOVAN]: 10,
-  [ChainId.ARBITRUM_ONE]: 25,
-  [ChainId.ARBITRUM_RINKEBY]: 25,
+  [SupportedChainId.MAINNET]: 10,
+  [SupportedChainId.OPTIMISM]: 10,
+  [SupportedChainId.OPTIMISTIC_KOVAN]: 10,
+  [SupportedChainId.ARBITRUM_ONE]: 25,
+  [SupportedChainId.ARBITRUM_RINKEBY]: 25,
 }
 const DEFAULT_DISTRIBUTION_PERCENT = 10
-function getConfig(chainId: ChainId | undefined) {
+function getConfig(chainId: SupportedChainId | undefined) {
  return {
    // Limit to only V2 and V3.
    protocols: [Protocol.V2, Protocol.V3],
@ -76,7 +75,11 @@ export default function useClientSideSmartOrderRouterTrade<TTradeType extends Tr
    if (wrapType !== WrapType.NONE) return { error: undefined }
    if (!queryArgs || !params) return { error: undefined }
    try {
-      const quoteResult = await getClientSideQuote(queryArgs, params, config)
+      // Lazy-load the smart order router to improve initial pageload times.
+      const quoteResult = await (
+        await import('./clientSideSmartOrderRouter')
+      ).getClientSideQuote(queryArgs, params, config)
+
      // There is significant post-fetch processing, so delay a tick to prevent dropped frames.
      // This is only important in the context of integrations - if we control the whole site,
      // then we can afford to drop a few frames.
--- a/src/state/governance/hooks.ts
+++ b/src/state/governance/hooks.ts
@ -8,7 +8,6 @@ import { t } from '@lingui/macro'
 import { abi as GOVERNANCE_ABI } from '@uniswap/governance/build/GovernorAlpha.json'
 import { abi as UNI_ABI } from '@uniswap/governance/build/Uni.json'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
-import { ChainId } from '@uniswap/smart-order-router'
 import GOVERNOR_BRAVO_ABI from 'abis/governor-bravo.json'
 import {
  GOVERNANCE_ALPHA_V0_ADDRESSES,
@ -323,7 +322,7 @@ export function useQuorum(governorIndex: number): CurrencyAmount<Token> | undefi
  if (
    !latestGovernanceContract ||
    !quorumVotes ||
-    chainId !== ChainId.MAINNET ||
+    chainId !== SupportedChainId.MAINNET ||
    !uni ||
    governorIndex !== LATEST_GOVERNOR_INDEX
  )