@lifi/widget 1.13.2 → 1.13.5

package/cjs/components/SwapRouteCard/SwapRouteCard.style.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare const Label: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)" | undefined;
+    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)", string>> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    active?: boolean | undefined;
+}, {}, {}>;

package/cjs/components/SwapRouteCard/SwapRouteCard.style.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const utils_1 = require("../../utils");
+exports.Label = (0, styles_1.styled)(material_1.Typography, {
+    shouldForwardProp: (prop) => prop !== 'active',
+})(({ theme, active }) => ({
+    backgroundColor: active ? theme.palette.primary.main : 'transparent',
+    border: '1px solid',
+    borderColor: active
+        ? theme.palette.primary.main
+        : theme.palette.mode === 'light'
+            ? theme.palette.grey[500]
+            : theme.palette.grey[600],
+    borderRadius: theme.shape.borderRadiusSecondary,
+    color: active
+        ? (0, utils_1.getContrastTextColor)(theme, theme.palette.primary.main)
+        : theme.palette.text.secondary,
+    padding: theme.spacing(0.75),
+    fontSize: 12,
+    lineHeight: 1,
+    fontWeight: '600',
+    height: 24,
+    letterSpacing: '0.05rem',
+    textTransform: 'uppercase',
+    display: 'inline-flex',
+    userSelect: 'none',
+}));

package/cjs/components/SwapRouteCard/SwapRouteCardSkeleton.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { BoxProps } from '@mui/material';
+import type { SwapRouteCardSkeletonProps } from './types';
+export declare const SwapRouteCardSkeleton: React.FC<SwapRouteCardSkeletonProps & BoxProps>;

package/cjs/components/SwapRouteCard/SwapRouteCardSkeleton.js

@@ -0,0 +1,32 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwapRouteCardSkeleton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const Card_1 = require("../Card");
+const SwapRouteCardSkeleton = (_a) => {
+    var { dense } = _a, other = __rest(_a, ["dense"]);
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ dense: dense, indented: true }, other, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 120, height: 24, sx: { borderRadius: 0.5 } }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ my: 2 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                        } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mr: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32 }) })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 96, height: 32 })] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ ml: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 102, height: 16, sx: { borderRadius: 0.5 } }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                } }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 56, height: 20 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 52, height: 16 })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+                            display: 'flex',
+                            alignItems: 'flex-end',
+                            flexDirection: 'column',
+                        } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 40, height: 20 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 16 })] }))] }))] })));
+};
+exports.SwapRouteCardSkeleton = SwapRouteCardSkeleton;

package/cjs/components/SwapRouteCard/SwapRouteNotFoundCard.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { BoxProps } from '@mui/material';
+import type { SwapRouteCardSkeletonProps } from './types';
+export declare const SwapRouteNotFoundCard: React.FC<SwapRouteCardSkeletonProps & BoxProps>;

package/cjs/components/SwapRouteCard/SwapRouteNotFoundCard.js

@@ -0,0 +1,30 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwapRouteNotFoundCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const SwapRouteNotFoundCard = (_a) => {
+    var { dense } = _a, other = __rest(_a, ["dense"]);
+    const { t } = (0, react_i18next_1.useTranslation)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'column',
+            flex: 1,
+        }, py: 2.375 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 48 }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Route, { fontSize: "inherit" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: t('swap.info.title.routeNotFound') })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: t('swap.info.message.routeNotFound') }))] })));
+};
+exports.SwapRouteNotFoundCard = SwapRouteNotFoundCard;

package/cjs/components/SwapRouteCard/index.d.ts

@@ -0,0 +1,3 @@
+export * from './SwapRouteCard';
+export * from './SwapRouteCardSkeleton';
+export * from './SwapRouteNotFoundCard';

package/cjs/components/SwapRouteCard/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./SwapRouteCard"), exports);
+__exportStar(require("./SwapRouteCardSkeleton"), exports);
+__exportStar(require("./SwapRouteNotFoundCard"), exports);

