@orderly.network/trading
Version:
463 lines (427 loc) • 15.9 kB
TypeScript
import * as _orderly_network_types from '@orderly.network/types';
import { API, NetworkId, AccountStatusEnum } from '@orderly.network/types';
import * as react from 'react';
import react__default, { ReactNode, FC, RefObject, PropsWithChildren } from 'react';
import * as _orderly_network_ui_share from '@orderly.network/ui-share';
import { SharePnLConfig } from '@orderly.network/ui-share';
import { TradingviewWidgetPropsInterface } from '@orderly.network/ui-tradingview';
import { PositionsProps } from '@orderly.network/ui-positions';
import * as react_jsx_runtime from 'react/jsx-runtime';
import * as _orderly_network_hooks from '@orderly.network/hooks';
import Split, { SplitProps } from '@uiw/react-split';
import { SliderMarks } from '@orderly.network/ui';
type layoutInfo = {
width?: number;
height?: number;
fontSize?: number;
color?: string;
textAlign?: CanvasTextAlign;
textBaseline?: CanvasTextBaseline;
position: Partial<{
left: number;
right: number;
top: number;
bottom: number;
}>;
};
type PosterLayoutConfig = {
message?: layoutInfo;
domain?: layoutInfo;
position?: layoutInfo;
unrealizedPnl?: layoutInfo & {
secondaryColor: string;
secondaryFontSize: number;
};
informations?: layoutInfo & {
labelColor?: string;
};
updateTime?: layoutInfo;
};
type ShareOptions = {
pnl: {
/**
* defualt is Manrope
*/
fontFamily?: string;
/**
* can not empty
*/
backgroundImages: string[];
/**
* posterLayoutConfig
*/
layout?: PosterLayoutConfig;
/**
* norma text color, default is "rgba(255, 255, 255, 0.98)"
*/
color?: string;
/**
* profit text color, default is "rgb(0,181,159)"
*/
profitColor?: string;
/**
* loss text color, default is "rgb(255,103,194)"
*/
lossColor?: string;
/**
* brand color, default is "rgb(0,181,159)"
*/
brandColor?: string;
};
};
declare enum TradingFeatures {
Sider = "sider",
TopNavBar = "topNavBar",
Footer = "footer",
Header = "header",
Kline = "kline",
OrderBook = "orderBook",
TradeHistory = "tradeHistory",
Positions = "positions",
Orders = "orders",
AssetAndMarginInfo = "asset_margin_info"
}
type BasicSymbolInfo = {
base_dp: number;
quote_dp: number;
base_tick: number;
base: string;
quote: string;
};
interface TradingPageState extends TradingPageProps {
symbolInfo: {
base_dp: number;
quote_dp: number;
base_tick: number;
base: string;
quote: string;
symbol: string;
};
}
interface TradingViewConfigInterface {
scriptSRC?: string;
library_path: string;
overrides?: Record<string, string>;
studiesOverrides?: Record<string, string>;
customCssUrl?: string;
colorConfig?: ColorConfigInterface;
locale?: TradingviewWidgetPropsInterface["locale"];
}
interface ColorConfigInterface {
chartBG?: string;
upColor?: string;
downColor?: string;
pnlUpColor?: string;
pnlDownColor?: string;
pnlZoreColor?: string;
textColor?: string;
qtyTextColor?: string;
font?: string;
closeIcon?: string;
}
type ReferralProps = {
saveRefCode?: boolean;
onClickReferral?: () => void;
onBoundRefCode?: (success: boolean, error: any) => void;
};
type TradingRewardsProps = {
onClickTradingRewards?: () => void;
};
type BaseTradingPageProps = {
symbol: string;
tradingViewConfig: TradingViewConfigInterface;
onSymbolChange?: (symbol: API.Symbol) => void;
disableFeatures?: TradingFeatures[];
overrideFeatures?: Record<TradingFeatures, ReactNode>;
};
type TradingPageProps = BaseTradingPageProps & {
sharePnLConfig?: SharePnLConfig;
referral?: ReferralProps;
tradingRewards?: TradingRewardsProps;
bottomSheetLeading?: React.ReactNode | string;
};
declare enum DataListTabType {
positions = "Positions",
pending = "Pending",
tp_sl = "TP/SL",
filled = "Filled",
positionHistory = "Position history",
orderHistory = "Order history",
liquidation = "Liquidation"
}
declare const useDataListScript: (props: {
current?: DataListTabType;
} & PositionsProps) => {
positionCount: number;
pendingOrderCount: number;
tpSlOrderCount: number;
onSymbolChange: ((symbol: _orderly_network_types.API.Symbol) => void) | undefined;
unPnlPriceBasis: any;
setUnPnlPriceBasic: (value: string) => void;
pnlNotionalDecimalPrecision: any;
setPnlNotionalDecimalPrecision: (value: number) => void;
showAllSymbol: any;
setShowAllSymbol: (value: boolean) => void;
hideAssets: any;
setHideAssets: (value: boolean) => void;
current: DataListTabType | undefined;
sharePnLConfig: _orderly_network_ui_share.SharePnLConfig | undefined;
symbol: string | undefined;
calcMode: any;
includedPendingOrder: boolean | undefined;
};
type DataListState = ReturnType<typeof useDataListScript>;
declare const DataList: FC<DataListState>;
declare const DataListWidget: (props: {
current?: DataListTabType;
} & PositionsProps) => react_jsx_runtime.JSX.Element;
declare const useLastTradesScript: (symbol: string) => {
base: string;
quote: string;
data: _orderly_network_types.API.Trade[];
isLoading: boolean;
baseDp: number;
quoteDp: number;
};
type LastTradesState = ReturnType<typeof useLastTradesScript>;
declare const LastTrades: FC<LastTradesState & {
classNames?: {
root?: string;
list?: string;
listHeader?: string;
listItem?: {
left?: string;
mid?: string;
right?: string;
};
};
style?: react__default.CSSProperties;
}>;
declare const LastTradesWidget: (props: {
symbol: string;
classNames?: {
root?: string;
list?: string;
listHeader?: string;
listItem?: {
left?: string;
mid?: string;
right?: string;
};
};
style?: React.CSSProperties;
}) => react_jsx_runtime.JSX.Element;
declare const useAssetViewScript: () => {
onDeposit: () => Promise<unknown>;
onWithdraw: () => Promise<unknown>;
onTransfer: () => Promise<unknown>;
onSettle: () => Promise<any>;
visible: any;
toggleVisible: () => void;
networkId: NetworkId;
isFirstTimeDeposit: boolean;
totalValue: number | undefined;
status: AccountStatusEnum;
freeCollateral: number | undefined;
marginRatioVal: number | undefined;
renderMMR: number | undefined;
isConnected: boolean;
isMainAccount: boolean;
hasSubAccount: boolean;
};
type AssetViewState = ReturnType<typeof useAssetViewScript>;
declare const AssetView: FC<AssetViewState>;
declare const AssetViewWidget: () => react_jsx_runtime.JSX.Element;
declare const useOrderBookScript: (props: {
symbol: string;
height?: number;
}) => {
level: number;
asks: _orderly_network_hooks.OrderBookItem[] | undefined;
bids: _orderly_network_hooks.OrderBookItem[] | undefined;
markPrice: number | undefined;
lastPrice: number[] | undefined;
depths: string[];
selDepth: string | undefined;
base: string;
quote: string;
isLoading: boolean | undefined;
onItemClick: ((item: _orderly_network_hooks.OrderBookItem) => void) | undefined;
cellHeight: number;
onDepthChange: ((depth: number) => void) | undefined;
pendingOrders: number[];
symbolInfo: BasicSymbolInfo;
isMobile: boolean;
};
type OrderBookState = ReturnType<typeof useOrderBookScript>;
declare const OrderBook: FC<OrderBookState & {
className?: string;
}>;
declare const OrderBookWidget: (props: {
className?: string;
symbol: string;
height?: number;
}) => react_jsx_runtime.JSX.Element;
declare const useRiskRateScript: () => {
riskRate: string | null;
riskRateColor: {
isHigh: boolean;
isMedium: boolean;
isLow: boolean;
isDefault: boolean;
};
isConnected: boolean;
currentLeverage: number | null;
maxLeverage: number | null;
};
type RiskRateState = ReturnType<typeof useRiskRateScript>;
declare const RiskRate: FC<RiskRateState>;
declare const RiskRateWidget: () => react_jsx_runtime.JSX.Element;
declare const useOrderBookAndTradesScript: (symbol: string) => {
symbol: string;
containerSize: {
width: number;
height: number;
} | undefined;
containerRef: any;
tab: "orderBook" | "lastTrades";
setTab: react.Dispatch<react.SetStateAction<"orderBook" | "lastTrades">>;
};
type OrderBookAndTradesState = ReturnType<typeof useOrderBookAndTradesScript>;
declare const OrderBookAndTrades: FC<OrderBookAndTradesState>;
declare const OrderBookAndTradesWidget: (props: {
symbol: string;
}) => react_jsx_runtime.JSX.Element;
declare const SplitLayout: react__default.ForwardRefExoticComponent<SplitProps & {
children?: react__default.ReactNode | undefined;
} & {
onSizeChange?: (size: string) => void;
} & react__default.RefAttributes<Split>>;
declare const useBottomNavBarScript: () => {
wrongNetwork: boolean;
disabledConnect: boolean;
status: _orderly_network_types.AccountStatusEnum;
onDisconnect: () => Promise<void>;
};
type BottomNavBarState = ReturnType<typeof useBottomNavBarScript>;
declare const BottomNavBar: FC<BottomNavBarState>;
declare const BottomNavBarWidget: () => react_jsx_runtime.JSX.Element;
declare const usePortfolioSheetScript: () => {
onSettlePnL: () => Promise<any>;
onDeposit: () => void;
onWithdraw: () => void;
showSliderTip: boolean;
setShowSliderTip: react.Dispatch<react.SetStateAction<boolean>>;
isMainAccount: boolean;
onTransfer: () => void;
aggregated: Omit<_orderly_network_types.API.PositionsTPSLExt, "rows">;
totalUnrealizedROI: number;
positionsInfo: Record<"unsettledPnL" | "margin_ratio" | "initial_margin_ratio" | "maintenance_margin_ratio" | "open_margin_ratio" | "current_margin_ratio_with_orders" | "initial_margin_ratio_with_orders" | "maintenance_margin_ratio_with_orders" | "total_collateral_value" | "free_collateral" | "total_pnl_24_h" | "unrealPnL" | "total_unreal_pnl" | "total_unreal_pnl_index" | "total_unsettled_pnl" | "notional" | "unrealPnlROI" | "unrealPnlROI_index", <Key extends "unsettledPnL" | "margin_ratio" | "initial_margin_ratio" | "maintenance_margin_ratio" | "open_margin_ratio" | "current_margin_ratio_with_orders" | "initial_margin_ratio_with_orders" | "maintenance_margin_ratio_with_orders" | "total_collateral_value" | "free_collateral" | "total_pnl_24_h" | "unrealPnL" | "total_unreal_pnl" | "total_unreal_pnl_index" | "total_unsettled_pnl" | "notional" | "unrealPnlROI" | "unrealPnlROI_index">(defaultValue?: Omit<_orderly_network_types.API.PositionInfo, "rows">[Key] | undefined) => Omit<_orderly_network_types.API.PositionInfo, "rows">[Key]> & {
isNil: boolean;
};
marginRatio: number;
marginRatioVal: number;
mmr: number | null;
currentLeverage: number | null;
step: number;
marks: SliderMarks;
onLeverageChange: (leverage: number) => void;
onLeverageIncrease: react.MouseEventHandler<SVGSVGElement>;
onLeverageReduce: react.MouseEventHandler<SVGSVGElement>;
onInputChange: react.ChangeEventHandler<HTMLInputElement>;
isReduceDisabled: boolean;
isIncreaseDisabled: boolean;
onValueCommit: (value: number | number[]) => void;
value: number;
maxLeverage: number;
onSaveLeverage: (leverage: number) => Promise<void>;
hideAssets: any;
toggleHideAssets: () => void;
totalCollateral: number;
freeCollateral: number;
totalValue: number | null;
availableBalance: number;
};
type PortfolioSheetState = ReturnType<typeof usePortfolioSheetScript>;
declare const PortfolioSheet: FC<PortfolioSheetState>;
declare const PortfolioSheetWidget: () => react_jsx_runtime.JSX.Element;
type TradingState = ReturnType<typeof useTradingScript>;
declare const useTradingScript: () => TradingPageState & {
marketsWidth: number;
tradindviewMaxHeight: number;
dataListMinHeight: number;
total: number | null;
hideAssets: any;
setHideAssets: (value: boolean) => void;
onShowPortfolioSheet: () => void;
max2XLSplitRef: RefObject<Split>;
tradingviewAndOrderbookSplitRef: RefObject<Split>;
onTradingviewAndOrderbookDragging: (preSize: number, nextSize: number) => void;
onDataListSplitHeightDragging: (preSize: number, nextSize: number) => void;
extraHeight: any;
dataListHeight: any;
restrictedInfo: {
ip: string;
invalidRegions: string[];
restrictedOpen: boolean;
content: react.ReactNode | ((data: {
ip: string;
brokerName: string;
}) => react.ReactNode);
};
orderEntryViewRef: RefObject<HTMLDivElement>;
orderEntryHeight: number;
orderBookSplitSize: string | undefined;
setOrderbookSplitSize: (size: string) => void;
dataListSplitSize: string | undefined;
setDataListSplitSize: (size: string) => void;
mainSplitSize: string | undefined;
setMainSplitSize: (size: string) => void;
dataListSplitHeightSM: string | undefined;
setDataListSplitHeightSM: (size: string) => void;
orderBookSplitHeightSM: string | undefined;
setOrderbookSplitHeightSM: (size: string) => void;
positions: number[];
showPositionIcon: boolean;
updatePositions: (currentIdx: number, targetIdx: number) => void;
collapsable: boolean;
collapsed: any;
onCollapse: (collapsed: boolean) => void;
animating: boolean;
setAnimating: react.Dispatch<react.SetStateAction<boolean>>;
layout: any;
onLayout: (value: string) => void;
max2XL: boolean;
min3XL: boolean;
max4XL: boolean;
canTrade: boolean;
openMarketsSheet: boolean;
onOpenMarketsSheetChange: react.Dispatch<react.SetStateAction<boolean>>;
horizontalDraggable: boolean;
};
declare const Trading: FC<TradingState>;
declare const TradingWidget: () => react_jsx_runtime.JSX.Element;
declare const TradingPage: (props: TradingPageProps) => react_jsx_runtime.JSX.Element;
declare const TradingPageContext: react.Context<TradingPageState>;
declare const useTradingPageContext: () => TradingPageState;
declare const TradingPageProvider: (props: PropsWithChildren<TradingPageProps>) => react_jsx_runtime.JSX.Element;
declare const useTradingLocalStorage: (props?: {
pnlNotionalDecimalPrecision?: number;
}) => {
unPnlPriceBasis: any;
setUnPnlPriceBasic: (value: string) => void;
pnlNotionalDecimalPrecision: any;
setPnlNotionalDecimalPrecision: (value: number) => void;
showAllSymbol: any;
setShowAllSymbol: (value: boolean) => void;
hideAssets: any;
setHideAssets: (value: boolean) => void;
};
declare const usePositionsCount: (symbol?: string) => {
positionCount: number;
};
declare const usePendingOrderCount: (symbol?: string) => {
pendingOrderCount: number;
tpSlOrderCount: number;
};
export { AssetView, AssetViewWidget, BottomNavBar, BottomNavBarWidget, DataList, DataListWidget, LastTrades, LastTradesWidget, OrderBook, OrderBookAndTrades, OrderBookAndTradesWidget, OrderBookWidget, PortfolioSheet, PortfolioSheetWidget, type ReferralProps, RiskRate, RiskRateWidget, type ShareOptions, SplitLayout, Trading, TradingPage, TradingPageContext, type TradingPageProps, TradingPageProvider, type TradingRewardsProps, TradingWidget, useBottomNavBarScript, useOrderBookAndTradesScript, useOrderBookScript, usePendingOrderCount, usePortfolioSheetScript, usePositionsCount, useTradingLocalStorage, useTradingPageContext, useTradingScript };