Skip to content

I
interface
Commit 5426e488 authored by Ian Lapham's avatar Ian Lapham Committed by GitHub
Browse files
Options

popup styles, slippage language and amounts, min max copy (#714) 

* Prepare for V2 testing

* popup styles, slippage language and amounts, min max copy

* Bug fixes and tweaks

* Add form link

* remove other imports
Co-authored-by: default avatarCallil Capuozzo <callil.capuozzo@gmail.com>
parent 64dd09f2
Hide whitespace changes
Inline Side-by-side
Showing with 392 additions and 398 deletions
public/locales/en.json
View file @ 5426e488
...@@ -87,5 +87,5 @@ ...@@ -87,5 +87,5 @@
"forAtLeast": "for at least ", "forAtLeast": "for at least ",
"brokenToken": "The selected token is not compatible with Uniswap V1. Adding liquidity will result in locked funds.", "brokenToken": "The selected token is not compatible with Uniswap V1. Adding liquidity will result in locked funds.",
"toleranceExplanation": "Lowering this limit decreases your risk of frontrunning. However, this makes more likely that your transaction will fail due to normal price movements.", "toleranceExplanation": "Lowering this limit decreases your risk of frontrunning. However, this makes more likely that your transaction will fail due to normal price movements.",
"tokenSearchPlaceholder": "Search name or paste token address" "tokenSearchPlaceholder": "Search name or paste address"
} }
src/components/AccountDetails/Copy.js
View file @ 5426e488
...@@ -25,11 +25,11 @@ const TransactionStatusText = styled.span` ...@@ -25,11 +25,11 @@ const TransactionStatusText = styled.span`
align-items: center; align-items: center;
` `
export default function CopyHelper(props, { toCopy }) { export default function CopyHelper(props) {
const [isCopied, setCopied] = useCopyClipboard() const [isCopied, setCopied] = useCopyClipboard()
return ( return (
<CopyIcon onClick={() => setCopied(toCopy)}> <CopyIcon onClick={() => setCopied(props.toCopy)}>
{props.children} {props.children}
{isCopied ? ( {isCopied ? (
<TransactionStatusText> <TransactionStatusText>
......
src/components/AccountDetails/index.js
View file @ 5426e488
...@@ -15,13 +15,13 @@ import FortmaticIcon from '../../assets/images/fortmaticIcon.png' ...@@ -15,13 +15,13 @@ 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 { ButtonLight } from '../Button' import { ButtonEmpty } from '../Button'
import { Link, TYPE } from '../../theme' import { Link, TYPE } from '../../theme'
const HeaderRow = styled.div` const HeaderRow = styled.div`
${({ theme }) => theme.flexRowNoWrap}; ${({ theme }) => theme.flexRowNoWrap};
padding: 1.5rem 1.5rem; padding: 1rem 1rem;
font-weight: 500; font-weight: 500;
color: ${props => (props.color === 'blue' ? ({ theme }) => theme.blue1 : 'inherit')}; color: ${props => (props.color === 'blue' ? ({ theme }) => theme.blue1 : 'inherit')};
${({ theme }) => theme.mediaWidth.upToMedium` ${({ theme }) => theme.mediaWidth.upToMedium`
...@@ -75,7 +75,7 @@ const AccountGroupingRow = styled.div` ...@@ -75,7 +75,7 @@ const AccountGroupingRow = styled.div`
const AccountSection = styled.div` const AccountSection = styled.div`
background-color: ${({ theme }) => theme.bg1}; background-color: ${({ theme }) => theme.bg1};
padding: 0rem 1.5rem; padding: 0rem 1rem;
${({ theme }) => theme.mediaWidth.upToMedium`padding: 0rem 1rem 1rem 1rem;`}; ${({ theme }) => theme.mediaWidth.upToMedium`padding: 0rem 1rem 1rem 1rem;`};
` `
...@@ -337,15 +337,16 @@ export default function AccountDetails({ ...@@ -337,15 +337,16 @@ export default function AccountDetails({
{!(isMobile && (window.web3 || window.ethereum)) && ( {!(isMobile && (window.web3 || window.ethereum)) && (
<ConnectButtonRow> <ConnectButtonRow>
<ButtonLight <ButtonEmpty
padding={'8px 12px'} style={{ fontWeight: '400' }}
width={240} padding={'px 12px'}
width={260}
onClick={() => { onClick={() => {
openOptions() openOptions()
}} }}
> >
Connect to a different wallet Connect to a different wallet
</ButtonLight> </ButtonEmpty>
</ConnectButtonRow> </ConnectButtonRow>
)} )}
</AccountSection> </AccountSection>
......
src/components/Button/index.js
View file @ 5426e488
...@@ -58,15 +58,15 @@ export const ButtonLight = styled(Base)` ...@@ -58,15 +58,15 @@ export const ButtonLight = styled(Base)`
font-size: 16px; 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.03, theme.blue5)};
background-color: ${({ theme, disabled }) => !disabled && darken(0.05, theme.blue5)}; background-color: ${({ theme, disabled }) => !disabled && darken(0.03, theme.blue5)};
} }
&:hover { &:hover {
background-color: ${({ theme, disabled }) => !disabled && darken(0.05, theme.blue5)}; background-color: ${({ theme, disabled }) => !disabled && darken(0.03, theme.blue5)};
} }
&:active { &:active {
box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && darken(0.1, theme.blue5)}; box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && darken(0.05, theme.blue5)};
background-color: ${({ theme, disabled }) => !disabled && darken(0.1, theme.blue5)}; background-color: ${({ theme, disabled }) => !disabled && darken(0.05, theme.blue5)};
} }
` `
...@@ -96,15 +96,15 @@ export const ButtonSecondary = styled(Base)` ...@@ -96,15 +96,15 @@ export const ButtonSecondary = styled(Base)`
padding: 10px; padding: 10px;
&:focus { &:focus {
box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.blue5)}; box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.03, theme.blue5)};
background-color: ${({ theme }) => darken(0.05, theme.blue5)}; background-color: ${({ theme }) => darken(0.03, theme.blue5)};
} }
&:hover { &:hover {
background-color: ${({ theme }) => darken(0.05, theme.blue5)}; background-color: ${({ theme }) => darken(0.03, theme.blue5)};
} }
&:active { &:active {
box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.blue5)}; box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.blue5)};
background-color: ${({ theme }) => darken(0.1, theme.blue5)}; background-color: ${({ theme }) => darken(0.05, theme.blue5)};
} }
&:disabled { &:disabled {
background-color: ${({ theme }) => theme.blue5}; background-color: ${({ theme }) => theme.blue5};
...@@ -138,7 +138,7 @@ export const ButtonPink = styled(Base)` ...@@ -138,7 +138,7 @@ export const ButtonPink = styled(Base)`
export const ButtonOutlined = styled(Base)` export const ButtonOutlined = styled(Base)`
border: 1px solid #edeef2; border: 1px solid #edeef2;
background-color: transparent; background-color: transparent;
color: ${({ theme }) => theme.blue1}; color: ${({ theme }) => theme.text1};
&:focus { &:focus {
box-shadow: 0 0 0 1px ${({ theme }) => theme.bg4}; box-shadow: 0 0 0 1px ${({ theme }) => theme.bg4};
...@@ -258,12 +258,12 @@ export function ButtonDropwdown({ disabled = false, children, ...rest }) { ...@@ -258,12 +258,12 @@ export function ButtonDropwdown({ disabled = false, children, ...rest }) {
export function ButtonDropwdownLight({ disabled = false, children, ...rest }) { export function ButtonDropwdownLight({ disabled = false, children, ...rest }) {
return ( return (
<ButtonEmpty {...rest} disabled={disabled}> <ButtonOutlined {...rest} disabled={disabled}>
<RowBetween> <RowBetween>
<div style={{ display: 'flex', alignItems: 'center' }}>{children}</div> <div style={{ display: 'flex', alignItems: 'center' }}>{children}</div>
<ChevronDown size={24} /> <ChevronDown size={24} />
</RowBetween> </RowBetween>
</ButtonEmpty> </ButtonOutlined>
) )
} }
......
src/components/ConfirmationModal/index.js
View file @ 5426e488
...@@ -8,7 +8,7 @@ import { Link } from '../../theme' ...@@ -8,7 +8,7 @@ import { Link } from '../../theme'
import { Text } from 'rebass' import { Text } from 'rebass'
import { CloseIcon } from '../../theme/components' import { CloseIcon } from '../../theme/components'
import { RowBetween } from '../Row' import { RowBetween } from '../Row'
import { CheckCircle } from 'react-feather' import { ArrowUpCircle } from 'react-feather'
import { ButtonPrimary } from '../Button' import { ButtonPrimary } from '../Button'
import { AutoColumn, ColumnCenter } from '../Column' import { AutoColumn, ColumnCenter } from '../Column'
...@@ -24,8 +24,8 @@ const Section = styled(AutoColumn)` ...@@ -24,8 +24,8 @@ const Section = styled(AutoColumn)`
const BottomSection = styled(Section)` const BottomSection = styled(Section)`
background-color: ${({ theme }) => theme.bg2}; background-color: ${({ theme }) => theme.bg2};
border-bottom-left-radius: 10px; border-bottom-left-radius: 20px;
border-bottom-right-radius: 10px; border-bottom-right-radius: 20px;
` `
const ConfirmedIcon = styled(ColumnCenter)` const ConfirmedIcon = styled(ColumnCenter)`
...@@ -76,32 +76,36 @@ function ConfirmationModal({ ...@@ -76,32 +76,36 @@ function ConfirmationModal({
<CloseIcon onClick={WrappedOnDismissed} /> <CloseIcon onClick={WrappedOnDismissed} />
</RowBetween> </RowBetween>
<ConfirmedIcon> <ConfirmedIcon>
{pendingConfirmation ? <Loader size="90px" /> : <CheckCircle size={90} color="#27AE60" />} {pendingConfirmation ? (
<Loader size="90px" />
) : (
<ArrowUpCircle strokeWidth={0.5} size={90} color="#ff007a" />
)}
</ConfirmedIcon> </ConfirmedIcon>
<AutoColumn gap="24px" justify={'center'}> <AutoColumn gap="12px" justify={'center'}>
<Text fontWeight={500} fontSize={20}> <Text fontWeight={500} fontSize={20}>
{!pendingConfirmation ? 'Transaction Submitted' : 'Waiting For Confirmation'} {!pendingConfirmation ? 'Transaction Submitted' : 'Waiting For Confirmation'}
</Text> </Text>
<AutoColumn gap="12px" justify={'center'}> <AutoColumn gap="12px" justify={'center'}>
<Text fontWeight={600} fontSize={16} color="#2172E5" textAlign="center"> <Text fontWeight={600} fontSize={14} color="" textAlign="center" style={{ width: '70%' }}>
{pendingText} {pendingText}
</Text> </Text>
</AutoColumn> </AutoColumn>
{!pendingConfirmation && ( {!pendingConfirmation && (
<> <>
<Link href={getEtherscanLink(chainId, hash, 'transaction')}> <Link href={getEtherscanLink(chainId, hash, 'transaction')}>
<Text fontWeight={500} fontSize={14} color="#2172E5"> <Text fontWeight={500} fontSize={14} color="#ff007a">
View on Etherscan View on Etherscan
</Text> </Text>
</Link> </Link>
<ButtonPrimary onClick={() => WrappedOnDismissed(true)} style={{ margin: '20px 0' }}> <ButtonPrimary onClick={() => WrappedOnDismissed(true)} style={{ margin: '20px 0 0 0' }}>
<Text fontWeight={500} fontSize={20}> <Text fontWeight={500} fontSize={20}>
Close Close
</Text> </Text>
</ButtonPrimary> </ButtonPrimary>
</> </>
)} )}
{pendingConfirmation && <div style={{ height: '138px' }} />} {/* {pendingConfirmation && <div style={{ height: '138px' }} />} */}
<Text fontSize={12} color="#565A69" textAlign="center"> <Text fontSize={12} color="#565A69" textAlign="center">
{pendingConfirmation {pendingConfirmation
? 'Confirm this transaction in your wallet' ? 'Confirm this transaction in your wallet'
......
src/components/CreatePool/index.tsx
View file @ 5426e488
...@@ -8,7 +8,6 @@ import SearchModal from '../SearchModal' ...@@ -8,7 +8,6 @@ import SearchModal from '../SearchModal'
import AddLiquidity from '../../pages/Supply/AddLiquidity' import AddLiquidity from '../../pages/Supply/AddLiquidity'
import { Text } from 'rebass' import { Text } from 'rebass'
import { Plus } from 'react-feather' import { Plus } from 'react-feather'
import { BlueCard } from '../Card'
import { TYPE, Link } from '../../theme' import { TYPE, Link } from '../../theme'
import { AutoColumn, ColumnCenter } from '../Column' import { AutoColumn, ColumnCenter } from '../Column'
import { ButtonPrimary, ButtonDropwdown, ButtonDropwdownLight } from '../Button' import { ButtonPrimary, ButtonDropwdown, ButtonDropwdownLight } from '../Button'
...@@ -50,12 +49,6 @@ function CreatePool({ history }) { ...@@ -50,12 +49,6 @@ function CreatePool({ history }) {
} else } else
return ( return (
<AutoColumn gap="20px"> <AutoColumn gap="20px">
<BlueCard>
<AutoColumn gap="10px">
<TYPE.blue>{'Step ' + step + '.'} </TYPE.blue>
{step === 1 && <TYPE.blue fontWeight={400}>Select or add a second token to continue.</TYPE.blue>}
</AutoColumn>
</BlueCard>
<AutoColumn gap="24px"> <AutoColumn gap="24px">
{!token0Address ? ( {!token0Address ? (
<ButtonDropwdown <ButtonDropwdown
......
src/components/CurrencyInputPanel/index.js
View file @ 5426e488
...@@ -7,7 +7,7 @@ import TokenLogo from '../TokenLogo' ...@@ -7,7 +7,7 @@ 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 } from '../../theme' import { TYPE, Hover } 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'
...@@ -19,7 +19,7 @@ import { ThemeContext } from 'styled-components' ...@@ -19,7 +19,7 @@ import { ThemeContext } from 'styled-components'
const InputRow = styled.div` const InputRow = styled.div`
${({ theme }) => theme.flexRowNoWrap} ${({ theme }) => theme.flexRowNoWrap}
align-items: center; align-items: center;
padding: 0.75rem 0.5rem 0.75rem 1rem; padding: ${({ selected }) => (selected ? '0.75rem 0.5rem 0.75rem 1rem' : '0.75rem 0.75rem 0.75rem 1rem')};
` `
const CurrencySelect = styled.button` const CurrencySelect = styled.button`
...@@ -50,7 +50,7 @@ const LabelRow = styled.div` ...@@ -50,7 +50,7 @@ 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: 0rem 1rem 0.75rem 1rem; padding: 0.75rem 1rem 0 1rem;
height: 20px height: 20px
span:hover { span:hover {
cursor: pointer; cursor: pointer;
...@@ -112,26 +112,26 @@ const StyledBalanceMax = styled.button` ...@@ -112,26 +112,26 @@ const StyledBalanceMax = styled.button`
outline: none; outline: none;
} }
` `
const StyledBalanceMaxMini = styled.button` // const StyledBalanceMaxMini = styled.button`
height: 24px; // height: 24px;
background-color: ${({ theme, active }) => (active ? theme.blue5 : theme.bg2)}; // background-color: ${({ theme, active }) => (active ? theme.blue5 : theme.bg2)};
border: 1px solid ${({ theme }) => theme.blue5}; // border: 1px solid ${({ theme }) => theme.blue5};
border-radius: 0.5rem; // border-radius: 0.5rem;
font-size: 0.875rem; // font-size: 0.875rem;
font-weight: 500; // font-weight: 500;
cursor: pointer; // cursor: pointer;
pointer-events: ${({ active }) => (active ? 'initial' : 'none')}; // pointer-events: ${({ active }) => (active ? 'initial' : 'none')};
color: ${({ theme, active }) => (active ? theme.blue1 : theme.text4)}; // color: ${({ theme, active }) => (active ? theme.blue1 : theme.text4)};
:hover { // :hover {
border: 1px solid ${({ theme, active }) => (active ? theme.bg2 : theme.bg1)}; // border: 1px solid ${({ theme, active }) => (active ? theme.bg2 : theme.bg1)};
} // }
:focus { // :focus {
border: 1px solid ${({ theme, active }) => (active ? theme.bg2 : theme.bg1)}; // border: 1px solid ${({ theme, active }) => (active ? theme.bg2 : theme.bg1)};
outline: none; // outline: none;
} // }
` // `
export default function CurrencyInputPanel({ export default function CurrencyInputPanel({
value, value,
...@@ -141,6 +141,7 @@ export default function CurrencyInputPanel({ ...@@ -141,6 +141,7 @@ export default function CurrencyInputPanel({
atMax, atMax,
error, error,
type = '', type = '',
label = 'Input',
urlAddedTokens = [], // used urlAddedTokens = [], // used
onTokenSelection = null, onTokenSelection = null,
token = null, token = null,
...@@ -151,7 +152,7 @@ export default function CurrencyInputPanel({ ...@@ -151,7 +152,7 @@ export default function CurrencyInputPanel({
hideInput = false, hideInput = false,
showSendWithSwap = false, showSendWithSwap = false,
otherSelectedTokenAddress = null, otherSelectedTokenAddress = null,
simplified = false advanced = false
}) { }) {
const { t } = useTranslation() const { t } = useTranslation()
...@@ -163,7 +164,34 @@ export default function CurrencyInputPanel({ ...@@ -163,7 +164,34 @@ export default function CurrencyInputPanel({
return ( return (
<InputPanel> <InputPanel>
<Container error={!!error} hideInput={hideInput}> <Container error={!!error} hideInput={hideInput}>
<InputRow style={hideInput ? { padding: '0', borderRadius: '8px' } : {}} hideInput={hideInput}> {!hideInput && (
<LabelRow>
<RowBetween>
<TYPE.body color={theme.text2} fontWeight={500} fontSize={16}>
{label}
</TYPE.body>
<Hover>
<TYPE.body
onClick={onMax}
color={theme.text2}
fontWeight={500}
fontSize={16}
style={{ display: 'inline' }}
>
{!hideBalance && !!token && userTokenBalance
? 'Balance: ' + userTokenBalance?.toSignificant(6)
: ' -'}
</TYPE.body>
</Hover>
</RowBetween>
</LabelRow>
)}
<InputRow
style={hideInput ? { padding: '0', borderRadius: '8px' } : {}}
hideInput={hideInput}
selected={disableTokenSelect}
>
{!hideInput && ( {!hideInput && (
<> <>
<NumericalInput <NumericalInput
...@@ -172,7 +200,7 @@ export default function CurrencyInputPanel({ ...@@ -172,7 +200,7 @@ export default function CurrencyInputPanel({
onUserInput(field, val) onUserInput(field, val)
}} }}
/> />
{!simplified && !!token?.address && !atMax && type !== 'OUTPUT' && ( {!advanced && !!token?.address && !atMax && label !== 'To' && (
<StyledBalanceMax onClick={onMax}>MAX</StyledBalanceMax> <StyledBalanceMax onClick={onMax}>MAX</StyledBalanceMax>
)} )}
</> </>
...@@ -205,30 +233,6 @@ export default function CurrencyInputPanel({ ...@@ -205,30 +233,6 @@ export default function CurrencyInputPanel({
</Aligner> </Aligner>
</CurrencySelect> </CurrencySelect>
</InputRow> </InputRow>
{simplified && !hideBalance && !!token && (
<LabelRow>
<RowBetween onClick={onMax}>
{/* {!!token?.address && !atMax && type !== 'OUTPUT' ? (
<StyledBalanceMaxMini>Max</StyledBalanceMaxMini>
) : (
<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>
</LabelRow>
)}
</Container> </Container>
{!disableTokenSelect && ( {!disableTokenSelect && (
<SearchModal <SearchModal
......
src/components/ExchangePage/index.tsx
View file @ 5426e488
...@@ -13,19 +13,19 @@ import NumericalInput from '../NumericalInput' ...@@ -13,19 +13,19 @@ 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 BalanceCard from '../BalanceCard'
import { Link } from '../../theme/components' import { Link } from '../../theme/components'
import { Text } from 'rebass' import { Text } from 'rebass'
import { theme, TYPE, Hover } from '../../theme' import { theme, TYPE, 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, Repeat } from 'react-feather'
import { ButtonPrimary, ButtonError, ButtonLight } from '../Button' import { ButtonPrimary, ButtonError, ButtonLight } from '../Button'
import Card, { GreyCard, BlueCard, YellowCard } from '../../components/Card' import Card, { GreyCard, BlueCard, YellowCard } from '../../components/Card'
import { usePair } from '../../contexts/Pairs' import { usePair } from '../../contexts/Pairs'
import { useToken, useAllTokens, ALL_TOKENS } from '../../contexts/Tokens' import { useToken, useAllTokens } 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'
...@@ -79,7 +79,7 @@ const AdvancedDropwdown = styled.div` ...@@ -79,7 +79,7 @@ const AdvancedDropwdown = styled.div`
const SectionBreak = styled.div` const SectionBreak = styled.div`
height: 1px; height: 1px;
width: 100%; width: 100%;
background-color: ${({ theme }) => theme.bg1}; background-color: ${({ theme }) => theme.bg3};
` `
const BottomGrouping = styled.div` const BottomGrouping = styled.div`
...@@ -132,20 +132,28 @@ const MaxButton = styled.button` ...@@ -132,20 +132,28 @@ const MaxButton = styled.button`
const StyledBalanceMaxMini = styled.button` const StyledBalanceMaxMini = styled.button`
height: 24px; height: 24px;
background-color: ${({ theme }) => theme.blue5}; background-color: ${({ theme }) => theme.bg2};
border: 1px solid ${({ theme }) => theme.blue5}; border: none;
border-radius: 0.5rem; border-radius: 0.5rem;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 400; font-weight: 400;
margin-left: 8px; margin-left: 6px;
cursor: pointer; cursor: pointer;
color: ${({ theme }) => theme.blue1}; color: ${({ theme }) => theme.text2};
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
float: right;
:hover { :hover {
border: 1px solid ${({ theme, active }) => (active ? theme.bg2 : theme.blue4)}; background-color: ${({ theme }) => theme.bg3};
/* border: 1px solid ${({ theme, active }) => (active ? theme.bg2 : theme.blue4)}; */
} }
:focus { :focus {
border: 1px solid ${({ theme, active }) => (active ? theme.bg2 : theme.blue4)}; background-color: ${({ theme }) => theme.bg3};
/* border: 1px solid ${({ theme, active }) => (active ? theme.bg2 : theme.blue4)}; */
outline: none; outline: none;
} }
` `
...@@ -299,8 +307,6 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -299,8 +307,6 @@ function ExchangePage({ sendingInput = false, history, params }) {
const { chainId, account, library } = useWeb3React() const { chainId, account, library } = useWeb3React()
const simplified = useUserAdvanced()
// adding notifications on txns // adding notifications on txns
const addTransaction = useTransactionAdder() const addTransaction = useTransactionAdder()
...@@ -378,10 +384,6 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -378,10 +384,6 @@ 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])
...@@ -437,6 +439,11 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -437,6 +439,11 @@ function ExchangePage({ sendingInput = false, history, params }) {
if (trade) if (trade)
parsedAmounts[dependentField] = tradeType === TradeType.EXACT_INPUT ? trade.outputAmount : trade.inputAmount parsedAmounts[dependentField] = tradeType === TradeType.EXACT_INPUT ? trade.outputAmount : trade.inputAmount
const feeAsPercent = new Percent(JSBI.BigInt(3), JSBI.BigInt(1000))
const feeTimesInputRaw =
parsedAmounts[Field.INPUT] && feeAsPercent.multiply(JSBI.BigInt(parsedAmounts[Field.INPUT].raw))
const feeTimesInputFormatted = feeTimesInputRaw && new TokenAmount(tokens[Field.INPUT], feeTimesInputRaw?.quotient)
const formattedAmounts = { const formattedAmounts = {
[independentField]: typedValue, [independentField]: typedValue,
[dependentField]: parsedAmounts[dependentField] ? parsedAmounts[dependentField].toSignificant(8) : '' [dependentField]: parsedAmounts[dependentField] ? parsedAmounts[dependentField].toSignificant(8) : ''
...@@ -778,6 +785,8 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -778,6 +785,8 @@ function ExchangePage({ sendingInput = false, history, params }) {
const ignoreOutput: boolean = sending ? !sendingWithSwap : false const ignoreOutput: boolean = sending ? !sendingWithSwap : false
const [showInverted, setShowInverted] = useState<boolean>(false) const [showInverted, setShowInverted] = useState<boolean>(false)
const advanced = useUserAdvanced()
useEffect(() => { useEffect(() => {
// reset errors // reset errors
setGeneralError(null) setGeneralError(null)
...@@ -960,7 +969,7 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -960,7 +969,7 @@ 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={24} fontWeight={600} color={warningHigh ? '#FF6871' : ''}> <Text fontSize={24} fontWeight={500} color={warningHigh ? '#FF6871' : ''}>
{!!slippageAdjustedAmounts[Field.OUTPUT] && slippageAdjustedAmounts[Field.OUTPUT].toSignificant(6)} {!!slippageAdjustedAmounts[Field.OUTPUT] && slippageAdjustedAmounts[Field.OUTPUT].toSignificant(6)}
</Text> </Text>
<RowFixed gap="4px"> <RowFixed gap="4px">
...@@ -972,13 +981,13 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -972,13 +981,13 @@ function ExchangePage({ sendingInput = false, history, params }) {
</RowBetween> </RowBetween>
<AutoColumn justify="flex-start" gap="sm" padding={'20px 0 0 0px'}> <AutoColumn justify="flex-start" gap="sm" padding={'20px 0 0 0px'}>
{independentField === Field.INPUT ? ( {independentField === Field.INPUT ? (
<TYPE.italic textAlign="left" style={{ width: '100%' }}> <TYPE.italic textAlign="left" style={{ width: '100%', paddingTop: '.5rem' }}>
{`Output is estimated. You will receive at least ${slippageAdjustedAmounts[Field.OUTPUT]?.toSignificant( {`Output is estimated. You will receive at least ${slippageAdjustedAmounts[Field.OUTPUT]?.toSignificant(
6 6
)} ${tokens[Field.OUTPUT]?.symbol} or the transaction will revert.`} )} ${tokens[Field.OUTPUT]?.symbol} or the transaction will revert.`}
</TYPE.italic> </TYPE.italic>
) : ( ) : (
<TYPE.italic textAlign="left" style={{ width: '100%' }}> <TYPE.italic textAlign="left" style={{ width: '100%', paddingTop: '.5rem' }}>
{`Input is estimated. You will sell at most ${slippageAdjustedAmounts[Field.INPUT]?.toSignificant(6)} ${ {`Input is estimated. You will sell at most ${slippageAdjustedAmounts[Field.INPUT]?.toSignificant(6)} ${
tokens[Field.INPUT]?.symbol tokens[Field.INPUT]?.symbol
} or the transaction will revert.`} } or the transaction will revert.`}
...@@ -1008,12 +1017,16 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -1008,12 +1017,16 @@ function ExchangePage({ sendingInput = false, history, params }) {
<> <>
<AutoColumn gap="0px"> <AutoColumn gap="0px">
{!noRoute && tokens[Field.OUTPUT] && tokens[Field.INPUT] && ( {!noRoute && tokens[Field.OUTPUT] && tokens[Field.INPUT] && (
<RowBetween align="center"> <RowBetween align="center" justify="center">
<Text fontWeight={400} fontSize={14} color={theme().text1}> <Text fontWeight={400} fontSize={14} color={theme().text1}>
Price{' '} Price
<StyledBalanceMaxMini onClick={() => setShowInverted(!showInverted)}>Invert</StyledBalanceMaxMini>
</Text> </Text>
<Text fontWeight={500} fontSize={14} color={theme().text1}> <Text
fontWeight={500}
fontSize={14}
color={theme().text1}
style={{ justifyContent: 'center', alignItems: 'center', display: 'flex' }}
>
{pair && showInverted {pair && showInverted
? route.midPrice.invert().toSignificant(6) + ? route.midPrice.invert().toSignificant(6) +
' ' + ' ' +
...@@ -1025,13 +1038,16 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -1025,13 +1038,16 @@ function ExchangePage({ sendingInput = false, history, params }) {
tokens[Field.OUTPUT]?.symbol + tokens[Field.OUTPUT]?.symbol +
' / ' + ' / ' +
tokens[Field.INPUT]?.symbol} tokens[Field.INPUT]?.symbol}
<StyledBalanceMaxMini onClick={() => setShowInverted(!showInverted)}>
<Repeat size={14} />
</StyledBalanceMaxMini>
</Text> </Text>
</RowBetween> </RowBetween>
)} )}
<RowBetween> <RowBetween>
<RowFixed> <RowFixed>
<TYPE.black fontSize={14} fontWeight={400}> <TYPE.black fontSize={14} fontWeight={400}>
{independentField === Field.INPUT ? (sending ? 'Maximum sent' : 'Maximum received') : 'Minimum sold'} {independentField === Field.INPUT ? (sending ? 'Min sent' : 'Minimum received') : 'Maximum sold'}
</TYPE.black> </TYPE.black>
<QuestionHelper text="" /> <QuestionHelper text="" />
</RowFixed> </RowFixed>
...@@ -1061,7 +1077,7 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -1061,7 +1077,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
<RowBetween> <RowBetween>
<RowFixed> <RowFixed>
<TYPE.black fontSize={14} fontWeight={400}> <TYPE.black fontSize={14} fontWeight={400}>
Price Slippage Slippage
</TYPE.black> </TYPE.black>
<QuestionHelper text="" /> <QuestionHelper text="" />
</RowFixed> </RowFixed>
...@@ -1084,17 +1100,23 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -1084,17 +1100,23 @@ function ExchangePage({ sendingInput = false, history, params }) {
<TYPE.black fontSize={14} fontWeight={400}> <TYPE.black fontSize={14} fontWeight={400}>
Liquidity Provider Fee Liquidity Provider Fee
</TYPE.black> </TYPE.black>
<QuestionHelper text="" /> <QuestionHelper text="A portion of each trade goes to liquidity providers to incentivize liquidity on the protocol." />
</RowFixed> </RowFixed>
<TYPE.black fontSize={14}>0.03%</TYPE.black> <TYPE.black fontSize={14}>
{feeTimesInputFormatted
? feeTimesInputFormatted?.toSignificant(8) + ' ' + tokens[Field.INPUT]?.symbol
: '-'}
</TYPE.black>
</RowBetween> </RowBetween>
</AutoColumn> </AutoColumn>
<ButtonError onClick={onSwap} error={!!warningHigh} style={{ margin: '10px 0 0 0' }}> <AutoRow>
<Text fontSize={20} fontWeight={500}> <ButtonError onClick={onSwap} error={!!warningHigh} style={{ margin: '10px 0 0 0' }}>
{warningHigh ? (sending ? 'Send Anyway' : 'Swap Anyway') : sending ? 'Confirm Send' : 'Confirm Swap'} <Text fontSize={20} fontWeight={500}>
</Text> {warningHigh ? (sending ? 'Send Anyway' : 'Swap Anyway') : sending ? 'Confirm Send' : 'Confirm Swap'}
</ButtonError> </Text>
</ButtonError>
</AutoRow>
</> </>
) )
} }
...@@ -1104,25 +1126,25 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -1104,25 +1126,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={14} color={theme().text2}> <Text fontWeight={500} fontSize={16} color={theme().text2}>
{pair ? `${route.midPrice.toSignificant(6)} ` : '-'} {pair ? `${route.midPrice.toSignificant(6)} ` : '-'}
</Text> </Text>
<Text fontWeight={500} fontSize={14} color={theme().text3} pt={1}> <Text fontWeight={500} fontSize={16} 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={14} color={theme().text2}> <Text fontWeight={500} fontSize={16} color={theme().text2}>
{pair ? `${route.midPrice.invert().toSignificant(6)} ` : '-'} {pair ? `${route.midPrice.invert().toSignificant(6)} ` : '-'}
</Text> </Text>
<Text fontWeight={500} fontSize={14} color={theme().text3} pt={1}> <Text fontWeight={500} fontSize={16} 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={14} fontSize={16}
warningLow={warningLow} warningLow={warningLow}
warningMedium={warningMedium} warningMedium={warningMedium}
warningHigh={warningHigh} warningHigh={warningHigh}
...@@ -1134,7 +1156,7 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -1134,7 +1156,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
: '-'} : '-'}
</ErrorText> </ErrorText>
<Text fontWeight={500} fontSize={14} color={theme().text3} pt={1}> <Text fontWeight={500} fontSize={14} color={theme().text3} pt={1}>
Price Impact Slippage
</Text> </Text>
</AutoColumn> </AutoColumn>
</AutoRow> </AutoRow>
...@@ -1190,7 +1212,6 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -1190,7 +1212,6 @@ function ExchangePage({ sendingInput = false, history, params }) {
bottomContent={modalBottom} bottomContent={modalBottom}
pendingText={pendingText} pendingText={pendingText}
/> />
{sending && !sendingWithSwap && ( {sending && !sendingWithSwap && (
<> <>
<InputGroup gap="lg" justify="center"> <InputGroup gap="lg" justify="center">
...@@ -1219,24 +1240,25 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -1219,24 +1240,25 @@ function ExchangePage({ sendingInput = false, history, params }) {
hideBalance={true} hideBalance={true}
hideInput={true} hideInput={true}
showSendWithSwap={true} showSendWithSwap={true}
simplified={simplified} advanced={advanced}
label={''}
otherSelectedTokenAddress={tokens[Field.OUTPUT]?.address} otherSelectedTokenAddress={tokens[Field.OUTPUT]?.address}
/> />
</InputGroup> </InputGroup>
</> </>
)} )}
<AutoColumn gap={'md'}> <AutoColumn gap={'md'}>
{(!sending || sendingWithSwap) && ( {(!sending || sendingWithSwap) && (
<> <>
<CurrencyInputPanel <CurrencyInputPanel
field={Field.INPUT} field={Field.INPUT}
label={'From'}
value={formattedAmounts[Field.INPUT]} value={formattedAmounts[Field.INPUT]}
atMax={atMaxAmountInput} atMax={atMaxAmountInput}
token={tokens[Field.INPUT]} token={tokens[Field.INPUT]}
error={inputError} error={inputError}
pair={pair} pair={pair}
simplified={simplified} advanced={advanced}
onUserInput={onUserInput} onUserInput={onUserInput}
onMax={() => { onMax={() => {
maxAmountInput && onMaxInput(maxAmountInput.toExact()) maxAmountInput && onMaxInput(maxAmountInput.toExact())
...@@ -1275,13 +1297,13 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -1275,13 +1297,13 @@ function ExchangePage({ sendingInput = false, history, params }) {
onMax={() => { onMax={() => {
maxAmountOutput && onMaxOutput(maxAmountOutput.toExact()) maxAmountOutput && onMaxOutput(maxAmountOutput.toExact())
}} }}
type={'OUTPUT'} label={'To'}
atMax={atMaxAmountOutput} atMax={atMaxAmountOutput}
token={tokens[Field.OUTPUT]} token={tokens[Field.OUTPUT]}
onTokenSelection={address => onTokenSelection(Field.OUTPUT, address)} onTokenSelection={address => onTokenSelection(Field.OUTPUT, address)}
error={outputError} error={outputError}
pair={pair} pair={pair}
simplified={simplified} advanced={advanced}
otherSelectedTokenAddress={tokens[Field.INPUT]?.address} otherSelectedTokenAddress={tokens[Field.INPUT]?.address}
/> />
{sendingWithSwap && ( {sendingWithSwap && (
...@@ -1315,18 +1337,22 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -1315,18 +1337,22 @@ function ExchangePage({ sendingInput = false, history, params }) {
</AutoColumn> </AutoColumn>
)} )}
{!noRoute && tokens[Field.OUTPUT] && tokens[Field.INPUT] && ( {!noRoute && tokens[Field.OUTPUT] && tokens[Field.INPUT] && (
<Card padding={simplified ? '.25rem 1rem 0 1rem' : '.25rem 1rem 0 1rem'} borderRadius={'20px'}> <Card padding={advanced ? '.25rem .75rem 0 .75rem' : '.25rem .75rem 0 .75rem'} borderRadius={'20px'}>
{simplified ? ( {advanced ? (
<PriceBar /> <PriceBar />
) : ( ) : (
<AutoColumn style={{ cursor: 'pointer' }} gap="sm"> <AutoColumn style={{ cursor: 'pointer' }} gap="sm">
{' '} {' '}
<RowBetween align="center"> <RowBetween align="center" justify="center">
<Text fontWeight={500} fontSize={16} color={theme().text2}> <Text fontWeight={500} fontSize={16} color={theme().text2}>
Price{' '} Price
<StyledBalanceMaxMini onClick={() => setShowInverted(!showInverted)}>Invert</StyledBalanceMaxMini>
</Text> </Text>
<Text fontWeight={500} fontSize={16} color={theme().text2}> <Text
fontWeight={500}
fontSize={16}
color={theme().text2}
style={{ justifyContent: 'center', alignItems: 'center', display: 'flex' }}
>
{pair && showInverted {pair && showInverted
? route.midPrice.invert().toSignificant(6) + ? route.midPrice.invert().toSignificant(6) +
' ' + ' ' +
...@@ -1338,17 +1364,24 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -1338,17 +1364,24 @@ function ExchangePage({ sendingInput = false, history, params }) {
tokens[Field.OUTPUT]?.symbol + tokens[Field.OUTPUT]?.symbol +
' / ' + ' / ' +
tokens[Field.INPUT]?.symbol} tokens[Field.INPUT]?.symbol}
<StyledBalanceMaxMini onClick={() => setShowInverted(!showInverted)}>
<Repeat size={14} />
</StyledBalanceMaxMini>
</Text> </Text>
</RowBetween> </RowBetween>
{pair && (warningHigh || warningMedium) && ( {pair && (warningHigh || warningMedium) && (
<RowBetween> <RowBetween>
<TYPE.main>Price Impact</TYPE.main> <TYPE.main style={{ justifyContent: 'center', alignItems: 'center', display: 'flex' }}>
Price Impact
<QuestionHelper text="The difference between the market price and your price due to trade size." />
</TYPE.main>
<ErrorText fontWeight={500} fontSize={16} warningMedium={warningMedium} warningHigh={warningHigh}> <ErrorText fontWeight={500} fontSize={16} warningMedium={warningMedium} warningHigh={warningHigh}>
{priceSlippage {priceSlippage
? priceSlippage.toFixed(4) === '0.0000' ? priceSlippage.toFixed(4) === '0.0000'
? '<0.0001%' ? '<0.0001%'
: priceSlippage.toFixed(4) + '%' : priceSlippage.toFixed(4) + '%'
: '-'} : '-'}{' '}
⚠️
</ErrorText> </ErrorText>
</RowBetween> </RowBetween>
)} )}
...@@ -1443,11 +1476,11 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -1443,11 +1476,11 @@ 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 sent' ? 'Minimum sent'
: 'Maximum received' : 'Minimum received'
: 'Minimum sold'} : 'Maximum sold'}
</TYPE.black> </TYPE.black>
<QuestionHelper text="" /> <QuestionHelper text="A lower bound is set so you never get less than this amount." />
</RowFixed> </RowFixed>
<RowFixed> <RowFixed>
<TYPE.black fontSize={14}> <TYPE.black fontSize={14}>
...@@ -1475,9 +1508,9 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -1475,9 +1508,9 @@ function ExchangePage({ sendingInput = false, history, params }) {
<RowBetween> <RowBetween>
<RowFixed> <RowFixed>
<TYPE.black fontSize={14} fontWeight={400}> <TYPE.black fontSize={14} fontWeight={400}>
Price Slippage Slippage
</TYPE.black> </TYPE.black>
<QuestionHelper text="" /> <QuestionHelper text="The difference between the market price and your price due to trade size." />
</RowFixed> </RowFixed>
<ErrorText <ErrorText
fontWeight={500} fontWeight={500}
...@@ -1496,12 +1529,14 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -1496,12 +1529,14 @@ function ExchangePage({ sendingInput = false, history, params }) {
<RowBetween> <RowBetween>
<RowFixed> <RowFixed>
<TYPE.black fontSize={14} fontWeight={400}> <TYPE.black fontSize={14} fontWeight={400}>
Total Slippage Liquidity Provider Fee
</TYPE.black> </TYPE.black>
<QuestionHelper text="" /> <QuestionHelper text="Price change due to trade size and LP fee" />
</RowFixed> </RowFixed>
<TYPE.black fontSize={14}> <TYPE.black fontSize={14}>
{slippageFromTrade ? slippageFromTrade.toSignificant(4) + '%' : '-'} {feeTimesInputFormatted
? feeTimesInputFormatted?.toSignificant(8) + ' ' + tokens[Field.INPUT]?.symbol
: '-'}
</TYPE.black> </TYPE.black>
</RowBetween> </RowBetween>
</AutoColumn> </AutoColumn>
...@@ -1510,7 +1545,7 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -1510,7 +1545,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
<TYPE.black fontWeight={400} fontSize={14}> <TYPE.black fontWeight={400} fontSize={14}>
Set front running resistance Set front running resistance
</TYPE.black> </TYPE.black>
<QuestionHelper text="" /> <QuestionHelper text="Your transaction will revert if the price changes more than this amount after your submit your trade." />
</RowFixed> </RowFixed>
<SlippageTabs <SlippageTabs
rawSlippage={allowedSlippage} rawSlippage={allowedSlippage}
...@@ -1526,12 +1561,12 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -1526,12 +1561,12 @@ function ExchangePage({ sendingInput = false, history, params }) {
<YellowCard style={{ padding: '20px', paddingTop: '10px' }}> <YellowCard style={{ padding: '20px', paddingTop: '10px' }}>
<AutoColumn gap="md" mt={2}> <AutoColumn gap="md" mt={2}>
<RowBetween> <RowBetween>
<RowFixed> <RowFixed style={{ paddingTop: '8px' }}>
<span role="img" aria-label="warning"> <span role="img" aria-label="warning">
⚠️ ⚠️
</span>{' '} </span>{' '}
<Text fontWeight={500} marginLeft="4px" style={{ padding: '4px', paddingTop: '12px' }}> <Text fontWeight={500} marginLeft="4px">
Slippage Warning Price Warning
</Text> </Text>
</RowFixed> </RowFixed>
</RowBetween> </RowBetween>
...@@ -1542,18 +1577,18 @@ function ExchangePage({ sendingInput = false, history, params }) { ...@@ -1542,18 +1577,18 @@ function ExchangePage({ sendingInput = false, history, params }) {
</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>
)} )}{' '}
</Wrapper> </Wrapper>
) )
} }
......
src/components/Footer/index.js
View file @ 5426e488
import React from 'react' import React from 'react'
import ReactGA from 'react-ga'
import styled from 'styled-components' import styled from 'styled-components'
import { darken, transparentize } from 'polished' import { Send } from 'react-feather'
import Toggle from 'react-switch' import { Link } from '../../theme/components'
import { Link } from '../../theme' import { ButtonSecondary } from '../Button'
import { useDarkModeManager } from '../../contexts/LocalStorage'
const FooterFrame = styled.div` const FooterFrame = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: flex-end;
width: 100%; width: 100%;
` position: fixed;
right: 1rem;
const FooterElement = styled.div` bottom: 1rem;
margin: 1.25rem; ${({ theme }) => theme.mediaWidth.upToExtraSmall`
display: flex; display: none;
min-width: 0; `};
display: flex;
align-items: center;
`
const Title = styled.div`
display: flex;
align-items: center;
color: ${({ theme }) => theme.pink1};
:hover {
cursor: pointer;
}
#link {
text-decoration-color: ${({ theme }) => theme.pink1};
}
#title {
display: inline;
font-size: 0.825rem;
margin-right: 12px;
font-weight: 400;
color: ${({ theme }) => theme.pink1};
:hover {
color: ${({ theme }) => darken(0.2, theme.pink1)};
}
}
`
const StyledToggle = styled(Toggle)`
margin-right: 24px;
.react-switch-bg[style] {
background-color: ${({ theme }) => darken(0.05, theme.bg1)} !important;
border: 1px solid ${({ theme }) => theme.bg1} !important;
}
.react-switch-handle[style] {
background-color: ${({ theme }) => theme.bg1};
box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.93, theme.shadow1)};
border: 1px solid ${({ theme }) => theme.bg3};
border-color: ${({ theme }) => theme.bg3} !important;
top: 2px !important;
}
`
const EmojiToggle = styled.span`
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-family: Arial sans-serif;
` `
export default function Footer() { export default function Footer() {
const [isDark, toggleDarkMode] = useDarkModeManager()
return ( return (
<FooterFrame> <FooterFrame>
<FooterElement> <ButtonSecondary
<Title> style={{
<Link id="link" href="https://uniswap.io/"> padding: ' 8px 12px',
<h1 id="title">About</h1> marginRight: '0px',
</Link> width: 'fit-content'
<Link id="link" href="https://docs.uniswap.io/">
<h1 id="title">Docs</h1>
</Link>
<Link id="link" href="https://github.com/Uniswap">
<h1 id="title">Code</h1>
</Link>
</Title>
</FooterElement>
<StyledToggle
checked={!isDark}
uncheckedIcon={
<EmojiToggle role="img" aria-label="moon">
{/* eslint-disable-line jsx-a11y/accessible-emoji */}
🌙️
</EmojiToggle>
}
checkedIcon={
<EmojiToggle role="img" aria-label="sun">
{/* eslint-disable-line jsx-a11y/accessible-emoji */}
{'☀️'}
</EmojiToggle>
}
onChange={() => {
ReactGA.event({
category: 'Advanced Interaction',
action: 'Toggle Theme',
label: isDark ? 'Light' : 'Dark'
})
toggleDarkMode()
}} }}
/> href="https://forms.gle/DaLuqvJsVhVaAM3J9"
>
<Link href="https://forms.gle/DaLuqvJsVhVaAM3J9">
<Send size={16} style={{ marginRight: '8px' }} /> Feedback
</Link>
</ButtonSecondary>
</FooterFrame> </FooterFrame>
) )
} }
src/components/Header/index.js
View file @ 5426e488
...@@ -13,23 +13,20 @@ import { YellowCard, GreyCard } from '../Card' ...@@ -13,23 +13,20 @@ 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' import { AutoColumn } from '../Column'
import { RowBetween } from '../Row'
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;
flex-direction: column;
width: 100%; width: 100%;
/* position: absolute; */ top: 0;
padding: 1rem 1rem; position: absolute;
width: calc(100% - 2rem);
${({ theme }) => theme.mediaWidth.upToExtraSmall` ${({ theme }) => theme.mediaWidth.upToExtraSmall`
padding: 10px; padding: 10px;
...@@ -98,8 +95,11 @@ const Alpha = styled(GreyCard)` ...@@ -98,8 +95,11 @@ const Alpha = styled(GreyCard)`
width: fit-content; width: fit-content;
margin-right: 10px; margin-right: 10px;
border-radius: 12px; border-radius: 12px;
padding: 8px 12px; padding: 3px 7px;
color: ${({ theme }) => theme.text2}; background-color: ${({ theme }) => theme.blue1};
color: ${({ theme }) => theme.white};
font-size: 12px;
font-weight: 600;
` `
const UniIcon = styled(Link)` const UniIcon = styled(Link)`
...@@ -108,32 +108,13 @@ const UniIcon = styled(Link)` ...@@ -108,32 +108,13 @@ const UniIcon = styled(Link)`
transform: rotate(-5deg); 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)` const MigrateBanner = styled(AutoColumn)`
width: 100%; width: 100%;
padding: 12px 0; padding: 12px 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
background-color: rgba(255, 0, 122, 0.1); background-color: ${({ theme }) => theme.blue4};
color: ${({ theme }) => theme.pink2}; color: ${({ theme }) => theme.pink2};
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
...@@ -147,18 +128,21 @@ export default function Header() { ...@@ -147,18 +128,21 @@ export default function Header() {
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 (
<AutoColumn style={{ width: '100vw' }}> <HeaderFrame>
<MigrateBanner> <MigrateBanner>
<StyledRed /> {/* <b>Uniswap V2 is live.&nbsp;</b> Move your liquidity now using the&nbsp; */}
<b>Uniswap V2 is live.&nbsp;</b> Move your liquidity now using the&nbsp; <b>Testnet only.</b>&nbsp;Uniswap V2 has not been launched and is coming soon.&nbsp;Read the&nbsp;
<a href="https://migrate.uniswap.exchange/">migration helper</a>&nbsp; or read the&nbsp; {/* <Link href="https://migrate.uniswap.exchange/">
<a href="https://uniswap.org/blog/uniswap-v2/">announcement </a> <b>migration helper</b>
</Link>
&nbsp;or read the&nbsp; */}
<Link href="https://uniswap.org/blog/uniswap-v2/">
<b>blog post ↗</b>
</Link>
</MigrateBanner> </MigrateBanner>
<HeaderFrame> <RowBetween padding="1rem">
<HeaderElement> <HeaderElement>
<Title> <Title>
<UniIcon id="link" href="/"> <UniIcon id="link" href="/">
...@@ -171,30 +155,10 @@ export default function Header() { ...@@ -171,30 +155,10 @@ export default function Header() {
</Link> </Link>
</TitleText> </TitleText>
)} )}
<TestnetWrapper>{!isMobile && <Alpha>1.0.0-alpha</Alpha>}</TestnetWrapper>
</Title> </Title>
<TestnetWrapper>{!isMobile && <Alpha>V2</Alpha>}</TestnetWrapper>
</HeaderElement> </HeaderElement>
<HeaderElement> <HeaderElement>
<ButtonSecondary
style={{
padding: ' 8px 12px',
marginRight: '0px',
width: 'fit-content',
position: 'fixed',
right: '1rem',
bottom: '1rem'
}}
>
<Send size={16} style={{ marginRight: '8px' }} /> Feeback
</ButtonSecondary>
<ButtonSecondary
style={{ padding: '6px 8px', marginRight: '0px', width: 'fit-content' }}
onClick={toggleSimplified}
>
{' '}
{advanced ? <EyeOff size={20} /> : <Eye size={20} />}
</ButtonSecondary>
<TestnetWrapper> <TestnetWrapper>
{!isMobile && chainId === 4 && <NetworkCard>Rinkeby</NetworkCard>} {!isMobile && chainId === 4 && <NetworkCard>Rinkeby</NetworkCard>}
{!isMobile && chainId === 3 && <NetworkCard>Ropsten</NetworkCard>} {!isMobile && chainId === 3 && <NetworkCard>Ropsten</NetworkCard>}
...@@ -204,7 +168,7 @@ export default function Header() { ...@@ -204,7 +168,7 @@ export default function Header() {
<AccountElement active={!!account}> <AccountElement active={!!account}>
{account ? ( {account ? (
<Row style={{ marginRight: '-1.25rem', paddingRight: '1.75rem' }}> <Row style={{ marginRight: '-1.25rem', paddingRight: '1.75rem' }}>
<Text fontWeight={400}> {userEthBalance && userEthBalance?.toFixed(4) + ' ETH'}</Text> <Text fontWeight={500}> {userEthBalance && userEthBalance?.toFixed(4) + ' ETH'}</Text>
</Row> </Row>
) : ( ) : (
'' ''
...@@ -214,7 +178,8 @@ export default function Header() { ...@@ -214,7 +178,8 @@ export default function Header() {
<Menu /> <Menu />
</HeaderElement> </HeaderElement>
</HeaderFrame> </RowBetween>
</AutoColumn> </HeaderFrame>
// </AutoColumn>
) )
} }
src/components/Menu/index.js
View file @ 5426e488
...@@ -72,7 +72,7 @@ const MenuFlyout = styled.span` ...@@ -72,7 +72,7 @@ const MenuFlyout = styled.span`
const MenuItem = styled(Link)` const MenuItem = styled(Link)`
flex: 1; flex: 1;
padding: 0.5rem 0.5rem; padding: 0.5rem 0.5rem;
color: ${({ theme }) => theme.text3}; color: ${({ theme }) => theme.text2};
:hover { :hover {
color: ${({ theme }) => theme.text1}; color: ${({ theme }) => theme.text1};
cursor: pointer; cursor: pointer;
......
src/components/NavigationTabs/index.js
View file @ 5426e488
...@@ -110,7 +110,13 @@ function NavigationTabs({ location: { pathname }, history }) { ...@@ -110,7 +110,13 @@ function NavigationTabs({ location: { pathname }, history }) {
<ArrowLink /> <ArrowLink />
</Hover> </Hover>
<ActiveText>{adding ? 'Add' : 'Remove'} Liquidity</ActiveText> <ActiveText>{adding ? 'Add' : 'Remove'} Liquidity</ActiveText>
<QuestionHelper text={'helper text'} /> <QuestionHelper
text={
adding
? 'When you add liqudiity, you are given pool tokens that represent your position in this pool. These tokens automatically earn fees proportional to your pool share and can be redeemed at any time.'
: 'Your liquidity is represented by a pool token (ERC20). Removing will convert your position back into tokens at the current rate and proportional to the amount of each token in the pool. Any fees you accrued are included in the token amounts your receive.'
}
/>
</RowBetween> </RowBetween>
</Tabs> </Tabs>
) : finding ? ( ) : finding ? (
...@@ -120,7 +126,7 @@ function NavigationTabs({ location: { pathname }, history }) { ...@@ -120,7 +126,7 @@ function NavigationTabs({ location: { pathname }, history }) {
<ArrowLink /> <ArrowLink />
</HistoryLink> </HistoryLink>
<ActiveText>Import Pool</ActiveText> <ActiveText>Import Pool</ActiveText>
<QuestionHelper text={'helper text'} /> <QuestionHelper text={"Use this tool to find pools that don't automatically appear in the interface."} />
</RowBetween> </RowBetween>
</Tabs> </Tabs>
) : creating ? ( ) : creating ? (
...@@ -130,7 +136,7 @@ function NavigationTabs({ location: { pathname }, history }) { ...@@ -130,7 +136,7 @@ function NavigationTabs({ location: { pathname }, history }) {
<ArrowLink /> <ArrowLink />
</HistoryLink> </HistoryLink>
<ActiveText>Create Pool</ActiveText> <ActiveText>Create Pool</ActiveText>
<QuestionHelper text={'helper text'} /> <QuestionHelper text={'Use this interface to create a new pool.'} />
</RowBetween> </RowBetween>
</Tabs> </Tabs>
) : ( ) : (
......
src/components/PoolFinder/index.tsx
View file @ 5426e488
...@@ -136,11 +136,8 @@ function PoolFinder({ history }) { ...@@ -136,11 +136,8 @@ function PoolFinder({ history }) {
</ButtonDropwdownLight> </ButtonDropwdownLight>
)} )}
{allowImport && ( {allowImport && (
<ColumnCenter <ColumnCenter justify="center" style={{ backgroundColor: '', padding: '12px 0px', borderRadius: '12px' }}>
justify="center" <Text textAlign="center" fontWeight={500} color="">
style={{ backgroundColor: '#EBF4FF', padding: '12px 0px', borderRadius: '12px' }}
>
<Text textAlign="center" fontWeight={500} color="#2172E5">
{newLiquidity ? 'Pool Found!' : 'Pool already imported.'} {newLiquidity ? 'Pool Found!' : 'Pool already imported.'}
</Text> </Text>
</ColumnCenter> </ColumnCenter>
......
src/components/Popups/index.js
View file @ 5426e488
...@@ -39,7 +39,7 @@ const MobilePopupInner = styled.div` ...@@ -39,7 +39,7 @@ const MobilePopupInner = styled.div`
const FixedPopupColumn = styled(AutoColumn)` const FixedPopupColumn = styled(AutoColumn)`
position: absolute; position: absolute;
top: 72px; top: 128px;
right: 1rem; right: 1rem;
width: 355px; width: 355px;
...@@ -54,7 +54,6 @@ const Popup = styled.div` ...@@ -54,7 +54,6 @@ 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; */
position: relative; position: relative;
border-radius: 10px; border-radius: 10px;
padding: 20px; padding: 20px;
......
src/components/PositionCard/index.js
View file @ 5426e488
...@@ -138,9 +138,6 @@ function PositionCard({ pairAddress, token0, token1, history, minimal = false, . ...@@ -138,9 +138,6 @@ function PositionCard({ pairAddress, token0, token1, history, minimal = false, .
</Text> </Text>
</RowFixed> </RowFixed>
<RowFixed> <RowFixed>
<Text fontWeight={500} fontSize={20}>
{userPoolBalance ? userPoolBalance.toFixed(6) : '-'}
</Text>
{showMore ? ( {showMore ? (
<ChevronUp size="20" style={{ marginLeft: '10px' }} /> <ChevronUp size="20" style={{ marginLeft: '10px' }} />
) : ( ) : (
...@@ -186,7 +183,17 @@ function PositionCard({ pairAddress, token0, token1, history, minimal = false, . ...@@ -186,7 +183,17 @@ function PositionCard({ pairAddress, token0, token1, history, minimal = false, .
{!minimal && ( {!minimal && (
<FixedHeightRow> <FixedHeightRow>
<Text color="#888D9B" fontSize={16} fontWeight={500}> <Text color="#888D9B" fontSize={16} fontWeight={500}>
Your pool share: Your pool tokens:
</Text>
<Text color="#888D9B" fontSize={16} fontWeight={500}>
{userPoolBalance ? userPoolBalance.toFixed(6) : '-'}
</Text>
</FixedHeightRow>
)}
{!minimal && (
<FixedHeightRow>
<Text color="#888D9B" fontSize={16} fontWeight={500}>
Your pool share
</Text> </Text>
<Text color="#888D9B" fontSize={16} fontWeight={500}> <Text color="#888D9B" fontSize={16} fontWeight={500}>
{poolTokenPercentage ? poolTokenPercentage.toFixed(2) + '%' : '-'} {poolTokenPercentage ? poolTokenPercentage.toFixed(2) + '%' : '-'}
......
src/components/Question/index.js
View file @ 5426e488
...@@ -58,8 +58,9 @@ const Popup = styled.div` ...@@ -58,8 +58,9 @@ const Popup = styled.div`
animation: ${fadeIn} 0.15s linear; animation: ${fadeIn} 0.15s linear;
color: ${({ theme }) => theme.text1}; color: ${({ theme }) => theme.text2};
font-style: italic; font-weight: 400;
/* font-style: italic; */
${({ theme }) => theme.mediaWidth.upToSmall` ${({ theme }) => theme.mediaWidth.upToSmall`
left: -20px; left: -20px;
......
src/components/SearchModal/index.js
View file @ 5426e488
...@@ -19,6 +19,7 @@ import { ArrowLeft, X } from 'react-feather' ...@@ -19,6 +19,7 @@ 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 Card from '../../components/Card'
import { ButtonPrimary } from '../../components/Button'
import { Spinner, TYPE } from '../../theme' import { Spinner, TYPE } from '../../theme'
import { RowBetween, RowFixed, AutoRow } from '../Row' import { RowBetween, RowFixed, AutoRow } from '../Row'
...@@ -34,7 +35,7 @@ import QuestionHelper from '../Question' ...@@ -34,7 +35,7 @@ import QuestionHelper from '../Question'
const TokenModalInfo = styled.div` const TokenModalInfo = styled.div`
${({ theme }) => theme.flexRowNoWrap} ${({ theme }) => theme.flexRowNoWrap}
align-items: center; align-items: center;
padding: 1rem 1.5rem; padding: 1rem 1rem;
margin: 0.25rem 0.5rem; margin: 0.25rem 0.5rem;
justify-content: center; justify-content: center;
user-select: none; user-select: none;
...@@ -348,7 +349,7 @@ function SearchModal({ ...@@ -348,7 +349,7 @@ function SearchModal({
filteredPairList.map((pairAddress, i) => { filteredPairList.map((pairAddress, i) => {
const token0 = allTokens[allPairs[pairAddress].token0] const token0 = allTokens[allPairs[pairAddress].token0]
const token1 = allTokens[allPairs[pairAddress].token1] const token1 = allTokens[allPairs[pairAddress].token1]
const balance = allBalances?.[account]?.[pairAddress]?.toSignificant(6) // const balance = allBalances?.[account]?.[pairAddress]?.toSignificant(6)
return ( return (
<MenuItem <MenuItem
key={i} key={i}
...@@ -361,9 +362,20 @@ function SearchModal({ ...@@ -361,9 +362,20 @@ function SearchModal({
<DoubleTokenLogo a0={token0?.address || ''} a1={token1?.address || ''} size={24} margin={true} /> <DoubleTokenLogo a0={token0?.address || ''} a1={token1?.address || ''} size={24} margin={true} />
<Text fontWeight={500} fontSize={16}>{`${token0?.symbol}/${token1?.symbol}`}</Text> <Text fontWeight={500} fontSize={16}>{`${token0?.symbol}/${token1?.symbol}`}</Text>
</RowFixed> </RowFixed>
<Text fontWeight={500} fontSize={16}> {/* <Text fontWeight={500} fontSize={16}>
{balance ? balance.toString() : '-'} {balance ? balance.toString() : '-'}
</Text> </Text> */}
<ButtonPrimary
padding={'6px 8px'}
width={'56px'}
borderRadius={'12px'}
onClick={() => {
history.push('/add/' + token0.address + '-' + token1.address)
onDismiss()
}}
>
Join
</ButtonPrimary>
</MenuItem> </MenuItem>
) )
}) })
...@@ -494,7 +506,7 @@ function SearchModal({ ...@@ -494,7 +506,7 @@ function SearchModal({
} }
} }
const Filter = ({ title, filter }) => { const Filter = ({ title, filter, filterType }) => {
return ( return (
<FilterWrapper <FilterWrapper
onClick={() => { onClick={() => {
...@@ -506,7 +518,7 @@ function SearchModal({ ...@@ -506,7 +518,7 @@ function SearchModal({
<Text fontSize={14} fontWeight={500}> <Text fontSize={14} fontWeight={500}>
{title} {title}
</Text> </Text>
{filter === activeFilter && ( {filter === activeFilter && filterType === 'tokens' && (
<Text fontSize={14} fontWeight={500}> <Text fontSize={14} fontWeight={500}>
{sortDirection ? '↓' : '↑'} {sortDirection ? '↓' : '↑'}
</Text> </Text>
...@@ -596,9 +608,13 @@ function SearchModal({ ...@@ -596,9 +608,13 @@ function SearchModal({
)} )}
<RowBetween> <RowBetween>
<Text fontSize={14} fontWeight={500}> <Text fontSize={14} fontWeight={500}>
Token Name {filterType === 'tokens' ? 'Token Name' : 'Pool Name'}
</Text> </Text>
<Filter title="Your Balances" filter={FILTERS.BALANCES} /> <Filter
title={filterType === 'tokens' ? 'Your Balances' : ' '}
filter={FILTERS.BALANCES}
filterType={filterType}
/>
</RowBetween> </RowBetween>
</PaddedColumn> </PaddedColumn>
)} )}
......
src/components/SlippageTabs/index.js
View file @ 5426e488
...@@ -360,9 +360,9 @@ export default function TransactionDetails({ setRawSlippage, rawSlippage, deadli ...@@ -360,9 +360,9 @@ export default function TransactionDetails({ setRawSlippage, rawSlippage, deadli
</BottomError> </BottomError>
</RowBetween> </RowBetween>
</SlippageSelector> </SlippageSelector>
<AutoColumn gap="md"> <AutoColumn gap="sm">
<RowFixed padding={'0 20px'}> <RowFixed padding={'0 20px'}>
<TYPE.black fontSize={14}>Deadline</TYPE.black> <TYPE.body fontSize={14}>Deadline</TYPE.body>
<QuestionHelper text="Deadline in minutes. If your transaction takes longer than this it will revert." /> <QuestionHelper text="Deadline in minutes. If your transaction takes longer than this it will revert." />
</RowFixed> </RowFixed>
<RowBetween padding={'0 20px'}> <RowBetween padding={'0 20px'}>
......
src/components/WalletModal/index.js
View file @ 5426e488
...@@ -43,7 +43,7 @@ const Wrapper = styled.div` ...@@ -43,7 +43,7 @@ const Wrapper = styled.div`
const HeaderRow = styled.div` const HeaderRow = styled.div`
${({ theme }) => theme.flexRowNoWrap}; ${({ theme }) => theme.flexRowNoWrap};
padding: 1.5rem 1.5rem; padding: 1rem 1rem;
font-weight: 500; font-weight: 500;
color: ${props => (props.color === 'blue' ? ({ theme }) => theme.blue1 : 'inherit')}; color: ${props => (props.color === 'blue' ? ({ theme }) => theme.blue1 : 'inherit')};
${({ theme }) => theme.mediaWidth.upToMedium` ${({ theme }) => theme.mediaWidth.upToMedium`
......
src/contexts/Application.js
View file @ 5426e488
...@@ -61,7 +61,7 @@ export default function Provider({ children }) { ...@@ -61,7 +61,7 @@ export default function Provider({ children }) {
[POPUP_LIST]: [], [POPUP_LIST]: [],
[POPUP_KEY]: 0, [POPUP_KEY]: 0,
[WALLET_MODAL_OPEN]: false, [WALLET_MODAL_OPEN]: false,
[USER_ADVANCED]: true [USER_ADVANCED]: false
}) })
const updateBlockNumber = useCallback((networkId, blockNumber) => { const updateBlockNumber = useCallback((networkId, blockNumber) => {
......
src/pages/App.js
View file @ 5426e488
...@@ -3,6 +3,7 @@ import styled from 'styled-components' ...@@ -3,6 +3,7 @@ import styled from 'styled-components'
import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom' import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom'
import Header from '../components/Header' import Header from '../components/Header'
import Footer from '../components/Footer'
import NavigationTabs from '../components/NavigationTabs' import NavigationTabs from '../components/NavigationTabs'
import Web3ReactManager from '../components/Web3ReactManager' import Web3ReactManager from '../components/Web3ReactManager'
...@@ -36,11 +37,13 @@ const BodyWrapper = styled.div` ...@@ -36,11 +37,13 @@ const BodyWrapper = styled.div`
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
justify-content: flex-start; /* justify-content: center; */
padding-top: 160px;
align-items: center; align-items: center;
flex: 1; flex: 1;
overflow: auto; overflow: auto;
padding-top: 60px; z-index: 10;
transition: height 0.3s ease;
& > * { & > * {
max-width: calc(355px + 4rem); max-width: calc(355px + 4rem);
...@@ -53,13 +56,34 @@ const BodyWrapper = styled.div` ...@@ -53,13 +56,34 @@ const BodyWrapper = styled.div`
const Body = styled.div` const Body = styled.div`
max-width: 355px; max-width: 355px;
width: 100%; width: 100%;
min-height: 340px; /* min-height: 340px; */
background: ${({ theme }) => theme.bg1}; background: ${({ theme }) => theme.bg1};
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), 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); 0px 24px 32px rgba(0, 0, 0, 0.01);
border-radius: 30px; border-radius: 30px;
box-sizing: border-box; box-sizing: border-box;
padding: 1rem; padding: 1rem;
position: relative;
`
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);
}
` `
export default function App() { export default function App() {
...@@ -127,7 +151,9 @@ export default function App() { ...@@ -127,7 +151,9 @@ export default function App() {
</BrowserRouter> </BrowserRouter>
</Web3ReactManager> </Web3ReactManager>
</Body> </Body>
<Footer></Footer>
</BodyWrapper> </BodyWrapper>
<StyledRed />
</AppWrapper> </AppWrapper>
</Suspense> </Suspense>
</> </>
......
src/pages/Supply/AddLiquidity.tsx
View file @ 5426e488
...@@ -522,7 +522,7 @@ function AddLiquidity({ token0, token1, step = false }) { ...@@ -522,7 +522,7 @@ function AddLiquidity({ token0, token1, step = false }) {
</AutoColumn> </AutoColumn>
) : ( ) : (
<AutoColumn gap="20px"> <AutoColumn gap="20px">
<RowFlat style={{ marginTop: '60px' }}> <RowFlat style={{ marginTop: '20px' }}>
<Text fontSize="48px" fontWeight={500} lineHeight="32px" marginRight={10}> <Text fontSize="48px" fontWeight={500} lineHeight="32px" marginRight={10}>
{liquidityMinted?.toFixed(6)} {liquidityMinted?.toFixed(6)}
</Text> </Text>
...@@ -533,6 +533,11 @@ function AddLiquidity({ token0, token1, step = false }) { ...@@ -533,6 +533,11 @@ function AddLiquidity({ token0, token1, step = false }) {
{tokens[Field.INPUT]?.symbol + ':' + tokens[Field.OUTPUT]?.symbol + ' Pool Tokens'} {tokens[Field.INPUT]?.symbol + ':' + tokens[Field.OUTPUT]?.symbol + ' Pool Tokens'}
</Text> </Text>
</Row> </Row>
<TYPE.italic fontSize={12} color="#565A69" textAlign="center" padding={'12px 0 0 0 '}>
{`Output is estimated. You will receive at least ${liquidityMinted?.toSignificant(6)} UNI ${
tokens[Field.INPUT]?.symbol
}/${tokens[Field.OUTPUT]?.symbol} or the transaction will revert.`}
</TYPE.italic>
</AutoColumn> </AutoColumn>
) )
} }
...@@ -573,11 +578,6 @@ function AddLiquidity({ token0, token1, step = false }) { ...@@ -573,11 +578,6 @@ function AddLiquidity({ token0, token1, step = false }) {
{noLiquidity ? 'Supply & Create Pool' : 'Confirm Supply'} {noLiquidity ? 'Supply & Create Pool' : 'Confirm Supply'}
</Text> </Text>
</ButtonPrimary> </ButtonPrimary>
<TYPE.italic fontSize={12} color="#565A69" textAlign="center">
{`Output is estimated. You will receive at least ${liquidityMinted?.toSignificant(6)} UNI ${
tokens[Field.INPUT]?.symbol
}/${tokens[Field.OUTPUT]?.symbol} or the transaction will revert.`}
</TYPE.italic>
</> </>
) )
} }
...@@ -645,9 +645,10 @@ function AddLiquidity({ token0, token1, step = false }) { ...@@ -645,9 +645,10 @@ function AddLiquidity({ token0, token1, step = false }) {
<ColumnCenter> <ColumnCenter>
<BlueCard> <BlueCard>
<AutoColumn gap="10px"> <AutoColumn gap="10px">
{step && <TYPE.blue fontWeight={400}>Step 2.</TYPE.blue>} {/* {step && <TYPE.blue fontWeight={400}>Step 2.</TYPE.blue>} */}
<TYPE.blue fontWeight={400}> <TYPE.blue fontWeight={400}>
You are the first liquidity provider. The ratio of tokens you add will set the price of this pool. <b>You are the first liquidity provider.</b> The ratio of tokens you add will set the price of this
pool.
</TYPE.blue> </TYPE.blue>
<TYPE.blue fontWeight={400}>Once you are happy with the rate click supply to review.</TYPE.blue> <TYPE.blue fontWeight={400}>Once you are happy with the rate click supply to review.</TYPE.blue>
</AutoColumn> </AutoColumn>
...@@ -666,6 +667,7 @@ function AddLiquidity({ token0, token1, step = false }) { ...@@ -666,6 +667,7 @@ function AddLiquidity({ token0, token1, step = false }) {
onTokenSelection={address => onTokenSelection(Field.INPUT, address)} onTokenSelection={address => onTokenSelection(Field.INPUT, address)}
error={inputError} error={inputError}
pair={pair} pair={pair}
label="Input"
/> />
<ColumnCenter> <ColumnCenter>
<Plus size="16" color="#888D9B" /> <Plus size="16" color="#888D9B" />
......
src/pages/Supply/RemoveLiquidity.tsx
View file @ 5426e488
...@@ -50,6 +50,7 @@ const ClickableText = styled(Text)` ...@@ -50,6 +50,7 @@ const ClickableText = styled(Text)`
:hover { :hover {
cursor: pointer; cursor: pointer;
} }
color: ${({ theme }) => theme.blue1};
` `
// const CustomNumericalInput = styled(NumericalInput)` // const CustomNumericalInput = styled(NumericalInput)`
...@@ -499,21 +500,40 @@ export default function RemoveLiquidity({ token0, token1 }) { ...@@ -499,21 +500,40 @@ export default function RemoveLiquidity({ token0, token1 }) {
function modalHeader() { function modalHeader() {
return ( return (
<AutoColumn gap="16px"> <AutoColumn gap={'sm'} style={{ marginTop: '20px' }}>
<Row style={{ marginTop: '40px' }}> <RowBetween align="flex-end">
<TokenLogo address={tokens[Field.TOKEN0]?.symbol} size={'30px'} /> <Text fontSize={24} fontWeight={500}>
<Text fontSize="24px" marginLeft={10}> {!!parsedAmounts[Field.TOKEN0] && parsedAmounts[Field.TOKEN0].toSignificant(6)}
{tokens[Field.TOKEN0]?.symbol}{' '}
{!!parsedAmounts[Field.TOKEN0] && parsedAmounts[Field.TOKEN0].toSignificant(8)}
</Text> </Text>
</Row> <RowFixed gap="4px">
<Row> <TokenLogo address={tokens[Field.TOKEN0]?.address} size={'24px'} />
<TokenLogo address={tokens[Field.TOKEN1]?.symbol} size={'30px'} /> <Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
<Text fontSize="24px" marginLeft={10}> {tokens[Field.TOKEN0]?.symbol || ''}
{tokens[Field.TOKEN1]?.symbol}{' '} </Text>
{!!parsedAmounts[Field.TOKEN1] && parsedAmounts[Field.TOKEN1].toSignificant(8)} </RowFixed>
</RowBetween>
<RowFixed>
<Plus size="16" color={'#888D9B'} />
</RowFixed>
<RowBetween align="flex-end">
<Text fontSize={24} fontWeight={600}>
{!!parsedAmounts[Field.TOKEN1] && parsedAmounts[Field.TOKEN1].toSignificant(6)}
</Text> </Text>
</Row> <RowFixed gap="4px">
<TokenLogo address={tokens[Field.TOKEN1]?.address} size={'24px'} />
<Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
{tokens[Field.TOKEN1]?.symbol || ''}
</Text>
</RowFixed>
</RowBetween>
<TYPE.italic fontSize={12} color="#565A69" textAlign="left" padding={'20px 0 0 0'}>
{`Output is estimated. You will receive at least ${parsedAmounts[Field.TOKEN0]?.toFixed(6)} ${
tokens[Field.TOKEN0]?.symbol
} and at least ${parsedAmounts[Field.TOKEN1]?.toFixed(6)} ${
tokens[Field.TOKEN1]?.symbol
} or the transaction will revert.`}
</TYPE.italic>
</AutoColumn> </AutoColumn>
) )
} }
...@@ -538,7 +558,7 @@ export default function RemoveLiquidity({ token0, token1 }) { ...@@ -538,7 +558,7 @@ export default function RemoveLiquidity({ token0, token1 }) {
</RowBetween> </RowBetween>
<RowBetween> <RowBetween>
<Text color="#565A69" fontWeight={500} fontSize={16}> <Text color="#565A69" fontWeight={500} fontSize={16}>
Rate Price
</Text> </Text>
<Text fontWeight={500} fontSize={16}> <Text fontWeight={500} fontSize={16}>
{`1 ${tokens[Field.TOKEN0]?.symbol} = ${route?.midPrice && route.midPrice.adjusted.toFixed(8)} ${ {`1 ${tokens[Field.TOKEN0]?.symbol} = ${route?.midPrice && route.midPrice.adjusted.toFixed(8)} ${
...@@ -546,9 +566,9 @@ export default function RemoveLiquidity({ token0, token1 }) { ...@@ -546,9 +566,9 @@ export default function RemoveLiquidity({ token0, token1 }) {
}`} }`}
</Text> </Text>
</RowBetween> </RowBetween>
<RowBetween gap="20px"> <RowBetween gap="16px">
<ButtonConfirmed <ButtonConfirmed
style={{ margin: '20px 0' }} style={{ margin: '20px 0 0 0' }}
width="48%" width="48%"
onClick={onSign} onClick={onSign}
confirmed={signed} confirmed={signed}
...@@ -558,19 +578,12 @@ export default function RemoveLiquidity({ token0, token1 }) { ...@@ -558,19 +578,12 @@ export default function RemoveLiquidity({ token0, token1 }) {
{signed ? 'Signed' : 'Sign'} {signed ? 'Signed' : 'Sign'}
</ConfirmedText> </ConfirmedText>
</ButtonConfirmed> </ButtonConfirmed>
<ButtonPrimary width="48%" disabled={!signed} style={{ margin: '20px 0' }} onClick={onRemove}> <ButtonPrimary width="48%" disabled={!signed} style={{ margin: '20px 0 0 0' }} onClick={onRemove}>
<Text fontWeight={500} fontSize={20}> <Text fontWeight={500} fontSize={20}>
Confirm Remove Confirm
</Text> </Text>
</ButtonPrimary> </ButtonPrimary>
</RowBetween> </RowBetween>
<TYPE.italic fontSize={12} color="#565A69" textAlign="center">
{`Output is estimated. You will receive at least ${parsedAmounts[Field.TOKEN0]?.toFixed(6)} ${
tokens[Field.TOKEN0]?.symbol
} and at least ${parsedAmounts[Field.TOKEN1]?.toFixed(6)} ${
tokens[Field.TOKEN1]?.symbol
} or the transaction will revert.`}
</TYPE.italic>
</> </>
) )
} }
...@@ -604,7 +617,6 @@ export default function RemoveLiquidity({ token0, token1 }) { ...@@ -604,7 +617,6 @@ export default function RemoveLiquidity({ token0, token1 }) {
onClick={() => { onClick={() => {
setShowAdvanced(!showAdvanced) setShowAdvanced(!showAdvanced)
}} }}
color="#2172E5"
> >
{showAdvanced ? 'Hide Advanced' : 'Show Advanced'} {showAdvanced ? 'Hide Advanced' : 'Show Advanced'}
</ClickableText> </ClickableText>
...@@ -692,6 +704,7 @@ export default function RemoveLiquidity({ token0, token1 }) { ...@@ -692,6 +704,7 @@ export default function RemoveLiquidity({ token0, token1 }) {
atMax={atMaxAmount} atMax={atMaxAmount}
token={tokens[Field.TOKEN0]} token={tokens[Field.TOKEN0]}
error={inputError} error={inputError}
label={'Output'}
disableTokenSelect disableTokenSelect
/> />
<ColumnCenter> <ColumnCenter>
...@@ -705,6 +718,7 @@ export default function RemoveLiquidity({ token0, token1 }) { ...@@ -705,6 +718,7 @@ export default function RemoveLiquidity({ token0, token1 }) {
atMax={atMaxAmount} atMax={atMaxAmount}
token={tokens[Field.TOKEN1]} token={tokens[Field.TOKEN1]}
error={outputError} error={outputError}
label={'Output'}
disableTokenSelect disableTokenSelect
/> />
</> </>
......
src/pages/Supply/index.js
View file @ 5426e488
...@@ -63,17 +63,20 @@ function Supply({ history }) { ...@@ -63,17 +63,20 @@ function Supply({ history }) {
return ( return (
<AutoColumn gap="lg" justify="center"> <AutoColumn gap="lg" justify="center">
<ButtonPrimary <ButtonPrimary
padding="16px"
onClick={() => { onClick={() => {
setShowPoolSearch(true) setShowPoolSearch(true)
}} }}
> >
<Text fontSize={20}>Join {filteredExchangeList?.length > 0 ? 'another' : 'a'} pool</Text> <Text fontWeight={500} fontSize={20}>
Join {filteredExchangeList?.length > 0 ? 'another' : 'a'} pool
</Text>
</ButtonPrimary> </ButtonPrimary>
<Positions> <Positions>
<AutoColumn gap="12px"> <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="When you add liquidity, you are given pool tokens that represent your share. If you don’t see a pool you joined in this list, try importing a pool below." />
</RowBetween> </RowBetween>
{filteredExchangeList?.length === 0 && ( {filteredExchangeList?.length === 0 && (
<LightCard <LightCard
...@@ -84,7 +87,7 @@ function Supply({ history }) { ...@@ -84,7 +87,7 @@ function Supply({ history }) {
</LightCard> </LightCard>
)} )}
{filteredExchangeList} {filteredExchangeList}
<Text color="#AEAEAE" textAlign="center" style={{ padding: '.5rem 0 .5rem 0' }}> <Text 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={() => {
......
src/theme/components.js
View file @ 5426e488
...@@ -47,6 +47,10 @@ export const Link = styled.a.attrs({ ...@@ -47,6 +47,10 @@ export const Link = styled.a.attrs({
color: ${({ theme }) => theme.blue1}; color: ${({ theme }) => theme.blue1};
font-weight: 500; font-weight: 500;
:hover {
text-decoration: underline;
}
:focus { :focus {
outline: none; outline: none;
text-decoration: underline; text-decoration: underline;
......
src/theme/index.js
View file @ 5426e488
...@@ -68,7 +68,7 @@ export const theme = darkMode => ({ ...@@ -68,7 +68,7 @@ export const theme = darkMode => ({
blue3: darkMode ? '#4D8FEA' : '#165BBB', blue3: darkMode ? '#4D8FEA' : '#165BBB',
// blue5: '#EBF4FF', // blue5: '#EBF4FF',
// blue4: '#C4D9F8', // blue4: '#C4D9F8',
blue4: '#FDEAF1', blue4: '#F6DDE8',
blue5: '#FDEAF1', blue5: '#FDEAF1',
// pinks // pinks
...@@ -172,15 +172,12 @@ export const TYPE = { ...@@ -172,15 +172,12 @@ export const TYPE = {
} }
export const GlobalStyle = createGlobalStyle` export const GlobalStyle = createGlobalStyle`
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@531&display=swap'); @import url('https://rsms.me/inter/inter.css');
html { html { font-family: 'Inter', sans-serif; letter-spacing: -0.018em;}
font-family: 'Inter', sans-serif; @supports (font-variation-settings: normal) {
letter-spacing: -0.018em; html { font-family: 'Inter var', sans-serif; }
/* font-feature-settings: 'cv01', 'cv02', 'cv03', 'cv04'; */ }
}
@supports (font-variation-settings: normal) {
html { font-family: 'Inter var', sans-serif; }
}
html, html,
body { body {
......
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