refactor: migrate from useTradingInfo to useTradingUtils

Author: cermakjiri

packages/product-components/src/components/AssetLogo/AssetLogo.tsx

@@ -271,14 +271,15 @@ export const AssetLogo = ({
                         onLoad={handleOnLoad}
                         onError={handleLoadError}
                     />
-                    {showNetworkIcon && (
-                        <StyledNetworkIcon
-                            networkSymbol={symbol as NetworkSymbol | LegacyNetworkSymbol}
-                            size={size * 0.375}
-                        />
-                    )}
                 </ElevationUp>
             )}
+
+            {showNetworkIcon && (
+                <StyledNetworkIcon
+                    networkSymbol={symbol as NetworkSymbol | LegacyNetworkSymbol}
+                    size={size * 0.375}
+                />
+            )}
         </Container>
     );
 };

packages/suite/src/components/suite/asset-picker/components/AssetRow/AssetRowAccount/AssetRowSendFromAccount.tsx renamed to packages/suite/src/components/suite/asset-picker/components/AssetRow/AssetRowAccount/AssetRowAccountWithBalance.tsx

@@ -7,17 +7,17 @@ import { spacings } from '@trezor/theme';
 import { ItemClickableContainer } from '../ItemClickableContainer';
 import { AccountAmount } from './AccountAmount';
 
