fix: style nits (#3352)

* fix: prefix output usdc with $

* fix: space in output estimate warning

* fix: reset slippage warnings

* fix: display link icon for etherscan

src/lib/components/EtherscanLink.tsx

@@ -1,12 +1,14 @@
 import { SupportedChainId } from 'constants/chains'
 import useActiveWeb3React from 'lib/hooks/useActiveWeb3React'
+import { Link } from 'lib/icons'
 import styled, { Color } from 'lib/theme'
 import { ReactNode, useMemo } from 'react'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 
 import ExternalLink from './ExternalLink'
+import Row from './Row'
 
-const Link = styled(ExternalLink)<{ color: Color }>`
+const StyledExternalLink = styled(ExternalLink)<{ color: Color }>`
   color: ${({ theme, color }) => theme[color]};
   text-decoration: none;
 `
@@ -25,8 +27,10 @@ export default function EtherscanLink({ data, type, color = 'currentColor', chil
     [chainId, data, type]
   )
   return (
-    <Link href={url} color={color} target="_blank">
-      {children}
-    </Link>
+    <StyledExternalLink href={url} color={color} target="_blank">
+      <Row gap={0.25}>
+        {children} <Link />
+      </Row>
+    </StyledExternalLink>
   )
 }

src/lib/components/Swap/Output.tsx

@@ -97,7 +97,7 @@ export default function Output({ disabled, focused, children }: PropsWithChildre
           <ThemedText.Body2 color="secondary">
             <Row>
               <LoadingRow gap={0.5} $loading={isLoading}>
-                {outputUSDC?.toFixed(2)} {priceImpact}
+                {outputUSDC ? `$${outputUSDC.toFixed(2)}` : '-'} {priceImpact}
               </LoadingRow>
               {balance && (
                 <Balance focused={focused}>

src/lib/components/Swap/Settings/MaxSlippageSelect.tsx

@@ -6,7 +6,7 @@ import { getSlippageWarning, toPercent } from 'lib/hooks/useAllowedSlippage'
 import { AlertTriangle, Check, Icon, LargeIcon, XOctagon } from 'lib/icons'
 import { autoSlippageAtom, maxSlippageAtom } from 'lib/state/settings'
 import styled, { ThemedText } from 'lib/theme'
-import { forwardRef, memo, ReactNode, useCallback, useMemo, useRef, useState } from 'react'
+import { forwardRef, memo, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { BaseButton, TextButton } from '../../Button'
 import Column from '../../Column'
@@ -88,28 +88,34 @@ export default function MaxSlippageSelect() {
   const [autoSlippage, setAutoSlippage] = useAtom(autoSlippageAtom)
   const [maxSlippage, setMaxSlippage] = useAtom(maxSlippageAtom)
   const maxSlippageInput = useMemo(() => maxSlippage?.toString() || '', [maxSlippage])
-  const [warning, setWarning] = useState<'warning' | 'error' | undefined>(getSlippageWarning(toPercent(maxSlippage)))
 
   const option = useRef<HTMLButtonElement>(null)
   const showTooltip = useTooltip(option.current)
 
   const input = useRef<HTMLInputElement>(null)
   const focus = useCallback(() => input.current?.focus(), [input])
 
+  const [warning, setWarning] = useState<'warning' | 'error' | undefined>(getSlippageWarning(toPercent(maxSlippage)))
+  useEffect(() => {
+    setWarning(getSlippageWarning(toPercent(maxSlippage)))
+  }, [maxSlippage])
+
+  const onInputSelect = useCallback(() => {
+    focus()
+    const percent = toPercent(maxSlippage)
+    const warning = getSlippageWarning(percent)
+    setAutoSlippage(!percent || warning === 'error')
+  }, [focus, maxSlippage, setAutoSlippage])
+
   const processValue = useCallback(
     (value: number | undefined) => {
       const percent = toPercent(value)
       const warning = getSlippageWarning(percent)
-      setWarning(warning)
       setMaxSlippage(value)
       setAutoSlippage(!percent || warning === 'error')
     },
     [setAutoSlippage, setMaxSlippage]
   )
-  const onInputSelect = useCallback(() => {
-    focus()
-    processValue(maxSlippage)
-  }, [focus, maxSlippage, processValue])
 
   return (
     <Column gap={0.75}>

src/lib/components/Swap/Summary/index.tsx

@@ -158,7 +158,7 @@ export function SummaryDialog({ trade, allowedSlippage, onConfirm }: SummaryDial
             </Column>
           </DetailsColumn>
           <Estimate color="secondary">
-            <Trans>Output is estimated.</Trans>
+            <Trans>Output is estimated.</Trans>{' '}
             {tradeType === TradeType.EXACT_INPUT && (
               <Trans>
                 You will receive at least{' '}

src/lib/components/Swap/SwapButton.tsx

@@ -13,7 +13,7 @@ import { useAddTransaction } from 'lib/hooks/transactions'
 import { usePendingApproval } from 'lib/hooks/transactions'
 import useActiveWeb3React from 'lib/hooks/useActiveWeb3React'
 import useTransactionDeadline from 'lib/hooks/useTransactionDeadline'
-import { Link, Spinner } from 'lib/icons'
+import { Spinner } from 'lib/icons'
 import { displayTxHashAtom, Field } from 'lib/state/swap'
 import { TransactionType } from 'lib/state/transactions'
 import { useTheme } from 'lib/theme'
@@ -24,7 +24,6 @@ import { ExplorerDataType } from 'utils/getExplorerLink'
 import ActionButton, { ActionButtonProps } from '../ActionButton'
 import Dialog from '../Dialog'
 import EtherscanLink from '../EtherscanLink'
-import Row from '../Row'
 import { SummaryDialog } from './Summary'
 
 interface SwapButtonProps {
@@ -100,11 +99,7 @@ export default function SwapButton({ disabled }: SwapButtonProps) {
           action: {
             message: (
               <EtherscanLink type={ExplorerDataType.TRANSACTION} data={approvalHash}>
-                <Row gap={0.25}>
-                  <Trans>
-                    Approval pending <Link />
-                  </Trans>
-                </Row>
+                <Trans>Approval pending</Trans>
               </EtherscanLink>
             ),
             icon: Spinner,