return fake price data for non mainnet and fill it into the currency input panel

src/components/CurrencyInputPanel/index.tsx

 import { Pair } from '@uniswap/v2-sdk'
-import { Currency } from '@uniswap/sdk-core'
-import React, { useState, useCallback } from 'react'
+import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
+import React, { useState, useCallback, useMemo } from 'react'
 import styled from 'styled-components'
 import { darken } from 'polished'
+import useUSDCPrice from '../../hooks/useUSDCPrice'
+import { tryParseAmount } from '../../state/swap/hooks'
 import { useCurrencyBalance } from '../../state/wallet/hooks'
 import CurrencySearchModal from '../SearchModal/CurrencySearchModal'
 import CurrencyLogo from '../CurrencyLogo'
@@ -152,6 +154,7 @@ interface CurrencyInputPanelProps {
   pair?: Pair | null
   hideInput?: boolean
   otherCurrency?: Currency | null
+  showFiatValue?: boolean
   id: string
   showCommonBases?: boolean
   customBalanceText?: string
@@ -170,6 +173,7 @@ export default function CurrencyInputPanel({
   id,
   showCommonBases,
   customBalanceText,
+  showFiatValue = false,
   hideBalance = false,
   pair = null, // used for double token logo
   hideInput = false,
@@ -187,7 +191,13 @@ export default function CurrencyInputPanel({
     setModalOpen(false)
   }, [setModalOpen])
 
-  const disableCurrencySelect = typeof onCurrencySelect !== 'function'
+  const price = useUSDCPrice(showFiatValue ? currency ?? undefined : undefined)
+
+  const fiatValueOfTypedAmount: CurrencyAmount | null = useMemo(() => {
+    if (!price) return null
+    const amount = tryParseAmount(value, currency ?? undefined)
+    return amount ? price.quote(amount) : null
+  }, [currency, price, value])
 
   return (
     <InputPanel id={id} hideInput={hideInput} {...rest}>
@@ -206,16 +216,17 @@ export default function CurrencyInputPanel({
               <TYPE.body color={theme.text3} fontWeight={500} fontSize={14}>
                 {label}
               </TYPE.body>
+              {fiatValueOfTypedAmount ? <TYPE.label>${fiatValueOfTypedAmount?.toFixed(2)}</TYPE.label> : null}
             </RowBetween>
           </LabelRow>
         )}
-        <InputRow style={hideInput ? { padding: '0', borderRadius: '8px' } : {}} selected={disableCurrencySelect}>
+        <InputRow style={hideInput ? { padding: '0', borderRadius: '8px' } : {}} selected={!onCurrencySelect}>
           <CurrencySelect
             selected={!!currency}
             hideInput={hideInput}
             className="open-currency-select-button"
             onClick={() => {
-              if (!disableCurrencySelect) {
+              if (onCurrencySelect) {
                 setModalOpen(true)
               }
             }}
@@ -243,19 +254,17 @@ export default function CurrencyInputPanel({
                   </StyledTokenName>
                 )}
               </RowFixed>
-              {!disableCurrencySelect && <StyledDropDown selected={!!currency} />}
+              {onCurrencySelect && <StyledDropDown selected={!!currency} />}
             </Aligner>
           </CurrencySelect>
           {!hideInput && (
-            <>
-              <NumericalInput
-                className="token-amount-input"
-                value={value}
-                onUserInput={(val) => {
-                  onUserInput(val)
-                }}
-              />
-            </>
+            <NumericalInput
+              className="token-amount-input"
+              value={value}
+              onUserInput={(val) => {
+                onUserInput(val)
+              }}
+            />
           )}
         </InputRow>
         {!hideInput && !hideBalance && (
@@ -288,7 +297,7 @@ export default function CurrencyInputPanel({
           </LabelRow>
         )}
       </Container>
-      {!disableCurrencySelect && onCurrencySelect && (
+      {onCurrencySelect && (
         <CurrencySearchModal
           isOpen={modalOpen}
           onDismiss={handleDismissSearch}

src/components/NumericalInput/index.tsx

@@ -81,7 +81,6 @@ export const Input = React.memo(function InnerInput({
       }}
       // universal input options
       inputMode="decimal"
-      title="Token Amount"
       autoComplete="off"
       autoCorrect="off"
       // text-specific options

src/hooks/useUSDCPrice.ts

-import { ChainId, Currency, currencyEquals, Price, WETH9 } from '@uniswap/sdk-core'
+import { ChainId, Currency, currencyEquals, Price, Token, WETH9 } from '@uniswap/sdk-core'
 import { JSBI } from '@uniswap/v2-sdk'
 import { useMemo } from 'react'
 import { USDC } from '../constants'
@@ -13,16 +13,15 @@ import { wrappedCurrency } from '../utils/wrappedCurrency'
 export default function useUSDCPrice(currency?: Currency): Price | undefined {
   const { chainId } = useActiveWeb3React()
   const wrapped = wrappedCurrency(currency, chainId)
+  const weth = WETH9[chainId as ChainId]
+
   const tokenPairs: [Currency | undefined, Currency | undefined][] = useMemo(
     () => [
-      [
-        chainId && wrapped && currencyEquals(WETH9[chainId], wrapped) ? undefined : currency,
-        chainId ? WETH9[chainId] : undefined,
-      ],
+      [chainId && wrapped && currencyEquals(weth, wrapped) ? undefined : currency, chainId ? weth : undefined],
       [wrapped?.equals(USDC) ? undefined : wrapped, chainId === ChainId.MAINNET ? USDC : undefined],
-      [chainId ? WETH9[chainId] : undefined, chainId === ChainId.MAINNET ? USDC : undefined],
+      [chainId ? weth : undefined, chainId === ChainId.MAINNET ? USDC : undefined],
     ],
-    [chainId, currency, wrapped]
+    [chainId, currency, weth, wrapped]
   )
   const [[ethPairState, ethPair], [usdcPairState, usdcPair], [usdcEthPairState, usdcEthPair]] = useV2Pairs(tokenPairs)
 
@@ -30,10 +29,21 @@ export default function useUSDCPrice(currency?: Currency): Price | undefined {
     if (!currency || !wrapped || !chainId) {
       return undefined
     }
+    // return some fake price data for non-mainnet
+    if (chainId !== ChainId.MAINNET) {
+      const fakeUSDC = new Token(chainId, '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', 6, 'fUSDC', 'Fake USDC')
+      return new Price(
+        currency,
+        fakeUSDC,
+        10 ** Math.max(0, currency.decimals - 6),
+        15 * 10 ** Math.max(6 - currency.decimals, 0)
+      )
+    }
+
     // handle weth/eth
-    if (wrapped.equals(WETH9[chainId])) {
+    if (wrapped.equals(weth)) {
       if (usdcPair) {
-        const price = usdcPair.priceOf(WETH9[chainId])
+        const price = usdcPair.priceOf(weth)
         return new Price(currency, USDC, price.denominator, price.numerator)
       } else {
         return undefined
@@ -44,9 +54,9 @@ export default function useUSDCPrice(currency?: Currency): Price | undefined {
       return new Price(USDC, USDC, '1', '1')
     }
 
-    const ethPairETHAmount = ethPair?.reserveOf(WETH9[chainId])
+    const ethPairETHAmount = ethPair?.reserveOf(weth)
     const ethPairETHUSDCValue: JSBI =
-      ethPairETHAmount && usdcEthPair ? usdcEthPair.priceOf(WETH9[chainId]).quote(ethPairETHAmount).raw : JSBI.BigInt(0)
+      ethPairETHAmount && usdcEthPair ? usdcEthPair.priceOf(weth).quote(ethPairETHAmount).raw : JSBI.BigInt(0)
 
     // all other tokens
     // first try the usdc pair
@@ -55,13 +65,13 @@ export default function useUSDCPrice(currency?: Currency): Price | undefined {
       return new Price(currency, USDC, price.denominator, price.numerator)
     }
     if (ethPairState === PairState.EXISTS && ethPair && usdcEthPairState === PairState.EXISTS && usdcEthPair) {
-      if (usdcEthPair.reserveOf(USDC).greaterThan('0') && ethPair.reserveOf(WETH9[chainId]).greaterThan('0')) {
+      if (usdcEthPair.reserveOf(USDC).greaterThan('0') && ethPair.reserveOf(weth).greaterThan('0')) {
         const ethUsdcPrice = usdcEthPair.priceOf(USDC)
-        const currencyEthPrice = ethPair.priceOf(WETH9[chainId])
+        const currencyEthPrice = ethPair.priceOf(weth)
         const usdcPrice = ethUsdcPrice.multiply(currencyEthPrice).invert()
         return new Price(currency, USDC, usdcPrice.denominator, usdcPrice.numerator)
       }
     }
     return undefined
-  }, [chainId, currency, ethPair, ethPairState, usdcEthPair, usdcEthPairState, usdcPair, usdcPairState, wrapped])
+  }, [chainId, currency, ethPair, ethPairState, usdcEthPair, usdcEthPairState, usdcPair, usdcPairState, weth, wrapped])
 }

src/pages/Swap/index.tsx

@@ -341,6 +341,7 @@ export default function Swap({ history }: RouteComponentProps) {
                 currency={currencies[Field.INPUT]}
                 onUserInput={handleTypeInput}
                 onMax={handleMaxInput}
+                showFiatValue
                 onCurrencySelect={handleInputSelect}
                 otherCurrency={currencies[Field.OUTPUT]}
                 showCommonBases={true}
@@ -363,6 +364,7 @@ export default function Swap({ history }: RouteComponentProps) {
                 label={independentField === Field.INPUT && !showWrap && trade ? 'To (minimum)' : 'To'}
                 showMaxButton={false}
                 hideBalance={true}
+                showFiatValue
                 currency={currencies[Field.OUTPUT]}
                 onCurrencySelect={handleOutputSelect}
                 otherCurrency={currencies[Field.INPUT]}