fix(coinmarke): design fixes & improvements

fix(coinmarket): no offers/error - use label no methods available

fix(coinmarket): fix franction buttons margin

fix(coinmarket): select/modal overlap

fix(coinmarket): detail transaction receiveAmount

fix(coinmarket): loading invity data also on detail/transactions page

fix(coinmarket): sell all fraction

fix(coinmarket): fiat change updates fees

fix(coinmarket): design of receive address

fix(coinmarket): icon size in exchange select

fix(coinmarket): exchange select bad value

fix(coinmarket): send exchange value

fix(coinmarket): sell - switching between fiat/crypto

fix(coinmarket): sell form - composing on fraction buttons

Author: adderpositive

packages/suite/src/hooks/wallet/coinmarket/form/useCoinmarketBuyForm.tsx

@@ -5,7 +5,6 @@ import type { BuyTrade, BuyTradeQuoteRequest } from 'invity-api';
 import { isChanged } from '@suite-common/suite-utils';
 import { formatAmount, getNetwork } from '@suite-common/wallet-utils';
 import { useActions, useDispatch, useSelector } from 'src/hooks/suite';
-import { loadInvityData } from 'src/actions/wallet/coinmarket/coinmarketCommonActions';
 import invityAPI from 'src/services/suite/invityAPI';
 import {
     createQuoteLink,
@@ -42,6 +41,7 @@ import { FORM_PAYMENT_METHOD_SELECT } from 'src/constants/wallet/coinmarket/form
 import { useCoinmarketSatsSwitcher } from 'src/hooks/wallet/coinmarket/form/useCoinmarketSatsSwitcher';
 import { Network } from '@suite-common/wallet-config';
 import { cryptoToNetworkSymbol } from 'src/utils/wallet/coinmarket/cryptoSymbolUtils';
+import { useCoinmarketLoadData } from 'src/hooks/wallet/coinmarket/useCoinmarketLoadData';
 
 const useCoinmarketBuyForm = ({
     selectedAccount,
@@ -162,7 +162,6 @@ const useCoinmarketBuyForm = ({
         quoteCryptoAmount: quotesByPaymentMethod?.[0]?.receiveStringAmount,
         quoteFiatAmount: quotesByPaymentMethod?.[0]?.fiatStringAmount,
         network,
-        setIsSubmittingHelper,
     });
 
     const getQuotesRequest = useCallback(
@@ -373,10 +372,7 @@ const useCoinmarketBuyForm = ({
         setCallInProgress(false);
     };
 
-    // hooks
-    useEffect(() => {
-        dispatch(loadInvityData());
-    }, [dispatch]);
+    useCoinmarketLoadData();
 
     // call change handler on every change of text inputs with debounce
     useDebounce(

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

@@ -16,10 +16,7 @@ import { selectFiatRatesByFiatRateKey } from '@suite-common/wallet-core';
 import { useActions, useDispatch, useSelector, useTranslation } from 'src/hooks/suite';
 import invityAPI from 'src/services/suite/invityAPI';
 import { saveQuoteRequest, saveQuotes } from 'src/actions/wallet/coinmarketExchangeActions';
-import {
-    loadInvityData,
-    saveComposedTransactionInfo,
-} from 'src/actions/wallet/coinmarket/coinmarketCommonActions';
+import { saveComposedTransactionInfo } from 'src/actions/wallet/coinmarket/coinmarketCommonActions';
 import {
     addIdsToQuotes,
     getComposeAddressPlaceholder,
@@ -66,6 +63,7 @@ import { useCoinmarketRecomposeAndSign } from 'src/hooks/wallet/useCoinmarketRec
 import { Network, networksCompatibility } from '@suite-common/wallet-config';
 import { SET_MODAL_CRYPTO_CURRENCY } from 'src/actions/wallet/constants/coinmarketCommonConstants';
 import useCoinmarketExchangeFormHelpers from 'src/hooks/wallet/coinmarket/form/useCoinmarketExchangeFormHelpers';
+import { useCoinmarketLoadData } from 'src/hooks/wallet/coinmarket/useCoinmarketLoadData';
 
 export const useCoinmarketExchangeForm = ({
     selectedAccount,
@@ -536,9 +534,7 @@ export const useCoinmarketExchangeForm = ({
         }
     }, [previousValues, values, handleChange, handleSubmit, isPageOffers]);
 
-    useEffect(() => {
-        dispatch(loadInvityData());
-    }, [dispatch]);
+    useCoinmarketLoadData();
 
     useEffect(() => {
         if (!composedLevels) return;

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

@@ -12,7 +12,6 @@ interface UseCoinmarketSatsSwitcherProps {
     quoteCryptoAmount: string | undefined;
     quoteFiatAmount: string | undefined;
     network: Network | null;
-    setIsSubmittingHelper: (value: boolean) => void;
 }
 
 /**
@@ -24,7 +23,6 @@ export const useCoinmarketSatsSwitcher = ({
     quoteCryptoAmount,
     quoteFiatAmount,
     network,
-    setIsSubmittingHelper,
 }: UseCoinmarketSatsSwitcherProps) => {
     const { setValue, getValues } = methods;
     const { shouldSendInSats } = useBitcoinAmountUnit(account.symbol);
@@ -38,13 +36,13 @@ export const useCoinmarketSatsSwitcher = ({
             const amount = shouldSendInSats
                 ? amountToSatoshi(quoteCryptoAmount ?? '', networkDecimals)
                 : quoteCryptoAmount;
+
             setValue(FORM_CRYPTO_INPUT, amount);
         } else {
-            setValue(FORM_FIAT_INPUT, coinmarketGetRoundedFiatAmount(quoteFiatAmount ?? ''));
+            setValue(FORM_FIAT_INPUT, coinmarketGetRoundedFiatAmount(quoteFiatAmount));
         }
 
         setValue('amountInCrypto', !amountInCrypto);
-        setIsSubmittingHelper(true); // remove delay of sending request
     };
 
     useDidUpdate(() => {

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

@@ -57,6 +57,7 @@ import { useCoinmarketSellFormHelpers } from 'src/hooks/wallet/coinmarket/form/u
 import { selectAccounts } from '@suite-common/wallet-core';
 import { Network } from '@suite-common/wallet-config';
 import { useCoinmarketSatsSwitcher } from 'src/hooks/wallet/coinmarket/form/useCoinmarketSatsSwitcher';
+import { useCoinmarketLoadData } from 'src/hooks/wallet/coinmarket/useCoinmarketLoadData';
 
 export const useCoinmarketSellForm = ({
     selectedAccount,
@@ -104,7 +105,6 @@ export const useCoinmarketSellForm = ({
         openCoinmarketSellConfirmModal,
         submitRequestForm,
         saveComposedTransactionInfo,
-        loadInvityData,
         savePaymentMethods,
     } = useActions({
         goto: routerActions.goto,
@@ -247,7 +247,6 @@ export const useCoinmarketSellForm = ({
         quoteCryptoAmount: quotesByPaymentMethod?.[0]?.cryptoStringAmount,
         quoteFiatAmount: quotesByPaymentMethod?.[0]?.fiatStringAmount,
         network,
-        setIsSubmittingHelper,
     });
 
     const getQuotesRequest = useCallback(
@@ -610,10 +609,7 @@ export const useCoinmarketSellForm = ({
         }
     };
 
-    // hooks
-    useEffect(() => {
-        dispatch(loadInvityData());
-    }, [dispatch, loadInvityData]);
+    useCoinmarketLoadData();
 
     useEffect(() => {
         if (!isChanged(defaultValues, values)) {
@@ -654,35 +650,10 @@ export const useCoinmarketSellForm = ({
             setState(initState);
         };
 
-        // used to prevent composing transaction on empty fields
-        const shouldCompose =
-            values?.cryptoInput !== '' ||
-            values?.fiatInput !== '' ||
-            values?.setMaxOutputId === 0 ||
-            // check changing accounts
-            initState?.formValues?.outputs[0].address !== values?.outputs?.[0]?.address;
-
-        if (
-            initState &&
-            initState?.account.descriptor !== state?.account.descriptor &&
-            shouldCompose
-        ) {
+        if (initState && initState?.account.descriptor !== state?.account.descriptor) {
             setStateAsync(initState);
         }
-    }, [
-        state,
-        initState,
-        account,
-        network,
-        device,
-        accounts,
-        chunkify,
-        setValue,
-        values,
-        values?.cryptoInput,
-        values?.fiatInput,
-        values?.setMaxOutputId,
-    ]);
+    }, [state, initState, account, network, device, accounts, chunkify, setValue]);
 
     useEffect(() => {
         if (!composedLevels) return;
@@ -718,10 +689,10 @@ export const useCoinmarketSellForm = ({
 
     useEffect(() => {
         // when draft doesn't exist, we need to bind actual default values - that happens when we've got sellInfo from Invity API server
-        if (!isDraft && sellInfo) {
+        if (!isDraft && sellInfo && !formState.isDirty) {
             reset(defaultValues);
         }
-    }, [reset, sellInfo, defaultValues, isDraft, isPageOffers]);
+    }, [reset, sellInfo, defaultValues, isDraft, isPageOffers, formState.isDirty]);
 
     useDebounce(
         () => {

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

@@ -142,14 +142,17 @@ export const useCoinmarketSellFormHelpers = ({
             setValue(FORM_CRYPTO_INPUT, cryptoInputValue, { shouldDirty: true });
             setValue('setMaxOutputId', undefined, { shouldDirty: true });
             onCryptoAmountChange(cryptoInputValue);
+
+            composeRequest(FORM_CRYPTO_INPUT);
         },
         [
+            tokenData,
             account.formattedBalance,
-            shouldSendInSats,
             network.decimals,
-            onCryptoAmountChange,
-            tokenData,
+            shouldSendInSats,
             setValue,
+            onCryptoAmountChange,
+            composeRequest,
         ],
     );
 

packages/suite/src/hooks/wallet/coinmarket/form/useCoinmarketVerifyAccount.tsx

@@ -96,6 +96,7 @@ const useCoinmarketVerifyAccount = ({
     const isDebug = useSelector(selectIsDebugModeActive);
     const device = useSelector(selectDevice);
     const dispatch = useDispatch();
+    const [isMenuOpen, setIsMenuOpen] = useState<boolean | undefined>(undefined);
 
     const methods = useForm<CoinmarketVerifyFormProps>({
         mode: 'onChange',
@@ -132,6 +133,7 @@ const useCoinmarketVerifyAccount = ({
 
     const onChangeAccount = (account: CoinmarketVerifyFormAccountOptionProps) => {
         if (account.type === 'ADD_SUITE' && device) {
+            setIsMenuOpen(true);
             dispatch(
                 openModal({
                     type: 'add-account',
@@ -144,6 +146,7 @@ const useCoinmarketVerifyAccount = ({
             return;
         }
 
+        setIsMenuOpen(undefined);
         selectAccountOption(account);
     };
 
@@ -167,6 +170,7 @@ const useCoinmarketVerifyAccount = ({
         receiveNetwork,
         selectAccountOptions,
         selectedAccountOption,
+        isMenuOpen,
         getTranslationIds,
         onChangeAccount,
     };

packages/suite/src/hooks/wallet/coinmarket/useCoinmarketDetail.ts

@@ -17,6 +17,7 @@ import {
     CoinmarketTradeType,
 } from 'src/types/coinmarket/coinmarket';
 import { useServerEnvironment } from './useServerEnviroment';
+import { useCoinmarketLoadData } from 'src/hooks/wallet/coinmarket/useCoinmarketLoadData';
 
 const isBuyTrade = (trade: Trade): trade is TradeBuy => trade.tradeType === 'buy';
 
@@ -96,6 +97,7 @@ export const useCoinmarketDetail = <T extends CoinmarketTradeType>({
         tradeType,
     });
 
+    useCoinmarketLoadData();
     useServerEnvironment();
     useCoinmarketWatchTrade({ account, trade });
 

packages/suite/src/hooks/wallet/coinmarket/useCoinmarketLoadData.ts

@@ -0,0 +1,11 @@
+import { useEffect } from 'react';
+import { loadInvityData } from 'src/actions/wallet/coinmarket/coinmarketCommonActions';
+import { useDispatch } from 'src/hooks/suite';
+
+export const useCoinmarketLoadData = () => {
+    const dispatch = useDispatch();
+
+    useEffect(() => {
+        dispatch(loadInvityData());
+    }, [dispatch]);
+};

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

@@ -23,10 +23,7 @@ import {
     saveQuoteRequest,
     saveQuotes,
 } from 'src/actions/wallet/coinmarketExchangeActions';
-import {
-    loadInvityData,
-    saveComposedTransactionInfo,
-} from 'src/actions/wallet/coinmarket/coinmarketCommonActions';
+import { saveComposedTransactionInfo } from 'src/actions/wallet/coinmarket/coinmarketCommonActions';
 import {
     ExchangeFormState,
     ExchangeFormContextValues,
@@ -60,6 +57,7 @@ import { selectLocalCurrency } from 'src/reducers/wallet/settingsReducer';
 import { TokenAddress } from '@suite-common/wallet-types';
 import { CoinmarketTradeExchangeType, UseCoinmarketProps } from 'src/types/coinmarket/coinmarket';
 import { BigNumber } from '@trezor/utils';
+import { useCoinmarketLoadData } from 'src/hooks/wallet/coinmarket/useCoinmarketLoadData';
 
 export const ExchangeFormContext = createContext<ExchangeFormContextValues | null>(null);
 ExchangeFormContext.displayName = 'CoinmarketExchangeContext';
@@ -105,9 +103,7 @@ export const useCoinmarketExchangeForm = ({
     const { symbol, networkType } = account;
     const { shouldSendInSats } = useBitcoinAmountUnit(symbol);
 
-    useEffect(() => {
-        dispatch(loadInvityData());
-    }, [dispatch]);
+    useCoinmarketLoadData();
 
     const coinFees = fees[symbol];
     const levels = getFeeLevels(networkType, coinFees);

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

@@ -19,10 +19,7 @@ import {
     saveQuoteRequest,
     saveQuotes,
 } from 'src/actions/wallet/coinmarketSellActions';
-import {
-    loadInvityData,
-    saveComposedTransactionInfo,
-} from 'src/actions/wallet/coinmarket/coinmarketCommonActions';
+import { saveComposedTransactionInfo } from 'src/actions/wallet/coinmarket/coinmarketCommonActions';
 import {
     SellFormState,
     SellFormContextValues,
@@ -52,6 +49,7 @@ import { CoinmarketTradeSellType, UseCoinmarketProps } from 'src/types/coinmarke
 import { useCoinmarketSellFormDefaultValues } from 'src/hooks/wallet/useCoinmarketSellFormDefaultValues';
 import { useFees } from 'src/hooks/wallet/form/useFees';
 import { useCompose } from 'src/hooks/wallet/form/useCompose';
+import { useCoinmarketLoadData } from 'src/hooks/wallet/coinmarket/useCoinmarketLoadData';
 
 export const SellFormContext = createContext<SellFormContextValues | null>(null);
 SellFormContext.displayName = 'CoinmarketSellContext';
@@ -83,9 +81,7 @@ export const useCoinmarketSellForm = ({
 }: UseCoinmarketProps): SellFormContextValues => {
     const dispatch = useDispatch();
 
-    useEffect(() => {
-        dispatch(loadInvityData());
-    }, [dispatch]);
+    useCoinmarketLoadData();
 
     const accounts = useSelector(state => state.wallet.accounts);
     const device = useSelector(selectDevice);