@lifi/widget 1.17.1 → 1.18.0

package/types/widget.d.ts

@@ -3,6 +3,7 @@ import type { PaletteMode, PaletteOptions, Shape } from '@mui/material';
 import type { TypographyOptions } from '@mui/material/styles/createTypography';
 import type { Signer } from 'ethers';
 import type { CSSProperties } from 'react';
+export declare type WidgetVariant = 'default' | 'expandable' | 'drawer';
 export declare type Appearance = PaletteMode | 'auto';
 export declare type ThemeConfig = {
     palette?: Pick<PaletteOptions, 'primary' | 'secondary'>;
@@ -34,6 +35,7 @@ export interface WidgetConfig {
     /** @deprecated Use tokens.featured instead */
     featuredTokens?: Token[];
     integrator?: string;
+    variant?: WidgetVariant;
     walletManagement?: WidgetWalletManagement;
     sdkConfig?: ConfigUpdate;
     bridges?: {

package/utils/colors.d.ts

@@ -1,3 +1,3 @@
 import type { Theme } from '@mui/material';
 export declare const getContrastAlphaColor: (theme: Theme, alpha: string | number) => string;
-export declare const getContrastTextColor: (theme: Theme, background?: string) => "#000" | "#fff";
+export declare const getContrastTextColor: (theme: Theme, background?: string) => "#fff" | "#000";

package/utils/navigationRoutes.js

@@ -14,26 +14,26 @@ export const navigationRoutes = {
 };
 export const navigationRoutesValues = Object.values(navigationRoutes);
 export const stickyHeaderRoutes = [
-    navigationRoutes.selectWallet,
+    navigationRoutes.activeSwaps,
     navigationRoutes.fromChain,
-    navigationRoutes.toChain,
+    navigationRoutes.selectWallet,
     navigationRoutes.settings,
-    navigationRoutes.swapRoutes,
+    navigationRoutes.swapDetails,
     navigationRoutes.swapExecution,
     navigationRoutes.swapHistory,
-    navigationRoutes.activeSwaps,
-    navigationRoutes.swapDetails,
+    navigationRoutes.swapRoutes,
+    navigationRoutes.toChain,
 ];
 export const backButtonRoutes = [
+    navigationRoutes.activeSwaps,
+    navigationRoutes.fromChain,
+    navigationRoutes.fromToken,
     navigationRoutes.selectWallet,
     navigationRoutes.settings,
+    navigationRoutes.swapDetails,
+    navigationRoutes.swapExecution,
     navigationRoutes.swapHistory,
-    navigationRoutes.activeSwaps,
-    navigationRoutes.fromToken,
-    navigationRoutes.toToken,
-    navigationRoutes.fromChain,
-    navigationRoutes.toChain,
     navigationRoutes.swapRoutes,
-    navigationRoutes.swapExecution,
-    navigationRoutes.swapDetails,
+    navigationRoutes.toChain,
+    navigationRoutes.toToken,
 ];

package/cjs/pages/MainPage/SwapRoutes.js

@@ -1,43 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SwapRoutes = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable react/no-array-index-key */
-const icons_material_1 = require("@mui/icons-material");
-const material_1 = require("@mui/material");
-const react_1 = require("react");
-const react_hook_form_1 = require("react-hook-form");
-const react_i18next_1 = require("react-i18next");
-const react_router_dom_1 = require("react-router-dom");
-const Card_1 = require("../../components/Card");
-const GasSufficiencyMessage_1 = require("../../components/GasSufficiencyMessage");
-const ProgressToNextUpdate_1 = require("../../components/ProgressToNextUpdate");
-const SendToWallet_1 = require("../../components/SendToWallet");
-const SwapRouteCard_1 = require("../../components/SwapRouteCard");
-const hooks_1 = require("../../hooks");
-const utils_1 = require("../../utils");
-const SwapRoutes_style_1 = require("./SwapRoutes.style");
-const SwapRoutes = (props) => {
-    const { t } = (0, react_i18next_1.useTranslation)();
-    const navigate = (0, react_router_dom_1.useNavigate)();
-    const { isValid, isValidating } = (0, react_hook_form_1.useFormState)();
-    const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = (0, hooks_1.useSwapRoutes)();
-    const handleCardClick = (0, react_1.useCallback)(() => {
-        navigate(utils_1.navigationRoutes.swapRoutes);
-    }, [navigate]);
-    const currentRoute = routes === null || routes === void 0 ? void 0 : routes[0];
-    if (!currentRoute && !isLoading && !isFetching && !isFetched) {
-        return null;
-    }
-    const routeNotFound = !currentRoute && !isLoading && !isFetching;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('swap.routes') }), (0, jsx_runtime_1.jsx)(ProgressToNextUpdate_1.ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: {
-                            position: 'absolute',
-                            top: 8,
-                            right: 8,
-                        } }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex' } }, { children: [(0, jsx_runtime_1.jsx)(SwapRoutes_style_1.Stack, Object.assign({ direction: "row", spacing: 2, my: 2, ml: 2, mr: routeNotFound ? 2 : 1, sx: {
-                                    borderWidth: !routeNotFound && (isFetching || (routes && routes.length > 1))
-                                        ? 1
-                                        : 0,
-                                } }, { children: isLoading || isFetching ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { minWidth: "80%", dense: true }), (0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { minWidth: "80%", dense: true })] })) : !currentRoute ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, { minWidth: "100%", dense: true })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { minWidth: routes.length > 1 ? '80%' : '100%', route: currentRoute, active: true, dense: true }), routes.length > 1 ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { minWidth: "80%", route: routes[1], dense: true })) : null] })) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: !routeNotFound ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ py: 1, pr: 1 }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleCardClick, size: "medium", "aria-label": "swap-routes", disabled: isValidating || !isValid }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowRight, {}) })) }))) : null }))] }))] })), (0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, Object.assign({ route: !isFetching ? currentRoute : undefined }, props)), (0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWallet, { mx: 3, mb: 3 })] }));
-};
-exports.SwapRoutes = SwapRoutes;

