ci(release): publish latest release

RELEASE

 IPFS hash of the deployment:
-- CIDv0: `QmeAaU5F67PX1jZemajRJjA6sDvJ1X6ddvgjjqDHfTePx7`
-- CIDv1: `bafybeihlezropz7qe2rutxp4solf46m3hgpl7c53fevxscbltlz2fo6exq`
+- CIDv0: `QmVUZGU9EBHPpn3BZRhKTQB5VZuDtv2PUetyHxxpfmzcp9`
+- CIDv1: `bafybeidkbbgtppk3euej56wgoxllerdoggnsz3fgkirnhrgvlbmff4reii`
 
 The latest release is always mirrored at [app.uniswap.org](https://app.uniswap.org).
 
@@ -10,41 +10,21 @@ You can also access the Uniswap Interface from an IPFS gateway.
 Your Uniswap settings are never remembered across different URLs.
 
 IPFS gateways:
-- https://bafybeihlezropz7qe2rutxp4solf46m3hgpl7c53fevxscbltlz2fo6exq.ipfs.dweb.link/
-- https://bafybeihlezropz7qe2rutxp4solf46m3hgpl7c53fevxscbltlz2fo6exq.ipfs.cf-ipfs.com/
-- [ipfs://QmeAaU5F67PX1jZemajRJjA6sDvJ1X6ddvgjjqDHfTePx7/](ipfs://QmeAaU5F67PX1jZemajRJjA6sDvJ1X6ddvgjjqDHfTePx7/)
+- https://bafybeidkbbgtppk3euej56wgoxllerdoggnsz3fgkirnhrgvlbmff4reii.ipfs.dweb.link/
+- https://bafybeidkbbgtppk3euej56wgoxllerdoggnsz3fgkirnhrgvlbmff4reii.ipfs.cf-ipfs.com/
+- [ipfs://QmVUZGU9EBHPpn3BZRhKTQB5VZuDtv2PUetyHxxpfmzcp9/](ipfs://QmVUZGU9EBHPpn3BZRhKTQB5VZuDtv2PUetyHxxpfmzcp9/)
 
-## 5.10.0 (2024-02-20)
+## 5.11.0 (2024-02-20)
 
 
 ### Features
 
-* **web:** [info] active liquidity chart (#6237) 1133601
-* **web:** [info] add p0 info analytics (#6338) fdaade8
-* **web:** [info] dot grids (#6327) e4e8720
-* **web:** [uni-tags] add accept / reject to banners (#6309) 34a5aa7
-* **web:** [uni-tags] add banner to account drawer (#6209) 995722d
-* **web:** [uni-tags] add banner to swap page (#6234) b41f304
-* **web:** add tables error states (#6228) 262f8a0
-* **web:** fix PDP in-chart price headers (#6211) a6070ae
-* **web:** implement TDP TVL chart gql queries (#6190) dabe043
-* **web:** implement TDP volumes chart gql queries (#6188) d044d6b
-* **web:** pool protocol switcher (#6339) f81cc26
-* **web:** replace account drawer header buttons with action tiles (#6240) fba32e9
-* **web:** v2 everywhere (#6164) 5c8ec8d
+* **web:** [uni-tags] show username in header (#6353) 28fbb53
+* **web:** move PDP in-chart fees display to tooltip (#6288) eaad394
 
 
 ### Bug Fixes
 
-* **web:** [info] fix pool table description ellipsis width (#6148) b83c2a3
-* **web:** avoid re-rendering the App constantly (#6296) 45de35c
-* **web:** disable statsig metrics (#6368) f554c79
-* **web:** fix e2e tests (#6365) 4343ae9
-* **web:** fix importing some wallet paths causing errors due to react-native-dotenv (#6255) 6b7fc53
-* **web:** import v2 pool goes to add v3 pool (#6273) 8f52943
-* **web:** Keep base/quote tokens stable if user has edited the limit price value (#6284) 1dfe744
-* **web:** make new landing page enabled by default (#6285) a09d8fe
-* **web:** use chainId instead of chainName for analytics (#6390) 81dc15b
-* **web:** using correct favicon url (#6298) 46d76a8
+* **web:** swap e2e tests (#6412) d5a637e
 
 

VERSION

-web/5.10.0
\ No newline at end of file
+web/5.11.0
\ No newline at end of file

apps/mobile/src/components/fiatOnRamp/QuoteItem.tsx

@@ -2,10 +2,10 @@ import { Currency } from '@uniswap/sdk-core'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { StyleSheet } from 'react-native'
-import { useFiatOnRampLogoUrl } from 'src/components/fiatOnRamp/hooks'
 import { Loader } from 'src/components/loading'
 import { useFormatExactCurrencyAmount } from 'src/features/fiatOnRamp/hooks'
-import { Flex, Icons, Text, TouchableArea } from 'ui/src'
+import { getServiceProviderLogo } from 'src/features/fiatOnRamp/utils'
+import { Flex, Icons, Text, TouchableArea, useIsDarkMode } from 'ui/src'
 import { fonts, iconSizes } from 'ui/src/theme'
 import { FiatCurrencyInfo } from 'wallet/src/features/fiatCurrency/hooks'
 import { FORQuote, FORServiceProvider } from 'wallet/src/features/fiatOnRamp/types'
@@ -13,6 +13,12 @@ import { ImageUri } from 'wallet/src/features/images/ImageUri'
 import { useLocalizationContext } from 'wallet/src/features/language/LocalizationContext'
 import { getSymbolDisplayText } from 'wallet/src/utils/currency'
 
+function LogoLoader(): JSX.Element {
+  return (
+    <Loader.Box borderRadius="$roundedFull" height={iconSizes.icon40} width={iconSizes.icon40} />
+  )
+}
+
 export function FORQuoteItem({
   quote,
   serviceProvider,
@@ -46,7 +52,8 @@ export function FORQuoteItem({
     currencySymbol: baseCurrency.symbol,
   })
 
-  const logoUrl = useFiatOnRampLogoUrl(serviceProvider?.logos)
+  const isDarkMode = useIsDarkMode()
+  const logoUrl = getServiceProviderLogo(serviceProvider?.logos, isDarkMode)
 
   return (
     <TouchableArea onPress={onPress}>
@@ -62,11 +69,17 @@ export function FORQuoteItem({
           <QuoteLoader showCarret={showCarret} />
         ) : (
           <Flex row alignItems="center" gap="$spacing12">
-            <Loader.Box
-              borderRadius="$roundedFull"
-              height={iconSizes.icon40}
-              width={iconSizes.icon40}
-            />
+            <Flex>
+              {logoUrl ? (
+                <ImageUri
+                  fallback={<LogoLoader />}
+                  imageStyle={ServiceProviderLogoStyles.icon}
+                  uri={logoUrl}
+                />
+              ) : (
+                <LogoLoader />
+              )}
+            </Flex>
             <Flex shrink gap="$spacing4">
               <Text color="$neutral1" variant="subheading2">
                 {serviceProvider?.name}
@@ -96,23 +109,6 @@ export function FORQuoteItem({
                 <Flex />
               )}
             </Flex>
-            {
-              // TODO: Enable once https://linear.app/uniswap/issue/MOB-2565/implement-service-providers-logo-once-meld-has-added-them-on-their is unblocked
-              false && logoUrl && (
-                <ImageUri
-                  fallback={
-                    <Loader.Box
-                      borderRadius="$roundedFull"
-                      height={iconSizes.icon40}
-                      width={iconSizes.icon40}
-                    />
-                  }
-                  imageStyle={ServiceProviderLogoStyles.icon}
-                  resizeMode="contain"
-                  uri={logoUrl}
-                />
-              )
-            }
           </Flex>
         )}
       </Flex>

apps/mobile/src/components/fiatOnRamp/hooks.ts

-import { useIsDarkMode } from 'ui/src'
-import { FORLogo } from 'wallet/src/features/fiatOnRamp/types'
-
-export function useFiatOnRampLogoUrl(logos: FORLogo | undefined): string | undefined {
-  const isDarkMode = useIsDarkMode()
-
-  if (!logos) {
-    return
-  }
-
-  return isDarkMode ? logos.darkLogo : logos.lightLogo
-}

apps/mobile/src/features/fiatOnRamp/aggregatorHooks.ts

@@ -19,6 +19,7 @@ import {
   isInvalidRequestAmountTooLow,
 } from 'wallet/src/features/fiatOnRamp/utils'
 import { useLocalizationContext } from 'wallet/src/features/language/LocalizationContext'
+import { useActiveAccountAddress } from 'wallet/src/features/wallet/hooks'
 
 // TODO: https://linear.app/uniswap/issue/MOB-2532/implement-fetching-of-available-fiat-currencies-from-meld
 const MELD_FIAT_CURRENCY_CODES = ['usd', 'eur']
@@ -60,6 +61,7 @@ export function useFiatOnRampQuotes({
   quotes: FORQuote[] | undefined
 } {
   const debouncedBaseCurrencyAmount = useDebounce(baseCurrencyAmount, Delay.Short)
+  const walletAddress = useActiveAccountAddress()
 
   const {
     currentData: quotesResponse,
@@ -72,6 +74,7 @@ export function useFiatOnRampQuotes({
           sourceCurrencyCode: baseCurrencyCode,
           destinationCurrencyCode: quoteCurrencyCode,
           countryCode,
+          walletAddress: walletAddress ?? '',
         }
       : skipToken,
     {

apps/mobile/src/features/fiatOnRamp/utils.ts

-import { FORQuote, FORServiceProvider } from 'wallet/src/features/fiatOnRamp/types'
+import { FORLogo, FORQuote, FORServiceProvider } from 'wallet/src/features/fiatOnRamp/types'
 
 export function getServiceProviderForQuote(
   quote: FORQuote | undefined,
@@ -6,3 +6,14 @@ export function getServiceProviderForQuote(
 ): FORServiceProvider | undefined {
   return serviceProviders?.find((sp) => sp.serviceProvider === quote?.serviceProvider)
 }
+
+export function getServiceProviderLogo(
+  logos: FORLogo | undefined,
+  isDarkMode: boolean
+): string | undefined {
+  if (!logos) {
+    return
+  }
+
+  return isDarkMode ? logos.darkLogo : logos.lightLogo
+}

apps/mobile/src/screens/FiatOnRampScreen.tsx

@@ -2,6 +2,7 @@ import { NativeStackScreenProps } from '@react-navigation/native-stack'
 import React, { ComponentProps, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { TextInput, TextInputProps } from 'react-native'
+import FastImage from 'react-native-fast-image'
 import { FadeIn, FadeOut, FadeOutDown } from 'react-native-reanimated'
 import { useAppDispatch, useShouldShowNativeKeyboard } from 'src/app/hooks'
 import { FiatOnRampStackParamList } from 'src/app/navigation/types'
@@ -19,17 +20,18 @@ import { FiatOnRampCountryPicker } from 'src/features/fiatOnRamp/FiatOnRampCount
 import { FiatOnRampTokenSelectorModal } from 'src/features/fiatOnRamp/FiatOnRampTokenSelector'
 import { useFiatOnRampSupportedTokens } from 'src/features/fiatOnRamp/hooks'
 import { FiatOnRampCurrency, InitialQuoteSelection } from 'src/features/fiatOnRamp/types'
+import { getServiceProviderLogo } from 'src/features/fiatOnRamp/utils'
 import { sendMobileAnalyticsEvent } from 'src/features/telemetry'
 import { MobileEventName } from 'src/features/telemetry/constants'
 import { MobileEventProperties } from 'src/features/telemetry/types'
 import { FiatOnRampScreens } from 'src/screens/Screens'
-import { AnimatedFlex, Flex, Text } from 'ui/src'
+import { AnimatedFlex, Flex, Text, useIsDarkMode } from 'ui/src'
 import { usePrevious } from 'utilities/src/react/hooks'
 import { DecimalPadLegacy } from 'wallet/src/components/legacy/DecimalPadLegacy'
 import { useBottomSheetContext } from 'wallet/src/components/modals/BottomSheetContext'
 import { HandleBar } from 'wallet/src/components/modals/HandleBar'
 import { useFiatOnRampAggregatorServiceProvidersQuery } from 'wallet/src/features/fiatOnRamp/api'
-import { FORQuote } from 'wallet/src/features/fiatOnRamp/types'
+import { FORQuote, FORServiceProvider } from 'wallet/src/features/fiatOnRamp/types'
 import { pushNotification } from 'wallet/src/features/notifications/slice'
 import { AppNotificationType } from 'wallet/src/features/notifications/types'
 
@@ -57,9 +59,21 @@ function selectInitialQuote(
   return { quote: undefined, type: undefined }
 }
 
+function preloadServiceProviderLogos(
+  serviceProviders: FORServiceProvider[],
+  isDarkMode: boolean
+): void {
+  FastImage.preload(
+    serviceProviders
+      .map((sp) => ({ uri: getServiceProviderLogo(sp.logos, isDarkMode) }))
+      .filter((sp) => !!sp.uri)
+  )
+}
+
 export function FiatOnRampScreen({ navigation }: Props): JSX.Element {
   const { t } = useTranslation()
   const dispatch = useAppDispatch()
+  const isDarkMode = useIsDarkMode()
   const [selection, setSelection] = useState<TextInputProps['selection']>()
   const [value, setValue] = useState('')
   const [showTokenSelector, setShowTokenSelector] = useState(false)
@@ -109,6 +123,17 @@ export function FiatOnRampScreen({ navigation }: Props): JSX.Element {
     error: serviceProvidersError,
   } = useFiatOnRampAggregatorServiceProvidersQuery()
 
+  // preload service provider logos for given quotes for the next screen
+  useEffect(() => {
+    if (serviceProvidersResponse?.serviceProviders && quotes) {
+      const quotesServiceProviderNames = quotes.map((q) => q.serviceProvider)
+      const serviceProviders = serviceProvidersResponse.serviceProviders.filter(
+        (sp) => quotesServiceProviderNames.indexOf(sp.serviceProvider) !== -1
+      )
+      preloadServiceProviderLogos(serviceProviders, isDarkMode)
+    }
+  }, [serviceProvidersResponse, quotes, isDarkMode])
+
   const { errorText, errorColor } = useParseFiatOnRampError(
     quotesError || serviceProvidersError,
     meldSupportedFiatCurrency.code

apps/web/.env

@@ -16,4 +16,5 @@ REACT_APP_TEMP_API_URL="https://temp.gateway.uniswap.org/v1"
 REACT_APP_UNISWAP_API_URL="https://interface.gateway.uniswap.org/v2"
 REACT_APP_UNISWAP_BASE_API_URL="https://interface.gateway.uniswap.org/"
 REACT_APP_UNISWAP_GATEWAY_DNS="https://interface.gateway.uniswap.org/v2"
+REACT_APP_UNITAGS_API_URL="https://gateway.uniswap.org/v2/unitags"
 REACT_APP_WALLET_CONNECT_PROJECT_ID="c6c9bacd35afa3eb9e6cccf6d8464395"

apps/web/cypress/e2e/swap/swap.test.ts

@@ -53,6 +53,7 @@ describe('Swap', () => {
     })
 
     it('swaps ETH for USDC', () => {
+      cy.interceptGraphqlOperation('Activity', 'mini-portfolio/empty_activity.json')
       cy.visit('/swap')
       cy.hardhat({ automine: false })
       getBalance(USDC_MAINNET).then((initialBalance) => {

apps/web/cypress/support/commands.ts

@@ -21,6 +21,12 @@ declare global {
        * @returns {Chainable<Subject>}
        */
       waitForAmplitudeEvent(eventName: string, requiredProperties?: string[]): Chainable<Subject>
+      /**
+       * Intercepts a specific graphql operation and responds with the given fixture.
+       * @param {string} operationName - The name of the graphql operation to intercept.
+       * @param {string} fixturePath - The path to the fixture to respond with.
+       */
+      interceptGraphqlOperation(operationName: string, fixturePath: string): Chainable<Subject>
     }
     interface VisitOptions {
       serviceWorker?: true
@@ -96,3 +102,13 @@ Cypress.Commands.add('waitForAmplitudeEvent', (eventName, requiredProperties) =>
   }
   return findAndDiscardEventsUpToTarget()
 })
+
+Cypress.Commands.add('interceptGraphqlOperation', (operationName, fixturePath) => {
+  return cy.intercept(/(?:interface|beta).gateway.uniswap.org\/v1\/graphql/, (req) => {
+    if (req.body.operationName === operationName) {
+      req.reply({ fixture: fixturePath })
+    } else {
+      req.continue()
+    }
+  })
+})

apps/web/hardhat.config.js

@@ -14,7 +14,7 @@ const forks = {
   [ChainId.MAINNET]: {
     url: `https://mainnet.infura.io/v3/${process.env.REACT_APP_INFURA_KEY}`,
     // Temporarily hardcoding this to fix e2e tests as we investigate source of swap tests failing on older blocknumbers
-    blockNumber: 19236051,
+    blockNumber: 19270708,
     ...forkingConfig,
   },
   [ChainId.POLYGON]: {

apps/web/package.json

@@ -198,12 +198,12 @@
     "@uniswap/merkle-distributor": "1.0.1",
     "@uniswap/permit2-sdk": "1.2.0",
     "@uniswap/redux-multicall": "1.1.8",
-    "@uniswap/router-sdk": "1.7.1",
+    "@uniswap/router-sdk": "1.8.0",
     "@uniswap/sdk-core": "4.1.2",
     "@uniswap/smart-order-router": "3.17.3",
     "@uniswap/token-lists": "1.0.0-beta.33",
     "@uniswap/uniswapx-sdk": "1.4.1",
-    "@uniswap/universal-router-sdk": "1.5.8",
+    "@uniswap/universal-router-sdk": "1.7.1",
     "@uniswap/v2-core": "1.0.1",
     "@uniswap/v2-periphery": "1.1.0-beta.0",
     "@uniswap/v2-sdk": "4.1.0",

apps/web/src/components/AccountDrawer/AuthenticatedHeader.tsx

@@ -27,9 +27,11 @@ import { useAppDispatch } from 'state/hooks'
 import { setRecentConnectionDisconnected } from 'state/user/reducer'
 import styled from 'styled-components'
 import { CopyHelper, ThemedText } from 'theme/components'
+import { Icons } from 'ui/src'
 import { shortenAddress } from 'utilities/src/addresses'
 import { isPathBlocked } from 'utils/blockedPaths'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
+import { useUnitagByAddress } from 'wallet/src/features/unitags/hooks'
 import { useCloseModal, useFiatOnrampAvailability, useOpenModal, useToggleModal } from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/reducer'
 import { useUserHasAvailableClaim, useUserUnclaimedAmount } from '../../state/claim/hooks'
@@ -200,6 +202,7 @@ export default function AuthenticatedHeader({
   const [showDisconnectConfirm, setShowDisconnectConfirm] = useState(false)
 
   const isUniTagsEnabled = useUniTagsEnabled()
+  const { unitag } = useUnitagByAddress(account, isUniTagsEnabled && Boolean(account))
 
   return (
     <AuthenticatedHeaderWrapper>
@@ -209,10 +212,14 @@ export default function AuthenticatedHeader({
           {account && (
             <AccountNamesWrapper>
               <ThemedText.SubHeader>
-                <CopyText toCopy={ENSName ?? account}>{ENSName ?? shortenAddress(account)}</CopyText>
+                <CopyText toCopy={unitag?.username ?? ENSName ?? account}>
+                  <Row gap="xs">
+                    {unitag?.username ?? ENSName ?? shortenAddress(account)}
+                    {unitag?.username && <Icons.Unitag size={24} />}
+                  </Row>
+                </CopyText>
               </ThemedText.SubHeader>
-              {/* Displays smaller view of account if ENS name was rendered above */}
-              {ENSName && (
+              {(unitag || ENSName) && (
                 <ThemedText.BodySmall color="neutral2">
                   <CopyText toCopy={account}>{shortenAddress(account)}</CopyText>
                 </ThemedText.BodySmall>

apps/web/src/components/Banner/UniTag/index.tsx

@@ -4,12 +4,10 @@ import Column, { ColumnCenter } from 'components/Column'
 import Row from 'components/Row'
 import styled, { css } from 'styled-components'
 import { BREAKPOINTS } from 'theme'
-import { useIsDarkMode } from 'theme/components/ThemeToggle'
+import { Icons } from 'ui/src'
 import pfp1 from './assets/pfp1.png'
 import pfp2 from './assets/pfp2.png'
 import pfp3 from './assets/pfp3.png'
-import unigramDark from './assets/unigramDark.png'
-import unigramLight from './assets/unigramLight.png'
 import { useUniTagBanner } from './useUniTagBanner'
 
 const Container = styled(Row)`
@@ -62,12 +60,6 @@ const Subtitle = styled.div<{ large?: boolean }>`
       }
     `}
 `
-const UniTagIcon = styled.img`
-  height: 20px;
-  width: 20px;
-  margin: 4px;
-  image-rendering: optimizeQuality;
-`
 const ButtonStyles = css<{ large?: boolean }>`
   height: ${({ large }) => (large ? '40px' : '32px')};
   width: 100%;
@@ -134,14 +126,13 @@ const UserName = styled.div<{ $color: string; $rotation: number }>`
   margin-top: -8px;
 `
 export function Copy({ large }: { large?: boolean }) {
-  const isDarkMode = useIsDarkMode()
   return (
     <Column gap="4px">
-      <Row>
+      <Row gap="4px">
         <Title large={large}>
           <Trans>Claim your Uniswap username</Trans>
         </Title>
-        {large && <UniTagIcon src={isDarkMode ? unigramDark : unigramLight} alt="uniTagIcon" />}
+        {large && <Icons.Unitag size={24} />}
       </Row>
       <Subtitle large={large}>
         <Trans>Sharing your address has never been easier. Claim now in the mobile app!</Trans>

apps/web/src/components/Charts/VolumeChart/index.tsx

 import { QueryResult } from '@apollo/client'
-import { Trans, t } from '@lingui/macro'
+import { t } from '@lingui/macro'
 import { ChartHeader } from 'components/Charts/ChartHeader'
 import { Chart, ChartModelParams } from 'components/Charts/ChartModel'
+import { TooltipPrimitive } from 'components/Charts/Primitives/tooltip'
 import { getCumulativeVolume } from 'components/Charts/VolumeChart/utils'
 import { useHeaderDateFormatter } from 'components/Charts/hooks'
-import Column from 'components/Column'
+import { ChartHoverTooltipWrapper } from 'components/Pools/PoolDetails/ChartSection'
 import { BIPS_BASE } from 'constants/misc'
-import { Chain, Exact, HistoryDuration, TokenHistoricalVolumesQuery } from 'graphql/data/__generated__/types-and-hooks'
+import {
+  Chain,
+  Exact,
+  HistoryDuration,
+  TimestampedAmount,
+  TokenHistoricalVolumesQuery,
+} from 'graphql/data/__generated__/types-and-hooks'
 import { TimePeriod, toHistoryDuration } from 'graphql/data/util'
 import { UTCTimestamp } from 'lightweight-charts'
 import { useMemo } from 'react'
 import { useTheme } from 'styled-components'
 import { ThemedText } from 'theme/components'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
-
 import { CustomVolumeChartModel, CustomVolumeChartModelParams } from './CustomVolumeChartModel'
 import { SingleHistogramData } from './renderer'
 
+interface VolumeChartModelParams extends ChartModelParams<SingleHistogramData>, CustomVolumeChartModelParams {
+  TooltipBody?: React.FunctionComponent<{ data: SingleHistogramData }>
+}
+
 class VolumeChartModel extends CustomVolumeChartModel<SingleHistogramData> {
-  constructor(chartDiv: HTMLDivElement, params: ChartModelParams<SingleHistogramData> & CustomVolumeChartModelParams) {
+  private tooltipPrimitive: TooltipPrimitive<SingleHistogramData> | null = null
+
+  constructor(chartDiv: HTMLDivElement, params: VolumeChartModelParams) {
     super(chartDiv, params)
+
+    if (params.TooltipBody) {
+      this.tooltipPrimitive = new TooltipPrimitive({ followMode: 'tracking', tooltipBody: params.TooltipBody })
+      this.series.attachPrimitive(this.tooltipPrimitive)
+    }
   }
 
-  updateOptions(params: ChartModelParams<SingleHistogramData> & CustomVolumeChartModelParams) {
+  updateOptions(params: VolumeChartModelParams) {
     const volumeChartOptions = {
       autoSize: true,
       rightPriceScale: {
@@ -67,14 +84,10 @@ function VolumeChartHeader({
   crosshairData,
   volumes,
   timePeriod,
-  feeTier,
-  noFeesData,
 }: {
   crosshairData?: SingleHistogramData
   volumes: SingleHistogramData[]
   timePeriod: TimePeriod
-  feeTier?: number
-  noFeesData: boolean
 }) {
   const { formatFiatPrice } = useFormatter()
   const headerDateFormatter = useHeaderDateFormatter()
@@ -82,7 +95,6 @@ function VolumeChartHeader({
   const display = useMemo(() => {
     const displayValues = {
       volume: '-',
-      fees: '-',
       time: '-',
     }
     const priceFormatter = (price?: number) =>
@@ -93,39 +105,44 @@ function VolumeChartHeader({
     if (crosshairData === undefined) {
       const cumulativeVolume = getCumulativeVolume(volumes)
       displayValues.volume = priceFormatter(cumulativeVolume)
-      displayValues.fees = priceFormatter(cumulativeVolume * ((feeTier ?? 0) / BIPS_BASE / 100))
       displayValues.time = formatHistoryDuration(toHistoryDuration(timePeriod))
     } else {
       displayValues.volume = priceFormatter(crosshairData.value)
-      const fees = crosshairData.value * ((feeTier ?? 0) / BIPS_BASE / 100)
-      displayValues.fees = priceFormatter(fees)
       displayValues.time = headerDateFormatter(crosshairData.time)
     }
     return displayValues
-  }, [crosshairData, feeTier, formatFiatPrice, headerDateFormatter, timePeriod, volumes])
+  }, [crosshairData, formatFiatPrice, headerDateFormatter, timePeriod, volumes])
 
   return (
     <ChartHeader
-      value={
-        noFeesData ? (
-          <ThemedText.HeadlineLarge color="inherit">{display.volume}</ThemedText.HeadlineLarge>
-        ) : (
-          <Column>
-            <ThemedText.HeadlineSmall color="inherit">
-              {display.volume} <Trans>volume</Trans>
-            </ThemedText.HeadlineSmall>
-            <ThemedText.HeadlineSmall color="inherit">
-              {display.fees} <Trans>fees</Trans>
-            </ThemedText.HeadlineSmall>
-          </Column>
-        )
-      }
+      value={<ThemedText.HeadlineLarge color="inherit">{display.volume}</ThemedText.HeadlineLarge>}
       time={crosshairData?.time}
       timePlaceholder={formatHistoryDuration(toHistoryDuration(timePeriod))}
     />
   )
 }
 
+function FeesTooltipDisplay({
+  data,
+  feeTier,
+  format: { formatFiatPrice },
+}: {
+  data: SingleHistogramData
+  feeTier?: number
+  format: ReturnType<typeof useFormatter>
+}) {
+  const fees = data.value * ((feeTier ?? 0) / BIPS_BASE / 100)
+
+  return (
+    <ChartHoverTooltipWrapper>
+      <ThemedText.BodySmall>{t`Fees: ${formatFiatPrice({
+        price: fees,
+        type: NumberType.ChartFiatValue,
+      })}`}</ThemedText.BodySmall>
+    </ChartHoverTooltipWrapper>
+  )
+}
+
 interface VolumeChartProps {
   height: number
   volumeQueryResult: QueryResult<
@@ -138,13 +155,15 @@ interface VolumeChartProps {
   >
   feeTier?: number
   timePeriod: TimePeriod
+  TooltipBody?: React.FunctionComponent<{ data: SingleHistogramData }>
 }
 
 export function VolumeChart({ height, volumeQueryResult, feeTier, timePeriod }: VolumeChartProps) {
   const theme = useTheme()
+  const format = useFormatter()
 
   const { data: queryData } = volumeQueryResult
-  const volumes = queryData?.token?.market?.historicalVolume
+  const volumes: readonly TimestampedAmount[] | undefined = queryData?.token?.market?.historicalVolume
 
   const data: SingleHistogramData[] = useMemo(
     () =>
@@ -154,23 +173,24 @@ export function VolumeChart({ height, volumeQueryResult, feeTier, timePeriod }:
     [volumes]
   )
 
-  const noFeesData = feeTier === undefined // i.e. if is token volume chart
   const params = useMemo(
-    () => ({ data, colors: [theme.accent1], headerHeight: noFeesData ? 75 : 90 }),
-    [data, theme.accent1, noFeesData]
+    () => ({
+      data,
+      colors: [theme.accent1],
+      headerHeight: 75,
+      TooltipBody:
+        feeTier === undefined // i.e. if is token volume chart
+          ? undefined
+          : ({ data }: { data: SingleHistogramData }) => (
+              <FeesTooltipDisplay data={data} feeTier={feeTier} format={format} />
+            ),
+    }),
+    [data, theme.accent1, feeTier, format]
   )
 
   return (
     <Chart Model={VolumeChartModel} params={params} height={height}>
-      {(crosshairData) => (
-        <VolumeChartHeader
-          crosshairData={crosshairData}
-          volumes={data}
-          timePeriod={timePeriod}
-          feeTier={feeTier}
-          noFeesData={noFeesData}
-        />
-      )}
+      {(crosshairData) => <VolumeChartHeader crosshairData={crosshairData} volumes={data} timePeriod={timePeriod} />}
     </Chart>
   )
 }

apps/web/src/components/Identicon/StatusIcon.tsx

@@ -7,6 +7,9 @@ import { useIsDarkMode } from 'theme/components/ThemeToggle'
 import { flexColumnNoWrap } from 'theme/styles'
 import { getWalletMeta } from 'utils/walletMeta'
 
+import { useUniTagsEnabled } from 'featureFlags/flags/uniTags'
+import { navSearchInputVisibleSize } from 'hooks/useScreenSize'
+import { useUnitagByAddress } from 'wallet/src/features/unitags/hooks'
 import sockImg from '../../assets/svg/socks.svg'
 import { useHasSocks } from '../../hooks/useSocksBalance'
 import Identicon from '../Identicon'
@@ -16,7 +19,9 @@ export const IconWrapper = styled.div<{ size?: number }>`
   ${flexColumnNoWrap};
   align-items: center;
   justify-content: center;
-  margin-right: 4px;
+  @media only screen and (min-width: ${navSearchInputVisibleSize}px) {
+    margin-right: 4px;
+  }
   & > img,
   span {
     height: ${({ size }) => (size ? size + 'px' : '32px')};
@@ -46,6 +51,21 @@ const MiniIconContainer = styled.div<{ side: 'left' | 'right' }>`
   }
 `
 
+const UnigramContainer = styled.div<{ $iconSize: number }>`
+  height: ${({ $iconSize: iconSize }) => `${iconSize}px`};
+  width: ${({ $iconSize: iconSize }) => `${iconSize}px`};
+  border-radius: 50%;
+  background-color: ${({ theme }) => theme.surface3};
+  font-size: initial;
+`
+
+const Unigram = styled.img`
+  height: inherit;
+  width: inherit;
+  border-radius: inherit;
+  object-fit: cover;
+`
+
 const MiniImg = styled.img`
   width: 16px;
   height: 16px;
@@ -76,12 +96,20 @@ const MiniWalletIcon = ({ connection, side }: { connection: Connection; side: 'l
 }
 
 const MainWalletIcon = ({ account, connection, size }: { account: string; connection: Connection; size: number }) => {
+  const { unitag } = useUnitagByAddress(account, useUniTagsEnabled() && Boolean(account))
   const { avatar } = useENSAvatar(account ?? undefined)
 
   if (!account) return null
 
-  const hasIdenticon = avatar || connection.getProviderInfo().name === 'MetaMask'
+  if (unitag && unitag.metadata?.avatar) {
+    return (
+      <UnigramContainer $iconSize={size}>
+        <Unigram alt={unitag.username} src={unitag.metadata.avatar} />
+      </UnigramContainer>
+    )
+  }
 
+  const hasIdenticon = avatar || connection.getProviderInfo().name === 'MetaMask'
   return hasIdenticon ? <Identicon account={account} size={size} /> : <Unicon address={account} size={size} />
 }
 

apps/web/src/components/Identicon/__snapshots__/StatusIcon.test.tsx.snap

@@ -18,7 +18,6 @@ exports[`StatusIcon with account renders children in correct order 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  margin-right: 4px;
 }
 
 .c0 > img,
@@ -82,6 +81,12 @@ exports[`StatusIcon with account renders children in correct order 1`] = `
   height: 16px;
 }
 
+@media only screen and (min-width:1100px) {
+  .c0 {
+    margin-right: 4px;
+  }
+}
+
 @media (max-width:960px) {
   .c0 {
     -webkit-align-items: flex-end;
@@ -146,7 +151,6 @@ exports[`StatusIcon with no account renders children in correct order 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  margin-right: 4px;
 }
 
 .c0 > img,
@@ -210,6 +214,12 @@ exports[`StatusIcon with no account renders children in correct order 1`] = `
   height: 16px;
 }
 
+@media only screen and (min-width:1100px) {
+  .c0 {
+    margin-right: 4px;
+  }
+}
+
 @media (max-width:960px) {
   .c0 {
     -webkit-align-items: flex-end;

apps/web/src/components/Pools/PoolDetails/ChartSection.tsx

@@ -236,7 +236,7 @@ const FadeInSubheader = styled(ThemedText.SubHeader)`
   ${textFadeIn}
 `
 
-const LiquidityTooltipDisplayWrapper = styled.div`
+export const ChartHoverTooltipWrapper = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.surface1};
   border-radius: 8px;
@@ -276,10 +276,10 @@ function LiquidityTooltipDisplay({
       : 0
 
   return (
-    <LiquidityTooltipDisplayWrapper>
+    <ChartHoverTooltipWrapper>
       <ThemedText.BodySmall>{t`${tokenADescriptor} locked: ${displayValue0}`}</ThemedText.BodySmall>
       <ThemedText.BodySmall>{t`${tokenBDescriptor} locked: ${displayValue1}`}</ThemedText.BodySmall>
-    </LiquidityTooltipDisplayWrapper>
+    </ChartHoverTooltipWrapper>
   )
 }
 

apps/web/src/components/Web3Status/index.tsx

@@ -25,6 +25,9 @@ import { colors } from 'theme/colors'
 import { flexRowNoWrap } from 'theme/styles'
 import { shortenAddress } from 'utilities/src/addresses'
 
+import { useUniTagsEnabled } from 'featureFlags/flags/uniTags'
+import { Icons } from 'ui/src'
+import { useUnitagByAddress } from 'wallet/src/features/unitags/hooks'
 import { ButtonSecondary } from '../Button'
 import StatusIcon from '../Identicon/StatusIcon'
 import { RowBetween } from '../Row'
@@ -143,6 +146,7 @@ function Web3StatusInner() {
   const activeWeb3 = useWeb3React()
   const lastWeb3 = useLast(useWeb3React(), ignoreWhileSwitchingChain)
   const { account, connector } = useMemo(() => (activeWeb3.account ? activeWeb3 : lastWeb3), [activeWeb3, lastWeb3])
+  const { unitag } = useUnitagByAddress(account, useUniTagsEnabled() && Boolean(account))
   const { ENSName, loading: ENSLoading } = useENSName(account)
   const connection = getConnection(connector)
   const dispatch = useAppDispatch()
@@ -222,7 +226,8 @@ function Web3StatusInner() {
             </RowBetween>
           ) : (
             <AddressAndChevronContainer>
-              <Text>{ENSName ?? shortenAddress(account)}</Text>
+              <Text>{unitag?.username ?? ENSName ?? shortenAddress(account)}</Text>
+              {unitag?.username && <Icons.Unitag size={24} />}
             </AddressAndChevronContainer>
           )}
         </Web3StatusConnected>

apps/web/src/env.d.ts

@@ -2,6 +2,8 @@
 /// <reference path="../../../index.d.ts" />
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path="../../../packages/wallet/src/react-native-dotenv.d.ts" />
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../../../packages/ui/src/env.d.ts" />
 
 import { tamaguiConfig } from 'ui/src'
 

apps/web/src/index.tsx

@@ -16,10 +16,10 @@ import { QueryClient, QueryClientProvider } from 'react-query'
 import { Provider } from 'react-redux'
 import { BrowserRouter, HashRouter, useLocation } from 'react-router-dom'
 import { SystemThemeUpdater, ThemeColorMetaUpdater } from 'theme/components/ThemeToggle'
+import { TamaguiProvider } from 'theme/tamaguiProvider'
 import { isBrowserRouterEnabled } from 'utils/env'
 import { getCanonicalUrl } from 'utils/urlRoutes'
-
-import { TamaguiProvider } from 'theme/tamaguiProvider'
+import { UnitagUpdaterContextProvider } from 'wallet/src/features/unitags/context'
 import Web3Provider from './components/Web3Provider'
 import { LanguageProvider } from './i18n'
 import App from './pages/App'
@@ -30,7 +30,7 @@ import ListsUpdater from './state/lists/updater'
 import LogsUpdater from './state/logs/updater'
 import OrderUpdater from './state/signatures/updater'
 import TransactionUpdater from './state/transactions/updater'
-import { ThemedGlobalStyle, ThemeProvider } from './theme'
+import { ThemeProvider, ThemedGlobalStyle } from './theme'
 import RadialGradientByChainUpdater from './theme/components/RadialGradientByChainUpdater'
 
 if (window.ethereum) {
@@ -74,13 +74,15 @@ createRoot(container).render(
               <Web3Provider>
                 <ApolloProvider client={apolloClient}>
                   <BlockNumberProvider>
-                    <Updaters />
-                    <ThemeProvider>
-                      <TamaguiProvider>
-                        <ThemedGlobalStyle />
-                        <App />
-                      </TamaguiProvider>
-                    </ThemeProvider>
+                    <UnitagUpdaterContextProvider>
+                      <Updaters />
+                      <ThemeProvider>
+                        <TamaguiProvider>
+                          <ThemedGlobalStyle />
+                          <App />
+                        </TamaguiProvider>
+                      </ThemeProvider>
+                    </UnitagUpdaterContextProvider>
                   </BlockNumberProvider>
                 </ApolloProvider>
               </Web3Provider>

apps/web/src/test-utils/render.tsx

@@ -14,6 +14,7 @@ import { BrowserRouter } from 'react-router-dom'
 import store from 'state'
 import { ThemeProvider } from 'theme'
 import { TamaguiProvider } from 'theme/tamaguiProvider'
+import { UnitagUpdaterContextProvider } from 'wallet/src/features/unitags/context'
 
 i18n.load({
   [DEFAULT_LOCALE]: catalog.messages,
@@ -38,9 +39,11 @@ const WithProviders = ({ children }: { children?: ReactNode }) => {
              */}
             <MockedProvider showWarnings={false}>
               <BlockNumberProvider>
-                <ThemeProvider>
-                  <TamaguiProvider>{children}</TamaguiProvider>
-                </ThemeProvider>
+                <UnitagUpdaterContextProvider>
+                  <ThemeProvider>
+                    <TamaguiProvider>{children}</TamaguiProvider>
+                  </ThemeProvider>
+                </UnitagUpdaterContextProvider>
               </BlockNumberProvider>
             </MockedProvider>
           </BrowserRouter>

packages/ui/src/components/touchable/TouchableArea.tsx

@@ -21,6 +21,7 @@ export const TouchableArea = forwardRef<TamaguiElement, TouchableAreaProps>(func
     scaleTo,
     onPress,
     children,
+    hoverable,
     activeOpacity = 0.75,
     ...restProps
   },
@@ -84,6 +85,12 @@ export const TouchableArea = forwardRef<TamaguiElement, TouchableAreaProps>(func
         scale: scaleTo ?? 1,
         ...restProps.pressStyle,
       }}
+      {...(hoverable && {
+        hoverStyle: {
+          backgroundColor: '$backgroundHover',
+          ...restProps.hoverStyle,
+        },
+      })}
       onPress={onPressHandler}
       onPressIn={onPressInHandler}>
       {children}

packages/ui/src/components/touchable/TouchableArea.web.tsx

-import { styled, YStack } from 'tamagui'
-
-// TODO(EXT-248)
-// this is for web, much simpler, once we're ready we can import the TouchableArea
-// from mobile and throw it in `TouchableArea.native.tsx`
-
-export const TouchableArea = styled(YStack, {
-  cursor: 'pointer',
-})

packages/ui/src/components/touchable/types.tsx

@@ -10,6 +10,7 @@ type ExtraProps = {
   ignoreDragEvents?: boolean
   scaleTo?: number
   disabled?: boolean
+  hoverable?: boolean
 }
 
 export type TouchableAreaProps = Omit<StackProps, keyof ExtraProps> & ExtraProps

packages/utilities/src/react/hooks.ts

@@ -42,6 +42,13 @@ export function useAsyncData<T>(
 
     async function runCallback(): Promise<void> {
       isPending = true
+      setState((prevState) => {
+        if (!prevState.error) {
+          // Return the same state to avoid an unneeded re-render.
+          return prevState
+        }
+        return { ...prevState, error: undefined }
+      })
       const data = await asyncCallback()
       if (isPending) {
         lastCompletedAsyncCallbackRef.current = asyncCallback

packages/wallet/package.json

@@ -35,9 +35,9 @@
     "@typechain/ethers-v5": "7.2.0",
     "@uniswap/analytics-events": "2.31.0",
     "@uniswap/permit2-sdk": "1.2.0",
-    "@uniswap/router-sdk": "1.7.1",
+    "@uniswap/router-sdk": "1.8.0",
     "@uniswap/sdk-core": "4.1.2",
-    "@uniswap/universal-router-sdk": "1.5.8",
+    "@uniswap/universal-router-sdk": "1.7.1",
     "@uniswap/v2-sdk": "4.1.0",
     "@uniswap/v3-sdk": "3.10.2",
     "apollo-link-rest": "0.9.0",

packages/wallet/src/config.ts

@@ -51,21 +51,31 @@ const _config: Config = {
   appsflyerApiKey: process.env.APPSFLYER_API_KEY || APPSFLYER_API_KEY,
   appsflyerAppId: process.env.APPSFLYER_APP_ID || APPSFLYER_APP_ID,
   fiatOnRampApiUrl: process.env.FIAT_ON_RAMP_API_URL || FIAT_ON_RAMP_API_URL,
-  moonpayApiKey: process.env.MOONPAY_API_KEY || MOONPAY_API_KEY,
-  moonpayApiUrl: process.env.MOONPAY_API_URL || MOONPAY_API_URL,
+  moonpayApiKey:
+    process.env.REACT_APP_MOONPAY_PUBLISHABLE_KEY || process.env.MOONPAY_API_KEY || MOONPAY_API_KEY,
+  moonpayApiUrl:
+    process.env.REACT_APP_MOONPAY_API || process.env.MOONPAY_API_URL || MOONPAY_API_URL,
   moonpayWidgetApiUrl: process.env.MOONPAY_WIDGET_API_URL || MOONPAY_WIDGET_API_URL,
-  uniswapApiBaseUrl: process.env.UNISWAP_API_BASE_URL || UNISWAP_API_BASE_URL,
+  uniswapApiBaseUrl:
+    process.env.REACT_APP_UNISWAP_BASE_URL ||
+    process.env.UNISWAP_API_BASE_URL ||
+    UNISWAP_API_BASE_URL,
   uniswapApiKey: process.env.UNISWAP_API_KEY || UNISWAP_API_KEY,
   uniswapAppUrl: process.env.UNISWAP_APP_URL || UNISWAP_APP_URL,
   infuraProjectId: process.env.INFURA_PROJECT_ID || INFURA_PROJECT_ID,
   onesignalAppId: process.env.ONESIGNAL_APP_ID || ONESIGNAL_APP_ID,
-  sentryDsn: process.env.SENTRY_DSN || SENTRY_DSN,
+  sentryDsn: process.env.REACT_APP_SENTRY_DSN || process.env.SENTRY_DSN || SENTRY_DSN,
   simpleHashApiKey: process.env.SIMPLEHASH_API_KEY || SIMPLEHASH_API_KEY,
   simpleHashApiUrl: process.env.SIMPLEHASH_API_URL || SIMPLEHASH_API_URL,
-  statSigProxyUrl: process.env.STATSIG_PROXY_URL || STATSIG_PROXY_URL,
-  walletConnectProjectId: process.env.WALLETCONNECT_PROJECT_ID || WALLETCONNECT_PROJECT_ID,
+  statSigProxyUrl:
+    process.env.REACT_APP_STATSIG_PROXY_URL || process.env.STATSIG_PROXY_URL || STATSIG_PROXY_URL,
+  walletConnectProjectId:
+    process.env.REACT_APP_WALLET_CONNECT_PROJECT_ID ||
+    process.env.WALLETCONNECT_PROJECT_ID ||
+    WALLETCONNECT_PROJECT_ID,
   quicknodeBnbRpcUrl: process.env.QUICKNODE_BNB_RPC_URL || QUICKNODE_BNB_RPC_URL,
-  unitagsApiUrl: process.env.UNITAGS_API_URL || UNITAGS_API_URL,
+  unitagsApiUrl:
+    process.env.REACT_APP_UNITAGS_API_URL || process.env.UNITAGS_API_URL || UNITAGS_API_URL,
   tradingApiKey: process.env.TRADING_API_KEY || TRADING_API_KEY,
   tradingApiUrl: process.env.TRADING_API_URL || TRADING_API_URL,
   firebaseAppCheckDebugToken:

packages/wallet/src/features/fiatOnRamp/types.ts

@@ -179,6 +179,7 @@ export type FORQuoteRequest = {
   destinationCurrencyCode: string
   sourceAmount: number
   sourceCurrencyCode: string
+  walletAddress: string
 }
 
 export type FORQuote = {

packages/wallet/src/features/unitags/hooks.ts

@@ -99,9 +99,10 @@ export const useCanAddressClaimUnitag = (
 }
 
 export const useUnitagByAddress = (
-  address?: Address
+  address?: Address,
+  forceEnable?: boolean
 ): { unitag?: UnitagAddressResponse; loading: boolean } => {
-  const unitagsFeatureFlagEnabled = useFeatureFlag(FEATURE_FLAGS.Unitags)
+  const unitagsFeatureFlagEnabled = useFeatureFlag(FEATURE_FLAGS.Unitags) || forceEnable
   const { data, loading, refetch } = useUnitagByAddressQuery(
     unitagsFeatureFlagEnabled ? address : undefined
   )
@@ -121,9 +122,10 @@ export const useUnitagByAddress = (
 }
 
 export const useUnitagByName = (
-  name?: string
+  name?: string,
+  forceEnable?: boolean
 ): { unitag?: UnitagUsernameResponse; loading: boolean } => {
-  const unitagsFeatureFlagEnabled = useFeatureFlag(FEATURE_FLAGS.Unitags)
+  const unitagsFeatureFlagEnabled = useFeatureFlag(FEATURE_FLAGS.Unitags) || forceEnable
   const { data, loading, refetch } = useUnitagQuery(unitagsFeatureFlagEnabled ? name : undefined)
 
   // Force refetch if counter changes

yarn.lock

@@ -13411,12 +13411,12 @@ __metadata:
     "@uniswap/merkle-distributor": 1.0.1
     "@uniswap/permit2-sdk": 1.2.0
     "@uniswap/redux-multicall": 1.1.8
-    "@uniswap/router-sdk": 1.7.1
+    "@uniswap/router-sdk": 1.8.0
     "@uniswap/sdk-core": 4.1.2
     "@uniswap/smart-order-router": 3.17.3
     "@uniswap/token-lists": 1.0.0-beta.33
     "@uniswap/uniswapx-sdk": 1.4.1
-    "@uniswap/universal-router-sdk": 1.5.8
+    "@uniswap/universal-router-sdk": 1.7.1
     "@uniswap/v2-core": 1.0.1
     "@uniswap/v2-periphery": 1.1.0-beta.0
     "@uniswap/v2-sdk": 4.1.0
@@ -13764,16 +13764,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@uniswap/router-sdk@npm:1.7.1, @uniswap/router-sdk@npm:^1.6.0":
-  version: 1.7.1
-  resolution: "@uniswap/router-sdk@npm:1.7.1"
+"@uniswap/router-sdk@npm:1.8.0, @uniswap/router-sdk@npm:^1.6.0, @uniswap/router-sdk@npm:^1.8.0":
+  version: 1.8.0
+  resolution: "@uniswap/router-sdk@npm:1.8.0"
   dependencies:
     "@ethersproject/abi": ^5.5.0
     "@uniswap/sdk-core": ^4.0.7
     "@uniswap/swap-router-contracts": ^1.1.0
-    "@uniswap/v2-sdk": ^3.2.0
-    "@uniswap/v3-sdk": ^3.10.0
-  checksum: 9d93a454da8badad038afe10563fb7556d74b99cd23b2aff10faf58f927e284bc0be21bbb3a569b90f339057bb3ecc698aea85a38c42960632978eca1669bb0f
+    "@uniswap/v2-sdk": ^4.1.0
+    "@uniswap/v3-sdk": ^3.10.1
+  checksum: c885e4a2e42f62768a7fa1f7c5561d205b260975c728fb027537d5af4b08fea37435c6705d7bf2ae8242e25385afda876fce98de9afc689825ed60504a3a5550
   languageName: node
   linkType: hard
 
@@ -13844,7 +13844,7 @@ __metadata:
     "@types/redux-logger": 3.0.9
     "@types/uuid": 9.0.1
     "@uniswap/eslint-config": "workspace:^"
-    "@uniswap/universal-router-sdk": 1.5.8
+    "@uniswap/universal-router-sdk": 1.7.1
     "@uniswap/v3-sdk": 3.10.2
     clean-webpack-plugin: ^4.0.0
     copy-webpack-plugin: ^11.0.0
@@ -13871,10 +13871,11 @@ __metadata:
     react-router-dom: 6.10.0
     redux: 4.2.1
     redux-logger: 3.0.6
-    redux-persist: 6.0.0
     redux-saga: 1.2.2
+    reduxed-chrome-storage: 3.0.10
     serve: ^14.2.0
     swc-loader: ^0.2.3
+    symbol-observable: 4.0.0
     typed-redux-saga: 1.5.0
     typescript: 5.3.3
     ua-parser-js: 1.0.37
@@ -13882,7 +13883,6 @@ __metadata:
     utilities: "workspace:^"
     uuid: 9.0.0
     wallet: "workspace:^"
-    webext-redux: ^2.1.9
     webpack: 5.89.0
     webpack-cli: ^5.0.1
     webpack-dev-server: ^4.13.1
@@ -13923,41 +13923,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@uniswap/universal-router-sdk@npm:1.5.8, @uniswap/universal-router-sdk@npm:^1.5.4, @uniswap/universal-router-sdk@npm:^1.5.8":
-  version: 1.5.8
-  resolution: "@uniswap/universal-router-sdk@npm:1.5.8"
+"@uniswap/universal-router-sdk@npm:1.7.1, @uniswap/universal-router-sdk@npm:^1.5.4, @uniswap/universal-router-sdk@npm:^1.5.8":
+  version: 1.7.1
+  resolution: "@uniswap/universal-router-sdk@npm:1.7.1"
   dependencies:
     "@uniswap/permit2-sdk": ^1.2.0
-    "@uniswap/router-sdk": ^1.6.0
-    "@uniswap/sdk-core": ^4.0.0
-    "@uniswap/universal-router": 1.4.3
-    "@uniswap/v2-sdk": ^3.2.0
-    "@uniswap/v3-sdk": ^3.10.0
+    "@uniswap/router-sdk": ^1.8.0
+    "@uniswap/sdk-core": ^4.0.7
+    "@uniswap/universal-router": 1.6.0
+    "@uniswap/v2-sdk": ^4.1.0
+    "@uniswap/v3-sdk": ^3.10.1
     bignumber.js: ^9.0.2
     ethers: ^5.3.1
-  checksum: c6a4dd4c087405d02f3dadf9ae5a32636e3c7f363d3c2cbac2313cbcb2851a3e2d949427251b423882cc529f8deb6ff93586db6987e141c8460a911c6a0995f3
-  languageName: node
-  linkType: hard
-
-"@uniswap/universal-router@npm:1.4.3":
-  version: 1.4.3
-  resolution: "@uniswap/universal-router@npm:1.4.3"
-  dependencies:
-    "@openzeppelin/contracts": 4.7.0
-    "@uniswap/v2-core": 1.0.1
-    "@uniswap/v3-core": 1.0.0
-  checksum: f5b86a1c7c083f28ff7d64770437a3a9474c2b923b78652c2b43e1ee8f5514c40479ce0d210ce31338e8d4fdc4c9c728c7e2d1a1959a24deb31e8649b3df0a37
+  checksum: 4b2036ac4f320c7b8aa107f5b4fad17c8e6bf3b56d22e0297085ad8742bd7277573250701d834fb5d79c5571f60b160f6895d22856cf616142b19a74469cd9ca
   languageName: node
   linkType: hard
 
-"@uniswap/universal-router@npm:^1.0.1":
-  version: 1.5.1
-  resolution: "@uniswap/universal-router@npm:1.5.1"
+"@uniswap/universal-router@npm:1.6.0, @uniswap/universal-router@npm:^1.0.1":
+  version: 1.6.0
+  resolution: "@uniswap/universal-router@npm:1.6.0"
   dependencies:
     "@openzeppelin/contracts": 4.7.0
     "@uniswap/v2-core": 1.0.1
     "@uniswap/v3-core": 1.0.0
-  checksum: e5b05c7b8d544fce33b8b944aee2e6638b52b3b31b83205bf648109a24bc84cf2f3ac43b8e0416463a22c8d9c587bc285bf04712012e7d1a14f2bd803fd71e1c
+  checksum: c91e4a248f983378f806b2d7b1e2c9cdac5996d7ab46c323c35147f6f8e32a67ca330916ac0692275525236b557b5d39230fadf88ab2af7ba7c814cd81ed903b
   languageName: node
   linkType: hard
 
@@ -14025,7 +14014,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@uniswap/v3-sdk@npm:3.10.2, @uniswap/v3-sdk@npm:^3.10.0":
+"@uniswap/v3-sdk@npm:3.10.2, @uniswap/v3-sdk@npm:^3.10.0, @uniswap/v3-sdk@npm:^3.10.1":
   version: 3.10.2
   resolution: "@uniswap/v3-sdk@npm:3.10.2"
   dependencies:
@@ -30883,13 +30872,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.assignin@npm:^4.2.0":
-  version: 4.2.0
-  resolution: "lodash.assignin@npm:4.2.0"
-  checksum: 4b55bc1d65ccd7648fdba8a4316d10546929bf0beb5950830d86c559948cf170f0e65b77c95e66b45b511b85a31161714de8b2008d2537627ef3c7759afe36a6
-  languageName: node
-  linkType: hard
-
 "lodash.camelcase@npm:^4.3.0":
   version: 4.3.0
   resolution: "lodash.camelcase@npm:4.3.0"
@@ -30904,13 +30886,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.clonedeep@npm:^4.5.0":
-  version: 4.5.0
-  resolution: "lodash.clonedeep@npm:4.5.0"
-  checksum: 92c46f094b064e876a23c97f57f81fbffd5d760bf2d8a1c61d85db6d1e488c66b0384c943abee4f6af7debf5ad4e4282e74ff83177c9e63d8ff081a4837c3489
-  languageName: node
-  linkType: hard
-
 "lodash.debounce@npm:4.0.8, lodash.debounce@npm:^4.0.8":
   version: 4.0.8
   resolution: "lodash.debounce@npm:4.0.8"
@@ -38609,6 +38584,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"reduxed-chrome-storage@npm:3.0.10":
+  version: 3.0.10
+  resolution: "reduxed-chrome-storage@npm:3.0.10"
+  dependencies:
+    uuid: ^8.3
+  peerDependencies:
+    redux: ^4
+  checksum: 11e5de8322db373e57dcf212fbef7365637dd008752348958fe7fbc2e8ec536ca453a629d0aba0be94c05d509d77136ee05574f3c08d127e094f88560e88a45c
+  languageName: node
+  linkType: hard
+
 "reflect-metadata@npm:0.1.13":
   version: 0.1.13
   resolution: "reflect-metadata@npm:0.1.13"
@@ -41782,7 +41768,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"symbol-observable@npm:^4.0.0":
+"symbol-observable@npm:4.0.0, symbol-observable@npm:^4.0.0":
   version: 4.0.0
   resolution: "symbol-observable@npm:4.0.0"
   checksum: 212c7edce6186634d671336a88c0e0bbd626c2ab51ed57498dc90698cce541839a261b969c2a1e8dd43762133d47672e8b62e0b1ce9cf4157934ba45fd172ba8
@@ -44136,7 +44122,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"uuid@npm:^8.0.0, uuid@npm:^8.3.2":
+"uuid@npm:^8.0.0, uuid@npm:^8.3, uuid@npm:^8.3.2":
   version: 8.3.2
   resolution: "uuid@npm:8.3.2"
   bin:
@@ -44604,9 +44590,9 @@ __metadata:
     "@uniswap/analytics-events": 2.31.0
     "@uniswap/eslint-config": "workspace:^"
     "@uniswap/permit2-sdk": 1.2.0
-    "@uniswap/router-sdk": 1.7.1
+    "@uniswap/router-sdk": 1.8.0
     "@uniswap/sdk-core": 4.1.2
-    "@uniswap/universal-router-sdk": 1.5.8
+    "@uniswap/universal-router-sdk": 1.7.1
     "@uniswap/v2-sdk": 4.1.0
     "@uniswap/v3-sdk": 3.10.2
     apollo-link-rest: 0.9.0
@@ -44767,18 +44753,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webext-redux@npm:^2.1.9":
-  version: 2.1.9
-  resolution: "webext-redux@npm:2.1.9"
-  dependencies:
-    lodash.assignin: ^4.2.0
-    lodash.clonedeep: ^4.5.0
-  peerDependencies:
-    redux: ">= 3 <= 4"
-  checksum: 0cc64d1420d8494380fbab9db7f8d9cdd43487bb52452c38d229f639635cdbf3115d04f5496aa867069dbb8c12683da49acc80961686b0751a3beec117e50f56
-  languageName: node
-  linkType: hard
-
 "webidl-conversions@npm:^3.0.0":
   version: 3.0.1
   resolution: "webidl-conversions@npm:3.0.1"