trending tokens + network selector + explain sheet remove local netwo…

…rkColors (#6363)
rainbow-me · Dec 20, 2024 · 011df97 · 011df97
1 parent 05364a9
commit 011df97
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 15 deletions.
diff --git a/src/components/Discover/TrendingTokens.tsx b/src/components/Discover/TrendingTokens.tsx
@@ -1,4 +1,4 @@
-import { DropdownMenu, MenuItem } from '@/components/DropdownMenu';
+import { DropdownMenu } from '@/components/DropdownMenu';
 import { globalColors, Text, TextIcon, useBackgroundColor, useColorMode } from '@/design-system';
 import { useForegroundColor } from '@/design-system/color/useForegroundColor';
 
@@ -19,7 +19,6 @@ import { swapsStore } from '@/state/swaps/swapsStore';
 import { sortFilters, timeFilters, useTrendingTokensStore } from '@/state/trendingTokens/trendingTokens';
 import { colors } from '@/styles';
 import { darkModeThemeColors } from '@/styles/colors';
-import { useTheme } from '@/theme';
 import { useCallback, useEffect, useMemo } from 'react';
 import React, { Dimensions, FlatList, View } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
@@ -514,26 +513,27 @@ function NoResults() {
 
 function NetworkFilter() {
   const { isDarkMode } = useColorMode();
-  const { colors } = useTheme();
 
   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 };
+    const lightenedNetworkColor = useBackendNetworksStore.getState().getColorsForChainId(chainId, isDarkMode);
+
     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)
+      lightenedNetworkColor: lightenedNetworkColor
+        ? getMixedColor(lightenedNetworkColor, globalColors.white100, isDarkMode ? 0.55 : 0.6)
         : undefined,
     };
-  }, [chainId, colors.networkColors, isDarkMode]);
+  }, [chainId, isDarkMode]);
 
   const setSelected = useCallback(
     (chainId: ChainId | undefined) => {

diff --git a/src/components/NetworkSwitcher.tsx b/src/components/NetworkSwitcher.tsx
@@ -373,9 +373,10 @@ function AllNetworksSection({
 }
 
 function NetworkOption({ chainId, selected }: { chainId: ChainId; selected: SharedValue<ChainId | undefined> }) {
-  const { colors } = useTheme();
+  const { isDarkMode } = useColorMode();
+  const getColorsForChainId = useBackendNetworksStore(state => state.getColorsForChainId);
   const chainName = useBackendNetworksStore.getState().getChainsLabel()[chainId];
-  const chainColor = colors.networkColors[chainId] ? colors.networkColors[chainId] : undefined;
+  const chainColor = getColorsForChainId(chainId, isDarkMode);
   const isSelected = useDerivedValue(() => selected.value === chainId);
   const { animatedStyle } = useNetworkOptionStyle(isSelected, chainColor);
 

diff --git a/src/screens/ExplainSheet.js b/src/screens/ExplainSheet.js
@@ -733,7 +733,7 @@ export const explainers = (params, theme) => {
     },
     swap_refuel_add: {
       logo: (
-        <DashedWrapper size={50} childXPosition={10} colors={[colors?.networkColors[chainId], colors?.appleBlue]}>
+        <DashedWrapper size={50} childXPosition={10} colors={[color, colors?.appleBlue]}>
           <RainbowCoinIcon
             size={30}
             icon={params?.nativeAsset?.icon_url}
@@ -764,14 +764,14 @@ export const explainers = (params, theme) => {
           networkName: params?.networkName,
           gasToken: params?.gasToken,
         }),
-        textColor: colors?.networkColors[chainId],
-        bgColor: colors?.networkColors[chainId] && colors?.alpha(colors?.networkColors[chainId], 0.05),
+        textColor: color,
+        bgColor: color && colors?.alpha(color, 0.05),
         onPress: params?.onRefuel,
       },
     },
     swap_refuel_deduct: {
       logo: (
-        <DashedWrapper size={50} childXPosition={10} colors={[colors?.networkColors[chainId], colors?.appleBlue]}>
+        <DashedWrapper size={50} childXPosition={10} colors={[color, colors?.appleBlue]}>
           <RainbowCoinIcon
             size={30}
             icon={params?.nativeAsset?.icon_url}
@@ -802,15 +802,15 @@ export const explainers = (params, theme) => {
           networkName: params?.networkName,
           gasToken: params?.gasToken,
         }),
-        textColor: colors?.networkColors[chainId],
-        bgColor: colors?.networkColors[chainId] && colors?.alpha(colors?.networkColors[chainId], 0.05),
+        textColor: color,
+        bgColor: color && colors?.alpha(color, 0.05),
         onPress: params?.onRefuel,
       },
     },
     swap_refuel_notice: {
       extraHeight: 50,
       logo: (
-        <DashedWrapper size={50} childXPosition={10} colors={[colors?.networkColors[chainId], colors?.appleBlue]}>
+        <DashedWrapper size={50} childXPosition={10} colors={[color, colors?.appleBlue]}>
           <RainbowCoinIcon
             size={30}
             icon={params?.nativeAsset?.icon_url}