ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

error warnings on remove and pool finder added

Browse Source
This commit is contained in:
ianlapham 2020-03-10 14:55:33 -04:00
parent 55eb03c237
commit 217a700832
16 changed files with 459 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/assets/svg/logo.svg Normal file
View File

@ -0,0 +1,9 @@
<svg width="28" height="32" viewBox="0 0 28 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0L5.12422 6.18906C5.15121 6.18906 6.57795 8.17535 7.79344 9.60057C11.2202 13.6184 10.9328 13.2596 10.8977 13.476C10.8547 13.7406 10.7171 13.9047 10.403 14.0654C10.0451 14.2485 9.64813 14.2945 9.11223 14.2148C8.73047 14.158 8.07753 13.476 8.49532 14.2393C8.1883 14.3851 7.69161 14.9624 7.46654 15.4351C7.21391 15.9658 7.13175 16.2874 6.99865 17.2658C6.75865 19.0306 6.73939 19.0768 5.75607 20.241C5.20764 20.8903 4.89786 21.363 4.72185 21.8193C4.42877 22.579 4.52586 23.9598 4.94118 24.9387C4.98988 25.0535 5.24011 25.4952 5.49728 25.9202C5.78253 26.3917 5.98897 26.7957 6.02681 26.9565L6.08882 27.2202L6.36634 27.1878C6.51897 27.1699 6.87129 27.0957 7.14929 27.0229C8.52529 26.6627 9.57892 26.0846 10.0943 25.4071C10.3386 25.086 10.4122 24.8418 10.4164 24.3381C10.4221 23.6638 10.1523 23.2643 9.27279 22.6446C8.69957 22.2407 8.17604 21.7116 8.00562 21.3639C7.78734 20.9186 7.78123 20.2568 7.98657 19.3015C8.07295 18.8996 8.181 18.1949 8.22657 17.7356C8.32422 16.752 8.43415 16.1902 8.58051 15.9264C8.76873 15.5872 9.10988 15.4129 9.58539 15.4129C9.93907 15.4129 10.5973 15.2425 10.918 15.068C11.4604 14.7728 11.8534 14.2365 11.9597 13.6467C12.0766 12.9983 12.0502 12.953 10.7089 11.4982C10.431 11.1967 9.30332 9.9636 8.20302 8.75786C7.10273 7.55213 6.07123 6.42397 5.91078 6.25083C5.75033 6.07775 4.82108 5.06185 3.84574 3.99335C2.33451 2.33774 0 0 0 0ZM6.37605 23.3865C6.56203 23.0815 6.48326 22.6968 6.18721 22.4639C6.00755 22.3227 5.6451 22.3152 5.52275 22.4504C5.39878 22.5874 5.4158 22.6965 5.57991 22.8173C5.70351 22.9083 5.71431 22.9362 5.65783 23.0174C5.48637 23.2641 5.46502 23.3522 5.54321 23.4909C5.71473 23.7951 6.16106 23.7392 6.37605 23.3865Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9532 10.924C14.1743 8.58875 13.1898 7.83039 11.4128 7.42624C11.0606 7.34612 11.0281 7.33056 11.2054 7.32685C11.321 7.32445 11.6146 7.34711 11.8579 7.37717C13.2783 7.55281 14.4435 8.24879 15.7822 9.72109L16.1325 10.1064L16.5912 10.0323C16.8947 9.98343 17.4565 9.959 18.2505 9.96025C19.3802 9.96198 19.4879 9.97075 20.0753 10.1089C20.8213 10.2842 21.2723 10.4404 21.9099 10.7443C22.516 11.0331 22.9288 11.5807 22.9318 11.6972C22.9331 11.7456 22.955 11.9614 22.9805 12.1767C23.0399 12.6773 22.9645 13.2674 22.7964 13.6173C22.6007 14.0247 23.053 14.2124 23.3403 14.2124C23.6761 14.2124 23.9736 13.6451 24.2017 12.5702L24.2345 12.4156L24.4161 12.6224C25.2346 13.5546 25.8485 14.6241 26.0818 15.5245C26.2029 15.9917 26.1611 16.0317 25.911 15.6876C25.2961 14.8411 24.5766 14.5991 22.374 14.4978C20.5066 14.4119 19.1757 14.0639 18.2284 13.4138C17.6507 13.0173 17.0326 12.341 15.9532 10.924ZM12.0051 12.2132C11.2248 11.2672 10.8254 10.1732 10.7743 8.842L10.7455 8.09101L10.9486 8.1288C11.8061 8.28825 12.4503 8.74894 12.777 9.43641C12.946 9.79203 12.9946 9.96401 13.2911 11.256C13.4357 11.8864 13.6185 12.3058 13.98 12.8367C14.2218 13.1918 14.2005 13.2941 13.8802 13.3148C13.388 13.3465 12.5186 12.8357 12.0051 12.2132ZM23.3796 9.35066C23.4128 8.96722 23.4784 8.54193 23.5253 8.40554C23.5721 8.26915 23.6141 8.15756 23.6186 8.15756C23.6231 8.1575 23.6184 8.42177 23.6082 8.74476C23.5874 9.40337 23.6643 9.94768 23.8274 10.2969C23.8883 10.4271 24.0957 10.6817 24.2951 10.871C24.7107 11.2655 25.4615 12.0963 25.5433 12.2524C25.5742 12.3112 25.4726 12.2403 25.3177 12.0948C25.1628 11.9492 24.8404 11.6852 24.6013 11.5079C24.2401 11.2401 24.1497 11.1947 24.0663 11.2394C23.9905 11.2799 23.966 11.3496 23.966 11.5241C23.966 11.9272 23.8274 12.4156 23.3403 13.4138C23.5817 12.0984 23.6216 11.2452 23.3425 10.8058C23.1592 10.5174 22.5858 10.1192 21.8141 9.74442C21.4972 9.5905 21.3932 9.52165 21.5128 9.54503C21.6951 9.58063 22.472 9.8377 22.9276 10.0132C23.0598 10.0641 23.202 10.0928 23.2436 10.0768C23.2997 10.0553 23.3346 9.86933 23.3796 9.35066ZM20.3369 18.1014C18.7929 17.1928 18.12 16.1813 18.12 14.7689V14.2621L18.391 14.4763C19.0507 14.9978 19.7437 15.2188 21.565 15.4884C23.8663 15.8291 24.8183 16.1098 25.7784 16.7309C26.8185 17.4037 27.5519 18.4674 27.8026 19.6669C27.9163 20.2103 27.9162 21.1076 27.8024 21.6503C27.7013 22.1331 27.456 22.7922 27.3072 22.9813L27.2045 23.1118L27.2033 22.9009C27.1991 22.1322 26.6955 21.332 25.8295 20.7177C25.2075 20.2766 24.6847 20.0237 22.7394 19.2226C21.4327 18.6844 20.9247 18.4473 20.3369 18.1014ZM20.1691 21.1305C20.3217 20.6394 20.3197 19.8385 20.1646 19.2754C20.059 18.892 20.0589 18.8866 20.1595 19.0144C20.3219 19.2206 20.6079 19.8491 20.6783 20.1546C20.7679 20.5434 20.7555 21.1958 20.6515 21.5559C20.3223 22.6964 19.3119 23.5251 17.9373 23.782C17.7077 23.825 17.0618 23.8867 16.502 23.9193C15.3158 23.9883 14.5634 24.0889 13.9456 24.2611C13.7023 24.3289 13.4953 24.3766 13.4858 24.367C13.4762 24.3575 13.5965 24.2763 13.7531 24.1867C14.4569 23.7841 15.2936 23.5381 16.6063 23.3479C17.6671 23.1942 18.1852 23.0626 18.6681 22.8241C19.4306 22.4473 19.9378 21.8751 20.1691 21.1305ZM21.4292 21.572C21.3129 21.1565 21.2975 20.2112 21.4005 19.8105C21.4467 19.631 21.4916 19.5488 21.531 19.572C21.564 19.5914 21.6787 19.6618 21.7858 19.7284C21.8928 19.795 22.4565 20.1111 23.0385 20.4308C23.6204 20.7505 24.3314 21.1657 24.6185 21.3535C25.2806 21.7868 26.0554 22.5562 26.3234 23.0466C27.5433 25.2785 26.7199 28.2667 24.526 29.5701C24.3309 29.686 24.1602 29.7696 24.1465 29.7559C24.1328 29.7423 24.1892 29.5806 24.2718 29.3966C24.4895 28.9113 24.5644 28.5495 24.557 28.0183C24.5429 27.0101 24.221 26.2805 22.9452 24.3645C22.0586 23.0329 21.6034 22.1946 21.4292 21.572Z" fill="black"/>
<path d="M14.4924 24.9463C13.7588 25.0644 13.3675 25.2425 11.93 26.1129C10.8431 26.771 9.73905 27.372 9.16839 27.6161L8.90741 27.7278L9.27487 27.7294C10.0675 27.7332 10.7622 28.0465 11.4171 28.696C11.6492 28.9261 11.9268 29.2484 12.034 29.4122C12.2774 29.7839 12.526 30.0046 12.898 30.1791C13.1497 30.2971 13.2557 30.3148 13.7095 30.3144C14.1607 30.314 14.2657 30.2965 14.4848 30.185C14.9709 29.9376 15.2209 29.4937 15.187 28.9378C15.1522 28.3664 14.8828 27.9843 14.4619 27.9088C14.2864 27.8774 14.2873 27.8788 14.5162 27.9998C15.0699 28.2922 15.1537 29.2005 14.6682 29.6469C14.3784 29.9133 13.7781 30.008 13.3946 29.8478C12.76 29.5826 12.4824 28.5586 12.8421 27.8095C13.1931 27.0783 13.9527 26.6959 14.9422 26.7522C15.3222 26.7738 15.4537 26.8074 15.7886 26.9685C16.0227 27.0811 16.3159 27.2802 16.5042 27.4546C17.1186 28.0234 17.4557 28.6181 17.9593 30.0212C18.2872 30.935 18.4403 31.2478 18.6865 31.5068C18.5307 31.2318 18.6122 30.3364 18.5133 29.5058C18.2615 27.3925 18.049 26.7226 17.4043 26.0102C16.9747 25.5355 16.5073 25.2381 15.8756 25.0374C15.631 24.9597 14.764 24.9026 14.4924 24.9463Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.1963 16.7216C14.4552 17.3498 14.0708 18.104 13.3379 18.406C12.6049 18.708 11.8009 18.4435 11.542 17.8153C11.2831 17.187 11.6674 16.4329 12.4004 16.1309C13.1334 15.8288 13.9374 16.0933 14.1963 16.7216ZM12.7137 16.8143C13.0819 16.6626 13.4164 16.7046 13.3226 16.477C13.2288 16.2494 12.8543 16.1878 12.4861 16.3396C12.1179 16.4913 11.8954 16.7988 11.9892 17.0264C12.083 17.254 12.3455 16.966 12.7137 16.8143Z" fill="black"/>
<path d="M8.70623 9.9941C8.77397 10.3193 8.79238 10.6259 8.77667 10.899C8.76148 11.1732 8.71346 11.4148 8.65145 11.6368C8.58944 11.8589 8.51213 12.0606 8.42548 12.2493C8.33883 12.438 8.24468 12.6157 8.14534 12.7857C8.17684 12.5583 8.20283 12.329 8.21881 12.0983C8.2348 11.8677 8.23817 11.6339 8.22649 11.4023C8.21401 11.171 8.18728 10.9417 8.13585 10.7271C8.08522 10.5122 8.01382 10.3147 7.92574 10.1441C7.77305 9.84684 7.8022 9.50851 7.99215 9.38751C8.18181 9.26805 8.45948 9.41124 8.61348 9.70939C8.65134 9.78243 8.67756 9.85904 8.69378 9.93426L8.70623 9.9941Z" fill="black"/>
<path d="M6.15145 6.81565C6.20358 7.08894 6.21466 7.346 6.19763 7.57447C6.18102 7.80396 6.13738 8.00559 6.08231 8.19069C6.02723 8.37578 5.95962 8.54361 5.88438 8.70041C5.80914 8.85721 5.72776 9.00474 5.64216 9.14574C5.67176 8.95573 5.69677 8.76405 5.71343 8.57108C5.73008 8.37811 5.73622 8.18236 5.72971 7.98824C5.72254 7.79439 5.7034 7.60189 5.66337 7.42146C5.62401 7.24075 5.567 7.07432 5.49565 6.93024C5.37198 6.6791 5.40119 6.39616 5.56198 6.29751C5.72252 6.20014 5.95304 6.324 6.0778 6.57588C6.10847 6.63759 6.12935 6.70212 6.14187 6.76535L6.15145 6.81565Z" fill="black"/>
<path d="M3.48964 3.6624C3.51939 3.82057 3.52542 3.96929 3.51524 4.10144C3.50529 4.23417 3.47976 4.35075 3.44762 4.45775C3.41549 4.56474 3.37613 4.66173 3.33237 4.75233C3.28862 4.84293 3.24132 4.92815 3.1916 5.00959C3.209 4.89971 3.22375 4.78887 3.23367 4.67726C3.24359 4.56565 3.24742 4.45242 3.24395 4.34011C3.24008 4.22796 3.22929 4.11658 3.2064 4.01214C3.18389 3.90754 3.15116 3.81118 3.1101 3.72773C3.03892 3.58226 3.05624 3.41862 3.1494 3.36179C3.24241 3.3057 3.37558 3.37769 3.44739 3.52359C3.46504 3.55933 3.47702 3.59669 3.48417 3.63329L3.48964 3.6624Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