package/cjs/pages/MainPage/SwapRoutes.style.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-export declare const Stack: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
-    ref?: import("react").Ref<unknown> | undefined;
-    children?: import("react").ReactNode;
-    direction?: import("@mui/system").ResponsiveStyleValue<"row" | "column" | "column-reverse" | "row-reverse"> | undefined;
-    spacing?: import("@mui/system").ResponsiveStyleValue<string | number> | undefined;
-    divider?: import("react").ReactNode;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | "direction" | ("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") | "divider" | "spacing"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/pages/MainPage/SwapRoutes.style.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Stack = void 0;
-const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
-exports.Stack = (0, styles_1.styled)(material_1.Stack)(({ theme }) => ({
-    alignItems: 'stretch',
-    display: 'flex',
-    flex: 1,
-    flexWrap: 'nowrap',
-    overflow: 'hidden',
-    borderRight: `solid ${theme.palette.mode === 'light'
-        ? theme.palette.grey[300]
-        : theme.palette.grey[800]}`,
-    width: 'calc(100% - 48px)',
-}));

package/pages/MainPage/SwapRoutes.js

@@ -1,39 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable react/no-array-index-key */
-import { KeyboardArrowRight as KeyboardArrowRightIcon } from '@mui/icons-material';
-import { Box, IconButton } from '@mui/material';
-import { useCallback } from 'react';
-import { useFormState } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { Card, CardTitle } from '../../components/Card';
-import { GasSufficiencyMessage } from '../../components/GasSufficiencyMessage';
-import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate';
-import { SendToWallet } from '../../components/SendToWallet';
-import { SwapRouteCard, SwapRouteCardSkeleton, SwapRouteNotFoundCard, } from '../../components/SwapRouteCard';
-import { useSwapRoutes } from '../../hooks';
-import { navigationRoutes } from '../../utils';
-import { Stack } from './SwapRoutes.style';
-export const SwapRoutes = (props) => {
-    const { t } = useTranslation();
-    const navigate = useNavigate();
-    const { isValid, isValidating } = useFormState();
-    const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = useSwapRoutes();
-    const handleCardClick = useCallback(() => {
-        navigate(navigationRoutes.swapRoutes);
-    }, [navigate]);
-    const currentRoute = routes === null || routes === void 0 ? void 0 : routes[0];
-    if (!currentRoute && !isLoading && !isFetching && !isFetched) {
-        return null;
-    }
-    const routeNotFound = !currentRoute && !isLoading && !isFetching;
-    return (_jsxs(_Fragment, { children: [_jsxs(Card, Object.assign({}, props, { children: [_jsx(CardTitle, { children: t('swap.routes') }), _jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: {
-                            position: 'absolute',
-                            top: 8,
-                            right: 8,
-                        } }), _jsxs(Box, Object.assign({ sx: { display: 'flex' } }, { children: [_jsx(Stack, Object.assign({ direction: "row", spacing: 2, my: 2, ml: 2, mr: routeNotFound ? 2 : 1, sx: {
-                                    borderWidth: !routeNotFound && (isFetching || (routes && routes.length > 1))
-                                        ? 1
-                                        : 0,
-                                } }, { children: isLoading || isFetching ? (_jsxs(_Fragment, { children: [_jsx(SwapRouteCardSkeleton, { minWidth: "80%", dense: true }), _jsx(SwapRouteCardSkeleton, { minWidth: "80%", dense: true })] })) : !currentRoute ? (_jsx(SwapRouteNotFoundCard, { minWidth: "100%", dense: true })) : (_jsxs(_Fragment, { children: [_jsx(SwapRouteCard, { minWidth: routes.length > 1 ? '80%' : '100%', route: currentRoute, active: true, dense: true }), routes.length > 1 ? (_jsx(SwapRouteCard, { minWidth: "80%", route: routes[1], dense: true })) : null] })) })), _jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: !routeNotFound ? (_jsx(Box, Object.assign({ py: 1, pr: 1 }, { children: _jsx(IconButton, Object.assign({ onClick: handleCardClick, size: "medium", "aria-label": "swap-routes", disabled: isValidating || !isValid }, { children: _jsx(KeyboardArrowRightIcon, {}) })) }))) : null }))] }))] })), _jsx(GasSufficiencyMessage, Object.assign({ route: !isFetching ? currentRoute : undefined }, props)), _jsx(SendToWallet, { mx: 3, mb: 3 })] }));
-};

