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
Expand all 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 @@
"forAtLeast": "for at least ",
"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.",
"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`
align-items: center;
`
export default function CopyHelper(props, { toCopy }) {
export default function CopyHelper(props) {
const [isCopied, setCopied] = useCopyClipboard()
return (
<CopyIcon onClick={() => setCopied(toCopy)}>
<CopyIcon onClick={() => setCopied(props.toCopy)}>
{props.children}
{isCopied ? (
<TransactionStatusText>
......
src/components/AccountDetails/index.js
View file @ 5426e488
......@@ -15,13 +15,13 @@ import FortmaticIcon from '../../assets/images/fortmaticIcon.png'
import PortisIcon from '../../assets/images/portisIcon.png'
import Identicon from '../Identicon'
import { ButtonLight } from '../Button'
import { ButtonEmpty } from '../Button'
import { Link, TYPE } from '../../theme'
const HeaderRow = styled.div`
${({ theme }) => theme.flexRowNoWrap};
padding: 1.5rem 1.5rem;
padding: 1rem 1rem;
font-weight: 500;
color: ${props => (props.color === 'blue' ? ({ theme }) => theme.blue1 : 'inherit')};
${({ theme }) => theme.mediaWidth.upToMedium`
......@@ -75,7 +75,7 @@ const AccountGroupingRow = styled.div`
const AccountSection = styled.div`
background-color: ${({ theme }) => theme.bg1};
padding: 0rem 1.5rem;
padding: 0rem 1rem;
${({ theme }) => theme.mediaWidth.upToMedium`padding: 0rem 1rem 1rem 1rem;`};
`
......@@ -337,15 +337,16 @@ export default function AccountDetails({
{!(isMobile && (window.web3 || window.ethereum)) && (
<ConnectButtonRow>
<ButtonLight
padding={'8px 12px'}
width={240}
<ButtonEmpty
style={{ fontWeight: '400' }}
padding={'px 12px'}
width={260}
onClick={() => {
openOptions()
}}
>
Connect to a different wallet
</ButtonLight>
</ButtonEmpty>
</ConnectButtonRow>
)}
</AccountSection>
......
src/components/Button/index.js
View file @ 5426e488
......@@ -58,15 +58,15 @@ export const ButtonLight = styled(Base)`
font-size: 16px;
font-weight: 500;
&:focus {
box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && darken(0.05, theme.blue5)};
background-color: ${({ 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.03, theme.blue5)};
}
&:hover {
background-color: ${({ theme, disabled }) => !disabled && darken(0.05, theme.blue5)};
background-color: ${({ theme, disabled }) => !disabled && darken(0.03, theme.blue5)};
}
&:active {
box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && darken(0.1, theme.blue5)};
background-color: ${({ 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.05, theme.blue5)};
}
`
......@@ -96,15 +96,15 @@ export const ButtonSecondary = styled(Base)`
padding: 10px;
&:focus {
box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.blue5)};
background-color: ${({ theme }) => darken(0.05, theme.blue5)};
box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.03, theme.blue5)};
background-color: ${({ theme }) => darken(0.03, theme.blue5)};
}
&:hover {
background-color: ${({ theme }) => darken(0.05, theme.blue5)};
background-color: ${({ theme }) => darken(0.03, theme.blue5)};
}
&:active {
box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.blue5)};
background-color: ${({ theme }) => darken(0.1, theme.blue5)};
box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.blue5)};
background-color: ${({ theme }) => darken(0.05, theme.blue5)};
}
&:disabled {
background-color: ${({ theme }) => theme.blue5};
......@@ -138,7 +138,7 @@ export const ButtonPink = styled(Base)`
export const ButtonOutlined = styled(Base)`
border: 1px solid #edeef2;
background-color: transparent;
color: ${({ theme }) => theme.blue1};
color: ${({ theme }) => theme.text1};
&:focus {
box-shadow: 0 0 0 1px ${({ theme }) => theme.bg4};
......@@ -258,12 +258,12 @@ export function ButtonDropwdown({ disabled = false, children, ...rest }) {
export function ButtonDropwdownLight({ disabled = false, children, ...rest }) {
return (
<ButtonEmpty {...rest} disabled={disabled}>
<ButtonOutlined {...rest} disabled={disabled}>
<RowBetween>
<div style={{ display: 'flex', alignItems: 'center' }}>{children}</div>
<ChevronDown size={24} />
</RowBetween>
</ButtonEmpty>
</ButtonOutlined>
)
}
......
src/components/ConfirmationModal/index.js
View file @ 5426e488
......@@ -8,7 +8,7 @@ import { Link } from '../../theme'
import { Text } from 'rebass'
import { CloseIcon } from '../../theme/components'
import { RowBetween } from '../Row'
import { CheckCircle } from 'react-feather'
import { ArrowUpCircle } from 'react-feather'
import { ButtonPrimary } from '../Button'
import { AutoColumn, ColumnCenter } from '../Column'
......@@ -24,8 +24,8 @@ const Section = styled(AutoColumn)`
const BottomSection = styled(Section)`
background-color: ${({ theme }) => theme.bg2};
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
`
const ConfirmedIcon = styled(ColumnCenter)`
......@@ -76,32 +76,36 @@ function ConfirmationModal({
<CloseIcon onClick={WrappedOnDismissed} />
</RowBetween>
<ConfirmedIcon>
{pendingConfirmation ? <Loader size="90px" /> : <CheckCircle size={90} color="#27AE60" />}
{pendingConfirmation ? (
<Loader size="90px" />
) : (
<ArrowUpCircle strokeWidth={0.5} size={90} color="#ff007a" />
)}
</ConfirmedIcon>
<AutoColumn gap="24px" justify={'center'}>
<AutoColumn gap="12px" justify={'center'}>
<Text fontWeight={500} fontSize={20}>
{!pendingConfirmation ? 'Transaction Submitted' : 'Waiting For Confirmation'}
</Text>
<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}
</Text>
</AutoColumn>
{!pendingConfirmation && (
<>
<Link href={getEtherscanLink(chainId, hash, 'transaction')}>
<Text fontWeight={500} fontSize={14} color="#2172E5">
<Text fontWeight={500} fontSize={14} color="#ff007a">
View on Etherscan
</Text>
</Link>
<ButtonPrimary onClick={() => WrappedOnDismissed(true)} style={{ margin: '20px 0' }}>
<ButtonPrimary onClick={() => WrappedOnDismissed(true)} style={{ margin: '20px 0 0 0' }}>
<Text fontWeight={500} fontSize={20}>
Close
</Text>
</ButtonPrimary>
</>
)}
{pendingConfirmation && <div style={{ height: '138px' }} />}
{/* {pendingConfirmation && <div style={{ height: '138px' }} />} */}
<Text fontSize={12} color="#565A69" textAlign="center">
{pendingConfirmation
? 'Confirm this transaction in your wallet'
......
src/components/CreatePool/index.tsx
View file @ 5426e488
......@@ -8,7 +8,6 @@ import SearchModal from '../SearchModal'
import AddLiquidity from '../../pages/Supply/AddLiquidity'
import { Text } from 'rebass'
import { Plus } from 'react-feather'
import { BlueCard } from '../Card'
import { TYPE, Link } from '../../theme'
import { AutoColumn, ColumnCenter } from '../Column'
import { ButtonPrimary, ButtonDropwdown, ButtonDropwdownLight } from '../Button'
......@@ -50,12 +49,6 @@ function CreatePool({ history }) {
} else
return (
<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">
{!token0Address ? (
<ButtonDropwdown
......
src/components/CurrencyInputPanel/index.js
View file @ 5426e488
......@@ -7,7 +7,7 @@ import TokenLogo from '../TokenLogo'
import DoubleLogo from '../DoubleLogo'
import SearchModal from '../SearchModal'
import { RowBetween } from '../Row'
import { TYPE } from '../../theme'
import { TYPE, Hover } from '../../theme'
import { Input as NumericalInput } from '../NumericalInput'
import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
......@@ -19,7 +19,7 @@ import { ThemeContext } from 'styled-components'
const InputRow = styled.div`
${({ theme }) => theme.flexRowNoWrap}
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`
......@@ -50,7 +50,7 @@ const LabelRow = styled.div`
color: ${({ theme }) => theme.text1};
font-size: 0.75rem;
line-height: 1rem;
padding: 0rem 1rem 0.75rem 1rem;
padding: 0.75rem 1rem 0 1rem;
height: 20px
span:hover {
cursor: pointer;
......@@ -112,26 +112,26 @@ const StyledBalanceMax = styled.button`
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;
}
`
// 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({
value,
......@@ -141,6 +141,7 @@ export default function CurrencyInputPanel({
atMax,
error,
type = '',
label = 'Input',
urlAddedTokens = [], // used
onTokenSelection = null,
token = null,
......@@ -151,7 +152,7 @@ export default function CurrencyInputPanel({
hideInput = false,
showSendWithSwap = false,
otherSelectedTokenAddress = null,
simplified = false
advanced = false
}) {
const { t } = useTranslation()
......@@ -163,7 +164,34 @@ export default function CurrencyInputPanel({
return (
<InputPanel>
<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 && (
<>
<NumericalInput
......@@ -172,7 +200,7 @@ export default function CurrencyInputPanel({
onUserInput(field, val)
}}
/>
{!simplified && !!token?.address && !atMax && type !== 'OUTPUT' && (
{!advanced && !!token?.address && !atMax && label !== 'To' && (
<StyledBalanceMax onClick={onMax}>MAX</StyledBalanceMax>
)}
</>
......@@ -205,30 +233,6 @@ export default function CurrencyInputPanel({
</Aligner>
</CurrencySelect>
</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>
{!disableTokenSelect && (
<SearchModal
......
src/components/ExchangePage/index.tsx
View file @ 5426e488
This diff is collapsed.
src/components/Footer/index.js
View file @ 5426e488
import React from 'react'
import ReactGA from 'react-ga'
import styled from 'styled-components'
import { darken, transparentize } from 'polished'
import Toggle from 'react-switch'
import { Send } from 'react-feather'
import { Link } from '../../theme/components'
import { Link } from '../../theme'
import { useDarkModeManager } from '../../contexts/LocalStorage'
import { ButtonSecondary } from '../Button'
const FooterFrame = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
justify-content: flex-end;
width: 100%;
`
const FooterElement = styled.div`
margin: 1.25rem;
display: flex;
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;
position: fixed;
right: 1rem;
bottom: 1rem;
${({ theme }) => theme.mediaWidth.upToExtraSmall`
display: none;
`};
`
export default function Footer() {
const [isDark, toggleDarkMode] = useDarkModeManager()
return (
<FooterFrame>
<FooterElement>
<Title>
<Link id="link" href="https://uniswap.io/">
<h1 id="title">About</h1>
</Link>
<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()
<ButtonSecondary
style={{
padding: ' 8px 12px',
marginRight: '0px',
width: 'fit-content'
}}
/>
href="https://forms.gle/DaLuqvJsVhVaAM3J9"
>
<Link href="https://forms.gle/DaLuqvJsVhVaAM3J9">
<Send size={16} style={{ marginRight: '8px' }} /> Feedback
</Link>
</ButtonSecondary>
</FooterFrame>
)
}
src/components/Header/index.js
View file @ 5426e488
......@@ -13,23 +13,20 @@ import { YellowCard, GreyCard } from '../Card'
import { useWeb3React } from '../../hooks'
import { useAddressBalance } from '../../contexts/Balances'
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 Wordmark from '../../assets/svg/wordmark.svg'
import { AutoColumn } from '../Column'
import { RowBetween } from '../Row'
const HeaderFrame = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
width: 100%;
/* position: absolute; */
padding: 1rem 1rem;
width: calc(100% - 2rem);
top: 0;
position: absolute;
${({ theme }) => theme.mediaWidth.upToExtraSmall`
padding: 10px;
......@@ -98,8 +95,11 @@ const Alpha = styled(GreyCard)`
width: fit-content;
margin-right: 10px;
border-radius: 12px;
padding: 8px 12px;
color: ${({ theme }) => theme.text2};
padding: 3px 7px;
background-color: ${({ theme }) => theme.blue1};
color: ${({ theme }) => theme.white};
font-size: 12px;
font-weight: 600;
`
const UniIcon = styled(Link)`
......@@ -108,32 +108,13 @@ const UniIcon = styled(Link)`
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);
background-color: ${({ theme }) => theme.blue4};
color: ${({ theme }) => theme.pink2};
font-weight: 500;
text-align: center;
......@@ -147,18 +128,21 @@ export default function Header() {
const userEthBalance = useAddressBalance(account, WETH[chainId])
const toggleWalletModal = useWalletModalToggle()
const toggleSimplified = useToggleUserAdvanced()
const advanced = useUserAdvanced()
return (
<AutoColumn style={{ width: '100vw' }}>
<HeaderFrame>
<MigrateBanner>
<StyledRed />
<b>Uniswap V2 is live.&nbsp;</b> Move your liquidity now using the&nbsp;
<a href="https://migrate.uniswap.exchange/">migration helper</a>&nbsp; or read the&nbsp;
<a href="https://uniswap.org/blog/uniswap-v2/">announcement </a>
{/* <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;
{/* <Link href="https://migrate.uniswap.exchange/">
<b>migration helper</b>
</Link>
&nbsp;or read the&nbsp; */}
<Link href="https://uniswap.org/blog/uniswap-v2/">
<b>blog post ↗</b>
</Link>
</MigrateBanner>
<HeaderFrame>
<RowBetween padding="1rem">
<HeaderElement>
<Title>
<UniIcon id="link" href="/">
......@@ -171,30 +155,10 @@ export default function Header() {
</Link>
</TitleText>
)}
<TestnetWrapper>{!isMobile && <Alpha>1.0.0-alpha</Alpha>}</TestnetWrapper>
</Title>
<TestnetWrapper>{!isMobile && <Alpha>V2</Alpha>}</TestnetWrapper>
</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>
{!isMobile && chainId === 4 && <NetworkCard>Rinkeby</NetworkCard>}
{!isMobile && chainId === 3 && <NetworkCard>Ropsten</NetworkCard>}
......@@ -204,7 +168,7 @@ export default function Header() {
<AccountElement active={!!account}>
{account ? (
<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>
) : (
''
......@@ -214,7 +178,8 @@ export default function Header() {
<Menu />
</HeaderElement>
</HeaderFrame>
</AutoColumn>
</RowBetween>
</HeaderFrame>
// </AutoColumn>
)
}
src/components/Menu/index.js
View file @ 5426e488
......@@ -72,7 +72,7 @@ const MenuFlyout = styled.span`
const MenuItem = styled(Link)`
flex: 1;
padding: 0.5rem 0.5rem;
color: ${({ theme }) => theme.text3};
color: ${({ theme }) => theme.text2};
:hover {
color: ${({ theme }) => theme.text1};
cursor: pointer;
......
src/components/NavigationTabs/index.js
View file @ 5426e488
......@@ -110,7 +110,13 @@ function NavigationTabs({ location: { pathname }, history }) {
<ArrowLink />
</Hover>
<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>
</Tabs>
) : finding ? (
......@@ -120,7 +126,7 @@ function NavigationTabs({ location: { pathname }, history }) {
<ArrowLink />
</HistoryLink>
<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>
</Tabs>
) : creating ? (
......@@ -130,7 +136,7 @@ function NavigationTabs({ location: { pathname }, history }) {
<ArrowLink />
</HistoryLink>
<ActiveText>Create Pool</ActiveText>
<QuestionHelper text={'helper text'} />
<QuestionHelper text={'Use this interface to create a new pool.'} />
</RowBetween>
</Tabs>
) : (
......
src/components/PoolFinder/index.tsx
View file @ 5426e488
......@@ -136,11 +136,8 @@ function PoolFinder({ history }) {
</ButtonDropwdownLight>
)}
{allowImport && (
<ColumnCenter
justify="center"
style={{ backgroundColor: '#EBF4FF', padding: '12px 0px', borderRadius: '12px' }}
>
<Text textAlign="center" fontWeight={500} color="#2172E5">
<ColumnCenter justify="center" style={{ backgroundColor: '', padding: '12px 0px', borderRadius: '12px' }}>
<Text textAlign="center" fontWeight={500} color="">
{newLiquidity ? 'Pool Found!' : 'Pool already imported.'}
</Text>
</ColumnCenter>
......
src/components/Popups/index.js
View file @ 5426e488
......@@ -39,7 +39,7 @@ const MobilePopupInner = styled.div`
const FixedPopupColumn = styled(AutoColumn)`
position: absolute;
top: 72px;
top: 128px;
right: 1rem;
width: 355px;
......@@ -54,7 +54,6 @@ const Popup = styled.div`
padding: 1em;
box-sizing: border-box;
background-color: white;
/* margin: 0 10px; */
position: relative;
border-radius: 10px;
padding: 20px;
......
src/components/PositionCard/index.js
View file @ 5426e488
......@@ -138,9 +138,6 @@ function PositionCard({ pairAddress, token0, token1, history, minimal = false, .
</Text>
</RowFixed>
<RowFixed>
<Text fontWeight={500} fontSize={20}>
{userPoolBalance ? userPoolBalance.toFixed(6) : '-'}
</Text>
{showMore ? (
<ChevronUp size="20" style={{ marginLeft: '10px' }} />
) : (
......@@ -186,7 +183,17 @@ function PositionCard({ pairAddress, token0, token1, history, minimal = false, .
{!minimal && (
<FixedHeightRow>
<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 color="#888D9B" fontSize={16} fontWeight={500}>
{poolTokenPercentage ? poolTokenPercentage.toFixed(2) + '%' : '-'}
......
src/components/Question/index.js
View file @ 5426e488
......@@ -58,8 +58,9 @@ const Popup = styled.div`
animation: ${fadeIn} 0.15s linear;
color: ${({ theme }) => theme.text1};
font-style: italic;
color: ${({ theme }) => theme.text2};
font-weight: 400;
/* font-style: italic; */
${({ theme }) => theme.mediaWidth.upToSmall`
left: -20px;
......
src/components/SearchModal/index.js
View file @ 5426e488
......@@ -19,6 +19,7 @@ import { ArrowLeft, X } from 'react-feather'
import { CloseIcon } from '../../theme/components'
import { ColumnCenter } from '../../components/Column'
import Card from '../../components/Card'
import { ButtonPrimary } from '../../components/Button'
import { Spinner, TYPE } from '../../theme'
import { RowBetween, RowFixed, AutoRow } from '../Row'
......@@ -34,7 +35,7 @@ import QuestionHelper from '../Question'
const TokenModalInfo = styled.div`
${({ theme }) => theme.flexRowNoWrap}
align-items: center;
padding: 1rem 1.5rem;
padding: 1rem 1rem;
margin: 0.25rem 0.5rem;
justify-content: center;
user-select: none;
......@@ -348,7 +349,7 @@ function SearchModal({
filteredPairList.map((pairAddress, i) => {
const token0 = allTokens[allPairs[pairAddress].token0]
const token1 = allTokens[allPairs[pairAddress].token1]
const balance = allBalances?.[account]?.[pairAddress]?.toSignificant(6)
// const balance = allBalances?.[account]?.[pairAddress]?.toSignificant(6)
return (
<MenuItem
key={i}
......@@ -361,9 +362,20 @@ function SearchModal({
<DoubleTokenLogo a0={token0?.address || ''} a1={token1?.address || ''} size={24} margin={true} />
<Text fontWeight={500} fontSize={16}>{`${token0?.symbol}/${token1?.symbol}`}</Text>
</RowFixed>
<Text fontWeight={500} fontSize={16}>
{/* <Text fontWeight={500} fontSize={16}>
{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>
)
})
......@@ -494,7 +506,7 @@ function SearchModal({
}
}
const Filter = ({ title, filter }) => {
const Filter = ({ title, filter, filterType }) => {
return (
<FilterWrapper
onClick={() => {
......@@ -506,7 +518,7 @@ function SearchModal({
<Text fontSize={14} fontWeight={500}>
{title}
</Text>
{filter === activeFilter && (
{filter === activeFilter && filterType === 'tokens' && (
<Text fontSize={14} fontWeight={500}>
{sortDirection ? '↓' : '↑'}
</Text>
......@@ -596,9 +608,13 @@ function SearchModal({
)}
<RowBetween>
<Text fontSize={14} fontWeight={500}>
Token Name
{filterType === 'tokens' ? 'Token Name' : 'Pool Name'}
</Text>
<Filter title="Your Balances" filter={FILTERS.BALANCES} />
<Filter
title={filterType === 'tokens' ? 'Your Balances' : ' '}
filter={FILTERS.BALANCES}
filterType={filterType}
/>
</RowBetween>
</PaddedColumn>
)}
......
src/components/SlippageTabs/index.js
View file @ 5426e488
......@@ -360,9 +360,9 @@ export default function TransactionDetails({ setRawSlippage, rawSlippage, deadli
</BottomError>
</RowBetween>
</SlippageSelector>
<AutoColumn gap="md">
<AutoColumn gap="sm">
<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." />
</RowFixed>
<RowBetween padding={'0 20px'}>
......
src/components/WalletModal/index.js
View file @ 5426e488
......@@ -43,7 +43,7 @@ const Wrapper = styled.div`
const HeaderRow = styled.div`
${({ theme }) => theme.flexRowNoWrap};
padding: 1.5rem 1.5rem;
padding: 1rem 1rem;
font-weight: 500;
color: ${props => (props.color === 'blue' ? ({ theme }) => theme.blue1 : 'inherit')};
${({ theme }) => theme.mediaWidth.upToMedium`
......
src/contexts/Application.js
View file @ 5426e488
......@@ -61,7 +61,7 @@ export default function Provider({ children }) {
[POPUP_LIST]: [],
[POPUP_KEY]: 0,
[WALLET_MODAL_OPEN]: false,
[USER_ADVANCED]: true
[USER_ADVANCED]: false
})
const updateBlockNumber = useCallback((networkId, blockNumber) => {
......
src/pages/App.js
View file @ 5426e488
......@@ -3,6 +3,7 @@ import styled from 'styled-components'
import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom'
import Header from '../components/Header'
import Footer from '../components/Footer'
import NavigationTabs from '../components/NavigationTabs'
import Web3ReactManager from '../components/Web3ReactManager'
......@@ -36,11 +37,13 @@ const BodyWrapper = styled.div`
flex-direction: column;
width: 100%;
box-sizing: border-box;
justify-content: flex-start;
/* justify-content: center; */
padding-top: 160px;
align-items: center;
flex: 1;
overflow: auto;
padding-top: 60px;
z-index: 10;
transition: height 0.3s ease;
& > * {
max-width: calc(355px + 4rem);
......@@ -53,13 +56,34 @@ const BodyWrapper = styled.div`
const Body = styled.div`
max-width: 355px;
width: 100%;
min-height: 340px;
/* min-height: 340px; */
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),
0px 24px 32px rgba(0, 0, 0, 0.01);
border-radius: 30px;
box-sizing: border-box;
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() {
......@@ -127,7 +151,9 @@ export default function App() {
</BrowserRouter>
</Web3ReactManager>
</Body>
<Footer></Footer>
</BodyWrapper>
<StyledRed />
</AppWrapper>
</Suspense>
</>
......
src/pages/Supply/AddLiquidity.tsx
View file @ 5426e488
......@@ -522,7 +522,7 @@ function AddLiquidity({ token0, token1, step = false }) {
</AutoColumn>
) : (
<AutoColumn gap="20px">
<RowFlat style={{ marginTop: '60px' }}>
<RowFlat style={{ marginTop: '20px' }}>
<Text fontSize="48px" fontWeight={500} lineHeight="32px" marginRight={10}>
{liquidityMinted?.toFixed(6)}
</Text>
......@@ -533,6 +533,11 @@ function AddLiquidity({ token0, token1, step = false }) {
{tokens[Field.INPUT]?.symbol + ':' + tokens[Field.OUTPUT]?.symbol + ' Pool Tokens'}
</Text>
</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>
)
}
......@@ -573,11 +578,6 @@ function AddLiquidity({ token0, token1, step = false }) {
{noLiquidity ? 'Supply & Create Pool' : 'Confirm Supply'}
</Text>
</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 }) {
<ColumnCenter>
<BlueCard>
<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}>
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 fontWeight={400}>Once you are happy with the rate click supply to review.</TYPE.blue>
</AutoColumn>
......@@ -666,6 +667,7 @@ function AddLiquidity({ token0, token1, step = false }) {
onTokenSelection={address => onTokenSelection(Field.INPUT, address)}
error={inputError}
pair={pair}
label="Input"
/>
<ColumnCenter>
<Plus size="16" color="#888D9B" />
......
src/pages/Supply/RemoveLiquidity.tsx
View file @ 5426e488
......@@ -50,6 +50,7 @@ const ClickableText = styled(Text)`
:hover {
cursor: pointer;
}
color: ${({ theme }) => theme.blue1};
`
// const CustomNumericalInput = styled(NumericalInput)`
......@@ -499,21 +500,40 @@ export default function RemoveLiquidity({ token0, token1 }) {
function modalHeader() {
return (
<AutoColumn gap="16px">
<Row style={{ marginTop: '40px' }}>
<TokenLogo address={tokens[Field.TOKEN0]?.symbol} size={'30px'} />
<Text fontSize="24px" marginLeft={10}>
{tokens[Field.TOKEN0]?.symbol}{' '}
{!!parsedAmounts[Field.TOKEN0] && parsedAmounts[Field.TOKEN0].toSignificant(8)}
<AutoColumn gap={'sm'} style={{ marginTop: '20px' }}>
<RowBetween align="flex-end">
<Text fontSize={24} fontWeight={500}>
{!!parsedAmounts[Field.TOKEN0] && parsedAmounts[Field.TOKEN0].toSignificant(6)}
</Text>
</Row>
<Row>
<TokenLogo address={tokens[Field.TOKEN1]?.symbol} size={'30px'} />
<Text fontSize="24px" marginLeft={10}>
{tokens[Field.TOKEN1]?.symbol}{' '}
{!!parsedAmounts[Field.TOKEN1] && parsedAmounts[Field.TOKEN1].toSignificant(8)}
<RowFixed gap="4px">
<TokenLogo address={tokens[Field.TOKEN0]?.address} size={'24px'} />
<Text fontSize={24} fontWeight={500} style={{ marginLeft: '10px' }}>
{tokens[Field.TOKEN0]?.symbol || ''}
</Text>
</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>
</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>
)
}
......@@ -538,7 +558,7 @@ export default function RemoveLiquidity({ token0, token1 }) {
</RowBetween>
<RowBetween>
<Text color="#565A69" fontWeight={500} fontSize={16}>
Rate
Price
</Text>
<Text fontWeight={500} fontSize={16}>
{`1 ${tokens[Field.TOKEN0]?.symbol} = ${route?.midPrice && route.midPrice.adjusted.toFixed(8)} ${
......@@ -546,9 +566,9 @@ export default function RemoveLiquidity({ token0, token1 }) {
}`}
</Text>
</RowBetween>
<RowBetween gap="20px">
<RowBetween gap="16px">
<ButtonConfirmed
style={{ margin: '20px 0' }}
style={{ margin: '20px 0 0 0' }}
width="48%"
onClick={onSign}
confirmed={signed}
......@@ -558,19 +578,12 @@ export default function RemoveLiquidity({ token0, token1 }) {
{signed ? 'Signed' : 'Sign'}
</ConfirmedText>
</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}>
Confirm Remove
Confirm
</Text>
</ButtonPrimary>
</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 }) {
onClick={() => {
setShowAdvanced(!showAdvanced)
}}
color="#2172E5"
>
{showAdvanced ? 'Hide Advanced' : 'Show Advanced'}
</ClickableText>
......@@ -692,6 +704,7 @@ export default function RemoveLiquidity({ token0, token1 }) {
atMax={atMaxAmount}
token={tokens[Field.TOKEN0]}
error={inputError}
label={'Output'}
disableTokenSelect
/>
<ColumnCenter>
......@@ -705,6 +718,7 @@ export default function RemoveLiquidity({ token0, token1 }) {
atMax={atMaxAmount}
token={tokens[Field.TOKEN1]}
error={outputError}
label={'Output'}
disableTokenSelect
/>
</>
......
src/pages/Supply/index.js
View file @ 5426e488
......@@ -63,17 +63,20 @@ function Supply({ history }) {
return (
<AutoColumn gap="lg" justify="center">
<ButtonPrimary
padding="16px"
onClick={() => {
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>
<Positions>
<AutoColumn gap="12px">
<RowBetween padding={'0 8px'}>
<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>
{filteredExchangeList?.length === 0 && (
<LightCard
......@@ -84,7 +87,7 @@ function Supply({ history }) {
</LightCard>
)}
{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? '}{' '}
<Link
onClick={() => {
......
src/theme/components.js
View file @ 5426e488
......@@ -47,6 +47,10 @@ export const Link = styled.a.attrs({
color: ${({ theme }) => theme.blue1};
font-weight: 500;
:hover {
text-decoration: underline;
}
:focus {
outline: none;
text-decoration: underline;
......
src/theme/index.js
View file @ 5426e488
......@@ -68,7 +68,7 @@ export const theme = darkMode => ({
blue3: darkMode ? '#4D8FEA' : '#165BBB',
// blue5: '#EBF4FF',
// blue4: '#C4D9F8',
blue4: '#FDEAF1',
blue4: '#F6DDE8',
blue5: '#FDEAF1',
// pinks
......@@ -172,15 +172,12 @@ export const TYPE = {
}
export const GlobalStyle = createGlobalStyle`
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@531&display=swap');
html {
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; }
}
@import url('https://rsms.me/inter/inter.css');
html { font-family: 'Inter', sans-serif; letter-spacing: -0.018em;}
@supports (font-variation-settings: normal) {
html { font-family: 'Inter var', sans-serif; }
}
html,
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