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
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
import React, { useState } from 'react' import React, { useState } from 'react'
import Copy from '../AccountDetails/Copy'
import TokenLogo from '../TokenLogo' import TokenLogo from '../TokenLogo'
import { Link } from '../../theme/components'
import { TYPE } from '../../theme' import { TYPE } from '../../theme'
import { Text } from 'rebass'
import { Hover } from '../../theme' import { Hover } from '../../theme'
import { GreyCard } from '../Card' import { GreyCard } from '../Card'
import { AutoColumn } from '../Column' import { AutoColumn } from '../Column'
import { RowBetween, RowFixed } from '../Row' import { RowBetween, AutoRow } from '../Row'
import { ChevronDown, ChevronUp } from 'react-feather' import { Copy as CopyIcon, BarChart2, Info, Share, ChevronDown, ChevronUp, Plus } from 'react-feather'
import DoubleLogo from '../DoubleLogo'
import { useWeb3React } from '../../hooks' import { ButtonSecondary, ButtonGray } from '../Button'
import { getEtherscanLink } from '../../utils'
export default function BalanceCard({ token0, balance0, import0, token1, balance1, import1 }) { export default function BalanceCard({ token0, balance0, import0, token1, balance1, import1 }) {
const [details0, setDetails0] = useState(false) const [showInfo, setshowInfo] = useState(false)
const [details1, setDetails1] = useState(false)
const { chainId } = useWeb3React()
return ( return (
<AutoColumn gap="lg"> <AutoRow
<GreyCard> gap="lg"
<AutoColumn gap="md"> justify={'space-between'}
<TYPE.black>Selected Tokens</TYPE.black> style={{
{token0 && balance0 && ( minWidth: '200px',
<Hover onClick={() => setDetails0(!details0)}> maxWidth: '355px',
<RowBetween> flexWrap: 'nowrap',
<RowFixed> alignItems: 'flex-end',
<TokenLogo address={token0?.address || ''} /> zIndex: '99'
<TYPE.black marginLeft="10px"> }}
{token0?.name} ({token0?.symbol}) >
</TYPE.black> <AutoColumn style={{ width: '100%' }} padding="12px">
</RowFixed> {!showInfo ? (
<RowFixed> <Hover>
<TYPE.black>{balance0?.toSignificant(6)}</TYPE.black> <GreyCard padding="16px 20px">
{details0 ? ( <RowBetween onClick={() => setshowInfo(true)} padding={' 0'}>
<ChevronUp size="20" style={{ marginLeft: '10px' }} color="black" /> <Text fontSize={16} fontWeight={500} style={{ userSelect: 'none' }}>
) : ( Show selection details
<ChevronDown size="20" style={{ marginLeft: '10px' }} color="black" /> </Text>
)} <ChevronDown color={'#565A69'} />
</RowFixed> </RowBetween>
</GreyCard>
</Hover>
) : (
<Hover>
<GreyCard padding="px 20px" style={{ marginTop: '0' }}>
<RowBetween onClick={() => setshowInfo(false)} padding={'0px'}>
<Text fontSize={16} color="#565A69" fontWeight={500} style={{ userSelect: 'none' }}>
Hide selection details
</Text>
<ChevronUp color="#565A69" />
</RowBetween> </RowBetween>
{import0 && <TYPE.yellow style={{ paddingLeft: '32px' }}>Token imported by user</TYPE.yellow>} </GreyCard>
</Hover> </Hover>
)} )}
{details0 && ( {showInfo && (
<AutoColumn gap="sm" style={{ marginTop: '2px', marginBottom: '6px' }}> <AutoColumn gap="md" style={{ marginTop: '1rem' }}>
<RowFixed> {token0 && balance0 && (
<TYPE.blue style={{ paddingLeft: '32px' }}>Copy token address</TYPE.blue> // <Hover onClick={() => setDetails0(!details0)}>
<Copy toCopy={token0?.address} /> <>
</RowFixed> <GreyCard padding={'1rem'}>
<Link href={getEtherscanLink(chainId, token0?.address, 'address')} style={{ paddingLeft: '32px' }}> <RowBetween>
View on etherscan <TYPE.body fontWeight={500}>
</Link> {token0?.name} ({token0?.symbol})
</AutoColumn> </TYPE.body>
)} <TokenLogo size={'20px'} address={token0?.address || ''} />
{token1 && balance1 && ( </RowBetween>
<Hover onClick={() => setDetails1(!details1)}> {import0 && <TYPE.yellow style={{ paddingLeft: '0' }}>Token imported by user</TYPE.yellow>}
<AutoRow gap="sm" justify="flex-start" style={{ marginTop: '1rem' }}>
<ButtonGray padding={'2px'} width={'auto'} style={{ margin: '2px' }}>
<AutoRow gap="sm" justify="space-between" padding={'0 4px'}>
<Info size={14} />
<Text fontWeight={500} fontSize={14} style={{ marginLeft: '6px' }}>
Info
</Text>
</AutoRow>
</ButtonGray>
<ButtonGray padding={'2px'} width={'auto'} style={{ margin: '2px' }}>
<AutoRow gap="sm" justify="space-between" padding={'0 4px'}>
<BarChart2 size={14} />
<Text fontWeight={500} fontSize={14} style={{ marginLeft: '6px' }}>
Charts
</Text>
</AutoRow>
</ButtonGray>
<ButtonGray padding={'2px'} width={'auto'} style={{ margin: '2px' }}>
<AutoRow gap="sm" justify="space-between" padding={'0 4px'}>
<CopyIcon size={14} />
<Text fontWeight={500} fontSize={14} style={{ marginLeft: '6px' }}>
Copy Address
</Text>
</AutoRow>
</ButtonGray>
</AutoRow>
</GreyCard>
</>
)}
{token1 && balance1 && (
// <Hover onClick={() => setDetails1(!details1)}>
<>
<GreyCard padding={'1rem'}>
<RowBetween>
<TYPE.body fontWeight={500}>
{token1?.name} ({token1?.symbol})
</TYPE.body>
<TokenLogo size={'20px'} address={token1?.address || ''} />
</RowBetween>
{import1 && <TYPE.yellow style={{ paddingLeft: '0' }}>Token imported by user</TYPE.yellow>}
<AutoRow gap="sm" justify="flex-start" style={{ marginTop: '1rem' }}>
<ButtonGray padding={'2px'} width={'auto'} style={{ margin: '2px' }}>
<AutoRow gap="sm" justify="space-between" padding={'0 4px'}>
<Info size={14} />
<Text fontWeight={500} fontSize={14} style={{ marginLeft: '6px' }}>
Info
</Text>
</AutoRow>
</ButtonGray>
<ButtonGray padding={'2px'} width={'auto'} style={{ margin: '2px' }}>
<AutoRow gap="sm" justify="space-between" padding={'0 4px'}>
<BarChart2 size={14} />
<Text fontWeight={500} fontSize={14} style={{ marginLeft: '6px' }}>
Charts
</Text>
</AutoRow>
</ButtonGray>
<ButtonGray padding={'2px'} width={'auto'} style={{ margin: '2px' }}>
<AutoRow gap="sm" justify="space-between" padding={'0 4px'}>
<CopyIcon size={14} />
<Text fontWeight={500} fontSize={14} style={{ marginLeft: '6px' }}>
Copy Address
</Text>
</AutoRow>
</ButtonGray>
</AutoRow>
</GreyCard>
</>
)}
<GreyCard padding={'1rem'}>
<RowBetween> <RowBetween>
<RowFixed> <TYPE.body fontWeight={500}>
<TokenLogo address={token1?.address || ''} /> {token0?.symbol}:{token1?.symbol}
<TYPE.black marginLeft="10px"> </TYPE.body>
{token1?.name} ({token1?.symbol}) <DoubleLogo a0={token0?.address || ''} a1={token1?.address || ''} margin={true} size={20} />
</TYPE.black>
</RowFixed>
<RowFixed>
<TYPE.black>{balance1?.toSignificant(6)}</TYPE.black>
{details1 ? (
<ChevronUp size="20" style={{ marginLeft: '10px' }} color="black" />
) : (
<ChevronDown size="20" style={{ marginLeft: '10px' }} color="black" />
)}
</RowFixed>
</RowBetween> </RowBetween>
{import0 && <TYPE.yellow style={{ paddingLeft: '32px' }}>Token imported by user</TYPE.yellow>} {import1 && <TYPE.yellow style={{ paddingLeft: '32px' }}>Token imported by user</TYPE.yellow>}
</Hover>
)} <AutoRow gap="sm" justify="flex-start" style={{ marginTop: '1rem' }}>
{details1 && ( <ButtonGray padding={'2px'} width={'auto'} style={{ margin: '2px' }}>
<AutoColumn gap="sm" style={{ marginTop: '2px', marginBottom: '6px' }}> <AutoRow gap="sm" justify="space-between" padding={'0 4px'}>
<RowFixed> <Info size={14} />
<TYPE.blue style={{ paddingLeft: '32px' }}>Copy token address</TYPE.blue> <Text fontWeight={500} fontSize={14} style={{ marginLeft: '6px' }}>
<Copy toCopy={token1?.address} /> Info
</RowFixed> </Text>
<Link href={getEtherscanLink(chainId, token1?.address, 'address')} style={{ paddingLeft: '32px' }}> </AutoRow>
View on etherscan </ButtonGray>
</Link> <ButtonGray padding={'2px'} width={'auto'} style={{ margin: '2px' }}>
</AutoColumn> <AutoRow gap="sm" justify="space-between" padding={'0 4px'}>
)} <BarChart2 size={14} />
</AutoColumn> <Text fontWeight={500} fontSize={14} style={{ marginLeft: '6px' }}>
</GreyCard> Charts
</AutoColumn> </Text>
</AutoRow>
</ButtonGray>
<ButtonGray padding={'2px'} width={'auto'} style={{ margin: '2px' }}>
<AutoRow gap="sm" justify="space-between" padding={'0 4px'}>
<CopyIcon size={14} />
<Text fontWeight={500} fontSize={14} style={{ marginLeft: '6px' }}>
Copy Address
</Text>
</AutoRow>
</ButtonGray>
<ButtonGray padding={'2px'} width={'auto'} style={{ margin: '2px' }}>
<AutoRow gap="sm" justify="space-between" padding={'0 4px'}>
<Plus size={14} />
<Text fontWeight={500} fontSize={14} style={{ marginLeft: '6px' }}>
Add Liquidity
</Text>
</AutoRow>
</ButtonGray>
</AutoRow>
</GreyCard>
</AutoColumn>
)}
</AutoColumn>
<AutoRow
style={{
position: 'fixed',
bottom: '16px',
right: '132px',
width: 'fit-content'
}}
>
{token1 && (
<ButtonSecondary
style={{
padding: ' 8px',
marginLeft: '8px',
width: 'fit-content'
}}
>
<Share size={16} style={{ marginRight: '8px' }} />
Share
</ButtonSecondary>
)}
</AutoRow>
</AutoRow>
) )
} }
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
...@@ -13,25 +13,25 @@ import NumericalInput from '../NumericalInput' ...@@ -13,25 +13,25 @@ import NumericalInput from '../NumericalInput'
import AddressInputPanel from '../AddressInputPanel' import AddressInputPanel from '../AddressInputPanel'
import ConfirmationModal from '../ConfirmationModal' import ConfirmationModal from '../ConfirmationModal'
import CurrencyInputPanel from '../CurrencyInputPanel' import CurrencyInputPanel from '../CurrencyInputPanel'
import BalanceCard from '../BalanceCard'
import { Link } from '../../theme/components' import { Link } from '../../theme/components'
import { Text } from 'rebass' import { Text } from 'rebass'
import { TYPE } from '../../theme' import { theme, TYPE, Hover } from '../../theme'
import { Hover } from '../../theme'
import { AutoColumn, ColumnCenter } from '../../components/Column' import { AutoColumn, ColumnCenter } from '../../components/Column'
import { RowBetween, RowFixed, AutoRow } from '../../components/Row' import { RowBetween, RowFixed, AutoRow } from '../../components/Row'
import { ArrowDown, ChevronDown, ChevronUp } from 'react-feather' import { ArrowDown, ChevronDown, ChevronUp } from 'react-feather'
import { ButtonPrimary, ButtonError, ButtonLight } from '../Button' import { ButtonPrimary, ButtonError, ButtonLight } from '../Button'
import { GreyCard, BlueCard, YellowCard, LightCard } from '../../components/Card' import Card, { GreyCard, BlueCard, YellowCard } from '../../components/Card'
import { usePair } from '../../contexts/Pairs' import { usePair } from '../../contexts/Pairs'
import { useToken, useAllTokens } from '../../contexts/Tokens' import { useToken, useAllTokens, ALL_TOKENS } from '../../contexts/Tokens'
import { useRoute } from '../../contexts/Routes' import { useRoute } from '../../contexts/Routes'
import { useAddressAllowance } from '../../contexts/Allowances' import { useAddressAllowance } from '../../contexts/Allowances'
import { useWeb3React, useTokenContract } from '../../hooks' import { useWeb3React, useTokenContract } from '../../hooks'
import { useAddressBalance, useAllBalances } from '../../contexts/Balances' import { useAddressBalance, useAllBalances } from '../../contexts/Balances'
import { useTransactionAdder, usePendingApproval } from '../../contexts/Transactions' import { useTransactionAdder, usePendingApproval } from '../../contexts/Transactions'
import { useUserAdvanced } from '../../contexts/Application'
import { ROUTER_ADDRESSES } from '../../constants' import { ROUTER_ADDRESSES } from '../../constants'
import { getRouterContract, calculateGasMargin, getProviderOrSigner, getEtherscanLink, isWETH } from '../../utils' import { getRouterContract, calculateGasMargin, getProviderOrSigner, getEtherscanLink, isWETH } from '../../utils'
import { useLocalStorageTokens } from '../../contexts/LocalStorage' import { useLocalStorageTokens } from '../../contexts/LocalStorage'
...@@ -55,42 +55,29 @@ const ArrowWrapper = styled.div` ...@@ -55,42 +55,29 @@ const ArrowWrapper = styled.div`
const FixedBottom = styled.div` const FixedBottom = styled.div`
position: absolute; position: absolute;
margin-top: 2rem; margin-top: 1.5rem;
width: 100%; width: 100%;
margin-bottom: 40px; margin-bottom: 40px;
` `
const AdvancedDropwdown = styled.div` const AdvancedDropwdown = styled.div`
position: absolute; position: absolute;
margin-top: 2px; margin-top: -12px;
left: -8px; left: -16px;
width: 339px; width: 355px;
margin-bottom: 40px; margin-bottom: 100px;
padding: 10px 0; padding: 10px 0;
padding-top: 24px; padding-top: 36px;
border-bottom-left-radius: 20px; border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px; border-bottom-right-radius: 20px;
color: #565a69; color: #565a69;
background-color: rgba(237, 238, 242, 0.8); background-color: rgba(237, 238, 242, 0.5);
color: ${({ theme }) => theme.text2}; color: ${({ theme }) => theme.text2};
z-index: -1; z-index: -1;
` `
// const PseudoBottom = styled.div`
// height: 14px;
// width: 340px;
// background: white;
// position: absolute;
// border-bottom-left-radius: 41px;
// top: 0px;
// border-bottom-right-radius: 40px;
// left: -1px;
// /* box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
// 0px 24px 32px rgba(0, 0, 0, 0.01); */
// `
const SectionBreak = styled.div` const SectionBreak = styled.div`
height: 2px; height: 1px;
width: 100%; width: 100%;
background-color: ${({ theme }) => theme.bg1}; background-color: ${({ theme }) => theme.bg1};
` `
...@@ -128,10 +115,10 @@ const MaxButton = styled.button` ...@@ -128,10 +115,10 @@ const MaxButton = styled.button`
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;
font-size: 0.75rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
cursor: pointer;
text-transform: uppercase; text-transform: uppercase;
cursor: pointer;
margin-right: 0.5rem; margin-right: 0.5rem;
color: ${({ theme }) => theme.blue1}; color: ${({ theme }) => theme.blue1};
:hover { :hover {
...@@ -143,6 +130,26 @@ const MaxButton = styled.button` ...@@ -143,6 +130,26 @@ const MaxButton = styled.button`
} }
` `
const StyledBalanceMaxMini = styled.button`
height: 24px;
background-color: ${({ theme }) => theme.blue5};
border: 1px solid ${({ theme }) => theme.blue5};
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 400;
margin-left: 8px;
cursor: pointer;
color: ${({ theme }) => theme.blue1};
:hover {
border: 1px solid ${({ theme, active }) => (active ? theme.bg2 : theme.blue4)};
}
:focus {
border: 1px solid ${({ theme, active }) => (active ? theme.bg2 : theme.blue4)};
outline: none;
}
`
// styles // styles
const Dots = styled.span` const Dots = styled.span`
&::after { &::after {
...@@ -293,6 +300,8 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -293,6 +300,8 @@ function ExchangePage({ sendingInput = false, history, params }) {
const { chainId, account, library } = useWeb3React() const { chainId, account, library } = useWeb3React()
const routerAddress: string = ROUTER_ADDRESSES[chainId] const routerAddress: string = ROUTER_ADDRESSES[chainId]
const simplified = useUserAdvanced()
// adding notifications on txns // adding notifications on txns
const addTransaction = useTransactionAdder() const addTransaction = useTransactionAdder()
...@@ -323,9 +332,12 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -323,9 +332,12 @@ function ExchangePage({ sendingInput = false, history, params }) {
? params.inputTokenAmount ? params.inputTokenAmount
: '' : ''
: '' : ''
? ''
: ''
}, },
initializeSwapState initializeSwapState
) )
const { independentField, typedValue, ...fieldData } = state const { independentField, typedValue, ...fieldData } = state
const dependentField: Field = independentField === Field.INPUT ? Field.OUTPUT : Field.INPUT const dependentField: Field = independentField === Field.INPUT ? Field.OUTPUT : Field.INPUT
const tradeType: TradeType = independentField === Field.INPUT ? TradeType.EXACT_INPUT : TradeType.EXACT_OUTPUT const tradeType: TradeType = independentField === Field.INPUT ? TradeType.EXACT_INPUT : TradeType.EXACT_OUTPUT
...@@ -367,13 +379,16 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -367,13 +379,16 @@ function ExchangePage({ sendingInput = false, history, params }) {
// check on pending approvals for token amounts // check on pending approvals for token amounts
const pendingApprovalInput = usePendingApproval(tokens[Field.INPUT]?.address) const pendingApprovalInput = usePendingApproval(tokens[Field.INPUT]?.address)
// check for imported tokens to show warning
const importedTokenInput = tokens[Field.INPUT] && !!!ALL_TOKENS?.[chainId]?.[tokens[Field.INPUT]?.address]
const importedTokenOutput = tokens[Field.OUTPUT] && !!!ALL_TOKENS?.[chainId]?.[tokens[Field.OUTPUT]?.address]
// entities for swap // entities for swap
const pair: Pair = usePair(tokens[Field.INPUT], tokens[Field.OUTPUT]) const pair: Pair = usePair(tokens[Field.INPUT], tokens[Field.OUTPUT])
const route = useRoute(tokens[Field.INPUT], tokens[Field.OUTPUT]) const route = useRoute(tokens[Field.INPUT], tokens[Field.OUTPUT])
// check for invalid selection // check for invalid selection
const noRoute: boolean = !route && !!tokens[Field.INPUT] && !!tokens[Field.OUTPUT] const noRoute: boolean = !route && !!tokens[Field.INPUT] && !!tokens[Field.OUTPUT]
const emptyReserves = pair && JSBI.equal(JSBI.BigInt(0), pair.reserve0.raw)
// modal and loading // modal and loading
const [showConfirm, setShowConfirm] = useState<boolean>(false) const [showConfirm, setShowConfirm] = useState<boolean>(false)
...@@ -762,6 +777,7 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -762,6 +777,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
const [isValid, setIsValid] = useState<boolean>(false) const [isValid, setIsValid] = useState<boolean>(false)
const ignoreOutput: boolean = sending ? !sendingWithSwap : false const ignoreOutput: boolean = sending ? !sendingWithSwap : false
const [showInverted, setShowInverted] = useState<boolean>(false)
useEffect(() => { useEffect(() => {
// reset errors // reset errors
...@@ -929,12 +945,12 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -929,12 +945,12 @@ function ExchangePage({ sendingInput = false, history, params }) {
if (!sending) { if (!sending) {
return ( return (
<AutoColumn gap={'lg'} style={{ marginTop: '40px' }}> <AutoColumn gap={'sm'} style={{ marginTop: '20px' }}>
<RowBetween align="flex-end"> <RowBetween align="flex-end">
<Text fontSize={36} fontWeight={500}> <Text fontSize={24} fontWeight={500}>
{!!slippageAdjustedAmounts[Field.INPUT] && slippageAdjustedAmounts[Field.INPUT].toSignificant(6)} {!!slippageAdjustedAmounts[Field.INPUT] && slippageAdjustedAmounts[Field.INPUT].toSignificant(6)}
</Text> </Text>
<RowFixed gap="10px"> <RowFixed gap="4px">
<TokenLogo address={tokens[Field.INPUT]?.address} size={'24px'} /> <TokenLogo address={tokens[Field.INPUT]?.address} size={'24px'} />
<Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}> <Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
{tokens[Field.INPUT]?.symbol || ''} {tokens[Field.INPUT]?.symbol || ''}
...@@ -945,16 +961,31 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -945,16 +961,31 @@ function ExchangePage({ sendingInput = false, history, params }) {
<ArrowDown size="16" color={'#888D9B'} /> <ArrowDown size="16" color={'#888D9B'} />
</RowFixed> </RowFixed>
<RowBetween align="flex-end"> <RowBetween align="flex-end">
<Text fontSize={36} fontWeight={500} color={warningHigh ? '#FF6871' : '#2172E5'}> <Text fontSize={24} fontWeight={600} color={warningHigh ? '#FF6871' : ''}>
{!!slippageAdjustedAmounts[Field.OUTPUT] && slippageAdjustedAmounts[Field.OUTPUT].toSignificant(6)} {!!slippageAdjustedAmounts[Field.OUTPUT] && slippageAdjustedAmounts[Field.OUTPUT].toSignificant(6)}
</Text> </Text>
<RowFixed gap="10px"> <RowFixed gap="4px">
<TokenLogo address={tokens[Field.OUTPUT]?.address} size={'24px'} /> <TokenLogo address={tokens[Field.OUTPUT]?.address} size={'24px'} />
<Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}> <Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
{tokens[Field.OUTPUT]?.symbol || ''} {tokens[Field.OUTPUT]?.symbol || ''}
</Text> </Text>
</RowFixed> </RowFixed>
</RowBetween> </RowBetween>
<AutoColumn justify="flex-start" gap="sm" padding={'20px 0 0 0px'}>
{independentField === Field.INPUT ? (
<TYPE.italic textAlign="left" style={{ width: '100%' }}>
{`Output is estimated. You will receive at least ${slippageAdjustedAmounts[Field.OUTPUT]?.toSignificant(
6
)} ${tokens[Field.OUTPUT]?.symbol} or the transaction will revert.`}
</TYPE.italic>
) : (
<TYPE.italic textAlign="left" style={{ width: '100%' }}>
{`Input is estimated. You will sell at most ${slippageAdjustedAmounts[Field.INPUT]?.toSignificant(6)} ${
tokens[Field.INPUT]?.symbol
} or the transaction will revert.`}
</TYPE.italic>
)}
</AutoColumn>
</AutoColumn> </AutoColumn>
) )
} }
...@@ -976,27 +1007,95 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -976,27 +1007,95 @@ function ExchangePage({ sendingInput = false, history, params }) {
if (!sending || (sending && sendingWithSwap)) { if (!sending || (sending && sendingWithSwap)) {
return ( return (
<> <>
{route && route.midPrice && !emptyReserves && <PriceBar />} <AutoColumn gap="0px">
<ButtonError onClick={onSwap} error={!!warningHigh} style={{ margin: '10px 0' }}> {!noRoute && tokens[Field.OUTPUT] && tokens[Field.INPUT] && (
<RowBetween align="center">
<Text fontWeight={400} fontSize={14} color={theme().text1}>
Price{' '}
<StyledBalanceMaxMini onClick={() => setShowInverted(!showInverted)}>Invert</StyledBalanceMaxMini>
</Text>
<Text fontWeight={500} fontSize={14} color={theme().text1}>
{pair && showInverted
? route.midPrice.invert().toSignificant(6) +
' ' +
tokens[Field.INPUT]?.symbol +
' / ' +
tokens[Field.OUTPUT]?.symbol
: route.midPrice.toSignificant(6) +
' ' +
tokens[Field.OUTPUT]?.symbol +
' / ' +
tokens[Field.INPUT]?.symbol}
</Text>
</RowBetween>
)}
<RowBetween>
<RowFixed>
<TYPE.black fontSize={14} fontWeight={400}>
{independentField === Field.INPUT ? (sending ? 'Maximum sent' : 'Maximum received') : 'Minimum sold'}
</TYPE.black>
<QuestionHelper text="" />
</RowFixed>
<RowFixed>
<TYPE.black fontSize={14}>
{independentField === Field.INPUT
? slippageAdjustedAmounts[Field.OUTPUT]
? slippageAdjustedAmounts[Field.OUTPUT]?.toFixed(5) === '0.00000'
? '<0.00001'
: slippageAdjustedAmounts[Field.OUTPUT]?.toFixed(5)
: '-'
: slippageAdjustedAmounts[Field.INPUT]
? slippageAdjustedAmounts[Field.INPUT]?.toFixed(5) === '0.00000'
? '<0.00001'
: slippageAdjustedAmounts[Field.INPUT]?.toFixed(5)
: '-'}
</TYPE.black>
{parsedAmounts[Field.OUTPUT] && parsedAmounts[Field.INPUT] && (
<TYPE.black fontSize={14} marginLeft={'4px'}>
{independentField === Field.INPUT
? parsedAmounts[Field.OUTPUT] && tokens[Field.OUTPUT]?.symbol
: parsedAmounts[Field.INPUT] && tokens[Field.INPUT]?.symbol}
</TYPE.black>
)}
</RowFixed>
</RowBetween>
<RowBetween>
<RowFixed>
<TYPE.black fontSize={14} fontWeight={400}>
Price Slippage
</TYPE.black>
<QuestionHelper text="" />
</RowFixed>
<ErrorText
fontWeight={500}
fontSize={14}
warningLow={warningLow}
warningMedium={warningMedium}
warningHigh={warningHigh}
>
{priceSlippage
? priceSlippage.toFixed(4) === '0.0000'
? '<0.0001%'
: priceSlippage.toFixed(4) + '%'
: '-'}
</ErrorText>
</RowBetween>
<RowBetween>
<RowFixed>
<TYPE.black fontSize={14} fontWeight={400}>
Liquidity Provider Fee
</TYPE.black>
<QuestionHelper text="" />
</RowFixed>
<TYPE.black fontSize={14}>0.03%</TYPE.black>
</RowBetween>
</AutoColumn>
<ButtonError onClick={onSwap} error={!!warningHigh} style={{ margin: '10px 0 0 0' }}>
<Text fontSize={20} fontWeight={500}> <Text fontSize={20} fontWeight={500}>
{warningHigh ? (sending ? 'Send Anyway' : 'Swap Anyway') : sending ? 'Confirm Send' : 'Confirm Swap'} {warningHigh ? (sending ? 'Send Anyway' : 'Swap Anyway') : sending ? 'Confirm Send' : 'Confirm Swap'}
</Text> </Text>
</ButtonError> </ButtonError>
<AutoColumn justify="center" gap="lg">
{independentField === Field.INPUT ? (
<TYPE.italic textAlign="center" style={{ width: '80%' }}>
{`Output is estimated. You will receive at least ${slippageAdjustedAmounts[Field.OUTPUT]?.toSignificant(
6
)} ${tokens[Field.OUTPUT]?.symbol} or the transaction will revert.`}
</TYPE.italic>
) : (
<TYPE.italic textAlign="center" style={{ width: '80%' }}>
{`Input is estimated. You will sell at most ${slippageAdjustedAmounts[Field.INPUT]?.toSignificant(6)} ${
tokens[Field.INPUT]?.symbol
} or the transaction will revert.`}
</TYPE.italic>
)}
</AutoColumn>
</> </>
) )
} }
...@@ -1006,25 +1105,25 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -1006,25 +1105,25 @@ function ExchangePage({ sendingInput = false, history, params }) {
return ( return (
<AutoRow justify="space-between"> <AutoRow justify="space-between">
<AutoColumn justify="center"> <AutoColumn justify="center">
<Text fontWeight={500} fontSize={16} color="#000000"> <Text fontWeight={500} fontSize={14} color={theme().text2}>
{pair ? `${route.midPrice.toSignificant(6)} ` : '-'} {pair ? `${route.midPrice.toSignificant(6)} ` : '-'}
</Text> </Text>
<Text fontWeight={500} fontSize={14} color="#888D9B" pt={1}> <Text fontWeight={500} fontSize={14} color={theme().text3} pt={1}>
{tokens[Field.OUTPUT]?.symbol} / {tokens[Field.INPUT]?.symbol} {tokens[Field.OUTPUT]?.symbol} / {tokens[Field.INPUT]?.symbol}
</Text> </Text>
</AutoColumn> </AutoColumn>
<AutoColumn justify="center"> <AutoColumn justify="center">
<Text fontWeight={500} fontSize={16} color="#000000"> <Text fontWeight={500} fontSize={14} color={theme().text2}>
{pair ? `${route.midPrice.invert().toSignificant(6)} ` : '-'} {pair ? `${route.midPrice.invert().toSignificant(6)} ` : '-'}
</Text> </Text>
<Text fontWeight={500} fontSize={14} color="#888D9B" pt={1}> <Text fontWeight={500} fontSize={14} color={theme().text3} pt={1}>
{tokens[Field.INPUT]?.symbol} / {tokens[Field.OUTPUT]?.symbol} {tokens[Field.INPUT]?.symbol} / {tokens[Field.OUTPUT]?.symbol}
</Text> </Text>
</AutoColumn> </AutoColumn>
<AutoColumn justify="center"> <AutoColumn justify="center">
<ErrorText <ErrorText
fontWeight={500} fontWeight={500}
fontSize={16} fontSize={14}
warningLow={warningLow} warningLow={warningLow}
warningMedium={warningMedium} warningMedium={warningMedium}
warningHigh={warningHigh} warningHigh={warningHigh}
...@@ -1035,8 +1134,8 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -1035,8 +1134,8 @@ function ExchangePage({ sendingInput = false, history, params }) {
: priceSlippage.toFixed(4) + '%' : priceSlippage.toFixed(4) + '%'
: '-'} : '-'}
</ErrorText> </ErrorText>
<Text fontWeight={500} fontSize={14} color="#888D9B" pt={1}> <Text fontWeight={500} fontSize={14} color={theme().text3} pt={1}>
Price Slippage Price Impact
</Text> </Text>
</AutoColumn> </AutoColumn>
</AutoRow> </AutoRow>
...@@ -1121,6 +1220,7 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -1121,6 +1220,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
hideBalance={true} hideBalance={true}
hideInput={true} hideInput={true}
showSendWithSwap={true} showSendWithSwap={true}
simplified={simplified}
otherSelectedTokenAddress={tokens[Field.OUTPUT]?.address} otherSelectedTokenAddress={tokens[Field.OUTPUT]?.address}
/> />
</InputGroup> </InputGroup>
...@@ -1137,6 +1237,7 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -1137,6 +1237,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
token={tokens[Field.INPUT]} token={tokens[Field.INPUT]}
error={inputError} error={inputError}
pair={pair} pair={pair}
simplified={simplified}
onUserInput={onUserInput} onUserInput={onUserInput}
onMax={() => { onMax={() => {
maxAmountInput && onMaxInput(maxAmountInput.toExact()) maxAmountInput && onMaxInput(maxAmountInput.toExact())
...@@ -1148,7 +1249,7 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -1148,7 +1249,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
<ColumnCenter> <ColumnCenter>
<RowBetween padding="0 8px"> <RowBetween padding="0 8px">
<ArrowWrapper onClick={onSwapTokens}> <ArrowWrapper onClick={onSwapTokens}>
<ArrowDown size="16" color="#2F80ED" onClick={onSwapTokens} /> <ArrowDown size="16" color="#ff007a" onClick={onSwapTokens} />
</ArrowWrapper> </ArrowWrapper>
<ArrowWrapper onClick={() => setSendingWithSwap(false)} style={{ marginRight: '20px' }}> <ArrowWrapper onClick={() => setSendingWithSwap(false)} style={{ marginRight: '20px' }}>
<TYPE.blue>Remove Swap</TYPE.blue> <TYPE.blue>Remove Swap</TYPE.blue>
...@@ -1157,12 +1258,14 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -1157,12 +1258,14 @@ function ExchangePage({ sendingInput = false, history, params }) {
</ColumnCenter> </ColumnCenter>
) : ( ) : (
<Hover> <Hover>
<ColumnCenter> <ColumnCenter padding="0 1rem">
<ArrowDown <ArrowWrapper>
size="16" <ArrowDown
onClick={onSwapTokens} size="16"
color={tokens[Field.INPUT] && tokens[Field.OUTPUT] ? '#2172E5' : '#888D9B'} onClick={onSwapTokens}
/> color={tokens[Field.INPUT] && tokens[Field.OUTPUT] ? '#ff007a' : '#888D9B'}
/>
</ArrowWrapper>
</ColumnCenter> </ColumnCenter>
</Hover> </Hover>
)} )}
...@@ -1179,6 +1282,7 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -1179,6 +1282,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
onTokenSelection={address => onTokenSelection(Field.OUTPUT, address)} onTokenSelection={address => onTokenSelection(Field.OUTPUT, address)}
error={outputError} error={outputError}
pair={pair} pair={pair}
simplified={simplified}
otherSelectedTokenAddress={tokens[Field.INPUT]?.address} otherSelectedTokenAddress={tokens[Field.INPUT]?.address}
/> />
{sendingWithSwap && ( {sendingWithSwap && (
...@@ -1212,9 +1316,46 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -1212,9 +1316,46 @@ function ExchangePage({ sendingInput = false, history, params }) {
</AutoColumn> </AutoColumn>
)} )}
{!noRoute && tokens[Field.OUTPUT] && tokens[Field.INPUT] && ( {!noRoute && tokens[Field.OUTPUT] && tokens[Field.INPUT] && (
<LightCard padding="1rem" borderRadius={'20px'}> <Card padding={simplified ? '.25rem 1rem 0 1rem' : '.25rem 1rem 0 1rem'} borderRadius={'20px'}>
<PriceBar /> {simplified ? (
</LightCard> <PriceBar />
) : (
<AutoColumn style={{ cursor: 'pointer' }} gap="sm">
{' '}
<RowBetween align="center">
<Text fontWeight={500} fontSize={16} color={theme().text2}>
Price{' '}
<StyledBalanceMaxMini onClick={() => setShowInverted(!showInverted)}>Invert</StyledBalanceMaxMini>
</Text>
<Text fontWeight={500} fontSize={16} color={theme().text2}>
{pair && showInverted
? route.midPrice.invert().toSignificant(6) +
' ' +
tokens[Field.INPUT]?.symbol +
' / ' +
tokens[Field.OUTPUT]?.symbol
: route.midPrice.toSignificant(6) +
' ' +
tokens[Field.OUTPUT]?.symbol +
' / ' +
tokens[Field.INPUT]?.symbol}
</Text>
</RowBetween>
{pair && (warningHigh || warningMedium) && (
<RowBetween>
<TYPE.main>Price Impact</TYPE.main>
<ErrorText fontWeight={500} fontSize={16} warningMedium={warningMedium} warningHigh={warningHigh}>
{priceSlippage
? priceSlippage.toFixed(4) === '0.0000'
? '<0.0001%'
: priceSlippage.toFixed(4) + '%'
: '-'}
</ErrorText>
</RowBetween>
)}
</AutoColumn>
)}
</Card>
)} )}
</AutoColumn> </AutoColumn>
<BottomGrouping> <BottomGrouping>
...@@ -1278,8 +1419,8 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -1278,8 +1419,8 @@ function ExchangePage({ sendingInput = false, history, params }) {
<AdvancedDropwdown> <AdvancedDropwdown>
{!showAdvanced && ( {!showAdvanced && (
<Hover> <Hover>
<RowBetween onClick={() => setShowAdvanced(true)} padding={'0 20px'}> <RowBetween onClick={() => setShowAdvanced(true)} padding={'8px 20px'}>
<Text fontSize={14} fontWeight={500} style={{ userSelect: 'none' }}> <Text fontSize={16} fontWeight={500} style={{ userSelect: 'none' }}>
Show Advanced Show Advanced
</Text> </Text>
<ChevronDown color={'#565A69'} /> <ChevronDown color={'#565A69'} />
...@@ -1289,8 +1430,8 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -1289,8 +1430,8 @@ function ExchangePage({ sendingInput = false, history, params }) {
{showAdvanced && ( {showAdvanced && (
<AutoColumn gap="md"> <AutoColumn gap="md">
<Hover> <Hover>
<RowBetween onClick={() => setShowAdvanced(false)} padding={'0 20px'}> <RowBetween onClick={() => setShowAdvanced(false)} padding={'8px 20px'}>
<Text fontSize={14} color="#565A69" fontWeight={500} style={{ userSelect: 'none' }}> <Text fontSize={16} color="#565A69" fontWeight={500} style={{ userSelect: 'none' }}>
Hide Advanced Hide Advanced
</Text> </Text>
<ChevronUp color="#565A69" /> <ChevronUp color="#565A69" />
...@@ -1303,9 +1444,9 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -1303,9 +1444,9 @@ function ExchangePage({ sendingInput = false, history, params }) {
<TYPE.black fontSize={14} fontWeight={400}> <TYPE.black fontSize={14} fontWeight={400}>
{independentField === Field.INPUT {independentField === Field.INPUT
? sending ? sending
? 'Maximum amount sent' ? 'Maximum sent'
: 'Maximum amount received' : 'Maximum received'
: 'Minimum amount sold'} : 'Minimum sold'}
</TYPE.black> </TYPE.black>
<QuestionHelper text="" /> <QuestionHelper text="" />
</RowFixed> </RowFixed>
...@@ -1367,7 +1508,9 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -1367,7 +1508,9 @@ function ExchangePage({ sendingInput = false, history, params }) {
</AutoColumn> </AutoColumn>
<SectionBreak /> <SectionBreak />
<RowFixed padding={'0 20px'}> <RowFixed padding={'0 20px'}>
<TYPE.black fontSize={14}>Set front running resistance</TYPE.black> <TYPE.black fontWeight={400} fontSize={14}>
Set front running resistance
</TYPE.black>
<QuestionHelper text="" /> <QuestionHelper text="" />
</RowFixed> </RowFixed>
<SlippageTabs <SlippageTabs
...@@ -1381,33 +1524,33 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -1381,33 +1524,33 @@ function ExchangePage({ sendingInput = false, history, params }) {
<FixedBottom> <FixedBottom>
<AutoColumn gap="lg"> <AutoColumn gap="lg">
{warningHigh && ( {warningHigh && (
<YellowCard style={{ padding: '20px', paddingTop: '10px', marginBottom: '10px' }}> <YellowCard style={{ padding: '20px', paddingTop: '10px' }}>
<AutoColumn gap="md" mt={2}> <AutoColumn gap="md" mt={2}>
<RowBetween> <RowBetween>
<RowFixed> <RowFixed>
<span role="img" aria-label="warning"> <span role="img" aria-label="warning">
⚠️ ⚠️
</span>{' '} </span>{' '}
<Text fontWeight={500} marginLeft="4px"> <Text fontWeight={500} marginLeft="4px" style={{ padding: '4px', paddingTop: '12px' }}>
Slippage Warning Slippage Warning
</Text> </Text>
</RowFixed> </RowFixed>
</RowBetween> </RowBetween>
<Text lineHeight="145.23%;" fontSize={14} fontWeight={400}> <Text lineHeight="145.23%;" fontSize={16} fontWeight={400}>
This trade will move the price by {slippageFromTrade.toFixed(2)}%. This pool probably doesn’t have This trade will move the price by {slippageFromTrade.toFixed(2)}%. This pool probably doesn’t have
enough liquidity to support this trade. enough liquidity to support this trade.
</Text> </Text>
</AutoColumn> </AutoColumn>
</YellowCard> </YellowCard>
)} )}
{/* <BalanceCard <BalanceCard
token0={tokens[Field.INPUT]} token0={tokens[Field.INPUT]}
token1={tokens[Field.OUTPUT]} token1={tokens[Field.OUTPUT]}
import0={importedTokenInput} import0={importedTokenInput}
balance0={userBalances[Field.INPUT]} balance0={userBalances[Field.INPUT]}
balance1={userBalances[Field.OUTPUT]} balance1={userBalances[Field.OUTPUT]}
import1={importedTokenOutput} import1={importedTokenOutput}
/> */} />
</AutoColumn> </AutoColumn>
</FixedBottom> </FixedBottom>
</AdvancedDropwdown> </AdvancedDropwdown>
......
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 source diff could not be displayed because it is too large. You can view the blob instead.
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