@dodoex/widgets 3.0.0-taiko.2 → 3.0.0-taiko.20

package/dist/cjs/assets/bundle-DSSoJu9z.css

@@ -0,0 +1,297 @@
+.rmc-date-picker {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  padding: 10px 0;
+}
+.rmc-date-picker-item {
+  -ms-flex: 1;
+      flex: 1;
+  text-align: center;
+}
+
+.rmc-picker,
+.rmc-multi-picker {
+  height: 238px;
+  /*34*7*/
+}
+.rmc-multi-picker {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-align: center;
+          align-items: center;
+}
+.rmc-picker-item {
+  font-size: 16px;
+  height: 34px;
+  line-height: 34px;
+  padding: 0 10px;
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #9b9b9b;
+  width: 100%;
+  box-sizing: border-box;
+}
+.rmc-picker {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  -webkit-box-flex: 1;
+          flex: 1;
+  text-align: center;
+}
+.rmc-picker-mask {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  margin: 0 auto;
+  width: 100%;
+  z-index: 3;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.95)), to(rgba(255, 255, 255, 0.6))), -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0.95)), to(rgba(255, 255, 255, 0.6)));
+  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)), linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
+  background-position: top, bottom;
+  background-size: 100% 204px;
+  background-repeat: no-repeat;
+}
+.rmc-picker-content {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+}
+.rmc-picker-indicator {
+  box-sizing: border-box;
+  width: 100%;
+  height: 34px;
+  position: absolute;
+  left: 0;
+  top: 102px;
+  z-index: 3;
+  border-top: 1PX solid #ddd;
+  border-bottom: 1PX solid #ddd;
+}
+
+/*!
+ * https://github.com/arqex/react-datetime
+ */
+
+.rdt {
+  position: relative;
+}
+.rdtPicker {
+  display: none;
+  position: absolute;
+  min-width: 250px;
+  padding: 4px;
+  margin-top: 1px;
+  z-index: 99999 !important;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,.1);
+  border: 1px solid #f9f9f9;
+}
+.rdtOpen .rdtPicker {
+  display: block;
+}
+.rdtStatic .rdtPicker {
+  box-shadow: none;
+  position: static;
+}
+
+.rdtPicker .rdtTimeToggle {
+  text-align: center;
+}
+
+.rdtPicker table {
+  width: 100%;
+  margin: 0;
+}
+.rdtPicker td,
+.rdtPicker th {
+  text-align: center;
+  height: 28px;
+}
+.rdtPicker td {
+  cursor: pointer;
+}
+.rdtPicker td.rdtDay:hover,
+.rdtPicker td.rdtHour:hover,
+.rdtPicker td.rdtMinute:hover,
+.rdtPicker td.rdtSecond:hover,
+.rdtPicker .rdtTimeToggle:hover {
+  background: #eeeeee;
+  cursor: pointer;
+}
+.rdtPicker td.rdtOld,
+.rdtPicker td.rdtNew {
+  color: #999999;
+}
+.rdtPicker td.rdtToday {
+  position: relative;
+}
+.rdtPicker td.rdtToday:before {
+  content: '';
+  display: inline-block;
+  border-left: 7px solid transparent;
+  border-bottom: 7px solid #428bca;
+  border-top-color: rgba(0, 0, 0, 0.2);
+  position: absolute;
+  bottom: 4px;
+  right: 4px;
+}
+.rdtPicker td.rdtActive,
+.rdtPicker td.rdtActive:hover {
+  background-color: #428bca;
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+.rdtPicker td.rdtActive.rdtToday:before {
+  border-bottom-color: #fff;
+}
+.rdtPicker td.rdtDisabled,
+.rdtPicker td.rdtDisabled:hover {
+  background: none;
+  color: #999999;
+  cursor: not-allowed;
+}
+
+.rdtPicker td span.rdtOld {
+  color: #999999;
+}
+.rdtPicker td span.rdtDisabled,
+.rdtPicker td span.rdtDisabled:hover {
+  background: none;
+  color: #999999;
+  cursor: not-allowed;
+}
+.rdtPicker th {
+  border-bottom: 1px solid #f9f9f9;
+}
+.rdtPicker .dow {
+  width: 14.2857%;
+  border-bottom: none;
+  cursor: default;
+}
+.rdtPicker th.rdtSwitch {
+  width: 100px;
+}
+.rdtPicker th.rdtNext,
+.rdtPicker th.rdtPrev {
+  font-size: 21px;
+  vertical-align: top;
+}
+
+.rdtPrev span,
+.rdtNext span {
+  display: block;
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none;   /* Chrome/Safari/Opera */
+  -khtml-user-select: none;    /* Konqueror */
+  -moz-user-select: none;      /* Firefox */
+  -ms-user-select: none;       /* Internet Explorer/Edge */
+  user-select: none;
+}
+
+.rdtPicker th.rdtDisabled,
+.rdtPicker th.rdtDisabled:hover {
+  background: none;
+  color: #999999;
+  cursor: not-allowed;
+}
+.rdtPicker thead tr:first-of-type th {
+  cursor: pointer;
+}
+.rdtPicker thead tr:first-of-type th:hover {
+  background: #eeeeee;
+}
+
+.rdtPicker tfoot {
+  border-top: 1px solid #f9f9f9;
+}
+
+.rdtPicker button {
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+.rdtPicker button:hover {
+  background-color: #eee;
+}
+
+.rdtPicker thead button {
+  width: 100%;
+  height: 100%;
+}
+
+td.rdtMonth,
+td.rdtYear {
+  height: 50px;
+  width: 25%;
+  cursor: pointer;
+}
+td.rdtMonth:hover,
+td.rdtYear:hover {
+  background: #eee;
+}
+
+.rdtCounters {
+  display: inline-block;
+}
+
+.rdtCounters > div {
+  float: left;
+}
+
+.rdtCounter {
+  height: 100px;
+}
+
+.rdtCounter {
+  width: 40px;
+}
+
+.rdtCounterSeparator {
+  line-height: 100px;
+}
+
+.rdtCounter .rdtBtn {
+  height: 40%;
+  line-height: 40px;
+  cursor: pointer;
+  display: block;
+
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none;   /* Chrome/Safari/Opera */
+  -khtml-user-select: none;    /* Konqueror */
+  -moz-user-select: none;      /* Firefox */
+  -ms-user-select: none;       /* Internet Explorer/Edge */
+  user-select: none;
+}
+.rdtCounter .rdtBtn:hover {
+  background: #eee;
+}
+.rdtCounter .rdtCount {
+  height: 20%;
+  font-size: 1.2em;
+}
+
+.rdtMilli {
+  vertical-align: middle;
+  padding-left: 8px;
+  width: 48px;
+}
+
+.rdtMilli input {
+  width: 100%;
+  font-size: 1.2em;
+  margin-top: 37px;
+}
+
+.rdtTime td {
+  cursor: default;
+}

package/dist/cjs/components/AddTokenToMetamask.d.ts

@@ -0,0 +1,8 @@
+import { BoxProps } from '@dodoex/components';
+import { TokenInfo } from '../hooks/Token';
+export declare function AddTokenToMetamask({ token, size, sx, children, }: {
+    token: TokenInfo;
+    size?: 'small' | 'medium';
+    sx?: BoxProps['sx'];
+    children?: React.ReactNode;
+}): JSX.Element;

package/dist/cjs/components/AddressWithLinkAndCopy.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BoxProps } from '@dodoex/components';
 interface AddressTextProps {
     sx?: BoxProps['sx'];

package/dist/cjs/components/AutoButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BoxProps } from '@dodoex/components';
 export declare function AutoButton({ active, sx, onClick, }: {
     active?: boolean;

package/dist/cjs/components/Bridge/BridgeRouteShortCard.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BridgeRouteI } from '../../hooks/Bridge';
 export default function BridgeRouteShortCard({ route, onClick, }: {
     route?: BridgeRouteI;

package/dist/cjs/components/Bridge/BridgeSummaryDialog/BridgeSummaryDetail.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BridgeRouteI } from '../../../hooks/Bridge/useFetchRoutePriceBridge';
 export default function BridgeSummaryDetail({ route, }: {
     route: BridgeRouteI;

package/dist/cjs/components/Bridge/BridgeSummaryDialog/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BridgeRouteI } from '../../../hooks/Bridge/useFetchRoutePriceBridge';
 export interface BridgeTXRequest {
     data: string;

package/dist/cjs/components/Bridge/BridgeSummaryDialog/orderInfoModal/CrossStep.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import BigNumber from 'bignumber.js';
 import { BridgeStepTool } from '../../../../hooks/Bridge/useFetchRoutePriceBridge';
 export declare function CrossStep({ fromChainId, toChainId, fromTokenAmount, toTokenAmount, fromTokenDecimals, fromTokenSymbol, toTokenDecimals, toTokenSymbol, fromHash, toHash, toolDetails, }: {

package/dist/cjs/components/Bridge/BridgeSummaryDialog/orderInfoModal/EtherscanLinkButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare function EtherscanLinkButton({ chainId, address, children, }: {
     chainId: number;
     address: string | null;

package/dist/cjs/components/Bridge/BridgeSummaryDialog/orderInfoModal/SwapStep.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import BigNumber from 'bignumber.js';
 import { BridgeStepTool } from '../../../../hooks/Bridge/useFetchRoutePriceBridge';
 export declare function SwapStep({ chainId, fromTokenAmount, toTokenAmount, fromTokenDecimals, fromTokenSymbol, toTokenDecimals, toTokenSymbol, hash, toolDetails, }: {

package/dist/cjs/components/Bridge/SelectBridgeDialog/BridgeLogo.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BoxProps } from '@dodoex/components';
 import { BridgeStep } from '../../../hooks/Bridge/useFetchRoutePriceBridge';
 export declare function BridgeLogo({ size, toolDetails, nameMarginLeft, logoMarginLeft, nameSx, }: {

package/dist/cjs/components/Bridge/SelectBridgeDialog/DirectionLine.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare function DirectionLine({ children }: {
     children: React.ReactNode;
 }): JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import BigNumber from 'bignumber.js';
 import { BridgeRouteI } from '../../../hooks/Bridge/useFetchRoutePriceBridge';
 import { TokenInfo } from '../../../hooks/Token/type';

package/dist/cjs/components/Bridge/SelectBridgeDialog/RouteTagList.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BridgeStep } from '../../../hooks/Bridge/useFetchRoutePriceBridge';
 export interface RouteTag {
     type: 'best-price' | 'no-approve';

package/dist/cjs/components/Bridge/SelectBridgeDialog/TokenWithChain.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import BigNumber from 'bignumber.js';
 import { TokenInfo } from '../../../hooks/Token';
 /**

package/dist/cjs/components/Bridge/SelectBridgeDialog/productList.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 export declare const productList: {
     id: string;
     logoURI: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
-        title?: string | undefined;
+        title?: string;
     }>;
     name: string;
 }[];

package/dist/cjs/components/CardWidgets.d.ts

@@ -0,0 +1,49 @@
+import { ChainId } from '@dodoex/api';
+import { BoxProps } from '@dodoex/components';
+import BigNumber from 'bignumber.js';
+import { TokenInfo } from '../hooks/Token';
+export declare function CardStatus({ isMobile, loading, empty, children, }: React.PropsWithChildren<{
+    isMobile: boolean;
+    loading: boolean;
+    empty: boolean;
+}>): JSX.Element;
+export default function FoldBtn({ show, onClick, }: {
+    show: boolean;
+    onClick: () => void;
+}): JSX.Element;
+export declare function TypeText({ color, type }: {
+    color: string;
+    type: string;
+}): JSX.Element;
+export declare function StatusAndTime({ isMobile, statusText, statusColor: statusColorProps, time, alphaColor, sx, }: {
+    isMobile: boolean;
+    statusText: string;
+    statusColor: string;
+    time?: string;
+    alphaColor?: number;
+    sx?: BoxProps['sx'];
+}): JSX.Element;
+export declare function ChainName({ chainId }: {
+    chainId: ChainId;
+}): JSX.Element | null;
+export declare function TokenAndAmount({ token, amount, showChain, hideLogo, canAddMetamask, sx, }: {
+    token: TokenInfo;
+    amount: string | BigNumber;
+    showChain?: boolean;
+    hideLogo?: boolean;
+    canAddMetamask?: boolean;
+    sx?: BoxProps['sx'];
+}): JSX.Element;
+export declare function TokenPairAndAmount({ baseToken, quoteToken, amount, sx, }: {
+    baseToken: TokenInfo;
+    quoteToken: TokenInfo;
+    amount: BigNumber;
+    sx?: BoxProps['sx'];
+}): JSX.Element;
+export declare function TokenPairOrTokenListAndAmount({ baseToken, quoteToken, baseAmount, quoteAmount, sx, }: {
+    baseToken: TokenInfo;
+    quoteToken: TokenInfo;
+    baseAmount: BigNumber;
+    quoteAmount: BigNumber | null;
+    sx?: BoxProps['sx'];
+}): JSX.Element;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type ConfirmProps = React.PropsWithChildren<{
+export type ConfirmProps = React.PropsWithChildren<{
     open: boolean;
     onClose: () => void;
     title?: React.ReactNode;
@@ -12,5 +12,6 @@ export declare type ConfirmProps = React.PropsWithChildren<{
     confirmLoading?: boolean;
     isManualClose?: boolean;
     onConfirm?: () => void;
+    modal?: boolean;
 }>;
 export default function Confirm(props: ConfirmProps): JSX.Element;

package/dist/cjs/components/ConnectWallet/ConnectWalletDialog.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export default function ConnectWalletDialog({ open, onClose, }: {
     open: boolean;
     onClose: () => void;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonProps } from '@dodoex/components';
 import { ChainId } from '@dodoex/api';
 export default function NeedConnectButton({ chainId, includeButton, ...props }: ButtonProps & {

package/dist/cjs/components/ConnectWallet/OpenConnectWalletInfo.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export default function OpenConnectWalletInfo(): JSX.Element;

package/dist/cjs/components/CopyTooltipToast.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BoxProps } from '@dodoex/components';
 export declare function CopyTooltipToast({ copyText, size, sx, componentProps, onClick, }: {
     copyText?: string;

package/dist/cjs/components/DataCard/DataCardGroup.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BoxProps } from '@dodoex/components';
 export declare function DataCardGroup({ children, sx, gap, repeatBaseForLargeScreen, }: {
     children?: React.ReactNode;

package/dist/cjs/components/DateTimePickerInput/components/MobileDateTimePicker.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import 'rmc-date-picker/assets/index.css';
+import 'rmc-picker/assets/index.css';
+interface Props {
+    value: number | null;
+    onConfirm: (val: number) => void;
+    minDate?: number;
+    maxDate?: number;
+    valueFormat?: string;
+    placeholder?: string;
+}
+export declare const MobileDateTimePicker: React.FC<Props>;
+export {};

package/dist/cjs/components/DateTimePickerInput/components/PCDateTimePicker.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import 'react-datetime/css/react-datetime.css';
+interface Props {
+    value: number | null;
+    onChange: (val: number | null) => void;
+    minDate?: number;
+    maxDate?: number;
+    valueFormat?: string;
+    placeholder?: string;
+}
+export declare const PCDateTimePicker: React.FC<Props>;
+export {};

package/dist/cjs/components/DateTimePickerInput/index.d.ts

@@ -0,0 +1,10 @@
+type Props = {
+    placeholder?: string;
+    value: number | null;
+    onChange: (date: number | null) => void;
+    minDate?: number;
+    maxDate?: number;
+    valueFormat?: string;
+};
+export declare const DateTimePickerInput: React.FC<Props>;
+export {};

package/dist/cjs/components/DateTimePickerInput/utils/index.d.ts

@@ -0,0 +1 @@
+export declare const getShowDateTime: (value: number | null, minDate?: number, maxDate?: number) => number;

package/dist/cjs/components/ErrorMessageDialog.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export default function ErrorMessageDialog({ message, onClose, }: {
     message?: string;
     onClose: () => void;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BoxProps } from '@dodoex/components';
 export default function GoBack({ sx, onClick, }: {
     sx?: BoxProps['sx'];

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BoxProps } from '@dodoex/components';
 export declare function HowItWorks({ title, desc, linkTo, LeftImage, sx, }: {
     title: React.ReactNode;

package/dist/cjs/components/List/FailedList.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BoxProps } from '@dodoex/components';
 export declare function FailedList({ sx, refresh, }: {
     sx?: BoxProps['sx'];

package/dist/cjs/components/LoadMore.d.ts

@@ -0,0 +1,8 @@
+import { BoxProps } from '@dodoex/components';
+export default function LoadMore({ height, sx, onClick, hasMore, loading, }: {
+    height?: number | string;
+    sx?: BoxProps['sx'];
+    onClick: () => void;
+    hasMore?: boolean;
+    loading?: boolean;
+}): JSX.Element | null;

package/dist/cjs/components/LoadingRotation.d.ts

@@ -0,0 +1,3 @@
+export interface LoadingRotationProps {
+}
+export declare const LoadingRotation: (props: LoadingRotationProps) => JSX.Element;

package/dist/cjs/components/Message/Countdown.d.ts

@@ -0,0 +1,12 @@
+import { BoxProps } from '@dodoex/components';
+import React from 'react';
+interface Props {
+    size: number;
+    color: string;
+    time: string;
+    strokeWidth?: number | string;
+    sx?: BoxProps['sx'];
+}
+declare function Countdown({ size, color, time, strokeWidth, sx }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Countdown>;
+export default _default;

package/dist/cjs/components/Message/index.d.ts

@@ -0,0 +1 @@
+export default function Message(): JSX.Element;

package/dist/cjs/components/Select.d.ts

@@ -0,0 +1,15 @@
+import { BoxProps } from '@dodoex/components';
+import React from 'react';
+export default function Select<V extends string | number = string>({ value, onChange, placeholder, options, sx, readOnly, valueOnlyIcon, }: {
+    value: V | undefined;
+    onChange: (value: V | undefined) => void;
+    placeholder?: string;
+    options: Array<{
+        logo?: React.ReactNode;
+        key: V;
+        value: string | React.ReactNode;
+    }>;
+    sx?: BoxProps['sx'];
+    readOnly?: boolean;
+    valueOnlyIcon?: boolean;
+}): JSX.Element;

package/dist/cjs/components/SelectChain.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import { BoxProps } from '@dodoex/components';
-export default function SelectChain({ chainId, setChainId, logoWidth, mobileLogoWidth, mainLogoWidth, mainMobileLogoWidth, notShowAllChain, sx, }: {
+export default function SelectChain({ chainId, setChainId, logoWidth, mobileLogoWidth, mainLogoWidth, mainMobileLogoWidth, notShowAllChain, valueOnlyIcon, sx, }: {
     chainId: number | undefined;
     setChainId: (chainId: number | undefined) => void;
     logoWidth?: number;
@@ -8,5 +7,6 @@ export default function SelectChain({ chainId, setChainId, logoWidth, mobileLogo
     mainLogoWidth?: number;
     mainMobileLogoWidth?: number;
     notShowAllChain?: boolean;
+    valueOnlyIcon?: boolean;
     sx?: BoxProps['sx'];
 }): JSX.Element;

package/dist/cjs/components/Swap/SwapOrderHistory/PriceWithToggle.d.ts

@@ -0,0 +1,10 @@
+import { BoxProps } from '@dodoex/components';
+import { TokenInfo } from '../../../hooks/Token';
+export declare function PriceWithToggle({ fromToken, toToken, fromTokenPrice, toTokenPrice, sx, children, }: {
+    fromToken: TokenInfo;
+    toToken: TokenInfo;
+    fromTokenPrice: string | null | undefined;
+    toTokenPrice: string | null | undefined;
+    sx?: BoxProps['sx'];
+    children?: React.ReactNode;
+}): JSX.Element;

package/dist/cjs/components/Swap/SwapOrderHistory/RoutingCard.d.ts

@@ -0,0 +1,7 @@
+import { MidPathType } from '../../../hooks/useRouteVisionData';
+import { TokenInfo } from '../../../hooks/Token';
+export default function RoutingCard({ routing, fromTokenRaw, toTokenRaw, }: {
+    routing: MidPathType;
+    fromTokenRaw: TokenInfo;
+    toTokenRaw: TokenInfo;
+}): JSX.Element;

package/dist/cjs/components/Swap/SwapOrderHistory/RoutingVision.d.ts

@@ -0,0 +1,25 @@
+import { BoxProps } from '@dodoex/components';
+import { TokenInfo } from '../../../hooks/Token';
+import { MidPathType } from '../../../hooks/useRouteVisionData';
+export declare function Dot({ sx }: {
+    sx?: BoxProps['sx'];
+}): JSX.Element;
+export declare function Triangle({ sx }: {
+    sx?: BoxProps['sx'];
+}): JSX.Element;
+export declare function DashedLine({ sx }: {
+    sx?: BoxProps['sx'];
+}): JSX.Element;
+interface Props {
+    routeData: MidPathType[];
+    fromTokenRaw: TokenInfo;
+    toTokenRaw: TokenInfo;
+}
+/**
+ * Path visualization
+ */
+export declare function MobileRoutingVision({ routeData, fromTokenRaw, toTokenRaw, sx, }: Props & {
+    sx?: BoxProps['sx'];
+}): JSX.Element;
+export declare function PCRoutingVision({ routeData, fromTokenRaw, toTokenRaw, }: Props): JSX.Element;
+export {};