-export type AssetRowSendFromAccountProps = {
+export type AssetRowAccountWithBalanceProps = {
     account: Account;
     dataTestId?: string;
     onClick: (account: Account) => void;
 };
 
-export function AssetRowSendFromAccount({
+export function AssetRowAccountWithBalance({
     dataTestId,
     account,
     onClick,
-}: AssetRowSendFromAccountProps) {
+}: AssetRowAccountWithBalanceProps) {
     return (
         <ItemClickableContainer onClick={() => onClick(account)}>
             <Row data-testid={dataTestId} gap={spacings.sm} alignItems="center">

packages/suite/src/components/suite/asset-picker/components/AssetRow/AssetRowAccount/index.ts

@@ -1,3 +1,3 @@
 export * from './constants';
 export * from './AssetRowReceiveToAccount';
-export * from './AssetRowSendFromAccount';
+export * from './AssetRowAccountWithBalance';

packages/suite/src/components/suite/layouts/SuiteLayout/PageHeader/GlobalSendReceive/GlobalSendModal/GlobalSendModal.tsx

@@ -9,7 +9,7 @@ import { setSendFormPrefill } from 'src/actions/suite/suiteActions';
 import {
     AssetGroupLabel,
     AssetGroupSpace,
-    AssetRowSendFromAccount,
+    AssetRowAccountWithBalance,
     AssetRowToken,
     AssetsList,
     AssetsListEmpty,
@@ -71,7 +71,7 @@ export function GlobalSendModal({ onCancel, onSubmit }: GlobalSendModalProps) {
 
                 case 'account':
                     return (
-                        <AssetRowSendFromAccount
+                        <AssetRowAccountWithBalance
                             account={item.account}
                             onClick={handleAccountClick}
                         />

packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/ApproveModal.tsx

@@ -7,7 +7,7 @@ import {
     TradingExchangeType,
     invityAPI,
     tradingExchangeActions,
-    useTradingInfo,
+    useTradingUtils,
 } from '@suite-common/trading';
 import { getDisplaySymbol } from '@suite-common/wallet-config';
 import {
@@ -82,7 +82,7 @@ export const ApproveModal = ({
 
     const isDebug = useSelector(selectIsDebugModeActive);
 
-    const { cryptoIdToSymbolAndContractAddress, cryptoIdToCoinSymbol } = useTradingInfo();
+    const { cryptoIdToSymbolAndContractAddress, cryptoIdToCoinSymbol } = useTradingUtils();
 
     const [approvalType, setApprovalType] = useState<DexApprovalType>('MINIMAL');
     const [isConfirmButtonLoading, setIsConfirmButtonLoading] = useState<boolean>(false);

packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/RevokeModal.tsx

@@ -6,7 +6,7 @@ import {
     TradingExchangeType,
     invityAPI,
     tokenSupportsIncreasingAllowance,
-    useTradingInfo,
+    useTradingUtils,
 } from '@suite-common/trading';
 import { getDisplaySymbol } from '@suite-common/wallet-config';
 import {
@@ -70,7 +70,7 @@ export const RevokeModal = ({ setIsWaitingForDevice, onCancel }: RevokeModalProp
 
     const isDebug = useSelector(selectIsDebugModeActive);
 
-    const { cryptoIdToSymbolAndContractAddress } = useTradingInfo();
+    const { cryptoIdToSymbolAndContractAddress } = useTradingUtils();
 
     const [isConfirmButtonLoading, setIsConfirmButtonLoading] = useState<boolean>(false);
 

packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TradingTermsModal.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 import { CryptoId } from 'invity-api';
 
-import { TradingType, useTradingInfo } from '@suite-common/trading';
+import { TradingType, useTradingUtils } from '@suite-common/trading';
 import {
     //  Banner,
     //  Checkbox,
@@ -53,7 +53,7 @@ export const TradingTermsModal = ({
 
     const providerName = provider || 'unknown provider';
     const { device } = useDevice();
-    const { cryptoIdToCoinSymbol } = useTradingInfo();
+    const { cryptoIdToCoinSymbol } = useTradingUtils();
     const iconProps = {
         size: 24,
         paddingType: 'medium',

packages/suite/src/hooks/wallet/trading/form/common/useTradingFiatValues.ts

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useMemo } from 'react';
 import { CryptoId, FiatCurrencyCode } from 'invity-api';
 
 import {
+    TRADING_DEFAULT_CRYPTO_CURRENCY,
     cryptoIdToNetworkAndContractAddress,
     isCryptoIdForNativeToken,
     mapTestnetSymbol,
@@ -53,15 +54,14 @@ export const useTradingFiatValues = ({
     const isNativeToken = cryptoId && isCryptoIdForNativeToken(cryptoId);
 
     const { network, contractAddress, symbol } = useMemo(() => {
-        const defaultCryptoSymbol = 'btc';
         const assetInfo = cryptoId && cryptoIdToNetworkAndContractAddress(cryptoId);
 
         return {
             network: assetInfo?.network,
             contractAddress: isNativeToken
                 ? undefined
                 : (assetInfo?.contractAddress as TokenAddress | undefined),
-            symbol: assetInfo?.network?.symbol ?? defaultCryptoSymbol,
+            symbol: assetInfo?.network?.symbol ?? TRADING_DEFAULT_CRYPTO_CURRENCY,
         };
     }, [cryptoId, isNativeToken]);
 

packages/suite/src/hooks/wallet/trading/form/useTradingExchangeForm.ts

@@ -190,12 +190,18 @@ export const useTradingExchangeForm = ({
     const isReceiveAddressFormValid =
         Object.keys(tradingReceiveAddress.form.formState.errors).length === 0;
 
-    useTradingFiatValues({
-        cryptoId: receiveCryptoSelect?.id,
-        // FIXME: cermak: ????
-        // amount: receiveCryptoSelect?.balance,
-        fiatCurrency: output?.currency?.value as FiatCurrencyCode,
-    });
+    const fiatTradingValuesParams = selectedQuote
+        ? {
+              cryptoId: selectedQuote.receive,
+              amount: selectedQuote.receiveStringAmount,
+              fiatCurrency: output?.currency?.value as FiatCurrencyCode | undefined,
+          }
+        : {
+              cryptoId: quotesRequest?.receive,
+              amount: output?.amount,
+              fiatCurrency: output?.currency?.value as FiatCurrencyCode | undefined,
+          };
+    useTradingFiatValues(fiatTradingValuesParams);
 
     const formIsValid = Object.keys(formState.errors).length === 0;
     const hasValues = !!output?.amount && !!values.receiveCryptoSelect;
@@ -733,10 +739,10 @@ export const useTradingExchangeForm = ({
         await handleChange();
     };
 
-    const fetchFeesAndCompose = async () => {
+    const fetchFeesAndCompose = useCallback(async () => {
         await dispatch(updateFeeInfoThunk({ networkSymbol: account.symbol })).unwrap();
         composeRequest();
-    };
+    }, [dispatch, account.symbol, composeRequest]);
 
     useEffect(() => {
         const networkType = getNetworkType(account.symbol);
@@ -800,18 +806,15 @@ export const useTradingExchangeForm = ({
         if (pageType !== 'form') return;
 
         fetchFeesAndCompose();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [transactionData, outputAddress, ethereumAdjustGasLimit, pageType]);
+    }, [transactionData, outputAddress, ethereumAdjustGasLimit, pageType, fetchFeesAndCompose]);
 
     useEffect(() => {
         setValue('receiveAddress', receiveAddress);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [receiveAddress]);
+    }, [receiveAddress, setValue]);
 
     useEffect(() => {
         setValue('extraField', extraField);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [extraField]);
+    }, [extraField, setValue]);
 
     useEffect(() => {
         dispatch(tradingThunks.loadInitialDataThunk({ activeSection: type }));

packages/suite/src/support/messages.ts

@@ -11149,7 +11149,7 @@ export default defineMessages({
         defaultMessage: 'To',
     },
     TR_ASSET_PICKER_SEARCH_PLACEHOLDER: {
-        id: 'TR_SWAP_ASSET_PICKER_SEARCH_PLACEHOLDER',
+        id: 'TR_ASSET_PICKER_SEARCH_PLACEHOLDER',
         defaultMessage: 'Search coin or token',
     },
     TR_ASSET_PICKER_YOUR_ASSETS: {