feat: format usd prices, add loading states (#3196)

* format usd prices, add loading states

* remove tildes, collapse details by default

* update swap deadline to use seconds

* update syntax for loading states

src/lib/components/Swap/Input.tsx

@@ -65,7 +65,7 @@ export default function Input({ disabled }: InputProps) {
       >
         <ThemedText.Body2 color="secondary">
           <Row>
-            {inputUSDC ? `~ $${inputUSDC.toFixed(2)}` : '-'}
+            {inputUSDC ? `$${inputUSDC.toFixed(2)}` : '-'}
             {balance && (
               <ThemedText.Body2 color={inputCurrencyAmount?.greaterThan(balance) ? 'error' : undefined}>
                 Balance: <span style={{ userSelect: 'text' }}>{formatCurrencyAmount(balance, 4)}</span>

src/lib/components/Swap/Output.tsx

@@ -63,9 +63,9 @@ export default function Output({ disabled, children }: OutputProps) {
 
   const usdc = useMemo(() => {
     if (outputUSDC) {
-      return `~ $${outputUSDC.toFixed(2)}${priceImpact}`
+      return `$${outputUSDC.toFixed(2)} (${priceImpact && priceImpact > 0 ? '+' : ''}${priceImpact}%)`
     }
-    return '-'
+    return ''
   }, [priceImpact, outputUSDC])
 
   const onMax = useCallback(() => {

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

@@ -42,7 +42,7 @@ function TokenValue({ input, usdc, change }: TokenValueProps) {
       {usdc && usdcAmount && (
         <Row justify="flex-start">
           <ThemedText.Caption color="secondary">
-            ~ ${usdcAmount.toFixed(2)}
+            ${usdcAmount.toFixed(2)}
             {change && <Percent gain={change > 0}> {percent}</Percent>}
           </ThemedText.Caption>
         </Row>

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

@@ -92,7 +92,7 @@ export function SummaryDialog({ trade, allowedSlippage, onConfirm }: SummaryDial
     () => Boolean(trade && confirmedTrade && tradeMeaningfullyDiffers(trade, confirmedTrade)),
     [confirmedTrade, trade]
   )
-  const [open, setOpen] = useState(true)
+  const [open, setOpen] = useState(false)
 
   const [details, setDetails] = useState<HTMLDivElement | null>(null)
 

src/lib/components/Swap/SwapButton.tsx

-import { BigNumber } from '@ethersproject/bignumber'
 import { Trans } from '@lingui/macro'
 import { Token, TradeType } from '@uniswap/sdk-core'
 import { CHAIN_INFO } from 'constants/chainInfo'
-import useCurrentBlockTimestamp from 'hooks/useCurrentBlockTimestamp'
 import { useERC20PermitFromTrade } from 'hooks/useERC20Permit'
 import { useUpdateAtom } from 'jotai/utils'
 import { useAtomValue } from 'jotai/utils'
@@ -16,8 +14,8 @@ import { useSwapCallback } from 'lib/hooks/swap/useSwapCallback'
 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 { transactionTtlAtom } from 'lib/state/settings'
 import { displayTxHashAtom, Field, independentFieldAtom } from 'lib/state/swap'
 import { TransactionType } from 'lib/state/transactions'
 import styled from 'lib/theme'
@@ -116,10 +114,7 @@ export default function SwapButton({ disabled }: SwapButtonProps) {
 
   // @TODO(ianlapham): connect deadline from state instead of passing undefined.
   const { signatureData } = useERC20PermitFromTrade(optimizedTrade, allowedSlippage, undefined)
-
-  const currentBlockTimestamp = useCurrentBlockTimestamp()
-  const userDeadline = useAtomValue(transactionTtlAtom)
-  const deadline = currentBlockTimestamp?.add(BigNumber.from(userDeadline))
+  const deadline = useTransactionDeadline()
 
   // the callback to execute the swap
   const { callback: swapCallback } = useSwapCallback(

src/lib/components/Swap/Toolbar.tsx

@@ -2,14 +2,13 @@ import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, TradeType } from '@uniswap/sdk-core'
 import { ALL_SUPPORTED_CHAIN_IDS } from 'constants/chains'
 import useUSDCPrice from 'hooks/useUSDCPrice'
-import { useAtomValue } from 'jotai/utils'
 import { useSwapInfo } from 'lib/hooks/swap'
 import useActiveWeb3React from 'lib/hooks/useActiveWeb3React'
 import { AlertTriangle, Info, largeIconCss, Spinner } from 'lib/icons'
-import { Field, independentFieldAtom } from 'lib/state/swap'
+import { Field } from 'lib/state/swap'
 import styled, { ThemedText } from 'lib/theme'
 import { useMemo, useState } from 'react'
-import { InterfaceTrade } from 'state/routing/types'
+import { InterfaceTrade, TradeState } from 'state/routing/types'
 
 import { TextButton } from '../Button'
 import Row from '../Row'
@@ -80,7 +79,11 @@ export default function Toolbar({ disabled }: { disabled?: boolean }) {
     currencyBalances: { [Field.INPUT]: balance },
     currencyAmounts: { [Field.INPUT]: inputAmount, [Field.OUTPUT]: outputAmount },
   } = useSwapInfo()
-  const independentField = useAtomValue(independentFieldAtom)
+
+  const [routeFound, routeIsLoading, routeIsSyncing] = useMemo(
+    () => [Boolean(trade?.trade?.swaps), TradeState.LOADING === trade?.state, TradeState.SYNCING === trade?.state],
+    [trade]
+  )
 
   const caption = useMemo(() => {
     if (disabled) {
@@ -101,8 +104,8 @@ export default function Toolbar({ disabled }: { disabled?: boolean }) {
       )
     }
 
-    if (independentField === Field.INPUT ? inputCurrency && inputAmount : outputCurency && outputAmount) {
-      if (!trade?.trade) {
+    if (inputCurrency && outputCurency) {
+      if (!trade?.trade || routeIsLoading || routeIsSyncing) {
         return (
           <>
             <Spinner color="secondary" />
@@ -118,6 +121,14 @@ export default function Toolbar({ disabled }: { disabled?: boolean }) {
           </>
         )
       }
+      if (inputCurrency && outputCurency && !routeFound && !routeIsLoading && !routeIsSyncing) {
+        return (
+          <>
+            <AlertTriangle color="secondary" />
+            <Trans>Insufficient liquidity for this trade.</Trans>
+          </>
+        )
+      }
       if (inputCurrency && inputAmount && outputCurency && outputAmount) {
         return (
           <>
@@ -137,11 +148,13 @@ export default function Toolbar({ disabled }: { disabled?: boolean }) {
     balance,
     chainId,
     disabled,
-    independentField,
     inputAmount,
     inputCurrency,
     outputAmount,
     outputCurency,
+    routeFound,
+    routeIsLoading,
+    routeIsSyncing,
     trade?.trade,
   ])
 

src/lib/hooks/useTransactionDeadline.ts

+import { BigNumber } from '@ethersproject/bignumber'
+import { L2_CHAIN_IDS } from 'constants/chains'
+import { L2_DEADLINE_FROM_NOW } from 'constants/misc'
+import useCurrentBlockTimestamp from 'hooks/useCurrentBlockTimestamp'
+import { useAtomValue } from 'jotai/utils'
+import { transactionTtlAtom } from 'lib/state/settings'
+import { useMemo } from 'react'
+
+import useActiveWeb3React from './useActiveWeb3React'
+
+// combines the block timestamp with the user setting to give the deadline that should be used for any submitted transaction
+export default function useTransactionDeadline(): BigNumber | undefined {
+  const { chainId } = useActiveWeb3React()
+  const userDeadline = useAtomValue(transactionTtlAtom)
+  const blockTimestamp = useCurrentBlockTimestamp()
+  return useMemo(() => {
+    if (blockTimestamp && chainId && L2_CHAIN_IDS.includes(chainId)) return blockTimestamp.add(L2_DEADLINE_FROM_NOW)
+    //@TODO(ianlapham): update this to be stored as seconds
+    if (blockTimestamp && userDeadline) return blockTimestamp.add(userDeadline * 60) // adjust for seconds
+    return undefined
+  }, [blockTimestamp, chainId, userDeadline])
+}

src/lib/state/settings.ts

@@ -3,7 +3,9 @@ import { atomWithReset } from 'jotai/utils'
 
 import { pickAtom, setTogglable } from './atoms'
 
-export const TRANSACTION_TTL_DEFAULT = 40
+// transaction deadline in minutes, needs to be adjusted to seconds before use
+// @TODO(ianlapham): update this to be stored as seconds
+export const TRANSACTION_TTL_DEFAULT = 30
 
 interface Settings {
   maxSlippage: Percent | 'auto' // auto will cause slippage to resort to default calculation