Anoter round of mods updates. Hopefuly the last one

cowprotocol · Mar 10, 2022 · a9e1950 · a9e1950
1 parent f725733
commit a9e1950
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 44 deletions.
diff --git a/cypress-custom/integration/swapMod.ts b/cypress-custom/integration/swapMod.ts
@@ -2,20 +2,33 @@ describe('Swap (mod)', () => {
   beforeEach(() => {
     cy.visit('/swap')
   })
+
+  /* it.skip('starts with an ETH/USDC swap and quotes it', () => {
+    cy.get('#swap-currency-input .token-amount-input').should('have.value', '1')
+    cy.get('#swap-currency-input .token-symbol-container').should('contain.text', 'ETH')
+    cy.get('#swap-currency-output .token-amount-input').should('not.have.value', '')
+    cy.get('#swap-currency-output .token-symbol-container').should('contain.text', 'USDC')
+  }) */
+
   it('can enter an amount into input', () => {
     cy.get('#swap-currency-input .token-amount-input')
+      // .clear()
       .type('0.001', { delay: 400, force: true })
       .should('have.value', '0.001')
   })
 
   it('zero swap amount', () => {
     cy.get('#swap-currency-input .token-amount-input')
+      // .clear()
       .type('0.0', { delay: 400, force: true })
       .should('have.value', '0.0')
   })
 
   it('invalid swap amount', () => {
-    cy.get('#swap-currency-input .token-amount-input').type('\\', { delay: 400, force: true }).should('have.value', '')
+    cy.get('#swap-currency-input .token-amount-input')
+      // .clear()
+      .type('\\', { delay: 400, force: true })
+      .should('have.value', '')
   })
 
   it.skip('can enter an amount into output', () => {

diff --git a/src/custom/hooks/useIsSwapUnsupported/useIsSwapUnsupportedMod.ts b/src/custom/hooks/useIsSwapUnsupported/useIsSwapUnsupportedMod.ts
@@ -1,5 +1,6 @@
 import { Currency /* , Token */ } from '@uniswap/sdk-core'
 // import { useMemo } from 'react'
+
 import { useIsUnsupportedToken } from 'state/lists/hooks'
 
 /**
@@ -13,18 +14,15 @@ export function useIsSwapUnsupported(currencyIn?: Currency | null, currencyOut?:
   const tokenIn = currencyIn?.wrapped
   const tokenOut = currencyOut?.wrapped
 
-  /* 
-  const unsupportedTokens: { [address: string]: Token } = useUnsupportedTokens()
-
+  /* const unsupportedTokens = useUnsupportedTokens()
   return useMemo(() => {
-    // if unsupported list loaded & either token on list, mark as unsupported
-    return Boolean(
-      unsupportedTokens &&
-        ((currencyIn?.isToken && unsupportedTokens[currencyIn.address]) ||
-          (currencyOut?.isToken && unsupportedTokens[currencyOut.address]))
-    )
-  }, [currencyIn, currencyOut, unsupportedTokens])
-  */
+    if (!unsupportedTokens) {
+      return false
+    }
+    const currencyInUnsupported = Boolean(currencyIn?.isToken && unsupportedTokens[currencyIn.address])
+    const currencyOutUnsupported = Boolean(currencyOut?.isToken && unsupportedTokens[currencyOut.address])
+    return currencyInUnsupported || currencyOutUnsupported
+  }, [currencyIn, currencyOut, unsupportedTokens]) */
 
   return isUnsupported(tokenIn?.address) || isUnsupported(tokenOut?.address)
 }
diff --git a/src/custom/pages/App/AppMod.tsx b/src/custom/pages/App/AppMod.tsx
@@ -1,6 +1,7 @@
+import Loader from 'components/Loader'
 import ApeModeQueryParamReader from 'hooks/useApeModeQueryParamReader'
-import { Suspense, /* PropsWithChildren, */ ReactNode, useState, useEffect } from 'react'
-import { Route, Switch, useLocation } from 'react-router-dom'
+import { /*Lazy,*/ Suspense, /* PropsWithChildren, */ ReactNode, useState, useEffect } from 'react'
+import { /*Redirect,*/ Route, Switch, useLocation } from 'react-router-dom'
 import styled from 'styled-components/macro'
 import GoogleAnalyticsReporter from 'components/analytics/GoogleAnalyticsReporter'
 import AddressClaimModal from 'components/claim/AddressClaimModal'
@@ -9,15 +10,12 @@ import Header from 'components/Header'
 import Polling from 'components/Header/Polling'
 import Popups from 'components/Popups'
 import Web3ReactManager from 'components/Web3ReactManager'
-import { ApplicationModal } from 'state/application/reducer'
 import { useModalOpen, useToggleModal } from 'state/application/hooks'
+import { ApplicationModal } from 'state/application/reducer'
 import DarkModeQueryParamReader from 'theme'
 /* import AddLiquidity from './AddLiquidity'
-import {
-  RedirectDuplicateTokenIds,
-} from './AddLiquidity/redirects'
+import { RedirectDuplicateTokenIds } from './AddLiquidity/redirects'
 import { RedirectDuplicateTokenIdsV2 } from './AddLiquidityV2/redirects'
-import CreateProposal from './CreateProposal'
 import Earn from './Earn'
 import Manage from './Earn/Manage'
 import MigrateV2 from './MigrateV2'
@@ -30,15 +28,17 @@ import RemoveLiquidity from './RemoveLiquidity'
 import RemoveLiquidityV3 from './RemoveLiquidity/V3'
 import Swap from './Swap'
 import { OpenClaimAddressModalAndRedirectToSwap, RedirectPathToSwapOnly, RedirectToSwap } from './Swap/redirects'
-import Vote from './Vote'
-import VotePage from './Vote/VotePage'
 */
+
+// MOD imports
 import ReferralLinkUpdater from 'state/affiliate/updater'
 import URLWarning from 'components/Header/URLWarning'
 import Footer from 'components/Footer'
 import { BodyWrapper } from '.'
 import * as CSS from 'csstype' // mod
 
+// const Vote = lazy(() => import('./Vote'))
+
 interface AppWrapProps {
   bgBlur?: boolean
 }
@@ -47,6 +47,7 @@ const AppWrapper = styled.div<Partial<CSS.Properties & AppWrapProps>>`
   display: flex;
   flex-flow: column;
   align-items: flex-start;
+  // MOD
   min-height: 100vh;
   overflow-x: hidden;
   &:after {
@@ -75,14 +76,17 @@ const AppWrapper = styled.div<Partial<CSS.Properties & AppWrapProps>>`
   z-index: 1;
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
-    padding: 6rem 16px 16px 16px;
+    padding: 4rem 8px 16px 8px;
   `};
 ` */
 
 const HeaderWrapper = styled.div`
   ${({ theme }) => theme.flexRowNoWrap}
   width: 100%;
   justify-content: space-between;
+  /* position: fixed;
+  top: 0;
+  z-index: 2; */
 `
 
 const FooterWrapper = styled(HeaderWrapper)`
@@ -108,21 +112,21 @@ export default function App(props?: { children?: ReactNode }) {
   }, [location.pathname])
   return (
     <ErrorBoundary>
-      <Suspense fallback={null}>
-        <Route component={GoogleAnalyticsReporter} />
-        <Route component={DarkModeQueryParamReader} />
-        <Route component={ApeModeQueryParamReader} />
-        <Web3ReactManager>
-          <AppWrapper bgBlur={bgBlur}>
+      <Route component={GoogleAnalyticsReporter} />
+      <Route component={DarkModeQueryParamReader} />
+      <Route component={ApeModeQueryParamReader} />
+      <Web3ReactManager>
+        <AppWrapper bgBlur={bgBlur}>
+          <URLWarning />
+          <HeaderWrapper>
+            <Header />
+          </HeaderWrapper>
+          <BodyWrapper>
             <Popups />
-            <URLWarning />
-            <HeaderWrapper>
-              <Header />
-            </HeaderWrapper>
-            <BodyWrapper>
-              <Polling />
-              <TopLevelModals />
-              <ReferralLinkUpdater />
+            <Polling />
+            <TopLevelModals />
+            <ReferralLinkUpdater />
+            <Suspense fallback={<Loader />}>
               <Switch>
                 {props && props.children}
                 {/* <Route exact strict path="/vote" component={Vote} />
@@ -164,14 +168,14 @@ export default function App(props?: { children?: ReactNode }) {
               <Route exact strict path="/create-proposal" component={CreateProposal} />
               <Route component={RedirectPathToSwapOnly} /> */}
               </Switch>
-              <Marginer />
-            </BodyWrapper>
-            <FooterWrapper>
-              <Footer />
-            </FooterWrapper>
-          </AppWrapper>
-        </Web3ReactManager>
-      </Suspense>
+            </Suspense>
+            <Marginer />
+          </BodyWrapper>
+          <FooterWrapper>
+            <Footer />
+          </FooterWrapper>
+        </AppWrapper>
+      </Web3ReactManager>
     </ErrorBoundary>
   )
 }
diff --git a/src/custom/pages/Swap/SwapMod.tsx b/src/custom/pages/Swap/SwapMod.tsx
@@ -949,6 +949,7 @@ export default function Swap({
           detailsTitle="This wallet is not yet supported"
         />
       ) : !swapIsUnsupported ? (
+        // TODO: I think this in unreachable, given that `swapIsUnsupported` returns null when false on line 936
         <AdvancedSwapDetailsDropdown trade={trade} allowedSlippage={allowedSlippage} />
       ) : (
         <UnsupportedCurrencyFooter show={swapIsUnsupported} currencies={[currencies.INPUT, currencies.OUTPUT]} />