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

Author: tomasjakl

suite-native/intl/src/messages.ts

@@ -2300,6 +2300,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,42 @@
 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 { BottomSheetModal, VStack, useBottomSheetModal } from '@suite-native/atoms';
 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 +45,6 @@ export const ExchangeApprovalLimitSheet = memo(
             selectTradingCoinSymbolByCryptoId(state, quote?.send),
         );
 
-        if (!quote) {
-            return null;
-        }
-
         const { symbol, contractAddress } = quote.send
             ? cryptoIdToNetworkSymbolAndContractAddress(quote.send)
             : {};
@@ -49,7 +53,7 @@ export const ExchangeApprovalLimitSheet = memo(
             return null;
         }
 
-        const limitAmount = `200.32 ${coinSymbol}`; //TODO
+        const limitAmount = `${quote.sendStringAmount} ${coinSymbol}`;
 
         return (
             <BottomSheetModal
@@ -74,9 +78,9 @@ export const ExchangeApprovalLimitSheet = memo(
                         }
                         symbol={symbol}
                         contractAddress={contractAddress}
-                        isChecked={true}
+                        isChecked={selectedApprovalType === 'INFINITE'}
                         onChange={() => {
-                            // TODO
+                            onApprovalTypeSelect('INFINITE');
                         }}
                     />
 
@@ -90,9 +94,9 @@ export const ExchangeApprovalLimitSheet = memo(
                         }
                         symbol={symbol}
                         contractAddress={contractAddress}
-                        isChecked={false}
+                        isChecked={selectedApprovalType === 'MINIMAL'}
                         onChange={() => {
-                            // TODO
+                            onApprovalTypeSelect('MINIMAL');
                         }}
                     />
                 </VStack>

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

@@ -5,6 +5,7 @@ import { useNavigation } from '@react-navigation/native';
 
 import {
     exchangeThunks,
+    parseCryptoId,
     selectTradingExchangeIsLoading,
     selectTradingMaxSlippagePercentage,
 } from '@suite-common/trading';
@@ -22,6 +23,10 @@ import {
     selectExchangeSelectedSendAccount,
 } from '../../selectors/exchangeSelectors';
 import { ExchangeFormType } from '../../types/exchange';
+import {
+    getApprovalStatus,
+    tokenSupportsIncreasingAllowance,
+} from '../../utils/general/approvalStatusUtils';
 import { isFullySelectedReceiveAccount } from '../../utils/general/receiveAccountUtils';
 import { getSymbolFromTradeableAsset } from '../../utils/general/tradeableAssetUtils';
 import { useConsent } from '../general/useConsent';
@@ -87,7 +92,36 @@ export const useExchangeSelectQuote = (form: ExchangeFormType) => {
                 userConsent: waitForConsent,
                 nextStep: () => {
                     clearExchangeFormQuoteData(form);
-                    navigation.navigate(TradingStackRoutes.TradingExchangePreview);
+
+                    const approvalStatus = getApprovalStatus(candidateQuote);
+                    if (approvalStatus === 'approved' || approvalStatus === 'not_needed') {
+                        return navigation.navigate(TradingStackRoutes.TradingExchangePreview, {});
+                    }
+
+                    const { contractAddress } = candidateQuote.send
+                        ? parseCryptoId(candidateQuote.send)
+                        : {};
+
+                    const isIncreasingAllowanceSupported =
+                        tokenSupportsIncreasingAllowance(contractAddress);
+
+                    if (approvalStatus === 'needs_increase' && isIncreasingAllowanceSupported) {
+                        return navigation.navigate(TradingStackRoutes.TradingExchangeApproval, {
+                            quote: candidateQuote,
+                            shouldIncreaseLimit: true,
+                        });
+                    }
+
+                    if (approvalStatus === 'needs_increase') {
+                        return navigation.navigate(TradingStackRoutes.TradingExchangeRevoke, {
+                            quote: candidateQuote,
+                            shouldIncreaseLimit: true,
+                        });
+                    }
+
+                    return navigation.navigate(TradingStackRoutes.TradingExchangeApproval, {
+                        quote: candidateQuote,
+                    });
                 },
                 onCancel: () => {},
             }),

suite-native/module-trading/src/screens/TradingExchangeApprovalScreen.tsx

@@ -1,35 +1,58 @@
-import { Pressable } from 'react-native';
+import { useState } from 'react';
+import { Pressable } from 'react-native-gesture-handler';
+import Animated from 'react-native-reanimated';
 import { useSelector } from 'react-redux';
 
-import { invariant } from '@suite-common/suite-utils';
+import { useNavigation } from '@react-navigation/native';
+import { DexApprovalType } from 'invity-api';
+
 import {
     TradingRootState,
     cryptoIdToNetworkAndContractAddress,
     selectTradingCoinSymbolByCryptoId,
-    selectTradingExchangeSelectedQuote,
     selectTradingProviderByNameAndTradeType,
 } from '@suite-common/trading';
 import { asBaseCurrencyAmount } from '@suite-common/wallet-utils';
 import { Box, Button, Card, HStack, InlineAlertBox, Text, VStack } from '@suite-native/atoms';
 import { BaseCurrencyAmountFormatter } from '@suite-native/formatters';
 import { CryptoIcon, Icon, NetworkIcon } from '@suite-native/icons';
 import { Translation } from '@suite-native/intl';
