feat(suite): use message system context and features in trading

Author: izmy

packages/suite/src/hooks/suite/useMessageSystemTrading.ts

@@ -0,0 +1,21 @@
+import { Feature, selectIsFeatureDisabled } from '@suite-common/message-system';
+
+import { useSelector } from './useSelector';
+
+export const useMessageSystemTrading = () => {
+    const isBuyDisabled = useSelector(state => selectIsFeatureDisabled(state, Feature.trading.buy));
+
+    const isSellDisabled = useSelector(state =>
+        selectIsFeatureDisabled(state, Feature.trading.sell),
+    );
+
+    const isExchangeDisabled = useSelector(state =>
+        selectIsFeatureDisabled(state, Feature.trading.swap),
+    );
+
+    return {
+        isBuyDisabled,
+        isSellDisabled,
+        isExchangeDisabled,
+    };
+};

packages/suite/src/views/wallet/trading/buy/TradingBuyForm.tsx

@@ -1,17 +1,26 @@
+import { Context } from '@suite-common/message-system';
+
+import { ContextMessage } from 'src/components/wallet/WalletLayout/AccountBanners/ContextMessage';
+import { useMessageSystemTrading } from 'src/hooks/suite/useMessageSystemTrading';
 import { useTradingBuyForm } from 'src/hooks/wallet/trading/form/useTradingBuyForm';
 import { TradingFormContext } from 'src/hooks/wallet/trading/form/useTradingCommonForm';
 import { UseTradingProps } from 'src/types/trading/trading';
 import { TradingContainer } from 'src/views/wallet/trading/common/TradingContainer';
 import { TradingFormLayout } from 'src/views/wallet/trading/common/TradingForm/TradingFormLayout';
 import { TradingLayout } from 'src/views/wallet/trading/common/TradingLayout/TradingLayout';
 
+import { TradingDisabled } from '../common/TradingDisabled';
+
 const TradingBuyComponent = ({ selectedAccount }: UseTradingProps) => {
+    const { isBuyDisabled } = useMessageSystemTrading();
+
     const tradingBuyContextValues = useTradingBuyForm({ selectedAccount });
 
     return (
         <TradingLayout>
             <TradingFormContext.Provider value={tradingBuyContextValues}>
-                <TradingFormLayout />
+                <ContextMessage context={Context.tradingBuy} />
+                {isBuyDisabled ? <TradingDisabled type="buy" /> : <TradingFormLayout />}
             </TradingFormContext.Provider>
         </TradingLayout>
     );

packages/suite/src/views/wallet/trading/common/TradingDisabled.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { Banner } from '@trezor/components';
+
+type TradingDisabledProps = {
+    type: 'buy' | 'sell' | 'swap';
+};
+
+const capitalize = (value: string) => value.at(0)?.toUpperCase() + value.slice(1);
+
+export const TradingDisabled = ({ type }: TradingDisabledProps) => (
+    <Banner icon="warning" variant="warning">
+        {capitalize(type)} is currently disabled.
+    </Banner>
+);

packages/suite/src/views/wallet/trading/exchange/TradingExchangeForm.tsx

@@ -1,17 +1,26 @@
+import { Context } from '@suite-common/message-system';
+
+import { ContextMessage } from 'src/components/wallet/WalletLayout/AccountBanners/ContextMessage';
+import { useMessageSystemTrading } from 'src/hooks/suite/useMessageSystemTrading';
 import { TradingFormContext } from 'src/hooks/wallet/trading/form/useTradingCommonForm';
 import { useTradingExchangeForm } from 'src/hooks/wallet/trading/form/useTradingExchangeForm';
 import { UseTradingProps } from 'src/types/trading/trading';
 import { TradingContainer } from 'src/views/wallet/trading/common/TradingContainer';
 import { TradingFormLayout } from 'src/views/wallet/trading/common/TradingForm/TradingFormLayout';
 import { TradingLayout } from 'src/views/wallet/trading/common/TradingLayout/TradingLayout';
 
+import { TradingDisabled } from '../common/TradingDisabled';
+
 const TradingExchangeFormComponent = ({ selectedAccount }: UseTradingProps) => {
+    const { isExchangeDisabled } = useMessageSystemTrading();
+
     const tradingExchangeContextValue = useTradingExchangeForm({ selectedAccount });
 
     return (
         <TradingLayout>
             <TradingFormContext.Provider value={tradingExchangeContextValue}>
-                <TradingFormLayout />
+                <ContextMessage context={Context.tradingSwap} />
+                {isExchangeDisabled ? <TradingDisabled type="swap" /> : <TradingFormLayout />}
             </TradingFormContext.Provider>
         </TradingLayout>
     );

packages/suite/src/views/wallet/trading/sell/TradingSellForm.tsx

@@ -1,16 +1,29 @@
+import { Context } from '@suite-common/message-system';
+
+import { ContextMessage } from 'src/components/wallet/WalletLayout/AccountBanners/ContextMessage';
+import { useMessageSystemTrading } from 'src/hooks/suite/useMessageSystemTrading';
 import { TradingFormContext } from 'src/hooks/wallet/trading/form/useTradingCommonForm';
 import { useTradingSellForm } from 'src/hooks/wallet/trading/form/useTradingSellForm';
 import { UseTradingProps } from 'src/types/trading/trading';
 import { TradingContainer } from 'src/views/wallet/trading/common/TradingContainer';
 import { TradingFormLayout } from 'src/views/wallet/trading/common/TradingForm/TradingFormLayout';
 import { TradingLayout } from 'src/views/wallet/trading/common/TradingLayout/TradingLayout';
 
+import { TradingDisabled } from '../common/TradingDisabled';
+
 const TradingSellFormComponent = ({ selectedAccount }: UseTradingProps) => {
+    const { isSellDisabled } = useMessageSystemTrading();
+
     const tradingSellContextValues = useTradingSellForm({ selectedAccount });
 
+    if (isSellDisabled) {
+        return <TradingDisabled type="sell" />;
+    }
+
     return (
         <TradingLayout>
             <TradingFormContext.Provider value={tradingSellContextValues}>
+                <ContextMessage context={Context.tradingSell} />
                 <TradingFormLayout />
             </TradingFormContext.Provider>
         </TradingLayout>

suite-common/message-system/src/messageSystemTypes.ts

@@ -42,7 +42,6 @@ export const Feature = {
     entropyCheckMobile: 'security.entropyCheck.mobile',
     // FW update feature flag implemented only for mobile app
     firmwareUpdate: 'device.firmware.update',
-    // trading feature flags implemented for mobile app
     trading: {
         buy: 'trading.buy',
         sell: 'trading.sell',
@@ -67,7 +66,6 @@ export const Context = {
     coinjoin: 'accounts.coinjoin',
     ethStaking: 'accounts.eth.staking',
     solStaking: 'accounts.sol.staking',
-    // trading contexts are implemented for mobile app
     tradingBuy: 'trading.buy',
     tradingSell: 'trading.sell',
     tradingSwap: 'trading.swap',