package/cjs/components/SwapRouteCard/types.d.ts

@@ -0,0 +1,9 @@
+import type { Route } from '@lifi/sdk';
+export interface SwapRouteCardProps {
+    route: Route;
+    dense?: boolean;
+    active?: boolean;
+}
+export interface SwapRouteCardSkeletonProps {
+    dense?: boolean;
+}

package/cjs/components/SwapRouteCard/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/components/Switch.d.ts

@@ -0,0 +1 @@
+export declare const Switch: import("@emotion/styled").StyledComponent<import("@mui/material").SwitchProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/components/Switch.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const Switch_1 = require("@mui/material/Switch");
+exports.Switch = (0, styles_1.styled)(material_1.Switch)(({ theme }) => ({
+    width: 42,
+    height: 24,
+    padding: 0,
+    [`.${Switch_1.switchClasses.switchBase}`]: {
+        padding: 0,
+        margin: theme.spacing(0.25),
+        transitionDuration: theme.transitions.duration.standard,
+        [`&.${Switch_1.switchClasses.checked}`]: {
+            transform: 'translateX(18px)',
+            color: theme.palette.common.white,
+            [`& + .${Switch_1.switchClasses.track}`]: {
+                backgroundColor: theme.palette.primary.main,
+                opacity: 1,
+                border: 0,
+            },
+            [`&.${Switch_1.switchClasses.disabled} + .${Switch_1.switchClasses.track}`]: {
+                opacity: 0.5,
+            },
+        },
+        [`&.Mui-focusVisible .${Switch_1.switchClasses.thumb}`]: {
+            color: theme.palette.primary.main,
+            border: '6px solid',
+            borderColor: theme.palette.common.white,
+        },
+        [`&.${Switch_1.switchClasses.disabled} .${Switch_1.switchClasses.thumb}`]: {
+            color: theme.palette.mode === 'light'
+                ? theme.palette.grey[100]
+                : theme.palette.grey[600],
+        },
+        [`&.${Switch_1.switchClasses.disabled} + .${Switch_1.switchClasses.track}`]: {
+            opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
+        },
+    },
+    [`.${Switch_1.switchClasses.thumb}`]: {
+        boxSizing: 'border-box',
+        width: 20,
+        height: 20,
+    },
+    [`.${Switch_1.switchClasses.track}`]: {
+        borderRadius: 24 / 2,
+        backgroundColor: theme.palette.mode === 'light'
+            ? theme.palette.grey[400]
+            : theme.palette.grey[800],
+        opacity: 1,
+        transition: theme.transitions.create(['background-color'], {
+            duration: theme.transitions.duration.standard,
+        }),
+    },
+}));

package/cjs/components/TextFitter/TextFitter.d.ts

@@ -0,0 +1,3 @@
+import type { PropsWithChildren } from 'react';
+import type { TextFitterProps } from './types';
+export declare const TextFitter: React.FC<PropsWithChildren<TextFitterProps>>;

