From 2bde15e96adff5d8f08fb2253eaaa2fde6926a51 Mon Sep 17 00:00:00 2001 From: Matthew Wall Date: Mon, 23 Dec 2024 15:46:17 -0500 Subject: [PATCH] refactor trending tokens to remove SwapCoinIcon and fix APP-2217 --- .../screens/Swap/components/SwapCoinIcon.tsx | 157 ------------------ src/components/Discover/TrendingTokens.tsx | 13 +- .../coin-row/FastTransactionCoinRow.tsx | 21 ++- .../expanded-state/AvailableNetworksv2.tsx | 95 +++++++---- .../TransactionDetailsValueAndFeeSection.tsx | 8 +- 5 files changed, 93 insertions(+), 201 deletions(-) delete mode 100644 src/__swaps__/screens/Swap/components/SwapCoinIcon.tsx diff --git a/src/__swaps__/screens/Swap/components/SwapCoinIcon.tsx b/src/__swaps__/screens/Swap/components/SwapCoinIcon.tsx deleted file mode 100644 index f5e15d41c8d..00000000000 --- a/src/__swaps__/screens/Swap/components/SwapCoinIcon.tsx +++ /dev/null @@ -1,157 +0,0 @@ -/* eslint-disable no-nested-ternary */ -import React from 'react'; -import { StyleSheet, View } from 'react-native'; -import EthIcon from '@/assets/eth-icon.png'; -import { ChainImage } from '@/components/coin-icon/ChainImage'; -import { globalColors } from '@/design-system'; -import { borders, fonts } from '@/styles'; -import { useTheme } from '@/theme'; -import { FallbackIcon as CoinIconTextFallback, isETH } from '@/utils'; -import { FastFallbackCoinIconImage } from '@/components/asset-list/RecyclerAssetList2/FastComponents/FastFallbackCoinIconImage'; -import Animated from 'react-native-reanimated'; -import FastImage, { Source } from 'react-native-fast-image'; -import { ChainId } from '@/state/backendNetworks/types'; - -// TODO: Delete this and replace with RainbowCoinIcon -// ⚠️ When replacing this component with RainbowCoinIcon, make sure -// ⚠️ to exactly replicate the sizing and shadows defined below - -const fallbackTextStyles = { - fontFamily: fonts.family.SFProRounded, - fontWeight: fonts.weight.bold, - letterSpacing: fonts.letterSpacing.roundedTight, - marginBottom: 0.5, - textAlign: 'center', -}; - -const fallbackIconStyle = (size: number) => ({ - ...borders.buildCircleAsObject(size), - position: 'absolute', -}); - -/** - * If mainnet asset is available, get the token under /ethereum/ (token) url. - * Otherwise let it use whatever type it has - * @param param0 - optional mainnetAddress, address and network - * @returns a proper type and address to use for the url - */ -function resolveChainIdAndAddress({ address, mainnetAddress }: { mainnetAddress?: string; address: string }) { - if (mainnetAddress) { - return { - resolvedAddress: mainnetAddress, - }; - } - - return { - resolvedAddress: address, - }; -} - -export const SwapCoinIcon = React.memo(function FeedCoinIcon({ - address, - color, - iconUrl, - disableShadow = true, - forceDarkMode, - mainnetAddress, - chainId, - symbol, - size = 32, - chainSize, -}: { - address: string; - color?: string; - iconUrl?: string; - disableShadow?: boolean; - forceDarkMode?: boolean; - mainnetAddress?: string; - chainId: ChainId; - symbol: string; - size?: number; - chainSize?: number; -}) { - const theme = useTheme(); - - const { resolvedAddress } = resolveChainIdAndAddress({ - address, - mainnetAddress, - }); - - const fallbackIconColor = color ?? theme.colors.purpleUniswap; - const shadowColor = theme.isDarkMode || forceDarkMode ? theme.colors.shadow : color || fallbackIconColor; - const eth = isETH(resolvedAddress); - - return ( - - {eth ? ( - - - - ) : ( - - {() => ( - - )} - - )} - - {chainId && chainId !== ChainId.mainnet && size > 16 && ( - - - - )} - - ); -}); - -const styles = { - container: (size: number) => ({ - elevation: 6, - height: size, - overflow: 'visible' as const, - }), - coinIcon: (size: number) => ({ - borderRadius: size / 2, - height: size, - width: size, - overflow: 'visible' as const, - }), -}; - -const sx = StyleSheet.create({ - badge: { - bottom: -0, - left: -8, - position: 'absolute', - shadowColor: globalColors.grey100, - shadowOffset: { - height: 4, - width: 0, - }, - shadowRadius: 6, - shadowOpacity: 0.2, - }, - reactCoinIconContainer: { - alignItems: 'center', - justifyContent: 'center', - }, - withShadow: { - elevation: 6, - shadowOffset: { - height: 4, - width: 0, - }, - shadowOpacity: 0.2, - shadowRadius: 6, - }, -}); diff --git a/src/components/Discover/TrendingTokens.tsx b/src/components/Discover/TrendingTokens.tsx index 223a8041981..64dc6922791 100644 --- 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 ( - diff --git a/src/components/coin-row/FastTransactionCoinRow.tsx b/src/components/coin-row/FastTransactionCoinRow.tsx index d89198dd9d0..02695cb71d2 100644 --- a/src/components/coin-row/FastTransactionCoinRow.tsx +++ b/src/components/coin-row/FastTransactionCoinRow.tsx @@ -296,7 +296,13 @@ export const ActivityIcon = ({ }} /> - + ); } @@ -369,7 +375,13 @@ export const ActivityIcon = ({ )} - + ); } @@ -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, + }} /> ); diff --git a/src/components/expanded-state/AvailableNetworksv2.tsx b/src/components/expanded-state/AvailableNetworksv2.tsx index 027e4bb7d66..12dd2385122 100644 --- 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'} > - + - - {availableChainIds?.map((chainId, index) => { - return ( - - - - ); - })} - - - - - {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]], + + 1 ? 'content' : undefined}> + + + {availableChainIds.slice(0, 6).map((chainId, index) => { + return ( + + + + ); })} - - + + {availableChainIds.length > 6 && ( + + +{availableChainIds.length - 6} + + )} + + + + 1 ? 'flex-end' : 'space-between', + }} + paddingLeft="6px" + > + + {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]], + })} + + + + {availableChainIds?.length > 1 ? '􀁱' : '􀯻'} + + + + - - {availableChainIds?.length > 1 ? '􀁱' : '􀯻'} - diff --git a/src/screens/transaction-details/components/TransactionDetailsValueAndFeeSection.tsx b/src/screens/transaction-details/components/TransactionDetailsValueAndFeeSection.tsx index 927fa08219d..269b06e176c 100644 --- 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 = ({ transact }} /> - + ) : (