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

suite-native/intl/src/messages.ts

@@ -2315,6 +2315,7 @@ export const messages = {
             providerNamePlaceholder: 'Provider',
             providerReceiveAddressLabel: "{providerName}'s receive address",
             confirmationAlertTitle: 'Failed to confirm offer.',
+            approvalSuccessAlert: 'Spending approval confirmed.',
         },
         tradingExchangeApprovalScreen: {
             title: 'Set {symbol} spending',

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

@@ -1,34 +1,45 @@
 import { memo, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 
+import { DexApprovalType, ExchangeTrade } from 'invity-api';
+
 import {
     TradingRootState,
     cryptoIdToNetworkSymbolAndContractAddress,
     selectTradingCoinSymbolByCryptoId,
-    selectTradingExchangeSelectedQuote,
     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';
 
-type ExchangeApprovalLimitSheetProps = {
+export type ExchangeApprovalLimitSheetProps = {
     isVisible: boolean;
     onDismiss: () => void;
+    onApprovalTypeSelect: (type: DexApprovalType) => void;
+    selectedApprovalType: DexApprovalType;
+    quote: ExchangeTrade;
 };
 
 export const ExchangeApprovalLimitSheet = memo(
-    ({ isVisible, onDismiss }: ExchangeApprovalLimitSheetProps) => {
-        const { bottomSheetRef, openModal } = useBottomSheetModal();
+    ({
+        isVisible,
+        onDismiss,
+        onApprovalTypeSelect,
+        selectedApprovalType,
+        quote,
+    }: ExchangeApprovalLimitSheetProps) => {
+        const { bottomSheetRef, openModal, closeModal } = useBottomSheetModal();
 
-        useEffect(() => {
-            if (isVisible) {
-                openModal();
-            }
-        }, [isVisible, openModal]);
+        useEffect(
+            () => (isVisible ? openModal() : closeModal()),
+            [isVisible, openModal, closeModal],
+        );
 
-        const quote = useSelector(selectTradingExchangeSelectedQuote);
         const providerInfo = useSelector((state: TradingRootState) =>
             selectTradingProviderByNameAndTradeType(state, quote?.exchange, 'exchange'),
         );
@@ -37,10 +48,6 @@ export const ExchangeApprovalLimitSheet = memo(
             selectTradingCoinSymbolByCryptoId(state, quote?.send),
         );
 
-        if (!quote) {
-            return null;
-        }
-
         const { symbol, contractAddress } = quote.send
             ? cryptoIdToNetworkSymbolAndContractAddress(quote.send)
             : {};
@@ -49,7 +56,22 @@ export const ExchangeApprovalLimitSheet = memo(
             return null;
         }
 
-        const limitAmount = `200.32 ${coinSymbol}`; //TODO
+        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
@@ -74,9 +96,9 @@ export const ExchangeApprovalLimitSheet = memo(
                         }
                         symbol={symbol}
                         contractAddress={contractAddress}
-                        isChecked={true}
+                        isChecked={selectedApprovalType === 'INFINITE'}
                         onChange={() => {
-                            // TODO
+                            onApprovalTypeSelect('INFINITE');
                         }}
                     />
 
@@ -90,9 +112,9 @@ export const ExchangeApprovalLimitSheet = memo(
                         }
                         symbol={symbol}
                         contractAddress={contractAddress}
-                        isChecked={false}
+                        isChecked={selectedApprovalType === 'MINIMAL'}
                         onChange={() => {
-                            // TODO
+                            onApprovalTypeSelect('MINIMAL');
                         }}
                     />
                 </VStack>

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/components/exchange/ExchangePreview/ExchangePreviewView.tsx

@@ -1,10 +1,9 @@
 import { memo } from 'react';
-import { ScrollView } from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
 
 import { ExchangeTrade } from 'invity-api';
 
-import { InlineAlertBox, VStack } from '@suite-native/atoms';
+import { InlineAlertBox } from '@suite-native/atoms';
 
 import { ExchangeFeePickerCard } from './ExchangeFeePickerCard';
 import { ExchangeFromAccountTradePreviewCard } from './ExchangeFromAccountTradePreviewCard';
@@ -21,20 +20,15 @@ export const ExchangePreviewView = memo(({ quote, txnErrorString }: ExchangePrev
     const isTxnError = !!txnErrorString;
 
     return (
-        <ScrollView>
-            <VStack spacing="sp20" paddingVertical="sp20">
-                {isTxnError && (
-                    <Animated.View>
-                        <InlineAlertBox variant="critical" title={txnErrorString} />
-                    </Animated.View>
-                )}
-                <ExchangeFromAccountTradePreviewCard
-                    quote={quote}
-                    fromStringValue={fromStringValue}
-                />
-                <ExchangeToAccountTradePreviewCard quote={quote} toStringValue={toStringValue} />
-                <ExchangeFeePickerCard quote={quote} isTxnError={isTxnError} />
-            </VStack>
-        </ScrollView>
+        <>
+            {isTxnError && (
+                <Animated.View>
+                    <InlineAlertBox variant="critical" title={txnErrorString} />
+                </Animated.View>
+            )}
+            <ExchangeFromAccountTradePreviewCard quote={quote} fromStringValue={fromStringValue} />
+            <ExchangeToAccountTradePreviewCard quote={quote} toStringValue={toStringValue} />
+            <ExchangeFeePickerCard quote={quote} isTxnError={isTxnError} />
+        </>
     );
 });