17
src/components/Button/index.js
View File

@ -7,7 +7,7 @@ import { RowBetween } from '../Row'
import { ChevronDown } from 'react-feather' import { ChevronDown } from 'react-feather'
const Base = styled(RebassButton)` const Base = styled(RebassButton)`
padding: ${({ padding }) => (padding ? padding : '16px')}; padding: ${({ padding }) => (padding ? padding : '18px')};
width: ${({ width }) => (width ? width : '100%')}; width: ${({ width }) => (width ? width : '100%')};
font-size: 1rem; font-size: 1rem;
font-weight: 500; font-weight: 500;
@ -37,8 +37,8 @@ export const ButtonPrimary = styled(Base)`
background-color: ${({ theme }) => darken(0.1, theme.royalBlue)}; background-color: ${({ theme }) => darken(0.1, theme.royalBlue)};
} }
&:disabled { &:disabled {
background-color: ${({ theme }) => theme.royalBlue}; background-color: ${({ theme }) => theme.outlineGrey};
opacity: 50%; color: ${({ theme }) => theme.darkGrey}
cursor: auto; cursor: auto;
} }
` `
@ -115,3 +115,14 @@ export function ButtonDropwdown({ disabled, children, ...rest }) {
</ButtonPrimary> </ButtonPrimary>
) )
} }
export function ButtonDropwdownLight({ disabled, children, ...rest }) {
return (
<ButtonEmpty {...rest}>
<RowBetween>
<div style={{ display: 'flex', alignItems: 'center' }}>{children}</div>
<ChevronDown size={24} />
</RowBetween>
</ButtonEmpty>
)
}

10
src/components/ConfirmationModal/index.js
View File

@ -81,7 +81,7 @@ export default function ConfirmationModal({
<LightCard> <LightCard>
<RowBetween> <RowBetween>
<Text fontSize={24} fontWeight={500}> <Text fontSize={24} fontWeight={500}>
{amount0?.toSignificant(6)} {!!amount0 && amount0?.toSignificant(6)}
</Text> </Text>
<RowFixed gap="10px"> <RowFixed gap="10px">
<TokenLogo address={amount0?.token?.address} size={'24px'} /> <TokenLogo address={amount0?.token?.address} size={'24px'} />
@ -97,7 +97,7 @@ export default function ConfirmationModal({
<LightCard> <LightCard>
<RowBetween> <RowBetween>
<Text fontSize={24} fontWeight={500}> <Text fontSize={24} fontWeight={500}>
{amount1?.toSignificant(6)} {!!amount1 && amount1?.toSignificant(6)}
</Text> </Text>
<RowFixed gap="10px"> <RowFixed gap="10px">
<TokenLogo address={amount1?.token?.address} size={'24px'} /> <TokenLogo address={amount1?.token?.address} size={'24px'} />
@ -127,13 +127,13 @@ export default function ConfirmationModal({
<Row> <Row>
<TokenLogo address={address0} size={'30px'} /> <TokenLogo address={address0} size={'30px'} />
<Text fontSize="24px" marginLeft={10}> <Text fontSize="24px" marginLeft={10}>
{symbol0} {amount0?.toSignificant(8)} {symbol0} {!!amount0 && amount0?.toSignificant(8)}
</Text> </Text>
</Row> </Row>
<Row> <Row>
<TokenLogo address={address1} size={'30px'} /> <TokenLogo address={address1} size={'30px'} />
<Text fontSize="24px" marginLeft={10}> <Text fontSize="24px" marginLeft={10}>
{symbol1} {amount1?.toSignificant(8)} {symbol1} {!!amount1 && amount1?.toSignificant(8)}
</Text> </Text>
</Row> </Row>
</AutoColumn> </AutoColumn>
@ -150,7 +150,7 @@ export default function ConfirmationModal({
<RowFixed> <RowFixed>
<TokenLogo address={address0 || ''} style={{ marginRight: '8px' }} /> <TokenLogo address={address0 || ''} style={{ marginRight: '8px' }} />
<Text fontWeight={500} fontSize={16}> <Text fontWeight={500} fontSize={16}>
{amount0?.toSignificant(6)} {!!amount0 && amount0?.toSignificant(6)}
</Text> </Text>
</RowFixed> </RowFixed>
</RowBetween> </RowBetween>

12
src/components/CurrencyInputPanel/index.js
View File

@ -181,7 +181,6 @@ export default function CurrencyInputPanel({
const addTransaction = useTransactionAdder() const addTransaction = useTransactionAdder()
const [modalOpen, setModalOpen] = useState(false) const [modalOpen, setModalOpen] = useState(false)
const [showMax, setShowMax] = useState(false)
// this one causes the infinite loop // this one causes the infinite loop
const userTokenBalance = useAddressBalance(account, token) const userTokenBalance = useAddressBalance(account, token)
@ -252,15 +251,8 @@ export default function CurrencyInputPanel({
</LabelRow> </LabelRow>
)} )}
<InputRow> <InputRow>
<NumericalInput <NumericalInput field={field} value={value} onUserInput={onUserInput} />
field={field} {!!token?.address && !atMax && <StyledBalanceMax onClick={onMax}>MAX</StyledBalanceMax>}
value={value}
onUserInput={onUserInput}
onFocus={() => {
setShowMax(true)
}}
/>
{!!token?.address && !atMax && showMax && <StyledBalanceMax onClick={onMax}>MAX</StyledBalanceMax>}
{renderUnlockButton()} {renderUnlockButton()}
<CurrencySelect <CurrencySelect
selected={!!token?.address} selected={!!token?.address}

47
src/components/Header/index.js
View File

@ -1,9 +1,10 @@
import React from 'react' import React from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import { Link } from '../../theme'
import Web3Status from '../Web3Status' import Web3Status from '../Web3Status'
import { darken } from 'polished' import { Link } from '../../theme'
import Logo from '../../assets/svg/logo.svg'
const HeaderFrame = styled.div` const HeaderFrame = styled.div`
display: flex; display: flex;
@ -20,15 +21,6 @@ const HeaderElement = styled.div`
align-items: center; align-items: center;
` `
const Nod = styled.span`
transform: rotate(0deg);
transition: transform 150ms ease-out;
:hover {
transform: rotate(-10deg);
}
`
const Title = styled.div` const Title = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
@ -36,20 +28,15 @@ const Title = styled.div`
:hover { :hover {
cursor: pointer; cursor: pointer;
} }
`
#link { const TitleText = styled.div`
text-decoration-color: ${({ theme }) => theme.UniswapPink}; font-size: 24px;
} font-weight: 700;
background: linear-gradient(119.64deg, #fb1868 -5.55%, #ff00f3 154.46%);
#title { -webkit-background-clip: text;
display: inline; -webkit-text-fill-color: transparent;
font-size: 1rem; margin-left: 12px;
font-weight: 500;
color: ${({ theme }) => theme.wisteriaPurple};
:hover {
color: ${({ theme }) => darken(0.1, theme.wisteriaPurple)};
}
}
` `
export default function Header() { export default function Header() {
@ -57,15 +44,11 @@ export default function Header() {
<HeaderFrame> <HeaderFrame>
<HeaderElement> <HeaderElement>
<Title> <Title>
<Nod>
<Link id="link" href="https://uniswap.io">
<span role="img" aria-label="unicorn">
🦄{' '}
</span>
</Link>
</Nod>
<Link id="link" href="https://uniswap.io"> <Link id="link" href="https://uniswap.io">
<h1 id="title">Uniswap</h1> <img src={Logo} />
</Link>
<Link id="link" href="https://uniswap.io">
<TitleText>Uniswap</TitleText>
</Link> </Link>
</Title> </Title>
</HeaderElement> </HeaderElement>

11
src/components/NavigationTabs/index.js
View File

@ -131,6 +131,7 @@ function NavigationTabs({ location: { pathname }, history }) {
const adding = pathname.match('/add') const adding = pathname.match('/add')
const removing = pathname.match('/remove') const removing = pathname.match('/remove')
const finding = pathname.match('/find')
return ( return (
<> <>
@ -144,6 +145,16 @@ function NavigationTabs({ location: { pathname }, history }) {
<QuestionHelper text={'helper text'} /> <QuestionHelper text={'helper text'} />
</RowBetween> </RowBetween>
</Tabs> </Tabs>
) : finding ? (
<Tabs>
<RowBetween style={{ padding: '1rem' }}>
<HistoryLink to="/supply">
<ArrowLink />
</HistoryLink>
<ActiveText>Find a Pool</ActiveText>
<QuestionHelper text={'helper text'} />
</RowBetween>
</Tabs>
) : ( ) : (
<Tabs> <Tabs>
{tabOrder.map(({ path, textKey, regex }) => ( {tabOrder.map(({ path, textKey, regex }) => (

19
src/components/SearchModal/index.js
View File

@ -107,7 +107,7 @@ const MenuItem = styled(PaddedItem)`
background-color: ${({ theme }) => theme.tokenRowHover}; background-color: ${({ theme }) => theme.tokenRowHover};
} }
` `
function SearchModal({ history, isOpen, onDismiss, onTokenSelect, field, urlAddedTokens, filterType }) { function SearchModal({ history, isOpen, onDismiss, onTokenSelect, urlAddedTokens, filterType, hiddenToken }) {
const { t } = useTranslation() const { t } = useTranslation()
const { account, chainId } = useWeb3React() const { account, chainId } = useWeb3React()
@ -116,9 +116,9 @@ function SearchModal({ history, isOpen, onDismiss, onTokenSelect, field, urlAdde
// get all exchanges // get all exchanges
const allExchanges = useAllExchanges() const allExchanges = useAllExchanges()
const exchange = useToken(searchQuery) const token = useToken(searchQuery)
const exchangeAddress = exchange && exchange.exchangeAddress const tokenAddress = token && token.address
// get all tokens // get all tokens
const allTokens = useAllTokens() const allTokens = useAllTokens()
@ -145,6 +145,10 @@ function SearchModal({ history, isOpen, onDismiss, onTokenSelect, field, urlAdde
} }
}) })
.map(k => { .map(k => {
if (k === hiddenToken) {
return false
}
let balance let balance
// only update if we have data // only update if we have data
balance = allBalances?.[account]?.[k] balance = allBalances?.[account]?.[k]
@ -155,7 +159,7 @@ function SearchModal({ history, isOpen, onDismiss, onTokenSelect, field, urlAdde
balance: balance balance: balance
} }
}) })
}, [allBalances, allTokens, account]) }, [allTokens, hiddenToken, allBalances, account])
const filteredTokenList = useMemo(() => { const filteredTokenList = useMemo(() => {
return tokenList.filter(tokenEntry => { return tokenList.filter(tokenEntry => {
@ -182,7 +186,7 @@ function SearchModal({ history, isOpen, onDismiss, onTokenSelect, field, urlAdde
function _onTokenSelect(address) { function _onTokenSelect(address) {
setSearchQuery('') setSearchQuery('')
onTokenSelect(field, address) onTokenSelect(address)
onDismiss() onDismiss()
} }
@ -294,10 +298,10 @@ function SearchModal({ history, isOpen, onDismiss, onTokenSelect, field, urlAdde
} }
function renderTokenList() { function renderTokenList() {
if (isAddress(searchQuery) && exchangeAddress === undefined) { if (isAddress(searchQuery) && tokenAddress === undefined) {
return <Text>Searching for Exchange...</Text> return <Text>Searching for Exchange...</Text>
} }
if (isAddress(searchQuery) && exchangeAddress === ethers.constants.AddressZero) { if (isAddress(searchQuery) && tokenAddress === ethers.constants.AddressZero) {
return ( return (
<> <>
<TokenModalInfo>{t('noExchange')}</TokenModalInfo> <TokenModalInfo>{t('noExchange')}</TokenModalInfo>
@ -394,7 +398,6 @@ function SearchModal({ history, isOpen, onDismiss, onTokenSelect, field, urlAdde
</RowBetween> </RowBetween>
</PaddedColumn> </PaddedColumn>
<div style={{ width: '100%', height: '1px', backgroundColor: '#E1E1E1' }} /> <div style={{ width: '100%', height: '1px', backgroundColor: '#E1E1E1' }} />
<TokenList>{filterType === 'tokens' ? renderTokenList() : renderPairsList()}</TokenList> <TokenList>{filterType === 'tokens' ? renderTokenList() : renderPairsList()}</TokenList>
</TokenModal> </TokenModal>
</Modal> </Modal>

42
src/components/Slider/index.js
View File

@ -2,7 +2,25 @@ import React from 'react'
import Slider from '@material-ui/core/Slider' import Slider from '@material-ui/core/Slider'
import { withStyles } from '@material-ui/core/styles' import { withStyles } from '@material-ui/core/styles'
const IOSSlider = withStyles({ const marks = [
{
value: 0
},
{
value: 25
},
{
value: 50
},
{
value: 75
},
{
value: 100
}
]
const StyledSlider = withStyles({
root: { root: {
width: '95%', width: '95%',
color: '#3880ff', color: '#3880ff',
@ -13,7 +31,7 @@ const IOSSlider = withStyles({
thumb: { thumb: {
height: 28, height: 28,
width: 28, width: 28,
backgroundColor: '##2172E5', backgroundColor: '#2172E5',
marginTop: -14, marginTop: -14,
marginLeft: -14, marginLeft: -14,
'&:focus,&:hover,&$active': { '&:focus,&:hover,&$active': {
@ -34,16 +52,26 @@ const IOSSlider = withStyles({
}, },
mark: { mark: {
backgroundColor: '#bfbfbf', backgroundColor: '#bfbfbf',
height: 8, height: 12,
width: 1, width: 2,
marginTop: -3 marginTop: -4
}, },
markActive: { markActive: {
opacity: 1, opacity: 1,
backgroundColor: 'currentColor' backgroundColor: 'currentColor',
height: 12,
width: 2,
marginTop: -4
} }
})(Slider) })(Slider)
export default function InputSlider({ value, onChange }) { export default function InputSlider({ value, onChange }) {
return <IOSSlider value={typeof value === 'number' ? value : 0} onChange={onChange} aria-labelledby="input-slider" /> return (
<StyledSlider
value={typeof value === 'number' ? value : 0}
onChange={onChange}
aria-labelledby="input-slider"
marks={marks}
/>
)
} }

163
src/components/TokenFind/index.js Normal file
View File

@ -0,0 +1,163 @@
import React, { useState } from 'react'
import styled from 'styled-components'
import { withRouter } from 'react-router-dom'
import { JSBI } from '@uniswap/sdk'
import { useWeb3React } from '@web3-react/core'
import { useToken } from '../../contexts/Tokens'
import { useExchange } from '../../contexts/Exchanges'
import { useAddressBalance } from '../../contexts/Balances'
import { LightCard } from '../../components/Card'
import PositionCard from '../../components/PositionCard'
import SearchModal from '../../components/SearchModal'
import Row from '../../components/Row'
import { Link } from '../../theme'
import { Text } from 'rebass'
import { AutoColumn, ColumnCenter } from '../../components/Column'
import { Plus } from 'react-feather'
import { ButtonPrimary, ButtonDropwdown, ButtonDropwdownLight } from '../../components/Button'
import TokenLogo from '../TokenLogo'
function TokenFind({ history }) {
const Fields = {
TOKEN0: 0,
TOKEN1: 1
}
const { account } = useWeb3React()
const [showSearch, setShowSearch] = useState(false)
const [activeField, setActiveField] = useState(Fields.TOKEN0)
const [token0Address, setToken0Address] = useState()
const [token1Address, setToken1Address] = useState()
const token0 = useToken(token0Address)
const token1 = useToken(token1Address)
const exchange = useExchange(token0, token1)
const position = useAddressBalance(account, exchange?.liquidityToken)
const newExchange = exchange && JSBI.equal(exchange.reserve0.raw, JSBI.BigInt(0))
const allowImport = position && JSBI.greaterThan(position.raw, JSBI.BigInt(0))
return (
<>
<AutoColumn gap="24px">
{!token0Address ? (
<ButtonDropwdown
onClick={() => {
setShowSearch(true)
setActiveField(Fields.TOKEN0)
}}
>
<Text fontSize={20}>Select first token</Text>
</ButtonDropwdown>
) : (
<ButtonDropwdownLight
onClick={() => {
setShowSearch(true)
setActiveField(Fields.TOKEN0)
}}
>
<Row>
<TokenLogo address={token0Address} />
<Text fontWeight={500} fontSize={20} marginLeft={'12px'}>
{token0?.symbol}
</Text>
</Row>
</ButtonDropwdownLight>
)}
<ColumnCenter>
<Plus size="16" color="#888D9B" />
</ColumnCenter>
{!token1Address ? (
<ButtonDropwdown
onClick={() => {
setShowSearch(true)
setActiveField(Fields.TOKEN1)
}}
>
<Text fontSize={20}>Select second token</Text>
</ButtonDropwdown>
) : (
<ButtonDropwdownLight
onClick={() => {
setShowSearch(true)
setActiveField(Fields.TOKEN1)
}}
>
<Row>
<TokenLogo address={token1Address} />
<Text fontWeight={500} fontSize={20} marginLeft={'12px'}>
{token1?.symbol}
</Text>
</Row>
</ButtonDropwdownLight>
)}
{position ? (
!JSBI.equal(position.raw, JSBI.BigInt(0)) ? (
<PositionCard
exchangeAddress={exchange?.liquidityToken.address}
token0={token0}
token1={token1}
minimal={true}
border="1px solid #EDEEF2"
/>
) : (
<LightCard padding="45px">
<AutoColumn gap="8px" justify="center">
<Text color="">No position found.</Text>
<Link
onClick={() => {
history.push('/add/' + token0Address + '-' + token1Address)
}}
>
Add liquidity to this pair instead.
</Link>
</AutoColumn>
</LightCard>
)
) : newExchange ? (
<LightCard padding="45px">
<AutoColumn gap="8px" justify="center">
<Text color="">No exchange found.</Text>
<Link>Create exchange instead.</Link>
</AutoColumn>
</LightCard>
) : (
<LightCard bg="rgba(255, 255, 255, 0.6)" padding={'45px'}>
<Text color="#C3C5CB" textAlign="center">
Select a token pair to find your liquidity.
</Text>
</LightCard>
)}
{allowImport && (
<Text textAlign="center" fontWeight={500}>
Liquidity Found!
</Text>
)}
<ButtonPrimary disabled={!allowImport} onClick={() => history.goBack()}>
<Text fontWeight={500} fontSize={20}>
Import
</Text>
</ButtonPrimary>
</AutoColumn>
<SearchModal
isOpen={showSearch}
filterType="tokens"
onTokenSelect={address => {
activeField === Fields.TOKEN0 ? setToken0Address(address) : setToken1Address(address)
}}
onDismiss={() => {
setShowSearch(false)
}}
hiddenToken={activeField === Fields.TOKEN0 ? token1Address : token0Address}
/>
</>
)
}
export default withRouter(TokenFind)

25
src/contexts/Exchanges.tsx
View File

@ -9,14 +9,14 @@ import { ChainId, WETH, Token, TokenAmount, Exchange, JSBI } from '@uniswap/sdk'
const UPDATE = 'UPDATE' const UPDATE = 'UPDATE'
const ALL_EXCHANGES: [Token, Token][] = [ const ALL_EXCHANGES: [Token, Token][] = [
[ // [
INITIAL_TOKENS_CONTEXT[ChainId.RINKEBY][WETH[ChainId.RINKEBY].address], // INITIAL_TOKENS_CONTEXT[ChainId.RINKEBY][WETH[ChainId.RINKEBY].address],
INITIAL_TOKENS_CONTEXT[ChainId.RINKEBY]['0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735'] // INITIAL_TOKENS_CONTEXT[ChainId.RINKEBY]['0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735']
], // ],
[ // [
INITIAL_TOKENS_CONTEXT[ChainId.RINKEBY]['0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735'], // INITIAL_TOKENS_CONTEXT[ChainId.RINKEBY]['0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735'],
INITIAL_TOKENS_CONTEXT[ChainId.RINKEBY]['0x8ab15C890E5C03B5F240f2D146e3DF54bEf3Df44'] // INITIAL_TOKENS_CONTEXT[ChainId.RINKEBY]['0x8ab15C890E5C03B5F240f2D146e3DF54bEf3Df44']
] // ]
] ]
const EXCHANGE_MAP: { const EXCHANGE_MAP: {
@ -112,6 +112,15 @@ export function useExchange(tokenA?: Token, tokenB?: Token): Exchange | undefine
return exchange return exchange
} }
export function useAllExchangesRaw() {
const { chainId } = useWeb3React()
const [state] = useExchangesContext()
const allExchangeDetails = state?.[chainId]
return allExchangeDetails
}
export function useAllExchanges() { export function useAllExchanges() {
const { chainId } = useWeb3React() const { chainId } = useWeb3React()
const [state] = useExchangesContext() const [state] = useExchangesContext()

9
src/contexts/Tokens.tsx
View File

@ -6,9 +6,9 @@ import { isAddress, getTokenName, getTokenSymbol, getTokenDecimals, safeAccess }
const UPDATE = 'UPDATE' const UPDATE = 'UPDATE'
export const ALL_TOKENS = [ export const ALL_TOKENS = [
WETH[ChainId.RINKEBY], WETH[ChainId.RINKEBY]
new Token(ChainId.RINKEBY, '0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735', 18, 'DAI', 'Dai Stablecoin'), // new Token(ChainId.RINKEBY, '0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735', 18, 'DAI', 'Dai Stablecoin'),
new Token(ChainId.RINKEBY, '0x8ab15C890E5C03B5F240f2D146e3DF54bEf3Df44', 18, 'IANV2', 'IAn V2 Coin') // new Token(ChainId.RINKEBY, '0x8ab15C890E5C03B5F240f2D146e3DF54bEf3Df44', 18, 'IANV2', 'IAn V2 Coin')
] ]
// only meant to be used in exchanges.ts! // only meant to be used in exchanges.ts!
@ -72,9 +72,8 @@ export function useToken(tokenAddress: string): Token {
useEffect(() => { useEffect(() => {
if ( if (
token &&
isAddress(tokenAddress) && isAddress(tokenAddress) &&
(token === undefined || token.name === undefined || token.symbol === undefined || token.decimals === undefined) && (token === null || token.name === undefined || token.symbol === undefined || token.decimals === undefined) &&
(chainId || chainId === 0) && (chainId || chainId === 0) &&
library library
) { ) {

6
src/pages/App.js
View File

@ -14,6 +14,7 @@ const Send = lazy(() => import('./Send'))
const Pool = lazy(() => import('./Supply')) const Pool = lazy(() => import('./Supply'))
const Add = lazy(() => import('./Supply/AddLiquidity')) const Add = lazy(() => import('./Supply/AddLiquidity'))
const Remove = lazy(() => import('./Supply/RemoveLiquidity')) const Remove = lazy(() => import('./Supply/RemoveLiquidity'))
const Find = lazy(() => import('../components/TokenFind'))
const AppWrapper = styled.div` const AppWrapper = styled.div`
display: flex; display: flex;
@ -44,13 +45,13 @@ const BodyWrapper = styled.div`
` `
const Body = styled.div` const Body = styled.div`
max-width: 28rem; max-width: 355px;
width: 90%; width: 90%;
background: ${({ theme }) => theme.panelBackground}; background: ${({ theme }) => theme.panelBackground};
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: 20px; border-radius: 20px;
padding: 2rem 1rem; padding: 2rem 2rem;
` `
export default function App() { export default function App() {
@ -70,6 +71,7 @@ export default function App() {
{/* this Suspense is for route code-splitting */} {/* this Suspense is for route code-splitting */}
<Suspense fallback={null}> <Suspense fallback={null}>
<Switch> <Switch>
<Route exact strict path="/find" component={() => <Find params={params} />} />
<Route exact strict path="/swap" component={() => <Swap params={params} />} /> <Route exact strict path="/swap" component={() => <Swap params={params} />} />
<Route <Route
exact exact

29
src/pages/Supply/AddLiquidity.tsx
View File

@ -11,8 +11,8 @@ import ConfirmationModal from '../../components/ConfirmationModal'
import CurrencyInputPanel from '../../components/CurrencyInputPanel' import CurrencyInputPanel from '../../components/CurrencyInputPanel'
import { Text } from 'rebass' import { Text } from 'rebass'
import { Plus } from 'react-feather' import { Plus } from 'react-feather'
import { ChevronDown } from 'react-feather'
import { RowBetween } from '../../components/Row' import { RowBetween } from '../../components/Row'
import { ChevronDown } from 'react-feather'
import { AutoColumn, ColumnCenter } from '../../components/Column' import { AutoColumn, ColumnCenter } from '../../components/Column'
import { ButtonPrimary, ButtonEmpty } from '../../components/Button' import { ButtonPrimary, ButtonEmpty } from '../../components/Button'
@ -39,10 +39,6 @@ const Wrapper = styled.div`
position: relative; position: relative;
` `
const ErrorText = styled(Text)`
color: ${({ theme, error }) => (error ? theme.salmonRed : theme.chaliceGray)};
`
const FixedBottom = styled.div` const FixedBottom = styled.div`
position: absolute; position: absolute;
bottom: -240px; bottom: -240px;
@ -293,7 +289,7 @@ export default function AddLiquidity({ token0, token1 }) {
const field = Field[index] const field = Field[index]
const maxAmount = index === Field.INPUT ? maxAmountInput : maxAmountOutput const maxAmount = index === Field.INPUT ? maxAmountInput : maxAmountOutput
return !!maxAmount && !!parsedAmounts[Field[field]] return !!maxAmount && !!parsedAmounts[Field[field]]
? JSBI.lessThanOrEqual(maxAmount.raw, parsedAmounts[Field[field]].raw) ? JSBI.equal(maxAmount.raw, parsedAmounts[Field[field]].raw)
: undefined : undefined
}) })
@ -313,7 +309,6 @@ export default function AddLiquidity({ token0, token1 }) {
const [generalError, setGeneralError] = useState() const [generalError, setGeneralError] = useState()
const [inputError, setInputError] = useState() const [inputError, setInputError] = useState()
const [outputError, setOutputError] = useState() const [outputError, setOutputError] = useState()
const [isError, setIsError] = useState(false)
const [isValid, setIsValid] = useState(false) const [isValid, setIsValid] = useState(false)
// update errors live // update errors live
@ -322,23 +317,22 @@ export default function AddLiquidity({ token0, token1 }) {
setGeneralError(null) setGeneralError(null)
setInputError(null) setInputError(null)
setOutputError(null) setOutputError(null)
setIsError(false)
setIsValid(true) setIsValid(true)
if (!parsedAmounts[Field.INPUT]) { if (!parsedAmounts[Field.INPUT]) {
setGeneralError('Enter an amount to continue') setGeneralError('Enter an amount')
setIsValid(false) setIsValid(false)
} }
if (!parsedAmounts[Field.OUTPUT]) { if (!parsedAmounts[Field.OUTPUT]) {
setGeneralError('Enter an amount to continue') setGeneralError('Enter an amount')
setIsValid(false) setIsValid(false)
} }
if (showInputUnlock) { if (showInputUnlock) {
setInputError('Need to approve amount on input.') setInputError('Approve Amount')
setIsValid(false) setIsValid(false)
} }
if (showOutputUnlock) { if (showOutputUnlock) {
setOutputError('Need to approve amount on output.') setOutputError('Approve Amount')
setIsValid(false) setIsValid(false)
} }
if ( if (
@ -347,7 +341,6 @@ export default function AddLiquidity({ token0, token1 }) {
JSBI.greaterThan(parsedAmounts?.[Field.INPUT]?.raw, userBalances?.[Field.INPUT]?.raw) JSBI.greaterThan(parsedAmounts?.[Field.INPUT]?.raw, userBalances?.[Field.INPUT]?.raw)
) { ) {
setInputError('Insufficient balance.') setInputError('Insufficient balance.')
setIsError(true)
setIsValid(false) setIsValid(false)
} }
if ( if (
@ -356,7 +349,6 @@ export default function AddLiquidity({ token0, token1 }) {
JSBI.greaterThan(parsedAmounts?.[Field.OUTPUT]?.raw, userBalances?.[Field.OUTPUT]?.raw) JSBI.greaterThan(parsedAmounts?.[Field.OUTPUT]?.raw, userBalances?.[Field.OUTPUT]?.raw)
) { ) {
setOutputError('Insufficient balance.') setOutputError('Insufficient balance.')
setIsError(true)
setIsValid(false) setIsValid(false)
} }
}, [parsedAmounts, showInputUnlock, showOutputUnlock, userBalances]) }, [parsedAmounts, showInputUnlock, showOutputUnlock, userBalances])
@ -514,7 +506,7 @@ export default function AddLiquidity({ token0, token1 }) {
value={formattedAmounts[Field.OUTPUT]} value={formattedAmounts[Field.OUTPUT]}
onUserInput={onUserInput} onUserInput={onUserInput}
onMax={() => { onMax={() => {
onMax(maxAmountOutput.toExact(), Field.OUTPUT) onMax(maxAmountOutput?.toExact(), Field.OUTPUT)
}} }}
atMax={atMaxAmountOutput} atMax={atMaxAmountOutput}
token={tokens[Field.OUTPUT]} token={tokens[Field.OUTPUT]}
@ -532,11 +524,6 @@ export default function AddLiquidity({ token0, token1 }) {
{tokens[dependentField].symbol} {tokens[dependentField].symbol}
</div> </div>
</RowBetween> </RowBetween>
<ColumnCenter style={{ height: '20px' }}>
<ErrorText fontSize={12} error={isError}>
{generalError ? generalError : inputError ? inputError : outputError ? outputError : ''}
</ErrorText>
</ColumnCenter>
<ButtonPrimary <ButtonPrimary
onClick={() => { onClick={() => {
setShowConfirm(true) setShowConfirm(true)
@ -544,7 +531,7 @@ export default function AddLiquidity({ token0, token1 }) {
disabled={!isValid} disabled={!isValid}
> >
<Text fontSize={20} fontWeight={500}> <Text fontSize={20} fontWeight={500}>
Supply {generalError ? generalError : inputError ? inputError : outputError ? outputError : 'Supply'}
</Text> </Text>
</ButtonPrimary> </ButtonPrimary>
<FixedBottom> <FixedBottom>

171
src/pages/Supply/RemoveLiquidity.tsx
View File

@ -138,14 +138,6 @@ function reducer(
} }
} }
// todo
// add exchange address to initial state
// remove stateful slider in advanced mode, just show a sig fig value based on pool tokens burned
// try to fully derive percentageAmount from state
// at the very least, move that state into the reducer
export default function RemoveLiquidity({ token0, token1 }) { export default function RemoveLiquidity({ token0, token1 }) {
const { account, chainId, library } = useWeb3React() const { account, chainId, library } = useWeb3React()
const routerAddress = ROUTER_ADDRESSES[chainId] const routerAddress = ROUTER_ADDRESSES[chainId]
@ -215,32 +207,37 @@ export default function RemoveLiquidity({ token0, token1 }) {
const typedValueParsed = parseUnits(typedValue, tokens[Field.TOKEN0].decimals).toString() const typedValueParsed = parseUnits(typedValue, tokens[Field.TOKEN0].decimals).toString()
if (typedValueParsed !== '0') { if (typedValueParsed !== '0') {
const tokenAmount = new TokenAmount(tokens[Field.TOKEN0], typedValueParsed) const tokenAmount = new TokenAmount(tokens[Field.TOKEN0], typedValueParsed)
poolTokenAmount = JSBI.divide( if (
JSBI.multiply(tokenAmount.raw, userLiquidity.raw), TokensDeposited[Field.TOKEN0] &&
TokensDeposited[Field.TOKEN0].raw JSBI.lessThanOrEqual(tokenAmount.raw, TokensDeposited[Field.TOKEN0].raw)
) ) {
poolTokenAmount = JSBI.divide(
JSBI.multiply(tokenAmount.raw, userLiquidity.raw),
TokensDeposited[Field.TOKEN0].raw
)
}
} }
} }
if (independentField === Field.TOKEN1) { if (independentField === Field.TOKEN1) {
const typedValueParsed = parseUnits(typedValue, tokens[Field.TOKEN1].decimals).toString() const typedValueParsed = parseUnits(typedValue, tokens[Field.TOKEN1].decimals).toString()
if (typedValueParsed !== '0') { if (typedValueParsed !== '0') {
const tokenAmount = new TokenAmount(tokens[Field.TOKEN1], typedValueParsed) const tokenAmount = new TokenAmount(tokens[Field.TOKEN1], typedValueParsed)
poolTokenAmount = JSBI.divide( if (
JSBI.multiply(tokenAmount.raw, userLiquidity.raw), TokensDeposited[Field.TOKEN1] &&
TokensDeposited[Field.TOKEN1].raw JSBI.lessThanOrEqual(tokenAmount.raw, TokensDeposited[Field.TOKEN1].raw)
) ) {
poolTokenAmount = JSBI.divide(
JSBI.multiply(tokenAmount.raw, userLiquidity.raw),
TokensDeposited[Field.TOKEN1].raw
)
}
} }
} }
if (independentField === Field.LIQUIDITY) { if (independentField === Field.LIQUIDITY) {
const typedValueParsed = parseUnits(typedValue, exchange?.liquidityToken.decimals).toString() const typedValueParsed = parseUnits(typedValue, exchange?.liquidityToken.decimals).toString()
const formattedAmount = new TokenAmount(exchange?.liquidityToken, typedValueParsed) const formattedAmount = new TokenAmount(exchange?.liquidityToken, typedValueParsed)
if (typedValueParsed !== '0') { if (typedValueParsed !== '0') {
if (JSBI.greaterThan(formattedAmount.raw, userLiquidity?.raw)) { if (JSBI.lessThanOrEqual(formattedAmount.raw, userLiquidity?.raw)) {
/**
* error state for incorrect liquidity valye
*
*/
} else {
poolTokenAmount = typedValueParsed poolTokenAmount = typedValueParsed
} }
} }
@ -253,12 +250,14 @@ export default function RemoveLiquidity({ token0, token1 }) {
// set parsed amounts based on live amount of liquidity // set parsed amounts based on live amount of liquidity
parsedAmounts[Field.LIQUIDITY] = parsedAmounts[Field.LIQUIDITY] =
exchange && poolTokenAmount && new TokenAmount(exchange.liquidityToken, poolTokenAmount) exchange && poolTokenAmount && userLiquidity && new TokenAmount(exchange.liquidityToken, poolTokenAmount)
parsedAmounts[Field.TOKEN0] = parsedAmounts[Field.TOKEN0] =
totalPoolTokens && totalPoolTokens &&
exchange && exchange &&
parsedAmounts[Field.LIQUIDITY] && parsedAmounts[Field.LIQUIDITY] &&
exchange.getLiquidityValue(tokens[Field.TOKEN0], totalPoolTokens, parsedAmounts[Field.LIQUIDITY], false) exchange.getLiquidityValue(tokens[Field.TOKEN0], totalPoolTokens, parsedAmounts[Field.LIQUIDITY], false)
parsedAmounts[Field.TOKEN1] = parsedAmounts[Field.TOKEN1] =
totalPoolTokens && totalPoolTokens &&
exchange && exchange &&
@ -307,57 +306,41 @@ export default function RemoveLiquidity({ token0, token1 }) {
const [inputError, setInputError] = useState() const [inputError, setInputError] = useState()
const [outputError, setOutputError] = useState() const [outputError, setOutputError] = useState()
const [poolTokenError, setPoolTokenError] = useState() const [poolTokenError, setPoolTokenError] = useState()
const [isError, setIsError] = useState(false)
const [isValid, setIsValid] = useState(false) const [isValid, setIsValid] = useState(false)
// update errors live // update errors live
useEffect(() => { useEffect(() => {
// reset errors // reset errors
setGeneralError(false) setGeneralError(null)
setInputError(null) setInputError(null)
setOutputError(null) setOutputError(null)
setPoolTokenError(null) setPoolTokenError(null)
setIsError(false)
setIsValid(true) setIsValid(true)
if (!parsedAmounts[Field.TOKEN0]) { if (formattedAmounts[Field.TOKEN0] === '') {
setGeneralError('Enter an amount to continue') setGeneralError('Enter an amount')
setIsValid(false)
} else if (!parsedAmounts[Field.TOKEN0]) {
setInputError('Invalid amount')
setIsValid(false) setIsValid(false)
} }
if (!parsedAmounts[Field.TOKEN1]) {
setGeneralError('Enter an amount to continue') if (formattedAmounts[Field.TOKEN1] === '') {
setGeneralError('Enter an amount')
setIsValid(false)
} else if (!parsedAmounts[Field.TOKEN1]) {
setOutputError('Invalid amount')
setIsValid(false) setIsValid(false)
} }
if (
totalPoolTokens && if (formattedAmounts[Field.LIQUIDITY] === '') {
userLiquidity && setGeneralError('Enter an amount')
parsedAmounts[Field.LIQUIDITY] && setIsValid(false)
(!JSBI.lessThanOrEqual(parsedAmounts[Field.LIQUIDITY].raw, totalPoolTokens.raw) || } else if (!parsedAmounts[Field.LIQUIDITY]) {
!JSBI.lessThanOrEqual(parsedAmounts[Field.LIQUIDITY].raw, userLiquidity.raw)) setPoolTokenError('Invalid Amount')
) {
setPoolTokenError('Input a liquidity amount less than or equal to your balance.')
setIsError(true)
setIsValid(false) setIsValid(false)
} }
// if ( }, [formattedAmounts, parsedAmounts, totalPoolTokens, userLiquidity])
// parsedAmounts?.[Field.TOKEN0] &&
// userBalances?.[Field.TOKEN0] &&
// JSBI.greaterThan(parsedAmounts?.[Field.TOKEN0]?.raw, userBalances?.[Field.TOKEN0]?.raw)
// ) {
// setInputError('Insufficient balance.')
// setIsError(true)
// setIsValid(false)
// }
// if (
// parsedAmounts?.[Field.TOKEN1] &&
// userBalances?.[Field.TOKEN1] &&
// parseFloat(parsedAmounts?.[Field.TOKEN1]?.toExact()) > parseFloat(userBalances?.[Field.TOKEN1]?.toExact())
// ) {
// setOutputError('Insufficient balance.')
// setIsError(true)
// setIsValid(false)
// }
}, [parsedAmounts, totalPoolTokens, userLiquidity])
// state for txn // state for txn
const addTransaction = useTransactionAdder() const addTransaction = useTransactionAdder()
@ -498,24 +481,26 @@ export default function RemoveLiquidity({ token0, token1 }) {
return ( return (
<Wrapper> <Wrapper>
<ConfirmationModal {!!parsedAmounts[Field.TOKEN0] && !!parsedAmounts[Field.TOKEN1] && !!parsedAmounts[Field.LIQUIDITY] && (
isOpen={showConfirm} <ConfirmationModal
onDismiss={() => { isOpen={showConfirm}
resetModalState() onDismiss={() => {
setShowConfirm(false) resetModalState()
}} setShowConfirm(false)
amount0={parsedAmounts[Field.TOKEN0]} }}
amount1={parsedAmounts[Field.TOKEN1]} amount0={parsedAmounts[Field.TOKEN0]}
price={route?.midPrice} amount1={parsedAmounts[Field.TOKEN1]}
liquidityAmount={parsedAmounts[Field.LIQUIDITY]} price={route?.midPrice}
transactionType={TRANSACTION_TYPE.REMOVE} liquidityAmount={parsedAmounts[Field.LIQUIDITY]}
contractCall={onRemove} transactionType={TRANSACTION_TYPE.REMOVE}
extraCall={onSign} contractCall={onRemove}
signed={signed} extraCall={onSign}
attemptedRemoval={attemptedRemoval} signed={signed}
pendingConfirmation={pendingConfirmation} attemptedRemoval={attemptedRemoval}
hash={txHash ? txHash : ''} pendingConfirmation={pendingConfirmation}
/> hash={txHash ? txHash : ''}
/>
)}
<AutoColumn gap="20px"> <AutoColumn gap="20px">
<LightCard> <LightCard>
<AutoColumn gap="20px"> <AutoColumn gap="20px">
@ -533,7 +518,7 @@ export default function RemoveLiquidity({ token0, token1 }) {
</RowBetween> </RowBetween>
<RowBetween style={{ alignItems: 'flex-end' }}> <RowBetween style={{ alignItems: 'flex-end' }}>
<Text fontSize={72} fontWeight={500}> <Text fontSize={72} fontWeight={500}>
{derivedPerecent ? derivedPerecent : '0'}% {derivedPerecent ? (parseInt(derivedPerecent) < 1 ? '<1' : derivedPerecent) : '0'}%
</Text> </Text>
{!showAdvanced && <MaxButton onClick={e => handleSliderChange(e, 100)}>Max</MaxButton>} {!showAdvanced && <MaxButton onClick={e => handleSliderChange(e, 100)}>Max</MaxButton>}
</RowBetween> </RowBetween>
@ -621,16 +606,18 @@ export default function RemoveLiquidity({ token0, token1 }) {
/> />
</> </>
)} )}
<RowBetween> <div style={{ padding: '10px 20px' }}>
Rate: <RowBetween>
<div> Price:
1 {exchange?.token0.symbol} ={' '} <div>
{independentField === Field.TOKEN0 || independentField === Field.LIQUIDITY 1 {exchange?.token0.symbol} ={' '}
? route?.midPrice.toSignificant(6) {independentField === Field.TOKEN0 || independentField === Field.LIQUIDITY
: route?.midPrice.invert().toSignificant(6)}{' '} ? route?.midPrice.toSignificant(6)
{exchange?.token1.symbol} : route?.midPrice.invert().toSignificant(6)}{' '}
</div> {exchange?.token1.symbol}
</RowBetween> </div>
</RowBetween>
</div>
<ButtonPrimary <ButtonPrimary
onClick={() => { onClick={() => {
setShowConfirm(true) setShowConfirm(true)
@ -638,7 +625,15 @@ export default function RemoveLiquidity({ token0, token1 }) {
disabled={!isValid} disabled={!isValid}
> >
<Text fontSize={20} fontWeight={500}> <Text fontSize={20} fontWeight={500}>
Remove {inputError
? inputError
: outputError
? outputError
: poolTokenError
? poolTokenError
: generalError
? generalError
: 'Remove'}
</Text> </Text>
</ButtonPrimary> </ButtonPrimary>
<FixedBottom> <FixedBottom>

129
src/pages/Supply/index.js
View File

@ -1,21 +1,24 @@
import React, { useState } from 'react' import React, { useState } from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import { JSBI } from '@uniswap/sdk' import { JSBI } from '@uniswap/sdk'
import { withRouter } from 'react-router-dom'
import { useWeb3React } from '@web3-react/core' import { useWeb3React } from '@web3-react/core'
import { useAllTokens } from '../../contexts/Tokens' import { useAllTokens } from '../../contexts/Tokens'
import { useAllExchanges } from '../../contexts/Exchanges' import { useAllExchanges } from '../../contexts/Exchanges'
import { useAllBalances, useAccountLPBalances } from '../../contexts/Balances' import { useAllBalances, useAccountLPBalances } from '../../contexts/Balances'
import Card from '../../components/Card' import Question from '../../components/Question'
import TokenFind from '../../components/TokenFind'
import SearchModal from '../../components/SearchModal' import SearchModal from '../../components/SearchModal'
import PositionCard from '../../components/PositionCard' import PositionCard from '../../components/PositionCard'
import Row, { RowBetween } from '../../components/Row' import Row, { RowBetween } from '../../components/Row'
import Card, { LightCard } from '../../components/Card'
import { Link } from '../../theme' import { Link } from '../../theme'
import { Text } from 'rebass' import { Text } from 'rebass'
import { AutoColumn } from '../../components/Column' import { AutoColumn } from '../../components/Column'
import { ArrowRight } from 'react-feather' import { ArrowRight } from 'react-feather'
import { ButtonDropwdown } from '../../components/Button' import { ButtonPrimary } from '../../components/Button'
const Positions = styled.div` const Positions = styled.div`
position: relative; position: relative;
@ -23,13 +26,14 @@ const Positions = styled.div`
` `
const FixedBottom = styled.div` const FixedBottom = styled.div`
position: absolute; position: absolute;
bottom: -240px; bottom: -260px;
width: 100%; width: 100%;
` `
export default function Supply() { function Supply({ history }) {
const { account } = useWeb3React() const { account } = useWeb3React()
const [showSearch, setShowSearch] = useState(false) const [showPositionFind, setShowPositionFind] = useState(false)
const [showPoolSearch, setShowPoolSearch] = useState(false)
const allTokens = useAllTokens() const allTokens = useAllTokens()
const allBalances = useAllBalances() const allBalances = useAllBalances()
@ -38,11 +42,17 @@ export default function Supply() {
// initiate listener for LP balances // initiate listener for LP balances
useAccountLPBalances(account) useAccountLPBalances(account)
const filteredExchangeList = Object.keys(allExchanges).map((exchangeAddress, i) => { const filteredExchangeList = Object.keys(allExchanges)
const balance = allBalances?.[account]?.[exchangeAddress] .filter((exchangeAddress, i) => {
return ( return (
balance && allBalances &&
JSBI.greaterThan(balance.raw, JSBI.BigInt(0)) && ( allBalances[account] &&
allBalances[account][exchangeAddress] &&
JSBI.greaterThan(allBalances[account][exchangeAddress].raw, JSBI.BigInt(0))
)
})
.map((exchangeAddress, i) => {
return (
<PositionCard <PositionCard
key={i} key={i}
exchangeAddress={exchangeAddress} exchangeAddress={exchangeAddress}
@ -50,52 +60,67 @@ export default function Supply() {
token1={allTokens[allExchanges[exchangeAddress].token1]} token1={allTokens[allExchanges[exchangeAddress].token1]}
/> />
) )
) })
})
return ( return (
<> <>
<ButtonDropwdown {!showPositionFind && (
onClick={() => { <>
setShowSearch(true) <ButtonPrimary
}} onClick={() => {
> setShowPoolSearch(true)
<Text fontSize={20}>Find a pool</Text> }}
</ButtonDropwdown> >
<Positions> <Text fontSize={20}>Join a pool</Text>
<AutoColumn gap="20px"> </ButtonPrimary>
<RowBetween> <Positions>
<Text fontWeight={500}>Your positions</Text> <AutoColumn gap="20px">
<Link> <RowBetween>
<Text fontWeight={500}>View on Uniswap.info</Text> <Text fontWeight={500}>Your Pooled Liquidity</Text>
</Link> <Question text="filler text" />
</RowBetween> </RowBetween>
{filteredExchangeList} {filteredExchangeList}
</AutoColumn> {filteredExchangeList?.length === 0 && (
<FixedBottom> <LightCard bg="rgba(255, 255, 255, 0.6)" padding={'45px'}>
<Card bg="rgba(255, 255, 255, 0.6)" padding={'24px'}> <Text color="#C3C5CB">Add liquidity to see your positions</Text>
<AutoColumn gap="30px"> </LightCard>
<Text fontSize="20px" fontWeight={500}> )}
Earn fees with pooled market making. <AutoColumn justify="center">
</Text> <Text color="#AEAEAE">
<Text fontSize="12px"> Already have liquidity?{' '}
<Link>Provide liquidity </Link>to earn .03% spread fees for providing market depth. <Link
</Text> onClick={() => {
<Link> history.push('/find')
<Row> }}
Learn More <ArrowRight size="16" /> >
</Row> Find it now.
</Link> </Link>
</Text>
</AutoColumn>
</AutoColumn> </AutoColumn>
</Card> <FixedBottom>
</FixedBottom> <Card bg="rgba(255, 255, 255, 0.6)" padding={'24px'}>
</Positions> <AutoColumn gap="30px">
<SearchModal <Text fontSize="20px" fontWeight={500}>
isOpen={showSearch} Earn fees with pooled market making.
onDismiss={() => { </Text>
setShowSearch(false) <Text fontSize="12px">
}} <Link>Provide liquidity </Link>to earn .03% spread fees for providing market depth.
/> </Text>
<Link>
<Row>
Learn More <ArrowRight size="16" />
</Row>
</Link>
</AutoColumn>
</Card>
</FixedBottom>
</Positions>
</>
)}
{showPositionFind && <TokenFind />}
<SearchModal isOpen={showPoolSearch} onDismiss={() => setShowPoolSearch(false)} />
</> </>
) )
} }
export default withRouter(Supply)

1
src/theme/index.js
View File

@ -71,6 +71,7 @@ const theme = darkMode => ({
tokenRowHover: darkMode ? '#404040' : '#F2F2F2', tokenRowHover: darkMode ? '#404040' : '#F2F2F2',
outlineGrey: darkMode ? '#292C2F' : '#EDEEF2', outlineGrey: darkMode ? '#292C2F' : '#EDEEF2',
darkGrey: darkMode ? '#888D9B' : '#888D9B',
//blacks //blacks
charcoalBlack: darkMode ? '#F2F2F2' : '#404040', charcoalBlack: darkMode ? '#F2F2F2' : '#404040',