refactor(earn): update deposit bottom sheet design (#6016)

### Description Updates for the deposit mode, swap + deposit will be in a follow up. Changes include - Removing logo - Including both fiat and crypto values for deposit amount and fees - copy updates - minor style updates [Figma](https://www.figma.com/design/E1rC3MG74qEg5V4tvbeUnU/Stablecoin-Enablement?node-id=5608-116421&node-type=frame&t=Hv5QhEGN7WKJalXY-0) ### Test plan Unit tests, manual <img src="https://github.com/user-attachments/assets/dc22053b-05a4-4b15-a4e3-5c70369298fc" width="250" /> ### Related issues - Part of ACT-1358 ### Backwards compatibility Yes ### Network scalability If a new NetworkId and/or Network are added in the future, the changes in this PR will: - [x] Continue to work without code changes, OR trigger a compilation error (guaranteeing we find it when a new network is added)
valora-inc · Sep 17, 2024 · e6743eb · e6743eb
1 parent d4067d4
commit e6743eb
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 181 deletions.
diff --git 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</0>",
       "footerV1_93": "By depositing crypto into an {{providerName}} pool, you accept the risks associated with using {{providerName}}. <0>Terms & Conditions</0>",
       "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
diff --git 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
@@ -2,37 +2,32 @@ 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'
 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'
 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 (
     <BottomSheet forwardedRef={forwardedRef} testId="EarnDepositBottomSheet">
       <View style={styles.container}>
-        <Logos providerUrl={pool.displayProps.imageUrl} />
         <Text style={styles.title}>{t('earnFlow.depositBottomSheet.title')}</Text>
         <Text style={styles.description}>
           {t('earnFlow.depositBottomSheet.descriptionV1_93', { providerName: pool.appName })}
         </Text>
-        <View style={styles.infoContainer}>
-          <EarnApyAndAmount
-            tokenAmount={amount}
-            pool={pool}
-            testIDPrefix={'EarnDepositBottomSheet'}
-          />
-        </View>
+        <LabelledItem label={t('earnFlow.depositBottomSheet.yieldRate')}>
+          <Text style={styles.value}>
+            {t('earnFlow.depositBottomSheet.apy', {
+              apy: getTotalYieldRate(pool).toFixed(2),
+            })}
+          </Text>
+        </LabelledItem>
         <LabelledItem label={t('earnFlow.depositBottomSheet.amount')}>
-          <TokenDisplay
-            testID="EarnDeposit/Amount"
-            amount={amount}
-            tokenId={pool.dataProps.depositTokenId}
-            style={styles.value}
-            showLocalAmount={false}
-          />
+          <View style={styles.valueRow} testID="EarnDeposit/Amount">
+            <TokenDisplay
+              testID="EarnDeposit/AmountCrypto"
+              amount={amount}
+              tokenId={pool.dataProps.depositTokenId}
+              style={styles.value}
+              showLocalAmount={false}
+            />
+            <Text style={styles.valueSecondary}>
+              {'('}
+              <TokenDisplay
+                testID="EarnDeposit/AmountFiat"
+                amount={amount}
+                tokenId={pool.dataProps.depositTokenId}
+                showLocalAmount={true}
+              />
+              {')'}
+            </Text>
+          </View>
         </LabelledItem>
         <LabelledItem label={t('earnFlow.depositBottomSheet.fee')}>
-          <TokenDisplay
-            testID="EarnDeposit/Fee"
-            amount={estimatedFeeAmount}
-            tokenId={feeCurrency.tokenId}
-            style={[styles.value, isGasSubsidized && { textDecorationLine: 'line-through' }]}
-            showLocalAmount={false}
-          />
+          <View style={styles.valueRow} testID="EarnDeposit/Fee">
+            <TokenDisplay
+              testID="EarnDeposit/FeeFiat"
+              amount={estimatedFeeAmount}
+              tokenId={feeCurrency.tokenId}
+              style={[styles.value, isGasSubsidized && { textDecorationLine: 'line-through' }]}
+              showLocalAmount={true}
+            />
+            <Text style={styles.valueSecondary}>
+              {'('}
+              <TokenDisplay
+                testID="EarnDeposit/FeeCrypto"
+                amount={estimatedFeeAmount}
+                tokenId={feeCurrency.tokenId}
+                showLocalAmount={false}
+              />
+              {')'}
+            </Text>
+          </View>
           {isGasSubsidized && (
             <Text style={styles.gasSubsidized} testID={'EarnDeposit/GasSubsidized'}>
               {t('earnFlow.gasSubsidized')}
@@ -201,23 +219,6 @@ function LabelledItem({ label, children }: { label: string; children: React.Reac
   )
 }
 
-function Logos({ providerUrl }: { providerUrl: string }) {
-  return (
-    <View style={styles.logoContainer}>
-      <View style={styles.logoBackground}>
-        <Logo size={LOGO_SIZE} />
-      </View>
-      <View style={[styles.logoBackground, { marginLeft: -4 }]}>
-        <FastImage
-          style={styles.providerImage}
-          source={{ uri: providerUrl }}
-          resizeMode={ResizeMode.COVER}
-        />
-      </View>
-    </View>
-  )
-}
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -236,37 +237,26 @@ 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',
     gap: 6,
     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,