fix: handled liquidity minPrice and maxPrice are empty case. (#4569)

thanks!

package.json

@@ -145,7 +145,7 @@
     "@uniswap/v3-core": "1.0.0",
     "@uniswap/v3-periphery": "^1.1.1",
     "@uniswap/v3-sdk": "^3.9.0",
-    "@uniswap/widgets": "^2.5.0",
+    "@uniswap/widgets": "^2.7.0",
     "@vanilla-extract/css": "^1.7.2",
     "@vanilla-extract/css-utils": "^0.1.2",
     "@vanilla-extract/dynamic": "^2.0.2",

src/assets/svg/socks.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.75 11C4.75 11 5.22377 11.1391 5.80923 10.5828L7.64433 8.65908C8.35405 7.91508 8.74998 6.92678 8.74989 5.89856C8.7498 4.72716 8.74971 3.31706 8.74991 2.50009C8.74996 2.22391 8.77618 2 8.5 2H8.25M6.74898 5.75L6.74979 2L6.74991 1.50009C6.74996 1.22391 6.52609 1 6.24991 1H4.25167C3.97553 1 3.75167 1.22386 3.75167 1.5V4.75039C3.75167 5.29859 3.52665 5.82276 3.12922 6.20034L1.6891 7.56856C1.10364 8.12478 1.10363 9.0266 1.68909 9.58283C2.12197 9.99409 2.75372 10.1013 3.29025 9.90438C3.47937 9.83497 3.65665 9.72779 3.80923 9.58283L5.80923 7.6827M6.74898 5.75L6.7487 6.36119C6.74861 6.63517 6.63611 6.89711 6.43748 7.08582L5.80923 7.6827M6.74898 5.75H6.4384C5.67845 5.75 5.19623 6.56419 5.56146 7.23061L5.80923 7.6827" stroke="white" stroke-linecap="round"/>
+</svg>

src/components/CurrencyLogo/index.tsx

@@ -24,11 +24,13 @@ const StyledNativeLogo = styled(StyledLogo)`
 
 export default function CurrencyLogo({
   currency,
+  symbol,
   size = '24px',
   style,
   ...rest
 }: {
   currency?: Currency | null
+  symbol?: string | null
   size?: string
   style?: React.CSSProperties
 }) {
@@ -36,6 +38,7 @@ export default function CurrencyLogo({
     alt: `${currency?.symbol ?? 'token'} logo`,
     size,
     srcs: useCurrencyLogoURIs(currency),
+    symbol: symbol ?? currency?.symbol,
     style,
     ...rest,
   }

src/components/Identicon/StatusIcon.tsx

@@ -1,11 +1,18 @@
+import { useWeb3React } from '@web3-react/core'
 import { ConnectionType } from 'connection'
+import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
+import useENSAvatar from 'hooks/useENSAvatar'
 import styled from 'styled-components/macro'
+import { colors } from 'theme/colors'
 
 import CoinbaseWalletIcon from '../../assets/images/coinbaseWalletIcon.svg'
 import WalletConnectIcon from '../../assets/images/walletConnectIcon.svg'
+import sockImg from '../../assets/svg/socks.svg'
+import { useHasSocks } from '../../hooks/useSocksBalance'
 import Identicon from '../Identicon'
 
 const IconWrapper = styled.div<{ size?: number }>`
+  position: relative;
   ${({ theme }) => theme.flexColumnNoWrap};
   align-items: center;
   justify-content: center;
@@ -20,19 +27,57 @@ const IconWrapper = styled.div<{ size?: number }>`
   `};
 `
 
-export default function StatusIcon({ connectionType, size }: { connectionType: ConnectionType; size?: number }) {
-  let image
-  switch (connectionType) {
-    case ConnectionType.INJECTED:
-      image = <Identicon />
-      break
-    case ConnectionType.WALLET_CONNECT:
-      image = <img src={WalletConnectIcon} alt="WalletConnect" />
-      break
-    case ConnectionType.COINBASE_WALLET:
-      image = <img src={CoinbaseWalletIcon} alt="Coinbase Wallet" />
-      break
+const SockContainer = styled.div`
+  position: absolute;
+  background-color: ${colors.pink400};
+  display: flex;
+  justify-content: center;
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  bottom: -5px;
+  right: -5px;
+`
+
+const SockImg = styled.img`
+  width: 7.5px;
+  height: 10px;
+  margin-top: 3px;
+`
+
+const Socks = () => {
+  return (
+    <SockContainer>
+      <SockImg src={sockImg} />
+    </SockContainer>
+  )
+}
+
+const useIcon = (connectionType: ConnectionType) => {
+  const { account } = useWeb3React()
+  const { avatar } = useENSAvatar(account ?? undefined)
+  const isNavbarEnabled = useNavBarFlag() === NavBarVariant.Enabled
+
+  if ((isNavbarEnabled && avatar) || connectionType === ConnectionType.INJECTED) {
+    return <Identicon />
+  } else if (connectionType === ConnectionType.WALLET_CONNECT) {
+    return <img src={WalletConnectIcon} alt="WalletConnect" />
+  } else if (connectionType === ConnectionType.COINBASE_WALLET) {
+    return <img src={CoinbaseWalletIcon} alt="Coinbase Wallet" />
   }
 
-  return <IconWrapper size={size ?? 16}>{image}</IconWrapper>
+  return undefined
+}
+
+export default function StatusIcon({ connectionType, size }: { connectionType: ConnectionType; size?: number }) {
+  const hasSocks = useHasSocks()
+  const isNavbarEnabled = useNavBarFlag() === NavBarVariant.Enabled
+  const icon = useIcon(connectionType)
+
+  return (
+    <IconWrapper size={size ?? 16}>
+      {isNavbarEnabled && hasSocks && <Socks />}
+      {icon}
+    </IconWrapper>
+  )
 }

src/components/Identicon/index.tsx

@@ -1,12 +1,13 @@
 import jazzicon from '@metamask/jazzicon'
 import { useWeb3React } from '@web3-react/core'
+import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import useENSAvatar from 'hooks/useENSAvatar'
 import { useLayoutEffect, useMemo, useRef, useState } from 'react'
 import styled from 'styled-components/macro'
 
-const StyledIdenticon = styled.div`
-  height: 1rem;
-  width: 1rem;
+const StyledIdenticon = styled.div<{ isNavbarEnabled: boolean }>`
+  height: ${({ isNavbarEnabled }) => (isNavbarEnabled ? '24px' : '1rem')};
+  width: ${({ isNavbarEnabled }) => (isNavbarEnabled ? '24px' : '1rem')};
   border-radius: 1.125rem;
   background-color: ${({ theme }) => theme.deprecated_bg4};
   font-size: initial;
@@ -22,8 +23,10 @@ export default function Identicon() {
   const { account } = useWeb3React()
   const { avatar } = useENSAvatar(account ?? undefined)
   const [fetchable, setFetchable] = useState(true)
+  const isNavbarEnabled = useNavBarFlag() === NavBarVariant.Enabled
+  const iconSize = isNavbarEnabled ? 24 : 16
 
-  const icon = useMemo(() => account && jazzicon(16, parseInt(account.slice(2, 10), 16)), [account])
+  const icon = useMemo(() => account && jazzicon(iconSize, parseInt(account.slice(2, 10), 16)), [account, iconSize])
   const iconRef = useRef<HTMLDivElement>(null)
   useLayoutEffect(() => {
     const current = iconRef.current
@@ -41,7 +44,7 @@ export default function Identicon() {
   }, [icon, iconRef])
 
   return (
-    <StyledIdenticon>
+    <StyledIdenticon isNavbarEnabled={isNavbarEnabled}>
       {avatar && fetchable ? (
         <StyledAvatar alt="avatar" src={avatar} onError={() => setFetchable(false)}></StyledAvatar>
       ) : (

src/components/ListLogo/index.tsx

@@ -14,13 +14,15 @@ export default function ListLogo({
   style,
   size = '24px',
   alt,
+  symbol,
 }: {
   logoURI: string
   size?: string
   style?: React.CSSProperties
   alt?: string
+  symbol?: string
 }) {
   const srcs: string[] = useHttpLocations(logoURI)
 
-  return <StyledListLogo alt={alt} size={size} srcs={srcs} style={style} />
+  return <StyledListLogo alt={alt} size={size} symbol={symbol} srcs={srcs} style={style} />
 }

src/components/Logo/index.tsx

@@ -1,22 +1,34 @@
 import { useState } from 'react'
-import { Slash } from 'react-feather'
 import { ImageProps } from 'rebass'
-import { useTheme } from 'styled-components/macro'
+import styled from 'styled-components/macro'
 
 const BAD_SRCS: { [tokenAddress: string]: true } = {}
 
 interface LogoProps extends Pick<ImageProps, 'style' | 'alt' | 'className'> {
   srcs: string[]
+  symbol?: string
+  size?: string
 }
 
+const MissingImageLogo = styled.div<{ size?: string }>`
+  --size: ${({ size }) => size};
+  border-radius: 100px;
+  color: ${({ theme }) => theme.textPrimary};
+  background-color: ${({ theme }) => theme.backgroundInteractive};
+  font-size: calc(var(--size) / 3);
+  font-weight: 500;
+  height: ${({ size }) => size ?? '24px'};
+  line-height: ${({ size }) => size ?? '24px'};
+  text-align: center;
+  width: ${({ size }) => size ?? '24px'};
+`
+
 /**
  * Renders an image by sequentially trying a list of URIs, and then eventually a fallback triangle alert
  */
-export default function Logo({ srcs, alt, style, ...rest }: LogoProps) {
+export default function Logo({ srcs, alt, style, size, symbol, ...rest }: LogoProps) {
   const [, refresh] = useState<number>(0)
 
-  const theme = useTheme()
-
   const src: string | undefined = srcs.find((src) => !BAD_SRCS[src])
 
   if (src) {
@@ -34,5 +46,10 @@ export default function Logo({ srcs, alt, style, ...rest }: LogoProps) {
     )
   }
 
-  return <Slash {...rest} style={{ ...style, color: theme.deprecated_bg4 }} />
+  return (
+    <MissingImageLogo size={size}>
+      {/* use only first 3 characters of Symbol for design reasons */}
+      {symbol?.toUpperCase().replace('$', '').replace(/\s+/g, '').slice(0, 3)}
+    </MissingImageLogo>
+  )
 }

src/components/NavBar/SearchBar.css.ts

@@ -27,6 +27,7 @@ export const searchBarContainer = style([
     right: '0',
     top: '0',
     zIndex: '3',
+    display: 'inline-block',
   }),
   {
     '@media': {

src/components/NavBar/SearchBar.tsx

@@ -332,64 +332,62 @@ export const SearchBar = () => {
   const placeholderText = phase1Flag === NftVariant.Enabled ? t`Search tokens and NFT collections` : t`Search tokens`
 
   return (
-    <>
-      <Box position="relative">
-        <Box
-          position={isOpen ? { sm: 'fixed', md: 'absolute' } : 'static'}
-          width={{ sm: isOpen ? 'viewWidth' : 'auto', md: 'auto' }}
-          ref={searchRef}
-          className={styles.searchBarContainer}
+    <Box position="relative">
+      <Box
+        position={isOpen ? { sm: 'fixed', md: 'absolute' } : 'static'}
+        width={{ sm: isOpen ? 'viewWidth' : 'auto', md: 'auto' }}
+        ref={searchRef}
+        className={styles.searchBarContainer}
+      >
+        <Row
+          className={clsx(`${styles.searchBar} ${!isOpen && magicalGradientOnHover}`)}
+          borderRadius={isOpen ? undefined : '12'}
+          borderTopRightRadius={isOpen && !isMobile ? '12' : undefined}
+          borderTopLeftRadius={isOpen && !isMobile ? '12' : undefined}
+          borderBottomWidth={isOpen ? '0px' : '1px'}
+          display={{ sm: isOpen ? 'flex' : 'none', xl: 'flex' }}
+          justifyContent={isOpen || phase1Flag === NftVariant.Enabled ? 'flex-start' : 'center'}
+          onFocus={() => !isOpen && toggleOpen()}
+          onClick={() => !isOpen && toggleOpen()}
+          gap="12"
         >
-          <Row
-            className={clsx(`${styles.searchBar} ${!isOpen && magicalGradientOnHover}`)}
-            borderRadius={isOpen ? undefined : '12'}
-            borderTopRightRadius={isOpen && !isMobile ? '12' : undefined}
-            borderTopLeftRadius={isOpen && !isMobile ? '12' : undefined}
-            borderBottomWidth={isOpen ? '0px' : '1px'}
-            display={{ sm: isOpen ? 'flex' : 'none', xl: 'flex' }}
-            justifyContent={isOpen || phase1Flag === NftVariant.Enabled ? 'flex-start' : 'center'}
-            onFocus={() => !isOpen && toggleOpen()}
-            onClick={() => !isOpen && toggleOpen()}
-            gap="12"
-          >
-            <Box display={{ sm: 'none', md: 'flex' }}>
-              <MagnifyingGlassIcon />
-            </Box>
-            <Box display={{ sm: 'flex', md: 'none' }} color="placeholder" onClick={toggleOpen}>
-              <ChevronLeftIcon />
-            </Box>
-            <Box
-              as="input"
-              placeholder={placeholderText}
-              width={isOpen || phase1Flag === NftVariant.Enabled ? 'full' : '120'}
-              onChange={(event: ChangeEvent<HTMLInputElement>) => {
-                !isOpen && toggleOpen()
-                setSearchValue(event.target.value)
-              }}
-              className={styles.searchBarInput}
-              value={searchValue}
-              ref={inputRef}
-            />
-          </Row>
-          <Box display={{ sm: isOpen ? 'none' : 'flex', xl: 'none' }}>
-            <NavIcon onClick={toggleOpen}>
-              <NavMagnifyingGlassIcon width={28} height={28} />
-            </NavIcon>
+          <Box display={{ sm: 'none', md: 'flex' }}>
+            <MagnifyingGlassIcon />
           </Box>
-          {isOpen &&
-            (debouncedSearchValue.length > 0 && (tokensAreLoading || collectionsAreLoading) ? (
-              <SkeletonRow />
-            ) : (
-              <SearchBarDropdown
-                toggleOpen={toggleOpen}
-                tokens={reducedTokens}
-                collections={reducedCollections}
-                hasInput={debouncedSearchValue.length > 0}
-              />
-            ))}
+          <Box display={{ sm: 'flex', md: 'none' }} color="placeholder" onClick={toggleOpen}>
+            <ChevronLeftIcon />
+          </Box>
+          <Box
+            as="input"
+            placeholder={placeholderText}
+            width={isOpen || phase1Flag === NftVariant.Enabled ? 'full' : '120'}
+            onChange={(event: ChangeEvent<HTMLInputElement>) => {
+              !isOpen && toggleOpen()
+              setSearchValue(event.target.value)
+            }}
+            className={styles.searchBarInput}
+            value={searchValue}
+            ref={inputRef}
+          />
+        </Row>
+        <Box display={{ sm: isOpen ? 'none' : 'flex', xl: 'none' }}>
+          <NavIcon onClick={toggleOpen}>
+            <NavMagnifyingGlassIcon width={28} height={28} />
+          </NavIcon>
         </Box>
+        {isOpen &&
+          (debouncedSearchValue.length > 0 && (tokensAreLoading || collectionsAreLoading) ? (
+            <SkeletonRow />
+          ) : (
+            <SearchBarDropdown
+              toggleOpen={toggleOpen}
+              tokens={reducedTokens}
+              collections={reducedCollections}
+              hasInput={debouncedSearchValue.length > 0}
+            />
+          ))}
       </Box>
       {isOpen && <Overlay />}
-    </>
+    </Box>
   )
 }

src/components/NavBar/SuggestionRow.tsx

@@ -10,7 +10,7 @@ import { putCommas } from 'nft/utils/putCommas'
 import { useCallback, useEffect, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 
-import { TokenWarningRedIcon, VerifiedIcon } from '../../nft/components/icons'
+import { VerifiedIcon } from '../../nft/components/icons'
 import * as styles from './SearchBar.css'
 
 interface CollectionRowProps {
@@ -151,11 +151,7 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index
         <Column className={styles.suggestionPrimaryContainer}>
           <Row gap="4" width="full">
             <Box className={styles.primaryText}>{token.name}</Box>
-            {token.onDefaultList ? (
-              <VerifiedIcon className={styles.suggestionIcon} />
-            ) : (
-              <TokenWarningRedIcon className={styles.suggestionIcon} />
-            )}
+            {token.onDefaultList && <VerifiedIcon className={styles.suggestionIcon} />}
           </Row>
           <Box className={styles.secondaryText}>{token.symbol}</Box>
         </Column>

src/components/SearchModal/CurrencyList/index.tsx

@@ -165,7 +165,7 @@ function CurrencyRow({
         selected={otherSelected}
       >
         <Column>
-          <CurrencyLogo currency={currency} size={'24px'} />
+          <CurrencyLogo currency={currency} size={'36px'} />
         </Column>
         <AutoColumn>
           <Row>

src/components/Tokens/TokenDetails/TokenDetail.tsx

@@ -231,7 +231,7 @@ export default function LoadedTokenDetail({ address }: { address: string }) {
         <ChartHeader>
           <TokenInfoContainer>
             <TokenNameCell>
-              <CurrencyLogo currency={currency} size={'32px'} />
+              <CurrencyLogo currency={currency} size={'32px'} symbol={tokenSymbol} />
               {tokenName ?? <Trans>Name not found</Trans>}
               <TokenSymbol>{tokenSymbol ?? <Trans>Symbol not found</Trans>}</TokenSymbol>
               {!warning && <VerifiedIcon size="20px" />}

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -505,7 +505,7 @@ export default function LoadedRow({
         tokenInfo={
           <ClickableName>
             <LogoContainer>
-              <CurrencyLogo currency={currency} />
+              <CurrencyLogo currency={currency} symbol={tokenSymbol} />
               <L2NetworkLogo networkUrl={L2Icon} />
             </LogoContainer>
             <TokenInfoCell>

src/components/Web3Status/index.tsx

@@ -228,13 +228,15 @@ function Web3StatusInner() {
           </RowBetween>
         ) : (
           <>
-            {hasSocks ? <Sock /> : null}
+            {hasSocks && !navbarFlagEnabled ? <Sock /> : null}
             <Text>{ENSName || shortenAddress(account)}</Text>
-            {navbarFlagEnabled && walletIsOpen ? (
-              <StyledChevronUp onClick={toggleWalletDropdown} />
-            ) : (
-              <StyledChevronDown onClick={toggleWalletDropdown} />
-            )}
+            {navbarFlagEnabled ? (
+              walletIsOpen ? (
+                <StyledChevronUp onClick={toggleWalletDropdown} />
+              ) : (
+                <StyledChevronDown onClick={toggleWalletDropdown} />
+              )
+            ) : null}
           </>
         )}
         {!navbarFlagEnabled && !hasPendingTransactions && <StatusIcon connectionType={connectionType} />}

src/components/Widget/index.tsx

@@ -31,6 +31,7 @@ export default function Widget({ defaultToken }: WidgetProps) {
   return (
     <>
       <SwapWidget
+        disableBranding
         hideConnectionUI
         jsonRpcUrlMap={RPC_URLS}
         routerUrl={WIDGET_ROUTER_URL}

src/components/Widget/transactions.ts

@@ -1,18 +1,70 @@
-import { TransactionReceipt } from '@ethersproject/abstract-provider'
-import { TransactionEventHandlers } from '@uniswap/widgets'
-import { useMemo } from 'react'
+import {
+  TradeType,
+  Transaction,
+  TransactionEventHandlers,
+  TransactionInfo,
+  TransactionType as WidgetTransactionType,
+} from '@uniswap/widgets'
+import { useWeb3React } from '@web3-react/core'
+import { useCallback, useMemo } from 'react'
+import { useTransactionAdder } from 'state/transactions/hooks'
+import {
+  ExactInputSwapTransactionInfo,
+  ExactOutputSwapTransactionInfo,
+  TransactionType as AppTransactionType,
+  WrapTransactionInfo,
+} from 'state/transactions/types'
+import { currencyId } from 'utils/currencyId'
 
 /** Integrates the Widget's transactions, showing the widget's transactions in the app. */
 export function useSyncWidgetTransactions() {
-  // TODO(jfrankfurt): Integrate widget transactions with app transaction tracking.
-  const txHandlers: TransactionEventHandlers = useMemo(
-    () => ({
-      onTxSubmit: (hash: string, tx: unknown) => console.log('onTxSubmit'),
-      onTxSuccess: (hash: string, receipt: TransactionReceipt) => console.log('onTxSuccess'),
-      onTxFail: (hash: string, receipt: TransactionReceipt) => console.log('onTxFail'),
-    }),
-    []
+  const { chainId } = useWeb3React()
+  const addTransaction = useTransactionAdder()
+
+  const onTxSubmit = useCallback(
+    (_hash: string, transaction: Transaction<TransactionInfo>) => {
+      const { type, response } = transaction.info
+
+      if (!type || !response) {
+        return
+      } else if (type === WidgetTransactionType.WRAP || type === WidgetTransactionType.UNWRAP) {
+        const { amount } = transaction.info
+
+        addTransaction(response, {
+          type: AppTransactionType.WRAP,
+          unwrapped: type === WidgetTransactionType.UNWRAP,
+          currencyAmountRaw: amount.quotient.toString(),
+          chainId,
+        } as WrapTransactionInfo)
+      } else if (type === WidgetTransactionType.SWAP) {
+        const { slippageTolerance, trade, tradeType } = transaction.info
+        const baseTxInfo = {
+          type: AppTransactionType.SWAP,
+          tradeType,
+          inputCurrencyId: currencyId(trade.inputAmount.currency),
+          outputCurrencyId: currencyId(trade.outputAmount.currency),
+        }
+        if (tradeType === TradeType.EXACT_OUTPUT) {
+          addTransaction(response, {
+            ...baseTxInfo,
+            maximumInputCurrencyAmountRaw: trade.maximumAmountIn(slippageTolerance).quotient.toString(),
+            outputCurrencyAmountRaw: trade.outputAmount.quotient.toString(),
+            expectedInputCurrencyAmountRaw: trade.inputAmount.quotient.toString(),
+          } as ExactOutputSwapTransactionInfo)
+        } else {
+          addTransaction(response, {
+            ...baseTxInfo,
+            inputCurrencyAmountRaw: trade.inputAmount.quotient.toString(),
+            expectedOutputCurrencyAmountRaw: trade.outputAmount.quotient.toString(),
+            minimumOutputCurrencyAmountRaw: trade.minimumAmountOut(slippageTolerance).quotient.toString(),
+          } as ExactInputSwapTransactionInfo)
+        }
+      }
+    },
+    [addTransaction, chainId]
   )
 
+  const txHandlers: TransactionEventHandlers = useMemo(() => ({ onTxSubmit }), [onTxSubmit])
+
   return { transactions: { ...txHandlers } }
 }

src/components/swap/ConfirmSwapModal.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
 import { Trade } from '@uniswap/router-sdk'
-import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
+import { Currency, CurrencyAmount, Percent, Token, TradeType } from '@uniswap/sdk-core'
 import { ModalName } from 'components/AmplitudeAnalytics/constants'
 import { Trace } from 'components/AmplitudeAnalytics/Trace'
 import { ReactNode, useCallback, useMemo, useState } from 'react'
@@ -27,6 +27,8 @@ export default function ConfirmSwapModal({
   attemptingTxn,
   txHash,
   swapQuoteReceivedDate,
+  fiatValueInput,
+  fiatValueOutput,
 }: {
   isOpen: boolean
   trade: InterfaceTrade<Currency, Currency, TradeType> | undefined
@@ -40,6 +42,8 @@ export default function ConfirmSwapModal({
   swapErrorMessage: ReactNode | undefined
   onDismiss: () => void
   swapQuoteReceivedDate: Date | undefined
+  fiatValueInput?: CurrencyAmount<Token> | null
+  fiatValueOutput?: CurrencyAmount<Token> | null
 }) {
   // shouldLogModalCloseEvent lets the child SwapModalHeader component know when modal has been closed
   // and an event triggered by modal closing should be logged.
@@ -78,9 +82,21 @@ export default function ConfirmSwapModal({
         disabledConfirm={showAcceptChanges}
         swapErrorMessage={swapErrorMessage}
         swapQuoteReceivedDate={swapQuoteReceivedDate}
+        fiatValueInput={fiatValueInput}
+        fiatValueOutput={fiatValueOutput}
       />
     ) : null
-  }, [onConfirm, showAcceptChanges, swapErrorMessage, trade, allowedSlippage, txHash, swapQuoteReceivedDate])
+  }, [
+    onConfirm,
+    showAcceptChanges,
+    swapErrorMessage,
+    trade,
+    allowedSlippage,
+    txHash,
+    swapQuoteReceivedDate,
+    fiatValueInput,
+    fiatValueOutput,
+  ])
 
   // text to show while loading
   const pendingText = (

src/components/swap/SwapModalFooter.tsx

@@ -1,5 +1,5 @@
 import { Trans } from '@lingui/macro'
-import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
+import { Currency, CurrencyAmount, Percent, Token, TradeType } from '@uniswap/sdk-core'
 import { ElementName, Event, EventName } from 'components/AmplitudeAnalytics/constants'
 import { TraceEvent } from 'components/AmplitudeAnalytics/TraceEvent'
 import {
@@ -31,6 +31,8 @@ interface AnalyticsEventProps {
   isAutoRouterApi: boolean
   swapQuoteReceivedDate: Date | undefined
   routes: RoutingDiagramEntry[]
+  fiatValueInput?: CurrencyAmount<Token> | null
+  fiatValueOutput?: CurrencyAmount<Token> | null
 }
 
 const formatRoutesEventProperties = (routes: RoutingDiagramEntry[]) => {
@@ -69,6 +71,8 @@ const formatAnalyticsEventProperties = ({
   isAutoRouterApi,
   swapQuoteReceivedDate,
   routes,
+  fiatValueInput,
+  fiatValueOutput,
 }: AnalyticsEventProps) => ({
   estimated_network_fee_usd: trade.gasUseEstimateUSD ? formatToDecimal(trade.gasUseEstimateUSD, 2) : undefined,
   transaction_hash: hash,
@@ -79,6 +83,8 @@ const formatAnalyticsEventProperties = ({
   token_out_symbol: trade.outputAmount.currency.symbol,
   token_in_amount: formatToDecimal(trade.inputAmount, trade.inputAmount.currency.decimals),
   token_out_amount: formatToDecimal(trade.outputAmount, trade.outputAmount.currency.decimals),
+  token_in_amount_usd: fiatValueInput ? parseFloat(fiatValueInput.toFixed(2)) : undefined,
+  token_out_amount_usd: fiatValueOutput ? parseFloat(fiatValueOutput.toFixed(2)) : undefined,
   price_impact_basis_points: formatPercentInBasisPointsNumber(computeRealizedPriceImpact(trade)),
   allowed_slippage_basis_points: formatPercentInBasisPointsNumber(allowedSlippage),
   is_auto_router_api: isAutoRouterApi,
@@ -102,6 +108,8 @@ export default function SwapModalFooter({
   swapErrorMessage,
   disabledConfirm,
   swapQuoteReceivedDate,
+  fiatValueInput,
+  fiatValueOutput,
 }: {
   trade: InterfaceTrade<Currency, Currency, TradeType>
   hash: string | undefined
@@ -110,6 +118,8 @@ export default function SwapModalFooter({
   swapErrorMessage: ReactNode | undefined
   disabledConfirm: boolean
   swapQuoteReceivedDate: Date | undefined
+  fiatValueInput?: CurrencyAmount<Token> | null
+  fiatValueOutput?: CurrencyAmount<Token> | null
 }) {
   const transactionDeadlineSecondsSinceEpoch = useTransactionDeadline()?.toNumber() // in seconds since epoch
   const isAutoSlippage = useUserSlippageTolerance()[0] === 'auto'
@@ -132,6 +142,8 @@ export default function SwapModalFooter({
             isAutoRouterApi: !clientSideRouter,
             swapQuoteReceivedDate,
             routes,
+            fiatValueInput,
+            fiatValueOutput,
           })}
         >
           <ButtonError

src/hooks/useAutoSlippageTolerance.ts

@@ -13,7 +13,7 @@ import { InterfaceTrade } from 'state/routing/types'
 import useGasPrice from './useGasPrice'
 import useStablecoinPrice, { useStablecoinValue } from './useStablecoinPrice'
 
-const V3_SWAP_DEFAULT_SLIPPAGE = new Percent(50, 10_000) // .50%
+export const V3_SWAP_DEFAULT_SLIPPAGE = new Percent(50, 10_000) // .50%
 const ONE_TENTHS_PERCENT = new Percent(10, 10_000) // .10%
 export const DEFAULT_AUTO_SLIPPAGE = ONE_TENTHS_PERCENT
 const GAS_ESTIMATE_BUFFER = new Percent(10, 100) // 10%

src/pages/AddLiquidity/index.tsx

@@ -166,6 +166,7 @@ export default function AddLiquidity() {
 
   useEffect(() => {
     if (
+      parsedQs.minPrice &&
       typeof parsedQs.minPrice === 'string' &&
       parsedQs.minPrice !== leftRangeTypedValue &&
       !isNaN(parsedQs.minPrice as any)
@@ -174,6 +175,7 @@ export default function AddLiquidity() {
     }
 
     if (
+      parsedQs.maxPrice &&
       typeof parsedQs.maxPrice === 'string' &&
       parsedQs.maxPrice !== rightRangeTypedValue &&
       !isNaN(parsedQs.maxPrice as any)

src/pages/Swap/index.tsx

@@ -542,6 +542,8 @@ export default function Swap() {
               swapErrorMessage={swapErrorMessage}
               onDismiss={handleConfirmDismiss}
               swapQuoteReceivedDate={swapQuoteReceivedDate}
+              fiatValueInput={fiatValueInput}
+              fiatValueOutput={fiatValueOutput}
             />
 
             <AutoColumn gap={'0px'}>

src/pages/TokenDetails/index.tsx

@@ -149,7 +149,7 @@ export function LoadingTokenDetails() {
   return (
     <TokenDetailsLayout>
       <LoadingTokenDetail />
-      <RightPanel></RightPanel>
+      <RightPanel />
       <Footer />
     </TokenDetailsLayout>
   )

yarn.lock

@@ -4212,10 +4212,10 @@
     "@uniswap/v3-core" "1.0.0"
     "@uniswap/v3-periphery" "^1.0.1"
 
-"@uniswap/widgets@^2.5.0":
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/@uniswap/widgets/-/widgets-2.5.0.tgz#61d72da0ca7bf2091b339df6e3546c9066b34245"
-  integrity sha512-uGFOTf5mzJPhccBf99RRQ4ExQqmgAKn5WbNr3ZrXm1yfjT8Qf4xI3TTa5BrpMlGYr5If4v0vDA3q4WpcQ3isyg==
+"@uniswap/widgets@^2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@uniswap/widgets/-/widgets-2.7.0.tgz#01c306e0ce736383dd2a9b1acec6371d07c9ba80"
+  integrity sha512-PVcQRzjtJqcTMXArCQSe2BmQdq9hhBM7u0nQlj+d2V918mFhi4rVSET3UurwQEegcSNlTrZhGvXKEFeNEhpmFA==
   dependencies:
     "@babel/runtime" "^7.17.0"
     "@fontsource/ibm-plex-mono" "^4.5.1"