@lifi/widget 3.0.0-alpha.2 → 3.0.0-alpha.4

package/src/_cjs/components/Token/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("./Token"), exports);
+__exportStar(require("./Token.style"), exports);
+//# sourceMappingURL=index.js.map

package/src/_cjs/components/Token/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Token/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAAwB;AACxB,gDAA8B"}

package/src/_cjs/components/TokenAvatar/TokenAvatar.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import type { Chain, StaticToken } from '@lifi/sdk';
+import type { SxProps, Theme } from '@mui/material';
+export declare const TokenAvatarFallback: React.FC<{
+    token?: StaticToken;
+    isLoading?: boolean;
+    sx?: SxProps<Theme>;
+}>;
+export declare const TokenAvatarBase: React.FC<{
+    token?: StaticToken;
+    chain?: Chain;
+    isLoading?: boolean;
+    sx?: SxProps<Theme>;
+}>;
+export declare const TokenAvatar: React.FC<{
+    token?: StaticToken;
+    chain?: Chain;
+    isLoading?: boolean;
+    sx?: SxProps<Theme>;
+}>;
+export declare const TokenAvatarDefault: React.FC<{
+    sx?: SxProps<Theme>;
+}>;

package/src/_cjs/components/TokenAvatar/TokenAvatar.js

@@ -0,0 +1,30 @@
+"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;
+//# sourceMappingURL=TokenAvatar.js.map

package/src/_cjs/components/TokenAvatar/TokenAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenAvatar.js","sourceRoot":"","sources":["../../../../../src/components/TokenAvatar/TokenAvatar.tsx"],"names":[],"mappings":"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"}

package/src/_cjs/components/TokenAvatar/TokenAvatar.style.d.ts

@@ -0,0 +1,8 @@
+/// <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?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | 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?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/src/_cjs/components/TokenAvatar/TokenAvatar.style.js

@@ -0,0 +1,30 @@
+"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%',
+}));
+//# sourceMappingURL=TokenAvatar.style.js.map

package/src/_cjs/components/TokenAvatar/TokenAvatar.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenAvatar.style.js","sourceRoot":"","sources":["../../../../../src/components/TokenAvatar/TokenAvatar.style.tsx"],"names":[],"mappings":";;;AAAA,4CAAiD;AACjD,iDAAqD;AACrD,+CAAmD;AACnD,iDAA8C;AAEjC,QAAA,gBAAgB,GAAG,IAAA,eAAM,EAAC,sBAAW,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAClE,CAAC,MAAM,oBAAY,CAAC,KAAK,gBAAgB,sBAAa,CAAC,IAAI,EAAE,CAAC,EAAE;QAC9D,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAC7B,SAAS,EAAE,YAAY;KACxB;IACD,CAAC,MAAM,oBAAY,CAAC,IAAI,aAAa,CAAC,EAAE;QACtC,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;KAC7B;CACF,CAAC,CAAC,CAAC;AAES,QAAA,aAAa,GAAG,IAAA,eAAM,EAAC,cAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACvD,UAAU,EACR,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO;QAC5B,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;QACzB,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;IAC7B,YAAY,EAAE,KAAK;CACpB,CAAC,CAAC,CAAC;AAES,QAAA,kBAAkB,GAAG,IAAA,eAAM,EAAC,cAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC5D,UAAU,EACR,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO;QAC5B,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;QACzB,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;IAC7B,MAAM,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,EAAE;IACrD,YAAY,EAAE,KAAK;CACpB,CAAC,CAAC,CAAC"}

package/src/_cjs/components/TokenAvatar/index.d.ts

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

package/src/_cjs/components/TokenAvatar/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("./TokenAvatar"), exports);
+__exportStar(require("./TokenAvatar.style"), exports);
+//# sourceMappingURL=index.js.map

package/src/_cjs/components/TokenAvatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/TokenAvatar/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,gDAA8B;AAC9B,sDAAoC"}

package/src/_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/src/_cjs/components/TokenList/TokenList.js

@@ -0,0 +1,48 @@
+"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;
+//# sourceMappingURL=TokenList.js.map

package/src/_cjs/components/TokenList/TokenList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenList.js","sourceRoot":"","sources":["../../../../../src/components/TokenList/TokenList.tsx"],"names":[],"mappings":"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"}

package/src/_cjs/components/TokenList/TokenList.style.d.ts

