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 & Conditions0>",
"footerV1_93": "By depositing crypto into an {{providerName}} pool, you accept the risks associated with using {{providerName}}. <0>Terms & Conditions0>",
"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,