fix: add usdc price in TradePrice (#2441)

* 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>

src/components/swap/TradePrice.tsx

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