diff --git a/locales/base/translation.json b/locales/base/translation.json index 65563d5c895..1f661429f58 100644 --- a/locales/base/translation.json +++ b/locales/base/translation.json @@ -2487,7 +2487,7 @@ } }, "earnFlow": { - "gasSubsidized": "{{appName}}'s covering gas for this transaction!", + "gasSubsidized": "Transaction fees are covered for a limited time", "addCryptoBottomSheet": { "title": "Add {{tokenSymbol}} on {{tokenNetwork}}", "description": "Once you add tokens you'll have to come back to finish depositing into a pool.", @@ -2591,7 +2591,9 @@ "footer": "By depositing crypto into an Aave pool, you accept the risks associated with using Aave. <0>Terms & Conditions", "footerV1_93": "By depositing crypto into an {{providerName}} pool, you accept the risks associated with using {{providerName}}. <0>Terms & Conditions", "primaryCta": "Complete", - "secondaryCta": "Cancel" + "secondaryCta": "Cancel", + "yieldRate": "Yield Rate (est.)", + "apy": "{{apy}}%" }, "collect": { "title": "Congratulations! Review & collect your earnings", diff --git a/src/earn/EarnApyAndAmount.tsx b/src/earn/EarnApyAndAmount.tsx deleted file mode 100644 index fa8f59ef1f7..00000000000 --- a/src/earn/EarnApyAndAmount.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import BigNumber from 'bignumber.js' -import React from 'react' -import { Trans, useTranslation } from 'react-i18next' -import { StyleSheet, Text, View } from 'react-native' -import TokenDisplay from 'src/components/TokenDisplay' -import TokenIcon, { IconSize } from 'src/components/TokenIcon' -import { getTotalYieldRate } from 'src/earn/poolInfo' -import { EarnPosition } from 'src/positions/types' -import { Colors } from 'src/styles/colors' -import { typeScale } from 'src/styles/fonts' -import { Spacing } from 'src/styles/styles' -import { useTokenInfo } from 'src/tokens/hooks' - -export function EarnApyAndAmount({ - tokenAmount, - pool, - testIDPrefix = 'Earn', -}: { - tokenAmount: BigNumber | null - pool: EarnPosition - testIDPrefix?: string -}) { - const { t } = useTranslation() - - const apy = getTotalYieldRate(pool) - const token = useTokenInfo(pool.dataProps.depositTokenId) - - if (!token) { - // should never happen - throw new Error(`Token not found ${pool.dataProps.depositTokenId}`) - } - - const apyString = apy.toFixed(2) - const earnUpTo = - apy && tokenAmount?.gt(0) ? tokenAmount.multipliedBy(apy).dividedBy(100) : new BigNumber(0) - - return ( - <> - - {t('earnFlow.enterAmount.earnUpToLabel')} - {t('earnFlow.enterAmount.rateLabel')} - - - - - - - - - - - - {t('earnFlow.enterAmount.rate', { - rate: apyString, - })} - - - - - ) -} - -const styles = StyleSheet.create({ - apy: { - flexDirection: 'row', - alignItems: 'center', - gap: Spacing.Tiny4, - }, - label: { - ...typeScale.bodySmall, - color: Colors.gray4, - }, - line: { - flexDirection: 'row', - alignSelf: 'flex-end', - justifyContent: 'space-between', - width: '100%', - gap: Spacing.Smallest8, - }, - valuesText: { - ...typeScale.labelSemiBoldSmall, - marginVertical: Spacing.Tiny4, - }, -}) diff --git a/src/earn/EarnDepositBottomSheet.test.tsx b/src/earn/EarnDepositBottomSheet.test.tsx index fb2c8b8a89f..0bb610ea18a 100644 --- a/src/earn/EarnDepositBottomSheet.test.tsx +++ b/src/earn/EarnDepositBottomSheet.test.tsx @@ -8,8 +8,6 @@ import EarnDepositBottomSheet from 'src/earn/EarnDepositBottomSheet' import { depositStart } from 'src/earn/slice' import { isGasSubsidizedForNetwork } from 'src/earn/utils' import { navigate } from 'src/navigator/NavigationService' -import { getDynamicConfigParams } from 'src/statsig' -import { StatsigDynamicConfigs } from 'src/statsig/types' import { NetworkId } from 'src/transactions/types' import { PreparedTransactionsPossible } from 'src/viem/prepareTransactions' import { getSerializablePreparedTransactions } from 'src/viem/preparedTransactionSerialization' @@ -21,7 +19,6 @@ import { mockTokenBalances, } from 'test/values' -jest.mock('src/statsig') jest.mock('src/earn/utils') const mockPreparedTransaction: PreparedTransactionsPossible = { @@ -31,7 +28,7 @@ const mockPreparedTransaction: PreparedTransactionsPossible = { from: '0xfrom', to: '0xto', data: '0xdata', - gas: BigInt(5e16), + gas: BigInt(5e12), _baseFeePerGas: BigInt(1), maxFeePerGas: BigInt(1), maxPriorityFeePerGas: undefined, @@ -40,7 +37,7 @@ const mockPreparedTransaction: PreparedTransactionsPossible = { from: '0xfrom', to: '0xto', data: '0xdata', - gas: BigInt(1e16), + gas: BigInt(1e12), _baseFeePerGas: BigInt(1), maxFeePerGas: BigInt(1), maxPriorityFeePerGas: undefined, @@ -66,18 +63,6 @@ describe('EarnDepositBottomSheet', () => { beforeEach(() => { jest.clearAllMocks() - jest.mocked(getDynamicConfigParams).mockImplementation(({ configName, defaultValues }) => { - switch (configName) { - case StatsigDynamicConfigs.EARN_STABLECOIN_CONFIG: - return { - providerName: 'Aave', - providerLogoUrl: 'logoUrl', - providerTermsAndConditionsUrl: 'termsUrl', - } - default: - return defaultValues - } - }) jest.mocked(isGasSubsidizedForNetwork).mockReturnValue(false) }) @@ -101,15 +86,16 @@ describe('EarnDepositBottomSheet', () => { getByText('earnFlow.depositBottomSheet.descriptionV1_93, {"providerName":"Aave"}') ).toBeTruthy() - expect(getByTestId('EarnDepositBottomSheet/EarnApyAndAmount/Apy')).toBeTruthy() - expect(queryByTestId('EarnDeposit/GasSubsidized')).toBeFalsy() + expect(getByText('earnFlow.depositBottomSheet.yieldRate')).toBeTruthy() + expect(getByText('earnFlow.depositBottomSheet.apy, {"apy":"1.92"}')).toBeTruthy() + expect(getByText('earnFlow.depositBottomSheet.amount')).toBeTruthy() - expect(getByTestId('EarnDeposit/Amount')).toHaveTextContent('100.00 USDC') + expect(getByTestId('EarnDeposit/Amount')).toHaveTextContent('100.00 USDC(₱133.00)') expect(getByText('earnFlow.depositBottomSheet.fee')).toBeTruthy() - expect(getByTestId('EarnDeposit/Fee')).toHaveTextContent('0.06 ETH') + expect(getByTestId('EarnDeposit/Fee')).toHaveTextContent('₱0.012(0.000006 ETH)') expect(getByText('earnFlow.depositBottomSheet.provider')).toBeTruthy() expect(getByText('Aave')).toBeTruthy() diff --git a/src/earn/EarnDepositBottomSheet.tsx b/src/earn/EarnDepositBottomSheet.tsx index 3956859f152..85284ac5ca0 100644 --- a/src/earn/EarnDepositBottomSheet.tsx +++ b/src/earn/EarnDepositBottomSheet.tsx @@ -2,8 +2,6 @@ import BigNumber from 'bignumber.js' import React, { RefObject } from 'react' import { Trans, useTranslation } from 'react-i18next' import { StyleSheet, Text, View } from 'react-native' -import FastImage from 'react-native-fast-image' -import { ResizeMode } from 'react-native-video' import { useDispatch } from 'react-redux' import AppAnalytics from 'src/analytics/AppAnalytics' import { EarnEvents } from 'src/analytics/Events' @@ -11,12 +9,11 @@ import BottomSheet, { BottomSheetModalRefType } from 'src/components/BottomSheet import Button, { BtnSizes, BtnTypes } from 'src/components/Button' import TokenDisplay from 'src/components/TokenDisplay' import Touchable from 'src/components/Touchable' -import { EarnApyAndAmount } from 'src/earn/EarnApyAndAmount' +import { getTotalYieldRate } from 'src/earn/poolInfo' import { depositStatusSelector } from 'src/earn/selectors' import { depositStart } from 'src/earn/slice' import { isGasSubsidizedForNetwork } from 'src/earn/utils' import InfoIcon from 'src/icons/InfoIcon' -import Logo from 'src/images/Logo' import { navigate } from 'src/navigator/NavigationService' import { Screens } from 'src/navigator/Screens' import { EarnPosition } from 'src/positions/types' @@ -24,15 +21,13 @@ import { useSelector } from 'src/redux/hooks' import { NETWORK_NAMES } from 'src/shared/conts' import Colors from 'src/styles/colors' import { typeScale } from 'src/styles/fonts' -import { Shadow, Spacing, getShadowStyle } from 'src/styles/styles' +import { Spacing } from 'src/styles/styles' import { PreparedTransactionsPossible, getFeeCurrencyAndAmounts, } from 'src/viem/prepareTransactions' import { getSerializablePreparedTransactions } from 'src/viem/preparedTransactionSerialization' -const LOGO_SIZE = 24 - export default function EarnDepositBottomSheet({ forwardedRef, preparedTransaction, @@ -99,35 +94,58 @@ export default function EarnDepositBottomSheet({ return ( - {t('earnFlow.depositBottomSheet.title')} {t('earnFlow.depositBottomSheet.descriptionV1_93', { providerName: pool.appName })} - - - + + + {t('earnFlow.depositBottomSheet.apy', { + apy: getTotalYieldRate(pool).toFixed(2), + })} + + - + + + + {'('} + + {')'} + + - + + + + {'('} + + {')'} + + {isGasSubsidized && ( {t('earnFlow.gasSubsidized')} @@ -201,23 +219,6 @@ function LabelledItem({ label, children }: { label: string; children: React.Reac ) } -function Logos({ providerUrl }: { providerUrl: string }) { - return ( - - - - - - - - - ) -} - const styles = StyleSheet.create({ container: { flex: 1, @@ -236,29 +237,19 @@ const styles = StyleSheet.create({ }, label: { ...typeScale.labelXSmall, - color: Colors.gray4, + color: Colors.gray3, }, value: { ...typeScale.labelSemiBoldSmall, color: Colors.black, }, - logoContainer: { + valueRow: { flexDirection: 'row', + gap: Spacing.Tiny4, }, - logoBackground: { - justifyContent: 'center', - alignItems: 'center', - alignContent: 'center', - height: 40, - width: 40, - borderRadius: 100, - backgroundColor: Colors.white, - ...getShadowStyle(Shadow.SoftLight), - }, - providerImage: { - height: LOGO_SIZE, - width: LOGO_SIZE, - borderRadius: 100, + valueSecondary: { + ...typeScale.bodySmall, + color: Colors.gray3, }, providerNameContainer: { flexDirection: 'row', @@ -266,7 +257,6 @@ const styles = StyleSheet.create({ alignItems: 'center', }, footer: { - marginTop: Spacing.XLarge48, ...typeScale.bodySmall, color: Colors.gray3, }, @@ -282,12 +272,6 @@ const styles = StyleSheet.create({ flexGrow: 1, flexBasis: 0, }, - infoContainer: { - padding: Spacing.Regular16, - borderRadius: 16, - borderWidth: 1, - borderColor: Colors.gray2, - }, gasSubsidized: { ...typeScale.labelXSmall, color: Colors.primary,