From 14a2d7e86c7368da348cc18245fba406e9aa432a Mon Sep 17 00:00:00 2001 From: Satish Ravi Date: Wed, 15 May 2024 12:08:31 -0700 Subject: [PATCH 001/133] feat(earn): add loading state for deposit when tx is submitted (#5415) ### Description As the title ### Test plan ### Related issues - Part of ACT-1178 ### Backwards compatibility Yes ### Network scalability If a new NetworkId and/or Network are added in the future, the changes in this PR will: - [x] Continue to work without code changes, OR trigger a compilation error (guaranteeing we find it when a new network is added) --- src/earn/EarnDepositBottomSheet.test.tsx | 21 +++++++++++++++++++++ src/earn/EarnDepositBottomSheet.tsx | 7 +++++++ src/earn/selectors.ts | 3 +++ 3 files changed, 31 insertions(+) create mode 100644 src/earn/selectors.ts diff --git a/src/earn/EarnDepositBottomSheet.test.tsx b/src/earn/EarnDepositBottomSheet.test.tsx index d84d34992f..5ec09fe2ae 100644 --- a/src/earn/EarnDepositBottomSheet.test.tsx +++ b/src/earn/EarnDepositBottomSheet.test.tsx @@ -177,4 +177,25 @@ describe('EarnDepositBottomSheet', () => { ) expect(navigate).toHaveBeenCalledWith('WebViewScreen', { uri: 'termsUrl' }) }) + + it('shows loading state and buttons are disabled when deposit is submitted', () => { + const store = createMockStore({ + tokens: { tokenBalances: mockTokenBalances }, + earn: { depositStatus: 'started' }, + }) + const { getByTestId } = render( + + + + ) + + expect(getByTestId('EarnDeposit/PrimaryCta')).toBeDisabled() + expect(getByTestId('EarnDeposit/SecondaryCta')).toBeDisabled() + expect(getByTestId('EarnDeposit/PrimaryCta')).toContainElement(getByTestId('Button/Loading')) + }) }) diff --git a/src/earn/EarnDepositBottomSheet.tsx b/src/earn/EarnDepositBottomSheet.tsx index 1ca93beb09..42b4a11dbe 100644 --- a/src/earn/EarnDepositBottomSheet.tsx +++ b/src/earn/EarnDepositBottomSheet.tsx @@ -10,11 +10,13 @@ import BottomSheet, { BottomSheetRefType } from 'src/components/BottomSheet' import Button, { BtnSizes, BtnTypes } from 'src/components/Button' import TokenDisplay from 'src/components/TokenDisplay' import Touchable from 'src/components/Touchable' +import { depositStatusSelector } from 'src/earn/selectors' import { depositStart } from 'src/earn/slice' import InfoIcon from 'src/icons/InfoIcon' import Logo from 'src/icons/Logo' import { navigate } from 'src/navigator/NavigationService' import { Screens } from 'src/navigator/Screens' +import { useSelector } from 'src/redux/hooks' import { NETWORK_NAMES } from 'src/shared/conts' import { getDynamicConfigParams } from 'src/statsig' import { DynamicConfigs } from 'src/statsig/constants' @@ -43,6 +45,8 @@ export default function EarnDepositBottomSheet({ }) { const { t } = useTranslation() const dispatch = useDispatch() + const depositStatus = useSelector(depositStatusSelector) + const transactionSubmitted = depositStatus === 'started' const { estimatedFeeAmount, feeCurrency } = getFeeCurrencyAndAmounts(preparedTransaction) @@ -141,6 +145,7 @@ export default function EarnDepositBottomSheet({ type={BtnTypes.GRAY_WITH_BORDER} style={styles.cta} onPress={onPressCancel} + disabled={transactionSubmitted} />