feat: path-based routing (#7275)

2023-09-08 10:43:59 -07:00 · 2023-09-08 10:43:59 -07:00 · 63bf1c0ac8
commit 63bf1c0ac8
parent 44e3b87ae1
24 changed files with 120 additions and 111 deletions
--- a/README.md
+++ b/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

--- a/cypress/e2e/nfts.test.ts
+++ b/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()
--- a/cypress/e2e/token-explore.test.ts
+++ b/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')
  })
 })
--- a/cypress/e2e/universal-search.test.ts
+++ b/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'))
--- a/cypress/e2e/wallet-dropdown.test.ts
+++ b/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')
    })
  })
--- a/cypress/staging/t9n.test.ts
+++ b/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')
  })
--- a/cypress/support/commands.ts
+++ b/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)

--- a/package.json
+++ b/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",
--- a/src/components/FiatOnrampModal/index.tsx
+++ b/src/components/FiatOnrampModal/index.tsx
@ -1,6 +1,7 @@
 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()
--- a/src/components/Tokens/TokenTable/snapshots/TokenRow.test.tsx.snap
+++ b/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"
--- a/src/index.tsx
+++ b/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>
--- a/src/nft/components/card/containers.tsx
+++ b/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>
--- a/src/nft/components/collection/Activity.css.ts
+++ b/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,
--- a/src/nft/components/collection/Activity.tsx
+++ b/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}
                    >
--- a/src/nft/components/collection/snapshots/CollectionAsset.test.tsx.snap
+++ b/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"
--- a/src/nft/utils/asset.tsx
+++ b/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)}`
--- a/src/pages/App.tsx
+++ b/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" />
--- a/src/pages/Landing/snapshots/index.test.tsx.snap
+++ b/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>
--- a/src/pages/Pool/PositionPage.tsx
+++ b/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>
    )
  }

--- a/src/serviceWorker/document.test.ts
+++ b/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][]

--- a/src/test-utils/render.tsx
+++ b/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>
--- a/src/tracing/trace.test.ts
+++ b/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 = {}
--- a/src/utils/env.ts
+++ b/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 {
--- a/yarn.lock
+++ b/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"