remove dependency on networkColors

rainbow-me · Dec 19, 2024 · bd9c3f3 · bd9c3f3
1 parent a3547f3
commit bd9c3f3
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 132 deletions.
diff --git a/scripts/add_network.sh b/scripts/add_network.sh
diff --git a/src/components/cards/OpRewardsCard.tsx b/src/components/cards/OpRewardsCard.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import { GenericCard, Gradient } from './GenericCard';
-import { AccentColorProvider, Box, Cover, globalColors, Stack, Text } from '@/design-system';
+import { AccentColorProvider, Box, Cover, globalColors, Stack, Text, useColorMode } from '@/design-system';
 import { ButtonPressAnimation } from '@/components/animations';
 import { Image } from 'react-native';
 import OpRewardsCardBackgroundImage from '../../assets/opRewardsCardBackgroundImage.png';
 import * as i18n from '@/languages';
 import { useNavigation } from '@/navigation';
 import Routes from '@/navigation/routesNames';
-import { colors } from '@/styles';
 import { ChainId } from '@/state/backendNetworks/types';
+import { useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';
 
 const GRADIENT: Gradient = {
   colors: ['#520907', '#B22824'],
@@ -18,13 +18,16 @@ const GRADIENT: Gradient = {
 
 export const OpRewardsCard: React.FC = () => {
   const { navigate } = useNavigation();
+  const { isDarkMode } = useColorMode();
+
+  const color = useBackendNetworksStore.getState().getColorsForChainId(ChainId.optimism, isDarkMode);
 
   const navigateToRewardsSheet = () => {
     navigate(Routes.OP_REWARDS_SHEET);
   };
 
   return (
-    <AccentColorProvider color={colors.networkColors[ChainId.optimism]}>
+    <AccentColorProvider color={color}>
       <GenericCard type="stretch" gradient={GRADIENT} onPress={navigateToRewardsSheet} color="accent">
         <Cover>
           <Box

diff --git a/src/resources/metadata/sharedQueries.js b/src/resources/metadata/sharedQueries.js
@@ -4,6 +4,10 @@ const BACKEND_NETWORKS_QUERY = `
       id
       name
       label
+      colors {
+        light
+        dark
+      }
       icons {
         badgeURL
       }

diff --git a/src/screens/ExplainSheet.js b/src/screens/ExplainSheet.js
@@ -172,6 +172,9 @@ export const explainers = (params, theme) => {
   const chainId = params?.chainId;
   const fromChainId = params?.fromChainId;
   const toChainId = params?.toChainId;
+  const isDarkMode = theme?.isDarkMode;
+
+  const color = useBackendNetworksStore.getState().getColorsForChainId(chainId, isDarkMode);
 
   const chainsLabel = useBackendNetworksStore.getState().getChainsLabel();
 
@@ -432,8 +435,8 @@ export const explainers = (params, theme) => {
     swapResetInputs: {
       button: {
         label: `Continue with ${chainsLabel[chainId]}`,
-        bgColor: colors?.networkColors[chainId] && colors?.alpha(colors?.networkColors[chainId], 0.06),
-        textColor: colors?.networkColors?.[chainId],
+        bgColor: color && colors?.alpha(color, 0.06),
+        textColor: color,
       },
       emoji: '🔐',
       extraHeight: -90,
@@ -730,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}
@@ -761,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}
@@ -799,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}

diff --git a/src/state/backendNetworks/backendNetworks.ts b/src/state/backendNetworks/backendNetworks.ts
@@ -9,6 +9,7 @@ import { IS_TEST } from '@/env';
 import { BackendNetwork, BackendNetworkServices, chainHardhat, chainHardhatOptimism, ChainId } from '@/state/backendNetworks/types';
 import { GasSpeed } from '@/__swaps__/types/gas';
 import { useConnectedToHardhatStore } from '@/state/connectedToHardhat';
+import { colors as globalColors } from '@/styles';
 
 const INITIAL_BACKEND_NETWORKS = queryClient.getQueryData<BackendNetworksResponse>(backendNetworksQueryKey()) ?? buildTimeNetworks;
 const DEFAULT_PRIVATE_MEMPOOL_TIMEOUT = 2 * 60 * 1_000; // 2 minutes
@@ -31,6 +32,8 @@ export interface BackendNetworksState {
   getChainsName: () => Record<ChainId, string>;
   getChainsIdByName: () => Record<string, ChainId>;
 
+  getColorsForChainId: (chainId: ChainId, isDarkMode: boolean) => string;
+
   defaultGasSpeeds: (chainId: ChainId) => GasSpeed[];
 
   getChainsGasSpeeds: () => Record<ChainId, GasSpeed[]>;
@@ -163,6 +166,17 @@ export const useBackendNetworksStore = createRainbowStore<BackendNetworksState>(
     );
   },
 
+  getColorsForChainId: (chainId: ChainId, isDarkMode: boolean) => {
+    const { backendNetworks } = get();
+
+    const colors = backendNetworks.networks.find(chain => +chain.id === chainId)?.colors;
+    if (!colors) {
+      return isDarkMode ? globalColors.white : globalColors.black;
+    }
+
+    return isDarkMode ? colors.dark : colors.light;
+  },
+
   // TODO: This should come from the backend at some point
   defaultGasSpeeds: chainId => {
     switch (chainId) {

diff --git a/src/state/backendNetworks/types.ts b/src/state/backendNetworks/types.ts
@@ -168,6 +168,10 @@ export interface BackendNetwork {
   id: string;
   name: string;
   label: string;
+  colors: {
+    light: string;
+    dark: string;
+  };
   icons: {
     badgeURL: string;
   };

diff --git a/src/styles/colors.ts b/src/styles/colors.ts
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { globalColors } from '@/design-system';
 import currentColors from '../theme/currentColors';
 import { memoFn } from '../utils/memoFn';
-import { ChainId } from '@/state/backendNetworks/types';
 
 export type Colors = ReturnType<typeof getColorsByTheme>;
 
@@ -186,28 +185,6 @@ const getColorsByTheme = (darkMode?: boolean) => {
     },
   };
 
-  let networkColors = {
-    [ChainId.zksync]: '#25292E',
-    [ChainId.sanko]: '#594BA7',
-    [ChainId.scroll]: '#A6855D',
-    [ChainId.linea]: '#25292E',
-    [ChainId.gravity]: '#B75E2C',
-    [ChainId.ink]: '#7132F5',
-    [ChainId.arbitrum]: '#2D374B',
-    [ChainId.base]: '#0052FF',
-    [ChainId.goerli]: '#f6c343',
-    [ChainId.gnosis]: '#133629',
-    [ChainId.mainnet]: '#25292E',
-    [ChainId.optimism]: '#FF4040',
-    [ChainId.polygon]: '#8247E5',
-    [ChainId.bsc]: '#F0B90B',
-    [ChainId.zora]: '#2B5DF0',
-    [ChainId.avalanche]: '#E84142',
-    [ChainId.degen]: '#A36EFD',
-    [ChainId.blast]: '#25292E',
-    [ChainId.apechain]: '#0054FA',
-  };
-
   let gradients = {
     appleBlueTintToAppleBlue: ['#15B1FE', base.appleBlue],
     blueToGreen: ['#4764F7', '#23D67F'],
@@ -334,28 +311,6 @@ const getColorsByTheme = (darkMode?: boolean) => {
       secondGradient: '#12131A80',
       thirdGradient: '#12131Aff',
     };
-
-    networkColors = {
-      [ChainId.zksync]: '#FFFFFF',
-      [ChainId.sanko]: '#7F6FC9',
-      [ChainId.scroll]: '#EBC28E',
-      [ChainId.linea]: '#FFFFFF',
-      [ChainId.gravity]: '#B75E2C',
-      [ChainId.ink]: '#864DFF',
-      [ChainId.arbitrum]: '#ADBFE3',
-      [ChainId.base]: '#3979FF',
-      [ChainId.goerli]: '#f6c343',
-      [ChainId.gnosis]: '#F0EBDE',
-      [ChainId.mainnet]: '#E0E8FF',
-      [ChainId.optimism]: '#FF6A6A',
-      [ChainId.polygon]: '#A275EE',
-      [ChainId.bsc]: '#F0B90B',
-      [ChainId.zora]: '#6183F0',
-      [ChainId.avalanche]: '#FF5D5E',
-      [ChainId.degen]: '#A36EFD',
-      [ChainId.blast]: '#FCFC03',
-      [ChainId.apechain]: '#397BFF',
-    };
   }
 
   return {
@@ -370,7 +325,6 @@ const getColorsByTheme = (darkMode?: boolean) => {
     isColorDark,
     isColorLight,
     listHeaders,
-    networkColors,
     sendScreen,
     ...base,
     ...transparent,
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,6 +4,10 @@ const BACKEND_NETWORKS_QUERY = ` @@
           id
           name
           label
+          colors {
+            light
+            dark
+          }
           icons {
             badgeURL
           }
@@ Expand Down @@