Move trade price formatting to its own component

src/components/swap/TradePrice.tsx

+import React from 'react'
+import { Trade } from '@uniswap/sdk'
+import { useContext } from 'react'
+import { Repeat } from 'react-feather'
+import { Text } from 'rebass'
+import { ThemeContext } from 'styled-components'
+import { StyledBalanceMaxMini } from './styleds'
+
+interface TradePriceProps {
+  trade?: Trade
+  showInverted: boolean
+  setShowInverted: (showInverted: boolean) => void
+}
+
+export default function TradePrice({ trade, showInverted, setShowInverted }: TradePriceProps) {
+  const theme = useContext(ThemeContext)
+  const inputToken = trade?.inputAmount?.token
+  const outputToken = trade?.outputAmount?.token
+
+  const price = showInverted
+    ? trade?.executionPrice?.toSignificant(6)
+    : trade?.executionPrice?.invert()?.toSignificant(6)
+
+  const label = showInverted
+    ? `${outputToken?.symbol} per ${inputToken?.symbol}`
+    : `${inputToken?.symbol} per ${outputToken?.symbol}`
+
+  return (
+    <Text
+      fontWeight={500}
+      fontSize={14}
+      color={theme.text2}
+      style={{ justifyContent: 'center', alignItems: 'center', display: 'flex' }}
+    >
+      {price && `${price} ${label}`}
+      <StyledBalanceMaxMini onClick={() => setShowInverted(!showInverted)}>
+        <Repeat size={14} />
+      </StyledBalanceMaxMini>
+    </Text>
+  )
+}

src/pages/Send/index.tsx

 import { JSBI, TokenAmount, WETH } from '@uniswap/sdk'
 import React, { useContext, useEffect, useState } from 'react'
-import { ArrowDown, Repeat } from 'react-feather'
+import { ArrowDown } from 'react-feather'
 import ReactGA from 'react-ga'
 import { RouteComponentProps } from 'react-router-dom'
 import { Text } from 'rebass'
@@ -16,15 +16,8 @@ import { AutoRow, RowBetween, RowFixed } from '../../components/Row'
 import AdvancedSwapDetailsDropdown from '../../components/swap/AdvancedSwapDetailsDropdown'
 import FormattedPriceImpact from '../../components/swap/FormattedPriceImpact'
 import SwapModalFooter from '../../components/swap/SwapModalFooter'
-import {
-  ArrowWrapper,
-  BottomGrouping,
-  Dots,
-  InputGroup,
-  StyledBalanceMaxMini,
-  StyledNumerical,
-  Wrapper
-} from '../../components/swap/styleds'
+import { ArrowWrapper, BottomGrouping, Dots, InputGroup, StyledNumerical, Wrapper } from '../../components/swap/styleds'
+import TradePrice from '../../components/swap/TradePrice'
 import { TransferModalHeader } from '../../components/swap/TransferModalHeader'
 import V1TradeLink from '../../components/swap/V1TradeLink'
 import TokenLogo from '../../components/TokenLogo'
