From 63bf1c0ac83437f8bdaf8777d9deb18c79326cf8 Mon Sep 17 00:00:00 2001 From: Zach Pomerantz Date: Fri, 8 Sep 2023 10:43:59 -0700 Subject: [PATCH] feat: path-based routing (#7275) --- README.md | 8 ++--- cypress/e2e/nfts.test.ts | 8 ++--- cypress/e2e/token-explore.test.ts | 2 -- cypress/e2e/universal-search.test.ts | 2 +- cypress/e2e/wallet-dropdown.test.ts | 10 +++--- cypress/staging/t9n.test.ts | 2 +- cypress/support/commands.ts | 5 +-- package.json | 3 +- src/components/FiatOnrampModal/index.tsx | 7 ++-- .../__snapshots__/TokenRow.test.tsx.snap | 2 +- src/index.tsx | 9 +++-- src/nft/components/card/containers.tsx | 2 +- src/nft/components/collection/Activity.css.ts | 1 + src/nft/components/collection/Activity.tsx | 14 ++++---- .../CollectionAsset.test.tsx.snap | 2 +- src/nft/utils/asset.tsx | 12 +++---- src/pages/App.tsx | 13 ++++++-- .../Landing/__snapshots__/index.test.tsx.snap | 32 +++++++++--------- src/pages/Pool/PositionPage.tsx | 33 +++++++++++-------- src/serviceWorker/document.test.ts | 12 +++---- src/test-utils/render.tsx | 6 ++-- src/tracing/trace.test.ts | 4 +-- src/utils/env.ts | 20 ++++++++++- yarn.lock | 22 ------------- 24 files changed, 120 insertions(+), 111 deletions(-) diff --git a/README.md b/README.md index 959e9c5eae..9c850bf342 100644 --- 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: -- View V2 liquidity: -- Add V2 liquidity: -- Migrate V2 liquidity to V3: +- Swap on Uniswap V2: +- View V2 liquidity: +- Add V2 liquidity: +- Migrate V2 liquidity to V3: ## Accessing Uniswap V1 diff --git a/cypress/e2e/nfts.test.ts b/cypress/e2e/nfts.test.ts index 22b08a8b61..cd882b5e1f 100644 --- 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() diff --git a/cypress/e2e/token-explore.test.ts b/cypress/e2e/token-explore.test.ts index a418ac6b23..4a0c9aecbe 100644 --- 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') }) }) diff --git a/cypress/e2e/universal-search.test.ts b/cypress/e2e/universal-search.test.ts index e1841a8e91..aaddb41f9d 100644 --- 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')) diff --git a/cypress/e2e/wallet-dropdown.test.ts b/cypress/e2e/wallet-dropdown.test.ts index 2378d3889d..3e88e8c715 100644 --- 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') }) }) diff --git a/cypress/staging/t9n.test.ts b/cypress/staging/t9n.test.ts index 16dbc1da76..d59fd7ec7d 100644 --- 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') }) diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index 3e574d8bb6..43ca7cd043 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -41,16 +41,13 @@ Cypress.Commands.overwrite( (original, url: string | Partial, options?: Partial) => { 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) diff --git a/package.json b/package.json index 213d6d7b55..768b95a4d2 100644 --- 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", diff --git a/src/components/FiatOnrampModal/index.tsx b/src/components/FiatOnrampModal/index.tsx index 12bce2db8f..0aa1e90be6 100644 --- 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(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() diff --git a/src/components/Tokens/TokenTable/__snapshots__/TokenRow.test.tsx.snap b/src/components/Tokens/TokenTable/__snapshots__/TokenRow.test.tsx.snap index 5bb772b8d4..ca1d4c8f30 100644 --- 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`] = ` >
- + @@ -70,7 +73,7 @@ createRoot(container).render( - + diff --git a/src/nft/components/card/containers.tsx b/src/nft/components/card/containers.tsx index d0e1edc383..0f8a1de418 100644 --- a/src/nft/components/card/containers.tsx +++ b/src/nft/components/card/containers.tsx @@ -95,7 +95,7 @@ const ActionButton = ({ (isDisabled ? undefined : clickActionButton(e))} + onClick={(e) => (isDisabled ? undefined : clickActionButton(e))} > {children} diff --git a/src/nft/components/collection/Activity.css.ts b/src/nft/components/collection/Activity.css.ts index 1dca3fea1a..d1bf0c958a 100644 --- 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, diff --git a/src/nft/components/collection/Activity.tsx b/src/nft/components/collection/Activity.tsx index c6e57a690b..a179044daa 100644 --- 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 && ( diff --git a/src/nft/components/collection/__snapshots__/CollectionAsset.test.tsx.snap b/src/nft/components/collection/__snapshots__/CollectionAsset.test.tsx.snap index 8f6077d6d8..e60138298e 100644 --- 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`] = ` >
{ 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)}` diff --git a/src/pages/App.tsx b/src/pages/App.tsx index e469f5a884..477b223c19 100644 --- 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() { }> {isLoaded ? ( - } /> + : + } + /> }> diff --git a/src/pages/Landing/__snapshots__/index.test.tsx.snap b/src/pages/Landing/__snapshots__/index.test.tsx.snap index e7c4c7fad2..fdf33ad9fe 100644 --- 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` >

Swap Tokens Pools @@ -4358,7 +4358,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` >

Swap Tokens NFTs Pools diff --git a/src/pages/Pool/PositionPage.tsx b/src/pages/Pool/PositionPage.tsx index 461bfbb436..0df2e641b0 100644 --- 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 {children} +} + +const ExternalTokenLink = ({ children, chainId, address }: PropsWithChildren<{ chainId: number; address: string }>) => { + return {children} +} + 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 ( - + {currency?.symbol} ↗ - + ) } diff --git a/src/serviceWorker/document.test.ts b/src/serviceWorker/document.test.ts index 9d3f42e67b..96314efb56 100644 --- 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][] diff --git a/src/test-utils/render.tsx b/src/test-utils/render.tsx index dfa3265519..58feb5f976 100644 --- 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 }) => { - + {/* * 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 }) => { {children} - + diff --git a/src/tracing/trace.test.ts b/src/tracing/trace.test.ts index 2d6da02e4a..ffda5c5599 100644 --- 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 = {} diff --git a/src/utils/env.ts b/src/utils/env.ts index c982606692..bdc0b6647e 100644 --- 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 { diff --git a/yarn.lock b/yarn.lock index a218e9826a..a70b763bd9 100644 --- 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"