feat: Add Circle native Arbitrum USDC to common base tokens in token selector (#6680)

* add feature flag for usdc arbitrum

* add to feature flag modal

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

@@ -1,6 +1,6 @@
 import { SupportedChainId } from '@uniswap/sdk-core'
 import { DAI_ARBITRUM } from '@uniswap/smart-order-router'
-import { DAI, USDC_ARBITRUM, 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 +13,7 @@ describe('PortfolioLogo', () => {
 
   it('renders with L2 icon', () => {
     const { container } = render(
-      <PortfolioLogo chainId={SupportedChainId.ARBITRUM_ONE} currencies={[DAI_ARBITRUM, USDC_ARBITRUM]} />
+      <PortfolioLogo chainId={SupportedChainId.ARBITRUM_ONE} currencies={[DAI_ARBITRUM, BRIDGED_USDC_ARBITRUM]} />
     )
     expect(container).toMatchSnapshot()
   })

src/components/FeatureFlagModal/FeatureFlagModal.tsx

@@ -1,4 +1,5 @@
 import { BaseVariant, FeatureFlag, featureFlagSettings, useUpdateFlag } from 'featureFlags'
+import { useNativeUSDCArbitrumFlag } from 'featureFlags/flags/nativeUsdcArbitrum'
 import { DetailsV2Variant, useDetailsV2Flag } from 'featureFlags/flags/nftDetails'
 import { TraceJsonRpcVariant, useTraceJsonRpcFlag } from 'featureFlags/flags/traceJsonRpc'
 import { UnifiedRouterVariant, useRoutingAPIV2Flag } from 'featureFlags/flags/unifiedRouter'
@@ -214,6 +215,12 @@ export default function FeatureFlagModal() {
         featureFlag={FeatureFlag.uraEnabled}
         label="Enable the Unified Routing API"
       />
+      <FeatureFlagOption
+        variant={BaseVariant}
+        value={useNativeUSDCArbitrumFlag()}
+        featureFlag={FeatureFlag.nativeUsdcArbitrum}
+        label="Enable Circle native USDC on Arbitrum"
+      />
       <FeatureFlagGroup name="Debug">
         <FeatureFlagOption
           variant={TraceJsonRpcVariant}

src/components/SearchModal/CommonBases.tsx

@@ -4,7 +4,8 @@ import { Currency } from '@uniswap/sdk-core'
 import { AutoColumn } from 'components/Column'
 import CurrencyLogo from 'components/Logo/CurrencyLogo'
 import { AutoRow } from 'components/Row'
-import { COMMON_BASES } from 'constants/routing'
+import { COMMON_BASES, COMMON_BASES_V2 } from 'constants/routing'
+import { useNativeUSDCArbitrumEnabled } from 'featureFlags/flags/nativeUsdcArbitrum'
 import { useTokenInfoFromActiveList } from 'hooks/useTokenInfoFromActiveList'
 import { getTokenAddress } from 'lib/utils/analytics'
 import { Text } from 'rebass'
@@ -59,7 +60,9 @@ export default function CommonBases({
   searchQuery: string
   isAddressSearch: string | false
 }) {
-  const bases = typeof chainId !== 'undefined' ? COMMON_BASES[chainId] ?? [] : []
+  const nativeUsdcArbitrumEnabled = useNativeUSDCArbitrumEnabled()
+  const commonBases = nativeUsdcArbitrumEnabled ? COMMON_BASES_V2 : COMMON_BASES
+  const bases = chainId !== undefined ? commonBases[chainId] ?? [] : []
 
   return bases.length > 0 ? (
     <MobileWrapper gap="md">

src/constants/routing.ts

@@ -4,6 +4,7 @@ import { SupportedChainId } from 'constants/chains'
 
 import {
   AMPL,
+  BRIDGED_USDC_ARBITRUM,
   BTC_BSC,
   BUSD_BSC,
   CAKE_BSC,
@@ -153,7 +154,7 @@ export const COMMON_BASES: ChainCurrencyList = {
   [SupportedChainId.ARBITRUM_ONE]: [
     nativeOnChain(SupportedChainId.ARBITRUM_ONE),
     DAI_ARBITRUM_ONE,
-    USDC_ARBITRUM,
+    BRIDGED_USDC_ARBITRUM,
     USDT_ARBITRUM_ONE,
     WBTC_ARBITRUM_ONE,
     WRAPPED_NATIVE_CURRENCY[SupportedChainId.ARBITRUM_ONE] as Token,
@@ -210,6 +211,19 @@ export const COMMON_BASES: ChainCurrencyList = {
   ],
 }
 
+// This is the same as COMMON_BASES except it swaps out Bridged USDC on arbitrum for native USDC.
+export const COMMON_BASES_V2: ChainCurrencyList = {
+  ...COMMON_BASES,
+  [SupportedChainId.ARBITRUM_ONE]: [
+    nativeOnChain(SupportedChainId.ARBITRUM_ONE),
+    DAI_ARBITRUM_ONE,
+    USDC_ARBITRUM,
+    USDT_ARBITRUM_ONE,
+    WBTC_ARBITRUM_ONE,
+    WRAPPED_NATIVE_CURRENCY[SupportedChainId.ARBITRUM_ONE] as Token,
+  ],
+}
+
 // used to construct the list of all pairs we consider by default in the frontend
 export const BASES_TO_TRACK_LIQUIDITY_FOR: ChainTokenList = {
   ...WRAPPED_NATIVE_CURRENCIES_ONLY,

src/constants/tokens.ts

@@ -46,13 +46,20 @@ const USDC_OPTIMISM_GOERLI = new Token(
   'USDC',
   'USD//C'
 )
-export const USDC_ARBITRUM = new Token(
+export const BRIDGED_USDC_ARBITRUM = new Token(
   SupportedChainId.ARBITRUM_ONE,
   '0xFF970A61A04b1cA14834A43f5dE4533eBDDB5CC8',
   6,
   'USDC',
   'USD//C'
 )
+export const USDC_ARBITRUM = new Token(
+  SupportedChainId.ARBITRUM_ONE,
+  '0xaf88d065e77c8cC2239327C5EDb3A432268e5831',
+  6,
+  'USDC',
+  'USD//C'
+)
 export const USDC_ARBITRUM_GOERLI = new Token(
   SupportedChainId.ARBITRUM_GOERLI,
   '0x8FB1E3fC51F3b789dED7557E680551d93Ea9d892',
@@ -566,7 +573,7 @@ export function getSwapCurrencyId(currency: Currency): string {
 export const TOKEN_SHORTHANDS: { [shorthand: string]: { [chainId in SupportedChainId]?: string } } = {
   USDC: {
     [SupportedChainId.MAINNET]: USDC_MAINNET.address,
-    [SupportedChainId.ARBITRUM_ONE]: USDC_ARBITRUM.address,
+    [SupportedChainId.ARBITRUM_ONE]: BRIDGED_USDC_ARBITRUM.address,
     [SupportedChainId.ARBITRUM_GOERLI]: USDC_ARBITRUM_GOERLI.address,
     [SupportedChainId.OPTIMISM]: USDC_OPTIMISM.address,
     [SupportedChainId.OPTIMISM_GOERLI]: USDC_OPTIMISM_GOERLI.address,

src/featureFlags/flags/nativeUsdcArbitrum.ts

@@ -0,0 +1,9 @@
+import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
+
+export function useNativeUSDCArbitrumFlag(): BaseVariant {
+  return useBaseFlag(FeatureFlag.nativeUsdcArbitrum)
+}
+
+export function useNativeUSDCArbitrumEnabled(): boolean {
+  return useNativeUSDCArbitrumFlag() === BaseVariant.Enabled
+}

src/featureFlags/index.tsx

@@ -12,6 +12,7 @@ export enum FeatureFlag {
   detailsV2 = 'details_v2',
   uraEnabled = 'ura_enabled',
   debounceSwapQuote = 'debounce_swap_quote',
+  nativeUsdcArbitrum = 'web_usdc_arbitrum',
 }
 
 interface FeatureFlagsContextType {

src/hooks/useStablecoinPrice.ts

@@ -6,13 +6,20 @@ import { useMemo, useRef } from 'react'
 import { INTERNAL_ROUTER_PREFERENCE_PRICE } from 'state/routing/slice'
 import { useRoutingAPITrade } from 'state/routing/useRoutingAPITrade'
 
-import { CUSD_CELO, DAI_OPTIMISM, USDC_ARBITRUM, USDC_MAINNET, USDC_POLYGON, USDT_BSC } from '../constants/tokens'
+import {
+  BRIDGED_USDC_ARBITRUM,
+  CUSD_CELO,
+  DAI_OPTIMISM,
+  USDC_MAINNET,
+  USDC_POLYGON,
+  USDT_BSC,
+} from '../constants/tokens'
 
 // Stablecoin amounts used when calculating spot price for a given currency.
 // The amount is large enough to filter low liquidity pairs.
 const STABLECOIN_AMOUNT_OUT: { [chainId: number]: CurrencyAmount<Token> } = {
   [SupportedChainId.MAINNET]: CurrencyAmount.fromRawAmount(USDC_MAINNET, 100_000e6),
-  [SupportedChainId.ARBITRUM_ONE]: CurrencyAmount.fromRawAmount(USDC_ARBITRUM, 10_000e6),
+  [SupportedChainId.ARBITRUM_ONE]: CurrencyAmount.fromRawAmount(BRIDGED_USDC_ARBITRUM, 10_000e6),
   [SupportedChainId.OPTIMISM]: CurrencyAmount.fromRawAmount(DAI_OPTIMISM, 10_000e18),
   [SupportedChainId.POLYGON]: CurrencyAmount.fromRawAmount(USDC_POLYGON, 10_000e6),
   [SupportedChainId.CELO]: CurrencyAmount.fromRawAmount(CUSD_CELO, 10_000e18),