Merge pull request #71 from DarkFlorist/minor-fixes

Minor fixes

public/index.html

@@ -5,13 +5,22 @@
 
     <title>Horswap</title>
 
+    <!-- support hosting from a subpath such as ipfs -->
+    <script>
+      const subPath = window.location.pathname.replace('index.html', '').replace(/\/$/, '')
+      if (subPath) {
+        const baseElement = document.createElement('base')
+        baseElement.setAttribute('href', `${subPath}/`)
+        document.head.appendChild(baseElement)
+      }
+    </script>
+
     <!--
-      %PUBLIC_URL% will be replaced with the URL of the `public` folder during build.
       Only files inside the `public` folder can be referenced from the HTML.
     -->
-    <link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/favicon.png" />
-    <link rel="apple-touch-icon" sizes="192x192" href="%PUBLIC_URL%/images/192x192_App_Icon.png" />
-    <link rel="apple-touch-icon" sizes="512x512" href="%PUBLIC_URL%/images/512x512_App_Icon.png" />
+    <link rel="shortcut icon" type="image/png" href="./favicon.png" />
+    <link rel="apple-touch-icon" sizes="192x192" href="./images/192x192_App_Icon.png" />
+    <link rel="apple-touch-icon" sizes="512x512" href="./images/512x512_App_Icon.png" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <meta name="theme-color" content="#fff" />
@@ -28,10 +37,10 @@
       manifest.json provides metadata used when the app is installed as a PWA.
       See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="./manifest.json" />
 
-    <link rel="preload" href="%PUBLIC_URL%/fonts/Basel-Book.woff" as="font" type="font/woff" crossorigin />
-    <link rel="preload" href="%PUBLIC_URL%/fonts/Basel-Medium.woff" as="font" type="font/woff" crossorigin />
+    <link rel="preload" href="./fonts/Basel-Book.woff" as="font" type="font/woff" crossorigin />
+    <link rel="preload" href="./fonts/Basel-Medium.woff" as="font" type="font/woff" crossorigin />
 
 
     <style>
@@ -50,7 +59,7 @@
         font-display: block;
         font-named-instance: 'Book';
         src: 
