Commit 2d0b0c70 authored by Moody Salem's avatar Moody Salem

drop the show details stuff

parent 3c3be3c6
...@@ -81,7 +81,7 @@ function TradeSummary({ trade }: { trade: V2Trade | V3Trade }) { ...@@ -81,7 +81,7 @@ function TradeSummary({ trade }: { trade: V2Trade | V3Trade }) {
<TYPE.black fontSize={14} fontWeight={400} color={theme.text2}> <TYPE.black fontSize={14} fontWeight={400} color={theme.text2}>
Liquidity Provider Fee Liquidity Provider Fee
</TYPE.black> </TYPE.black>
<QuestionHelper text="A portion of each trade (0.30%) goes to liquidity providers as a protocol incentive." /> <QuestionHelper text="A portion of each trade goes to liquidity providers as a protocol incentive." />
</RowFixed> </RowFixed>
<TYPE.black fontSize={14} color={theme.text1}> <TYPE.black fontSize={14} color={theme.text1}>
{realizedLPFee ? `${realizedLPFee.toSignificant(4)} ${trade.inputAmount.currency.symbol}` : '-'} {realizedLPFee ? `${realizedLPFee.toSignificant(4)} ${trade.inputAmount.currency.symbol}` : '-'}
......
...@@ -102,7 +102,7 @@ export default function SwapModalFooter({ ...@@ -102,7 +102,7 @@ export default function SwapModalFooter({
<TYPE.black fontSize={14} fontWeight={400} color={theme.text2}> <TYPE.black fontSize={14} fontWeight={400} color={theme.text2}>
Liquidity Provider Fee Liquidity Provider Fee
</TYPE.black> </TYPE.black>
<QuestionHelper text="A portion of each trade (0.30%) goes to liquidity providers as a protocol incentive." /> <QuestionHelper text="A portion of each trade goes to liquidity providers as a protocol incentive." />
</RowFixed> </RowFixed>
<TYPE.black fontSize={14}> <TYPE.black fontSize={14}>
{realizedLPFee ? realizedLPFee?.toSignificant(6) + ' ' + trade.inputAmount.currency.symbol : '-'} {realizedLPFee ? realizedLPFee?.toSignificant(6) + ' ' + trade.inputAmount.currency.symbol : '-'}
......
import React from 'react' import React, { useCallback } from 'react'
import { Price } from '@uniswap/sdk-core' import { Price } from '@uniswap/sdk-core'
import { useContext } from 'react' import { useContext } from 'react'
import { Text } from 'rebass' import { Text } from 'rebass'
import { ThemeContext } from 'styled-components' import styled, { ThemeContext } from 'styled-components'
import { StyledBalanceMaxMini } from './styleds' import { StyledBalanceMaxMini } from './styleds'
import Switch from '../../assets/svg/switch.svg' import Switch from '../../assets/svg/switch.svg'
import { ButtonEmpty } from '../Button'
interface TradePriceProps { interface TradePriceProps {
price?: Price price?: Price
showInverted: boolean showInverted: boolean
setShowInverted: (showInverted: boolean) => void setShowInverted: (showInverted: boolean) => void
showDetails: boolean
setShowDetails: (showInverted: boolean) => void
} }
export default function TradePrice({ const StyledPriceContainer = styled.div`
price, justify-content: flex-end;
showInverted, align-items: center;
setShowInverted, display: flex;
showDetails, width: 100%;
setShowDetails, `
}: TradePriceProps) {
export default function TradePrice({ price, showInverted, setShowInverted }: TradePriceProps) {
const theme = useContext(ThemeContext) const theme = useContext(ThemeContext)
const formattedPrice = showInverted ? price?.toSignificant(6) : price?.invert()?.toSignificant(6) const formattedPrice = showInverted ? price?.toSignificant(6) : price?.invert()?.toSignificant(6)
const label = showInverted ? `${price?.quoteCurrency?.symbol}` : `${price?.baseCurrency?.symbol} ` const label = showInverted ? `${price?.quoteCurrency?.symbol}` : `${price?.baseCurrency?.symbol} `
const labelInverted = showInverted ? `${price?.baseCurrency?.symbol} ` : `${price?.quoteCurrency?.symbol}` const labelInverted = showInverted ? `${price?.baseCurrency?.symbol} ` : `${price?.quoteCurrency?.symbol}`
const flipPrice = useCallback(() => setShowInverted(!showInverted), [setShowInverted, showInverted])
return ( return (
<div <StyledPriceContainer>
style={{
justifyContent: 'space-between',
alignItems: 'center',
display: 'flex',
width: '100%',
}}
onClick={() => setShowInverted(!showInverted)}
>
<ButtonEmpty style={{ padding: '0.25rem', width: 'fit-content' }} onClick={() => setShowDetails(!showDetails)}>
<Text fontWeight={500} fontSize={14} color={theme.text2} style={{ marginRight: '.25rem' }}>
Show Details
</Text>
</ButtonEmpty>
<div style={{ alignItems: 'center', display: 'flex', width: 'fit-content' }}> <div style={{ alignItems: 'center', display: 'flex', width: 'fit-content' }}>
<Text fontWeight={500} fontSize={14} color={theme.text2}> <Text fontWeight={500} fontSize={14} color={theme.text2}>
{'1 ' + labelInverted + ' = ' + formattedPrice ?? '-'} {label} {'1 ' + labelInverted + ' = ' + formattedPrice ?? '-'} {label}
</Text> </Text>
<StyledBalanceMaxMini style={{ marginLeft: '0.5rem' }} onClick={() => setShowInverted(!showInverted)}> <StyledBalanceMaxMini style={{ marginLeft: '0.5rem' }} onClick={flipPrice}>
<img width={'16px'} src={Switch} alt="logo" /> <img width={'16px'} src={Switch} alt="logo" />
</StyledBalanceMaxMini> </StyledBalanceMaxMini>
</div> </div>
</div> </StyledPriceContainer>
) )
} }
...@@ -303,8 +303,6 @@ export default function Swap({ history }: RouteComponentProps) { ...@@ -303,8 +303,6 @@ export default function Swap({ history }: RouteComponentProps) {
const swapIsUnsupported = useIsSwapUnsupported(currencies?.INPUT, currencies?.OUTPUT) const swapIsUnsupported = useIsSwapUnsupported(currencies?.INPUT, currencies?.OUTPUT)
const [showDetails, setShowDetails] = useState<boolean>(true)
const priceImpactTooHigh = priceImpactSeverity > 3 && !isExpertMode const priceImpactTooHigh = priceImpactSeverity > 3 && !isExpertMode
return ( return (
...@@ -384,30 +382,13 @@ export default function Swap({ history }: RouteComponentProps) { ...@@ -384,30 +382,13 @@ export default function Swap({ history }: RouteComponentProps) {
<AddressInputPanel id="recipient" value={recipient} onChange={onChangeRecipient} /> <AddressInputPanel id="recipient" value={recipient} onChange={onChangeRecipient} />
</> </>
) : null} ) : null}
{!trade ? null : !showDetails ? ( {trade ? (
<> <TradePrice
<AdvancedSwapDetailsDropdown trade={trade} /> price={trade.worstExecutionPrice(new Percent(allowedSlippage, 10_000))}
<ButtonEmpty style={{ padding: '0.25rem' }} onClick={() => setShowDetails(!showDetails)}> showInverted={showInverted}
<Text fontWeight={500} fontSize={14} color={theme.text2} style={{ marginRight: '.25rem' }}> setShowInverted={setShowInverted}
Hide Details />
</Text> ) : null}
</ButtonEmpty>
</>
) : (
<AutoColumn justify="space-between">
<AutoRow style={{ padding: '0 0.5rem', justifyContent: 'space-between' }}>
<AutoRow>
<TradePrice
price={trade?.worstExecutionPrice(new Percent(allowedSlippage, 10_000))}
showInverted={showInverted}
setShowInverted={setShowInverted}
showDetails={showDetails}
setShowDetails={setShowDetails}
/>
</AutoRow>
</AutoRow>
</AutoColumn>
)}
<BottomGrouping> <BottomGrouping>
{swapIsUnsupported ? ( {swapIsUnsupported ? (
<ButtonPrimary disabled={true}> <ButtonPrimary disabled={true}>
......
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