ci(release): publish latest release

CODEOWNERS

+* @uniswap/web-admins

RELEASE

-We are back with some small updates! Here’s the latest:
+IPFS hash of the deployment:
+- CIDv0: `QmTnL81pVbid6ABJzYyucbEiN1aKWHXZTaES1SbUuEhcTv`
+- CIDv1: `bafybeicq32clkiemet2nuz4wwrcfcambu4gie5ykfgsno7ucw7lhll2zku`
 
-- Expanded Fiat Onramp Providers: We’ve continued to add more options for onramp providers to make it easier to change your fiat into crypto, without leaving the app. 
+The latest release is always mirrored at [app.uniswap.org](https://app.uniswap.org).
+
+You can also access the Uniswap Interface from an IPFS gateway.
+**BEWARE**: The Uniswap interface uses [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) to remember your settings, such as which tokens you have imported.
+**You should always use an IPFS gateway that enforces origin separation**, or our hosted deployment of the latest release at [app.uniswap.org](https://app.uniswap.org).
+Your Uniswap settings are never remembered across different URLs.
+
+IPFS gateways:
+- https://bafybeicq32clkiemet2nuz4wwrcfcambu4gie5ykfgsno7ucw7lhll2zku.ipfs.dweb.link/
+- https://bafybeicq32clkiemet2nuz4wwrcfcambu4gie5ykfgsno7ucw7lhll2zku.ipfs.cf-ipfs.com/
+- [ipfs://QmTnL81pVbid6ABJzYyucbEiN1aKWHXZTaES1SbUuEhcTv/](ipfs://QmTnL81pVbid6ABJzYyucbEiN1aKWHXZTaES1SbUuEhcTv/)
+
+### 5.61.2 (2024-12-07)
+
+
+### Bug Fixes
+
+* **web:** prevent crash when sending on bnb chain (#14358) 8b223f0
 
-Other Changes:
 
-- More consistent padding and font sizing
-- Various bug fixes and performance improvements

VERSION

-extension/1.10.0
+web/5.61.2
\ No newline at end of file

apps/extension/package.json

@@ -4,6 +4,7 @@
   "browserslist": "last 2 chrome versions",
   "dependencies": {
     "@apollo/client": "3.10.4",
+    "@datadog/browser-logs": "5.20.0",
     "@datadog/browser-rum": "5.23.3",
     "@ethersproject/providers": "5.7.2",
     "@metamask/rpc-errors": "6.2.1",
@@ -12,7 +13,7 @@
     "@sentry/react": "7.80.0",
     "@sentry/webpack-plugin": "2.10.3",
     "@svgr/webpack": "8.0.1",
-    "@tamagui/core": "1.108.4",
+    "@tamagui/core": "1.114.4",
     "@types/uuid": "9.0.1",
     "@uniswap/analytics-events": "2.39.0",
     "@uniswap/uniswapx-sdk": "2.1.0-beta.18",
@@ -31,7 +32,7 @@
     "react-native-gesture-handler": "2.19.0",
     "react-native-reanimated": "3.15.0",
     "react-native-svg": "15.1.0",
-    "react-native-web": "0.19.10",
+    "react-native-web": "0.19.13",
     "react-qr-code": "2.0.12",
     "react-redux": "8.0.5",
     "react-router-dom": "6.10.0",
@@ -77,7 +78,7 @@
     "serve": "14.2.4",
     "statsig-js": "4.41.0",
     "swc-loader": "0.2.6",
-    "tamagui-loader": "1.108.4",
+    "tamagui-loader": "1.114.4",
     "typescript": "5.3.3",
     "webpack": "5.90.0",
     "webpack-cli": "5.1.4",

apps/extension/src/app/components/Trace/TraceUserProperties.tsx

 import { useEffect } from 'react'
 import { useColorScheme } from 'react-native'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { useAppFiatCurrencyInfo } from 'uniswap/src/features/fiatCurrency/hooks'
 import { useCurrentLanguage } from 'uniswap/src/features/language/hooks'
 import { useHideSmallBalancesSetting, useHideSpamTokensSetting } from 'uniswap/src/features/settings/hooks'

apps/extension/src/app/datadog.ts

+import { datadogLogs } from '@datadog/browser-logs'
 import { datadogRum } from '@datadog/browser-rum'
 import { getDatadogEnvironment } from 'src/app/version'
 import { config } from 'uniswap/src/config'
@@ -15,12 +16,16 @@ export async function initializeDatadog(appName: string): Promise<void> {
     return
   }
 
-  datadogRum.init({
-    applicationId: config.datadogProjectId,
+  const sharedDatadogConfig = {
     clientToken: config.datadogClientToken,
     service: `extension-${getDatadogEnvironment()}`,
     env: getDatadogEnvironment(),
     version: process.env.VERSION,
+  }
+
+  datadogRum.init({
+    ...sharedDatadogConfig,
+    applicationId: config.datadogProjectId,
     sessionSampleRate: 100,
     sessionReplaySampleRate: 0,
     trackResources: true,
@@ -44,6 +49,12 @@ export async function initializeDatadog(appName: string): Promise<void> {
     },
   })
 
+  datadogLogs.init({
+    ...sharedDatadogConfig,
+    site: 'datadoghq.com',
+    forwardErrorsToLogs: false,
+  })
+
   try {
     const userId = await getUniqueId()
     datadogRum.setUser({

apps/extension/src/app/features/dappRequests/DappRequestContent.tsx

@@ -6,7 +6,7 @@ import { DappRequestStoreItem } from 'src/app/features/dappRequests/slice'
 import { DappRequestType } from 'src/app/features/dappRequests/types/DappRequestTypes'
 import { Anchor, AnimatePresence, Button, Flex, Text, UniversalImage, UniversalImageResizeMode, styled } from 'ui/src'
 import { borderRadii, iconSizes } from 'ui/src/theme'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { UniverseChainId } from 'uniswap/src/features/chains/types'
 import { GasFeeResult } from 'uniswap/src/features/gas/types'
 import { hasSufficientFundsIncludingGas } from 'uniswap/src/features/gas/utils'

apps/extension/src/app/features/dappRequests/requestContent/EthSend/Swap/SwapRequestContent.tsx

@@ -5,7 +5,7 @@ import { ETH_ADDRESS } from 'src/app/features/dappRequests/requestContent/EthSen
 import { formatUnits, useSwapDetails } from 'src/app/features/dappRequests/requestContent/EthSend/Swap/utils'
 import { SignTypedDataRequest, SwapSendTransactionRequest } from 'src/app/features/dappRequests/types/DappRequestTypes'
 import { DEFAULT_NATIVE_ADDRESS } from 'uniswap/src/features/chains/chainInfo'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { toSupportedChainId } from 'uniswap/src/features/chains/utils'
 import { CurrencyInfo } from 'uniswap/src/features/dataApi/types'
 import { GasFeeResult } from 'uniswap/src/features/gas/types'

apps/extension/src/app/features/dappRequests/requestContent/WrapContent.tsx

@@ -4,7 +4,7 @@ import { useDappLastChainId } from 'src/app/features/dapp/hooks'
 import { DappRequestStoreItem } from 'src/app/features/dappRequests/slice'
 import { SendTransactionRequest } from 'src/app/features/dappRequests/types/DappRequestTypes'
 import { Flex, Text } from 'ui/src'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { useGasFeeFormattedAmounts, useTransactionGasFee } from 'uniswap/src/features/gas/hooks'
 import { useActiveAccountAddressWithThrow, useDisplayName } from 'wallet/src/features/wallet/hooks'
 

apps/extension/src/app/features/home/PortfolioActionButtons.tsx

@@ -6,7 +6,7 @@ import { AppRoutes } from 'src/app/navigation/constants'
 import { navigate } from 'src/app/navigation/state'
 import { Flex, Text, getTokenValue, useMedia } from 'ui/src'
 import { ArrowDownCircle, Buy, CoinConvert, SendAction } from 'ui/src/components/icons'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { ElementName } from 'uniswap/src/features/telemetry/constants'
 import { sendAnalyticsEvent } from 'uniswap/src/features/telemetry/send'
 import { TestnetModeModal } from 'uniswap/src/features/testnets/TestnetModeModal'

apps/extension/src/app/features/home/SwitchNetworksModal.tsx

@@ -9,7 +9,7 @@ import { Check, Power } from 'ui/src/components/icons'
 import { usePreventOverflowBelowFold } from 'ui/src/hooks/usePreventOverflowBelowFold'
 import { iconSizes } from 'ui/src/theme'
 import { NetworkLogo } from 'uniswap/src/components/CurrencyLogo/NetworkLogo'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { UniverseChainId } from 'uniswap/src/features/chains/types'
 import { getChainLabel } from 'uniswap/src/features/chains/utils'
 import { pushNotification } from 'uniswap/src/features/notifications/slice'

apps/extension/src/app/features/home/TokenBalanceList.tsx

@@ -10,7 +10,7 @@ import { BaseCard } from 'uniswap/src/components/BaseCard/BaseCard'
 import { InfoLinkModal } from 'uniswap/src/components/modals/InfoLinkModal'
 import { uniswapUrls } from 'uniswap/src/constants/urls'
 import { SafetyLevel } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { PortfolioBalance } from 'uniswap/src/features/dataApi/types'
 import { ElementName, ModalName, SectionName, WalletEventName } from 'uniswap/src/features/telemetry/constants'
 import { sendAnalyticsEvent } from 'uniswap/src/features/telemetry/send'

apps/extension/src/app/features/onboarding/__snapshots__/KeyboardKey.test.tsx.snap

@@ -13,10 +13,10 @@ exports[`KeyboardKey Component renders correctly with state Highlighted 1`] = `
         class=" t_light _dsp_contents is_Theme"
       >
         <div
-          class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _alignItems-center _backgroundColor-568007324 _borderTopColor-170210283 _borderRightColor-170210283 _borderBottomColor-170210283 _borderLeftColor-170210283 _borderTopLeftRadius-1307610060 _borderTopRightRadius-1307610060 _borderBottomRightRadius-1307610060 _borderBottomLeftRadius-1307610060 _borderTopWidth-1481558338 _borderRightWidth-1481558338 _borderBottomWidth-1481558338 _borderLeftWidth-1481558338 _height-70px _justifyContent-center _pr-1316330176 _pl-1316330176 _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid _boxShadow-1750371555"
+          class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _alignItems-center _backgroundColor-surface1 _borderTopColor-accent2Hove112785 _borderRightColor-accent2Hove112785 _borderBottomColor-accent2Hove112785 _borderLeftColor-accent2Hove112785 _borderTopLeftRadius-t-radius-ro291586424 _borderTopRightRadius-t-radius-ro291586424 _borderBottomRightRadius-t-radius-ro291586424 _borderBottomLeftRadius-t-radius-ro291586424 _borderTopWidth-t-space-spa94665587 _borderRightWidth-t-space-spa94665587 _borderBottomWidth-t-space-spa94665587 _borderLeftWidth-t-space-spa94665587 _height-70px _justifyContent-center _pr-t-space-spa1360334043 _pl-t-space-spa1360334043 _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid _boxShadow-0px7px0pxva651413887"
         >
           <span
-            class="font_body _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-1380577629 _fontFamily-299667014 _wordWrap-break-word _fontSize-28px _lineHeight-222976542 _fontWeight-233016202"
+            class="font_body _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-accent1 _fontFamily-f-family _wordWrap-break-word _fontSize-28px _lineHeight-f-lineHeigh507465454 _fontWeight-f-weight-bo3548"
             data-disable-theme="true"
           >
             Shift
@@ -41,10 +41,10 @@ exports[`KeyboardKey Component renders correctly with state KeyDown 1`] = `
         class=" t_light _dsp_contents is_Theme"
       >
         <div
-          class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _alignItems-center _backgroundColor-568007324 _borderTopColor-170210283 _borderRightColor-170210283 _borderBottomColor-170210283 _borderLeftColor-170210283 _borderTopLeftRadius-1307610060 _borderTopRightRadius-1307610060 _borderBottomRightRadius-1307610060 _borderBottomLeftRadius-1307610060 _borderTopWidth-1481558338 _borderRightWidth-1481558338 _borderBottomWidth-1481558338 _borderLeftWidth-1481558338 _height-70px _justifyContent-center _pr-1316330176 _pl-1316330176 _top-7px _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid _boxShadow-1083284829"
+          class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _alignItems-center _backgroundColor-surface1 _borderTopColor-accent2Hove112785 _borderRightColor-accent2Hove112785 _borderBottomColor-accent2Hove112785 _borderLeftColor-accent2Hove112785 _borderTopLeftRadius-t-radius-ro291586424 _borderTopRightRadius-t-radius-ro291586424 _borderBottomRightRadius-t-radius-ro291586424 _borderBottomLeftRadius-t-radius-ro291586424 _borderTopWidth-t-space-spa94665587 _borderRightWidth-t-space-spa94665587 _borderBottomWidth-t-space-spa94665587 _borderLeftWidth-t-space-spa94665587 _height-70px _justifyContent-center _pr-t-space-spa1360334043 _pl-t-space-spa1360334043 _top-7px _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid _boxShadow-0px0pxvar--100262595"
         >
           <span
-            class="font_body _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-1380577629 _fontFamily-299667014 _wordWrap-break-word _fontSize-28px _lineHeight-222976542 _fontWeight-233016202"
+            class="font_body _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-accent1 _fontFamily-f-family _wordWrap-break-word _fontSize-28px _lineHeight-f-lineHeigh507465454 _fontWeight-f-weight-bo3548"
             data-disable-theme="true"
           >
             Shift
@@ -69,10 +69,10 @@ exports[`KeyboardKey Component renders correctly with state KeyUp 1`] = `
         class=" t_light _dsp_contents is_Theme"
       >
         <div
-          class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _alignItems-center _backgroundColor-568007324 _borderTopColor-568007262 _borderRightColor-568007262 _borderBottomColor-568007262 _borderLeftColor-568007262 _borderTopLeftRadius-1307610060 _borderTopRightRadius-1307610060 _borderBottomRightRadius-1307610060 _borderBottomLeftRadius-1307610060 _borderTopWidth-1481558338 _borderRightWidth-1481558338 _borderBottomWidth-1481558338 _borderLeftWidth-1481558338 _height-70px _justifyContent-center _pr-1316330176 _pl-1316330176 _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid _boxShadow-1880567627"
+          class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _alignItems-center _backgroundColor-surface1 _borderTopColor-surface3 _borderRightColor-surface3 _borderBottomColor-surface3 _borderLeftColor-surface3 _borderTopLeftRadius-t-radius-ro291586424 _borderTopRightRadius-t-radius-ro291586424 _borderBottomRightRadius-t-radius-ro291586424 _borderBottomLeftRadius-t-radius-ro291586424 _borderTopWidth-t-space-spa94665587 _borderRightWidth-t-space-spa94665587 _borderBottomWidth-t-space-spa94665587 _borderLeftWidth-t-space-spa94665587 _height-70px _justifyContent-center _pr-t-space-spa1360334043 _pl-t-space-spa1360334043 _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid _boxShadow-0px7px0pxva612953881"
         >
           <span
-            class="font_body _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-843135005 _fontFamily-299667014 _wordWrap-break-word _fontSize-28px _lineHeight-222976542 _fontWeight-233016202"
+            class="font_body _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-neutral2 _fontFamily-f-family _wordWrap-break-word _fontSize-28px _lineHeight-f-lineHeigh507465454 _fontWeight-f-weight-bo3548"
             data-disable-theme="true"
           >
             Shift

apps/extension/src/app/features/settings/SettingsScreen.tsx

@@ -37,7 +37,7 @@ import {
 import { iconSizes } from 'ui/src/theme'
 import { uniswapUrls } from 'uniswap/src/constants/urls'
 import { resetUniswapBehaviorHistory } from 'uniswap/src/features/behaviorHistory/slice'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { FiatCurrency, ORDERED_CURRENCIES } from 'uniswap/src/features/fiatCurrency/constants'
 import { getFiatCurrencyName, useAppFiatCurrencyInfo } from 'uniswap/src/features/fiatCurrency/hooks'
 import { useCurrentLanguageInfo } from 'uniswap/src/features/language/hooks'

apps/extension/src/app/features/swap/SwapFlowScreen.tsx

 import { useState } from 'react'
 import { useExtensionNavigation } from 'src/app/navigation/utils'
 import { Flex } from 'ui/src'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { useHighestBalanceNativeCurrencyId } from 'uniswap/src/features/dataApi/balances'
 import { useSwapPrefilledState } from 'uniswap/src/features/transactions/swap/hooks/useSwapPrefilledState'
 import { prepareSwapFormState } from 'uniswap/src/features/transactions/types/transactionState'

apps/extension/src/app/navigation/SideBarNavigationProvider.tsx

@@ -5,7 +5,7 @@ import { useCopyToClipboard } from 'src/app/hooks/useOnCopyToClipboard'
 import { AppRoutes, HomeQueryParams, HomeTabs } from 'src/app/navigation/constants'
 import { navigate } from 'src/app/navigation/state'
 import { SidebarLocationState, focusOrCreateTokensExploreTab } from 'src/app/navigation/utils'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { CopyNotificationType } from 'uniswap/src/features/notifications/types'
 import { WalletEventName } from 'uniswap/src/features/telemetry/constants'
 import { sendAnalyticsEvent } from 'uniswap/src/features/telemetry/send'

apps/extension/src/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Uniswap Extension",
   "description": "The Uniswap Extension is a self-custody crypto wallet that's built for swapping.",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "minimum_chrome_version": "116",
   "icons": {
     "16": "assets/icon16.png",

apps/extension/tsconfig.json

 {
   "$schema": "https://json.schemastore.org/tsconfig",
   "display": "Web App",
-  "extends": "tsconfig/nextjs.json",
+  "extends": "../../config/tsconfig/nextjs.json",
   "include": [
     "**/*.ts",
     "**/*.tsx",

apps/mobile/android/app/build.gradle

@@ -89,9 +89,9 @@ if (isCI && datadogPropertiesAvailable && !isDetox) {
   apply from: "../../../../node_modules/@datadog/mobile-react-native/datadog-sourcemaps.gradle"
 }
 
-def devVersionName = "1.40"
-def betaVersionName = "1.40"
-def prodVersionName = "1.40"
+def devVersionName = "1.41"
+def betaVersionName = "1.41"
+def prodVersionName = "1.41"
 
 android {
     ndkVersion rootProject.ext.ndkVersion

apps/mobile/ios/Uniswap.xcodeproj/project.pbxproj

@@ -2205,7 +2205,7 @@
 					"@executable_path/Frameworks",
 					"@loader_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.40;
+				MARKETING_VERSION = 1.41;
 				MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_DEBUG";
@@ -2258,7 +2258,7 @@
 					"@executable_path/Frameworks",
 					"@loader_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.40;
+				MARKETING_VERSION = 1.41;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = schemes.WidgetsCore;
@@ -2311,7 +2311,7 @@
 					"@executable_path/Frameworks",
 					"@loader_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.40;
+				MARKETING_VERSION = 1.41;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = schemes.WidgetsCore;
@@ -2364,7 +2364,7 @@
 					"@executable_path/Frameworks",
 					"@loader_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.40;
+				MARKETING_VERSION = 1.41;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = schemes.WidgetsCore;
@@ -2402,7 +2402,7 @@
 				GCC_C_LANGUAGE_STANDARD = gnu11;
 				GENERATE_INFOPLIST_FILE = YES;
 				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
-				MARKETING_VERSION = 1.40;
+				MARKETING_VERSION = 1.41;
 				MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_DEBUG";
@@ -2438,7 +2438,7 @@
 				GCC_C_LANGUAGE_STANDARD = gnu11;
 				GENERATE_INFOPLIST_FILE = YES;
 				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
-				MARKETING_VERSION = 1.40;
+				MARKETING_VERSION = 1.41;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = schemes.WidgetsCoreTests;
@@ -2473,7 +2473,7 @@
 				GCC_C_LANGUAGE_STANDARD = gnu11;
 				GENERATE_INFOPLIST_FILE = YES;
 				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
-				MARKETING_VERSION = 1.40;
+				MARKETING_VERSION = 1.41;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = schemes.WidgetsCoreTests;
@@ -2508,7 +2508,7 @@
 				GCC_C_LANGUAGE_STANDARD = gnu11;
 				GENERATE_INFOPLIST_FILE = YES;
 				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
-				MARKETING_VERSION = 1.40;
+				MARKETING_VERSION = 1.41;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = schemes.WidgetsCoreTests;
@@ -2555,7 +2555,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 1.40;
+				MARKETING_VERSION = 1.41;
 				MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_DEBUG";
@@ -2601,7 +2601,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 1.40;
+				MARKETING_VERSION = 1.41;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = com.uniswap.mobile.widgets;
@@ -2647,7 +2647,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 1.40;
+				MARKETING_VERSION = 1.41;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = com.uniswap.mobile.dev.widgets;
@@ -2693,7 +2693,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 1.40;
+				MARKETING_VERSION = 1.41;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = com.uniswap.mobile.beta.widgets;
@@ -2735,7 +2735,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 1.40;
+				MARKETING_VERSION = 1.41;
 				MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_DEBUG";
@@ -2778,7 +2778,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 1.40;
+				MARKETING_VERSION = 1.41;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = com.uniswap.mobile.WidgetIntentExtension;
@@ -2821,7 +2821,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 1.40;
+				MARKETING_VERSION = 1.41;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = com.uniswap.mobile.dev.WidgetIntentExtension;
@@ -2864,7 +2864,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 1.40;
+				MARKETING_VERSION = 1.41;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = com.uniswap.mobile.beta.WidgetIntentExtension;
@@ -2900,7 +2900,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.40;
+				MARKETING_VERSION = 1.41;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -2938,7 +2938,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.40;
+				MARKETING_VERSION = 1.41;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -3138,7 +3138,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 1.40;
+				MARKETING_VERSION = 1.41;
 				MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_DEBUG";
@@ -3182,7 +3182,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 1.40;
+				MARKETING_VERSION = 1.41;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = com.uniswap.mobile.OneSignalNotificationServiceExtension;
@@ -3293,7 +3293,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.40;
+				MARKETING_VERSION = 1.41;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -3364,7 +3364,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 1.40;
+				MARKETING_VERSION = 1.41;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = com.uniswap.mobile.beta.OneSignalNotificationServiceExtension;
@@ -3475,7 +3475,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.40;
+				MARKETING_VERSION = 1.41;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -3546,7 +3546,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 1.40;
+				MARKETING_VERSION = 1.41;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = com.uniswap.mobile.dev.OneSignalNotificationServiceExtension;

apps/mobile/jest.config.js

 const preset = require('../../config/jest-presets/jest/jest-preset')
 
-/** @type {import('jest').Config} */
 module.exports = {
   ...preset,
+  testTimeout: 15000,
   preset: 'jest-expo',
   displayName: 'Mobile Wallet',
   collectCoverageFrom: [
@@ -21,10 +21,4 @@ module.exports = {
     './jest-setup.js',
     '../../node_modules/react-native-gesture-handler/jestSetup.js',
   ],
-  // we map core/web to tamagui's test bundle, this just makes setup simpler for jest
-  moduleNameMapper: {
-    ...preset.moduleNameMapper,
-    '@tamagui/core': '@tamagui/core/native-test',
-    '@tamagui/web': '@tamagui/core/native-test',
-  },
 }

apps/mobile/package.json

@@ -163,7 +163,7 @@
     "@datadog/datadog-ci": "2.39.0",
     "@faker-js/faker": "7.6.0",
     "@storybook/react": "7.0.2",
-    "@tamagui/babel-plugin": "1.108.4",
+    "@tamagui/babel-plugin": "1.114.4",
     "@testing-library/react-native": "11.5.0",
     "@types/redux-mock-store": "1.0.6",
     "@uniswap/eslint-config": "workspace:^",

apps/mobile/src/app/MobileWalletNavigationProvider.tsx

@@ -5,7 +5,7 @@ import { exploreNavigationRef } from 'src/app/navigation/navigation'
 import { useAppStackNavigation } from 'src/app/navigation/types'
 import { closeModal, openModal } from 'src/features/modals/modalSlice'
 import { HomeScreenTabIndex } from 'src/screens/HomeScreenTabIndex'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { FeatureFlags } from 'uniswap/src/features/gating/flags'
 import { useFeatureFlag } from 'uniswap/src/features/gating/hooks'
 import { ModalName, WalletEventName } from 'uniswap/src/features/telemetry/constants'

apps/mobile/src/app/modals/TokenWarningModalWrapper.tsx

@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { closeModal } from 'src/features/modals/modalSlice'
 import { selectModalState } from 'src/features/modals/selectModalState'
 import { SafetyLevel } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { TokenList } from 'uniswap/src/features/dataApi/types'
 import { ModalName } from 'uniswap/src/features/telemetry/constants'
 import TokenWarningModal from 'uniswap/src/features/tokens/TokenWarningModal'

apps/mobile/src/app/modals/__snapshots__/AccountSwitcherModal.test.tsx.snap

@@ -34,17 +34,42 @@ exports[`AccountSwitcher renders correctly 1`] = `
       <View
         style={
           {
-            "backgroundColor": "transparent",
-            "borderBottomColor": "transparent",
+            "backgroundColor": {
+              "dynamic": {
+                "dark": "transparent",
+                "light": "transparent",
+              },
+            },
+            "borderBottomColor": {
+              "dynamic": {
+                "dark": "transparent",
+                "light": "transparent",
+              },
+            },
             "borderBottomLeftRadius": 999999,
             "borderBottomRightRadius": 999999,
             "borderBottomWidth": 0,
-            "borderLeftColor": "transparent",
+            "borderLeftColor": {
+              "dynamic": {
+                "dark": "transparent",
+                "light": "transparent",
+              },
+            },
             "borderLeftWidth": 0,
-            "borderRightColor": "transparent",
+            "borderRightColor": {
+              "dynamic": {
+                "dark": "transparent",
+                "light": "transparent",
+              },
+            },
             "borderRightWidth": 0,
             "borderStyle": "solid",
-            "borderTopColor": "transparent",
+            "borderTopColor": {
+              "dynamic": {
+                "dark": "transparent",
+                "light": "transparent",
+              },
+            },
             "borderTopLeftRadius": 999999,
             "borderTopRightRadius": 999999,
             "borderTopWidth": 0,
@@ -155,7 +180,12 @@ exports[`AccountSwitcher renders correctly 1`] = `
               numberOfLines={1}
               style={
                 {
-                  "color": "#222222",
+                  "color": {
+                    "dynamic": {
+                      "dark": "#FFFFFF",
+                      "light": "#222222",
+                    },
+                  },
                   "flexShrink": 1,
                   "fontFamily": "Basel Grotesk",
                   "fontSize": 19,
@@ -172,18 +202,7 @@ exports[`AccountSwitcher renders correctly 1`] = `
           </View>
         </View>
         <View
-          cancelable={true}
-          disabled={false}
-          focusable={true}
-          hitSlop={[Function]}
-          minPressDuration={0}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onPress={[Function]}
-          onPressIn={[Function]}
-          onPressOut={[Function]}
+          hitSlop={16}
           style={
             {
               "flexDirection": "column",
@@ -201,7 +220,12 @@ exports[`AccountSwitcher renders correctly 1`] = `
             style={
               {
                 "alignItems": "center",
-                "backgroundColor": "transparent",
+                "backgroundColor": {
+                  "dynamic": {
+                    "dark": "transparent",
+                    "light": "transparent",
+                  },
+                },
                 "borderBottomLeftRadius": 999999,
                 "borderBottomRightRadius": 999999,
                 "borderTopLeftRadius": 999999,
@@ -222,7 +246,12 @@ exports[`AccountSwitcher renders correctly 1`] = `
               maxFontSizeMultiplier={1.4}
               style={
                 {
-                  "color": "#7D7D7D",
+                  "color": {
+                    "dynamic": {
+                      "dark": "#9B9B9B",
+                      "light": "#7D7D7D",
+                    },
+                  },
                   "fontFamily": "Basel Grotesk",
                   "fontSize": 17,
                   "fontWeight": "400",
@@ -304,31 +333,45 @@ exports[`AccountSwitcher renders correctly 1`] = `
       }
     >
       <View
-        cancelable={true}
-        disabled={false}
-        focusable={true}
-        minPressDuration={0}
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onPress={[Function]}
-        onPressIn={[Function]}
-        onPressOut={[Function]}
         style={
           {
             "alignItems": "center",
-            "backgroundColor": "rgba(34,34,34,0.05)",
-            "borderBottomColor": "transparent",
+            "backgroundColor": {
+              "dynamic": {
+                "dark": "rgba(255,255,255,0.12)",
+                "light": "rgba(34,34,34,0.05)",
+              },
+            },
+            "borderBottomColor": {
+              "dynamic": {
+                "dark": "transparent",
+                "light": "transparent",
+              },
+            },
             "borderBottomLeftRadius": 12,
             "borderBottomRightRadius": 12,
             "borderBottomWidth": 1,
-            "borderLeftColor": "transparent",
+            "borderLeftColor": {
+              "dynamic": {
+                "dark": "transparent",
+                "light": "transparent",
+              },
+            },
             "borderLeftWidth": 1,
-            "borderRightColor": "transparent",
+            "borderRightColor": {
+              "dynamic": {
+                "dark": "transparent",
+                "light": "transparent",
+              },
+            },
             "borderRightWidth": 1,
             "borderStyle": "solid",
-            "borderTopColor": "transparent",
+            "borderTopColor": {
+              "dynamic": {
+                "dark": "transparent",
+                "light": "transparent",
+              },
+            },
             "borderTopLeftRadius": 12,
             "borderTopRightRadius": 12,
             "borderTopWidth": 1,
@@ -349,7 +392,12 @@ exports[`AccountSwitcher renders correctly 1`] = `
           maxFontSizeMultiplier={1.2}
           style={
             {
-              "color": "#000000",
+              "color": {
+                "dynamic": {
+                  "dark": "#FFFFFF",
+                  "light": "#000000",
+                },
+              },
               "fontFamily": "Basel Grotesk",
               "fontSize": 17,
               "fontWeight": "500",
@@ -420,18 +468,14 @@ exports[`AccountSwitcher renders correctly 1`] = `
     </View>
   </View>
   <View
-    cancelable={true}
-    disabled={false}
-    focusable={true}
-    hitSlop={[Function]}
-    minPressDuration={0}
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onPress={[Function]}
-    onPressIn={[Function]}
-    onPressOut={[Function]}
+    hitSlop={
+      {
+        "bottom": 5,
+        "left": 5,
+        "right": 5,
+        "top": 5,
+      }
+    }
     style={
       {
         "flexDirection": "column",
@@ -459,17 +503,42 @@ exports[`AccountSwitcher renders correctly 1`] = `
         style={
           {
             "alignItems": "center",
-            "backgroundColor": "#FFFFFF",
-            "borderBottomColor": "rgba(34,34,34,0.05)",
+            "backgroundColor": {
+              "dynamic": {
+                "dark": "#131313",
+                "light": "#FFFFFF",
+              },
+            },
+            "borderBottomColor": {
+              "dynamic": {
+                "dark": "rgba(255,255,255,0.12)",
+                "light": "rgba(34,34,34,0.05)",
+              },
+            },
             "borderBottomLeftRadius": 999999,
             "borderBottomRightRadius": 999999,
             "borderBottomWidth": 1,
-            "borderLeftColor": "rgba(34,34,34,0.05)",
+            "borderLeftColor": {
+              "dynamic": {
+                "dark": "rgba(255,255,255,0.12)",
+                "light": "rgba(34,34,34,0.05)",
+              },
+            },
             "borderLeftWidth": 1,
-            "borderRightColor": "rgba(34,34,34,0.05)",
+            "borderRightColor": {
+              "dynamic": {
+                "dark": "rgba(255,255,255,0.12)",
+                "light": "rgba(34,34,34,0.05)",
+              },
+            },
             "borderRightWidth": 1,
             "borderStyle": "solid",
-            "borderTopColor": "rgba(34,34,34,0.05)",
+            "borderTopColor": {
+              "dynamic": {
+                "dark": "rgba(255,255,255,0.12)",
+                "light": "rgba(34,34,34,0.05)",
+              },
+            },
             "borderTopLeftRadius": 999999,
             "borderTopRightRadius": 999999,
             "borderTopWidth": 1,
@@ -554,7 +623,12 @@ exports[`AccountSwitcher renders correctly 1`] = `
         maxFontSizeMultiplier={1.2}
         style={
           {
-            "color": "#7D7D7D",
+            "color": {
+              "dynamic": {
+                "dark": "#9B9B9B",
+                "light": "#7D7D7D",
+              },
+            },
             "fontFamily": "Basel Grotesk",
             "fontSize": 17,
             "fontWeight": "500",

apps/mobile/src/app/navigation/NavBar.tsx

@@ -20,7 +20,7 @@ import { Flex, FlexProps, LinearGradient, Text, TouchableArea, useIsDarkMode, us
 import { Search } from 'ui/src/components/icons'
 import { AnimatedFlex } from 'ui/src/components/layout/AnimatedFlex'
 import { borderRadii, fonts, opacify } from 'ui/src/theme'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { useHighestBalanceNativeCurrencyId } from 'uniswap/src/features/dataApi/balances'
 import { ElementName, ModalName } from 'uniswap/src/features/telemetry/constants'
 import { sendAnalyticsEvent } from 'uniswap/src/features/telemetry/send'

apps/mobile/src/app/navigation/hooks.ts

@@ -5,7 +5,7 @@ import { navigate as rootNavigate } from 'src/app/navigation/rootNavigation'
 import { useAppStackNavigation, useExploreStackNavigation } from 'src/app/navigation/types'
 import { HomeScreenTabIndex } from 'src/screens/HomeScreenTabIndex'
 import { useTransactionListLazyQuery } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { MobileScreens } from 'uniswap/src/types/screens/mobile'
 
 /**

apps/mobile/src/components/PriceExplorer/PriceExplorer.tsx

@@ -17,7 +17,7 @@ import { Flex, SegmentedControl, Text } from 'ui/src'
 import GraphCurve from 'ui/src/assets/backgrounds/graph-curve.svg'
 import { spacing } from 'ui/src/theme'
 import { HistoryDuration } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { useAppFiatCurrencyInfo } from 'uniswap/src/features/fiatCurrency/hooks'
 import { useLocalizationContext } from 'uniswap/src/features/language/LocalizationContext'
 import Trace from 'uniswap/src/features/telemetry/Trace'

apps/mobile/src/components/PriceExplorer/__snapshots__/Text.test.tsx.snap

@@ -25,7 +25,12 @@ exports[`DatetimeText renders without error 1`] = `
     maxFontSizeMultiplier={1.4}
     style={
       {
-        "color": "#7D7D7D",
+        "color": {
+          "dynamic": {
+            "dark": "#9B9B9B",
+            "light": "#7D7D7D",
+          },
+        },
         "fontFamily": "Basel Grotesk",
         "fontSize": 19,
         "fontWeight": "400",
@@ -252,7 +257,12 @@ exports[`RelativeChangeText renders loading state 1`] = `
           maxFontSizeMultiplier={1.4}
           style={
             {
-              "color": "transparent",
+              "color": {
+                "dynamic": {
+                  "dark": "transparent",
+                  "light": "transparent",
+                },
+              },
               "fontFamily": "Basel Grotesk",
               "fontSize": 19,
               "fontWeight": "400",
@@ -268,7 +278,12 @@ exports[`RelativeChangeText renders loading state 1`] = `
       <View
         style={
           {
-            "backgroundColor": "#F9F9F9",
+            "backgroundColor": {
+              "dynamic": {
+                "dark": "#1B1B1B",
+                "light": "#F9F9F9",
+              },
+            },
             "borderBottomLeftRadius": 999999,
             "borderBottomRightRadius": 999999,
             "borderTopLeftRadius": 999999,

apps/mobile/src/components/Requests/RequestModal/RequestDetails.tsx

@@ -6,7 +6,7 @@ import { LinkButton } from 'src/components/buttons/LinkButton'
 import { SignRequest, WalletConnectRequest, isTransactionRequest } from 'src/features/walletConnect/walletConnectSlice'
 import { Flex, Text, useSporeColors } from 'ui/src'
 import { TextVariantTokens, iconSizes } from 'ui/src/theme'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { UniverseChainId } from 'uniswap/src/features/chains/types'
 import { toSupportedChainId } from 'uniswap/src/features/chains/utils'
 import { useENS } from 'uniswap/src/features/ens/useENS'

apps/mobile/src/components/Requests/RequestModal/hooks.ts

 import { useMemo } from 'react'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { UniverseChainId } from 'uniswap/src/features/chains/types'
 import { GasFeeResult } from 'uniswap/src/features/gas/types'
 import { hasSufficientFundsIncludingGas } from 'uniswap/src/features/gas/utils'

apps/mobile/src/components/Requests/ScanSheet/PendingConnectionSwitchNetworkModal.tsx

@@ -5,7 +5,7 @@ import Check from 'ui/src/assets/icons/check.svg'
 import { iconSizes } from 'ui/src/theme'
 import { NetworkLogo } from 'uniswap/src/components/CurrencyLogo/NetworkLogo'
 import { ActionSheetModal } from 'uniswap/src/components/modals/ActionSheetModal'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { UniverseChainId } from 'uniswap/src/features/chains/types'
 import { getChainLabel } from 'uniswap/src/features/chains/utils'
 import { ElementName, ModalName } from 'uniswap/src/features/telemetry/constants'

apps/mobile/src/components/TokenDetails/TokenBalances.tsx

@@ -7,7 +7,7 @@ import { iconSizes } from 'ui/src/theme'
 import { TokenLogo } from 'uniswap/src/components/CurrencyLogo/TokenLogo'
 import { InlineNetworkPill } from 'uniswap/src/components/network/NetworkPill'
 import { AccountType } from 'uniswap/src/features/accounts/types'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { PortfolioBalance } from 'uniswap/src/features/dataApi/types'
 import { useLocalizationContext } from 'uniswap/src/features/language/LocalizationContext'
 import Trace from 'uniswap/src/features/telemetry/Trace'

apps/mobile/src/components/TokenDetails/TokenDetailsContext.tsx

@@ -2,7 +2,7 @@ import { NativeStackNavigationProp } from '@react-navigation/native-stack'
 import { createContext, PropsWithChildren, useCallback, useContext, useMemo, useState } from 'react'
 import { AppStackParamList } from 'src/app/navigation/types'
 import { useTokenDetailsColors } from 'src/components/TokenDetails/useTokenDetailsColors'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { UniverseChainId } from 'uniswap/src/features/chains/types'
 import { CurrencyInfo } from 'uniswap/src/features/dataApi/types'
 import { useCurrencyInfo } from 'uniswap/src/features/tokens/useCurrencyInfo'

apps/mobile/src/components/Trace/TraceUserProperties.tsx

@@ -5,7 +5,7 @@ import { useBiometricAppSettings, useDeviceSupportsBiometricAuth } from 'src/fea
 import { getAuthMethod } from 'src/features/telemetry/utils'
 import { getFullAppVersion } from 'src/utils/version'
 import { useIsDarkMode } from 'ui/src'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { useAppFiatCurrency } from 'uniswap/src/features/fiatCurrency/hooks'
 import { useCurrentLanguageInfo } from 'uniswap/src/features/language/hooks'
 import { useHideSmallBalancesSetting, useHideSpamTokensSetting } from 'uniswap/src/features/settings/hooks'

apps/mobile/src/components/accounts/__snapshots__/AccountCardItem.test.tsx.snap

@@ -22,19 +22,14 @@ exports[`AccountCardItem renders correctly 1`] = `
   onPress={[Function]}
 >
   <View
-    cancelable={true}
-    disabled={false}
-    focusable={true}
-    hitSlop={[Function]}
-    minPressDuration={0}
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onLongPress={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onPress={[Function]}
-    onPressIn={[Function]}
-    onPressOut={[Function]}
+    hitSlop={
+      {
+        "bottom": 5,
+        "left": 5,
+        "right": 5,
+        "top": 5,
+      }
+    }
     style={
       {
         "flexDirection": "column",
@@ -91,17 +86,42 @@ exports[`AccountCardItem renders correctly 1`] = `
             <View
               style={
                 {
-                  "backgroundColor": "transparent",
-                  "borderBottomColor": "transparent",
+                  "backgroundColor": {
+                    "dynamic": {
+                      "dark": "transparent",
+                      "light": "transparent",
+                    },
+                  },
+                  "borderBottomColor": {
+                    "dynamic": {
+                      "dark": "transparent",
+                      "light": "transparent",
+                    },
+                  },
                   "borderBottomLeftRadius": 999999,
                   "borderBottomRightRadius": 999999,
                   "borderBottomWidth": 0,
-                  "borderLeftColor": "transparent",
+                  "borderLeftColor": {
+                    "dynamic": {
+                      "dark": "transparent",
+                      "light": "transparent",
+                    },
+                  },
                   "borderLeftWidth": 0,
-                  "borderRightColor": "transparent",
+                  "borderRightColor": {
+                    "dynamic": {
+                      "dark": "transparent",
+                      "light": "transparent",
+                    },
+                  },
                   "borderRightWidth": 0,
                   "borderStyle": "solid",
-                  "borderTopColor": "transparent",
+                  "borderTopColor": {
+                    "dynamic": {
+                      "dark": "transparent",
+                      "light": "transparent",
+                    },
+                  },
                   "borderTopLeftRadius": 999999,
                   "borderTopRightRadius": 999999,
                   "borderTopWidth": 0,
@@ -213,7 +233,12 @@ exports[`AccountCardItem renders correctly 1`] = `
                   numberOfLines={1}
                   style={
                     {
-                      "color": "#222222",
+                      "color": {
+                        "dynamic": {
+                          "dark": "#FFFFFF",
+                          "light": "#222222",
+                        },
+                      },
                       "flexShrink": 1,
                       "fontFamily": "Basel Grotesk",
                       "fontSize": 19,
@@ -237,7 +262,12 @@ exports[`AccountCardItem renders correctly 1`] = `
         maxFontSizeMultiplier={1.4}
         style={
           {
-            "color": "#7D7D7D",
+            "color": {
+              "dynamic": {
+                "dark": "#9B9B9B",
+                "light": "#7D7D7D",
+              },
+            },
             "fontFamily": "Basel Grotesk",
             "fontSize": 17,
             "fontWeight": "400",

apps/mobile/src/components/accounts/__snapshots__/AccountHeader.test.tsx.snap

@@ -35,19 +35,7 @@ exports[`AccountHeader renders correctly 1`] = `
       }
     >
       <View
-        cancelable={true}
-        disabled={false}
-        focusable={true}
-        hitSlop={[Function]}
-        minPressDuration={0}
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onLongPress={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onPress={[Function]}
-        onPressIn={[Function]}
-        onPressOut={[Function]}
+        hitSlop={20}
         style={
           {
             "alignItems": "center",
@@ -65,17 +53,42 @@ exports[`AccountHeader renders correctly 1`] = `
         <View
           style={
             {
-              "backgroundColor": "#FFFFFF",
-              "borderBottomColor": "transparent",
+              "backgroundColor": {
+                "dynamic": {
+                  "dark": "#131313",
+                  "light": "#FFFFFF",
+                },
+              },
+              "borderBottomColor": {
+                "dynamic": {
+                  "dark": "transparent",
+                  "light": "transparent",
+                },
+              },
               "borderBottomLeftRadius": 999999,
               "borderBottomRightRadius": 999999,
               "borderBottomWidth": 0,
-              "borderLeftColor": "transparent",
+              "borderLeftColor": {
+                "dynamic": {
+                  "dark": "transparent",
+                  "light": "transparent",
+                },
+              },
               "borderLeftWidth": 0,
-              "borderRightColor": "transparent",
+              "borderRightColor": {
+                "dynamic": {
+                  "dark": "transparent",
+                  "light": "transparent",
+                },
+              },
               "borderRightWidth": 0,
               "borderStyle": "solid",
-              "borderTopColor": "transparent",
+              "borderTopColor": {
+                "dynamic": {
+                  "dark": "transparent",
+                  "light": "transparent",
+                },
+              },
               "borderTopLeftRadius": 999999,
               "borderTopRightRadius": 999999,
               "borderTopWidth": 0,
@@ -257,18 +270,7 @@ exports[`AccountHeader renders correctly 1`] = `
       testID="account-header/display-name"
     >
       <View
-        cancelable={true}
-        disabled={false}
-        focusable={true}
-        hitSlop={[Function]}
-        minPressDuration={0}
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onPress={[Function]}
-        onPressIn={[Function]}
-        onPressOut={[Function]}
+        hitSlop={20}
         style={
           {
             "flexDirection": "column",
@@ -296,7 +298,12 @@ exports[`AccountHeader renders correctly 1`] = `
             numberOfLines={1}
             style={
               {
-                "color": "#222222",
+                "color": {
+                  "dynamic": {
+                    "dark": "#FFFFFF",
+                    "light": "#222222",
+                  },
+                },
                 "fontFamily": "Basel Grotesk",
                 "fontSize": 19,
                 "fontWeight": "400",
@@ -374,18 +381,7 @@ exports[`AccountHeader renders correctly 1`] = `
               </Text>
             </View>
             <View
-              cancelable={true}
-              disabled={false}
-              focusable={true}
-              hitSlop={[Function]}
-              minPressDuration={0}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseEnter={[Function]}
-              onMouseLeave={[Function]}
-              onPress={[Function]}
-              onPressIn={[Function]}
-              onPressOut={[Function]}
+              hitSlop={20}
               style={
                 {
                   "flexDirection": "column",
@@ -415,7 +411,12 @@ exports[`AccountHeader renders correctly 1`] = `
                   numberOfLines={1}
                   style={
                     {
-                      "color": "#BFBFBF",
+                      "color": {
+                        "dynamic": {
+                          "dark": "#5E5E5E",
+                          "light": "#BFBFBF",
+                        },
+                      },
                       "fontFamily": "Basel Grotesk",
                       "fontSize": 17,
                       "fontWeight": "400",

apps/mobile/src/components/accounts/__snapshots__/AccountList.test.tsx.snap

@@ -91,7 +91,12 @@ exports[`AccountList renders without error 1`] = `
             maxFontSizeMultiplier={1.4}
             style={
               {
-                "color": "#7D7D7D",
+                "color": {
+                  "dynamic": {
+                    "dark": "#9B9B9B",
+                    "light": "#7D7D7D",
+                  },
+                },
                 "fontFamily": "Basel Grotesk",
                 "fontSize": 17,
                 "fontWeight": "400",
@@ -130,19 +135,14 @@ exports[`AccountList renders without error 1`] = `
           onPress={[Function]}
         >
           <View
-            cancelable={true}
-            disabled={false}
-            focusable={true}
-            hitSlop={[Function]}
-            minPressDuration={0}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onLongPress={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onPress={[Function]}
-            onPressIn={[Function]}
-            onPressOut={[Function]}
+            hitSlop={
+              {
+                "bottom": 5,
+                "left": 5,
+                "right": 5,
+                "top": 5,
+              }
+            }
             style={
               {
                 "flexDirection": "column",
@@ -199,17 +199,42 @@ exports[`AccountList renders without error 1`] = `
                     <View
                       style={
                         {
-                          "backgroundColor": "transparent",
-                          "borderBottomColor": "transparent",
+                          "backgroundColor": {
+                            "dynamic": {
+                              "dark": "transparent",
+                              "light": "transparent",
+                            },
+                          },
+                          "borderBottomColor": {
+                            "dynamic": {
+                              "dark": "transparent",
+                              "light": "transparent",
+                            },
+                          },
                           "borderBottomLeftRadius": 999999,
                           "borderBottomRightRadius": 999999,
                           "borderBottomWidth": 0,
-                          "borderLeftColor": "transparent",
+                          "borderLeftColor": {
+                            "dynamic": {
+                              "dark": "transparent",
+                              "light": "transparent",
+                            },
+                          },
                           "borderLeftWidth": 0,
-                          "borderRightColor": "transparent",
+                          "borderRightColor": {
+                            "dynamic": {
+                              "dark": "transparent",
+                              "light": "transparent",
+                            },
+                          },
                           "borderRightWidth": 0,
                           "borderStyle": "solid",
-                          "borderTopColor": "transparent",
+                          "borderTopColor": {
+                            "dynamic": {
+                              "dark": "transparent",
+                              "light": "transparent",
+                            },
+                          },
                           "borderTopLeftRadius": 999999,
                           "borderTopRightRadius": 999999,
                           "borderTopWidth": 0,
@@ -321,7 +346,12 @@ exports[`AccountList renders without error 1`] = `
                           numberOfLines={1}
                           style={
                             {
-                              "color": "#222222",
+                              "color": {
+                                "dynamic": {
+                                  "dark": "#FFFFFF",
+                                  "light": "#222222",
+                                },
+                              },
                               "flexShrink": 1,
                               "fontFamily": "Basel Grotesk",
                               "fontSize": 19,
@@ -345,7 +375,12 @@ exports[`AccountList renders without error 1`] = `
                 maxFontSizeMultiplier={1.4}
                 style={
                   {
-                    "color": "#7D7D7D",
+                    "color": {
+                      "dynamic": {
+                        "dark": "#9B9B9B",
+                        "light": "#7D7D7D",
+                      },
+                    },
                     "fontFamily": "Basel Grotesk",
                     "fontSize": 17,
                     "fontWeight": "400",

apps/mobile/src/components/buttons/__snapshots__/BackButton.test.tsx.snap

@@ -2,18 +2,7 @@
 
 exports[`BackButton renders without error 1`] = `
 <View
-  cancelable={true}
-  disabled={false}
-  focusable={true}
-  hitSlop={[Function]}
-  minPressDuration={0}
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
+  hitSlop={24}
   style={
     {
       "alignItems": "center",
@@ -121,7 +110,12 @@ exports[`BackButton renders without error 1`] = `
       maxFontSizeMultiplier={1.4}
       style={
         {
-          "color": "#7D7D7D",
+          "color": {
+            "dynamic": {
+              "dark": "#9B9B9B",
+              "light": "#7D7D7D",
+            },
+          },
           "fontFamily": "Basel Grotesk",
           "fontSize": 19,
           "fontWeight": "400",

apps/mobile/src/components/buttons/__snapshots__/CloseButton.test.tsx.snap

@@ -2,18 +2,14 @@
 
 exports[`CloseButton renders without error 1`] = `
 <View
-  cancelable={true}
-  disabled={false}
-  focusable={true}
-  hitSlop={[Function]}
-  minPressDuration={0}
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
+  hitSlop={
+    {
+      "bottom": 5,
+      "left": 5,
+      "right": 5,
+      "top": 5,
+    }
+  }
   style={
     {
       "flexDirection": "column",

apps/mobile/src/components/buttons/__snapshots__/CopyTextButton.test.tsx.snap

@@ -2,31 +2,45 @@
 
 exports[`CopyTextButton renders without error 1`] = `
 <View
-  cancelable={true}
-  disabled={false}
-  focusable={true}
-  minPressDuration={0}
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={
     {
       "alignItems": "center",
-      "backgroundColor": "rgba(34,34,34,0.05)",
-      "borderBottomColor": "transparent",
+      "backgroundColor": {
+        "dynamic": {
+          "dark": "rgba(255,255,255,0.12)",
+          "light": "rgba(34,34,34,0.05)",
+        },
+      },
+      "borderBottomColor": {
+        "dynamic": {
+          "dark": "transparent",
+          "light": "transparent",
+        },
+      },
       "borderBottomLeftRadius": 16,
       "borderBottomRightRadius": 16,
       "borderBottomWidth": 1,
-      "borderLeftColor": "transparent",
+      "borderLeftColor": {
+        "dynamic": {
+          "dark": "transparent",
+          "light": "transparent",
+        },
+      },
       "borderLeftWidth": 1,
-      "borderRightColor": "transparent",
+      "borderRightColor": {
+        "dynamic": {
+          "dark": "transparent",
+          "light": "transparent",
+        },
+      },
       "borderRightWidth": 1,
       "borderStyle": "solid",
-      "borderTopColor": "transparent",
+      "borderTopColor": {
+        "dynamic": {
+          "dark": "transparent",
+          "light": "transparent",
+        },
+      },
       "borderTopLeftRadius": 16,
       "borderTopRightRadius": 16,
       "borderTopWidth": 1,
@@ -43,7 +57,14 @@ exports[`CopyTextButton renders without error 1`] = `
   }
 >
   <svg
-    color="#222222"
+    color={
+      {
+        "dynamic": {
+          "dark": "#FFFFFF",
+          "light": "#222222",
+        },
+      }
+    }
     data-file-name="SvgCopySheets"
     height={20}
     size={20}
@@ -53,7 +74,12 @@ exports[`CopyTextButton renders without error 1`] = `
     maxFontSizeMultiplier={1.2}
     style={
       {
-        "color": "#222222",
+        "color": {
+          "dynamic": {
+            "dark": "#FFFFFF",
+            "light": "#222222",
+          },
+        },
         "fontFamily": "Basel Grotesk",
         "fontSize": 19,
         "fontWeight": "500",

apps/mobile/src/components/buttons/__snapshots__/LinkButton.test.tsx.snap

@@ -2,18 +2,14 @@
 
 exports[`LinkButton renders without error 1`] = `
 <View
-  cancelable={true}
-  disabled={false}
-  focusable={true}
-  hitSlop={[Function]}
-  minPressDuration={0}
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
+  hitSlop={
+    {
+      "bottom": 5,
+      "left": 5,
+      "right": 5,
+      "top": 5,
+    }
+  }
   style={
     {
       "flexDirection": "column",
@@ -40,7 +36,12 @@ exports[`LinkButton renders without error 1`] = `
       allowFontScaling={true}
       style={
         {
-          "color": "#222222",
+          "color": {
+            "dynamic": {
+              "dark": "#FFFFFF",
+              "light": "#222222",
+            },
+          },
           "flexShrink": 1,
           "fontFamily": "Basel Grotesk",
         }
@@ -50,7 +51,14 @@ exports[`LinkButton renders without error 1`] = `
       link text
     </Text>
     <svg
-      color="#FC72FF"
+      color={
+        {
+          "dynamic": {
+            "dark": "#FC72FF",
+            "light": "#FC72FF",
+          },
+        }
+      }
       data-file-name="SvgExternalLink"
       height={20}
       strokeWidth={1.5}

apps/mobile/src/components/explore/ExploreSections.tsx

@@ -20,7 +20,7 @@ import { NetworkLogo } from 'uniswap/src/components/CurrencyLogo/NetworkLogo'
 import { NetworkPill } from 'uniswap/src/components/network/NetworkPill'
 import { ALL_NETWORKS_ARG } from 'uniswap/src/data/rest/base'
 import { useTokenRankingsQuery } from 'uniswap/src/data/rest/tokenRankings'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { UniverseChainId } from 'uniswap/src/features/chains/types'
 import { fromGraphQLChain } from 'uniswap/src/features/chains/utils'
 import { selectHasFavoriteTokens, selectHasWatchedWallets } from 'uniswap/src/features/favorites/selectors'

apps/mobile/src/components/explore/FavoriteTokenCard.tsx

@@ -15,7 +15,7 @@ import { borderRadii, imageSizes, opacify } from 'ui/src/theme'
 import { TokenLogo } from 'uniswap/src/components/CurrencyLogo/TokenLogo'
 import { PollingInterval } from 'uniswap/src/constants/misc'
 import { useFavoriteTokenCardQuery } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { fromGraphQLChain } from 'uniswap/src/features/chains/utils'
 import { currencyIdToContractInput } from 'uniswap/src/features/dataApi/utils'
 import { removeFavoriteToken } from 'uniswap/src/features/favorites/slice'

apps/mobile/src/components/explore/SortButton.test.tsx

@@ -17,10 +17,10 @@ describe('SortButton', () => {
     jest.useRealTimers()
   })
 
-  it('renders without error', () => {
+  it('renders without error', async () => {
     const tree = render(<SortButton orderBy={RankingType.Volume} />)
 
-    act(async () => {
+    await act(async () => {
       jest.runAllTimers()
     })
 
@@ -44,9 +44,9 @@ describe('SortButton', () => {
   ]
 
   describe.each(cases)('when ordering by $test', ({ orderBy, label }) => {
-    it(`renders ${label} as the selected option`, () => {
+    it(`renders ${label} as the selected option`, async () => {
       const { queryByText } = render(<SortButton orderBy={orderBy} />)
-      act(async () => {
+      await act(async () => {
         jest.runAllTimers()
       })
       const selectedOption = queryByText(label)

apps/mobile/src/components/explore/__snapshots__/FavoriteHeaderRow.test.tsx.snap

@@ -19,7 +19,12 @@ exports[`FavoriteHeaderRow when editing renders without error 1`] = `
     maxFontSizeMultiplier={1.4}
     style={
       {
-        "color": "#7D7D7D",
+        "color": {
+          "dynamic": {
+            "dark": "#9B9B9B",
+            "light": "#7D7D7D",
+          },
+        },
         "fontFamily": "Basel Grotesk",
         "fontSize": 17,
         "fontWeight": "400",
@@ -31,18 +36,7 @@ exports[`FavoriteHeaderRow when editing renders without error 1`] = `
     Editing Title
   </Text>
   <View
-    cancelable={true}
-    disabled={false}
-    focusable={true}
-    hitSlop={[Function]}
-    minPressDuration={0}
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onPress={[Function]}
-    onPressIn={[Function]}
-    onPressOut={[Function]}
+    hitSlop={16}
     style={
       {
         "flexDirection": "column",
@@ -60,7 +54,12 @@ exports[`FavoriteHeaderRow when editing renders without error 1`] = `
       maxFontSizeMultiplier={1.2}
       style={
         {
-          "color": "#FC72FF",
+          "color": {
+            "dynamic": {
+              "dark": "#FC72FF",
+              "light": "#FC72FF",
+            },
+          },
           "fontFamily": "Basel Grotesk",
           "fontSize": 17,
           "fontWeight": "500",
@@ -95,7 +94,12 @@ exports[`FavoriteHeaderRow when not editing renders without error 1`] = `
     maxFontSizeMultiplier={1.4}
     style={
       {
-        "color": "#7D7D7D",
+        "color": {
+          "dynamic": {
+            "dark": "#9B9B9B",
+            "light": "#7D7D7D",
+          },
+        },
         "fontFamily": "Basel Grotesk",
         "fontSize": 17,
         "fontWeight": "400",
@@ -107,18 +111,7 @@ exports[`FavoriteHeaderRow when not editing renders without error 1`] = `
     Title
   </Text>
   <View
-    cancelable={true}
-    disabled={false}
-    focusable={true}
-    hitSlop={[Function]}
-    minPressDuration={0}
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onPress={[Function]}
-    onPressIn={[Function]}
-    onPressOut={[Function]}
+    hitSlop={16}
     style={
       {
         "flexDirection": "column",

apps/mobile/src/components/explore/__snapshots__/FavoriteTokenCard.test.tsx.snap

@@ -22,7 +22,12 @@ exports[`FavoriteTokenCard renders without error 1`] = `
     <View
       style={
         {
-          "backgroundColor": "rgba(34,34,34,0.05)",
+          "backgroundColor": {
+            "dynamic": {
+              "dark": "rgba(255,255,255,0.12)",
+              "light": "rgba(34,34,34,0.05)",
+            },
+          },
           "borderBottomLeftRadius": 16,
           "borderBottomRightRadius": 16,
           "borderTopLeftRadius": 16,

apps/mobile/src/components/explore/__snapshots__/FavoriteWalletCard.test.tsx.snap

@@ -39,22 +39,23 @@ exports[`FavoriteWalletCard renders without error 1`] = `
     }
   >
     <View
-      cancelable={true}
       disabled={false}
-      focusable={true}
-      hitSlop={[Function]}
-      minPressDuration={0}
-      onBlur={[Function]}
-      onFocus={[Function]}
-      onLongPress={[Function]}
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
-      onPress={[Function]}
-      onPressIn={[Function]}
-      onPressOut={[Function]}
+      hitSlop={
+        {
+          "bottom": 5,
+          "left": 5,
+          "right": 5,
+          "top": 5,
+        }
+      }
       style={
         {
-          "backgroundColor": "#FFFFFF",
+          "backgroundColor": {
+            "dynamic": {
+              "dark": "#131313",
+              "light": "#FFFFFF",
+            },
+          },
           "borderBottomColor": "rgba(34,34,34,0.05)",
           "borderBottomLeftRadius": 16,
           "borderBottomRightRadius": 16,
@@ -116,17 +117,42 @@ exports[`FavoriteWalletCard renders without error 1`] = `
           <View
             style={
               {
-                "backgroundColor": "transparent",
-                "borderBottomColor": "transparent",
+                "backgroundColor": {
+                  "dynamic": {
+                    "dark": "transparent",
+                    "light": "transparent",
+                  },
+                },
+                "borderBottomColor": {
+                  "dynamic": {
+                    "dark": "transparent",
+                    "light": "transparent",
+                  },
+                },
                 "borderBottomLeftRadius": 999999,
                 "borderBottomRightRadius": 999999,
                 "borderBottomWidth": 0,
-                "borderLeftColor": "transparent",
+                "borderLeftColor": {
+                  "dynamic": {
+                    "dark": "transparent",
+                    "light": "transparent",
+                  },
+                },
                 "borderLeftWidth": 0,
-                "borderRightColor": "transparent",
+                "borderRightColor": {
+                  "dynamic": {
+                    "dark": "transparent",
+                    "light": "transparent",
+                  },
+                },
                 "borderRightWidth": 0,
                 "borderStyle": "solid",
-                "borderTopColor": "transparent",
+                "borderTopColor": {
+                  "dynamic": {
+                    "dark": "transparent",
+                    "light": "transparent",
+                  },
+                },
                 "borderTopLeftRadius": 999999,
                 "borderTopRightRadius": 999999,
                 "borderTopWidth": 0,
@@ -216,7 +242,12 @@ exports[`FavoriteWalletCard renders without error 1`] = `
               numberOfLines={1}
               style={
                 {
-                  "color": "#222222",
+                  "color": {
+                    "dynamic": {
+                      "dark": "#FFFFFF",
+                      "light": "#222222",
+                    },
+                  },
                   "flexShrink": 1,
                   "fontFamily": "Basel Grotesk",
                   "fontSize": 19,
@@ -252,7 +283,12 @@ exports[`FavoriteWalletCard renders without error 1`] = `
           style={
             {
               "alignItems": "center",
-              "backgroundColor": "#BFBFBF",
+              "backgroundColor": {
+                "dynamic": {
+                  "dark": "#5E5E5E",
+                  "light": "#BFBFBF",
+                },
+              },
               "borderBottomLeftRadius": 999999,
               "borderBottomRightRadius": 999999,
               "borderTopLeftRadius": 999999,
@@ -275,7 +311,12 @@ exports[`FavoriteWalletCard renders without error 1`] = `
           <View
             style={
               {
-                "backgroundColor": "#FFFFFF",
+                "backgroundColor": {
+                  "dynamic": {
+                    "dark": "#131313",
+                    "light": "#FFFFFF",
+                  },
+                },
                 "borderBottomLeftRadius": 12,
                 "borderBottomRightRadius": 12,
                 "borderTopLeftRadius": 12,

apps/mobile/src/components/explore/__snapshots__/RemoveButton.test.tsx.snap

@@ -2,11 +2,16 @@
 
 exports[`RemoveButton renders without error 1`] = `
 <View
-  cancelable={true}
   collapsable={false}
   disabled={false}
-  focusable={true}
-  hitSlop={[Function]}
+  hitSlop={
+    {
+      "bottom": 5,
+      "left": 5,
+      "right": 5,
+      "top": 5,
+    }
+  }
   jestAnimatedStyle={
     {
       "value": {
@@ -14,18 +19,15 @@ exports[`RemoveButton renders without error 1`] = `
       },
     }
   }
-  minPressDuration={0}
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
   style={
     {
       "alignItems": "center",
-      "backgroundColor": "#BFBFBF",
+      "backgroundColor": {
+        "dynamic": {
+          "dark": "#5E5E5E",
+          "light": "#BFBFBF",
+        },
+      },
       "borderBottomLeftRadius": 999999,
       "borderBottomRightRadius": 999999,
       "borderTopLeftRadius": 999999,
@@ -48,7 +50,12 @@ exports[`RemoveButton renders without error 1`] = `
   <View
     style={
       {
-        "backgroundColor": "#FFFFFF",
+        "backgroundColor": {
+          "dynamic": {
+            "dark": "#131313",
+            "light": "#FFFFFF",
+          },
+        },
         "borderBottomLeftRadius": 12,
         "borderBottomRightRadius": 12,
         "borderTopLeftRadius": 12,

apps/mobile/src/components/explore/__snapshots__/SortButton.test.tsx.snap

@@ -3,18 +3,14 @@
 exports[`SortButton renders without error 1`] = `
 [
   <View
-    cancelable={true}
-    disabled={false}
-    focusable={true}
-    hitSlop={[Function]}
-    minPressDuration={0}
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onPress={[Function]}
-    onPressIn={[Function]}
-    onPressOut={[Function]}
+    hitSlop={
+      {
+        "bottom": 5,
+        "left": 5,
+        "right": 5,
+        "top": 5,
+      }
+    }
     style={
       {
         "flexDirection": "column",
@@ -45,7 +41,12 @@ exports[`SortButton renders without error 1`] = `
         style={
           {
             "alignItems": "center",
-            "backgroundColor": "rgba(34,34,34,0.05)",
+            "backgroundColor": {
+              "dynamic": {
+                "dark": "rgba(255,255,255,0.12)",
+                "light": "rgba(34,34,34,0.05)",
+              },
+            },
             "borderBottomLeftRadius": 20,
             "borderBottomRightRadius": 20,
             "borderTopLeftRadius": 20,
@@ -67,7 +68,12 @@ exports[`SortButton renders without error 1`] = `
           numberOfLines={1}
           style={
             {
-              "color": "#7D7D7D",
+              "color": {
+                "dynamic": {
+                  "dark": "#9B9B9B",
+                  "light": "#7D7D7D",
+                },
+              },
               "flexShrink": 1,
               "fontFamily": "Basel Grotesk",
               "fontSize": 15,

apps/mobile/src/components/explore/__snapshots__/TokenItem.test.tsx.snap

@@ -6,19 +6,14 @@ exports[`TokenItem renders without error 1`] = `
   onPress={[MockFunction]}
 >
   <View
-    cancelable={true}
-    disabled={false}
-    focusable={true}
-    hitSlop={[Function]}
-    minPressDuration={0}
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onLongPress={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onPress={[Function]}
-    onPressIn={[Function]}
-    onPressOut={[Function]}
+    hitSlop={
+      {
+        "bottom": 5,
+        "left": 5,
+        "right": 5,
+        "top": 5,
+      }
+    }
     style={
       {
         "flexDirection": "column",
@@ -76,7 +71,12 @@ exports[`TokenItem renders without error 1`] = `
             maxFontSizeMultiplier={1.4}
             style={
               {
-                "color": "#7D7D7D",
+                "color": {
+                  "dynamic": {
+                    "dark": "#9B9B9B",
+                    "light": "#7D7D7D",
+                  },
+                },
                 "fontFamily": "Basel Grotesk",
                 "fontSize": 15,
                 "fontWeight": "400",
@@ -157,7 +157,12 @@ exports[`TokenItem renders without error 1`] = `
           numberOfLines={1}
           style={
             {
-              "color": "#222222",
+              "color": {
+                "dynamic": {
+                  "dark": "#FFFFFF",
+                  "light": "#222222",
+                },
+              },
               "fontFamily": "Basel Grotesk",
               "fontSize": 19,
               "fontWeight": "400",
@@ -174,7 +179,12 @@ exports[`TokenItem renders without error 1`] = `
           numberOfLines={1}
           style={
             {
-              "color": "#7D7D7D",
+              "color": {
+                "dynamic": {
+                  "dark": "#9B9B9B",
+                  "light": "#7D7D7D",
+                },
+              },
               "fontFamily": "Basel Grotesk",
               "fontSize": 17,
               "fontWeight": "400",
@@ -217,7 +227,12 @@ exports[`TokenItem renders without error 1`] = `
               maxFontSizeMultiplier={1.4}
               style={
                 {
-                  "color": "#222222",
+                  "color": {
+                    "dynamic": {
+                      "dark": "#FFFFFF",
+                      "light": "#222222",
+                    },
+                  },
                   "fontFamily": "Basel Grotesk",
                   "fontSize": 19,
                   "fontWeight": "400",
@@ -252,7 +267,12 @@ exports[`TokenItem renders without error 1`] = `
                   maxFontSizeMultiplier={1.4}
                   style={
                     {
-                      "color": "#7D7D7D",
+                      "color": {
+                        "dynamic": {
+                          "dark": "#9B9B9B",
+                          "light": "#7D7D7D",
+                        },
+                      },
                       "fontFamily": "Basel Grotesk",
                       "fontSize": 17,
                       "fontWeight": "400",

apps/mobile/src/components/explore/search/SearchResultsSection.tsx

@@ -29,7 +29,7 @@ import { AnimatedBottomSheetFlashList } from 'ui/src/components/AnimatedFlashLis
 import { AnimatedFlex } from 'ui/src/components/layout/AnimatedFlex'
 import { BaseCard } from 'uniswap/src/components/BaseCard/BaseCard'
 import { useExploreSearchQuery } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { UniverseChainId } from 'uniswap/src/features/chains/types'
 import { SearchContext } from 'uniswap/src/features/search/SearchContext'
 import {

apps/mobile/src/components/explore/search/hooks.ts

 import { useMemo } from 'react'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { UniverseChainId } from 'uniswap/src/features/chains/types'
 import { ENS_SUFFIX } from 'uniswap/src/features/ens/constants'
 import { useENS } from 'uniswap/src/features/ens/useENS'

apps/mobile/src/components/explore/search/items/SearchEtherscanItem.tsx

@@ -4,7 +4,7 @@ import { getBlockExplorerIcon } from 'src/components/icons/BlockExplorerIcon'
 import { Flex, Text, TouchableArea, useSporeColors } from 'ui/src'
 import { Arrow } from 'ui/src/components/arrow/Arrow'
 import { iconSizes } from 'ui/src/theme'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { EtherscanSearchResult } from 'uniswap/src/features/search/SearchResult'
 import { addToSearchHistory } from 'uniswap/src/features/search/searchHistorySlice'
 import { TestID } from 'uniswap/src/test/fixtures/testIDs'

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

@@ -29,6 +29,7 @@ export function FiatOnRampCtaButton({
       icon={
         isLoading ? <SpinningLoader color="$white" /> : !eligible ? <InfoCircleFilled color="$neutral3" /> : undefined
       }
+      height={isShortMobileDevice ? 38 : 55}
       size={isShortMobileDevice ? 'small' : 'large'}
       theme={buttonAvailable ? 'primary' : 'tertiary'}
       onPress={onPress}

apps/mobile/src/components/input/__snapshots__/SelectionCircle.test.tsx.snap

@@ -5,16 +5,36 @@ exports[`renders selection circle 1`] = `
   style={
     {
       "alignItems": "center",
-      "borderBottomColor": "#FC72FF",
+      "borderBottomColor": {
+        "dynamic": {
+          "dark": "#FC72FF",
+          "light": "#FC72FF",
+        },
+      },
       "borderBottomLeftRadius": 999999,
       "borderBottomRightRadius": 999999,
       "borderBottomWidth": 1,
-      "borderLeftColor": "#FC72FF",
+      "borderLeftColor": {
+        "dynamic": {
+          "dark": "#FC72FF",
+          "light": "#FC72FF",
+        },
+      },
       "borderLeftWidth": 1,
-      "borderRightColor": "#FC72FF",
+      "borderRightColor": {
+        "dynamic": {
+          "dark": "#FC72FF",
+          "light": "#FC72FF",
+        },
+      },
       "borderRightWidth": 1,
       "borderStyle": "solid",
-      "borderTopColor": "#FC72FF",
+      "borderTopColor": {
+        "dynamic": {
+          "dark": "#FC72FF",
+          "light": "#FC72FF",
+        },
+      },
       "borderTopLeftRadius": 999999,
       "borderTopRightRadius": 999999,
       "borderTopWidth": 1,
@@ -28,7 +48,12 @@ exports[`renders selection circle 1`] = `
   <View
     style={
       {
-        "backgroundColor": "#FC72FF",
+        "backgroundColor": {
+          "dynamic": {
+            "dark": "#FC72FF",
+            "light": "#FC72FF",
+          },
+        },
         "borderBottomLeftRadius": 999999,
         "borderBottomRightRadius": 999999,
         "borderTopLeftRadius": 999999,

apps/mobile/src/components/text/__snapshots__/DecimalNumber.test.tsx.snap

@@ -6,7 +6,12 @@ exports[`renders a DecimalNumber 1`] = `
   maxFontSizeMultiplier={1.4}
   style={
     {
-      "color": "#222222",
+      "color": {
+        "dynamic": {
+          "dark": "#FFFFFF",
+          "light": "#222222",
+        },
+      },
       "fontFamily": "Basel Grotesk",
       "fontSize": 19,
       "fontWeight": "400",
@@ -21,7 +26,12 @@ exports[`renders a DecimalNumber 1`] = `
     maxFontSizeMultiplier={1.4}
     style={
       {
-        "color": "#BFBFBF",
+        "color": {
+          "dynamic": {
+            "dark": "#5E5E5E",
+            "light": "#BFBFBF",
+          },
+        },
         "fontFamily": "Basel Grotesk",
         "fontSize": 19,
         "fontWeight": "400",
@@ -42,7 +52,12 @@ exports[`renders a DecimalNumber without a comma separator 1`] = `
   maxFontSizeMultiplier={1.4}
   style={
     {
-      "color": "#222222",
+      "color": {
+        "dynamic": {
+          "dark": "#FFFFFF",
+          "light": "#222222",
+        },
+      },
       "fontFamily": "Basel Grotesk",
       "fontSize": 19,
       "fontWeight": "400",
@@ -57,7 +72,12 @@ exports[`renders a DecimalNumber without a comma separator 1`] = `
     maxFontSizeMultiplier={1.4}
     style={
       {
-        "color": "#BFBFBF",
+        "color": {
+          "dynamic": {
+            "dark": "#5E5E5E",
+            "light": "#BFBFBF",
+          },
+        },
         "fontFamily": "Basel Grotesk",
         "fontSize": 19,
         "fontWeight": "400",
@@ -78,7 +98,12 @@ exports[`renders a DecimalNumber without a decimal part 1`] = `
   maxFontSizeMultiplier={1.4}
   style={
     {
-      "color": "#222222",
+      "color": {
+        "dynamic": {
+          "dark": "#FFFFFF",
+          "light": "#222222",
+        },
+      },
       "fontFamily": "Basel Grotesk",
       "fontSize": 19,
       "fontWeight": "400",

apps/mobile/src/components/text/__snapshots__/TextWithFuseMatches.test.tsx.snap

@@ -14,7 +14,12 @@ exports[`renders text with few matches 1`] = `
     maxFontSizeMultiplier={1.4}
     style={
       {
-        "color": "#222222",
+        "color": {
+          "dynamic": {
+            "dark": "#FFFFFF",
+            "light": "#222222",
+          },
+        },
         "fontFamily": "Basel Grotesk",
         "fontSize": 19,
         "fontWeight": "400",
@@ -30,7 +35,12 @@ exports[`renders text with few matches 1`] = `
     maxFontSizeMultiplier={1.4}
     style={
       {
-        "color": "#222222",
+        "color": {
+          "dynamic": {
+            "dark": "#FFFFFF",
+            "light": "#222222",
+          },
+        },
         "fontFamily": "Basel Grotesk",
         "fontSize": 19,
         "fontWeight": "400",
@@ -46,7 +56,12 @@ exports[`renders text with few matches 1`] = `
     maxFontSizeMultiplier={1.4}
     style={
       {
-        "color": "#BFBFBF",
+        "color": {
+          "dynamic": {
+            "dark": "#5E5E5E",
+            "light": "#BFBFBF",
+          },
+        },
         "fontFamily": "Basel Grotesk",
         "fontSize": 19,
         "fontWeight": "400",
@@ -62,7 +77,12 @@ exports[`renders text with few matches 1`] = `
     maxFontSizeMultiplier={1.4}
     style={
       {
-        "color": "#BFBFBF",
+        "color": {
+          "dynamic": {
+            "dark": "#5E5E5E",
+            "light": "#BFBFBF",
+          },
+        },
         "fontFamily": "Basel Grotesk",
         "fontSize": 19,
         "fontWeight": "400",
@@ -78,7 +98,12 @@ exports[`renders text with few matches 1`] = `
     maxFontSizeMultiplier={1.4}
     style={
       {
-        "color": "#222222",
+        "color": {
+          "dynamic": {
+            "dark": "#FFFFFF",
+            "light": "#222222",
+          },
+        },
         "fontFamily": "Basel Grotesk",
         "fontSize": 19,
         "fontWeight": "400",
@@ -94,7 +119,12 @@ exports[`renders text with few matches 1`] = `
     maxFontSizeMultiplier={1.4}
     style={
       {
-        "color": "#222222",
+        "color": {
+          "dynamic": {
+            "dark": "#FFFFFF",
+            "light": "#222222",
+          },
+        },
         "fontFamily": "Basel Grotesk",
         "fontSize": 19,
         "fontWeight": "400",
@@ -110,7 +140,12 @@ exports[`renders text with few matches 1`] = `
     maxFontSizeMultiplier={1.4}
     style={
       {
-        "color": "#222222",
+        "color": {
+          "dynamic": {
+            "dark": "#FFFFFF",
+            "light": "#222222",
+          },
+        },
         "fontFamily": "Basel Grotesk",
         "fontSize": 19,
         "fontWeight": "400",
@@ -126,7 +161,12 @@ exports[`renders text with few matches 1`] = `
     maxFontSizeMultiplier={1.4}
     style={
       {
-        "color": "#222222",
+        "color": {
+          "dynamic": {
+            "dark": "#FFFFFF",
+            "light": "#222222",
+          },
+        },
         "fontFamily": "Basel Grotesk",
         "fontSize": 19,
         "fontWeight": "400",
@@ -142,7 +182,12 @@ exports[`renders text with few matches 1`] = `
     maxFontSizeMultiplier={1.4}
     style={
       {
-        "color": "#222222",
+        "color": {
+          "dynamic": {
+            "dark": "#FFFFFF",
+            "light": "#222222",
+          },
+        },
         "fontFamily": "Basel Grotesk",
         "fontSize": 19,
         "fontWeight": "400",
@@ -158,7 +203,12 @@ exports[`renders text with few matches 1`] = `
     maxFontSizeMultiplier={1.4}
     style={
       {
-        "color": "#BFBFBF",
+        "color": {
+          "dynamic": {
+            "dark": "#5E5E5E",
+            "light": "#BFBFBF",
+          },
+        },
         "fontFamily": "Basel Grotesk",
         "fontSize": 19,
         "fontWeight": "400",
@@ -174,7 +224,12 @@ exports[`renders text with few matches 1`] = `
     maxFontSizeMultiplier={1.4}
     style={
       {
-        "color": "#BFBFBF",
+        "color": {
+          "dynamic": {
+            "dark": "#5E5E5E",
+            "light": "#BFBFBF",
+          },
+        },
         "fontFamily": "Basel Grotesk",
         "fontSize": 19,
         "fontWeight": "400",
@@ -190,7 +245,12 @@ exports[`renders text with few matches 1`] = `
     maxFontSizeMultiplier={1.4}
     style={
       {
-        "color": "#BFBFBF",
+        "color": {
+          "dynamic": {
+            "dark": "#5E5E5E",
+            "light": "#BFBFBF",
+          },
+        },
         "fontFamily": "Basel Grotesk",
         "fontSize": 19,
         "fontWeight": "400",
@@ -206,7 +266,12 @@ exports[`renders text with few matches 1`] = `
     maxFontSizeMultiplier={1.4}
     style={
       {
-        "color": "#BFBFBF",
+        "color": {
+          "dynamic": {
+            "dark": "#5E5E5E",
+            "light": "#BFBFBF",
+          },
+        },
         "fontFamily": "Basel Grotesk",
         "fontSize": 19,
         "fontWeight": "400",
@@ -222,7 +287,12 @@ exports[`renders text with few matches 1`] = `
     maxFontSizeMultiplier={1.4}
     style={
       {
-        "color": "#BFBFBF",
+        "color": {
+          "dynamic": {
+            "dark": "#5E5E5E",
+            "light": "#BFBFBF",
+          },
+        },
         "fontFamily": "Basel Grotesk",
         "fontSize": 19,
         "fontWeight": "400",
@@ -238,7 +308,12 @@ exports[`renders text with few matches 1`] = `
     maxFontSizeMultiplier={1.4}
     style={
       {
-        "color": "#BFBFBF",
+        "color": {
+          "dynamic": {
+            "dark": "#5E5E5E",
+            "light": "#BFBFBF",
+          },
+        },
         "fontFamily": "Basel Grotesk",
         "fontSize": 19,
         "fontWeight": "400",
@@ -254,7 +329,12 @@ exports[`renders text with few matches 1`] = `
     maxFontSizeMultiplier={1.4}
     style={
       {
-        "color": "#BFBFBF",
+        "color": {
+          "dynamic": {
+            "dark": "#5E5E5E",
+            "light": "#BFBFBF",
+          },
+        },
         "fontFamily": "Basel Grotesk",
         "fontSize": 19,
         "fontWeight": "400",
@@ -270,7 +350,12 @@ exports[`renders text with few matches 1`] = `
     maxFontSizeMultiplier={1.4}
     style={
       {
-        "color": "#BFBFBF",
+        "color": {
+          "dynamic": {
+            "dark": "#5E5E5E",
+            "light": "#BFBFBF",
+          },
+        },
         "fontFamily": "Basel Grotesk",
         "fontSize": 19,
         "fontWeight": "400",
@@ -286,7 +371,12 @@ exports[`renders text with few matches 1`] = `
     maxFontSizeMultiplier={1.4}
     style={
       {
-        "color": "#BFBFBF",
+        "color": {
+          "dynamic": {
+            "dark": "#5E5E5E",
+            "light": "#BFBFBF",
+          },
+        },
         "fontFamily": "Basel Grotesk",
         "fontSize": 19,
         "fontWeight": "400",
@@ -302,7 +392,12 @@ exports[`renders text with few matches 1`] = `
     maxFontSizeMultiplier={1.4}
     style={
       {
-        "color": "#BFBFBF",
+        "color": {
+          "dynamic": {
+            "dark": "#5E5E5E",
+            "light": "#BFBFBF",
+          },
+        },
         "fontFamily": "Basel Grotesk",
         "fontSize": 19,
         "fontWeight": "400",
@@ -318,7 +413,12 @@ exports[`renders text with few matches 1`] = `
     maxFontSizeMultiplier={1.4}
     style={
       {
-        "color": "#BFBFBF",
+        "color": {
+          "dynamic": {
+            "dark": "#5E5E5E",
+            "light": "#BFBFBF",
+          },
+        },
         "fontFamily": "Basel Grotesk",
         "fontSize": 19,
         "fontWeight": "400",
@@ -334,7 +434,12 @@ exports[`renders text with few matches 1`] = `
     maxFontSizeMultiplier={1.4}
     style={
       {
-        "color": "#BFBFBF",
+        "color": {
+          "dynamic": {
+            "dark": "#5E5E5E",
+            "light": "#BFBFBF",
+          },
+        },
         "fontFamily": "Basel Grotesk",
         "fontSize": 19,
         "fontWeight": "400",
@@ -350,7 +455,12 @@ exports[`renders text with few matches 1`] = `
     maxFontSizeMultiplier={1.4}
     style={
       {
-        "color": "#BFBFBF",
+        "color": {
+          "dynamic": {
+            "dark": "#5E5E5E",
+            "light": "#BFBFBF",
+          },
+        },
         "fontFamily": "Basel Grotesk",
         "fontSize": 19,
         "fontWeight": "400",
@@ -371,7 +481,12 @@ exports[`renders text without matches 1`] = `
   numberOfLines={1}
   style={
     {
-      "color": "#222222",
+      "color": {
+        "dynamic": {
+          "dark": "#FFFFFF",
+          "light": "#222222",
+        },
+      },
       "fontFamily": "Basel Grotesk",
       "fontSize": 19,
       "fontWeight": "400",

apps/mobile/src/features/externalProfile/ProfileContextMenu.tsx

@@ -10,7 +10,7 @@ import { Flex, TouchableArea } from 'ui/src'
 import { iconSizes } from 'ui/src/theme'
 import { uniswapUrls } from 'uniswap/src/constants/urls'
 import { getChainInfo } from 'uniswap/src/features/chains/chainInfo'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { pushNotification } from 'uniswap/src/features/notifications/slice'
 import { AppNotificationType, CopyNotificationType } from 'uniswap/src/features/notifications/types'
 import { ElementName, WalletEventName } from 'uniswap/src/features/telemetry/constants'

apps/mobile/src/features/fiatOnRamp/FiatOnRampAmountSection.tsx

@@ -4,8 +4,10 @@ import { useTranslation } from 'react-i18next'
 import { NativeSyntheticEvent, TextInput, TextInputSelectionChangeEventData } from 'react-native'
 import { TouchableOpacity } from 'react-native-gesture-handler'
 import { useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
+import { useFiatOnRampContext } from 'src/features/fiatOnRamp/FiatOnRampContext'
 import { ColorTokens, Flex, Text, TouchableArea, useIsShortMobileDevice, useSporeColors } from 'ui/src'
 import { errorShakeAnimation } from 'ui/src/animations/errorShakeAnimation'
+import { ArrowUpDown } from 'ui/src/components/icons/ArrowUpDown'
 import { AnimatedFlex } from 'ui/src/components/layout/AnimatedFlex'
 import { useDeviceDimensions } from 'ui/src/hooks/useDeviceDimensions'
 import { useDynamicFontSizing } from 'ui/src/hooks/useDynamicFontSizing'
@@ -28,7 +30,7 @@ const MAX_CHAR_PIXEL_WIDTH = 40
 
 const PREDEFINED_AMOUNTS = [100, 300, 1000]
 
-type OnChangeAmount = (amount: string) => void
+type OnChangeAmount = (amount: string, newIsTokenInputMode?: boolean) => void
 
 function OnRampError({ errorText, color }: { errorText?: string; color: ColorTokens }): JSX.Element {
   return (
@@ -45,7 +47,9 @@ interface FiatOnRampAmountSectionProps {
   currency: FiatOnRampCurrency
   onEnterAmount: OnChangeAmount
   onChoosePredifendAmount: OnChangeAmount
+  onToggleIsTokenInputMode: () => void
   quoteAmount: number
+  sourceAmount: number
   quoteCurrencyAmountReady: boolean
   selectTokenLoading: boolean
   onTokenSelectorPress: () => void
@@ -70,11 +74,13 @@ export const FiatOnRampAmountSection = forwardRef<FiatOnRampAmountSectionRef, Fi
       errorText,
       onEnterAmount,
       onChoosePredifendAmount,
+      onToggleIsTokenInputMode,
       predefinedAmountsSupported,
       appFiatCurrencySupported,
       notAvailableInThisRegion,
       fiatCurrencyInfo,
       quoteAmount,
+      sourceAmount,
       currency,
       selectTokenLoading,
     },
@@ -90,6 +96,8 @@ export const FiatOnRampAmountSection = forwardRef<FiatOnRampAmountSectionRef, Fi
     const prevErrorText = usePrevious(errorText)
     const { fullHeight } = useDeviceDimensions()
 
+    const { isTokenInputMode, isOffRamp } = useFiatOnRampContext()
+
     const inputRef = useRef<TextInput>(null)
 
     useImperativeHandle(forwardedRef, () => ({
@@ -147,14 +155,17 @@ export const FiatOnRampAmountSection = forwardRef<FiatOnRampAmountSectionRef, Fi
       }, [inputRef, isTextInputRefActuallyFocused]),
     )
 
-    // TODO: handle this fiat mode switcher
-    function onToggleIsFiatMode(): void {}
-
-    const formattedCurrencyAmount = useFormatExactCurrencyAmount(
-      quoteAmount.toString(),
+    const derivedFiatAmount = isOffRamp ? quoteAmount : sourceAmount
+    const derivedTokenAmount = useFormatExactCurrencyAmount(
+      isOffRamp ? sourceAmount.toString() : quoteAmount.toString(),
       currency.currencyInfo?.currency,
     )
 
+    const derivedAmount = isTokenInputMode ? derivedFiatAmount.toString() : derivedTokenAmount
+    const formattedDerivedAmount = isTokenInputMode
+      ? `${fiatCurrencyInfo.symbol}${derivedAmount}`
+      : `${derivedAmount}${currency.currencyInfo?.currency.symbol}`
+
     // Workaround to avoid incorrect input width calculations by react-native
     // Decimal numbers were manually calculated for Basel Grotesk fonts and will
     // require an adjustment when the font is changed
@@ -171,13 +182,17 @@ export const FiatOnRampAmountSection = forwardRef<FiatOnRampAmountSectionRef, Fi
             return acc + fontSize * 0.595
           case '4':
           case '0':
-          default:
             return acc + fontSize * 0.62
           case '5':
           case '7':
             return acc + fontSize * 0.602
           case '9':
             return acc + fontSize * 0.607
+          case '.':
+          case ',':
+            return acc + fontSize * 0.25
+          default:
+            return acc + fontSize * 0.62
         }
       },
       // ensures a proper width for a "0" placeholder or adds 3 points for the input caret
@@ -202,7 +217,7 @@ export const FiatOnRampAmountSection = forwardRef<FiatOnRampAmountSectionRef, Fi
           ) : null}
         </Flex>
         <AnimatedFlex style={inputAnimatedStyle} width="100%">
-          <Flex row alignItems="center" justifyContent="center">
+          <Flex alignItems="center" justifyContent="center" flexDirection={isTokenInputMode ? 'row-reverse' : 'row'}>
             <Text
               allowFontScaling
               color={!value ? '$neutral3' : '$neutral1'}
@@ -210,7 +225,7 @@ export const FiatOnRampAmountSection = forwardRef<FiatOnRampAmountSectionRef, Fi
               height={fontSize}
               lineHeight={fontSize}
             >
-              {fiatCurrencyInfo.symbol}
+              {isTokenInputMode ? currency.currencyInfo?.currency.symbol : fiatCurrencyInfo.symbol}
             </Text>
             <AmountInput
               ref={inputRef}
@@ -256,7 +271,7 @@ export const FiatOnRampAmountSection = forwardRef<FiatOnRampAmountSectionRef, Fi
             ))}
           </Flex>
         ) : (
-          <TouchableArea onPress={onToggleIsFiatMode}>
+          <TouchableArea onPress={onToggleIsTokenInputMode}>
             <Flex
               centered
               row
@@ -266,12 +281,15 @@ export const FiatOnRampAmountSection = forwardRef<FiatOnRampAmountSectionRef, Fi
               pb="$spacing4"
               pt="$spacing4"
             >
-              <Text color="$neutral2" loading={selectTokenLoading} variant="subheading1">
-                {formattedCurrencyAmount}
-                {currency.currencyInfo?.currency.symbol}
+              <Text
+                color="$neutral2"
+                maxHeight={fonts.subheading1.lineHeight}
+                loading={selectTokenLoading}
+                variant="subheading1"
+              >
+                {formattedDerivedAmount}
               </Text>
-              {/* TODO: support switching from fiat to token amounts */}
-              {/* <ArrowUpDown color="$neutral2" maxWidth={16} size="$icon.16" /> */}
+              <ArrowUpDown color="$neutral2" maxWidth={16} size="$icon.16" />
             </Flex>
           </TouchableArea>
         )}

apps/mobile/src/features/fiatOnRamp/FiatOnRampContext.tsx

@@ -27,10 +27,14 @@ interface FiatOnRampContextType {
   quoteCurrency: FiatOnRampCurrency
   defaultCurrency: FiatOnRampCurrency
   setQuoteCurrency: (quoteCurrency: FiatOnRampCurrency) => void
-  amount?: number
-  setAmount: (amount: number | undefined) => void
+  fiatAmount: number | undefined
+  tokenAmount: number | undefined
+  setFiatAmount: (fiatAmount: number | undefined) => void
+  setTokenAmount: (tokenAmount: number | undefined) => void
   isOffRamp: boolean
   setIsOffRamp: (isOffRamp: boolean) => void
+  isTokenInputMode: boolean
+  setIsTokenInputMode: React.Dispatch<React.SetStateAction<boolean>>
 }
 
 const initialState: FiatOnRampContextType = {
@@ -40,13 +44,18 @@ const initialState: FiatOnRampContextType = {
   setCountryState: () => undefined,
   setBaseCurrencyInfo: () => undefined,
   setQuoteCurrency: () => undefined,
-  setAmount: () => undefined,
+  setFiatAmount: () => undefined,
+  setTokenAmount: () => undefined,
+  fiatAmount: undefined,
+  tokenAmount: undefined,
   countryCode: '',
   countryState: undefined,
   quoteCurrency: { currencyInfo: undefined },
   defaultCurrency: { currencyInfo: undefined },
   isOffRamp: false,
   setIsOffRamp: () => undefined,
+  isTokenInputMode: false,
+  setIsTokenInputMode: () => undefined,
 }
 
 const FiatOnRampContext = createContext<FiatOnRampContextType>(initialState)
@@ -61,8 +70,10 @@ export function FiatOnRampProvider({ children }: { children: React.ReactNode }):
   const [countryCode, setCountryCode] = useState<string>(getCountry())
   const [countryState, setCountryState] = useState<string | undefined>()
   const [baseCurrencyInfo, setBaseCurrencyInfo] = useState<FiatCurrencyInfo>()
-  const [amount, setAmount] = useState<number>()
   const [isOffRamp, setIsOffRamp] = useState<boolean>(false)
+  const [isTokenInputMode, setIsTokenInputMode] = useState<boolean>(false)
+  const [fiatAmount, setFiatAmount] = useState<number | undefined>()
+  const [tokenAmount, setTokenAmount] = useState<number | undefined>()
 
   const { initialState: initialModalState } = useSelector(selectModalState(ModalName.FiatOnRampAggregator))
   const prefilledCurrency = initialModalState?.prefilledCurrency
@@ -93,10 +104,14 @@ export function FiatOnRampProvider({ children }: { children: React.ReactNode }):
         quoteCurrency,
         defaultCurrency,
         setQuoteCurrency,
-        amount,
-        setAmount,
+        fiatAmount,
+        setFiatAmount,
+        tokenAmount,
+        setTokenAmount,
         isOffRamp,
         setIsOffRamp,
+        isTokenInputMode,
+        setIsTokenInputMode,
       }}
     >
       {children}

apps/mobile/src/features/import/__snapshots__/GenericImportForm.test.tsx.snap

@@ -14,17 +14,42 @@ exports[`GenericImportForm renders a placeholder when there is no value 1`] = `
   <View
     style={
       {
-        "backgroundColor": "#FFFFFF",
-        "borderBottomColor": "rgba(34,34,34,0.05)",
+        "backgroundColor": {
+          "dynamic": {
+            "dark": "#131313",
+            "light": "#FFFFFF",
+          },
+        },
+        "borderBottomColor": {
+          "dynamic": {
+            "dark": "rgba(255,255,255,0.12)",
+            "light": "rgba(34,34,34,0.05)",
+          },
+        },
         "borderBottomLeftRadius": 20,
         "borderBottomRightRadius": 20,
         "borderBottomWidth": 1,
-        "borderLeftColor": "rgba(34,34,34,0.05)",
+        "borderLeftColor": {
+          "dynamic": {
+            "dark": "rgba(255,255,255,0.12)",
+            "light": "rgba(34,34,34,0.05)",
+          },
+        },
         "borderLeftWidth": 1,
-        "borderRightColor": "rgba(34,34,34,0.05)",
+        "borderRightColor": {
+          "dynamic": {
+            "dark": "rgba(255,255,255,0.12)",
+            "light": "rgba(34,34,34,0.05)",
+          },
+        },
         "borderRightWidth": 1,
         "borderStyle": "solid",
-        "borderTopColor": "rgba(34,34,34,0.05)",
+        "borderTopColor": {
+          "dynamic": {
+            "dark": "rgba(255,255,255,0.12)",
+            "light": "rgba(34,34,34,0.05)",
+          },
+        },
         "borderTopLeftRadius": 20,
         "borderTopRightRadius": 20,
         "borderTopWidth": 1,
@@ -58,32 +83,67 @@ exports[`GenericImportForm renders a placeholder when there is no value 1`] = `
         focusable={true}
         maxFontSizeMultiplier={1.4}
         multiline={true}
-        onBlur={[Function]}
         onChangeText={[Function]}
-        onFocus={[Function]}
         onSubmitEditing={[Function]}
-        placeholderTextColor="#BFBFBF"
+        placeholderTextColor={
+          {
+            "dynamic": {
+              "dark": "#5E5E5E",
+              "light": "#BFBFBF",
+            },
+          }
+        }
         returnKeyType="done"
         scrollEnabled={false}
         selectionColor="#BFBFBF"
         spellCheck={false}
         style={
           {
-            "backgroundColor": "transparent",
-            "borderBottomColor": "transparent",
+            "backgroundColor": {
+              "dynamic": {
+                "dark": "transparent",
+                "light": "transparent",
+              },
+            },
+            "borderBottomColor": {
+              "dynamic": {
+                "dark": "transparent",
+                "light": "transparent",
+              },
+            },
             "borderBottomLeftRadius": 12,
             "borderBottomRightRadius": 12,
             "borderBottomWidth": 1,
-            "borderLeftColor": "transparent",
+            "borderLeftColor": {
+              "dynamic": {
+                "dark": "transparent",
+                "light": "transparent",
+              },
+            },
             "borderLeftWidth": 1,
-            "borderRightColor": "transparent",
+            "borderRightColor": {
+              "dynamic": {
+                "dark": "transparent",
+                "light": "transparent",
+              },
+            },
             "borderRightWidth": 1,
             "borderStyle": "solid",
-            "borderTopColor": "transparent",
+            "borderTopColor": {
+              "dynamic": {
+                "dark": "transparent",
+                "light": "transparent",
+              },
+            },
             "borderTopLeftRadius": 12,
             "borderTopRightRadius": 12,
             "borderTopWidth": 1,
-            "color": "#222222",
+            "color": {
+              "dynamic": {
+                "dark": "#FFFFFF",
+                "light": "#222222",
+              },
+            },
             "flexShrink": 1,
             "fontFamily": "Basel Grotesk",
             "fontSize": 17,
@@ -121,7 +181,12 @@ exports[`GenericImportForm renders a placeholder when there is no value 1`] = `
         pointerEvents="none"
         style={
           {
-            "color": "#7D7D7D",
+            "color": {
+              "dynamic": {
+                "dark": "#9B9B9B",
+                "light": "#7D7D7D",
+              },
+            },
             "fontFamily": "Basel Grotesk",
             "fontSize": 17,
             "fontWeight": "400",
@@ -156,21 +221,22 @@ exports[`GenericImportForm renders a placeholder when there is no value 1`] = `
         }
       >
         <View
-          cancelable={true}
-          disabled={false}
-          focusable={true}
-          hitSlop={[Function]}
-          minPressDuration={0}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onPress={[Function]}
-          onPressIn={[Function]}
-          onPressOut={[Function]}
+          hitSlop={
+            {
+              "bottom": 5,
+              "left": 5,
+              "right": 5,
+              "top": 5,
+            }
+          }
           style={
             {
-              "backgroundColor": "#FEF4FF",
+              "backgroundColor": {
+                "dynamic": {
+                  "dark": "#361A37",
+                  "light": "#FEF4FF",
+                },
+              },
               "borderBottomLeftRadius": 12,
               "borderBottomRightRadius": 12,
               "borderTopLeftRadius": 12,
@@ -204,7 +270,12 @@ exports[`GenericImportForm renders a placeholder when there is no value 1`] = `
               maxFontSizeMultiplier={1.2}
               style={
                 {
-                  "color": "#FC72FF",
+                  "color": {
+                    "dynamic": {
+                      "dark": "#FC72FF",
+                      "light": "#FC72FF",
+                    },
+                  },
                   "fontFamily": "Basel Grotesk",
                   "fontSize": 15,
                   "fontWeight": "500",

apps/mobile/src/features/nfts/item/__snapshots__/CollectionPreviewCard.test.tsx.snap

@@ -2,18 +2,15 @@
 
 exports[`renders collection preview card 1`] = `
 <View
-  cancelable={true}
   disabled={false}
-  focusable={true}
-  hitSlop={[Function]}
-  minPressDuration={0}
-  onBlur={[Function]}
-  onFocus={[Function]}
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
+  hitSlop={
+    {
+      "bottom": 5,
+      "left": 5,
+      "right": 5,
+      "top": 5,
+    }
+  }
   style={
     {
       "flexDirection": "column",
@@ -30,7 +27,12 @@ exports[`renders collection preview card 1`] = `
     style={
       {
         "alignItems": "center",
-        "backgroundColor": "rgba(34,34,34,0.05)",
+        "backgroundColor": {
+          "dynamic": {
+            "dark": "rgba(255,255,255,0.12)",
+            "light": "rgba(34,34,34,0.05)",
+          },
+        },
         "borderBottomLeftRadius": 16,
         "borderBottomRightRadius": 16,
         "borderTopLeftRadius": 16,
@@ -75,7 +77,12 @@ exports[`renders collection preview card 1`] = `
             {
               "alignItems": "center",
               "aspectRatio": 1,
-              "backgroundColor": "#F9F9F9",
+              "backgroundColor": {
+                "dynamic": {
+                  "dark": "#1B1B1B",
+                  "light": "#F9F9F9",
+                },
+              },
               "flex": 1,
               "flexDirection": "column",
               "justifyContent": "center",
@@ -92,7 +99,12 @@ exports[`renders collection preview card 1`] = `
             maxFontSizeMultiplier={1.4}
             style={
               {
-                "color": "#7D7D7D",
+                "color": {
+                  "dynamic": {
+                    "dark": "#9B9B9B",
+                    "light": "#7D7D7D",
+                  },
+                },
                 "fontFamily": "Basel Grotesk",
                 "fontSize": 17,
                 "fontWeight": "400",
@@ -138,7 +150,12 @@ exports[`renders collection preview card 1`] = `
               numberOfLines={1}
               style={
                 {
-                  "color": "#222222",
+                  "color": {
+                    "dynamic": {
+                      "dark": "#FFFFFF",
+                      "light": "#222222",
+                    },
+                  },
                   "fontFamily": "Basel Grotesk",
                   "fontSize": 19,
                   "fontWeight": "400",
@@ -151,7 +168,14 @@ exports[`renders collection preview card 1`] = `
             </Text>
           </View>
           <svg
-            color="#FC72FF"
+            color={
+              {
+                "dynamic": {
+                  "dark": "#FC72FF",
+                  "light": "#FC72FF",
+                },
+              }
+            }
             data-file-name="SvgVerified"
             height={16}
             width={16}

apps/mobile/src/features/nfts/item/__snapshots__/traits.test.tsx.snap

@@ -4,7 +4,12 @@ exports[`renders trait card 1`] = `
 <View
   style={
     {
-      "backgroundColor": "rgba(34,34,34,0.05)",
+      "backgroundColor": {
+        "dynamic": {
+          "dark": "rgba(255,255,255,0.12)",
+          "light": "rgba(34,34,34,0.05)",
+        },
+      },
       "borderBottomLeftRadius": 16,
       "borderBottomRightRadius": 16,
       "borderTopLeftRadius": 16,
@@ -23,7 +28,12 @@ exports[`renders trait card 1`] = `
     maxFontSizeMultiplier={1.2}
     style={
       {
-        "color": "#7D7D7D",
+        "color": {
+          "dynamic": {
+            "dark": "#9B9B9B",
+            "light": "#7D7D7D",
+          },
+        },
         "fontFamily": "Basel Grotesk",
         "fontSize": 17,
         "fontWeight": "500",
@@ -39,7 +49,12 @@ exports[`renders trait card 1`] = `
     maxFontSizeMultiplier={1.4}
     style={
       {
-        "color": "#222222",
+        "color": {
+          "dynamic": {
+            "dark": "#FFFFFF",
+            "light": "#222222",
+          },
+        },
         "fontFamily": "Basel Grotesk",
         "fontSize": 17,
         "fontWeight": "400",

apps/mobile/src/features/openai/OpenAIContext.tsx

@@ -16,7 +16,7 @@ import {
 } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
 import { AssetType, CurrencyAsset } from 'uniswap/src/entities/assets'
 import { DEFAULT_NATIVE_ADDRESS } from 'uniswap/src/features/chains/chainInfo'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { UniverseChainId } from 'uniswap/src/features/chains/types'
 import { getChainLabel, toSupportedChainId } from 'uniswap/src/features/chains/utils'
 import { usePortfolioBalances, useTokenBalancesGroupedByVisibility } from 'uniswap/src/features/dataApi/balances'

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

@@ -159,11 +159,25 @@ export const parseTransactionRequest = (
   }
 }
 
-export function decodeMessage(value: string): string {
-  if (utils.isHexString(value)) {
-    return utils.toUtf8String(value)
+function isUtf8(str: string): boolean {
+  try {
+    const decoded = new TextDecoder('utf-8').decode(new TextEncoder().encode(str))
+
+    // if the encoded -> decoded string matches the original string (ie no chars swapped),
+    // then it's valid utf-8
+    return decoded === str
+  } catch {
+    return false
   }
+}
 
+export function decodeMessage(value: string): string {
+  if (utils.isHexString(value) && isUtf8(value)) {
+    const decoded = utils.toUtf8String(value)
+    if (decoded?.trim()) {
+      return decoded
+    }
+  }
   return value
 }
 

apps/mobile/src/screens/ExploreScreen.tsx

@@ -15,7 +15,7 @@ import { Flex, flexStyles } from 'ui/src'
 import { useBottomSheetContext } from 'uniswap/src/components/modals/BottomSheetContext'
 import { HandleBar } from 'uniswap/src/components/modals/HandleBar'
 import { NetworkFilter } from 'uniswap/src/components/network/NetworkFilter'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { UniverseChainId } from 'uniswap/src/features/chains/types'
 import { CancelBehaviorType, SearchTextInput } from 'uniswap/src/features/search/SearchTextInput'
 import { MobileEventName, ModalName, SectionName } from 'uniswap/src/features/telemetry/constants'

apps/mobile/src/screens/FiatOnRampConnecting.tsx

@@ -49,7 +49,8 @@ export function FiatOnRampConnectingScreen({ navigation }: Props): JSX.Element |
     countryState,
     baseCurrencyInfo,
     quoteCurrency,
-    amount,
+    fiatAmount,
+    tokenAmount,
   } = useFiatOnRampContext()
   const serviceProvider = selectedQuote?.serviceProviderDetails
 
@@ -75,12 +76,12 @@ export function FiatOnRampConnectingScreen({ navigation }: Props): JSX.Element |
     isLoading: widgetLoading,
     error: widgetError,
   } = useFiatOnRampAggregatorWidgetQuery(
-    !isOffRamp && serviceProvider && quoteCurrency.meldCurrencyCode && baseCurrencyInfo && amount
+    !isOffRamp && serviceProvider && quoteCurrency.meldCurrencyCode && baseCurrencyInfo && fiatAmount
       ? {
           serviceProvider: serviceProvider.serviceProvider,
           countryCode,
           destinationCurrencyCode: quoteCurrency.meldCurrencyCode,
-          sourceAmount: amount,
+          sourceAmount: fiatAmount,
           sourceCurrencyCode: baseCurrencyInfo.code,
           walletAddress: activeAccountAddress,
           externalSessionId: externalTransactionId,
@@ -95,12 +96,12 @@ export function FiatOnRampConnectingScreen({ navigation }: Props): JSX.Element |
     isLoading: offRampWidgetLoading,
     error: offRampWidgetError,
   } = useFiatOnRampAggregatorOffRampWidgetQuery(
-    isOffRamp && serviceProvider && quoteCurrency.meldCurrencyCode && baseCurrencyInfo && amount
+    isOffRamp && serviceProvider && quoteCurrency.meldCurrencyCode && baseCurrencyInfo && tokenAmount
       ? {
           serviceProvider: serviceProvider.serviceProvider,
           countryCode,
           baseCurrencyCode: quoteCurrency.meldCurrencyCode,
-          sourceAmount: amount,
+          sourceAmount: tokenAmount,
           quoteCurrencyCode: baseCurrencyInfo.code,
           refundWalletAddress: activeAccountAddress,
           externalCustomerId: activeAccountAddress,
@@ -177,7 +178,7 @@ export function FiatOnRampConnectingScreen({ navigation }: Props): JSX.Element |
         <>
           <FiatOnRampConnectingView
             amount={addFiatSymbolToNumber({
-              value: amount,
+              value: fiatAmount,
               currencyCode: baseCurrencyInfo?.code,
               currencySymbol: baseCurrencyInfo?.symbol,
             })}

apps/mobile/src/screens/HomeScreen.tsx

@@ -58,8 +58,9 @@ import SendIcon from 'ui/src/assets/icons/send-action.svg'
 import { AnimatedFlex } from 'ui/src/components/layout/AnimatedFlex'
 import { useDeviceDimensions } from 'ui/src/hooks/useDeviceDimensions'
 import { iconSizes, spacing } from 'ui/src/theme'
+import { useNftsTabQuery } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
 import { AccountType } from 'uniswap/src/features/accounts/types'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { usePortfolioBalances } from 'uniswap/src/features/dataApi/balances'
 import { useCexTransferProviders } from 'uniswap/src/features/fiatOnRamp/useCexTransferProviders'
 import { FeatureFlags } from 'uniswap/src/features/gating/flags'
@@ -81,6 +82,7 @@ import { TestID } from 'uniswap/src/test/fixtures/testIDs'
 import { MobileScreens } from 'uniswap/src/types/screens/mobile'
 import { useTimeout } from 'utilities/src/time/timing'
 import { ScannerModalState } from 'wallet/src/components/QRCodeScanner/constants'
+import { useFormattedTransactionDataForActivity } from 'wallet/src/features/activity/hooks'
 import { PortfolioBalance } from 'wallet/src/features/portfolio/PortfolioBalance'
 import { TokenBalanceListRow } from 'wallet/src/features/portfolio/TokenBalanceListContext'
 import { useHeartbeatReporter, useLastBalancesReporter } from 'wallet/src/features/telemetry/hooks'
@@ -115,7 +117,28 @@ export function HomeScreen(props?: AppStackScreenProp<MobileScreens.Home>): JSX.
   const { data: balancesById, loading: areBalancesLoading } = usePortfolioBalances({
     address: activeAccount.address,
   })
-  const showEmptyTokenState = balancesById && !Object.entries(balancesById).length
+
+  const { gqlChains } = useEnabledChains()
+  const { data: nftData } = useNftsTabQuery({
+    variables: {
+      ownerAddress: activeAccount.address,
+      first: 1,
+      filter: { filterSpam: true },
+      chains: gqlChains,
+    },
+    notifyOnNetworkStatusChange: true, // Used to trigger network state / loading on refetch or fetchMore
+    errorPolicy: 'all', // Suppress non-null image.url fields from backend
+  })
+  const isNftBalance = !!nftData?.nftBalances?.edges.length
+
+  const { hasData: isActivity } = useFormattedTransactionDataForActivity({
+    address: activeAccount.address,
+    hideSpamTokens: true,
+    pageSize: 1,
+  })
+
+  const isTokenBalances = !!Object.entries(balancesById || {}).length
+  const showEmptyWalletState = !isTokenBalances && !isNftBalance && !isActivity
 
   // opens the wallet restore modal if recovery phrase is missing after the app is opened
   useWalletRestore({ openModalImmediately: true })
@@ -126,7 +149,7 @@ export function HomeScreen(props?: AppStackScreenProp<MobileScreens.Home>): JSX.
 
   const [routeTabIndex, setRouteTabIndex] = useState(props?.route?.params?.tab ?? HomeScreenTabIndex.Tokens)
   // Ensures that tabIndex has the proper value between the empty state and non-empty state
-  const tabIndex = showEmptyTokenState ? HomeScreenTabIndex.Tokens : routeTabIndex
+  const tabIndex = showEmptyWalletState ? HomeScreenTabIndex.Tokens : routeTabIndex
 
   useHomeScreenCustomAndroidBackButton(routeTabIndex, setRouteTabIndex)
 
@@ -138,7 +161,7 @@ export function HomeScreen(props?: AppStackScreenProp<MobileScreens.Home>): JSX.
   const exploreTitle = t('home.explore.title')
 
   const routes = useMemo((): HomeRoute[] => {
-    if (showEmptyTokenState) {
+    if (showEmptyWalletState) {
       return [
         {
           key: SectionName.HomeExploreTab,
@@ -158,7 +181,7 @@ export function HomeScreen(props?: AppStackScreenProp<MobileScreens.Home>): JSX.
     }
 
     return tabs
-  }, [showEmptyTokenState, tokensTitle, nftsTitle, activityTitle, showFeedTab, exploreTitle, feedTitle])
+  }, [showEmptyWalletState, tokensTitle, nftsTitle, activityTitle, showFeedTab, exploreTitle, feedTitle])
 
   useEffect(
     function syncTabIndex() {
@@ -233,7 +256,7 @@ export function HomeScreen(props?: AppStackScreenProp<MobileScreens.Home>): JSX.
   const exploreTabScrollRef = useAnimatedRef<FlatList<any>>()
 
   const currentScrollValue = useDerivedValue(() => {
-    if (showEmptyTokenState) {
+    if (showEmptyWalletState) {
       return exploreTabScrollValue.value
     } else if (tabIndex === HomeScreenTabIndex.Tokens) {
       return tokensTabScrollValue.value
@@ -246,7 +269,7 @@ export function HomeScreen(props?: AppStackScreenProp<MobileScreens.Home>): JSX.
   }, [
     activityTabScrollValue.value,
     exploreTabScrollValue.value,
-    showEmptyTokenState,
+    showEmptyWalletState,
     feedTabScrollValue.value,
     nftsTabScrollValue.value,
     tabIndex,
@@ -295,7 +318,7 @@ export function HomeScreen(props?: AppStackScreenProp<MobileScreens.Home>): JSX.
   useScrollToTop(
     useRef({
       scrollToTop: () => {
-        if (showEmptyTokenState) {
+        if (showEmptyWalletState) {
           exploreTabScrollRef.current?.scrollToOffset({ offset: 0, animated: true })
         } else if (currentTabIndex.value === HomeScreenTabIndex.NFTs && isNftTabsAtTop.value) {
           setRouteTabIndex(HomeScreenTabIndex.Tokens)
@@ -448,10 +471,10 @@ export function HomeScreen(props?: AppStackScreenProp<MobileScreens.Home>): JSX.
     () => (
       <OnboardingIntroCardStack
         isLoading={areBalancesLoading && balancesById === undefined}
-        hasTokens={!showEmptyTokenState}
+        hasTokens={!showEmptyWalletState}
       />
     ),
-    [showEmptyTokenState, areBalancesLoading, balancesById],
+    [showEmptyWalletState, areBalancesLoading, balancesById],
   )
 
   const contentHeader = useMemo(() => {
@@ -459,7 +482,7 @@ export function HomeScreen(props?: AppStackScreenProp<MobileScreens.Home>): JSX.
       <Flex
         backgroundColor="$surface1"
         gap="$spacing8"
-        pb={showEmptyTokenState ? '$spacing8' : '$spacing16'}
+        pb={showEmptyWalletState ? '$spacing8' : '$spacing16'}
         px="$spacing12"
       >
         <TestnetModeModal
@@ -487,7 +510,7 @@ export function HomeScreen(props?: AppStackScreenProp<MobileScreens.Home>): JSX.
       </Flex>
     )
   }, [
-    showEmptyTokenState,
+    showEmptyWalletState,
     isTestnetWarningModalOpen,
     t,
     handleTestnetWarningModalClose,
@@ -499,7 +522,7 @@ export function HomeScreen(props?: AppStackScreenProp<MobileScreens.Home>): JSX.
     promoBanner,
   ])
 
-  const paddingTop = headerHeight + TAB_BAR_HEIGHT + (showEmptyTokenState ? 0 : TAB_STYLES.tabListInner.paddingTop)
+  const paddingTop = headerHeight + TAB_BAR_HEIGHT + (showEmptyWalletState ? 0 : TAB_STYLES.tabListInner.paddingTop)
   const paddingBottom = insets.bottom + SWAP_BUTTON_HEIGHT + TAB_STYLES.tabListInner.paddingBottom + spacing.spacing12
 
   const contentContainerStyle = useMemo<StyleProp<ViewStyle>>(

apps/mobile/src/screens/Import/WatchWalletScreen.tsx

@@ -11,7 +11,7 @@ import { useCompleteOnboardingCallback } from 'src/features/onboarding/hooks'
 import { useNavigationHeader } from 'src/utils/useNavigationHeader'
 import { Button, Flex, Text } from 'ui/src'
 import { Eye, GraduationCap } from 'ui/src/components/icons'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { UniverseChainId } from 'uniswap/src/features/chains/types'
 import { usePortfolioBalances } from 'uniswap/src/features/dataApi/balances'
 import { ENS_SUFFIX } from 'uniswap/src/features/ens/constants'

apps/mobile/src/screens/Import/__snapshots__/RestoreCloudBackupScreen.test.tsx.snap

@@ -5,7 +5,12 @@ exports[`RestoreCloudBackupScreen renders correctly 1`] = `
   sentry-label="Screen"
   style={
     {
-      "backgroundColor": "#FFFFFF",
+      "backgroundColor": {
+        "dynamic": {
+          "dark": "#131313",
+          "light": "#FFFFFF",
+        },
+      },
       "flex": 1,
       "flexDirection": "column",
       "paddingLeft": undefined,
@@ -81,7 +86,12 @@ exports[`RestoreCloudBackupScreen renders correctly 1`] = `
             style={
               {
                 "alignItems": "center",
-                "backgroundColor": "rgba(34,34,34,0.05)",
+                "backgroundColor": {
+                  "dynamic": {
+                    "dark": "rgba(255,255,255,0.12)",
+                    "light": "rgba(34,34,34,0.05)",
+                  },
+                },
                 "borderBottomLeftRadius": 8,
                 "borderBottomRightRadius": 8,
                 "borderTopLeftRadius": 8,
@@ -159,7 +169,12 @@ exports[`RestoreCloudBackupScreen renders correctly 1`] = `
           maxFontSizeMultiplier={1.4}
           style={
             {
-              "color": "#222222",
+              "color": {
+                "dynamic": {
+                  "dark": "#FFFFFF",
+                  "light": "#222222",
+                },
+              },
               "fontFamily": "Basel Grotesk",
               "fontSize": 19,
               "fontWeight": "400",
@@ -177,7 +192,12 @@ exports[`RestoreCloudBackupScreen renders correctly 1`] = `
           maxFontSizeMultiplier={1.4}
           style={
             {
-              "color": "#7D7D7D",
+              "color": {
+                "dynamic": {
+                  "dark": "#9B9B9B",
+                  "light": "#7D7D7D",
+                },
+              },
               "fontFamily": "Basel Grotesk",
               "fontSize": 17,
               "fontWeight": "400",

apps/mobile/src/screens/Import/useOnDeviceRecoveryData.ts

 import { useEffect, useMemo, useState } from 'react'
 import { useMultiplePortfolioBalancesQuery } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 // eslint-disable-next-line no-restricted-imports
 import { usePortfolioValueModifiers } from 'uniswap/src/features/dataApi/balances'
 import { useUnitagByAddress } from 'uniswap/src/features/unitags/hooks'

apps/mobile/src/screens/Onboarding/LandingScreen.tsx

@@ -11,7 +11,7 @@ import { TermsOfService } from 'src/screens/Onboarding/TermsOfService'
 import { hideSplashScreen } from 'src/utils/splashScreen'
 import { Flex, Text, TouchableArea } from 'ui/src'
 import { AnimatedFlex } from 'ui/src/components/layout/AnimatedFlex'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { setIsTestnetModeEnabled } from 'uniswap/src/features/settings/slice'
 import Trace from 'uniswap/src/features/telemetry/Trace'
 import { ElementName, ModalName } from 'uniswap/src/features/telemetry/constants'

apps/mobile/src/screens/SettingsScreen.tsx

@@ -43,7 +43,7 @@ import {
 } from 'ui/src/components/icons'
 import { iconSizes, spacing } from 'ui/src/theme'
 import { uniswapUrls } from 'uniswap/src/constants/urls'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { useAppFiatCurrencyInfo } from 'uniswap/src/features/fiatCurrency/hooks'
 import { useCurrentLanguageInfo } from 'uniswap/src/features/language/hooks'
 import { useHideSmallBalancesSetting, useHideSpamTokensSetting } from 'uniswap/src/features/settings/hooks'

apps/mobile/src/screens/SettingsWallet.tsx

@@ -32,7 +32,7 @@ import GlobalIcon from 'ui/src/assets/icons/global.svg'
 import TextEditIcon from 'ui/src/assets/icons/textEdit.svg'
 import { iconSizes, spacing } from 'ui/src/theme'
 import { AccountType } from 'uniswap/src/features/accounts/types'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { useENS } from 'uniswap/src/features/ens/useENS'
 import { MobileEventName, ModalName } from 'uniswap/src/features/telemetry/constants'
 import { sendAnalyticsEvent } from 'uniswap/src/features/telemetry/send'

apps/mobile/src/screens/TokenDetailsScreen.tsx

@@ -36,7 +36,7 @@ import { GQLQueries } from 'uniswap/src/data/graphql/uniswap-data-api/queries'
 import { AssetType } from 'uniswap/src/entities/assets'
 import { useBridgingTokenWithHighestBalance } from 'uniswap/src/features/bridging/hooks/tokens'
 import { getChainInfo } from 'uniswap/src/features/chains/chainInfo'
-import { useEnabledChains } from 'uniswap/src/features/chains/hooks'
+import { useEnabledChains } from 'uniswap/src/features/chains/hooks/useEnabledChains'
 import { TokenList } from 'uniswap/src/features/dataApi/types'
 import { currencyIdToContractInput } from 'uniswap/src/features/dataApi/utils'
 import { useIsSupportedFiatOnRampCurrency } from 'uniswap/src/features/fiatOnRamp/hooks'

apps/mobile/tsconfig.json

 {
   "$schema": "https://json.schemastore.org/tsconfig",
   "display": "Mobile App",
-  "extends": "tsconfig/expo.json",
+  "extends": "../../config/tsconfig/expo.json",
   "references": [
     {
       "path": "../../packages/ui"

apps/web/craco.config.cjs

@@ -62,6 +62,7 @@ module.exports = {
         globals: {
           __DEV__: true,
         },
+        testTimeout: 15000,
         cacheDirectory: getCacheDirectory('jest'),
         transform: {
           ...Object.entries(jestConfig.transform).reduce((transform, [key, value]) => {

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

@@ -47,6 +47,7 @@ describe('Testing nfts', () => {
   // })
 
   it('should navigate to and from the owned nfts page', () => {
+    cy.interceptGraphqlOperation('NftBalance', 'mini-portfolio/nfts')
     cy.visit('/')
     cy.get(getTestSelector('web3-status-connected')).click()
     cy.get(getTestSelector('mini-portfolio-navbar')).contains('NFTs').click()

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

@@ -128,7 +128,7 @@ describe('Swap', () => {
       const sendSpy = cy.spy(hardhat.provider, 'send')
       cy.wrap(sendSpy).should('not.be.calledWith', 'wallet_switchEthereumChain')
       cy.get(getTestSelector('token-option-10-ETH')).click()
-      cy.get('#swap-currency-input').contains(`Balance: <0.001`)
+      cy.get('#swap-currency-input').contains(`Balance`)
     })
   })
 })

apps/web/cypress/e2e/wallet-connection/connect.test.ts

@@ -10,7 +10,7 @@ describe('disconnect wallet', () => {
     cy.contains('Balance:')
 
     // Disconnect the wallet
-    cy.hardhat().then((hardhat) => cy.contains(hardhat.wallet.address.substring(0, 6)).click())
+    cy.get(getTestSelector('web3-status-connected')).click()
     cy.get(getTestSelector('wallet-disconnect')).click()
     cy.get(getTestSelector('wallet-disconnect')).contains('Disconnect') // Confirmation UI
     cy.get(getTestSelector('wallet-disconnect')).click() // Confirm

apps/web/functions/explore/tokens/__snapshots__/token.test.ts.snap

@@ -119,7 +119,7 @@ exports[`should inject metadata for valid tokens 1`] = `
         }
       }
     </style>
-  <script defer src="/static/js/bundle.js"></script><meta property="og:title" content="Get USDC on Uniswap" data-rh="true"><meta property="og:image" content="http://127.0.0.1:3000/api/image/tokens/ethereum/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48" data-rh="true"><meta property="og:image:width" content="1200" data-rh="true"><meta property="og:image:height" content="630" data-rh="true"><meta property="og:image:alt" content="Get USDC on Uniswap" data-rh="true"><meta property="og:type" content="website" data-rh="true"><meta property="og:url" content="http://127.0.0.1:3000/explore/tokens/ethereum/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48" data-rh="true"><meta property="twitter:card" content="summary_large_image" data-rh="true"><meta property="twitter:title" content="Get USDC on Uniswap" data-rh="true"><meta property="twitter:image" content="http://127.0.0.1:3000/api/image/tokens/ethereum/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48" data-rh="true"><meta property="twitter:image:alt" content="Get USDC on Uniswap" data-rh="true"></head>
+  <script defer src="/static/js/bundle.js"></script><meta property="og:title" content="Get POL on Uniswap" data-rh="true"><meta property="og:image" content="http://127.0.0.1:3000/api/image/tokens/polygon/NATIVE" data-rh="true"><meta property="og:image:width" content="1200" data-rh="true"><meta property="og:image:height" content="630" data-rh="true"><meta property="og:image:alt" content="Get POL on Uniswap" data-rh="true"><meta property="og:type" content="website" data-rh="true"><meta property="og:url" content="http://127.0.0.1:3000/explore/tokens/polygon/NATIVE" data-rh="true"><meta property="twitter:card" content="summary_large_image" data-rh="true"><meta property="twitter:title" content="Get POL on Uniswap" data-rh="true"><meta property="twitter:image" content="http://127.0.0.1:3000/api/image/tokens/polygon/NATIVE" data-rh="true"><meta property="twitter:image:alt" content="Get POL on Uniswap" data-rh="true"></head>
 
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -381,7 +381,7 @@ exports[`should inject metadata for valid tokens 3`] = `
         }
       }
     </style>
-  <script defer src="/static/js/bundle.js"></script><meta property="og:title" content="Get MATIC on Uniswap" data-rh="true"><meta property="og:image" content="http://127.0.0.1:3000/api/image/tokens/polygon/NATIVE" data-rh="true"><meta property="og:image:width" content="1200" data-rh="true"><meta property="og:image:height" content="630" data-rh="true"><meta property="og:image:alt" content="Get MATIC on Uniswap" data-rh="true"><meta property="og:type" content="website" data-rh="true"><meta property="og:url" content="http://127.0.0.1:3000/explore/tokens/polygon/NATIVE" data-rh="true"><meta property="twitter:card" content="summary_large_image" data-rh="true"><meta property="twitter:title" content="Get MATIC on Uniswap" data-rh="true"><meta property="twitter:image" content="http://127.0.0.1:3000/api/image/tokens/polygon/NATIVE" data-rh="true"><meta property="twitter:image:alt" content="Get MATIC on Uniswap" data-rh="true"></head>
+  <script defer src="/static/js/bundle.js"></script><meta property="og:title" content="Get POL on Uniswap" data-rh="true"><meta property="og:image" content="http://127.0.0.1:3000/api/image/tokens/polygon/NATIVE" data-rh="true"><meta property="og:image:width" content="1200" data-rh="true"><meta property="og:image:height" content="630" data-rh="true"><meta property="og:image:alt" content="Get POL on Uniswap" data-rh="true"><meta property="og:type" content="website" data-rh="true"><meta property="og:url" content="http://127.0.0.1:3000/explore/tokens/polygon/NATIVE" data-rh="true"><meta property="twitter:card" content="summary_large_image" data-rh="true"><meta property="twitter:title" content="Get POL on Uniswap" data-rh="true"><meta property="twitter:image" content="http://127.0.0.1:3000/api/image/tokens/polygon/NATIVE" data-rh="true"><meta property="twitter:image:alt" content="Get POL on Uniswap" data-rh="true"></head>
 
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>