@@ -0,0 +1,12 @@
+/// <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?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "alignItems" | "children" | "sx" | "style" | "autoFocus" | "className" | "tabIndex" | "disabled" | "action" | "selected" | "classes" | "divider" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "dense" | "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" | "alignItems" | "children" | "sx" | "style" | "autoFocus" | "className" | "disabled" | "selected" | "classes" | "divider" | "components" | "dense" | "componentsProps" | "slotProps" | "slots" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const IconButton: StyledComponent<IconButtonProps & LinkProps>;

package/src/_cjs/components/TokenList/TokenList.style.js

@@ -0,0 +1,54 @@
+"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',
+    },
+}));
+//# sourceMappingURL=TokenList.style.js.map

package/src/_cjs/components/TokenList/TokenList.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenList.style.js","sourceRoot":"","sources":["../../../../../src/components/TokenList/TokenList.style.tsx"],"names":[],"mappings":";;;AAEA,4CAGuB;AACvB,mFAAuF;AACvF,6DAAiE;AACjE,iDAAqD;AACrD,sDAAyE;AAE5D,QAAA,cAAc,GAAG,IAAA,eAAM,EAAC,+BAAkB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACvE,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;IAC/B,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;IAChC,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,MAAM;CACd,CAAC,CAAC,CAAC;AAES,QAAA,QAAQ,GAAG,IAAA,eAAM,EAAC,mBAAW,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC1D,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;IACP,MAAM,EAAE,EAAE;IACV,aAAa,EAAE,QAAQ;IACvB,UAAU,EAAE,YAAY;IACxB,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,GAAG,CAAC;IAC9B,CAAC,IAAI,wDAA8B,CAAC,IAAI,EAAE,CAAC,EAAE;QAC3C,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;KACxB;IACD,CAAC,MAAM,kCAAmB,CAAC,OAAO,EAAE,CAAC,EAAE;QACrC,MAAM,EAAE,EAAE;KACX;IACD,CAAC,MAAM,kCAAmB,CAAC,OAAO,QAAQ,kCAAmB,CAAC,SAAS,EAAE,CAAC,EAAE;QAC1E,YAAY,EAAE,UAAU;QACxB,QAAQ,EAAE,QAAQ;QAClB,UAAU,EAAE,QAAQ;KACrB;CACF,CAAC,CAAC,CAAC;AAES,QAAA,UAAU,GAAiD,IAAA,eAAM,EAC5E,qBAAa,CACd,CAA8B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC7C,UAAU,EAAE,CAAC;IACb,QAAQ,EAAE,SAAS;IACnB,UAAU,EAAE,GAAG;IACf,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC;IACpC,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;IAC/B,KAAK,EAAE,SAAS;IAChB,eAAe,EAAE,OAAO;IACxB,QAAQ,EAAE,OAAO;IACjB,YAAY,EAAE,KAAK;IACnB,SAAS,EAAE;QACT,eAAe,EACb,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO;YAC5B,CAAC,CAAC,IAAA,cAAK,EAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC;YACzC,CAAC,CAAC,IAAA,cAAK,EAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC;KAC9C;IACD,GAAG,EAAE;QACH,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC,CAAC,CAAC"}

package/src/_cjs/components/TokenList/TokenListItem.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { TokenListItemButtonProps, TokenListItemProps } from './types';
+export declare const TokenListItem: React.FC<TokenListItemProps>;
+export declare const TokenListItemButton: React.FC<TokenListItemButtonProps>;
+export declare const TokenListItemSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export declare const TokenAmountSkeleton: React.FC;

package/src/_cjs/components/TokenList/TokenListItem.js

@@ -0,0 +1,62 @@
+"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;
+//# sourceMappingURL=TokenListItem.js.map

package/src/_cjs/components/TokenList/TokenListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenListItem.js","sourceRoot":"","sources":["../../../../../src/components/TokenList/TokenListItem.tsx"],"names":[],"mappings":"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"}

package/src/_cjs/components/TokenList/TokenNotFound.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { FormTypeProps } from '../../providers';
+export declare const TokenNotFound: React.FC<FormTypeProps>;

package/src/_cjs/components/TokenList/TokenNotFound.js

@@ -0,0 +1,29 @@
+"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;
+//# sourceMappingURL=TokenNotFound.js.map

