Skip to content

Commit

Permalink
refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
onemicky committed Apr 11, 2024
1 parent 38591a2 commit e576a1a
Show file tree
Hide file tree
Showing 22 changed files with 1,051 additions and 875 deletions.
77 changes: 26 additions & 51 deletions src/components/Synthetics/ConfirmationBox/ConfirmationBox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ import {
createDecreaseOrderTxn,
createIncreaseOrderTxn,
createSwapOrderTxn,
isOrderForPosition,
isTriggerDecreaseOrderType,
} from "domain/synthetics/orders";
import { cancelOrdersTxn } from "domain/synthetics/orders/cancelOrdersTxn";
Expand All @@ -40,7 +39,6 @@ import {
formatAcceptablePrice,
formatLeverage,
formatLiquidationPrice,
getPositionKey,
getTriggerNameByOrderType,
} from "domain/synthetics/positions";
import {
Expand All @@ -66,14 +64,15 @@ import { AlertInfo } from "components/AlertInfo/AlertInfo";
import { SubaccountNavigationButton } from "components/SubaccountNavigationButton/SubaccountNavigationButton";
import { useSettings } from "context/SettingsContext/SettingsContextProvider";
import { useSubaccount, useSubaccountCancelOrdersDetailsMessage } from "context/SubaccountContext/SubaccountContext";
import { useOrdersInfoData, useTokensData } from "context/SyntheticsStateContext/hooks/globalsHooks";
import useSLTPEntries, {
SLTPEntryValid,
LimEntryValid,
SLTPEntry,
LimEntry,
SLTPInfo,
} from "domain/synthetics/orders/useSLTPEntries";
import { useTokensData } from "context/SyntheticsStateContext/hooks/globalsHooks";
import {
useSidecarOrders,
SidecarOrderEntryGroup,
SidecarSlTpOrderEntryValid,
SidecarLimitOrderEntryValid,
SidecarLimitOrderEntry,
SidecarSlTpOrderEntry,
} from "domain/synthetics/sidecarOrders/useSidecarOrders";
import { useHighExecutionFeeConsent } from "domain/synthetics/trade/useHighExecutionFeeConsent";
import { usePriceImpactWarningState } from "domain/synthetics/trade/usePriceImpactWarningState";
import { helperToast } from "lib/helperToast";
Expand Down Expand Up @@ -103,6 +102,7 @@ import { AllowedSlippageRow } from "./rows/AllowedSlippageRow";
import { useTradeboxPoolWarnings } from "../TradeboxPoolWarnings/TradeboxPoolWarnings";

import { selectGasLimits, selectGasPrice } from "context/SyntheticsStateContext/selectors/globalSelectors";
import { makeSelectOrdersByPositionKey } from "context/SyntheticsStateContext/selectors/orderSelectors";
import {
selectTradeboxAvailableMarketsOptions,
selectTradeboxCollateralToken,
Expand All @@ -119,8 +119,7 @@ import {
selectTradeboxLiquidity,
selectTradeboxMarkPrice,
selectTradeboxMarketInfo,
selectTradeboxNextPositionValuesForDecrease,
selectTradeboxNextPositionValuesForIncrease,
selectTradeboxNextPositionValues,
selectTradeboxSelectedPosition,
selectTradeboxSelectedTriggerAcceptablePriceImpactBps,
selectTradeboxSetKeepLeverage,
Expand All @@ -131,6 +130,7 @@ import {
selectTradeboxTradeFlags,
selectTradeboxTradeRatios,
selectTradeboxTriggerPrice,
selectTradeboxSelectedPositionKey,
} from "context/SyntheticsStateContext/selectors/tradeboxSelectors";
import { useSelector } from "context/SyntheticsStateContext/utils";
import "./ConfirmationBox.scss";
Expand All @@ -146,7 +146,6 @@ export type Props = {
export function ConfirmationBox(p: Props) {
const { error, onClose, onSubmitted, setPendingTxns } = p;
const tokensData = useTokensData();
const ordersData = useOrdersInfoData();

const setSelectedTriggerAcceptablePriceImpactBps = useSelector(selectTradeboxSetSelectedAcceptablePriceImpactBps);
const selectedTriggerAcceptablePriceImpactBps = useSelector(selectTradeboxSelectedTriggerAcceptablePriceImpactBps);
Expand All @@ -166,8 +165,7 @@ export function ConfirmationBox(p: Props) {
const swapAmounts = useSelector(selectTradeboxSwapAmounts);
const increaseAmounts = useSelector(selectTradeboxIncreasePositionAmounts);
const decreaseAmounts = useSelector(selectTradeboxDecreasePositionAmounts);
const nextPositionValuesForIncrease = useSelector(selectTradeboxNextPositionValuesForIncrease);
const nextPositionValuesForDecrease = useSelector(selectTradeboxNextPositionValuesForDecrease);
const nextPositionValues = useSelector(selectTradeboxNextPositionValues);
const executionFee = useSelector(selectTradeboxExecutionFee);
const tradeFlags = useSelector(selectTradeboxTradeFlags);
const triggerPrice = useSelector(selectTradeboxTriggerPrice);
Expand All @@ -181,10 +179,6 @@ export function ConfirmationBox(p: Props) {
executionFee?.feeUsd
);

const nextPositionValues = useMemo(() => {
return tradeFlags.isIncrease ? nextPositionValuesForIncrease : nextPositionValuesForDecrease;
}, [nextPositionValuesForDecrease, nextPositionValuesForIncrease, tradeFlags.isIncrease]);

const fromToken = getByKey(tokensData, fromTokenAddress);
const toToken = getByKey(tokensData, toTokenAddress);

Expand Down Expand Up @@ -232,33 +226,10 @@ export function ConfirmationBox(p: Props) {
payAmount &&
getNeedTokenApprove(tokensAllowanceData, fromToken.address, payAmount);

const positionKey = useMemo(() => {
if (!account || !marketInfo || !collateralToken) {
return undefined;
}

return getPositionKey(account, marketInfo.marketTokenAddress, collateralToken.address, isLong);
}, [account, collateralToken, isLong, marketInfo]);
const positionKey = useSelector(selectTradeboxSelectedPositionKey);
const positionOrders = useSelector(makeSelectOrdersByPositionKey(positionKey));

const positionOrders = useMemo(() => {
if (!positionKey || !ordersData) {
return [];
}

return Object.values(ordersData).filter((order) => isOrderForPosition(order, positionKey)) as PositionOrderInfo[];
}, [ordersData, positionKey]);

const { stopLoss, takeProfit, limit } = useSLTPEntries({
marketInfo,
tradeFlags,
fromToken,
collateralToken,
increaseAmounts,
triggerPrice,
positionOrders,
nextPositionValues,
existingPosition,
});
const { stopLoss, takeProfit, limit } = useSidecarOrders();

const sltpEntries = useMemo(
() => [...(stopLoss?.entries || []), ...(takeProfit?.entries || []), ...(limit?.entries || [])],
Expand All @@ -268,13 +239,17 @@ export function ConfirmationBox(p: Props) {
const { cancelSltpEntries, createSltpEntries, updateSltpEntries } = useMemo(() => {
const [cancelSltpEntries, createSltpEntries, updateSltpEntries] = sltpEntries.reduce(
([cancel, create, update], e) => {
if (e.txnType === "cancel") cancel.push(e as SLTPEntryValid | LimEntryValid);
if (e.txnType === "create" && !!e.decreaseAmounts) create.push(e as SLTPEntryValid);
if (e.txnType === "cancel") cancel.push(e as SidecarSlTpOrderEntryValid | SidecarLimitOrderEntryValid);
if (e.txnType === "create" && !!e.decreaseAmounts) create.push(e as SidecarSlTpOrderEntryValid);
if (e.txnType === "update" && (!!e.decreaseAmounts || !!e.increaseAmounts))
update.push(e as SLTPEntryValid | LimEntryValid);
update.push(e as SidecarSlTpOrderEntryValid | SidecarLimitOrderEntryValid);
return [cancel, create, update];
},
[[], [], []] as [(SLTPEntryValid | LimEntryValid)[], SLTPEntryValid[], (SLTPEntryValid | LimEntryValid)[]]
[[], [], []] as [
(SidecarSlTpOrderEntryValid | SidecarLimitOrderEntryValid)[],
SidecarSlTpOrderEntryValid[],
(SidecarSlTpOrderEntryValid | SidecarLimitOrderEntryValid)[]
]
);

return { cancelSltpEntries, createSltpEntries, updateSltpEntries };
Expand All @@ -292,7 +267,7 @@ export function ConfirmationBox(p: Props) {
);

const getExecutionFeeAmountForEntry = useCallback(
(entry: SLTPEntry | LimEntry) => {
(entry: SidecarSlTpOrderEntry | SidecarLimitOrderEntry) => {
if (!entry.txnType || entry.txnType === "cancel") return undefined;
const securedExecutionFee = entry.order?.executionFee || BigNumber.from(0);

Expand Down Expand Up @@ -1101,7 +1076,7 @@ export function ConfirmationBox(p: Props) {
const isStopLoss = type === "stopLoss";
const isLimit = type === "limit";

const entriesInfo: SLTPInfo = {
const entriesInfo: SidecarOrderEntryGroup = {
stopLoss: stopLoss,
takeProfit: takeProfit,
limit: limit,
Expand Down
4 changes: 2 additions & 2 deletions src/components/Synthetics/ConfirmationBox/SLTPEntries.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ import SuggestionInput from "components/SuggestionInput/SuggestionInput";
import { MarketInfo } from "domain/synthetics/markets";
import { t } from "@lingui/macro";
import { useRef, useMemo } from "react";
import { SLTPInfo } from "domain/synthetics/orders/useSLTPEntries";
import { SidecarOrderEntryGroup } from "domain/synthetics/sidecarOrders/useSidecarOrders";
import { isIncreaseOrderType } from "domain/synthetics/orders";

const SUGGESTION_PERCENTAGE_LIST = [10, 25, 50, 75, 100];

type Props = {
entriesInfo: SLTPInfo;
entriesInfo: SidecarOrderEntryGroup;
marketInfo?: MarketInfo;
displayMode: "percentage" | "sizeUsd";
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
} from "domain/synthetics/positions";
import { PositionEditorState, usePositionEditorState } from "domain/synthetics/trade/usePositionEditorState";
import { PositionSellerState, usePositionSellerState } from "domain/synthetics/trade/usePositionSellerState";
import { ConfirmationBoxState, useConfirmationBoxState } from "domain/synthetics/trade/useConfirmationBoxState";
import { TradeboxState, useTradeboxState } from "domain/synthetics/trade/useTradeboxState";
import { BigNumber, ethers } from "ethers";
import { useChainId } from "lib/chains";
Expand Down Expand Up @@ -59,6 +60,7 @@ export type SyntheticsState = {
orderEditor: OrderEditorState;
positionSeller: PositionSellerState;
positionEditor: PositionEditorState;
confirmationBox: ConfirmationBoxState;
};

const StateCtx = createContext<SyntheticsState | null>(null);
Expand Down Expand Up @@ -127,6 +129,7 @@ export function SyntheticsStateContextProvider({

const positionSellerState = usePositionSellerState(chainId);
const positionEditorState = usePositionEditorState(chainId);
const confirmationBoxState = useConfirmationBoxState();

const gasLimits = useGasLimits(chainId);
const gasPrice = useGasPrice(chainId);
Expand Down Expand Up @@ -166,6 +169,7 @@ export function SyntheticsStateContextProvider({
orderEditor,
positionSeller: positionSellerState,
positionEditor: positionEditorState,
confirmationBox: confirmationBoxState,
};

return s;
Expand Down Expand Up @@ -194,6 +198,7 @@ export function SyntheticsStateContextProvider({
orderEditor,
positionSellerState,
positionEditorState,
confirmationBoxState,
]);

latestState = state;
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import { createSelector } from "../utils";
import { BigNumber } from "ethers";
import {
selectTradeboxSelectedPositionKey,
selectTradeboxMarketInfo,
selectTradeboxTradeFlags,
selectTradeboxCollateralToken,
selectTradeboxIncreasePositionAmounts,
selectTradeboxTriggerPrice,
selectTradeboxSelectedPosition,
selectTradeboxNextPositionValues,
} from "./tradeboxSelectors";
import { isStopLossOrderType, isLimitDecreaseOrderType, isLimitIncreaseOrderType } from "domain/synthetics/orders";
import { getPendingMockPosition } from "domain/synthetics/positions";

import { makeSelectOrdersByPositionKey } from "../selectors/orderSelectors";

export const selectConfirmationBoxExistingSlOrders = createSelector((q) => {
const positionKey = q(selectTradeboxSelectedPositionKey);
const positionOrders = q(makeSelectOrdersByPositionKey(positionKey));

return positionOrders?.filter((order) => isStopLossOrderType(order.orderType));
});

export const selectConfirmationBoxExistingTpOrders = createSelector((q) => {
const positionKey = q(selectTradeboxSelectedPositionKey);
const positionOrders = q(makeSelectOrdersByPositionKey(positionKey));

return positionOrders?.filter((order) => isLimitDecreaseOrderType(order.orderType));
});

export const selectConfirmationBoxExistingLimitOrders = createSelector((q) => {
const positionKey = q(selectTradeboxSelectedPositionKey);
const positionOrders = q(makeSelectOrdersByPositionKey(positionKey));

return positionOrders?.filter((order) => isLimitIncreaseOrderType(order.orderType));
});

export const selectConfirmationBoxMockPosition = createSelector((q) => {
const positionKey = q(selectTradeboxSelectedPositionKey);
const collateralToken = q(selectTradeboxCollateralToken);
const marketInfo = q(selectTradeboxMarketInfo);
const existingPosition = q(selectTradeboxSelectedPosition);
const tradeFlags = q(selectTradeboxTradeFlags);
const nextPositionValues = q(selectTradeboxNextPositionValues);
const increaseAmounts = q(selectTradeboxIncreasePositionAmounts);
const triggerPrice = q(selectTradeboxTriggerPrice);

if (!positionKey || !marketInfo || !collateralToken || !increaseAmounts || !nextPositionValues) return;

const mockPosition = getPendingMockPosition({
isIncrease: tradeFlags.isIncrease,
positionKey,
sizeDeltaUsd: (existingPosition?.sizeInUsd ?? BigNumber.from(0)).add(
increaseAmounts?.sizeDeltaUsd ?? BigNumber.from(0)
),
sizeDeltaInTokens: (existingPosition?.sizeInTokens ?? BigNumber.from(0)).add(
increaseAmounts?.sizeDeltaInTokens ?? BigNumber.from(0)
),
collateralDeltaAmount: (existingPosition?.collateralAmount ?? BigNumber.from(0)).add(
increaseAmounts?.collateralDeltaAmount ?? BigNumber.from(0)
),
updatedAt: Date.now(),
updatedAtBlock: BigNumber.from(0),
});

if (!mockPosition) return;

return {
...mockPosition,
marketInfo,
indexToken: marketInfo.indexToken,
collateralToken,
pnlToken: tradeFlags.isLong ? marketInfo.longToken : marketInfo.shortToken,
markPrice: nextPositionValues.nextEntryPrice!,
entryPrice: nextPositionValues.nextEntryPrice,
triggerPrice: tradeFlags.isLimit ? triggerPrice : undefined,
liquidationPrice: nextPositionValues.nextLiqPrice,
collateralUsd: increaseAmounts?.initialCollateralUsd,
remainingCollateralUsd: increaseAmounts?.collateralDeltaUsd,
remainingCollateralAmount: increaseAmounts?.collateralDeltaAmount,
netValue: increaseAmounts?.collateralDeltaUsd,
hasLowCollateral: false,
leverage: nextPositionValues.nextLeverage,
leverageWithPnl: nextPositionValues.nextLeverage,
pnl: BigNumber.from(0),
pnlPercentage: BigNumber.from(0),
pnlAfterFees: BigNumber.from(0),
pnlAfterFeesPercentage: BigNumber.from(0),
closingFeeUsd: BigNumber.from(0),
uiFeeUsd: BigNumber.from(0),
pendingFundingFeesUsd: BigNumber.from(0),
pendingClaimableFundingFeesUsd: BigNumber.from(0),
};
});
10 changes: 8 additions & 2 deletions src/context/SyntheticsStateContext/selectors/orderSelectors.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export const makeSelectOrderErrorByOrderKey = createSelectorFactory((orderId: st
})
);

export const makeSelectOrdersWithErrorsByPositionKey = createSelectorFactory((positionKey: string | undefined) =>
export const makeSelectOrdersByPositionKey = createSelectorFactory((positionKey: string | undefined) =>
createSelector(function selectOrdersByPositionKey(q) {
if (!positionKey) {
q(() => null);
Expand All @@ -47,7 +47,13 @@ export const makeSelectOrdersWithErrorsByPositionKey = createSelectorFactory((po

const ordersInfoData = q(selectOrdersInfoData);
const orders = Object.values(ordersInfoData || {});
const positionOrders = orders.filter((order) => isOrderForPosition(order, positionKey)) as PositionOrderInfo[];
return orders.filter((order) => isOrderForPosition(order, positionKey)) as PositionOrderInfo[];
})
);

export const makeSelectOrdersWithErrorsByPositionKey = createSelectorFactory((positionKey: string | undefined) =>
createSelector(function selectOrdersByPositionKey(q) {
const positionOrders = q(makeSelectOrdersByPositionKey(positionKey));

sortPositionOrders(positionOrders);

Expand Down
Loading

0 comments on commit e576a1a

Please sign in to comment.