-import { DynamicScreenHeader, Screen } from '@suite-native/navigation';
+import {
+    DynamicScreenHeader,
+    RootStackParamList,
+    Screen,
+    StackNavigationProps,
+    StackToStackCompositeScreenProps,
+    TradingStackParamList,
+    TradingStackRoutes,
+} from '@suite-native/navigation';
 import { BigNumber } from '@trezor/utils';
 
 import { TradeInfoHeader } from '../components/TradeInfo/TradeInfoHeader';
 import { TradeInfoRow } from '../components/TradeInfo/TradeInfoRow';
 import { ExchangeApprovalLimitSheet } from '../components/exchange/ExchangeApprovalLimitSheet/ExchangeApprovalLimitSheet';
 import { ProviderLogo } from '../components/general/ProviderLogo';
+import { useExchangeFlow } from '../hooks/exchange/useExchangeFlow';
 import { useBottomSheetControls } from '../hooks/general/useBottomSheetControls';
 import { selectExchangeSelectedSendAccount } from '../selectors/exchangeSelectors';
 
-export const TradingExchangeApprovalScreen = () => {
-    const quote = useSelector(selectTradingExchangeSelectedQuote);
+type TradingExchangeApprovalScreenProps = StackToStackCompositeScreenProps<
+    TradingStackParamList,
+    TradingStackRoutes.TradingExchangeApproval,
+    RootStackParamList
+>;
 
-    invariant(quote, 'quote must be defined');
+export const TradingExchangeApprovalScreen = ({
+    route: { params },
+}: TradingExchangeApprovalScreenProps) => {
+    const { quote, shouldIncreaseLimit, isRevoked } = params;
+    const navigation =
+        useNavigation<
+            StackNavigationProps<TradingStackParamList, TradingStackRoutes.TradingExchangeApproval>
+        >();
 
     const account = useSelector(selectExchangeSelectedSendAccount);
+    const [selectedApprovalType, setSelectedApprovalType] = useState<DexApprovalType>('INFINITE');
 
     const { network, contractAddress } = quote.send
         ? cryptoIdToNetworkAndContractAddress(quote.send)
@@ -45,8 +68,36 @@ export const TradingExchangeApprovalScreen = () => {
         selectTradingCoinSymbolByCryptoId(state, quote?.send),
     );
 
+    const { confirmTrade, fetchFeesAndCompose } = useExchangeFlow();
+
     const fee = '4.76'; // TODO
 
+    const handleContinue = async () => {
+        const updatedQuote = {
+            ...quote,
+            approvalType: selectedApprovalType,
+        };
+
+        const success = await confirmTrade({
+            receiveAddress: quote.receiveAddress ?? '',
+            trade: updatedQuote,
+            approvalFlow: true,
+            nextStep: () => {},
+        });
+
+        if (success) {
+            // TODO
+            await fetchFeesAndCompose();
+
+            navigation.navigate(TradingStackRoutes.TradingExchangePreview, { isApproved: true });
+        }
+    };
+
+    const handleApprovalTypeChange = (newType: DexApprovalType) => {
+        setSelectedApprovalType(newType);
+        hideSheet();
+    };
+
     return (
         <Screen
             header={
@@ -63,23 +114,32 @@ export const TradingExchangeApprovalScreen = () => {
                             values={{ symbol: coinSymbol }}
                         />
                     }
-                    closeActionType="close"
+                    closeActionType="back"
                 />
             }
         >
             <VStack spacing="sp16">
-                <InlineAlertBox
-                    title={
-                        <Translation id="moduleTrading.tradingExchangeApprovalScreen.revokeSuccessAlert" />
-                    }
-                    variant="success"
-                />
-                <InlineAlertBox
-                    title={
-                        <Translation id="moduleTrading.tradingExchangeApprovalScreen.lowLimitInfoAlert" />
-                    }
-                    variant="info"
-                />
+                {!!shouldIncreaseLimit && (
+                    <Animated.View>
+                        <InlineAlertBox
+                            title={
+                                <Translation id="moduleTrading.tradingExchangeApprovalScreen.lowLimitInfoAlert" />
+                            }
+                            variant="warning"
+                        />
+                    </Animated.View>
+                )}
+
+                {!!isRevoked && (
+                    <Animated.View>
+                        <InlineAlertBox
+                            variant="success"
+                            title={
+                                <Translation id="moduleTrading.tradingExchangeApprovalScreen.revokeSuccessAlert" />
+                            }
+                        />
+                    </Animated.View>
+                )}
 
                 <Card noPadding>
                     <TradeInfoHeader
@@ -140,7 +200,11 @@ export const TradingExchangeApprovalScreen = () => {
                                             />
                                         )}
                                         <Text variant="hint" color="textSubdued">
-                                            <Translation id="moduleTrading.tradingExchangeApprovalScreen.unlimitedLabel" />
+                                            {selectedApprovalType === 'INFINITE' ? (
+                                                <Translation id="moduleTrading.tradingExchangeApprovalScreen.unlimitedLabel" />
+                                            ) : (
+                                                `${quote.sendStringAmount} ${coinSymbol}`
+                                            )}
                                         </Text>
                                         <Icon name="caretDown" size="medium" />
                                     </HStack>
@@ -177,15 +241,17 @@ export const TradingExchangeApprovalScreen = () => {
             </VStack>
 
             <Box paddingTop="sp20">
-                <Button
-                    onPress={() => {
-                        // TODO
-                    }}
-                >
+                <Button onPress={handleContinue}>
                     <Translation id="generic.buttons.continue" />
                 </Button>
             </Box>
-            <ExchangeApprovalLimitSheet isVisible={isSheetVisible} onDismiss={hideSheet} />
+            <ExchangeApprovalLimitSheet
+                isVisible={isSheetVisible}
+                onDismiss={hideSheet}
+                onApprovalTypeSelect={handleApprovalTypeChange}
+                selectedApprovalType={selectedApprovalType}
+                quote={quote}
+            />
         </Screen>
     );
 };