Improvement(lists): Switch to multiple active lists (#1237)

* basic support for multiple active lists * start search across inactive lists * store card before list update * basic import flow for inactive tokens * update supported lists * update import flow for address pasting * basic mvp * hide filter if no results * update min heights * update manage view, index tokens on page load * start routing fix for multi hops * switch to input amount comparison on exactOut * start list import view * updated list UI, token search updates, list import flow, surpress popups and warnings * add unsupported tokens * show warning if logged out * update to opyn list * show token details on warning; * make percent logic more clear * remove uneeded comaprisons * move logic to functions for testing * test updates * update list reducer tests * remove unused locals * code cleanup * add unsupported local list * add multi hop disable switch * add GA * fix bug to return multihop no single * update swap details * copy updates * Visual refinements * Further tweaks * copy updates, actual list order * Move settings button * Update all trade views with settings cog * Add better tips, remove darkmode toggle from dropdown * Clean up routing UI * UI tweaks * minor tweaks * copy updates * add local default list, use existing function for trade comparison, disable v1 helper, show inactive/active at once * updated inactive view * remove slippage fix * update output amount return * center button, update search to character threshold * reset add state on back navigation * style tweak on add button * fix bug on search results Co-authored-by: Callil Capuozzo <[email protected]>
recehantoken · Jan 14, 2021 · 267204d · 267204d
1 parent 74f50f1
commit 267204d
Show file tree

Hide file tree

Showing 62 changed files with 2,754 additions and 901 deletions.
diff --git a/cypress/integration/lists.test.ts b/cypress/integration/lists.test.ts
@@ -3,18 +3,9 @@ describe('Lists', () => {
     cy.visit('/swap')
   })
 
-  it('defaults to uniswap list', () => {
-    cy.get('#swap-currency-output .open-currency-select-button').click()
-    cy.get('#currency-search-selected-list-name').should('contain', 'Uniswap')
-  })
-
+  // @TODO check if default lists are active when we have them
   it('change list', () => {
     cy.get('#swap-currency-output .open-currency-select-button').click()
-    cy.get('#currency-search-change-list-button').click()
-    cy.get('#list-row-tokens-1inch-eth .select-button').click()
-    cy.get('#currency-search-selected-list-name').should('contain', '1inch')
-    cy.get('#currency-search-change-list-button').click()
-    cy.get('#list-row-tokens-uniswap-eth .select-button').click()
-    cy.get('#currency-search-selected-list-name').should('contain', 'Uniswap')
+    cy.get('.list-token-manage-button').click()
   })
 })
