From d90e32a71b6e185ec6829dfbcf071f47a6ba6003 Mon Sep 17 00:00:00 2001
From: Matthew Wall <matthew.wallt@gmail.com>
Date: Fri, 20 Dec 2024 07:01:18 -0500
Subject: [PATCH] Fix selected state for network, timeframe, sort (#6352)

---
 src/components/Discover/DiscoverHome.tsx      |   3 +-
 src/components/Discover/TrendingTokens.tsx    | 283 +++++++++++-------
 .../Discover/useTrackDiscoverScreenTime.ts    |   6 +-
 src/components/NetworkSwitcher.tsx            | 150 +++++++---
 src/components/coin-icon/ChainImage.tsx       |   2 -
 src/languages/en_US.json                      |  12 +-
 6 files changed, 287 insertions(+), 169 deletions(-)

diff --git a/src/components/Discover/DiscoverHome.tsx b/src/components/Discover/DiscoverHome.tsx
index 019328a92b6..8da0ba974af 100644
--- a/src/components/Discover/DiscoverHome.tsx
+++ b/src/components/Discover/DiscoverHome.tsx
@@ -70,10 +70,11 @@ export default function DiscoverHome() {
             <GasCard />
             {isProfilesEnabled && <ENSSearchCard />}
           </Inline>
+          <Separator color="separatorTertiary" thickness={1} />
           {trendingTokensEnabled && (
             <>
-              <Separator color="separatorSecondary" thickness={1} />
               <TrendingTokens />
+              <Separator color="separatorTertiary" thickness={1} />
             </>
           )}
           <RemoteCardCarousel />
diff --git a/src/components/Discover/TrendingTokens.tsx b/src/components/Discover/TrendingTokens.tsx
index 0c3e0fba658..3a14f94011a 100644
--- a/src/components/Discover/TrendingTokens.tsx
+++ b/src/components/Discover/TrendingTokens.tsx
@@ -1,5 +1,5 @@
 import { DropdownMenu } from '@/components/DropdownMenu';
-import { globalColors, Text, useBackgroundColor } from '@/design-system';
+import { globalColors, Text, TextIcon, useBackgroundColor, useColorMode } from '@/design-system';
 import { useForegroundColor } from '@/design-system/color/useForegroundColor';
 
 import { SwapCoinIcon } from '@/__swaps__/screens/Swap/components/SwapCoinIcon';
@@ -8,7 +8,7 @@ import { useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks
 import { ChainId } from '@/state/backendNetworks/types';
 import { ChainImage } from '@/components/coin-icon/ChainImage';
 import Skeleton, { FakeAvatar, FakeText } from '@/components/skeleton/Skeleton';
-import { SortDirection, TrendingCategory, TrendingSort } from '@/graphql/__generated__/arc';
+import { SortDirection, Timeframe, TrendingCategory, TrendingSort } from '@/graphql/__generated__/arc';
 import { formatCurrency, formatNumber } from '@/helpers/strings';
 import * as i18n from '@/languages';
 import { Navigation } from '@/navigation';
@@ -22,71 +22,95 @@ import { darkModeThemeColors } from '@/styles/colors';
 import { useTheme } from '@/theme';
 import { useCallback, useEffect, useMemo } from 'react';
 import React, { Dimensions, FlatList, View } from 'react-native';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import LinearGradient from 'react-native-linear-gradient';
-import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import Animated, { runOnJS, useSharedValue } from 'react-native-reanimated';
 import { ButtonPressAnimation } from '../animations';
 import { useFarcasterAccountForWallets } from '@/hooks/useFarcasterAccountForWallets';
 import { ImgixImage } from '../images';
 import { useRemoteConfig } from '@/model/remoteConfig';
 import { useAccountSettings } from '@/hooks';
+import { getColorWorklet, getMixedColor, opacity } from '@/__swaps__/utils/swaps';
+import { THICK_BORDER_WIDTH } from '@/__swaps__/screens/Swap/constants';
+import { IS_IOS } from '@/env';
 
 const t = i18n.l.trending_tokens;
 
-const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
-
-function FilterButton({ icon, label, onPress }: { onPress?: VoidFunction; label: string; icon: string | JSX.Element }) {
-  const pressed = useSharedValue(false);
-
-  const tap = Gesture.Tap()
-    .onBegin(() => {
-      pressed.value = true;
-      if (onPress) runOnJS(onPress)();
-    })
-    .onFinalize(() => (pressed.value = false));
-
-  const animatedStyles = useAnimatedStyle(() => ({
-    transform: [{ scale: withTiming(pressed.value ? 0.95 : 1, { duration: 100 }) }],
-  }));
-
-  const backgroundColor = useBackgroundColor('fillTertiary');
-  const borderColor = useBackgroundColor('fillSecondary');
-
-  const iconColor = useForegroundColor('labelQuaternary');
+function FilterButton({
+  icon,
+  label,
+  onPress,
+  selected,
+  iconColor,
+  highlightedBackgroundColor,
+}: {
+  onPress?: VoidFunction;
+  label: string;
+  icon: string | JSX.Element;
+  selected: boolean;
+  iconColor?: string;
+  highlightedBackgroundColor?: string;
+}) {
+  const { isDarkMode } = useColorMode();
+  const fillTertiary = useBackgroundColor('fillTertiary');
+  const separatorSecondary = useForegroundColor('separatorSecondary');
+  const borderColor = selected && isDarkMode ? globalColors.white80 : separatorSecondary;
+  const defaultIconColor = getColorWorklet('labelSecondary', selected ? false : isDarkMode);
+
+  const gradientColors = useMemo(() => {
+    if (!selected) return [fillTertiary, fillTertiary];
+    return highlightedBackgroundColor
+      ? [highlightedBackgroundColor, globalColors.white100]
+      : [
+          isDarkMode ? opacity(globalColors.white100, 0.72) : opacity(fillTertiary, 0.2),
+          isDarkMode ? opacity(globalColors.white100, 0.92) : opacity(fillTertiary, 0),
+        ];
+  }, [fillTertiary, highlightedBackgroundColor, selected, isDarkMode]);
 
   return (
-    <GestureDetector gesture={tap}>
-      <Animated.View
-        style={[
-          {
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 4,
-            height: 36,
-            paddingHorizontal: 12,
-            borderRadius: 18,
-            borderWidth: 1.33,
-            borderColor,
-            backgroundColor,
-          },
-          animatedStyles,
-        ]}
+    <ButtonPressAnimation scaleTo={0.92} onPress={onPress}>
+      <LinearGradient
+        colors={gradientColors}
+        end={{ x: 0.5, y: 1 }}
+        start={{ x: 0.5, y: 0 }}
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 4,
+          height: 36,
+          paddingHorizontal: 12 - THICK_BORDER_WIDTH,
+          borderRadius: 18,
+          borderWidth: THICK_BORDER_WIDTH,
+          borderColor,
+        }}
       >
         {typeof icon === 'string' ? (
-          <Text color={{ custom: iconColor }} size="icon 13px" weight="heavy" style={{ width: 16 }}>
+          <TextIcon color={{ custom: iconColor || defaultIconColor }} size="icon 13px" weight="heavy" width={16}>
             {icon}
-          </Text>
+          </TextIcon>
         ) : (
           icon
         )}
-        <Text color="labelSecondary" size="17pt" weight="bold">
-          {label}
-        </Text>
-        <Text color={{ custom: iconColor }} size="13pt" weight="bold" style={{ width: 14 }}>
+        <View>
+          {/* This first Text element sets the width of the container */}
+          <Text align="center" color="label" size="17pt" weight="heavy" style={{ opacity: 0 }}>
+            {label}
+          </Text>
+          {/* This second Text element is the visible label, positioned absolutely within the established frame */}
+          <Text
+            align="center"
+            color={selected ? { custom: globalColors.grey100 } : 'labelSecondary'}
+            size="17pt"
+            style={{ bottom: 0, left: 0, position: 'absolute', right: 0, top: 0 }}
+            weight={selected ? 'heavy' : 'bold'}
+          >
+            {label}
+          </Text>
+        </View>
+        <Text color={{ custom: iconColor || defaultIconColor }} size="13pt" weight="bold" style={{ width: 14 }}>
           􀆏
         </Text>
-      </Animated.View>
-    </GestureDetector>
+      </LinearGradient>
+    </ButtonPressAnimation>
   );
 }
 
@@ -146,69 +170,70 @@ function CategoryFilterButton({
 }: {
   category: TrendingCategory;
   icon: string;
-  iconColor: string;
+  iconColor: string | { default: string; selected: string };
   highlightedBackgroundColor: string;
   iconWidth?: number;
   label: string;
 }) {
-  const { isDarkMode } = useTheme();
+  const { isDarkMode } = useColorMode();
   const fillTertiary = useBackgroundColor('fillTertiary');
-  const fillSecondary = useBackgroundColor('fillSecondary');
+  const separatorSecondary = useForegroundColor('separatorSecondary');
 
   const selected = useTrendingTokensStore(state => state.category === category);
 
-  const borderColor = selected && isDarkMode ? globalColors.white80 : fillSecondary;
+  const borderColor = selected && isDarkMode ? globalColors.white80 : separatorSecondary;
 
-  const pressed = useSharedValue(false);
+  const gradientColors = useMemo(() => {
+    if (!selected) return [fillTertiary, fillTertiary];
+    return [highlightedBackgroundColor, globalColors.white100];
+  }, [fillTertiary, highlightedBackgroundColor, selected]);
 
   const selectCategory = useCallback(() => {
     useTrendingTokensStore.getState().setCategory(category);
   }, [category]);
 
-  const tap = Gesture.Tap()
-    .onBegin(() => {
-      pressed.value = true;
-    })
-    .onEnd(() => {
-      pressed.value = false;
-      runOnJS(selectCategory)();
-    });
-
-  const animatedStyles = useAnimatedStyle(() => ({
-    transform: [{ scale: withTiming(pressed.value ? 0.95 : 1, { duration: 100 }) }],
-  }));
-
   return (
-    <GestureDetector gesture={tap}>
-      <AnimatedLinearGradient
-        colors={selected ? [highlightedBackgroundColor, 'white'] : [fillTertiary, fillTertiary]}
-        style={[
-          {
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 4,
-            height: 36,
-            paddingHorizontal: 12,
-            borderRadius: 18,
-            borderWidth: 1.33,
-            borderColor,
-          },
-          animatedStyles,
-        ]}
+    <ButtonPressAnimation scaleTo={0.92} onPress={selectCategory}>
+      <LinearGradient
+        colors={gradientColors}
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 4,
+          height: 36,
+          paddingHorizontal: 12,
+          borderRadius: 18,
+          borderWidth: THICK_BORDER_WIDTH,
+          borderColor,
+        }}
       >
-        <Text color={{ custom: iconColor }} size="icon 13px" weight="heavy" style={{ width: iconWidth }}>
-          {icon}
-        </Text>
-        <Text
-          color={selected ? { custom: 'black' } : 'labelSecondary'}
-          size="17pt"
-          style={{ letterSpacing: selected ? 0 : 0.9 }}
-          weight={selected ? 'heavy' : 'bold'}
+        <TextIcon
+          color={{ custom: typeof iconColor === 'string' ? iconColor : selected ? iconColor.selected : iconColor.default }}
+          size="icon 13px"
+          textStyle={IS_IOS ? { marginTop: -3.5 } : undefined}
+          weight="heavy"
+          width={iconWidth}
         >
-          {label}
-        </Text>
-      </AnimatedLinearGradient>
-    </GestureDetector>
+          {icon}
+        </TextIcon>
+        <View>
+          {/* This first Text element sets the width of the container */}
+          <Text align="center" color="label" size="17pt" weight="heavy" style={{ opacity: 0 }}>
+            {label}
+          </Text>
+          {/* This second Text element is the visible label, positioned absolutely within the established frame */}
+          <Text
+            align="center"
+            color={selected ? { custom: globalColors.grey100 } : 'labelSecondary'}
+            size="17pt"
+            style={{ bottom: 0, left: 0, position: 'absolute', right: 0, top: 0 }}
+            weight={selected ? 'heavy' : 'bold'}
+          >
+            {label}
+          </Text>
+        </View>
+      </LinearGradient>
+    </ButtonPressAnimation>
   );
 }
 
