more sizing issues fixed

rainbow-me · Dec 17, 2024 · 9615017 · 9615017
1 parent 7903783
commit 9615017
Show file tree

Hide file tree

Showing 15 changed files with 50 additions and 21 deletions.
diff --git a/src/__swaps__/screens/Swap/components/CoinRow.tsx b/src/__swaps__/screens/Swap/components/CoinRow.tsx
@@ -138,7 +138,6 @@ export function CoinRow({ isFavorite, onPress, output, uniqueId, testID, ...asse
                       x: -12,
                       y: -6,
                     }}
-                    showBadge={chainId !== ChainId.mainnet}
                   />
                   <Box gap={10} flexShrink={1} justifyContent="center">
                     <Text color="label" size="17pt" weight="semibold" numberOfLines={1} ellipsizeMode="tail">

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={36} />,
+          IconComponent: <ChainImage chainId={chain.id} size={44} />,
           label: useBackendNetworksStore.getState().getChainsLabel()[chain.id],
           secondaryLabel: i18n.t(
             isConnected && chain.id === currentChainId

diff --git a/src/components/ExchangeTokenRow.tsx b/src/components/ExchangeTokenRow.tsx
@@ -43,6 +43,9 @@ export default React.memo(function ExchangeTokenRow({
   const rowTestID = `${testID}-exchange-coin-row-${symbol ?? item?.symbol ?? ''}-${chainId || ChainId.mainnet}`;
 
   const isInfoButtonVisible = !item?.isNativeAsset || (!isNativeAsset(address ?? item?.address, chainId) && !showBalance);
+
+  console.log('chainId', chainId);
+
   return (
     <Columns alignVertical="center" space="10px">
       <Column>
@@ -63,6 +66,10 @@ export default React.memo(function ExchangeTokenRow({
                   chainId={chainId}
                   symbol={item?.symbol || symbol}
                   color={item?.colors?.primary || item?.colors?.fallback || undefined}
+                  chainBadgePosition={{
+                    x: -12,
+                    y: -6,
+                  }}
                 />
               </View>
             </Column>

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}
-                showBadge={chainId !== ChainId.mainnet}
                 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
@@ -124,6 +124,10 @@ export default React.memo(function FastCurrencySelectionRow({
               chainId={chainId}
               symbol={item?.symbol || symbol}
               color={item?.colors?.primary || item?.colors?.fallback || undefined}
+              chainBadgePosition={{
+                x: -12,
+                y: -6,
+              }}
             />
           </View>
           <View style={sx.innerContainer}>

diff --git a/src/components/coin-icon/RainbowCoinIcon.tsx b/src/components/coin-icon/RainbowCoinIcon.tsx
@@ -29,7 +29,7 @@ export default React.memo(function RainbowCoinIcon({
   symbol,
   forceDarkMode,
   color,
-  showBadge = true,
+  showBadge = chainId !== ChainId.mainnet,
   chainSize = (size * 1.5) / 2,
   chainBadgePosition = {},
 }: {

diff --git a/src/components/coin-row/SendCoinRow.js b/src/components/coin-row/SendCoinRow.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { TouchableWithoutFeedback } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import { buildAssetUniqueIdentifier } from '../../helpers/assets';
 import { useTheme } from '../../theme/ThemeContext';
 import { deviceUtils } from '../../utils';
 import { ButtonPressAnimation } from '../animations';

diff --git a/src/components/expanded-state/AvailableNetworksv2.tsx b/src/components/expanded-state/AvailableNetworksv2.tsx
@@ -134,17 +134,19 @@ const AvailableNetworksv2 = ({
     convertAssetAndNavigate(availableChainIds[0]);
   }, [availableChainIds, convertAssetAndNavigate]);
 
+  const chainsName = useBackendNetworksStore.getState().getChainsName();
   const networkMenuItems = useBackendNetworksStore
     .getState()
     .getSupportedChainIds()
     .filter(chainId => chainId !== ChainId.mainnet)
+    .filter(chainId => availableChainIds.includes(chainId))
     .map(chainId => useBackendNetworksStore.getState().getDefaultChains()[chainId])
     .map(chain => ({
       actionKey: `${chain.id}`,
       actionTitle: useBackendNetworksStore.getState().getChainsLabel()[chain.id],
       icon: {
         iconType: 'ASSET',
-        iconValue: `${useBackendNetworksStore.getState().getChainsName()[chain.id]}Badge${chain.id === ChainId.mainnet ? '' : 'NoShadow'}`,
+        iconValue: chain.id === ChainId.mainnet ? 'ethereumBadge' : `${chainsName[chain.id]}BadgeNoShadow`,
       },
     }));
 

diff --git a/src/components/expanded-state/chart/ChartExpandedStateHeader.js b/src/components/expanded-state/chart/ChartExpandedStateHeader.js
@@ -115,7 +115,6 @@ export default function ChartExpandedStateHeader({
           symbol={asset?.symbol}
           color={asset?.colors?.primary || asset?.colors?.fallback || undefined}
           chainBadgePosition={{ x: -12, y: -6 }}
-          showBadge={asset?.chainId !== ChainId.mainnet}
         />
 
         <ChartContextButton asset={asset} color={color} />

diff --git a/src/components/gas/GasSpeedButton.tsx b/src/components/gas/GasSpeedButton.tsx
@@ -477,7 +477,7 @@ const GasSpeedButton = ({
                       type: 'timing',
                     }}
                   >
-                    <ChainImage chainId={chainId} size={28} />
+                    <ChainImage chainId={chainId} size={28} badgeYPosition={-10} badgeXPosition={-14} />
                   </MotiView>
                 )}
               </AnimatePresence>

diff --git a/src/screens/SendConfirmationSheet.tsx b/src/screens/SendConfirmationSheet.tsx
@@ -515,6 +515,10 @@ export const SendConfirmationSheet = () => {
                       chainId={asset?.chainId}
                       symbol={asset?.symbol || ''}
                       color={asset?.colors?.primary || asset?.colors?.fallback || undefined}
+                      chainBadgePosition={{
+                        x: -14,
+                        y: -8,
+                      }}
                     />
                   )}
                 </Row>

diff --git a/src/screens/claimables/shared/components/ClaimValueDisplay.tsx b/src/screens/claimables/shared/components/ClaimValueDisplay.tsx
@@ -34,7 +34,16 @@ export function ClaimValueDisplay({
                 : {}
             }
           >
-            <RainbowCoinIcon size={40} icon={tokenIconUrl} chainId={chainId} symbol={tokenSymbol} />
+            <RainbowCoinIcon
+              size={40}
+              icon={tokenIconUrl}
+              chainId={chainId}
+              symbol={tokenSymbol}
+              chainBadgePosition={{
+                x: -12,
+                y: -6,
+              }}
+            />
           </View>
           {label ? (
             <TextShadow blur={12} color={globalColors.grey100} shadowOpacity={0.1} y={4}>

diff --git a/src/screens/claimables/transaction/components/ClaimCustomization.tsx b/src/screens/claimables/transaction/components/ClaimCustomization.tsx
@@ -321,7 +321,7 @@ export function ClaimCustomization() {
         onShowActionSheet={onShowNetworkActionSheet}
         text={outputChainId ? chainsLabel[outputChainId] : i18n.t(i18n.l.claimables.panel.a_network)}
         muted={isInitialState}
-        icon={<ChainImage chainId={outputChainId} size={16} />}
+        icon={<ChainImage chainId={outputChainId} size={24} />}
       />
     </Box>
   );

diff --git a/src/screens/mints/MintSheet.tsx b/src/screens/mints/MintSheet.tsx
@@ -701,17 +701,20 @@ const MintSheet = () => {
                   symbol="􀤆"
                   label={i18n.t(i18n.l.minting.network)}
                   value={
-                    <Inset vertical={{ custom: -4 }}>
-                      <Inline space="4px" alignVertical="center" alignHorizontal="right">
-                        <Bleed vertical="4px" horizontal="6px">
-                          <ChainImage chainId={chainId} size={32} />
-                        </Bleed>
-
-                        <Text color="labelSecondary" align="right" size="17pt" weight="medium">
-                          {`${useBackendNetworksStore.getState().getDefaultChains()[chainId].name}`}
-                        </Text>
-                      </Inline>
-                    </Inset>
+                    <Inline space="4px" alignVertical="center" alignHorizontal="right">
+                      <Columns>
+                        <Column width="content">
+                          <Box marginTop={{ custom: -6 }}>
+                            <ChainImage chainId={chainId} size={32} />
+                          </Box>
+                        </Column>
+                        <Column width="content">
+                          <Text color="labelSecondary" align="right" size="17pt" weight="medium">
+                            {`${useBackendNetworksStore.getState().getDefaultChains()[chainId].name}`}
+                          </Text>
+                        </Column>
+                      </Columns>
+                    </Inline>
                   }
                 />
               </Stack>

diff --git a/src/screens/transaction-details/components/TransactionMasthead.tsx b/src/screens/transaction-details/components/TransactionMasthead.tsx
@@ -171,6 +171,10 @@ function CurrencyTile({
                 chainId={asset?.chainId || ChainId.mainnet}
                 symbol={asset?.symbol || ''}
                 color={asset?.colors?.primary || asset?.colors?.fallback || undefined}
+                chainBadgePosition={{
+                  x: -12,
+                  y: -6,
+                }}
               />
             ) : (
               <>
-Original file line number
+Diff line change
@@ Expand Up @@
                           x: -12,
                           y: -6,
                         }}
-                        showBadge={chainId !== ChainId.mainnet}
                       />
                       <Box gap={10} flexShrink={1} justifyContent="center">
                         <Text color="label" size="17pt" weight="semibold" numberOfLines={1} ellipsizeMode="tail">
@@ Expand Down @@