fix two coin icons sizing and position on transaction details row

rainbow-me · Jan 17, 2025 · f74398b · f74398b
1 parent a3256eb
commit f74398b
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 9 deletions.
diff --git a/src/components/coin-icon/TwoCoinsIcon.tsx b/src/components/coin-icon/TwoCoinsIcon.tsx
@@ -18,8 +18,8 @@ export function TwoCoinsIcon({
   under: ParsedAddressAsset;
 }) {
   const theme = useTheme();
-  const overSize = size * 0.75;
-  const underSize = size * 0.67725;
+  const overSize = size * 0.85;
+  const underSize = size * 0.75;
 
   return (
     <Box style={{ height: size, width: size }}>
@@ -55,7 +55,7 @@ export function TwoCoinsIcon({
       >
         <RainbowCoinIcon chainId={over.chainId as ChainId} icon={over?.icon_url} showBadge={false} size={overSize} symbol={over.symbol} />
       </Box>
-      <ChainImage badgeXPosition={-8} badgeYPosition={0} chainId={over.chainId} showBadge={badge} size={16} style={{ zIndex: 1000 }} />
+      <ChainImage badgeYPosition={0} badgeXPosition={-9} chainId={over.chainId} showBadge={badge} size={20} style={{ zIndex: 1000 }} />
     </Box>
   );
 }
diff --git a/src/screens/transaction-details/components/TransactionDetailsValueAndFeeSection.tsx b/src/screens/transaction-details/components/TransactionDetailsValueAndFeeSection.tsx
@@ -82,12 +82,7 @@ export const TransactionDetailsValueAndFeeSection: React.FC<Props> = ({ transact
                         }}
                       />
                     </View>
-                    <ChainImage
-                      showBadge={transaction.chainId !== ChainId.mainnet}
-                      chainId={transaction.chainId}
-                      badgeXPosition={-10}
-                      badgeYPosition={10}
-                    />
+                    <ChainImage showBadge={transaction.chainId !== ChainId.mainnet} chainId={transaction.chainId} badgeYPosition={10} />
                   </View>
                 ) : (
                   <RainbowCoinIcon