From e9f75420eb7358b69ac534927712bfa2a657b184 Mon Sep 17 00:00:00 2001
From: Matthew Wall <matthew.wallt@gmail.com>
Date: Mon, 16 Dec 2024 15:41:24 -0500
Subject: [PATCH] more badge sizing fixes

---
 src/__swaps__/screens/Swap/components/ReviewPanel.tsx     | 8 ++++----
 .../screens/Swap/components/TokenList/ChainSelection.tsx  | 6 +++---
 src/components/context-menu-buttons/ChainContextMenu.tsx  | 2 +-
 .../components/TransactionDetailsValueAndFeeSection.tsx   | 4 ++++
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/__swaps__/screens/Swap/components/ReviewPanel.tsx b/src/__swaps__/screens/Swap/components/ReviewPanel.tsx
index 3403463373f..6061500830c 100644
--- a/src/__swaps__/screens/Swap/components/ReviewPanel.tsx
+++ b/src/__swaps__/screens/Swap/components/ReviewPanel.tsx
@@ -324,7 +324,7 @@ export function ReviewPanel() {
 
             <Inline alignVertical="center" horizontalSpace="6px" wrap={false}>
               <View style={sx.chainBadgeContainer}>
-                <AnimatedChainImage showMainnetBadge assetType="input" size={16} />
+                <AnimatedChainImage showMainnetBadge assetType="input" size={24} />
               </View>
               <AnimatedText
                 align="right"
@@ -385,7 +385,7 @@ export function ReviewPanel() {
               <Stack space="10px">
                 <Inline alignVertical="center" horizontalSpace="6px" wrap={false}>
                   <View style={sx.chainBadgeContainer}>
-                    <AnimatedChainImage showMainnetBadge assetType="input" size={16} />
+                    <AnimatedChainImage showMainnetBadge assetType="input" size={24} />
                   </View>
                   <UnmountOnAnimatedReaction
                     isMountedWorklet={() => {
@@ -434,7 +434,7 @@ const sx = StyleSheet.create({
     height: 8,
     left: 8,
     justifyContent: 'center',
-    top: 4,
-    width: 16,
+    top: 8,
+    width: 20,
   },
 });
diff --git a/src/__swaps__/screens/Swap/components/TokenList/ChainSelection.tsx b/src/__swaps__/screens/Swap/components/TokenList/ChainSelection.tsx
index c6671e8514e..96456e309b7 100644
--- a/src/__swaps__/screens/Swap/components/TokenList/ChainSelection.tsx
+++ b/src/__swaps__/screens/Swap/components/TokenList/ChainSelection.tsx
@@ -202,11 +202,11 @@ const ChainButtonIcon = ({ output }: { output: boolean | undefined }) => {
         <ChainImage
           chainId={selectedOutputChainId ?? animatedSelectedOutputChainId.value ?? ChainId.mainnet}
           size={24}
-          badgeXPosition={6}
-          badgeYPosition={-6}
+          badgeXPosition={-20}
+          badgeYPosition={-8}
         />
       ) : userAssetsFilter && userAssetsFilter !== 'all' ? (
-        <ChainImage chainId={userAssetsFilter} size={24} />
+        <ChainImage chainId={userAssetsFilter} size={24} badgeXPosition={-20} badgeYPosition={-8} />
       ) : (
         <></>
       )}
diff --git a/src/components/context-menu-buttons/ChainContextMenu.tsx b/src/components/context-menu-buttons/ChainContextMenu.tsx
index d323684cc12..22f31373340 100644
--- a/src/components/context-menu-buttons/ChainContextMenu.tsx
+++ b/src/components/context-menu-buttons/ChainContextMenu.tsx
@@ -145,7 +145,7 @@ export const ChainContextMenu = ({
               )}
               {selectedChainId && (
                 <Bleed vertical="4px">
-                  <ChainImage chainId={selectedChainId} size={16} />
+                  <ChainImage chainId={selectedChainId} size={24} badgeXPosition={-20} badgeYPosition={-8} />
                 </Bleed>
               )}
               <Text color={textColor} numberOfLines={1} size={textSize} weight={textWeight}>
diff --git a/src/screens/transaction-details/components/TransactionDetailsValueAndFeeSection.tsx b/src/screens/transaction-details/components/TransactionDetailsValueAndFeeSection.tsx
index b3e1a79e6ee..26bb8c92a22 100644
--- a/src/screens/transaction-details/components/TransactionDetailsValueAndFeeSection.tsx
+++ b/src/screens/transaction-details/components/TransactionDetailsValueAndFeeSection.tsx
@@ -91,6 +91,10 @@ export const TransactionDetailsValueAndFeeSection: React.FC<Props> = ({ transact
                     chainId={assetData?.chainId || ChainId.mainnet}
                     symbol={assetData?.symbol || ''}
                     color={assetData?.colors?.primary || assetData?.colors?.fallback || undefined}
+                    chainBadgePosition={{
+                      x: -12,
+                      y: -6,
+                    }}
                   />
                 )
               }