From 02df87a0d0f6124ecf3d694e5df1c3f7f2a37a44 Mon Sep 17 00:00:00 2001 From: Satish Ravi Date: Fri, 18 Oct 2024 16:58:26 -0700 Subject: [PATCH] refactor(earn): break pool info screen into multiple files (#6176) ### Description EarnPoolInfoScreen is too big and has too many internal components, this breaks them into multiple files. Also organized all pool info screen files in a sub folder, as the number of files under `src/earn` was also increasing ### Test plan CI, no visual changes ### Related issues - N/A ### Backwards compatibility Yes ### Network scalability N/A --- .../BeforeDepositBottomSheet.tsx | 0 src/earn/poolInfoScreen/Cards.tsx | 385 +++++++++++++++++ .../EarnPoolInfoScreen.test.tsx | 2 +- .../EarnPoolInfoScreen.tsx | 407 +----------------- .../{ => poolInfoScreen}/SafetyCard.test.tsx | 2 +- src/earn/{ => poolInfoScreen}/SafetyCard.tsx | 29 +- src/earn/poolInfoScreen/TokenIcons.tsx | 37 ++ src/navigator/Navigator.tsx | 2 +- 8 files changed, 442 insertions(+), 422 deletions(-) rename src/earn/{ => poolInfoScreen}/BeforeDepositBottomSheet.tsx (100%) create mode 100644 src/earn/poolInfoScreen/Cards.tsx rename src/earn/{ => poolInfoScreen}/EarnPoolInfoScreen.test.tsx (99%) rename src/earn/{ => poolInfoScreen}/EarnPoolInfoScreen.tsx (58%) rename src/earn/{ => poolInfoScreen}/SafetyCard.test.tsx (98%) rename src/earn/{ => poolInfoScreen}/SafetyCard.tsx (86%) create mode 100644 src/earn/poolInfoScreen/TokenIcons.tsx diff --git a/src/earn/BeforeDepositBottomSheet.tsx b/src/earn/poolInfoScreen/BeforeDepositBottomSheet.tsx similarity index 100% rename from src/earn/BeforeDepositBottomSheet.tsx rename to src/earn/poolInfoScreen/BeforeDepositBottomSheet.tsx diff --git a/src/earn/poolInfoScreen/Cards.tsx b/src/earn/poolInfoScreen/Cards.tsx new file mode 100644 index 00000000000..3ab8033489f --- /dev/null +++ b/src/earn/poolInfoScreen/Cards.tsx @@ -0,0 +1,385 @@ +import BigNumber from 'bignumber.js' +import { Duration, intervalToDuration } from 'date-fns' +import React, { useMemo } from 'react' +import { useTranslation } from 'react-i18next' +import { StyleSheet, Text, View } from 'react-native' +import { LabelWithInfo } from 'src/components/LabelWithInfo' +import { formatValueToDisplay } from 'src/components/TokenDisplay' +import { IconSize } from 'src/components/TokenIcon' +import TokenIcons from 'src/earn/poolInfoScreen/TokenIcons' +import { getEarnPositionBalanceValues } from 'src/earn/utils' +import { useDollarsToLocalAmount } from 'src/localCurrency/hooks' +import { getLocalCurrencySymbol, usdToLocalCurrencyRateSelector } from 'src/localCurrency/selectors' +import type { EarningItem } from 'src/positions/types' +import { EarnPosition } from 'src/positions/types' +import { useSelector } from 'src/redux/hooks' +import Colors from 'src/styles/colors' +import { typeScale } from 'src/styles/fonts' +import { Spacing } from 'src/styles/styles' +import { useTokenInfo, useTokensInfo } from 'src/tokens/hooks' +import { TokenBalance } from 'src/tokens/slice' +import { formattedDuration } from 'src/utils/time' + +function EarningItemLineItem({ earnItem }: { earnItem: EarningItem }) { + const { t } = useTranslation() + const tokenInfo = useTokenInfo(earnItem.tokenId) + const amountInUsd = tokenInfo?.priceUsd?.multipliedBy(earnItem.amount) + const localCurrencyExchangeRate = useSelector(usdToLocalCurrencyRateSelector) + const amountInLocalCurrency = new BigNumber(localCurrencyExchangeRate ?? 0).multipliedBy( + amountInUsd ?? 0 + ) + const localCurrencySymbol = useSelector(getLocalCurrencySymbol) + + return ( + + + + {earnItem.label} + + + + + {t('earnFlow.poolInfoScreen.lineItemAmountDisplay', { + localCurrencySymbol, + localCurrencyAmount: formatValueToDisplay(amountInLocalCurrency), + cryptoAmount: formatValueToDisplay(new BigNumber(earnItem.amount)), + cryptoSymbol: tokenInfo?.symbol, + })} + + + + ) +} + +export function DepositAndEarningsCard({ + earnPosition, + onInfoIconPress, +}: { + earnPosition: EarnPosition + onInfoIconPress: () => void +}) { + const { t } = useTranslation() + const { balance, pricePerShare } = earnPosition + const { earningItems, depositTokenId, cantSeparateCompoundedInterest } = earnPosition.dataProps + const depositTokenInfo = useTokenInfo(depositTokenId) + const localCurrencySymbol = useSelector(getLocalCurrencySymbol) + const localCurrencyExchangeRate = useSelector(usdToLocalCurrencyRateSelector) + + const { poolBalanceInUsd: depositBalanceInUsd, poolBalanceInDepositToken } = useMemo( + () => getEarnPositionBalanceValues({ pool: earnPosition }), + [earnPosition] + ) + // Deposit items used to calculate the total balance and total deposited + const depositBalanceInLocalCurrency = new BigNumber(localCurrencyExchangeRate ?? 0).multipliedBy( + depositBalanceInUsd ?? 0 + ) + + // Earning items used to calculate the total balance and total deposited + const earningItemsTokenIds = earningItems.map((item) => item.tokenId) + const earningItemsTokenInfo = useTokensInfo(earningItemsTokenIds) + + const totalBalanceInLocalCurrency = useMemo(() => { + return depositBalanceInLocalCurrency.plus( + earningItems + .filter((item) => !item.includedInPoolBalance) + .reduce((acc, item) => { + const tokenInfo = earningItemsTokenInfo.find((token) => token?.tokenId === item.tokenId) + const amountInUsd = tokenInfo?.priceUsd?.multipliedBy(item.amount) + const amountInLocalCurrency = new BigNumber(localCurrencyExchangeRate ?? 0).multipliedBy( + amountInUsd ?? 0 + ) + return acc.plus(amountInLocalCurrency ?? 0) + }, new BigNumber(0)) + ) + }, [ + depositBalanceInLocalCurrency, + earningItems, + earningItemsTokenInfo, + localCurrencyExchangeRate, + ]) + + const totalDepositBalanceInCrypto = useMemo(() => { + return poolBalanceInDepositToken.minus( + earningItems + .filter((item) => item.includedInPoolBalance) + .reduce((acc, item) => { + const tokenInfo = earningItemsTokenInfo.find((token) => token?.tokenId === item.tokenId) + return acc.plus( + new BigNumber(item.amount) + .multipliedBy(tokenInfo?.priceUsd ?? 0) + .dividedBy(depositTokenInfo?.priceUsd ?? 1) + ) + }, new BigNumber(0)) + ) + }, [balance, pricePerShare, earningItems, earningItemsTokenInfo, depositTokenInfo]) + + const totalDepositBalanceInLocalCurrency = + useDollarsToLocalAmount( + totalDepositBalanceInCrypto.multipliedBy(depositTokenInfo?.priceUsd ?? 0) + ) ?? new BigNumber(0) + + return ( + + + + + + {t('earnFlow.poolInfoScreen.titleLocalAmountDisplay', { + localCurrencySymbol, + localCurrencyAmount: formatValueToDisplay(totalBalanceInLocalCurrency), + })} + + + + + + + + {cantSeparateCompoundedInterest ? ( + + {t('earnFlow.poolInfoScreen.depositAndEarnings')} + + ) : ( + + {t('earnFlow.poolInfoScreen.deposit')} + + )} + + + + {t('earnFlow.poolInfoScreen.lineItemAmountDisplay', { + localCurrencySymbol, + localCurrencyAmount: formatValueToDisplay(totalDepositBalanceInLocalCurrency), + cryptoAmount: formatValueToDisplay(totalDepositBalanceInCrypto), + cryptoSymbol: depositTokenInfo?.symbol, + })} + + + + {earningItems.map((item, index) => ( + + ))} + + + ) +} + +export function YieldCard({ + onInfoIconPress, + tokensInfo, + earnPosition, +}: { + onInfoIconPress: () => void + tokensInfo: TokenBalance[] + earnPosition: EarnPosition +}) { + const { t } = useTranslation() + const yieldRateSum = earnPosition.dataProps.yieldRates + .map((rate) => rate.percentage) + .reduce((acc, rate) => acc + rate, 0) + + return ( + + + + + + + {yieldRateSum > 0.00005 + ? t('earnFlow.poolInfoScreen.ratePercent', { rate: yieldRateSum.toFixed(2) }) + : '--'} + + + + {earnPosition.dataProps.yieldRates.map((rate, index) => { + // TODO: investigate how to do when there are multiple tokens in a yield rate + const tokenInfo = tokensInfo.filter((token) => token.tokenId === rate.tokenId) + return ( + + + + + {rate.label} + + + + + + {t('earnFlow.poolInfoScreen.ratePercent', { rate: rate.percentage.toFixed(2) })} + + + ) + })} + + + ) +} + +export function DailyYieldRateCard({ + dailyYieldRate, + onInfoIconPress, +}: { + dailyYieldRate: number + onInfoIconPress: () => void +}) { + const { t } = useTranslation() + return ( + + + + + + + {t('earnFlow.poolInfoScreen.ratePercent', { rate: dailyYieldRate.toFixed(4) })} + + + + ) +} + +export function TvlCard({ + earnPosition, + onInfoIconPress, +}: { + earnPosition: EarnPosition + onInfoIconPress: () => void +}) { + const localCurrencySymbol = useSelector(getLocalCurrencySymbol) + const { t } = useTranslation() + const tvl = earnPosition.dataProps.tvl + const tvlInFiat = useDollarsToLocalAmount(tvl ?? null) + const tvlString = useMemo(() => { + return `${localCurrencySymbol}${tvlInFiat ? formatValueToDisplay(tvlInFiat) : '--'}` + }, [localCurrencySymbol, tvlInFiat]) + + return ( + + + + + + {tvlString} + + + ) +} + +export function AgeCard({ + ageOfPool, + onInfoIconPress, +}: { + ageOfPool: Date + onInfoIconPress: () => void +}) { + const { t } = useTranslation() + const dateInterval: Duration = intervalToDuration({ + start: ageOfPool, + end: new Date(), + }) + + return ( + + + + + + {formattedDuration(dateInterval)} + + + ) +} + +export const styles = StyleSheet.create({ + flexShrink: { + flexShrink: 1, + }, + card: { + padding: Spacing.Regular16, + borderColor: Colors.gray2, + borderWidth: 1, + borderRadius: 12, + gap: Spacing.Regular16, + }, + cardLineContainer: { + flex: 1, + flexDirection: 'row', + justifyContent: 'space-between', + }, + cardLineLabel: { + paddingRight: 20, // Prevents Icon from being cut off on long labels + }, + yieldRateLabelContainer: { + flexDirection: 'row', + gap: Spacing.Tiny4, + }, + cardTitleText: { + ...typeScale.labelSemiBoldMedium, + color: Colors.black, + }, + cardLabelText: { + ...typeScale.bodyMedium, + color: Colors.gray3, + }, + depositAndEarningCard: { + backgroundColor: Colors.gray1, + padding: 0, + gap: 0, + }, + depositAndEarningCardTitleContainer: { + padding: Spacing.Regular16, + alignItems: 'center', + gap: Spacing.Tiny4, + }, + depositAndEarningCardTitleText: { + ...typeScale.titleMedium, + color: Colors.black, + }, + depositAndEarningCardSubtitleContainer: { + backgroundColor: Colors.white, + padding: Spacing.Regular16, + borderBottomLeftRadius: 16, + borderBottomRightRadius: 16, + gap: Spacing.Smallest8, + }, + depositAndEarningsCardLabelText: { + ...typeScale.bodyMedium, + color: Colors.black, + flexWrap: 'wrap', + textAlign: 'left', + }, + depositAndEarningsCardValueText: { + ...typeScale.bodyMedium, + color: Colors.black, + flexWrap: 'wrap', + textAlign: 'right', + }, +}) diff --git a/src/earn/EarnPoolInfoScreen.test.tsx b/src/earn/poolInfoScreen/EarnPoolInfoScreen.test.tsx similarity index 99% rename from src/earn/EarnPoolInfoScreen.test.tsx rename to src/earn/poolInfoScreen/EarnPoolInfoScreen.test.tsx index 4af579b4eee..cae64830816 100644 --- a/src/earn/EarnPoolInfoScreen.test.tsx +++ b/src/earn/poolInfoScreen/EarnPoolInfoScreen.test.tsx @@ -3,7 +3,7 @@ import React from 'react' import { Provider } from 'react-redux' import AppAnalytics from 'src/analytics/AppAnalytics' import { EarnEvents } from 'src/analytics/Events' -import EarnPoolInfoScreen from 'src/earn/EarnPoolInfoScreen' +import EarnPoolInfoScreen from 'src/earn/poolInfoScreen/EarnPoolInfoScreen' import { CICOFlow } from 'src/fiatExchanges/utils' import { navigate } from 'src/navigator/NavigationService' import { Screens } from 'src/navigator/Screens' diff --git a/src/earn/EarnPoolInfoScreen.tsx b/src/earn/poolInfoScreen/EarnPoolInfoScreen.tsx similarity index 58% rename from src/earn/EarnPoolInfoScreen.tsx rename to src/earn/poolInfoScreen/EarnPoolInfoScreen.tsx index aaa391ecbf2..1ecdf468969 100644 --- a/src/earn/EarnPoolInfoScreen.tsx +++ b/src/earn/poolInfoScreen/EarnPoolInfoScreen.tsx @@ -1,6 +1,5 @@ import { NativeStackScreenProps } from '@react-navigation/native-stack' import BigNumber from 'bignumber.js' -import { Duration, intervalToDuration } from 'date-fns' import React, { useMemo, useRef, useState } from 'react' import { Trans, useTranslation } from 'react-i18next' import { LayoutChangeEvent, Platform, StyleSheet, Text, View } from 'react-native' @@ -12,22 +11,24 @@ import { EarnCommonProperties } from 'src/analytics/Properties' import { openUrl } from 'src/app/actions' import BottomSheet, { BottomSheetModalRefType } from 'src/components/BottomSheet' import Button, { BtnSizes, BtnTypes } from 'src/components/Button' -import { LabelWithInfo } from 'src/components/LabelWithInfo' -import { formatValueToDisplay } from 'src/components/TokenDisplay' -import TokenIcon, { IconSize } from 'src/components/TokenIcon' +import { IconSize } from 'src/components/TokenIcon' import Touchable from 'src/components/Touchable' -import BeforeDepositBottomSheet from 'src/earn/BeforeDepositBottomSheet' import { useDepositEntrypointInfo } from 'src/earn/hooks' -import { SafetyCard } from 'src/earn/SafetyCard' -import { getEarnPositionBalanceValues } from 'src/earn/utils' +import BeforeDepositBottomSheet from 'src/earn/poolInfoScreen/BeforeDepositBottomSheet' +import { + AgeCard, + DailyYieldRateCard, + DepositAndEarningsCard, + TvlCard, + YieldCard, +} from 'src/earn/poolInfoScreen/Cards' +import { SafetyCard } from 'src/earn/poolInfoScreen/SafetyCard' +import TokenIcons from 'src/earn/poolInfoScreen/TokenIcons' import OpenLinkIcon from 'src/icons/OpenLinkIcon' -import { useDollarsToLocalAmount } from 'src/localCurrency/hooks' -import { getLocalCurrencySymbol, usdToLocalCurrencyRateSelector } from 'src/localCurrency/selectors' import { navigate } from 'src/navigator/NavigationService' import { Screens } from 'src/navigator/Screens' import useScrollAwareHeader from 'src/navigator/ScrollAwareHeader' import { StackParamList } from 'src/navigator/types' -import type { EarningItem } from 'src/positions/types' import { EarnPosition } from 'src/positions/types' import { useDispatch, useSelector } from 'src/redux/hooks' import { NETWORK_NAMES } from 'src/shared/conts' @@ -37,11 +38,9 @@ import Colors from 'src/styles/colors' import { typeScale } from 'src/styles/fonts' import { Spacing } from 'src/styles/styles' import variables from 'src/styles/variables' -import { useTokenInfo, useTokensInfo } from 'src/tokens/hooks' import { tokensByIdSelector } from 'src/tokens/selectors' import { TokenBalance } from 'src/tokens/slice' import { navigateToURI } from 'src/utils/linking' -import { formattedDuration } from 'src/utils/time' function HeaderTitleSection({ earnPosition, @@ -94,322 +93,6 @@ function TitleSection({ ) } -function TokenIcons({ - tokensInfo, - size = IconSize.MEDIUM, - showNetworkIcon = true, -}: { - tokensInfo: TokenBalance[] - size?: IconSize - showNetworkIcon?: boolean -}) { - return ( - - {tokensInfo.map((token, index) => ( - - ))} - - ) -} - -function EarningItemLineItem({ earnItem }: { earnItem: EarningItem }) { - const { t } = useTranslation() - const tokenInfo = useTokenInfo(earnItem.tokenId) - const amountInUsd = tokenInfo?.priceUsd?.multipliedBy(earnItem.amount) - const localCurrencyExchangeRate = useSelector(usdToLocalCurrencyRateSelector) - const amountInLocalCurrency = new BigNumber(localCurrencyExchangeRate ?? 0).multipliedBy( - amountInUsd ?? 0 - ) - const localCurrencySymbol = useSelector(getLocalCurrencySymbol) - - return ( - - - - {earnItem.label} - - - - - {t('earnFlow.poolInfoScreen.lineItemAmountDisplay', { - localCurrencySymbol, - localCurrencyAmount: formatValueToDisplay(amountInLocalCurrency), - cryptoAmount: formatValueToDisplay(new BigNumber(earnItem.amount)), - cryptoSymbol: tokenInfo?.symbol, - })} - - - - ) -} - -function DepositAndEarningsCard({ - earnPosition, - onInfoIconPress, -}: { - earnPosition: EarnPosition - onInfoIconPress: () => void -}) { - const { t } = useTranslation() - const { balance, pricePerShare } = earnPosition - const { earningItems, depositTokenId, cantSeparateCompoundedInterest } = earnPosition.dataProps - const depositTokenInfo = useTokenInfo(depositTokenId) - const localCurrencySymbol = useSelector(getLocalCurrencySymbol) - const localCurrencyExchangeRate = useSelector(usdToLocalCurrencyRateSelector) - - const { poolBalanceInUsd: depositBalanceInUsd, poolBalanceInDepositToken } = useMemo( - () => getEarnPositionBalanceValues({ pool: earnPosition }), - [earnPosition] - ) - // Deposit items used to calculate the total balance and total deposited - const depositBalanceInLocalCurrency = new BigNumber(localCurrencyExchangeRate ?? 0).multipliedBy( - depositBalanceInUsd ?? 0 - ) - - // Earning items used to calculate the total balance and total deposited - const earningItemsTokenIds = earningItems.map((item) => item.tokenId) - const earningItemsTokenInfo = useTokensInfo(earningItemsTokenIds) - - const totalBalanceInLocalCurrency = useMemo(() => { - return depositBalanceInLocalCurrency.plus( - earningItems - .filter((item) => !item.includedInPoolBalance) - .reduce((acc, item) => { - const tokenInfo = earningItemsTokenInfo.find((token) => token?.tokenId === item.tokenId) - const amountInUsd = tokenInfo?.priceUsd?.multipliedBy(item.amount) - const amountInLocalCurrency = new BigNumber(localCurrencyExchangeRate ?? 0).multipliedBy( - amountInUsd ?? 0 - ) - return acc.plus(amountInLocalCurrency ?? 0) - }, new BigNumber(0)) - ) - }, [ - depositBalanceInLocalCurrency, - earningItems, - earningItemsTokenInfo, - localCurrencyExchangeRate, - ]) - - const totalDepositBalanceInCrypto = useMemo(() => { - return poolBalanceInDepositToken.minus( - earningItems - .filter((item) => item.includedInPoolBalance) - .reduce((acc, item) => { - const tokenInfo = earningItemsTokenInfo.find((token) => token?.tokenId === item.tokenId) - return acc.plus( - new BigNumber(item.amount) - .multipliedBy(tokenInfo?.priceUsd ?? 0) - .dividedBy(depositTokenInfo?.priceUsd ?? 1) - ) - }, new BigNumber(0)) - ) - }, [balance, pricePerShare, earningItems, earningItemsTokenInfo, depositTokenInfo]) - - const totalDepositBalanceInLocalCurrency = - useDollarsToLocalAmount( - totalDepositBalanceInCrypto.multipliedBy(depositTokenInfo?.priceUsd ?? 0) - ) ?? new BigNumber(0) - - return ( - - - - - - {t('earnFlow.poolInfoScreen.titleLocalAmountDisplay', { - localCurrencySymbol, - localCurrencyAmount: formatValueToDisplay(totalBalanceInLocalCurrency), - })} - - - - - - - - {cantSeparateCompoundedInterest ? ( - - {t('earnFlow.poolInfoScreen.depositAndEarnings')} - - ) : ( - - {t('earnFlow.poolInfoScreen.deposit')} - - )} - - - - {t('earnFlow.poolInfoScreen.lineItemAmountDisplay', { - localCurrencySymbol, - localCurrencyAmount: formatValueToDisplay(totalDepositBalanceInLocalCurrency), - cryptoAmount: formatValueToDisplay(totalDepositBalanceInCrypto), - cryptoSymbol: depositTokenInfo?.symbol, - })} - - - - {earningItems.map((item, index) => ( - - ))} - - - ) -} - -function YieldCard({ - onInfoIconPress, - tokensInfo, - earnPosition, -}: { - onInfoIconPress: () => void - tokensInfo: TokenBalance[] - earnPosition: EarnPosition -}) { - const { t } = useTranslation() - const yieldRateSum = earnPosition.dataProps.yieldRates - .map((rate) => rate.percentage) - .reduce((acc, rate) => acc + rate, 0) - - return ( - - - - - - - {yieldRateSum > 0.00005 - ? t('earnFlow.poolInfoScreen.ratePercent', { rate: yieldRateSum.toFixed(2) }) - : '--'} - - - - {earnPosition.dataProps.yieldRates.map((rate, index) => { - // TODO: investigate how to do when there are multiple tokens in a yield rate - const tokenInfo = tokensInfo.filter((token) => token.tokenId === rate.tokenId) - return ( - - - - - {rate.label} - - - - - - {t('earnFlow.poolInfoScreen.ratePercent', { rate: rate.percentage.toFixed(2) })} - - - ) - })} - - - ) -} - -function DailyYieldRateCard({ - dailyYieldRate, - onInfoIconPress, -}: { - dailyYieldRate: number - onInfoIconPress: () => void -}) { - const { t } = useTranslation() - return ( - - - - - - - {t('earnFlow.poolInfoScreen.ratePercent', { rate: dailyYieldRate.toFixed(4) })} - - - - ) -} - -function TvlCard({ - earnPosition, - onInfoIconPress, -}: { - earnPosition: EarnPosition - onInfoIconPress: () => void -}) { - const localCurrencySymbol = useSelector(getLocalCurrencySymbol) - const { t } = useTranslation() - const tvl = earnPosition.dataProps.tvl - const tvlInFiat = useDollarsToLocalAmount(tvl ?? null) - const tvlString = useMemo(() => { - return `${localCurrencySymbol}${tvlInFiat ? formatValueToDisplay(tvlInFiat) : '--'}` - }, [localCurrencySymbol, tvlInFiat]) - - return ( - - - - - - {tvlString} - - - ) -} - -function AgeCard({ ageOfPool, onInfoIconPress }: { ageOfPool: Date; onInfoIconPress: () => void }) { - const { t } = useTranslation() - const dateInterval: Duration = intervalToDuration({ - start: ageOfPool, - end: new Date(), - }) - - return ( - - - - - - {formattedDuration(dateInterval)} - - - ) -} - function LearnMoreTouchable({ url, providerName, @@ -818,9 +501,6 @@ const styles = StyleSheet.create({ flex: { flex: 1, }, - flexShrink: { - flexShrink: 1, - }, scrollContainer: { padding: Spacing.Thick24, ...(Platform.OS === 'android' && { @@ -850,74 +530,9 @@ const styles = StyleSheet.create({ rowGap: 0, // Set to Zero to prevent gap between rows when flexWrap is set to wrap flexWrap: 'wrap', }, - tokenIconsContainer: { - flex: 1, - flexDirection: 'row', - alignItems: 'center', - }, contentContainer: { gap: Spacing.Regular16, }, - card: { - padding: Spacing.Regular16, - borderColor: Colors.gray2, - borderWidth: 1, - borderRadius: 12, - gap: Spacing.Regular16, - }, - cardLineContainer: { - flex: 1, - flexDirection: 'row', - justifyContent: 'space-between', - }, - cardLineLabel: { - paddingRight: 20, // Prevents Icon from being cut off on long labels - }, - yieldRateLabelContainer: { - flexDirection: 'row', - gap: Spacing.Tiny4, - }, - cardTitleText: { - ...typeScale.labelSemiBoldMedium, - color: Colors.black, - }, - cardLabelText: { - ...typeScale.bodyMedium, - color: Colors.gray3, - }, - depositAndEarningCard: { - backgroundColor: Colors.gray1, - padding: 0, - gap: 0, - }, - depositAndEarningCardTitleContainer: { - padding: Spacing.Regular16, - alignItems: 'center', - gap: Spacing.Tiny4, - }, - depositAndEarningCardTitleText: { - ...typeScale.titleMedium, - color: Colors.black, - }, - depositAndEarningCardSubtitleContainer: { - backgroundColor: Colors.white, - padding: Spacing.Regular16, - borderBottomLeftRadius: 16, - borderBottomRightRadius: 16, - gap: Spacing.Smallest8, - }, - depositAndEarningsCardLabelText: { - ...typeScale.bodyMedium, - color: Colors.black, - flexWrap: 'wrap', - textAlign: 'left', - }, - depositAndEarningsCardValueText: { - ...typeScale.bodyMedium, - color: Colors.black, - flexWrap: 'wrap', - textAlign: 'right', - }, learnMoreContainer: { flexShrink: 1, flexWrap: 'wrap', diff --git a/src/earn/SafetyCard.test.tsx b/src/earn/poolInfoScreen/SafetyCard.test.tsx similarity index 98% rename from src/earn/SafetyCard.test.tsx rename to src/earn/poolInfoScreen/SafetyCard.test.tsx index c06f67024cf..5835d896ccb 100644 --- a/src/earn/SafetyCard.test.tsx +++ b/src/earn/poolInfoScreen/SafetyCard.test.tsx @@ -2,7 +2,7 @@ import { fireEvent, render } from '@testing-library/react-native' import React from 'react' import AppAnalytics from 'src/analytics/AppAnalytics' import { EarnEvents } from 'src/analytics/Events' -import { SafetyCard } from 'src/earn/SafetyCard' +import { SafetyCard } from 'src/earn/poolInfoScreen/SafetyCard' import Colors from 'src/styles/colors' import { NetworkId } from 'src/transactions/types' diff --git a/src/earn/SafetyCard.tsx b/src/earn/poolInfoScreen/SafetyCard.tsx similarity index 86% rename from src/earn/SafetyCard.tsx rename to src/earn/poolInfoScreen/SafetyCard.tsx index c54656e3072..2bc8ecc71b7 100644 --- a/src/earn/SafetyCard.tsx +++ b/src/earn/poolInfoScreen/SafetyCard.tsx @@ -6,6 +6,7 @@ import { EarnEvents } from 'src/analytics/Events' import { EarnCommonProperties } from 'src/analytics/Properties' import { LabelWithInfo } from 'src/components/LabelWithInfo' import Touchable from 'src/components/Touchable' +import { styles as cardStyles } from 'src/earn/poolInfoScreen/Cards' import DataDown from 'src/icons/DataDown' import DataUp from 'src/icons/DataUp' import { Safety, SafetyRisk } from 'src/positions/types' @@ -51,13 +52,13 @@ export function SafetyCard({ const { t } = useTranslation() const [expanded, setExpanded] = React.useState(false) return ( - - - + + + @@ -84,7 +85,7 @@ export function SafetyCard({ )} { setExpanded((prev) => !prev) AppAnalytics.track(EarnEvents.earn_pool_info_tap_safety_details, { @@ -104,24 +105,6 @@ export function SafetyCard({ } const styles = StyleSheet.create({ - card: { - padding: Spacing.Regular16, - borderColor: Colors.gray2, - borderWidth: 1, - borderRadius: 12, - gap: Spacing.Regular16, - }, - cardLineContainer: { - flex: 1, - flexDirection: 'row', - }, - cardTitleText: { - ...typeScale.labelSemiBoldMedium, - color: Colors.black, - }, - cardLineLabel: { - paddingRight: 20, // Prevents Icon from being cut off on long labels - }, tripleBarContainer: { flex: 1, gap: 2, diff --git a/src/earn/poolInfoScreen/TokenIcons.tsx b/src/earn/poolInfoScreen/TokenIcons.tsx new file mode 100644 index 00000000000..d743a3b5d85 --- /dev/null +++ b/src/earn/poolInfoScreen/TokenIcons.tsx @@ -0,0 +1,37 @@ +import React from 'react' +import { StyleSheet, View } from 'react-native' +import TokenIcon, { IconSize } from 'src/components/TokenIcon' +import { Spacing } from 'src/styles/styles' +import { TokenBalance } from 'src/tokens/slice' + +export default function TokenIcons({ + tokensInfo, + size = IconSize.MEDIUM, + showNetworkIcon = true, +}: { + tokensInfo: TokenBalance[] + size?: IconSize + showNetworkIcon?: boolean +}) { + return ( + + {tokensInfo.map((token, index) => ( + + ))} + + ) +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + flexDirection: 'row', + alignItems: 'center', + }, +}) diff --git a/src/navigator/Navigator.tsx b/src/navigator/Navigator.tsx index 7a6096d0fd4..f7d704b24c2 100644 --- a/src/navigator/Navigator.tsx +++ b/src/navigator/Navigator.tsx @@ -36,7 +36,7 @@ import EarnCollectScreen from 'src/earn/EarnCollectScreen' import EarnEnterAmount from 'src/earn/EarnEnterAmount' import EarnHome from 'src/earn/EarnHome' import EarnInfoScreen from 'src/earn/EarnInfoScreen' -import EarnPoolInfoScreen from 'src/earn/EarnPoolInfoScreen' +import EarnPoolInfoScreen from 'src/earn/poolInfoScreen/EarnPoolInfoScreen' import BidaliScreen from 'src/fiatExchanges/BidaliScreen' import CashInSuccess from 'src/fiatExchanges/CashInSuccess' import CoinbasePayScreen from 'src/fiatExchanges/CoinbasePayScreen'