Skip to content

Commit c4ff304

Browse files
hubert-de-lalyehubert-de-lalye
authored
Merge pull request #1582 from gmx-io/facelift-3
Facelift part 3 field order refactoring
2 parents 0495d30 + e5d0859 commit c4ff304

File tree

14 files changed

+118
-290
lines changed

14 files changed

+118
-290
lines changed

‎src/components/Synthetics/PositionSeller/PositionSeller.tsx‎

Lines changed: 64 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,9 @@ import {
3636
calculateDisplayDecimals,
3737
formatAmount,
3838
formatAmountFree,
39-
formatTokenAmountWithUsd,
39+
formatBalanceAmountWithUsd,
40+
formatDeltaUsd,
41+
formatPercentage,
4042
formatUsd,
4143
parseValue,
4244
} from "lib/numbers";
@@ -82,11 +84,11 @@ import {
8284
} from "lib/metrics/utils";
8385
import { useHasOutdatedUi } from "lib/useHasOutdatedUi";
8486

85-
import { SyntheticsInfoRow } from "../SyntheticsInfoRow";
86-
import "./PositionSeller.scss";
87+
import ExternalLink from "components/ExternalLink/ExternalLink";
8788
import ToggleSwitch from "components/ToggleSwitch/ToggleSwitch";
8889
import TooltipWithPortal from "components/Tooltip/TooltipWithPortal";
89-
import ExternalLink from "components/ExternalLink/ExternalLink";
90+
import { SyntheticsInfoRow } from "../SyntheticsInfoRow";
91+
import "./PositionSeller.scss";
9092