diff --git a/src/assets/images/token-list-logo.png b/src/assets/images/token-list-logo.png
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -16,7 +16,7 @@ const Base = styled(RebassButton)<{
   width: ${({ width }) => (width ? width : '100%')};
   font-weight: 500;
   text-align: center;
-  border-radius: 12px;
+  border-radius: 20px;
   border-radius: ${({ borderRadius }) => borderRadius && borderRadius};
   outline: none;
   border: 1px solid transparent;
@@ -53,13 +53,15 @@ export const ButtonPrimary = styled(Base)`
     background-color: ${({ theme }) => darken(0.1, theme.primary1)};
   }
   &:disabled {
-    background-color: ${({ theme, altDisabledStyle }) => (altDisabledStyle ? theme.primary1 : theme.bg3)};
-    color: ${({ theme, altDisabledStyle }) => (altDisabledStyle ? 'white' : theme.text3)};
+    background-color: ${({ theme, altDisabledStyle, disabled }) =>
+      altDisabledStyle ? (disabled ? theme.bg3 : theme.primary1) : theme.bg3};
+    color: ${({ theme, altDisabledStyle, disabled }) =>
+      altDisabledStyle ? (disabled ? theme.text3 : 'white') : theme.text3};
     cursor: auto;
     box-shadow: none;
     border: 1px solid transparent;
     outline: none;
-    opacity: ${({ altDisabledStyle }) => (altDisabledStyle ? '0.7' : '1')};
+    opacity: ${({ altDisabledStyle }) => (altDisabledStyle ? '0.5' : '1')};
   }
 `
 
@@ -97,15 +99,13 @@ export const ButtonGray = styled(Base)`
   font-size: 16px;
   font-weight: 500;
   &:focus {
-    box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && darken(0.05, theme.bg2)};
-    background-color: ${({ theme, disabled }) => !disabled && darken(0.05, theme.bg2)};
+    background-color: ${({ theme, disabled }) => !disabled && darken(0.05, theme.bg4)};
   }
   &:hover {
-    background-color: ${({ theme, disabled }) => !disabled && darken(0.05, theme.bg2)};
+    background-color: ${({ theme, disabled }) => !disabled && darken(0.05, theme.bg4)};
   }
   &:active {
-    box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && darken(0.1, theme.bg2)};
-    background-color: ${({ theme, disabled }) => !disabled && darken(0.1, theme.bg2)};
+    background-color: ${({ theme, disabled }) => !disabled && darken(0.1, theme.bg4)};
   }
 `
 
@@ -210,10 +210,10 @@ export const ButtonEmpty = styled(Base)`
     text-decoration: underline;
   }
   &:hover {
-    text-decoration: underline;
+    text-decoration: none;
   }
   &:active {
-    text-decoration: underline;
+    text-decoration: none;
   }
   &:disabled {
     opacity: 50%;
@@ -308,6 +308,17 @@ export function ButtonDropdown({ disabled = false, children, ...rest }: { disabl
   )
 }
 
+export function ButtonDropdownGrey({ disabled = false, children, ...rest }: { disabled?: boolean } & ButtonProps) {
+  return (
+    <ButtonGray {...rest} disabled={disabled} style={{ borderRadius: '20px' }}>
+      <RowBetween>
+        <div style={{ display: 'flex', alignItems: 'center' }}>{children}</div>
+        <ChevronDown size={24} />
+      </RowBetween>
+    </ButtonGray>
+  )
+}
+
 export function ButtonDropdownLight({ disabled = false, children, ...rest }: { disabled?: boolean } & ButtonProps) {
   return (
     <ButtonOutlined {...rest} disabled={disabled}>

diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
@@ -3,8 +3,8 @@ import styled from 'styled-components'
 import { CardProps, Text } from 'rebass'
 import { Box } from 'rebass/styled-components'
 
-const Card = styled(Box)<{ padding?: string; border?: string; borderRadius?: string }>`
-  width: 100%;
+const Card = styled(Box)<{ width?: string; padding?: string; border?: string; borderRadius?: string }>`
+  width: ${({ width }) => width ?? '100%'};
   border-radius: 16px;
   padding: 1.25rem;
   padding: ${({ padding }) => padding};

diff --git a/src/components/CurrencyInputPanel/index.tsx b/src/components/CurrencyInputPanel/index.tsx
@@ -1,6 +1,6 @@
 import { Currency, Pair } from '@uniswap/sdk'
-import React, { useState, useContext, useCallback } from 'react'
-import styled, { ThemeContext } from 'styled-components'
+import React, { useState, useCallback } from 'react'
+import styled from 'styled-components'
 import { darken } from 'polished'
 import { useCurrencyBalance } from '../../state/wallet/hooks'
 import CurrencySearchModal from '../SearchModal/CurrencySearchModal'
@@ -13,6 +13,7 @@ import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
 
 import { useActiveWeb3React } from '../../hooks'
 import { useTranslation } from 'react-i18next'
+import useTheme from '../../hooks/useTheme'
 
 const InputRow = styled.div<{ selected: boolean }>`
   ${({ theme }) => theme.flexRowNoWrap}
@@ -154,7 +155,7 @@ export default function CurrencyInputPanel({
   const [modalOpen, setModalOpen] = useState(false)
   const { account } = useActiveWeb3React()
   const selectedCurrencyBalance = useCurrencyBalance(account ?? undefined, currency ?? undefined)
-  const theme = useContext(ThemeContext)
+  const theme = useTheme()
 
   const handleDismissSearch = useCallback(() => {
     setModalOpen(false)

diff --git a/src/components/CurrencyLogo/index.tsx b/src/components/CurrencyLogo/index.tsx
@@ -22,6 +22,7 @@ const StyledLogo = styled(Logo)<{ size: string }>`
   height: ${({ size }) => size};
   border-radius: ${({ size }) => size};
   box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.075);
+  background-color: ${({ theme }) => theme.white};
 `
 
 export default function CurrencyLogo({

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -17,7 +17,7 @@ import { CountUp } from 'use-count-up'
 import { TYPE, ExternalLink } from '../../theme'
 
 import { YellowCard } from '../Card'
-import Settings from '../Settings'
+import { Moon, Sun } from 'react-feather'
 import Menu from '../Menu'
 
 import Row, { RowFixed } from '../Row'
@@ -254,6 +254,35 @@ const StyledExternalLink = styled(ExternalLink).attrs({
 `}
 `
 
+const StyledMenuButton = styled.button`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: transparent;
+  margin: 0;
+  padding: 0;
+  height: 35px;
+  background-color: ${({ theme }) => theme.bg3};
+  margin-left: 8px;
+  padding: 0.15rem 0.5rem;
+  border-radius: 0.5rem;
+
+  :hover,
+  :focus {
+    cursor: pointer;
+    outline: none;
+    background-color: ${({ theme }) => theme.bg4};
+  }
+
+  svg {
+    margin-top: 2px;
+  }
+  > * {
+    stroke: ${({ theme }) => theme.text1};
+  }
+`
+
 const NETWORK_LABELS: { [chainId in ChainId]?: string } = {
   [ChainId.RINKEBY]: 'Rinkeby',
   [ChainId.ROPSTEN]: 'Ropsten',
@@ -266,7 +295,8 @@ export default function Header() {
   const { t } = useTranslation()
 
   const userEthBalance = useETHBalances(account ? [account] : [])?.[account ?? '']
-  const [isDark] = useDarkModeManager()
+  // const [isDark] = useDarkModeManager()
+  const [darkMode, toggleDarkMode] = useDarkModeManager()
 
   const toggleClaimModal = useToggleSelfClaimModal()
 
@@ -291,7 +321,7 @@ export default function Header() {
       <HeaderRow>
         <Title href=".">
           <UniIcon>
-            <img width={'24px'} src={isDark ? LogoDark : Logo} alt="logo" />
+            <img width={'24px'} src={darkMode ? LogoDark : Logo} alt="logo" />
           </UniIcon>
         </Title>
         <HeaderLinks>
@@ -375,7 +405,9 @@ export default function Header() {
           </AccountElement>
         </HeaderElement>
         <HeaderElementWrap>
-          <Settings />
+          <StyledMenuButton onClick={() => toggleDarkMode()}>
+            {darkMode ? <Moon size={20} /> : <Sun size={20} />}
+          </StyledMenuButton>
           <Menu />
         </HeaderElementWrap>
       </HeaderControls>

diff --git a/src/components/NavigationTabs/index.tsx b/src/components/NavigationTabs/index.tsx
@@ -6,7 +6,11 @@ import { NavLink, Link as HistoryLink } from 'react-router-dom'
 
 import { ArrowLeft } from 'react-feather'
 import { RowBetween } from '../Row'
-import QuestionHelper from '../QuestionHelper'
+// import QuestionHelper from '../QuestionHelper'
+import Settings from '../Settings'
+import { useDispatch } from 'react-redux'
+import { AppDispatch } from 'state'
+import { resetMintState } from 'state/mint/actions'
 
 const Tabs = styled.div`
   ${({ theme }) => theme.flexRowNoWrap}
@@ -69,32 +73,34 @@ export function SwapPoolTabs({ active }: { active: 'swap' | 'pool' }) {
 export function FindPoolTabs() {
   return (
     <Tabs>
-      <RowBetween style={{ padding: '1rem' }}>
+      <RowBetween style={{ padding: '1rem 1rem 0 1rem' }}>
         <HistoryLink to="/pool">
           <StyledArrowLeft />
         </HistoryLink>
         <ActiveText>Import Pool</ActiveText>
-        <QuestionHelper text={"Use this tool to find pairs that don't automatically appear in the interface."} />
+        <Settings />
       </RowBetween>
     </Tabs>
   )
 }
 
 export function AddRemoveTabs({ adding, creating }: { adding: boolean; creating: boolean }) {
+  // reset states on back
+  const dispatch = useDispatch<AppDispatch>()
+
   return (
     <Tabs>
-      <RowBetween style={{ padding: '1rem' }}>
-        <HistoryLink to="/pool">
+      <RowBetween style={{ padding: '1rem 1rem 0 1rem' }}>
+        <HistoryLink
+          to="/pool"
+          onClick={() => {
+            adding && dispatch(resetMintState())
+          }}
+        >
           <StyledArrowLeft />
         </HistoryLink>
         <ActiveText>{creating ? 'Create a pair' : adding ? 'Add Liquidity' : 'Remove Liquidity'}</ActiveText>
-        <QuestionHelper
-          text={
-            adding
-              ? 'When you add liquidity, you are given pool tokens representing your position. These tokens automatically earn fees proportional to your share of the pool, and can be redeemed at any time.'
-              : 'Removing pool tokens converts your position back into underlying tokens at the current rate, proportional to your share of the pool. Accrued fees are included in the amounts you receive.'
-          }
-        />
+        <Settings />
       </RowBetween>
     </Tabs>
   )

diff --git a/src/components/PositionCard/index.tsx b/src/components/PositionCard/index.tsx
@@ -9,10 +9,10 @@ import { useTotalSupply } from '../../data/TotalSupply'
 
 import { useActiveWeb3React } from '../../hooks'
 import { useTokenBalance } from '../../state/wallet/hooks'
-import { ExternalLink, TYPE, HideExtraSmall, ExtraSmallOnly } from '../../theme'
+import { ExternalLink, TYPE } from '../../theme'
 import { currencyId } from '../../utils/currencyId'
 import { unwrappedToken } from '../../utils/wrappedCurrency'
-import { ButtonPrimary, ButtonSecondary, ButtonEmpty, ButtonUNIGradient } from '../Button'
+import { ButtonPrimary, ButtonSecondary, ButtonEmpty } from '../Button'
 import { transparentize } from 'polished'
 import { CardNoise } from '../earn/styled'
 
@@ -202,18 +202,7 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
             <Text fontWeight={500} fontSize={20}>
               {!currency0 || !currency1 ? <Dots>Loading</Dots> : `${currency0.symbol}/${currency1.symbol}`}
             </Text>
-            {!!stakedBalance && (
-              <ButtonUNIGradient as={Link} to={`/uni/${currencyId(currency0)}/${currencyId(currency1)}`}>
-                <HideExtraSmall>Earning UNI</HideExtraSmall>
-                <ExtraSmallOnly>
-                  <span role="img" aria-label="bolt">
-                    ⚡
-                  </span>
-                </ExtraSmallOnly>
-              </ButtonUNIGradient>
-            )}
           </AutoRow>
-
           <RowFixed gap="8px">
             <ButtonEmpty
               padding="6px 8px"

diff --git a/src/components/Row/index.tsx b/src/components/Row/index.tsx
@@ -1,11 +1,19 @@
 import styled from 'styled-components'
 import { Box } from 'rebass/styled-components'
 
-const Row = styled(Box)<{ align?: string; padding?: string; border?: string; borderRadius?: string }>`
-  width: 100%;
+const Row = styled(Box)<{
+  width?: string
+  align?: string
+  justify?: string
+  padding?: string
+  border?: string
+  borderRadius?: string
+}>`
+  width: ${({ width }) => width ?? '100%'};
   display: flex;
   padding: 0;
-  align-items: ${({ align }) => (align ? align : 'center')};
+  align-items: ${({ align }) => align ?? 'center'};
+  justify-content: ${({ justify }) => justify ?? 'flex-start'};
   padding: ${({ padding }) => padding};
   border: ${({ border }) => border};
   border-radius: ${({ borderRadius }) => borderRadius};