-          url(%PUBLIC_URL%/fonts/Basel-Medium.woff) format('woff');
+          url(./fonts/Basel-Medium.woff) format('woff');
       }
 
       @font-face {
@@ -60,7 +69,7 @@
         font-display: block;
         font-named-instance: 'Book';
         src: 
-          url(%PUBLIC_URL%/fonts/Basel-Book.woff) format('woff');
+          url(./fonts/Basel-Book.woff) format('woff');
       }
 
       @supports (font-variation-settings: normal) {

src/components/NavBar/MenuDropdown.tsx

@@ -15,7 +15,6 @@ import { themeVars } from 'nft/css/sprinkles.css'
 import { ReactNode, useReducer, useRef } from 'react'
 import { NavLink, NavLinkProps } from 'react-router-dom'
 import styled, { useTheme } from 'styled-components'
-import { isDevelopmentEnv, isStagingEnv } from 'utils/env'
 
 import * as styles from './MenuDropdown.css'
 import { NavDropdown } from './NavDropdown'
@@ -163,15 +162,6 @@ export const MenuDropdown = () => {
                 <SecondaryLinkedText href="https://docs.uniswap.org/">
                   <Trans>Documentation</Trans> ↗
                 </SecondaryLinkedText>
-                {(isDevelopmentEnv() || isStagingEnv()) && (
-                  <SecondaryLinkedText
-                    onClick={() => {
-                      toggleOpen()
-                    }}
-                  >
-                    <Trans>Feature Flags</Trans>
-                  </SecondaryLinkedText>
-                )}
               </Box>
               <IconRow>
                 <Icon href="https://discord.com/invite/aCSKcvf5VW">

src/components/NavBar/index.tsx

@@ -4,7 +4,7 @@ import Web3Status from 'components/Web3Status'
 import { useIsPoolsPage } from 'hooks/useIsPoolsPage'
 import { Box } from 'nft/components/Box'
 import { Row } from 'nft/components/Flex'
-import { UniIcon } from 'nft/components/icons'
+import { HorIcon } from 'nft/components/icons'
 import { ReactNode, useCallback } from 'react'
 import { NavLink, NavLinkProps, useLocation, useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
@@ -73,7 +73,7 @@ const Navbar = ({ blur }: { blur: boolean }) => {
 
   const [accountDrawerOpen, toggleAccountDrawer] = useAccountDrawer()
 
-  const handleUniIconClick = useCallback(() => {
+  const handleHorIconClick = useCallback(() => {
     if (accountDrawerOpen) {
       toggleAccountDrawer()
     }
@@ -90,18 +90,18 @@ const Navbar = ({ blur }: { blur: boolean }) => {
         <Box display="flex" height="full" flexWrap="nowrap">
           <Box className={styles.leftSideContainer}>
             <Box className={styles.logoContainer}>
-              <UniIcon
+              <HorIcon
                 width="48"
                 height="48"
-                data-testid="uniswap-logo"
+                data-testid="horswap-logo"
                 className={styles.logo}
-                onClick={handleUniIconClick}
+                onClick={handleHorIconClick}
               />
             </Box>
             <Box display={{ sm: 'flex', lg: 'none' }}>
               <ChainSelector leftAlign={true} />
             </Box>
-            <Row display={{ sm: 'none', lg: 'flex' }}>
+            <Row>
               <PageTabs />
             </Row>
           </Box>

src/index.tsx

@@ -9,9 +9,8 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { Provider } from 'react-redux'
-import { BrowserRouter, HashRouter } from 'react-router-dom'
+import { HashRouter } from 'react-router-dom'
 import { SystemThemeUpdater, ThemeColorMetaUpdater } from 'theme/components/ThemeToggle'
-import { isBrowserRouterEnabled } from 'utils/env'
 
 import Web3Provider from './components/Web3Provider'
 import { LanguageProvider } from './i18n'
@@ -48,13 +47,11 @@ const queryClient = new QueryClient()
 
 const container = document.getElementById('root') as HTMLElement
 
-const Router = isBrowserRouterEnabled() ? BrowserRouter : HashRouter
-
 createRoot(container).render(
   <StrictMode>
     <Provider store={store}>
       <QueryClientProvider client={queryClient}>
-        <Router>
+        <HashRouter>
           <LanguageProvider>
             <Web3Provider>
               <BlockNumberProvider>
@@ -66,7 +63,7 @@ createRoot(container).render(
               </BlockNumberProvider>
             </Web3Provider>
           </LanguageProvider>
-        </Router>
+        </HashRouter>
       </QueryClientProvider>
     </Provider>
   </StrictMode>

src/nft/components/icons.tsx

@@ -10,18 +10,16 @@ type SVGProps = React.SVGProps<SVGSVGElement> & {
   gradientId?: string
 }
 
-export const UniIcon = (props: SVGProps) => {
-  return (
-    <svg {...props} viewBox="0 0 215 215" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M128.921 202.639C126.319 194.551 121.653 182.432 114.5 172C107.366 161.597 95.1085 150.133 84.9742 140.656L84.974 140.656C78.0609 134.191 72.1361 128.65 69.5002 125C63.0002 116 61.9999 107 64.9999 97C65.9999 107 70.9999 114.5 81.4999 118.5C85.8718 120.166 92.2159 121.219 99.0431 122.353C108.613 123.942 119.132 125.689 126.5 129.5C131.728 132.204 135.767 136.066 139.364 139.506C145.743 145.606 150.733 150.377 158.5 145C162.209 142.432 166.569 140.705 170.094 139.308C172.746 138.257 174.925 137.393 176 136.5C178.929 134.065 177.891 127.151 175.5 119.5C174.305 115.677 172.083 111.854 168.56 105.794L168.56 105.794C165.099 99.8396 160.383 91.7263 154.153 79.3321V101H89V39H130.137C128.595 37.0234 127.183 35.301 125.898 33.7336L125.898 33.7336C124.645 32.2058 123.513 30.8252 122.5 29.5C122.5 29.5 127 24.5 135.5 21C124 17.5 114 19 114 19L118.737 10.6405C115.05 10.2174 111.3 10 107.5 10C53.6523 10 10.0001 53.6522 10.0001 107.5C10.0001 161.348 53.6523 205 107.5 205C114.859 205 122.028 204.185 128.921 202.639ZM142 49H101V90H142V49Z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}
+export const HorIcon = (props: SVGProps) => (
+  <svg {...props} viewBox="0 0 215 215" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M128.921 202.639C126.319 194.551 121.653 182.432 114.5 172C107.366 161.597 95.1085 150.133 84.9742 140.656L84.974 140.656C78.0609 134.191 72.1361 128.65 69.5002 125C63.0002 116 61.9999 107 64.9999 97C65.9999 107 70.9999 114.5 81.4999 118.5C85.8718 120.166 92.2159 121.219 99.0431 122.353C108.613 123.942 119.132 125.689 126.5 129.5C131.728 132.204 135.767 136.066 139.364 139.506C145.743 145.606 150.733 150.377 158.5 145C162.209 142.432 166.569 140.705 170.094 139.308C172.746 138.257 174.925 137.393 176 136.5C178.929 134.065 177.891 127.151 175.5 119.5C174.305 115.677 172.083 111.854 168.56 105.794L168.56 105.794C165.099 99.8396 160.383 91.7263 154.153 79.3321V101H89V39H130.137C128.595 37.0234 127.183 35.301 125.898 33.7336L125.898 33.7336C124.645 32.2058 123.513 30.8252 122.5 29.5C122.5 29.5 127 24.5 135.5 21C124 17.5 114 19 114 19L118.737 10.6405C115.05 10.2174 111.3 10 107.5 10C53.6523 10 10.0001 53.6522 10.0001 107.5C10.0001 161.348 53.6523 205 107.5 205C114.859 205 122.028 204.185 128.921 202.639ZM142 49H101V90H142V49Z"
+      fill="currentColor"
+    />
+  </svg>
+)
 
 export const ChevronUpIcon = ({
   secondaryColor,

src/pages/App.tsx

@@ -1,10 +1,8 @@
 import ErrorBoundary from 'components/ErrorBoundary'
 import Loader from 'components/Icons/LoadingSpinner'
 import NavBar, { PageTabs } from 'components/NavBar'
-import { useAtom } from 'jotai'
 import { lazy, Suspense, useEffect, useState } from 'react'
-import { Navigate, Route, Routes, useLocation, useSearchParams } from 'react-router-dom'
-import { shouldDisableNFTRoutesAtom } from 'state/application/atoms'
+import { Navigate, Route, Routes, useLocation } from 'react-router-dom'
 import styled from 'styled-components'
 import DarkModeQueryParamReader from 'theme/components/DarkModeQueryParamReader'
 import { flexRowNoWrap } from 'theme/styles'
@@ -73,8 +71,6 @@ const HeaderWrapper = styled.div<{ transparent?: boolean; scrollY: number }>`
 `
 
 export default function App() {
-  const [, setShouldDisableNFTRoutes] = useAtom(shouldDisableNFTRoutesAtom)
-
   const location = useLocation()
   const { pathname } = location
   const [scrollY, setScrollY] = useState(0)
@@ -86,15 +82,6 @@ export default function App() {
     setScrollY(0)
   }, [pathname])
 
-  const [searchParams] = useSearchParams()
-  useEffect(() => {
-    if (searchParams.get('disableNFTs') === 'true') {
-      setShouldDisableNFTRoutes(true)
-    } else if (searchParams.get('disableNFTs') === 'false') {
-      setShouldDisableNFTRoutes(false)
-    }
-  }, [searchParams, setShouldDisableNFTRoutes])
-
   useEffect(() => {
     const scrollListener = () => {
       setScrollY(window.scrollY)

src/pages/RouteDefinitions.tsx

@@ -1,9 +1,6 @@
-import { useAtom } from 'jotai'
 import { lazy, ReactNode, Suspense, useMemo } from 'react'
 import { Navigate, useLocation } from 'react-router-dom'
-import { shouldDisableNFTRoutesAtom } from 'state/application/atoms'
 import { SpinnerSVG } from 'theme/components'
-import { isBrowserRouterEnabled } from 'utils/env'
 
 // High-traffic pages (index and /swap) should not be lazy-loaded.
 import Landing from './Landing'
@@ -39,25 +36,19 @@ const LazyLoadSpinner = () => (
 )
 
 interface RouterConfig {
-  browserRouterEnabled?: boolean
   hash?: string
-  shouldDisableNFTRoutes?: boolean
 }
 
 /**
  * Convenience hook which organizes the router configuration into a single object.
  */
 export function useRouterConfig(): RouterConfig {
-  const browserRouterEnabled = isBrowserRouterEnabled()
   const { hash } = useLocation()
-  const [shouldDisableNFTRoutes] = useAtom(shouldDisableNFTRoutesAtom)
   return useMemo(
     () => ({
-      browserRouterEnabled,
       hash,
-      shouldDisableNFTRoutes: Boolean(shouldDisableNFTRoutes),
     }),
-    [browserRouterEnabled, hash, shouldDisableNFTRoutes]
+    [hash]
   )
 }
 
@@ -84,7 +75,7 @@ export const routes: RouteDefinition[] = [
   createRouteDefinition({
     path: '/',
     getElement: (args) => {
-      return args.browserRouterEnabled && args.hash ? <Navigate to={args.hash.replace('#', '')} replace /> : <Landing />
+      return args.hash ? <Navigate to={args.hash.replace('#', '')} replace /> : <Landing />
     },
   }),
   createRouteDefinition({

src/serviceWorker/document.ts

@@ -2,8 +2,6 @@ import { RouteHandlerCallbackOptions, RouteMatchCallbackOptions } from 'workbox-
 import { getCacheKeyForURL, matchPrecache } from 'workbox-precaching'
 import { Route } from 'workbox-routing'
 
-import { isDevelopment } from './utils'
-
 const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$')
 const DOCUMENT = process.env.PUBLIC_URL + '/index.html'
 
@@ -22,12 +20,6 @@ function matchDocument({ request, url }: RouteMatchCallbackOptions) {
     return false
   }
 
-  // If this isn't app.uniswap.org (or a local build), skip.
-  // IPFS gateways may not have domain separation, so they cannot use document caching.
-  if (!isDevelopment()) {
-    return false
-  }
-
   return true
 }
 

src/serviceWorker/utils.ts

@@ -2,20 +2,6 @@
 
 import { PrecacheEntry } from 'workbox-precaching/_types'
 
-declare const self: ServiceWorkerGlobalScope
-
-export function isDevelopment() {
-  return Boolean(
-    self.location.hostname === 'localhost' ||
-      // [::1] is the IPv6 localhost address
-      self.location.hostname === '[::1]' ||
-      // 127.0.0.0/8 are considered localhost for IPv4
-      self.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/) ||
-      // vercel previews
-      self.location.hostname.endsWith('.vercel.app')
-  )
-}
-
 type GroupedEntries = { onDemandEntries: (string | PrecacheEntry)[]; precacheEntries: PrecacheEntry[] }
 
 /**

src/state/reducer.ts

@@ -2,7 +2,6 @@ import { combineReducers } from '@reduxjs/toolkit'
 import multicall from 'lib/state/multicall'
 import localForage from 'localforage'
 import { PersistConfig, persistReducer } from 'redux-persist'
-import { isDevelopmentEnv } from 'utils/env'
 
 import application from './application/reducer'
 import burn from './burn/reducer'
@@ -50,7 +49,6 @@ const persistConfig: PersistConfig<AppState> = {
   // We need unserialized storage for inspectable db entries for debugging.
   // @ts-ignore
   deserialize: false,
-  debug: isDevelopmentEnv(),
 }
 
 const persistedReducer = persistReducer(persistConfig, appReducer)

src/utils/env.test.ts

@@ -1,4 +1,4 @@
-import { isDevelopmentEnv, isProductionEnv, isStagingEnv, isTestEnv } from './env'
+import { isProductionEnv, isStagingEnv, isTestEnv } from './env'
 
 describe('env', () => {
   const ENV = process.env
@@ -14,11 +14,6 @@ describe('env', () => {
     }
   }
 
-  it('isDevelopmentEnv is true if NODE_ENV=development', () => {
-    setEnv({ NODE_ENV: 'development' })
-    expect(isDevelopmentEnv()).toBe(true)
-  })
-
   it('isTestEnv is true if NODE_ENV=test', () => {
     setEnv({ NODE_ENV: 'test' })
     expect(isTestEnv()).toBe(true)

src/utils/env.ts

@@ -1,7 +1,3 @@
-export function isDevelopmentEnv(): boolean {
-  return process.env.NODE_ENV === 'development'
-}
-
 export function isTestEnv(): boolean {
   return process.env.NODE_ENV === 'test'
 }
@@ -14,19 +10,3 @@ export function isStagingEnv(): boolean {
 export function isProductionEnv(): boolean {
   return process.env.NODE_ENV === 'production' && !isStagingEnv()
 }
-
-export function isBrowserRouterEnabled(): boolean {
-  if (isProductionEnv()) {
-    if (
-      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'
-}