refactor trending tokens to remove SwapCoinIcon and fix APP-2217

rainbow-me · Dec 23, 2024 · 2bde15e · 2bde15e
1 parent e093c7a
commit 2bde15e
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 201 deletions.
diff --git a/src/__swaps__/screens/Swap/components/SwapCoinIcon.tsx b/src/__swaps__/screens/Swap/components/SwapCoinIcon.tsx
diff --git a/src/components/Discover/TrendingTokens.tsx b/src/components/Discover/TrendingTokens.tsx
@@ -2,7 +2,7 @@ import { DropdownMenu } from '@/components/DropdownMenu';
 import { globalColors, Text, TextIcon, useBackgroundColor, useColorMode } from '@/design-system';
 import { useForegroundColor } from '@/design-system/color/useForegroundColor';
 
-import { SwapCoinIcon } from '@/__swaps__/screens/Swap/components/SwapCoinIcon';
+import RainbowCoinIcon from '@/components/coin-icon/RainbowCoinIcon';
 import { analyticsV2 } from '@/analytics';
 import { useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';
 import { ChainId } from '@/state/backendNetworks/types';
@@ -401,14 +401,15 @@ function TrendingTokenRow({ token }: { token: TrendingToken }) {
   return (
     <ButtonPressAnimation onPress={handleNavigateToToken} scaleTo={0.94}>
       <View style={{ height: 48, overflow: 'visible', flexDirection: 'row', gap: 12, alignItems: 'center' }}>
-        <SwapCoinIcon
-          iconUrl={token.icon_url}
+        <RainbowCoinIcon
+          icon={token.icon_url}
           color={token.colors.primary}
           chainId={token.chainId}
-          address={token.address}
           symbol={token.symbol}
-          size={40}
-          chainSize={20}
+          chainBadgePosition={{
+            x: -12,
+            y: -6,
+          }}
         />
 
         <View style={{ gap: 12, flex: 1 }}>

diff --git a/src/components/coin-row/FastTransactionCoinRow.tsx b/src/components/coin-row/FastTransactionCoinRow.tsx
@@ -296,7 +296,13 @@ export const ActivityIcon = ({
             }}
           />
         </View>
-        <ChainImage showBadge={badge && transaction.chainId !== ChainId.mainnet} chainId={transaction.chainId} size={32} />
+        <ChainImage
+          showBadge={badge && transaction.chainId !== ChainId.mainnet}
+          chainId={transaction.chainId}
+          size={32}
+          badgeYPosition={-10}
+          badgeXPosition={-14}
+        />
       </View>
     );
   }
@@ -369,7 +375,13 @@ export const ActivityIcon = ({
             </Box>
           )}
         </View>
-        <ChainImage showBadge={badge && transaction.chainId !== ChainId.mainnet} chainId={transaction.chainId} size={32} />
+        <ChainImage
+          showBadge={badge && transaction.chainId !== ChainId.mainnet}
+          chainId={transaction.chainId}
+          size={32}
+          badgeYPosition={-10}
+          badgeXPosition={-14}
+        />
       </View>
     );
   }
