Chain Badge consolidation & backend delivery

src/components/L2Disclaimer.js

@@ -8,8 +8,6 @@ import { Text } from './text';
 import { padding, position } from '@/styles';
 import { darkModeThemeColors } from '@/styles/colors';
 import * as lang from '@/languages';
-import { isL2Chain } from '@/handlers/web3';
-import { EthCoinIcon } from './coin-icon/EthCoinIcon';
 import { useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';
 
 const L2Disclaimer = ({
@@ -23,7 +21,6 @@ const L2Disclaimer = ({
   prominent,
   customText,
   symbol,
-  forceDarkMode,
 }) => {
   const localColors = isNft ? darkModeThemeColors : colors;
   const radialGradientProps = {
@@ -36,15 +33,13 @@ const L2Disclaimer = ({
     },
   };
 
-  const isL2 = isL2Chain({ chainId });
-
   return (
     <>
       <ButtonPressAnimation marginBottom={marginBottom} onPress={onPress} scaleTo={0.95}>
         <Row borderRadius={16} marginHorizontal={marginHorizontal} style={padding.object(android ? 6 : 10, 10, android ? 6 : 10, 10)}>
           <RadialGradient {...radialGradientProps} borderRadius={16} radius={600} />
           <Column justify="center">
-            {isL2 ? <ChainBadge chainId={chainId} position="relative" size="small" forceDark={forceDarkMode} /> : <EthCoinIcon size={20} />}
+            <ChainBadge chainId={chainId} position="relative" size="small" />
           </Column>
           <Column flex={1} justify="center" marginHorizontal={8}>
             <Text

src/components/coin-icon/ChainBadge.js

@@ -1,50 +1,10 @@
 import React from 'react';
 import FastImage from 'react-native-fast-image';
-import ArbitrumBadge from '../../assets/badges/arbitrumBadge.png';
-import ArbitrumBadgeDark from '../../assets/badges/arbitrumBadgeDark.png';
-import ArbitrumBadgeLarge from '../../assets/badges/arbitrumBadgeLarge.png';
-import ArbitrumBadgeLargeDark from '../../assets/badges/arbitrumBadgeLargeDark.png';
-import OptimismBadge from '../../assets/badges/optimismBadge.png';
-import OptimismBadgeDark from '../../assets/badges/optimismBadgeDark.png';
-import OptimismBadgeLarge from '../../assets/badges/optimismBadgeLarge.png';
-import OptimismBadgeLargeDark from '../../assets/badges/optimismBadgeLargeDark.png';
-import PolygonBadge from '../../assets/badges/polygonBadge.png';
-import PolygonBadgeDark from '../../assets/badges/polygonBadgeDark.png';
-import PolygonBadgeLarge from '../../assets/badges/polygonBadgeLarge.png';
-import PolygonBadgeLargeDark from '../../assets/badges/polygonBadgeLargeDark.png';
-import BscBadge from '../../assets/badges/bscBadge.png';
-import BscBadgeDark from '../../assets/badges/bscBadgeDark.png';
-import BscBadgeLarge from '../../assets/badges/bscBadgeLarge.png';
-import BscBadgeLargeDark from '../../assets/badges/bscBadgeLargeDark.png';
-import ZoraBadge from '../../assets/badges/zoraBadge.png';
-import ZoraBadgeDark from '../../assets/badges/zoraBadgeDark.png';
-import ZoraBadgeLarge from '../../assets/badges/zoraBadgeLarge.png';
-import ZoraBadgeLargeDark from '../../assets/badges/zoraBadgeLargeDark.png';
-import BaseBadge from '../../assets/badges/baseBadge.png';
-import BaseBadgeDark from '../../assets/badges/baseBadgeDark.png';
-import BaseBadgeLarge from '../../assets/badges/baseBadgeLarge.png';
-import BaseBadgeLargeDark from '../../assets/badges/baseBadgeLargeDark.png';
-import AvalancheBadge from '../../assets/badges/avalancheBadge.png';
-import AvalancheBadgeDark from '../../assets/badges/avalancheBadgeDark.png';
-import AvalancheBadgeLarge from '../../assets/badges/avalancheBadgeLarge.png';
-import AvalancheBadgeLargeDark from '../../assets/badges/avalancheBadgeLargeDark.png';
-import BlastBadge from '../../assets/badges/blastBadge.png';
-import BlastBadgeDark from '../../assets/badges/blastBadgeDark.png';
-import BlastBadgeLarge from '../../assets/badges/blastBadgeLarge.png';
-import BlastBadgeLargeDark from '../../assets/badges/blastBadgeLargeDark.png';
-import DegenBadge from '../../assets/badges/degenBadge.png';
-import DegenBadgeDark from '../../assets/badges/degenBadgeDark.png';
-import DegenBadgeLarge from '../../assets/badges/degenBadgeLarge.png';
-import DegenBadgeLargeDark from '../../assets/badges/degenBadgeLargeDark.png';
-import ApechainBadge from '../../assets/badges/apechainBadge.png';
-import ApechainBadgeDark from '../../assets/badges/apechainBadgeDark.png';
-import ApechainBadgeLarge from '../../assets/badges/apechainBadgeLarge.png';
-import ApechainBadgeLargeDark from '../../assets/badges/apechainBadgeLargeDark.png';
 import { Centered } from '../layout';
 import styled from '@/styled-thing';
 import { position as positions } from '@/styles';
 import { ChainBadgeSizeConfigs } from '@/components/coin-icon/ChainBadgeSizeConfigs';
-import { ChainId } from '@/state/backendNetworks/types';
+import { useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';
 
 const ChainIcon = styled(FastImage)({
   height: ({ containerSize }) => containerSize,
@@ -70,64 +30,11 @@ export default function ChainBadge({
   marginBottom = 0,
   position = 'absolute',
   size = 'small',
-  forceDark = false,
+  showBadge = true,
 }) {
-  const { isDarkMode: isDarkModeGlobal } = useTheme();
   const { containerSize, iconSize } = ChainBadgeSizeConfigs[size];
-
-  const isDarkMode = forceDark ? true : isDarkModeGlobal;
-
-  const source = useMemo(() => {
-    let val = null;
-    if (size === 'large') {
-      if (chainId === ChainId.apechain) {
-        val = isDarkMode ? ApechainBadgeLargeDark : ApechainBadgeLarge;
-      } else if (chainId === ChainId.arbitrum) {
-        val = isDarkMode ? ArbitrumBadgeLargeDark : ArbitrumBadgeLarge;
-      } else if (chainId === ChainId.optimism) {
-        val = isDarkMode ? OptimismBadgeLargeDark : OptimismBadgeLarge;
-      } else if (chainId === ChainId.polygon) {
-        val = isDarkMode ? PolygonBadgeLargeDark : PolygonBadgeLarge;
-      } else if (chainId === ChainId.bsc) {
-        val = isDarkMode ? BscBadgeLargeDark : BscBadgeLarge;
-      } else if (chainId === ChainId.zora) {
-        val = isDarkMode ? ZoraBadgeLargeDark : ZoraBadgeLarge;
-      } else if (chainId === ChainId.base) {
-        val = isDarkMode ? BaseBadgeLargeDark : BaseBadgeLarge;
-      } else if (chainId === ChainId.avalanche) {
-        val = isDarkMode ? AvalancheBadgeLargeDark : AvalancheBadgeLarge;
-      } else if (chainId === ChainId.blast) {
-        val = isDarkMode ? BlastBadgeLargeDark : BlastBadgeLarge;
-      } else if (chainId === ChainId.degen) {
-        val = isDarkMode ? DegenBadgeLargeDark : DegenBadgeLarge;
-      }
-    } else {
-      if (chainId === ChainId.apechain) {
-        val = isDarkMode ? ApechainBadgeDark : ApechainBadge;
-      } else if (chainId === ChainId.arbitrum) {
-        val = isDarkMode ? ArbitrumBadgeDark : ArbitrumBadge;
-      } else if (chainId === ChainId.optimism) {
-        val = isDarkMode ? OptimismBadgeDark : OptimismBadge;
-      } else if (chainId === ChainId.polygon) {
-        val = isDarkMode ? PolygonBadgeDark : PolygonBadge;
-      } else if (chainId === ChainId.bsc) {
-        val = isDarkMode ? BscBadgeDark : BscBadge;
-      } else if (chainId === ChainId.zora) {
-        val = isDarkMode ? ZoraBadgeDark : ZoraBadge;
-      } else if (chainId === ChainId.base) {
-        val = isDarkMode ? BaseBadgeDark : BaseBadge;
-      } else if (chainId === ChainId.avalanche) {
-        val = isDarkMode ? AvalancheBadgeDark : AvalancheBadge;
-      } else if (chainId === ChainId.blast) {
-        val = isDarkMode ? BlastBadgeDark : BlastBadge;
-      } else if (chainId === ChainId.degen) {
-        val = isDarkMode ? DegenBadgeDark : DegenBadge;
-      }
-    }
-    return val;
-  }, [chainId, isDarkMode, size]);
-
-  if (!source) return null;
+  const chainBadge = useBackendNetworksStore.getState().getChainsBadge()[chainId];
+  if (!chainBadge || !showBadge) return null;
 
   return (
     <IndicatorIconContainer
@@ -137,7 +44,7 @@ export default function ChainBadge({
       marginBottom={marginBottom}
       position={position}
     >
-      <ChainIcon containerSize={containerSize} iconSize={iconSize} source={source} />
+      <ChainIcon containerSize={containerSize} iconSize={iconSize} source={{ uri: chainBadge }} />
     </IndicatorIconContainer>
   );
 }