feat(trading): update inputs
This commit is contained in:
Madalina Raicu
parent
80bdd79112
commit
cf18116ee9
@ -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_ENV=STAGNET1
|
||||
NX_VEGA_EXPLORER_URL=https://explorer.stagnet1.vega.rocks
|
||||
NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/fairground/vegawallet-fairground.toml
|
||||
NX_VEGA_ENV=TESTNET
|
||||
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_WEBSOCKET_URL=wss://be.vega.community/websocket
|
||||
NX_TENDERMINT_URL=https://tm.be.testnet.vega.xyz
|
||||
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=
|
||||
|
||||
@ -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={
|
||||
<div>{t('The price at which you can take profit.')}</div>
|
||||
}
|
||||
description={<div>{t('The price for 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}}', {
|
||||
value: priceStep,
|
||||
}),
|
||||
message: t(
|
||||
'Take profit price cannot be lower than {{priceStep}}',
|
||||
{
|
||||
priceStep,
|
||||
}
|
||||
),
|
||||
},
|
||||
validate: validateAmount(priceStep, 'takeProfit'),
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<TradingInput
|
||||
id="input-order-take-profit"
|
||||
className="w-full"
|
||||
type="number"
|
||||
step={priceStep}
|
||||
min={priceStep}
|
||||
data-testid="order-take-profit"
|
||||
onWheel={(e) => e.currentTarget.blur()}
|
||||
{...field}
|
||||
/>
|
||||
render={({ field, fieldState }) => (
|
||||
<div className="mb-2">
|
||||
<FormGroup
|
||||
labelFor="input-price-take-profit"
|
||||
label={''}
|
||||
compact
|
||||
>
|
||||
<Input
|
||||
id="input-price-take-profit"
|
||||
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}}', {
|
||||
value: priceStep,
|
||||
message: t('Price cannot be lower than {{priceStep}}', {
|
||||
priceStep,
|
||||
}),
|
||||
},
|
||||
validate: validateAmount(priceStep, 'stopLoss'),
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<TradingInput
|
||||
id="input-order-stop-loss"
|
||||
className="w-full"
|
||||
type="number"
|
||||
step={priceStep}
|
||||
min={priceStep}
|
||||
data-testid="order-stop-loss"
|
||||
onWheel={(e) => e.currentTarget.blur()}
|
||||
{...field}
|
||||
/>
|
||||
render={({ field, fieldState }) => (
|
||||
<div className="mb-2">
|
||||
<FormGroup
|
||||
labelFor="input-price-stop-loss"
|
||||
label={''}
|
||||
compact
|
||||
>
|
||||
<Input
|
||||
id="input-price-stop-loss"
|
||||
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>
|
||||
@ -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}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user