feat: path-based routing (#7275)

README.md

@@ -69,10 +69,10 @@ Other things to note:
 
 The Uniswap Interface supports swapping, adding liquidity, removing liquidity and migrating liquidity for Uniswap protocol V2.
 
-- Swap on Uniswap V2: <https://app.uniswap.org/#/swap?use=v2>
-- View V2 liquidity: <https://app.uniswap.org/#/pools/v2>
-- Add V2 liquidity: <https://app.uniswap.org/#/add/v2>
-- Migrate V2 liquidity to V3: <https://app.uniswap.org/#/migrate/v2>
+- Swap on Uniswap V2: <https://app.uniswap.org/swap?use=v2>
+- View V2 liquidity: <https://app.uniswap.org/pools/v2>
+- Add V2 liquidity: <https://app.uniswap.org/add/v2>
+- Migrate V2 liquidity to V3: <https://app.uniswap.org/migrate/v2>
 
 ## Accessing Uniswap V1
 

cypress/e2e/nfts.test.ts

@@ -12,7 +12,7 @@ describe('Testing nfts', () => {
   })
 
   it('should load pudgy penguin collection page', () => {
-    cy.visit(`/#/nfts/collection/${PUDGY_COLLECTION_ADDRESS}`)
+    cy.visit(`/nfts/collection/${PUDGY_COLLECTION_ADDRESS}`)
     cy.get(getTestSelector('nft-collection-asset')).should('exist')
     cy.get(getTestSelector('nft-collection-filter-buy-now')).should('not.exist')
     cy.get(getTestSelector('nft-filter')).first().click()
@@ -20,13 +20,13 @@ describe('Testing nfts', () => {
   })
 
   it('should be able to navigate to activity', () => {
-    cy.visit(`/#/nfts/collection/${PUDGY_COLLECTION_ADDRESS}`)
+    cy.visit(`/nfts/collection/${PUDGY_COLLECTION_ADDRESS}`)
     cy.get(getTestSelector('nft-activity')).first().click()
     cy.get(getTestSelector('nft-activity-row')).should('exist')
   })
 
   it('should go to the details page', () => {
-    cy.visit(`/#/nfts/collection/${PUDGY_COLLECTION_ADDRESS}`)
+    cy.visit(`/nfts/collection/${PUDGY_COLLECTION_ADDRESS}`)
     cy.get(getTestSelector('nft-filter')).first().click()
     cy.get(getTestSelector('nft-collection-filter-buy-now')).click()
     cy.get(getTestSelector('nft-collection-asset')).first().click()
@@ -37,7 +37,7 @@ describe('Testing nfts', () => {
   })
 
   it('should toggle buy now on details page', () => {
-    cy.visit(`/#/nfts/collection/${PUDGY_COLLECTION_ADDRESS}`)
+    cy.visit(`/nfts/collection/${PUDGY_COLLECTION_ADDRESS}`)
     cy.get(getTestSelector('nft-filter')).first().click()
     cy.get(getTestSelector('nft-collection-filter-buy-now')).click()
     cy.get(getTestSelector('nft-collection-asset')).first().click()

cypress/e2e/token-explore.test.ts

@@ -69,8 +69,6 @@ describe('Token explore', () => {
     cy.get(getTestSelector('tokens-network-filter-selected')).click()
     cy.get(getTestSelector('tokens-network-filter-option-optimism')).click()
     cy.get(getTestSelector('tokens-network-filter-selected')).should('contain', 'Optimism')
-    cy.reload()
-    cy.get(getTestSelector('tokens-network-filter-selected')).should('contain', 'Optimism')
     cy.get(getTestSelector('chain-selector-logo')).invoke('attr', 'alt').should('eq', 'Ethereum')
   })
 })

cypress/e2e/universal-search.test.ts

@@ -30,7 +30,7 @@ describe('Universal search bar', () => {
       .and('contain.text', '$')
       .and('contain.text', '%')
       .click()
-    cy.location('hash').should('equal', '#/tokens/ethereum/0x1f9840a85d5af5bf1d1762f925bdaddc4201f984')
+    cy.location('pathname').should('equal', '/tokens/ethereum/0x1f9840a85d5af5bf1d1762f925bdaddc4201f984')
 
     openSearch()
     cy.get(getTestSelector('searchbar-dropdown'))

cypress/e2e/wallet-dropdown.test.ts

@@ -32,11 +32,11 @@ describe('Wallet Dropdown', () => {
       }
 
       cy.get(getTestSelector('wallet-language-item')).contains('Afrikaans').click({ force: true })
-      cy.location('hash').should('match', /\?lng=af-ZA$/)
+      cy.location('search').should('match', /\?lng=af-ZA$/)
       cy.contains('Uniswap available in: English')
 
       cy.get(getTestSelector('wallet-language-item')).contains('English').click({ force: true })
-      cy.location('hash').should('match', /\?lng=en-US$/)
+      cy.location('search').should('match', /\?lng=en-US$/)
       cy.contains('Uniswap available in: English').should('not.exist')
     })
   }
@@ -153,6 +153,8 @@ describe('Wallet Dropdown', () => {
       cy.contains('USD')
 
       cy.visit('/?cur=AUD', { featureFlags: [FeatureFlag.currencyConversion] })
+      cy.get(getTestSelector('web3-status-connected')).click()
+      cy.get(getTestSelector('wallet-settings')).click()
       cy.contains('AUD')
     })
 
@@ -164,11 +166,11 @@ describe('Wallet Dropdown', () => {
 
       cy.get(getTestSelector('local-currency-settings-button')).click()
       cy.get(getTestSelector('wallet-local-currency-item')).contains('AUD').click({ force: true })
-      cy.location('hash').should('match', /\?cur=AUD$/)
+      cy.location('search').should('match', /\?cur=AUD$/)
       cy.contains('AUD')
 
       cy.get(getTestSelector('wallet-local-currency-item')).contains('USD').click({ force: true })
-      cy.location('hash').should('match', /\?cur=USD$/)
+      cy.location('search').should('match', /\?cur=USD$/)
       cy.contains('USD')
     })
   })

cypress/staging/t9n.test.ts

@@ -12,7 +12,7 @@ describe('translations', () => {
     cy.get(getTestSelector('web3-status-connected')).click()
     cy.get(getTestSelector('wallet-settings')).click()
     cy.get(getTestSelector('wallet-language-item')).contains('français').click({ force: true })
-    cy.location('hash').should('match', /\?lng=fr-FR$/)
+    cy.location('search').should('match', /\?lng=fr-FR$/)
     cy.contains('Échanger')
     cy.contains('Uniswap disponible en : English')
   })

cypress/support/commands.ts

@@ -41,16 +41,13 @@ Cypress.Commands.overwrite(
   (original, url: string | Partial<Cypress.VisitOptions>, options?: Partial<Cypress.VisitOptions>) => {
     if (typeof url !== 'string') throw new Error('Invalid arguments. The first argument to cy.visit must be the path.')
 
-    // Add a hash in the URL if it is not present (to use hash-based routing correctly with queryParams).
-    const hashUrl = url.startsWith('/') && url.length > 2 && !url.startsWith('/#') ? `/#${url}` : url
-
     return cy
       .intercept('/service-worker.js', options?.serviceWorker ? undefined : { statusCode: 404 })
       .provider()
       .then((provider) =>
         original({
           ...options,
-          url: hashUrl,
+          url,
           onBeforeLoad(win) {
             options?.onBeforeLoad?.(win)
 

package.json

@@ -21,7 +21,7 @@
     "start:cloud": "NODE_OPTIONS=--dns-result-order=ipv4first PORT=3001 npx wrangler pages dev --compatibility-flags=nodejs_compat --compatibility-date=2023-08-01 --proxy=3001 --port=3000 -- yarn start",
     "build": "craco build",
     "analyze": "source-map-explorer 'build/static/js/*.js' --only-mapped",
-    "serve": "serve build -l 3000",
+    "serve": "serve build -s -l 3000",
     "lint": "yarn eslint --ignore-path .gitignore --cache --cache-location node_modules/.cache/eslint/ .",
     "typecheck": "tsc",
     "typecheck:cloud": "tsc -p functions/tsconfig.json",
@@ -105,7 +105,6 @@
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "@types/react-redux": "^7.1.24",
-    "@types/react-router-dom": "^5.3.3",
     "@types/react-table": "^7.7.12",
     "@types/react-virtualized-auto-sizer": "^1.0.0",
     "@types/react-window": "^1.8.2",

src/components/FiatOnrampModal/index.tsx

 import { Trans } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
 import { useCallback, useEffect, useState } from 'react'
+import { useHref } from 'react-router-dom'
 import { useCloseModal, useModalIsOpen } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
 import styled, { useTheme } from 'styled-components'
@@ -79,6 +80,8 @@ export default function FiatOnrampModal() {
   const [error, setError] = useState<string | null>(null)
   const [loading, setLoading] = useState(false)
 
+  const swapUrl = useHref('/swap')
+
   const fetchSignedIframeUrl = useCallback(async () => {
     if (!account) {
       setError('Please connect an account before making a purchase.')
@@ -98,7 +101,7 @@ export default function FiatOnrampModal() {
           theme: isDarkMode ? 'dark' : 'light',
           colorCode: theme.accent1,
           defaultCurrencyCode: 'eth',
-          redirectUrl: 'https://app.uniswap.org/#/swap',
+          redirectUrl: swapUrl,
           walletAddresses: JSON.stringify(
             MOONPAY_SUPPORTED_CURRENCY_CODES.reduce(
               (acc, currencyCode) => ({
@@ -118,7 +121,7 @@ export default function FiatOnrampModal() {
     } finally {
       setLoading(false)
     }
-  }, [account, isDarkMode, theme.accent1])
+  }, [account, isDarkMode, swapUrl, theme.accent1])
 
   useEffect(() => {
     fetchSignedIframeUrl()

src/components/Tokens/TokenTable/__snapshots__/TokenRow.test.tsx.snap

@@ -343,7 +343,7 @@ exports[`LoadedRow.tsx renders a row 1`] = `
   >
     <a
       class="c0"
-      href="#/tokens/ethereum/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48"
+      href="/tokens/ethereum/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48"
     >
       <div
         class="c1"

src/index.tsx

@@ -12,8 +12,9 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { Provider } from 'react-redux'
-import { HashRouter } from 'react-router-dom'
+import { BrowserRouter, HashRouter } from 'react-router-dom'
 import { SystemThemeUpdater } from 'theme/components/ThemeToggle'
+import { isBrowserRouterEnabled } from 'utils/env'
 
 import Web3Provider from './components/Web3Provider'
 import { LanguageProvider } from './i18n'
@@ -51,12 +52,14 @@ const queryClient = new QueryClient()
 
 const container = document.getElementById('root') as HTMLElement
 
+const Router = isBrowserRouterEnabled() ? BrowserRouter : HashRouter
+
 createRoot(container).render(
   <StrictMode>
     <Provider store={store}>
       <FeatureFlagsProvider>
         <QueryClientProvider client={queryClient}>
-          <HashRouter>
+          <Router>
             <LanguageProvider>
               <Web3Provider>
                 <ApolloProvider client={apolloClient}>
@@ -70,7 +73,7 @@ createRoot(container).render(
                 </ApolloProvider>
               </Web3Provider>
             </LanguageProvider>
-          </HashRouter>
+          </Router>
         </QueryClientProvider>
       </FeatureFlagsProvider>
     </Provider>

src/nft/components/card/containers.tsx

@@ -95,7 +95,7 @@ const ActionButton = ({
     <StyledActionButton
       selected={isSelected}
       isDisabled={isDisabled}
-      onClick={(e: React.MouseEvent) => (isDisabled ? undefined : clickActionButton(e))}
+      onClick={(e) => (isDisabled ? undefined : clickActionButton(e))}
     >
       {children}
     </StyledActionButton>

src/nft/components/collection/Activity.css.ts

@@ -38,6 +38,7 @@ export const eventRow = style([
     borderBottomColor: 'surface3',
   }),
   {
+    textDecoration: 'none',
     height: '84px',
     ':hover': {
       background: themeVars.colors.surface1,

src/nft/components/collection/Activity.tsx

@@ -3,11 +3,11 @@ import { NftActivityType } from 'graphql/data/__generated__/types-and-hooks'
 import { useNftActivity } from 'graphql/data/nft/NftActivity'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
-import { useBag, useIsMobile } from 'nft/hooks'
-import { useNativeUsdPrice } from 'nft/hooks/useUsdPrice'
-import { ActivityEvent, ActivityEventType } from 'nft/types'
+import { useBag, useIsMobile, useNativeUsdPrice } from 'nft/hooks'
+import { ActivityEventType } from 'nft/types'
 import { useCallback, useReducer } from 'react'
 import InfiniteScroll from 'react-infinite-scroll-component'
+import { Link } from 'react-router-dom'
 import styled from 'styled-components'
 
 import * as styles from './Activity.css'
@@ -60,8 +60,6 @@ export const reduceFilters = (state: typeof initialFilterState, action: { eventT
   return { ...state, [action.eventType]: !state[action.eventType] }
 }
 
-const baseHref = (event: ActivityEvent) => `/#/nfts/asset/${event.collectionAddress}/${event.tokenId}?origin=activity`
-
 export const Activity = ({ contractAddress, rarityVerified, collectionName, chainId }: ActivityProps) => {
   const [activeFilters, filtersDispatch] = useReducer(reduceFilters, initialFilterState)
 
@@ -126,9 +124,11 @@ export const Activity = ({ contractAddress, rarityVerified, collectionName, chai
                 (event, i) =>
                   event.eventType && (
                     <Box
-                      as="a"
+                      as={Link}
                       data-testid="nft-activity-row"
-                      href={baseHref(event)}
+                      // @ts-ignore Box component is not typed properly to typecheck
+                      // custom components' props and will incorrectly report `to` as invalid
+                      to={`/nfts/asset/${event.collectionAddress}/${event.tokenId}?origin=activity`}
                       className={styles.eventRow}
                       key={i}
                     >

src/nft/components/collection/__snapshots__/CollectionAsset.test.tsx.snap

@@ -308,7 +308,7 @@ exports[`NftCard renders correctly 1`] = `
   >
     <a
       class="c1"
-      href="#/nfts/asset/0xed5af388653567af2f388e6224dc7c4b3241c544/3318?origin=collection"
+      href="/nfts/asset/0xed5af388653567af2f388e6224dc7c4b3241c544/3318?origin=collection"
     >
       <div
         class="c2"

src/nft/utils/asset.tsx

@@ -79,17 +79,15 @@ export const getMarketplaceIcon = (marketplace: string, size: string | number =
 export const generateTweetForAsset = (asset: GenieAsset): string => {
   return `https://twitter.com/intent/tweet?text=Check%20out%20${
     asset.name ? encodeURIComponent(asset.name) : `${asset.collectionName}%20%23${asset.tokenId}`
-  }%20(${asset.collectionName})%20https://app.uniswap.org/%23/nfts/asset/${asset.address}/${
-    asset.tokenId
-  }%20via%20@uniswap`
+  }%20(${asset.collectionName})%20https://app.uniswap.org/nfts/asset/${asset.address}/${asset.tokenId}%20via%20@uniswap`
 }
 
 export const generateTweetForPurchase = (assets: UpdatedGenieAsset[], txHashUrl: string): string => {
   const multipleCollections = assets.length > 0 && assets.some((asset) => asset.address !== assets[0].address)
-  const collectionUrl = assets.length > 0 && !multipleCollections ? `/collection/${assets[0].address}` : ''
+  const collectionUrl = assets.length > 0 && !multipleCollections ? `collection/${assets[0].address}` : ''
   const tweetText = `I just purchased ${
     multipleCollections ? `${assets.length} NFTs` : `${assets.length} ${assets[0].collectionName ?? 'NFT'}`
-  } with @Uniswap 🦄\n\nhttps://app.uniswap.org/#/nfts${collectionUrl}\n${txHashUrl}`
+  } with @Uniswap 🦄\n\nhttps://app.uniswap.org/nfts/${collectionUrl}\n${txHashUrl}`
   return `https://twitter.com/intent/tweet?text=${encodeURIComponent(tweetText)}`
 }
 
@@ -119,10 +117,10 @@ export const generateTweetForList = (assets: WalletAsset[]): string => {
             : `${assets[0].collection?.name} ` ?? ''
         }${assets[0].name} for ${getMinListingPrice(assets[0].newListings ?? [])} ETH on ${assets[0].marketplaces
           ?.map((market) => market.name)
-          .join(', ')}. Buy it on @Uniswap at https://app.uniswap.org/#${getAssetHref(assets[0])}`
+          .join(', ')}. Buy it on @Uniswap at https://app.uniswap.org/${getAssetHref(assets[0])}`
       : `I just listed ${
           assets.length
-        } items on @Uniswap at https://app.uniswap.org/#/nfts/profile\n\nCollections: ${mapAssetsToCollections(assets)
+        } items on @Uniswap at https://app.uniswap.org/nfts/profile\n\nCollections: ${mapAssetsToCollections(assets)
           .map(({ collection, items }) => `${collection} ${items.map((item) => item).join(', ')}`)
           .join(', ')} \n\nMarketplaces: ${assets[0].marketplaces?.map((market) => market.name).join(', ')}`
   return `https://twitter.com/intent/tweet?text=${encodeURIComponent(tweetText)}`

src/pages/App.tsx

@@ -17,7 +17,7 @@ import { useIsDarkMode } from 'theme/components/ThemeToggle'
 import { flexRowNoWrap } from 'theme/styles'
 import { Z_INDEX } from 'theme/zIndex'
 import { STATSIG_DUMMY_KEY } from 'tracing'
-import { getEnvName } from 'utils/env'
+import { getEnvName, isBrowserRouterEnabled } from 'utils/env'
 import { getCurrentPageFromLocation } from 'utils/urlRoutes'
 import { getCLS, getFCP, getFID, getLCP, Metric } from 'web-vitals'
 
@@ -112,7 +112,8 @@ export default function App() {
   const isLoaded = useFeatureFlagsIsLoaded()
   const [shouldDisableNFTRoutes, setShouldDisableNFTRoutes] = useAtom(shouldDisableNFTRoutesAtom)
 
-  const { pathname } = useLocation()
+  const browserRouterEnabled = isBrowserRouterEnabled()
+  const { hash, pathname } = useLocation()
   const currentPage = getCurrentPageFromLocation(pathname)
   const isDarkMode = useIsDarkMode()
   const [routerPreference] = useRouterPreference()
@@ -211,7 +212,13 @@ export default function App() {
             <Suspense fallback={<Loader />}>
               {isLoaded ? (
                 <Routes>
-                  <Route path="/" element={<Landing />} />
+                  <Route
+                    path="/"
+                    element={
+                      // If we match "/" and # is defined, we are using BrowserRouter and need to redirect.
+                      browserRouterEnabled && hash ? <Navigate to={hash.replace('#', '')} replace /> : <Landing />
+                    }
+                  />
 
                   <Route path="tokens" element={<Tokens />}>
                     <Route path=":chainName" />

src/pages/Landing/__snapshots__/index.test.tsx.snap

@@ -1743,7 +1743,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
     >
       <a
         class="c2"
-        href="#/swap"
+        href="/swap"
       >
         <div
           class="c3"
@@ -2073,7 +2073,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
       >
         <a
           class="c2 c15 c58 c59"
-          href="#/swap"
+          href="/swap"
         >
           <p
             class="c60"
@@ -2140,7 +2140,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
       >
         <a
           class="c66"
-          href="#/swap"
+          href="/swap"
         >
           <div
             class="c67"
@@ -2220,7 +2220,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
         </a>
         <a
           class="c72"
-          href="#/pools"
+          href="/pools"
         >
           <div
             class="c67"
@@ -2405,19 +2405,19 @@ exports[`disable nft on landing page does not render nft information and card 1`
             </span>
             <a
               class="c96 c97"
-              href="#/swap"
+              href="/swap"
             >
               Swap
             </a>
             <a
               class="c96 c97"
-              href="#/tokens"
+              href="/tokens"
             >
               Tokens
             </a>
             <a
               class="c96 c97"
-              href="#/pools"
+              href="/pools"
             >
               Pools
             </a>
@@ -4358,7 +4358,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
     >
       <a
         class="c2"
-        href="#/swap"
+        href="/swap"
       >
         <div
           class="c3"
@@ -4688,7 +4688,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
       >
         <a
           class="c2 c15 c58 c59"
-          href="#/swap"
+          href="/swap"
         >
           <p
             class="c60"
@@ -4755,7 +4755,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
       >
         <a
           class="c66"
-          href="#/swap"
+          href="/swap"
         >
           <div
             class="c67"
@@ -4781,7 +4781,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
         </a>
         <a
           class="c71"
-          href="#/nfts"
+          href="/nfts"
         >
           <div
             class="c67"
@@ -4861,7 +4861,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
         </a>
         <a
           class="c73"
-          href="#/pools"
+          href="/pools"
         >
           <div
             class="c67"
@@ -5046,25 +5046,25 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
             </span>
             <a
               class="c97 c98"
-              href="#/swap"
+              href="/swap"
             >
               Swap
             </a>
             <a
               class="c97 c98"
-              href="#/tokens"
+              href="/tokens"
             >
               Tokens
             </a>
             <a
               class="c97 c98"
-              href="#/nfts"
+              href="/nfts"
             >
               NFTs
             </a>
             <a
               class="c97 c98"
-              href="#/pools"
+              href="/pools"
             >
               Pools
             </a>

src/pages/Pool/PositionPage.tsx

@@ -2,7 +2,7 @@ import { BigNumber } from '@ethersproject/bignumber'
 import type { TransactionResponse } from '@ethersproject/providers'
 import { Trans } from '@lingui/macro'
 import { InterfacePageName } from '@uniswap/analytics-events'
-import { ChainId, Currency, CurrencyAmount, Fraction, Percent, Price, Token } from '@uniswap/sdk-core'
+import { Currency, CurrencyAmount, Fraction, Percent, Price, Token } from '@uniswap/sdk-core'
 import { NonfungiblePositionManager, Pool, Position } from '@uniswap/v3-sdk'
 import { useWeb3React } from '@web3-react/core'
 import { Trace } from 'analytics'
@@ -29,12 +29,12 @@ import { useV3PositionFees } from 'hooks/useV3PositionFees'
 import { useV3PositionFromTokenId } from 'hooks/useV3Positions'
 import { useSingleCallResult } from 'lib/hooks/multicall'
 import useNativeCurrency from 'lib/hooks/useNativeCurrency'
-import { useCallback, useMemo, useRef, useState } from 'react'
+import { PropsWithChildren, useCallback, useMemo, useRef, useState } from 'react'
 import { Link, useParams } from 'react-router-dom'
 import { Bound } from 'state/mint/v3/actions'
 import { useIsTransactionPending, useTransactionAdder } from 'state/transactions/hooks'
 import styled, { useTheme } from 'styled-components'
-import { ExternalLink, HideExtraSmall, HideSmall, ThemedText } from 'theme'
+import { ExternalLink, HideExtraSmall, HideSmall, StyledRouterLink, ThemedText } from 'theme'
 import { currencyId } from 'utils/currencyId'
 import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
 import { formatPrice, NumberType } from 'utils/formatNumbers'
@@ -52,15 +52,6 @@ import { calculateGasMargin } from '../../utils/calculateGasMargin'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import { LoadingRows } from './styled'
 
-const getTokenLink = (chainId: ChainId, address: string) => {
-  if (isGqlSupportedChain(chainId)) {
-    const chainName = CHAIN_IDS_TO_NAMES[chainId]
-    return `${window.location.origin}/#/tokens/${chainName}/${address}`
-  } else {
-    return getExplorerLink(chainId, address, ExplorerDataType.TOKEN)
-  }
-}
-
 const PositionPageButtonPrimary = styled(ButtonPrimary)`
   width: 228px;
   height: 40px;
@@ -211,17 +202,31 @@ function CurrentPriceCard({
   )
 }
 
+const TokenLink = ({
+  children,
+  chainId,
+  address,
+}: PropsWithChildren<{ chainId: keyof typeof CHAIN_IDS_TO_NAMES; address: string }>) => {
+  const chainName = CHAIN_IDS_TO_NAMES[chainId]
+  return <StyledRouterLink to={`/tokens/${chainName}/${address}`}>{children}</StyledRouterLink>
+}
+
+const ExternalTokenLink = ({ children, chainId, address }: PropsWithChildren<{ chainId: number; address: string }>) => {
+  return <ExternalLink href={getExplorerLink(chainId, address, ExplorerDataType.TOKEN)}>{children}</ExternalLink>
+}
+
 function LinkedCurrency({ chainId, currency }: { chainId?: number; currency?: Currency }) {
   const address = (currency as Token)?.address
 
   if (typeof chainId === 'number' && address) {
+    const Link = isGqlSupportedChain(chainId) ? TokenLink : ExternalTokenLink
     return (
-      <ExternalLink href={getTokenLink(chainId, address)}>
+      <Link chainId={chainId} address={address}>
         <RowFixed>
           <CurrencyLogo currency={currency} size="20px" style={{ marginRight: '0.5rem' }} />
           <ThemedText.DeprecatedMain>{currency?.symbol} ↗</ThemedText.DeprecatedMain>
         </RowFixed>
-      </ExternalLink>
+      </Link>
     )
   }
 

src/serviceWorker/document.test.ts

@@ -17,15 +17,15 @@ describe('document', () => {
       [{ request: { mode: 'navigate' }, url: { hostname: 'example.com', pathname: '' } }, false],
       [{ request: {}, url: { hostname: 'app.uniswap.org', pathname: '' } }, false],
       [{ request: { mode: 'navigate' }, url: { hostname: 'app.uniswap.org', pathname: '' } }, true],
-      [{ request: { mode: 'navigate' }, url: { hostname: 'app.uniswap.org', pathname: '/#/swap' } }, true],
+      [{ request: { mode: 'navigate' }, url: { hostname: 'app.uniswap.org', pathname: '/swap' } }, true],
       [{ request: { mode: 'navigate' }, url: { hostname: 'app.uniswap.org', pathname: '/asset.gif' } }, false],
-      [{ request: {}, url: { hostname: 'app.uniswap-staging.org', pathname: '' } }, false],
-      [{ request: { mode: 'navigate' }, url: { hostname: 'app.uniswap-staging.org', pathname: '' } }, true],
-      [{ request: { mode: 'navigate' }, url: { hostname: 'app.uniswap-staging.org', pathname: '/#/swap' } }, true],
-      [{ request: { mode: 'navigate' }, url: { hostname: 'app.uniswap-staging.org', pathname: '/asset.gif' } }, false],
+      [{ request: {}, url: { hostname: 'app.corn-staging.com', pathname: '' } }, false],
+      [{ request: { mode: 'navigate' }, url: { hostname: 'app.corn-staging.com', pathname: '' } }, true],
+      [{ request: { mode: 'navigate' }, url: { hostname: 'app.corn-staging.com', pathname: '/swap' } }, true],
+      [{ request: { mode: 'navigate' }, url: { hostname: 'app.corn-staging.com', pathname: '/asset.gif' } }, false],
       [{ request: {}, url: { hostname: 'localhost', pathname: '' } }, false],
       [{ request: { mode: 'navigate' }, url: { hostname: 'localhost', pathname: '' } }, true],
-      [{ request: { mode: 'navigate' }, url: { hostname: 'localhost', pathname: '/#/swap' } }, true],
+      [{ request: { mode: 'navigate' }, url: { hostname: 'localhost', pathname: '/swap' } }, true],
       [{ request: { mode: 'navigate' }, url: { hostname: 'localhost', pathname: '/asset.gif' } }, false],
     ] as [RouteMatchCallbackOptions, boolean][]
 

src/test-utils/render.tsx

@@ -10,7 +10,7 @@ import { en } from 'make-plural/plurals'
 import { ReactElement, ReactNode } from 'react'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { Provider } from 'react-redux'
-import { HashRouter } from 'react-router-dom'
+import { BrowserRouter } from 'react-router-dom'
 import store from 'state'
 import ThemeProvider from 'theme'
 
@@ -30,7 +30,7 @@ const WithProviders = ({ children }: { children?: ReactNode }) => {
     <MockedI18nProvider>
       <Provider store={store}>
         <QueryClientProvider client={queryClient}>
-          <HashRouter>
+          <BrowserRouter>
             {/*
              * Web3Provider is mocked through setupTests.ts
              * To test behavior that depends on Web3Provider, use jest.unmock('@web3-react/core')
@@ -40,7 +40,7 @@ const WithProviders = ({ children }: { children?: ReactNode }) => {
                 <ThemeProvider>{children}</ThemeProvider>
               </BlockNumberProvider>
             </MockedProvider>
-          </HashRouter>
+          </BrowserRouter>
         </QueryClientProvider>
       </Provider>
     </MockedI18nProvider>

src/tracing/trace.test.ts

@@ -103,7 +103,7 @@ describe('trace', () => {
       const errorEvent: ErrorEvent = {
         type: undefined,
         request: {
-          url: 'https://app.uniswap.org/#/pools',
+          url: 'https://app.uniswap.org/pools',
         },
       }
       const eventHint: EventHint = {}
@@ -114,7 +114,7 @@ describe('trace', () => {
       const errorEvent: ErrorEvent = {
         type: undefined,
         request: {
-          url: 'https://app.uniswap.org/#',
+          url: 'https://app.uniswap.org/',
         },
       }
       const eventHint: EventHint = {}

src/utils/env.ts

@@ -20,7 +20,25 @@ export function isAppUniswapOrg({ hostname }: { hostname: string }): boolean {
 }
 
 export function isAppUniswapStagingOrg({ hostname }: { hostname: string }): boolean {
-  return hostname === 'app.uniswap-staging.org'
+  return hostname === 'app.corn-staging.com'
+}
+
+export function isBrowserRouterEnabled(): boolean {
+  if (isProductionEnv()) {
+    if (
+      isAppUniswapOrg(window.location) ||
+      isAppUniswapStagingOrg(window.location) ||
+      isLocalhost(window.location) // cypress tests
+    ) {
+      return true
+    }
+    return false // production builds *not* served through our domains or localhost, eg IPFS
+  }
+  return true // local dev builds
+}
+
+function isLocalhost({ hostname }: { hostname: string }): boolean {
+  return hostname === 'localhost'
 }
 
 export function isSentryEnabled(): boolean {

yarn.lock

@@ -5625,11 +5625,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/history@*", "@types/history@^4.7.11":
-  version "4.7.11"
-  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64"
-  integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==
-
 "@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.0", "@types/hoist-non-react-statics@^3.3.1":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
@@ -5824,23 +5819,6 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
-"@types/react-router-dom@^5.3.3":
-  version "5.3.3"
-  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83"
-  integrity sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==
-  dependencies:
-    "@types/history" "^4.7.11"
-    "@types/react" "*"
-    "@types/react-router" "*"
-
-"@types/react-router@*":
-  version "5.1.16"
-  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.16.tgz#f3ba045fb96634e38b21531c482f9aeb37608a99"
-  integrity sha512-8d7nR/fNSqlTFGHti0R3F9WwIertOaaA1UEB8/jr5l5mDMOs4CidEgvvYMw4ivqrBK+vtVLxyTj2P+Pr/dtgzg==
-  dependencies:
-    "@types/history" "*"
-    "@types/react" "*"
-
 "@types/react-table@^7.7.12":
   version "7.7.12"
   resolved "https://registry.yarnpkg.com/@types/react-table/-/react-table-7.7.12.tgz#628011d3cb695b07c678704a61f2f1d5b8e567fd"