From 6aa745d6374890442e343e25e09121238a318bb3 Mon Sep 17 00:00:00 2001
From: Finnian Jacobson-Schulte
<140328381+finnian0826@users.noreply.github.com>
Date: Wed, 18 Dec 2024 11:21:48 -0700
Subject: [PATCH 01/36] feat(warning): Add generic gas fee warning component
---
locales/base/translation.json | 7 ++++
src/components/GasFeeWarning.tsx | 62 ++++++++++++++++++++++++++++++++
2 files changed, 69 insertions(+)
create mode 100644 src/components/GasFeeWarning.tsx
diff --git a/locales/base/translation.json b/locales/base/translation.json
index d489b8bbf93..473dac037a5 100644
--- a/locales/base/translation.json
+++ b/locales/base/translation.json
@@ -2823,5 +2823,12 @@
"availableBalance": "Available: <0>",
"selectToken": "Select token",
"fiatPriceUnavailable": "Price unavailable"
+ },
+ "gasFeeWarning": {
+ "title": "You need more {{tokenSymbol}} for gas fees",
+ "descriptionMaxAmount": "Add {{tokenSymbol}} for gas fees or lower the amount you're {{action}}",
+ "descriptionNotEnoughGas": "Adjust the amount you're {{action}} or add {{tokenSymbol}} to continue",
+ "titleDapp": "You have an insufficient gas token balance",
+ "descriptionDapp": "Add {{amount}} {{tokenSymbol}} to complete this transaction"
}
}
diff --git a/src/components/GasFeeWarning.tsx b/src/components/GasFeeWarning.tsx
new file mode 100644
index 00000000000..88b8bd990fc
--- /dev/null
+++ b/src/components/GasFeeWarning.tsx
@@ -0,0 +1,62 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { StyleSheet } from 'react-native'
+import InLineNotification, { NotificationVariant } from 'src/components/InLineNotification'
+import { Spacing } from 'src/styles/styles'
+import { PreparedTransactionsResult } from 'src/viem/prepareTransactions'
+
+enum GasFeeWarningFlow {
+ Send = 'Send',
+ Swap = 'Swap',
+ Deposit = 'Deposit',
+ Withdraw = 'Withdraw',
+ Dapp = 'Dapp',
+}
+
+function GasFeeWarning({
+ prepareTransactionsResult,
+ flow,
+ onPressCta,
+}: {
+ prepareTransactionsResult: PreparedTransactionsResult
+ flow: GasFeeWarningFlow
+ onPressCta?: () => void
+}) {
+ const { t } = useTranslation()
+
+ if (prepareTransactionsResult.type === 'possible') {
+ return null
+ }
+
+ // TODO: Track analytics event here
+
+ const feeCurrencySymbol =
+ prepareTransactionsResult.type === 'not-enough-balance-for-gas'
+ ? prepareTransactionsResult.feeCurrencies[0].symbol
+ : prepareTransactionsResult.feeCurrency.symbol
+ return (
+
+ )
+}
+
+const styles = StyleSheet.create({
+ warning: {
+ marginTop: Spacing.Regular16,
+ paddingHorizontal: Spacing.Regular16,
+ borderRadius: 16,
+ },
+})
+
+export default GasFeeWarning
From fdd9e6fefede33555ec64211786a9c9e1f8d2bd2 Mon Sep 17 00:00:00 2001
From: Finnian Jacobson-Schulte
<140328381+finnian0826@users.noreply.github.com>
Date: Mon, 23 Dec 2024 10:45:02 -0700
Subject: [PATCH 02/36] add in description and cta label
---
locales/base/translation.json | 16 +++++++++-
src/components/GasFeeWarning.tsx | 53 +++++++++++++++++++++++++++-----
2 files changed, 61 insertions(+), 8 deletions(-)
diff --git a/locales/base/translation.json b/locales/base/translation.json
index 473dac037a5..90bede02b22 100644
--- a/locales/base/translation.json
+++ b/locales/base/translation.json
@@ -2829,6 +2829,20 @@
"descriptionMaxAmount": "Add {{tokenSymbol}} for gas fees or lower the amount you're {{action}}",
"descriptionNotEnoughGas": "Adjust the amount you're {{action}} or add {{tokenSymbol}} to continue",
"titleDapp": "You have an insufficient gas token balance",
- "descriptionDapp": "Add {{amount}} {{tokenSymbol}} to complete this transaction"
+ "descriptionDapp": "Add {{amount}} {{tokenSymbol}} to complete this transaction",
+ "cta": "Buy {{tokenSymbol}}",
+ "ctaGasToken": "{{verb}} smaller amount",
+ "actions": {
+ "sending": "sending",
+ "swapping": "swapping",
+ "depositing": "depositing",
+ "withdrawing": "withdrawing"
+ },
+ "verb": {
+ "send": "Send",
+ "swap": "Swap",
+ "deposit": "Deposit",
+ "withdraw": "Withdraw"
+ }
}
}
diff --git a/src/components/GasFeeWarning.tsx b/src/components/GasFeeWarning.tsx
index 88b8bd990fc..adedee1b93c 100644
--- a/src/components/GasFeeWarning.tsx
+++ b/src/components/GasFeeWarning.tsx
@@ -24,6 +24,22 @@ function GasFeeWarning({
}) {
const { t } = useTranslation()
+ const flowToActionString = {
+ [GasFeeWarningFlow.Send]: t('gasFeeWarning.actions.sending'),
+ [GasFeeWarningFlow.Swap]: t('gasFeeWarning.actions.swapping'),
+ [GasFeeWarningFlow.Deposit]: t('gasFeeWarning.actions.depositing'),
+ [GasFeeWarningFlow.Withdraw]: t('gasFeeWarning.actions.withdrawing'),
+ [GasFeeWarningFlow.Dapp]: undefined,
+ }
+
+ const flowToVerbString = {
+ [GasFeeWarningFlow.Send]: t('gasFeeWarning.verb.send'),
+ [GasFeeWarningFlow.Swap]: t('gasFeeWarning.verb.swap'),
+ [GasFeeWarningFlow.Deposit]: t('gasFeeWarning.verb.deposit'),
+ [GasFeeWarningFlow.Withdraw]: t('gasFeeWarning.verb.withdraw'),
+ [GasFeeWarningFlow.Dapp]: undefined,
+ }
+
if (prepareTransactionsResult.type === 'possible') {
return null
}
@@ -34,16 +50,39 @@ function GasFeeWarning({
prepareTransactionsResult.type === 'not-enough-balance-for-gas'
? prepareTransactionsResult.feeCurrencies[0].symbol
: prepareTransactionsResult.feeCurrency.symbol
+
+ const amountToAdd = flow === GasFeeWarningFlow.Dapp ? 0 : undefined // TODO: Get amount here
+
+ const title =
+ flow === GasFeeWarningFlow.Dapp
+ ? t('gasFeeWarning.titleDapp')
+ : t('gasFeeWarning.title', { feeTokenSymbol: feeCurrencySymbol })
+ const description =
+ flow === GasFeeWarningFlow.Dapp
+ ? t('gasFeeWarning.descriptionDapp', { amount: amountToAdd, tokenSymbol: feeCurrencySymbol })
+ : prepareTransactionsResult.type === 'not-enough-balance-for-gas'
+ ? t('gasFeeWarning.descriptionNotEnoughGas', {
+ action: flowToActionString[flow],
+ tokenSymbol: feeCurrencySymbol,
+ })
+ : t('gasWarning.descriptionMaxAmount', {
+ action: flowToActionString[flow],
+ tokenSymbol: feeCurrencySymbol,
+ })
+ const ctaLabel =
+ flow === GasFeeWarningFlow.Dapp
+ ? undefined
+ : prepareTransactionsResult.type === 'not-enough-balance-for-gas'
+ ? t('gasFeeWarning.cta', { tokenSymbol: feeCurrencySymbol })
+ : t('gasWarning.ctaGasToken', {
+ verb: flowToVerbString[flow],
+ })
return (
Date: Mon, 23 Dec 2024 14:21:59 -0700
Subject: [PATCH 03/36] implement, update unit tests
---
locales/base/translation.json | 2 +-
src/analytics/Events.tsx | 2 ++
src/analytics/Properties.tsx | 6 ++++++
src/analytics/docs.ts | 1 +
src/components/GasFeeWarning.tsx | 26 +++++++++++++++++---------
src/earn/EarnEnterAmount.test.tsx | 12 ++++--------
src/earn/EarnEnterAmount.tsx | 28 +++++++++++++++++++++++++++-
7 files changed, 58 insertions(+), 19 deletions(-)
diff --git a/locales/base/translation.json b/locales/base/translation.json
index 90bede02b22..cb59b5327fe 100644
--- a/locales/base/translation.json
+++ b/locales/base/translation.json
@@ -2829,7 +2829,7 @@
"descriptionMaxAmount": "Add {{tokenSymbol}} for gas fees or lower the amount you're {{action}}",
"descriptionNotEnoughGas": "Adjust the amount you're {{action}} or add {{tokenSymbol}} to continue",
"titleDapp": "You have an insufficient gas token balance",
- "descriptionDapp": "Add {{amount}} {{tokenSymbol}} to complete this transaction",
+ "descriptionDapp": "Add {{tokenSymbol}} to complete this transaction",
"cta": "Buy {{tokenSymbol}}",
"ctaGasToken": "{{verb}} smaller amount",
"actions": {
diff --git a/src/analytics/Events.tsx b/src/analytics/Events.tsx
index 651372b61e9..0015363bc84 100644
--- a/src/analytics/Events.tsx
+++ b/src/analytics/Events.tsx
@@ -26,6 +26,8 @@ export enum AppEvents {
in_app_review_error = 'in_app_review_error',
handle_deeplink = 'handle_deeplink',
+
+ show_gas_fee_warning = 'show_gas_fee_warning',
}
export enum HomeEvents {
diff --git a/src/analytics/Properties.tsx b/src/analytics/Properties.tsx
index 8ecbae88456..a6c3ca447c4 100644
--- a/src/analytics/Properties.tsx
+++ b/src/analytics/Properties.tsx
@@ -52,6 +52,7 @@ import {
} from 'src/analytics/types'
import { ErrorMessages } from 'src/app/ErrorMessages'
import { AddAssetsActionType } from 'src/components/AddAssetsBottomSheet'
+import { GasFeeWarningFlow } from 'src/components/GasFeeWarning'
import { TokenPickerOrigin } from 'src/components/TokenBottomSheet'
import { DappSection } from 'src/dapps/types'
import { BeforeDepositActionName, EarnActiveMode, SerializableRewardsInfo } from 'src/earn/types'
@@ -152,6 +153,11 @@ interface AppEventsProperties {
fullPath: string | null
query: string | null
}
+ [AppEvents.show_gas_fee_warning]: {
+ flow: GasFeeWarningFlow
+ errorType: 'possible' | 'need-decrease-spend-amount-for-gas' | 'not-enough-balance-for-gas'
+ tokenNeeded: string
+ }
}
interface HomeEventsProperties {
diff --git a/src/analytics/docs.ts b/src/analytics/docs.ts
index 779b7e7f3e0..829840ff674 100644
--- a/src/analytics/docs.ts
+++ b/src/analytics/docs.ts
@@ -67,6 +67,7 @@ export const eventDocs: Record = {
[AppEvents.in_app_review_impression]: `User sees an in-app review request`,
[AppEvents.in_app_review_error]: `Error while attempting to display in-app review`,
[AppEvents.handle_deeplink]: `When a deeplink that leads into the app is detected and handled`,
+ [AppEvents.show_gas_fee_warning]: `When the gas fee warning is shown to the user`,
[HomeEvents.account_circle_tapped]: `When the account circle used in the tab navigation is tapped`,
[HomeEvents.profile_address_copy]: `When a user copies their wallet address from the profile screen`,
[HomeEvents.notification_scroll]: ``,
diff --git a/src/components/GasFeeWarning.tsx b/src/components/GasFeeWarning.tsx
index adedee1b93c..020a8d722ac 100644
--- a/src/components/GasFeeWarning.tsx
+++ b/src/components/GasFeeWarning.tsx
@@ -1,11 +1,13 @@
-import React from 'react'
+import React, { useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { StyleSheet } from 'react-native'
+import AppAnalytics from 'src/analytics/AppAnalytics'
+import { AppEvents } from 'src/analytics/Events'
import InLineNotification, { NotificationVariant } from 'src/components/InLineNotification'
import { Spacing } from 'src/styles/styles'
import { PreparedTransactionsResult } from 'src/viem/prepareTransactions'
-enum GasFeeWarningFlow {
+export enum GasFeeWarningFlow {
Send = 'Send',
Swap = 'Swap',
Deposit = 'Deposit',
@@ -17,10 +19,12 @@ function GasFeeWarning({
prepareTransactionsResult,
flow,
onPressCta,
+ testIdPrefix,
}: {
- prepareTransactionsResult: PreparedTransactionsResult
+ prepareTransactionsResult?: PreparedTransactionsResult
flow: GasFeeWarningFlow
onPressCta?: () => void
+ testIdPrefix?: string
}) {
const { t } = useTranslation()
@@ -40,18 +44,22 @@ function GasFeeWarning({
[GasFeeWarningFlow.Dapp]: undefined,
}
- if (prepareTransactionsResult.type === 'possible') {
+ if (!prepareTransactionsResult || prepareTransactionsResult.type === 'possible') {
return null
}
- // TODO: Track analytics event here
-
const feeCurrencySymbol =
prepareTransactionsResult.type === 'not-enough-balance-for-gas'
? prepareTransactionsResult.feeCurrencies[0].symbol
: prepareTransactionsResult.feeCurrency.symbol
- const amountToAdd = flow === GasFeeWarningFlow.Dapp ? 0 : undefined // TODO: Get amount here
+ useEffect(() => {
+ AppAnalytics.track(AppEvents.show_gas_fee_warning, {
+ flow,
+ errorType: prepareTransactionsResult.type,
+ tokenNeeded: feeCurrencySymbol,
+ })
+ }, [])
const title =
flow === GasFeeWarningFlow.Dapp
@@ -59,7 +67,7 @@ function GasFeeWarning({
: t('gasFeeWarning.title', { feeTokenSymbol: feeCurrencySymbol })
const description =
flow === GasFeeWarningFlow.Dapp
- ? t('gasFeeWarning.descriptionDapp', { amount: amountToAdd, tokenSymbol: feeCurrencySymbol })
+ ? t('gasFeeWarning.descriptionDapp', { tokenSymbol: feeCurrencySymbol })
: prepareTransactionsResult.type === 'not-enough-balance-for-gas'
? t('gasFeeWarning.descriptionNotEnoughGas', {
action: flowToActionString[flow],
@@ -85,7 +93,7 @@ function GasFeeWarning({
ctaLabel={ctaLabel}
onPressCta={onPressCta}
style={styles.warning}
- testID="EarnEnterAmount/NotEnoughForGasWarning"
+ testID={`${testIdPrefix}/GasFeeWarning`}
/>
)
}
diff --git a/src/earn/EarnEnterAmount.test.tsx b/src/earn/EarnEnterAmount.test.tsx
index f8d38f6c645..60099aeac23 100644
--- a/src/earn/EarnEnterAmount.test.tsx
+++ b/src/earn/EarnEnterAmount.test.tsx
@@ -8,6 +8,7 @@ import AppAnalytics from 'src/analytics/AppAnalytics'
import { EarnEvents } from 'src/analytics/Events'
import EarnEnterAmount from 'src/earn/EarnEnterAmount'
import { usePrepareEnterAmountTransactionsCallback } from 'src/earn/hooks'
+import { Status as EarnStatus } from 'src/earn/slice'
import { CICOFlow } from 'src/fiatExchanges/types'
import { navigate } from 'src/navigator/NavigationService'
import { Screens } from 'src/navigator/Screens'
@@ -35,7 +36,6 @@ import {
mockTokenBalances,
mockUSDCAddress,
} from 'test/values'
-import { Status as EarnStatus } from 'src/earn/slice'
jest.mock('src/earn/hooks')
jest.mock('react-native-localize')
@@ -733,7 +733,7 @@ describe('EarnEnterAmount', () => {
})
})
- it('should track analytics and navigate correctly when tapping cta to add gas', async () => {
+ it('should show gas warning error when prepareTransactionsResult is type not-enough-balance-for-gas, and tapping cta behaves as expected', async () => {
jest.mocked(usePrepareEnterAmountTransactionsCallback).mockReturnValue({
prepareTransactionsResult: {
prepareTransactionsResult: mockPreparedTransactionNotEnough,
@@ -750,12 +750,8 @@ describe('EarnEnterAmount', () => {
)
- await waitFor(() => expect(getByTestId('EarnEnterAmount/NotEnoughForGasWarning')).toBeTruthy())
- fireEvent.press(
- getByText(
- 'earnFlow.enterAmount.notEnoughBalanceForGasWarning.noGasCta, {"feeTokenSymbol":"ETH","network":"Arbitrum Sepolia"}'
- )
- )
+ await waitFor(() => expect(getByTestId('EarnEnterAmount/GasFeeWarning')).toBeTruthy())
+ fireEvent.press(getByText('gasFeeWarning.cta, {"tokenSymbol":"ETH"}'))
expect(AppAnalytics.track).toHaveBeenCalledWith(EarnEvents.earn_deposit_add_gas_press, {
gasTokenId: mockArbEthTokenId,
networkId: NetworkId['arbitrum-sepolia'],
diff --git a/src/earn/EarnEnterAmount.tsx b/src/earn/EarnEnterAmount.tsx
index 10752637e62..f3ce5e1007b 100644
--- a/src/earn/EarnEnterAmount.tsx
+++ b/src/earn/EarnEnterAmount.tsx
@@ -10,6 +10,7 @@ import { EarnEvents, SendEvents } from 'src/analytics/Events'
import BackButton from 'src/components/BackButton'
import BottomSheet, { BottomSheetModalRefType } from 'src/components/BottomSheet'
import Button, { BtnSizes, BtnTypes } from 'src/components/Button'
+import GasFeeWarning, { GasFeeWarningFlow } from 'src/components/GasFeeWarning'
import InLineNotification, { NotificationVariant } from 'src/components/InLineNotification'
import KeyboardAwareScrollView from 'src/components/KeyboardAwareScrollView'
import { LabelWithInfo } from 'src/components/LabelWithInfo'
@@ -21,6 +22,7 @@ import Touchable from 'src/components/Touchable'
import CustomHeader from 'src/components/header/CustomHeader'
import EarnDepositBottomSheet from 'src/earn/EarnDepositBottomSheet'
import { usePrepareEnterAmountTransactionsCallback } from 'src/earn/hooks'
+import { depositStatusSelector } from 'src/earn/selectors'
import { getSwapToAmountInDecimals } from 'src/earn/utils'
import { CICOFlow } from 'src/fiatExchanges/types'
import ArrowRightThick from 'src/icons/ArrowRightThick'
@@ -49,7 +51,6 @@ import { parseInputAmount } from 'src/utils/parsing'
import { getFeeCurrencyAndAmounts, PreparedTransactionsResult } from 'src/viem/prepareTransactions'
import { walletAddressSelector } from 'src/web3/selectors'
import { isAddress } from 'viem'
-import { depositStatusSelector } from 'src/earn/selectors'
type Props = NativeStackScreenProps
@@ -480,6 +481,31 @@ function EarnEnterAmount({ route }: Props) {
/>
)}
+ {
+ AppAnalytics.track(EarnEvents.earn_deposit_add_gas_press, {
+ gasTokenId: feeCurrencies[0].tokenId,
+ depositTokenId: pool.dataProps.depositTokenId,
+ networkId: pool.networkId,
+ providerId: pool.appId,
+ poolId: pool.positionId,
+ })
+ if (prepareTransactionsResult && prepareTransactionsResult.type !== 'possible') {
+ const token =
+ prepareTransactionsResult.type === 'not-enough-balance-for-gas'
+ ? prepareTransactionsResult.feeCurrencies[0]
+ : prepareTransactionsResult.feeCurrency
+ navigate(Screens.FiatExchangeAmount, {
+ tokenId: token.tokenId,
+ flow: CICOFlow.CashIn,
+ tokenSymbol: token.symbol,
+ })
+ }
+ }}
+ testIdPrefix={'EarnEnterAmount'}
+ />
{showNotEnoughBalanceForGasWarning && (
Date: Mon, 23 Dec 2024 14:26:04 -0700
Subject: [PATCH 04/36] fix hook issue
---
src/components/GasFeeWarning.tsx | 10 ++++++++++
1 file changed, 10 insertions(+)
diff --git a/src/components/GasFeeWarning.tsx b/src/components/GasFeeWarning.tsx
index 020a8d722ac..89112ecb055 100644
--- a/src/components/GasFeeWarning.tsx
+++ b/src/components/GasFeeWarning.tsx
@@ -44,6 +44,16 @@ function GasFeeWarning({
[GasFeeWarningFlow.Dapp]: undefined,
}
+ useEffect(() => {
+ if (prepareTransactionsResult && prepareTransactionsResult.type !== 'possible') {
+ AppAnalytics.track(AppEvents.show_gas_fee_warning, {
+ flow,
+ errorType: prepareTransactionsResult.type,
+ tokenNeeded: feeCurrencySymbol,
+ })
+ }
+ }, [prepareTransactionsResult])
+
if (!prepareTransactionsResult || prepareTransactionsResult.type === 'possible') {
return null
}
From 9a136346540848bcabae69446bdc629de84d7642 Mon Sep 17 00:00:00 2001
From: Finnian Jacobson-Schulte
<140328381+finnian0826@users.noreply.github.com>
Date: Mon, 23 Dec 2024 14:30:39 -0700
Subject: [PATCH 05/36] remove extra hook
---
src/components/GasFeeWarning.tsx | 8 --------
1 file changed, 8 deletions(-)
diff --git a/src/components/GasFeeWarning.tsx b/src/components/GasFeeWarning.tsx
index 89112ecb055..1b423ddb651 100644
--- a/src/components/GasFeeWarning.tsx
+++ b/src/components/GasFeeWarning.tsx
@@ -63,14 +63,6 @@ function GasFeeWarning({
? prepareTransactionsResult.feeCurrencies[0].symbol
: prepareTransactionsResult.feeCurrency.symbol
- useEffect(() => {
- AppAnalytics.track(AppEvents.show_gas_fee_warning, {
- flow,
- errorType: prepareTransactionsResult.type,
- tokenNeeded: feeCurrencySymbol,
- })
- }, [])
-
const title =
flow === GasFeeWarningFlow.Dapp
? t('gasFeeWarning.titleDapp')
From 08d5cfe79906c3403cf7d4fac28b651eaa0eaf25 Mon Sep 17 00:00:00 2001
From: Finnian Jacobson-Schulte
<140328381+finnian0826@users.noreply.github.com>
Date: Mon, 30 Dec 2024 13:47:28 -0700
Subject: [PATCH 06/36] add unit tests
---
src/components/GasFeeWarning.test.tsx | 161 ++++++++++++++++++++++++++
src/components/GasFeeWarning.tsx | 4 +-
src/viem/prepareTransactions.ts | 2 +-
3 files changed, 164 insertions(+), 3 deletions(-)
create mode 100644 src/components/GasFeeWarning.test.tsx
diff --git a/src/components/GasFeeWarning.test.tsx b/src/components/GasFeeWarning.test.tsx
new file mode 100644
index 00000000000..d650d383b5b
--- /dev/null
+++ b/src/components/GasFeeWarning.test.tsx
@@ -0,0 +1,161 @@
+import { fireEvent, render } from '@testing-library/react-native'
+import BigNumber from 'bignumber.js'
+import React from 'react'
+import { Provider } from 'react-redux'
+import AppAnalytics from 'src/analytics/AppAnalytics'
+import { AppEvents } from 'src/analytics/Events'
+import GasFeeWarning, { GasFeeWarningFlow } from 'src/components/GasFeeWarning'
+import {
+ PreparedTransactionsNeedDecreaseSpendAmountForGas,
+ PreparedTransactionsNotEnoughBalanceForGas,
+ PreparedTransactionsPossible,
+} from 'src/viem/prepareTransactions'
+import { createMockStore } from 'test/utils'
+import { mockArbEthTokenId, mockCeloTokenId, mockTokenBalances } from 'test/values'
+
+const mockPreparedTransactionPossible: PreparedTransactionsPossible = {
+ type: 'possible' as const,
+ transactions: [],
+ feeCurrency: {
+ ...mockTokenBalances[mockArbEthTokenId],
+ isNative: true,
+ balance: new BigNumber(10),
+ priceUsd: new BigNumber(1),
+ lastKnownPriceUsd: new BigNumber(1),
+ },
+}
+
+const mockPreparedTransactionNotEnoughCelo: PreparedTransactionsNotEnoughBalanceForGas = {
+ type: 'not-enough-balance-for-gas' as const,
+ feeCurrencies: [
+ {
+ ...mockTokenBalances[mockCeloTokenId],
+ isNative: true,
+ balance: new BigNumber(0),
+ priceUsd: new BigNumber(1500),
+ lastKnownPriceUsd: new BigNumber(1500),
+ },
+ ],
+}
+
+const mockPreparedTransactionNeedDecreaseCelo: PreparedTransactionsNeedDecreaseSpendAmountForGas = {
+ type: 'need-decrease-spend-amount-for-gas' as const,
+ feeCurrency: {
+ ...mockTokenBalances[mockCeloTokenId],
+ isNative: true,
+ balance: new BigNumber(0),
+ priceUsd: new BigNumber(1500),
+ lastKnownPriceUsd: new BigNumber(1500),
+ },
+ maxGasFeeInDecimal: new BigNumber(1),
+ estimatedGasFeeInDecimal: new BigNumber(1),
+ decreasedSpendAmount: new BigNumber(1),
+}
+
+const mockPreparedTransactionNotEnoughEth: PreparedTransactionsNotEnoughBalanceForGas = {
+ type: 'not-enough-balance-for-gas' as const,
+ feeCurrencies: [
+ {
+ ...mockTokenBalances[mockArbEthTokenId],
+ isNative: true,
+ balance: new BigNumber(0),
+ priceUsd: new BigNumber(1500),
+ lastKnownPriceUsd: new BigNumber(1500),
+ },
+ ],
+}
+
+const mockPreparedTransactionNeedDecreaseEth: PreparedTransactionsNeedDecreaseSpendAmountForGas = {
+ type: 'need-decrease-spend-amount-for-gas' as const,
+ feeCurrency: {
+ ...mockTokenBalances[mockArbEthTokenId],
+ isNative: true,
+ balance: new BigNumber(0),
+ priceUsd: new BigNumber(1500),
+ lastKnownPriceUsd: new BigNumber(1500),
+ },
+ maxGasFeeInDecimal: new BigNumber(1),
+ estimatedGasFeeInDecimal: new BigNumber(1),
+ decreasedSpendAmount: new BigNumber(1),
+}
+
+describe('GasFeeWarning', () => {
+ beforeEach(() => {
+ jest.clearAllMocks()
+ })
+ it('should return null if prepareTransactionsResult is undefined', () => {
+ const store = createMockStore()
+ const { queryByTestId } = render(
+
+
+
+ )
+ expect(queryByTestId('test/GasFeeWarning')).toBeNull()
+ })
+ it('should return null if prepareTransactionsResult.type is possible', () => {
+ const store = createMockStore()
+ const { queryByTestId } = render(
+
+
+
+ )
+ expect(queryByTestId('test/GasFeeWarning')).toBeNull()
+ })
+ it.each`
+ scenario | flow | prepareTransactionsResult | feeCurrencySymbol | title | description | ctaLabel
+ ${'sending max amount of CELO'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNeedDecreaseCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.sending","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.send"}'}
+ ${'sending max amount of ETH'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNeedDecreaseEth} | ${'ETH'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.sending","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.send"}'}
+ ${'sending with insufficient CELO'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNotEnoughCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.sending","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
+ ${'sending with insufficient ETH'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNotEnoughEth} | ${'ETH'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.sending","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
+ ${'swapping max amount of CELO'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNeedDecreaseCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.swapping","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.swap"}'}
+ ${'swapping max amount of ETH'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNeedDecreaseEth} | ${'ETH'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.swapping","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.swap"}'}
+ ${'swapping with insufficient CELO'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNotEnoughCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.swapping","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
+ ${'swapping with insufficient ETH'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNotEnoughEth} | ${'ETH'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.swapping","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
+ ${'withdrawing max amount of CELO'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNeedDecreaseCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.withdrawing","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.withdraw"}'}
+ ${'withdrawing max amount of ETH'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNeedDecreaseEth} | ${'ETH'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.withdrawing","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.withdraw"}'}
+ ${'withdrawing with insufficient CELO'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNotEnoughCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.withdrawing","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
+ ${'withdrawing with insufficient ETH'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNotEnoughEth} | ${'ETH'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.withdrawing","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
+ ${'depositing max amount of CELO'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNeedDecreaseCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.depositing","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.deposit"}'}
+ ${'depositing max amount of ETH'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNeedDecreaseEth} | ${'ETH'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.depositing","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.deposit"}'}
+ ${'depositing with insufficient CELO'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNotEnoughCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.depositing","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
+ ${'depositing with insufficient ETH'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNotEnoughEth} | ${'ETH'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.depositing","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
+ ${'dapp transaction with max amount of CELO'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNeedDecreaseCelo} | ${'CELO'} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
+ ${'dapp transaction with max amount of ETH'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNeedDecreaseEth} | ${'ETH'} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
+ ${'dapp transaction with insufficient CELO'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNotEnoughCelo} | ${'CELO'} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
+ ${'dapp transaction with insufficient ETH'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNotEnoughEth} | ${'ETH'} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
+ `(
+ 'renders error correctly when $scenario',
+ ({ flow, prepareTransactionsResult, feeCurrencySymbol, title, description, ctaLabel }) => {
+ const store = createMockStore()
+ const onPressCta = jest.fn()
+ const { getByTestId, getByText } = render(
+
+
+
+ )
+ expect(getByTestId('test/GasFeeWarning')).toBeTruthy()
+ expect(AppAnalytics.track).toHaveBeenCalledTimes(1)
+ expect(AppAnalytics.track).toHaveBeenCalledWith(AppEvents.show_gas_fee_warning, {
+ flow,
+ errorType: prepareTransactionsResult.type,
+ tokenNeeded: feeCurrencySymbol,
+ })
+ expect(getByText(title)).toBeTruthy()
+ expect(getByText(description)).toBeTruthy()
+ if (ctaLabel) {
+ expect(getByText(ctaLabel)).toBeTruthy()
+ fireEvent.press(getByText(ctaLabel))
+ expect(onPressCta).toHaveBeenCalledTimes(1)
+ }
+ }
+ )
+})
diff --git a/src/components/GasFeeWarning.tsx b/src/components/GasFeeWarning.tsx
index 1b423ddb651..e73d9de7f63 100644
--- a/src/components/GasFeeWarning.tsx
+++ b/src/components/GasFeeWarning.tsx
@@ -75,7 +75,7 @@ function GasFeeWarning({
action: flowToActionString[flow],
tokenSymbol: feeCurrencySymbol,
})
- : t('gasWarning.descriptionMaxAmount', {
+ : t('gasFeeWarning.descriptionMaxAmount', {
action: flowToActionString[flow],
tokenSymbol: feeCurrencySymbol,
})
@@ -84,7 +84,7 @@ function GasFeeWarning({
? undefined
: prepareTransactionsResult.type === 'not-enough-balance-for-gas'
? t('gasFeeWarning.cta', { tokenSymbol: feeCurrencySymbol })
- : t('gasWarning.ctaGasToken', {
+ : t('gasFeeWarning.ctaGasToken', {
verb: flowToVerbString[flow],
})
return (
diff --git a/src/viem/prepareTransactions.ts b/src/viem/prepareTransactions.ts
index 18396345432..889d7ff9651 100644
--- a/src/viem/prepareTransactions.ts
+++ b/src/viem/prepareTransactions.ts
@@ -46,7 +46,7 @@ export interface PreparedTransactionsPossible {
feeCurrency: TokenBalance
}
-interface PreparedTransactionsNeedDecreaseSpendAmountForGas {
+export interface PreparedTransactionsNeedDecreaseSpendAmountForGas {
type: 'need-decrease-spend-amount-for-gas'
feeCurrency: TokenBalance
maxGasFeeInDecimal: BigNumber
From 8df26f88c7875bc4315ee867843e56701ebcfde6 Mon Sep 17 00:00:00 2001
From: Finnian Jacobson-Schulte
<140328381+finnian0826@users.noreply.github.com>
Date: Mon, 30 Dec 2024 14:24:29 -0700
Subject: [PATCH 07/36] cleanup
---
src/components/GasFeeWarning.test.tsx | 4 +--
src/earn/EarnEnterAmount.tsx | 38 ---------------------------
2 files changed, 2 insertions(+), 40 deletions(-)
diff --git a/src/components/GasFeeWarning.test.tsx b/src/components/GasFeeWarning.test.tsx
index d650d383b5b..cf708527771 100644
--- a/src/components/GasFeeWarning.test.tsx
+++ b/src/components/GasFeeWarning.test.tsx
@@ -152,10 +152,10 @@ describe('GasFeeWarning', () => {
expect(getByText(title)).toBeTruthy()
expect(getByText(description)).toBeTruthy()
if (ctaLabel) {
- expect(getByText(ctaLabel)).toBeTruthy()
fireEvent.press(getByText(ctaLabel))
- expect(onPressCta).toHaveBeenCalledTimes(1)
}
+ expect(ctaLabel ? getByText(ctaLabel) : true).toBeTruthy()
+ expect(onPressCta).toHaveBeenCalledTimes(ctaLabel ? 1 : 0)
}
)
})
diff --git a/src/earn/EarnEnterAmount.tsx b/src/earn/EarnEnterAmount.tsx
index f3ce5e1007b..28f0b6d7b22 100644
--- a/src/earn/EarnEnterAmount.tsx
+++ b/src/earn/EarnEnterAmount.tsx
@@ -38,7 +38,6 @@ import { useSelector } from 'src/redux/hooks'
import { AmountInput } from 'src/send/EnterAmount'
import EnterAmountOptions from 'src/send/EnterAmountOptions'
import { AmountEnteredIn } from 'src/send/types'
-import { NETWORK_NAMES } from 'src/shared/conts'
import Colors from 'src/styles/colors'
import { typeScale } from 'src/styles/fonts'
import { Spacing } from 'src/styles/styles'
@@ -285,10 +284,6 @@ function EarnEnterAmount({ route }: Props) {
getFeeCurrencyAndAmounts(prepareTransactionsResult)
const isAmountLessThanBalance = tokenAmount && tokenAmount.lte(balanceInInputToken)
- const showNotEnoughBalanceForGasWarning =
- isAmountLessThanBalance &&
- prepareTransactionsResult &&
- prepareTransactionsResult.type === 'not-enough-balance-for-gas'
const transactionIsPossible =
isAmountLessThanBalance &&
prepareTransactionsResult &&
@@ -506,39 +501,6 @@ function EarnEnterAmount({ route }: Props) {
}}
testIdPrefix={'EarnEnterAmount'}
/>
-
- {showNotEnoughBalanceForGasWarning && (
- {
- AppAnalytics.track(EarnEvents.earn_deposit_add_gas_press, {
- gasTokenId: feeCurrencies[0].tokenId,
- depositTokenId: pool.dataProps.depositTokenId,
- networkId: pool.networkId,
- providerId: pool.appId,
- poolId: pool.positionId,
- })
- navigate(Screens.FiatExchangeAmount, {
- tokenId: prepareTransactionsResult.feeCurrencies[0].tokenId,
- flow: CICOFlow.CashIn,
- tokenSymbol: prepareTransactionsResult.feeCurrencies[0].symbol,
- })
- }}
- style={styles.warning}
- testID="EarnEnterAmount/NotEnoughForGasWarning"
- />
- )}
{!isAmountLessThanBalance && (
Date: Mon, 30 Dec 2024 14:50:31 -0700
Subject: [PATCH 08/36] cleanup
---
src/components/GasFeeWarning.test.tsx | 42 +++++++++++++--------------
src/components/GasFeeWarning.tsx | 2 +-
2 files changed, 22 insertions(+), 22 deletions(-)
diff --git a/src/components/GasFeeWarning.test.tsx b/src/components/GasFeeWarning.test.tsx
index cf708527771..7364d30d6cf 100644
--- a/src/components/GasFeeWarning.test.tsx
+++ b/src/components/GasFeeWarning.test.tsx
@@ -106,27 +106,27 @@ describe('GasFeeWarning', () => {
expect(queryByTestId('test/GasFeeWarning')).toBeNull()
})
it.each`
- scenario | flow | prepareTransactionsResult | feeCurrencySymbol | title | description | ctaLabel
- ${'sending max amount of CELO'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNeedDecreaseCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.sending","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.send"}'}
- ${'sending max amount of ETH'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNeedDecreaseEth} | ${'ETH'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.sending","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.send"}'}
- ${'sending with insufficient CELO'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNotEnoughCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.sending","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
- ${'sending with insufficient ETH'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNotEnoughEth} | ${'ETH'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.sending","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
- ${'swapping max amount of CELO'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNeedDecreaseCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.swapping","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.swap"}'}
- ${'swapping max amount of ETH'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNeedDecreaseEth} | ${'ETH'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.swapping","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.swap"}'}
- ${'swapping with insufficient CELO'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNotEnoughCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.swapping","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
- ${'swapping with insufficient ETH'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNotEnoughEth} | ${'ETH'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.swapping","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
- ${'withdrawing max amount of CELO'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNeedDecreaseCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.withdrawing","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.withdraw"}'}
- ${'withdrawing max amount of ETH'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNeedDecreaseEth} | ${'ETH'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.withdrawing","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.withdraw"}'}
- ${'withdrawing with insufficient CELO'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNotEnoughCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.withdrawing","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
- ${'withdrawing with insufficient ETH'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNotEnoughEth} | ${'ETH'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.withdrawing","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
- ${'depositing max amount of CELO'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNeedDecreaseCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.depositing","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.deposit"}'}
- ${'depositing max amount of ETH'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNeedDecreaseEth} | ${'ETH'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.depositing","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.deposit"}'}
- ${'depositing with insufficient CELO'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNotEnoughCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.depositing","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
- ${'depositing with insufficient ETH'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNotEnoughEth} | ${'ETH'} | ${'gasFeeWarning.title, {"feeTokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.depositing","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
- ${'dapp transaction with max amount of CELO'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNeedDecreaseCelo} | ${'CELO'} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
- ${'dapp transaction with max amount of ETH'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNeedDecreaseEth} | ${'ETH'} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
- ${'dapp transaction with insufficient CELO'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNotEnoughCelo} | ${'CELO'} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
- ${'dapp transaction with insufficient ETH'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNotEnoughEth} | ${'ETH'} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
+ scenario | flow | prepareTransactionsResult | feeCurrencySymbol | title | description | ctaLabel
+ ${'sending max amount of CELO'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNeedDecreaseCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.sending","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.send"}'}
+ ${'sending max amount of ETH'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNeedDecreaseEth} | ${'ETH'} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.sending","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.send"}'}
+ ${'sending with insufficient CELO'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNotEnoughCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.sending","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
+ ${'sending with insufficient ETH'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNotEnoughEth} | ${'ETH'} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.sending","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
+ ${'swapping max amount of CELO'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNeedDecreaseCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.swapping","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.swap"}'}
+ ${'swapping max amount of ETH'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNeedDecreaseEth} | ${'ETH'} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.swapping","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.swap"}'}
+ ${'swapping with insufficient CELO'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNotEnoughCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.swapping","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
+ ${'swapping with insufficient ETH'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNotEnoughEth} | ${'ETH'} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.swapping","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
+ ${'withdrawing max amount of CELO'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNeedDecreaseCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.withdrawing","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.withdraw"}'}
+ ${'withdrawing max amount of ETH'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNeedDecreaseEth} | ${'ETH'} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.withdrawing","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.withdraw"}'}
+ ${'withdrawing with insufficient CELO'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNotEnoughCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.withdrawing","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
+ ${'withdrawing with insufficient ETH'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNotEnoughEth} | ${'ETH'} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.withdrawing","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
+ ${'depositing max amount of CELO'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNeedDecreaseCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.depositing","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.deposit"}'}
+ ${'depositing max amount of ETH'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNeedDecreaseEth} | ${'ETH'} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.depositing","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.deposit"}'}
+ ${'depositing with insufficient CELO'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNotEnoughCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.depositing","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
+ ${'depositing with insufficient ETH'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNotEnoughEth} | ${'ETH'} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.depositing","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
+ ${'dapp transaction with max amount of CELO'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNeedDecreaseCelo} | ${'CELO'} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
+ ${'dapp transaction with max amount of ETH'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNeedDecreaseEth} | ${'ETH'} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
+ ${'dapp transaction with insufficient CELO'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNotEnoughCelo} | ${'CELO'} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
+ ${'dapp transaction with insufficient ETH'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNotEnoughEth} | ${'ETH'} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
`(
'renders error correctly when $scenario',
({ flow, prepareTransactionsResult, feeCurrencySymbol, title, description, ctaLabel }) => {
diff --git a/src/components/GasFeeWarning.tsx b/src/components/GasFeeWarning.tsx
index e73d9de7f63..9506765cd37 100644
--- a/src/components/GasFeeWarning.tsx
+++ b/src/components/GasFeeWarning.tsx
@@ -66,7 +66,7 @@ function GasFeeWarning({
const title =
flow === GasFeeWarningFlow.Dapp
? t('gasFeeWarning.titleDapp')
- : t('gasFeeWarning.title', { feeTokenSymbol: feeCurrencySymbol })
+ : t('gasFeeWarning.title', { tokenSymbol: feeCurrencySymbol })
const description =
flow === GasFeeWarningFlow.Dapp
? t('gasFeeWarning.descriptionDapp', { tokenSymbol: feeCurrencySymbol })
From 0108485de862595f65b2a515b94ae7e785c95860 Mon Sep 17 00:00:00 2001
From: Finnian Jacobson-Schulte
<140328381+finnian0826@users.noreply.github.com>
Date: Tue, 31 Dec 2024 12:04:10 -0700
Subject: [PATCH 09/36] reduce amoutn when gas token
---
src/earn/EarnEnterAmount.tsx | 18 +++++++++---------
1 file changed, 9 insertions(+), 9 deletions(-)
diff --git a/src/earn/EarnEnterAmount.tsx b/src/earn/EarnEnterAmount.tsx
index 28f0b6d7b22..e0c455b01f7 100644
--- a/src/earn/EarnEnterAmount.tsx
+++ b/src/earn/EarnEnterAmount.tsx
@@ -488,15 +488,15 @@ function EarnEnterAmount({ route }: Props) {
poolId: pool.positionId,
})
if (prepareTransactionsResult && prepareTransactionsResult.type !== 'possible') {
- const token =
- prepareTransactionsResult.type === 'not-enough-balance-for-gas'
- ? prepareTransactionsResult.feeCurrencies[0]
- : prepareTransactionsResult.feeCurrency
- navigate(Screens.FiatExchangeAmount, {
- tokenId: token.tokenId,
- flow: CICOFlow.CashIn,
- tokenSymbol: token.symbol,
- })
+ prepareTransactionsResult.type === 'not-enough-balance-for-gas'
+ ? navigate(Screens.FiatExchangeAmount, {
+ tokenId: prepareTransactionsResult.feeCurrencies[0].tokenId,
+ flow: CICOFlow.CashIn,
+ tokenSymbol: prepareTransactionsResult.feeCurrencies[0].symbol,
+ })
+ : onTokenAmountInputChange(
+ prepareTransactionsResult.decreasedSpendAmount.toString()
+ )
}
}}
testIdPrefix={'EarnEnterAmount'}
From e317b8563d144abdce8403744f72394622c247ef Mon Sep 17 00:00:00 2001
From: Finnian Jacobson-Schulte
<140328381+finnian0826@users.noreply.github.com>
Date: Tue, 31 Dec 2024 12:10:42 -0700
Subject: [PATCH 10/36] clean up analytics property
---
src/analytics/Properties.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/analytics/Properties.tsx b/src/analytics/Properties.tsx
index a6c3ca447c4..d71c3595a4f 100644
--- a/src/analytics/Properties.tsx
+++ b/src/analytics/Properties.tsx
@@ -155,7 +155,7 @@ interface AppEventsProperties {
}
[AppEvents.show_gas_fee_warning]: {
flow: GasFeeWarningFlow
- errorType: 'possible' | 'need-decrease-spend-amount-for-gas' | 'not-enough-balance-for-gas'
+ errorType: 'need-decrease-spend-amount-for-gas' | 'not-enough-balance-for-gas'
tokenNeeded: string
}
}
From 654409a5573c40de8af66334da4e81f0bcf3507c Mon Sep 17 00:00:00 2001
From: Finnian Jacobson-Schulte
<140328381+finnian0826@users.noreply.github.com>
Date: Tue, 31 Dec 2024 12:14:15 -0700
Subject: [PATCH 11/36] fix merge
---
src/earn/EarnEnterAmount.tsx | 7 +------
1 file changed, 1 insertion(+), 6 deletions(-)
diff --git a/src/earn/EarnEnterAmount.tsx b/src/earn/EarnEnterAmount.tsx
index 2fdf737ac62..219c8a47de8 100644
--- a/src/earn/EarnEnterAmount.tsx
+++ b/src/earn/EarnEnterAmount.tsx
@@ -37,8 +37,6 @@ import { hooksApiUrlSelector, positionsWithBalanceSelector } from 'src/positions
import { EarnPosition, Position } from 'src/positions/types'
import { useSelector } from 'src/redux/hooks'
import EnterAmountOptions from 'src/send/EnterAmountOptions'
-import { AmountEnteredIn } from 'src/send/types'
-import { NETWORK_NAMES } from 'src/shared/conts'
import { getFeatureGate } from 'src/statsig'
import { StatsigFeatureGates } from 'src/statsig/types'
import Colors from 'src/styles/colors'
@@ -269,7 +267,6 @@ export default function EarnEnterAmount({ route }: Props) {
const { estimatedFeeAmount, feeCurrency, maxFeeAmount } =
getFeeCurrencyAndAmounts(prepareTransactionsResult)
- const isAmountLessThanBalance = tokenAmount && tokenAmount.lte(balanceInInputToken)
const showLowerAmountError =
processedAmounts.token.bignum && processedAmounts.token.bignum.gt(inputToken.balance)
const transactionIsPossible =
@@ -422,9 +419,7 @@ export default function EarnEnterAmount({ route }: Props) {
flow: CICOFlow.CashIn,
tokenSymbol: prepareTransactionsResult.feeCurrencies[0].symbol,
})
- : onTokenAmountInputChange(
- prepareTransactionsResult.decreasedSpendAmount.toString()
- )
+ : handleAmountInputChange(prepareTransactionsResult.decreasedSpendAmount.toString())
}
}}
testIdPrefix={'EarnEnterAmount'}
From 7a33d2b785245904a61f8f91870a3334c52aa935 Mon Sep 17 00:00:00 2001
From: Finnian Jacobson-Schulte
<140328381+finnian0826@users.noreply.github.com>
Date: Tue, 31 Dec 2024 15:55:19 -0700
Subject: [PATCH 12/36] feedback pt. 1
---
src/components/GasFeeWarning.test.tsx | 47 ++++++++++++++-------------
src/components/GasFeeWarning.tsx | 18 +++++-----
2 files changed, 33 insertions(+), 32 deletions(-)
diff --git a/src/components/GasFeeWarning.test.tsx b/src/components/GasFeeWarning.test.tsx
index 7364d30d6cf..127bd0194cf 100644
--- a/src/components/GasFeeWarning.test.tsx
+++ b/src/components/GasFeeWarning.test.tsx
@@ -106,30 +106,31 @@ describe('GasFeeWarning', () => {
expect(queryByTestId('test/GasFeeWarning')).toBeNull()
})
it.each`
- scenario | flow | prepareTransactionsResult | feeCurrencySymbol | title | description | ctaLabel
- ${'sending max amount of CELO'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNeedDecreaseCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.sending","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.send"}'}
- ${'sending max amount of ETH'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNeedDecreaseEth} | ${'ETH'} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.sending","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.send"}'}
- ${'sending with insufficient CELO'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNotEnoughCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.sending","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
- ${'sending with insufficient ETH'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNotEnoughEth} | ${'ETH'} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.sending","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
- ${'swapping max amount of CELO'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNeedDecreaseCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.swapping","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.swap"}'}
- ${'swapping max amount of ETH'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNeedDecreaseEth} | ${'ETH'} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.swapping","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.swap"}'}
- ${'swapping with insufficient CELO'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNotEnoughCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.swapping","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
- ${'swapping with insufficient ETH'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNotEnoughEth} | ${'ETH'} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.swapping","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
- ${'withdrawing max amount of CELO'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNeedDecreaseCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.withdrawing","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.withdraw"}'}
- ${'withdrawing max amount of ETH'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNeedDecreaseEth} | ${'ETH'} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.withdrawing","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.withdraw"}'}
- ${'withdrawing with insufficient CELO'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNotEnoughCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.withdrawing","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
- ${'withdrawing with insufficient ETH'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNotEnoughEth} | ${'ETH'} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.withdrawing","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
- ${'depositing max amount of CELO'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNeedDecreaseCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.depositing","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.deposit"}'}
- ${'depositing max amount of ETH'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNeedDecreaseEth} | ${'ETH'} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.depositing","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.deposit"}'}
- ${'depositing with insufficient CELO'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNotEnoughCelo} | ${'CELO'} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.depositing","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
- ${'depositing with insufficient ETH'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNotEnoughEth} | ${'ETH'} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.depositing","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
- ${'dapp transaction with max amount of CELO'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNeedDecreaseCelo} | ${'CELO'} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
- ${'dapp transaction with max amount of ETH'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNeedDecreaseEth} | ${'ETH'} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
- ${'dapp transaction with insufficient CELO'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNotEnoughCelo} | ${'CELO'} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
- ${'dapp transaction with insufficient ETH'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNotEnoughEth} | ${'ETH'} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
+ scenario | flow | prepareTransactionsResult | feeCurrencyTokenId | title | description | ctaLabel
+ // SENDING CASES
+ ${'sending max amount of CELO'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.sending","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.send"}'}
+ ${'sending max amount of ETH'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.sending","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.send"}'}
+ ${'sending with insufficient CELO'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.sending","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
+ ${'sending with insufficient ETH'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.sending","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
+ ${'swapping max amount of CELO'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.swapping","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.swap"}'}
+ ${'swapping max amount of ETH'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.swapping","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.swap"}'}
+ ${'swapping with insufficient CELO'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.swapping","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
+ ${'swapping with insufficient ETH'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.swapping","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
+ ${'withdrawing max amount of CELO'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.withdrawing","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.withdraw"}'}
+ ${'withdrawing max amount of ETH'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.withdrawing","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.withdraw"}'}
+ ${'withdrawing with insufficient CELO'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.withdrawing","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
+ ${'withdrawing with insufficient ETH'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.withdrawing","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
+ ${'depositing max amount of CELO'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.depositing","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.deposit"}'}
+ ${'depositing max amount of ETH'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.depositing","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.deposit"}'}
+ ${'depositing with insufficient CELO'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.depositing","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
+ ${'depositing with insufficient ETH'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.depositing","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
+ ${'dapp transaction with max amount of CELO'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
+ ${'dapp transaction with max amount of ETH'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
+ ${'dapp transaction with insufficient CELO'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
+ ${'dapp transaction with insufficient ETH'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
`(
'renders error correctly when $scenario',
- ({ flow, prepareTransactionsResult, feeCurrencySymbol, title, description, ctaLabel }) => {
+ ({ flow, prepareTransactionsResult, feeCurrencyTokenId, title, description, ctaLabel }) => {
const store = createMockStore()
const onPressCta = jest.fn()
const { getByTestId, getByText } = render(
@@ -147,7 +148,7 @@ describe('GasFeeWarning', () => {
expect(AppAnalytics.track).toHaveBeenCalledWith(AppEvents.show_gas_fee_warning, {
flow,
errorType: prepareTransactionsResult.type,
- tokenNeeded: feeCurrencySymbol,
+ tokenId: feeCurrencyTokenId,
})
expect(getByText(title)).toBeTruthy()
expect(getByText(description)).toBeTruthy()
diff --git a/src/components/GasFeeWarning.tsx b/src/components/GasFeeWarning.tsx
index 9506765cd37..fd19e549a06 100644
--- a/src/components/GasFeeWarning.tsx
+++ b/src/components/GasFeeWarning.tsx
@@ -49,7 +49,7 @@ function GasFeeWarning({
AppAnalytics.track(AppEvents.show_gas_fee_warning, {
flow,
errorType: prepareTransactionsResult.type,
- tokenNeeded: feeCurrencySymbol,
+ tokenId: feeCurrency.tokenId,
})
}
}, [prepareTransactionsResult])
@@ -58,32 +58,32 @@ function GasFeeWarning({
return null
}
- const feeCurrencySymbol =
+ const feeCurrency =
prepareTransactionsResult.type === 'not-enough-balance-for-gas'
- ? prepareTransactionsResult.feeCurrencies[0].symbol
- : prepareTransactionsResult.feeCurrency.symbol
+ ? prepareTransactionsResult.feeCurrencies[0]
+ : prepareTransactionsResult.feeCurrency
const title =
flow === GasFeeWarningFlow.Dapp
? t('gasFeeWarning.titleDapp')
- : t('gasFeeWarning.title', { tokenSymbol: feeCurrencySymbol })
+ : t('gasFeeWarning.title', { tokenSymbol: feeCurrency.symbol })
const description =
flow === GasFeeWarningFlow.Dapp
- ? t('gasFeeWarning.descriptionDapp', { tokenSymbol: feeCurrencySymbol })
+ ? t('gasFeeWarning.descriptionDapp', { tokenSymbol: feeCurrency.symbol })
: prepareTransactionsResult.type === 'not-enough-balance-for-gas'
? t('gasFeeWarning.descriptionNotEnoughGas', {
action: flowToActionString[flow],
- tokenSymbol: feeCurrencySymbol,
+ tokenSymbol: feeCurrency.symbol,
})
: t('gasFeeWarning.descriptionMaxAmount', {
action: flowToActionString[flow],
- tokenSymbol: feeCurrencySymbol,
+ tokenSymbol: feeCurrency.symbol,
})
const ctaLabel =
flow === GasFeeWarningFlow.Dapp
? undefined
: prepareTransactionsResult.type === 'not-enough-balance-for-gas'
- ? t('gasFeeWarning.cta', { tokenSymbol: feeCurrencySymbol })
+ ? t('gasFeeWarning.cta', { tokenSymbol: feeCurrency.symbol })
: t('gasFeeWarning.ctaGasToken', {
verb: flowToVerbString[flow],
})
From 0c6c76d6a36b1a04d91f3d4645e599fe37fe4a11 Mon Sep 17 00:00:00 2001
From: Finnian Jacobson-Schulte
<140328381+finnian0826@users.noreply.github.com>
Date: Tue, 31 Dec 2024 16:01:00 -0700
Subject: [PATCH 13/36] update property
---
src/analytics/Properties.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/analytics/Properties.tsx b/src/analytics/Properties.tsx
index 9352d145e1e..4dc3e48e033 100644
--- a/src/analytics/Properties.tsx
+++ b/src/analytics/Properties.tsx
@@ -156,7 +156,7 @@ interface AppEventsProperties {
[AppEvents.show_gas_fee_warning]: {
flow: GasFeeWarningFlow
errorType: 'need-decrease-spend-amount-for-gas' | 'not-enough-balance-for-gas'
- tokenNeeded: string
+ tokenId: string
}
}
From 3f9a16de72b5a483c91107aee84f8e517fe2d0ca Mon Sep 17 00:00:00 2001
From: Finnian Jacobson-Schulte
<140328381+finnian0826@users.noreply.github.com>
Date: Tue, 31 Dec 2024 16:22:07 -0700
Subject: [PATCH 14/36] update strings
---
locales/base/translation.json | 25 ++++++++----
src/components/GasFeeWarning.tsx | 67 +++++++++++++++++++-------------
2 files changed, 57 insertions(+), 35 deletions(-)
diff --git a/locales/base/translation.json b/locales/base/translation.json
index cb59b5327fe..bbe2e5c44c6 100644
--- a/locales/base/translation.json
+++ b/locales/base/translation.json
@@ -2826,17 +2826,26 @@
},
"gasFeeWarning": {
"title": "You need more {{tokenSymbol}} for gas fees",
- "descriptionMaxAmount": "Add {{tokenSymbol}} for gas fees or lower the amount you're {{action}}",
- "descriptionNotEnoughGas": "Adjust the amount you're {{action}} or add {{tokenSymbol}} to continue",
+ "descriptionMaxAmount": {
+ "sending": "Add {{tokenSymbol}} for gas fees or lower the amount you're sending",
+ "swapping": "Add {{tokenSymbol}} for gas fees or lower the amount you're swapping",
+ "depositing": "Add {{tokenSymbol}} for gas fees or lower the amount you're depositing",
+ "withdrawing": "Add {{tokenSymbol}} for gas fees or lower the amount you're withdrawing"
+ },
+ "descriptionNotEnoughGas": {
+ "sending": "Adjust the amount you're sending or add {{tokenSymbol}} to continue",
+ "swapping": "Adjust the amount you're swapping or add {{tokenSymbol}} to continue",
+ "depositing": "Adjust the amount you're depositing or add {{tokenSymbol}} to continue",
+ "withdrawing": "Adjust the amount you're withdrawing or add {{tokenSymbol}} to continue"
+ },
"titleDapp": "You have an insufficient gas token balance",
"descriptionDapp": "Add {{tokenSymbol}} to complete this transaction",
"cta": "Buy {{tokenSymbol}}",
- "ctaGasToken": "{{verb}} smaller amount",
- "actions": {
- "sending": "sending",
- "swapping": "swapping",
- "depositing": "depositing",
- "withdrawing": "withdrawing"
+ "ctaGasToken": {
+ "send": "Send smaller amount",
+ "swap": "Swap smaller amount",
+ "deposit": "Deposit smaller amount",
+ "withdraw": "Withdraw smaller amount"
},
"verb": {
"send": "Send",
diff --git a/src/components/GasFeeWarning.tsx b/src/components/GasFeeWarning.tsx
index fd19e549a06..7bc0439e5ee 100644
--- a/src/components/GasFeeWarning.tsx
+++ b/src/components/GasFeeWarning.tsx
@@ -28,22 +28,6 @@ function GasFeeWarning({
}) {
const { t } = useTranslation()
- const flowToActionString = {
- [GasFeeWarningFlow.Send]: t('gasFeeWarning.actions.sending'),
- [GasFeeWarningFlow.Swap]: t('gasFeeWarning.actions.swapping'),
- [GasFeeWarningFlow.Deposit]: t('gasFeeWarning.actions.depositing'),
- [GasFeeWarningFlow.Withdraw]: t('gasFeeWarning.actions.withdrawing'),
- [GasFeeWarningFlow.Dapp]: undefined,
- }
-
- const flowToVerbString = {
- [GasFeeWarningFlow.Send]: t('gasFeeWarning.verb.send'),
- [GasFeeWarningFlow.Swap]: t('gasFeeWarning.verb.swap'),
- [GasFeeWarningFlow.Deposit]: t('gasFeeWarning.verb.deposit'),
- [GasFeeWarningFlow.Withdraw]: t('gasFeeWarning.verb.withdraw'),
- [GasFeeWarningFlow.Dapp]: undefined,
- }
-
useEffect(() => {
if (prepareTransactionsResult && prepareTransactionsResult.type !== 'possible') {
AppAnalytics.track(AppEvents.show_gas_fee_warning, {
@@ -63,6 +47,43 @@ function GasFeeWarning({
? prepareTransactionsResult.feeCurrencies[0]
: prepareTransactionsResult.feeCurrency
+ const flowToNotEnoughGasDescriptionString = {
+ [GasFeeWarningFlow.Send]: t('gasFeeWarning.descriptionNotEnoughGas.sending', {
+ tokenSymbol: feeCurrency.symbol,
+ }),
+ [GasFeeWarningFlow.Swap]: t('gasFeeWarning.descriptionNotEnoughGas.swapping', {
+ tokenSymbol: feeCurrency.symbol,
+ }),
+ [GasFeeWarningFlow.Deposit]: t('gasFeeWarning.descriptionNotEnoughGas.depositing', {
+ tokenSymbol: feeCurrency.symbol,
+ }),
+ [GasFeeWarningFlow.Withdraw]: t('gasFeeWarning.descriptionNotEnoughGas.withdrawing', {
+ tokenSymbol: feeCurrency.symbol,
+ }),
+ }
+
+ const flowToDescreasSpendDescriptionString = {
+ [GasFeeWarningFlow.Send]: t('gasFeeWarning.descriptionMaxAmount.sending', {
+ tokenSymbol: feeCurrency.symbol,
+ }),
+ [GasFeeWarningFlow.Swap]: t('gasFeeWarning.descriptionMaxAmount.swapping', {
+ tokenSymbol: feeCurrency.symbol,
+ }),
+ [GasFeeWarningFlow.Deposit]: t('gasFeeWarning.descriptionMaxAmount.depositing', {
+ tokenSymbol: feeCurrency.symbol,
+ }),
+ [GasFeeWarningFlow.Withdraw]: t('gasFeeWarning.descriptionMaxAmount.withdrawing', {
+ tokenSymbol: feeCurrency.symbol,
+ }),
+ }
+
+ const flowToCtaString = {
+ [GasFeeWarningFlow.Send]: t('gasFeeWarning.ctaGasToken.send'),
+ [GasFeeWarningFlow.Swap]: t('gasFeeWarning.ctaGasToken.swap'),
+ [GasFeeWarningFlow.Deposit]: t('gasFeeWarning.ctaGasToken.deposit'),
+ [GasFeeWarningFlow.Withdraw]: t('gasFeeWarning.ctaGasToken.withdraw'),
+ }
+
const title =
flow === GasFeeWarningFlow.Dapp
? t('gasFeeWarning.titleDapp')
@@ -71,22 +92,14 @@ function GasFeeWarning({
flow === GasFeeWarningFlow.Dapp
? t('gasFeeWarning.descriptionDapp', { tokenSymbol: feeCurrency.symbol })
: prepareTransactionsResult.type === 'not-enough-balance-for-gas'
- ? t('gasFeeWarning.descriptionNotEnoughGas', {
- action: flowToActionString[flow],
- tokenSymbol: feeCurrency.symbol,
- })
- : t('gasFeeWarning.descriptionMaxAmount', {
- action: flowToActionString[flow],
- tokenSymbol: feeCurrency.symbol,
- })
+ ? flowToNotEnoughGasDescriptionString[flow]
+ : flowToDescreasSpendDescriptionString[flow]
const ctaLabel =
flow === GasFeeWarningFlow.Dapp
? undefined
: prepareTransactionsResult.type === 'not-enough-balance-for-gas'
? t('gasFeeWarning.cta', { tokenSymbol: feeCurrency.symbol })
- : t('gasFeeWarning.ctaGasToken', {
- verb: flowToVerbString[flow],
- })
+ : flowToCtaString[flow]
return (
Date: Tue, 31 Dec 2024 16:25:31 -0700
Subject: [PATCH 15/36] update tests
---
src/components/GasFeeWarning.test.tsx | 42 +++++++++++++--------------
1 file changed, 21 insertions(+), 21 deletions(-)
diff --git a/src/components/GasFeeWarning.test.tsx b/src/components/GasFeeWarning.test.tsx
index 127bd0194cf..8cc60f76b45 100644
--- a/src/components/GasFeeWarning.test.tsx
+++ b/src/components/GasFeeWarning.test.tsx
@@ -106,28 +106,28 @@ describe('GasFeeWarning', () => {
expect(queryByTestId('test/GasFeeWarning')).toBeNull()
})
it.each`
- scenario | flow | prepareTransactionsResult | feeCurrencyTokenId | title | description | ctaLabel
+ scenario | flow | prepareTransactionsResult | feeCurrencyTokenId | title | description | ctaLabel
// SENDING CASES
- ${'sending max amount of CELO'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.sending","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.send"}'}
- ${'sending max amount of ETH'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.sending","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.send"}'}
- ${'sending with insufficient CELO'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.sending","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
- ${'sending with insufficient ETH'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.sending","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
- ${'swapping max amount of CELO'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.swapping","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.swap"}'}
- ${'swapping max amount of ETH'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.swapping","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.swap"}'}
- ${'swapping with insufficient CELO'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.swapping","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
- ${'swapping with insufficient ETH'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.swapping","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
- ${'withdrawing max amount of CELO'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.withdrawing","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.withdraw"}'}
- ${'withdrawing max amount of ETH'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.withdrawing","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.withdraw"}'}
- ${'withdrawing with insufficient CELO'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.withdrawing","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
- ${'withdrawing with insufficient ETH'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.withdrawing","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
- ${'depositing max amount of CELO'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.depositing","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.deposit"}'}
- ${'depositing max amount of ETH'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"action":"gasFeeWarning.actions.depositing","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"verb":"gasFeeWarning.verb.deposit"}'}
- ${'depositing with insufficient CELO'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.depositing","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
- ${'depositing with insufficient ETH'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"action":"gasFeeWarning.actions.depositing","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
- ${'dapp transaction with max amount of CELO'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
- ${'dapp transaction with max amount of ETH'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
- ${'dapp transaction with insufficient CELO'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
- ${'dapp transaction with insufficient ETH'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
+ ${'sending max amount of CELO'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount.sending, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken.send'}
+ ${'sending max amount of ETH'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount.sending, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken.send}'}
+ ${'sending with insufficient CELO'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas.sending, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
+ ${'sending with insufficient ETH'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas.sending, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
+ ${'swapping max amount of CELO'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount.swapping, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken.swap}'}
+ ${'swapping max amount of ETH'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount.swapping, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken.swap}'}
+ ${'swapping with insufficient CELO'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas.swapping, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
+ ${'swapping with insufficient ETH'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas.swapping, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
+ ${'withdrawing max amount of CELO'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount.withdrawing, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken.withdraw}'}
+ ${'withdrawing max amount of ETH'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount.withdrawing, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken.withdraw}'}
+ ${'withdrawing with insufficient CELO'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas.withdrawing, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
+ ${'withdrawing with insufficient ETH'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas.withdrawing, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
+ ${'depositing max amount of CELO'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount.depositing, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken.deposit}'}
+ ${'depositing max amount of ETH'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount.depositing, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken.deposit}'}
+ ${'depositing with insufficient CELO'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas.depositing, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
+ ${'depositing with insufficient ETH'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas.depositing, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
+ ${'dapp transaction with max amount of CELO'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
+ ${'dapp transaction with max amount of ETH'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
+ ${'dapp transaction with insufficient CELO'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
+ ${'dapp transaction with insufficient ETH'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
`(
'renders error correctly when $scenario',
({ flow, prepareTransactionsResult, feeCurrencyTokenId, title, description, ctaLabel }) => {
From 1224eeccfeaf5d2dc52308654d5ce00154090f46 Mon Sep 17 00:00:00 2001
From: Finnian Jacobson-Schulte
<140328381+finnian0826@users.noreply.github.com>
Date: Tue, 31 Dec 2024 16:26:56 -0700
Subject: [PATCH 16/36] clean up
---
src/components/GasFeeWarning.test.tsx | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/components/GasFeeWarning.test.tsx b/src/components/GasFeeWarning.test.tsx
index 8cc60f76b45..058dca3045c 100644
--- a/src/components/GasFeeWarning.test.tsx
+++ b/src/components/GasFeeWarning.test.tsx
@@ -107,7 +107,6 @@ describe('GasFeeWarning', () => {
})
it.each`
scenario | flow | prepareTransactionsResult | feeCurrencyTokenId | title | description | ctaLabel
- // SENDING CASES
${'sending max amount of CELO'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount.sending, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken.send'}
${'sending max amount of ETH'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount.sending, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken.send}'}
${'sending with insufficient CELO'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas.sending, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
From d2ba333df163596953208e07059420cd505fc5c7 Mon Sep 17 00:00:00 2001
From: Finnian Jacobson-Schulte
<140328381+finnian0826@users.noreply.github.com>
Date: Thu, 2 Jan 2025 09:49:38 -0700
Subject: [PATCH 17/36] feedback and fix tests
---
src/components/GasFeeWarning.test.tsx | 18 +++++++++---------
src/components/GasFeeWarning.tsx | 2 +-
2 files changed, 10 insertions(+), 10 deletions(-)
diff --git a/src/components/GasFeeWarning.test.tsx b/src/components/GasFeeWarning.test.tsx
index 058dca3045c..a4754a91f28 100644
--- a/src/components/GasFeeWarning.test.tsx
+++ b/src/components/GasFeeWarning.test.tsx
@@ -90,7 +90,7 @@ describe('GasFeeWarning', () => {
)
- expect(queryByTestId('test/GasFeeWarning')).toBeNull()
+ expect(queryByTestId('test/GasFeeWarning')).toBeFalsy()
})
it('should return null if prepareTransactionsResult.type is possible', () => {
const store = createMockStore()
@@ -103,24 +103,24 @@ describe('GasFeeWarning', () => {
/>
)
- expect(queryByTestId('test/GasFeeWarning')).toBeNull()
+ expect(queryByTestId('test/GasFeeWarning')).toBeFalsy()
})
it.each`
scenario | flow | prepareTransactionsResult | feeCurrencyTokenId | title | description | ctaLabel
${'sending max amount of CELO'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount.sending, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken.send'}
- ${'sending max amount of ETH'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount.sending, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken.send}'}
+ ${'sending max amount of ETH'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount.sending, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken.send'}
${'sending with insufficient CELO'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas.sending, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
${'sending with insufficient ETH'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas.sending, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
- ${'swapping max amount of CELO'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount.swapping, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken.swap}'}
- ${'swapping max amount of ETH'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount.swapping, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken.swap}'}
+ ${'swapping max amount of CELO'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount.swapping, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken.swap'}
+ ${'swapping max amount of ETH'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount.swapping, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken.swap'}
${'swapping with insufficient CELO'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas.swapping, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
${'swapping with insufficient ETH'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas.swapping, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
- ${'withdrawing max amount of CELO'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount.withdrawing, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken.withdraw}'}
- ${'withdrawing max amount of ETH'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount.withdrawing, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken.withdraw}'}
+ ${'withdrawing max amount of CELO'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount.withdrawing, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken.withdraw'}
+ ${'withdrawing max amount of ETH'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount.withdrawing, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken.withdraw'}
${'withdrawing with insufficient CELO'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas.withdrawing, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
${'withdrawing with insufficient ETH'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas.withdrawing, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
- ${'depositing max amount of CELO'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount.depositing, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken.deposit}'}
- ${'depositing max amount of ETH'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount.depositing, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken.deposit}'}
+ ${'depositing max amount of CELO'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount.depositing, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken.deposit'}
+ ${'depositing max amount of ETH'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount.depositing, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken.deposit'}
${'depositing with insufficient CELO'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas.depositing, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
${'depositing with insufficient ETH'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas.depositing, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
${'dapp transaction with max amount of CELO'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
diff --git a/src/components/GasFeeWarning.tsx b/src/components/GasFeeWarning.tsx
index 7bc0439e5ee..80a2b92c84a 100644
--- a/src/components/GasFeeWarning.tsx
+++ b/src/components/GasFeeWarning.tsx
@@ -39,7 +39,7 @@ function GasFeeWarning({
}, [prepareTransactionsResult])
if (!prepareTransactionsResult || prepareTransactionsResult.type === 'possible') {
- return null
+ return false
}
const feeCurrency =
From 1795348a546397ea7b9369e8a132e781451b423b Mon Sep 17 00:00:00 2001
From: Finnian Jacobson-Schulte
<140328381+finnian0826@users.noreply.github.com>
Date: Thu, 2 Jan 2025 12:42:47 -0700
Subject: [PATCH 18/36] rename analytics
---
src/analytics/Events.tsx | 2 +-
src/analytics/Properties.tsx | 2 +-
src/analytics/docs.ts | 2 +-
src/components/GasFeeWarning.test.tsx | 2 +-
src/components/GasFeeWarning.tsx | 2 +-
5 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/src/analytics/Events.tsx b/src/analytics/Events.tsx
index 0015363bc84..252b12fa0d3 100644
--- a/src/analytics/Events.tsx
+++ b/src/analytics/Events.tsx
@@ -27,7 +27,7 @@ export enum AppEvents {
handle_deeplink = 'handle_deeplink',
- show_gas_fee_warning = 'show_gas_fee_warning',
+ gas_fee_warning_impression = 'gas_fee_warning_impression',
}
export enum HomeEvents {
diff --git a/src/analytics/Properties.tsx b/src/analytics/Properties.tsx
index 4dc3e48e033..3ee06e335b6 100644
--- a/src/analytics/Properties.tsx
+++ b/src/analytics/Properties.tsx
@@ -153,7 +153,7 @@ interface AppEventsProperties {
fullPath: string | null
query: string | null
}
- [AppEvents.show_gas_fee_warning]: {
+ [AppEvents.gas_fee_warning_impression]: {
flow: GasFeeWarningFlow
errorType: 'need-decrease-spend-amount-for-gas' | 'not-enough-balance-for-gas'
tokenId: string
diff --git a/src/analytics/docs.ts b/src/analytics/docs.ts
index 829840ff674..ea9c416a27e 100644
--- a/src/analytics/docs.ts
+++ b/src/analytics/docs.ts
@@ -67,7 +67,7 @@ export const eventDocs: Record = {
[AppEvents.in_app_review_impression]: `User sees an in-app review request`,
[AppEvents.in_app_review_error]: `Error while attempting to display in-app review`,
[AppEvents.handle_deeplink]: `When a deeplink that leads into the app is detected and handled`,
- [AppEvents.show_gas_fee_warning]: `When the gas fee warning is shown to the user`,
+ [AppEvents.gas_fee_warning_impression]: `When the gas fee warning is shown to the user`,
[HomeEvents.account_circle_tapped]: `When the account circle used in the tab navigation is tapped`,
[HomeEvents.profile_address_copy]: `When a user copies their wallet address from the profile screen`,
[HomeEvents.notification_scroll]: ``,
diff --git a/src/components/GasFeeWarning.test.tsx b/src/components/GasFeeWarning.test.tsx
index a4754a91f28..335111fe8df 100644
--- a/src/components/GasFeeWarning.test.tsx
+++ b/src/components/GasFeeWarning.test.tsx
@@ -144,7 +144,7 @@ describe('GasFeeWarning', () => {
)
expect(getByTestId('test/GasFeeWarning')).toBeTruthy()
expect(AppAnalytics.track).toHaveBeenCalledTimes(1)
- expect(AppAnalytics.track).toHaveBeenCalledWith(AppEvents.show_gas_fee_warning, {
+ expect(AppAnalytics.track).toHaveBeenCalledWith(AppEvents.gas_fee_warning_impression, {
flow,
errorType: prepareTransactionsResult.type,
tokenId: feeCurrencyTokenId,
diff --git a/src/components/GasFeeWarning.tsx b/src/components/GasFeeWarning.tsx
index 80a2b92c84a..758442511f9 100644
--- a/src/components/GasFeeWarning.tsx
+++ b/src/components/GasFeeWarning.tsx
@@ -30,7 +30,7 @@ function GasFeeWarning({
useEffect(() => {
if (prepareTransactionsResult && prepareTransactionsResult.type !== 'possible') {
- AppAnalytics.track(AppEvents.show_gas_fee_warning, {
+ AppAnalytics.track(AppEvents.gas_fee_warning_impression, {
flow,
errorType: prepareTransactionsResult.type,
tokenId: feeCurrency.tokenId,
From 21005b7b86c53aca6ba27a37639547e1a9e686fb Mon Sep 17 00:00:00 2001
From: Finnian Jacobson-Schulte
<140328381+finnian0826@users.noreply.github.com>
Date: Thu, 2 Jan 2025 14:06:16 -0700
Subject: [PATCH 19/36] feedback
---
locales/base/translation.json | 26 +++++---------
src/components/GasFeeWarning.test.tsx | 42 +++++++++++------------
src/components/GasFeeWarning.tsx | 49 +++++----------------------
3 files changed, 38 insertions(+), 79 deletions(-)
diff --git a/locales/base/translation.json b/locales/base/translation.json
index bbe2e5c44c6..d340688ac82 100644
--- a/locales/base/translation.json
+++ b/locales/base/translation.json
@@ -2832,26 +2832,16 @@
"depositing": "Add {{tokenSymbol}} for gas fees or lower the amount you're depositing",
"withdrawing": "Add {{tokenSymbol}} for gas fees or lower the amount you're withdrawing"
},
- "descriptionNotEnoughGas": {
- "sending": "Adjust the amount you're sending or add {{tokenSymbol}} to continue",
- "swapping": "Adjust the amount you're swapping or add {{tokenSymbol}} to continue",
- "depositing": "Adjust the amount you're depositing or add {{tokenSymbol}} to continue",
- "withdrawing": "Adjust the amount you're withdrawing or add {{tokenSymbol}} to continue"
- },
+ "descriptionNotEnoughGas_Send": "Adjust the amount you're sending or add {{tokenSymbol}} to continue",
+ "descriptionNotEnoughGas_Swap": "Adjust the amount you're swapping or add {{tokenSymbol}} to continue",
+ "descriptionNotEnoughGas_Deposit": "Adjust the amount you're depositing or add {{tokenSymbol}} to continue",
+ "descriptionNotEnoughGas_Withdraw": "Adjust the amount you're withdrawing or add {{tokenSymbol}} to continue",
"titleDapp": "You have an insufficient gas token balance",
"descriptionDapp": "Add {{tokenSymbol}} to complete this transaction",
"cta": "Buy {{tokenSymbol}}",
- "ctaGasToken": {
- "send": "Send smaller amount",
- "swap": "Swap smaller amount",
- "deposit": "Deposit smaller amount",
- "withdraw": "Withdraw smaller amount"
- },
- "verb": {
- "send": "Send",
- "swap": "Swap",
- "deposit": "Deposit",
- "withdraw": "Withdraw"
- }
+ "ctaGasToken_Send": "Send smaller amount",
+ "ctaGasToken_Swap": "Swap smaller amount",
+ "ctaGasToken_Deposit": "Deposit smaller amount",
+ "ctaGasToken_Withdraw": "Withdraw smaller amount"
}
}
diff --git a/src/components/GasFeeWarning.test.tsx b/src/components/GasFeeWarning.test.tsx
index 335111fe8df..4fcf425f541 100644
--- a/src/components/GasFeeWarning.test.tsx
+++ b/src/components/GasFeeWarning.test.tsx
@@ -106,27 +106,27 @@ describe('GasFeeWarning', () => {
expect(queryByTestId('test/GasFeeWarning')).toBeFalsy()
})
it.each`
- scenario | flow | prepareTransactionsResult | feeCurrencyTokenId | title | description | ctaLabel
- ${'sending max amount of CELO'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount.sending, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken.send'}
- ${'sending max amount of ETH'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount.sending, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken.send'}
- ${'sending with insufficient CELO'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas.sending, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
- ${'sending with insufficient ETH'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas.sending, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
- ${'swapping max amount of CELO'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount.swapping, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken.swap'}
- ${'swapping max amount of ETH'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount.swapping, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken.swap'}
- ${'swapping with insufficient CELO'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas.swapping, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
- ${'swapping with insufficient ETH'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas.swapping, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
- ${'withdrawing max amount of CELO'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount.withdrawing, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken.withdraw'}
- ${'withdrawing max amount of ETH'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount.withdrawing, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken.withdraw'}
- ${'withdrawing with insufficient CELO'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas.withdrawing, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
- ${'withdrawing with insufficient ETH'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas.withdrawing, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
- ${'depositing max amount of CELO'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount.depositing, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken.deposit'}
- ${'depositing max amount of ETH'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount.depositing, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken.deposit'}
- ${'depositing with insufficient CELO'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas.depositing, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
- ${'depositing with insufficient ETH'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas.depositing, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
- ${'dapp transaction with max amount of CELO'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
- ${'dapp transaction with max amount of ETH'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
- ${'dapp transaction with insufficient CELO'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
- ${'dapp transaction with insufficient ETH'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
+ scenario | flow | prepareTransactionsResult | feeCurrencyTokenId | title | description | ctaLabel
+ ${'sending max amount of CELO'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Send","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Send"}'}
+ ${'sending max amount of ETH'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Send","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Send"}'}
+ ${'sending with insufficient CELO'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Send","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
+ ${'sending with insufficient ETH'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Send","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
+ ${'swapping max amount of CELO'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Swap","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Swap"}'}
+ ${'swapping max amount of ETH'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Swap","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Swap"}'}
+ ${'swapping with insufficient CELO'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Swap","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
+ ${'swapping with insufficient ETH'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Swap","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
+ ${'withdrawing max amount of CELO'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Withdraw","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Withdraw"}'}
+ ${'withdrawing max amount of ETH'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Withdraw","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Withdraw"}'}
+ ${'withdrawing with insufficient CELO'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Withdraw","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
+ ${'withdrawing with insufficient ETH'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Withdraw","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
+ ${'depositing max amount of CELO'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Deposit","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Deposit"}'}
+ ${'depositing max amount of ETH'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Deposit","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Deposit"}'}
+ ${'depositing with insufficient CELO'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Deposit","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
+ ${'depositing with insufficient ETH'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Deposit","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
+ ${'dapp transaction with max amount of CELO'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
+ ${'dapp transaction with max amount of ETH'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
+ ${'dapp transaction with insufficient CELO'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
+ ${'dapp transaction with insufficient ETH'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
`(
'renders error correctly when $scenario',
({ flow, prepareTransactionsResult, feeCurrencyTokenId, title, description, ctaLabel }) => {
diff --git a/src/components/GasFeeWarning.tsx b/src/components/GasFeeWarning.tsx
index 758442511f9..4e359352121 100644
--- a/src/components/GasFeeWarning.tsx
+++ b/src/components/GasFeeWarning.tsx
@@ -47,43 +47,6 @@ function GasFeeWarning({
? prepareTransactionsResult.feeCurrencies[0]
: prepareTransactionsResult.feeCurrency
- const flowToNotEnoughGasDescriptionString = {
- [GasFeeWarningFlow.Send]: t('gasFeeWarning.descriptionNotEnoughGas.sending', {
- tokenSymbol: feeCurrency.symbol,
- }),
- [GasFeeWarningFlow.Swap]: t('gasFeeWarning.descriptionNotEnoughGas.swapping', {
- tokenSymbol: feeCurrency.symbol,
- }),
- [GasFeeWarningFlow.Deposit]: t('gasFeeWarning.descriptionNotEnoughGas.depositing', {
- tokenSymbol: feeCurrency.symbol,
- }),
- [GasFeeWarningFlow.Withdraw]: t('gasFeeWarning.descriptionNotEnoughGas.withdrawing', {
- tokenSymbol: feeCurrency.symbol,
- }),
- }
-
- const flowToDescreasSpendDescriptionString = {
- [GasFeeWarningFlow.Send]: t('gasFeeWarning.descriptionMaxAmount.sending', {
- tokenSymbol: feeCurrency.symbol,
- }),
- [GasFeeWarningFlow.Swap]: t('gasFeeWarning.descriptionMaxAmount.swapping', {
- tokenSymbol: feeCurrency.symbol,
- }),
- [GasFeeWarningFlow.Deposit]: t('gasFeeWarning.descriptionMaxAmount.depositing', {
- tokenSymbol: feeCurrency.symbol,
- }),
- [GasFeeWarningFlow.Withdraw]: t('gasFeeWarning.descriptionMaxAmount.withdrawing', {
- tokenSymbol: feeCurrency.symbol,
- }),
- }
-
- const flowToCtaString = {
- [GasFeeWarningFlow.Send]: t('gasFeeWarning.ctaGasToken.send'),
- [GasFeeWarningFlow.Swap]: t('gasFeeWarning.ctaGasToken.swap'),
- [GasFeeWarningFlow.Deposit]: t('gasFeeWarning.ctaGasToken.deposit'),
- [GasFeeWarningFlow.Withdraw]: t('gasFeeWarning.ctaGasToken.withdraw'),
- }
-
const title =
flow === GasFeeWarningFlow.Dapp
? t('gasFeeWarning.titleDapp')
@@ -92,14 +55,20 @@ function GasFeeWarning({
flow === GasFeeWarningFlow.Dapp
? t('gasFeeWarning.descriptionDapp', { tokenSymbol: feeCurrency.symbol })
: prepareTransactionsResult.type === 'not-enough-balance-for-gas'
- ? flowToNotEnoughGasDescriptionString[flow]
- : flowToDescreasSpendDescriptionString[flow]
+ ? t('gasFeeWarning.descriptionNotEnoughGas', {
+ context: flow,
+ tokenSymbol: feeCurrency.symbol,
+ })
+ : t('gasFeeWarning.descriptionMaxAmount', {
+ context: flow,
+ tokenSymbol: feeCurrency.symbol,
+ })
const ctaLabel =
flow === GasFeeWarningFlow.Dapp
? undefined
: prepareTransactionsResult.type === 'not-enough-balance-for-gas'
? t('gasFeeWarning.cta', { tokenSymbol: feeCurrency.symbol })
- : flowToCtaString[flow]
+ : t('gasFeeWarning.ctaGasToken', { context: flow })
return (
Date: Thu, 2 Jan 2025 14:27:25 -0700
Subject: [PATCH 20/36] use string literal
---
src/components/GasFeeWarning.test.tsx | 48 +++++++++++++--------------
src/components/GasFeeWarning.tsx | 14 +++-----
src/earn/EarnEnterAmount.tsx | 4 +--
3 files changed, 30 insertions(+), 36 deletions(-)
diff --git a/src/components/GasFeeWarning.test.tsx b/src/components/GasFeeWarning.test.tsx
index 4fcf425f541..23b6d463e8d 100644
--- a/src/components/GasFeeWarning.test.tsx
+++ b/src/components/GasFeeWarning.test.tsx
@@ -4,7 +4,7 @@ import React from 'react'
import { Provider } from 'react-redux'
import AppAnalytics from 'src/analytics/AppAnalytics'
import { AppEvents } from 'src/analytics/Events'
-import GasFeeWarning, { GasFeeWarningFlow } from 'src/components/GasFeeWarning'
+import GasFeeWarning from 'src/components/GasFeeWarning'
import {
PreparedTransactionsNeedDecreaseSpendAmountForGas,
PreparedTransactionsNotEnoughBalanceForGas,
@@ -87,7 +87,7 @@ describe('GasFeeWarning', () => {
const store = createMockStore()
const { queryByTestId } = render(
-
+
)
expect(queryByTestId('test/GasFeeWarning')).toBeFalsy()
@@ -97,7 +97,7 @@ describe('GasFeeWarning', () => {
const { queryByTestId } = render(
@@ -106,27 +106,27 @@ describe('GasFeeWarning', () => {
expect(queryByTestId('test/GasFeeWarning')).toBeFalsy()
})
it.each`
- scenario | flow | prepareTransactionsResult | feeCurrencyTokenId | title | description | ctaLabel
- ${'sending max amount of CELO'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Send","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Send"}'}
- ${'sending max amount of ETH'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Send","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Send"}'}
- ${'sending with insufficient CELO'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Send","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
- ${'sending with insufficient ETH'} | ${GasFeeWarningFlow.Send} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Send","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
- ${'swapping max amount of CELO'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Swap","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Swap"}'}
- ${'swapping max amount of ETH'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Swap","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Swap"}'}
- ${'swapping with insufficient CELO'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Swap","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
- ${'swapping with insufficient ETH'} | ${GasFeeWarningFlow.Swap} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Swap","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
- ${'withdrawing max amount of CELO'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Withdraw","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Withdraw"}'}
- ${'withdrawing max amount of ETH'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Withdraw","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Withdraw"}'}
- ${'withdrawing with insufficient CELO'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Withdraw","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
- ${'withdrawing with insufficient ETH'} | ${GasFeeWarningFlow.Withdraw} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Withdraw","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
- ${'depositing max amount of CELO'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Deposit","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Deposit"}'}
- ${'depositing max amount of ETH'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Deposit","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Deposit"}'}
- ${'depositing with insufficient CELO'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Deposit","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
- ${'depositing with insufficient ETH'} | ${GasFeeWarningFlow.Deposit} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Deposit","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
- ${'dapp transaction with max amount of CELO'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
- ${'dapp transaction with max amount of ETH'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
- ${'dapp transaction with insufficient CELO'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
- ${'dapp transaction with insufficient ETH'} | ${GasFeeWarningFlow.Dapp} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
+ scenario | flow | prepareTransactionsResult | feeCurrencyTokenId | title | description | ctaLabel
+ ${'sending max amount of CELO'} | ${'Send'} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Send","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Send"}'}
+ ${'sending max amount of ETH'} | ${'Send'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Send","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Send"}'}
+ ${'sending with insufficient CELO'} | ${'Send'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Send","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
+ ${'sending with insufficient ETH'} | ${'Send'} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Send","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
+ ${'swapping max amount of CELO'} | ${'Swap'} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Swap","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Swap"}'}
+ ${'swapping max amount of ETH'} | ${'Swap'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Swap","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Swap"}'}
+ ${'swapping with insufficient CELO'} | ${'Swap'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Swap","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
+ ${'swapping with insufficient ETH'} | ${'Swap'} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Swap","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
+ ${'withdrawing max amount of CELO'} | ${'Withdraw'} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Withdraw","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Withdraw"}'}
+ ${'withdrawing max amount of ETH'} | ${'Withdraw'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Withdraw","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Withdraw"}'}
+ ${'withdrawing with insufficient CELO'} | ${'Withdraw'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Withdraw","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
+ ${'withdrawing with insufficient ETH'} | ${'Withdraw'} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Withdraw","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
+ ${'depositing max amount of CELO'} | ${'Deposit'} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Deposit","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Deposit"}'}
+ ${'depositing max amount of ETH'} | ${'Deposit'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Deposit","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Deposit"}'}
+ ${'depositing with insufficient CELO'} | ${'Deposit'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Deposit","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
+ ${'depositing with insufficient ETH'} | ${'Deposit'} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Deposit","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
+ ${'dapp transaction with max amount of CELO'} | ${'Dapp'} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
+ ${'dapp transaction with max amount of ETH'} | ${'Dapp'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
+ ${'dapp transaction with insufficient CELO'} | ${'Dapp'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
+ ${'dapp transaction with insufficient ETH'} | ${'Dapp'} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
`(
'renders error correctly when $scenario',
({ flow, prepareTransactionsResult, feeCurrencyTokenId, title, description, ctaLabel }) => {
diff --git a/src/components/GasFeeWarning.tsx b/src/components/GasFeeWarning.tsx
index 4e359352121..4565a33b896 100644
--- a/src/components/GasFeeWarning.tsx
+++ b/src/components/GasFeeWarning.tsx
@@ -7,13 +7,7 @@ import InLineNotification, { NotificationVariant } from 'src/components/InLineNo
import { Spacing } from 'src/styles/styles'
import { PreparedTransactionsResult } from 'src/viem/prepareTransactions'
-export enum GasFeeWarningFlow {
- Send = 'Send',
- Swap = 'Swap',
- Deposit = 'Deposit',
- Withdraw = 'Withdraw',
- Dapp = 'Dapp',
-}
+export type GasFeeWarningFlow = 'Send' | 'Swap' | 'Withdraw' | 'Deposit' | 'Dapp'
function GasFeeWarning({
prepareTransactionsResult,
@@ -48,11 +42,11 @@ function GasFeeWarning({
: prepareTransactionsResult.feeCurrency
const title =
- flow === GasFeeWarningFlow.Dapp
+ flow === 'Dapp'
? t('gasFeeWarning.titleDapp')
: t('gasFeeWarning.title', { tokenSymbol: feeCurrency.symbol })
const description =
- flow === GasFeeWarningFlow.Dapp
+ flow === 'Dapp'
? t('gasFeeWarning.descriptionDapp', { tokenSymbol: feeCurrency.symbol })
: prepareTransactionsResult.type === 'not-enough-balance-for-gas'
? t('gasFeeWarning.descriptionNotEnoughGas', {
@@ -64,7 +58,7 @@ function GasFeeWarning({
tokenSymbol: feeCurrency.symbol,
})
const ctaLabel =
- flow === GasFeeWarningFlow.Dapp
+ flow === 'Dapp'
? undefined
: prepareTransactionsResult.type === 'not-enough-balance-for-gas'
? t('gasFeeWarning.cta', { tokenSymbol: feeCurrency.symbol })
diff --git a/src/earn/EarnEnterAmount.tsx b/src/earn/EarnEnterAmount.tsx
index 219c8a47de8..f175d484782 100644
--- a/src/earn/EarnEnterAmount.tsx
+++ b/src/earn/EarnEnterAmount.tsx
@@ -9,7 +9,7 @@ import { EarnEvents, SendEvents } from 'src/analytics/Events'
import BackButton from 'src/components/BackButton'
import BottomSheet, { BottomSheetModalRefType } from 'src/components/BottomSheet'
import Button, { BtnSizes, BtnTypes } from 'src/components/Button'
-import GasFeeWarning, { GasFeeWarningFlow } from 'src/components/GasFeeWarning'
+import GasFeeWarning from 'src/components/GasFeeWarning'
import InLineNotification, { NotificationVariant } from 'src/components/InLineNotification'
import KeyboardAwareScrollView from 'src/components/KeyboardAwareScrollView'
import { LabelWithInfo } from 'src/components/LabelWithInfo'
@@ -403,7 +403,7 @@ export default function EarnEnterAmount({ route }: Props) {
{
AppAnalytics.track(EarnEvents.earn_deposit_add_gas_press, {
gasTokenId: feeCurrencies[0].tokenId,
From 85dc50a2de81aa2a64ec9c9b5c27d0baa75d04ca Mon Sep 17 00:00:00 2001
From: Finnian Jacobson-Schulte
<140328381+finnian0826@users.noreply.github.com>
Date: Thu, 2 Jan 2025 14:34:04 -0700
Subject: [PATCH 21/36] remove superfluous tests
---
src/components/GasFeeWarning.test.tsx | 59 +++++----------------------
1 file changed, 11 insertions(+), 48 deletions(-)
diff --git a/src/components/GasFeeWarning.test.tsx b/src/components/GasFeeWarning.test.tsx
index 23b6d463e8d..2842d0102ae 100644
--- a/src/components/GasFeeWarning.test.tsx
+++ b/src/components/GasFeeWarning.test.tsx
@@ -38,33 +38,6 @@ const mockPreparedTransactionNotEnoughCelo: PreparedTransactionsNotEnoughBalance
],
}
-const mockPreparedTransactionNeedDecreaseCelo: PreparedTransactionsNeedDecreaseSpendAmountForGas = {
- type: 'need-decrease-spend-amount-for-gas' as const,
- feeCurrency: {
- ...mockTokenBalances[mockCeloTokenId],
- isNative: true,
- balance: new BigNumber(0),
- priceUsd: new BigNumber(1500),
- lastKnownPriceUsd: new BigNumber(1500),
- },
- maxGasFeeInDecimal: new BigNumber(1),
- estimatedGasFeeInDecimal: new BigNumber(1),
- decreasedSpendAmount: new BigNumber(1),
-}
-
-const mockPreparedTransactionNotEnoughEth: PreparedTransactionsNotEnoughBalanceForGas = {
- type: 'not-enough-balance-for-gas' as const,
- feeCurrencies: [
- {
- ...mockTokenBalances[mockArbEthTokenId],
- isNative: true,
- balance: new BigNumber(0),
- priceUsd: new BigNumber(1500),
- lastKnownPriceUsd: new BigNumber(1500),
- },
- ],
-}
-
const mockPreparedTransactionNeedDecreaseEth: PreparedTransactionsNeedDecreaseSpendAmountForGas = {
type: 'need-decrease-spend-amount-for-gas' as const,
feeCurrency: {
@@ -106,27 +79,17 @@ describe('GasFeeWarning', () => {
expect(queryByTestId('test/GasFeeWarning')).toBeFalsy()
})
it.each`
- scenario | flow | prepareTransactionsResult | feeCurrencyTokenId | title | description | ctaLabel
- ${'sending max amount of CELO'} | ${'Send'} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Send","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Send"}'}
- ${'sending max amount of ETH'} | ${'Send'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Send","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Send"}'}
- ${'sending with insufficient CELO'} | ${'Send'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Send","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
- ${'sending with insufficient ETH'} | ${'Send'} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Send","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
- ${'swapping max amount of CELO'} | ${'Swap'} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Swap","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Swap"}'}
- ${'swapping max amount of ETH'} | ${'Swap'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Swap","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Swap"}'}
- ${'swapping with insufficient CELO'} | ${'Swap'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Swap","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
- ${'swapping with insufficient ETH'} | ${'Swap'} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Swap","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
- ${'withdrawing max amount of CELO'} | ${'Withdraw'} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Withdraw","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Withdraw"}'}
- ${'withdrawing max amount of ETH'} | ${'Withdraw'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Withdraw","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Withdraw"}'}
- ${'withdrawing with insufficient CELO'} | ${'Withdraw'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Withdraw","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
- ${'withdrawing with insufficient ETH'} | ${'Withdraw'} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Withdraw","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
- ${'depositing max amount of CELO'} | ${'Deposit'} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Deposit","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Deposit"}'}
- ${'depositing max amount of ETH'} | ${'Deposit'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Deposit","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Deposit"}'}
- ${'depositing with insufficient CELO'} | ${'Deposit'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Deposit","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
- ${'depositing with insufficient ETH'} | ${'Deposit'} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Deposit","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"ETH"}'}
- ${'dapp transaction with max amount of CELO'} | ${'Dapp'} | ${mockPreparedTransactionNeedDecreaseCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
- ${'dapp transaction with max amount of ETH'} | ${'Dapp'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
- ${'dapp transaction with insufficient CELO'} | ${'Dapp'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
- ${'dapp transaction with insufficient ETH'} | ${'Dapp'} | ${mockPreparedTransactionNotEnoughEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
+ scenario | flow | prepareTransactionsResult | feeCurrencyTokenId | title | description | ctaLabel
+ ${'sending max amount of ETH'} | ${'Send'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Send","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Send"}'}
+ ${'sending with insufficient CELO'} | ${'Send'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Send","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
+ ${'swapping max amount of ETH'} | ${'Swap'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Swap","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Swap"}'}
+ ${'swapping with insufficient CELO'} | ${'Swap'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Swap","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
+ ${'withdrawing max amount of ETH'} | ${'Withdraw'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Withdraw","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Withdraw"}'}
+ ${'withdrawing with insufficient CELO'} | ${'Withdraw'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Withdraw","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
+ ${'depositing max amount of ETH'} | ${'Deposit'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Deposit","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Deposit"}'}
+ ${'depositing with insufficient CELO'} | ${'Deposit'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Deposit","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
+ ${'dapp transaction with max amount of ETH'} | ${'Dapp'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
+ ${'dapp transaction with insufficient CELO'} | ${'Dapp'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
`(
'renders error correctly when $scenario',
({ flow, prepareTransactionsResult, feeCurrencyTokenId, title, description, ctaLabel }) => {
From 9b9c466bfbe4170811d6ad0e0308bd23006aca42 Mon Sep 17 00:00:00 2001
From: Finnian Jacobson-Schulte
<140328381+finnian0826@users.noreply.github.com>
Date: Fri, 3 Jan 2025 16:13:25 -0700
Subject: [PATCH 22/36] move cta function
---
src/components/GasFeeWarning.test.tsx | 6 +++---
src/components/GasFeeWarning.tsx | 19 +++++++++++++++++--
src/earn/EarnEnterAmount.tsx | 20 +-------------------
3 files changed, 21 insertions(+), 24 deletions(-)
diff --git a/src/components/GasFeeWarning.test.tsx b/src/components/GasFeeWarning.test.tsx
index 2842d0102ae..4c3fa219e46 100644
--- a/src/components/GasFeeWarning.test.tsx
+++ b/src/components/GasFeeWarning.test.tsx
@@ -94,14 +94,14 @@ describe('GasFeeWarning', () => {
'renders error correctly when $scenario',
({ flow, prepareTransactionsResult, feeCurrencyTokenId, title, description, ctaLabel }) => {
const store = createMockStore()
- const onPressCta = jest.fn()
+ const changeInputValueFn = jest.fn()
const { getByTestId, getByText } = render(
)
@@ -118,7 +118,7 @@ describe('GasFeeWarning', () => {
fireEvent.press(getByText(ctaLabel))
}
expect(ctaLabel ? getByText(ctaLabel) : true).toBeTruthy()
- expect(onPressCta).toHaveBeenCalledTimes(ctaLabel ? 1 : 0)
+ expect(changeInputValueFn).toHaveBeenCalledTimes(ctaLabel ? 1 : 0)
}
)
})
diff --git a/src/components/GasFeeWarning.tsx b/src/components/GasFeeWarning.tsx
index 4565a33b896..de8e114c649 100644
--- a/src/components/GasFeeWarning.tsx
+++ b/src/components/GasFeeWarning.tsx
@@ -4,6 +4,9 @@ import { StyleSheet } from 'react-native'
import AppAnalytics from 'src/analytics/AppAnalytics'
import { AppEvents } from 'src/analytics/Events'
import InLineNotification, { NotificationVariant } from 'src/components/InLineNotification'
+import { CICOFlow } from 'src/fiatExchanges/types'
+import { navigate } from 'src/navigator/NavigationService'
+import { Screens } from 'src/navigator/Screens'
import { Spacing } from 'src/styles/styles'
import { PreparedTransactionsResult } from 'src/viem/prepareTransactions'
@@ -12,12 +15,12 @@ export type GasFeeWarningFlow = 'Send' | 'Swap' | 'Withdraw' | 'Deposit' | 'Dapp
function GasFeeWarning({
prepareTransactionsResult,
flow,
- onPressCta,
+ changeInputValueFn,
testIdPrefix,
}: {
prepareTransactionsResult?: PreparedTransactionsResult
flow: GasFeeWarningFlow
- onPressCta?: () => void
+ changeInputValueFn?: (amount: string) => void
testIdPrefix?: string
}) {
const { t } = useTranslation()
@@ -63,6 +66,18 @@ function GasFeeWarning({
: prepareTransactionsResult.type === 'not-enough-balance-for-gas'
? t('gasFeeWarning.cta', { tokenSymbol: feeCurrency.symbol })
: t('gasFeeWarning.ctaGasToken', { context: flow })
+
+ const onPressCta = () => {
+ prepareTransactionsResult.type === 'not-enough-balance-for-gas'
+ ? navigate(Screens.FiatExchangeAmount, {
+ tokenId: prepareTransactionsResult.feeCurrencies[0].tokenId,
+ flow: CICOFlow.CashIn,
+ tokenSymbol: prepareTransactionsResult.feeCurrencies[0].symbol,
+ })
+ : changeInputValueFn
+ ? changeInputValueFn(prepareTransactionsResult.decreasedSpendAmount.toString())
+ : null
+ }
return (
{
- AppAnalytics.track(EarnEvents.earn_deposit_add_gas_press, {
- gasTokenId: feeCurrencies[0].tokenId,
- depositTokenId: pool.dataProps.depositTokenId,
- networkId: pool.networkId,
- providerId: pool.appId,
- poolId: pool.positionId,
- })
- if (prepareTransactionsResult && prepareTransactionsResult.type !== 'possible') {
- prepareTransactionsResult.type === 'not-enough-balance-for-gas'
- ? navigate(Screens.FiatExchangeAmount, {
- tokenId: prepareTransactionsResult.feeCurrencies[0].tokenId,
- flow: CICOFlow.CashIn,
- tokenSymbol: prepareTransactionsResult.feeCurrencies[0].symbol,
- })
- : handleAmountInputChange(prepareTransactionsResult.decreasedSpendAmount.toString())
- }
- }}
+ changeInputValueFn={handleAmountInputChange}
testIdPrefix={'EarnEnterAmount'}
/>
{showLowerAmountError && (
From ae7755c681529c7455f8c8a9d577f8e1a1de9c40 Mon Sep 17 00:00:00 2001
From: Finnian Jacobson-Schulte
<140328381+finnian0826@users.noreply.github.com>
Date: Fri, 3 Jan 2025 16:32:35 -0700
Subject: [PATCH 23/36] fix test
---
src/components/GasFeeWarning.test.tsx | 6 ++++--
1 file changed, 4 insertions(+), 2 deletions(-)
diff --git a/src/components/GasFeeWarning.test.tsx b/src/components/GasFeeWarning.test.tsx
index 4c3fa219e46..160871210cb 100644
--- a/src/components/GasFeeWarning.test.tsx
+++ b/src/components/GasFeeWarning.test.tsx
@@ -114,11 +114,13 @@ describe('GasFeeWarning', () => {
})
expect(getByText(title)).toBeTruthy()
expect(getByText(description)).toBeTruthy()
+ expect(ctaLabel ? getByText(ctaLabel) : true).toBeTruthy()
if (ctaLabel) {
fireEvent.press(getByText(ctaLabel))
}
- expect(ctaLabel ? getByText(ctaLabel) : true).toBeTruthy()
- expect(changeInputValueFn).toHaveBeenCalledTimes(ctaLabel ? 1 : 0)
+ expect(changeInputValueFn).toHaveBeenCalledTimes(
+ ctaLabel && ctaLabel.includes('ctaGasToken') ? 1 : 0
+ )
}
)
})
From a9345c919405cea9f3934385c2a915e4eeeb0662 Mon Sep 17 00:00:00 2001
From: Finnian Jacobson-Schulte
<140328381+finnian0826@users.noreply.github.com>
Date: Mon, 6 Jan 2025 10:00:35 -0700
Subject: [PATCH 24/36] clean up and add analytics
---
locales/base/translation.json | 10 +++++-----
src/analytics/Events.tsx | 2 +-
src/analytics/Properties.tsx | 6 +++++-
src/analytics/docs.ts | 3 ++-
src/components/GasFeeWarning.test.tsx | 18 +++++++++---------
src/components/GasFeeWarning.tsx | 13 +++++++++----
src/earn/EarnEnterAmount.test.tsx | 20 ++++++++++++--------
7 files changed, 43 insertions(+), 29 deletions(-)
diff --git a/locales/base/translation.json b/locales/base/translation.json
index d340688ac82..6ce49ded698 100644
--- a/locales/base/translation.json
+++ b/locales/base/translation.json
@@ -2838,10 +2838,10 @@
"descriptionNotEnoughGas_Withdraw": "Adjust the amount you're withdrawing or add {{tokenSymbol}} to continue",
"titleDapp": "You have an insufficient gas token balance",
"descriptionDapp": "Add {{tokenSymbol}} to complete this transaction",
- "cta": "Buy {{tokenSymbol}}",
- "ctaGasToken_Send": "Send smaller amount",
- "ctaGasToken_Swap": "Swap smaller amount",
- "ctaGasToken_Deposit": "Deposit smaller amount",
- "ctaGasToken_Withdraw": "Withdraw smaller amount"
+ "ctaBuy": "Buy {{tokenSymbol}}",
+ "ctaAction_Send": "Send smaller amount",
+ "ctaAction_Swap": "Swap smaller amount",
+ "ctaAction_Deposit": "Deposit smaller amount",
+ "ctaAction_Withdraw": "Withdraw smaller amount"
}
}
diff --git a/src/analytics/Events.tsx b/src/analytics/Events.tsx
index 252b12fa0d3..6e7213d98bb 100644
--- a/src/analytics/Events.tsx
+++ b/src/analytics/Events.tsx
@@ -28,6 +28,7 @@ export enum AppEvents {
handle_deeplink = 'handle_deeplink',
gas_fee_warning_impression = 'gas_fee_warning_impression',
+ gas_fee_warning_cta_press = 'gas_fee_warning_cta_press',
}
export enum HomeEvents {
@@ -662,7 +663,6 @@ export enum EarnEvents {
earn_deposit_submit_error = 'earn_deposit_submit_error',
earn_deposit_submit_cancel = 'earn_deposit_submit_cancel',
earn_enter_amount_continue_press = 'earn_enter_amount_continue_press',
- earn_deposit_add_gas_press = 'earn_deposit_add_gas_press',
earn_feed_item_select = 'earn_feed_item_select',
earn_collect_earnings_press = 'earn_collect_earnings_press',
earn_withdraw_submit_start = 'earn_withdraw_submit_start',
diff --git a/src/analytics/Properties.tsx b/src/analytics/Properties.tsx
index 3ee06e335b6..17263656368 100644
--- a/src/analytics/Properties.tsx
+++ b/src/analytics/Properties.tsx
@@ -158,6 +158,11 @@ interface AppEventsProperties {
errorType: 'need-decrease-spend-amount-for-gas' | 'not-enough-balance-for-gas'
tokenId: string
}
+ [AppEvents.gas_fee_warning_cta_press]: {
+ flow: GasFeeWarningFlow
+ errorType: 'need-decrease-spend-amount-for-gas' | 'not-enough-balance-for-gas'
+ tokenId: string
+ }
}
interface HomeEventsProperties {
@@ -1621,7 +1626,6 @@ interface EarnEventsProperties {
depositTokenAmount?: string
swapType?: SwapType // only for swap-deposit
} & EarnCommonProperties
- [EarnEvents.earn_deposit_add_gas_press]: EarnCommonProperties & { gasTokenId: string }
[EarnEvents.earn_feed_item_select]: {
origin:
| TokenTransactionTypeV2.EarnDeposit
diff --git a/src/analytics/docs.ts b/src/analytics/docs.ts
index ea9c416a27e..4e69bb5bf28 100644
--- a/src/analytics/docs.ts
+++ b/src/analytics/docs.ts
@@ -68,6 +68,7 @@ export const eventDocs: Record = {
[AppEvents.in_app_review_error]: `Error while attempting to display in-app review`,
[AppEvents.handle_deeplink]: `When a deeplink that leads into the app is detected and handled`,
[AppEvents.gas_fee_warning_impression]: `When the gas fee warning is shown to the user`,
+ [AppEvents.gas_fee_warning_cta_press]: `When the user presses the CTA on the gas fee warning`,
[HomeEvents.account_circle_tapped]: `When the account circle used in the tab navigation is tapped`,
[HomeEvents.profile_address_copy]: `When a user copies their wallet address from the profile screen`,
[HomeEvents.notification_scroll]: ``,
@@ -589,7 +590,6 @@ export const eventDocs: Record = {
[EarnEvents.earn_deposit_submit_error]: `When the deposit transaction fails`,
[EarnEvents.earn_deposit_submit_cancel]: `When the user cancels the deposit after submitting by cancelling PIN input`,
[EarnEvents.earn_enter_amount_continue_press]: `When a user taps continue on the earn enter amount`,
- [EarnEvents.earn_deposit_add_gas_press]: `When the user doesn't have enough for gas when trying to deposit and clicks on the button to add gas token`,
[EarnEvents.earn_feed_item_select]: `When the users taps on an earn transaction feed item`,
[EarnEvents.earn_collect_earnings_press]: `When the user taps on the collect earnings button in the collect screen`,
[EarnEvents.earn_withdraw_submit_start]: `When the wallet is about to submit the withdraw and/or claim transactions to the network`,
@@ -659,6 +659,7 @@ export const eventDocs: Record = {
// [EarnEvents.earn_exit_pool_press]: `When the user taps on the exit pool button from the earn card in discover tab`,
// [EarnEvents.earn_deposit_more_press]: `When the user taps deposit more button from the earn card in discover tab`,
// [EarnEvents.earn_active_pools_card_press]: `When the user taps on the active pool card in discover tab.`,
+ // [EarnEvents.earn_deposit_add_gas_press]: `When the user doesn't have enough for gas when trying to deposit and clicks on the button to add gas token`,
// [AppEvents.multichain_beta_opt_in]: `When the user taps the Try it Now button on the multichain beta screen`,
// [AppEvents.multichain_beta_opt_out]: `When the user taps the No Thanks button on the multichain beta screen`,
// [AppEvents.multichain_beta_contact_support]: `When the user taps the Contact Support button on the multichain beta screen`,
diff --git a/src/components/GasFeeWarning.test.tsx b/src/components/GasFeeWarning.test.tsx
index 160871210cb..48815f2f018 100644
--- a/src/components/GasFeeWarning.test.tsx
+++ b/src/components/GasFeeWarning.test.tsx
@@ -80,14 +80,14 @@ describe('GasFeeWarning', () => {
})
it.each`
scenario | flow | prepareTransactionsResult | feeCurrencyTokenId | title | description | ctaLabel
- ${'sending max amount of ETH'} | ${'Send'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Send","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Send"}'}
- ${'sending with insufficient CELO'} | ${'Send'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Send","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
- ${'swapping max amount of ETH'} | ${'Swap'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Swap","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Swap"}'}
- ${'swapping with insufficient CELO'} | ${'Swap'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Swap","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
- ${'withdrawing max amount of ETH'} | ${'Withdraw'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Withdraw","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Withdraw"}'}
- ${'withdrawing with insufficient CELO'} | ${'Withdraw'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Withdraw","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
- ${'depositing max amount of ETH'} | ${'Deposit'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Deposit","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaGasToken, {"context":"Deposit"}'}
- ${'depositing with insufficient CELO'} | ${'Deposit'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Deposit","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.cta, {"tokenSymbol":"CELO"}'}
+ ${'sending max amount of ETH'} | ${'Send'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Send","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaAction, {"context":"Send"}'}
+ ${'sending with insufficient CELO'} | ${'Send'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Send","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaBuy, {"tokenSymbol":"CELO"}'}
+ ${'swapping max amount of ETH'} | ${'Swap'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Swap","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaAction, {"context":"Swap"}'}
+ ${'swapping with insufficient CELO'} | ${'Swap'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Swap","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaBuy, {"tokenSymbol":"CELO"}'}
+ ${'withdrawing max amount of ETH'} | ${'Withdraw'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Withdraw","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaAction, {"context":"Withdraw"}'}
+ ${'withdrawing with insufficient CELO'} | ${'Withdraw'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Withdraw","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaBuy, {"tokenSymbol":"CELO"}'}
+ ${'depositing max amount of ETH'} | ${'Deposit'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Deposit","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaAction, {"context":"Deposit"}'}
+ ${'depositing with insufficient CELO'} | ${'Deposit'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Deposit","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaBuy, {"tokenSymbol":"CELO"}'}
${'dapp transaction with max amount of ETH'} | ${'Dapp'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
${'dapp transaction with insufficient CELO'} | ${'Dapp'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
`(
@@ -119,7 +119,7 @@ describe('GasFeeWarning', () => {
fireEvent.press(getByText(ctaLabel))
}
expect(changeInputValueFn).toHaveBeenCalledTimes(
- ctaLabel && ctaLabel.includes('ctaGasToken') ? 1 : 0
+ ctaLabel && ctaLabel.includes('ctaAction') ? 1 : 0
)
}
)
diff --git a/src/components/GasFeeWarning.tsx b/src/components/GasFeeWarning.tsx
index de8e114c649..c6cb5839df0 100644
--- a/src/components/GasFeeWarning.tsx
+++ b/src/components/GasFeeWarning.tsx
@@ -64,15 +64,20 @@ function GasFeeWarning({
flow === 'Dapp'
? undefined
: prepareTransactionsResult.type === 'not-enough-balance-for-gas'
- ? t('gasFeeWarning.cta', { tokenSymbol: feeCurrency.symbol })
- : t('gasFeeWarning.ctaGasToken', { context: flow })
+ ? t('gasFeeWarning.ctaBuy', { tokenSymbol: feeCurrency.symbol })
+ : t('gasFeeWarning.ctaAction', { context: flow })
const onPressCta = () => {
+ AppAnalytics.track(AppEvents.gas_fee_warning_cta_press, {
+ flow,
+ tokenId: feeCurrency.tokenId,
+ errorType: prepareTransactionsResult.type,
+ })
prepareTransactionsResult.type === 'not-enough-balance-for-gas'
? navigate(Screens.FiatExchangeAmount, {
- tokenId: prepareTransactionsResult.feeCurrencies[0].tokenId,
+ tokenId: feeCurrency.tokenId,
flow: CICOFlow.CashIn,
- tokenSymbol: prepareTransactionsResult.feeCurrencies[0].symbol,
+ tokenSymbol: feeCurrency.symbol,
})
: changeInputValueFn
? changeInputValueFn(prepareTransactionsResult.decreasedSpendAmount.toString())
diff --git a/src/earn/EarnEnterAmount.test.tsx b/src/earn/EarnEnterAmount.test.tsx
index adb747fe8d4..709906f3932 100644
--- a/src/earn/EarnEnterAmount.test.tsx
+++ b/src/earn/EarnEnterAmount.test.tsx
@@ -5,7 +5,7 @@ import { DeviceEventEmitter } from 'react-native'
import { getNumberFormatSettings } from 'react-native-localize'
import { Provider } from 'react-redux'
import AppAnalytics from 'src/analytics/AppAnalytics'
-import { EarnEvents } from 'src/analytics/Events'
+import { AppEvents, EarnEvents } from 'src/analytics/Events'
import EarnEnterAmount from 'src/earn/EarnEnterAmount'
import { usePrepareEnterAmountTransactionsCallback } from 'src/earn/hooks'
import { Status as EarnStatus } from 'src/earn/slice'
@@ -935,13 +935,17 @@ describe('EarnEnterAmount', () => {
)
await waitFor(() => expect(getByTestId('EarnEnterAmount/GasFeeWarning')).toBeTruthy())
- fireEvent.press(getByText('gasFeeWarning.cta, {"tokenSymbol":"ETH"}'))
- expect(AppAnalytics.track).toHaveBeenCalledWith(EarnEvents.earn_deposit_add_gas_press, {
- gasTokenId: mockArbEthTokenId,
- networkId: NetworkId['arbitrum-sepolia'],
- poolId: mockEarnPositions[0].positionId,
- providerId: mockEarnPositions[0].appId,
- depositTokenId: mockArbUsdcTokenId,
+ fireEvent.press(getByText('gasFeeWarning.ctaBuy, {"tokenSymbol":"ETH"}'))
+ expect(AppAnalytics.track).toHaveBeenCalledTimes(2)
+ expect(AppAnalytics.track).toHaveBeenCalledWith(AppEvents.gas_fee_warning_impression, {
+ errorType: 'not-enough-balance-for-gas',
+ flow: 'Deposit',
+ tokenId: mockArbEthTokenId,
+ })
+ expect(AppAnalytics.track).toHaveBeenCalledWith(AppEvents.gas_fee_warning_cta_press, {
+ errorType: 'not-enough-balance-for-gas',
+ flow: 'Deposit',
+ tokenId: mockArbEthTokenId,
})
expect(navigate).toHaveBeenCalledWith(Screens.FiatExchangeAmount, {
tokenId: mockArbEthTokenId,
From d6b4c16ef136a9f0e5dbadcacb87e5faa19bcfef Mon Sep 17 00:00:00 2001
From: Finnian Jacobson-Schulte
<140328381+finnian0826@users.noreply.github.com>
Date: Mon, 6 Jan 2025 11:34:22 -0700
Subject: [PATCH 25/36] remove unnecessary test ID prefix
---
src/components/GasFeeWarning.test.tsx | 15 +++++----------
src/components/GasFeeWarning.tsx | 4 +---
src/earn/EarnEnterAmount.test.tsx | 2 +-
src/earn/EarnEnterAmount.tsx | 1 -
4 files changed, 7 insertions(+), 15 deletions(-)
diff --git a/src/components/GasFeeWarning.test.tsx b/src/components/GasFeeWarning.test.tsx
index 48815f2f018..bdfced036a6 100644
--- a/src/components/GasFeeWarning.test.tsx
+++ b/src/components/GasFeeWarning.test.tsx
@@ -60,23 +60,19 @@ describe('GasFeeWarning', () => {
const store = createMockStore()
const { queryByTestId } = render(
-
+
)
- expect(queryByTestId('test/GasFeeWarning')).toBeFalsy()
+ expect(queryByTestId('GasFeeWarning')).toBeFalsy()
})
it('should return null if prepareTransactionsResult.type is possible', () => {
const store = createMockStore()
const { queryByTestId } = render(
-
+
)
- expect(queryByTestId('test/GasFeeWarning')).toBeFalsy()
+ expect(queryByTestId('GasFeeWarning')).toBeFalsy()
})
it.each`
scenario | flow | prepareTransactionsResult | feeCurrencyTokenId | title | description | ctaLabel
@@ -99,13 +95,12 @@ describe('GasFeeWarning', () => {
)
- expect(getByTestId('test/GasFeeWarning')).toBeTruthy()
+ expect(getByTestId('GasFeeWarning')).toBeTruthy()
expect(AppAnalytics.track).toHaveBeenCalledTimes(1)
expect(AppAnalytics.track).toHaveBeenCalledWith(AppEvents.gas_fee_warning_impression, {
flow,
diff --git a/src/components/GasFeeWarning.tsx b/src/components/GasFeeWarning.tsx
index c6cb5839df0..73990e6b0dd 100644
--- a/src/components/GasFeeWarning.tsx
+++ b/src/components/GasFeeWarning.tsx
@@ -16,12 +16,10 @@ function GasFeeWarning({
prepareTransactionsResult,
flow,
changeInputValueFn,
- testIdPrefix,
}: {
prepareTransactionsResult?: PreparedTransactionsResult
flow: GasFeeWarningFlow
changeInputValueFn?: (amount: string) => void
- testIdPrefix?: string
}) {
const { t } = useTranslation()
@@ -91,7 +89,7 @@ function GasFeeWarning({
ctaLabel={ctaLabel}
onPressCta={onPressCta}
style={styles.warning}
- testID={`${testIdPrefix}/GasFeeWarning`}
+ testID={'GasFeeWarning'}
/>
)
}
diff --git a/src/earn/EarnEnterAmount.test.tsx b/src/earn/EarnEnterAmount.test.tsx
index 70b6d92b78b..c87471ba236 100644
--- a/src/earn/EarnEnterAmount.test.tsx
+++ b/src/earn/EarnEnterAmount.test.tsx
@@ -939,7 +939,7 @@ describe('EarnEnterAmount', () => {
)
- await waitFor(() => expect(getByTestId('EarnEnterAmount/GasFeeWarning')).toBeTruthy())
+ await waitFor(() => expect(getByTestId('GasFeeWarning')).toBeTruthy())
fireEvent.press(getByText('gasFeeWarning.ctaBuy, {"tokenSymbol":"ETH"}'))
expect(AppAnalytics.track).toHaveBeenCalledTimes(2)
expect(AppAnalytics.track).toHaveBeenCalledWith(AppEvents.gas_fee_warning_impression, {
diff --git a/src/earn/EarnEnterAmount.tsx b/src/earn/EarnEnterAmount.tsx
index ffffa682d22..60291f3af00 100644
--- a/src/earn/EarnEnterAmount.tsx
+++ b/src/earn/EarnEnterAmount.tsx
@@ -406,7 +406,6 @@ export default function EarnEnterAmount({ route }: Props) {
prepareTransactionsResult={prepareTransactionsResult}
flow={'Deposit'}
changeInputValueFn={handleAmountInputChange}
- testIdPrefix={'EarnEnterAmount'}
/>
{showLowerAmountError && (
Date: Mon, 6 Jan 2025 12:33:43 -0700
Subject: [PATCH 26/36] fix translation key with context
---
locales/base/translation.json | 10 ++++------
1 file changed, 4 insertions(+), 6 deletions(-)
diff --git a/locales/base/translation.json b/locales/base/translation.json
index d5114abf304..76eb1158bb7 100644
--- a/locales/base/translation.json
+++ b/locales/base/translation.json
@@ -2830,12 +2830,10 @@
},
"gasFeeWarning": {
"title": "You need more {{tokenSymbol}} for gas fees",
- "descriptionMaxAmount": {
- "sending": "Add {{tokenSymbol}} for gas fees or lower the amount you're sending",
- "swapping": "Add {{tokenSymbol}} for gas fees or lower the amount you're swapping",
- "depositing": "Add {{tokenSymbol}} for gas fees or lower the amount you're depositing",
- "withdrawing": "Add {{tokenSymbol}} for gas fees or lower the amount you're withdrawing"
- },
+ "descriptionMaxAmount_Send": "Add {{tokenSymbol}} for gas fees or lower the amount you're sending",
+ "descriptionMaxAmount_Swap": "Add {{tokenSymbol}} for gas fees or lower the amount you're swapping",
+ "descriptionMaxAmount_Deposit": "Add {{tokenSymbol}} for gas fees or lower the amount you're depositing",
+ "descriptionMaxAmount_Withdraw": "Add {{tokenSymbol}} for gas fees or lower the amount you're withdrawing",
"descriptionNotEnoughGas_Send": "Adjust the amount you're sending or add {{tokenSymbol}} to continue",
"descriptionNotEnoughGas_Swap": "Adjust the amount you're swapping or add {{tokenSymbol}} to continue",
"descriptionNotEnoughGas_Deposit": "Adjust the amount you're depositing or add {{tokenSymbol}} to continue",
From c34fbe68d6197d51c59de35f9571f0d81b11bafb Mon Sep 17 00:00:00 2001
From: Finnian Jacobson-Schulte
<140328381+finnian0826@users.noreply.github.com>
Date: Tue, 7 Jan 2025 08:30:33 -0700
Subject: [PATCH 27/36] feedback pt. 1
---
src/analytics/Properties.tsx | 2 ++
src/components/GasFeeWarning.test.tsx | 11 ++++++++---
src/components/GasFeeWarning.tsx | 24 ++++++++++++++----------
src/earn/EarnEnterAmount.test.tsx | 2 ++
src/earn/EarnEnterAmount.tsx | 15 ++++++++++++---
5 files changed, 38 insertions(+), 16 deletions(-)
diff --git a/src/analytics/Properties.tsx b/src/analytics/Properties.tsx
index 0c566fc20ed..5abc84eabbb 100644
--- a/src/analytics/Properties.tsx
+++ b/src/analytics/Properties.tsx
@@ -157,11 +157,13 @@ interface AppEventsProperties {
flow: GasFeeWarningFlow
errorType: 'need-decrease-spend-amount-for-gas' | 'not-enough-balance-for-gas'
tokenId: string
+ networkId: NetworkId
}
[AppEvents.gas_fee_warning_cta_press]: {
flow: GasFeeWarningFlow
errorType: 'need-decrease-spend-amount-for-gas' | 'not-enough-balance-for-gas'
tokenId: string
+ networkId: NetworkId
}
}
diff --git a/src/components/GasFeeWarning.test.tsx b/src/components/GasFeeWarning.test.tsx
index bdfced036a6..947dfabee79 100644
--- a/src/components/GasFeeWarning.test.tsx
+++ b/src/components/GasFeeWarning.test.tsx
@@ -5,6 +5,7 @@ import { Provider } from 'react-redux'
import AppAnalytics from 'src/analytics/AppAnalytics'
import { AppEvents } from 'src/analytics/Events'
import GasFeeWarning from 'src/components/GasFeeWarning'
+import { NetworkId } from 'src/transactions/types'
import {
PreparedTransactionsNeedDecreaseSpendAmountForGas,
PreparedTransactionsNotEnoughBalanceForGas,
@@ -90,13 +91,13 @@ describe('GasFeeWarning', () => {
'renders error correctly when $scenario',
({ flow, prepareTransactionsResult, feeCurrencyTokenId, title, description, ctaLabel }) => {
const store = createMockStore()
- const changeInputValueFn = jest.fn()
+ const onPressSmallerAmount = jest.fn()
const { getByTestId, getByText } = render(
)
@@ -106,6 +107,10 @@ describe('GasFeeWarning', () => {
flow,
errorType: prepareTransactionsResult.type,
tokenId: feeCurrencyTokenId,
+ networkId:
+ feeCurrencyTokenId === mockArbEthTokenId
+ ? NetworkId['arbitrum-sepolia']
+ : NetworkId['celo-alfajores'],
})
expect(getByText(title)).toBeTruthy()
expect(getByText(description)).toBeTruthy()
@@ -113,7 +118,7 @@ describe('GasFeeWarning', () => {
if (ctaLabel) {
fireEvent.press(getByText(ctaLabel))
}
- expect(changeInputValueFn).toHaveBeenCalledTimes(
+ expect(onPressSmallerAmount).toHaveBeenCalledTimes(
ctaLabel && ctaLabel.includes('ctaAction') ? 1 : 0
)
}
diff --git a/src/components/GasFeeWarning.tsx b/src/components/GasFeeWarning.tsx
index 73990e6b0dd..a544e386c2d 100644
--- a/src/components/GasFeeWarning.tsx
+++ b/src/components/GasFeeWarning.tsx
@@ -15,11 +15,11 @@ export type GasFeeWarningFlow = 'Send' | 'Swap' | 'Withdraw' | 'Deposit' | 'Dapp
function GasFeeWarning({
prepareTransactionsResult,
flow,
- changeInputValueFn,
+ onPressSmallerAmount,
}: {
prepareTransactionsResult?: PreparedTransactionsResult
flow: GasFeeWarningFlow
- changeInputValueFn?: (amount: string) => void
+ onPressSmallerAmount?: (amount: string) => void
}) {
const { t } = useTranslation()
@@ -29,6 +29,7 @@ function GasFeeWarning({
flow,
errorType: prepareTransactionsResult.type,
tokenId: feeCurrency.tokenId,
+ networkId: feeCurrency.networkId,
})
}
}, [prepareTransactionsResult])
@@ -70,16 +71,19 @@ function GasFeeWarning({
flow,
tokenId: feeCurrency.tokenId,
errorType: prepareTransactionsResult.type,
+ networkId: feeCurrency.networkId,
})
- prepareTransactionsResult.type === 'not-enough-balance-for-gas'
- ? navigate(Screens.FiatExchangeAmount, {
- tokenId: feeCurrency.tokenId,
- flow: CICOFlow.CashIn,
- tokenSymbol: feeCurrency.symbol,
- })
- : changeInputValueFn
- ? changeInputValueFn(prepareTransactionsResult.decreasedSpendAmount.toString())
+ if (prepareTransactionsResult.type === 'not-enough-balance-for-gas') {
+ navigate(Screens.FiatExchangeAmount, {
+ tokenId: feeCurrency.tokenId,
+ flow: CICOFlow.CashIn,
+ tokenSymbol: feeCurrency.symbol,
+ })
+ } else {
+ onPressSmallerAmount
+ ? onPressSmallerAmount(prepareTransactionsResult.decreasedSpendAmount.toString())
: null
+ }
}
return (
{
errorType: 'not-enough-balance-for-gas',
flow: 'Deposit',
tokenId: mockArbEthTokenId,
+ networkId: NetworkId['arbitrum-sepolia'],
})
expect(AppAnalytics.track).toHaveBeenCalledWith(AppEvents.gas_fee_warning_cta_press, {
errorType: 'not-enough-balance-for-gas',
flow: 'Deposit',
tokenId: mockArbEthTokenId,
+ networkId: NetworkId['arbitrum-sepolia'],
})
expect(navigate).toHaveBeenCalledWith(Screens.FiatExchangeAmount, {
tokenId: mockArbEthTokenId,
diff --git a/src/earn/EarnEnterAmount.tsx b/src/earn/EarnEnterAmount.tsx
index 60291f3af00..01acea23e24 100644
--- a/src/earn/EarnEnterAmount.tsx
+++ b/src/earn/EarnEnterAmount.tsx
@@ -46,7 +46,11 @@ import { useSwappableTokens, useTokenInfo } from 'src/tokens/hooks'
import { feeCurrenciesSelector } from 'src/tokens/selectors'
import { TokenBalance } from 'src/tokens/slice'
import Logger from 'src/utils/Logger'
-import { getFeeCurrencyAndAmounts, PreparedTransactionsResult } from 'src/viem/prepareTransactions'
+import {
+ getFeeCurrencyAndAmounts,
+ PreparedTransactionsNotEnoughBalanceForGas,
+ PreparedTransactionsResult,
+} from 'src/viem/prepareTransactions'
import { walletAddressSelector } from 'src/web3/selectors'
import { isAddress } from 'viem'
@@ -346,6 +350,11 @@ export default function EarnEnterAmount({ route }: Props) {
const dropdownEnabled = availableInputTokens.length > 1
+ const fakePrepareTransactionsResult: PreparedTransactionsNotEnoughBalanceForGas = {
+ type: 'not-enough-balance-for-gas',
+ feeCurrencies: feeCurrencies,
+ }
+
return (
} />
@@ -403,9 +412,9 @@ export default function EarnEnterAmount({ route }: Props) {
)}
{showLowerAmountError && (
Date: Tue, 7 Jan 2025 08:38:58 -0700
Subject: [PATCH 28/36] feedback pt. 2
---
locales/base/translation.json | 2 +-
src/components/GasFeeWarning.tsx | 53 ++++++++++++++++++--------------
2 files changed, 31 insertions(+), 24 deletions(-)
diff --git a/locales/base/translation.json b/locales/base/translation.json
index 76eb1158bb7..45729bb8aee 100644
--- a/locales/base/translation.json
+++ b/locales/base/translation.json
@@ -2830,6 +2830,7 @@
},
"gasFeeWarning": {
"title": "You need more {{tokenSymbol}} for gas fees",
+ "title_Dapp": "You have an insufficient gas token balance",
"descriptionMaxAmount_Send": "Add {{tokenSymbol}} for gas fees or lower the amount you're sending",
"descriptionMaxAmount_Swap": "Add {{tokenSymbol}} for gas fees or lower the amount you're swapping",
"descriptionMaxAmount_Deposit": "Add {{tokenSymbol}} for gas fees or lower the amount you're depositing",
@@ -2838,7 +2839,6 @@
"descriptionNotEnoughGas_Swap": "Adjust the amount you're swapping or add {{tokenSymbol}} to continue",
"descriptionNotEnoughGas_Deposit": "Adjust the amount you're depositing or add {{tokenSymbol}} to continue",
"descriptionNotEnoughGas_Withdraw": "Adjust the amount you're withdrawing or add {{tokenSymbol}} to continue",
- "titleDapp": "You have an insufficient gas token balance",
"descriptionDapp": "Add {{tokenSymbol}} to complete this transaction",
"ctaBuy": "Buy {{tokenSymbol}}",
"ctaAction_Send": "Send smaller amount",
diff --git a/src/components/GasFeeWarning.tsx b/src/components/GasFeeWarning.tsx
index a544e386c2d..ea613ffef22 100644
--- a/src/components/GasFeeWarning.tsx
+++ b/src/components/GasFeeWarning.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { StyleSheet } from 'react-native'
import AppAnalytics from 'src/analytics/AppAnalytics'
@@ -43,28 +43,35 @@ function GasFeeWarning({
? prepareTransactionsResult.feeCurrencies[0]
: prepareTransactionsResult.feeCurrency
- const title =
- flow === 'Dapp'
- ? t('gasFeeWarning.titleDapp')
- : t('gasFeeWarning.title', { tokenSymbol: feeCurrency.symbol })
- const description =
- flow === 'Dapp'
- ? t('gasFeeWarning.descriptionDapp', { tokenSymbol: feeCurrency.symbol })
- : prepareTransactionsResult.type === 'not-enough-balance-for-gas'
- ? t('gasFeeWarning.descriptionNotEnoughGas', {
- context: flow,
- tokenSymbol: feeCurrency.symbol,
- })
- : t('gasFeeWarning.descriptionMaxAmount', {
- context: flow,
- tokenSymbol: feeCurrency.symbol,
- })
- const ctaLabel =
- flow === 'Dapp'
- ? undefined
- : prepareTransactionsResult.type === 'not-enough-balance-for-gas'
- ? t('gasFeeWarning.ctaBuy', { tokenSymbol: feeCurrency.symbol })
- : t('gasFeeWarning.ctaAction', { context: flow })
+ const title = t('gasFeeWarning.title', {
+ context: flow === 'Dapp' ? 'Dapp' : undefined,
+ tokenSymbol: feeCurrency.symbol,
+ })
+
+ const { description, ctaLabel } = useMemo(() => {
+ if (flow === 'Dapp') {
+ return {
+ description: t('gasFeeWarning.descriptionDapp', { tokenSymbol: feeCurrency.symbol }),
+ ctaLabel: undefined,
+ }
+ } else if (prepareTransactionsResult.type === 'not-enough-balance-for-gas') {
+ return {
+ description: t('gasFeeWarning.descriptionNotEnoughGas', {
+ context: flow,
+ tokenSymbol: feeCurrency.symbol,
+ }),
+ ctaLabel: t('gasFeeWarning.ctaBuy', { tokenSymbol: feeCurrency.symbol }),
+ }
+ } else {
+ return {
+ description: t('gasFeeWarning.descriptionMaxAmount', {
+ context: flow,
+ tokenSymbol: feeCurrency.symbol,
+ }),
+ ctaLabel: t('gasFeeWarning.ctaAction', { context: flow }),
+ }
+ }
+ }, [flow, prepareTransactionsResult])
const onPressCta = () => {
AppAnalytics.track(AppEvents.gas_fee_warning_cta_press, {
From d2e29b438ab654f2260665f72dfeeb054cd3bb4a Mon Sep 17 00:00:00 2001
From: Finnian Jacobson-Schulte
<140328381+finnian0826@users.noreply.github.com>
Date: Tue, 7 Jan 2025 08:44:05 -0700
Subject: [PATCH 29/36] clean up testing code
---
src/earn/EarnEnterAmount.tsx | 13 ++-----------
1 file changed, 2 insertions(+), 11 deletions(-)
diff --git a/src/earn/EarnEnterAmount.tsx b/src/earn/EarnEnterAmount.tsx
index 01acea23e24..db4be1fe929 100644
--- a/src/earn/EarnEnterAmount.tsx
+++ b/src/earn/EarnEnterAmount.tsx
@@ -46,11 +46,7 @@ import { useSwappableTokens, useTokenInfo } from 'src/tokens/hooks'
import { feeCurrenciesSelector } from 'src/tokens/selectors'
import { TokenBalance } from 'src/tokens/slice'
import Logger from 'src/utils/Logger'
-import {
- getFeeCurrencyAndAmounts,
- PreparedTransactionsNotEnoughBalanceForGas,
- PreparedTransactionsResult,
-} from 'src/viem/prepareTransactions'
+import { getFeeCurrencyAndAmounts, PreparedTransactionsResult } from 'src/viem/prepareTransactions'
import { walletAddressSelector } from 'src/web3/selectors'
import { isAddress } from 'viem'
@@ -350,11 +346,6 @@ export default function EarnEnterAmount({ route }: Props) {
const dropdownEnabled = availableInputTokens.length > 1
- const fakePrepareTransactionsResult: PreparedTransactionsNotEnoughBalanceForGas = {
- type: 'not-enough-balance-for-gas',
- feeCurrencies: feeCurrencies,
- }
-
return (
} />
@@ -412,7 +403,7 @@ export default function EarnEnterAmount({ route }: Props) {
)}
From 33ce1183bf7b97110920783509e7090da2eebaf8 Mon Sep 17 00:00:00 2001
From: Finnian Jacobson-Schulte
<140328381+finnian0826@users.noreply.github.com>
Date: Tue, 7 Jan 2025 09:16:39 -0700
Subject: [PATCH 30/36] fix unit test
---
src/components/GasFeeWarning.test.tsx | 22 +++++++++++-----------
1 file changed, 11 insertions(+), 11 deletions(-)
diff --git a/src/components/GasFeeWarning.test.tsx b/src/components/GasFeeWarning.test.tsx
index 947dfabee79..92c6887fef4 100644
--- a/src/components/GasFeeWarning.test.tsx
+++ b/src/components/GasFeeWarning.test.tsx
@@ -76,17 +76,17 @@ describe('GasFeeWarning', () => {
expect(queryByTestId('GasFeeWarning')).toBeFalsy()
})
it.each`
- scenario | flow | prepareTransactionsResult | feeCurrencyTokenId | title | description | ctaLabel
- ${'sending max amount of ETH'} | ${'Send'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Send","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaAction, {"context":"Send"}'}
- ${'sending with insufficient CELO'} | ${'Send'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Send","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaBuy, {"tokenSymbol":"CELO"}'}
- ${'swapping max amount of ETH'} | ${'Swap'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Swap","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaAction, {"context":"Swap"}'}
- ${'swapping with insufficient CELO'} | ${'Swap'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Swap","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaBuy, {"tokenSymbol":"CELO"}'}
- ${'withdrawing max amount of ETH'} | ${'Withdraw'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Withdraw","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaAction, {"context":"Withdraw"}'}
- ${'withdrawing with insufficient CELO'} | ${'Withdraw'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Withdraw","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaBuy, {"tokenSymbol":"CELO"}'}
- ${'depositing max amount of ETH'} | ${'Deposit'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Deposit","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaAction, {"context":"Deposit"}'}
- ${'depositing with insufficient CELO'} | ${'Deposit'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Deposit","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaBuy, {"tokenSymbol":"CELO"}'}
- ${'dapp transaction with max amount of ETH'} | ${'Dapp'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
- ${'dapp transaction with insufficient CELO'} | ${'Dapp'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.titleDapp'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
+ scenario | flow | prepareTransactionsResult | feeCurrencyTokenId | title | description | ctaLabel
+ ${'sending max amount of ETH'} | ${'Send'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Send","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaAction, {"context":"Send"}'}
+ ${'sending with insufficient CELO'} | ${'Send'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Send","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaBuy, {"tokenSymbol":"CELO"}'}
+ ${'swapping max amount of ETH'} | ${'Swap'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Swap","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaAction, {"context":"Swap"}'}
+ ${'swapping with insufficient CELO'} | ${'Swap'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Swap","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaBuy, {"tokenSymbol":"CELO"}'}
+ ${'withdrawing max amount of ETH'} | ${'Withdraw'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Withdraw","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaAction, {"context":"Withdraw"}'}
+ ${'withdrawing with insufficient CELO'} | ${'Withdraw'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Withdraw","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaBuy, {"tokenSymbol":"CELO"}'}
+ ${'depositing max amount of ETH'} | ${'Deposit'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Deposit","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaAction, {"context":"Deposit"}'}
+ ${'depositing with insufficient CELO'} | ${'Deposit'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Deposit","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaBuy, {"tokenSymbol":"CELO"}'}
+ ${'dapp transaction with max amount of ETH'} | ${'Dapp'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"context":"Dapp","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
+ ${'dapp transaction with insufficient CELO'} | ${'Dapp'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"context":"Dapp","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
`(
'renders error correctly when $scenario',
({ flow, prepareTransactionsResult, feeCurrencyTokenId, title, description, ctaLabel }) => {
From 22729358c03046914e5fa9b63d81b7c13c2230ad Mon Sep 17 00:00:00 2001
From: Finnian Jacobson-Schulte
<140328381+finnian0826@users.noreply.github.com>
Date: Tue, 7 Jan 2025 09:30:55 -0700
Subject: [PATCH 31/36] fix lint
---
src/components/GasFeeWarning.tsx | 37 ++++++++++++++++++--------------
1 file changed, 21 insertions(+), 16 deletions(-)
diff --git a/src/components/GasFeeWarning.tsx b/src/components/GasFeeWarning.tsx
index ea613ffef22..a78158bd624 100644
--- a/src/components/GasFeeWarning.tsx
+++ b/src/components/GasFeeWarning.tsx
@@ -34,28 +34,23 @@ function GasFeeWarning({
}
}, [prepareTransactionsResult])
- if (!prepareTransactionsResult || prepareTransactionsResult.type === 'possible') {
- return false
- }
-
- const feeCurrency =
- prepareTransactionsResult.type === 'not-enough-balance-for-gas'
- ? prepareTransactionsResult.feeCurrencies[0]
- : prepareTransactionsResult.feeCurrency
-
- const title = t('gasFeeWarning.title', {
- context: flow === 'Dapp' ? 'Dapp' : undefined,
- tokenSymbol: feeCurrency.symbol,
- })
-
- const { description, ctaLabel } = useMemo(() => {
+ const { title, description, ctaLabel } = useMemo(() => {
+ const title = t('gasFeeWarning.title', {
+ context: flow === 'Dapp' ? 'Dapp' : undefined,
+ tokenSymbol: feeCurrency.symbol,
+ })
if (flow === 'Dapp') {
return {
+ title,
description: t('gasFeeWarning.descriptionDapp', { tokenSymbol: feeCurrency.symbol }),
ctaLabel: undefined,
}
- } else if (prepareTransactionsResult.type === 'not-enough-balance-for-gas') {
+ } else if (
+ prepareTransactionsResult &&
+ prepareTransactionsResult.type === 'not-enough-balance-for-gas'
+ ) {
return {
+ title,
description: t('gasFeeWarning.descriptionNotEnoughGas', {
context: flow,
tokenSymbol: feeCurrency.symbol,
@@ -64,6 +59,7 @@ function GasFeeWarning({
}
} else {
return {
+ title,
description: t('gasFeeWarning.descriptionMaxAmount', {
context: flow,
tokenSymbol: feeCurrency.symbol,
@@ -73,6 +69,15 @@ function GasFeeWarning({
}
}, [flow, prepareTransactionsResult])
+ if (!prepareTransactionsResult || prepareTransactionsResult.type === 'possible') {
+ return false
+ }
+
+ const feeCurrency =
+ prepareTransactionsResult.type === 'not-enough-balance-for-gas'
+ ? prepareTransactionsResult.feeCurrencies[0]
+ : prepareTransactionsResult.feeCurrency
+
const onPressCta = () => {
AppAnalytics.track(AppEvents.gas_fee_warning_cta_press, {
flow,
From 9393e9878cd3a68a1572333f99c2e7d32a952794 Mon Sep 17 00:00:00 2001
From: Finnian Jacobson-Schulte
<140328381+finnian0826@users.noreply.github.com>
Date: Tue, 7 Jan 2025 10:35:01 -0700
Subject: [PATCH 32/36] fix issue with useMemo
---
src/components/GasFeeWarning.tsx | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/components/GasFeeWarning.tsx b/src/components/GasFeeWarning.tsx
index a78158bd624..6052ec28372 100644
--- a/src/components/GasFeeWarning.tsx
+++ b/src/components/GasFeeWarning.tsx
@@ -35,6 +35,9 @@ function GasFeeWarning({
}, [prepareTransactionsResult])
const { title, description, ctaLabel } = useMemo(() => {
+ if (!prepareTransactionsResult || prepareTransactionsResult.type === 'possible') {
+ return { title: null, description: null, ctaLabel: null }
+ }
const title = t('gasFeeWarning.title', {
context: flow === 'Dapp' ? 'Dapp' : undefined,
tokenSymbol: feeCurrency.symbol,
@@ -45,10 +48,7 @@ function GasFeeWarning({
description: t('gasFeeWarning.descriptionDapp', { tokenSymbol: feeCurrency.symbol }),
ctaLabel: undefined,
}
- } else if (
- prepareTransactionsResult &&
- prepareTransactionsResult.type === 'not-enough-balance-for-gas'
- ) {
+ } else if (prepareTransactionsResult.type === 'not-enough-balance-for-gas') {
return {
title,
description: t('gasFeeWarning.descriptionNotEnoughGas', {
From 81a166d186b1ce78fd7b9732a52e5628e1f68ab3 Mon Sep 17 00:00:00 2001
From: Finnian Jacobson-Schulte
<140328381+finnian0826@users.noreply.github.com>
Date: Wed, 8 Jan 2025 13:40:02 -0700
Subject: [PATCH 33/36] feedback
---
locales/base/translation.json | 4 --
src/components/GasFeeWarning.test.tsx | 24 ++++-----
src/components/GasFeeWarning.tsx | 75 ++++++++++++++-------------
src/earn/EarnEnterAmount.test.tsx | 51 ++++++++++++++++++
4 files changed, 102 insertions(+), 52 deletions(-)
diff --git a/locales/base/translation.json b/locales/base/translation.json
index 8d27d4b9b1c..289c786e642 100644
--- a/locales/base/translation.json
+++ b/locales/base/translation.json
@@ -2839,10 +2839,6 @@
"descriptionMaxAmount_Swap": "Add {{tokenSymbol}} for gas fees or lower the amount you're swapping",
"descriptionMaxAmount_Deposit": "Add {{tokenSymbol}} for gas fees or lower the amount you're depositing",
"descriptionMaxAmount_Withdraw": "Add {{tokenSymbol}} for gas fees or lower the amount you're withdrawing",
- "descriptionNotEnoughGas_Send": "Adjust the amount you're sending or add {{tokenSymbol}} to continue",
- "descriptionNotEnoughGas_Swap": "Adjust the amount you're swapping or add {{tokenSymbol}} to continue",
- "descriptionNotEnoughGas_Deposit": "Adjust the amount you're depositing or add {{tokenSymbol}} to continue",
- "descriptionNotEnoughGas_Withdraw": "Adjust the amount you're withdrawing or add {{tokenSymbol}} to continue",
"descriptionDapp": "Add {{tokenSymbol}} to complete this transaction",
"ctaBuy": "Buy {{tokenSymbol}}",
"ctaAction_Send": "Send smaller amount",
diff --git a/src/components/GasFeeWarning.test.tsx b/src/components/GasFeeWarning.test.tsx
index 92c6887fef4..18124da8ee7 100644
--- a/src/components/GasFeeWarning.test.tsx
+++ b/src/components/GasFeeWarning.test.tsx
@@ -76,17 +76,17 @@ describe('GasFeeWarning', () => {
expect(queryByTestId('GasFeeWarning')).toBeFalsy()
})
it.each`
- scenario | flow | prepareTransactionsResult | feeCurrencyTokenId | title | description | ctaLabel
- ${'sending max amount of ETH'} | ${'Send'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Send","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaAction, {"context":"Send"}'}
- ${'sending with insufficient CELO'} | ${'Send'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Send","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaBuy, {"tokenSymbol":"CELO"}'}
- ${'swapping max amount of ETH'} | ${'Swap'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Swap","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaAction, {"context":"Swap"}'}
- ${'swapping with insufficient CELO'} | ${'Swap'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Swap","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaBuy, {"tokenSymbol":"CELO"}'}
- ${'withdrawing max amount of ETH'} | ${'Withdraw'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Withdraw","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaAction, {"context":"Withdraw"}'}
- ${'withdrawing with insufficient CELO'} | ${'Withdraw'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Withdraw","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaBuy, {"tokenSymbol":"CELO"}'}
- ${'depositing max amount of ETH'} | ${'Deposit'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Deposit","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaAction, {"context":"Deposit"}'}
- ${'depositing with insufficient CELO'} | ${'Deposit'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionNotEnoughGas, {"context":"Deposit","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.ctaBuy, {"tokenSymbol":"CELO"}'}
- ${'dapp transaction with max amount of ETH'} | ${'Dapp'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"context":"Dapp","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
- ${'dapp transaction with insufficient CELO'} | ${'Dapp'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"context":"Dapp","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
+ scenario | flow | prepareTransactionsResult | feeCurrencyTokenId | title | description | ctaLabel
+ ${'sending max amount of ETH'} | ${'Send'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Send","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaAction, {"context":"Send"}'}
+ ${'sending with insufficient CELO'} | ${'Send'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${undefined} | ${'gasFeeWarning.ctaBuy, {"tokenSymbol":"CELO"}'}
+ ${'swapping max amount of ETH'} | ${'Swap'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Swap","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaAction, {"context":"Swap"}'}
+ ${'swapping with insufficient CELO'} | ${'Swap'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${undefined} | ${'gasFeeWarning.ctaBuy, {"tokenSymbol":"CELO"}'}
+ ${'withdrawing max amount of ETH'} | ${'Withdraw'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Withdraw","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaAction, {"context":"Withdraw"}'}
+ ${'withdrawing with insufficient CELO'} | ${'Withdraw'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${undefined} | ${'gasFeeWarning.ctaBuy, {"tokenSymbol":"CELO"}'}
+ ${'depositing max amount of ETH'} | ${'Deposit'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Deposit","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaAction, {"context":"Deposit"}'}
+ ${'depositing with insufficient CELO'} | ${'Deposit'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${undefined} | ${'gasFeeWarning.ctaBuy, {"tokenSymbol":"CELO"}'}
+ ${'dapp transaction with max amount of ETH'} | ${'Dapp'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"context":"Dapp","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
+ ${'dapp transaction with insufficient CELO'} | ${'Dapp'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"context":"Dapp","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
`(
'renders error correctly when $scenario',
({ flow, prepareTransactionsResult, feeCurrencyTokenId, title, description, ctaLabel }) => {
@@ -113,7 +113,7 @@ describe('GasFeeWarning', () => {
: NetworkId['celo-alfajores'],
})
expect(getByText(title)).toBeTruthy()
- expect(getByText(description)).toBeTruthy()
+ expect(description ? getByText(description) : true).toBeTruthy()
expect(ctaLabel ? getByText(ctaLabel) : true).toBeTruthy()
if (ctaLabel) {
fireEvent.press(getByText(ctaLabel))
diff --git a/src/components/GasFeeWarning.tsx b/src/components/GasFeeWarning.tsx
index 6052ec28372..86532a997a8 100644
--- a/src/components/GasFeeWarning.tsx
+++ b/src/components/GasFeeWarning.tsx
@@ -23,8 +23,14 @@ function GasFeeWarning({
}) {
const { t } = useTranslation()
+ const feeCurrency = prepareTransactionsResult
+ ? prepareTransactionsResult.type === 'not-enough-balance-for-gas'
+ ? prepareTransactionsResult.feeCurrencies[0]
+ : prepareTransactionsResult.feeCurrency
+ : undefined
+
useEffect(() => {
- if (prepareTransactionsResult && prepareTransactionsResult.type !== 'possible') {
+ if (feeCurrency && prepareTransactionsResult && prepareTransactionsResult.type !== 'possible') {
AppAnalytics.track(AppEvents.gas_fee_warning_impression, {
flow,
errorType: prepareTransactionsResult.type,
@@ -32,30 +38,47 @@ function GasFeeWarning({
networkId: feeCurrency.networkId,
})
}
- }, [prepareTransactionsResult])
+ }, [flow, prepareTransactionsResult, feeCurrency])
- const { title, description, ctaLabel } = useMemo(() => {
- if (!prepareTransactionsResult || prepareTransactionsResult.type === 'possible') {
- return { title: null, description: null, ctaLabel: null }
+ const { title, description, ctaLabel, onPressCta } = useMemo(() => {
+ if (
+ !feeCurrency ||
+ !prepareTransactionsResult ||
+ prepareTransactionsResult.type === 'possible'
+ ) {
+ return {}
}
const title = t('gasFeeWarning.title', {
context: flow === 'Dapp' ? 'Dapp' : undefined,
tokenSymbol: feeCurrency.symbol,
})
+ const trackCtaAnalytics = () => {
+ AppAnalytics.track(AppEvents.gas_fee_warning_cta_press, {
+ flow,
+ tokenId: feeCurrency.tokenId,
+ errorType: prepareTransactionsResult.type,
+ networkId: feeCurrency.networkId,
+ })
+ }
if (flow === 'Dapp') {
return {
title,
description: t('gasFeeWarning.descriptionDapp', { tokenSymbol: feeCurrency.symbol }),
ctaLabel: undefined,
+ onPressCta: undefined,
}
} else if (prepareTransactionsResult.type === 'not-enough-balance-for-gas') {
return {
title,
- description: t('gasFeeWarning.descriptionNotEnoughGas', {
- context: flow,
- tokenSymbol: feeCurrency.symbol,
- }),
ctaLabel: t('gasFeeWarning.ctaBuy', { tokenSymbol: feeCurrency.symbol }),
+ onPressCta: () => {
+ trackCtaAnalytics()
+ navigate(Screens.FiatExchangeAmount, {
+ tokenId: feeCurrency.tokenId,
+ flow: CICOFlow.CashIn,
+ tokenSymbol: feeCurrency.symbol,
+ })
+ },
}
} else {
return {
@@ -65,43 +88,23 @@ function GasFeeWarning({
tokenSymbol: feeCurrency.symbol,
}),
ctaLabel: t('gasFeeWarning.ctaAction', { context: flow }),
+ onPressCta: () => {
+ trackCtaAnalytics()
+ onPressSmallerAmount?.(prepareTransactionsResult.decreasedSpendAmount.toString())
+ },
}
}
- }, [flow, prepareTransactionsResult])
+ }, [flow, prepareTransactionsResult, feeCurrency])
- if (!prepareTransactionsResult || prepareTransactionsResult.type === 'possible') {
+ if (!title) {
return false
}
- const feeCurrency =
- prepareTransactionsResult.type === 'not-enough-balance-for-gas'
- ? prepareTransactionsResult.feeCurrencies[0]
- : prepareTransactionsResult.feeCurrency
-
- const onPressCta = () => {
- AppAnalytics.track(AppEvents.gas_fee_warning_cta_press, {
- flow,
- tokenId: feeCurrency.tokenId,
- errorType: prepareTransactionsResult.type,
- networkId: feeCurrency.networkId,
- })
- if (prepareTransactionsResult.type === 'not-enough-balance-for-gas') {
- navigate(Screens.FiatExchangeAmount, {
- tokenId: feeCurrency.tokenId,
- flow: CICOFlow.CashIn,
- tokenSymbol: feeCurrency.symbol,
- })
- } else {
- onPressSmallerAmount
- ? onPressSmallerAmount(prepareTransactionsResult.decreasedSpendAmount.toString())
- : null
- }
- }
return (
{
})
})
+ it('should show gas warning error when prepareTransactionsResult is type need-decrease-spend-amount-for-gas, and tapping cta behaves as expected', async () => {
+ jest.mocked(usePrepareEnterAmountTransactionsCallback).mockReturnValue({
+ prepareTransactionsResult: {
+ prepareTransactionsResult: mockPreparedTransactionDecreaseSpend,
+ swapTransaction: undefined,
+ },
+ refreshPreparedTransactions: jest.fn(),
+ clearPreparedTransactions: jest.fn(),
+ prepareTransactionError: undefined,
+ isPreparingTransactions: false,
+ })
+ const { getByTestId, getByText } = render(
+
+
+
+ )
+
+ await waitFor(() => expect(getByTestId('GasFeeWarning')).toBeTruthy())
+ fireEvent.press(getByText('gasFeeWarning.ctaAction, {"context":"Deposit"}'))
+ expect(AppAnalytics.track).toHaveBeenCalledTimes(2)
+ expect(AppAnalytics.track).toHaveBeenCalledWith(AppEvents.gas_fee_warning_impression, {
+ errorType: 'need-decrease-spend-amount-for-gas',
+ flow: 'Deposit',
+ tokenId: mockArbEthTokenId,
+ networkId: NetworkId['arbitrum-sepolia'],
+ })
+ expect(AppAnalytics.track).toHaveBeenCalledWith(AppEvents.gas_fee_warning_cta_press, {
+ errorType: 'need-decrease-spend-amount-for-gas',
+ flow: 'Deposit',
+ tokenId: mockArbEthTokenId,
+ networkId: NetworkId['arbitrum-sepolia'],
+ })
+ // Deposit value should now be decreasedSpendAmount from mockPreparedTransactionDecreaseSpend, which is 1
+ expect(getByTestId('EarnEnterAmount/Deposit/Crypto')).toHaveTextContent('1.00 USDC')
+ })
+
it('should show the FeeDetailsBottomSheet when the user taps the fee details icon', async () => {
jest.mocked(usePrepareEnterAmountTransactionsCallback).mockReturnValue({
prepareTransactionsResult: {
From 4dc6531391410ae273b59491825b8972687c3227 Mon Sep 17 00:00:00 2001
From: Finnian Jacobson-Schulte
<140328381+finnian0826@users.noreply.github.com>
Date: Wed, 8 Jan 2025 14:00:24 -0700
Subject: [PATCH 34/36] don't put extra space for description if null
---
src/components/InLineNotification.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/InLineNotification.tsx b/src/components/InLineNotification.tsx
index 05bfb8f4683..7e43d02daa1 100644
--- a/src/components/InLineNotification.tsx
+++ b/src/components/InLineNotification.tsx
@@ -82,7 +82,7 @@ export function InLineNotification({
)}
{!!title && {title}}
- {description}
+ {description && {description}}
From ec8c5d551235e02480306c8924e84a3d58706d24 Mon Sep 17 00:00:00 2001
From: Finnian Jacobson-Schulte
<140328381+finnian0826@users.noreply.github.com>
Date: Wed, 8 Jan 2025 14:04:05 -0700
Subject: [PATCH 35/36] use boolean
---
src/components/InLineNotification.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/InLineNotification.tsx b/src/components/InLineNotification.tsx
index 7e43d02daa1..4ee716a916d 100644
--- a/src/components/InLineNotification.tsx
+++ b/src/components/InLineNotification.tsx
@@ -82,7 +82,7 @@ export function InLineNotification({
)}
{!!title && {title}}
- {description && {description}}
+ {!!description && {description}}
From d120e47926a62c60ccfb838cf8fdc8c3346022ae Mon Sep 17 00:00:00 2001
From: Finnian Jacobson-Schulte
<140328381+finnian0826@users.noreply.github.com>
Date: Thu, 9 Jan 2025 09:30:18 -0700
Subject: [PATCH 36/36] feedback
---
src/analytics/Events.tsx | 7 ++-----
src/analytics/Properties.tsx | 30 +++++++++------------------
src/analytics/docs.ts | 8 +++----
src/components/GasFeeWarning.test.tsx | 26 +++++++++++------------
src/components/GasFeeWarning.tsx | 8 +++----
src/earn/EarnEnterAmount.test.tsx | 10 ++++-----
6 files changed, 38 insertions(+), 51 deletions(-)
diff --git a/src/analytics/Events.tsx b/src/analytics/Events.tsx
index 6e7213d98bb..20b5c427579 100644
--- a/src/analytics/Events.tsx
+++ b/src/analytics/Events.tsx
@@ -26,9 +26,6 @@ export enum AppEvents {
in_app_review_error = 'in_app_review_error',
handle_deeplink = 'handle_deeplink',
-
- gas_fee_warning_impression = 'gas_fee_warning_impression',
- gas_fee_warning_cta_press = 'gas_fee_warning_cta_press',
}
export enum HomeEvents {
@@ -325,8 +322,8 @@ export enum QrScreenEvents {
}
export enum FeeEvents {
- estimate_fee_failed = 'estimate_fee_failed',
- estimate_fee_success = 'estimate_fee_success',
+ gas_fee_warning_impression = 'gas_fee_warning_impression',
+ gas_fee_warning_cta_press = 'gas_fee_warning_cta_press',
}
export enum TransactionEvents {
diff --git a/src/analytics/Properties.tsx b/src/analytics/Properties.tsx
index 5abc84eabbb..2d7b5eb068d 100644
--- a/src/analytics/Properties.tsx
+++ b/src/analytics/Properties.tsx
@@ -153,18 +153,6 @@ interface AppEventsProperties {
fullPath: string | null
query: string | null
}
- [AppEvents.gas_fee_warning_impression]: {
- flow: GasFeeWarningFlow
- errorType: 'need-decrease-spend-amount-for-gas' | 'not-enough-balance-for-gas'
- tokenId: string
- networkId: NetworkId
- }
- [AppEvents.gas_fee_warning_cta_press]: {
- flow: GasFeeWarningFlow
- errorType: 'need-decrease-spend-amount-for-gas' | 'not-enough-balance-for-gas'
- tokenId: string
- networkId: NetworkId
- }
}
interface HomeEventsProperties {
@@ -642,15 +630,17 @@ interface SendEventsProperties {
}
interface FeeEventsProperties {
- [FeeEvents.estimate_fee_failed]: {
- feeType: string
- tokenAddress: string
- error: string
+ [FeeEvents.gas_fee_warning_impression]: {
+ flow: GasFeeWarningFlow
+ errorType: 'need-decrease-spend-amount-for-gas' | 'not-enough-balance-for-gas'
+ tokenId: string
+ networkId: NetworkId
}
- [FeeEvents.estimate_fee_success]: {
- feeType: string
- tokenAddress: string
- usdFee: string
+ [FeeEvents.gas_fee_warning_cta_press]: {
+ flow: GasFeeWarningFlow
+ errorType: 'need-decrease-spend-amount-for-gas' | 'not-enough-balance-for-gas'
+ tokenId: string
+ networkId: NetworkId
}
}
diff --git a/src/analytics/docs.ts b/src/analytics/docs.ts
index 4e69bb5bf28..399931338ce 100644
--- a/src/analytics/docs.ts
+++ b/src/analytics/docs.ts
@@ -67,8 +67,6 @@ export const eventDocs: Record = {
[AppEvents.in_app_review_impression]: `User sees an in-app review request`,
[AppEvents.in_app_review_error]: `Error while attempting to display in-app review`,
[AppEvents.handle_deeplink]: `When a deeplink that leads into the app is detected and handled`,
- [AppEvents.gas_fee_warning_impression]: `When the gas fee warning is shown to the user`,
- [AppEvents.gas_fee_warning_cta_press]: `When the user presses the CTA on the gas fee warning`,
[HomeEvents.account_circle_tapped]: `When the account circle used in the tab navigation is tapped`,
[HomeEvents.profile_address_copy]: `When a user copies their wallet address from the profile screen`,
[HomeEvents.notification_scroll]: ``,
@@ -348,8 +346,8 @@ export const eventDocs: Record = {
[QrScreenEvents.qr_screen_copy_address]: ``,
[QrScreenEvents.qr_scanner_open]: `When unique "QR scanner" button is pressed`,
[QrScreenEvents.qr_scanned]: `When a QR code has been successfully scanned`,
- [FeeEvents.estimate_fee_failed]: ``,
- [FeeEvents.estimate_fee_success]: ``,
+ [FeeEvents.gas_fee_warning_impression]: `When the gas fee warning is shown to the user`,
+ [FeeEvents.gas_fee_warning_cta_press]: `When the user presses the CTA on the gas fee warning`,
[TransactionEvents.transaction_start]: `when a transaction is about to be submitted to the blockchain`,
[TransactionEvents.transaction_gas_estimated]: `when gas is estimated for a transaction or an already estimated gas is used in a transaction about to be submitted (only for contract-kit)`,
[TransactionEvents.transaction_hash_received]: `when a hash is received for a transaction`,
@@ -663,4 +661,6 @@ export const eventDocs: Record = {
// [AppEvents.multichain_beta_opt_in]: `When the user taps the Try it Now button on the multichain beta screen`,
// [AppEvents.multichain_beta_opt_out]: `When the user taps the No Thanks button on the multichain beta screen`,
// [AppEvents.multichain_beta_contact_support]: `When the user taps the Contact Support button on the multichain beta screen`,
+ // [FeeEvents.estimate_fee_failed]: ``,
+ // [FeeEvents.estimate_fee_success]: ``,
}
diff --git a/src/components/GasFeeWarning.test.tsx b/src/components/GasFeeWarning.test.tsx
index 18124da8ee7..2fd89f8ca6c 100644
--- a/src/components/GasFeeWarning.test.tsx
+++ b/src/components/GasFeeWarning.test.tsx
@@ -3,7 +3,7 @@ import BigNumber from 'bignumber.js'
import React from 'react'
import { Provider } from 'react-redux'
import AppAnalytics from 'src/analytics/AppAnalytics'
-import { AppEvents } from 'src/analytics/Events'
+import { FeeEvents } from 'src/analytics/Events'
import GasFeeWarning from 'src/components/GasFeeWarning'
import { NetworkId } from 'src/transactions/types'
import {
@@ -76,17 +76,17 @@ describe('GasFeeWarning', () => {
expect(queryByTestId('GasFeeWarning')).toBeFalsy()
})
it.each`
- scenario | flow | prepareTransactionsResult | feeCurrencyTokenId | title | description | ctaLabel
- ${'sending max amount of ETH'} | ${'Send'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Send","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaAction, {"context":"Send"}'}
- ${'sending with insufficient CELO'} | ${'Send'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${undefined} | ${'gasFeeWarning.ctaBuy, {"tokenSymbol":"CELO"}'}
- ${'swapping max amount of ETH'} | ${'Swap'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Swap","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaAction, {"context":"Swap"}'}
- ${'swapping with insufficient CELO'} | ${'Swap'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${undefined} | ${'gasFeeWarning.ctaBuy, {"tokenSymbol":"CELO"}'}
- ${'withdrawing max amount of ETH'} | ${'Withdraw'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Withdraw","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaAction, {"context":"Withdraw"}'}
- ${'withdrawing with insufficient CELO'} | ${'Withdraw'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${undefined} | ${'gasFeeWarning.ctaBuy, {"tokenSymbol":"CELO"}'}
- ${'depositing max amount of ETH'} | ${'Deposit'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Deposit","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaAction, {"context":"Deposit"}'}
- ${'depositing with insufficient CELO'} | ${'Deposit'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"tokenSymbol":"CELO"}'} | ${undefined} | ${'gasFeeWarning.ctaBuy, {"tokenSymbol":"CELO"}'}
- ${'dapp transaction with max amount of ETH'} | ${'Dapp'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"context":"Dapp","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
- ${'dapp transaction with insufficient CELO'} | ${'Dapp'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"context":"Dapp","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
+ scenario | flow | prepareTransactionsResult | feeCurrencyTokenId | title | description | ctaLabel
+ ${'sending max amount of ETH'} | ${'Send'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"context":"Send","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Send","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaAction, {"context":"Send"}'}
+ ${'sending with insufficient CELO'} | ${'Send'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"context":"Send","tokenSymbol":"CELO"}'} | ${undefined} | ${'gasFeeWarning.ctaBuy, {"tokenSymbol":"CELO"}'}
+ ${'swapping max amount of ETH'} | ${'Swap'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"context":"Swap","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Swap","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaAction, {"context":"Swap"}'}
+ ${'swapping with insufficient CELO'} | ${'Swap'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"context":"Swap","tokenSymbol":"CELO"}'} | ${undefined} | ${'gasFeeWarning.ctaBuy, {"tokenSymbol":"CELO"}'}
+ ${'withdrawing max amount of ETH'} | ${'Withdraw'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"context":"Withdraw","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Withdraw","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaAction, {"context":"Withdraw"}'}
+ ${'withdrawing with insufficient CELO'} | ${'Withdraw'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"context":"Withdraw","tokenSymbol":"CELO"}'} | ${undefined} | ${'gasFeeWarning.ctaBuy, {"tokenSymbol":"CELO"}'}
+ ${'depositing max amount of ETH'} | ${'Deposit'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"context":"Deposit","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionMaxAmount, {"context":"Deposit","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.ctaAction, {"context":"Deposit"}'}
+ ${'depositing with insufficient CELO'} | ${'Deposit'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"context":"Deposit","tokenSymbol":"CELO"}'} | ${undefined} | ${'gasFeeWarning.ctaBuy, {"tokenSymbol":"CELO"}'}
+ ${'dapp transaction with max amount of ETH'} | ${'Dapp'} | ${mockPreparedTransactionNeedDecreaseEth} | ${mockArbEthTokenId} | ${'gasFeeWarning.title, {"context":"Dapp","tokenSymbol":"ETH"}'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"ETH"}'} | ${undefined}
+ ${'dapp transaction with insufficient CELO'} | ${'Dapp'} | ${mockPreparedTransactionNotEnoughCelo} | ${mockCeloTokenId} | ${'gasFeeWarning.title, {"context":"Dapp","tokenSymbol":"CELO"}'} | ${'gasFeeWarning.descriptionDapp, {"tokenSymbol":"CELO"}'} | ${undefined}
`(
'renders error correctly when $scenario',
({ flow, prepareTransactionsResult, feeCurrencyTokenId, title, description, ctaLabel }) => {
@@ -103,7 +103,7 @@ describe('GasFeeWarning', () => {
)
expect(getByTestId('GasFeeWarning')).toBeTruthy()
expect(AppAnalytics.track).toHaveBeenCalledTimes(1)
- expect(AppAnalytics.track).toHaveBeenCalledWith(AppEvents.gas_fee_warning_impression, {
+ expect(AppAnalytics.track).toHaveBeenCalledWith(FeeEvents.gas_fee_warning_impression, {
flow,
errorType: prepareTransactionsResult.type,
tokenId: feeCurrencyTokenId,
diff --git a/src/components/GasFeeWarning.tsx b/src/components/GasFeeWarning.tsx
index 86532a997a8..b975940541f 100644
--- a/src/components/GasFeeWarning.tsx
+++ b/src/components/GasFeeWarning.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { StyleSheet } from 'react-native'
import AppAnalytics from 'src/analytics/AppAnalytics'
-import { AppEvents } from 'src/analytics/Events'
+import { FeeEvents } from 'src/analytics/Events'
import InLineNotification, { NotificationVariant } from 'src/components/InLineNotification'
import { CICOFlow } from 'src/fiatExchanges/types'
import { navigate } from 'src/navigator/NavigationService'
@@ -31,7 +31,7 @@ function GasFeeWarning({
useEffect(() => {
if (feeCurrency && prepareTransactionsResult && prepareTransactionsResult.type !== 'possible') {
- AppAnalytics.track(AppEvents.gas_fee_warning_impression, {
+ AppAnalytics.track(FeeEvents.gas_fee_warning_impression, {
flow,
errorType: prepareTransactionsResult.type,
tokenId: feeCurrency.tokenId,
@@ -49,11 +49,11 @@ function GasFeeWarning({
return {}
}
const title = t('gasFeeWarning.title', {
- context: flow === 'Dapp' ? 'Dapp' : undefined,
+ context: flow,
tokenSymbol: feeCurrency.symbol,
})
const trackCtaAnalytics = () => {
- AppAnalytics.track(AppEvents.gas_fee_warning_cta_press, {
+ AppAnalytics.track(FeeEvents.gas_fee_warning_cta_press, {
flow,
tokenId: feeCurrency.tokenId,
errorType: prepareTransactionsResult.type,
diff --git a/src/earn/EarnEnterAmount.test.tsx b/src/earn/EarnEnterAmount.test.tsx
index 36e60305e79..e66ced060cc 100644
--- a/src/earn/EarnEnterAmount.test.tsx
+++ b/src/earn/EarnEnterAmount.test.tsx
@@ -5,7 +5,7 @@ import { DeviceEventEmitter } from 'react-native'
import { getNumberFormatSettings } from 'react-native-localize'
import { Provider } from 'react-redux'
import AppAnalytics from 'src/analytics/AppAnalytics'
-import { AppEvents, EarnEvents } from 'src/analytics/Events'
+import { EarnEvents, FeeEvents } from 'src/analytics/Events'
import EarnEnterAmount from 'src/earn/EarnEnterAmount'
import { usePrepareEnterAmountTransactionsCallback } from 'src/earn/hooks'
import { Status as EarnStatus } from 'src/earn/slice'
@@ -963,13 +963,13 @@ describe('EarnEnterAmount', () => {
await waitFor(() => expect(getByTestId('GasFeeWarning')).toBeTruthy())
fireEvent.press(getByText('gasFeeWarning.ctaBuy, {"tokenSymbol":"ETH"}'))
expect(AppAnalytics.track).toHaveBeenCalledTimes(2)
- expect(AppAnalytics.track).toHaveBeenCalledWith(AppEvents.gas_fee_warning_impression, {
+ expect(AppAnalytics.track).toHaveBeenCalledWith(FeeEvents.gas_fee_warning_impression, {
errorType: 'not-enough-balance-for-gas',
flow: 'Deposit',
tokenId: mockArbEthTokenId,
networkId: NetworkId['arbitrum-sepolia'],
})
- expect(AppAnalytics.track).toHaveBeenCalledWith(AppEvents.gas_fee_warning_cta_press, {
+ expect(AppAnalytics.track).toHaveBeenCalledWith(FeeEvents.gas_fee_warning_cta_press, {
errorType: 'not-enough-balance-for-gas',
flow: 'Deposit',
tokenId: mockArbEthTokenId,
@@ -1002,13 +1002,13 @@ describe('EarnEnterAmount', () => {
await waitFor(() => expect(getByTestId('GasFeeWarning')).toBeTruthy())
fireEvent.press(getByText('gasFeeWarning.ctaAction, {"context":"Deposit"}'))
expect(AppAnalytics.track).toHaveBeenCalledTimes(2)
- expect(AppAnalytics.track).toHaveBeenCalledWith(AppEvents.gas_fee_warning_impression, {
+ expect(AppAnalytics.track).toHaveBeenCalledWith(FeeEvents.gas_fee_warning_impression, {
errorType: 'need-decrease-spend-amount-for-gas',
flow: 'Deposit',
tokenId: mockArbEthTokenId,
networkId: NetworkId['arbitrum-sepolia'],
})
- expect(AppAnalytics.track).toHaveBeenCalledWith(AppEvents.gas_fee_warning_cta_press, {
+ expect(AppAnalytics.track).toHaveBeenCalledWith(FeeEvents.gas_fee_warning_cta_press, {
errorType: 'need-decrease-spend-amount-for-gas',
flow: 'Deposit',
tokenId: mockArbEthTokenId,