package/pages/MainPage/SwapRoutes.style.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-export declare const Stack: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
-    ref?: import("react").Ref<unknown> | undefined;
-    children?: import("react").ReactNode;
-    direction?: import("@mui/system").ResponsiveStyleValue<"row" | "column" | "column-reverse" | "row-reverse"> | undefined;
-    spacing?: import("@mui/system").ResponsiveStyleValue<string | number> | undefined;
-    divider?: import("react").ReactNode;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | "direction" | ("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") | "divider" | "spacing"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/pages/MainPage/SwapRoutes.style.js

@@ -1,13 +0,0 @@
-import { Stack as MuiStack } from '@mui/material';
-import { styled } from '@mui/material/styles';
-export const Stack = styled(MuiStack)(({ theme }) => ({
-    alignItems: 'stretch',
-    display: 'flex',
-    flex: 1,
-    flexWrap: 'nowrap',
-    overflow: 'hidden',
-    borderRight: `solid ${theme.palette.mode === 'light'
-        ? theme.palette.grey[300]
-        : theme.palette.grey[800]}`,
-    width: 'calc(100% - 48px)',
-}));

package/stores/route/useSetExecutableRoute.js

@@ -1,4 +0,0 @@
-import { useRouteStore } from './useRouteStore';
-export const useSetExecutableRoute = () => {
-    return useRouteStore((state) => state.setExecutableRoute);
-};