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

fix: add usdc price in TradePrice (#2441)

Browse Source 
* add usdc price in trade price

* adjust color

* adjust usdc price

* Fix code style issues with ESLint

* round to 4

* use same format as fiat value

Co-authored-by: Lint Action <lint-action@samuelmeuli.com>
This commit is contained in:
Justin Domingue 2021-10-08 16:49:54 -04:00 committed by GitHub
parent ef2cb75f6f
commit 4b8d942da6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/swap/TradePrice.tsx
View File

@ -1,7 +1,10 @@
import { Trans } from '@lingui/macro'
import { Currency, Price } from '@uniswap/sdk-core' import { Currency, Price } from '@uniswap/sdk-core'
import useUSDCPrice from 'hooks/useUSDCPrice'
import { useCallback, useContext } from 'react' import { useCallback, useContext } from 'react'
import { Text } from 'rebass' import { Text } from 'rebass'
import styled, { ThemeContext } from 'styled-components/macro' import styled, { ThemeContext } from 'styled-components/macro'
import { TYPE } from 'theme'
interface TradePriceProps { interface TradePriceProps {
price: Price<Currency, Currency> price: Price<Currency, Currency>
@ -10,21 +13,23 @@ interface TradePriceProps {
} }
const StyledPriceContainer = styled.button` const StyledPriceContainer = styled.button`
display: flex;
justify-content: center;
align-items: center; align-items: center;
padding: 0;
font-size: 0.875rem;
font-weight: 400;
background-color: transparent; background-color: transparent;
border: none; border: none;
height: 24px;
cursor: pointer; cursor: pointer;
display: grid;
height: 24px;
justify-content: center;
padding: 0;
grid-template-columns: 1fr auto;
grid-gap: 0.25rem;
` `
export default function TradePrice({ price, showInverted, setShowInverted }: TradePriceProps) { export default function TradePrice({ price, showInverted, setShowInverted }: TradePriceProps) {
const theme = useContext(ThemeContext) const theme = useContext(ThemeContext)
const usdcPrice = useUSDCPrice(showInverted ? price.baseCurrency : price.quoteCurrency)
let formattedPrice: string let formattedPrice: string
try { try {
formattedPrice = showInverted ? price.toSignificant(4) : price.invert()?.toSignificant(4) formattedPrice = showInverted ? price.toSignificant(4) : price.invert()?.toSignificant(4)
@ -40,11 +45,12 @@ export default function TradePrice({ price, showInverted, setShowInverted }: Tra
return ( return (
<StyledPriceContainer onClick={flipPrice} title={text}> <StyledPriceContainer onClick={flipPrice} title={text}>
<div style={{ alignItems: 'center', display: 'flex', width: 'fit-content' }}>
<Text fontWeight={500} fontSize={14} color={theme.text1}> <Text fontWeight={500} fontSize={14} color={theme.text1}>
{text} {text}
</Text> </Text>{' '}
</div> <TYPE.darkGray>
<Trans>(${usdcPrice?.toSignificant(6, { groupSeparator: ',' })})</Trans>
</TYPE.darkGray>
</StyledPriceContainer> </StyledPriceContainer>
) )
} }