feat(trading): otc market banner

packages/suite/src/support/messages.ts

@@ -1420,6 +1420,18 @@ export default defineMessages({
         defaultMessage: 'View details',
         id: 'TR_TRADING_VIEW_DETAILS',
     },
+    TR_TRADING_OTC_INFO: {
+        defaultMessage: 'For purchases over USD (EUR) 50,000, consider our OTC partner:',
+        id: 'TR_TRADING_OTC_INFO',
+    },
+    TR_TRADING_OTC_LINK_BUY: {
+        defaultMessage: 'Buy with Mercuryo',
+        id: 'TR_TRADING_OTC_LINK',
+    },
+    TR_TRADING_OTC_LINK_SELL: {
+        defaultMessage: 'Sell with Mercuryo',
+        id: 'TR_TRADING_OTC_LINK',
+    },
     TR_ADDRESS_MODAL_CLIPBOARD: {
         defaultMessage: 'Copy address',
         id: 'TR_ADDRESS_MODAL_CLIPBOARD',

packages/suite/src/views/wallet/trading/common/TradingForm/TradingFormOffer.tsx

@@ -28,6 +28,7 @@ import {
 import { TradingFormOfferCryptoAmount } from 'src/views/wallet/trading/common/TradingForm/TradingFormOfferCryptoAmount';
 import { TradingFormOfferFiatAmount } from 'src/views/wallet/trading/common/TradingForm/TradingFormOfferFiatAmount';
 import { TradingFormOfferItem } from 'src/views/wallet/trading/common/TradingForm/TradingFormOfferItem';
+import { TradingFormOfferOTC } from 'src/views/wallet/trading/common/TradingForm/TradingFormOfferOTC';
 import { TradingFormOffersSwitcher } from 'src/views/wallet/trading/common/TradingForm/TradingFormOffersSwitcher';
 
 const getSelectedQuote = (
@@ -158,6 +159,7 @@ export const TradingFormOffer = () => {
             >
                 <Translation id={tradingGetSectionActionLabel(type)} />
             </Button>
+            {(type === 'buy' || type === 'sell') && <TradingFormOfferOTC />}
         </Column>
     );
 };

packages/suite/src/views/wallet/trading/common/TradingForm/TradingFormOfferOTC.tsx

@@ -0,0 +1,69 @@
+import { TradingTradeBuySellType, invityAPI } from '@suite-common/trading';
+import { Banner, Text } from '@trezor/components';
+import { spacings } from '@trezor/theme';
+
+import { Translation, TrezorLink } from 'src/components/suite';
+import { useTradingFormContext } from 'src/hooks/wallet/trading/form/useTradingCommonForm';
+import { isTradingBuyContext } from 'src/utils/wallet/trading/tradingTypingUtils';
+
+export const TradingFormOfferOTC = () => {
+    const context = useTradingFormContext<TradingTradeBuySellType>();
+    const { amountInCrypto } = context.getValues();
+    const fiatAmount = isTradingBuyContext(context)
+        ? context.getValues().fiatInput
+        : context.getValues().outputs[0].fiat;
+    const currencySelect = isTradingBuyContext(context)
+        ? context.getValues().currencySelect.value
+        : context.getValues().outputs[0].currency.value;
+
+    // constants will be refactor to be more dynamic in the future
+    const ALLOWED_FIAT_CURRENCIES = ['usd', 'eur'];
+    const FIAT_AMOUNT_ALLOWANCE = '50001';
+
+    const isCurrencyAllowed = ALLOWED_FIAT_CURRENCIES.includes(currencySelect);
+
+    if (
+        amountInCrypto ||
+        !isCurrencyAllowed ||
+        !fiatAmount ||
+        Number(fiatAmount) < Number(FIAT_AMOUNT_ALLOWANCE)
+    ) {
+        return null;
+    }
+
+    const handleClick = async () => {
+        const otcData = await invityAPI.getOTCData();
+
+        if (!otcData) return;
+
+        const apiUrl = new URL(otcData.apiUrl);
+        const params = new URLSearchParams({
+            widget_id: otcData.idWidget,
+            otc_id: otcData.idOtcUser,
+            fiat_amount: fiatAmount,
+            fiat_currency: currencySelect,
+            type: context.type,
+        });
+
+        apiUrl.search = params.toString();
+
+        window.open(apiUrl, '_blank');
+    };
+
+    return (
+        <Banner variant="info">
+            <Text margin={{ bottom: spacings.xxs }}>
+                <Translation id="TR_TRADING_OTC_INFO" />{' '}
+                <TrezorLink onClick={handleClick} href="" target="_blank" typographyStyle="hint">
+                    <Translation
+                        id={
+                            context.type === 'buy'
+                                ? 'TR_TRADING_OTC_LINK_BUY'
+                                : 'TR_TRADING_OTC_LINK_SELL'
+                        }
+                    />
+                </TrezorLink>
+            </Text>
+        </Banner>
+    );
+};

suite-common/trading/src/invityAPI.ts

@@ -27,6 +27,7 @@ import type {
 import type {
     InvityServerEnvironment,
     InvityServers,
+    TradingOTC,
     TradingPaymentMethodType,
     TradingTradeType,
     TradingType,
@@ -84,6 +85,9 @@ class InvityAPI {
     private readonly SELL_FIAT_CONFIRM = '/api/v3/sell/fiat/confirm';
     private readonly SELL_FIAT_WATCH_TRADE = '/api/v3/sell/fiat/watch/{{counter}}';
 
+    // otc service
+    private readonly OTC_INFO = '/api/v1/otc';
+
     private static accountDescriptor: string;
     private static apiKey: string;
 
@@ -433,6 +437,18 @@ class InvityAPI {
             return { error: error.toString() };
         }
     };
+
+    getOTCData = async (): Promise<TradingOTC | undefined> => {
+        try {
+            const response = await this.request(this.OTC_INFO, {}, 'GET');
+
+            if (response) {
+                return response;
+            }
+        } catch (error) {
+            console.error('[getInfo]', error);
+        }
+    };
 }
 
 export const invityAPI = new InvityAPI();

suite-common/trading/src/types.ts

@@ -86,3 +86,9 @@ export type TradingTransaction =
     | TradingTransactionBuy
     | TradingTransactionSell
     | TradingTransactionExchange;
+
+export type TradingOTC = {
+    idWidget: string;
+    idOtcUser: string;
+    apiUrl: string;
+};