Fix most chain badge issues

rainbow-me · Jan 17, 2025 · 636eceb · 636eceb
1 parent 60e97f8
commit 636eceb
Show file tree

Hide file tree

Showing 37 changed files with 245 additions and 290 deletions.
diff --git a/src/__swaps__/screens/Swap/components/AnimatedChainImage.android.tsx b/src/__swaps__/screens/Swap/components/AnimatedChainImage.android.tsx
@@ -1,12 +1,11 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import React, { useMemo } from 'react';
 import { Image, StyleSheet, View } from 'react-native';
-
-import { ChainId } from '@/state/backendNetworks/types';
-import { globalColors } from '@/design-system';
-import { PIXEL_RATIO } from '@/utils/deviceUtils';
-import { useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';
 import { DerivedValue } from 'react-native-reanimated';
+import { getChainBadgeStyles } from '@/components/coin-icon/ChainImage';
+import { globalColors, useColorMode } from '@/design-system';
+import { useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';
+import { ChainId } from '@/state/backendNetworks/types';
 
 export function AnimatedChainImage({
   chainId,
@@ -29,9 +28,15 @@ export function AnimatedChainImage({
     return source;
   }, [chainId, showMainnetBadge]);
 
+  const { isDarkMode } = useColorMode();
+  const { containerStyle, iconStyle } = useMemo(
+    () => getChainBadgeStyles({ badgeXPosition: -size / 2, badgeYPosition: 0, isDarkMode, position: 'absolute', size }),
+    [isDarkMode, size]
+  );
+
   return (
-    <View style={[sx.badge, { borderRadius: size / 2, height: size, width: size, bottom: -size / 2 + 2, left: -size / 2 + 2 }]}>
-      <Image resizeMode="cover" source={iconSource} style={{ width: size, height: size, borderRadius: (size / 2) * PIXEL_RATIO }} />
+    <View style={containerStyle}>
+      <Image resizeMode="cover" source={iconSource} style={iconStyle} />
     </View>
   );
 }

diff --git a/src/__swaps__/screens/Swap/components/AnimatedChainImage.ios.tsx b/src/__swaps__/screens/Swap/components/AnimatedChainImage.ios.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
-
-import { ChainId } from '@/state/backendNetworks/types';
 import { DerivedValue, useAnimatedProps, useDerivedValue } from 'react-native-reanimated';
 import { AnimatedFasterImage } from '@/components/AnimatedComponents/AnimatedFasterImage';
-import { DEFAULT_FASTER_IMAGE_CONFIG } from '@/components/images/ImgixImage';
-import { globalColors } from '@/design-system';
 import { BLANK_BASE64_PIXEL } from '@/components/DappBrowser/constants';
+import { getChainBadgeStyles } from '@/components/coin-icon/ChainImage';
+import { DEFAULT_FASTER_IMAGE_CONFIG } from '@/components/images/ImgixImage';
+import { globalColors, useColorMode } from '@/design-system';
 import { getChainsBadgeWorklet, useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';
+import { ChainId } from '@/state/backendNetworks/types';
 
 export function AnimatedChainImage({
   chainId,
@@ -34,16 +34,21 @@ export function AnimatedChainImage({
     source: {
       ...DEFAULT_FASTER_IMAGE_CONFIG,
       base64Placeholder: BLANK_BASE64_PIXEL,
-      borderRadius: size / 2,
       url: url.value,
     },
   }));
 
+  const { isDarkMode } = useColorMode();
+  const { containerStyle, iconStyle } = useMemo(
+    () => getChainBadgeStyles({ badgeXPosition: -size / 2, badgeYPosition: 0, isDarkMode, position: 'absolute', size }),
+    [isDarkMode, size]
+  );
+
   return (
-    <View style={[sx.badge, { borderRadius: size / 2, height: size, width: size, bottom: -size / 2 + 2, left: -size / 2 + 2 }]}>
+    <View style={containerStyle}>
       {/* ⚠️ TODO: This works but we should figure out how to type this correctly to avoid this error */}
       {/* @ts-expect-error: Doesn't pick up that it's getting a source prop via animatedProps */}
-      <AnimatedFasterImage style={{ height: size, width: size }} animatedProps={animatedIconSource} />
+      <AnimatedFasterImage style={iconStyle} animatedProps={animatedIconSource} />
     </View>
   );
 }

diff --git a/src/__swaps__/screens/Swap/components/CoinRow.tsx b/src/__swaps__/screens/Swap/components/CoinRow.tsx
@@ -133,11 +133,7 @@ export function CoinRow({ isFavorite, onPress, output, uniqueId, testID, ...asse
                     chainId={chainId}
                     symbol={symbol || ''}
                     color={colors?.primary}
-                    chainSize={28}
-                    chainBadgePosition={{
-                      x: -12,
-                      y: -6,
-                    }}
+                    chainSize={16}
                   />
                   <Box gap={10} flexShrink={1} justifyContent="center">
                     <Text color="label" size="17pt" weight="semibold" numberOfLines={1} ellipsizeMode="tail">

diff --git a/src/__swaps__/screens/Swap/components/SwapInputAsset.tsx b/src/__swaps__/screens/Swap/components/SwapInputAsset.tsx
@@ -98,7 +98,7 @@ function SwapInputIcon() {
 
   return (
     <Box paddingRight="10px">
-      <AnimatedSwapCoinIcon asset={internalSelectedInputAsset} size={36} chainSize={28} />
+      <AnimatedSwapCoinIcon asset={internalSelectedInputAsset} size={36} chainSize={16} />
     </Box>
   );
 }

diff --git a/src/__swaps__/screens/Swap/components/SwapOutputAsset.tsx b/src/__swaps__/screens/Swap/components/SwapOutputAsset.tsx
@@ -110,7 +110,7 @@ function SwapOutputIcon() {
 
   return (
     <Box paddingRight="10px">
-      <AnimatedSwapCoinIcon asset={internalSelectedOutputAsset} size={36} chainSize={28} />
+      <AnimatedSwapCoinIcon asset={internalSelectedOutputAsset} size={36} chainSize={16} />
     </Box>
   );
 }

diff --git a/src/__swaps__/screens/Swap/components/TokenList/ChainSelection.tsx b/src/__swaps__/screens/Swap/components/TokenList/ChainSelection.tsx
@@ -174,12 +174,11 @@ const ChainButtonIcon = ({ output }: { output: boolean | undefined }) => {
       {output ? (
         <ChainImage
           chainId={selectedOutputChainId ?? animatedSelectedOutputChainId.value ?? ChainId.mainnet}
-          size={24}
-          badgeXPosition={-20}
-          badgeYPosition={-8}
+          position="relative"
+          size={16}
         />
       ) : userAssetsFilter && userAssetsFilter !== 'all' ? (
-        <ChainImage chainId={userAssetsFilter} size={24} badgeXPosition={-20} badgeYPosition={-8} />
+        <ChainImage chainId={userAssetsFilter} size={16} position="relative" />
       ) : (
         <></>
       )}

diff --git a/src/components/DappBrowser/control-panel/ControlPanel.tsx b/src/components/DappBrowser/control-panel/ControlPanel.tsx
@@ -186,7 +186,7 @@ export const ControlPanel = () => {
       .filter(({ testnet }) => testnetsEnabled || !testnet)
       .map(chain => {
         return {
-          IconComponent: <ChainImage chainId={chain.id} size={44} />,
+          IconComponent: <ChainImage chainId={chain.id} position="relative" size={36} />,
           label: useBackendNetworksStore.getState().getChainsLabel()[chain.id],
           secondaryLabel: i18n.t(
             isConnected && chain.id === currentChainId

diff --git a/src/components/Discover/TrendingTokens.tsx b/src/components/Discover/TrendingTokens.tsx
@@ -384,16 +384,7 @@ function TrendingTokenRow({ token }: { token: TrendingToken }) {
           alignItems: 'center',
         }}
       >
-        <RainbowCoinIcon
-          icon={token.icon_url}
-          color={token.colors.primary}
-          chainId={token.chainId}
-          symbol={token.symbol}
-          chainBadgePosition={{
-            x: -12,
-            y: -6,
-          }}
-        />
+        <RainbowCoinIcon icon={token.icon_url} color={token.colors.primary} chainId={token.chainId} symbol={token.symbol} />
 
         <View style={{ gap: 12, flex: 1 }}>
           <FriendHolders friends={token.highlightedFriends} />

diff --git a/src/components/DropdownMenu.tsx b/src/components/DropdownMenu.tsx
@@ -49,7 +49,7 @@ export type MenuItem<T> = Omit<MenuActionConfig, 'icon'> & {
   actionKey: T;
   actionTitle: string;
   destructive?: boolean;
-  icon?: MenuItemIcon | { iconType: string; iconValue: string };
+  icon?: MenuItemIcon | { iconType: string; iconValue: string | ImageSourcePropType };
 };
 
 export type MenuConfig<T extends string> = Omit<_MenuConfig, 'menuItems' | 'menuTitle'> & {

diff --git a/src/components/ExchangeTokenRow.tsx b/src/components/ExchangeTokenRow.tsx
@@ -58,14 +58,10 @@ export default React.memo(function ExchangeTokenRow({
             <Column width="content">
               <View style={{ height: 59, paddingTop: 9 }}>
                 <RainbowCoinIcon
-                  icon={item?.icon_url || ''}
                   chainId={chainId}
-                  symbol={item?.symbol || symbol}
                   color={item?.colors?.primary || item?.colors?.fallback || undefined}
-                  chainBadgePosition={{
-                    x: -12,
-                    y: -6,
-                  }}
+                  icon={item?.icon_url || ''}
+                  symbol={item?.symbol || symbol}
                 />
               </View>
             </Column>

diff --git a/src/components/L2Disclaimer.js b/src/components/L2Disclaimer.js
@@ -38,9 +38,10 @@ const L2Disclaimer = ({
       <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} />
-          <ChainImage chainId={chainId} size={24} badgeXPosition={5} badgeYPosition={8.5} />
-
-          <Column flex={1} justify="center" marginHorizontal={24}>
+          <Column justify="center">
+            <ChainImage chainId={chainId} position="relative" size={20} />
+          </Column>
+          <Column flex={1} justify="center" marginHorizontal={8}>
             <Text
               color={prominent ? colors.alpha(localColors.blueGreyDark, 0.8) : colors.alpha(localColors.blueGreyDark, 0.6)}
               numberOfLines={2}

diff --git a/src/components/asset-list/RecyclerAssetList2/Claimable.tsx b/src/components/asset-list/RecyclerAssetList2/Claimable.tsx
@@ -97,13 +97,7 @@ export const Claimable = React.memo(function Claimable({ uniqueId, extendedState
         <Box borderRadius={11} borderWidth={1} borderColor={{ custom: 'rgba(0, 0, 0, 0.03)' }}>
           <FasterImageView source={{ url: isETHRewards ? RAINBOW_ICON_URL : claimable?.iconUrl }} style={{ height: 40, width: 40 }} />
         </Box>
-        <ChainImage
-          chainId={isETHRewards ? ChainId.mainnet : claimable?.chainId}
-          size={28}
-          position="absolute"
-          badgeXPosition={-10}
-          badgeYPosition={-10}
-        />
+        <ChainImage badgeXPosition={-10} chainId={isETHRewards ? ChainId.mainnet : claimable?.chainId} size={20} />
         <Stack space={{ custom: 11 }}>
           <Text
             weight="semibold"

diff --git a/src/components/asset-list/RecyclerAssetList2/FastComponents/FastBalanceCoinRow.tsx b/src/components/asset-list/RecyclerAssetList2/FastComponents/FastBalanceCoinRow.tsx
@@ -104,7 +104,6 @@ const MemoizedBalanceCoinRow = React.memo(
                 chainId={chainId}
                 symbol={item?.symbol || ''}
                 color={item?.colors?.primary || item?.colors?.fallback || undefined}
-                chainBadgePosition={{ x: -12, y: -6 }}
               />
             </View>
 

diff --git a/src/components/asset-list/RecyclerAssetList2/FastComponents/FastCurrencySelectionRow.tsx b/src/components/asset-list/RecyclerAssetList2/FastComponents/FastCurrencySelectionRow.tsx
@@ -119,14 +119,10 @@ export default React.memo(function FastCurrencySelectionRow({
         <View style={sx.rootContainer}>
           <View style={sx.iconContainer}>
             <RainbowCoinIcon
-              icon={item?.iconUrl || ''}
               chainId={chainId}
-              symbol={item?.symbol || symbol}
               color={item?.colors?.primary || item?.colors?.fallback || undefined}
-              chainBadgePosition={{
-                x: -12,
-                y: -6,
-              }}
+              icon={item?.iconUrl || ''}
+              symbol={item?.symbol || symbol}
             />
           </View>
           <View style={sx.innerContainer}>