@lifi/widget 3.0.0-alpha.0 → 3.0.0-alpha.10

package/cjs/components/TextFitter/TextFitter.js

@@ -1,58 +0,0 @@
-"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 react_intersection_observer_1 = require("react-intersection-observer");
-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 [ref] = (0, react_intersection_observer_1.useInView)({
-        onChange(inView) {
-            if (inView) {
-                calculateBox();
-            }
-        },
-    });
-    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);
-        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", { 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, ref: ref, children: (0, jsx_runtime_1.jsx)("text", { x: 0, y: 0, style: textStyle, ref: textRef, children: children }) }));
-};
-exports.TextFitter = TextFitter;

package/cjs/components/TextFitter/index.js

@@ -1,17 +0,0 @@
-"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.js

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

package/cjs/components/Token/Token.js

@@ -1,44 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TokenBase = exports.TokenFallback = 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 SmallAvatar_1 = require("../SmallAvatar");
-const TextFitter_1 = require("../TextFitter");
-const TokenAvatar_1 = require("../TokenAvatar");
-const Token_style_1 = require("./Token.style");
-const Token = ({ token, ...other }) => {
-    if (!token.priceUSD || !token.logoURI) {
-        return (0, jsx_runtime_1.jsx)(exports.TokenFallback, { token: token, ...other });
-    }
-    return (0, jsx_runtime_1.jsx)(exports.TokenBase, { token: token, ...other });
-};
-exports.Token = Token;
-const TokenFallback = ({ token, isLoading, ...other }) => {
-    const { token: chainToken, isLoading: isLoadingToken } = (0, hooks_1.useToken)(token.chainId, token.address);
-    return ((0, jsx_runtime_1.jsx)(exports.TokenBase, { token: { ...token, ...chainToken }, isLoading: isLoading || isLoadingToken, ...other }));
-};
-exports.TokenFallback = TokenFallback;
-const TokenBase = ({ token, connected, step, disableDescription, isLoading, ...other }) => {
-    const { t } = (0, react_i18next_1.useTranslation)();
-    const { chain } = (0, hooks_1.useChain)(token?.chainId);
-    const formattedTokenAmount = (0, utils_1.formatTokenAmount)(token.amount, token.decimals);
-    const formattedTokenPrice = (0, utils_1.formatTokenPrice)(formattedTokenAmount, token.priceUSD);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, ...other, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", flex: 1, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain, isLoading: isLoading, sx: { marginRight: 2 } }), isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 112, height: 32, variant: "text" })) : ((0, jsx_runtime_1.jsx)(TextFitter_1.TextFitter, { height: 30, textStyle: {
-                            fontWeight: 700,
-                        }, children: t('format.number', {
-                            value: formattedTokenAmount,
-                        }) }))] }), (0, jsx_runtime_1.jsxs)(Token_style_1.TextSecondaryContainer, { connected: connected, component: "span", children: [isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 48, height: 12, variant: "rounded", sx: { marginTop: 0.5 } })) : ((0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, { connected: connected, children: t(`format.currency`, {
-                            value: formattedTokenPrice,
-                        }) })), !disableDescription ? ((0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, { connected: connected, px: 0.5, dot: true, children: "\u2022" })) : null, !step && !disableDescription ? (isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 96, height: 12, variant: "rounded", sx: { marginTop: 0.5 } })) : ((0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, { connected: connected, children: t(`main.tokenOnChain`, {
-                            tokenSymbol: token.symbol,
-                            chainName: chain?.name,
-                        }) }))) : null, step ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "flex-end", height: 12, mt: 0.5, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { pr: 0.75, children: (0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, { src: step.toolDetails.logoURI, alt: step.toolDetails.name, sx: {
-                                        border: 0,
-                                        marginBottom: -0.25,
-                                    }, children: step.toolDetails.name[0] }) }), (0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, { connected: true, children: step.toolDetails.name })] })) : null] })] }));
-};
-exports.TokenBase = TokenBase;

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

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-export declare const TextSecondaryContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    connected?: boolean | undefined;
-}, {}, {}>;
-export declare const TextSecondary: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "className" | "style" | "classes" | "children" | "sx" | "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" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "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" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    connected?: boolean | undefined;
-    dot?: boolean | undefined;
-}, {}, {}>;
-export declare const TokenDivider: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -1,44 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TokenDivider = exports.TextSecondary = exports.TextSecondaryContainer = void 0;
-const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
-exports.TextSecondaryContainer = (0, styles_1.styled)(material_1.Box, {
-    shouldForwardProp: (prop) => prop !== 'connected',
-})(({ theme, connected }) => ({
-    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, 0, 0, 6),
-    padding: connected
-        ? theme.spacing(0, 0, 0, 3.875)
-        : theme.spacing(0, 0, 0, 0),
-    display: 'flex',
-    alignItems: 'flex-start',
-    flexWrap: 'wrap',
-}));
-exports.TextSecondary = (0, styles_1.styled)(material_1.Typography, {
-    shouldForwardProp: (prop) => !['connected', 'dot'].includes(prop),
-})(({ theme, connected, dot }) => ({
-    fontSize: 12,
-    lineHeight: 1,
-    fontWeight: 500,
-    color: dot
-        ? (0, styles_1.alpha)(theme.palette.text.secondary, 0.56)
-        : theme.palette.text.secondary,
-    marginTop: connected ? 0 : theme.spacing(0.5),
-}));
-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.js

