From bd9c3f3b8c6c9bb42303ca58a94a1c67eb5b104c Mon Sep 17 00:00:00 2001 From: Matthew Wall Date: Thu, 19 Dec 2024 09:30:08 -0500 Subject: [PATCH] remove dependency on networkColors --- scripts/add_network.sh | 74 -------------------- src/components/cards/OpRewardsCard.tsx | 9 ++- src/resources/metadata/sharedQueries.js | 4 ++ src/screens/ExplainSheet.js | 21 +++--- src/state/backendNetworks/backendNetworks.ts | 14 ++++ src/state/backendNetworks/types.ts | 4 ++ src/styles/colors.ts | 46 ------------ 7 files changed, 40 insertions(+), 132 deletions(-) delete mode 100755 scripts/add_network.sh diff --git a/scripts/add_network.sh b/scripts/add_network.sh deleted file mode 100755 index 6750607038f..00000000000 --- a/scripts/add_network.sh +++ /dev/null @@ -1,74 +0,0 @@ -#!/bin/bash - -# Prompt for network details -read -p "Enter the network name (case sensitive): " networkName -read -p "Enter the chain ID (number): " chainId -read -p "Enter the light mode color (hex): " lightColor -read -p "Enter the dark mode color (hex): " darkColor - -# Create imagesets -mkdir -p "ios/Images.xcassets/badges/${networkName}.imageset" -mkdir -p "ios/Images.xcassets/badges/${networkName}Badge.imageset" -mkdir -p "ios/Images.xcassets/badges/${networkName}BadgeDark.imageset" -mkdir -p "ios/Images.xcassets/badges/${networkName}BadgeLarge.imageset" -mkdir -p "ios/Images.xcassets/badges/${networkName}BadgeLargeDark.imageset" -mkdir -p "ios/Images.xcassets/badges/${networkName}BadgeNoShadow.imageset" - -# Create Contents.json for each imageset -for suffix in "" "Badge" "BadgeDark" "BadgeLarge" "BadgeLargeDark" "BadgeNoShadow"; do - cat > "ios/Images.xcassets/badges/${networkName}${suffix}.imageset/Contents.json" << EOF -{ - "images" : [ - { - "filename" : "${networkName}${suffix}.png", - "idiom" : "universal", - "scale" : "1x" - }, - { - "filename" : "${networkName}${suffix}@2x.png", - "idiom" : "universal", - "scale" : "2x" - }, - { - "filename" : "${networkName}${suffix}@3x.png", - "idiom" : "universal", - "scale" : "3x" - } - ], - "info" : { - "author" : "xcode", - "version" : 1 - } -} -EOF -done - -# Update en_US.json -# Using perl for more precise JSON manipulation -perl -i -0pe 's/("explain":\s*{)/$1\n "'$networkName'": {\n "text": "",\n "title": "What'\''s '$networkName'?"\n },/m' src/languages/en_US.json - -# Update types.ts -# Add to Network enum -sed -i '' "/export enum Network {/a\\ - ${networkName} = '${networkName}', -" src/chains/types.ts - -# Add to ChainId enum -sed -i '' "/export enum ChainId {/a\\ - ${networkName} = ${chainId}, -" src/chains/types.ts - -# Update colors.ts for light mode - look for the first networkColors declaration -sed -i '' "/^ let networkColors = {/a\\ - [ChainId.${networkName}]: '${lightColor}', -" src/styles/colors.ts - -# Update colors.ts for dark mode - look specifically in the darkMode if block -sed -i '' "/if (darkMode) {/,/^ }/ { - /networkColors = {/a\\ - [ChainId.${networkName}]: '${darkColor}', -}" src/styles/colors.ts - -echo "Network ${networkName} has been added!" -echo "Note: You'll need to add the actual badge images to the imageset directories" -echo "Don't forget to run prettier to format the modified files" \ No newline at end of file diff --git a/src/components/cards/OpRewardsCard.tsx b/src/components/cards/OpRewardsCard.tsx index 3c1251010b3..16ab367f467 100644 --- 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 ( - + { 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: ( - + { 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: ( - + { 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: ( - + (backendNetworksQueryKey()) ?? buildTimeNetworks; const DEFAULT_PRIVATE_MEMPOOL_TIMEOUT = 2 * 60 * 1_000; // 2 minutes @@ -31,6 +32,8 @@ export interface BackendNetworksState { getChainsName: () => Record; getChainsIdByName: () => Record; + getColorsForChainId: (chainId: ChainId, isDarkMode: boolean) => string; + defaultGasSpeeds: (chainId: ChainId) => GasSpeed[]; getChainsGasSpeeds: () => Record; @@ -163,6 +166,17 @@ export const useBackendNetworksStore = createRainbowStore( ); }, + 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 index ab84a34b120..bc5ea01c827 100644 --- 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 index 04d23086e48..2deaa5ba2f4 100644 --- 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; @@ -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,