Skip to content

I
interface
Commit 57b53013 authored by Ian Lapham's avatar Ian Lapham Committed by GitHub
Browse files
Options

improvement(add/remove liquidity): update approve flow on add + remove (#879) 

* update approve flow on add + remove

* add confirm to remove page
parent bafd3f3c
Show whitespace changes
Inline Side-by-side
Showing with 82 additions and 67 deletions
src/pages/AddLiquidity/index.tsx
View file @ 57b53013
...@@ -389,34 +389,54 @@ export default function AddLiquidity({ match: { params } }: RouteComponentProps< ...@@ -389,34 +389,54 @@ export default function AddLiquidity({ match: { params } }: RouteComponentProps<
{!account ? ( {!account ? (
<ButtonLight onClick={toggleWalletModal}>Connect Wallet</ButtonLight> <ButtonLight onClick={toggleWalletModal}>Connect Wallet</ButtonLight>
) : approvalA === ApprovalState.NOT_APPROVED || approvalA === ApprovalState.PENDING ? ( ) : (
<ButtonLight onClick={approveACallback} disabled={approvalA === ApprovalState.PENDING}> <AutoColumn gap={'md'}>
{(approvalA === ApprovalState.NOT_APPROVED ||
approvalA === ApprovalState.PENDING ||
approvalB === ApprovalState.NOT_APPROVED ||
approvalB === ApprovalState.PENDING) &&
isValid && (
<RowBetween>
{approvalA !== ApprovalState.APPROVED && (
<ButtonPrimary
onClick={approveACallback}
disabled={approvalA === ApprovalState.PENDING || !isValid}
width={approvalB !== ApprovalState.APPROVED ? '48%' : '100%'}
>
{approvalA === ApprovalState.PENDING ? ( {approvalA === ApprovalState.PENDING ? (
<Dots>Approving {tokens[Field.TOKEN_A]?.symbol}</Dots> <Dots>Approving {tokens[Field.TOKEN_A]?.symbol}</Dots>
) : ( ) : (
'Approve ' + tokens[Field.TOKEN_A]?.symbol 'Approve ' + tokens[Field.TOKEN_A]?.symbol
)} )}
</ButtonLight> </ButtonPrimary>
) : approvalB === ApprovalState.NOT_APPROVED || approvalB === ApprovalState.PENDING ? ( )}
<ButtonLight onClick={approveBCallback} disabled={approvalB === ApprovalState.PENDING}> {approvalB !== ApprovalState.APPROVED && (
<ButtonPrimary
onClick={approveBCallback}
disabled={approvalB === ApprovalState.PENDING || !isValid}
width={approvalA !== ApprovalState.APPROVED ? '48%' : '100%'}
>
{approvalB === ApprovalState.PENDING ? ( {approvalB === ApprovalState.PENDING ? (
<Dots>Approving {tokens[Field.TOKEN_B]?.symbol}</Dots> <Dots>Approving {tokens[Field.TOKEN_B]?.symbol}</Dots>
) : ( ) : (
'Approve ' + tokens[Field.TOKEN_B]?.symbol 'Approve ' + tokens[Field.TOKEN_B]?.symbol
)} )}
</ButtonLight> </ButtonPrimary>
) : ( )}
</RowBetween>
)}
<ButtonError <ButtonError
onClick={() => { onClick={() => {
setShowConfirm(true) setShowConfirm(true)
}} }}
disabled={!isValid} disabled={!isValid || approvalA !== ApprovalState.APPROVED || approvalB !== ApprovalState.APPROVED}
error={!isValid && !!parsedAmounts[Field.TOKEN_A] && !!parsedAmounts[Field.TOKEN_B]} error={!isValid && !!parsedAmounts[Field.TOKEN_A] && !!parsedAmounts[Field.TOKEN_B]}
> >
<Text fontSize={20} fontWeight={500}> <Text fontSize={20} fontWeight={500}>
{error ?? 'Supply'} {error ?? 'Supply'}
</Text> </Text>
</ButtonError> </ButtonError>
</AutoColumn>
)} )}
</AutoColumn> </AutoColumn>
</Wrapper> </Wrapper>
......
src/pages/RemoveLiquidity/index.tsx
View file @ 57b53013
...@@ -7,7 +7,7 @@ import ReactGA from 'react-ga' ...@@ -7,7 +7,7 @@ import ReactGA from 'react-ga'
import { RouteComponentProps } from 'react-router' import { RouteComponentProps } from 'react-router'
import { Text } from 'rebass' import { Text } from 'rebass'
import { ThemeContext } from 'styled-components' import { ThemeContext } from 'styled-components'
import { ButtonConfirmed, ButtonPrimary, ButtonLight, ButtonError } from '../../components/Button' import { ButtonPrimary, ButtonLight, ButtonError, ButtonConfirmed } from '../../components/Button'
import { LightCard } from '../../components/Card' import { LightCard } from '../../components/Card'
import { AutoColumn, ColumnCenter } from '../../components/Column' import { AutoColumn, ColumnCenter } from '../../components/Column'
import ConfirmationModal from '../../components/ConfirmationModal' import ConfirmationModal from '../../components/ConfirmationModal'
...@@ -359,34 +359,11 @@ export default function RemoveLiquidity({ match: { params } }: RouteComponentPro ...@@ -359,34 +359,11 @@ export default function RemoveLiquidity({ match: { params } }: RouteComponentPro
</RowBetween> </RowBetween>
</> </>
)} )}
<RowBetween mt="1rem"> <ButtonPrimary disabled={!(approval === ApprovalState.APPROVED || signatureData !== null)} onClick={onRemove}>
<ButtonConfirmed
onClick={onAttemptToApprove}
confirmed={approval === ApprovalState.APPROVED || signatureData !== null}
disabled={approval !== ApprovalState.NOT_APPROVED || signatureData !== null}
mr="0.5rem"
fontWeight={500}
fontSize={20}
>
{approval === ApprovalState.PENDING ? (
<Dots>Approving</Dots>
) : approval === ApprovalState.APPROVED || signatureData !== null ? (
'Approved'
) : (
'Approve'
)}
</ButtonConfirmed>
<ButtonPrimary
disabled={!(approval === ApprovalState.APPROVED || signatureData !== null)}
onClick={onRemove}
ml="0.5rem"
>
<Text fontWeight={500} fontSize={20}> <Text fontWeight={500} fontSize={20}>
Confirm Confirm
</Text> </Text>
</ButtonPrimary> </ButtonPrimary>
</RowBetween>
</> </>
) )
} }
...@@ -571,17 +548,35 @@ export default function RemoveLiquidity({ match: { params } }: RouteComponentPro ...@@ -571,17 +548,35 @@ export default function RemoveLiquidity({ match: { params } }: RouteComponentPro
{!account ? ( {!account ? (
<ButtonLight onClick={toggleWalletModal}>Connect Wallet</ButtonLight> <ButtonLight onClick={toggleWalletModal}>Connect Wallet</ButtonLight>
) : ( ) : (
<RowBetween>
<ButtonConfirmed
onClick={onAttemptToApprove}
confirmed={approval === ApprovalState.APPROVED || signatureData !== null}
disabled={approval !== ApprovalState.NOT_APPROVED || signatureData !== null}
mr="0.5rem"
fontWeight={500}
fontSize={16}
>
{approval === ApprovalState.PENDING ? (
<Dots>Approving</Dots>
) : approval === ApprovalState.APPROVED || signatureData !== null ? (
'Approved'
) : (
'Approve'
)}
</ButtonConfirmed>
<ButtonError <ButtonError
onClick={() => { onClick={() => {
setShowConfirm(true) setShowConfirm(true)
}} }}
disabled={!isValid} disabled={!isValid || signatureData === null}
error={!isValid && !!parsedAmounts[Field.TOKEN_A] && !!parsedAmounts[Field.TOKEN_B]} error={!isValid && !!parsedAmounts[Field.TOKEN_A] && !!parsedAmounts[Field.TOKEN_B]}
> >
<Text fontSize={20} fontWeight={500}> <Text fontSize={16} fontWeight={500}>
{error || 'Remove'} {error || 'Remove'}
</Text> </Text>
</ButtonError> </ButtonError>
</RowBetween>
)} )}
</div> </div>
</AutoColumn> </AutoColumn>
......
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