@lifi/widget 1.17.2 → 1.18.1

package/cjs/components/ChainSelect/ChainSelect.js

@@ -6,7 +6,7 @@ const material_1 = require("@mui/material");
 const react_hook_form_1 = require("react-hook-form");
 const react_router_dom_1 = require("react-router-dom");
 const providers_1 = require("../../providers");
-const chains_1 = require("../../stores/chains");
+const stores_1 = require("../../stores");
 const utils_1 = require("../../utils");
 const ChainSelect_style_1 = require("./ChainSelect.style");
 const useChainSelect_1 = require("./useChainSelect");
@@ -22,9 +22,9 @@ const ChainSelect = ({ formType }) => {
             state: { formType },
         });
     };
-    const chainsToHide = ((_a = chains === null || chains === void 0 ? void 0 : chains.length) !== null && _a !== void 0 ? _a : 0) - chains_1.maxChainToOrder;
+    const chainsToHide = ((_a = chains === null || chains === void 0 ? void 0 : chains.length) !== null && _a !== void 0 ? _a : 0) - stores_1.maxChainToOrder;
     return ((0, jsx_runtime_1.jsxs)(ChainSelect_style_1.ChainContainer, { children: [isLoading
-                ? Array.from({ length: chains_1.maxChainToOrder + 1 }).map((_, index) => ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 56, height: 56, sx: { borderRadius: 1 } }, index)))
+                ? Array.from({ length: stores_1.maxChainToOrder + 1 }).map((_, index) => ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 56, height: 56, sx: { borderRadius: 1 } }, index)))
                 : getChains().map((chain) => ((0, jsx_runtime_1.jsx)(ChainSelect_style_1.ChainCard, Object.assign({ onClick: () => setCurrentChain(chain.id), variant: chainId === chain.id ? 'selected' : 'default' }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ src: chain.logoURI, alt: chain.key, sx: { width: 40, height: 40 } }, { children: chain.name[0] })) }), chain.id))), chainsToHide > 0 ? ((0, jsx_runtime_1.jsx)(ChainSelect_style_1.ChainCard, Object.assign({ onClick: showAllChains }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: {
                         width: 40,
                         height: 40,

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

@@ -8,6 +8,7 @@ export declare const ChainCard: import("@emotion/styled").StyledComponent<import
     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> & {
     variant?: ("default" | "error" | "selected") | undefined;
+    selectionColor?: "primary" | "secondary" | undefined;
     dense?: boolean | undefined;
     indented?: boolean | undefined;
     onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;

package/cjs/components/ChainSelect/ChainSelect.style.js

@@ -7,12 +7,12 @@ const Card_1 = require("../../components/Card");
 exports.ChainCard = (0, styles_1.styled)(Card_1.Card)({
     display: 'grid',
     placeItems: 'center',
-    minWidth: 56,
+    minWidth: 52,
     height: 56,
 });
 exports.ChainContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
     display: 'grid',
-    gridTemplateColumns: 'repeat(auto-fit, minmax(56px, 1fr))',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(52px, 1fr))',
     gridAutoRows: '56px',
     justifyContent: 'space-between',
     gap: theme.spacing(1.5),

package/cjs/components/ChainSelect/useChainSelect.js

@@ -4,11 +4,11 @@ exports.useChainSelect = void 0;
 const react_hook_form_1 = require("react-hook-form");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
-const chains_1 = require("../../stores/chains");
+const stores_1 = require("../../stores");
 const useChainSelect = (formType) => {
     const { setValue } = (0, react_hook_form_1.useFormContext)();
     const { chains, isLoading } = (0, hooks_1.useChains)();
-    const [chainOrder, setChainOrder] = (0, chains_1.useChainOrder)();
+    const [chainOrder, setChainOrder] = (0, stores_1.useChainOrder)();
     const chainKey = providers_1.SwapFormKeyHelper.getChainKey(formType);
     const getChains = () => {
         if (!chains) {

package/cjs/components/GasSufficiencyMessage/GasSufficiencyMessage.js

@@ -17,12 +17,14 @@ const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
 const hooks_1 = require("../../hooks");
+const stores_1 = require("../../stores");
 const Card_1 = require("../Card");
 const GasSufficiencyMessage_style_1 = require("./GasSufficiencyMessage.style");
 const GasSufficiencyMessage = (_a) => {
     var { route } = _a, props = __rest(_a, ["route"]);
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { insufficientFunds, insufficientGas } = (0, hooks_1.useGasSufficiency)(route);
+    const selectedRoute = (0, stores_1.useSelectedRouteStore)((state) => state.selectedRoute);
+    const { insufficientFunds, insufficientGas } = (0, hooks_1.useGasSufficiency)(route !== null && route !== void 0 ? route : selectedRoute);
     if (!insufficientFunds && !(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length)) {
         return null;
     }
@@ -34,7 +36,9 @@ const GasSufficiencyMessage = (_a) => {
                             : null }))) : null, (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", px: 2, pt: 1 }, { children: t(`swap.warning.message.insufficientGas`) }))) : null, (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length)
                         ? insufficientGas.map((item, index) => {
                             var _a, _b;
-                            return ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", px: 2, pb: insufficientGas.length - 1 === index ? 2 : 0, pt: 0.5 }, { children: t(`swap.tokenOnChainAmount`, {
+                            return ((0, jsx_runtime_1.jsx)(material_1.Typography
+                            // eslint-disable-next-line react/no-array-index-key
+                            , Object.assign({ variant: "body2", px: 2, pb: insufficientGas.length - 1 === index ? 2 : 0, pt: 0.5 }, { children: t(`swap.tokenOnChainAmount`, {
                                     amount: (_a = item.insufficientAmount) === null || _a === void 0 ? void 0 : _a.toString(),
                                     tokenSymbol: item.token.symbol,
                                     chainName: (_b = item.chain) === null || _b === void 0 ? void 0 : _b.name,

package/cjs/components/Header/Header.d.ts

@@ -1,2 +1,3 @@
-import type { FC } from 'react';
+import type { FC, PropsWithChildren } from 'react';
+export declare const HeaderContainer: FC<PropsWithChildren<{}>>;
 export declare const Header: FC;

package/cjs/components/Header/Header.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Header = void 0;
+exports.Header = exports.HeaderContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_router_dom_1 = require("react-router-dom");
 const providers_1 = require("../../providers");
@@ -12,8 +12,9 @@ const HeaderContainer = ({ children }) => {
     const { pathname } = (0, react_router_dom_1.useLocation)();
     return ((0, jsx_runtime_1.jsx)(Header_style_1.Container, Object.assign({ id: utils_1.ElementId.Header, sticky: utils_1.stickyHeaderRoutes.some((route) => pathname.includes(route)) }, { children: children })));
 };
+exports.HeaderContainer = HeaderContainer;
 const Header = () => {
     const { walletManagement } = (0, providers_1.useWidgetConfig)();
-    return ((0, jsx_runtime_1.jsxs)(HeaderContainer, { children: [!walletManagement ? (0, jsx_runtime_1.jsx)(WalletHeader_1.WalletHeader, {}) : null, (0, jsx_runtime_1.jsx)(NavigationHeader_1.NavigationHeader, {})] }));
+    return ((0, jsx_runtime_1.jsxs)(exports.HeaderContainer, { children: [!walletManagement ? (0, jsx_runtime_1.jsx)(WalletHeader_1.WalletHeader, {}) : null, (0, jsx_runtime_1.jsx)(NavigationHeader_1.NavigationHeader, {})] }));
 };
 exports.Header = Header;

package/cjs/components/Header/Header.style.js

@@ -4,7 +4,7 @@ exports.Container = exports.HeaderAppBar = void 0;
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 exports.HeaderAppBar = (0, styles_1.styled)(material_1.AppBar)(({ theme }) => ({
-    backgroundColor: theme.palette.background.default,
+    backgroundColor: 'transparent',
     color: theme.palette.text.primary,
     flexDirection: 'row',
     alignItems: 'center',
@@ -19,7 +19,8 @@ exports.HeaderAppBar = (0, styles_1.styled)(material_1.AppBar)(({ theme }) => ({
 exports.Container = (0, styles_1.styled)(material_1.Box, {
     shouldForwardProp: (prop) => prop !== 'sticky',
 })(({ theme, sticky }) => ({
-    backgroundColor: theme.palette.background.default,
+    backgroundColor: (0, styles_1.alpha)(theme.palette.background.default, 0.84),
+    backdropFilter: 'blur(12px)',
     position: sticky ? 'sticky' : 'relative',
     top: 0,
     zIndex: 1200,

package/cjs/components/Header/NavigationHeader.js

@@ -17,7 +17,10 @@ const NavigationHeader = () => {
     const { account } = (0, providers_1.useWallet)();
     const { element } = (0, useHeaderActionStore_1.useHeaderActionStore)();
     const { pathname } = (0, react_router_dom_1.useLocation)();
-    const path = pathname.substring(pathname.lastIndexOf('/') + 1);
+    const cleanedPathname = pathname.endsWith('/')
+        ? pathname.slice(0, -1)
+        : pathname;
+    const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1);
     const hasPath = utils_1.navigationRoutesValues.includes(path);
     const handleHeaderTitle = () => {
         switch (path) {

package/cjs/components/Header/WalletHeader.js

@@ -43,5 +43,5 @@ const ConnectButton = () => {
         }
         navigate(utils_1.navigationRoutes.selectWallet);
     });
-    return ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "disconnect", edge: "end", onClick: !pathname.includes(utils_1.navigationRoutes.selectWallet) ? connect : undefined }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.AccountBalanceWalletOutlined, {}) })));
+    return ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "disconnect", edge: "end", onClick: !pathname.includes(utils_1.navigationRoutes.selectWallet) ? connect : undefined }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.WalletOutlined, {}) })));
 };

package/cjs/components/PoweredBy/PoweredBy.js

@@ -3,10 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PoweredBy = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
+const react_router_dom_1 = require("react-router-dom");
 const version_1 = require("../../config/version");
+const utils_1 = require("../../utils");
 const LiFiLogo_1 = require("../LiFiLogo");
 const PoweredBy_style_1 = require("./PoweredBy.style");
 const PoweredBy = () => {
+    const { pathname } = (0, react_router_dom_1.useLocation)();
+    if (pathname.includes(utils_1.navigationRoutes.fromToken) ||
+        pathname.includes(utils_1.navigationRoutes.toToken)) {
+        return null;
+    }
     return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ px: 3, pt: 2, pb: 2, sx: {
             display: 'flex',
             alignItems: 'flex-end',

package/cjs/components/SendToWallet/SendToWallet.js

@@ -17,22 +17,19 @@ const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
 const providers_1 = require("../../providers");
-const stores_1 = require("../../stores");
 const Card_1 = require("../Card");
 const SendToWallet_style_1 = require("./SendToWallet.style");
-const SendToWallet = (props) => {
+const store_1 = require("./store");
+exports.SendToWallet = (0, react_1.forwardRef)((props, ref) => {
     var _a;
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { showDestinationWallet } = (0, stores_1.useSettings)(['showDestinationWallet']);
+    const showSendToWallet = (0, store_1.useSendToWalletStore)((state) => state.showSendToWallet);
     const { account, provider } = (0, providers_1.useWallet)();
     const { register, trigger, formState: { errors }, } = (0, react_hook_form_1.useFormContext)();
     (0, react_1.useEffect)(() => {
         trigger(providers_1.SwapFormKey.ToAddress);
     }, [account.chainId, trigger]);
-    if (!showDestinationWallet) {
-        return null;
-    }
-    const { onChange, onBlur, name, ref } = register(providers_1.SwapFormKey.ToAddress, {
+    const { onChange, onBlur, name, ref: inputRef, } = register(providers_1.SwapFormKey.ToAddress, {
         validate: (value) => __awaiter(void 0, void 0, void 0, function* () {
             try {
                 if (!value) {
@@ -48,6 +45,5 @@ const SendToWallet = (props) => {
         }),
         onBlur: () => trigger(providers_1.SwapFormKey.ToAddress),
     });
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('swap.sendToWallet') }), (0, jsx_runtime_1.jsxs)(SendToWallet_style_1.FormControl, Object.assign({ fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(SendToWallet_style_1.Input, { ref: ref, size: "small", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", onChange: onChange, onBlur: onBlur, name: name, placeholder: t('swap.walletAddressOrEns') }), (0, jsx_runtime_1.jsx)(material_1.FormHelperText, Object.assign({ error: !!errors.toAddress }, { children: (_a = errors.toAddress) === null || _a === void 0 ? void 0 : _a.message }))] }))] })));
-};
-exports.SendToWallet = SendToWallet;
+    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ timeout: 225, in: showSendToWallet }, { children: (0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({}, props, { ref: ref }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('swap.sendToWallet') }), (0, jsx_runtime_1.jsxs)(SendToWallet_style_1.FormControl, Object.assign({ fullWidth: true, sx: { paddingTop: '6px', paddingBottom: '5px' } }, { children: [(0, jsx_runtime_1.jsx)(SendToWallet_style_1.Input, { ref: inputRef, size: "small", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", onChange: onChange, onBlur: onBlur, name: name, placeholder: t('swap.walletAddressOrEns') }), (0, jsx_runtime_1.jsx)(material_1.FormHelperText, Object.assign({ error: !!errors.toAddress }, { children: (_a = errors.toAddress) === null || _a === void 0 ? void 0 : _a.message }))] }))] })) })));
+});

package/cjs/components/SendToWallet/SendToWalletButton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SendToWalletButton: React.FC;

package/cjs/components/SendToWallet/SendToWalletButton.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SendToWalletButton = 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 providers_1 = require("../../providers");
+const stores_1 = require("../../stores");
+const store_1 = require("./store");
+const SendToWalletButton = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { account } = (0, providers_1.useWallet)();
+    const { showDestinationWallet } = (0, stores_1.useSettings)(['showDestinationWallet']);
+    const { showSendToWallet, toggleSendToWallet } = (0, store_1.useSendToWalletStore)();
+    if (!showDestinationWallet || !account.isActive) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t('swap.sendToWallet'), placement: "bottom-end", enterDelay: 500, enterNextDelay: 500, arrow: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: showSendToWallet ? 'contained' : 'text', onClick: toggleSendToWallet, sx: {
+                minWidth: 48,
+                marginLeft: 1,
+            } }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.WalletOutlined, {}) })) })));
+};
+exports.SendToWalletButton = SendToWalletButton;

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

@@ -1 +1,2 @@
 export * from './SendToWallet';
+export * from './SendToWalletButton';

package/cjs/components/SendToWallet/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./SendToWallet"), exports);
+__exportStar(require("./SendToWalletButton"), exports);

package/cjs/components/SendToWallet/store.d.ts

@@ -0,0 +1,4 @@
+import type { SendToWalletStore } from './types';
+export declare const useSendToWalletStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<SendToWalletStore>, "setState"> & {
+    setState(nextStateOrUpdater: SendToWalletStore | Partial<SendToWalletStore> | ((state: import("immer/dist/internal").WritableDraft<SendToWalletStore>) => void), shouldReplace?: boolean | undefined): void;
+}>;

package/cjs/components/SendToWallet/store.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSendToWalletStore = void 0;
+const zustand_1 = require("zustand");
+const immer_1 = require("zustand/middleware/immer");
+exports.useSendToWalletStore = (0, zustand_1.default)()((0, immer_1.immer)((set) => ({
+    showSendToWallet: false,
+    toggleSendToWallet: () => {
+        set((state) => {
+            state.showSendToWallet = !state.showSendToWallet;
+        });
+    },
+})));

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

@@ -0,0 +1,6 @@
+export interface SendToWalletState {
+    showSendToWallet: boolean;
+}
+export interface SendToWalletStore extends SendToWalletState {
+    toggleSendToWallet(): void;
+}

package/cjs/components/Step/CircularProgress.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { Status } from '@lifi/sdk';
 export declare function CircularProgress({ status }: {
     status: Status;

package/cjs/components/StepActions/StepActions.style.js

@@ -54,6 +54,6 @@ exports.StepContent = (0, styles_1.styled)(material_1.StepContent, {
     },
 }));
 exports.StepAvatar = (0, styles_1.styled)(material_1.Avatar)(({ theme, variant }) => ({
-    color: variant === 'square' ? theme.palette.text.primary : theme.palette.grey[900],
+    color: theme.palette.text.primary,
     backgroundColor: 'transparent',
 }));

package/cjs/components/SwapButton/ButtonTooltip.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const ButtonTooltip: ({ title, children, }: {
     title?: string | undefined;
     children: JSX.Element;

package/cjs/components/SwapButton/SwapButton.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { SwapButtonProps } from './types';
-export declare const SwapButton: React.FC<SwapButtonProps>;
+export declare const SwapButton: import("react").ForwardRefExoticComponent<SwapButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/cjs/components/SwapButton/SwapButton.js

@@ -12,12 +12,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
+const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const utils_1 = require("../../utils");
-const SwapButton = ({ onClick, currentRoute, text, disable, }) => {
+exports.SwapButton = (0, react_1.forwardRef)(({ onClick, currentRoute, text, disable }, ref) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const config = (0, providers_1.useWidgetConfig)();
@@ -45,6 +46,5 @@ const SwapButton = ({ onClick, currentRoute, text, disable, }) => {
         }
         return t(`button.connectWallet`);
     };
-    return ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", color: account.isActive ? 'primary' : 'success', onClick: handleSwapButtonClick, disabled: insufficientFunds || !!(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) || disable, fullWidth: true }, { children: getButtonText() })));
-};
-exports.SwapButton = SwapButton;
+    return ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", color: account.isActive ? 'primary' : 'success', onClick: handleSwapButtonClick, disabled: insufficientFunds || !!(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) || disable, fullWidth: true, ref: ref }, { children: getButtonText() })));
+});

package/cjs/components/SwapInput/SwapInputAdornment.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { SwapFormTypeProps } from '../../providers';
 export declare const SwapInputAdornment: ({ formType }: SwapFormTypeProps) => JSX.Element;

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

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

package/cjs/components/SwapRouteCard/SwapRouteCard.js

@@ -11,33 +11,37 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SwapRouteCard = void 0;
+exports.SwapRouteCardEssentials = exports.SwapRouteCard = 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_1 = require("react");
 const react_i18next_1 = require("react-i18next");
 const Card_1 = require("../Card");
 const StepActions_1 = require("../StepActions");
 const Token_1 = require("../Token");
 const SwapRouteCard_style_1 = require("./SwapRouteCard.style");
 const SwapRouteCard = (_a) => {
-    var _b, _c;
-    var { route, active, dense } = _a, other = __rest(_a, ["route", "active", "dense"]);
+    var _b;
+    var { route, active, variant = 'default' } = _a, other = __rest(_a, ["route", "active", "variant"]);
     const { t } = (0, react_i18next_1.useTranslation)();
+    const [expanded, setExpanded] = (0, react_1.useState)(variant === 'default');
     const alternativeTag = t(`swap.tags.ALTERNATIVE`);
     const label = ((_b = route.tags) === null || _b === void 0 ? void 0 : _b.length)
         ? t(`swap.tags.${route.tags[0]}`)
         : alternativeTag;
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ dense: dense, indented: true }, other, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                }, mb: 2 }, { children: (0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.Label, Object.assign({ active: active !== null && active !== void 0 ? active : label !== alternativeTag }, { children: label })) })), (0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), mb: 2 }), !dense
-                ? route.steps.map((step) => ((0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, mb: 2 }, step.id)))
-                : null, (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.Typography, Object.assign({ fontSize: 18, fontWeight: "500", lineHeight: 1, pt: 0.25 }, { children: t(`swap.currency`, { value: (_c = route.gasCostUSD) !== null && _c !== void 0 ? _c : 0 }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12, color: "text.secondary", lineHeight: 1, mt: 0.5 }, { children: t(`swap.gas`) }))] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontSize: 18, fontWeight: "500", display: "flex", justifyContent: "flex-end", lineHeight: 1, pt: 0.25 }, { children: ["~", (route.steps
-                                        .map((step) => step.estimate.executionDuration)
-                                        .reduce((duration, x) => duration + x) / 60).toFixed(0)] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12, color: "text.secondary", textAlign: "end", lineHeight: 1, mt: 0.5 }, { children: t(`swap.minutes`) }))] })] }))] })));
+    const handleExpand = (e) => {
+        e.stopPropagation();
+        setExpanded((expanded) => !expanded);
+    };
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ dense: variant === 'dense', variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true }, other, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.Label, Object.assign({ active: active !== null && active !== void 0 ? active : label !== alternativeTag }, { children: label })), variant === 'extended' ? ((0, jsx_runtime_1.jsx)(exports.SwapRouteCardEssentials, { route: route })) : null] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), step: variant === 'extended' ? route.steps[0] : undefined }), variant === 'extended' ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconButton, Object.assign({ onClick: handleExpand, size: "small" }, { children: expanded ? (0, jsx_runtime_1.jsx)(icons_material_1.ExpandLess, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.ExpandMore, {}) }))) : null] })), (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ mountOnEnter: true, unmountOnExit: true, in: expanded }, { children: route.steps.map((step) => ((0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, mt: 2 }, step.id))) })), variant !== 'extended' ? ((0, jsx_runtime_1.jsx)(exports.SwapRouteCardEssentials, { route: route, dense: true })) : null] })));
 };
 exports.SwapRouteCard = SwapRouteCard;
