fix(coinmarket): send and verify modals

packages/suite/src/actions/wallet/coinmarket/coinmarketCommonActions.ts

@@ -42,13 +42,29 @@ export type CoinmarketCommonAction =
     | {
           type: typeof COINMARKET_COMMON.SET_MODAL_CRYPTO_CURRENCY;
           modalCryptoId: CryptoId | undefined;
+      }
+    | {
+          type: typeof COINMARKET_COMMON.SET_MODAL_ACCOUNT;
+          modalAccount: Account | undefined;
       };
 
 type FormState = {
     cryptoInput?: string;
     outputs?: Output[];
 };
 
+/**
+ * Set modalAccount to retrieve the correct account in modals.
+ * Used in ConfirmAddressModal and TransactionReviewModalContent through selectAccountIncludingChosenInCoinmarket.
+ * Unset in middleware after modal is closed.
+ */
+export const setCoinmarketModalAccount = (
+    modalAccount: Account | undefined,
+): CoinmarketCommonAction => ({
+    type: COINMARKET_COMMON.SET_MODAL_ACCOUNT,
+    modalAccount,
+});
+
 export const verifyAddress =
     (
         account: Account,
@@ -66,6 +82,8 @@ export const verifyAddress =
         path = path ?? accountAddress.path;
         if (!path || !address) return;
 
+        dispatch(setCoinmarketModalAccount(account));
+
         const addressDisplayType = selectAddressDisplayType(getState());
 
         const { useEmptyPassphrase, connected, available } = device;

packages/suite/src/actions/wallet/coinmarketExchangeActions.ts

@@ -36,7 +36,7 @@ export type CoinmarketExchangeAction =
           quote: ExchangeTrade | undefined;
       }
     | { type: typeof COINMARKET_EXCHANGE.CLEAR_QUOTES }