package/src/_cjs/components/TokenList/TokenNotFound.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenNotFound.js","sourceRoot":"","sources":["../../../../../src/components/TokenList/TokenNotFound.tsx"],"names":[],"mappings":";;;;AAAA,6DAA0D;AAC1D,4CAAgD;AAChD,qDAA2C;AAC3C,iDAA+C;AAC/C,uCAAiD;AAEjD,+CAAgD;AAEzC,MAAM,aAAa,GAA4B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACrE,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAC/B,MAAM,CAAC,eAAe,CAAC,GAAG,IAAA,0BAAQ,EAAC;QACjC,IAAI,EAAE,CAAC,yBAAa,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;KAC5C,CAAC,CAAC;IACH,MAAM,EAAE,YAAY,EAAE,GAAG,IAAA,0BAAkB,GAAE,CAAC;IAC9C,OAAO,CACL,wBAAC,cAAG,IACF,EAAE,EAAE;YACF,OAAO,EAAE,MAAM;YACf,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;YACpB,aAAa,EAAE,QAAQ;YACvB,IAAI,EAAE,CAAC;YACP,OAAO,EAAE,CAAC;SACX,aAED,uBAAC,qBAAU,IAAC,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,CAAC,YACrC,uBAAC,mBAAa,IAAC,QAAQ,EAAC,SAAS,GAAG,GACzB,EACb,uBAAC,qBAAU,IACT,QAAQ,EAAE,EAAE,EACZ,KAAK,EAAC,gBAAgB,EACtB,SAAS,EAAC,QAAQ,EAClB,EAAE,EAAE,CAAC,EACL,EAAE,EAAE,CAAC,YAEJ,CAAC,CAAC,6BAA6B,EAAE;oBAChC,SAAS,EAAE,YAAY,CAAC,eAAe,CAAC,EAAE,IAAI;iBAC/C,CAAC,GACS,IACT,CACP,CAAC;AACJ,CAAC,CAAC;AAjCW,QAAA,aAAa,iBAiCxB"}

package/src/_cjs/components/TokenList/VirtualizedTokenList.d.ts

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

package/src/_cjs/components/TokenList/VirtualizedTokenList.js

@@ -0,0 +1,60 @@
+"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;
+//# sourceMappingURL=VirtualizedTokenList.js.map

package/src/_cjs/components/TokenList/VirtualizedTokenList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualizedTokenList.js","sourceRoot":"","sources":["../../../../../src/components/TokenList/VirtualizedTokenList.tsx"],"names":[],"mappings":"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"}

package/src/_cjs/components/TokenList/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TokenList';
+export * from './useTokenSelect';

package/src/_cjs/components/TokenList/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("./TokenList"), exports);
+__exportStar(require("./useTokenSelect"), exports);
+//# sourceMappingURL=index.js.map

package/src/_cjs/components/TokenList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/TokenList/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,8CAA4B;AAC5B,mDAAiC"}

package/src/_cjs/components/TokenList/types.d.ts

@@ -0,0 +1,41 @@
+import type { ExtendedChain } from '@lifi/sdk';
+import type { MutableRefObject } from 'react';
+import type { FormType } from '../../providers';
+import type { TokenAmount } from '../../types';
+export interface TokenListProps {
+    formType: FormType;
+    height: number;
+    onClick?(): void;
+}
+export interface VirtualizedTokenListProps {
+    tokens: TokenAmount[];
+    featuredTokensLength?: number;
+    scrollElementRef: MutableRefObject<HTMLElement | null>;
+    isLoading: boolean;
+    isBalanceLoading: boolean;
+    chainId: number;
+    chain?: ExtendedChain;
+    showBalance?: boolean;
+    showFeatured?: boolean;
+    onClick(tokenAddress: string): void;
+}
+export interface TokenListItemBaseProps {
+    onClick?(tokenAddress: string): void;
+    size: number;
+    start: number;
+}
+export interface TokenListItemProps extends TokenListItemBaseProps {
+    showBalance?: boolean;
+    token: TokenAmount;
+    chain?: ExtendedChain;
+    isBalanceLoading?: boolean;
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+}
+export interface TokenListItemButtonProps {
+    onClick?(): void;
+    showBalance?: boolean;
+    token: TokenAmount;
+    chain?: ExtendedChain;
+    isBalanceLoading?: boolean;
+}

package/src/_cjs/components/TokenList/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/src/_cjs/components/TokenList/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/components/TokenList/types.ts"],"names":[],"mappings":""}

package/src/_cjs/components/TokenList/useTokenSelect.d.ts

@@ -0,0 +1,2 @@
+import type { FormType } from '../../providers';
+export declare const useTokenSelect: (formType: FormType, onClick?: () => void) => (tokenAddress: string, chainId?: number) => void;