package/cjs/components/TextFitter/TextFitter.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextFitter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("@mui/material/styles");
+const react_1 = require("react");
+const initialState = {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+};
+const TextFitter = ({ children, width = '100%', height, maxHeight, preserveAspectRatio = 'xMinYMid meet', textStyle, svgStyle, cropTop, cropBottom, onFit, }) => {
+    const theme = (0, styles_1.useTheme)();
+    const textRef = (0, react_1.useRef)(null);
+    const [viewBox, setViewBox] = (0, react_1.useState)(initialState);
+    // const [textRect, setTextRect] = useState<Partial<DOMRect>>(initialState);
+    const calculateBox = (0, react_1.useCallback)(() => {
+        if (!textRef.current) {
+            return;
+        }
+        const box = textRef.current.getBBox();
+        if (cropTop) {
+            box.y += box.height * cropTop;
+            box.height -= box.height * cropTop;
+        }
+        if (cropBottom) {
+            box.height -= box.height * cropBottom;
+        }
+        setViewBox(box);
+        // setTextRect(textRef.current.getBoundingClientRect());
+        onFit === null || onFit === void 0 ? void 0 : onFit();
+    }, [cropBottom, cropTop, onFit]);
+    (0, react_1.useLayoutEffect)(() => {
+        calculateBox();
+    }, [calculateBox, children]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (document.fonts) {
+            document.fonts.ready.then(() => {
+                calculateBox();
+            });
+        }
+    }, [calculateBox]);
+    return ((0, jsx_runtime_1.jsx)("svg", Object.assign({ style: svgStyle, viewBox: `${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`, width: width, height: height, 
+        // height={
+        //   textRect.height && maxHeight && textRect.height >= maxHeight
+        //     ? maxHeight
+        //     : height
+        // }
+        preserveAspectRatio: preserveAspectRatio, fill: theme.palette.text.primary }, { children: (0, jsx_runtime_1.jsx)("text", Object.assign({ x: 0, y: 0, style: textStyle, ref: textRef }, { children: children })) })));
+};
+exports.TextFitter = TextFitter;

package/cjs/components/TextFitter/index.d.ts

@@ -0,0 +1 @@
+export * from './TextFitter';

package/cjs/components/TextFitter/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TextFitter"), exports);

package/cjs/components/TextFitter/types.d.ts

@@ -0,0 +1,12 @@
+import type { CSSProperties } from 'react';
+export interface TextFitterProps {
+    textStyle?: CSSProperties;
+    svgStyle?: CSSProperties;
+    onFit?(): void;
+    maxHeight?: string | number;
+    height?: string | number;
+    width?: string | number;
+    preserveAspectRatio?: string;
+    cropTop?: number;
+    cropBottom?: number;
+}

package/cjs/components/TextFitter/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/components/Token/Token.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { TokenAmount } from '@lifi/sdk';
+import type { BoxProps } from '@mui/material';
+export declare const Token: React.FC<{
+    token: TokenAmount;
+    connected?: boolean;
+} & BoxProps>;

package/cjs/components/Token/Token.js

@@ -0,0 +1,35 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Token = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const hooks_1 = require("../../hooks");
+const utils_1 = require("../../utils");
+const TextFitter_1 = require("../TextFitter");
+const TokenAvatar_1 = require("../TokenAvatar");
+const Token_style_1 = require("./Token.style");
+const Token = (_a) => {
+    var _b;
+    var { token, connected } = _a, other = __rest(_a, ["token", "connected"]);
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { getChainById } = (0, hooks_1.useChains)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ flex: 1 }, other, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", flex: 1 }, { children: [(0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, sx: { marginRight: 2 } }), (0, jsx_runtime_1.jsx)(TextFitter_1.TextFitter, Object.assign({ height: 32, textStyle: {
+                            fontWeight: 700,
+                        } }, { children: (0, utils_1.formatTokenAmount)(token.amount, token.decimals) }))] })), (0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, Object.assign({ connected: connected }, { children: t(`swap.tokenOnChain`, {
+                    tokenSymbol: token.symbol,
+                    chainName: (_b = getChainById(token.chainId)) === null || _b === void 0 ? void 0 : _b.name,
+                }) }))] })));
+};
+exports.Token = Token;