@@ -266,7 +291,7 @@ function FriendHolders({ friends }: { friends: FarcasterUser[] }) {
 
 function TrendingTokenLoadingRow() {
   const backgroundColor = useBackgroundColor('surfacePrimary');
-  const { isDarkMode } = useTheme();
+  const { isDarkMode } = useColorMode();
   return (
     <View style={{ flex: 1, height: 78, width: '100%' }}>
       <Skeleton>
@@ -464,7 +489,7 @@ function TrendingTokenRow({ token }: { token: TrendingToken }) {
 }
 
 function NoResults() {
-  const { isDarkMode } = useTheme();
+  const { isDarkMode } = useColorMode();
   const fillQuaternary = useBackgroundColor('fillQuaternary');
   const backgroundColor = isDarkMode ? '#191A1C' : fillQuaternary;
 
@@ -488,12 +513,27 @@ function NoResults() {
 }
 
 function NetworkFilter() {
-  const selected = useSharedValue<ChainId | undefined>(undefined);
+  const { isDarkMode } = useColorMode();
+  const { colors } = useTheme();
 
-  const { chainId, setChainId } = useTrendingTokensStore(state => ({
-    chainId: state.chainId,
-    setChainId: state.setChainId,
-  }));
+  const selected = useSharedValue<ChainId | undefined>(undefined);
+  const chainId = useTrendingTokensStore(state => state.chainId);
+  const setChainId = useTrendingTokensStore(state => state.setChainId);
+
+  const { icon, label, lightenedNetworkColor } = useMemo(() => {
+    if (!chainId) return { icon: '􀤆', label: i18n.t(t.all), lightenedNetworkColor: undefined };
+    return {
+      icon: (
+        <View style={{ marginRight: 2 }}>
+          <ChainImage chainId={chainId} size={16} />
+        </View>
+      ),
+      label: useBackendNetworksStore.getState().getChainsLabel()[chainId],
+      lightenedNetworkColor: colors.networkColors[chainId]
+        ? getMixedColor(colors.networkColors[chainId], globalColors.white100, isDarkMode ? 0.55 : 0.6)
+        : undefined,
+    };
+  }, [chainId, colors.networkColors, isDarkMode]);
 
   const setSelected = useCallback(
     (chainId: ChainId | undefined) => {
@@ -504,13 +544,6 @@ function NetworkFilter() {
     [selected, setChainId]
   );
 
-  const label = !chainId ? i18n.t(t.all) : useBackendNetworksStore.getState().getChainsLabel()[chainId];
-
-  const icon = useMemo(() => {
-    if (!chainId) return '􀤆';
-    return <ChainImage chainId={chainId} size={16} />;
-  }, [chainId]);
-
   const navigateToNetworkSelector = useCallback(() => {
     Navigation.handleAction(Routes.NETWORK_SELECTOR, {
       selected,
@@ -518,11 +551,20 @@ function NetworkFilter() {
     });
   }, [selected, setSelected]);
 
-  return <FilterButton label={label} icon={icon} onPress={navigateToNetworkSelector} />;
+  return (
+    <FilterButton
+      selected={!!chainId}
+      highlightedBackgroundColor={lightenedNetworkColor}
+      label={label}
+      icon={icon}
+      onPress={navigateToNetworkSelector}
+    />
+  );
 }
 
 function TimeFilter() {
   const timeframe = useTrendingTokensStore(state => state.timeframe);
+  const shouldAbbreviate = timeframe === Timeframe.H24;
 
   return (
     <DropdownMenu
@@ -535,15 +577,22 @@ function TimeFilter() {
       side="bottom"
       onPressMenuItem={timeframe => useTrendingTokensStore.getState().setTimeframe(timeframe)}
     >
-      <FilterButton label={i18n.t(t.filters.time[timeframe])} icon="􀐫" />
+      <FilterButton
+        selected={timeframe !== Timeframe.H24}
+        iconColor={undefined}
+        highlightedBackgroundColor={undefined}
+        label={shouldAbbreviate ? i18n.t(t.filters.time[`${timeframe}_ABBREVIATED`]) : i18n.t(t.filters.time[timeframe])}
+        icon="􀐫"
+      />
     </DropdownMenu>
   );
 }
 
 function SortFilter() {
   const sort = useTrendingTokensStore(state => state.sort);
+  const selected = sort !== TrendingSort.Recommended;
 
-  const iconColor = useForegroundColor('labelQuaternary');
+  const iconColor = useForegroundColor(selected ? 'labelSecondary' : 'labelTertiary');
 
   return (
     <DropdownMenu
@@ -562,6 +611,9 @@ function SortFilter() {
       }}
     >
       <FilterButton
+        selected={selected}
+        iconColor={undefined}
+        highlightedBackgroundColor={undefined}
         label={i18n.t(t.filters.sort[sort])}
         icon={
           <Text color={{ custom: iconColor }} size="icon 13px" weight="heavy" style={{ width: 20 }}>
@@ -591,8 +643,8 @@ function TrendingTokenData() {
 
   return (
     <FlatList
-      style={{ marginHorizontal: -20, paddingVertical: 12, marginVertical: -12 }}
-      contentContainerStyle={{ paddingHorizontal: 20, gap: 28 }}
+      style={{ marginHorizontal: -20, marginVertical: -12, paddingBottom: 20, paddingTop: 12 }}
+      contentContainerStyle={{ gap: 28, paddingHorizontal: 20 }}
       ListEmptyComponent={<NoResults />}
       data={trendingTokens}
       renderItem={({ item }) => <TrendingTokenRow token={item} />}
@@ -603,6 +655,7 @@ function TrendingTokenData() {
 const padding = 20;
 
 export function TrendingTokens() {
+  const { isDarkMode } = useColorMode();
   return (
     <View style={{ gap: 28 }}>
       <View style={{ gap: 12, justifyContent: 'center' }}>
@@ -623,8 +676,8 @@ export function TrendingTokens() {
             category={TrendingCategory.New}
             label={i18n.t(t.filters.categories.NEW)}
             icon="􀋃"
-            iconColor={'#FFDA24'}
-            highlightedBackgroundColor={'#F9EAA1'}
+            iconColor={{ default: isDarkMode ? globalColors.yellow60 : '#FFBB00', selected: '#F5A200' }}
+            highlightedBackgroundColor={'#FFEAC2'}
             iconWidth={18}
           />
           <CategoryFilterButton
diff --git a/src/components/Discover/useTrackDiscoverScreenTime.ts b/src/components/Discover/useTrackDiscoverScreenTime.ts
index 64e96a50fa1..b6f9e02f6cf 100644
--- a/src/components/Discover/useTrackDiscoverScreenTime.ts
+++ b/src/components/Discover/useTrackDiscoverScreenTime.ts
@@ -5,9 +5,9 @@ import { PerformanceTracking, currentlyTrackedMetrics } from '@/performance/trac
 import { PerformanceMetrics } from '@/performance/tracking/types/PerformanceMetrics';
 
 export const useTrackDiscoverScreenTime = () => {
-  const activeSwipeRoute = useNavigationStore(state => state.activeSwipeRoute);
+  const isOnDiscoverScreen = useNavigationStore(state => state.isRouteActive(Routes.DISCOVER_SCREEN));
+
   useEffect(() => {
-    const isOnDiscoverScreen = activeSwipeRoute === Routes.DISCOVER_SCREEN;
     const data = currentlyTrackedMetrics.get(PerformanceMetrics.timeSpentOnDiscoverScreen);
 
     if (!isOnDiscoverScreen && data?.startTimestamp) {
@@ -17,5 +17,5 @@ export const useTrackDiscoverScreenTime = () => {
     if (isOnDiscoverScreen) {
       PerformanceTracking.startMeasuring(PerformanceMetrics.timeSpentOnDiscoverScreen);
     }
-  }, [activeSwipeRoute]);
+  }, [isOnDiscoverScreen]);
 };
diff --git a/src/components/NetworkSwitcher.tsx b/src/components/NetworkSwitcher.tsx
index 50c4e13d639..65a66961d7a 100644
--- a/src/components/NetworkSwitcher.tsx
+++ b/src/components/NetworkSwitcher.tsx
@@ -1,15 +1,14 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { getChainColorWorklet } from '@/__swaps__/utils/swaps';
+import { getChainColorWorklet, opacity } from '@/__swaps__/utils/swaps';
 import { useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';
 import { ChainId } from '@/state/backendNetworks/types';
 import { AnimatedBlurView } from '@/components/AnimatedComponents/AnimatedBlurView';
 import { ButtonPressAnimation } from '@/components/animations';
 import { SPRING_CONFIGS, TIMING_CONFIGS } from '@/components/animations/animationConfigs';
-import { AnimatedChainImage, ChainImage } from '@/components/coin-icon/ChainImage';
+import { ChainImage } from '@/components/coin-icon/ChainImage';
 import { AnimatedText, Box, DesignSystemProvider, globalColors, Separator, Text, useBackgroundColor, useColorMode } from '@/design-system';
 import { useForegroundColor } from '@/design-system/color/useForegroundColor';
 import * as i18n from '@/languages';
-import { useTheme } from '@/theme';
 import deviceUtils, { DEVICE_WIDTH } from '@/utils/deviceUtils';
 import MaskedView from '@react-native-masked-view/masked-view';
 import chroma from 'chroma-js';
@@ -19,6 +18,7 @@ import { RouteProp, useRoute } from '@react-navigation/native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import LinearGradient from 'react-native-linear-gradient';
 import Animated, {
+  Easing,
   FadeIn,
   FadeOutUp,
   LinearTransition,
@@ -46,6 +46,8 @@ import { IS_IOS } from '@/env';
 import { safeAreaInsetValues } from '@/utils';
 import { noop } from 'lodash';
 import { TapToDismiss } from './DappBrowser/control-panel/ControlPanel';
+import { THICK_BORDER_WIDTH } from '@/__swaps__/screens/Swap/constants';
+import { GestureHandlerButton } from '@/__swaps__/screens/Swap/components/GestureHandlerButton';
 
 const t = i18n.l.network_switcher;
 
@@ -72,11 +74,18 @@ function EditButton({ editing }: { editing: SharedValue<boolean> }) {
         editing.value = !editing.value;
       }}
       scaleTo={0.95}
-      style={[
-        { position: 'absolute', right: 0 },
-        { paddingHorizontal: 10, height: 28, justifyContent: 'center' },
-        { borderColor, borderWidth: 1.33, borderRadius: 14 },
-      ]}
+      style={{
+        borderColor,
+        borderCurve: 'continuous',
+        borderRadius: 14,
+        borderWidth: THICK_BORDER_WIDTH,
+        height: 28,
+        justifyContent: 'center',
+        overflow: 'hidden',
+        paddingHorizontal: 10,
+        position: 'absolute',
+        right: 0,
+      }}
     >
       <AnimatedText color="blue" size="17pt" weight="bold" style={{ shadowColor: '#268FFF', shadowOpacity: 0.4, shadowRadius: 12 }}>
         {text}
@@ -96,7 +105,17 @@ function Header({ editing }: { editing: SharedValue<boolean> }) {
   return (
     <View style={{ height: 66, borderBottomWidth: 1, borderBottomColor: separatorTertiary, paddingTop: 20 }}>
       <View style={{ position: 'absolute', left: 0, right: 0, top: 6 }}>
-        <View style={{ height: 5, width: 36, marginHorizontal: 'auto', borderRadius: 3, backgroundColor: fill }} />
+        <View
+          style={{
+            height: 5,
+            width: 36,
+            marginHorizontal: 'auto',
+            borderRadius: 3,
+            borderCurve: 'continuous',
+            backgroundColor: fill,
+            overflow: 'hidden',
+          }}
+        />
       </View>
 
       <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', height: 28 }}>
@@ -199,16 +218,28 @@ const CustomizeNetworksBanner = !shouldShowCustomizeNetworksBanner(customizeNetw
       );
     };
 
+const BADGE_BORDER_COLORS = {
+  default: {
+    dark: globalColors.white10,
+    light: '#F2F3F4',
+  },
+  selected: {
+    dark: '#1E2E40',
+    light: '#D7E9FD',
+  },
+};
+
 const useNetworkOptionStyle = (isSelected: SharedValue<boolean>, color?: string) => {
   const { isDarkMode } = useColorMode();
   const label = useForegroundColor('labelTertiary');
 
   const surfacePrimary = useBackgroundColor('surfacePrimary');
   const networkSwitcherBackgroundColor = isDarkMode ? '#191A1C' : surfacePrimary;
+  const separatorTertiary = useForegroundColor('separatorTertiary');
 
   const defaultStyle = {
     backgroundColor: isDarkMode ? globalColors.white10 : globalColors.grey20,
-    borderColor: '#F5F8FF05',
+    borderColor: isDarkMode ? opacity(separatorTertiary, 0.02) : separatorTertiary,
   };
   const selectedStyle = {
     backgroundColor: chroma
@@ -222,9 +253,12 @@ const useNetworkOptionStyle = (isSelected: SharedValue<boolean>, color?: string)
   const scale = useSharedValue(1);
   useAnimatedReaction(
     () => isSelected.value,
-    current => {
-      if (current === true) {
-        scale.value = withSequence(withTiming(0.95, { duration: 50 }), withTiming(1, { duration: 80 }));
+    (current, prev) => {
+      if (current === true && prev === false) {
+        scale.value = withSequence(
+          withTiming(0.9, { duration: 120, easing: Easing.bezier(0.25, 0.46, 0.45, 0.94) }),
+          withTiming(1, TIMING_CONFIGS.fadeConfig)
+        );
       }
     }
   );
@@ -252,29 +286,28 @@ function AllNetworksOption({
   selected: SharedValue<ChainId | undefined>;
   setSelected: (chainId: ChainId | undefined) => void;
 }) {
+  const { isDarkMode } = useColorMode();
   const blue = useForegroundColor('blue');
 
   const isSelected = useDerivedValue(() => selected.value === undefined);
-  const { animatedStyle, selectedStyle, defaultStyle } = useNetworkOptionStyle(isSelected, blue);
+  const { animatedStyle } = useNetworkOptionStyle(isSelected, blue);
 
   const overlappingBadge = useAnimatedStyle(() => {
     return {
-      borderColor: isSelected.value ? selectedStyle.backgroundColor : defaultStyle.backgroundColor,
-      borderWidth: 1.67,
-      borderRadius: 16,
-      marginLeft: -9,
-      width: 16 + 1.67 * 2, // size + borders
-      height: 16 + 1.67 * 2,
+      borderColor: isSelected.value
+        ? BADGE_BORDER_COLORS.selected[isDarkMode ? 'dark' : 'light']
+        : BADGE_BORDER_COLORS.default[isDarkMode ? 'dark' : 'light'],
     };
   });
 
-  const tapGesture = Gesture.Tap().onTouchesDown(() => {
-    'worklet';
-    setSelected(undefined);
-  });
-
   return (
-    <GestureDetector gesture={tapGesture}>
+    <GestureHandlerButton
+      onPressWorklet={() => {
+        'worklet';
+        setSelected(undefined);
+      }}
+      scaleTo={0.95}
+    >
       <Animated.View
         style={[
           {
@@ -283,22 +316,32 @@ function AllNetworksOption({
             flexDirection: 'row',
             alignItems: 'center',
             borderRadius: 24,
-            borderWidth: 1.33,
+            borderWidth: THICK_BORDER_WIDTH,
+            borderCurve: 'continuous',
+            overflow: 'hidden',
           },
           animatedStyle,
         ]}
       >
-        <View style={{ flexDirection: 'row', alignItems: 'center', position: 'absolute', marginLeft: 16 }}>
-          <AnimatedChainImage chainId={ChainId.base} size={16} />
-          <AnimatedChainImage chainId={ChainId.mainnet} size={16} style={overlappingBadge} />
-          <AnimatedChainImage chainId={ChainId.optimism} size={16} style={overlappingBadge} />
-          <AnimatedChainImage chainId={ChainId.arbitrum} size={16} style={overlappingBadge} />
+        <View style={{ flexDirection: 'row', alignItems: 'center', position: 'absolute', marginLeft: 20 }}>
+          <Animated.View style={[sx.overlappingBadge, overlappingBadge]}>
+            <ChainImage chainId={ChainId.base} size={16} />
+          </Animated.View>
+          <Animated.View style={[sx.overlappingBadge, overlappingBadge]}>
+            <ChainImage chainId={ChainId.mainnet} size={16} />
+          </Animated.View>
+          <Animated.View style={[sx.overlappingBadge, overlappingBadge]}>
+            <ChainImage chainId={ChainId.optimism} size={16} />
+          </Animated.View>
+          <Animated.View style={[sx.overlappingBadge, overlappingBadge]}>
+            <ChainImage chainId={ChainId.arbitrum} size={16} />
+          </Animated.View>
         </View>
         <Text color="label" size="17pt" weight="bold" style={{ textAlign: 'center', flex: 1 }}>
           {i18n.t(t.all_networks)}
         </Text>
       </Animated.View>
-    </GestureDetector>
+    </GestureHandlerButton>
   );
 }
 
@@ -338,9 +381,17 @@ function NetworkOption({ chainId, selected }: { chainId: ChainId; selected: Shar
     <Animated.View
       layout={LinearTransition.springify().mass(0.4)}
       style={[
-        { height: ITEM_HEIGHT, width: ITEM_WIDTH },
-        { paddingHorizontal: 12, flexDirection: 'row', alignItems: 'center' },
-        { borderRadius: 24, borderWidth: 1.33 },
+        {
+          alignItems: 'center',
+          borderCurve: 'continuous',
+          borderRadius: 24,
+          borderWidth: THICK_BORDER_WIDTH,
+          flexDirection: 'row',
+          height: ITEM_HEIGHT,
+          overflow: 'hidden',
+          paddingHorizontal: 12,
+          width: ITEM_WIDTH,
+        },
         animatedStyle,
       ]}
     >
@@ -358,6 +409,10 @@ const GAP = 12;
 const ITEM_WIDTH = (DEVICE_WIDTH - SHEET_INNER_PADDING * 2 - SHEET_OUTER_INSET * 2 - GAP) / 2;
 const ITEM_HEIGHT = 48;
 const SEPARATOR_HEIGHT = 68;
+
+const ALL_NETWORKS_BADGE_SIZE = 16;
+const THICKER_BORDER_WIDTH = 5 / 3;
+
 const enum Section {
   pinned,
   separator,
@@ -482,7 +537,7 @@ function SectionSeparator({
   const showMoreOrLessIcon = useDerivedValue(() => (expanded.value ? '􀆇' : '􀆈') as string);
   const showMoreOrLessIconStyle = useAnimatedStyle(() => ({ opacity: editing.value ? 0 : 1 }));
 
-  const { isDarkMode } = useTheme();
+  const { isDarkMode } = useColorMode();
 
   const separatorContainerStyles = useAnimatedStyle(() => {
     if (showExpandButtonAsNetworkChip.value) {
@@ -495,7 +550,7 @@ function SectionSeparator({
         flexDirection: 'row',
         alignItems: 'center',
         borderRadius: 24,
-        borderWidth: 1.33,
+        borderWidth: THICK_BORDER_WIDTH,
         transform: [{ translateX: position.x }, { translateY: position.y }],
       };
     }
@@ -559,13 +614,13 @@ function EmptyUnpinnedPlaceholder({
       transform: [{ translateY: sectionsOffsets.value[Section.unpinned].y }],
     };
   });
-  const { isDarkMode } = useTheme();
+  const { isDarkMode } = useColorMode();
   return (
     <Animated.View
       style={[
         { height: 48, width: '100%' },
         { paddingHorizontal: 12, flexDirection: 'row', alignItems: 'center' },
-        { borderRadius: 24, borderWidth: 1.33 },
+        { borderRadius: 24, borderWidth: THICK_BORDER_WIDTH },
         { backgroundColor: isDarkMode ? globalColors.white10 : globalColors.grey20, borderColor: '#F5F8FF05' },
         styles,
       ]}
@@ -743,7 +798,7 @@ function NetworksGrid({
 }
 
 function Sheet({ children, editing, onClose }: PropsWithChildren<{ editing: SharedValue<boolean>; onClose: VoidFunction }>) {
-  const { isDarkMode } = useTheme();
+  const { isDarkMode } = useColorMode();
   const surfacePrimary = useBackgroundColor('surfacePrimary');
   const backgroundColor = isDarkMode ? '#191A1C' : surfacePrimary;
   const separatorSecondary = useForegroundColor('separatorSecondary');
@@ -760,7 +815,7 @@ function Sheet({ children, editing, onClose }: PropsWithChildren<{ editing: Shar
           sx.sheet,
           {
             backgroundColor,
-            borderColor: separatorSecondary,
+            borderColor: isDarkMode ? separatorSecondary : globalColors.white100,
           },
         ]}
       >
@@ -789,6 +844,13 @@ export function NetworkSelector() {
 }
 
 const sx = StyleSheet.create({
+  overlappingBadge: {
+    borderWidth: THICKER_BORDER_WIDTH,
+    borderRadius: ALL_NETWORKS_BADGE_SIZE,
+    marginLeft: -9,
+    width: ALL_NETWORKS_BADGE_SIZE + THICKER_BORDER_WIDTH * 2,
+    height: ALL_NETWORKS_BADGE_SIZE + THICKER_BORDER_WIDTH * 2,
+  },
   sheet: {
     flex: 1,
     width: deviceUtils.dimensions.width - 16,
@@ -799,7 +861,9 @@ const sx = StyleSheet.create({
     left: 8,
     right: 8,
     paddingHorizontal: 16,
+    borderCurve: 'continuous',
     borderRadius: 42,
-    borderWidth: 1.33,
+    borderWidth: THICK_BORDER_WIDTH,
+    overflow: 'hidden',
   },
 });
diff --git a/src/components/coin-icon/ChainImage.tsx b/src/components/coin-icon/ChainImage.tsx
index 671296c8445..90f8ffbc960 100644
--- a/src/components/coin-icon/ChainImage.tsx
+++ b/src/components/coin-icon/ChainImage.tsx
@@ -89,5 +89,3 @@ export const ChainImage = forwardRef(function ChainImage(
     />
   );
 });
-
-export const AnimatedChainImage = Animated.createAnimatedComponent(ChainImage);
diff --git a/src/languages/en_US.json b/src/languages/en_US.json
index 4bfe7a65a0d..040e9da9ab7 100644
--- a/src/languages/en_US.json
+++ b/src/languages/en_US.json
@@ -3043,8 +3043,10 @@
           "TOP_LOSERS": "Top Losers"
         },
         "time": {
-          "H12": "12h",
-          "H24": "24h",
+          "H12": "12 Hours",
+          "H12_ABBREVIATED": "12h",
+          "H24": "24 Hours",
+          "H24_ABBREVIATED": "24h",
           "D7": "1 Week",
           "D3": "1 Month"
         }
@@ -3056,11 +3058,11 @@
         "tap_the": "Tap the",
         "button_to_set_up": "button below to set up"
       },
-      "drag_here_to_unpin": "Drag here to unpin networks",
+      "drag_here_to_unpin": "Drop Here to Unpin",
       "edit": "Edit",
       "networks": "Networks",
-      "drag_to_rearrange": "Drag to rearrange",
-      "show_less": "Show less",
+      "drag_to_rearrange": "Drag to Rearrange",
+      "show_less": "Show Less",
       "more": "More",
       "show_more": "More Networks",
       "all_networks": "All Networks"