add staging support

src/components/NavBar/ChainSelector.tsx

@@ -1,26 +1,27 @@
-import { useWeb3React } from '@web3-react/core'
-import { getChainInfo } from 'constants/chainInfo'
-import { SupportedChainId } from 'constants/chains'
-import { useOnClickOutside } from 'hooks/useOnClickOutside'
+import {useWeb3React} from '@web3-react/core'
+import {getChainInfo} from 'constants/chainInfo'
+import {SupportedChainId} from 'constants/chains'
+import {useOnClickOutside} from 'hooks/useOnClickOutside'
 import useSelectChain from 'hooks/useSelectChain'
 import useSyncChainQuery from 'hooks/useSyncChainQuery'
-import { Box } from 'nft/components/Box'
-import { Portal } from 'nft/components/common/Portal'
-import { Column, Row } from 'nft/components/Flex'
-import { TokenWarningRedIcon } from 'nft/components/icons'
-import { subhead } from 'nft/css/common.css'
-import { themeVars } from 'nft/css/sprinkles.css'
-import { useIsMobile } from 'nft/hooks'
-import { useCallback, useRef, useState } from 'react'
-import { ChevronDown, ChevronUp } from 'react-feather'
-import { useTheme } from 'styled-components/macro'
+import {Box} from 'nft/components/Box'
+import {Portal} from 'nft/components/common/Portal'
+import {Column, Row} from 'nft/components/Flex'
+import {TokenWarningRedIcon} from 'nft/components/icons'
+import {subhead} from 'nft/css/common.css'
+import {themeVars} from 'nft/css/sprinkles.css'
+import {useIsMobile} from 'nft/hooks'
+import {useCallback, useRef, useState} from 'react'
+import {ChevronDown, ChevronUp} from 'react-feather'
+import {useTheme} from 'styled-components/macro'
 
 import * as styles from './ChainSelector.css'
 import ChainSelectorRow from './ChainSelectorRow'
