fixup! feat(suite-native): wire approval and revoke screen to trade data

Author: tomasjakl

suite-native/module-trading/src/components/exchange/ExchangeApprovalLimitSheet/ExchangeApprovalLimitSheet.tsx

@@ -9,7 +9,10 @@ import {
     selectTradingCoinSymbolByCryptoId,
     selectTradingProviderByNameAndTradeType,
 } from '@suite-common/trading';
+import { isNetworkSymbol } from '@suite-common/wallet-config';
+import { TokenSymbol } from '@suite-common/wallet-types';
 import { BottomSheetModal, VStack, useBottomSheetModal } from '@suite-native/atoms';
+import { CryptoAmountFormatter, TokenAmountFormatter } from '@suite-native/formatters';
 import { Translation } from '@suite-native/intl';
 
 import { ExchangeApprovalLimitCard } from './ExchangeApprovalLimitCard';
@@ -53,7 +56,22 @@ export const ExchangeApprovalLimitSheet = memo(
             return null;
         }
 
-        const limitAmount = `${quote.sendStringAmount} ${coinSymbol}`;
+        const limitAmount =
+            !!coinSymbol &&
+            (isNetworkSymbol(coinSymbol) ? (
+                <CryptoAmountFormatter
+                    value={quote.sendStringAmount ?? '0'}
+                    symbol={coinSymbol}
+                    isBalance={false}
+                    variant="callout"
+                />
+            ) : (
+                <TokenAmountFormatter
+                    value={quote.sendStringAmount ?? '0'}
+                    tokenSymbol={coinSymbol as TokenSymbol}
+                    variant="callout"
+                />
+            ));
 
         return (
             <BottomSheetModal

suite-native/module-trading/src/components/exchange/ExchangeApprovalLimitSheet/__tests__/ExchangeApprovalLimitSheet.comp.test.tsx

@@ -5,6 +5,7 @@ import { getInitializedTradingState } from '../../../../__fixtures__/tradingStat
 import { ExchangeApprovalLimitSheet } from '../ExchangeApprovalLimitSheet';
 
 const mockOnDismiss = jest.fn();
+const mockOnApprovalTypeSelect = jest.fn();
 
 const testQuote = exchangeQuotes[0];
 
@@ -20,40 +21,32 @@ const getPreloadedState = (): PreloadedState => ({
     },
 });
 
