@dodoex/widgets 2.6.6 → 3.0.0-beta.0

package/dist/src/components/Bridge/SelectBridgeDialog/RouteCard.d.ts

@@ -2,13 +2,12 @@
 import BigNumber from 'bignumber.js';
 import { BridgeRouteI } from '../../../hooks/Bridge/useFetchRoutePriceBridge';
 import { TokenInfo } from '../../../hooks/Token/type';
-export default function RouteCard({ fromToken, toToken, fromChainId, toChainId, fromAmount, fromTokenBalance, toTokenAmount, toolDetails, product, executionDuration, feeUSD, selected, setSelected, spenderContractAddress, isBestPrice, }: {
+export default function RouteCard({ fromToken, toToken, fromChainId, toChainId, fromAmount, toTokenAmount, toolDetails, product, executionDuration, feeUSD, selected, setSelected, spenderContractAddress, isBestPrice, }: {
     fromToken?: TokenInfo;
     toToken?: TokenInfo;
     fromChainId: number;
     toChainId: number;
     fromAmount?: BridgeRouteI['fromAmount'];
-    fromTokenBalance: BigNumber | null;
     toTokenAmount?: BigNumber | null;
     toolDetails: BridgeRouteI['step']['toolDetails'];
     product: BridgeRouteI['product'];

package/dist/src/components/Confirm.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export default function Confirm({ open, onClose, title, children, singleBtn, danger, singleBtnText, cancelText, confirmText, disabledConfirm, confirmLoading, isManualClose, onConfirm, }: React.PropsWithChildren<{
+    open: boolean;
+    onClose: () => void;
+    title?: React.ReactNode;
+    singleBtn?: boolean;
+    danger?: boolean;
+    singleBtnText?: React.ReactNode;
+    cancelText?: React.ReactNode;
+    confirmText?: React.ReactNode;
+    disabledConfirm?: boolean;
+    confirmLoading?: boolean;
+    isManualClose?: boolean;
+    onConfirm?: () => void;
+}>): JSX.Element;

package/dist/src/components/ConnectWallet/NeedConnectButton.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { ButtonProps } from '@dodoex/components';
 import { ChainId } from '../../constants/chains';
-export default function NeedConnectButton({ chainId, ...props }: ButtonProps & {
+export default function NeedConnectButton({ chainId, includeButton, ...props }: ButtonProps & {
     /** chainId that needs to be connected */
     chainId?: ChainId;
+    includeButton?: boolean;
 }): JSX.Element;

package/dist/src/components/GoBack.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { BoxProps } from '@dodoex/components';
+export default function GoBack({ sx, onClick, }: {
+    sx?: BoxProps['sx'];
+    onClick?: () => void;
+}): JSX.Element;

package/dist/src/components/HowItWorks.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { BoxProps } from '@dodoex/components';
+export declare function HowItWorks({ title, desc, linkTo, LeftImage, sx, }: {
+    title: React.ReactNode;
+    desc: React.ReactNode;
+    linkTo: string;
+    LeftImage?: React.FunctionComponent<React.SVGProps<SVGSVGElement> & {
+        title?: string | undefined;
+    }>;
+    sx?: BoxProps['sx'];
+}): JSX.Element;

package/dist/src/components/RiskDialog.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export default function RiskDialog({ open, onClose, alertContent, onConfirm, }: {
+    open: boolean;
+    onClose: () => void;
+    alertContent?: React.ReactNode;
+    onConfirm?: () => void;
+}): JSX.Element;

package/dist/src/components/Swap/components/ConnectWallet/index.d.ts

@@ -2,7 +2,5 @@
 import { ChainId } from '../../../../constants/chains';
 export interface ConnectWalletProps {
     needSwitchChain?: ChainId;
-    /** If true is returned, the default wallet connection logic will not be executed */
-    onConnectWalletClick?: () => boolean | Promise<boolean>;
 }
-export default function ConnectWallet({ needSwitchChain, onConnectWalletClick, }: ConnectWalletProps): JSX.Element;
+export default function ConnectWallet({ needSwitchChain }: ConnectWalletProps): JSX.Element;

package/dist/src/components/Swap/components/Dialog.d.ts

@@ -4,6 +4,7 @@ export interface DialogProps {
     open: boolean;
     onClose?: () => void;
     afterClose?: () => void;
+    scope?: boolean;
     title?: string | React.ReactNode;
     rightSlot?: React.ReactNode;
     canBack?: boolean;
@@ -11,4 +12,4 @@ export interface DialogProps {
     height?: number | string;
     testId?: string;
 }
-export default function Dialog({ open, onClose, afterClose, title, rightSlot, canBack, children, height, testId, }: DialogProps): JSX.Element;
+export default function Dialog({ scope, ...props }: DialogProps): JSX.Element;

package/dist/src/components/Swap/components/TokenCard/BalanceText.d.ts

@@ -1,9 +1,11 @@
-/// <reference types="react" />
 import BigNumber from 'bignumber.js';
-export declare function BalanceText({ onClick, balance, decimals, address, showMaxBtn, }: {
+import React from 'react';
+export declare function BalanceText({ onClick, balance, decimals, address, showMaxBtn, loading, balanceText, }: {
     onClick?: (max: string) => void;
     balance: BigNumber | null;
     decimals?: number;
     address?: string;
     showMaxBtn?: boolean;
+    loading?: boolean;
+    balanceText?: React.ReactNode;
 }): JSX.Element;

package/dist/src/components/Swap/components/TokenCard/NumberInput.d.ts

@@ -1,13 +1,16 @@
 /// <reference types="react" />
 import { BoxProps } from '@dodoex/components';
-export declare function NumberInput({ readOnly, sx, value, decimals, onChange, suffix, withClear, onFocus, placeholder, }: {
-    readOnly?: boolean;
+export declare const NumberInput: import("react").ForwardRefExoticComponent<{
+    readOnly?: boolean | undefined;
     sx?: BoxProps['sx'];
-    value?: string;
-    decimals?: number;
-    onFocus?: () => void;
-    onChange?: (v: string) => void;
+    value?: string | undefined;
+    decimals?: number | undefined;
+    onFocus?: (() => void) | undefined;
+    onChange?: ((v: string) => void) | undefined;
     suffix?: React.ReactNode | string;
-    withClear?: boolean;
-    placeholder?: string;
-}): JSX.Element;
+    suffixGap?: number | undefined;
+    withClear?: boolean | undefined;
+    placeholder?: string | undefined;
+    readonlyShowSuffix?: boolean | undefined;
+    typography?: string | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/src/components/Swap/components/TokenCard/PercentageSelectButtonGroup.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { BoxProps } from '@dodoex/components';
+export declare function PercentageSelectButtonGroup({ value, onChange, sx, }: {
+    value: number;
+    onChange?: (val: number) => void;
+    sx?: BoxProps['sx'];
+}): JSX.Element;

package/dist/src/components/Swap/components/TokenCard/TokenLogoCollapse.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
-import { TokenPickerProps } from '../../../TokenPicker';
-export declare function TokenLogoCollapse({ token, onClick, showChainLogo, }: {
-    token?: TokenPickerProps['value'];
+import { TokenInfo } from '../../../../hooks/Token';
+export declare function TokenLogoCollapse({ token, onClick, showChainLogo, readonly, }: {
+    token?: TokenInfo | null;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     showChainLogo?: boolean;
+    readonly?: boolean;
 }): JSX.Element;

package/dist/src/components/Swap/components/TokenCard/TokenPickerDialog.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import { TokenPickerProps } from '../../../TokenPicker';
 import { DialogProps } from '../Dialog';
-export declare function TokenPickerDialog({ open, value, onClose, occupiedAddrs, occupiedChainId, onTokenChange, side, defaultLoadBalance, }: {
+export declare function TokenPickerDialog({ open, title, value, onClose, occupiedAddrs, occupiedChainId, onTokenChange, side, defaultLoadBalance, multiple, searchPlaceholder, searchOtherAddress, chainId, }: {
     open: boolean;
+    title?: React.ReactNode | string;
     occupiedAddrs?: string[];
     occupiedChainId?: TokenPickerProps['occupiedChainId'];
     onClose: DialogProps['onClose'];
@@ -10,4 +11,8 @@ export declare function TokenPickerDialog({ open, value, onClose, occupiedAddrs,
     onTokenChange: TokenPickerProps['onChange'];
     side?: TokenPickerProps['side'];
     defaultLoadBalance?: boolean;
+    multiple?: TokenPickerProps['multiple'];
+    searchPlaceholder?: TokenPickerProps['searchPlaceholder'];
+    searchOtherAddress?: TokenPickerProps['searchOtherAddress'];
+    chainId?: TokenPickerProps['chainId'];
 }): JSX.Element;

package/dist/src/components/Swap/components/TokenCard/index.d.ts

@@ -1,6 +1,9 @@
 /// <reference types="react" />
 import { BoxProps } from '@dodoex/components';
+import { TokenInfo } from '../../../../hooks/Token';
 import { TokenPickerProps } from '../../../TokenPicker';
+import BigNumber from 'bignumber.js';
+import { ChainId } from '@dodoex/api';
 export interface TokenCardProps {
     amt: string;
     fiatPriceTxt?: string | React.ReactNode;
@@ -10,14 +13,24 @@ export interface TokenCardProps {
     occupiedAddrs?: string[];
     occupiedChainId?: TokenPickerProps['occupiedChainId'];
     onMaxClick?: (max: string) => void;
-    token?: TokenPickerProps['value'];
+    token?: TokenInfo | null;
     onInputChange?: (v: string) => void;
     onInputFocus?: () => void;
     onTokenClick?: () => void;
-    onTokenChange: TokenPickerProps['onChange'];
+    onTokenChange?: (token: TokenInfo, isOccupied: boolean) => void;
     side?: TokenPickerProps['side'];
     showChainLogo?: boolean;
     onlyCurrentChain?: boolean;
     defaultLoadBalance?: boolean;
+    overrideBalance?: BigNumber | null;
+    overrideBalanceLoading?: boolean;
+    balanceText?: React.ReactNode;
+    showPercentage?: boolean;
+    inputReadonlyTooltip?: React.ReactNode;
+    inputTypography?: string;
+    chainId?: ChainId;
+    hideToken?: boolean;
 }
-export declare function TokenCard({ sx, amt, token, readOnly, showMaxBtn, onMaxClick, fiatPriceTxt, occupiedAddrs, occupiedChainId, onInputFocus, onTokenClick, onInputChange, onTokenChange, side, showChainLogo, onlyCurrentChain, defaultLoadBalance, }: TokenCardProps): JSX.Element;
+export declare function CardPlus(): JSX.Element;
+export declare function CardPlusConnected(): JSX.Element;
+export declare function TokenCard({ sx, amt, token, readOnly, showMaxBtn, onMaxClick, fiatPriceTxt, occupiedAddrs, occupiedChainId, onInputFocus, onTokenClick, onInputChange, onTokenChange, side, showChainLogo, onlyCurrentChain, defaultLoadBalance, overrideBalance, overrideBalanceLoading, balanceText, showPercentage, inputReadonlyTooltip, inputTypography, chainId, hideToken, }: TokenCardProps): JSX.Element;

package/dist/src/components/Swap/index.d.ts

@@ -1,9 +1,7 @@
 /// <reference types="react" />
-import { ConnectWalletProps } from './components/ConnectWallet';
 import { GetAutoSlippage } from '../../hooks/setting/useSetAutoSlippage';
 export interface SwapProps {
     /** Higher priority setting slippage */
     getAutoSlippage?: GetAutoSlippage;
-    onConnectWalletClick?: ConnectWalletProps['onConnectWalletClick'];
 }
-export declare function Swap({ getAutoSlippage, onConnectWalletClick, }?: SwapProps): JSX.Element;
+export declare function Swap({ getAutoSlippage }?: SwapProps): JSX.Element;

package/dist/src/components/Token/TokenItem.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export default function TokenItem({ chainId, address, showName, size, offset, rightContent, }: {
+    chainId: number;
+    address: string;
+    showName: string;
+    size: number;
+    offset?: number;
+    rightContent?: React.ReactNode;
+}): JSX.Element;

package/dist/src/components/TokenLogo.d.ts

@@ -12,5 +12,7 @@ export interface TokenLogoProps {
     cross?: boolean;
     sx?: BoxProps['sx'];
     chainId?: number;
+    noShowChain?: boolean;
+    noBorder?: boolean;
 }
-export default function TokenLogo({ width, height, marginRight, url, zIndex, cross, address: addressProps, token: tokenProps, sx, chainId, }: TokenLogoProps): React.ReactElement;
+export default function TokenLogo({ width, height, marginRight, url, zIndex, cross, address: addressProps, token: tokenProps, sx, chainId, noShowChain, noBorder, }: TokenLogoProps): React.ReactElement;

package/dist/src/components/TokenLogoPair.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { BoxProps } from '@dodoex/components';
-export declare function TokenLogoPair({ tokens, width, height, gap, cross, mr, chainId, showChainLogo, sx, }: {
+export interface TokenLogoPairProps {
     tokens: Array<{
         address?: string;
         logoURI?: string;
@@ -13,4 +13,5 @@ export declare function TokenLogoPair({ tokens, width, height, gap, cross, mr, c
     chainId?: number;
     showChainLogo?: boolean;
     sx?: BoxProps['sx'];
-}): JSX.Element | null;
+}
+export declare function TokenLogoPair({ tokens, width, height, gap, cross, mr, chainId, showChainLogo, sx, }: TokenLogoPairProps): JSX.Element | null;

package/dist/src/components/TokenPicker/TokenItem.d.ts

@@ -1,8 +1,10 @@
 import { CSSProperties } from 'react';
 import { TokenInfo } from './../../hooks/Token';
-export default function TokenItem({ token, disabled, style, onClick, }: {
+import BigNumber from 'bignumber.js';
+export default function TokenItem({ token, disabled, style, balance: balanceBigNumber, onClick, }: {
     token: TokenInfo;
     disabled?: boolean;
     style?: CSSProperties;
+    balance?: BigNumber;
     onClick: () => void;
 }): JSX.Element;

package/dist/src/components/TokenPicker/index.d.ts

@@ -2,8 +2,9 @@
 import type { TokenInfo } from '../../hooks/Token';
 import { ChainId } from '../../constants/chains';
 export interface TokenPickerProps {
-    value?: TokenInfo | null;
-    onChange: (token: TokenInfo, isOccupied: boolean) => void;
+    chainId?: ChainId;
+    value?: TokenInfo | null | Array<TokenInfo>;
+    onChange: (token: TokenInfo | Array<TokenInfo>, isOccupied: boolean) => void;
     /** token pair usage */
     occupiedAddrs?: string[];
     /** token pair usage */
@@ -15,5 +16,9 @@ export interface TokenPickerProps {
     visible?: boolean;
     side?: 'from' | 'to';
     defaultLoadBalance?: boolean;
+    multiple?: boolean;
+    searchPlaceholder?: string;
+    /** like search pool address */
+    searchOtherAddress?: (address: string) => Promise<JSX.Element | null>;
 }
-export default function TokenPicker({ value, onChange, occupiedAddrs, occupiedChainId, hiddenAddrs, showAddrs, visible, side, defaultLoadBalance, }: TokenPickerProps): JSX.Element;
+export default function TokenPicker({ chainId, value, onChange, occupiedAddrs, occupiedChainId, hiddenAddrs, showAddrs, visible, side, defaultLoadBalance, multiple, searchPlaceholder, searchOtherAddress, }: TokenPickerProps): JSX.Element;

package/dist/src/components/TokenStatusButton.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ButtonProps } from '@dodoex/components';
+import { useTokenStatus } from '../hooks/Token/useTokenStatus';
+export default function TokenStatusButton({ status, children, buttonProps, }: React.PropsWithChildren<{
+    status: ReturnType<typeof useTokenStatus>;
+    buttonProps?: ButtonProps;
+}>): JSX.Element;

package/dist/src/components/Widget/index.d.ts

@@ -8,8 +8,9 @@ import { ChainId } from '../../constants/chains';
 import { DefaultTokenInfo } from '../../hooks/Token/type';
 import { APIServices } from '../../constants/api';
 import { SwapProps } from '../Swap';
+import { GlobalFunctionConfig } from '../../providers/GlobalConfigContext';
 export declare const WIDGET_CLASS_NAME = "dodo-widget-container";
-export interface WidgetProps extends Web3ConnectorsProps, InitTokenListProps, ExecutionProps, SwapProps {
+export interface WidgetProps extends Web3ConnectorsProps, InitTokenListProps, ExecutionProps, GlobalFunctionConfig, SwapProps {
     apikey?: string;
     theme?: ThemeOptions;
     colorMode?: PaletteMode;
@@ -27,5 +28,6 @@ export interface WidgetProps extends Web3ConnectorsProps, InitTokenListProps, Ex
     crossChain?: boolean;
     noPowerBy?: boolean;
     onProviderChanged?: (provider?: any) => void;
+    gotoBuyToken?: GlobalFunctionConfig['gotoBuyToken'];
 }
 export declare function Widget(props: PropsWithChildren<WidgetProps>): JSX.Element;

package/dist/src/components/WidgetConfirm.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export default function WidgetConfirm({ open, onClose, title, children, singleBtn, danger, singleBtnText, cancelText, confirmText, disabledConfirm, confirmLoading, isManualClose, onConfirm, }: React.PropsWithChildren<{
+    open: boolean;
+    onClose: () => void;
+    title?: React.ReactNode;
+    singleBtn?: boolean;
+    danger?: boolean;
+    singleBtnText?: React.ReactNode;
+    cancelText?: React.ReactNode;
+    confirmText?: React.ReactNode;
+    disabledConfirm?: boolean;
+    confirmLoading?: boolean;
+    isManualClose?: boolean;
+    onConfirm?: () => void;
+}>): JSX.Element;

package/dist/src/components/WidgetContainer.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BoxProps } from '@dodoex/components';
+export default function WidgetContainer({ sx, ...props }: BoxProps): JSX.Element;

package/dist/src/components/WidgetDialog.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export interface WidgetDialogProps {
+    open: boolean;
+    onClose?: () => void;
+    afterClose?: () => void;
+    title?: string | React.ReactNode;
+    titleCenter?: boolean;
+    rightSlot?: React.ReactNode;
+    canBack?: boolean;
+    children: React.ReactNode;
+    width?: number | string;
+    height?: number | string;
+    testId?: string;
+}
+export default function WidgetDialog({ open, onClose, afterClose, title, titleCenter, rightSlot, canBack, children, width, height, testId, }: WidgetDialogProps): JSX.Element;

package/dist/src/components/chart/components/BaseButton.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const BaseButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;

package/dist/src/components/chart/components/Display.d.ts

@@ -0,0 +1,9 @@
+import React, { CSSProperties } from 'react';
+declare type Props = {
+    display?: CSSProperties['display'];
+    hidden?: boolean;
+    children?: JSX.Element | Array<JSX.Element | undefined> | string | undefined;
+    style?: React.CSSProperties;
+};
+export declare const Display: React.MemoExoticComponent<({ display, hidden, children, style, }: Props) => JSX.Element>;
+export {};

package/dist/src/components/chart/components/Input.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const Input: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    error?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;

package/dist/src/components/chart/components/NumberInput.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare function NumberInput({ value, onChange, onBlur, }: {
+    value: string;
+    onChange?: (v: string) => void;
+    onBlur?: () => void;
+}): JSX.Element;

package/dist/src/components/chart/components/TogglePriceIcon.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface ISwtichBtn extends React.HTMLProps<HTMLInputElement> {
+    shouldSwitch?: boolean;
+    variant?: 'dark' | 'light';
+}
+export declare const TogglePriceIcon: ({ shouldSwitch, variant }: ISwtichBtn) => JSX.Element;
+export declare const ToggleIconWithoutBg: () => JSX.Element;
+export {};

package/dist/src/components/chart/components/TokenLogo.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function TokenLogo({ src, width }: {
+    src: string;
+    width: number;
+}): JSX.Element;

package/dist/src/components/chart/depth-chart/DepthChartKonva.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { PMMModel, PmmModelParams } from '@dodoex/api';
+import BigNumber from 'bignumber.js';
+import { BaseMinAndZoomMultiples } from './helper';
+export declare const bgColor = "rgba(38, 39, 41, 0.3)";
+export interface ColorMap {
+    grid?: string;
+    midPriceLine?: string;
+    leftBg?: (string | number)[];
+    leftLine?: string;
+    leftColor?: string;
+    rightBg?: (string | number)[];
+    rightLine?: string;
+    rightColor?: string;
+    tooltipBg?: string;
+    tooltipColor?: string;
+}
+export declare type Props = {
+    width: number;
+    height: number;
+    params: PmmModelParams;
+    midPrice: BigNumber;
+    pmmModel: PMMModel;
+    baseTokenSymbol: string;
+    quoteTokenSymbol: string;
+    baseMinAndZoomMultiples: BaseMinAndZoomMultiples;
+    colorMap?: ColorMap;
+    setBaseMinAndZoomMultiples: React.Dispatch<React.SetStateAction<BaseMinAndZoomMultiples>>;
+};
+export declare function DepthChartKonva({ width, height, midPrice, pmmModel, params, baseTokenSymbol, quoteTokenSymbol, baseMinAndZoomMultiples, colorMap, setBaseMinAndZoomMultiples, }: Props): JSX.Element;

package/dist/src/components/chart/depth-chart/__tests__/utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/chart/depth-chart/helper.d.ts

@@ -0,0 +1,125 @@
+import BigNumber from 'bignumber.js';
+import Konva from 'konva';
+import { PMMModel } from '@dodoex/api';
+export declare function colorRgb(str: string): string;
+export declare type EvaluatedPoint = {
+    side: 'bid' | 'ask' | 'no-one';
+    vert: BigNumber;
+    base: BigNumber;
+    quote: BigNumber;
+};
+export declare type BaseMinAndZoomMultiples = {
+    baseMin: BigNumber;
+    zoomMultiples: number;
+    /** Price impact point active display hover */
+    targetMarginPriceX: number;
+};
+export declare function evalPoint({ val, model, }: {
+    val: BigNumber;
+    model: PMMModel;
+    midPrice: BigNumber;
+}): EvaluatedPoint;
+/**
+ * Returns two vertical coordinates, buyBaseVert on the left and sellBaseVert on the right.
+ * @param param0
+ */
+export declare function computeBaseVert({ midPrice, q, q0, pmmModel, }: {
+    midPrice: BigNumber;
+    q: number;
+    q0: number;
+    pmmModel: PMMModel;
+}): {
+    buyBaseVert: BigNumber;
+    sellBaseVert: BigNumber;
+};
+/**
+ * // 1000/800 The price represented by one pixel
+  // Maximum value on the right side of the middle price = middle price * 10 = middle price * 10^1
+  // Calculate the x-axis coordinate (price): middle price*10^(xPortion*x)+middle price; x is the number of equal parts that divide the right half into 50 parts
+ * @param chartWidth icon width
+ * @param zoomMultiples magnification factors
+ * @returns
+ */
+export declare function computeXPortion(chartWidth: number, zoomMultiples?: number): BigNumber;
+export declare function updateTooltip({ tooltip, x, chartWidth, chartHeight, buyBaseVert, sellBaseVert, pmmModel, midPrice, baseTokenSymbol, quoteTokenSymbol, t, baseMinAndZoomMultiples, isHover, color, leftColor, rightColor, }: {
+    x: number;
+    tooltip: Konva.Layer;
+    chartWidth: number;
+    chartHeight: number;
+    buyBaseVert: BigNumber;
+    sellBaseVert: BigNumber;
+    pmmModel: PMMModel;
+    midPrice: BigNumber;
+    baseTokenSymbol: string;
+    quoteTokenSymbol: string;
+    t: any;
+    baseMinAndZoomMultiples: BaseMinAndZoomMultiples;
+    isHover?: boolean;
+    color?: string;
+    leftColor?: string;
+    rightColor?: string;
+}): void;
+/**
+ * Calculate the minimum value on the left by pulling distance or button click
+ */
+export declare function computeBaseMinByDistance({ dragDistance, prevBaseMin, chartWidth, zoomMultiples, }: {
+    dragDistance: number;
+    prevBaseMin: BigNumber;
+    chartWidth: number;
+    zoomMultiples: number;
+}): BigNumber;
+export declare const baseZoomMultiples = 1;
+export declare function computeZoomMultiplesWhenZoom({ prevZoomMultiples, zoomIn, }: {
+    prevZoomMultiples: number;
+    zoomIn: boolean;
+}): number;
+/**
+ * Given a price target corresponding to the abscissa, calculate the abscissa of the point
+ * The buying impact point is at the left 1/4 position
+ * The selling impact point is 3/4 on the right
+ *
+ * Returns a coordinate point, baseMin and zoomMultiples
+ *
+ * Take the initial state as the starting point, that is, midPrice * 10 ^ -1 as the starting point of the horizontal axis, and it is a left-right symmetrical state, that is, the logarithm of the horizontal axis is from -1 -> 0 -> 1
+ *
+ * type === 'sell'
+ * targetPrice = midPrice * 10 ^ n
+ * n = Math.log10(targetPrice / midPrice)
+ * n = maxN * (3 / 4)
+ *
+ * If the new price is within the existing range, the zoom factor will not be adjusted (the price impact will not change the shape of the graph after graph scaling or translation)
+ * If it is not within the current interval, check whether it is midPrice * 10 ^-1 and midPrice * 10^1. If you still do not adjust the zoom factor, hit the specified point directly, otherwise you need to adjust the zoom factor (avoid inputting extremely small values) The value cannot be scaled to the specified range, resulting in stuck)
+ */
+export declare function computeTargetXByTargetPrice({ type, targetPrice, midPrice, width, }: {
+    type: 'buy' | 'sell';
+    targetPrice: BigNumber;
+    midPrice: BigNumber;
+    width: number;
+}): {
+    zoomMultiples: BigNumber;
+    targetX: number;
+};
+/**
+ * If the new price is within the existing range, the zoom factor will not be adjusted (the price impact will not change the shape of the graph after graph scaling or translation)
+ * If it is not within the current interval, check whether it is midPrice * 10 ^-1 and midPrice * 10^1. If it is within the range, adjust the zoom factor to 1, and then impact to the specified point, otherwise you need to adjust the zoom factor ( Avoid entering extremely small values ​​that may result in inability to scale to the specified range and cause stucks)
+ *
+ * Returns an abscissa and a flag indicating whether to skip
+ */
+export declare function beforePriceImpactEffect({ currentBaseMinAndZoomMultiples, targetPrice, midPrice, width, }: {
+    currentBaseMinAndZoomMultiples: BaseMinAndZoomMultiples;
+    targetPrice: BigNumber;
+    midPrice: BigNumber;
+    width: number;
+}): {
+    isSkip: boolean;
+    targetX: number;
+    baseMin: BigNumber;
+    zoomMultiples: number;
+};
+/**
+ * Recalculate baseMin after the zoom factor changes
+ */
+export declare function computeBaseAfterZoom({ midPrice, zoomMultiples, }: {
+    midPrice: BigNumber;
+    zoomMultiples: number;
+}): BigNumber;

package/dist/src/components/chart/depth-chart/index.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import BigNumber from 'bignumber.js';
+import { ColorMap } from './DepthChartKonva';
+import { PMMModel, PmmModelParams } from '@dodoex/api';
+declare type Props = {
+    chartId: string;
+    width?: number;
+    baseTokenSymbol: string;
+    quoteTokenSymbol: string;
+    pmmModel?: PMMModel;
+    pmmParams?: PmmModelParams;
+    midPrice?: BigNumber;
+    height?: number;
+    notShowAmountInput?: boolean;
+    colorMap?: ColorMap;
+};
+declare const DepthChart: React.FC<Props>;
+export default DepthChart;

package/dist/src/components/chart/depth-chart/index.styled.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AmountInputContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const InputSectionWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    borderColor?: string | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PriceImpactWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const OptButtonGroup: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const OptButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;