@@ -381,7 +393,10 @@ export const ActivityIcon = ({
         chainId={transaction?.asset?.chainId || ChainId.mainnet}
         symbol={transaction?.asset?.symbol || ''}
         color={transaction?.asset?.colors?.primary || transaction?.asset?.colors?.fallback || undefined}
-        showBadge={false}
+        chainBadgePosition={{
+          x: -12,
+          y: -6,
+        }}
       />
     </View>
   );

diff --git a/src/components/expanded-state/AvailableNetworksv2.tsx b/src/components/expanded-state/AvailableNetworksv2.tsx
@@ -3,7 +3,7 @@ import React, { useCallback, useMemo } from 'react';
 import RadialGradient from 'react-native-radial-gradient';
 import Divider from '../Divider';
 import { ChainImage } from '@/components/coin-icon/ChainImage';
-import { Box, Inline, Text } from '@/design-system';
+import { Box, Column, Columns, Inline, Text } from '@/design-system';
 import { useNavigation } from '@/navigation';
 import Routes from '@/navigation/routesNames';
 import { colors, position } from '@/styles';
@@ -158,7 +158,7 @@ const AvailableNetworksv2 = ({
         marginHorizontal={{ custom: marginHorizontal }}
         testID={'available-networks-v2'}
       >
-        <Box borderRadius={99} paddingVertical="8px" paddingHorizontal="12px" justifyContent="center">
+        <Box borderRadius={99} paddingVertical="8px" paddingHorizontal="12px" justifyContent="center" alignItems="stretch">
           <RadialGradient
             {...radialGradientProps}
             // @ts-ignore overloaded props
@@ -167,40 +167,67 @@ const AvailableNetworksv2 = ({
           />
           <Inline alignVertical="center" alignHorizontal="justify">
             <Inline alignVertical="center">
-              <Box style={{ flexDirection: 'row' }}>
-                {availableChainIds?.map((chainId, index) => {
-                  return (
-                    <Box
-                      background="body (Deprecated)"
-                      key={`availableNetwork-${chainId}`}
-                      marginLeft="-4px"
-                      style={{
-                        backgroundColor: colors.transparent,
-                        zIndex: availableChainIds?.length - index,
-                        borderRadius: 30,
-                      }}
-                    >
-                      <ChainImage chainId={chainId} size={20} />
-                    </Box>
-                  );
-                })}
-              </Box>
-
-              <Box paddingLeft="6px">
-                <Text color="secondary60 (Deprecated)" size="14px / 19px (Deprecated)" weight="semibold" numberOfLines={2}>
-                  {availableChainIds?.length > 1
-                    ? lang.t('expanded_state.asset.available_networks', {
-                        availableNetworks: availableChainIds?.length,
-                      })
-                    : lang.t('expanded_state.asset.available_networkv2', {
-                        availableNetwork: useBackendNetworksStore.getState().getChainsName()[availableChainIds[0]],
+              <Columns>
+                <Column style={{ justifyContent: 'center' }} width={availableChainIds.length > 1 ? 'content' : undefined}>
+                  <Box style={{ flexDirection: 'row', gap: 4, alignItems: 'center' }}>
+                    <Box style={{ flexDirection: 'row', alignItems: 'center' }}>
+                      {availableChainIds.slice(0, 6).map((chainId, index) => {
+                        return (
+                          <Box
+                            background="body (Deprecated)"
+                            key={`availableNetwork-${chainId}`}
+                            marginLeft="-4px"
+                            style={{
+                              backgroundColor: colors.transparent,
+                              zIndex: availableChainIds?.length - index,
+                              borderRadius: 30,
+                            }}
+                          >
+                            <ChainImage chainId={chainId} size={20} />
+                          </Box>
+                        );
                       })}
-                </Text>
-              </Box>
+                    </Box>
+                    {availableChainIds.length > 6 && (
+                      <Text color="labelSecondary" size="13pt" weight="semibold" numberOfLines={2}>
+                        +{availableChainIds.length - 6}
+                      </Text>
+                    )}
+                  </Box>
+                </Column>
+                <Column style={{ justifyContent: 'center', flex: 1 }}>
+                  <Box
+                    style={{
+                      flexDirection: 'row',
+                      gap: 8,
+                      alignItems: 'center',
+                      justifyContent: availableChainIds.length > 1 ? 'flex-end' : 'space-between',
+                    }}
+                    paddingLeft="6px"
+                  >
+                    <Text
+                      color="secondary60 (Deprecated)"
+                      size="14px / 19px (Deprecated)"
+                      weight="semibold"
+                      numberOfLines={1}
+                      align="right"
+                    >
+                      {availableChainIds?.length > 1
+                        ? lang.t('expanded_state.asset.available_networks', {
+                            availableNetworks: availableChainIds?.length,
+                          })
+                        : lang.t('expanded_state.asset.available_networkv2', {
+                            availableNetwork: useBackendNetworksStore.getState().getChainsName()[availableChainIds[0]],
+                          })}
+                    </Text>
+
+                    <Text align="center" color="secondary40 (Deprecated)" size="14px / 19px (Deprecated)" weight="semibold">
+                      {availableChainIds?.length > 1 ? '􀁱' : '􀯻'}
+                    </Text>
+                  </Box>
+                </Column>
+              </Columns>
             </Inline>
-            <Text align="center" color="secondary40 (Deprecated)" size="14px / 19px (Deprecated)" weight="semibold">
-              {availableChainIds?.length > 1 ? '􀁱' : '􀯻'}
-            </Text>
           </Inline>
         </Box>
       </Box>

diff --git a/src/screens/transaction-details/components/TransactionDetailsValueAndFeeSection.tsx b/src/screens/transaction-details/components/TransactionDetailsValueAndFeeSection.tsx
@@ -82,7 +82,13 @@ export const TransactionDetailsValueAndFeeSection: React.FC<Props> = ({ transact
                         }}
                       />
                     </View>
-                    <ChainImage showBadge={transaction.chainId !== ChainId.mainnet} chainId={transaction.chainId} badgeYPosition={10} />
+                    <ChainImage
+                      showBadge={transaction.chainId !== ChainId.mainnet}
+                      chainId={transaction.chainId}
+                      size={32}
+                      badgeYPosition={0}
+                      badgeXPosition={-12}
+                    />
                   </View>
                 ) : (
                   <RainbowCoinIcon