ci(release): publish latest release

6586274f · Uniswap Labs Service Account · fc68138e · 6586274f · 6586274f · 6586274f
Commit 6586274f authored May 09, 2024 by Uniswap Labs Service Account
378 changed files
--- a/RELEASE
+++ b/RELEASE
 IPFS hash of the deployment:
- CIDv0: `QmQcU3yDYBfnzcB31iYwTcW41JwYaQabvdaaM28WCXf8Ws`
- CIDv1: `bafybeibbyso4k2bvdabn3u3s3ubzaxmszuwtjlhppj5zjjfeex2g4rhoga`
+- CIDv0: `QmZCHeoJuPsFdadwYDZ1gxfLvYaaRxv5pGxTRcmSGXqSgP`
+- CIDv1: `bafybeifbjqm3qbn3nu6diizot5gr24pw2dai5r6l5iafo5y4t5nufursoa`

 The latest release is always mirrored at [app.uniswap.org](https://app.uniswap.org).

@@ -10,15 +10,39 @@ You can also access the Uniswap Interface from an IPFS gateway.
 Your Uniswap settings are never remembered across different URLs.

 IPFS gateways:
- https://bafybeibbyso4k2bvdabn3u3s3ubzaxmszuwtjlhppj5zjjfeex2g4rhoga.ipfs.dweb.link/
- https://bafybeibbyso4k2bvdabn3u3s3ubzaxmszuwtjlhppj5zjjfeex2g4rhoga.ipfs.cf-ipfs.com/
- [ipfs://QmQcU3yDYBfnzcB31iYwTcW41JwYaQabvdaaM28WCXf8Ws/](ipfs://QmQcU3yDYBfnzcB31iYwTcW41JwYaQabvdaaM28WCXf8Ws/)
+- https://bafybeifbjqm3qbn3nu6diizot5gr24pw2dai5r6l5iafo5y4t5nufursoa.ipfs.dweb.link/
+- https://bafybeifbjqm3qbn3nu6diizot5gr24pw2dai5r6l5iafo5y4t5nufursoa.ipfs.cf-ipfs.com/
+- [ipfs://QmZCHeoJuPsFdadwYDZ1gxfLvYaaRxv5pGxTRcmSGXqSgP/](ipfs://QmZCHeoJuPsFdadwYDZ1gxfLvYaaRxv5pGxTRcmSGXqSgP/)

-### 5.25.7 (2024-05-09)
+## 5.26.0 (2024-05-09)
+
+
+### Features
+
+* **web:** add dynamic metatag updating w/ react-helmet-async (#7732) 4afd49c
+* **web:** add multichain ux flag (#7796) 870f18f
+* **web:** automate sitemap generation during prod deploy (#7846) 6010986
+* **web:** migrate user state back to localStorage (#7452) b8ff545


 ### Bug Fixes

-* **web:** hotfix warning modified extensions (#8042) ac4781d
+* **web:** add "Safe" RPC URLs to CSP (#7844) 7880af0
+* **web:** align price impact in details and warning (#7734) 65303d4
+* **web:** convert useQuery to use QueryOptions (#7729) da4104c
+* **web:** disable flaky tests in merge queue runs (#7771) c5fc13b
+* **web:** fix token lookups from network for backend-unsupported chains (#7894) 2bcd438
+* **web:** fix tokens lookups for avax (#7893) f4deeb6
+* **web:** Flip logic for Sells/Buys (#7880) cffd9ec
+* **web:** hotfix warning modified extensions (#8073) deeeb4f
+* **web:** infinite loop when connecting to unsupported chain (#7891) 4df2b6a
+* **web:** pool page stuck in rerender loop (#7892) 45541af
+* **web:** reduce gap in AdvancedSwapDetails component (#7733) 278f948
+* **web:** refactor chain URL param handling (#7807) a33bc3d
+* **web:** remove limits+send feature flags & fix broken /limit page refresh (#7870) 6c5eaa9
+* **web:** serialize polling tx receipts (#7908) 3c44924
+* **web:** support swapping spam tokens (#7793) 020a1e4
+* **web:** update the CTAs on pools page to link to explore/pools page (#7808) cb625d8
+* **web:** width of account bottom sheet on mobile (#7886) 03ebbd0


--- a/VERSION
+++ b/VERSION
-web/5.25.7
\ No newline at end of file
+web/5.26.0
\ No newline at end of file
--- a/apps/mobile/android/app/build.gradle
+++ b/apps/mobile/android/app/build.gradle
@@ -131,17 +131,17 @@ android {
      dev {
        isDefault(true)
        applicationIdSuffix ".dev"
-        versionName "1.26"
+        versionName "1.27"
        dimension "variant"
      }
      beta {
        applicationIdSuffix ".beta"
-        versionName "1.26"
+        versionName "1.27"
        dimension "variant"
      }
      prod {
        dimension "variant"
-        versionName "1.26"
+        versionName "1.27"
      }
    }


--- a/apps/mobile/ios/Uniswap.xcodeproj/project.pbxproj
+++ b/apps/mobile/ios/Uniswap.xcodeproj/project.pbxproj
@@ -185,6 +185,7 @@
 		9FEC9B8B2A858CF1003CD019 /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 9FEC9B8A2A858CF1003CD019 /* AppDelegate.m */; };
 		A32F9FBD272343C9002CFCDB /* GoogleService-Info.plist in Resources */ = {isa = PBXBuildFile; fileRef = A32F9FBC272343C8002CFCDB /* GoogleService-Info.plist */; };
 		A3F0A5B1272B1DFA00895B25 /* KeychainSwiftDistrib.swift in Sources */ = {isa = PBXBuildFile; fileRef = A3F0A5B0272B1DFA00895B25 /* KeychainSwiftDistrib.swift */; };
+		AC0EE0982BD826E700BCCF07 /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = AC0EE0972BD826E700BCCF07 /* PrivacyInfo.xcprivacy */; };
 		AEE498F72A85AD86000DDF8E /* Basel-Book.ttf in Resources */ = {isa = PBXBuildFile; fileRef = AEE498F52A85AD86000DDF8E /* Basel-Book.ttf */; };
 		AEE498F82A85AD86000DDF8E /* Basel-Medium.ttf in Resources */ = {isa = PBXBuildFile; fileRef = AEE498F62A85AD86000DDF8E /* Basel-Medium.ttf */; };
 		B8649A8D70B018E583494128 /* libPods-WidgetsCoreTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = F9B12416ED2E83444B0936B2 /* libPods-WidgetsCoreTests.a */; };
@@ -489,6 +490,7 @@
 		A721D9DBF345F037F45E92BE /* Pods-WidgetsCore.beta.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-WidgetsCore.beta.xcconfig"; path = "Target Support Files/Pods-WidgetsCore/Pods-WidgetsCore.beta.xcconfig"; sourceTree = "<group>"; };
 		A82B0304EEE753C6DEB3943E /* libPods-OneSignalNotificationServiceExtension.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-OneSignalNotificationServiceExtension.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		A87B4C3727F6D91B4DAABF14 /* Pods-Uniswap.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Uniswap.debug.xcconfig"; path = "Target Support Files/Pods-Uniswap/Pods-Uniswap.debug.xcconfig"; sourceTree = "<group>"; };
+		AC0EE0972BD826E700BCCF07 /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xml; name = PrivacyInfo.xcprivacy; path = Uniswap/PrivacyInfo.xcprivacy; sourceTree = "<group>"; };
 		AEE498F52A85AD86000DDF8E /* Basel-Book.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "Basel-Book.ttf"; path = "../src/assets/fonts/Basel-Book.ttf"; sourceTree = "<group>"; };
 		AEE498F62A85AD86000DDF8E /* Basel-Medium.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "Basel-Medium.ttf"; path = "../src/assets/fonts/Basel-Medium.ttf"; sourceTree = "<group>"; };
 		B398F0A4DA17159EA0E2D6DF /* Pods-Uniswap.dev.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Uniswap.dev.xcconfig"; path = "Target Support Files/Pods-Uniswap/Pods-Uniswap.dev.xcconfig"; sourceTree = "<group>"; };
@@ -880,6 +882,7 @@
 		13B07FAE1A68108700A75B9A /* Uniswap */ = {
 			isa = PBXGroup;
 			children = (
+				AC0EE0972BD826E700BCCF07 /* PrivacyInfo.xcprivacy */,
 				8EA8AB3F2AB7ED76004E7EF3 /* Icons */,
 				8E566D9F2AA1095000D4AA76 /* Components */,
 				07B067692A7D6EC8001DD9B9 /* Widget */,
@@ -1433,6 +1436,7 @@
 				77CF6065C8A24FE48204A2C1 /* SplashScreen.storyboard in Resources */,
 				681301B42A3726EE00A5BF43 /* pending_swap.riv in Resources */,
 				681301B22A3726EE00A5BF43 /* pending_send.riv in Resources */,
+				AC0EE0982BD826E700BCCF07 /* PrivacyInfo.xcprivacy in Resources */,
 				AEE498F72A85AD86000DDF8E /* Basel-Book.ttf in Resources */,
 				0767E02F2A61BBDC0042ADA2 /* Basel-Regular.otf in Resources */,
 				0767E0352A61BBDC0042ADA2 /* Basel-Bold.otf in Resources */,
@@ -2450,7 +2454,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 1.26;
+				MARKETING_VERSION = 1.27;
 				MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_DEBUG";
@@ -2496,7 +2500,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 1.26;
+				MARKETING_VERSION = 1.27;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = com.uniswap.mobile.widgets;
@@ -2542,7 +2546,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 1.26;
+				MARKETING_VERSION = 1.27;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = com.uniswap.mobile.dev.widgets;
@@ -2588,7 +2592,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 1.26;
+				MARKETING_VERSION = 1.27;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = com.uniswap.mobile.beta.widgets;
@@ -2630,7 +2634,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 1.26;
+				MARKETING_VERSION = 1.27;
 				MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_DEBUG";
@@ -2673,7 +2677,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 1.26;
+				MARKETING_VERSION = 1.27;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = com.uniswap.mobile.WidgetIntentExtension;
@@ -2716,7 +2720,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 1.26;
+				MARKETING_VERSION = 1.27;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = com.uniswap.mobile.dev.WidgetIntentExtension;
@@ -2759,7 +2763,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 1.26;
+				MARKETING_VERSION = 1.27;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = com.uniswap.mobile.beta.WidgetIntentExtension;
@@ -2795,7 +2799,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.26;
+				MARKETING_VERSION = 1.27;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -2833,7 +2837,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.26;
+				MARKETING_VERSION = 1.27;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -3003,7 +3007,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 1.26;
+				MARKETING_VERSION = 1.27;
 				MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_DEBUG";
@@ -3047,7 +3051,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 1.26;
+				MARKETING_VERSION = 1.27;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = com.uniswap.mobile.OneSignalNotificationServiceExtension;
@@ -3143,7 +3147,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.26;
+				MARKETING_VERSION = 1.27;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -3214,7 +3218,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 1.26;
+				MARKETING_VERSION = 1.27;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = com.uniswap.mobile.beta.OneSignalNotificationServiceExtension;
@@ -3310,7 +3314,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.26;
+				MARKETING_VERSION = 1.27;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -3381,7 +3385,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 1.26;
+				MARKETING_VERSION = 1.27;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = com.uniswap.mobile.dev.OneSignalNotificationServiceExtension;

--- a/apps/mobile/ios/Uniswap/PrivacyInfo.xcprivacy
+++ b/apps/mobile/ios/Uniswap/PrivacyInfo.xcprivacy
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>NSPrivacyAccessedAPITypes</key>
+	<array>
+		<dict>
+			<key>NSPrivacyAccessedAPIType</key>
+			<string>NSPrivacyAccessedAPICategoryUserDefaults</string>
+			<key>NSPrivacyAccessedAPITypeReasons</key>
+			<array>
+				<string>CA92.1</string>
+				<string>C56D.1</string>
+			</array>
+		</dict>
+		<dict>
+			<key>NSPrivacyAccessedAPIType</key>
+			<string>NSPrivacyAccessedAPICategorySystemBootTime</string>
+			<key>NSPrivacyAccessedAPITypeReasons</key>
+			<array>
+				<string>35F9.1</string>
+			</array>
+		</dict>
+		<dict>
+			<key>NSPrivacyAccessedAPIType</key>
+			<string>NSPrivacyAccessedAPICategoryDiskSpace</string>
+			<key>NSPrivacyAccessedAPITypeReasons</key>
+			<array>
+				<string>E174.1</string>
+			</array>
+		</dict>
+		<dict>
+			<key>NSPrivacyAccessedAPIType</key>
+			<string>NSPrivacyAccessedAPICategoryFileTimestamp</string>
+			<key>NSPrivacyAccessedAPITypeReasons</key>
+			<array>
+				<string>C617.1</string>
+				<string>0A2A.1</string>
+			</array>
+		</dict>
+	</array>
+</dict>
+</plist>
--- a/apps/mobile/package.json
+++ b/apps/mobile/package.json
@@ -83,8 +83,8 @@
    "@uniswap/analytics": "1.7.0",
    "@uniswap/analytics-events": "2.32.0",
    "@uniswap/ethers-rs-mobile": "0.0.5",
-    "@uniswap/sdk-core": "4.2.1-beta.1",
-    "@uniswap/v3-sdk": "3.11.1-beta.2",
+    "@uniswap/sdk-core": "4.2.1",
+    "@uniswap/v3-sdk": "3.11.1",
    "@walletconnect/core": "2.11.2",
    "@walletconnect/react-native-compat": "2.11.2",
    "@walletconnect/utils": "2.11.2",

--- a/apps/mobile/src/app/App.tsx
+++ b/apps/mobile/src/app/App.tsx
@@ -169,12 +169,10 @@ function App(): JSX.Element | null {

 function SentryTags({ children }: PropsWithChildren): JSX.Element {
  useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    for (const [_, flagKey] of WALLET_FEATURE_FLAG_NAMES.entries()) {
      Sentry.setTag(`featureFlag.${flagKey}`, Statsig.checkGateWithExposureLoggingDisabled(flagKey))
    }

-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    for (const [_, experimentDef] of WALLET_EXPERIMENTS.entries()) {
      Sentry.setTag(
        `experiment.${experimentDef.name}`,

--- a/apps/mobile/src/app/MobileWalletNavigationProvider.tsx
+++ b/apps/mobile/src/app/MobileWalletNavigationProvider.tsx
@@ -75,7 +75,7 @@ function useHandleShareNft(): (args: ShareNftArgs) => Promise<void> {

 function useHandleShareToken(): (args: ShareTokenArgs) => Promise<void> {
  return useCallback(async ({ currencyId }: ShareTokenArgs): Promise<void> => {
-    const url = getTokenUrl(currencyId)
+    const url = getTokenUrl(currencyId, true)

    if (!url) {
      logger.error(new Error('Failed to get token URL'), {

--- a/apps/mobile/src/app/modals/AccountSwitcherModal.tsx
+++ b/apps/mobile/src/app/modals/AccountSwitcherModal.tsx
@@ -14,13 +14,13 @@ import { useSagaStatus } from 'src/utils/useSagaStatus'
 import {
  Button,
  Flex,
-  Icons,
  Text,
  TouchableArea,
  useDeviceDimensions,
  useDeviceInsets,
  useSporeColors,
 } from 'ui/src'
+import { Plus } from 'ui/src/components/icons'
 import { spacing } from 'ui/src/theme'
 import { isAndroid } from 'uniswap/src/utils/platform'
 import { AddressDisplay } from 'wallet/src/components/accounts/AddressDisplay'
@@ -298,7 +298,7 @@ export function AccountSwitcher({ onClose }: { onClose: () => void }): JSX.Eleme
      <TouchableArea hapticFeedback mt="$spacing16" onPress={onPressAddWallet}>
        <Flex row alignItems="center" gap="$spacing16" ml="$spacing24">
          <Flex borderColor="$surface3" borderRadius="$roundedFull" borderWidth={1} p="$spacing8">
-            <Icons.Plus color="$neutral2" size="$icon.12" strokeWidth={2} />
+            <Plus color="$neutral2" size="$icon.12" strokeWidth={2} />
          </Flex>
          <Text color="$neutral2" variant="buttonLabel3">
            {t('account.wallet.button.add')}

--- a/apps/mobile/src/app/modals/ExperimentsModal.tsx
+++ b/apps/mobile/src/app/modals/ExperimentsModal.tsx
@@ -6,33 +6,9 @@ import { useAppDispatch, useAppSelector } from 'src/app/hooks'
 import { closeModal } from 'src/features/modals/modalSlice'
 import { selectCustomEndpoint } from 'src/features/tweaks/selectors'
 import { setCustomEndpoint } from 'src/features/tweaks/slice'
-import {
-  Accordion,
-  Button,
-  Flex,
-  Icons,
-  Separator,
-  Text,
-  useDeviceInsets,
-  useSporeColors,
-} from 'ui/src'
+import { Accordion, Button, Flex, Text, useDeviceInsets } from 'ui/src'
 import { spacing } from 'ui/src/theme'
-import {
-  Experiments,
-  WALLET_EXPERIMENTS,
-  getExperimentDefinition,
-} from 'uniswap/src/features/gating/experiments'
-import {
-  FeatureFlags,
-  WALLET_FEATURE_FLAG_NAMES,
-  getFeatureFlagName,
-} from 'uniswap/src/features/gating/flags'
-import {
-  useExperimentValueWithExposureLoggingDisabled,
-  useFeatureFlagWithExposureLoggingDisabled,
-} from 'uniswap/src/features/gating/hooks'
-import { Statsig } from 'uniswap/src/features/gating/sdk/statsig'
-import { Switch } from 'wallet/src/components/buttons/Switch'
+import { AccordionHeader, GatingOverrides } from 'wallet/src/components/gating/GatingOverrides'
 import { TextInput } from 'wallet/src/components/input/TextInput'
 import { BottomSheetModal } from 'wallet/src/components/modals/BottomSheetModal'
 import { ModalName } from 'wallet/src/telemetry/constants'
@@ -65,16 +41,6 @@ export function ExperimentsModal(): JSX.Element {
    }
  }

-  const featureFlagRows: JSX.Element[] = []
-  for (const [flag, flagName] of WALLET_FEATURE_FLAG_NAMES.entries()) {
-    featureFlagRows.push(<FeatureFlagRow key={flagName} flag={flag} />)
-  }
-
-  const experimentRows: JSX.Element[] = []
-  for (const [experiment, experimentDef] of WALLET_EXPERIMENTS.entries()) {
-    experimentRows.push(<ExperimentRow key={experimentDef.name} experiment={experiment} />)
-  }
-
  return (
    <BottomSheetModal
      fullScreen
@@ -132,119 +98,9 @@ export function ExperimentsModal(): JSX.Element {
            </Accordion.Content>
          </Accordion.Item>

-          <Accordion.Item value="feature-flags">
-            <AccordionHeader title="⛳️ Feature Flags" />
-
-            <Accordion.Content>
-              <Text variant="body2">
-                Overridden feature flags are reset when the app is restarted
-              </Text>
-
-              <Flex gap="$spacing12" mt="$spacing12">
-                {featureFlagRows}
-              </Flex>
-            </Accordion.Content>
-          </Accordion.Item>
-
-          <Accordion.Item value="experiments">
-            <AccordionHeader title="🔬 Experiments" />
-
-            <Accordion.Content>
-              <Text variant="body2">
-                Overridden experiments are reset when the app is restarted
-              </Text>
-
-              <Flex gap="$spacing24" mt="$spacing12">
-                {experimentRows}
-              </Flex>
-            </Accordion.Content>
-          </Accordion.Item>
+          <GatingOverrides />
        </Accordion>
      </ScrollView>
    </BottomSheetModal>
  )
 }
-
-function AccordionHeader({ title }: { title: React.ReactNode }): JSX.Element {
-  return (
-    <Accordion.Header mt="$spacing12">
-      <Accordion.Trigger>
-        {({ open }: { open: boolean }): JSX.Element => (
-          <>
-            <Flex row justifyContent="space-between" width="100%">
-              <Text variant="subheading1">{title}</Text>
-              <Icons.RotatableChevron direction={open ? 'up' : 'down'} />
-            </Flex>
-          </>
-        )}
-      </Accordion.Trigger>
-    </Accordion.Header>
-  )
-}
-
-function FeatureFlagRow({ flag }: { flag: FeatureFlags }): JSX.Element {
-  const status = useFeatureFlagWithExposureLoggingDisabled(flag)
-  const name = getFeatureFlagName(flag)
-
-  return (
-    <Flex row alignItems="center" gap="$spacing16" justifyContent="space-between">
-      <Text variant="body1">{name}</Text>
-      <Switch
-        value={status}
-        onValueChange={(newValue: boolean): void => {
-          Statsig.overrideGate(name, newValue)
-        }}
-      />
-    </Flex>
-  )
-}
-
-function ExperimentRow({ experiment }: { experiment: Experiments }): JSX.Element {
-  const experimentDef = getExperimentDefinition(experiment)
-
-  return (
-    <>
-      <Separator />
-      <Flex>
-        <Text variant="body1">{experimentDef.name}</Text>
-        <Flex gap="$spacing4">
-          <Flex
-            key={experimentDef.name}
-            row
-            alignItems="center"
-            gap="$spacing16"
-            justifyContent="space-between"
-            paddingStart="$spacing16">
-            <Text variant="body2" />
-            <ExperimentValueSwitch experiment={experiment} />
-          </Flex>
-        </Flex>
-      </Flex>
-    </>
-  )
-}
-
-function ExperimentValueSwitch({ experiment }: { experiment: Experiments }): JSX.Element {
-  const colors = useSporeColors()
-  const experimentDef = getExperimentDefinition(experiment)
-  const currentValue = useExperimentValueWithExposureLoggingDisabled(experiment)
-
-  return (
-    <Flex gap="$spacing8">
-      {experimentDef.values.map((value) => (
-        <Flex
-          key={value}
-          gap="$spacing4"
-          onPressOut={() => {
-            Statsig.overrideConfig(experimentDef.name, {
-              [experimentDef.key]: value,
-            })
-          }}>
-          <Text color={value === currentValue ? colors.accent1.val : colors.neutral1.val}>
-            {value}
-          </Text>
-        </Flex>
-      ))}
-    </Flex>
-  )
-}
--- a/apps/mobile/src/app/modals/UniconsV2Modal.tsx
+++ b/apps/mobile/src/app/modals/UniconsV2Modal.tsx
@@ -5,7 +5,6 @@ import { useAppDispatch } from 'src/app/hooks'
 import {
  Button,
  Flex,
-  Icons,
  Text,
  Unicon,
  UniconV2,
@@ -13,6 +12,7 @@ import {
  useIsDarkMode,
  useUniconColors,
 } from 'ui/src'
+import { RightArrow } from 'ui/src/components/icons'
 import { spacing } from 'ui/src/theme'
 import { UniconGradient } from 'wallet/src/components/accounts/AccountIcon'
 import { BottomSheetModal } from 'wallet/src/components/modals/BottomSheetModal'
@@ -47,7 +47,7 @@ export function UniconsV2Modal({ address }: UniconsV2ModalProps): JSX.Element {
              <Unicon address={address} size={UNICON_SIZE - UNICON_PADDING} />
              <UniconGradient color={uniconColor} size={UNICON_SIZE} />
            </Flex>
-            <Icons.RightArrow color="$neutral3" size="$icon.16" />
+            <RightArrow color="$neutral3" size="$icon.16" />
            <UniconV2 address={address} size={UNICON_SIZE} />
          </Flex>
          <Flex alignItems="center" gap="$spacing12">

--- a/apps/mobile/src/app/navigation/NavBar.tsx
+++ b/apps/mobile/src/app/navigation/NavBar.tsx
@@ -21,7 +21,6 @@ import {
  Flex,
  FlexProps,
  HapticFeedback,
-  Icons,
  LinearGradient,
  Text,
  TouchableArea,
@@ -29,6 +28,7 @@ import {
  useIsDarkMode,
  useSporeColors,
 } from 'ui/src'
+import { Search } from 'ui/src/components/icons'
 import { borderRadii, fonts } from 'ui/src/theme'
 import { isAndroid, isIOS } from 'uniswap/src/utils/platform'
 import { useHighestBalanceNativeCurrencyId } from 'wallet/src/features/dataApi/balances'
@@ -250,7 +250,7 @@ function ExploreTabBarButton({ activeScale = 0.98 }: ExploreTabBarButtonProps):
              shadowOffset={SWAP_BUTTON_SHADOW_OFFSET}
              shadowOpacity={isDarkMode ? 0.6 : 0.4}
              shadowRadius={borderRadii.rounded20}>
-              <Icons.Search color="$neutral2" size="$icon.24" />
+              <Search color="$neutral2" size="$icon.24" />
              <Text
                allowFontScaling={false}
                color="$neutral2"

--- a/apps/mobile/src/app/navigation/navigation.tsx
+++ b/apps/mobile/src/app/navigation/navigation.tsx
@@ -61,7 +61,8 @@ import { SettingsWalletEdit } from 'src/screens/SettingsWalletEdit'
 import { SettingsWalletManageConnection } from 'src/screens/SettingsWalletManageConnection'
 import { TokenDetailsScreen } from 'src/screens/TokenDetailsScreen'
 import { WebViewScreen } from 'src/screens/WebViewScreen'
-import { Icons, useDeviceInsets, useSporeColors } from 'ui/src'
+import { useDeviceInsets, useSporeColors } from 'ui/src'
+import { RotatableChevron } from 'ui/src/components/icons'
 import { spacing } from 'ui/src/theme'
 import { FeatureFlags } from 'uniswap/src/features/gating/flags'
 import { useFeatureFlag } from 'uniswap/src/features/gating/hooks'
@@ -211,7 +212,7 @@ export function FiatOnRampStackNavigator(): JSX.Element {
 }

 const renderHeaderBackImage = (): JSX.Element => (
-  <Icons.RotatableChevron color="$neutral2" height={28} width={28} />
+  <RotatableChevron color="$neutral2" height={28} width={28} />
 )

 export function OnboardingStackNavigator(): JSX.Element {

--- a/apps/mobile/src/components/PriceExplorer/Text.tsx
+++ b/apps/mobile/src/components/PriceExplorer/Text.tsx
@@ -2,7 +2,8 @@ import React from 'react'
 import { useAnimatedStyle } from 'react-native-reanimated'
 import { useLineChartDatetime } from 'react-native-wagmi-charts'
 import { AnimatedText } from 'src/components/text/AnimatedText'
-import { Flex, Icons, useSporeColors } from 'ui/src'
+import { Flex, useSporeColors } from 'ui/src'
+import { AnimatedCaretChange } from 'ui/src/components/icons'
 import { isAndroid } from 'uniswap/src/utils/platform'
 import { FiatCurrency } from 'wallet/src/features/fiatCurrency/constants'
 import { useAppFiatCurrency, useAppFiatCurrencyInfo } from 'wallet/src/features/fiatCurrency/hooks'
@@ -65,7 +66,7 @@ export function RelativeChangeText({ loading }: { loading: boolean }): JSX.Eleme
      alignItems={isAndroid ? 'center' : 'flex-end'}
      gap="$spacing2"
      mt={isAndroid ? '$none' : '$spacing2'}>
-      <Icons.AnimatedCaretChange
+      <AnimatedCaretChange
        size="$icon.16"
        strokeWidth={2}
        style={[

--- a/apps/mobile/src/components/QRCodeScanner/QRCodeScanner.tsx
+++ b/apps/mobile/src/components/QRCodeScanner/QRCodeScanner.tsx
@@ -7,16 +7,9 @@ import { Alert, LayoutChangeEvent, LayoutRectangle, StyleSheet } from 'react-nat
 import { launchImageLibrary } from 'react-native-image-picker'
 import { FadeIn, FadeOut } from 'react-native-reanimated'
 import { Defs, LinearGradient, Path, Rect, Stop, Svg } from 'react-native-svg'
-import {
-  AnimatedFlex,
-  Button,
-  Flex,
-  Icons,
-  Text,
-  useDeviceDimensions,
-  useSporeColors,
-} from 'ui/src'
+import { AnimatedFlex, Button, Flex, Text, useDeviceDimensions, useSporeColors } from 'ui/src'
 import CameraScan from 'ui/src/assets/icons/camera-scan.svg'
+import { Global, Photo } from 'ui/src/components/icons'
 import { iconSizes, spacing } from 'ui/src/theme'
 import { Sentry } from 'utilities/src/logger/Sentry'
 import { DevelopmentOnly } from 'wallet/src/components/DevelopmentOnly/DevelopmentOnly'
@@ -264,14 +257,14 @@ export function QRCodeScanner(props: QRCodeScannerProps | WCScannerProps): JSX.E
              {isReadingImageFile ? (
                <SpinningLoader size={iconSizes.icon28} />
              ) : (
-                <Icons.Photo color="$neutral1" size={iconSizes.icon28} />
+                <Photo color="$neutral1" size={iconSizes.icon28} />
              )}
            </Flex>

            {isWalletConnectModal && props.numConnections > 0 && (
              <Button
                fontFamily="$body"
-                icon={<Icons.Global color="$neutral2" />}
+                icon={<Global color="$neutral2" />}
                theme="secondary"
                onPress={props.onPressConnections}>
                {t('qrScanner.button.connections', { count: props.numConnections })}

--- a/apps/mobile/src/components/Settings/SettingsRow.tsx
+++ b/apps/mobile/src/components/Settings/SettingsRow.tsx
@@ -9,7 +9,8 @@ import {
 } from 'src/app/navigation/types'
 import { openModal } from 'src/features/modals/modalSlice'
 import { Screens } from 'src/screens/Screens'
-import { Flex, Icons, Text, TouchableArea, useSporeColors } from 'ui/src'
+import { Flex, Text, TouchableArea, useSporeColors } from 'ui/src'
+import { RotatableChevron } from 'ui/src/components/icons'
 import { iconSizes } from 'ui/src/theme'
 import { Switch } from 'wallet/src/components/buttons/Switch'
 import { Arrow } from 'wallet/src/components/icons/Arrow'
@@ -123,7 +124,7 @@ export function SettingsRow({
                </Text>
              </Flex>
            ) : null}
-            <Icons.RotatableChevron
+            <RotatableChevron
              color="$neutral3"
              direction="end"
              height={iconSizes.icon24}

--- a/apps/mobile/src/components/TokenDetails/TokenDetailsStats.tsx
+++ b/apps/mobile/src/components/TokenDetails/TokenDetailsStats.tsx
@@ -2,7 +2,14 @@ import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
 import { LongText } from 'src/components/text/LongText'
-import { Flex, Icons, Text, TouchableArea, useSporeColors } from 'ui/src'
+import { Flex, Text, TouchableArea, useSporeColors } from 'ui/src'
+import {
+  ChartBar,
+  ChartPie,
+  Language as LanguageIcon,
+  TrendDown,
+  TrendUp,
+} from 'ui/src/components/icons'
 import { iconSizes } from 'ui/src/theme'
 import { TokenDetailsScreenQuery } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
 import { NumberType } from 'utilities/src/format/types'
@@ -58,45 +65,35 @@ export function TokenDetailsMarketData({
    <Flex gap="$spacing8">
      <StatsRow
        label={t('token.stats.marketCap')}
-        statsIcon={
-          <Icons.ChartPie color={tokenColor ?? defaultTokenColor} size={iconSizes.icon16} />
-        }>
+        statsIcon={<ChartPie color={tokenColor ?? defaultTokenColor} size={iconSizes.icon16} />}>
        <Text loading={isLoading} variant="body2">
          {convertFiatAmountFormatted(marketCap, NumberType.FiatTokenStats)}
        </Text>
      </StatsRow>
      <StatsRow
        label={t('token.stats.fullyDilutedValuation')}
-        statsIcon={
-          <Icons.ChartPie color={tokenColor ?? defaultTokenColor} size={iconSizes.icon16} />
-        }>
+        statsIcon={<ChartPie color={tokenColor ?? defaultTokenColor} size={iconSizes.icon16} />}>
        <Text loading={isLoading} variant="body2">
          {convertFiatAmountFormatted(fullyDilutedValuation, NumberType.FiatTokenStats)}
        </Text>
      </StatsRow>
      <StatsRow
        label={t('token.stats.volume')}
-        statsIcon={
-          <Icons.ChartBar color={tokenColor ?? defaultTokenColor} size={iconSizes.icon16} />
-        }>
+        statsIcon={<ChartBar color={tokenColor ?? defaultTokenColor} size={iconSizes.icon16} />}>
        <Text loading={isLoading} variant="body2">
          {convertFiatAmountFormatted(volume, NumberType.FiatTokenStats)}
        </Text>
      </StatsRow>
      <StatsRow
        label={t('token.stats.priceHighYear')}
-        statsIcon={
-          <Icons.TrendUp color={tokenColor ?? defaultTokenColor} size={iconSizes.icon16} />
-        }>
+        statsIcon={<TrendUp color={tokenColor ?? defaultTokenColor} size={iconSizes.icon16} />}>
        <Text loading={isLoading} variant="body2">
          {convertFiatAmountFormatted(priceHight52W, NumberType.FiatTokenDetails)}
        </Text>
      </StatsRow>
      <StatsRow
        label={t('token.stats.priceLowYear')}
-        statsIcon={
-          <Icons.TrendDown color={tokenColor ?? defaultTokenColor} size={iconSizes.icon16} />
-        }>
+        statsIcon={<TrendDown color={tokenColor ?? defaultTokenColor} size={iconSizes.icon16} />}>
        <Text loading={isLoading} variant="body2">
          {convertFiatAmountFormatted(priceLow52W, NumberType.FiatTokenDetails)}
        </Text>
@@ -171,7 +168,7 @@ export function TokenDetailsStats({
                {showTranslation ? (
                  <Flex row alignItems="center" gap="$spacing12" width="100%">
                    <Flex fill row alignItems="center" gap="$spacing12">
-                      <Icons.Language color="$neutral2" size="$icon.20" />
+                      <LanguageIcon color="$neutral2" size="$icon.20" />
                      <Text color="$neutral2" variant="body3">
                        {currentLanguageInfo.displayName}
                      </Text>
@@ -183,7 +180,7 @@ export function TokenDetailsStats({
                ) : (
                  <Animated.View entering={FadeIn.duration(100)} exiting={FadeOut.duration(100)}>
                    <Flex row alignItems="center" gap="$spacing12">
-                      <Icons.Language color="$neutral2" size="$icon.20" />
+                      <LanguageIcon color="$neutral2" size="$icon.20" />
                      <Text color="$neutral2" variant="body3">
                        {t('token.stats.translation.translate', {
                          language: currentLanguageInfo.displayName,

--- a/apps/mobile/src/components/WalletConnect/ConnectedDapps/ConnectedDappsList.tsx
+++ b/apps/mobile/src/components/WalletConnect/ConnectedDapps/ConnectedDappsList.tsx
@@ -11,7 +11,8 @@ import {
  WalletConnectSession,
  removePendingSession,
 } from 'src/features/walletConnect/walletConnectSlice'
-import { AnimatedFlex, Flex, Icons, Text, TouchableArea, useDeviceDimensions } from 'ui/src'
+import { AnimatedFlex, Flex, Text, TouchableArea, useDeviceDimensions } from 'ui/src'
+import { Edit, Scan } from 'ui/src/components/icons'
 import { spacing } from 'ui/src/theme'
 import { ScannerModalState } from 'wallet/src/components/QRCodeScanner/constants'
 import { ModalName } from 'wallet/src/telemetry/constants'
@@ -60,14 +61,14 @@ export function ConnectedDappsList({ backButton, sessions }: ConnectedDappsProps
                  setIsEditing(!isEditing)
                }}>
                {isEditing ? (
-                  <Icons.Edit color="$accent1" size="$icon.20" />
+                  <Edit color="$accent1" size="$icon.20" />
                ) : (
-                  <Icons.Edit color="$neutral2" size="$icon.20" />
+                  <Edit color="$neutral2" size="$icon.20" />
                )}
              </TouchableArea>
            ) : (
              <TouchableArea onPress={onPressScan}>
-                <Icons.Scan color="$neutral2" size="$icon.20" />
+                <Scan color="$neutral2" size="$icon.20" />
              </TouchableArea>
            )}
          </Flex>

--- a/apps/mobile/src/components/WalletConnect/ScanSheet/PendingConnectionModal.tsx
+++ b/apps/mobile/src/components/WalletConnect/ScanSheet/PendingConnectionModal.tsx
@@ -20,7 +20,8 @@ import {
  addSession,
  removePendingSession,
 } from 'src/features/walletConnect/walletConnectSlice'
-import { Flex, Icons, Text, TouchableArea, useSporeColors } from 'ui/src'
+import { Flex, Text, TouchableArea, useSporeColors } from 'ui/src'
+import { Check, X } from 'ui/src/components/icons'
 import { iconSizes } from 'ui/src/theme'
 import { ONE_SECOND_MS } from 'utilities/src/time/time'
 import { AccountDetails } from 'wallet/src/components/accounts/AccountDetails'
@@ -76,7 +77,7 @@ const SitePermissions = (): JSX.Element => {
      </Flex>
      <Flex gap="$spacing8" pt="$spacing12">
        <Flex centered row gap="$spacing4">
-          <Icons.Check color="$statusSuccess" size={iconSizes.icon16} />
+          <Check color="$statusSuccess" size={iconSizes.icon16} />
          <Text
            $short={{ variant: infoTextSize }}
            allowFontScaling={false}
@@ -87,7 +88,7 @@ const SitePermissions = (): JSX.Element => {
          </Text>
        </Flex>
        <Flex centered row gap="$spacing4">
-          <Icons.Check color="$statusSuccess" size={iconSizes.icon16} />
+          <Check color="$statusSuccess" size={iconSizes.icon16} />
          <Text
            $short={{ variant: infoTextSize }}
            allowFontScaling={false}
@@ -98,7 +99,7 @@ const SitePermissions = (): JSX.Element => {
          </Text>
        </Flex>
        <Flex centered row gap="$spacing4">
-          <Icons.X color="$statusCritical" size={iconSizes.icon16} />
+          <X color="$statusCritical" size={iconSizes.icon16} />
          <Text
            $short={{ variant: infoTextSize }}
            allowFontScaling={false}

--- a/apps/mobile/src/components/WalletConnect/ScanSheet/WalletConnectModal.tsx
+++ b/apps/mobile/src/components/WalletConnect/ScanSheet/WalletConnectModal.tsx
@@ -186,7 +186,21 @@ export function WalletConnectModal({
            chainId: parsedUwulinkRequest.chainId,
          }

-          if (parsedUwulinkRequest.method === UwULinkMethod.Erc20Send) {
+          if (parsedUwulinkRequest.method === EthMethod.PersonalSign) {
+            dispatch(
+              addRequest({
+                account: activeAccount.address,
+                request: {
+                  ...newRequest,
+                  type: EthMethod.PersonalSign,
+                  message: parsedUwulinkRequest.message,
+                  // rawMessage should be the hex version of `message`, but our wallet will only use
+                  // `message` if it exists. so this is mostly to appease Typescript
+                  rawMessage: parsedUwulinkRequest.message,
+                },
+              })
+            )
+          } else if (parsedUwulinkRequest.method === UwULinkMethod.Erc20Send) {
            const preparedTransaction = await toTokenTransferRequest(
              parsedUwulinkRequest,
              activeAccount,

--- a/apps/mobile/src/components/WalletConnect/ScanSheet/util.ts
+++ b/apps/mobile/src/components/WalletConnect/ScanSheet/util.ts
@@ -18,6 +18,7 @@ import { getTokenTransferRequest } from 'wallet/src/features/transactions/transf
 import { TransferCurrencyParams } from 'wallet/src/features/transactions/transfer/types'
 import { Account } from 'wallet/src/features/wallet/accounts/types'
 import {
+  EthMethod,
  EthTransaction,
  UwULinkErc20SendRequest,
  UwULinkMethod,
@@ -188,6 +189,10 @@ export function isAllowedUwuLinkRequest(
    return Boolean(findAllowedTokenRecipient(request, allowlist))
  }

+  if (request.method === EthMethod.PersonalSign) {
+    return true
+  }
+
  // generic transactions
  const { to, value } = request.value
  const belowMaximumValue =

--- a/apps/mobile/src/components/accounts/AccountHeader.tsx
+++ b/apps/mobile/src/components/accounts/AccountHeader.tsx
@@ -5,7 +5,8 @@ import { openModal } from 'src/features/modals/modalSlice'
 import { setUserProperty } from 'src/features/telemetry'
 import { UserPropertyName } from 'src/features/telemetry/constants'
 import { Screens } from 'src/screens/Screens'
-import { Flex, HapticFeedback, Icons, ImpactFeedbackStyle, Text, TouchableArea } from 'ui/src'
+import { Flex, HapticFeedback, ImpactFeedbackStyle, Text, TouchableArea } from 'ui/src'
+import { CopyAlt, Settings } from 'ui/src/components/icons'
 import { isDevEnv } from 'uniswap/src/utils/env'
 import { AccountIcon } from 'wallet/src/components/accounts/AccountIcon'
 import { AnimatedUnitagDisplayName } from 'wallet/src/components/accounts/AnimatedUnitagDisplayName'
@@ -106,7 +107,7 @@ export function AccountHeader(): JSX.Element {
              hitSlop={20}
              testID="account-header/settings-button"
              onPress={onPressSettings}>
-              <Icons.Settings color="$neutral2" opacity={0.8} size="$icon.24" />
+              <Settings color="$neutral2" opacity={0.8} size="$icon.24" />
            </TouchableArea>
          </Flex>
          {walletHasName ? (
@@ -138,7 +139,7 @@ export function AccountHeader(): JSX.Element {
                  variant="subheading2">
                  {sanitizeAddressText(shortenAddress(activeAddress))}
                </Text>
-                <Icons.CopyAlt color="$neutral1" size="$icon.16" />
+                <CopyAlt color="$neutral1" size="$icon.16" />
              </Flex>
            </TouchableArea>
          )}

--- a/apps/mobile/src/components/buttons/CloseButton.tsx
+++ b/apps/mobile/src/components/buttons/CloseButton.tsx
 import React from 'react'
-import { ColorTokens, IconProps, Icons, TouchableArea, TouchableAreaProps } from 'ui/src'
+import { ColorTokens, IconProps, TouchableArea, TouchableAreaProps } from 'ui/src'
+import { X } from 'ui/src/components/icons'

 type Props = {
  onPress: () => void
@@ -11,7 +12,7 @@ type Props = {
 export function CloseButton({ onPress, size, strokeWidth, color, ...rest }: Props): JSX.Element {
  return (
    <TouchableArea onPress={onPress} {...rest} testID="buttons/close-button">
-      <Icons.X color={color} size={size ?? '$icon.20'} strokeWidth={strokeWidth ?? 2} />
+      <X color={color} size={size ?? '$icon.20'} strokeWidth={strokeWidth ?? 2} />
    </TouchableArea>
  )
 }
--- a/apps/mobile/src/components/explore/FavoriteHeaderRow.tsx
+++ b/apps/mobile/src/components/explore/FavoriteHeaderRow.tsx
 import { default as React } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Flex, Icons, Text, TouchableArea } from 'ui/src'
+import { Flex, Text, TouchableArea } from 'ui/src'
+import { TripleDots } from 'ui/src/components/icons'
 import { iconSizes } from 'ui/src/theme'

 export function FavoriteHeaderRow({
@@ -32,7 +33,7 @@ export function FavoriteHeaderRow({
          hitSlop={16}
          testID="favorite-header-row/favorite-button"
          onPress={onPress}>
-          <Icons.TripleDots
+          <TripleDots
            color="$neutral2"
            size={iconSizes.icon20}
            strokeLinecap="round"

--- a/apps/mobile/src/components/explore/SortButton.tsx
+++ b/apps/mobile/src/components/explore/SortButton.tsx
@@ -9,7 +9,8 @@ import {
 import { sendMobileAnalyticsEvent } from 'src/features/telemetry'
 import { MobileEventName } from 'src/features/telemetry/constants'
 import { disableOnPress } from 'src/utils/disableOnPress'
-import { Flex, Icons, Text, TouchableArea, useIsDarkMode } from 'ui/src'
+import { Flex, Text, TouchableArea, useIsDarkMode } from 'ui/src'
+import { RotatableChevron } from 'ui/src/components/icons'
 import { iconSizes } from 'ui/src/theme'
 import { TokenSortableField } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
 import { logger } from 'utilities/src/logger/logger'
@@ -86,7 +87,7 @@ function _SortButton({ orderBy }: FilterGroupProps): JSX.Element {
          <Text ellipse color="$neutral2" flexShrink={1} numberOfLines={1} variant="buttonLabel3">
            {getTokensOrderBySelectedLabel(orderBy, t)}
          </Text>
-          <Icons.RotatableChevron
+          <RotatableChevron
            color="$neutral2"
            direction="down"
            height={iconSizes.icon20}

--- a/apps/mobile/src/components/explore/search/SearchEmptySection.tsx
+++ b/apps/mobile/src/components/explore/search/SearchEmptySection.tsx
@@ -7,14 +7,15 @@ import { SearchPopularNFTCollections } from 'src/components/explore/search/Searc
 import { SearchPopularTokens } from 'src/components/explore/search/SearchPopularTokens'
 import { renderSearchItem } from 'src/components/explore/search/SearchResultsSection'
 import { SectionHeaderText } from 'src/components/explore/search/SearchSectionHeader'
-import { AnimatedFlex, Flex, Icons, Text, TouchableArea, useSporeColors } from 'ui/src'
+import { AnimatedFlex, Flex, Text, TouchableArea, useSporeColors } from 'ui/src'
 import ClockIcon from 'ui/src/assets/icons/clock.svg'
+import { TrendUp } from 'ui/src/components/icons'
 import { iconSizes } from 'ui/src/theme'
 import { clearSearchHistory } from 'wallet/src/features/search/searchHistorySlice'
 import { SearchResultType, WalletSearchResult } from 'wallet/src/features/search/SearchResult'
 import { selectSearchHistory } from 'wallet/src/features/search/selectSearchHistory'

-const TrendUpIcon = <Icons.TrendUp color="$neutral2" size="$icon.24" />
+const TrendUpIcon = <TrendUp color="$neutral2" size="$icon.24" />

 export const SUGGESTED_WALLETS: WalletSearchResult[] = [
  {

--- a/apps/mobile/src/components/explore/search/SearchResultsLoader.tsx
+++ b/apps/mobile/src/components/explore/search/SearchResultsLoader.tsx
@@ -2,7 +2,8 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { FadeIn, FadeOut } from 'react-native-reanimated'
 import { SectionHeaderText } from 'src/components/explore/search/SearchSectionHeader'
-import { AnimatedFlex, Flex, Icons, Loader } from 'ui/src'
+import { AnimatedFlex, Flex, Loader } from 'ui/src'
+import { Coin, Gallery, Person } from 'ui/src/components/icons'

 export const SearchResultsLoader = (): JSX.Element => {
  const { t } = useTranslation()
@@ -10,7 +11,7 @@ export const SearchResultsLoader = (): JSX.Element => {
    <Flex gap="$spacing16">
      <Flex gap="$spacing12">
        <SectionHeaderText
-          icon={<Icons.Coin color="$neutral2" size="$icon.24" />}
+          icon={<Coin color="$neutral2" size="$icon.24" />}
          title={t('explore.search.section.tokens')}
        />
        <AnimatedFlex entering={FadeIn} exiting={FadeOut} mx="$spacing8">
@@ -19,7 +20,7 @@ export const SearchResultsLoader = (): JSX.Element => {
      </Flex>
      <Flex gap="$spacing12">
        <SectionHeaderText
-          icon={<Icons.Gallery color="$neutral2" size="$icon.24" />}
+          icon={<Gallery color="$neutral2" size="$icon.24" />}
          title={t('explore.search.section.nft')}
        />
        <AnimatedFlex entering={FadeIn} exiting={FadeOut} mx="$spacing8">
@@ -28,7 +29,7 @@ export const SearchResultsLoader = (): JSX.Element => {
      </Flex>
      <Flex gap="$spacing12">
        <SectionHeaderText
-          icon={<Icons.Person color="$neutral2" size="$icon.24" />}
+          icon={<Person color="$neutral2" size="$icon.24" />}
          title={t('explore.search.section.wallets')}
        />
        <AnimatedFlex entering={FadeIn} exiting={FadeOut} mx="$spacing8">

--- a/apps/mobile/src/components/explore/search/SearchResultsSection.tsx
+++ b/apps/mobile/src/components/explore/search/SearchResultsSection.tsx
@@ -16,7 +16,8 @@ import {
  formatTokenSearchResults,
  getSearchResultId,
 } from 'src/components/explore/search/utils'
-import { AnimatedFlex, Flex, Icons, Text } from 'ui/src'
+import { AnimatedFlex, Flex, Text } from 'ui/src'
+import { Coin, Gallery, Person } from 'ui/src/components/icons'
 import { useExploreSearchQuery } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
 import i18n from 'uniswap/src/i18n/i18n'
 import { logger } from 'utilities/src/logger/logger'
@@ -36,17 +37,17 @@ const ICON_SIZE = '$icon.24'
 const ICON_COLOR = '$neutral2'

 const WalletHeaderItem: SearchResultOrHeader = {
-  icon: <Icons.Person color={ICON_COLOR} size={ICON_SIZE} />,
+  icon: <Person color={ICON_COLOR} size={ICON_SIZE} />,
  type: SEARCH_RESULT_HEADER_KEY,
  title: i18n.t('explore.search.section.wallets'),
 }
 const TokenHeaderItem: SearchResultOrHeader = {
-  icon: <Icons.Coin color={ICON_COLOR} size={ICON_SIZE} />,
+  icon: <Coin color={ICON_COLOR} size={ICON_SIZE} />,
  type: SEARCH_RESULT_HEADER_KEY,
  title: i18n.t('explore.search.section.tokens'),
 }
 const NFTHeaderItem: SearchResultOrHeader = {
-  icon: <Icons.Gallery color={ICON_COLOR} size={ICON_SIZE} />,
+  icon: <Gallery color={ICON_COLOR} size={ICON_SIZE} />,
  type: SEARCH_RESULT_HEADER_KEY,
  title: i18n.t('explore.search.section.nft'),
 }

--- a/apps/mobile/src/components/explore/search/items/SearchNFTCollectionItem.tsx
+++ b/apps/mobile/src/components/explore/search/items/SearchNFTCollectionItem.tsx
@@ -4,7 +4,8 @@ import { useAppStackNavigation } from 'src/app/navigation/types'
 import { sendMobileAnalyticsEvent } from 'src/features/telemetry'
 import { MobileEventName } from 'src/features/telemetry/constants'
 import { Screens } from 'src/screens/Screens'
-import { Flex, Icons, ImpactFeedbackStyle, Text, TouchableArea } from 'ui/src'
+import { Flex, ImpactFeedbackStyle, Text, TouchableArea } from 'ui/src'
+import { Verified } from 'ui/src/components/icons'
 import { iconSizes } from 'ui/src/theme'
 import { NFTViewer } from 'wallet/src/features/images/NFTViewer'
 import { SearchContext } from 'wallet/src/features/search/SearchContext'
@@ -94,7 +95,7 @@ export function SearchNFTCollectionItem({
          </Text>
        </Flex>
        <Flex grow alignItems="flex-start" width="$spacing36">
-          {isVerified ? <Icons.Verified color="$accent1" size="$icon.16" /> : null}
+          {isVerified ? <Verified color="$accent1" size="$icon.16" /> : null}
        </Flex>
      </Flex>
    </TouchableArea>

--- a/apps/mobile/src/components/fiatOnRamp/CtaButton.tsx
+++ b/apps/mobile/src/components/fiatOnRamp/CtaButton.tsx
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button, Icons } from 'ui/src'
+import { Button } from 'ui/src'
+import { InfoCircleFilled } from 'ui/src/components/icons'
 import { SpinningLoader } from 'wallet/src/components/loading/SpinningLoader'

 interface FiatOnRampCtaButtonProps {
@@ -31,7 +32,7 @@ export function FiatOnRampCtaButton({
        isLoading ? (
          <SpinningLoader color="$sporeWhite" />
        ) : !eligible ? (
-          <Icons.InfoCircleFilled color="$neutral3" />
+          <InfoCircleFilled color="$neutral3" />
        ) : undefined
      }
      size="large"

--- a/apps/mobile/src/components/home/FeedTab.tsx
+++ b/apps/mobile/src/components/home/FeedTab.tsx
@@ -9,7 +9,8 @@ import { TAB_BAR_HEIGHT, TabProps } from 'src/components/layout/TabHelpers'
 import { Loader } from 'src/components/loading'
 import { openModal } from 'src/features/modals/modalSlice'
 import { removePendingSession } from 'src/features/walletConnect/walletConnectSlice'
-import { Flex, Icons, Text, useDeviceInsets, useSporeColors } from 'ui/src'
+import { Flex, Text, useDeviceInsets, useSporeColors } from 'ui/src'
+import { NoTransactions } from 'ui/src/components/icons'
 import { GQLQueries } from 'uniswap/src/data/graphql/uniswap-data-api/queries'
 import { isAndroid } from 'uniswap/src/utils/platform'
 import { BaseCard } from 'wallet/src/components/BaseCard/BaseCard'
@@ -86,7 +87,7 @@ export const FeedTab = memo(
      <Flex grow style={containerProps?.emptyContainerStyle}>
        <BaseCard.EmptyState
          description={t('home.feed.empty.description')}
-          icon={<Icons.NoTransactions color="$neutral3" size="$icon.70" />}
+          icon={<NoTransactions color="$neutral3" size="$icon.70" />}
          title={t('home.feed.empty.title')}
          onPress={onPressReceive}
        />

--- a/apps/mobile/src/components/home/TokensTab.tsx
+++ b/apps/mobile/src/components/home/TokensTab.tsx
@@ -9,7 +9,8 @@ import { WalletEmptyState } from 'src/components/home/WalletEmptyState'
 import { TabContentProps, TabProps } from 'src/components/layout/TabHelpers'
 import { openModal } from 'src/features/modals/modalSlice'
 import { Screens } from 'src/screens/Screens'
-import { Flex, Icons } from 'ui/src'
+import { Flex } from 'ui/src'
+import { NoTokens } from 'ui/src/components/icons'
 import { GQLQueries } from 'uniswap/src/data/graphql/uniswap-data-api/queries'
 import { CurrencyId } from 'uniswap/src/types/currency'
 import { BaseCard } from 'wallet/src/components/BaseCard/BaseCard'
@@ -71,7 +72,7 @@ export const TokensTab = memo(
        return isExternalProfile ? (
          <BaseCard.EmptyState
            description={t('home.tokens.empty.description')}
-            icon={<Icons.NoTokens color="$neutral3" size="$icon.70" />}
+            icon={<NoTokens color="$neutral3" size="$icon.70" />}
            title={t('home.tokens.empty.title')}
            onPress={onPressAction}
          />

--- a/apps/mobile/src/components/home/WalletEmptyState.tsx
+++ b/apps/mobile/src/components/home/WalletEmptyState.tsx
--- a/apps/mobile/src/components/icons/BiometricsIcon.tsx
+++ b/apps/mobile/src/components/icons/BiometricsIcon.tsx
 import { useDeviceSupportsBiometricAuth } from 'src/features/biometrics/hooks'
-import { Icons } from 'ui/src'
+import { Faceid, Fingerprint } from 'ui/src/components/icons'

 export function BiometricsIcon(): JSX.Element | null {
  const { touchId: isTouchIdSupported, faceId: isFaceIdSupported } =
    useDeviceSupportsBiometricAuth()

  if (isTouchIdSupported) {
-    return <Icons.Fingerprint color="white" size="$icon.20" />
+    return <Fingerprint color="white" size="$icon.20" />
  }

  if (isFaceIdSupported) {
-    return <Icons.Faceid color="white" size="$icon.20" />
+    return <Faceid color="white" size="$icon.20" />
  }

  return null

--- a/apps/mobile/src/components/layout/BackButtonView.tsx
+++ b/apps/mobile/src/components/layout/BackButtonView.tsx
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { ColorTokens, Flex, Icons, Text } from 'ui/src'
+import { ColorTokens, Flex, Text } from 'ui/src'
+import { RotatableChevron } from 'ui/src/components/icons'

 type Props = {
  size?: number
@@ -13,7 +14,7 @@ export function BackButtonView({ size, color, showButtonLabel }: Props): JSX.Ele

  return (
    <Flex row alignItems="center" gap="$spacing8">
-      <Icons.RotatableChevron color={color ?? '$neutral2'} height={size} width={size} />
+      <RotatableChevron color={color ?? '$neutral2'} height={size} width={size} />
      {showButtonLabel && (
        <Text color="$neutral2" variant="subheading1">
          {t('common.button.back')}

--- a/apps/mobile/src/components/unitags/ChangeUnitagModal.tsx
+++ b/apps/mobile/src/components/unitags/ChangeUnitagModal.tsx
@@ -3,7 +3,8 @@ import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ActivityIndicator, EmitterSubscription, Keyboard } from 'react-native'
 import { getUniqueId } from 'react-native-device-info'
-import { Button, Flex, Icons, Text, useSporeColors } from 'ui/src'
+import { Button, Flex, Text, useSporeColors } from 'ui/src'
+import { AlertTriangle } from 'ui/src/components/icons'
 import { fonts, spacing } from 'ui/src/theme'
 import { useUnitagUpdater } from 'uniswap/src/features/unitags/context'
 import { UnitagErrorCodes } from 'uniswap/src/features/unitags/types'
@@ -311,7 +312,7 @@ function ChangeUnitagConfirmModal({
          height="$spacing48"
          mb="$spacing8"
          minWidth="$spacing48">
-          <Icons.AlertTriangle color="$statusCritical" size="$icon.24" />
+          <AlertTriangle color="$statusCritical" size="$icon.24" />
        </Flex>
        <Text textAlign="center" variant="subheading1">
          {t('unitags.editUsername.confirm.title')}

--- a/apps/mobile/src/components/unitags/ChoosePhotoOptionsModal.tsx
+++ b/apps/mobile/src/components/unitags/ChoosePhotoOptionsModal.tsx
@@ -2,7 +2,8 @@ import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { selectPhotoFromLibrary } from 'src/components/unitags/AvatarSelection'
 import { ChooseNftModal } from 'src/components/unitags/ChooseNftModal'
-import { Flex, Icons, Text, useSporeColors } from 'ui/src'
+import { Flex, Text, useSporeColors } from 'ui/src'
+import { Camera, Photo, Trash } from 'ui/src/components/icons'
 import { iconSizes } from 'ui/src/theme'
 import { BottomSheetModal } from 'wallet/src/components/modals/BottomSheetModal'
 import { ElementName, ModalName } from 'wallet/src/telemetry/constants'
@@ -115,13 +116,11 @@ const ChoosePhotoOption = ({ type }: { type: PhotoAction }): JSX.Element => {
      justifyContent="flex-start"
      p="$spacing24">
      {type === PhotoAction.BrowseCameraRoll && (
-        <Icons.Camera color="$neutral1" size={iconSizes.icon24} />
-      )}
-      {type === PhotoAction.BrowseNftsList && (
-        <Icons.Photo color="$neutral1" size={iconSizes.icon24} />
+        <Camera color="$neutral1" size={iconSizes.icon24} />
      )}
+      {type === PhotoAction.BrowseNftsList && <Photo color="$neutral1" size={iconSizes.icon24} />}
      {type === PhotoAction.RemovePhoto && (
-        <Icons.Trash color="$statusCritical" size={iconSizes.icon24} />
+        <Trash color="$statusCritical" size={iconSizes.icon24} />
      )}
      <Flex shrink alignItems="flex-start">
        <Text

--- a/apps/mobile/src/components/unitags/DeleteUnitagModal.tsx
+++ b/apps/mobile/src/components/unitags/DeleteUnitagModal.tsx
@@ -2,7 +2,8 @@ import { useNavigation } from '@react-navigation/native'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ActivityIndicator } from 'react-native'
-import { Button, Flex, Icons, Text, useSporeColors } from 'ui/src'
+import { Button, Flex, Text, useSporeColors } from 'ui/src'
+import { AlertTriangle } from 'ui/src/components/icons'
 import { fonts } from 'ui/src/theme'
 import { useUnitagUpdater } from 'uniswap/src/features/unitags/context'
 import { logger } from 'utilities/src/logger/logger'
@@ -90,7 +91,7 @@ export function DeleteUnitagModal({
          height="$spacing48"
          mb="$spacing8"
          minWidth="$spacing48">
-          <Icons.AlertTriangle color="$statusCritical" size="$icon.24" />
+          <AlertTriangle color="$statusCritical" size="$icon.24" />
        </Flex>
        <Text textAlign="center" variant="subheading1">
          {t('unitags.delete.confirm.title')}

--- a/apps/mobile/src/components/unitags/UnitagsIntroModal.tsx
+++ b/apps/mobile/src/components/unitags/UnitagsIntroModal.tsx
@@ -8,8 +8,9 @@ import { closeModal } from 'src/features/modals/modalSlice'
 import { selectModalState } from 'src/features/modals/selectModalState'
 import { TermsOfService } from 'src/screens/Onboarding/TermsOfService'
 import { Screens, UnitagScreens } from 'src/screens/Screens'
-import { Button, Flex, GeneratedIcon, Icons, Image, Text, useIsDarkMode } from 'ui/src'
+import { Button, Flex, GeneratedIcon, Image, Text, useIsDarkMode } from 'ui/src'
 import { UNITAGS_INTRO_BANNER_DARK, UNITAGS_INTRO_BANNER_LIGHT } from 'ui/src/assets'
+import { Lightning, Ticket, UserSquare } from 'ui/src/components/icons'
 import { iconSizes } from 'ui/src/theme'
 import { BottomSheetModal } from 'wallet/src/components/modals/BottomSheetModal'
 import { setHasCompletedUnitagsIntroModal } from 'wallet/src/features/behaviorHistory/slice'
@@ -64,9 +65,9 @@ export function UnitagsIntroModal(): JSX.Element {
          />
        </Flex>
        <Flex gap="$spacing16" px="$spacing20">
-          <BodyItem Icon={Icons.UserSquare} title={t('unitags.intro.features.profile')} />
-          <BodyItem Icon={Icons.Ticket} title={t('unitags.intro.features.free')} />
-          <BodyItem Icon={Icons.Lightning} title={t('unitags.intro.features.ens')} />
+          <BodyItem Icon={UserSquare} title={t('unitags.intro.features.profile')} />
+          <BodyItem Icon={Ticket} title={t('unitags.intro.features.free')} />
+          <BodyItem Icon={Lightning} title={t('unitags.intro.features.ens')} />
        </Flex>
        <Flex gap="$spacing8">
          <Button size="medium" theme="primary" onPress={onPressClaimOneNow}>

--- a/apps/mobile/src/features/CloudBackup/CloudBackupPasswordForm.tsx
+++ b/apps/mobile/src/features/CloudBackup/CloudBackupPasswordForm.tsx
@@ -3,7 +3,8 @@ import { useTranslation } from 'react-i18next'
 import { Keyboard, TextInput } from 'react-native'
 import { PasswordInput } from 'src/components/input/PasswordInput'
 import { PasswordError } from 'src/features/onboarding/PasswordError'
-import { Button, Flex, Icons, Text } from 'ui/src'
+import { Button, Flex, Text } from 'ui/src'
+import { DiamondExclamation } from 'ui/src/components/icons'
 import { iconSizes } from 'ui/src/theme'
 import { useDebounce } from 'utilities/src/time/timing'
 import { ElementName } from 'wallet/src/telemetry/constants'
@@ -118,7 +119,7 @@ export function CloudBackupPasswordForm({
        </Flex>
        {!isConfirmation && (
          <Flex centered row gap="$spacing12" px="$spacing16">
-            <Icons.DiamondExclamation color="$neutral2" size={iconSizes.icon20} />
+            <DiamondExclamation color="$neutral2" size={iconSizes.icon20} />
            <Text color="$neutral2" variant="body3">
              {t('settings.setting.backup.password.disclaimer')}
            </Text>

--- a/apps/mobile/src/features/externalProfile/ProfileHeader.tsx
+++ b/apps/mobile/src/features/externalProfile/ProfileHeader.tsx
@@ -13,7 +13,6 @@ import { openModal } from 'src/features/modals/modalSlice'
 import {
  AnimatedFlex,
  Flex,
-  Icons,
  Image,
  LinearGradient,
  ScrollView,
@@ -26,6 +25,7 @@ import {
  useUniconColors,
 } from 'ui/src'
 import { ENS_LOGO } from 'ui/src/assets'
+import { SendAction, XTwitter } from 'ui/src/components/icons'
 import { iconSizes, imageSizes } from 'ui/src/theme'
 import { FeatureFlags } from 'uniswap/src/features/gating/flags'
 import { useFeatureFlag } from 'uniswap/src/features/gating/hooks'
@@ -221,7 +221,7 @@ export const ProfileHeader = memo(function ProfileHeader({
                {twitter ? (
                  <TouchableArea onPress={onPressTwitter}>
                    <Flex centered row gap="$spacing4">
-                      <Icons.XTwitter color={colors.neutral1.val} size={iconSizes.icon16} />
+                      <XTwitter color={colors.neutral1.val} size={iconSizes.icon16} />
                      <Text color="$neutral1" variant="buttonLabel3">
                        {twitter}
                      </Text>
@@ -277,7 +277,7 @@ export const ProfileHeader = memo(function ProfileHeader({
              testID={ElementName.Send}
              onPress={onPressSend}>
              <Flex row alignItems="center" gap="$spacing8">
-                <Icons.SendAction color="$neutral2" size="$icon.20" />
+                <SendAction color="$neutral2" size="$icon.20" />
                <Text
                  allowFontScaling={true}
                  color="$neutral2"

--- a/apps/mobile/src/features/fiatOnRamp/FiatOnRampAmountSection.tsx
+++ b/apps/mobile/src/features/fiatOnRamp/FiatOnRampAmountSection.tsx
@@ -16,11 +16,11 @@ import {
  ColorTokens,
  Flex,
  HapticFeedback,
-  Icons,
  Text,
  TouchableArea,
  useSporeColors,
 } from 'ui/src'
+import { RotatableChevron } from 'ui/src/components/icons'
 import { fonts, iconSizes, spacing } from 'ui/src/theme'
 import { CurrencyInfo } from 'uniswap/src/features/dataApi/types'
 import { NumberType } from 'utilities/src/format/types'
@@ -275,7 +275,7 @@ function SelectTokenButton({
        <Text color={textColor} pl="$spacing1" variant="body1">
          {getSymbolDisplayText(selectedCurrencyInfo.currency.symbol)}
        </Text>
-        <Icons.RotatableChevron color={textColor} direction="end" height={iconSizes.icon16} />
+        <RotatableChevron color={textColor} direction="end" height={iconSizes.icon16} />
      </Flex>
    </TouchableArea>
  )

--- a/apps/mobile/src/features/fiatOnRamp/FiatOnRampCountryPicker.tsx
+++ b/apps/mobile/src/features/fiatOnRamp/FiatOnRampCountryPicker.tsx
 import React from 'react'
 import { SvgUri } from 'react-native-svg'
 import Trace from 'src/components/Trace/Trace'
-import { Flex, Icons, TouchableArea } from 'ui/src'
+import { Flex, TouchableArea } from 'ui/src'
+import { RotatableChevron } from 'ui/src/components/icons'
 import { iconSizes } from 'ui/src/theme'
 import { getCountryFlagSvgUrl } from 'wallet/src/features/fiatOnRamp/utils'
 import { ElementName } from 'wallet/src/telemetry/constants'
@@ -36,7 +37,7 @@ export function FiatOnRampCountryPicker({
          <Flex borderRadius="$roundedFull" overflow="hidden">
            <SvgUri height={ICON_SIZE} uri={countryFlagUrl} width={ICON_SIZE} />
          </Flex>
-          <Icons.RotatableChevron color="$neutral3" direction="down" width={iconSizes.icon20} />
+          <RotatableChevron color="$neutral3" direction="down" width={iconSizes.icon20} />
        </Flex>
      </TouchableArea>
    </Trace>

--- a/apps/mobile/src/features/nfts/item/CollectionPreviewCard.tsx
+++ b/apps/mobile/src/features/nfts/item/CollectionPreviewCard.tsx
@@ -2,8 +2,9 @@ import { default as React } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Loader } from 'src/components/loading'
 import { PriceAmount } from 'src/features/nfts/collection/ListPriceCard'
-import { Flex, Icons, Text, TouchableArea, useSporeColors } from 'ui/src'
+import { Flex, Text, TouchableArea, useSporeColors } from 'ui/src'
 import VerifiedIcon from 'ui/src/assets/icons/verified.svg'
+import { RotatableChevron } from 'ui/src/components/icons'
 import { iconSizes, imageSizes, spacing } from 'ui/src/theme'
 import {
  Currency,
@@ -94,7 +95,7 @@ export function CollectionPreviewCard({
          </Flex>
        </Flex>
        {isViewableCollection ? (
-          <Icons.RotatableChevron
+          <RotatableChevron
            color="$neutral1"
            direction="end"
            height={iconSizes.icon24}

--- a/apps/mobile/src/features/notifications/ScantasticCompleteNotification.tsx
+++ b/apps/mobile/src/features/notifications/ScantasticCompleteNotification.tsx
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Flex, Icons } from 'ui/src'
+import { Flex } from 'ui/src'
+import { Check, Laptop } from 'ui/src/components/icons'
 import { NotificationToast } from 'wallet/src/features/notifications/components/NotificationToast'
 import { ScantasticCompleteNotification as ScantasticCompleteNotificationType } from 'wallet/src/features/notifications/types'

@@ -16,7 +17,7 @@ export function ScantasticCompleteNotification({
      icon={
        <Flex position="relative">
          <Flex backgroundColor="$accent2" borderRadius="$roundedFull" p="$spacing12">
-            <Icons.Laptop color="$accent1" size="$icon.24" />
+            <Laptop color="$accent1" size="$icon.24" />
          </Flex>
          <Flex
            backgroundColor="$statusSuccess"
@@ -27,7 +28,7 @@ export function ScantasticCompleteNotification({
            p="$spacing4"
            position="absolute"
            right={0}>
-            <Icons.Check color="$white" size="$icon.8" />
+            <Check color="$white" size="$icon.8" />
          </Flex>
        </Flex>
      }

--- a/apps/mobile/src/features/scantastic/ExtensionWaitlistModal.tsx
+++ b/apps/mobile/src/features/scantastic/ExtensionWaitlistModal.tsx
@@ -2,7 +2,8 @@ import { useTranslation } from 'react-i18next'
 import { useAppSelector } from 'src/app/hooks'
 import { closeModal } from 'src/features/modals/modalSlice'
 import { selectModalState } from 'src/features/modals/selectModalState'
-import { Button, Flex, Icons, Text, TouchableArea } from 'ui/src'
+import { Button, Flex, Text, TouchableArea } from 'ui/src'
+import { AlertTriangle, DocumentList } from 'ui/src/components/icons'
 import { uniswapUrls } from 'uniswap/src/constants/urls'
 import { BottomSheetModal } from 'wallet/src/components/modals/BottomSheetModal'
 import { useAppDispatch } from 'wallet/src/state'
@@ -32,9 +33,9 @@ export function ExtensionWaitlistModal(): JSX.Element {
            p="$spacing12"
            width="$spacing48">
            {isUserOnWaitlist ? (
-              <Icons.DocumentList color="$neutral2" size="$icon.28" />
+              <DocumentList color="$neutral2" size="$icon.28" />
            ) : (
-              <Icons.AlertTriangle color="$neutral2" size="$icon.28" />
+              <AlertTriangle color="$neutral2" size="$icon.28" />
            )}
          </Flex>
          <Flex alignItems="center" gap="$spacing8">

--- a/apps/mobile/src/features/scantastic/ScantasticModal.tsx
+++ b/apps/mobile/src/features/scantastic/ScantasticModal.tsx
@@ -4,7 +4,8 @@ import { useAppDispatch, useAppSelector } from 'src/app/hooks'
 import { useBiometricAppSettings, useBiometricPrompt } from 'src/features/biometrics/hooks'
 import { closeAllModals } from 'src/features/modals/modalSlice'
 import { selectModalState } from 'src/features/modals/selectModalState'
-import { Button, Flex, Icons, Text, TouchableArea, useSporeColors } from 'ui/src'
+import { Button, Flex, Text, TouchableArea, useSporeColors } from 'ui/src'
+import { AlertTriangle, Faceid, Laptop, LinkBrokenHorizontal } from 'ui/src/components/icons'
 import { iconSizes } from 'ui/src/theme'
 import { uniswapUrls } from 'uniswap/src/constants/urls'
 import { logger } from 'utilities/src/logger/logger'
@@ -211,7 +212,7 @@ export function ScantasticModal(): JSX.Element | null {
    }
  }, [OTP, uuid])

-  useInterval(checkOTPState, 6000, true)
+  useInterval(checkOTPState, ONE_SECOND_MS, true)

  if (expired) {
    return (
@@ -221,7 +222,7 @@ export function ScantasticModal(): JSX.Element | null {
        onClose={onClose}>
        <Flex centered gap="$spacing16" px="$spacing16" py="$spacing12">
          <Flex centered backgroundColor="$surface2" borderRadius="$rounded12" p="$spacing12">
-            <Icons.LinkBrokenHorizontal color="$neutral2" size={iconSizes.icon24} />
+            <LinkBrokenHorizontal color="$neutral2" size={iconSizes.icon24} />
          </Flex>
          <Text variant="subheading1">{t('scantastic.error.timeout.title')}</Text>
          <Text color="$neutral2" mb="$spacing12" textAlign="center" variant="body3">
@@ -243,7 +244,7 @@ export function ScantasticModal(): JSX.Element | null {
        onClose={onClose}>
        <Flex centered gap="$spacing16" px="$spacing16" py="$spacing12">
          <Flex centered backgroundColor="$accent2" borderRadius="$rounded12" p="$spacing12">
-            <Icons.Laptop color="$accent1" size={iconSizes.icon24} />
+            <Laptop color="$accent1" size={iconSizes.icon24} />
          </Flex>
          <Text variant="subheading1">{t('scantastic.code.title')}</Text>
          <Text color="$neutral2" textAlign="center" variant="body3">
@@ -269,7 +270,7 @@ export function ScantasticModal(): JSX.Element | null {
        onClose={onClose}>
        <Flex centered gap="$spacing16" px="$spacing16" py="$spacing12">
          <Flex centered backgroundColor="$accent2" borderRadius="$rounded12" p="$spacing12">
-            <Icons.AlertTriangle color="$statusCritical" size={iconSizes.icon24} />
+            <AlertTriangle color="$statusCritical" size={iconSizes.icon24} />
          </Flex>
          <Text variant="subheading1">{t('common.text.error')}</Text>
          <Text color="$neutral2" textAlign="center" variant="body3">
@@ -294,7 +295,7 @@ export function ScantasticModal(): JSX.Element | null {
      onClose={onClose}>
      <Flex centered gap="$spacing16" px="$spacing16" py="$spacing12">
        <Flex centered backgroundColor="$accent2" borderRadius="$rounded12" p="$spacing12">
-          <Icons.Laptop color="$accent1" size={iconSizes.icon24} />
+          <Laptop color="$accent1" size={iconSizes.icon24} />
        </Flex>
        <Text variant="subheading1">{t('scantastic.confirmation.title')}</Text>
        <Text color="$neutral2" textAlign="center" variant="body3">
@@ -334,14 +335,14 @@ export function ScantasticModal(): JSX.Element | null {
          gap="$spacing8"
          p="$spacing16"
          width="100%">
-          <Icons.AlertTriangle color="$neutral2" size="$icon.20" />
+          <AlertTriangle color="$neutral2" size="$icon.20" />
          <Text color="$neutral2" variant="body4">
            {t('scantastic.confirmation.warning')}
          </Text>
        </Flex>
        <Flex flexDirection="column" gap="$spacing4" width="100%">
          <Button
-            icon={requiresBiometricAuth ? <Icons.Faceid size={iconSizes.icon16} /> : undefined}
+            icon={requiresBiometricAuth ? <Faceid size={iconSizes.icon16} /> : undefined}
            mb="$spacing4"
            theme="primary"
            onPress={onConfirmSync}>

--- a/apps/mobile/src/features/unitags/ChooseProfilePictureScreen.tsx
+++ b/apps/mobile/src/features/unitags/ChooseProfilePictureScreen.tsx
@@ -9,7 +9,8 @@ import { UnitagProfilePicture } from 'src/components/unitags/UnitagProfilePictur
 import { SafeKeyboardOnboardingScreen } from 'src/features/onboarding/SafeKeyboardOnboardingScreen'
 import { UnitagName } from 'src/features/unitags/UnitagName'
 import { OnboardingScreens, Screens, UnitagScreens } from 'src/screens/Screens'
-import { Button, Flex, Icons, Text, useIsDarkMode, useSporeColors } from 'ui/src'
+import { Button, Flex, Text, useIsDarkMode, useSporeColors } from 'ui/src'
+import { Pen } from 'ui/src/components/icons'
 import { fonts, iconSizes, imageSizes, spacing } from 'ui/src/theme'
 import { UnitagClaimSource } from 'uniswap/src/features/unitags/types'
 import { ChainId } from 'wallet/src/constants/chains'
@@ -133,7 +134,7 @@ export function ChooseProfilePictureScreen({
              backgroundColor={isDarkMode ? '$neutral3' : '$neutral2'}
              borderRadius="$roundedFull"
              p={8}>
-              <Icons.Pen color={isDarkMode ? '$neutral1' : '$surface1'} size={iconSizes.icon16} />
+              <Pen color={isDarkMode ? '$neutral1' : '$surface1'} size={iconSizes.icon16} />
            </Flex>
          </Flex>
        </Flex>

--- a/apps/mobile/src/features/unitags/ClaimUnitagScreen.tsx
+++ b/apps/mobile/src/features/unitags/ClaimUnitagScreen.tsx
@@ -17,13 +17,13 @@ import {
  AnimatedFlex,
  Button,
  Flex,
-  Icons,
  Image,
  Text,
  TouchableArea,
  useSporeColors,
 } from 'ui/src'
 import { ENS_LOGO } from 'ui/src/assets'
+import { InfoCircleFilled, LinkHorizontalAlt } from 'ui/src/components/icons'
 import { fonts, iconSizes, imageSizes, spacing } from 'ui/src/theme'
 import { uniswapUrls } from 'uniswap/src/constants/urls'
 import { logger } from 'utilities/src/logger/logger'
@@ -338,7 +338,7 @@ export function ClaimUnitagScreen({ navigation, route }: Props): JSX.Element {
              Keyboard.dismiss()
              setShowInfoModal(true)
            }}>
-            <Icons.InfoCircleFilled color={colors.neutral3.get()} size="$icon.20" />
+            <InfoCircleFilled color={colors.neutral3.get()} size="$icon.20" />
          </TouchableArea>
        </AnimatedFlex>
        {canClaimUnitagNameError && unitagToCheck === unitagInputValue && (
@@ -436,7 +436,7 @@ const InfoModal = ({
            width={FIXED_INFO_PILL_WIDTH}
          />
          <Flex p="$spacing2" shadowColor="$accent1" shadowOpacity={1} shadowRadius="$spacing16">
-            <Icons.LinkHorizontalAlt color={colors.neutral3.get()} size={iconSizes.icon24} />
+            <LinkHorizontalAlt color={colors.neutral3.get()} size={iconSizes.icon24} />
          </Flex>
          <Pill
            customBackgroundColor={colors.surface1.val}

--- a/apps/mobile/src/features/unitags/EditUnitagProfileScreen.tsx
+++ b/apps/mobile/src/features/unitags/EditUnitagProfileScreen.tsx
-/* eslint-disable max-lines */
 import React, { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Keyboard, KeyboardAvoidingView, StyleSheet } from 'react-native'
@@ -17,7 +16,6 @@ import { Screens, UnitagScreens } from 'src/screens/Screens'
 import {
  Button,
  Flex,
-  Icons,
  LinearGradient,
  ScrollView,
  Text,
@@ -26,6 +24,7 @@ import {
  useSporeColors,
  useUniconColors,
 } from 'ui/src'
+import { Pen, TripleDots } from 'ui/src/components/icons'
 import { borderRadii, fonts, iconSizes, imageSizes, spacing } from 'ui/src/theme'
 import { useExtractedColors } from 'ui/src/utils/colors'
 import { FeatureFlags } from 'uniswap/src/features/gating/flags'
@@ -297,7 +296,7 @@ export function EditUnitagProfileScreen({
                  }
                }}>
                <Flex pr="$spacing8">
-                  <Icons.TripleDots color="$neutral2" size={iconSizes.icon24} />
+                  <TripleDots color="$neutral2" size={iconSizes.icon24} />
                </Flex>
              </ContextMenu>
            ) : undefined
@@ -366,10 +365,7 @@ export function EditUnitagProfileScreen({
                      backgroundColor={isDarkMode ? '$neutral3' : '$neutral2'}
                      borderRadius="$roundedFull"
                      p={6}>
-                      <Icons.Pen
-                        color={isDarkMode ? '$neutral1' : '$surface1'}
-                        size={iconSizes.icon16}
-                      />
+                      <Pen color={isDarkMode ? '$neutral1' : '$surface1'} size={iconSizes.icon16} />
                    </Flex>
                  </Flex>
                </Flex>

--- a/apps/mobile/src/features/unitags/UnitagName.tsx
+++ b/apps/mobile/src/features/unitags/UnitagName.tsx
-import { Flex, Icons, Text } from 'ui/src'
+import { Flex, Text } from 'ui/src'
+import { Unitag } from 'ui/src/components/icons'
 import { fonts, spacing } from 'ui/src/theme'

 export function UnitagName({
@@ -37,7 +38,7 @@ export function UnitagName({
        position="absolute"
        right={-spacing.spacing4}
        top={-spacing.spacing4}>
-        <Icons.Unitag size="$icon.24" />
+        <Unitag size="$icon.24" />
      </Flex>
    </Flex>
  )

--- a/apps/mobile/src/features/walletConnect/signWcRequestSaga.ts
+++ b/apps/mobile/src/features/walletConnect/signWcRequestSaga.ts
@@ -82,7 +82,7 @@ export function* signWcRequest(params: SignMessageParams | SignTransactionParams
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
-        body: JSON.stringify({ method: 'eth_sendTransaction', response: signature, chainId }),
+        body: JSON.stringify({ method: params.method, response: signature, chainId }),
        // TODO: consider adding analytics to track UwuLink usage
      }).catch((error) =>
        logger.error(error, {

--- a/apps/mobile/src/screens/FiatOnRampServiceProviders.tsx
+++ b/apps/mobile/src/screens/FiatOnRampServiceProviders.tsx
@@ -12,16 +12,8 @@ import { useFiatOnRampContext } from 'src/features/fiatOnRamp/FiatOnRampContext'
 import { InitialQuoteSelection } from 'src/features/fiatOnRamp/types'
 import { getServiceProviderForQuote } from 'src/features/fiatOnRamp/utils'
 import { FiatOnRampScreens } from 'src/screens/Screens'
-import {
-  AnimatedFlex,
-  ColorTokens,
-  Flex,
-  GeneratedIcon,
-  Icons,
-  Inset,
-  Separator,
-  Text,
-} from 'ui/src'
+import { AnimatedFlex, ColorTokens, Flex, GeneratedIcon, Inset, Separator, Text } from 'ui/src'
+import { TimePast } from 'ui/src/components/icons'
 import { HandleBar } from 'wallet/src/components/modals/HandleBar'
 import { useBottomSheetFocusHook } from 'wallet/src/components/modals/hooks'
 import { FORQuote } from 'wallet/src/features/fiatOnRamp/types'
@@ -94,7 +86,7 @@ export function FiatOnRampServiceProvidersScreen({ navigation }: Props): JSX.Ele
    <Flex px="$spacing12">
      {type === InitialQuoteSelection.Best ? null : type === InitialQuoteSelection.MostRecent ? (
        <SectionHeader
-          Icon={Icons.TimePast}
+          Icon={TimePast}
          iconColor="$neutral3"
          title={t('fiatOnRamp.quote.type.recent')}
        />

--- a/apps/mobile/src/screens/HomeScreen.tsx
+++ b/apps/mobile/src/screens/HomeScreen.tsx
@@ -353,15 +353,13 @@ export function HomeScreen(props?: AppStackScreenProp<Screens.Home>): JSX.Elemen
  }, [dispatch])
  const onPressSend = useCallback(() => dispatch(openModal({ name: ModalName.Send })), [dispatch])
  const onPressReceive = useCallback(() => {
-    if (cexTransferProviders.length > 0) {
-      dispatch(
-        openModal({ name: ModalName.ReceiveCryptoModal, initialState: cexTransferProviders })
-      )
-    } else {
-      dispatch(
-        openModal({ name: ModalName.WalletConnectScan, initialState: ScannerModalState.WalletQr })
+    dispatch(
+      openModal(
+        cexTransferProviders.length > 0
+          ? { name: ModalName.ReceiveCryptoModal, initialState: cexTransferProviders }
+          : { name: ModalName.WalletConnectScan, initialState: ScannerModalState.WalletQr }
      )
-    }
+    )
  }, [dispatch, cexTransferProviders])
  const onPressViewOnlyLabel = useCallback(
    () => dispatch(openModal({ name: ModalName.ViewOnlyExplainer })),

--- a/apps/mobile/src/screens/Import/ImportMethodScreen.tsx
+++ b/apps/mobile/src/screens/Import/ImportMethodScreen.tsx
@@ -10,8 +10,9 @@ import { OnboardingScreen } from 'src/features/onboarding/OnboardingScreen'
 import { OptionCard } from 'src/features/onboarding/OptionCard'
 import { OnboardingScreens } from 'src/screens/Screens'
 import { useAddBackButton } from 'src/utils/useAddBackButton'
-import { Flex, Icons, Text, TouchableArea, useSporeColors } from 'ui/src'
+import { Flex, Text, TouchableArea, useSporeColors } from 'ui/src'
 import EyeIcon from 'ui/src/assets/icons/eye.svg'
+import { OSDynamicCloudIcon, PaperStack } from 'ui/src/components/icons'
 import { useIsDarkMode } from 'ui/src/hooks/useIsDarkMode'
 import { AppTFunction } from 'ui/src/i18n/types'
 import { iconSizes } from 'ui/src/theme'
@@ -37,7 +38,7 @@ const options: ImportMethodOption[] = [
  {
    title: (t: AppTFunction) => t('onboarding.import.method.import.title'),
    blurb: (t: AppTFunction) => t('onboarding.import.method.import.message'),
-    icon: <Icons.PaperStack color="$accent1" size={18} strokeWidth={1.5} />,
+    icon: <PaperStack color="$accent1" size={18} strokeWidth={1.5} />,
    nav: OnboardingScreens.SeedPhraseInput,
    importType: ImportType.SeedPhrase,
    name: ElementName.OnboardingImportSeedPhrase,
@@ -48,7 +49,7 @@ const options: ImportMethodOption[] = [
      isAndroid
        ? t(`onboarding.import.method.restore.message.android`)
        : t(`onboarding.import.method.restore.message.ios`),
-    icon: <Icons.OSDynamicCloudIcon color="$accent1" size="$icon.24" />,
+    icon: <OSDynamicCloudIcon color="$accent1" size="$icon.24" />,
    nav: OnboardingScreens.RestoreCloudBackup,
    importType: ImportType.Restore,
    name: ElementName.RestoreFromCloud,

--- a/apps/mobile/src/screens/Import/RestoreCloudBackupLoadingScreen.tsx
+++ b/apps/mobile/src/screens/Import/RestoreCloudBackupLoadingScreen.tsx
@@ -13,7 +13,8 @@ import { useCloudBackups } from 'src/features/CloudBackup/hooks'
 import { OnboardingScreen } from 'src/features/onboarding/OnboardingScreen'
 import { OnboardingScreens } from 'src/screens/Screens'
 import { useAddBackButton } from 'src/utils/useAddBackButton'
-import { Flex, Icons, Loader } from 'ui/src'
+import { Flex, Loader } from 'ui/src'
+import { OSDynamicCloudIcon } from 'ui/src/components/icons'
 import { imageSizes } from 'ui/src/theme'
 import { getCloudProviderName } from 'uniswap/src/utils/cloud-backup/getCloudProviderName'
 import { logger } from 'utilities/src/logger/logger'
@@ -139,7 +140,7 @@ export function RestoreCloudBackupLoadingScreen({
      <Flex alignSelf="center" px="$spacing16">
        <BaseCard.ErrorState
          description={t('account.cloud.error.backup.message')}
-          icon={<Icons.OSDynamicCloudIcon color="$neutral3" size={imageSizes.image48} />}
+          icon={<OSDynamicCloudIcon color="$neutral3" size={imageSizes.image48} />}
          retryButtonLabel={t('common.button.retry')}
          title={t('account.cloud.error.backup.title')}
          onRetry={fetchCloudStorageBackups}
@@ -162,7 +163,7 @@ export function RestoreCloudBackupLoadingScreen({
            description={t('account.cloud.empty.description', {
              cloudProviderName: getCloudProviderName(),
            })}
-            icon={<Icons.OSDynamicCloudIcon color="$neutral3" size={imageSizes.image48} />}
+            icon={<OSDynamicCloudIcon color="$neutral3" size={imageSizes.image48} />}
            retryButtonLabel={t('common.button.retry')}
            title={t('account.cloud.empty.title')}
            onRetry={fetchCloudStorageBackups}

--- a/apps/mobile/src/screens/Import/RestoreCloudBackupScreen.tsx
+++ b/apps/mobile/src/screens/Import/RestoreCloudBackupScreen.tsx
@@ -9,7 +9,8 @@ import { CloudStorageMnemonicBackup } from 'src/features/CloudBackup/types'
 import { OnboardingScreen } from 'src/features/onboarding/OnboardingScreen'
 import { OnboardingScreens } from 'src/screens/Screens'
 import { useAddBackButton } from 'src/utils/useAddBackButton'
-import { Flex, Icons, Text, TouchableArea, Unicon, UniconV2, useIsDarkMode } from 'ui/src'
+import { Flex, Text, TouchableArea, Unicon, UniconV2, useIsDarkMode } from 'ui/src'
+import { RotatableChevron } from 'ui/src/components/icons'
 import { iconSizes } from 'ui/src/theme'
 import { FeatureFlags } from 'uniswap/src/features/gating/flags'
 import { useFeatureFlag } from 'uniswap/src/features/gating/hooks'
@@ -85,7 +86,7 @@ export function RestoreCloudBackupScreen({ navigation, route: { params } }: Prop
                      </Text>
                    </Flex>
                  </Flex>
-                  <Icons.RotatableChevron
+                  <RotatableChevron
                    color="$neutral2"
                    direction="end"
                    height={iconSizes.icon20}

--- a/apps/mobile/src/screens/Import/SeedPhraseInputScreen.tsx
+++ b/apps/mobile/src/screens/Import/SeedPhraseInputScreen.tsx
@@ -9,7 +9,8 @@ import { GenericImportForm } from 'src/features/import/GenericImportForm'
 import { SafeKeyboardOnboardingScreen } from 'src/features/onboarding/SafeKeyboardOnboardingScreen'
 import { OnboardingScreens } from 'src/screens/Screens'
 import { useAddBackButton } from 'src/utils/useAddBackButton'
-import { Button, Flex, Icons, Text, TouchableArea } from 'ui/src'
+import { Button, Flex, Text, TouchableArea } from 'ui/src'
+import { QuestionInCircleFilled } from 'ui/src/components/icons'
 import { uniswapUrls } from 'uniswap/src/constants/urls'
 import { ImportType } from 'wallet/src/features/onboarding/types'
 import { useNonPendingSignerAccounts } from 'wallet/src/features/wallet/hooks'
@@ -149,7 +150,7 @@ export function SeedPhraseInputScreen({ navigation, route: { params } }: Props):
              flexDirection="row"
              gap="$spacing8"
              onPress={isRestoringMnemonic ? onPressTryAgainButton : onPressRecoveryHelpButton}>
-              <Icons.QuestionInCircleFilled color="$surface1" size="$icon.20" />
+              <QuestionInCircleFilled color="$surface1" size="$icon.20" />
              <Text $short={{ variant: 'body3' }} color="$neutral3" variant="body2">
                {isRestoringMnemonic
                  ? t('account.recoveryPhrase.helpText.restoring')

--- a/apps/mobile/src/screens/Import/WatchWalletScreen.tsx
+++ b/apps/mobile/src/screens/Import/WatchWalletScreen.tsx
@@ -12,7 +12,8 @@ import { useCompleteOnboardingCallback } from 'src/features/onboarding/hooks'
 import { sendMobileAnalyticsEvent } from 'src/features/telemetry'
 import { OnboardingScreens } from 'src/screens/Screens'
 import { useAddBackButton } from 'src/utils/useAddBackButton'
-import { Button, Flex, Icons, Text } from 'ui/src'
+import { Button, Flex, Text } from 'ui/src'
+import { GraduationCap } from 'ui/src/components/icons'
 import { normalizeTextInput } from 'utilities/src/primitives/string'
 import { ChainId } from 'wallet/src/constants/chains'
 import { usePortfolioBalances } from 'wallet/src/features/dataApi/balances'
@@ -191,7 +192,7 @@ export function WatchWalletScreen({ navigation, route: { params } }: Props): JSX
          borderRadius="$rounded16"
          gap="$spacing16"
          p="$spacing16">
-          <Icons.GraduationCap color="$neutral2" size="$icon.20" />
+          <GraduationCap color="$neutral2" size="$icon.20" />
          <Text color="$neutral2" flexShrink={1} variant="body3">
            {t('account.wallet.watch.message')}
          </Text>

--- a/apps/mobile/src/screens/Onboarding/BackupScreen.tsx
+++ b/apps/mobile/src/screens/Onboarding/BackupScreen.tsx
@@ -16,8 +16,9 @@ import { isCloudStorageAvailable } from 'src/features/CloudBackup/RNCloudStorage
 import { OnboardingScreen } from 'src/features/onboarding/OnboardingScreen'
 import { OptionCard } from 'src/features/onboarding/OptionCard'
 import { OnboardingScreens, Screens } from 'src/screens/Screens'
-import { Button, Flex, Icons, Text, TouchableArea, useIsDarkMode, useSporeColors } from 'ui/src'
+import { Button, Flex, Text, TouchableArea, useIsDarkMode, useSporeColors } from 'ui/src'
 import PaperIcon from 'ui/src/assets/icons/paper-stack.svg'
+import { OSDynamicCloudIcon, QuestionInCircleFilled } from 'ui/src/components/icons'
 import { iconSizes } from 'ui/src/theme'
 import { getCloudProviderName } from 'uniswap/src/utils/cloud-backup/getCloudProviderName'
 import { isAndroid } from 'uniswap/src/utils/platform'
@@ -132,7 +133,7 @@ export function BackupScreen({ navigation, route: { params } }: Props): JSX.Elem
      blurb={t('onboarding.backup.option.cloud.description')}
      disabled={hasCloudBackup}
      elementName={ElementName.AddCloudBackup}
-      icon={<Icons.OSDynamicCloudIcon color="$accent1" size="$icon.16" />}
+      icon={<OSDynamicCloudIcon color="$accent1" size="$icon.16" />}
      title={t('onboarding.backup.option.cloud.title', {
        cloudProviderName: getCloudProviderName(),
      })}
@@ -199,7 +200,7 @@ function RecoveryPhraseTooltip({
      gap="$spacing8"
      py="$spacing8"
      onPress={onPressEducationButton}>
-      <Icons.QuestionInCircleFilled color="$surface1" size="$icon.20" />
+      <QuestionInCircleFilled color="$surface1" size="$icon.20" />
      <Text color="$neutral3" variant="body2">
        {t('onboarding.tooltip.recoveryPhrase.trigger')}
      </Text>

--- a/apps/mobile/src/screens/ReceiveCryptoModal.tsx
+++ b/apps/mobile/src/screens/ReceiveCryptoModal.tsx
@@ -6,13 +6,13 @@ import { selectModalState } from 'src/features/modals/selectModalState'
 import {
  Flex,
  HapticFeedback,
-  Icons,
  ImpactFeedbackStyle,
  Separator,
  Text,
  TouchableArea,
  useSporeColors,
 } from 'ui/src'
+import { CopySheets, QrCode } from 'ui/src/components/icons'
 import { iconSizes } from 'ui/src/theme'
 import { ScannerModalState } from 'wallet/src/components/QRCodeScanner/constants'
 import { AddressDisplay } from 'wallet/src/components/accounts/AddressDisplay'
@@ -84,7 +84,7 @@ function AccountCardItem({ onClose }: { onClose: () => void }): JSX.Element {
                borderRadius={ICON_BORDER_RADIUS}
                height={ICON_SIZE}
                width={ICON_SIZE}>
-                <Icons.CopySheets color="$neutral2" size={iconSizes.icon16} />
+                <CopySheets color="$neutral2" size={iconSizes.icon16} />
              </Flex>
            </TouchableArea>
            <Flex
@@ -94,7 +94,7 @@ function AccountCardItem({ onClose }: { onClose: () => void }): JSX.Element {
              borderRadius={ICON_BORDER_RADIUS}
              height={ICON_SIZE}
              width={ICON_SIZE}>
-              <Icons.QrCode color="$neutral2" size={iconSizes.icon16} />
+              <QrCode color="$neutral2" size={iconSizes.icon16} />
            </Flex>
          </Flex>
        </Flex>

--- a/apps/mobile/src/screens/SettingsCloudBackupPasswordCreateScreen.tsx
+++ b/apps/mobile/src/screens/SettingsCloudBackupPasswordCreateScreen.tsx
@@ -7,7 +7,8 @@ import { BackHeader } from 'src/components/layout/BackHeader'
 import { Screen } from 'src/components/layout/Screen'
 import { CloudBackupPasswordForm } from 'src/features/CloudBackup/CloudBackupPasswordForm'
 import { Screens } from 'src/screens/Screens'
-import { Button, Flex, Icons, Text, useSporeColors } from 'ui/src'
+import { Button, Flex, Text, useSporeColors } from 'ui/src'
+import { OSDynamicCloudIcon } from 'ui/src/components/icons'
 import { getCloudProviderName } from 'uniswap/src/utils/cloud-backup/getCloudProviderName'
 import { BottomSheetModal } from 'wallet/src/components/modals/BottomSheetModal'
 import { ElementName, ModalName } from 'wallet/src/telemetry/constants'
@@ -64,7 +65,7 @@ export function SettingsCloudBackupPasswordCreateScreen({
            <Flex px="$spacing16" py="$spacing12">
              <Flex centered gap="$spacing16">
                <Flex backgroundColor="$accentSoft" borderRadius="$rounded12" p="$spacing12">
-                  <Icons.OSDynamicCloudIcon color="$accent1" size="$icon.24" />
+                  <OSDynamicCloudIcon color="$accent1" size="$icon.24" />
                </Flex>
                <Text textAlign="center" variant="subheading1">
                  {t('settings.setting.backup.modal.title', {

--- a/apps/mobile/src/screens/SettingsFiatCurrencyModal.tsx
+++ b/apps/mobile/src/screens/SettingsFiatCurrencyModal.tsx
@@ -4,7 +4,8 @@ import { Action } from 'redux'
 import { useAppDispatch } from 'src/app/hooks'
 import { VirtualizedList } from 'src/components/layout/VirtualizedList'
 import { closeModal } from 'src/features/modals/modalSlice'
-import { Flex, Icons, Text, TouchableArea, useSporeColors } from 'ui/src'
+import { Flex, Text, TouchableArea, useSporeColors } from 'ui/src'
+import { Check } from 'ui/src/components/icons'
 import { BottomSheetModal } from 'wallet/src/components/modals/BottomSheetModal'
 import { FiatCurrency, ORDERED_CURRENCIES } from 'wallet/src/features/fiatCurrency/constants'
 import { useAppFiatCurrency, useFiatCurrencyInfo } from 'wallet/src/features/fiatCurrency/hooks'
@@ -80,7 +81,7 @@ function FiatCurrencyOption({ active, currency, onPress }: FiatCurrencyOptionPro
            {code}
          </Text>
        </Flex>
-        {active && <Icons.Check color={colors.accent1.val} size="$icon.24" />}
+        {active && <Check color={colors.accent1.val} size="$icon.24" />}
      </Flex>
    </TouchableArea>
  )

--- a/apps/mobile/src/screens/SettingsLanguageModal.tsx
+++ b/apps/mobile/src/screens/SettingsLanguageModal.tsx
@@ -4,7 +4,8 @@ import { Linking } from 'react-native'
 import { Action } from 'redux'
 import { useAppDispatch } from 'src/app/hooks'
 import { closeModal } from 'src/features/modals/modalSlice'
-import { Button, Flex, Icons, Text } from 'ui/src'
+import { Button, Flex, Text } from 'ui/src'
+import { Language } from 'ui/src/components/icons'
 import { isAndroid } from 'uniswap/src/utils/platform'
 import { BottomSheetModal } from 'wallet/src/components/modals/BottomSheetModal'
 import { ElementName, ModalName } from 'wallet/src/telemetry/constants'
@@ -33,7 +34,7 @@ export function SettingsLanguageModal(): JSX.Element {
    <BottomSheetModal name={ModalName.LanguageSelector} onClose={onClose}>
      <Flex centered mt="$spacing16">
        <Flex borderRadius="$rounded12" p="$spacing12" style={{ backgroundColor: LIGHT_BLUE }}>
-          <Icons.Language color="$DEP_blue300" size="$icon.24" strokeWidth={1.5} />
+          <Language color="$DEP_blue300" size="$icon.24" strokeWidth={1.5} />
        </Flex>
      </Flex>
      <Flex gap="$spacing24" pt="$spacing24" px="$spacing24">

--- a/apps/mobile/src/screens/SettingsScreen.tsx
+++ b/apps/mobile/src/screens/SettingsScreen.tsx
@@ -30,7 +30,6 @@ import {
  Button,
  Flex,
  IconProps,
-  Icons,
  Text,
  TouchableArea,
  useDeviceInsets,
@@ -45,6 +44,17 @@ import FingerprintIcon from 'ui/src/assets/icons/fingerprint.svg'
 import LockIcon from 'ui/src/assets/icons/lock.svg'
 import MessageQuestion from 'ui/src/assets/icons/message-question.svg'
 import UniswapIcon from 'ui/src/assets/icons/uniswap-logo.svg'
+import {
+  Chart,
+  Coins,
+  Feedback,
+  Key,
+  Language,
+  LineChartDots,
+  OSDynamicCloudIcon,
+  RotatableChevron,
+  ShieldQuestion,
+} from 'ui/src/components/icons'
 import { iconSizes, spacing } from 'ui/src/theme'
 import { uniswapUrls } from 'uniswap/src/constants/urls'
 import { FeatureFlags } from 'uniswap/src/features/gating/flags'
@@ -152,7 +162,7 @@ export function SettingsScreen(): JSX.Element {
                  modal: ModalName.FiatCurrencySelector,
                  text: t('settings.setting.currency.title'),
                  currentSetting: currentFiatCurrencyInfo.code,
-                  icon: <Icons.Coins {...iconProps} />,
+                  icon: <Coins {...iconProps} />,
                },
              ] as SettingsSectionItem[])
            : []),
@@ -160,22 +170,22 @@ export function SettingsScreen(): JSX.Element {
            modal: ModalName.LanguageSelector,
            text: t('settings.setting.language.title'),
            currentSetting: currentLanguage,
-            icon: <Icons.Language {...iconProps} />,
+            icon: <Language {...iconProps} />,
          },
          {
            screen: Screens.SettingsPrivacy,
            text: t('settings.setting.privacy.title'),
-            icon: <Icons.LineChartDots {...iconProps} />,
+            icon: <LineChartDots {...iconProps} />,
          },
          {
            text: t('settings.setting.smallBalances.title'),
-            icon: <Icons.Chart {...iconProps} />,
+            icon: <Chart {...iconProps} />,
            isToggleEnabled: hideSmallBalances,
            onToggle: onToggleHideSmallBalances,
          },
          {
            text: t('settings.setting.unknownTokens.title'),
-            icon: <Icons.ShieldQuestion {...iconProps} />,
+            icon: <ShieldQuestion {...iconProps} />,
            isToggleEnabled: hideSpamTokens,
            onToggle: onToggleHideSpamTokens,
          },
@@ -203,7 +213,7 @@ export function SettingsScreen(): JSX.Element {
          {
            screen: Screens.SettingsViewSeedPhrase,
            text: t('settings.setting.recoveryPhrase.title'),
-            icon: <Icons.Key {...iconProps} />,
+            icon: <Key {...iconProps} />,
            screenProps: { address: signerAccount?.address ?? '', walletNeedsRestore },
            isHidden: noSignerAccountImported,
          },
@@ -225,7 +235,7 @@ export function SettingsScreen(): JSX.Element {
            text: t('settings.setting.backup.selected', {
              cloudProviderName: getCloudProviderName(),
            }),
-            icon: <Icons.OSDynamicCloudIcon color="$neutral2" size="$icon.24" />,
+            icon: <OSDynamicCloudIcon color="$neutral2" size="$icon.24" />,
            isHidden: noSignerAccountImported,
          },
        ],
@@ -240,7 +250,7 @@ export function SettingsScreen(): JSX.Element {
              headerTitle: t('settings.action.feedback'),
            },
            text: t('settings.action.feedback'),
-            icon: <Icons.Feedback color="$neutral2" size="$icon.24" />,
+            icon: <Feedback color="$neutral2" size="$icon.24" />,
          },
          {
            screen: Screens.WebView,
@@ -374,7 +384,7 @@ function OnboardingRow({ iconProps }: { iconProps: SvgProps }): JSX.Element {
            Onboarding
          </Text>
        </Flex>
-        <Icons.RotatableChevron
+        <RotatableChevron
          color="$neutral3"
          direction="end"
          height={iconSizes.icon24}
@@ -444,7 +454,7 @@ function WalletSettings(): JSX.Element {
                  size={iconSizes.icon40}
                  variant="body1"
                />
-                <Icons.RotatableChevron
+                <RotatableChevron
                  color="$neutral3"
                  direction="end"
                  height={iconSizes.icon24}

--- a/apps/mobile/src/screens/SettingsWalletEdit.tsx
+++ b/apps/mobile/src/screens/SettingsWalletEdit.tsx
@@ -12,7 +12,8 @@ import { SettingsStackParamList } from 'src/app/navigation/types'
 import { BackHeader } from 'src/components/layout/BackHeader'
 import { Screen } from 'src/components/layout/Screen'
 import { UnitagBanner } from 'src/components/unitags/UnitagBanner'
-import { Button, Flex, Icons, Text } from 'ui/src'
+import { Button, Flex, Text } from 'ui/src'
+import { PenLine } from 'ui/src/components/icons'
 import { fonts } from 'ui/src/theme'
 import { isIOS } from 'uniswap/src/utils/platform'
 import { TextInput } from 'wallet/src/components/input/TextInput'
@@ -122,7 +123,7 @@ export function SettingsWalletEdit({
              {showEditButton && accountNameIsEditable && (
                <Button
                  backgroundless
-                  icon={<Icons.PenLine color="$neutral3" />}
+                  icon={<PenLine color="$neutral3" />}
                  m="$none"
                  size="medium"
                  onPress={onEditButtonPress}

--- a/apps/web/.depcheckrc
+++ b/apps/web/.depcheckrc
@@ -60,6 +60,7 @@ ignores: [
    "pages",
    "polyfills",
    "rpc",
+    "shared-cloud",
    "state",
    "test-utils",
    "theme",

--- a/apps/web/functions/README.md
+++ b/apps/web/functions/README.md
@@ -2,7 +2,11 @@

 ## Purpose

-These functions utilize Cloudflare Functions to dynamically inject meta tags server side for richer link sharing capabilities.
+These functions utilize Cloudflare Functions to dynamically inject meta tags server-side for richer link sharing capabilities.
+
+Search engines and social media platforms' crawlers read the initial HTML of a page to index and understand its content. These crawlers often do not execute JavaScript, meaning dynamically added client-side content, including metatags, may not be indexed or recognized. This is why we render our metatags on server-side.
+
+However, these server-side injected metatags do not automatically update during client-side navigation managed by react-router. To address this, we implement additional client-side logic - see `src/pages/metatags.ts`. This client-side metatag management is particularly important for compatibility with features like Safari's native share, which relies on metatags like `og:url` to represent the shared page.

 ## Functions


--- a/apps/web/functions/components/metaTagInjector.test.ts
+++ b/apps/web/functions/components/metaTagInjector.test.ts
@@ -16,26 +16,54 @@ test('should append meta tag to element', () => {
    new Request('http://localhost')
  )
  injector.append(element, property, content)
-  expect(element.append).toHaveBeenCalledWith(`<meta property="${property}" content="${content}"/>`, { html: true })
+  expect(element.append).toHaveBeenCalledWith(`<meta property="${property}" content="${content}" data-rh="true">`, {
+    html: true,
+  })

  injector.element(element)
-  expect(element.append).toHaveBeenCalledWith(`<meta property="og:title" content="test"/>`, { html: true })
-  expect(element.append).toHaveBeenCalledWith(`<meta property="og:description" content="testDescription"/>`, {
+  expect(element.append).toHaveBeenCalledWith(`<meta property="og:title" content="test" data-rh="true">`, {
+    html: true,
+  })
+  expect(element.append).toHaveBeenCalledWith(
+    `<meta property="og:description" content="testDescription" data-rh="true">`,
+    {
+      html: true,
+    }
+  )
+  expect(element.append).toHaveBeenCalledWith(`<meta property="og:image" content="testImage" data-rh="true">`, {
+    html: true,
+  })
+  expect(element.append).toHaveBeenCalledWith(`<meta property="og:image:width" content="1200" data-rh="true">`, {
+    html: true,
+  })
+  expect(element.append).toHaveBeenCalledWith(`<meta property="og:image:height" content="630" data-rh="true">`, {
+    html: true,
+  })
+  expect(element.append).toHaveBeenCalledWith(`<meta property="og:image:alt" content="test" data-rh="true">`, {
+    html: true,
+  })
+  expect(element.append).toHaveBeenCalledWith(`<meta property="og:type" content="website" data-rh="true">`, {
+    html: true,
+  })
+  expect(element.append).toHaveBeenCalledWith(`<meta property="og:url" content="testUrl" data-rh="true">`, {
    html: true,
  })
-  expect(element.append).toHaveBeenCalledWith(`<meta property="og:image" content="testImage"/>`, { html: true })
-  expect(element.append).toHaveBeenCalledWith(`<meta property="og:image:width" content="1200"/>`, { html: true })
-  expect(element.append).toHaveBeenCalledWith(`<meta property="og:image:height" content="630"/>`, { html: true })
-  expect(element.append).toHaveBeenCalledWith(`<meta property="og:image:alt" content="test"/>`, { html: true })
-  expect(element.append).toHaveBeenCalledWith(`<meta property="og:type" content="website"/>`, { html: true })
-  expect(element.append).toHaveBeenCalledWith(`<meta property="og:url" content="testUrl"/>`, { html: true })

-  expect(element.append).toHaveBeenCalledWith(`<meta property="twitter:card" content="summary_large_image"/>`, {
+  expect(element.append).toHaveBeenCalledWith(
+    `<meta property="twitter:card" content="summary_large_image" data-rh="true">`,
+    {
+      html: true,
+    }
+  )
+  expect(element.append).toHaveBeenCalledWith(`<meta property="twitter:title" content="test" data-rh="true">`, {
+    html: true,
+  })
+  expect(element.append).toHaveBeenCalledWith(`<meta property="twitter:image" content="testImage" data-rh="true">`, {
+    html: true,
+  })
+  expect(element.append).toHaveBeenCalledWith(`<meta property="twitter:image:alt" content="test" data-rh="true">`, {
    html: true,
  })
-  expect(element.append).toHaveBeenCalledWith(`<meta property="twitter:title" content="test"/>`, { html: true })
-  expect(element.append).toHaveBeenCalledWith(`<meta property="twitter:image" content="testImage"/>`, { html: true })
-  expect(element.append).toHaveBeenCalledWith(`<meta property="twitter:image:alt" content="test"/>`, { html: true })

  expect(element.append).toHaveBeenCalledTimes(13)
 })
@@ -56,5 +84,7 @@ test('should pass through header blocked paths', () => {
    request
  )
  injector.element(element)
-  expect(element.append).toHaveBeenCalledWith(`<meta property="x:blocked-paths" content="/"/>`, { html: true })
+  expect(element.append).toHaveBeenCalledWith(`<meta property="x:blocked-paths" content="/" data-rh="true">`, {
+    html: true,
+  })
 })
--- a/apps/web/functions/components/metaTagInjector.ts
+++ b/apps/web/functions/components/metaTagInjector.ts
-type MetaTagInjectorInput = {
-  title: string
-  image?: string
-  url: string
-  description?: string
-}
+import { MetaTagInjectorInput } from 'shared-cloud/metatags'

 /**
 * Listener class for Cloudflare's HTMLRewriter {@link https://developers.cloudflare.com/workers/runtime-apis/html-rewriter}
@@ -15,7 +10,8 @@ export class MetaTagInjector implements HTMLRewriterElementContentHandlers {
  constructor(private input: MetaTagInjectorInput, private request: Request) {}

  append(element: Element, property: string, content: string) {
-    element.append(`<meta property="${property}" content="${content}"/>`, { html: true })
+    // without adding data-rh="true", react-helmet-async doesn't overwrite existing metatags
+    element.append(`<meta property="${property}" content="${content}" data-rh="true">`, { html: true })
  }

  element(element: Element) {

--- a/apps/web/functions/default.test.ts
+++ b/apps/web/functions/default.test.ts
@@ -2,21 +2,19 @@ const defaultUrls = ['http://127.0.0.1:3000/', 'http://127.0.0.1:3000/swap', 'ht

 test.each(defaultUrls)('should inject metadata for valid collections', async (defaultUrl) => {
  const body = await fetch(new Request(defaultUrl)).then((res) => res.text())
-  expect(body).toContain(`<meta property="og:title" content="Uniswap Interface"/>`)
+  expect(body).toContain(`<meta property="og:title" content="Uniswap Interface"`)
+  expect(body).toContain(`<meta property="og:description" content="Swap or provide liquidity on the Uniswap Protocol"`)
  expect(body).toContain(
-    `<meta property="og:description" content="Swap or provide liquidity on the Uniswap Protocol"/>`
+    `<meta property="og:image" content="http://127.0.0.1:3000/images/1200x630_Rich_Link_Preview_Image.png"`
  )
+  expect(body).toContain(`<meta property="og:image:width" content="1200"`)
+  expect(body).toContain(`<meta property="og:image:height" content="630"`)
+  expect(body).toContain(`<meta property="og:type" content="website"`)
+  expect(body).toContain(`<meta property="og:image:alt" content="Uniswap Interface"`)
+  expect(body).toContain(`<meta property="twitter:card" content="summary_large_image"`)
+  expect(body).toContain(`<meta property="twitter:title" content="Uniswap Interface"`)
  expect(body).toContain(
-    `<meta property="og:image" content="http://127.0.0.1:3000/images/1200x630_Rich_Link_Preview_Image.png"/>`
+    `<meta property="twitter:image" content="http://127.0.0.1:3000/images/1200x630_Rich_Link_Preview_Image.png"`
  )
-  expect(body).toContain(`<meta property="og:image:width" content="1200"/>`)
-  expect(body).toContain(`<meta property="og:image:height" content="630"/>`)
-  expect(body).toContain(`<meta property="og:type" content="website"/>`)
-  expect(body).toContain(`<meta property="og:image:alt" content="Uniswap Interface"/>`)
-  expect(body).toContain(`<meta property="twitter:card" content="summary_large_image"/>`)
-  expect(body).toContain(`<meta property="twitter:title" content="Uniswap Interface"/>`)
-  expect(body).toContain(
-    `<meta property="twitter:image" content="http://127.0.0.1:3000/images/1200x630_Rich_Link_Preview_Image.png"/>`
-  )
-  expect(body).toContain(`<meta property="twitter:image:alt" content="Uniswap Interface"/>`)
+  expect(body).toContain(`<meta property="twitter:image:alt" content="Uniswap Interface"`)
 })
--- a/apps/web/functions/explore/tokens/__snapshots__/token.test.ts.snap
+++ b/apps/web/functions/explore/tokens/__snapshots__/token.test.ts.snap
--- a/apps/web/functions/explore/tokens/token.test.ts
+++ b/apps/web/functions/explore/tokens/token.test.ts
@@ -31,18 +31,18 @@ test.each(tokens)('should inject metadata for valid tokens', async (token) => {
  const url = 'http://127.0.0.1:3000/explore/tokens/' + token.network + '/' + token.address
  const body = await fetch(new Request(url)).then((res) => res.text())
  expect(body).toMatchSnapshot()
-  expect(body).toContain(`<meta property="og:title" content="Get ${token.symbol} on Uniswap"/>`)
+  expect(body).toContain(`<meta property="og:title" content="Get ${token.symbol} on Uniswap" data-rh="true">`)
  expect(body).not.toContain(`<meta property="og:description"`)
-  expect(body).toContain(`<meta property="og:image" content="${token.image}"/>`)
-  expect(body).toContain(`<meta property="og:image:width" content="1200"/>`)
-  expect(body).toContain(`<meta property="og:image:height" content="630"/>`)
-  expect(body).toContain(`<meta property="og:type" content="website"/>`)
-  expect(body).toContain(`<meta property="og:url" content="${url}"/>`)
-  expect(body).toContain(`<meta property="og:image:alt" content="Get ${token.symbol} on Uniswap"/>`)
-  expect(body).toContain(`<meta property="twitter:card" content="summary_large_image"/>`)
-  expect(body).toContain(`<meta property="twitter:title" content="Get ${token.symbol} on Uniswap"/>`)
-  expect(body).toContain(`<meta property="twitter:image" content="${token.image}"/>`)
-  expect(body).toContain(`<meta property="twitter:image:alt" content="Get ${token.symbol} on Uniswap"/>`)
+  expect(body).toContain(`<meta property="og:image" content="${token.image}" data-rh="true">`)
+  expect(body).toContain(`<meta property="og:image:width" content="1200" data-rh="true">`)
+  expect(body).toContain(`<meta property="og:image:height" content="630" data-rh="true">`)
+  expect(body).toContain(`<meta property="og:type" content="website" data-rh="true">`)
+  expect(body).toContain(`<meta property="og:url" content="${url}" data-rh="true">`)
+  expect(body).toContain(`<meta property="og:image:alt" content="Get ${token.symbol} on Uniswap" data-rh="true">`)
+  expect(body).toContain(`<meta property="twitter:card" content="summary_large_image" data-rh="true">`)
+  expect(body).toContain(`<meta property="twitter:title" content="Get ${token.symbol} on Uniswap" data-rh="true">`)
+  expect(body).toContain(`<meta property="twitter:image" content="${token.image}" data-rh="true">`)
+  expect(body).toContain(`<meta property="twitter:image:alt" content="Get ${token.symbol} on Uniswap" data-rh="true">`)
 })

 const invalidTokens = [

--- a/apps/web/functions/nfts/asset/[[index]].ts
+++ b/apps/web/functions/nfts/asset/[[index]].ts
 /* eslint-disable import/no-unused-modules */
-import getAsset from '../../utils/getAsset'
+import getAsset from 'utils/getAsset'
 import { transformResponse } from '../../utils/transformResponse'

 export const onRequest: PagesFunction = async ({ params, request, next }) => {

--- a/apps/web/functions/nfts/asset/__snapshots__/nft.test.ts.snap
+++ b/apps/web/functions/nfts/asset/__snapshots__/nft.test.ts.snap
--- a/apps/web/functions/nfts/asset/nft.test.ts
+++ b/apps/web/functions/nfts/asset/nft.test.ts
@@ -23,18 +23,24 @@ test.each(assets)('should inject metadata for valid assets', async (nft) => {
  const url = 'http://127.0.0.1:3000/nfts/asset/' + nft.address + '/' + nft.assetId
  const body = await fetch(new Request(url)).then((res) => res.text())
  expect(body).toMatchSnapshot(nft.collectionName)
-  expect(body).toContain(`<meta property="og:title" content="${nft.collectionName} #${nft.assetId}"/>`)
+  expect(body).toContain(`<meta property="og:title" content="${nft.collectionName} #${nft.assetId}" data-rh="true">`)
  expect(body).not.toContain(`<meta property="og:description"`)
-  expect(body).toContain(`<meta property="og:image" content="${nft.image}"/>`)
-  expect(body).toContain(`<meta property="og:image:width" content="1200"/>`)
-  expect(body).toContain(`<meta property="og:image:height" content="630"/>`)
-  expect(body).toContain(`<meta property="og:type" content="website"/>`)
-  expect(body).toContain(`<meta property="og:url" content="${url}"/>`)
-  expect(body).toContain(`<meta property="og:image:alt" content="${nft.collectionName} #${nft.assetId}"/>`)
-  expect(body).toContain(`<meta property="twitter:card" content="summary_large_image"/>`)
-  expect(body).toContain(`<meta property="twitter:title" content="${nft.collectionName} #${nft.assetId}"/>`)
-  expect(body).toContain(`<meta property="twitter:image" content="${nft.image}"/>`)
-  expect(body).toContain(`<meta property="twitter:image:alt" content="${nft.collectionName} #${nft.assetId}"/>`)
+  expect(body).toContain(`<meta property="og:image" content="${nft.image}" data-rh="true">`)
+  expect(body).toContain(`<meta property="og:image:width" content="1200" data-rh="true">`)
+  expect(body).toContain(`<meta property="og:image:height" content="630" data-rh="true">`)
+  expect(body).toContain(`<meta property="og:type" content="website" data-rh="true">`)
+  expect(body).toContain(`<meta property="og:url" content="${url}" data-rh="true">`)
+  expect(body).toContain(
+    `<meta property="og:image:alt" content="${nft.collectionName} #${nft.assetId}" data-rh="true">`
+  )
+  expect(body).toContain(`<meta property="twitter:card" content="summary_large_image" data-rh="true">`)
+  expect(body).toContain(
+    `<meta property="twitter:title" content="${nft.collectionName} #${nft.assetId}" data-rh="true">`
+  )
+  expect(body).toContain(`<meta property="twitter:image" content="${nft.image}" data-rh="true">`)
+  expect(body).toContain(
+    `<meta property="twitter:image:alt" content="${nft.collectionName} #${nft.assetId}" data-rh="true">`
+  )
 })

 const invalidAssets = [

--- a/apps/web/functions/nfts/collection/__snapshots__/collection.test.ts.snap
+++ b/apps/web/functions/nfts/collection/__snapshots__/collection.test.ts.snap
--- a/apps/web/functions/nfts/collection/collection.test.ts
+++ b/apps/web/functions/nfts/collection/collection.test.ts
@@ -20,18 +20,24 @@ test.each([...collections])('should inject metadata for collections', async (col
  const url = 'http://127.0.0.1:3000/nfts/collection/' + collection.address
  const body = await fetch(new Request(url)).then((res) => res.text())
  expect(body).toMatchSnapshot()
-  expect(body).toContain(`<meta property="og:title" content="${collection.collectionName} on Uniswap"/>`)
+  expect(body).toContain(`<meta property="og:title" content="${collection.collectionName} on Uniswap" data-rh="true">`)
  expect(body).not.toContain(`<meta property="og:description"`)
-  expect(body).toContain(`<meta property="og:image" content="${collection.image}"/>`)
-  expect(body).toContain(`<meta property="og:image:width" content="1200"/>`)
-  expect(body).toContain(`<meta property="og:image:height" content="630"/>`)
-  expect(body).toContain(`<meta property="og:type" content="website"/>`)
-  expect(body).toContain(`<meta property="og:url" content="${url}"/>`)
-  expect(body).toContain(`<meta property="og:image:alt" content="${collection.collectionName} on Uniswap"/>`)
-  expect(body).toContain(`<meta property="twitter:card" content="summary_large_image"/>`)
-  expect(body).toContain(`<meta property="twitter:title" content="${collection.collectionName} on Uniswap"/>`)
-  expect(body).toContain(`<meta property="twitter:image" content="${collection.image}"/>`)
-  expect(body).toContain(`<meta property="twitter:image:alt" content="${collection.collectionName} on Uniswap"/>`)
+  expect(body).toContain(`<meta property="og:image" content="${collection.image}" data-rh="true">`)
+  expect(body).toContain(`<meta property="og:image:width" content="1200" data-rh="true">`)
+  expect(body).toContain(`<meta property="og:image:height" content="630" data-rh="true">`)
+  expect(body).toContain(`<meta property="og:type" content="website" data-rh="true">`)
+  expect(body).toContain(`<meta property="og:url" content="${url}" data-rh="true">`)
+  expect(body).toContain(
+    `<meta property="og:image:alt" content="${collection.collectionName} on Uniswap" data-rh="true">`
+  )
+  expect(body).toContain(`<meta property="twitter:card" content="summary_large_image" data-rh="true">`)
+  expect(body).toContain(
+    `<meta property="twitter:title" content="${collection.collectionName} on Uniswap" data-rh="true">`
+  )
+  expect(body).toContain(`<meta property="twitter:image" content="${collection.image}" data-rh="true">`)
+  expect(body).toContain(
+    `<meta property="twitter:image:alt" content="${collection.collectionName} on Uniswap" data-rh="true">`
+  )
 })

 const nonexistentCollections = [

--- a/apps/web/functions/tsconfig.json
+++ b/apps/web/functions/tsconfig.json
@@ -5,8 +5,11 @@
    "composite": false,
    "incremental": true,
    "isolatedModules": false,
+    "paths": {
+      "shared-cloud/*": ["../src/shared-cloud/*"]
+    },
    "tsBuildInfoFile": "../node_modules/.cache/tsbuildinfo/functions", // avoid clobbering the build tsbuildinfo
-    "types": ["jest", "node", "@cloudflare/workers-types"]
+    "types": ["jest", "node", "@cloudflare/workers-types"],
  },
  "include": ["**/*.ts", "**/*.tsx"],
 }
--- a/apps/web/functions/utils/getAsset.ts
+++ b/apps/web/functions/utils/getAsset.ts
+import { formatNFTAssetMetatagTitleName } from 'shared-cloud/metatags'
 import { AssetDocument, AssetQuery } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'
 import client from '../client'

-function formatTitleName(name: string | undefined, collectionName: string | undefined, tokenId: string) {
-  if (name) {
-    return name
-  }
-  if (collectionName && tokenId) {
-    return collectionName + ' #' + tokenId
-  }
-  if (tokenId) {
-    return 'Asset #' + tokenId
-  }
-  return 'View NFT on Uniswap'
-}
-
 export default async function getAsset(collectionAddress: string, tokenId: string, url: string) {
  const origin = new URL(url).origin
  const image = origin + '/api/image/nfts/asset/' + collectionAddress + '/' + tokenId
@@ -30,7 +18,7 @@ export default async function getAsset(collectionAddress: string, tokenId: strin
  if (!asset) {
    return undefined
  }
-  const title = formatTitleName(asset.name, asset.collection?.name, asset.tokenId)
+  const title = formatNFTAssetMetatagTitleName(asset.name, asset.collection?.name, asset.tokenId)
  const formattedAsset = {
    title,
    image,

--- a/apps/web/functions/utils/getToken.ts
+++ b/apps/web/functions/utils/getToken.ts
+import { formatTokenMetatagTitleName } from 'shared-cloud/metatags'
 import {
  Chain,
  TokenWebDocument,
@@ -6,16 +7,6 @@ import {
 import { NATIVE_CHAIN_ID } from '../../src/constants/tokens'
 import client from '../client'

-function formatTitleName(symbol: string | undefined, name: string | undefined) {
-  if (symbol) {
-    return 'Get ' + symbol + ' on Uniswap'
-  }
-  if (name) {
-    return 'Get ' + name + ' on Uniswap'
-  }
-  return 'View Token on Uniswap'
-}
-
 const convertTokenAddress = (networkName: string, tokenAddress: string) => {
  if (tokenAddress === NATIVE_CHAIN_ID) {
    switch (networkName) {
@@ -47,7 +38,7 @@ export default async function getToken(networkName: string, tokenAddress: string
    return undefined
  }

-  const title = formatTitleName(asset.symbol, asset.name)
+  const title = formatTokenMetatagTitleName(asset.symbol, asset.name)

  const formattedAsset = {
    title,

--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -7,9 +7,6 @@
    "ajv": "node scripts/compile-ajv-validators.js",
    "check:deps:usage": "depcheck",
    "check:circular": "concurrently \"../../scripts/check-circular-imports.sh ./src/pages/App.tsx 7\" \"../../scripts/check-circular-imports.sh ./src/setupTests.ts 0\"",
-    "contracts:compile:abi": "typechain --target ethers-v5 --out-dir src/abis/types \"./src/abis/**/*.json\"",
-    "contracts:compile:v3": "typechain --target ethers-v5 --out-dir src/types/v3 \"../../node_modules/@uniswap/**/artifacts/contracts/**/*[!dbg].json\"",
-    "contracts": "yarn contracts:compile:abi && yarn contracts:compile:v3",
    "graphql:schema": "node scripts/fetch-schema.js",
    "graphql:generate:thegraph": "graphql-codegen --config graphql.thegraph.codegen.config.ts",
    "graphql:generate": "yarn graphql:generate:thegraph",
@@ -19,7 +16,6 @@
    "i18n:download": "./scripts/crowdin.sh download",
    "i18n:download:if-missing": "ONLY_IF_MISSING=1 ./scripts/crowdin.sh download",
    "i18n:extract": "i18next && node ./scripts/fix-empty-i18n-values.js",
-    "prepare": "concurrently \"npm:ajv\"",
    "start": "craco start",
    "start:cloud": "NODE_OPTIONS=--dns-result-order=ipv4first PORT=3001 npx wrangler pages dev --compatibility-flags=nodejs_compat --compatibility-date=2023-08-01 --proxy=3001 --port=3000 -- yarn start",
    "build:production": "yarn i18n:download:if-missing && craco build",
@@ -198,20 +194,20 @@
    "@uniswap/governance": "1.0.2",
    "@uniswap/liquidity-staker": "1.0.2",
    "@uniswap/merkle-distributor": "1.0.1",
-    "@uniswap/permit2-sdk": "1.2.1-beta.1",
+    "@uniswap/permit2-sdk": "1.2.1",
    "@uniswap/redux-multicall": "1.1.8",
-    "@uniswap/router-sdk": "1.9.1-beta.2",
-    "@uniswap/sdk-core": "4.2.1-beta.1",
+    "@uniswap/router-sdk": "1.9.1",
+    "@uniswap/sdk-core": "4.2.1",
    "@uniswap/smart-order-router": "3.17.3",
    "@uniswap/token-lists": "1.0.0-beta.33",
-    "@uniswap/uniswapx-sdk": "2.0.3-alpha.1",
-    "@uniswap/universal-router-sdk": "2.0.4-beta.3",
+    "@uniswap/uniswapx-sdk": "2.0.4-alpha.1",
+    "@uniswap/universal-router-sdk": "2.0.4",
    "@uniswap/v2-core": "1.0.1",
    "@uniswap/v2-periphery": "1.1.0-beta.0",
-    "@uniswap/v2-sdk": "4.3.1-beta.2",
+    "@uniswap/v2-sdk": "4.3.1",
    "@uniswap/v3-core": "1.0.1",
    "@uniswap/v3-periphery": "1.4.4",
-    "@uniswap/v3-sdk": "3.11.1-beta.2",
+    "@uniswap/v3-sdk": "3.11.1",
    "@vanilla-extract/css": "1.14.0",
    "@vanilla-extract/dynamic": "2.1.0",
    "@vanilla-extract/sprinkles": "1.6.1",
@@ -274,7 +270,6 @@
    "react-markdown": "4.3.1",
    "react-native-gesture-handler": "2.15.0",
    "react-popper": "2.3.0",
-    "react-query": "3.39.1",
    "react-redux": "8.0.5",
    "react-router-dom": "6.10.0",
    "react-scroll-sync": "0.11.2",

--- a/apps/web/public/csp.json
+++ b/apps/web/public/csp.json
@@ -4,13 +4,9 @@
  ],
  "scriptSrc": [
    "'self'",
-    "'unsafe-eval'",
-    "'unsafe-inline'",
    "'wasm-unsafe-eval'",
    "data:",
    "https://translate.googleapis.com/",
-    "https://vercel.com",
-    "https://vercel.live/",
    "https://www.google-analytics.com",
    "https://www.googletagmanager.com"
  ],
@@ -21,35 +17,12 @@
  ],
  "imgSrc": [
    "*",
-    "'self'",
    "blob:",
-    "data:",
-    "https://*.uniswap.org",
-    "https://uniswap.org",
-    "https://assets.coingecko.com/",
-    "https://*.amazonaws.com",
-    "https://basescan.org",
-    "https://celo-org.github.io/",
-    "https://cdn.center.app/",
-    "https://ethereum-optimism.github.io/",
-    "https://explorer-api.walletconnect.com/",
-    "https://i.seadn.io/",
-    "https://lh3.googleusercontent.com/",
-    "https://openseauserdata.com/",
-    "https://raw.githubusercontent.com/",
-    "https://raw.seadn.io/",
-    "https://s2.coinmarketcap.com/",
-    "https://static.optimism.io/",
-    "https://vercel.com",
-    "https://vercel.live/",
-    "https://trustwallet.com/",
-    "https://cloudflare-ipfs.com/"
+    "data:"
  ],
  "frameSrc": [
    "'self'",
    "https://buy.moonpay.com/",
-    "https://vercel.com",
-    "https://vercel.live/",
    "https://verify.walletconnect.com/",
    "https://verify.walletconnect.org/"
  ],
@@ -57,81 +30,79 @@
    "'self'",
    "blob:",
    "data:",
-    "wss://*.uniswap.org",
-    "https://*.uniswap.org",
-    "https://uniswap.org",
-    "https://arb1.arbitrum.io",
-    "https://*.coingecko.com/",
    "https://*.alchemy.com",
-    "https://buy.moonpay.com/",
-    "https://bsc-dataseed1.binance.org/",
-    "https://cdn.center.app/",
-    "https://cdn.jsdelivr.net/npm/@rive-app/canvas@2.8.3/rive.wasm",
+    "https://*.arbitrum.io",
+    "https://*.base.org/",
    "https://*.coinbase.com",
-    "https://statsigapi.net",
+    "https://*.coingecko.com/",
+    "https://*.coinmarketcap.com/",
+    "https://*.drpc.org/",
+    "https://*.gemini.com",
+    "https://*.googleapis.com",
+    "https://*.infura.io",
+    "https://*.nodereal.io",
+    "https://*.optimism.io",
+    "https://*.quiknode.pro",
+    "https://*.twnodes.com",
+    "https://*.uniswap.org",
+    "https://*.walletconnect.com",
+    "https://*.zerion.io",
+    "https://alfajores-forno.celo-testnet.org",
+    "https://api.avax.network/ext/bc/C/rpc",
    "https://api.moonpay.com/",
+    "https://api.mycryptoapi.com/eth",
    "https://api.opensea.io",
+    "https://api.studio.thegraph.com/",
    "https://api.thegraph.com/",
-    "https://arbitrum-mainnet.infura.io/",
-    "https://assets.coingecko.com",
-    "https://avalanche-mainnet.infura.io/",
-    "https://base-mainnet.infura.io/",
-    "https://bridge.arbitrum.io",
-    "https://celo-mainnet.infura.io/",
+    "https://bsc-dataseed1.binance.org/",
+    "https://bsc-dataseed1.bnbchain.org",
+    "https://buy.moonpay.com/",
+    "https://cdn.center.app/",
+    "https://cdn.jsdelivr.net/npm/@rive-app/canvas@2.8.3/rive.wasm",
    "https://celo-org.github.io",
    "https://cloudflare-ipfs.com",
-    "https://*.zerion.io",
-    "https://*.drpc.org/",
-    "https://*.base.org/",
-    "https://*.walletconnect.com",
    "https://ethereum-optimism.github.io/",
    "https://forno.celo.org/",
-    "https://*.gemini.com",
    "https://gateway.ipfs.io/",
    "https://i.seadn.io/",
+    "https://invalid.rpki.cloudflare.com/",
    "https://ipfs.io/",
+    "https://ipv4-check-perf.radar.cloudflare.com",
+    "https://ipv6-check-perf.radar.cloudflare.com/",
    "https://lh3.googleusercontent.com/",
-    "https://mainnet.infura.io",
-    "https://*.nodereal.io",
+    "https://mainnet.base.org/",
    "https://o1037921.ingest.sentry.io",
-    "https://old-wispy-arrow.bsc.quiknode.pro/",
    "https://openseauserdata.com/",
    "https://performance.radar.cloudflare.com/",
-    "https://valid.rpki.cloudflare.com",
-    "https://sparrow.cloudflare.com/",
-    "https://ipv4-check-perf.radar.cloudflare.com",
-    "https://ipv6-check-perf.radar.cloudflare.com/",
-    "https://invalid.rpki.cloudflare.com/",
+    "https://polygon-rpc.com/",
    "https://raw.githubusercontent.com",
    "https://raw.seadn.io/",
+    "https://rpc-mainnet.maticvigil.com",
+    "https://rpc-mumbai.maticvigil.com",
    "https://rpc.ankr.com",
+    "https://rpc.blast.io/",
    "https://rpc.degen.tips",
-    "https://rpc-mainnet.maticvigil.com",
+    "https://rpc.goerli.mudit.blog/",
    "https://rpc.mevblocker.io/",
    "https://rpc.scroll.io/",
-    "https://*.coinmarketcap.com/",
-    "https://*.optimism.io",
+    "https://rpc.sepolia.org/",
    "https://sockjs-us3.pusher.com/",
-    "https://api.studio.thegraph.com/",
-    "https://*.googleapis.com",
+    "https://sparrow.cloudflare.com/",
+    "https://statsigapi.net",
    "https://trustwallet.com",
-    "https://*.arbitrum.io",
-    "https://tokens.coingecko.com",
-    "https://*.twnodes.com",
-    "https://ultra-blue-flower.quiknode.pro",
+    "https://uniswap.org",
    "https://unpkg.com/@rive-app/canvas@2.8.3/rive.wasm",
    "https://us-central1-uniswap-mobile.cloudfunctions.net/",
+    "https://valid.rpki.cloudflare.com",
    "https://vercel.com",
    "https://vercel.live/",
    "https://wallet.crypto.com",
    "https://web3.1inch.io",
-    "https://www.gemini.com",
-    "https://*.quiknode.pro",
-    "https://*.infura.io",
+    "wss://*.uniswap.org",
    "wss://relay.walletconnect.com",
    "wss://relay.walletconnect.org",
-    "wss://www.walletlink.org",
-    "wss://ws-us3.pusher.com/"
+    "wss://ws-us3.pusher.com/",
+    "wss://www.walletlink.org"
  ],
  "workerSrc": [
    "'self'",

--- a/apps/web/public/index.html
+++ b/apps/web/public/index.html
@@ -15,12 +15,18 @@

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="theme-color" content="#fff" />
-    <% const cspConfig = require('./csp.json'); %>
+    <% let cspConfig = require('./csp.json'); %>
+
+    <!-- Allow vercel feedback in preview environments -->
+    <% if (process.env.REACT_APP_STAGING) { %>
+      <% const cspDevConfig = require('./vercel-csp.json'); %>
+      <% Object.entries(cspDevConfig).forEach(([key, value]) => cspConfig[key] = cspConfig[key].concat(value)) %>
+    <% } %>
    <meta
      http-equiv="Content-Security-Policy" 
      content="default-src <%= cspConfig.defaultSrc.join(' ') %>; script-src <%= cspConfig.scriptSrc.join(' ') %>; style-src <%= cspConfig.styleSrc.join(' ') %>; img-src <%= cspConfig.imgSrc.join(' ') %>; frame-src <%= cspConfig.frameSrc.join(' ') %>; connect-src <%= cspConfig.connectSrc.join(' ') %>; worker-src <%= cspConfig.workerSrc.join(' ') %>;"
    >
-    
+
    <!-- 
      Apple Smart App Banner for Safari on iOS
      https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners

--- a/apps/web/public/vercel-csp.json
+++ b/apps/web/public/vercel-csp.json
+{
+  "scriptSrc": [
+    "https://vercel.live/"
+  ],
+  "styleSrc": [
+    "https://vercel.live/"
+  ],
+  "frameSrc": [
+    "https://vercel.live/",
+    "https://vercel.com"
+  ]
+}
--- a/apps/web/src/components/AccountDrawer/MiniPortfolio/Activity/getCurrency.ts
+++ b/apps/web/src/components/AccountDrawer/MiniPortfolio/Activity/getCurrency.ts
-import { ChainId, Currency } from '@uniswap/sdk-core'
+import { Currency } from '@uniswap/sdk-core'
+import { SupportedInterfaceChainId, chainIdToBackendChain } from 'constants/chains'
 import { NATIVE_CHAIN_ID, nativeOnChain } from 'constants/tokens'
 import { apolloClient } from 'graphql/data/apollo/client'
 import { gqlTokenToCurrencyInfo } from 'graphql/data/types'
-import { chainIdToBackendName } from 'graphql/data/util'
 import {
  SimpleTokenDocument,
  SimpleTokenQuery,
  Token,
 } from 'uniswap/src/data/graphql/uniswap-data-api/__generated__/types-and-hooks'

-export async function getCurrency(currencyId: string, chainId: ChainId): Promise<Currency | undefined> {
+export async function getCurrency(
+  currencyId: string,
+  chainId: SupportedInterfaceChainId
+): Promise<Currency | undefined> {
  const isNative =
    currencyId === NATIVE_CHAIN_ID || currencyId?.toLowerCase() === 'native' || currencyId?.toLowerCase() === 'eth'
  if (isNative) {
@@ -19,7 +22,7 @@ export async function getCurrency(currencyId: string, chainId: ChainId): Promise
    query: SimpleTokenDocument,
    variables: {
      address: currencyId,
-      chain: chainIdToBackendName(chainId),
+      chain: chainIdToBackendChain({ chainId }),
    },
  })
  return gqlTokenToCurrencyInfo(data?.token as Token)?.currency

--- a/apps/web/src/components/AccountDrawer/MiniPortfolio/Activity/parseLocal.ts
+++ b/apps/web/src/components/AccountDrawer/MiniPortfolio/Activity/parseLocal.ts
@@ -3,7 +3,6 @@ import { ChainId, Currency, CurrencyAmount, TradeType } from '@uniswap/sdk-core'
 import UniswapXBolt from 'assets/svg/bolt.svg'
 import { nativeOnChain } from 'constants/tokens'
 import { t } from 'i18n'
-import { useCallback } from 'react'
 import { isOnChainOrder, useAllSignatures } from 'state/signatures/hooks'
 import { SignatureDetails, SignatureType } from 'state/signatures/types'
 import { useMultichainTransactions } from 'state/transactions/hooks'
@@ -26,9 +25,10 @@ import { TransactionStatus } from 'uniswap/src/data/graphql/uniswap-data-api/__g
 import { isAddress } from 'utilities/src/addresses'
 import { NumberType, useFormatter } from 'utils/formatNumbers'

+import { queryOptions, useQuery } from '@tanstack/react-query'
 import { getCurrency } from 'components/AccountDrawer/MiniPortfolio/Activity/getCurrency'
-import { useQuery } from 'react-query'
-import { CancelledTransactionTitleTable, getActivityTitle, LimitOrderTextTable, OrderTextTable } from '../constants'
+import { SupportedInterfaceChainId } from 'constants/chains'
+import { CancelledTransactionTitleTable, LimitOrderTextTable, OrderTextTable, getActivityTitle } from '../constants'
 import { Activity, ActivityMap } from './types'

 type FormatNumberFunctionType = ReturnType<typeof useFormatter>['formatNumber']
@@ -60,7 +60,7 @@ function buildCurrencyDescriptor(

 async function parseSwap(
  swap: ExactInputSwapTransactionInfo | ExactOutputSwapTransactionInfo,
-  chainId: ChainId,
+  chainId: SupportedInterfaceChainId,
  formatNumber: FormatNumberFunctionType
 ): Promise<Partial<Activity>> {
  const [tokenIn, tokenOut] = await Promise.all([
@@ -104,7 +104,7 @@ function parseWrap(

 async function parseApproval(
  approval: ApproveTransactionInfo,
-  chainId: ChainId,
+  chainId: SupportedInterfaceChainId,
  status: TransactionStatus
 ): Promise<Partial<Activity>> {
  const currency = await getCurrency(approval.tokenAddress, chainId)
@@ -126,7 +126,7 @@ type GenericLPInfo = Omit<
 >
 async function parseLP(
  lp: GenericLPInfo,
-  chainId: ChainId,
+  chainId: SupportedInterfaceChainId,
  formatNumber: FormatNumberFunctionType
 ): Promise<Partial<Activity>> {
  const [baseCurrency, quoteCurrency] = await Promise.all([
@@ -141,7 +141,7 @@ async function parseLP(

 async function parseCollectFees(
  collect: CollectFeesTransactionInfo,
-  chainId: ChainId,
+  chainId: SupportedInterfaceChainId,
  formatNumber: FormatNumberFunctionType
 ): Promise<Partial<Activity>> {
  // Adapts CollectFeesTransactionInfo to generic LP type
@@ -160,7 +160,7 @@ async function parseCollectFees(

 async function parseMigrateCreateV3(
  lp: MigrateV2LiquidityToV3TransactionInfo | CreateV3PoolTransactionInfo,
-  chainId: ChainId
+  chainId: SupportedInterfaceChainId
 ): Promise<Partial<Activity>> {
  const [baseCurrency, quoteCurrency] = await Promise.all([
    getCurrency(lp.baseCurrencyId, chainId),
@@ -175,7 +175,7 @@ async function parseMigrateCreateV3(

 async function parseSend(
  send: SendTransactionInfo,
-  chainId: ChainId,
+  chainId: SupportedInterfaceChainId,
  formatNumber: FormatNumberFunctionType
 ): Promise<Partial<Activity>> {
  const { currencyId, amount, recipient } = send
@@ -202,22 +202,9 @@ export function getTransactionStatus(details: TransactionDetails): TransactionSt
    : TransactionStatus.Failed
 }

-// useQuery wrapper for transactionToActivity, for async fetching
-export function useTransactionToActivity(transaction: TransactionDetails | undefined, chainId: ChainId) {
-  const { formatNumber } = useFormatter()
-  const activityFetcher = useCallback(
-    async () => transactionToActivity(transaction, chainId, formatNumber),
-    [chainId, formatNumber, transaction]
-  )
-  const { data: activity } = useQuery(`transactionToActivity-${transaction?.hash}-${chainId}`, activityFetcher, {
-    enabled: !!transaction,
-  })
-  return activity
-}
-
 export async function transactionToActivity(
  details: TransactionDetails | undefined,
-  chainId: ChainId,
+  chainId: SupportedInterfaceChainId,
  formatNumber: FormatNumberFunctionType
 ): Promise<Activity | undefined> {
  if (!details) return undefined
@@ -271,13 +258,25 @@ export async function transactionToActivity(
  }
 }

-export function useSignatureToActivity(signature: SignatureDetails | undefined) {
-  const { formatNumber } = useFormatter()
+export function getTransactionToActivityQueryOptions(
+  transaction: TransactionDetails | undefined,
+  chainId: SupportedInterfaceChainId,
+  formatNumber: FormatNumberFunctionType
+) {
+  return queryOptions({
+    queryKey: ['transactionToActivity', transaction, chainId],
+    queryFn: async () => transactionToActivity(transaction, chainId, formatNumber),
+  })
+}

-  const { data: activity } = useQuery(`signatureToActivity-${signature?.orderHash}`, async () => {
-    return await signatureToActivity(signature, formatNumber)
+export function getSignatureToActivityQueryOptions(
+  signature: SignatureDetails | undefined,
+  formatNumber: FormatNumberFunctionType
+) {
+  return queryOptions({
+    queryKey: ['signatureToActivity', signature],
+    queryFn: async () => signatureToActivity(signature, formatNumber),
  })
-  return activity
 }

 function convertToSecTimestamp(timestamp: number) {
@@ -342,24 +341,22 @@ export function useLocalActivities(account: string): ActivityMap {
  const allSignatures = useAllSignatures()
  const { formatNumber } = useFormatter()

-  const activityParser = useCallback(async () => {
-    const transactions = Object.values(allTransactions)
-      .filter(([transaction]) => transaction.from === account)
-      .map(([transaction, chainId]) => transactionToActivity(transaction, chainId, formatNumber))
-    const signatures = Object.values(allSignatures)
-      .filter((signature) => signature.offerer === account)
-      .map((signature) => signatureToActivity(signature, formatNumber))
-
-    return (await Promise.all([...transactions, ...signatures])).reduce((acc, activity) => {
-      if (activity) acc[activity.hash] = activity
-      return acc
-    }, {} as ActivityMap)
-  }, [account, allSignatures, allTransactions, formatNumber])
-
-  const { data } = useQuery(
-    `localActivities-${account}-${allSignatures.length}-${allTransactions.length}`,
-    activityParser
-  )
+  const { data } = useQuery({
+    queryKey: ['localActivities', account],
+    queryFn: async () => {
+      const transactions = Object.values(allTransactions)
+        .filter(([transaction]) => transaction.from === account)
+        .map(([transaction, chainId]) => transactionToActivity(transaction, chainId, formatNumber))
+      const signatures = Object.values(allSignatures)
+        .filter((signature) => signature.offerer === account)
+        .map((signature) => signatureToActivity(signature, formatNumber))
+
+      return (await Promise.all([...transactions, ...signatures])).reduce((acc, activity) => {
+        if (activity) acc[activity.hash] = activity
+        return acc
+      }, {} as ActivityMap)
+    },
+  })

  return data ?? {}
 }
--- a/apps/web/src/components/AccountDrawer/MiniPortfolio/Activity/parseRemote.tsx
+++ b/apps/web/src/components/AccountDrawer/MiniPortfolio/Activity/parseRemote.tsx
 import { ChainId, Currency, NONFUNGIBLE_POSITION_MANAGER_ADDRESSES, TradeType, UNI_ADDRESSES } from '@uniswap/sdk-core'
 import UniswapXBolt from 'assets/svg/bolt.svg'
 import moonpayLogoSrc from 'assets/svg/moonpay.svg'
-import { asSupportedChain } from 'constants/chains'
 import { NATIVE_CHAIN_ID, nativeOnChain } from 'constants/tokens'
 import { BigNumber } from 'ethers/lib/ethers'
 import { formatUnits, parseUnits } from 'ethers/lib/utils'
@@ -272,7 +271,7 @@ export function offchainOrderDetailsFromGraphQLTransactionActivity(
  changes: TransactionChanges,
  formatNumberOrString: FormatNumberOrStringFunctionType
 ): UniswapXOrderDetails | undefined {
-  const chainId = asSupportedChain(supportedChainIdFromGQLChain(activity.chain))
+  const chainId = supportedChainIdFromGQLChain(activity.chain)
  if (!activity || !activity.details || !chainId) return undefined
  if (changes.TokenTransfer.length < 2) return undefined


--- a/apps/web/src/components/AccountDrawer/MiniPortfolio/Pools/hooks.ts
+++ b/apps/web/src/components/AccountDrawer/MiniPortfolio/Pools/hooks.ts
@@ -8,7 +8,7 @@ import type { AddressMap } from '@uniswap/smart-order-router'
 import NFTPositionManagerJSON from '@uniswap/v3-periphery/artifacts/contracts/NonfungiblePositionManager.sol/NonfungiblePositionManager.json'
 import MulticallJSON from '@uniswap/v3-periphery/artifacts/contracts/lens/UniswapInterfaceMulticall.sol/UniswapInterfaceMulticall.json'
 import { useWeb3React } from '@web3-react/core'
-import { isSupportedChain } from 'constants/chains'
+import { useIsSupportedChainIdCallback } from 'constants/chains'
 import { RPC_PROVIDERS } from 'constants/providers'
 import { BaseContract } from 'ethers/lib/ethers'
 import { toContractInput } from 'graphql/data/util'
@@ -32,6 +32,7 @@ export function useContractMultichain<T extends BaseContract>(
  chainIds?: ChainId[]
 ): ContractMap<T> {
  const { chainId: walletChainId, provider: walletProvider } = useWeb3React()
+  const isSupportedChain = useIsSupportedChainIdCallback()

  return useMemo(() => {
    const relevantChains =
@@ -52,7 +53,7 @@ export function useContractMultichain<T extends BaseContract>(
      }
      return acc
    }, {})
-  }, [ABI, addressMap, chainIds, walletChainId, walletProvider])
+  }, [ABI, addressMap, chainIds, isSupportedChain, walletChainId, walletProvider])
 }

 export function useV3ManagerContracts(chainIds: ChainId[]): ContractMap<NonfungiblePositionManager> {

--- a/apps/web/src/components/AccountDrawer/MiniPortfolio/Pools/useMultiChainPositions.tsx
+++ b/apps/web/src/components/AccountDrawer/MiniPortfolio/Pools/useMultiChainPositions.tsx
@@ -10,6 +10,7 @@ import { UniswapV3PoolInterface } from 'uniswap/src/abis/types/v3/UniswapV3Pool'
 import { DEFAULT_ERC20_DECIMALS } from 'utilities/src/tokens/constants'
 import { currencyKey } from 'utils/currencyKey'

+import { L1_CHAIN_IDS, L2_CHAIN_IDS, TESTNET_CHAIN_IDS } from 'constants/chains'
 import { PositionInfo, useCachedPositions, useGetCachedTokens, usePoolAddressCache } from './cache'
 import { Call, DEFAULT_GAS_LIMIT } from './getTokensAsync'
 import { useInterfaceMulticallContracts, usePoolPriceMap, useV3ManagerContracts } from './hooks'
@@ -39,17 +40,9 @@ type FeeAmounts = [BigNumber, BigNumber]

 const MAX_UINT128 = BigNumber.from(2).pow(128).sub(1)

-const DEFAULT_CHAINS = [
-  ChainId.MAINNET,
-  ChainId.ARBITRUM_ONE,
-  ChainId.OPTIMISM,
-  ChainId.POLYGON,
-  ChainId.CELO,
-  ChainId.BNB,
-  ChainId.AVALANCHE,
-  ChainId.BASE,
-  ChainId.BLAST,
-]
+const DEFAULT_CHAINS = [...L1_CHAIN_IDS, ...L2_CHAIN_IDS].filter((chain: number) => {
+  return !TESTNET_CHAIN_IDS.includes(chain)
+})

 type UseMultiChainPositionsData = { positions?: PositionInfo[]; loading: boolean }


--- a/apps/web/src/components/AccountDrawer/Status.tsx
+++ b/apps/web/src/components/AccountDrawer/Status.tsx
@@ -10,7 +10,7 @@ import { useRef, useState } from 'react'
 import { MoreHorizontal } from 'react-feather'
 import styled from 'styled-components'
 import { ClickableStyle, CopyHelper, EllipsisStyle, ThemedText } from 'theme/components'
-import { Unitag } from 'ui/src/components/icons/Unitag'
+import { Unitag } from 'ui/src/components/icons'
 import { shortenAddress } from 'utilities/src/addresses'

 const Container = styled.div`

--- a/apps/web/src/components/AccountDrawer/index.tsx
+++ b/apps/web/src/components/AccountDrawer/index.tsx
@@ -103,6 +103,7 @@ const AccountDrawerWrapper = styled.div<{ open: boolean }>`
    height: calc(100% - ${DRAWER_TOP_MARGIN_MOBILE_WEB});

    width: 100%;
+    max-width: 100%;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    box-shadow: unset;

--- a/apps/web/src/components/Banner/Outage/OutageBanner.tsx
+++ b/apps/web/src/components/Banner/Outage/OutageBanner.tsx
 import { ChainId } from '@uniswap/sdk-core'
 import { Container, PopupContainer, StyledXButton, TextContainer } from 'components/Banner/shared/styled'
+import { chainIdToBackendChain } from 'constants/chains'
 import { ChainOutageData } from 'featureFlags/flags/outageBanner'
-import { chainIdToBackendName } from 'graphql/data/util'
 import { Trans } from 'i18n'
 import { useState } from 'react'
 import { Globe } from 'react-feather'
@@ -43,7 +43,7 @@ export function OutageBanner({ chainId, version }: ChainOutageData) {
  const [hidden, setHidden] = useState(false)
  const theme = useTheme()
  const versionName = version ? version.toString().toLowerCase() + ' data' : 'Data'
-  const chainName = capitalize(chainIdToBackendName(chainId).toLowerCase())
+  const chainName = capitalize(chainIdToBackendChain({ chainId, withFallback: true }).toLowerCase())
  const versionDescription = version ? ' ' + version.toString().toLowerCase() : ''

  return (

--- a/apps/web/src/components/Banner/shared/Banners.tsx
+++ b/apps/web/src/components/Banner/shared/Banners.tsx
 import { InterfacePageName } from '@uniswap/analytics-events'
 import { ChainId } from '@uniswap/sdk-core'
 import { OutageBanner, getOutageBannerSessionStorageKey } from 'components/Banner/Outage/OutageBanner'
+import { getChainFromChainUrlParam, isChainUrlParam } from 'constants/chains'
 import { manualChainOutageAtom, useOutageBanners } from 'featureFlags/flags/outageBanner'
-import { getValidUrlChainId } from 'graphql/data/util'
 import { useAtomValue } from 'jotai/utils'
 import { useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
@@ -17,11 +17,8 @@ export function Banners() {

  // Calculate the chainId for the current page's contextual chain (e.g. /tokens/ethereum or /tokens/arbitrum), if it exists.
  const pageChainId = useMemo(() => {
-    const chainName = pathname.split('/').find((maybeChainName) => {
-      const validatedChainId = getValidUrlChainId(maybeChainName)
-      return validatedChainId !== undefined
-    })
-    return chainName ? getValidUrlChainId(chainName) : ChainId.MAINNET
+    const chainUrlParam = pathname.split('/').find(isChainUrlParam)
+    return chainUrlParam ? getChainFromChainUrlParam(chainUrlParam)?.id : ChainId.MAINNET
  }, [pathname])
  const currentPageHasManualOutage = manualOutage?.chainId === pageChainId

@@ -29,7 +26,7 @@ export function Banners() {
    return (
      currentPage &&
      pageChainId &&
-      (outageBanners[pageChainId as ChainId] || currentPageHasManualOutage) &&
+      (outageBanners[pageChainId] || currentPageHasManualOutage) &&
      !sessionStorage.getItem(getOutageBannerSessionStorageKey(pageChainId)) &&
      [
        InterfacePageName.EXPLORE_PAGE,

--- a/apps/web/src/components/ConfirmSwapModal/index.tsx
+++ b/apps/web/src/components/ConfirmSwapModal/index.tsx
@@ -55,6 +55,7 @@ export function ConfirmSwapModal({
  fiatValueOutput,
  swapResult,
  swapError,
+  priceImpact,
  clearSwapState,
  onAcceptChanges,
  onConfirm,
@@ -70,6 +71,7 @@ export function ConfirmSwapModal({
  fiatValueOutput: { data?: number; isLoading: boolean }
  swapResult?: SwapResult
  swapError?: Error
+  priceImpact?: Percent
  clearSwapState: () => void
  onAcceptChanges?: () => void
  onConfirm: () => void
@@ -219,6 +221,7 @@ export function ConfirmSwapModal({
                  showAcceptChanges={Boolean(showAcceptChanges)}
                  onAcceptChanges={onAcceptChanges}
                  swapErrorMessage={swapFailed ? swapError?.message : undefined}
+                  priceImpact={priceImpact}
                />
              </AutoColumn>
            </FadePresence>

--- a/apps/web/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx
+++ b/apps/web/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx
@@ -8,7 +8,7 @@ import { LoadingOpacityContainer } from 'components/Loader/styled'
 import CurrencyLogo from 'components/Logo/CurrencyLogo'
 import { StyledNumericalInput } from 'components/NumericalInput'
 import Tooltip from 'components/Tooltip'
-import { isSupportedChain } from 'constants/chains'
+import { useIsSupportedChainId } from 'constants/chains'
 import { Trans } from 'i18n'
 import ms from 'ms'
 import { darken } from 'polished'
@@ -269,6 +269,7 @@ const SwapCurrencyInputPanel = forwardRef<HTMLInputElement, SwapCurrencyInputPan
  ) => {
    const [modalOpen, setModalOpen] = useState(false)
    const { account, chainId } = useWeb3React()
+    const chainAllowed = useIsSupportedChainId(chainId)
    const selectedCurrencyBalance = useCurrencyBalance(account ?? undefined, currency ?? undefined)
    const theme = useTheme()
    const { formatCurrencyAmount } = useFormatter()
@@ -286,8 +287,6 @@ const SwapCurrencyInputPanel = forwardRef<HTMLInputElement, SwapCurrencyInputPan
      }
    }, [tooltipVisible, numericalInputSettings])

-    const chainAllowed = isSupportedChain(chainId)
-
    // reset tooltip state when currency changes
    useEffect(() => setTooltipVisible(false), [currency])


--- a/apps/web/src/components/CurrencyInputPanel/index.tsx
+++ b/apps/web/src/components/CurrencyInputPanel/index.tsx
@@ -4,7 +4,7 @@ import { Pair } from '@uniswap/v2-sdk'
 import { useWeb3React } from '@web3-react/core'
 import { TraceEvent } from 'analytics'
 import { LoadingOpacityContainer, loadingOpacityMixin } from 'components/Loader/styled'
-import { isSupportedChain } from 'constants/chains'
+import { useIsSupportedChainId } from 'constants/chains'
 import { Trans } from 'i18n'
 import { darken } from 'polished'
 import { ReactNode, useCallback, useState } from 'react'
@@ -215,6 +215,7 @@ export default function CurrencyInputPanel({
 }: CurrencyInputPanelProps) {
  const [modalOpen, setModalOpen] = useState(false)
  const { account, chainId } = useWeb3React()
+  const chainAllowed = useIsSupportedChainId(chainId)
  const selectedCurrencyBalance = useCurrencyBalance(account ?? undefined, currency ?? undefined)
  const theme = useTheme()
  const { formatCurrencyAmount } = useFormatter()
@@ -223,8 +224,6 @@ export default function CurrencyInputPanel({
    setModalOpen(false)
  }, [setModalOpen])

-  const chainAllowed = isSupportedChain(chainId)
-
  return (
    <InputPanel id={id} hideInput={hideInput} {...rest}>
      {!locked && (

--- a/apps/web/src/components/FeatureFlagModal/FeatureFlagModal.tsx
+++ b/apps/web/src/components/FeatureFlagModal/FeatureFlagModal.tsx
@@ -224,12 +224,10 @@ export default function FeatureFlagModal() {
        </CloseButton>
      </Header>
      <FlagsColumn>
-        <FeatureFlagOption flag={FeatureFlags.SendEnabled} label="Send on swap component" />
        <FeatureFlagOption
          flag={FeatureFlags.Eip6936Enabled}
          label="Enable EIP-6963: Multi Injected Provider Discovery"
        />
-        <FeatureFlagOption flag={FeatureFlags.LimitsEnabled} label="Enable Limits" />
        <FeatureFlagOption flag={FeatureFlags.LimitsFees} label="Enable Limits fees" />
        <FeatureFlagOption flag={FeatureFlags.CurrencyConversion} label="Enable currency conversion" />
        <FeatureFlagOption flag={FeatureFlags.UniconsV2} label="Unicon V2" />
@@ -238,6 +236,7 @@ export default function FeatureFlagModal() {
        <FeatureFlagOption flag={FeatureFlags.V2Explore} label="Enable V2 Explore Data" />
        <FeatureFlagOption flag={FeatureFlags.Realtime} label="Realtime activity updates" />
        <FeatureFlagOption flag={FeatureFlags.MultipleRoutingOptions} label="Enable Multiple Routing Options" />
+        <FeatureFlagOption flag={FeatureFlags.MultichainUX} label="Enable Multichain Swap/Send UX" />
        <FeatureFlagGroup name="Quick routes">
          <FeatureFlagOption flag={FeatureFlags.QuickRouteMainnet} label="Enable quick routes for Mainnet" />
          <DynamicConfigDropdown

--- a/apps/web/src/components/FeeSelector/shared.tsx
+++ b/apps/web/src/components/FeeSelector/shared.tsx
@@ -10,19 +10,7 @@ export const FEE_AMOUNT_DETAIL: Record<
  [FeeAmount.LOWEST]: {
    label: '0.01',
    description: <Trans>Best for very stable pairs.</Trans>,
-    supportedChains: [
-      ChainId.ARBITRUM_ONE,
-      ChainId.BNB,
-      ChainId.CELO,
-      ChainId.CELO_ALFAJORES,
-      ChainId.MAINNET,
-      ChainId.OPTIMISM,
-      ChainId.POLYGON,
-      ChainId.POLYGON_MUMBAI,
-      ChainId.AVALANCHE,
-      ChainId.BASE,
-      ChainId.BLAST,
-    ],
+    supportedChains: SUPPORTED_CHAINS,
  },
  [FeeAmount.LOW]: {
    label: '0.05',

--- a/apps/web/src/components/FiatOnrampModal/index.tsx
+++ b/apps/web/src/components/FiatOnrampModal/index.tsx
@@ -74,7 +74,7 @@ export default function FiatOnrampModal() {
  const closeModal = useCloseModal()
  const fiatOnrampModalOpen = useModalIsOpen(ApplicationModal.FIAT_ONRAMP)

-  const { network, tokenAddress } = parsePathParts(location.pathname)
+  const { chain, tokenAddress } = parsePathParts(location.pathname)

  const [signedIframeUrl, setSignedIframeUrl] = useState<string | null>(null)
  const [error, setError] = useState<string | null>(null)
@@ -100,7 +100,7 @@ export default function FiatOnrampModal() {
        body: JSON.stringify({
          theme: isDarkMode ? 'dark' : 'light',
          colorCode: theme.accent1,
-          defaultCurrencyCode: getDefaultCurrencyCode(tokenAddress, network),
+          defaultCurrencyCode: getDefaultCurrencyCode(tokenAddress, chain?.backendChain.chain),
          redirectUrl: swapUrl,
          walletAddresses: JSON.stringify(
            MOONPAY_SUPPORTED_CURRENCY_CODES.reduce(
@@ -121,7 +121,7 @@ export default function FiatOnrampModal() {
    } finally {
      setLoading(false)
    }
-  }, [account, isDarkMode, network, swapUrl, theme.accent1, tokenAddress])
+  }, [account, chain, isDarkMode, swapUrl, theme.accent1, tokenAddress])

  useEffect(() => {
    fetchSignedIframeUrl()

--- a/apps/web/src/components/FiatOnrampModal/utils.test.ts
+++ b/apps/web/src/components/FiatOnrampModal/utils.test.ts
--- a/apps/web/src/components/FiatOnrampModal/utils.ts
+++ b/apps/web/src/components/FiatOnrampModal/utils.ts
--- a/apps/web/src/components/Logo/ChainLogo.tsx
+++ b/apps/web/src/components/Logo/ChainLogo.tsx
--- a/apps/web/src/components/NavBar/ChainSelector.tsx
+++ b/apps/web/src/components/NavBar/ChainSelector.tsx
--- a/apps/web/src/components/NavBar/ChainSelectorRow.tsx
+++ b/apps/web/src/components/NavBar/ChainSelectorRow.tsx
--- a/apps/web/src/components/NavBar/SearchBarDropdown.tsx
+++ b/apps/web/src/components/NavBar/SearchBarDropdown.tsx
--- a/apps/web/src/components/NavBar/index.tsx
+++ b/apps/web/src/components/NavBar/index.tsx
--- a/apps/web/src/components/NetworkAlert/NetworkAlert.tsx
+++ b/apps/web/src/components/NetworkAlert/NetworkAlert.tsx
--- a/apps/web/src/components/Polling/ChainConnectivityWarning.tsx
+++ b/apps/web/src/components/Polling/ChainConnectivityWarning.tsx
--- a/apps/web/src/components/Polling/index.tsx
+++ b/apps/web/src/components/Polling/index.tsx
--- a/apps/web/src/components/Pools/PoolDetails/PoolDetailsHeader.tsx
+++ b/apps/web/src/components/Pools/PoolDetails/PoolDetailsHeader.tsx
--- a/apps/web/src/components/Pools/PoolDetails/PoolDetailsLink.tsx
+++ b/apps/web/src/components/Pools/PoolDetails/PoolDetailsLink.tsx
--- a/apps/web/src/components/Pools/PoolDetails/PoolDetailsStats.tsx
+++ b/apps/web/src/components/Pools/PoolDetails/PoolDetailsStats.tsx
--- a/apps/web/src/components/Pools/PoolDetails/PoolDetailsStatsButtons.tsx
+++ b/apps/web/src/components/Pools/PoolDetails/PoolDetailsStatsButtons.tsx
--- a/apps/web/src/components/Pools/PoolDetails/PoolDetailsTable.tsx
+++ b/apps/web/src/components/Pools/PoolDetails/PoolDetailsTable.tsx
--- a/apps/web/src/components/Pools/PoolDetails/PoolDetailsTransactionsTable.tsx
+++ b/apps/web/src/components/Pools/PoolDetails/PoolDetailsTransactionsTable.tsx
--- a/apps/web/src/components/Pools/PoolDetails/__snapshots__/PoolDetailsStatsButtons.test.tsx.snap
+++ b/apps/web/src/components/Pools/PoolDetails/__snapshots__/PoolDetailsStatsButtons.test.tsx.snap
--- a/apps/web/src/components/Pools/PoolTable/PoolTable.tsx
+++ b/apps/web/src/components/Pools/PoolTable/PoolTable.tsx
--- a/apps/web/src/components/Popups/PopupContent.tsx
+++ b/apps/web/src/components/Popups/PopupContent.tsx
--- a/apps/web/src/components/Popups/PopupItem.tsx
+++ b/apps/web/src/components/Popups/PopupItem.tsx
--- a/apps/web/src/components/SearchModal/useCurrencySearchResults.ts
+++ b/apps/web/src/components/SearchModal/useCurrencySearchResults.ts
--- a/apps/web/src/components/Settings/MultipleRoutingOptions.tsx
+++ b/apps/web/src/components/Settings/MultipleRoutingOptions.tsx
--- a/apps/web/src/components/Settings/index.test.tsx
+++ b/apps/web/src/components/Settings/index.test.tsx
--- a/apps/web/src/components/Settings/index.tsx
+++ b/apps/web/src/components/Settings/index.tsx
--- a/apps/web/src/components/Tokens/TokenDetails/InvalidTokenDetails.tsx
+++ b/apps/web/src/components/Tokens/TokenDetails/InvalidTokenDetails.tsx
--- a/apps/web/src/components/Tokens/TokenDetails/MobileBalanceSummaryFooter.tsx
+++ b/apps/web/src/components/Tokens/TokenDetails/MobileBalanceSummaryFooter.tsx
--- a/apps/web/src/components/Tokens/TokenDetails/Skeleton.tsx
+++ b/apps/web/src/components/Tokens/TokenDetails/Skeleton.tsx
--- a/apps/web/src/components/Tokens/TokenDetails/StatsSection.tsx
+++ b/apps/web/src/components/Tokens/TokenDetails/StatsSection.tsx
--- a/apps/web/src/components/Tokens/TokenDetails/__snapshots__/Skeleton.test.tsx.snap
+++ b/apps/web/src/components/Tokens/TokenDetails/__snapshots__/Skeleton.test.tsx.snap
--- a/apps/web/src/components/Tokens/TokenDetails/tables/TokenDetailsPoolsTable.tsx
+++ b/apps/web/src/components/Tokens/TokenDetails/tables/TokenDetailsPoolsTable.tsx
--- a/apps/web/src/components/Tokens/TokenDetails/tables/TransactionsTable.tsx
+++ b/apps/web/src/components/Tokens/TokenDetails/tables/TransactionsTable.tsx
--- a/apps/web/src/components/Tokens/TokenTable/NetworkFilter.tsx
+++ b/apps/web/src/components/Tokens/TokenTable/NetworkFilter.tsx
--- a/apps/web/src/components/Tokens/TokenTable/index.tsx
+++ b/apps/web/src/components/Tokens/TokenTable/index.tsx
--- a/apps/web/src/components/TransactionConfirmationModal/index.tsx
+++ b/apps/web/src/components/TransactionConfirmationModal/index.tsx
--- a/apps/web/src/components/WalletModal/index.tsx
+++ b/apps/web/src/components/WalletModal/index.tsx
--- a/apps/web/src/components/Web3Provider/index.tsx
+++ b/apps/web/src/components/Web3Provider/index.tsx
--- a/apps/web/src/components/Web3Status/index.tsx
+++ b/apps/web/src/components/Web3Status/index.tsx
--- a/apps/web/src/components/addLiquidity/OutOfSyncWarning.tsx
+++ b/apps/web/src/components/addLiquidity/OutOfSyncWarning.tsx
--- a/apps/web/src/components/swap/GasBreakdownTooltip.tsx
+++ b/apps/web/src/components/swap/GasBreakdownTooltip.tsx
--- a/apps/web/src/components/swap/SwapDetails.test.tsx
+++ b/apps/web/src/components/swap/SwapDetails.test.tsx
--- a/apps/web/src/components/swap/SwapDetails.tsx
+++ b/apps/web/src/components/swap/SwapDetails.tsx
--- a/apps/web/src/components/swap/SwapDetailsDropdown.tsx
+++ b/apps/web/src/components/swap/SwapDetailsDropdown.tsx
--- a/apps/web/src/components/swap/SwapHeader.test.tsx
+++ b/apps/web/src/components/swap/SwapHeader.test.tsx
--- a/apps/web/src/components/swap/SwapHeader.tsx
+++ b/apps/web/src/components/swap/SwapHeader.tsx
--- a/apps/web/src/components/swap/SwapLineItem.tsx
+++ b/apps/web/src/components/swap/SwapLineItem.tsx
--- a/apps/web/src/components/swap/UnsupportedCurrencyFooter.tsx
+++ b/apps/web/src/components/swap/UnsupportedCurrencyFooter.tsx
--- a/apps/web/src/components/swap/__snapshots__/SwapDetails.test.tsx.snap
+++ b/apps/web/src/components/swap/__snapshots__/SwapDetails.test.tsx.snap
--- a/apps/web/src/components/swap/__snapshots__/SwapDetailsDropdown.test.tsx.snap
+++ b/apps/web/src/components/swap/__snapshots__/SwapDetailsDropdown.test.tsx.snap
--- a/apps/web/src/components/swap/__snapshots__/SwapHeader.test.tsx.snap
+++ b/apps/web/src/components/swap/__snapshots__/SwapHeader.test.tsx.snap
--- a/apps/web/src/components/swap/__snapshots__/SwapLineItem.test.tsx.snap
+++ b/apps/web/src/components/swap/__snapshots__/SwapLineItem.test.tsx.snap
--- a/apps/web/src/components/swap/__snapshots__/UnsupportedCurrencyFooter.test.tsx.snap
+++ b/apps/web/src/components/swap/__snapshots__/UnsupportedCurrencyFooter.test.tsx.snap
--- a/apps/web/src/components/vote/DelegateModal.tsx
+++ b/apps/web/src/components/vote/DelegateModal.tsx
--- a/apps/web/src/connection/WalletConnectV2.ts
+++ b/apps/web/src/connection/WalletConnectV2.ts
--- a/apps/web/src/connection/index.ts
+++ b/apps/web/src/connection/index.ts
--- a/apps/web/src/constants/chainInfo.ts
+++ b/apps/web/src/constants/chainInfo.ts
--- a/apps/web/src/constants/chains.test.ts
+++ b/apps/web/src/constants/chains.test.ts
--- a/apps/web/src/constants/chains.ts
+++ b/apps/web/src/constants/chains.ts
--- a/apps/web/src/constants/lists.ts
+++ b/apps/web/src/constants/lists.ts
--- a/apps/web/src/constants/networks.ts
+++ b/apps/web/src/constants/networks.ts
--- a/apps/web/src/constants/providers.ts
+++ b/apps/web/src/constants/providers.ts
--- a/apps/web/src/constants/query.ts
+++ b/apps/web/src/constants/query.ts
--- a/apps/web/src/constants/routing.ts
+++ b/apps/web/src/constants/routing.ts
--- a/apps/web/src/constants/tokens.ts
+++ b/apps/web/src/constants/tokens.ts
--- a/apps/web/src/featureFlags/flags/outageBanner.ts
+++ b/apps/web/src/featureFlags/flags/outageBanner.ts
--- a/apps/web/src/graphql/data/SearchTokens.ts
+++ b/apps/web/src/graphql/data/SearchTokens.ts
--- a/apps/web/src/graphql/data/TrendingTokens.ts
+++ b/apps/web/src/graphql/data/TrendingTokens.ts
--- a/apps/web/src/graphql/data/nft/NftUniversalRouterAddress.ts
+++ b/apps/web/src/graphql/data/nft/NftUniversalRouterAddress.ts
--- a/apps/web/src/graphql/data/pools/usePoolData.ts
+++ b/apps/web/src/graphql/data/pools/usePoolData.ts
--- a/apps/web/src/graphql/data/pools/usePoolTransactions.ts
+++ b/apps/web/src/graphql/data/pools/usePoolTransactions.ts
--- a/apps/web/src/graphql/data/pools/usePoolsFromTokenAddress.ts
+++ b/apps/web/src/graphql/data/pools/usePoolsFromTokenAddress.ts
--- a/apps/web/src/graphql/data/pools/useTopPools.ts
+++ b/apps/web/src/graphql/data/pools/useTopPools.ts
--- a/apps/web/src/graphql/data/useTokenTransactions.ts
+++ b/apps/web/src/graphql/data/useTokenTransactions.ts
--- a/apps/web/src/graphql/data/util.test.tsx
+++ b/apps/web/src/graphql/data/util.test.tsx
--- a/apps/web/src/graphql/data/util.tsx
+++ b/apps/web/src/graphql/data/util.tsx
--- a/apps/web/src/graphql/thegraph/apollo.ts
+++ b/apps/web/src/graphql/thegraph/apollo.ts
--- a/apps/web/src/hooks/Tokens.ts
+++ b/apps/web/src/hooks/Tokens.ts
--- a/apps/web/src/hooks/useAutoRouterSupported.tsx
+++ b/apps/web/src/hooks/useAutoRouterSupported.tsx
--- a/apps/web/src/hooks/useContract.ts
+++ b/apps/web/src/hooks/useContract.ts
--- a/apps/web/src/hooks/useENSContentHash.ts
+++ b/apps/web/src/hooks/useENSContentHash.ts
--- a/apps/web/src/hooks/useFilterPossiblyMaliciousPositions.ts
+++ b/apps/web/src/hooks/useFilterPossiblyMaliciousPositions.ts
--- a/apps/web/src/hooks/useGlobalChainSwitch.ts
+++ b/apps/web/src/hooks/useGlobalChainSwitch.ts
--- a/apps/web/src/hooks/useHttpLocations.ts
+++ b/apps/web/src/hooks/useHttpLocations.ts
--- a/apps/web/src/hooks/usePermit2Allowance.ts
+++ b/apps/web/src/hooks/usePermit2Allowance.ts
--- a/apps/web/src/hooks/usePools.ts
+++ b/apps/web/src/hooks/usePools.ts
--- a/apps/web/src/hooks/useStablecoinPrice.ts
+++ b/apps/web/src/hooks/useStablecoinPrice.ts
--- a/apps/web/src/hooks/useSwitchChain.ts
+++ b/apps/web/src/hooks/useSwitchChain.ts
--- a/apps/web/src/hooks/useSyncChainQuery.ts
+++ b/apps/web/src/hooks/useSyncChainQuery.ts
--- a/apps/web/src/hooks/useUSDPrice.ts
+++ b/apps/web/src/hooks/useUSDPrice.ts
--- a/apps/web/src/hooks/useUSDTokenUpdater.ts
+++ b/apps/web/src/hooks/useUSDTokenUpdater.ts
--- a/apps/web/src/index.tsx
+++ b/apps/web/src/index.tsx
--- a/apps/web/src/lib/hooks/routing/clientSideSmartOrderRouter.ts
+++ b/apps/web/src/lib/hooks/routing/clientSideSmartOrderRouter.ts
--- a/apps/web/src/lib/hooks/useCurrencyLogoURIs.ts
+++ b/apps/web/src/lib/hooks/useCurrencyLogoURIs.ts
--- a/apps/web/src/lib/state/multicall.tsx
+++ b/apps/web/src/lib/state/multicall.tsx
--- a/apps/web/src/nft/components/bag/BagFooter.test.tsx
+++ b/apps/web/src/nft/components/bag/BagFooter.test.tsx
--- a/apps/web/src/nft/components/bag/BagFooter.tsx
+++ b/apps/web/src/nft/components/bag/BagFooter.tsx
--- a/apps/web/src/nft/components/profile/view/ProfilePage.tsx
+++ b/apps/web/src/nft/components/profile/view/ProfilePage.tsx
--- a/apps/web/src/nft/pages/asset/Asset.tsx
+++ b/apps/web/src/nft/pages/asset/Asset.tsx
--- a/apps/web/src/nft/pages/collection/index.tsx
+++ b/apps/web/src/nft/pages/collection/index.tsx
--- a/apps/web/src/nft/queries/openSea/OSCollectionsFetcher.ts
+++ b/apps/web/src/nft/queries/openSea/OSCollectionsFetcher.ts
--- a/apps/web/src/nft/queries/openSea/index.ts
+++ b/apps/web/src/nft/queries/openSea/index.ts
--- a/apps/web/src/pages/AddLiquidity/index.tsx
+++ b/apps/web/src/pages/AddLiquidity/index.tsx
--- a/apps/web/src/pages/AddLiquidityV2/index.tsx
+++ b/apps/web/src/pages/AddLiquidityV2/index.tsx
--- a/apps/web/src/pages/App.tsx
+++ b/apps/web/src/pages/App.tsx
--- a/apps/web/src/pages/Explore/charts/ExploreChartsSection.tsx
+++ b/apps/web/src/pages/Explore/charts/ExploreChartsSection.tsx
--- a/apps/web/src/pages/Explore/index.tsx
+++ b/apps/web/src/pages/Explore/index.tsx
--- a/apps/web/src/pages/Explore/tables/RecentTransactions.tsx
+++ b/apps/web/src/pages/Explore/tables/RecentTransactions.tsx
--- a/apps/web/src/pages/Landing/components/animations.tsx
+++ b/apps/web/src/pages/Landing/components/animations.tsx
--- a/apps/web/src/pages/Landing/components/cards/WebappCard.tsx
+++ b/apps/web/src/pages/Landing/components/cards/WebappCard.tsx
--- a/apps/web/src/pages/MigrateV2/MigrateV2Pair.tsx
+++ b/apps/web/src/pages/MigrateV2/MigrateV2Pair.tsx
--- a/apps/web/src/pages/Pool/CTACards.test.tsx
+++ b/apps/web/src/pages/Pool/CTACards.test.tsx
--- a/apps/web/src/pages/Pool/CTACards.tsx
+++ b/apps/web/src/pages/Pool/CTACards.tsx
--- a/apps/web/src/pages/Pool/PositionPage.tsx
+++ b/apps/web/src/pages/Pool/PositionPage.tsx
--- a/apps/web/src/pages/Pool/index.test.tsx
+++ b/apps/web/src/pages/Pool/index.test.tsx
--- a/apps/web/src/pages/Pool/index.tsx
+++ b/apps/web/src/pages/Pool/index.tsx
--- a/apps/web/src/pages/PoolDetails/index.tsx
+++ b/apps/web/src/pages/PoolDetails/index.tsx
--- a/apps/web/src/pages/RemoveLiquidity/V3.tsx
+++ b/apps/web/src/pages/RemoveLiquidity/V3.tsx
--- a/apps/web/src/pages/RemoveLiquidity/index.tsx
+++ b/apps/web/src/pages/RemoveLiquidity/index.tsx
--- a/apps/web/src/pages/Swap/Limit/LimitForm.tsx
+++ b/apps/web/src/pages/Swap/Limit/LimitForm.tsx
--- a/apps/web/src/pages/Swap/Send/SendCurrencyInputForm.tsx
+++ b/apps/web/src/pages/Swap/Send/SendCurrencyInputForm.tsx
--- a/apps/web/src/pages/Swap/Send/SendForm.tsx
+++ b/apps/web/src/pages/Swap/Send/SendForm.tsx
--- a/apps/web/src/pages/Swap/Send/SendRecipientForm.tsx
+++ b/apps/web/src/pages/Swap/Send/SendRecipientForm.tsx
--- a/apps/web/src/pages/Swap/Send/SendReviewModal.tsx
+++ b/apps/web/src/pages/Swap/Send/SendReviewModal.tsx
--- a/apps/web/src/pages/Swap/SwapForm.tsx
+++ b/apps/web/src/pages/Swap/SwapForm.tsx
--- a/apps/web/src/pages/Swap/index.tsx
+++ b/apps/web/src/pages/Swap/index.tsx
--- a/apps/web/src/pages/TokenDetails/index.tsx
+++ b/apps/web/src/pages/TokenDetails/index.tsx
--- a/apps/web/src/pages/getDefaultTokensTitle.ts
+++ b/apps/web/src/pages/getDefaultTokensTitle.ts
--- a/apps/web/src/pages/getExploreTitle.ts
+++ b/apps/web/src/pages/getExploreTitle.ts
--- a/apps/web/src/pages/metatags.ts
+++ b/apps/web/src/pages/metatags.ts
--- a/apps/web/src/rpc/AppJsonRpcProvider.ts
+++ b/apps/web/src/rpc/AppJsonRpcProvider.ts
--- a/apps/web/src/rpc/ConfiguredJsonRpcProvider.ts
+++ b/apps/web/src/rpc/ConfiguredJsonRpcProvider.ts
--- a/apps/web/src/shared-cloud/README.md
+++ b/apps/web/src/shared-cloud/README.md
--- a/apps/web/src/shared-cloud/metatags.ts
+++ b/apps/web/src/shared-cloud/metatags.ts
--- a/apps/web/src/state/activity/polling/transactions.ts
+++ b/apps/web/src/state/activity/polling/transactions.ts
--- a/apps/web/src/state/activity/subscription.ts
+++ b/apps/web/src/state/activity/subscription.ts
--- a/apps/web/src/state/activity/types.ts
+++ b/apps/web/src/state/activity/types.ts
--- a/apps/web/src/state/application/updater.ts
+++ b/apps/web/src/state/application/updater.ts
--- a/apps/web/src/state/limit/hooks.ts
+++ b/apps/web/src/state/limit/hooks.ts
--- a/apps/web/src/state/migrations.ts
+++ b/apps/web/src/state/migrations.ts
--- a/apps/web/src/state/reducer.ts
+++ b/apps/web/src/state/reducer.ts
--- a/apps/web/src/state/routing/gas.ts
+++ b/apps/web/src/state/routing/gas.ts
--- a/apps/web/src/state/routing/useRoutingAPITrade.test.ts
+++ b/apps/web/src/state/routing/useRoutingAPITrade.test.ts
--- a/apps/web/src/state/routing/useRoutingAPITrade.ts
+++ b/apps/web/src/state/routing/useRoutingAPITrade.ts
--- a/apps/web/src/state/signatures/hooks.ts
+++ b/apps/web/src/state/signatures/hooks.ts
--- a/apps/web/src/state/signatures/parseRemote.ts
+++ b/apps/web/src/state/signatures/parseRemote.ts
--- a/apps/web/src/state/signatures/types.ts
+++ b/apps/web/src/state/signatures/types.ts
--- a/apps/web/src/state/swap/hooks.tsx
+++ b/apps/web/src/state/swap/hooks.tsx
--- a/apps/web/src/state/transactions/hooks.tsx
+++ b/apps/web/src/state/transactions/hooks.tsx
--- a/apps/web/src/state/user/hooks.tsx
+++ b/apps/web/src/state/user/hooks.tsx
--- a/apps/web/src/test-utils/render.tsx
+++ b/apps/web/src/test-utils/render.tsx
--- a/apps/web/src/theme/components/text.tsx
+++ b/apps/web/src/theme/components/text.tsx
--- a/apps/web/src/tracing/request.ts
+++ b/apps/web/src/tracing/request.ts
--- a/apps/web/src/utils/chains.tsx
+++ b/apps/web/src/utils/chains.tsx
--- a/apps/web/src/utils/getInitialLogoURL.ts
+++ b/apps/web/src/utils/getInitialLogoURL.ts
--- a/apps/web/src/utils/getSupportedChainIdsFromWalletConnectSession.ts
+++ b/apps/web/src/utils/getSupportedChainIdsFromWalletConnectSession.ts
--- a/apps/web/src/utils/nativeTokens.ts
+++ b/apps/web/src/utils/nativeTokens.ts
--- a/apps/web/src/utils/unwrappedToken.ts
+++ b/apps/web/src/utils/unwrappedToken.ts
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
--- a/dangerfile.ts
+++ b/dangerfile.ts
--- a/i18next-parser.config.js
+++ b/i18next-parser.config.js
--- a/package.json
+++ b/package.json
--- a/packages/eslint-config/crossPlatform.js
+++ b/packages/eslint-config/crossPlatform.js
--- a/packages/eslint-config/package.json
+++ b/packages/eslint-config/package.json
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
--- a/packages/ui/src/assets/backgrounds/coins-background-dark.png
+++ b/packages/ui/src/assets/backgrounds/coins-background-dark.png
--- a/packages/ui/src/assets/backgrounds/coins-background-light.png
+++ b/packages/ui/src/assets/backgrounds/coins-background-light.png
--- a/packages/ui/src/assets/index.ts
+++ b/packages/ui/src/assets/index.ts
--- a/packages/ui/src/components/icons/BackArrow.tsx
+++ b/packages/ui/src/components/icons/BackArrow.tsx
--- a/packages/ui/src/components/icons/OSDynamicCloudIcon.tsx
+++ b/packages/ui/src/components/icons/OSDynamicCloudIcon.tsx
--- a/packages/ui/src/components/icons/RotatableChevron.tsx
+++ b/packages/ui/src/components/icons/RotatableChevron.tsx
--- a/packages/ui/src/components/icons/index.ts
+++ b/packages/ui/src/components/icons/index.ts
--- a/packages/ui/src/components/icons/allIcons.tsx
+++ b/packages/ui/src/components/icons/allIcons.tsx
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
--- a/packages/ui/src/scripts/componentize-icons.ts
+++ b/packages/ui/src/scripts/componentize-icons.ts
--- a/packages/uniswap/.eslintrc.js
+++ b/packages/uniswap/.eslintrc.js
--- a/packages/uniswap/package.json
+++ b/packages/uniswap/package.json
--- a/packages/uniswap/src/config.ts
+++ b/packages/uniswap/src/config.ts
--- a/packages/uniswap/src/constants/urls.ts
+++ b/packages/uniswap/src/constants/urls.ts
--- a/packages/uniswap/src/data/constants.ts
+++ b/packages/uniswap/src/data/constants.ts
--- a/packages/uniswap/src/data/getVersionHeader.native.ts
+++ b/packages/uniswap/src/data/getVersionHeader.native.ts
--- a/packages/uniswap/src/data/getVersionHeader.ts
+++ b/packages/uniswap/src/data/getVersionHeader.ts
--- a/packages/uniswap/src/features/gating/flags.ts
+++ b/packages/uniswap/src/features/gating/flags.ts
--- a/packages/uniswap/src/features/gating/sdk/statsig.native.ts
+++ b/packages/uniswap/src/features/gating/sdk/statsig.native.ts
--- a/packages/uniswap/src/i18n/locales/source/en-US.json
+++ b/packages/uniswap/src/i18n/locales/source/en-US.json
--- a/packages/uniswap/src/i18n/locales/translations/es-ES.json
+++ b/packages/uniswap/src/i18n/locales/translations/es-ES.json
--- a/packages/uniswap/src/i18n/locales/translations/fr-FR.json
+++ b/packages/uniswap/src/i18n/locales/translations/fr-FR.json
--- a/packages/uniswap/src/i18n/locales/translations/hi-IN.json
+++ b/packages/uniswap/src/i18n/locales/translations/hi-IN.json
--- a/packages/uniswap/src/i18n/locales/translations/id-ID.json
+++ b/packages/uniswap/src/i18n/locales/translations/id-ID.json
--- a/packages/uniswap/src/i18n/locales/translations/ja-JP.json
+++ b/packages/uniswap/src/i18n/locales/translations/ja-JP.json
--- a/packages/uniswap/src/i18n/locales/translations/ms-MY.json
+++ b/packages/uniswap/src/i18n/locales/translations/ms-MY.json
--- a/packages/uniswap/src/i18n/locales/translations/nl-NL.json
+++ b/packages/uniswap/src/i18n/locales/translations/nl-NL.json
--- a/packages/uniswap/src/i18n/locales/translations/pt-PT.json
+++ b/packages/uniswap/src/i18n/locales/translations/pt-PT.json
--- a/packages/uniswap/src/i18n/locales/translations/ru-RU.json
+++ b/packages/uniswap/src/i18n/locales/translations/ru-RU.json
--- a/packages/uniswap/src/i18n/locales/translations/th-TH.json
+++ b/packages/uniswap/src/i18n/locales/translations/th-TH.json
--- a/packages/uniswap/src/i18n/locales/translations/tr-TR.json
+++ b/packages/uniswap/src/i18n/locales/translations/tr-TR.json
--- a/packages/uniswap/src/i18n/locales/translations/uk-UA.json
+++ b/packages/uniswap/src/i18n/locales/translations/uk-UA.json
--- a/packages/uniswap/src/i18n/locales/translations/ur-PK.json
+++ b/packages/uniswap/src/i18n/locales/translations/ur-PK.json
--- a/packages/uniswap/src/i18n/locales/translations/vi-VN.json
+++ b/packages/uniswap/src/i18n/locales/translations/vi-VN.json
--- a/packages/uniswap/src/i18n/locales/translations/zh-CN.json
+++ b/packages/uniswap/src/i18n/locales/translations/zh-CN.json
--- a/packages/uniswap/src/i18n/locales/translations/zh-TW.json
+++ b/packages/uniswap/src/i18n/locales/translations/zh-TW.json
--- a/packages/uniswap/src/utils/cloud-backup/getCloudProviderName.native.ts
+++ b/packages/uniswap/src/utils/cloud-backup/getCloudProviderName.native.ts
--- a/packages/uniswap/src/utils/env/index.native.ts
+++ b/packages/uniswap/src/utils/env/index.native.ts
--- a/packages/uniswap/src/utils/platform/index.native.ts
+++ b/packages/uniswap/src/utils/platform/index.native.ts
--- a/packages/utilities/package.json
+++ b/packages/utilities/package.json
--- a/packages/wallet/package.json
+++ b/packages/wallet/package.json
--- a/packages/wallet/src/components/BaseCard/BaseCard.tsx
+++ b/packages/wallet/src/components/BaseCard/BaseCard.tsx
--- a/packages/wallet/src/components/CurrencyLogo/LogoWithTxStatus.tsx
+++ b/packages/wallet/src/components/CurrencyLogo/LogoWithTxStatus.tsx
--- a/packages/wallet/src/components/RecipientSearch/ViewOnlyRecipientModal.tsx
+++ b/packages/wallet/src/components/RecipientSearch/ViewOnlyRecipientModal.tsx
--- a/packages/wallet/src/components/TokenSelector/SelectTokenButton.tsx
+++ b/packages/wallet/src/components/TokenSelector/SelectTokenButton.tsx
--- a/packages/wallet/src/components/WalletPreviewCard/WalletPreviewCard.tsx
+++ b/packages/wallet/src/components/WalletPreviewCard/WalletPreviewCard.tsx
--- a/packages/wallet/src/components/accounts/AccountDetails.tsx
+++ b/packages/wallet/src/components/accounts/AccountDetails.tsx
--- a/packages/wallet/src/components/accounts/AccountIcon.tsx
+++ b/packages/wallet/src/components/accounts/AccountIcon.tsx
--- a/packages/wallet/src/components/accounts/AddressDisplay.tsx
+++ b/packages/wallet/src/components/accounts/AddressDisplay.tsx
--- a/packages/wallet/src/components/accounts/AnimatedUnitagDisplayName.tsx
+++ b/packages/wallet/src/components/accounts/AnimatedUnitagDisplayName.tsx
--- a/packages/wallet/src/components/accounts/DisplayNameText.tsx
+++ b/packages/wallet/src/components/accounts/DisplayNameText.tsx
--- a/packages/wallet/src/components/buttons/PasteButton.tsx
+++ b/packages/wallet/src/components/buttons/PasteButton.tsx
--- a/packages/wallet/src/components/buttons/PlusMinusButton.tsx
+++ b/packages/wallet/src/components/buttons/PlusMinusButton.tsx
--- a/packages/wallet/src/components/gating/GatingOverrides.tsx
+++ b/packages/wallet/src/components/gating/GatingOverrides.tsx
--- a/packages/wallet/src/components/icons/WarningIcon.tsx
+++ b/packages/wallet/src/components/icons/WarningIcon.tsx
--- a/packages/wallet/src/components/input/RecipientInputPanel.tsx
+++ b/packages/wallet/src/components/input/RecipientInputPanel.tsx
--- a/packages/wallet/src/components/legacy/DecimalPadLegacy.tsx
+++ b/packages/wallet/src/components/legacy/DecimalPadLegacy.tsx
--- a/packages/wallet/src/components/loading/SpinningLoader.tsx
+++ b/packages/wallet/src/components/loading/SpinningLoader.tsx
--- a/packages/wallet/src/components/modals/WarningModal/WarningInfo.tsx
+++ b/packages/wallet/src/components/modals/WarningModal/WarningInfo.tsx
--- a/packages/wallet/src/components/modals/WarningModal/WarningModal.tsx
+++ b/packages/wallet/src/components/modals/WarningModal/WarningModal.tsx
--- a/packages/wallet/src/components/network/NetworkFilter.tsx
+++ b/packages/wallet/src/components/network/NetworkFilter.tsx
--- a/packages/wallet/src/components/network/NetworkOption.tsx
+++ b/packages/wallet/src/components/network/NetworkOption.tsx
--- a/packages/wallet/src/components/nfts/NFTHiddenRow.tsx
+++ b/packages/wallet/src/components/nfts/NFTHiddenRow.tsx
--- a/packages/wallet/src/components/nfts/NftsList.tsx
+++ b/packages/wallet/src/components/nfts/NftsList.tsx
--- a/packages/wallet/src/components/text/RelativeChange.tsx
+++ b/packages/wallet/src/components/text/RelativeChange.tsx
--- a/packages/wallet/src/constants/chains.ts
+++ b/packages/wallet/src/constants/chains.ts
--- a/packages/wallet/src/constants/misc.ts
+++ b/packages/wallet/src/constants/misc.ts
--- a/packages/wallet/src/features/activity/useActivityData.tsx
+++ b/packages/wallet/src/features/activity/useActivityData.tsx
--- a/packages/wallet/src/features/fiatOnRamp/api.ts
+++ b/packages/wallet/src/features/fiatOnRamp/api.ts
--- a/packages/wallet/src/features/gas/api.ts
+++ b/packages/wallet/src/features/gas/api.ts
--- a/packages/wallet/src/features/gas/hooks.ts
+++ b/packages/wallet/src/features/gas/hooks.ts
--- a/packages/wallet/src/features/language/saga.ts
+++ b/packages/wallet/src/features/language/saga.ts
--- a/packages/wallet/src/features/nfts/useNftContextMenu.tsx
+++ b/packages/wallet/src/features/nfts/useNftContextMenu.tsx
--- a/packages/wallet/src/features/nfts/utils.ts
+++ b/packages/wallet/src/features/nfts/utils.ts
--- a/packages/wallet/src/features/portfolio/HiddenTokensRow.tsx
+++ b/packages/wallet/src/features/portfolio/HiddenTokensRow.tsx
--- a/packages/wallet/src/features/portfolio/useTokenContextMenu.tsx
+++ b/packages/wallet/src/features/portfolio/useTokenContextMenu.tsx
--- a/packages/wallet/src/features/search/SearchBar.tsx
+++ b/packages/wallet/src/features/search/SearchBar.tsx
--- a/packages/wallet/src/features/search/SearchTextInput.tsx
+++ b/packages/wallet/src/features/search/SearchTextInput.tsx
--- a/packages/wallet/src/features/transactions/SummaryCards/SummaryItems/TransferTokenSummaryItem.tsx
+++ b/packages/wallet/src/features/transactions/SummaryCards/SummaryItems/TransferTokenSummaryItem.tsx
--- a/packages/wallet/src/features/transactions/SummaryCards/SummaryItems/UnknownSummaryItem.tsx
+++ b/packages/wallet/src/features/transactions/SummaryCards/SummaryItems/UnknownSummaryItem.tsx
--- a/packages/wallet/src/features/transactions/TransactionDetails/TransactionDetails.tsx
+++ b/packages/wallet/src/features/transactions/TransactionDetails/TransactionDetails.tsx
--- a/packages/wallet/src/features/transactions/TransactionReview/TransactionReview.tsx
+++ b/packages/wallet/src/features/transactions/TransactionReview/TransactionReview.tsx
--- a/packages/wallet/src/features/transactions/hooks/useParsedTransactionWarnings.tsx
+++ b/packages/wallet/src/features/transactions/hooks/useParsedTransactionWarnings.tsx
--- a/packages/wallet/src/features/transactions/swap/CurrencyInputPanel.tsx
+++ b/packages/wallet/src/features/transactions/swap/CurrencyInputPanel.tsx
--- a/packages/wallet/src/features/transactions/swap/DecimalPad.tsx
+++ b/packages/wallet/src/features/transactions/swap/DecimalPad.tsx
--- a/packages/wallet/src/features/transactions/swap/GasAndWarningRows.native.tsx
+++ b/packages/wallet/src/features/transactions/swap/GasAndWarningRows.native.tsx
--- a/packages/wallet/src/features/transactions/swap/GasAndWarningRows.web.tsx
+++ b/packages/wallet/src/features/transactions/swap/GasAndWarningRows.web.tsx
--- a/packages/wallet/src/features/transactions/swap/SwapDetails.tsx
+++ b/packages/wallet/src/features/transactions/swap/SwapDetails.tsx
--- a/packages/wallet/src/features/transactions/swap/SwapFormButton.tsx
+++ b/packages/wallet/src/features/transactions/swap/SwapFormButton.tsx
--- a/packages/wallet/src/features/transactions/swap/SwapFormHeader.tsx
+++ b/packages/wallet/src/features/transactions/swap/SwapFormHeader.tsx
--- a/packages/wallet/src/features/transactions/swap/SwapFormScreen.tsx
+++ b/packages/wallet/src/features/transactions/swap/SwapFormScreen.tsx
--- a/packages/wallet/src/features/transactions/swap/SwapReviewScreen.tsx
+++ b/packages/wallet/src/features/transactions/swap/SwapReviewScreen.tsx
--- a/packages/wallet/src/features/transactions/swap/TransactionAmountsReview.tsx
+++ b/packages/wallet/src/features/transactions/swap/TransactionAmountsReview.tsx
--- a/packages/wallet/src/features/transactions/swap/modals/FeeOnTransferWarning.tsx
+++ b/packages/wallet/src/features/transactions/swap/modals/FeeOnTransferWarning.tsx
--- a/packages/wallet/src/features/transactions/swap/modals/NetworkFeeWarning.tsx
+++ b/packages/wallet/src/features/transactions/swap/modals/NetworkFeeWarning.tsx
--- a/packages/wallet/src/features/transactions/swap/modals/PriceImpactWarning.tsx
+++ b/packages/wallet/src/features/transactions/swap/modals/PriceImpactWarning.tsx
--- a/packages/wallet/src/features/transactions/swap/modals/SlippageInfoModal.tsx
+++ b/packages/wallet/src/features/transactions/swap/modals/SlippageInfoModal.tsx
--- a/packages/wallet/src/features/transactions/swap/modals/SwapProtectionModal.tsx
+++ b/packages/wallet/src/features/transactions/swap/modals/SwapProtectionModal.tsx
--- a/packages/wallet/src/features/transactions/swap/modals/ViewOnlyModal.tsx
+++ b/packages/wallet/src/features/transactions/swap/modals/ViewOnlyModal.tsx
--- a/packages/wallet/src/features/transactions/swap/modals/settings/SlippageSettingsRow.native.tsx
+++ b/packages/wallet/src/features/transactions/swap/modals/settings/SlippageSettingsRow.native.tsx
--- a/packages/wallet/src/features/transactions/swap/modals/settings/SwapSettingsMessage.tsx
+++ b/packages/wallet/src/features/transactions/swap/modals/settings/SwapSettingsMessage.tsx
--- a/packages/wallet/src/features/transactions/swap/modals/settings/SwapSettingsModal.tsx
+++ b/packages/wallet/src/features/transactions/swap/modals/settings/SwapSettingsModal.tsx
--- a/packages/wallet/src/features/transactions/swap/trade/legacy/hooks.ts
+++ b/packages/wallet/src/features/transactions/swap/trade/legacy/hooks.ts
--- a/packages/wallet/src/features/transactions/swap/trade/tradingApi/hooks/useSwapTxAndGasInfoTradingApi.ts
+++ b/packages/wallet/src/features/transactions/swap/trade/tradingApi/hooks/useSwapTxAndGasInfoTradingApi.ts
--- a/packages/wallet/src/features/transactions/swap/trade/tradingApi/hooks/useTransactionRequestInfo.ts
+++ b/packages/wallet/src/features/transactions/swap/trade/tradingApi/hooks/useTransactionRequestInfo.ts
--- a/packages/wallet/src/features/transactions/transfer/TokenSelectorPanel.tsx
+++ b/packages/wallet/src/features/transactions/transfer/TokenSelectorPanel.tsx
--- a/packages/wallet/src/features/transactions/transfer/TransferAmountInput.tsx
+++ b/packages/wallet/src/features/transactions/transfer/TransferAmountInput.tsx
--- a/packages/wallet/src/features/transactions/transfer/TransferTokenForm.tsx
+++ b/packages/wallet/src/features/transactions/transfer/TransferTokenForm.tsx
--- a/packages/wallet/src/features/transactions/transfer/getSendPrefilledState.ts
+++ b/packages/wallet/src/features/transactions/transfer/getSendPrefilledState.ts
--- a/packages/wallet/src/features/walletConnect/types.ts
+++ b/packages/wallet/src/features/walletConnect/types.ts
--- a/packages/wallet/src/telemetry/index.native.ts
+++ b/packages/wallet/src/telemetry/index.native.ts
--- a/packages/wallet/src/telemetry/index.web.ts
+++ b/packages/wallet/src/telemetry/index.web.ts
--- a/packages/wallet/src/utils/linking.ts
+++ b/packages/wallet/src/utils/linking.ts
--- a/turbo.json
+++ b/turbo.json
--- a/yarn.lock
+++ b/yarn.lock