-const getPreloadedStateWithoutQuote = (): PreloadedState => ({
-    wallet: {
-        trading: {
-            ...getInitializedTradingState('exchange'),
-            exchange: {
-                ...getInitializedTradingState('exchange').exchange,
-                selectedQuote: undefined,
-            },
-        },
-    },
-});
-
-const renderSheet = (isVisible = true, preloadedState = getPreloadedState()) =>
+const renderSheet = (
+    isVisible = true,
+    quote = testQuote,
+    selectedApprovalType: 'INFINITE' | 'MINIMAL' = 'INFINITE',
+) =>
     renderWithStoreProviderAsync(
-        <ExchangeApprovalLimitSheet isVisible={isVisible} onDismiss={mockOnDismiss} />,
-        { preloadedState },
+        <ExchangeApprovalLimitSheet
+            isVisible={isVisible}
+            onDismiss={mockOnDismiss}
+            quote={quote}
+            onApprovalTypeSelect={mockOnApprovalTypeSelect}
+            selectedApprovalType={selectedApprovalType}
+        />,
+        { preloadedState: getPreloadedState() },
     );
 
 describe('ExchangeApprovalLimitSheet', () => {
     beforeEach(() => {
         jest.clearAllMocks();
     });
 
-    it('should render nothing when quote is not available', async () => {
-        const { toJSON } = await renderSheet(true, getPreloadedStateWithoutQuote());
-
-        expect(toJSON()).toBeNull();
-    });
-
     it('should render the sheet when visible', async () => {
         const { getByText } = await renderSheet();
 
         expect(getByText('Unlimited')).toBeTruthy();
-        expect(getByText('200.32 USDC')).toBeTruthy();
+        expect(getByText('100 USDC')).toBeTruthy();
     });
 
     it('should render unlimited approval option with correct details', async () => {
@@ -70,7 +63,7 @@ describe('ExchangeApprovalLimitSheet', () => {
     it('should render limited approval option with correct amount', async () => {
         const { getByText } = await renderSheet();
 
-        expect(getByText('200.32 USDC')).toBeTruthy();
+        expect(getByText('100 USDC')).toBeTruthy();
         expect(
             getByText(
                 "Approve only the amount needed for this swap. You'll need to approve again (and pay a fee) for future swaps, but this reduces risk by keeping you in full control of your USDC.",
@@ -94,4 +87,26 @@ describe('ExchangeApprovalLimitSheet', () => {
             ),
         ).toBeTruthy();
     });
+
+    it('should display quote sendStringAmount in limited approval option', async () => {
+        const customQuote = {
+            ...testQuote,
+            sendStringAmount: '250',
+        };
+        const { getByText } = await renderSheet(true, customQuote);
+
+        expect(getByText('250 USDC')).toBeTruthy();
+    });
+
+    it('should pass correct props when INFINITE is selected', async () => {
+        await renderSheet(true, testQuote, 'INFINITE');
+
+        expect(mockOnApprovalTypeSelect).toBeDefined();
+    });
+
+    it('should pass correct props when MINIMAL is selected', async () => {
+        await renderSheet(true, testQuote, 'MINIMAL');
+
+        expect(mockOnApprovalTypeSelect).toBeDefined();
+    });
 });

suite-native/module-trading/src/hooks/exchange/__tests__/useExchangeSelectQuote.test.ts

@@ -12,6 +12,7 @@ import { exchangeQuotes } from '../../../__fixtures__/exchangeQuotes';
 import { btcAsset } from '../../../__fixtures__/tradeableAssets';
 import { getInitializedTradingStateWithQuotes } from '../../../__fixtures__/tradingState';
 import { ExchangeFormType } from '../../../types/exchange';
+import * as approvalStatusUtils from '../../../utils/general/approvalStatusUtils';
 import { useExchangeForm } from '../useExchangeForm';
 import { useExchangeSelectQuote } from '../useExchangeSelectQuote';
 
@@ -221,7 +222,7 @@ describe('useExchangeSelectQuote', () => {
                 nextStep();
             });
 
-            expect(mockNavigation.navigate).toHaveBeenCalledWith('TradingExchangePreview');
+            expect(mockNavigation.navigate).toHaveBeenCalledWith('TradingExchangePreview', {});
         });
 
         it('should call cancelConsent when quote provider changes', async () => {
@@ -253,4 +254,147 @@ describe('useExchangeSelectQuote', () => {
             expect(result.current.isConsentRequested).toBe(false);
         });
     });
+
+    describe('navigation based on approval status', () => {
+        beforeEach(async () => {
+            store = await getInitializedStore({ isLoading: false });
+
+            const { result } = await renderExchangeForm();
+            exchangeForm = result.current;
+        });
+
+        it('should navigate to TradingExchangePreview when approval status is "approved"', async () => {
+            jest.spyOn(approvalStatusUtils, 'getApprovalStatus').mockReturnValue('approved');
+
+            act(() => {
+                exchangeForm.setValue('quote', exchangeQuotes[1]);
+            });
+
+            const dispatchSpy = jest.spyOn(store, 'dispatch');
+            const { result } = await renderUseExchangeSelectQuote();
+
+            act(() => {
+                result.current.selectQuote();
+            });
+
+            const dispatchCall = dispatchSpy.mock.calls[0][0];
+            const { nextStep } = (dispatchCall as any).payload;
+
+            act(() => {
+                nextStep();
+            });
+
+            expect(mockNavigation.navigate).toHaveBeenCalledWith('TradingExchangePreview', {});
+        });
+
+        it('should navigate to TradingExchangePreview when approval status is "not_needed"', async () => {
+            jest.spyOn(approvalStatusUtils, 'getApprovalStatus').mockReturnValue('not_needed');
+
+            act(() => {
+                exchangeForm.setValue('quote', exchangeQuotes[1]);
+            });
+
+            const dispatchSpy = jest.spyOn(store, 'dispatch');
+            const { result } = await renderUseExchangeSelectQuote();
+
+            act(() => {
+                result.current.selectQuote();
+            });
+
+            const dispatchCall = dispatchSpy.mock.calls[0][0];
+            const { nextStep } = (dispatchCall as any).payload;
+
+            act(() => {
+                nextStep();
+            });
+
+            expect(mockNavigation.navigate).toHaveBeenCalledWith('TradingExchangePreview', {});
+        });
+
+        it('should navigate to TradingExchangeApproval when approval status is "needs_approval"', async () => {
+            jest.spyOn(approvalStatusUtils, 'getApprovalStatus').mockReturnValue('needs_approval');
+
+            act(() => {
+                exchangeForm.setValue('quote', exchangeQuotes[1]);
+            });
+
+            const dispatchSpy = jest.spyOn(store, 'dispatch');
+            const { result } = await renderUseExchangeSelectQuote();
+
+            act(() => {
+                result.current.selectQuote();
+            });
+
+            const dispatchCall = dispatchSpy.mock.calls[0][0];
+            const { nextStep } = (dispatchCall as any).payload;
+
+            act(() => {
+                nextStep();
+            });
+
+            expect(mockNavigation.navigate).toHaveBeenCalledWith('TradingExchangeApproval', {
+                quote: exchangeQuotes[1],
+            });
+        });
+
+        it('should navigate to TradingExchangeApproval with shouldIncreaseLimit when approval status is "needs_increase" and token supports increasing allowance', async () => {
+            jest.spyOn(approvalStatusUtils, 'getApprovalStatus').mockReturnValue('needs_increase');
+            jest.spyOn(approvalStatusUtils, 'tokenSupportsIncreasingAllowance').mockReturnValue(
+                true,
+            );
+
+            act(() => {
+                exchangeForm.setValue('quote', exchangeQuotes[1]);
+            });
+
+            const dispatchSpy = jest.spyOn(store, 'dispatch');
+            const { result } = await renderUseExchangeSelectQuote();
+
+            act(() => {
+                result.current.selectQuote();
+            });
+
+            const dispatchCall = dispatchSpy.mock.calls[0][0];
+            const { nextStep } = (dispatchCall as any).payload;
+
+            act(() => {
+                nextStep();
+            });
+
+            expect(mockNavigation.navigate).toHaveBeenCalledWith('TradingExchangeApproval', {
+                quote: exchangeQuotes[1],
+                shouldIncreaseLimit: true,
+            });
+        });
+
+        it('should navigate to TradingExchangeRevoke when approval status is "needs_increase" and token does not support increasing allowance', async () => {
+            jest.spyOn(approvalStatusUtils, 'getApprovalStatus').mockReturnValue('needs_increase');
+            jest.spyOn(approvalStatusUtils, 'tokenSupportsIncreasingAllowance').mockReturnValue(
+                false,
+            );
+
+            act(() => {
+                exchangeForm.setValue('quote', exchangeQuotes[1]);
+            });
+
+            const dispatchSpy = jest.spyOn(store, 'dispatch');
+            const { result } = await renderUseExchangeSelectQuote();
+
+            act(() => {
+                result.current.selectQuote();
+            });
+
+            const dispatchCall = dispatchSpy.mock.calls[0][0];
+            const { nextStep } = (dispatchCall as any).payload;
+
+            act(() => {
+                nextStep();
+            });
+
+            expect(mockNavigation.navigate).toHaveBeenCalledWith('TradingExchangeRevoke', {
+                quote: exchangeQuotes[1],
+                shouldIncreaseLimit: true,
+            });
+        });
+    });
 });

suite-native/module-trading/src/screens/__tests__/TradingExchangeApprovalScreen.comp.test.tsx

@@ -12,6 +12,13 @@ import { TradingExchangeApprovalScreen } from '../TradingExchangeApprovalScreen'
 const mockShowSheet = jest.fn();
 const mockHideSheet = jest.fn();
 
+jest.mock('../../hooks/exchange/useExchangeFlow', () => ({
+    useExchangeFlow: () => ({
+        confirmTrade: jest.fn().mockResolvedValue(true),
+        fetchFeesAndCompose: jest.fn(),
+    }),
+}));
+
 jest.mock('@react-navigation/native', () => ({
     ...jest.requireActual('@react-navigation/native'),
     useRoute: () =>
@@ -46,9 +53,20 @@ const preloadedState = {
 };
 
 const renderScreen = () =>
-    renderWithStoreProviderAsync(<TradingExchangeApprovalScreen />, {
-        preloadedState,
-    });
+    renderWithStoreProviderAsync(
+        <TradingExchangeApprovalScreen
+            route={
+                { params: { quote: testQuote } } as RouteProp<
+                    TradingStackParamList,
+                    TradingStackRoutes.TradingExchangeApproval
+                >
+            }
+            navigation={{} as any}
+        />,
+        {
+            preloadedState,
+        },
+    );
 
 describe('TradingExchangeApprovalScreen', () => {
     beforeEach(() => {

suite-native/module-trading/src/screens/__tests__/TradingExchangePreviewScreen.comp.test.tsx

@@ -20,7 +20,7 @@ jest.mock('@react-navigation/native', () => ({
     ...jest.requireActual('@react-navigation/native'),
     useRoute: () =>
         ({
-            params: undefined,
+            params: {},
         }) as RouteProp<TradingStackParamList, TradingStackRoutes.TradingExchangePreview>,
 }));
 
@@ -53,7 +53,7 @@ const mockNavigate = jest.fn();
 describe('TradingExchangePreviewScreen', () => {
     let store: TestStore;
 
-    const renderTradingExchangePreviewScreen = () =>
+    const renderTradingExchangePreviewScreen = (isApproved: boolean = false) =>
         renderWithStoreProviderAsync(
             <TradingExchangePreviewScreen
                 navigation={
@@ -62,7 +62,7 @@ describe('TradingExchangePreviewScreen', () => {
                         popToTop: mockPopToTop,
                     } as unknown as TradingExchangePreviewScreenProps['navigation']
                 }
-                route={{} as TradingExchangePreviewScreenProps['route']}
+                route={{ params: { isApproved } } as TradingExchangePreviewScreenProps['route']}
             />,
             { store },
         );