package/cjs/components/Token/Token.style.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+export declare const TextSecondary: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)" | undefined;
+    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)", string>> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    connected?: boolean | undefined;
+}, {}, {}>;
+export declare const TokenDivider: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/components/Token/Token.style.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TokenDivider = exports.TextSecondary = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+exports.TextSecondary = (0, styles_1.styled)(material_1.Typography, {
+    shouldForwardProp: (prop) => prop !== 'connected',
+})(({ theme, connected }) => ({
+    fontSize: 12,
+    lineHeight: 1,
+    fontWeight: 500,
+    color: theme.palette.text.secondary,
+    borderLeftWidth: connected ? 2 : 0,
+    borderLeftStyle: 'solid',
+    borderColor: theme.palette.mode === 'light'
+        ? theme.palette.grey[300]
+        : theme.palette.grey[800],
+    margin: connected
+        ? theme.spacing(0.5, 0, 0, 1.875)
+        : theme.spacing(0.5, 0, 0, 6),
+    padding: connected
+        ? theme.spacing(0, 0, 0, 3.875)
+        : theme.spacing(0, 0, 0, 0),
+}));
+exports.TokenDivider = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    height: 12,
+    borderLeftWidth: 2,
+    borderLeftStyle: 'solid',
+    borderColor: theme.palette.mode === 'light'
+        ? theme.palette.grey[300]
+        : theme.palette.grey[800],
+    margin: theme.spacing(0, 0, 0, 3.875),
+    padding: theme.spacing(0, 0, 0, 3.875),
+}));

package/cjs/components/Token/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Token';
+export * from './Token.style';

package/cjs/components/Token/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Token"), exports);
+__exportStar(require("./Token.style"), exports);

package/cjs/components/TokenAvatar/TokenAvatar.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { Token } from '@lifi/sdk';
+import type { SxProps, Theme } from '@mui/material';
+export declare const TokenAvatar: React.FC<{
+    token: Token;
+    sx?: SxProps<Theme>;
+}>;

package/cjs/components/TokenAvatar/TokenAvatar.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TokenAvatar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const hooks_1 = require("../../hooks");
+const SmallAvatar_1 = require("../SmallAvatar");
+const TokenAvatar = ({ token, sx }) => {
+    const { chain } = (0, hooks_1.useChain)(token.chainId);
+    const { token: chainToken } = (0, hooks_1.useToken)(token.chainId, token.address);
+    return ((0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: chain ? ((0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, Object.assign({ src: chain.logoURI, alt: chain.name }, { children: chain.name[0] }))) : null, sx: sx }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ src: token.logoURI || (chainToken === null || chainToken === void 0 ? void 0 : chainToken.logoURI), alt: token.symbol }, { children: token.symbol[0] })) })));
+};
+exports.TokenAvatar = TokenAvatar;

package/cjs/components/TokenAvatar/TokenAvatar.style.d.ts

@@ -0,0 +1 @@
+export declare const TokenAvatarGroup: import("@emotion/styled").StyledComponent<import("@mui/material").AvatarGroupProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/components/TokenAvatar/TokenAvatar.style.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TokenAvatarGroup = void 0;
+const material_1 = require("@mui/material");
+const Avatar_1 = require("@mui/material/Avatar");
+const Badge_1 = require("@mui/material/Badge");
+const styles_1 = require("@mui/material/styles");
+exports.TokenAvatarGroup = (0, styles_1.styled)(material_1.AvatarGroup)(({ theme }) => ({
+    [`& .${Avatar_1.avatarClasses.root}`]: {
+        background: theme.palette.background.paper,
+    },
+    [`& .${Badge_1.badgeClasses.badge}:last-child .${Avatar_1.avatarClasses.root}`]: {
+        marginLeft: theme.spacing(-1),
+        boxSizing: 'border-box',
+    },
+    [`& .${Badge_1.badgeClasses.root}:last-child`]: {
+        marginLeft: theme.spacing(1),
+    },
+}));

package/cjs/components/TokenAvatar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TokenAvatar';
+export * from './TokenAvatar.style';

package/cjs/components/TokenAvatar/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TokenAvatar"), exports);
+__exportStar(require("./TokenAvatar.style"), exports);

package/cjs/components/TokenList/TokenList.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import type { TokenListProps } from './types';
+export declare const TokenList: FC<TokenListProps>;