-    | { type: typeof COINMARKET_EXCHANGE.SET_COINMARKET_ACCOUNT; account: Account }
+    | { type: typeof COINMARKET_EXCHANGE.SET_COINMARKET_ACCOUNT; account: Account | undefined }
     | {
           type: typeof COINMARKET_COMMON.SAVE_TRADE;
           date: string;
@@ -148,7 +148,9 @@ export const clearQuotes = (): CoinmarketExchangeAction => ({
 export const verifyAddress = (account: Account, address?: string, path?: string) =>
     verifyExchangeAddress(account, address, path, COINMARKET_EXCHANGE.VERIFY_ADDRESS);
 
-export const setCoinmarketExchangeAccount = (account: Account): CoinmarketExchangeAction => ({
+export const setCoinmarketExchangeAccount = (
+    account: Account | undefined,
+): CoinmarketExchangeAction => ({
     type: COINMARKET_EXCHANGE.SET_COINMARKET_ACCOUNT,
     account,
 });

packages/suite/src/actions/wallet/coinmarketSellActions.ts

@@ -23,7 +23,7 @@ export type CoinmarketSellAction =
     | { type: typeof COINMARKET_SELL.SAVE_QUOTE_REQUEST; request: SellFiatTradeQuoteRequest }
     | { type: typeof COINMARKET_SELL.SAVE_TRANSACTION_ID; transactionId?: string }
     | { type: typeof COINMARKET_SELL.SET_IS_FROM_REDIRECT; isFromRedirect: boolean }
-    | { type: typeof COINMARKET_SELL.SET_COINMARKET_ACCOUNT; account: Account }
+    | { type: typeof COINMARKET_SELL.SET_COINMARKET_ACCOUNT; account: Account | undefined }
     | {
           type: typeof COINMARKET_SELL.SAVE_QUOTES;
           quotes: SellFiatTrade[];
@@ -126,7 +126,7 @@ export const setIsFromRedirect = (isFromRedirect: boolean): CoinmarketSellAction
     isFromRedirect,
 });
 
-export const setCoinmarketSellAccount = (account: Account): CoinmarketSellAction => ({
+export const setCoinmarketSellAccount = (account: Account | undefined): CoinmarketSellAction => ({
     type: COINMARKET_SELL.SET_COINMARKET_ACCOUNT,
     account,
 });

packages/suite/src/actions/wallet/constants/coinmarketCommonConstants.ts

@@ -3,3 +3,4 @@ export const SAVE_TRADE = '@coinmarket-common/save_trade';
 export const LOAD_DATA = '@coinmarket-common/load_data';
 export const SET_LOADING = '@coinmarket-common/set_loading';
 export const SET_MODAL_CRYPTO_CURRENCY = '@coinmarket-common/set_modal_crypto_currency';
+export const SET_MODAL_ACCOUNT = '@coinmarket-common/set_modal_account';

packages/suite/src/components/suite/modals/ReduxModal/ConfirmAddressModal.tsx

@@ -7,7 +7,7 @@ import {
 } from 'src/components/suite/modals/ReduxModal/ConfirmValueModal/ConfirmValueModal';
 import { useDisplayMode, useSelector } from 'src/hooks/suite';
 import { useCoinmarketInfo } from 'src/hooks/wallet/coinmarket/useCoinmarketInfo';
-import { selectSelectedAccount } from 'src/reducers/wallet/selectedAccountReducer';
+import { selectAccountIncludingChosenInCoinmarket } from 'src/reducers/wallet/selectedAccountReducer';
 import { cryptoIdToNetworkSymbol } from 'src/utils/wallet/coinmarket/coinmarketUtils';
 
 interface ConfirmAddressModalProps
@@ -16,7 +16,7 @@ interface ConfirmAddressModalProps
 }
 
 export const ConfirmAddressModal = ({ addressPath, value, ...props }: ConfirmAddressModalProps) => {
-    const account = useSelector(selectSelectedAccount);
+    const account = useSelector(selectAccountIncludingChosenInCoinmarket);
     const { modalCryptoId } = useSelector(state => state.wallet.coinmarket);
     const displayMode = useDisplayMode({ type: 'address' });
     const { cryptoIdToCoinSymbol } = useCoinmarketInfo();

packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewModalContent.tsx

@@ -22,6 +22,8 @@ import { TransactionReviewOutputList } from './TransactionReviewOutputList/Trans
 import { TransactionReviewEvmExplanation } from './TransactionReviewEvmExplanation';
 import { getTxStakeNameByDataHex } from '@suite-common/suite-utils';
 import { ConfirmOnDevice } from '@trezor/product-components';
+import { networks } from '@suite-common/wallet-config';
+import { selectAccountIncludingChosenInCoinmarket } from 'src/reducers/wallet/selectedAccountReducer';
 
 const StyledModal = styled(Modal)`
     ${Modal.Body} {
@@ -54,16 +56,14 @@ export const TransactionReviewModalContent = ({
     txInfoState,
     cancelSignTx,
 }: TransactionReviewModalContentProps) => {
-    const selectedAccount = useSelector(state => state.wallet.selectedAccount);
+    const account = useSelector(selectAccountIncludingChosenInCoinmarket);
     const fees = useSelector(state => state.wallet.fees);
     const device = useSelector(selectDevice);
     const isActionAbortable = useSelector(selectIsActionAbortable);
     const [detailsOpen, setDetailsOpen] = useState(false);
     const [isSending, setIsSending] = useState(false);
 
     const deviceModelInternal = device?.features?.internal_model;
-
-    const { account } = selectedAccount;
     const { precomposedTx, serializedTx } = txInfoState;
 
     const precomposedForm = useSelector(state =>
@@ -81,13 +81,11 @@ export const TransactionReviewModalContent = ({
         selectSendFormReviewButtonRequestsCount(state, account?.symbol, decreaseOutputId),
     );
 
-    if (!account) {
+    if (!account || !device || !precomposedTx || !precomposedForm) {
         return null;
     }
 
-    if (selectedAccount.status !== 'loaded' || !device || !precomposedTx || !precomposedForm) {
-        return null;
-    }
+    const network = networks[account.symbol];
 
     const { networkType } = account;
 
@@ -106,7 +104,7 @@ export const TransactionReviewModalContent = ({
 
     // get estimate mining time
     let estimateTime;
-    const symbolFees = fees[selectedAccount.account.symbol];
+    const symbolFees = fees[account.symbol];
     const matchedFeeLevel = symbolFees.levels.find(
         item => item.feePerUnit === precomposedTx.feePerByte,
     );
@@ -140,8 +138,8 @@ export const TransactionReviewModalContent = ({
             <TransactionReviewSummary
                 estimateTime={estimateTime}
                 tx={precomposedTx}
-                account={selectedAccount.account}
-                network={selectedAccount.network}
+                account={account}
+                network={network}
                 broadcast={precomposedForm.options.includes('broadcast')}
                 detailsOpen={detailsOpen}
                 onDetailsClick={() => setDetailsOpen(!detailsOpen)}
@@ -152,7 +150,7 @@ export const TransactionReviewModalContent = ({
                 })}
             />
             <TransactionReviewOutputList
-                account={selectedAccount.account}
+                account={account}
                 precomposedForm={precomposedForm}
                 precomposedTx={precomposedTx}
                 signedTx={serializedTx}
@@ -171,7 +169,7 @@ export const TransactionReviewModalContent = ({
                 ethereumStakeType={ethereumStakeType || undefined}
             />
             <TransactionReviewEvmExplanation
-                account={selectedAccount.account}
+                account={account}
                 ethereumStakeType={ethereumStakeType}
             />
         </StyledModal>

packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewSummary.tsx

@@ -7,7 +7,7 @@ import { borders, spacingsPx, typography } from '@trezor/theme';
 import { TranslationKey } from '@suite-common/intl-types';
 import { Translation, FormattedCryptoAmount, AccountLabel } from 'src/components/suite';
 import { Account } from 'src/types/wallet';
-import { NetworkCompatible } from '@suite-common/wallet-config';
+import { Network } from '@suite-common/wallet-config';
 import { GeneralPrecomposedTransactionFinal, StakeType } from '@suite-common/wallet-types';
 import { useSelector } from 'src/hooks/suite/useSelector';
 import { selectLabelingDataForSelectedAccount } from 'src/reducers/suite/metadataReducer';
@@ -204,7 +204,7 @@ interface TransactionReviewSummaryProps {
     estimateTime?: number;
     tx: GeneralPrecomposedTransactionFinal;
     account: Account;
-    network: NetworkCompatible;
+    network: Network;
     broadcast?: boolean;
     detailsOpen: boolean;
     onDetailsClick: () => void;

packages/suite/src/hooks/wallet/coinmarket/form/useCoinmarketExchangeForm.ts

@@ -48,6 +48,7 @@ import {
     useCoinmarketCommonOffers,
 } from 'src/hooks/wallet/coinmarket/offers/useCoinmarketCommonOffers';
 import * as coinmarketExchangeActions from 'src/actions/wallet/coinmarketExchangeActions';
+import * as coinmarketCommonActions from 'src/actions/wallet/coinmarket/coinmarketCommonActions';
 import { notificationsActions } from '@suite-common/toast-notifications';
 import { useCoinmarketRecomposeAndSign } from 'src/hooks/wallet/useCoinmarketRecomposeAndSign';
 import { useCoinmarketLoadData } from 'src/hooks/wallet/coinmarket/useCoinmarketLoadData';
@@ -61,6 +62,7 @@ import { networks } from '@suite-common/wallet-config';
 import { useCoinmarketAccount } from 'src/hooks/wallet/coinmarket/form/common/useCoinmarketAccount';
 import { useCoinmarketInfo } from 'src/hooks/wallet/coinmarket/useCoinmarketInfo';
 import { analytics, EventType } from '@trezor/suite-analytics';
+import { setCoinmarketModalAccount } from 'src/actions/wallet/coinmarket/coinmarketCommonActions';
 
 export const useCoinmarketExchangeForm = ({
     selectedAccount,
@@ -127,6 +129,7 @@ export const useCoinmarketExchangeForm = ({
         verifyAddress: coinmarketExchangeActions.verifyAddress,
         saveSelectedQuote: coinmarketExchangeActions.saveSelectedQuote,
         setCoinmarketExchangeAccount: coinmarketExchangeActions.setCoinmarketExchangeAccount,
+        setCoinmarketModalAccount: coinmarketCommonActions.setCoinmarketModalAccount,
     });
 
     const { symbol } = account;
@@ -430,7 +433,7 @@ export const useCoinmarketExchangeForm = ({
             // swap can use different swap paths when mining tx than when estimating tx
             // the geth gas estimate may be too low
             const result = await recomposeAndSign(
-                selectedAccount.account,
+                account,
                 selectedQuote.dexTx.to,
                 selectedQuote.dexTx.value,
                 selectedQuote.partnerPaymentExtraId,
@@ -463,6 +466,8 @@ export const useCoinmarketExchangeForm = ({
     };
 
     const sendTransaction = async () => {
+        dispatch(setCoinmarketModalAccount(account));
+
         if (selectedQuote?.isDex) {
             sendDexTransaction();
 
@@ -478,7 +483,7 @@ export const useCoinmarketExchangeForm = ({
                 ? amountToSatoshi(selectedQuote.sendStringAmount, network.decimals)
                 : selectedQuote.sendStringAmount;
             const result = await recomposeAndSign(
-                selectedAccount.account,
+                account,
                 selectedQuote.sendAddress,
                 sendStringAmount,
                 selectedQuote.partnerPaymentExtraId,

packages/suite/src/hooks/wallet/coinmarket/form/useCoinmarketSellForm.ts

@@ -471,6 +471,8 @@ export const useCoinmarketSellForm = ({
     };
 
     const sendTransaction = async () => {
+        dispatch(coinmarketCommonActions.setCoinmarketModalAccount(account));
+
         // destinationAddress may be set by useCoinmarketWatchTrade hook to the trade object
         const destinationAddress =
             selectedQuote?.destinationAddress || trade?.data?.destinationAddress;