+const SwapRouteCardEssentials = ({ route, dense }) => {
+    var _a;
+    const { t } = (0, react_i18next_1.useTranslation)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: dense ? 'space-between' : 'flex-end', flex: 1, pl: dense ? 0 : 2, mt: dense ? 2 : 0 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "center", pr: dense ? 0 : 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.EvStationOutlined, { fontSize: dense ? 'medium' : 'small' }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t(`swap.currency`, { value: (_a = route.gasCostUSD) !== null && _a !== void 0 ? _a : 0 }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "center", pr: dense ? 0 : 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.AccessTime, { fontSize: dense ? 'medium' : 'small' }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: `${(route.steps
+                            .map((step) => step.estimate.executionDuration)
+                            .reduce((duration, x) => duration + x) / 60).toFixed(0)}m` }))] })), !dense ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.LayersOutlined, { fontSize: dense ? 'medium' : 'small' }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: route.steps.length }))] }))) : null] })));
+};
+exports.SwapRouteCardEssentials = SwapRouteCardEssentials;

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

@@ -14,3 +14,33 @@ export declare const Label: import("@emotion/styled").StyledComponent<import("@m
 }, 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;
 }, {}, {}>;
+export declare const IconButton: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
+    color?: "inherit" | "default" | "primary" | "secondary" | "error" | "warning" | "info" | "success" | undefined;
+    disabled?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    edge?: false | "end" | "start" | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "size" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    active?: boolean | undefined;
+}, {}, {}>;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Label = void 0;
+exports.IconButton = exports.Label = void 0;
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const utils_1 = require("../../utils");
@@ -12,8 +12,8 @@ exports.Label = (0, styles_1.styled)(material_1.Typography, {
     borderColor: active
         ? theme.palette.secondary.main
         : theme.palette.mode === 'light'
-            ? theme.palette.grey[500]
-            : theme.palette.grey[600],
+            ? theme.palette.grey[300]
+            : theme.palette.grey[700],
     borderRadius: theme.shape.borderRadiusSecondary,
     color: active
         ? (0, utils_1.getContrastTextColor)(theme, theme.palette.secondary.main)
@@ -28,3 +28,16 @@ exports.Label = (0, styles_1.styled)(material_1.Typography, {
     display: 'inline-flex',
     userSelect: 'none',
 }));
+exports.IconButton = (0, styles_1.styled)(material_1.IconButton, {
+    shouldForwardProp: (prop) => prop !== 'active',
+})(({ theme, active }) => {
+    const backgroundColor = theme.palette.mode === 'light'
+        ? theme.palette.common.black
+        : theme.palette.common.white;
+    return {
+        backgroundColor: (0, styles_1.alpha)(backgroundColor, 0.04),
+        '&:hover': {
+            backgroundColor: (0, styles_1.alpha)(backgroundColor, 0.08),
+        },
+    };
+});

package/cjs/components/SwapRouteCard/SwapRouteCardSkeleton.js

@@ -16,17 +16,7 @@ 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 })] }))] }))] })));
+    var { variant } = _a, other = __rest(_a, ["variant"]);
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ dense: variant === 'dense', indented: true }, other, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 118, height: 24, sx: { borderRadius: 0.5 } }), variant === 'extended' ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 52, height: 24, sx: { marginRight: 2 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 44, height: 24, sx: { marginRight: 2 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 32, height: 24 })] }))) : null] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mt: 2 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ 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.jsxs)(material_1.Box, Object.assign({ ml: 6, display: "flex", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 102, height: 16, sx: { borderRadius: 0.5 } }), variant === 'extended' ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 72, height: 16, sx: { marginLeft: 1 } })) : null] }))] })), variant !== 'extended' ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mt: 2, display: "flex", justifyContent: "space-between" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 24 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 24 })] }))) : null] })));
 };
 exports.SwapRouteCardSkeleton = SwapRouteCardSkeleton;

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

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

package/cjs/components/SwapRouteCard/SwapRouteNotFoundCard.js

@@ -1,23 +1,11 @@
 "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 SwapRouteNotFoundCard = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
             display: 'flex',

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

@@ -1,9 +1,13 @@
 import type { Route } from '@lifi/sdk';
 export interface SwapRouteCardProps {
     route: Route;
-    dense?: boolean;
+    variant?: 'default' | 'extended' | 'dense';
     active?: boolean;
 }
-export interface SwapRouteCardSkeletonProps {
+export interface SwapRouteCardEssentialsProps {
+    route: Route;
     dense?: boolean;
 }
+export interface SwapRouteCardSkeletonProps {
+    variant?: 'default' | 'extended' | 'dense';
+}