feat(trading): update inputs

apps/trading/.env

@@ -3,16 +3,17 @@ NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_SENTRY_DSN=https://2ffce43721964aafa78277c50654ece4@o286262.ingest.sentry.io/6300613
-NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/stagnet1/vegawallet-stagnet1.toml
+NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/fairground/vegawallet-fairground.toml
-NX_VEGA_ENV=STAGNET1
+NX_VEGA_ENV=TESTNET
-NX_VEGA_EXPLORER_URL=https://explorer.stagnet1.vega.rocks
+NX_VEGA_EXPLORER_URL=https://explorer.fairground.wtf
 NX_VEGA_NETWORKS={\"MAINNET\":\"https://console.vega.xyz\",\"TESTNET\":\"https://console.fairground.wtf\",\"STAGNET1\":\"https://trading.stagnet1.vega.rocks\"}
-NX_VEGA_TOKEN_URL=https://governance.stagnet1.vega.rocks
+NX_VEGA_TOKEN_URL=https://governance.fairground.wtf
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
+NX_VEGA_CONSOLE_URL=https://console.fairground.wtf
 NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
 NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/en-GB/firefox/addon/vega-wallet-beta/
 NX_ORACLE_PROOFS_URL=https://raw.githubusercontent.com/vegaprotocol/well-known/main/__generated__/oracle-proofs.json
@@ -25,11 +26,10 @@ NX_ISOLATED_MARGIN=true
 NX_ICEBERG_ORDERS=true
 NX_METAMASK_SNAPS=true
 NX_REFERRALS=true
-# NX_DISABLE_CLOSE_POSITION=false
 NX_TEAM_COMPETITION=true
 
-NX_TENDERMINT_URL=https://be.vega.community
+NX_TENDERMINT_URL=https://tm.be.testnet.vega.xyz
-NX_TENDERMINT_WEBSOCKET_URL=wss://be.vega.community/websocket
+NX_TENDERMINT_WEBSOCKET_URL=wss://be.testnet.vega.xyz/websocket
 
 NX_CHARTING_LIBRARY_PATH=https://assets.vega.community/trading-view-bundle/v0.0.1/
 NX_CHARTING_LIBRARY_HASH=PDjWaqPFndDp+LCvqbKvntWriaqNzNpZ5i9R/BULzCg=

libs/deal-ticket/src/components/deal-ticket/deal-ticket-price-tp-sl.tsx

@@ -4,14 +4,17 @@ import type { OrderFormValues } from '../../hooks/use-form-values';
 import { toDecimal, useValidateAmount } from '@vegaprotocol/utils';
 import {
   TradingFormGroup,
-  TradingInput,
   TradingInputError,
   Tooltip,
+  FormGroup,
+  Input,
+  InputError,
+  Pill,
 } from '@vegaprotocol/ui-toolkit';
 import { useT } from '../../use-t';
 import { type Side } from '@vegaprotocol/types';
 
-export interface DealTicketSizeTakeProfitStopLossProps {
+export interface DealTicketPriceTakeProfitStopLossProps {
   control: Control<OrderFormValues>;
   market: Market;
   takeProfitError?: string;
@@ -20,18 +23,20 @@ export interface DealTicketSizeTakeProfitStopLossProps {
   takeProfit?: string;
   stopLoss?: string;
   side?: Side;
+  quoteName?: string;
 }
 
-export const DealTicketSizeTakeProfitStopLoss = ({
+export const DealTicketPriceTakeProfitStopLoss = ({
   control,
   market,
   takeProfitError,
   stopLossError,
+  quoteName,
   setPrice,
   takeProfit,
   stopLoss,
   side,
-}: DealTicketSizeTakeProfitStopLossProps) => {
+}: DealTicketPriceTakeProfitStopLossProps) => {
   const t = useT();
   const validateAmount = useValidateAmount();
   const priceStep = toDecimal(market?.decimalPlaces);
@@ -62,14 +67,12 @@ export const DealTicketSizeTakeProfitStopLoss = ({
 
   return (
     <div className="mb-2">
-      <div className="flex items-center gap-4">
+      <div className="flex flex-col gap-2">
         <div className="flex-1">
           <TradingFormGroup
             label={
               <Tooltip
-                description={
+                description={<div>{t('The price for take profit.')}</div>}
-                  <div>{t('The price at which you can take profit.')}</div>
-                }
               >
                 <span className="text-xs">{t('Take profit')}</span>
               </Tooltip>
@@ -81,34 +84,46 @@ export const DealTicketSizeTakeProfitStopLoss = ({
               name="takeProfit"
               control={control}
               rules={{
-                required: t('You need to provide a take profit value'),
+                required: t('You need provide a take profit price'),
                 min: {
                   value: priceStep,
-                  message: t('Take profit cannot be lower than {{value}}', {
+                  message: t(
-                    value: priceStep,
+                    'Take profit price cannot be lower than {{priceStep}}',
-                  }),
+                    {
+                      priceStep,
+                    }
+                  ),
                 },
                 validate: validateAmount(priceStep, 'takeProfit'),
               }}
-              render={({ field }) => (
+              render={({ field, fieldState }) => (
-                <TradingInput
+                <div className="mb-2">
-                  id="input-order-take-profit"
+                  <FormGroup
-                  className="w-full"
+                    labelFor="input-price-take-profit"
-                  type="number"
+                    label={''}
-                  step={priceStep}
+                    compact
-                  min={priceStep}
+                  >
-                  data-testid="order-take-profit"
+                    <Input
-                  onWheel={(e) => e.currentTarget.blur()}
+                      id="input-price-take-profit"
-                  {...field}
+                      appendElement={<Pill size="xs">{quoteName}</Pill>}
-                />
+                      className="w-full"
+                      type="number"
+                      step={priceStep}
+                      data-testid="order-price-take-profit"
+                      onWheel={(e) => e.currentTarget.blur()}
+                      {...field}
+                    />
+                  </FormGroup>
+                  {fieldState.error && (
+                    <InputError testId="deal-ticket-error-message-price-take-profit">
+                      {fieldState.error.message}
+                    </InputError>
+                  )}
+                </div>
               )}
             />
           </TradingFormGroup>
         </div>
-        <div className="flex-0 items-center">
-          <div className="flex"></div>
-          <div className="flex"></div>
-        </div>
         <div className="flex-1">
           <TradingFormGroup
             label={
@@ -123,26 +138,39 @@ export const DealTicketSizeTakeProfitStopLoss = ({
               name="stopLoss"
               control={control}
               rules={{
-                required: t('You need to provide a value for stop loss'),
+                required: t('You need provide a stop loss price'),
                 min: {
                   value: priceStep,
-                  message: t('Stop loss cannot be lower than {{value}}', {
+                  message: t('Price cannot be lower than {{priceStep}}', {
-                    value: priceStep,
+                    priceStep,
                   }),
                 },
                 validate: validateAmount(priceStep, 'stopLoss'),
               }}
-              render={({ field }) => (
+              render={({ field, fieldState }) => (
-                <TradingInput
+                <div className="mb-2">
-                  id="input-order-stop-loss"
+                  <FormGroup
-                  className="w-full"
+                    labelFor="input-price-stop-loss"
-                  type="number"
+                    label={''}
-                  step={priceStep}
+                    compact
-                  min={priceStep}
+                  >
-                  data-testid="order-stop-loss"
+                    <Input
-                  onWheel={(e) => e.currentTarget.blur()}
+                      id="input-price-stop-loss"
-                  {...field}
+                      appendElement={<Pill size="xs">{quoteName}</Pill>}
-                />
+                      className="w-full"
+                      type="number"
+                      step={priceStep}
+                      data-testid="order-price-stop-loss"
+                      onWheel={(e) => e.currentTarget.blur()}
+                      {...field}
+                    />
+                  </FormGroup>
+                  {fieldState.error && (
+                    <InputError testId="deal-ticket-error-message-price-stop-loss">
+                      {fieldState.error.message}
+                    </InputError>
+                  )}
+                </div>
               )}
             />
           </TradingFormGroup>

libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx

@@ -80,7 +80,7 @@ import { isNonPersistentOrder } from '../../utils/time-in-force-persistence';
 import { KeyValue } from './key-value';
 import { DocsLinks } from '@vegaprotocol/environment';
 import { useT } from '../../use-t';
-import { DealTicketSizeTakeProfitStopLoss } from './deal-ticket-size-tp-sl';
+import { DealTicketPriceTakeProfitStopLoss } from './deal-ticket-price-tp-sl';
 
 export const REDUCE_ONLY_TOOLTIP =
   '"Reduce only" will ensure that this order will not increase the size of an open position. When the order is matched, it will only trade enough volume to bring your open volume towards 0 but never change the direction of your position. If applied to a limit order that is not instantly filled, the order will be stopped.';
@@ -756,7 +756,7 @@ export const DealTicket = ({
             />
           )}
           {tpSl && (
-            <DealTicketSizeTakeProfitStopLoss
+            <DealTicketPriceTakeProfitStopLoss
               market={market}
               takeProfitError={errors.takeProfit?.message}
               stopLossError={errors.stopLoss?.message}
@@ -765,6 +765,7 @@ export const DealTicket = ({
               takeProfit={takeProfit}
               stopLoss={stopLoss}
               side={side}
+              quoteName={quoteName}
             />
           )}
         </>

libs/deal-ticket/src/utils/map-form-values-to-submission.ts

@@ -181,7 +181,7 @@ export const mapFormValuesToTakeProfitAndStopLoss = (
     mapFormValuesToStopOrdersSubmission(
       {
         ...formValues,
-        price: formValues.takeProfit,
+        ocoPrice: formValues.takeProfit,
         triggerDirection:
           formValues.side === Schema.Side.SIDE_SELL
             ? Schema.StopOrderTriggerDirection.TRIGGER_DIRECTION_FALLS_BELOW
@@ -203,7 +203,7 @@ export const mapFormValuesToTakeProfitAndStopLoss = (
     mapFormValuesToStopOrdersSubmission(
       {
         ...formValues,
-        price: formValues.stopLoss,
+        ocoPrice: formValues.stopLoss,
         triggerDirection:
           formValues.side === Schema.Side.SIDE_BUY
             ? Schema.StopOrderTriggerDirection.TRIGGER_DIRECTION_FALLS_BELOW