9193
export type Props = {
9294
setPendingTxns: (txns: any) => void;
@@ -493,12 +495,17 @@ export function PositionSeller(p: Props) {
493495
<SyntheticsInfoRow
494496
className="SwapBox-info-row"
495497
label={t`Receive`}
496-
value={formatTokenAmountWithUsd(
497-
decreaseAmounts?.receiveTokenAmount,
498-
decreaseAmounts?.receiveUsd,
499-
position?.collateralToken?.symbol,
500-
position?.collateralToken?.decimals
501-
)}
498+
value={
499+
decreaseAmounts?.receiveTokenAmount !== undefined && position !== undefined
500+
? formatBalanceAmountWithUsd(
501+
decreaseAmounts.receiveTokenAmount,
502+
decreaseAmounts.receiveUsd,
503+
position.collateralToken.decimals,
504+
position.collateralToken.symbol,
505+
true
506+
)
507+
: "..."
508+
}
502509
/>
503510
) : (
504511
<SyntheticsInfoRow
@@ -520,15 +527,15 @@ export function PositionSeller(p: Props) {
520527
showTokenImgInDropdown={true}
521528
selectedTokenLabel={
522529
<span className="PositionSelector-selected-receive-token">
523-
{formatTokenAmountWithUsd(
524-
receiveTokenAmount,
525-
receiveUsd,
526-
receiveToken?.symbol,
527-
receiveToken?.decimals,
528-
{
529-
fallbackToZero: true,
530-
}
531-
)}
530+
{receiveTokenAmount !== undefined && receiveUsd !== undefined
531+
? formatBalanceAmountWithUsd(
532+
receiveTokenAmount,
533+
receiveUsd,
534+
receiveToken.decimals,
535+
receiveToken.symbol,
536+
true
537+
)
538+
: "..."}
532539
</span>
533540
}
534541
extendedSortSequence={availableTokensOptions?.sortedLongAndShortTokens}
@@ -538,15 +545,6 @@ export function PositionSeller(p: Props) {
538545
/>
539546
);
540547

541-
let formattedTriggerPrice = "-";
542-
543-
if (decreaseAmounts && decreaseAmounts.triggerPrice !== undefined && decreaseAmounts.triggerPrice !== 0n) {
544-
formattedTriggerPrice = `${decreaseAmounts.triggerThresholdType || ""} ${formatUsd(decreaseAmounts.triggerPrice, {
545-
displayDecimals: marketDecimals ?? toToken?.priceDecimals,
546-
visualMultiplier: toToken?.visualMultiplier,
547-
})}`;
548-
}
549-
550548
const { warning: maxAutoCancelOrdersWarning } = useMaxAutoCancelOrdersState({
551549
positionKey: position?.key,
552550
isCreatingNewAutoCancel: isTrigger,
@@ -576,6 +574,42 @@ export function PositionSeller(p: Props) {
576574
keepLeverageText
577575
);
578576

577+
const pnlRow =
578+
position &&
579+
(isTrigger ? (
580+
<SyntheticsInfoRow
581+
label={t`PnL`}
582+
value={
583+
<ValueTransition
584+
from={
585+
<>
586+
{formatDeltaUsd(decreaseAmounts?.estimatedPnl)} (
587+
{formatPercentage(decreaseAmounts?.estimatedPnlPercentage, { signed: true })})
588+
</>
589+
}
590+
to={
591+
decreaseAmounts?.sizeDeltaUsd ? (
592+
<>
593+
{formatDeltaUsd(nextPositionValues?.nextPnl)} (
594+
{formatPercentage(nextPositionValues?.nextPnlPercentage, { signed: true })})
595+
</>
596+
) : undefined
597+
}
598+
/>
599+
}
600+
/>
601+
) : (
602+
<SyntheticsInfoRow
603+
label={t`PnL`}
604+
value={
605+
<ValueTransition
606+
from={formatDeltaUsd(position.pnl, position.pnlPercentage)}
607+
to={formatDeltaUsd(nextPositionValues?.nextPnl, nextPositionValues?.nextPnlPercentage)}
608+
/>
609+
}
610+
/>
611+
));
612+
579613
return (
580614
<div className="text-body-medium">
581615
<Modal
@@ -671,7 +705,7 @@ export function PositionSeller(p: Props) {
671705
textClassName="text-slate-100"
672706
isChecked={leverageCheckboxDisabledByCollateral ? false : keepLeverageChecked}
673707
setIsChecked={setKeepLeverage}
674-
disabled={leverageCheckboxDisabledByCollateral ?? decreaseAmounts?.isFullClose}
708+
disabled={leverageCheckboxDisabledByCollateral || decreaseAmounts?.isFullClose}
675709
>
676710
{keepLeverageTextElem}
677711
</ToggleSwitch>
@@ -690,8 +724,8 @@ export function PositionSeller(p: Props) {
690724

691725
<div className="h-1 bg-stroke-primary" />
692726
{receiveTokenRow}
693-
{isTrigger && <SyntheticsInfoRow label={t`Trigger Price`} value={formattedTriggerPrice} />}
694727
{liqPriceRow}
728+
{pnlRow}
695729

696730
<PositionSellerAdvancedRows triggerPriceInputValue={triggerPriceInputValue} />
697731
</div>

‎src/components/Synthetics/PositionSeller/PositionSellerAdvancedDisplayRows.tsx‎

Lines changed: 1 addition & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { usePositionSeller } from "context/SyntheticsStateContext/hooks/position
77
import { OrderType } from "domain/synthetics/orders";
88
import { formatLeverage } from "domain/synthetics/positions";
99
import { OrderOption } from "domain/synthetics/trade/usePositionSellerState";
10-
import { formatDeltaUsd, formatPercentage, formatUsd } from "lib/numbers";
10+
import { formatUsd } from "lib/numbers";
1111
import { AcceptablePriceImpactInputRow } from "../AcceptablePriceImpactInputRow/AcceptablePriceImpactInputRow";
1212
import { AllowedSlippageRow } from "./rows/AllowedSlippageRow";
1313

@@ -75,42 +75,6 @@ export function PositionSellerAdvancedRows({ triggerPriceInputValue }: Props) {
7575
/>
7676
);
7777

78-
const pnlRow =
79-
position &&
80-
(isTrigger ? (
81-
<SyntheticsInfoRow
82-
label={t`PnL`}
83-
value={
84-
<ValueTransition
85-
from={
86-
<>
87-
{formatDeltaUsd(decreaseAmounts?.estimatedPnl)} (
88-
{formatPercentage(decreaseAmounts?.estimatedPnlPercentage, { signed: true })})
89-
</>
90-
}
91-
to={
92-
decreaseAmounts?.sizeDeltaUsd ? (
93-
<>
94-
{formatDeltaUsd(nextPositionValues?.nextPnl)} (
95-
{formatPercentage(nextPositionValues?.nextPnlPercentage, { signed: true })})
96-
</>
97-
) : undefined
98-
}
99-
/>
100-
}
101-
/>
102-
) : (
103-
<SyntheticsInfoRow
104-
label={t`PnL`}
105-
value={
106-
<ValueTransition
107-
from={formatDeltaUsd(position.pnl, position.pnlPercentage)}
108-
to={formatDeltaUsd(nextPositionValues?.nextPnl, nextPositionValues?.nextPnlPercentage)}
109-
/>
110-
}
111-
/>
112-
));
113-
11478
let leverageValue: React.ReactNode = "-";
11579

11680
if (decreaseAmounts?.isFullClose) {
@@ -180,7 +144,6 @@ export function PositionSellerAdvancedRows({ triggerPriceInputValue }: Props) {
180144
<SyntheticsInfoRow label={t`Leverage`} value={leverageValue} />
181145

182146
{sizeRow}
183-
{pnlRow}
184147

185148
<SyntheticsInfoRow
186149
label={

‎src/components/Synthetics/TradeBox/TradeBox.tsx‎

Lines changed: 24 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import {
1616
selectTradeboxChooseSuitableMarket,
1717
selectTradeboxDecreasePositionAmounts,
1818
selectTradeboxExecutionFee,
19-
selectTradeboxExecutionPrice,
2019
selectTradeboxFees,
2120
selectTradeboxIncreasePositionAmounts,
2221
selectTradeboxKeepLeverage,
@@ -49,6 +48,7 @@ import {
4948
formatAmountFree,
5049
formatBalanceAmount,
5150
formatDeltaUsd,
51+
formatPercentage,
5252
formatTokenAmountWithUsd,
5353
formatUsd,
5454
formatUsdPrice,
@@ -81,17 +81,14 @@ import TokenSelector from "components/TokenSelector/TokenSelector";
8181
import Tooltip from "components/Tooltip/Tooltip";
8282
import { ValueTransition } from "components/ValueTransition/ValueTransition";
8383

84-
import { ExecutionPriceRow } from "../ExecutionPriceRow";
8584
import { HighPriceImpactOrFeesWarningCard } from "../HighPriceImpactOrFeesWarningCard/HighPriceImpactOrFeesWarningCard";
8685
import { MarketPoolSelectorRow } from "./MarketPoolSelectorRow";
8786
import { OneClickTradingInfo } from "./OneClickTradingInfo";
8887
import { TradeBoxAdvancedGroups } from "./TradeBoxRows/AdvancedDisplayRows";
8988
import { CollateralSelectorRow } from "./TradeBoxRows/CollateralSelectorRow";
9089
import { LimitAndTPSLGroup } from "./TradeBoxRows/LimitAndTPSLRows";
91-
import { LimitPriceRow } from "./TradeBoxRows/LimitPriceRow";
9290
import { MinReceiveRow } from "./TradeBoxRows/MinReceiveRow";
9391
import { PriceImpactFeesRow } from "./TradeBoxRows/PriceImpactFeesRow";
94-
9592
import { tradeModeLabels, tradeTypeLabels } from "./tradeboxConstants";
9693

9794
import SettingsIcon24 from "img/ic_settings_24.svg?react";
@@ -183,7 +180,6 @@ export function TradeBox() {
183180

184181
const leverageSliderMarks = useSelector(selectTradeboxLeverageSliderMarks);
185182
const maxLeverage = useSelector(selectTradeboxMaxLeverage);
186-
const executionPrice = useSelector(selectTradeboxExecutionPrice);
187183

188184
const maxAllowedLeverage = maxLeverage / 2;
189185

@@ -731,36 +727,6 @@ export function TradeBox() {
731727
);
732728
}
733729

734-
function renderTriggerOrderInfo() {
735-
let formattedTriggerPrice = "-";
736-
737-
if (decreaseAmounts && decreaseAmounts.triggerPrice !== undefined && decreaseAmounts.triggerPrice !== 0n) {
738-
formattedTriggerPrice = `${decreaseAmounts.triggerThresholdType || ""} ${formatUsdPrice(
739-
decreaseAmounts.triggerPrice,
740-
{
741-
visualMultiplier: toToken?.visualMultiplier,
742-
}
743-
)}`;
744-
}
745-
746-
return (
747-
<>
748-
<SyntheticsInfoRow label={t`Trigger Price`} value={formattedTriggerPrice} />
749-
750-
{!isTrigger && (
751-
<ExecutionPriceRow
752-
tradeFlags={tradeFlags}
753-
fees={fees}
754-
executionPrice={executionPrice ?? undefined}
755-
triggerOrderType={decreaseAmounts?.triggerOrderType}
756-
acceptablePrice={decreaseAmounts?.acceptablePrice}
757-
visualMultiplier={toToken?.visualMultiplier}
758-
/>
759-
)}
760-
</>
761-
);
762-
}
763-
764730
useKey(
765731
"Enter",
766732
() => {
@@ -958,7 +924,6 @@ export function TradeBox() {
958924
<div>{button}</div>
959925
<div className="h-1 bg-stroke-primary" />
960926
{isSwap && <MinReceiveRow allowedSlippage={allowedSlippage} />}
961-
{!(isSwap && isLimit) && <LimitPriceRow />}
962927
{isTrigger && selectedPosition && decreaseAmounts?.receiveUsd !== undefined && (
963928
<SyntheticsInfoRow
964929
label={t`Receive`}
@@ -971,7 +936,29 @@ export function TradeBox() {
971936
/>
972937
)}
973938

974-
{isTrigger && renderTriggerOrderInfo()}
939+
{isTrigger && (
940+
<SyntheticsInfoRow
941+
label={t`PnL`}
942+
value={
943+
<ValueTransition
944+
from={
945+
<>
946+
{formatDeltaUsd(decreaseAmounts?.estimatedPnl)} (
947+
{formatPercentage(decreaseAmounts?.estimatedPnlPercentage, { signed: true })})
948+
</>
949+
}
950+
to={
951+
decreaseAmounts?.sizeDeltaUsd && decreaseAmounts.sizeDeltaUsd > 0 ? (
952+
<>
953+
{formatDeltaUsd(nextPositionValues?.nextPnl)} (
954+
{formatPercentage(nextPositionValues?.nextPnlPercentage, { signed: true })})
955+
</>
956+
) : undefined
957+
}
958+
/>
959+
}
960+
/>
961+
)}
975962
{!(isTrigger && !selectedPosition) && !isSwap && (
976963
<SyntheticsInfoRow
977964
label={t`Liquidation Price`}

‎src/components/Synthetics/TradeBox/TradeBoxRows/AdvancedDisplayRows.tsx‎

Lines changed: 2 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import { selectTradeboxLiquidityInfo } from "context/SyntheticsStateContext/sele
2828
import { useSelector } from "context/SyntheticsStateContext/utils";
2929
import { OrderType } from "domain/synthetics/orders";
3030
import { formatLeverage } from "domain/synthetics/positions";
31-
import { formatDeltaUsd, formatPercentage, formatUsd } from "lib/numbers";
31+
import { formatUsd } from "lib/numbers";
3232
import { isStopIncreaseOrderType } from "sdk/utils/orders";
3333

3434
import { ExecutionPriceRow } from "components/Synthetics/ExecutionPriceRow";
@@ -40,7 +40,6 @@ import { AllowedSlippageRow } from "./AllowedSlippageRow";
4040
import { AvailableLiquidityRow } from "./AvailableLiquidityRow";
4141
import { CollateralSpreadRow } from "./CollateralSpreadRow";
4242
import { EntryPriceRow } from "./EntryPriceRow";
43-
import { LimitPriceRow } from "./LimitPriceRow";
4443
import { SwapSpreadRow } from "./SwapSpreadRow";
4544

4645
function LeverageInfoRows() {
@@ -95,8 +94,7 @@ function LeverageInfoRows() {
9594
function ExistingPositionInfoRows() {
9695
const selectedPosition = useSelector(selectTradeboxSelectedPosition);
9796
const nextPositionValues = useSelector(selectTradeboxNextPositionValues);
98-
const { isSwap, isIncrease } = useSelector(selectTradeboxTradeFlags);
99-
const decreaseAmounts = useSelector(selectTradeboxDecreasePositionAmounts);
97+
const { isSwap } = useSelector(selectTradeboxTradeFlags);
10098

10199
if (!selectedPosition || isSwap) {
102100
return null;
@@ -115,29 +113,6 @@ function ExistingPositionInfoRows() {
115113
}
116114
/>
117115
)}
118-
{!isIncrease && (
119-
<SyntheticsInfoRow
120-
label={t`PnL`}
121-
value={
122-
<ValueTransition
123-
from={
124-
<>
125-
{formatDeltaUsd(decreaseAmounts?.estimatedPnl)} (
126-
{formatPercentage(decreaseAmounts?.estimatedPnlPercentage, { signed: true })})
127-
</>
128-
}
129-
to={
130-
decreaseAmounts?.sizeDeltaUsd && decreaseAmounts.sizeDeltaUsd > 0 ? (
131-
<>
132-
{formatDeltaUsd(nextPositionValues?.nextPnl)} (
133-
{formatPercentage(nextPositionValues?.nextPnlPercentage, { signed: true })})
134-
</>
135-
) : undefined
136-
}
137-
/>
138-
}
139-
/>
140-
)}
141116
<SyntheticsInfoRow
142117
label={t`Collateral (${selectedPosition?.collateralToken?.symbol})`}
143118
value={
@@ -290,7 +265,6 @@ export function TradeBoxAdvancedGroups() {
290265

291266
{/* only when isSwap */}
292267
{isSwap && <SwapSpreadRow />}
293-
{isSwap && isLimit && <LimitPriceRow />}
294268
{/* only when isLimit */}
295269
{isLimit && <AvailableLiquidityRow />}
296270
{/* only when isMarket and not a swap */}

0 commit comments

Comments
 (0)