package/cjs/components/TokenList/TokenList.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TokenList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const hooks_1 = require("../../hooks");
+const SwapFormProvider_1 = require("../../providers/SwapFormProvider");
+const WalletProvider_1 = require("../../providers/WalletProvider");
+const TokenNotFound_1 = require("./TokenNotFound");
+const VirtualizedTokenList_1 = require("./VirtualizedTokenList");
+const TokenList = ({ formType, height, onClick, }) => {
+    var _a, _b;
+    const parentRef = (0, react_1.useRef)(null);
+    const { account } = (0, WalletProvider_1.useWallet)();
+    const { setValue, getValues } = (0, react_hook_form_1.useFormContext)();
+    const [selectedChainId] = (0, react_hook_form_1.useWatch)({
+        name: [SwapFormProvider_1.SwapFormKeyHelper.getChainKey(formType)],
+    });
+    const [tokenSearchFilter] = (0, hooks_1.useDebouncedWatch)([SwapFormProvider_1.SwapFormKey.TokenSearchFilter], 250);
+    const { tokens: chainTokens, tokensWithBalance, isLoading: isTokensLoading, isBalanceLoading, featuredTokens, } = (0, hooks_1.useTokenBalances)(selectedChainId);
+    let filteredTokens = ((_a = tokensWithBalance !== null && tokensWithBalance !== void 0 ? tokensWithBalance : chainTokens) !== null && _a !== void 0 ? _a : []);
+    const searchFilter = (_b = tokenSearchFilter === null || tokenSearchFilter === void 0 ? void 0 : tokenSearchFilter.toUpperCase()) !== null && _b !== void 0 ? _b : '';
+    filteredTokens = tokenSearchFilter
+        ? filteredTokens.filter((token) => token.name.toUpperCase().includes(searchFilter) ||
+            token.symbol.toUpperCase().includes(searchFilter) ||
+            token.address.toUpperCase().includes(searchFilter))
+        : filteredTokens;
+    const tokenSearchEnabled = !filteredTokens.length && !isTokensLoading;
+    const { token: searchedToken, isLoading: isSearchedTokenLoading } = (0, hooks_1.useTokenSearch)(tokenSearchFilter, selectedChainId, tokenSearchEnabled);
+    const isLoading = isTokensLoading || (tokenSearchEnabled && isSearchedTokenLoading);
+    const tokens = filteredTokens.length
+        ? filteredTokens
+        : searchedToken
+            ? [searchedToken]
+            : filteredTokens;
+    const handleTokenClick = (0, react_1.useCallback)((tokenAddress) => {
+        setValue(SwapFormProvider_1.SwapFormKeyHelper.getTokenKey(formType), tokenAddress);
+        setValue(SwapFormProvider_1.SwapFormKeyHelper.getAmountKey(formType), '');
+        const oppositeFormType = formType === 'from' ? 'to' : 'from';
+        const [selectedOppositeToken, selectedOppositeChain, selectedChain] = getValues([
+            SwapFormProvider_1.SwapFormKeyHelper.getTokenKey(oppositeFormType),
+            SwapFormProvider_1.SwapFormKeyHelper.getChainKey(oppositeFormType),
+            SwapFormProvider_1.SwapFormKeyHelper.getChainKey(formType),
+        ]);
+        if (selectedOppositeToken === tokenAddress &&
+            selectedOppositeChain === selectedChain) {
+            setValue(SwapFormProvider_1.SwapFormKeyHelper.getTokenKey(oppositeFormType), '');
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    }, [formType, getValues, onClick, setValue]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ ref: parentRef, style: { height, overflow: 'auto' } }, { children: [!tokens.length && !isLoading ? (0, jsx_runtime_1.jsx)(TokenNotFound_1.TokenNotFound, {}) : null, (0, jsx_runtime_1.jsx)(VirtualizedTokenList_1.VirtualizedTokenList, { tokens: tokens, featuredTokensLength: featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.length, scrollElementRef: parentRef, chainId: selectedChainId, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isActive, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] })));
+};
+exports.TokenList = TokenList;