-import { NavDropdown } from './NavDropdown'
+import {NavDropdown} from './NavDropdown'
 
 const NETWORK_SELECTOR_CHAINS = [
   SupportedChainId.SCROLL_ALPHA,
+  SupportedChainId.SCROLL_STAGING,
   // SupportedChainId.MAINNET,
   // SupportedChainId.POLYGON,
   // SupportedChainId.OPTIMISM,
@@ -65,7 +66,7 @@ export const ChainSelector = ({ leftAlign }: ChainSelectorProps) => {
   }
 
   // const isSupported = !!info
-  const isSupported = !!info && chainId === SupportedChainId.SCROLL_ALPHA;
+  const isSupported = !!info && (chainId === SupportedChainId.SCROLL_ALPHA || chainId === SupportedChainId.SCROLL_STAGING);
 
   const dropdown = (
     <NavDropdown top="56" left={leftAlign ? '0' : 'auto'} right={leftAlign ? 'auto' : '0'} ref={modalRef}>

src/components/NetworkAlert/NetworkAlert.tsx

@@ -39,6 +39,7 @@ const SHOULD_SHOW_ALERT = {
   // [SupportedChainId.CELO]: true,
   // [SupportedChainId.CELO_ALFAJORES]: true,
   [SupportedChainId.SCROLL_ALPHA]: true,
+  [SupportedChainId.SCROLL_STAGING]: true,
 }
 
 type NetworkAlertChains = keyof typeof SHOULD_SHOW_ALERT
@@ -65,6 +66,8 @@ const BG_COLORS_BY_DARK_MODE_AND_CHAIN_ID: {
     //   'radial-gradient(285% 8200% at 30% 50%, rgba(40, 160, 240, 0.05) 0%, rgba(219, 255, 0, 0) 100%),radial-gradient(75% 75% at 0% 0%, rgba(150, 190, 220, 0.05) 0%, rgba(33, 114, 229, 0.1) 100%), hsla(0, 0%, 100%, 0.05)',
     [SupportedChainId.SCROLL_ALPHA]:
       'radial-gradient(100% 93.36% at 0% 6.64%, rgba(120, 128, 247, 0.1) 0%, rgba(62, 62, 160, 0.1) 100%)',
+    [SupportedChainId.SCROLL_STAGING]:
+      'radial-gradient(100% 93.36% at 0% 6.64%, rgba(120, 128, 247, 0.1) 0%, rgba(62, 62, 160, 0.1) 100%)',
   },
   light: {
     // [SupportedChainId.POLYGON]:
@@ -85,6 +88,8 @@ const BG_COLORS_BY_DARK_MODE_AND_CHAIN_ID: {
     //   'radial-gradient(285% 8200% at 30% 50%, rgba(40, 160, 240, 0.1) 0%, rgba(219, 255, 0, 0) 100%),radial-gradient(circle at top left, hsla(206, 50%, 75%, 0.01), hsla(215, 79%, 51%, 0.12)), hsla(0, 0%, 100%, 0.1)',
     [SupportedChainId.SCROLL_ALPHA]:
       'radial-gradient(182.71% 205.59% at 2.81% 7.69%,#EEE2D4FF 0%, #E4D5C3FF 100%)',
+    [SupportedChainId.SCROLL_STAGING]:
+      'radial-gradient(182.71% 205.59% at 2.81% 7.69%,#EEE2D4FF 0%, #E4D5C3FF 100%)',
   },
 }
 
@@ -145,6 +150,7 @@ const TEXT_COLORS: { [chainId in NetworkAlertChains]: string } = {
   // [SupportedChainId.ARBITRUM_ONE]: '#0490ed',
   // [SupportedChainId.ARBITRUM_RINKEBY]: '#0490ed',
   [SupportedChainId.SCROLL_ALPHA]: 'rgba(113, 98, 124)',
+  [SupportedChainId.SCROLL_STAGING]: 'rgba(113, 98, 124)',
 }
 
 function shouldShowAlert(chainId: number | undefined): chainId is NetworkAlertChains {

src/constants/addresses.ts

@@ -27,6 +27,11 @@ const SCROLL_ALPHA_V3_CORE_FACTORY_ADDRESSES = '0x6E7E0d996eF50E289af9BFd93f774C
 const SCROLL_ALPHA_ROUTER_ADDRESS = '0xD9880690bd717189cC3Fbe7B9020F27fae7Ac76F'
 const SCROLL_ALPHA_NONFUNGIBLE_POSITION_MANAGER_ADDRESSES = '0xbd1A5920303F45d628630E88aFbAF012bA078F37'
 
+// scroll_staging v3 addresses
+const SCROLL_STAGING_V3_CORE_FACTORY_ADDRESSES = '0x8236472a9331c4aE636C292889320875bfb83591'
+const SCROLL_STAGING_ROUTER_ADDRESS = '0xC18394cf6555B541Efdb83083F720eCB1dF4692e'
+const SCROLL_STAGING_NONFUNGIBLE_POSITION_MANAGER_ADDRESSES = '0x157aE6c46e2Aec7D4F59F34C40293A46AD9D1e9D'
+
 /* V3 Contract Addresses */
 export const V3_CORE_FACTORY_ADDRESSES: AddressMap = {
   ...constructSameAddressMap(V3_FACTORY_ADDRESS, [
@@ -40,6 +45,7 @@ export const V3_CORE_FACTORY_ADDRESSES: AddressMap = {
   // [SupportedChainId.CELO]: CELO_V3_CORE_FACTORY_ADDRESSES,
   // [SupportedChainId.CELO_ALFAJORES]: CELO_V3_CORE_FACTORY_ADDRESSES,
   [SupportedChainId.SCROLL_ALPHA]: SCROLL_ALPHA_V3_CORE_FACTORY_ADDRESSES,
+  [SupportedChainId.SCROLL_STAGING]: SCROLL_STAGING_V3_CORE_FACTORY_ADDRESSES,
 }
 
 export const V3_MIGRATOR_ADDRESSES: AddressMap = {
@@ -52,6 +58,7 @@ export const V3_MIGRATOR_ADDRESSES: AddressMap = {
   // [SupportedChainId.CELO]: CELO_V3_MIGRATOR_ADDRESSES,
   // [SupportedChainId.CELO_ALFAJORES]: CELO_V3_MIGRATOR_ADDRESSES,
   [SupportedChainId.SCROLL_ALPHA]: '0x5Db25d2b7dba65c8aA2b16465438Ec44f75b0511',
+  [SupportedChainId.SCROLL_STAGING]: '0xfb14B5d29c302A0f74245c5dEb918f5faB5320dd',
 }
 
 export const MULTICALL_ADDRESS: AddressMap = {
@@ -66,6 +73,7 @@ export const MULTICALL_ADDRESS: AddressMap = {
   // [SupportedChainId.CELO]: CELO_MULTICALL_ADDRESS,
   // [SupportedChainId.CELO_ALFAJORES]: CELO_MULTICALL_ADDRESS,
   [SupportedChainId.SCROLL_ALPHA]: '0x2117f703867a2B7E6813c7e5Edd96bf9a8d8eC30',
+  [SupportedChainId.SCROLL_STAGING]: '0x88b3A57207Dc59d42F2e088a0eC08e9A3f4927B4',
 }
 
 export const SWAP_ROUTER_ADDRESSES: AddressMap = {
@@ -80,6 +88,7 @@ export const SWAP_ROUTER_ADDRESSES: AddressMap = {
   // [SupportedChainId.CELO]: CELO_ROUTER_ADDRESS,
   // [SupportedChainId.CELO_ALFAJORES]: CELO_ROUTER_ADDRESS,
   [SupportedChainId.SCROLL_ALPHA]: SCROLL_ALPHA_ROUTER_ADDRESS,
+  [SupportedChainId.SCROLL_STAGING]: SCROLL_STAGING_ROUTER_ADDRESS
 }
 
 /**
@@ -123,6 +132,7 @@ export const QUOTER_ADDRESSES: AddressMap = {
   // [SupportedChainId.CELO]: CELO_QUOTER_ADDRESSES,
   // [SupportedChainId.CELO_ALFAJORES]: CELO_QUOTER_ADDRESSES,
   [SupportedChainId.SCROLL_ALPHA]: '0xbf1c1FE1e9e900aFd5ba2Eb67480c44266D5eD84',
+  [SupportedChainId.SCROLL_STAGING]: '0x14724C2Ca23cA7E3769f47F7C281B74DF32d76a4',
 }
 
 export const NONFUNGIBLE_POSITION_MANAGER_ADDRESSES: AddressMap = {
@@ -137,6 +147,7 @@ export const NONFUNGIBLE_POSITION_MANAGER_ADDRESSES: AddressMap = {
   // [SupportedChainId.CELO]: CELO_NONFUNGIBLE_POSITION_MANAGER_ADDRESSES,
   // [SupportedChainId.CELO_ALFAJORES]: CELO_NONFUNGIBLE_POSITION_MANAGER_ADDRESSES,
   [SupportedChainId.SCROLL_ALPHA]: SCROLL_ALPHA_NONFUNGIBLE_POSITION_MANAGER_ADDRESSES,
+  [SupportedChainId.SCROLL_STAGING]: SCROLL_STAGING_NONFUNGIBLE_POSITION_MANAGER_ADDRESSES,
 }
 
 export const ENS_REGISTRAR_ADDRESSES: AddressMap = {
@@ -156,4 +167,5 @@ export const TICK_LENS_ADDRESSES: AddressMap = {
   // [SupportedChainId.CELO]: CELO_TICK_LENS_ADDRESSES,
   // [SupportedChainId.CELO_ALFAJORES]: CELO_TICK_LENS_ADDRESSES,
   [SupportedChainId.SCROLL_ALPHA]: '0xf39a3f98Bc7e03cB9A8dBF8246B8C66a1A5c025F',
+  [SupportedChainId.SCROLL_STAGING]: '0x763aCdC41F331a294A8A0a32290762Bfe25214aA',
 }

src/constants/chainInfo.ts

@@ -4,7 +4,7 @@ import ms from 'ms.macro'
 import { darkTheme } from 'theme/colors'
 
 import { SupportedChainId, SupportedL1ChainId, SupportedL2ChainId } from './chains'
-import { SCROLL_ALPHA_LIST } from './lists'
+import { SCROLL_ALPHA_LIST, SCROLL_STAGING_LIST } from './lists'
 
 export const AVERAGE_L1_BLOCK_TIME = ms`12s`
 
@@ -229,6 +229,23 @@ const CHAIN_INFO: ChainInfoMap = {
     defaultListUrl: SCROLL_ALPHA_LIST,
     helpCenterUrl: 'https://help.uniswap.org/en/collections/3137787-uniswap-on-arbitrum',
   },
+  [SupportedChainId.SCROLL_STAGING]: {
+    networkType: NetworkType.L2,
+    docs: 'https://docs.uniswap.org/',
+    explorer: 'https://blockscout.scroll.io/',
+    infoLink: 'https://info.uniswap.org/#/',
+    label: 'Scroll Staging',
+    logoUrl: scrollLogo,
+    nativeCurrency: { name: 'Scroll Staging Ether', symbol: 'ETH', decimals: 18 },
+    //TODO: Add Scroll Brand Color
+    color: darkTheme.chain_5,
+
+    // Required for L2 networks
+    blockWaitMsBeforeWarning: ms`10m`,
+    bridge: 'https://scroll.io/alpha/bridge/',
+    defaultListUrl: SCROLL_STAGING_LIST,
+    helpCenterUrl: 'https://help.uniswap.org/en/collections/3137787-uniswap-on-arbitrum',
+  }
 }
 
 export function getChainInfo(chainId: SupportedL1ChainId): L1ChainInfo

src/constants/chains.ts

@@ -21,6 +21,7 @@ export enum SupportedChainId {
   // CELO_ALFAJORES = 44787,
 
   SCROLL_ALPHA = 534353,
+  SCROLL_STAGING = 5343532222,
 }
 
 export const CHAIN_IDS_TO_NAMES = {
@@ -38,6 +39,7 @@ export const CHAIN_IDS_TO_NAMES = {
   // [SupportedChainId.OPTIMISM]: 'optimism',
   // [SupportedChainId.OPTIMISM_GOERLI]: 'optimism_goerli',
   [SupportedChainId.SCROLL_ALPHA]: 'scroll_alpha',
+  [SupportedChainId.SCROLL_STAGING]: 'scroll_staging',
 }
 
 /**
@@ -78,6 +80,7 @@ export const TESTNET_CHAIN_IDS = [
   // SupportedChainId.ARBITRUM_RINKEBY,
   // SupportedChainId.OPTIMISM_GOERLI,
   SupportedChainId.SCROLL_ALPHA,
+  SupportedChainId.SCROLL_STAGING,
 ] as const
 
 export type SupportedTestnetChainId = typeof TESTNET_CHAIN_IDS[number]
@@ -109,6 +112,7 @@ export const L2_CHAIN_IDS = [
   // SupportedChainId.OPTIMISM,
   // SupportedChainId.OPTIMISM_GOERLI,
   SupportedChainId.SCROLL_ALPHA,
+  SupportedChainId.SCROLL_STAGING,
 ] as const
 
 export type SupportedL2ChainId = typeof L2_CHAIN_IDS[number]

src/constants/lists.ts

@@ -17,6 +17,8 @@ const WRAPPED_LIST = 'wrapped.tokensoft.eth'
 // export const CELO_LIST = 'https://celo-org.github.io/celo-token-list/celo.tokenlist.json'
 export const SCROLL_ALPHA_LIST =
   'https://raw.githubusercontent.com/scroll-tech/uniswap-v3-interface/scroll-showcase/src/constants/tokenLists/scroll-alpha.tokenlist.json'
+export const SCROLL_STAGING_LIST =
+  'https://raw.githubusercontent.com/Lawliet-Chan/uniswap-v3-interface/add_staging/src/constants/tokenLists/scroll-staging.tokenlist.json'
 
 export const UNSUPPORTED_LIST_URLS: string[] = [BA_LIST, UNI_UNSUPPORTED_LIST]
 
@@ -37,6 +39,7 @@ export const DEFAULT_INACTIVE_LIST_URLS: string[] = [
   // OPTIMISM_LIST,
   // CELO_LIST,
   SCROLL_ALPHA_LIST,
+  SCROLL_STAGING_LIST,
   ...UNSUPPORTED_LIST_URLS,
 ]
 

src/constants/networks.ts

@@ -91,6 +91,10 @@ export const FALLBACK_URLS: { [key in SupportedChainId]: string[] } = {
     // "Safe" URLs
     'https://alpha-rpc.scroll.io/l2',
   ],
+  [SupportedChainId.SCROLL_STAGING]: [
+    // "Safe" URLs
+    'https://staging-rpc.scroll.io/l2,',
+  ]  
 }
 
 /**
@@ -139,4 +143,5 @@ export const RPC_URLS: { [key in SupportedChainId]: string[] } = {
   // [SupportedChainId.CELO]: FALLBACK_URLS[SupportedChainId.CELO],
   // [SupportedChainId.CELO_ALFAJORES]: FALLBACK_URLS[SupportedChainId.CELO_ALFAJORES],
   [SupportedChainId.SCROLL_ALPHA]: FALLBACK_URLS[SupportedChainId.SCROLL_ALPHA],
+  [SupportedChainId.SCROLL_STAGING]: FALLBACK_URLS[SupportedChainId.SCROLL_STAGING],
 }

src/constants/providers.ts

@@ -71,4 +71,5 @@ export const RPC_PROVIDERS: { [key in SupportedChainId]: StaticJsonRpcProvider }
   // [SupportedChainId.CELO]: new AppJsonRpcProvider(SupportedChainId.CELO),
   // [SupportedChainId.CELO_ALFAJORES]: new AppJsonRpcProvider(SupportedChainId.CELO_ALFAJORES),
   [SupportedChainId.SCROLL_ALPHA]: new AppJsonRpcProvider(SupportedChainId.SCROLL_ALPHA),
+  [SupportedChainId.SCROLL_STAGING]: new AppJsonRpcProvider(SupportedChainId.SCROLL_STAGING),
 }

src/constants/routing.ts

@@ -189,6 +189,10 @@ export const COMMON_BASES: ChainCurrencyList = {
     nativeOnChain(SupportedChainId.SCROLL_ALPHA),
     WRAPPED_NATIVE_CURRENCY[SupportedChainId.SCROLL_ALPHA] as Token,
   ],
+  [SupportedChainId.SCROLL_STAGING]: [
+      nativeOnChain(SupportedChainId.SCROLL_STAGING),
+      WRAPPED_NATIVE_CURRENCY[SupportedChainId.SCROLL_STAGING] as Token,
+  ]
 }
 
 // used to construct the list of all pairs we consider by default in the frontend

src/constants/tokenLists/scroll-staging.tokenlist.json

@@ -0,0 +1,20 @@
+{
+  "name": "Scroll Whitelist Era",
+  "timestamp": "2022-03-01T22:44:18.339Z",
+  "version": {
+    "major": 0,
+    "minor": 0,
+    "patch": 1
+  },
+  "tokens": [
+    {
+      "logoURI": "https://assets.coingecko.com/coins/images/2518/thumb/weth.png?1628852295",
+      "chainId": 5343532222,
+      "address": "0x5300000000000000000000000000000000000004",
+      "name": "Wrapped Ether",
+      "symbol": "WETH",
+      "decimals": 18
+    }
+  ],
+  "logoURI": "ipfs://"
+}

src/constants/tokens.ts

@@ -392,6 +392,13 @@ export const WRAPPED_NATIVE_CURRENCY: { [chainId: number]: Token | undefined } =
     'WETH',
     'Wrapped Ether'
   ),
+  [SupportedChainId.SCROLL_STAGING]: new Token(
+      SupportedChainId.SCROLL_STAGING,
+      "0x5300000000000000000000000000000000000004",
+      18,
+      'WETH',
+      'Wrapped Ether',
+  )
 }
 
 export function isCelo(chainId: number) {
@@ -400,7 +407,7 @@ export function isCelo(chainId: number) {
 }
 
 export function isScroll(chainId: number): chainId is SupportedChainId.SCROLL_ALPHA {
-  return chainId === SupportedChainId.SCROLL_ALPHA
+  return chainId === SupportedChainId.SCROLL_ALPHA || chainId === SupportedChainId.SCROLL_STAGING
 }
 
 // function getCeloNativeCurrency(chainId: number) {
@@ -481,5 +488,7 @@ export const TOKEN_SHORTHANDS: { [shorthand: string]: { [chainId in SupportedCha
     // [SupportedChainId.KOVAN]: USDC_KOVAN.address,
     // [SupportedChainId.ROPSTEN]: USDC_ROPSTEN.address,
     [SupportedChainId.SCROLL_ALPHA]: USDC_SCROLL_ALPHA.address,
+    // [SupportedChainId.SCROLL_STAGING]: TUV3_SCROLL_STAGING.address,
+    // [SupportedChainId.SCROLL_STAGING]: WETH_SCROLL_STAGING.address,
   },
 }

src/hooks/usePoolTickData.ts

@@ -19,6 +19,7 @@ const CHAIN_IDS_MISSING_SUBGRAPH_DATA = [
   // SupportedChainId.ARBITRUM_ONE,
   // SupportedChainId.ARBITRUM_RINKEBY,
   SupportedChainId.SCROLL_ALPHA,
+  SupportedChainId.SCROLL_STAGING,
 ]
 
 // Tick with fields parsed to JSBIs, and active liquidity computed.

src/pages/Pool/index.tsx

@@ -202,7 +202,7 @@ export default function Pool() {
 
   const { positions, loading: positionsLoading } = useV3Positions(account)
 
-  if (chainId !== SupportedChainId.SCROLL_ALPHA) {
+  if (chainId !== SupportedChainId.SCROLL_ALPHA && chainId !== SupportedChainId.SCROLL_STAGING) {
     return <WrongNetworkCard />
   }
 

src/utils/getExplorerLink.ts

@@ -56,7 +56,7 @@ export function getExplorerLink(chainId: number, data: string, type: ExplorerDat
   //   }
   // }
 
-  if (chainId === SupportedChainId.SCROLL_ALPHA) {
+  if (chainId === SupportedChainId.SCROLL_ALPHA || chainId === SupportedChainId.SCROLL_STAGING) {
     switch (type) {
       case ExplorerDataType.TRANSACTION:
         return `https://blockscout.scroll.io/tx/${data}`