@@ -430,27 +423,7 @@ export default function Send({ location: { search } }: RouteComponentProps) {
                 <Text fontWeight={500} fontSize={14} color={theme.text2}>
                   Price
                 </Text>
-                <Text
-                  fontWeight={500}
-                  fontSize={14}
-                  color={theme.text2}
-                  style={{ justifyContent: 'center', alignItems: 'center', display: 'flex' }}
-                >
-                  {bestTrade && showInverted
-                    ? (bestTrade?.executionPrice?.invert()?.toSignificant(6) ?? '') +
-                      ' ' +
-                      tokens[Field.INPUT]?.symbol +
-                      ' per ' +
-                      tokens[Field.OUTPUT]?.symbol
-                    : (bestTrade?.executionPrice?.toSignificant(6) ?? '') +
-                      ' ' +
-                      tokens[Field.OUTPUT]?.symbol +
-                      ' per ' +
-                      tokens[Field.INPUT]?.symbol}
-                  <StyledBalanceMaxMini onClick={() => setShowInverted(!showInverted)}>
-                    <Repeat size={14} />
-                  </StyledBalanceMaxMini>
-                </Text>
+                <TradePrice showInverted={showInverted} setShowInverted={setShowInverted} trade={bestTrade} />
               </RowBetween>
 
               {bestTrade && severity > 1 && (

src/pages/Swap/index.tsx

 import { JSBI, TokenAmount, WETH } from '@uniswap/sdk'
 import React, { useContext, useState } from 'react'
-import { ArrowDown, Repeat } from 'react-feather'
+import { ArrowDown } from 'react-feather'
 import ReactGA from 'react-ga'
 import { RouteComponentProps } from 'react-router-dom'
 import { Text } from 'rebass'
@@ -14,8 +14,9 @@ import QuestionHelper from '../../components/Question'
 import { RowBetween, RowFixed } from '../../components/Row'
 import AdvancedSwapDetailsDropdown from '../../components/swap/AdvancedSwapDetailsDropdown'
 import FormattedPriceImpact from '../../components/swap/FormattedPriceImpact'
-import { ArrowWrapper, BottomGrouping, Dots, StyledBalanceMaxMini, Wrapper } from '../../components/swap/styleds'
+import { ArrowWrapper, BottomGrouping, Dots, Wrapper } from '../../components/swap/styleds'
 import SwapModalFooter from '../../components/swap/SwapModalFooter'
+import TradePrice from '../../components/swap/TradePrice'
 import V1TradeLink from '../../components/swap/V1TradeLink'
 import { DEFAULT_DEADLINE_FROM_NOW, INITIAL_ALLOWED_SLIPPAGE, MIN_ETH } from '../../constants'
 import { useWeb3React } from '../../hooks'
@@ -227,27 +228,7 @@ export default function Swap({ location: { search } }: RouteComponentProps) {
                 <Text fontWeight={500} fontSize={14} color={theme.text2}>
                   Price
                 </Text>
-                <Text
-                  fontWeight={500}
-                  fontSize={14}
-                  color={theme.text2}
-                  style={{ justifyContent: 'center', alignItems: 'center', display: 'flex' }}
-                >
-                  {bestTrade && showInverted
-                    ? (bestTrade?.executionPrice?.invert()?.toSignificant(6) ?? '') +
-                      ' ' +
-                      tokens[Field.INPUT]?.symbol +
-                      ' per ' +
-                      tokens[Field.OUTPUT]?.symbol
-                    : (bestTrade?.executionPrice?.toSignificant(6) ?? '') +
-                      ' ' +
-                      tokens[Field.OUTPUT]?.symbol +
-                      ' per ' +
-                      tokens[Field.INPUT]?.symbol}
-                  <StyledBalanceMaxMini onClick={() => setShowInverted(!showInverted)}>
-                    <Repeat size={14} />
-                  </StyledBalanceMaxMini>
-                </Text>
+                <TradePrice trade={bestTrade} showInverted={showInverted} setShowInverted={setShowInverted} />
               </RowBetween>
 
               {bestTrade && priceImpactSeverity > 1 && (

src/state/user/actions.ts

@@ -22,4 +22,3 @@ export const addSerializedPair = createAction<{ serializedPair: SerializedPair }
 export const removeSerializedPair = createAction<{ chainId: number; tokenAAddress: string; tokenBAddress: string }>(
   'removeSerializedPair'
 )
-export const dismissBetaMessage = createAction<void>('dismissBetaMessage')

src/state/user/hooks.tsx

@@ -8,7 +8,6 @@ import { AppDispatch, AppState } from '../index'
 import {
   addSerializedPair,
   addSerializedToken,
-  dismissBetaMessage,
   removeSerializedToken,
   SerializedPair,
   SerializedToken,
@@ -35,18 +34,6 @@ function deserializeToken(serializedToken: SerializedToken): Token {
   )
 }
 
-// this currently isn't used anywhere, but is kept as an example of how to store/update a simple boolean
-export function useBetaMessageManager() {
-  const betaMessageDismissed = useSelector<AppState, boolean>(state => state.user.betaMessageDismissed)
-  const dispatch = useDispatch<AppDispatch>()
-
-  const wrappedDismissBetaMessage = useCallback(() => {
-    dispatch(dismissBetaMessage())
-  }, [dispatch])
-
-  return [!betaMessageDismissed, wrappedDismissBetaMessage]
-}
-
 export function useIsDarkMode(): boolean {
   const { userDarkMode, matchesDarkMode } = useSelector<AppState, { userDarkMode: boolean; matchesDarkMode: boolean }>(
     ({ user: { matchesDarkMode, userDarkMode } }) => ({

src/state/user/reducer.ts

@@ -19,8 +19,6 @@ interface UserState {
   userDarkMode: boolean | null // the user's choice for dark mode or light mode
   matchesDarkMode: boolean // whether the dark mode media query matches
 
-  betaMessageDismissed: boolean
-
   tokens: {
     [chainId: number]: {
       [address: string]: SerializedToken
@@ -47,8 +45,6 @@ const initialState: UserState = {
   userDarkMode: null,
   matchesDarkMode: false,
 
-  betaMessageDismissed: false,
-
   tokens: {},
   pairs: {},