@@ -1,18 +0,0 @@
-"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.js

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TokenAvatarDefault = exports.TokenAvatar = exports.TokenAvatarBase = exports.TokenAvatarFallback = 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_style_1 = require("./TokenAvatar.style");
-const TokenAvatarFallback = ({ token, isLoading, sx }) => {
-    const { chain } = (0, hooks_1.useChain)(token?.chainId);
-    const { token: chainToken, isLoading: isLoadingToken } = (0, hooks_1.useToken)(token?.chainId, token?.address);
-    return ((0, jsx_runtime_1.jsx)(exports.TokenAvatarBase, { token: chainToken ?? token, isLoading: isLoading || isLoadingToken, chain: chain, sx: sx }));
-};
-exports.TokenAvatarFallback = TokenAvatarFallback;
-const TokenAvatarBase = ({ token, chain, isLoading, sx }) => {
-    return ((0, jsx_runtime_1.jsx)(material_1.Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: chain && !isLoading ? ((0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, { src: chain.logoURI, alt: chain.name, children: chain.name[0] })) : ((0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatarSkeleton, {})), sx: sx, children: isLoading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 32, height: 32, variant: "circular" })) : ((0, jsx_runtime_1.jsx)(material_1.Avatar, { src: token?.logoURI, alt: token?.symbol, children: token?.symbol?.[0] })) }));
-};
-exports.TokenAvatarBase = TokenAvatarBase;
-const TokenAvatar = ({ token, chain, isLoading, sx }) => {
-    if (!chain || !token?.logoURI) {
-        return (0, jsx_runtime_1.jsx)(exports.TokenAvatarFallback, { token: token, isLoading: isLoading, sx: sx });
-    }
-    return ((0, jsx_runtime_1.jsx)(exports.TokenAvatarBase, { token: token, chain: chain, isLoading: isLoading, sx: sx }));
-};
-exports.TokenAvatar = TokenAvatar;
-const TokenAvatarDefault = ({ sx }) => {
-    return ((0, jsx_runtime_1.jsx)(material_1.Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: (0, jsx_runtime_1.jsx)(TokenAvatar_style_1.AvatarDefaultBadge, { width: 16, height: 16 }), sx: sx, children: (0, jsx_runtime_1.jsx)(TokenAvatar_style_1.AvatarDefault, { width: 32, height: 32 }) }));
-};
-exports.TokenAvatarDefault = TokenAvatarDefault;

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

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-export declare const TokenAvatarGroup: import("@emotion/styled").StyledComponent<import("@mui/material").AvatarGroupProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const AvatarDefault: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const AvatarDefaultBadge: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AvatarDefaultBadge = exports.AvatarDefault = 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 }) => ({
-    [`& .${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),
-    },
-}));
-exports.AvatarDefault = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
-    background: theme.palette.mode === 'light'
-        ? theme.palette.grey[300]
-        : theme.palette.grey[800],
-    borderRadius: '50%',
-}));
-exports.AvatarDefaultBadge = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
-    background: theme.palette.mode === 'light'
-        ? theme.palette.grey[300]
-        : theme.palette.grey[800],
-    border: `2px solid ${theme.palette.background.paper}`,
-    borderRadius: '50%',
-}));

package/cjs/components/TokenAvatar/index.js

@@ -1,18 +0,0 @@
-"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.js

@@ -1,47 +0,0 @@
-"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 providers_1 = require("../../providers");
-const TokenNotFound_1 = require("./TokenNotFound");
-const VirtualizedTokenList_1 = require("./VirtualizedTokenList");
-const useTokenSelect_1 = require("./useTokenSelect");
-const TokenList = ({ formType, height, onClick, }) => {
-    const parentRef = (0, react_1.useRef)(null);
-    const { account } = (0, hooks_1.useAccount)();
-    const [selectedChainId] = (0, react_hook_form_1.useWatch)({
-        name: [providers_1.FormKeyHelper.getChainKey(formType)],
-    });
-    const [tokenSearchFilter] = (0, hooks_1.useDebouncedWatch)([providers_1.FormKey.TokenSearchFilter], 320);
-    const { chain, isLoading: isChainLoading } = (0, hooks_1.useChain)(selectedChainId);
-    const { tokens: chainTokens, tokensWithBalance, isLoading: isTokensLoading, isBalanceLoading, featuredTokens, } = (0, hooks_1.useTokenBalances)(selectedChainId);
-    let filteredTokens = (tokensWithBalance ??
-        chainTokens ??
-        []);
-    const searchFilter = tokenSearchFilter?.toUpperCase() ?? '';
-    filteredTokens = tokenSearchFilter
-        ? filteredTokens.filter((token) => token.name.toUpperCase().includes(searchFilter) ||
-            token.symbol.toUpperCase().includes(searchFilter) ||
-            token.address.toUpperCase().includes(searchFilter))
-        : filteredTokens;
-    const tokenSearchEnabled = !isTokensLoading &&
-        !filteredTokens.length &&
-        !!tokenSearchFilter &&
-        !!selectedChainId;
-    const { token: searchedToken, isLoading: isSearchedTokenLoading } = (0, hooks_1.useTokenSearch)(selectedChainId, tokenSearchFilter, tokenSearchEnabled);
-    const isLoading = isTokensLoading ||
-        isChainLoading ||
-        (tokenSearchEnabled && isSearchedTokenLoading);
-    const tokens = filteredTokens.length
-        ? filteredTokens
-        : searchedToken
-            ? [searchedToken]
-            : filteredTokens;
-    const handleTokenClick = (0, useTokenSelect_1.useTokenSelect)(formType, onClick);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { ref: parentRef, style: { height, overflow: 'auto' }, children: [!tokens.length && !isLoading ? ((0, jsx_runtime_1.jsx)(TokenNotFound_1.TokenNotFound, { formType: formType })) : null, (0, jsx_runtime_1.jsx)(VirtualizedTokenList_1.VirtualizedTokenList, { tokens: tokens, featuredTokensLength: featuredTokens?.length, scrollElementRef: parentRef, chainId: selectedChainId, chain: chain, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isConnected, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] }));
-};
-exports.TokenList = TokenList;

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

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import type { StyledComponent } from '@emotion/styled';
-import type { IconButtonProps, LinkProps } from '@mui/material';
-export declare const ListItemButton: StyledComponent<import("@mui/material").ListItemButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "autoFocus" | "alignItems" | "divider" | "dense" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const ListItem: StyledComponent<{
-    button?: false | undefined;
-} & import("@mui/material").ListItemOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
-    ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "button" | "className" | "style" | "classes" | "children" | "disabled" | "sx" | "autoFocus" | "alignItems" | "divider" | "components" | "dense" | "componentsProps" | "slots" | "slotProps" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const IconButton: StyledComponent<IconButtonProps & LinkProps>;

package/cjs/components/TokenList/TokenList.style.js

@@ -1,53 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconButton = exports.ListItem = exports.ListItemButton = void 0;
-const material_1 = require("@mui/material");
-const ListItemSecondaryAction_1 = require("@mui/material/ListItemSecondaryAction");
-const ListItemText_1 = require("@mui/material/ListItemText");
-const styles_1 = require("@mui/material/styles");
-const ListItemButton_1 = require("../ListItemButton");
-exports.ListItemButton = (0, styles_1.styled)(ListItemButton_1.ListItemButton)(({ theme }) => ({
-    paddingLeft: theme.spacing(1.5),
-    paddingRight: theme.spacing(1.5),
-    height: 64,
-    width: '100%',
-}));
-exports.ListItem = (0, styles_1.styled)(material_1.ListItem)(({ theme }) => ({
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    height: 64,
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-    padding: theme.spacing(0, 1.5),
-    [`.${ListItemSecondaryAction_1.listItemSecondaryActionClasses.root}`]: {
-        right: theme.spacing(3),
-    },
-    [`& .${ListItemText_1.listItemTextClasses.primary}`]: {
-        height: 22,
-    },
-    [`& .${ListItemText_1.listItemTextClasses.primary}, & .${ListItemText_1.listItemTextClasses.secondary}`]: {
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-    },
-}));
-exports.IconButton = (0, styles_1.styled)(material_1.IconButton)(({ theme }) => ({
-    lineHeight: 1,
-    fontSize: '0.75rem',
-    fontWeight: 400,
-    padding: theme.spacing(0.375, 0.375),
-    marginLeft: theme.spacing(0.25),
-    color: 'inherit',
-    backgroundColor: 'unset',
-    minWidth: 'unset',
-    borderRadius: '50%',
-    '&:hover': {
-        backgroundColor: theme.palette.mode === 'light'
-            ? (0, styles_1.alpha)(theme.palette.common.black, 0.04)
-            : (0, styles_1.alpha)(theme.palette.common.white, 0.08),
-    },
-    svg: {
-        fontSize: '0.875rem',
-    },
-}));

package/cjs/components/TokenList/TokenListItem.js

@@ -1,61 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TokenAmountSkeleton = exports.TokenListItemSkeleton = exports.TokenListItemButton = exports.TokenListItem = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const OpenInNewRounded_1 = require("@mui/icons-material/OpenInNewRounded");
-const material_1 = require("@mui/material");
-const react_1 = require("react");
-const react_i18next_1 = require("react-i18next");
-const viem_1 = require("viem");
-const utils_1 = require("../../utils");
-const TokenList_style_1 = require("./TokenList.style");
-const TokenListItem = ({ onClick, size, start, token, chain, showBalance, isBalanceLoading, startAdornment, endAdornment, }) => {
-    const handleClick = () => onClick?.(token.address);
-    return ((0, jsx_runtime_1.jsxs)(TokenList_style_1.ListItem, { disablePadding: true, style: {
-            height: `${size}px`,
-            transform: `translateY(${start}px)`,
-        }, children: [startAdornment, (0, jsx_runtime_1.jsx)(exports.TokenListItemButton, { token: token, chain: chain, showBalance: showBalance, isBalanceLoading: isBalanceLoading, onClick: handleClick }), endAdornment] }));
-};
-exports.TokenListItem = TokenListItem;
-const TokenListItemButton = ({ onClick, token, chain, showBalance, isBalanceLoading, }) => {
-    const { t } = (0, react_i18next_1.useTranslation)();
-    const tokenPrice = token.amount
-        ? (0, utils_1.formatTokenPrice)((0, viem_1.formatUnits)(token.amount, token.decimals), token.priceUSD)
-        : undefined;
-    const container = (0, react_1.useRef)(null);
-    const timeoutId = (0, react_1.useRef)();
-    const [showAddress, setShowAddress] = (0, react_1.useState)(false);
-    const onMouseEnter = () => {
-        timeoutId.current = setTimeout(() => setShowAddress(true), 350);
-    };
-    const onMouseLeave = () => {
-        clearTimeout(timeoutId.current);
-        if (showAddress) {
-            setShowAddress(false);
-        }
-    };
-    return ((0, jsx_runtime_1.jsxs)(TokenList_style_1.ListItemButton, { onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, dense: true, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: token.logoURI, alt: token.symbol, children: token.symbol?.[0] }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: token.symbol, secondaryTypographyProps: {
-                    component: 'div',
-                }, secondary: (0, jsx_runtime_1.jsxs)(material_1.Box, { position: "relative", height: 20, ref: container, children: [(0, jsx_runtime_1.jsx)(material_1.Slide, { direction: "down", in: !showAddress, container: container.current, style: {
-                                position: 'absolute',
-                            }, appear: false, children: (0, jsx_runtime_1.jsx)(material_1.Box, { pt: 0.25, children: token.name }) }), (0, jsx_runtime_1.jsx)(material_1.Slide, { direction: "up", in: showAddress, container: container.current, style: {
-                                position: 'absolute',
-                            }, appear: false, mountOnEnter: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", children: [(0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", alignItems: "center", pt: 0.125, children: (0, utils_1.shortenAddress)(token.address) }), (0, jsx_runtime_1.jsx)(TokenList_style_1.IconButton, { size: "small", LinkComponent: material_1.Link, href: `${chain?.metamask.blockExplorerUrls[0]}address/${token.address}`, target: "_blank", rel: "nofollow noreferrer", onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)(OpenInNewRounded_1.default, {}) })] }) })] }) }), showBalance ? (isBalanceLoading ? ((0, jsx_runtime_1.jsx)(exports.TokenAmountSkeleton, {})) : ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { textAlign: 'right' }, children: [token.amount ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", noWrap: true, children: t('format.number', {
-                            value: (0, utils_1.formatTokenAmount)(token.amount, token.decimals),
-                        }) })) : null, tokenPrice ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", "data-price": token.priceUSD, children: t(`format.currency`, {
-                            value: tokenPrice,
-                        }) })) : null] }))) : null] }));
-};
-exports.TokenListItemButton = TokenListItemButton;
-const TokenListItemSkeleton = () => {
-    return ((0, jsx_runtime_1.jsxs)(TokenList_style_1.ListItem, { secondaryAction: (0, jsx_runtime_1.jsx)(exports.TokenAmountSkeleton, {}), disablePadding: true, sx: { position: 'relative', flexDirection: 'row', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32, sx: { marginLeft: 1.5, marginRight: 2 } }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 20 }), secondary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 96, height: 20 }) })] }));
-};
-exports.TokenListItemSkeleton = TokenListItemSkeleton;
-const TokenAmountSkeleton = () => {
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'flex-end',
-        }, children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 56, height: 24 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 18 })] }));
-};
-exports.TokenAmountSkeleton = TokenAmountSkeleton;

package/cjs/components/TokenList/TokenNotFound.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TokenNotFound = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const SearchOff_1 = require("@mui/icons-material/SearchOff");
-const material_1 = require("@mui/material");
-const react_hook_form_1 = require("react-hook-form");
-const react_i18next_1 = require("react-i18next");
-const hooks_1 = require("../../hooks");
-const providers_1 = require("../../providers");
-const TokenNotFound = ({ formType }) => {
-    const { t } = (0, react_i18next_1.useTranslation)();
-    const [selectedChainId] = (0, react_hook_form_1.useWatch)({
-        name: [providers_1.FormKeyHelper.getChainKey(formType)],
-    });
-    const { getChainById } = (0, hooks_1.useAvailableChains)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            flexDirection: 'column',
-            flex: 1,
-            padding: 3,
-        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 48, lineHeight: 1, children: (0, jsx_runtime_1.jsx)(SearchOff_1.default, { fontSize: "inherit" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, px: 2, children: t('info.message.emptyTokenList', {
-                    chainName: getChainById(selectedChainId)?.name,
-                }) })] }));
-};
-exports.TokenNotFound = TokenNotFound;

package/cjs/components/TokenList/VirtualizedTokenList.js

@@ -1,59 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VirtualizedTokenList = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const react_virtual_1 = require("@tanstack/react-virtual");
-const react_1 = require("react");
-const react_i18next_1 = require("react-i18next");
-const TokenListItem_1 = require("./TokenListItem");
-const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollElementRef, chainId, chain, isLoading, isBalanceLoading, showBalance, showFeatured, onClick, }) => {
-    const { t } = (0, react_i18next_1.useTranslation)();
-    const hasFeaturedTokens = !!featuredTokensLength && showFeatured;
-    const featuredTokensLastIndex = (featuredTokensLength ?? 0) - 1;
-    const tokensLastIndex = tokens.length - 1;
-    const { getVirtualItems, getTotalSize, scrollToIndex } = (0, react_virtual_1.useVirtualizer)({
-        count: tokens.length,
-        overscan: 10,
-        paddingEnd: 12,
-        getScrollElement: () => scrollElementRef.current,
-        estimateSize: (index) => {
-            // heigth of TokenListItem
-            let size = 64;
-            if (!hasFeaturedTokens) {
-                return size;
-            }
-            if (index === 0 && tokens[index]?.featured) {
-                // height of startAdornment
-                size += 24;
-            }
-            if (index === featuredTokensLastIndex &&
-                index !== tokensLastIndex &&
-                tokens[index]?.featured) {
-                // height of endAdornment
-                size += 32;
-            }
-            return size;
-        },
-        getItemKey: (index) => `${tokens[index].address}-${index}`,
-    });
-    (0, react_1.useEffect)(() => {
-        // Scroll to the top of the list when switching the chains
-        if (getVirtualItems().length) {
-            scrollToIndex(0, { align: 'start' });
-        }
-    }, [scrollToIndex, chainId, getVirtualItems]);
-    if (isLoading) {
-        return ((0, jsx_runtime_1.jsx)(material_1.List, { disablePadding: true, children: Array.from({ length: 3 }).map((_, index) => (
-            // eslint-disable-next-line react/no-array-index-key
-            (0, jsx_runtime_1.jsx)(TokenListItem_1.TokenListItemSkeleton, {}, index))) }));
-    }
-    return ((0, jsx_runtime_1.jsx)(material_1.List, { style: { height: getTotalSize() }, disablePadding: true, children: getVirtualItems().map((item) => {
-            const token = tokens[item.index];
-            return ((0, jsx_runtime_1.jsx)(TokenListItem_1.TokenListItem, { onClick: onClick, size: item.size, start: item.start, token: token, chain: chain, isBalanceLoading: isBalanceLoading, showBalance: showBalance, startAdornment: hasFeaturedTokens && token.featured && item.index === 0 ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, pb: 1.25, children: t('main.featuredTokens') })) : null, endAdornment: hasFeaturedTokens &&
-                    token.featured &&
-                    item.index === featuredTokensLastIndex &&
-                    item.index !== tokensLastIndex ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, py: 1.25, children: t('main.otherTokens') })) : null }, item.key));
-        }) }));
-};
-exports.VirtualizedTokenList = VirtualizedTokenList;

package/cjs/components/TokenList/index.js

@@ -1,18 +0,0 @@
-"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("./TokenList"), exports);
-__exportStar(require("./useTokenSelect"), exports);

package/cjs/components/TokenList/types.js

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