Skip to content

Commit 2ca3bf8

Browse files
ianlaphamianlapham
committed
add slider to remove
1 parent 236c303 commit 2ca3bf8

20 files changed

Lines changed: 1203 additions & 753 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"private": true,
77
"dependencies": {
88
"@ethersproject/units": "^5.0.0-beta.132",
9+
"@material-ui/core": "^4.9.5",
910
"@reach/dialog": "^0.2.8",
1011
"@reach/tooltip": "^0.2.0",
1112
"@types/jest": "^25.1.3",

‎src/components/Button/index.js‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22
import { Button as RebassButton } from 'rebass/styled-components'
33
import styled from 'styled-components'
4-
import { darken } from 'polished'
4+
import { darken, lighten } from 'polished'
55

66
import { RowBetween } from '../Row'
77
import { ChevronDown } from 'react-feather'
@@ -87,6 +87,24 @@ export const ButtonEmpty = styled(Base)`
8787
}
8888
`
8989

90+
const ButtonConfirmedStyle = styled(Base)`
91+
background-color: ${({ theme }) => lighten(0.5, theme.connectedGreen)};
92+
border: 1px solid ${({ theme }) => theme.connectedGreen};
93+
94+
&:disabled {
95+
opacity: 50%;
96+
cursor: auto;
97+
}
98+
`
99+
100+
export function ButtonConfirmed({ children, confirmed, ...rest }) {
101+
if (confirmed) {
102+
return <ButtonConfirmedStyle {...rest}>{children}</ButtonConfirmedStyle>
103+
} else {
104+
return <ButtonPrimary {...rest}>{children}</ButtonPrimary>
105+
}
106+
}
107+
90108
export function ButtonDropwdown({ disabled, children, ...rest }) {
91109
return (
92110
<ButtonPrimary {...rest}>

‎src/components/Card/index.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,12 @@ const Card = styled(Box)`
88
padding: ${({ padding }) => padding};
99
border: ${({ border }) => border};
1010
`
11-
1211
export default Card
1312

1413
export const LightCard = styled(Card)`
1514
border: 1px solid ${({ theme }) => theme.outlineGrey};
1615
`
16+
17+
export const GreyCard = styled(Card)`
18+
background-color: rgba(255, 255, 255, 0.6);
19+
`

‎src/components/ConfirmationModal/index.js‎

Lines changed: 57 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import React, { useState } from 'react'
1+
import React from 'react'
22
import styled from 'styled-components'
33

44
import { ButtonPrimary } from '../Button'
55
import { AutoColumn, ColumnCenter } from '../Column'
66
import Row, { RowBetween, RowFlat, RowFixed } from '../Row'
77
import { ArrowDown } from 'react-feather'
88

9+
import { ButtonConfirmed } from '../Button'
910
import { Text } from 'rebass'
1011
import { LightCard } from '../Card'
1112
import Modal from '../Modal'
@@ -35,6 +36,10 @@ const ConfirmedIcon = styled(ColumnCenter)`
3536
padding: 60px 0;
3637
`
3738

39+
const ConfirmedText = styled(Text)`
40+
color: ${({ theme, confirmed }) => (confirmed ? theme.connectedGreen : theme.white)};
41+
`
42+
3843
export default function ConfirmationModal({
3944
isOpen,
4045
onDismiss,
@@ -46,23 +51,23 @@ export default function ConfirmationModal({
4651
transactionType,
4752
pendingConfirmation,
4853
hash,
49-
contractCall
54+
signed = false,
55+
contractCall,
56+
attemptedRemoval = false,
57+
extraCall = undefined
5058
}) {
5159
const { address: address0, symbol: symbol0 } = amount0?.token || {}
5260
const { address: address1, symbol: symbol1 } = amount1?.token || {}
5361

5462
const { chainId } = useWeb3React()
5563

56-
const [confirmed, setConfirmed] = useState(false)
57-
5864
function WrappedOnDismissed() {
5965
onDismiss()
60-
setConfirmed(false)
6166
}
6267

6368
return (
64-
<Modal isOpen={isOpen} onDismiss={onDismiss}>
65-
{!confirmed ? (
69+
<Modal isOpen={isOpen} onDismiss={WrappedOnDismissed}>
70+
{!attemptedRemoval ? (
6671
<Wrapper>
6772
<Section gap="40px">
6873
<RowBetween>
@@ -195,22 +200,51 @@ export default function ConfirmationModal({
195200
</Text>
196201
</RowBetween>
197202
)}
198-
<ButtonPrimary
199-
style={{ margin: '20px 0' }}
200-
onClick={() => {
201-
setConfirmed(true)
202-
contractCall()
203-
}}
204-
>
205-
<Text fontWeight={500} fontSize={20}>
206-
Confirm{' '}
207-
{transactionType === TRANSACTION_TYPE.ADD
208-
? 'Supply'
209-
: transactionType === TRANSACTION_TYPE.REMOVE
210-
? 'Remove'
211-
: 'Swap'}
212-
</Text>
213-
</ButtonPrimary>
203+
{transactionType === TRANSACTION_TYPE.REMOVE ? (
204+
<RowBetween gap="20px">
205+
<ButtonConfirmed
206+
style={{ margin: '20px 0' }}
207+
width="48%"
208+
onClick={() => {
209+
extraCall()
210+
}}
211+
confirmed={signed}
212+
disabled={signed}
213+
>
214+
<ConfirmedText fontWeight={500} fontSize={20} confirmed={signed}>
215+
{signed ? 'Signed' : 'Sign'}
216+
</ConfirmedText>
217+
</ButtonConfirmed>
218+
<ButtonPrimary
219+
width="48%"
220+
disabled={!signed}
221+
style={{ margin: '20px 0' }}
222+
onClick={() => {
223+
contractCall()
224+
}}
225+
>
226+
<Text fontWeight={500} fontSize={20}>
227+
Confirm Remove
228+
</Text>
229+
</ButtonPrimary>
230+
</RowBetween>
231+
) : (
232+
<ButtonPrimary
233+
style={{ margin: '20px 0' }}
234+
onClick={() => {
235+
contractCall()
236+
}}
237+
>
238+
<Text fontWeight={500} fontSize={20}>
239+
Confirm{' '}
240+
{transactionType === TRANSACTION_TYPE.ADD
241+
? 'Supply'
242+
: transactionType === TRANSACTION_TYPE.REMOVE
243+
? 'Remove'
244+
: 'Swap'}
245+
</Text>
246+
</ButtonPrimary>
247+
)}
214248
{transactionType === TRANSACTION_TYPE.ADD && (
215249
<Text fontSize={12} color="#565A69" textAlign="center">
216250
{`Output is estimated. You will receive at least ${liquidityAmount?.toFixed(

‎src/components/CurrencyInputPanel/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,7 @@ export default function CurrencyInputPanel({
245245
<ErrorSpan data-tip={'Enter max'} error={!!error} onClick={() => {}}></ErrorSpan>
246246
<ClickableText onClick={onMax}>
247247
<Text>
248-
Balance: {customBalance ? customBalance.toSignificant(4) : userTokenBalance?.toSignificant(4)}
248+
Balance: {customBalance ? customBalance?.toSignificant(4) : userTokenBalance?.toSignificant(4)}
249249
</Text>
250250
</ClickableText>
251251
</RowBetween>
@@ -273,7 +273,7 @@ export default function CurrencyInputPanel({
273273
>
274274
<Aligner>
275275
{isExchange ? (
276-
<DoubleLogo a0={exchange?.token0.address} a1={exchange?.token1.address} margin={true} />
276+
<DoubleLogo a0={exchange?.token0.address} a1={exchange?.token1.address} size={24} margin={true} />
277277
) : token?.address ? (
278278
<TokenLogo address={token?.address} size={'24px'} />
279279
) : null}

‎src/components/DoubleLogo/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default function DoubleTokenLogo({ a0, a1, size = 16, margin = false }) {
77
position: relative;
88
display: flex;
99
flex-direction: row;
10-
margin-right: ${({ sizeraw, margin }) => margin && (sizeraw / 2 + 10).toString() + 'px'};
10+
margin-right: ${({ sizeraw, margin }) => margin && (sizeraw / 3 + 8).toString() + 'px'};
1111
`
1212

1313
const HigherLogo = styled(TokenLogo)`

‎src/components/ExchangePage/index.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
11
import React, { useState, useReducer, useCallback, useEffect } from 'react'
2-
import { ethers } from 'ethers'
32
import styled from 'styled-components'
3+
import { ethers } from 'ethers'
44
import { parseUnits, parseEther } from '@ethersproject/units'
55
import { WETH, TradeType, Route, Trade, TokenAmount, JSBI } from '@uniswap/sdk'
66

7-
import { useWeb3React } from '../../hooks'
87
import { useToken } from '../../contexts/Tokens'
98
import { useExchange } from '../../contexts/Exchanges'
10-
import { useTransactionAdder } from '../../contexts/Transactions'
9+
import { useWeb3React } from '../../hooks'
1110
import { useAddressBalance } from '../../contexts/Balances'
11+
import { useTransactionAdder } from '../../contexts/Transactions'
1212
import { useAddressAllowance } from '../../contexts/Allowances'
1313

14+
import ConfirmationModal from '../ConfirmationModal'
15+
import CurrencyInputPanel from '../CurrencyInputPanel'
1416
import { Text } from 'rebass'
15-
import { ButtonPrimary } from '../Button'
16-
import { AutoColumn, ColumnCenter } from '../../components/Column'
1717
import { RowBetween } from '../../components/Row'
18+
import { ButtonPrimary } from '../Button'
1819
import { ArrowDown, ArrowUp } from 'react-feather'
19-
import CurrencyInputPanel from '../CurrencyInputPanel'
20-
import ConfirmationModal from '../ConfirmationModal'
20+
import { AutoColumn, ColumnCenter } from '../../components/Column'
2121

22+
import { TRANSACTION_TYPE, ROUTER_ADDRESSES } from '../../constants'
2223
import { getRouterContract, calculateGasMargin } from '../../utils'
23-
import { TRANSACTION_TYPE } from '../../constants'
2424

2525
const ArrowWrapper = styled.div`
2626
padding: 4px;
@@ -138,6 +138,7 @@ function reducer(
138138

139139
export default function ExchangePage() {
140140
const { chainId, account, library } = useWeb3React()
141+
const routerAddress = ROUTER_ADDRESSES[chainId]
141142

142143
const [state, dispatch] = useReducer(reducer, WETH[chainId].address, initializeSwapState)
143144
const { independentField, typedValue, ...fieldData } = state
@@ -326,8 +327,6 @@ export default function ExchangePage() {
326327
: calculateSlippageAmount(parsedAmounts[Field.OUTPUT])?.[0]
327328
}
328329

329-
const routerAddress = '0xd9210Ff5A0780E083BB40e30d005d93a2DcFA4EF'
330-
331330
const inputApproval = useAddressAllowance(account, tokens[Field.INPUT], routerAddress)
332331
const outputApproval = useAddressAllowance(account, tokens[Field.OUTPUT], routerAddress)
333332

‎src/components/PositionCard/index.js‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
import React from 'react'
2+
import styled from 'styled-components'
3+
import { withRouter } from 'react-router-dom'
4+
import { Percent, Exchange } from '@uniswap/sdk'
5+
6+
import { useWeb3React } from '@web3-react/core'
7+
import { useAllBalances } from '../../contexts/Balances'
8+
import { useTotalSupply } from '../../contexts/Exchanges'
9+
10+
import Card from '../Card'
11+
import TokenLogo from '../TokenLogo'
12+
import DoubleLogo from '../DoubleLogo'
13+
import { Text } from 'rebass'
14+
import { GreyCard } from '../../components/Card'
15+
import { AutoColumn } from '../Column'
16+
import { ButtonSecondary } from '../Button'
17+
import { RowBetween, RowFixed } from '../Row'
18+
19+
const FixedHeightRow = styled(RowBetween)`
20+
height: 24px;
21+
`
22+
23+
function PositionCard({ exchangeAddress, token0, token1, history, minimal = false, ...rest }) {
24+
const { account } = useWeb3React()
25+
const allBalances = useAllBalances()
26+
27+
const tokenAmount0 = allBalances?.[exchangeAddress]?.[token0.address]
28+
const tokenAmount1 = allBalances?.[exchangeAddress]?.[token1.address]
29+
30+
const exchange = tokenAmount0 && tokenAmount1 && new Exchange(tokenAmount0, tokenAmount1)
31+
32+
const userPoolBalance = allBalances?.[account]?.[exchangeAddress]
33+
const totalPoolTokens = useTotalSupply(exchange)
34+
35+
const poolTokenPercentage =
36+
!!userPoolBalance && !!totalPoolTokens ? new Percent(userPoolBalance.raw, totalPoolTokens.raw) : undefined
37+
38+
const token0Deposited = poolTokenPercentage?.multiply(allBalances[exchangeAddress][token0.address])
39+
const token1Deposited = poolTokenPercentage?.multiply(allBalances[exchangeAddress][token1.address])
40+
41+
function DynamicCard({ children, ...rest }) {
42+
if (!minimal) {
43+
return (
44+
<Card border="1px solid #EDEEF2" {...rest}>
45+
{children}
46+
</Card>
47+
)
48+
} else {
49+
return <GreyCard {...rest}>{children}</GreyCard>
50+
}
51+
}
52+
53+
return (
54+
<DynamicCard {...rest}>
55+
<AutoColumn gap="20px">
56+
<FixedHeightRow>
57+
<Text fontWeight={500} fontSize={16}>
58+
Current Position
59+
</Text>
60+
</FixedHeightRow>
61+
<FixedHeightRow>
62+
<RowFixed>
63+
<DoubleLogo a0={token0?.address || ''} a1={token1?.address || ''} margin={true} size={24} />
64+
<Text fontWeight={500} fontSize={20}>
65+
{token0?.symbol}:{token1?.symbol}
66+
</Text>
67+
</RowFixed>
68+
<Text fontWeight={500} fontSize={20}>
69+
{userPoolBalance ? userPoolBalance.toFixed(6) : '-'}
70+
</Text>
71+
</FixedHeightRow>
72+
<AutoColumn gap="12px">
73+
<FixedHeightRow>
74+
<Text color="#888D9B" fontSize={16} fontWeight={500}>
75+
{token0?.symbol} Deposited:
76+
</Text>
77+
{token0Deposited ? (
78+
<RowFixed>
79+
<TokenLogo address={token0?.address || ''} />
80+
<Text color="#888D9B" fontSize={16} fontWeight={500} marginLeft={'6px'}>
81+
{token0Deposited?.toFixed(8)}
82+
</Text>
83+
</RowFixed>
84+
) : (
85+
'-'
86+
)}
87+
</FixedHeightRow>
88+
<FixedHeightRow>
89+
<Text color="#888D9B" fontSize={16} fontWeight={500}>
90+
{token1?.symbol} Deposited:
91+
</Text>
92+
{token1Deposited ? (
93+
<RowFixed>
94+
<TokenLogo address={token1.address || ''} />
95+
<Text color="#888D9B" fontSize={16} fontWeight={500} marginLeft={'6px'}>
96+
{token1Deposited?.toFixed(8)}
97+
</Text>
98+
</RowFixed>
99+
) : (
100+
'-'
101+
)}
102+
</FixedHeightRow>
103+
{!minimal && (
104+
<FixedHeightRow>
105+
<Text color="#888D9B" fontSize={16} fontWeight={500}>
106+
Your pool share:
107+
</Text>
108+
<Text color="#888D9B" fontSize={16} fontWeight={500}>
109+
{poolTokenPercentage ? poolTokenPercentage.toFixed(2) + '%' : '-'}
110+
</Text>
111+
</FixedHeightRow>
112+
)}
113+
</AutoColumn>
114+
{!minimal && (
115+
<RowBetween>
116+
<ButtonSecondary
117+
width="48%"
118+
onClick={() => {
119+
history.push('/add/' + token0?.address + '-' + token1?.address)
120+
}}
121+
>
122+
Add
123+
</ButtonSecondary>
124+
<ButtonSecondary
125+
width="48%"
126+
onClick={() => {
127+
history.push('/remove/' + token0?.address + '-' + token1?.address)
128+
}}
129+
>
130+
Remove
131+
</ButtonSecondary>
132+
</RowBetween>
133+
)}
134+
</AutoColumn>
135+
</DynamicCard>
136+
)
137+
}
138+
139+
export default withRouter(PositionCard)

0 commit comments

Comments
 (0)