Skip to content

I
interface
Commit 6fd9808e authored by Ian Lapham's avatar Ian Lapham Committed by GitHub
Browse files
Options

Style updates merge with storage updates (#710) 


* Add advanced user toggle

* UX stuff

* Remove unused imported checks

* Design tweaks and selection card

* remove unused imports

* Cleanup

* fix merge
Co-authored-by: default avatarCallil Capuozzo <callil.capuozzo@gmail.com>
parent c3d8bc7e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 3865 additions and 3022 deletions
public/favicon.ico
View replaced file @ c3d8bc7e View file @ 6fd9808e
public/favicon.ico

31 KB | W: | H:

public/favicon.ico

325 Bytes | W: | H:

public/favicon.ico
public/favicon.ico
public/favicon.ico
public/favicon.ico
  • 2-up
  • Swipe
  • Onion skin
public/index.html
View file @ 6fd9808e
...@@ -20,7 +20,8 @@ ...@@ -20,7 +20,8 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>Uniswap</title>
<title>Uniswap Interface</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
......
src/assets/svg/wordmark.svg
View file @ 6fd9808e
This source diff could not be displayed because it is too large. You can view the blob instead.
src/components/AccountDetails/Copy.js
View file @ 6fd9808e
...@@ -8,6 +8,7 @@ import { CheckCircle, Copy } from 'react-feather' ...@@ -8,6 +8,7 @@ import { CheckCircle, Copy } from 'react-feather'
const CopyIcon = styled(Link)` const CopyIcon = styled(Link)`
color: ${({ theme }) => theme.text4}; color: ${({ theme }) => theme.text4};
flex-shrink: 0; flex-shrink: 0;
display: flex;
margin-right: 1rem; margin-right: 1rem;
margin-left: 0.5rem; margin-left: 0.5rem;
text-decoration: none; text-decoration: none;
...@@ -24,11 +25,12 @@ const TransactionStatusText = styled.span` ...@@ -24,11 +25,12 @@ const TransactionStatusText = styled.span`
align-items: center; align-items: center;
` `
export default function CopyHelper({ toCopy }) { export default function CopyHelper(props, { toCopy }) {
const [isCopied, setCopied] = useCopyClipboard() const [isCopied, setCopied] = useCopyClipboard()
return ( return (
<CopyIcon onClick={() => setCopied(toCopy)}> <CopyIcon onClick={() => setCopied(toCopy)}>
{props.children}
{isCopied ? ( {isCopied ? (
<TransactionStatusText> <TransactionStatusText>
<CheckCircle size={'16'} /> <CheckCircle size={'16'} />
......
src/components/AccountDetails/index.js
View file @ 6fd9808e
...@@ -4,6 +4,7 @@ import { useWeb3React } from '../../hooks' ...@@ -4,6 +4,7 @@ import { useWeb3React } from '../../hooks'
import { isMobile } from 'react-device-detect' import { isMobile } from 'react-device-detect'
import Copy from './Copy' import Copy from './Copy'
import Transaction from './Transaction' import Transaction from './Transaction'
import { SUPPORTED_WALLETS } from '../../constants' import { SUPPORTED_WALLETS } from '../../constants'
import { ReactComponent as Close } from '../../assets/images/x.svg' import { ReactComponent as Close } from '../../assets/images/x.svg'
import { getEtherscanLink } from '../../utils' import { getEtherscanLink } from '../../utils'
...@@ -14,26 +15,9 @@ import FortmaticIcon from '../../assets/images/fortmaticIcon.png' ...@@ -14,26 +15,9 @@ import FortmaticIcon from '../../assets/images/fortmaticIcon.png'
import PortisIcon from '../../assets/images/portisIcon.png' import PortisIcon from '../../assets/images/portisIcon.png'
import Identicon from '../Identicon' import Identicon from '../Identicon'
import { Link } from '../../theme' import { ButtonLight } from '../Button'
const OptionButton = styled.div`
${({ theme }) => theme.flexColumnNoWrap}
justify-content: center;
align-items: center;
border-radius: 20px;
border: 1px solid ${({ theme }) => theme.blue1};
color: ${({ theme }) => theme.blue1};
padding: 8px 24px;
&:hover {
border: 1px solid ${({ theme }) => theme.blue3};
cursor: pointer;
}
${({ theme }) => theme.mediaWidth.upToMedium` import { Link, TYPE } from '../../theme'
font-size: 12px;
`};
`
const HeaderRow = styled.div` const HeaderRow = styled.div`
${({ theme }) => theme.flexRowNoWrap}; ${({ theme }) => theme.flexRowNoWrap};
...@@ -67,7 +51,8 @@ const UpperSection = styled.div` ...@@ -67,7 +51,8 @@ const UpperSection = styled.div`
const InfoCard = styled.div` const InfoCard = styled.div`
padding: 1rem; padding: 1rem;
border: 1px solid ${({ theme }) => theme.bg4}; /* border: 1px solid ${({ theme }) => theme.bg2}; */
background-color: ${({ theme }) => theme.bg2};
border-radius: 20px; border-radius: 20px;
` `
...@@ -168,7 +153,7 @@ const ConnectButtonRow = styled.div` ...@@ -168,7 +153,7 @@ const ConnectButtonRow = styled.div`
${({ theme }) => theme.flexRowNoWrap} ${({ theme }) => theme.flexRowNoWrap}
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 30px; margin: 10px 0;
` `
const StyledLink = styled(Link)` const StyledLink = styled(Link)`
...@@ -352,26 +337,28 @@ export default function AccountDetails({ ...@@ -352,26 +337,28 @@ export default function AccountDetails({
{!(isMobile && (window.web3 || window.ethereum)) && ( {!(isMobile && (window.web3 || window.ethereum)) && (
<ConnectButtonRow> <ConnectButtonRow>
<OptionButton <ButtonLight
padding={'8px 12px'}
width={240}
onClick={() => { onClick={() => {
openOptions() openOptions()
}} }}
> >
Connect to a different wallet Connect to a different wallet
</OptionButton> </ButtonLight>
</ConnectButtonRow> </ConnectButtonRow>
)} )}
</AccountSection> </AccountSection>
</UpperSection> </UpperSection>
{!!pendingTransactions.length || !!confirmedTransactions.length ? ( {!!pendingTransactions.length || !!confirmedTransactions.length ? (
<LowerSection> <LowerSection>
<h5>Recent Transactions</h5> <TYPE.body>Recent Transactions</TYPE.body>
{renderTransactions(pendingTransactions, true)} {renderTransactions(pendingTransactions, true)}
{renderTransactions(confirmedTransactions, false)} {renderTransactions(confirmedTransactions, false)}
</LowerSection> </LowerSection>
) : ( ) : (
<LowerSection> <LowerSection>
<h5>Your transactions will appear here...</h5> <TYPE.body>Your transactions will appear here...</TYPE.body>
</LowerSection> </LowerSection>
)} )}
</> </>
......
src/components/BalanceCard/index.tsx
View file @ 6fd9808e
This diff is collapsed.
src/components/Button/index.js
View file @ 6fd9808e
...@@ -16,6 +16,10 @@ const Base = styled(RebassButton)` ...@@ -16,6 +16,10 @@ const Base = styled(RebassButton)`
outline: none; outline: none;
border: 1px solid transparent; border: 1px solid transparent;
color: white; color: white;
display: flex;
justify-content: center;
flex-wrap: nowrap;
align-items: center;
cursor: pointer; cursor: pointer;
&:disabled { &:disabled {
cursor: auto; cursor: auto;
...@@ -51,7 +55,7 @@ export const ButtonPrimary = styled(Base)` ...@@ -51,7 +55,7 @@ export const ButtonPrimary = styled(Base)`
export const ButtonLight = styled(Base)` export const ButtonLight = styled(Base)`
background-color: ${({ theme }) => theme.blue5}; background-color: ${({ theme }) => theme.blue5};
color: ${({ theme }) => theme.blue1}; color: ${({ theme }) => theme.blue1};
font-size: 20px; font-size: 16px;
font-weight: 500; font-weight: 500;
&:focus { &:focus {
box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && darken(0.05, theme.blue5)}; box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && darken(0.05, theme.blue5)};
...@@ -66,26 +70,44 @@ export const ButtonLight = styled(Base)` ...@@ -66,26 +70,44 @@ export const ButtonLight = styled(Base)`
} }
` `
export const ButtonGray = styled(Base)`
background-color: ${({ theme }) => theme.bg3};
color: ${({ theme }) => theme.text2};
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)};
}
&:hover {
background-color: ${({ theme, disabled }) => !disabled && darken(0.05, theme.bg2)};
}
&: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)};
}
`
export const ButtonSecondary = styled(Base)` export const ButtonSecondary = styled(Base)`
background-color: #ebf4ff; background-color: ${({ theme }) => theme.blue5};
color: #2172e5; color: ${({ theme }) => theme.blue1};
font-size: 16px; font-size: 16px;
border-radius: 8px; border-radius: 8px;
padding: 10px; padding: 10px;
&:focus { &:focus {
box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, '#ebf4ff')}; box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.blue5)};
background-color: ${({ theme }) => darken(0.05, '#ebf4ff')}; background-color: ${({ theme }) => darken(0.05, theme.blue5)};
} }
&:hover { &:hover {
background-color: ${({ theme }) => darken(0.05, '#ebf4ff')}; background-color: ${({ theme }) => darken(0.05, theme.blue5)};
} }
&:active { &:active {
box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, '#ebf4ff')}; box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.blue5)};
background-color: ${({ theme }) => darken(0.1, '#ebf4ff')}; background-color: ${({ theme }) => darken(0.1, theme.blue5)};
} }
&:disabled { &:disabled {
background-color: ${({ theme }) => '#ebf4ff'}; background-color: ${({ theme }) => theme.blue5};
opacity: 50%; opacity: 50%;
cursor: auto; cursor: auto;
} }
...@@ -113,19 +135,41 @@ export const ButtonPink = styled(Base)` ...@@ -113,19 +135,41 @@ export const ButtonPink = styled(Base)`
} }
` `
export const ButtonEmpty = styled(Base)` export const ButtonOutlined = styled(Base)`
border: 1px solid #edeef2; border: 1px solid #edeef2;
background-color: transparent; background-color: transparent;
color: black; color: ${({ theme }) => theme.blue1};
&:focus { &:focus {
box-shadow: 0 0 0 1px ${({ theme }) => theme.bg3}; box-shadow: 0 0 0 1px ${({ theme }) => theme.bg4};
} }
&:hover { &:hover {
box-shadow: 0 0 0 1px ${({ theme }) => theme.bg3}; box-shadow: 0 0 0 1px ${({ theme }) => theme.bg4};
} }
&:active { &:active {
box-shadow: 0 0 0 1px ${({ theme }) => theme.bg3}; box-shadow: 0 0 0 1px ${({ theme }) => theme.bg4};
}
&:disabled {
opacity: 50%;
cursor: auto;
}
`
export const ButtonEmpty = styled(Base)`
background-color: transparent;
color: ${({ theme }) => theme.blue1};
display: flex;
justify-content: center;
align-items: center;
&:focus {
background-color: ${({ theme }) => theme.bg3};
}
&:hover {
background-color: ${({ theme }) => theme.bg3};
}
&:active {
background-color: ${({ theme }) => theme.bg3};
} }
&:disabled { &:disabled {
opacity: 50%; opacity: 50%;
......
src/components/Card/index.js
View file @ 6fd9808e
...@@ -18,7 +18,11 @@ export const LightCard = styled(Card)` ...@@ -18,7 +18,11 @@ export const LightCard = styled(Card)`
` `
export const GreyCard = styled(Card)` export const GreyCard = styled(Card)`
background-color: rgba(255, 255, 255, 0.6); background-color: rgba(237, 238, 242, 0.5);
`
export const OutlineCard = styled(Card)`
border: 1px solid rgba(237, 238, 242, 0.5);
` `
export const YellowCard = styled(Card)` export const YellowCard = styled(Card)`
......
src/components/ConfirmationModal/index.js
View file @ 6fd9808e
...@@ -19,7 +19,7 @@ const Wrapper = styled.div` ...@@ -19,7 +19,7 @@ const Wrapper = styled.div`
width: 100%; width: 100%;
` `
const Section = styled(AutoColumn)` const Section = styled(AutoColumn)`
padding: 26px; padding: 24px;
` `
const BottomSection = styled(Section)` const BottomSection = styled(Section)`
......
src/components/CurrencyInputPanel/index.js
View file @ 6fd9808e
import React, { useState } from 'react' import React, { useState, useContext } from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import '@reach/tooltip/styles.css' import '@reach/tooltip/styles.css'
import { darken } from 'polished' import { darken } from 'polished'
...@@ -7,13 +7,14 @@ import TokenLogo from '../TokenLogo' ...@@ -7,13 +7,14 @@ import TokenLogo from '../TokenLogo'
import DoubleLogo from '../DoubleLogo' import DoubleLogo from '../DoubleLogo'
import SearchModal from '../SearchModal' import SearchModal from '../SearchModal'
import { RowBetween } from '../Row' import { RowBetween } from '../Row'
import { TYPE, Hover } from '../../theme' import { TYPE } from '../../theme'
import { Input as NumericalInput } from '../NumericalInput' import { Input as NumericalInput } from '../NumericalInput'
import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg' import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
import { useWeb3React } from '../../hooks' import { useWeb3React } from '../../hooks'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { useAddressBalance } from '../../contexts/Balances' import { useAddressBalance } from '../../contexts/Balances'
import { ThemeContext } from 'styled-components'
const InputRow = styled.div` const InputRow = styled.div`
${({ theme }) => theme.flexRowNoWrap} ${({ theme }) => theme.flexRowNoWrap}
...@@ -49,21 +50,14 @@ const LabelRow = styled.div` ...@@ -49,21 +50,14 @@ const LabelRow = styled.div`
color: ${({ theme }) => theme.text1}; color: ${({ theme }) => theme.text1};
font-size: 0.75rem; font-size: 0.75rem;
line-height: 1rem; line-height: 1rem;
padding: 0 1.25rem 1rem 1rem; padding: 0rem 1rem 0.75rem 1rem;
height: 20px
span:hover { span:hover {
cursor: pointer; cursor: pointer;
color: ${({ theme }) => darken(0.2, theme.text2)}; color: ${({ theme }) => darken(0.2, theme.text2)};
} }
` `
const ErrorSpan = styled.span`
color: ${({ error, theme }) => error && theme.red1};
:hover {
cursor: pointer;
color: ${({ error, theme }) => error && darken(0.1, theme.red1)};
}
`
const Aligner = styled.span` const Aligner = styled.span`
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -101,7 +95,7 @@ const StyledTokenName = styled.span` ...@@ -101,7 +95,7 @@ const StyledTokenName = styled.span`
` `
const StyledBalanceMax = styled.button` const StyledBalanceMax = styled.button`
height: 35px; height: 32px;
background-color: ${({ theme }) => theme.blue5}; background-color: ${({ theme }) => theme.blue5};
border: 1px solid ${({ theme }) => theme.blue5}; border: 1px solid ${({ theme }) => theme.blue5};
border-radius: 0.5rem; border-radius: 0.5rem;
...@@ -118,6 +112,26 @@ const StyledBalanceMax = styled.button` ...@@ -118,6 +112,26 @@ const StyledBalanceMax = styled.button`
outline: none; outline: none;
} }
` `
const StyledBalanceMaxMini = styled.button`
height: 24px;
background-color: ${({ theme, active }) => (active ? theme.blue5 : theme.bg2)};
border: 1px solid ${({ theme }) => theme.blue5};
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
pointer-events: ${({ active }) => (active ? 'initial' : 'none')};
color: ${({ theme, active }) => (active ? theme.blue1 : theme.text4)};
:hover {
border: 1px solid ${({ theme, active }) => (active ? theme.bg2 : theme.bg1)};
}
:focus {
border: 1px solid ${({ theme, active }) => (active ? theme.bg2 : theme.bg1)};
outline: none;
}
`
export default function CurrencyInputPanel({ export default function CurrencyInputPanel({
value, value,
...@@ -136,13 +150,15 @@ export default function CurrencyInputPanel({ ...@@ -136,13 +150,15 @@ export default function CurrencyInputPanel({
pair = null, // used for double token logo pair = null, // used for double token logo
hideInput = false, hideInput = false,
showSendWithSwap = false, showSendWithSwap = false,
otherSelectedTokenAddress = null otherSelectedTokenAddress = null,
simplified = false
}) { }) {
const { t } = useTranslation() const { t } = useTranslation()
const [modalOpen, setModalOpen] = useState(false) const [modalOpen, setModalOpen] = useState(false)
const { account } = useWeb3React() const { account } = useWeb3React()
const userTokenBalance = useAddressBalance(account, token) const userTokenBalance = useAddressBalance(account, token)
const theme = useContext(ThemeContext)
return ( return (
<InputPanel> <InputPanel>
...@@ -156,7 +172,7 @@ export default function CurrencyInputPanel({ ...@@ -156,7 +172,7 @@ export default function CurrencyInputPanel({
onUserInput(field, val) onUserInput(field, val)
}} }}
/> />
{!!token?.address && !atMax && type !== 'OUTPUT' && ( {!simplified && !!token?.address && !atMax && type !== 'OUTPUT' && (
<StyledBalanceMax onClick={onMax}>MAX</StyledBalanceMax> <StyledBalanceMax onClick={onMax}>MAX</StyledBalanceMax>
)} )}
</> </>
...@@ -189,13 +205,27 @@ export default function CurrencyInputPanel({ ...@@ -189,13 +205,27 @@ export default function CurrencyInputPanel({
</Aligner> </Aligner>
</CurrencySelect> </CurrencySelect>
</InputRow> </InputRow>
{!hideBalance && !!token && ( {simplified && !hideBalance && !!token && (
<LabelRow> <LabelRow>
<RowBetween> <RowBetween onClick={onMax}>
<ErrorSpan data-tip={'Enter max'} error={!!error} onClick={() => {}}></ErrorSpan> {/* {!!token?.address && !atMax && type !== 'OUTPUT' ? (
<Hover onClick={onMax}> <StyledBalanceMaxMini>Max</StyledBalanceMaxMini>
<TYPE.body fontWeight={500}>Balance: {userTokenBalance?.toSignificant(6)}</TYPE.body> ) : (
</Hover> <TYPE.body color={'#888D9B'}>Balance</TYPE.body>
)} */}
{!!token?.address &&
(type !== 'OUTPUT' ? (
<StyledBalanceMaxMini active={!atMax}>Max</StyledBalanceMaxMini>
) : (
<TYPE.body color={theme.text3}>-</TYPE.body>
))}
<div>
<TYPE.body color={theme.text2} fontWeight={500} fontSize={14} style={{ display: 'inline' }}>
Balance: {account ? userTokenBalance?.toSignificant(6) : 'Connect to see balances'}
</TYPE.body>
</div>
{/* <ErrorSpan data-tip={'Enter max'} error={!!error} onClick={() => {}}></ErrorSpan> */}
</RowBetween> </RowBetween>
</LabelRow> </LabelRow>
)} )}
......
src/components/ExchangePage/index.tsx
View file @ 6fd9808e
This diff is collapsed.
src/components/Header/index.js
View file @ 6fd9808e
...@@ -9,22 +9,27 @@ import { Link } from '../../theme' ...@@ -9,22 +9,27 @@ import { Link } from '../../theme'
import { Text } from 'rebass' import { Text } from 'rebass'
import { WETH } from '@uniswap/sdk' import { WETH } from '@uniswap/sdk'
import { isMobile } from 'react-device-detect' import { isMobile } from 'react-device-detect'
import { YellowCard } from '../Card' import { YellowCard, GreyCard } from '../Card'
import { useWeb3React } from '../../hooks' import { useWeb3React } from '../../hooks'
import { useAddressBalance } from '../../contexts/Balances' import { useAddressBalance } from '../../contexts/Balances'
import { useWalletModalToggle } from '../../contexts/Application' import { useWalletModalToggle } from '../../contexts/Application'
import { useUserAdvanced, useToggleUserAdvanced } from '../../contexts/Application'
import { Eye, EyeOff, Send } from 'react-feather'
import { ButtonSecondary } from '../Button'
import Logo from '../../assets/svg/logo.svg' import Logo from '../../assets/svg/logo.svg'
import Wordmark from '../../assets/svg/wordmark.svg' import Wordmark from '../../assets/svg/wordmark.svg'
import { AutoColumn } from '../Column'
const HeaderFrame = styled.div` const HeaderFrame = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
position: absolute; /* position: absolute; */
padding: 0 10px; padding: 1rem 1rem;
width: calc(100% - 20px); width: calc(100% - 2rem);
${({ theme }) => theme.mediaWidth.upToExtraSmall` ${({ theme }) => theme.mediaWidth.upToExtraSmall`
padding: 10px; padding: 10px;
...@@ -89,49 +94,127 @@ const NetworkCard = styled(YellowCard)` ...@@ -89,49 +94,127 @@ const NetworkCard = styled(YellowCard)`
border-radius: 12px; border-radius: 12px;
padding: 8px 12px; padding: 8px 12px;
` `
const Alpha = styled(GreyCard)`
width: fit-content;
margin-right: 10px;
border-radius: 12px;
padding: 8px 12px;
color: ${({ theme }) => theme.text2};
`
const UniIcon = styled(Link)`
transition: transform 0.3s ease;
:hover {
transform: rotate(-5deg);
}
`
const StyledRed = styled.div`
width: 100%;
height: 150vh;
border-radius: 10vw;
background: ${({ theme }) => `radial-gradient(50% 50% at 50% 50%, ${theme.pink2} 0%, ${theme.white} 100%)`};
position: absolute;
top: 0px;
left: 0px;
opacity: 0.1;
z-index: -1;
transform: translateY(-70vh);
@media (max-width: 960px) {
height: 300px;
width: 100%;
transform: translateY(-150px);
}
`
const MigrateBanner = styled(AutoColumn)`
width: 100%;
padding: 12px 0;
display: flex;
justify-content: center;
background-color: rgba(255, 0, 122, 0.1);
color: ${({ theme }) => theme.pink2};
font-weight: 500;
text-align: center;
a {
color: ${({ theme }) => theme.pink2};
}
`
export default function Header() { export default function Header() {
const { account, chainId } = useWeb3React() const { account, chainId } = useWeb3React()
const userEthBalance = useAddressBalance(account, WETH[chainId]) const userEthBalance = useAddressBalance(account, WETH[chainId])
const toggleWalletModal = useWalletModalToggle() const toggleWalletModal = useWalletModalToggle()
const toggleSimplified = useToggleUserAdvanced()
const advanced = useUserAdvanced()
return ( return (
<HeaderFrame> <AutoColumn style={{ width: '100vw' }}>
<HeaderElement> <MigrateBanner>
<Title> <StyledRed />
<Link id="link" href="https://uniswap.io"> <b>Uniswap V2 is live.&nbsp;</b> Move your liquidity now using the&nbsp;
<img src={Logo} alt="logo" /> <a href="https://migrate.uniswap.exchange/">migration helper</a>&nbsp; or read the&nbsp;
</Link> <a href="https://uniswap.org/blog/uniswap-v2/">announcement </a>
{!isMobile && ( </MigrateBanner>
<TitleText> <HeaderFrame>
<Link id="link" href="https://uniswap.io"> <HeaderElement>
<img style={{ marginLeft: '4px' }} src={Wordmark} alt="logo" /> <Title>
</Link> <UniIcon id="link" href="/">
<p style={{ opacity: 0.6, marginLeft: '4px', fontSize: '16px' }}>{'/ Exchange'}</p> <img src={Logo} alt="logo" />
</TitleText> </UniIcon>
)} {!isMobile && (
</Title> <TitleText>
</HeaderElement> <Link id="link" href="/">
<HeaderElement> <img style={{ marginLeft: '4px', marginTop: '4px' }} src={Wordmark} alt="logo" />
<TestnetWrapper> </Link>
{!isMobile && chainId === 4 && <NetworkCard>Rinkeby Testnet</NetworkCard>} </TitleText>
{!isMobile && chainId === 3 && <NetworkCard> Ropsten Testnet</NetworkCard>} )}
{!isMobile && chainId === 5 && <NetworkCard>Goerli Testnet</NetworkCard>} <TestnetWrapper>{!isMobile && <Alpha>1.0.0-alpha</Alpha>}</TestnetWrapper>
{!isMobile && chainId === 42 && <NetworkCard>Kovan Testnet</NetworkCard>} </Title>
</TestnetWrapper> </HeaderElement>
<AccountElement active={!!account}> <HeaderElement>
{account ? ( <ButtonSecondary
<Row style={{ marginRight: '-1.25rem', paddingRight: '1.75rem' }}> style={{
<Text fontWeight={400}> {userEthBalance && userEthBalance?.toFixed(4) + ' ETH'}</Text> padding: ' 8px 12px',
</Row> marginRight: '0px',
) : ( width: 'fit-content',
'' position: 'fixed',
)} right: '1rem',
<Web3Status onClick={toggleWalletModal} /> bottom: '1rem'
</AccountElement> }}
<Menu /> >
</HeaderElement> <Send size={16} style={{ marginRight: '8px' }} /> Feeback
</HeaderFrame> </ButtonSecondary>
<ButtonSecondary
style={{ padding: '6px 8px', marginRight: '0px', width: 'fit-content' }}
onClick={toggleSimplified}
>
{' '}
{advanced ? <EyeOff size={20} /> : <Eye size={20} />}
</ButtonSecondary>
<TestnetWrapper>
{!isMobile && chainId === 4 && <NetworkCard>Rinkeby</NetworkCard>}
{!isMobile && chainId === 3 && <NetworkCard>Ropsten</NetworkCard>}
{!isMobile && chainId === 5 && <NetworkCard>Goerli</NetworkCard>}
{!isMobile && chainId === 42 && <NetworkCard>Kovan</NetworkCard>}
</TestnetWrapper>
<AccountElement active={!!account}>
{account ? (
<Row style={{ marginRight: '-1.25rem', paddingRight: '1.75rem' }}>
<Text fontWeight={400}> {userEthBalance && userEthBalance?.toFixed(4) + ' ETH'}</Text>
</Row>
) : (
''
)}
<Web3Status onClick={toggleWalletModal} />
</AccountElement>
<Menu />
</HeaderElement>
</HeaderFrame>
</AutoColumn>
) )
} }
src/components/Modal/index.js
View file @ 6fd9808e
...@@ -54,7 +54,7 @@ const StyledDialogContent = styled(FilteredDialogContent)` ...@@ -54,7 +54,7 @@ const StyledDialogContent = styled(FilteredDialogContent)`
padding: 0px; padding: 0px;
width: 50vw; width: 50vw;
max-width: 500px; max-width: 355px;
${({ maxHeight }) => ${({ maxHeight }) =>
maxHeight && maxHeight &&
css` css`
...@@ -67,7 +67,7 @@ const StyledDialogContent = styled(FilteredDialogContent)` ...@@ -67,7 +67,7 @@ const StyledDialogContent = styled(FilteredDialogContent)`
`} `}
display: flex; display: flex;
/* overflow: hidden; */ /* overflow: hidden; */
border-radius: 10px; border-radius: 20px;
${({ theme }) => theme.mediaWidth.upToMedium` ${({ theme }) => theme.mediaWidth.upToMedium`
width: 65vw; width: 65vw;
max-height: 65vh; max-height: 65vh;
......
src/components/NumericalInput/index.tsx
View file @ 6fd9808e
...@@ -15,6 +15,9 @@ const StyledInput = styled.input` ...@@ -15,6 +15,9 @@ const StyledInput = styled.input`
background-color: ${({ theme }) => theme.bg1}; background-color: ${({ theme }) => theme.bg1};
font-size: ${({ fontSize }) => fontSize && fontSize}; font-size: ${({ fontSize }) => fontSize && fontSize};
text-align: ${({ align }) => align && align}; text-align: ${({ align }) => align && align};
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
[type='number'] { [type='number'] {
-moz-appearance: textfield; -moz-appearance: textfield;
......
src/components/Popups/index.js
View file @ 6fd9808e
...@@ -3,14 +3,8 @@ import styled from 'styled-components' ...@@ -3,14 +3,8 @@ import styled from 'styled-components'
import { useMediaLayout } from 'use-media' import { useMediaLayout } from 'use-media'
import { X } from 'react-feather' import { X } from 'react-feather'
import { Text } from 'rebass'
import { TYPE } from '../../theme'
import { Hover } from '../../theme/components'
import { PinkCard } from '../Card'
import { ButtonPink } from '../Button'
import { usePopups } from '../../contexts/Application' import { usePopups } from '../../contexts/Application'
import { AutoColumn } from '../Column' import { AutoColumn } from '../Column'
import { useMigrationMessageManager } from '../../contexts/LocalStorage'
const StyledClose = styled(X)` const StyledClose = styled(X)`
position: absolute; position: absolute;
...@@ -25,9 +19,9 @@ const StyledClose = styled(X)` ...@@ -25,9 +19,9 @@ const StyledClose = styled(X)`
const MobilePopupWrapper = styled.div` const MobilePopupWrapper = styled.div`
position: relative; position: relative;
max-width: 100%; max-width: 100%;
height: ${({ height }) => height} height: ${({ height }) => height};
margin: ${({ height }) => (height ? '0 auto;' : 0)} margin: ${({ height }) => (height ? '0 auto;' : 0)};
margin-bottom: ${({ height }) => (height ? '20px' : 0)}} margin-bottom: ${({ height }) => (height ? '20px' : 0)}};
` `
const MobilePopupInner = styled.div` const MobilePopupInner = styled.div`
...@@ -45,8 +39,8 @@ const MobilePopupInner = styled.div` ...@@ -45,8 +39,8 @@ const MobilePopupInner = styled.div`
const FixedPopupColumn = styled(AutoColumn)` const FixedPopupColumn = styled(AutoColumn)`
position: absolute; position: absolute;
top: 56px; top: 72px;
right: 24px; right: 1rem;
width: 355px; width: 355px;
${({ theme }) => theme.mediaWidth.upToSmall` ${({ theme }) => theme.mediaWidth.upToSmall`
...@@ -60,7 +54,7 @@ const Popup = styled.div` ...@@ -60,7 +54,7 @@ const Popup = styled.div`
padding: 1em; padding: 1em;
box-sizing: border-box; box-sizing: border-box;
background-color: white; background-color: white;
margin: 0 10px; /* margin: 0 10px; */
position: relative; position: relative;
border-radius: 10px; border-radius: 10px;
padding: 20px; padding: 20px;
...@@ -73,19 +67,10 @@ const Popup = styled.div` ...@@ -73,19 +67,10 @@ const Popup = styled.div`
`} `}
` `
const MobileCardPink = styled(PinkCard)`
z-index: 2;
padding: 20px;
white-space: normal;
`
export default function App() { export default function App() {
// get all popups // get all popups
const [activePopups, , removePopup] = usePopups() const [activePopups, , removePopup] = usePopups()
// local storage reference to show message
const [showMessage, hideMigrationMessage] = useMigrationMessageManager()
// switch view settings on mobile // switch view settings on mobile
const isMobile = useMediaLayout({ maxWidth: '600px' }) const isMobile = useMediaLayout({ maxWidth: '600px' })
...@@ -100,25 +85,13 @@ export default function App() { ...@@ -100,25 +85,13 @@ export default function App() {
</Popup> </Popup>
) )
})} })}
{showMessage && (
<PinkCard padding="20px" style={{ zIndex: '2' }}>
<AutoColumn justify={'center'} gap={'20px'}>
<Hover onClick={() => hideMigrationMessage()}>
<StyledClose />
</Hover>
<TYPE.largeHeader>Uniswap has upgraded.</TYPE.largeHeader>
<Text textAlign="center">Are you a liquidity provider? Upgrade now using the migration helper.</Text>
<ButtonPink width={'265px'}>Migrate your liquidity </ButtonPink>
</AutoColumn>
</PinkCard>
)}
</FixedPopupColumn> </FixedPopupColumn>
) )
} }
//mobile //mobile
else else
return ( return (
<MobilePopupWrapper height={activePopups?.length > 0 || showMessage ? 'fit-content' : 0}> <MobilePopupWrapper height={activePopups?.length > 0 ? 'fit-content' : 0}>
<MobilePopupInner> <MobilePopupInner>
{activePopups // reverse so new items up front {activePopups // reverse so new items up front
.slice(0) .slice(0)
...@@ -131,18 +104,6 @@ export default function App() { ...@@ -131,18 +104,6 @@ export default function App() {
</Popup> </Popup>
) )
})} })}
{showMessage && (
<MobileCardPink>
<AutoColumn justify={'center'} gap={'20px'}>
<Hover onClick={() => hideMigrationMessage()}>
<StyledClose />
</Hover>
<Text>Uniswap has upgraded.</Text>
<Text textAlign="center">Are you a liquidity provider? Upgrade now using the migration helper.</Text>
<ButtonPink width={'265px'}>Migrate your liquidity </ButtonPink>
</AutoColumn>
</MobileCardPink>
)}
</MobilePopupInner> </MobilePopupInner>
</MobilePopupWrapper> </MobilePopupWrapper>
) )
......
src/components/PositionCard/index.js
View file @ 6fd9808e
...@@ -26,7 +26,6 @@ const FixedHeightRow = styled(RowBetween)` ...@@ -26,7 +26,6 @@ const FixedHeightRow = styled(RowBetween)`
const HoverCard = styled(Card)` const HoverCard = styled(Card)`
border: 1px solid ${({ theme }) => theme.bg3}; border: 1px solid ${({ theme }) => theme.bg3};
:hover { :hover {
cursor: pointer;
border: 1px solid ${({ theme }) => darken(0.06, theme.bg3)}; border: 1px solid ${({ theme }) => darken(0.06, theme.bg3)};
} }
` `
...@@ -66,68 +65,72 @@ function PositionCard({ pairAddress, token0, token1, history, minimal = false, . ...@@ -66,68 +65,72 @@ function PositionCard({ pairAddress, token0, token1, history, minimal = false, .
if (minimal) { if (minimal) {
return ( return (
<GreyCard {...rest}> <>
<AutoColumn gap="12px"> {userPoolBalance && userPoolBalance.toFixed(6) > 0 && (
<FixedHeightRow> <GreyCard {...rest}>
<RowFixed> <AutoColumn gap="12px">
<Text fontWeight={500} fontSize={16}> <FixedHeightRow>
Your current position
</Text>
</RowFixed>
</FixedHeightRow>
<FixedHeightRow onClick={() => setShowMore(!showMore)}>
<RowFixed>
<DoubleLogo a0={token0?.address || ''} a1={token1?.address || ''} margin={true} size={20} />
<Text fontWeight={500} fontSize={20}>
{token0?.symbol}:{token1?.symbol}
</Text>
</RowFixed>
<RowFixed>
<Text fontWeight={500} fontSize={20}>
{userPoolBalance ? userPoolBalance.toFixed(6) : '-'}
</Text>
</RowFixed>
</FixedHeightRow>
<AutoColumn gap="4px">
<FixedHeightRow>
<Text color="#888D9B" fontSize={14} fontWeight={500}>
{token0?.symbol}:
</Text>
{token0Deposited ? (
<RowFixed> <RowFixed>
{!minimal && <TokenLogo address={token0?.address || ''} />} <Text fontWeight={500} fontSize={16}>
<Text color="#888D9B" fontSize={14} fontWeight={500} marginLeft={'6px'}> Your current position
{token0Deposited?.toFixed(8)}
</Text> </Text>
</RowFixed> </RowFixed>
) : ( </FixedHeightRow>
'-' <FixedHeightRow onClick={() => setShowMore(!showMore)}>
)}
</FixedHeightRow>
<FixedHeightRow>
<Text color="#888D9B" fontSize={14} fontWeight={500}>
{token1?.symbol}:
</Text>
{token1Deposited ? (
<RowFixed> <RowFixed>
{!minimal && <TokenLogo address={token1?.address || ''} />} <DoubleLogo a0={token0?.address || ''} a1={token1?.address || ''} margin={true} size={20} />
<Text color="#888D9B" fontSize={14} fontWeight={500} marginLeft={'6px'}> <Text fontWeight={500} fontSize={20}>
{token1Deposited?.toFixed(8)} {token0?.symbol}:{token1?.symbol}
</Text> </Text>
</RowFixed> </RowFixed>
) : ( <RowFixed>
'-' <Text fontWeight={500} fontSize={20}>
)} {userPoolBalance ? userPoolBalance.toFixed(6) : '-'}
</FixedHeightRow> </Text>
</AutoColumn> </RowFixed>
</AutoColumn> </FixedHeightRow>
</GreyCard> <AutoColumn gap="4px">
<FixedHeightRow>
<Text color="#888D9B" fontSize={16} fontWeight={500}>
{token0?.symbol}:
</Text>
{token0Deposited ? (
<RowFixed>
{!minimal && <TokenLogo address={token0?.address || ''} />}
<Text color="#888D9B" fontSize={16} fontWeight={500} marginLeft={'6px'}>
{token0Deposited?.toFixed(8)}
</Text>
</RowFixed>
) : (
'-'
)}
</FixedHeightRow>
<FixedHeightRow>
<Text color="#888D9B" fontSize={16} fontWeight={500}>
{token1?.symbol}:
</Text>
{token1Deposited ? (
<RowFixed>
{!minimal && <TokenLogo address={token1?.address || ''} />}
<Text color="#888D9B" fontSize={16} fontWeight={500} marginLeft={'6px'}>
{token1Deposited?.toFixed(8)}
</Text>
</RowFixed>
) : (
'-'
)}
</FixedHeightRow>
</AutoColumn>
</AutoColumn>
</GreyCard>
)}
</>
) )
} else } else
return ( return (
<HoverCard {...rest} onClick={() => setShowMore(!showMore)}> <HoverCard {...rest}>
<AutoColumn gap="12px"> <AutoColumn gap="12px">
<FixedHeightRow> <FixedHeightRow onClick={() => setShowMore(!showMore)} style={{ cursor: 'pointer' }}>
<RowFixed> <RowFixed>
<DoubleLogo a0={token0?.address || ''} a1={token1?.address || ''} margin={true} size={20} /> <DoubleLogo a0={token0?.address || ''} a1={token1?.address || ''} margin={true} size={20} />
<Text fontWeight={500} fontSize={20}> <Text fontWeight={500} fontSize={20}>
...@@ -146,17 +149,17 @@ function PositionCard({ pairAddress, token0, token1, history, minimal = false, . ...@@ -146,17 +149,17 @@ function PositionCard({ pairAddress, token0, token1, history, minimal = false, .
</RowFixed> </RowFixed>
</FixedHeightRow> </FixedHeightRow>
{showMore && ( {showMore && (
<AutoColumn gap="4px"> <AutoColumn gap="8px">
<FixedHeightRow> <FixedHeightRow>
<RowFixed> <RowFixed>
{!minimal && <TokenLogo size="16px" style={{ marginRight: '4px' }} address={token0?.address || ''} />} {!minimal && <TokenLogo size="20px" style={{ marginRight: '8px' }} address={token0?.address || ''} />}
<Text color="#888D9B" fontSize={14} fontWeight={500}> <Text color="#888D9B" fontSize={16} fontWeight={500}>
Your {token0?.symbol}: Pooled {token0?.symbol}:
</Text> </Text>
</RowFixed> </RowFixed>
{token0Deposited ? ( {token0Deposited ? (
<RowFixed> <RowFixed>
<Text color="#888D9B" fontSize={14} fontWeight={500} marginLeft={'6px'}> <Text color="#888D9B" fontSize={16} fontWeight={500} marginLeft={'6px'}>
{token0Deposited?.toFixed(8)} {token0Deposited?.toFixed(8)}
</Text> </Text>
</RowFixed> </RowFixed>
...@@ -164,15 +167,16 @@ function PositionCard({ pairAddress, token0, token1, history, minimal = false, . ...@@ -164,15 +167,16 @@ function PositionCard({ pairAddress, token0, token1, history, minimal = false, .
'-' '-'
)} )}
</FixedHeightRow> </FixedHeightRow>
<FixedHeightRow> <FixedHeightRow>
<RowFixed> <RowFixed>
{!minimal && <TokenLogo size="16px" style={{ marginRight: '4px' }} address={token1?.address || ''} />} {!minimal && <TokenLogo size="20px" style={{ marginRight: '8px' }} address={token1?.address || ''} />}
<Text color="#888D9B" fontSize={14} fontWeight={500}> <Text color="#888D9B" fontSize={16} fontWeight={500}>
Your {token1?.symbol}: Pooled {token1?.symbol}:
</Text> </Text>
</RowFixed> </RowFixed>
{token1Deposited ? ( {token1Deposited ? (
<Text color="#888D9B" fontSize={14} fontWeight={500} marginLeft={'6px'}> <Text color="#888D9B" fontSize={16} fontWeight={500} marginLeft={'6px'}>
{token1Deposited?.toFixed(8)} {token1Deposited?.toFixed(8)}
</Text> </Text>
) : ( ) : (
...@@ -181,14 +185,18 @@ function PositionCard({ pairAddress, token0, token1, history, minimal = false, . ...@@ -181,14 +185,18 @@ function PositionCard({ pairAddress, token0, token1, history, minimal = false, .
</FixedHeightRow> </FixedHeightRow>
{!minimal && ( {!minimal && (
<FixedHeightRow> <FixedHeightRow>
<Text color="#888D9B" fontSize={14} fontWeight={500}> <Text color="#888D9B" fontSize={16} fontWeight={500}>
Your pool share: Your pool share:
</Text> </Text>
<Text color="#888D9B" fontSize={14} fontWeight={500}> <Text color="#888D9B" fontSize={16} fontWeight={500}>
{poolTokenPercentage ? poolTokenPercentage.toFixed(2) + '%' : '-'} {poolTokenPercentage ? poolTokenPercentage.toFixed(2) + '%' : '-'}
</Text> </Text>
</FixedHeightRow> </FixedHeightRow>
)} )}
<AutoRow justify="center" marginTop={'10px'}>
<Link>View pool information ↗</Link>
</AutoRow>
<RowBetween marginTop="10px"> <RowBetween marginTop="10px">
<ButtonSecondary <ButtonSecondary
width="48%" width="48%"
...@@ -207,9 +215,6 @@ function PositionCard({ pairAddress, token0, token1, history, minimal = false, . ...@@ -207,9 +215,6 @@ function PositionCard({ pairAddress, token0, token1, history, minimal = false, .
Remove Remove
</ButtonSecondary> </ButtonSecondary>
</RowBetween> </RowBetween>
<AutoRow justify="center" marginTop={'10px'}>
<Link>View analytics</Link>
</AutoRow>
</AutoColumn> </AutoColumn>
)} )}
</AutoColumn> </AutoColumn>
......
src/components/SearchModal/index.js
View file @ 6fd9808e
...@@ -18,6 +18,7 @@ import { Hover } from '../../theme' ...@@ -18,6 +18,7 @@ import { Hover } from '../../theme'
import { ArrowLeft, X } from 'react-feather' import { ArrowLeft, X } from 'react-feather'
import { CloseIcon } from '../../theme/components' import { CloseIcon } from '../../theme/components'
import { ColumnCenter } from '../../components/Column' import { ColumnCenter } from '../../components/Column'
import Card from '../../components/Card'
import { Spinner, TYPE } from '../../theme' import { Spinner, TYPE } from '../../theme'
import { RowBetween, RowFixed, AutoRow } from '../Row' import { RowBetween, RowFixed, AutoRow } from '../Row'
...@@ -48,8 +49,7 @@ const TokenList = styled.div` ...@@ -48,8 +49,7 @@ const TokenList = styled.div`
const FadedSpan = styled.span` const FadedSpan = styled.span`
color: ${({ theme }) => theme.blue1}; color: ${({ theme }) => theme.blue1};
display: flex; font-size: 14px;
align-items: center;
` `
const GreySpan = styled.span` const GreySpan = styled.span`
...@@ -99,12 +99,12 @@ const FilterWrapper = styled(RowFixed)` ...@@ -99,12 +99,12 @@ const FilterWrapper = styled(RowFixed)`
` `
const PaddedColumn = styled(AutoColumn)` const PaddedColumn = styled(AutoColumn)`
padding: 24px; padding: 20px;
padding-bottom: 12px; padding-bottom: 12px;
` `
const PaddedItem = styled(RowBetween)` const PaddedItem = styled(RowBetween)`
padding: 4px 24px; padding: 4px 20px;
height: 56px; height: 56px;
` `
...@@ -519,8 +519,7 @@ function SearchModal({ ...@@ -519,8 +519,7 @@ function SearchModal({
<Modal <Modal
isOpen={isOpen} isOpen={isOpen}
onDismiss={clearInputAndDismiss} onDismiss={clearInputAndDismiss}
minHeight={60} maxHeight={70}
maxHeight={50}
initialFocusRef={isMobile ? undefined : inputRef} initialFocusRef={isMobile ? undefined : inputRef}
> >
<Column style={{ width: '100%' }}> <Column style={{ width: '100%' }}>
...@@ -541,7 +540,7 @@ function SearchModal({ ...@@ -541,7 +540,7 @@ function SearchModal({
</RowFixed> </RowFixed>
<CloseIcon onClick={onDismiss} /> <CloseIcon onClick={onDismiss} />
</RowBetween> </RowBetween>
<TYPE.body style={{ marginTop: '40px' }}> <TYPE.body style={{ marginTop: '10px' }}>
To import a custom token, paste token address in the search bar. To import a custom token, paste token address in the search bar.
</TYPE.body> </TYPE.body>
<Input <Input
...@@ -596,10 +595,22 @@ function SearchModal({ ...@@ -596,10 +595,22 @@ function SearchModal({
</AutoColumn> </AutoColumn>
)} )}
<RowBetween> <RowBetween>
<Text fontSize={14} fontWeight={500}>
Token Name
</Text>
<Filter title="Your Balances" filter={FILTERS.BALANCES} />
</RowBetween>
</PaddedColumn>
)}
{!showTokenImport && <div style={{ width: '100%', height: '1px', backgroundColor: '#E1E1E1' }} />}
{!showTokenImport && <TokenList>{filterType === 'tokens' ? renderTokenList() : renderPairsList()}</TokenList>}
{!showTokenImport && (
<Card>
<AutoRow justify={'center'}>
<div> <div>
{filterType !== 'tokens' && ( {filterType !== 'tokens' && (
<Text fontWeight={500}> <Text fontWeight={500}>
{!isMobile && 'Dont see a pool? '} {!isMobile && "Don't see a pool? "}
<StyledLink <StyledLink
onClick={() => { onClick={() => {
history.push('/find') history.push('/find')
...@@ -611,7 +622,8 @@ function SearchModal({ ...@@ -611,7 +622,8 @@ function SearchModal({
)} )}
{filterType === 'tokens' && ( {filterType === 'tokens' && (
<Text fontWeight={500}> <Text fontWeight={500}>
{!isMobile && 'Dont see a token? '} {!isMobile && "Don't see a token? "}
<StyledLink <StyledLink
onClick={() => { onClick={() => {
setShowTokenImport(true) setShowTokenImport(true)
...@@ -622,13 +634,9 @@ function SearchModal({ ...@@ -622,13 +634,9 @@ function SearchModal({
</Text> </Text>
)} )}
</div> </div>
<div /> </AutoRow>
<Filter title="Your Balances" filter={FILTERS.BALANCES} /> </Card>
</RowBetween>
</PaddedColumn>
)} )}
{!showTokenImport && <div style={{ width: '100%', height: '1px', backgroundColor: '#E1E1E1' }} />}
{!showTokenImport && <TokenList>{filterType === 'tokens' ? renderTokenList() : renderPairsList()}</TokenList>}
</Column> </Column>
</Modal> </Modal>
) )
......
src/components/TokenLogo/index.js
View file @ 6fd9808e
...@@ -51,7 +51,13 @@ export default function TokenLogo({ address, size = '24px', ...rest }) { ...@@ -51,7 +51,13 @@ export default function TokenLogo({ address, size = '24px', ...rest }) {
let path = '' let path = ''
if (address === 'ETH') { if (address === 'ETH') {
return <StyledEthereumLogo size={size} {...rest} /> return (
<StyledEthereumLogo
style={{ boxShadow: '0px 6px 10px rgba(0, 0, 0, 0.075)', borderRadius: '24px' }}
size={size}
{...rest}
/>
)
} else if (!error && !BAD_IMAGES[address]) { } else if (!error && !BAD_IMAGES[address]) {
path = TOKEN_ICON_API(address?.toLowerCase()) path = TOKEN_ICON_API(address?.toLowerCase())
} else { } else {
......
src/components/WalletModal/Option.js
View file @ 6fd9808e
...@@ -12,7 +12,7 @@ const InfoCard = styled.button` ...@@ -12,7 +12,7 @@ const InfoCard = styled.button`
&:focus { &:focus {
box-shadow: 0 0 0 1px ${({ theme }) => theme.blue1}; box-shadow: 0 0 0 1px ${({ theme }) => theme.blue1};
} }
border-color: ${({ theme, active }) => (active ? 'transparent' : theme.bg4)}; border-color: ${({ theme, active }) => (active ? 'transparent' : theme.bg3)};
` `
const OptionCard = styled(InfoCard)` const OptionCard = styled(InfoCard)`
...@@ -34,7 +34,7 @@ const OptionCardClickable = styled(OptionCard)` ...@@ -34,7 +34,7 @@ const OptionCardClickable = styled(OptionCard)`
margin-top: 0; margin-top: 0;
&:hover { &:hover {
cursor: ${({ clickable }) => (clickable ? 'pointer' : '')}; cursor: ${({ clickable }) => (clickable ? 'pointer' : '')};
border: ${({ clickable, theme }) => (clickable ? `1px solid ${theme.blue2}` : ``)}; border: ${({ clickable, theme }) => (clickable ? `1px solid ${theme.blue1}` : ``)};
} }
opacity: ${({ disabled }) => (disabled ? '0.5' : '1')}; opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
` `
......
src/components/WalletModal/index.js
View file @ 6fd9808e
...@@ -84,6 +84,7 @@ const Blurb = styled.div` ...@@ -84,6 +84,7 @@ const Blurb = styled.div`
${({ theme }) => theme.flexRowNoWrap} ${({ theme }) => theme.flexRowNoWrap}
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-wrap: wrap;
margin-top: 2rem; margin-top: 2rem;
${({ theme }) => theme.mediaWidth.upToMedium` ${({ theme }) => theme.mediaWidth.upToMedium`
margin: 1rem; margin: 1rem;
...@@ -93,7 +94,7 @@ const Blurb = styled.div` ...@@ -93,7 +94,7 @@ const Blurb = styled.div`
const OptionGrid = styled.div` const OptionGrid = styled.div`
display: grid; display: grid;
grid-template-columns: 1fr 1fr; /* grid-template-columns: 1fr 1fr; */
grid-gap: 10px; grid-gap: 10px;
${({ theme }) => theme.mediaWidth.upToMedium` ${({ theme }) => theme.mediaWidth.upToMedium`
grid-template-columns: 1fr; grid-template-columns: 1fr;
......
src/contexts/Application.js
View file @ 6fd9808e
...@@ -13,6 +13,8 @@ const UPDATE_BLOCK_NUMBER = 'UPDATE_BLOCK_NUMBER' ...@@ -13,6 +13,8 @@ const UPDATE_BLOCK_NUMBER = 'UPDATE_BLOCK_NUMBER'
const TOGGLE_WALLET_MODAL = 'TOGGLE_WALLET_MODAL' const TOGGLE_WALLET_MODAL = 'TOGGLE_WALLET_MODAL'
const ADD_POPUP = 'ADD_POPUP' const ADD_POPUP = 'ADD_POPUP'
const USER_ADVANCED = 'USER_ADVANCED'
const TOGGLE_USER_ADVANCED = 'TOGGLE_USER_ADVANCED'
const ApplicationContext = createContext() const ApplicationContext = createContext()
...@@ -37,6 +39,10 @@ function reducer(state, { type, payload }) { ...@@ -37,6 +39,10 @@ function reducer(state, { type, payload }) {
return { ...state, [WALLET_MODAL_OPEN]: !state[WALLET_MODAL_OPEN] } return { ...state, [WALLET_MODAL_OPEN]: !state[WALLET_MODAL_OPEN] }
} }
case TOGGLE_USER_ADVANCED: {
return { ...state, [USER_ADVANCED]: !state[USER_ADVANCED] }
}
case ADD_POPUP: { case ADD_POPUP: {
const { newList } = payload const { newList } = payload
return { ...state, [POPUP_LIST]: newList, [POPUP_KEY]: state?.[POPUP_KEY] + 1 } return { ...state, [POPUP_LIST]: newList, [POPUP_KEY]: state?.[POPUP_KEY] + 1 }
...@@ -54,7 +60,8 @@ export default function Provider({ children }) { ...@@ -54,7 +60,8 @@ export default function Provider({ children }) {
[USD_PRICE]: {}, [USD_PRICE]: {},
[POPUP_LIST]: [], [POPUP_LIST]: [],
[POPUP_KEY]: 0, [POPUP_KEY]: 0,
[WALLET_MODAL_OPEN]: false [WALLET_MODAL_OPEN]: false,
[USER_ADVANCED]: true
}) })
const updateBlockNumber = useCallback((networkId, blockNumber) => { const updateBlockNumber = useCallback((networkId, blockNumber) => {
...@@ -65,16 +72,21 @@ export default function Provider({ children }) { ...@@ -65,16 +72,21 @@ export default function Provider({ children }) {
dispatch({ type: TOGGLE_WALLET_MODAL }) dispatch({ type: TOGGLE_WALLET_MODAL })
}, []) }, [])
const toggleUserAdvanced = useCallback(() => {
dispatch({ type: TOGGLE_USER_ADVANCED })
}, [])
const setPopups = useCallback(newList => { const setPopups = useCallback(newList => {
dispatch({ type: ADD_POPUP, payload: { newList } }) dispatch({ type: ADD_POPUP, payload: { newList } })
}, []) }, [])
return ( return (
<ApplicationContext.Provider <ApplicationContext.Provider
value={useMemo(() => [state, { updateBlockNumber, toggleWalletModal, setPopups }], [ value={useMemo(() => [state, { updateBlockNumber, toggleWalletModal, toggleUserAdvanced, setPopups }], [
state, state,
updateBlockNumber, updateBlockNumber,
toggleWalletModal, toggleWalletModal,
toggleUserAdvanced,
setPopups setPopups
])} ])}
> >
...@@ -141,6 +153,17 @@ export function useWalletModalToggle() { ...@@ -141,6 +153,17 @@ export function useWalletModalToggle() {
return toggleWalletModal return toggleWalletModal
} }
export function useUserAdvanced() {
const [state] = useApplicationContext()
return state[USER_ADVANCED]
}
export function useToggleUserAdvanced() {
const [, { toggleUserAdvanced }] = useApplicationContext()
return toggleUserAdvanced
}
export function usePopups() { export function usePopups() {
const [state, { setPopups }] = useApplicationContext() const [state, { setPopups }] = useApplicationContext()
......
src/contexts/Tokens.tsx 0 → 100644
View file @ 6fd9808e
import React, { createContext, useContext, useReducer, useMemo, useCallback, useEffect } from 'react'
import { ChainId, WETH, Token } from '@uniswap/sdk'
import { useWeb3React } from '../hooks'
import { isAddress, getTokenName, getTokenSymbol, getTokenDecimals, safeAccess } from '../utils'
const UPDATE = 'UPDATE'
export let ALL_TOKENS = [
//Mainnet Tokens
WETH[ChainId.MAINNET],
// Rinkeby Tokens
WETH[ChainId.RINKEBY],
new Token(ChainId.RINKEBY, '0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735', 18, 'DAI', 'Dai Stablecoin'),
new Token(ChainId.RINKEBY, '0x8ab15C890E5C03B5F240f2D146e3DF54bEf3Df44', 18, 'IANV2', 'IAn V2 /Coin'),
// new Token(ChainId.RINKEBY, '0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85', 18, 'MKR', 'Maker'),
//Kovan Tokens
WETH[ChainId.KOVAN],
new Token(ChainId.KOVAN, '0x4F96Fe3b7A6Cf9725f59d353F723c1bDb64CA6Aa', 18, 'DAI', 'Dai Stablecoin'),
//Ropsten Tokens
WETH[ChainId.ROPSTEN],
new Token(ChainId.ROPSTEN, '0xaD6D458402F60fD3Bd25163575031ACDce07538D', 18, 'DAI', 'Dai Stablecoin'),
//Goerli Tokens
WETH[ChainId.GÖRLI]
]
/**
* @todo is there a better way to load these upfront?
*/
// add any tokens from local storage
const savedList = window?.localStorage?.UNISWAP && JSON.parse(window?.localStorage?.UNISWAP)?.TOKEN_LIST
if (savedList) {
const newTokens = Object.keys(savedList).map(key => {
const token = savedList[key]
return new Token(token.chainId, token.address, token.decimals, token.symbol, token.name)
})
ALL_TOKENS = ALL_TOKENS.concat(newTokens)
}
// only meant to be used in exchanges.ts!
export const INITIAL_TOKENS_CONTEXT = ALL_TOKENS.reduce((tokenMap, token) => {
// ensure tokens are unique
if (tokenMap?.[token.chainId]?.[token.address] !== undefined) throw Error(`Duplicate token: ${token}`)
return {
...tokenMap,
[token.chainId]: {
...tokenMap?.[token.chainId],
[token.address]: token
}
}
}, {})
const TokensContext = createContext([])
function useTokensContext() {
return useContext(TokensContext)
}
function reducer(state, { type, payload }) {
switch (type) {
case UPDATE: {
const { chainId, token } = payload
return {
...state,
[chainId]: {
...(state?.[chainId] || {}),
[token.address]: token
}
}
}
default: {
throw Error(`Unexpected action type in TokensContext reducer: '${type}'.`)
}
}
}
export default function Provider({ children }) {
const [state, dispatch] = useReducer(reducer, INITIAL_TOKENS_CONTEXT)
const update = useCallback((chainId, token) => {
dispatch({ type: UPDATE, payload: { chainId, token } })
}, [])
return (
<TokensContext.Provider value={useMemo(() => [state, { update }], [state, update])}>
{children}
</TokensContext.Provider>
)
}
export function useToken(tokenAddress: string): Token {
const { library, chainId } = useWeb3React()
const [state, { update }] = useTokensContext()
const allTokensInNetwork = state?.[chainId] || {}
const token = safeAccess(allTokensInNetwork, [tokenAddress])
useEffect(() => {
if (
isAddress(tokenAddress) &&
(token === null || token.name === undefined || token.symbol === undefined || token.decimals === undefined) &&
(chainId || chainId === 0) &&
library
) {
let stale = false
const namePromise = getTokenName(tokenAddress, library).catch(() => null)
const symbolPromise = getTokenSymbol(tokenAddress, library).catch(() => null)
const decimalsPromise = getTokenDecimals(tokenAddress, library).catch(() => null)
Promise.all([namePromise, symbolPromise, decimalsPromise]).then(
([resolvedName, resolvedSymbol, resolvedDecimals]) => {
if (!stale && resolvedDecimals) {
const newToken: Token = new Token(chainId, tokenAddress, resolvedDecimals, resolvedSymbol, resolvedName)
update(chainId, newToken)
}
}
)
return () => {
stale = true
}
}
}, [tokenAddress, token, chainId, library, update])
// hard coded change in UI to display WETH as ETH
if (token && token.name === 'WETH') {
token.name = 'ETH'
}
if (token && token.symbol === 'WETH') {
token.symbol = 'ETH'
}
return token
}
export function useAllTokens(): string[] {
const { chainId } = useWeb3React()
const [state] = useTokensContext()
return useMemo(() => {
// hardcode overide weth as ETH
if (state && state[chainId] && state[chainId][WETH[chainId].address]) {
state[chainId][WETH[chainId].address].symbol = 'ETH'
state[chainId][WETH[chainId].address].name = 'ETH'
}
return state?.[chainId] || {}
}, [state, chainId])
}
src/pages/App.js
View file @ 6fd9808e
...@@ -40,7 +40,7 @@ const BodyWrapper = styled.div` ...@@ -40,7 +40,7 @@ const BodyWrapper = styled.div`
align-items: center; align-items: center;
flex: 1; flex: 1;
overflow: auto; overflow: auto;
padding-top: 100px; padding-top: 60px;
& > * { & > * {
max-width: calc(355px + 4rem); max-width: calc(355px + 4rem);
......
src/pages/Send/index.tsx
View file @ 6fd9808e
...@@ -2,6 +2,6 @@ import React from 'react' ...@@ -2,6 +2,6 @@ import React from 'react'
import ExchangePage from '../../components/ExchangePage' import ExchangePage from '../../components/ExchangePage'
export default function Send({ initialCurrency, params }) { export default function Send({ params }) {
return <ExchangePage sendingInput={true} initialCurrency={initialCurrency} params={params} /> return <ExchangePage sendingInput={true} params={params} />
} }
src/pages/Supply/index.js
View file @ 6fd9808e
...@@ -10,7 +10,7 @@ import { Link, TYPE } from '../../theme' ...@@ -10,7 +10,7 @@ import { Link, TYPE } from '../../theme'
import { Text } from 'rebass' import { Text } from 'rebass'
import { LightCard } from '../../components/Card' import { LightCard } from '../../components/Card'
import { RowBetween } from '../../components/Row' import { RowBetween } from '../../components/Row'
import { ButtonPrimary } from '../../components/Button' import { ButtonPrimary, ButtonSecondary } from '../../components/Button'
import { AutoColumn, ColumnCenter } from '../../components/Column' import { AutoColumn, ColumnCenter } from '../../components/Column'
import { useAllPairs } from '../../contexts/Pairs' import { useAllPairs } from '../../contexts/Pairs'
...@@ -70,7 +70,7 @@ function Supply({ history }) { ...@@ -70,7 +70,7 @@ function Supply({ history }) {
<Text fontSize={20}>Join {filteredExchangeList?.length > 0 ? 'another' : 'a'} pool</Text> <Text fontSize={20}>Join {filteredExchangeList?.length > 0 ? 'another' : 'a'} pool</Text>
</ButtonPrimary> </ButtonPrimary>
<Positions> <Positions>
<AutoColumn gap="20px"> <AutoColumn gap="12px">
<RowBetween padding={'0 8px'}> <RowBetween padding={'0 8px'}>
<Text fontWeight={500}>Your Pooled Liquidity</Text> <Text fontWeight={500}>Your Pooled Liquidity</Text>
<Question text="filler text" /> <Question text="filler text" />
...@@ -84,7 +84,7 @@ function Supply({ history }) { ...@@ -84,7 +84,7 @@ function Supply({ history }) {
</LightCard> </LightCard>
)} )}
{filteredExchangeList} {filteredExchangeList}
<Text color="#AEAEAE" textAlign="center"> <Text color="#AEAEAE" textAlign="center" style={{ padding: '.5rem 0 .5rem 0' }}>
{filteredExchangeList?.length !== 0 ? `Don't see a pool you joined? ` : 'Already joined a pool? '}{' '} {filteredExchangeList?.length !== 0 ? `Don't see a pool you joined? ` : 'Already joined a pool? '}{' '}
<Link <Link
onClick={() => { onClick={() => {
...@@ -97,9 +97,9 @@ function Supply({ history }) { ...@@ -97,9 +97,9 @@ function Supply({ history }) {
</AutoColumn> </AutoColumn>
<FixedBottom> <FixedBottom>
<ColumnCenter> <ColumnCenter>
<ButtonPrimary width="120px" padding="8px" borderRadius="10px" onClick={() => history.push('/create')}> <ButtonSecondary width="136px" padding="8px" borderRadius="10px" onClick={() => history.push('/create')}>
Create Pool + Create Pool
</ButtonPrimary> </ButtonSecondary>
</ColumnCenter> </ColumnCenter>
</FixedBottom> </FixedBottom>
</Positions> </Positions>
......
src/theme/index.js
View file @ 6fd9808e
...@@ -42,7 +42,7 @@ export default function ThemeProvider({ children }) { ...@@ -42,7 +42,7 @@ export default function ThemeProvider({ children }) {
return <StyledComponentsThemeProvider theme={theme(themeToRender)}>{children}</StyledComponentsThemeProvider> return <StyledComponentsThemeProvider theme={theme(themeToRender)}>{children}</StyledComponentsThemeProvider>
} }
const theme = darkMode => ({ export const theme = darkMode => ({
// base // base
white, white,
black, black,
...@@ -62,11 +62,14 @@ const theme = darkMode => ({ ...@@ -62,11 +62,14 @@ const theme = darkMode => ({
bg5: darkMode ? '#565A69' : '#888D9B', bg5: darkMode ? '#565A69' : '#888D9B',
//blues //blues
blue1: '#2172E5', // blue1: '#2172E5',
blue1: '#ff007a',
blue2: darkMode ? '#3680E7' : '#1966D2', blue2: darkMode ? '#3680E7' : '#1966D2',
blue3: darkMode ? '#4D8FEA' : '#165BBB', blue3: darkMode ? '#4D8FEA' : '#165BBB',
blue4: '#C4D9F8', // blue5: '#EBF4FF',
blue5: '#EBF4FF', // blue4: '#C4D9F8',
blue4: '#FDEAF1',
blue5: '#FDEAF1',
// pinks // pinks
pink1: '#DC6BE5', pink1: '#DC6BE5',
...@@ -172,6 +175,11 @@ export const GlobalStyle = createGlobalStyle` ...@@ -172,6 +175,11 @@ export const GlobalStyle = createGlobalStyle`
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@531&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@531&display=swap');
html { html {
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
letter-spacing: -0.018em;
/* font-feature-settings: 'cv01', 'cv02', 'cv03', 'cv04'; */
}
@supports (font-variation-settings: normal) {
html { font-family: 'Inter var', sans-serif; }
} }
html, html,
......
yarn.lock
View file @ 6fd9808e
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment