@lifi/widget 1.10.3 → 1.11.1

package/components/Card/CardContainer.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-export declare const CardContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
-    children?: import("react").ReactNode;
-    component?: import("react").ElementType<any> | undefined;
-    ref?: import("react").Ref<unknown> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    isError?: boolean | undefined;
-}, {}, {}>;

package/components/Card/CardContainer.js

@@ -1,16 +0,0 @@
-import { Box } from '@mui/material';
-import { styled } from '@mui/material/styles';
-export const CardContainer = styled(Box, {
-    shouldForwardProp: (prop) => prop !== 'isError',
-})(({ theme, isError }) => ({
-    backgroundColor: theme.palette.background.paper,
-    border: `1px solid`,
-    borderColor: isError
-        ? theme.palette.error.main
-        : theme.palette.mode === 'light'
-            ? theme.palette.grey[300]
-            : theme.palette.grey[800],
-    borderRadius: theme.shape.borderRadius,
-    overflow: 'hidden',
-    position: 'relative',
-}));

package/components/InsufficientGasOrFundsMessage/InsufficientGasOrFundsMessage.d.ts

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

package/components/InsufficientGasOrFundsMessage/InsufficientGasOrFundsMessage.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Warning as WarningIcon } from '@mui/icons-material';
-import { Box, Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { CardTitle } from '../../components/Card';
-import { useHasSufficientBalance } from '../../hooks';
-import { MessageCard } from './InsufficientGasOrFundsMessage.style';
-export const InsufficientGasOrFundsMessage = (props) => {
-    const { t } = useTranslation();
-    const { hasGasOnStartChain, hasGasOnCrossChain, hasSufficientBalance } = useHasSufficientBalance();
-    if (hasSufficientBalance && hasGasOnStartChain && hasGasOnCrossChain) {
-        return null;
-    }
-    let title;
-    let message;
-    if (!hasSufficientBalance) {
-        message = t(`swap.warning.message.insufficientFunds`);
-    }
-    if (!hasGasOnStartChain) {
-        title = t(`swap.warning.title.insufficientGas`);
-        message = t(`swap.warning.message.insufficientGasOnStartChain`);
-    }
-    if (!hasGasOnCrossChain) {
-        title = t(`swap.warning.title.insufficientGas`);
-        message = t(`swap.warning.message.insufficientGasOnDestinationChain`);
-    }
-    return (_jsxs(MessageCard, Object.assign({}, props, { children: [_jsx(WarningIcon, { sx: {
-                    marginTop: 2,
-                    marginLeft: 2,
-                } }), _jsxs(Box, { children: [title ? _jsx(CardTitle, { children: title }) : null, _jsx(Typography, Object.assign({ variant: "body2", px: 2, pb: 2, pt: title ? 1 : 2 }, { children: message }))] })] })));
-};

package/components/InsufficientGasOrFundsMessage/index.d.ts

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

package/components/InsufficientGasOrFundsMessage/index.js

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

package/components/StepToken.js

@@ -1,21 +0,0 @@
-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;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar, Box, Typography } from '@mui/material';
-import { formatTokenAmount } from '../utils/format';
-import { TextFitter } from './TextFitter';
-export const StepToken = (_a) => {
-    var { token } = _a, other = __rest(_a, ["token"]);
-    return (_jsxs(Box, Object.assign({ flex: 1 }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", flex: 1 }, { children: [_jsx(Avatar, Object.assign({ src: token.logoURI, alt: token.symbol, sx: { marginRight: 2 } }, { children: token.symbol[0] })), _jsx(TextFitter, Object.assign({ height: 32, textStyle: {
-                            fontWeight: 700,
-                        } }, { children: formatTokenAmount(token.amount, token.decimals) }))] })), _jsx(Typography, Object.assign({ fontSize: 14, lineHeight: 1, fontWeight: "500", color: "text.secondary", mr: 1, ml: 6 }, { children: token.symbol }))] })));
-};

package/components/SwapRoutes/SwapRoutes.js

@@ -1,32 +0,0 @@
-import { jsx as _jsx, 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 { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { useSwapRoutes } from '../../hooks';
-import { useCurrentRoute } from '../../stores';
-import { routes } from '../../utils/routes';
-import { CardContainer, CardTitle } from '../Card';
-import { SwapRouteCard, SwapRouteCardSkeleton, SwapRouteNotFoundCard, } from '../SwapRouteCard';
-import { Stack } from './SwapRoutes.style';
-import { SwapRoutesUpdateProgress } from './SwapRoutesUpdateProgress';
-export const SwapRoutes = (props) => {
-    const { t } = useTranslation();
-    const navigate = useNavigate();
-    const [currentRoute] = useCurrentRoute();
-    const { routes: swapRoutes, isLoading, isFetching, isFetched, } = useSwapRoutes();
-    const handleCardClick = useCallback(() => {
-        navigate(routes.swapRoutes);
-    }, [navigate]);
-    if (!(swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.length) && !isLoading && !isFetching && !isFetched) {
-        return null;
-    }
-    const routeNotFound = !(swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.length) && isFetched;
-    return (_jsxs(CardContainer, Object.assign({}, props, { children: [_jsx(CardTitle, { children: t('swap.routes') }), !routeNotFound ? (_jsx(SwapRoutesUpdateProgress, { sx: {
-                    position: 'absolute',
-                    top: 8,
-                    right: 8,
-                } })) : null, _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: [_jsx(Stack, Object.assign({ direction: "row", py: 2, pl: 2, pr: routeNotFound ? 2 : 1 }, { children: routeNotFound ? (_jsx(SwapRouteNotFoundCard, { minWidth: "100%", dense: true })) : isLoading || isFetching || !currentRoute ? (_jsx(SwapRouteCardSkeleton, { minWidth: "100%", active: true, dense: true })) : (_jsx(SwapRouteCard, { minWidth: "100%", route: currentRoute, active: true, dense: true })) })), !routeNotFound ? (_jsx(Box, Object.assign({ py: 1, pr: 1 }, { children: _jsx(IconButton, Object.assign({ onClick: handleCardClick, size: "medium", "aria-label": "swap-routes" }, { children: _jsx(KeyboardArrowRightIcon, {}) })) }))) : null] }))] })));
-};

package/components/SwapRoutes/SwapRoutesUpdateProgress.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { IconButtonProps } from '@mui/material';
-export declare const SwapRoutesUpdateProgress: React.FC<IconButtonProps>;

package/components/SwapRoutes/SwapRoutesUpdateProgress.js

@@ -1,24 +0,0 @@
-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;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-/* eslint-disable react/no-array-index-key */
-import { Box } from '@mui/material';
-import { useSwapRoutes } from '../../hooks';
-import { ProgressToNextUpdate } from '../ProgressToNextUpdate';
-export const SwapRoutesUpdateProgress = (_a) => {
-    var { sx } = _a, other = __rest(_a, ["sx"]);
-    const { isLoading, isFetching, dataUpdatedAt, refetchTime, refetch } = useSwapRoutes();
-    if (isLoading) {
-        return _jsx(Box, { width: 24, height: 24, sx: sx });
-    }
-    return (_jsx(ProgressToNextUpdate, Object.assign({ updatedAt: dataUpdatedAt, timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: sx }, other)));
-};

package/components/SwapRoutes/index.d.ts

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

package/components/SwapRoutes/index.js

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

package/hooks/useHasSufficientBalance.d.ts

@@ -1,5 +0,0 @@
-export declare const useHasSufficientBalance: () => {
-    hasGasOnStartChain: boolean;
-    hasGasOnCrossChain: boolean;
-    hasSufficientBalance: boolean;
-};

package/hooks/useHasSufficientBalance.js

@@ -1,72 +0,0 @@
-import { isSwapStep } from '@lifi/sdk';
-import Big from 'big.js';
-import { useMemo } from 'react';
-import { useWatch } from 'react-hook-form';
-import { useDebouncedWatch } from '.';
-import { SwapFormKey, SwapFormKeyHelper } from '../providers/SwapFormProvider';
-import { useWallet } from '../providers/WalletProvider';
-import { useCurrentRoute } from '../stores';
-import { useTokenBalances } from './useTokenBalances';
-export const useHasSufficientBalance = () => {
-    var _a;
-    const { account } = useWallet();
-    const [route] = useCurrentRoute();
-    const [fromChainId, toChainId, fromToken] = useWatch({
-        name: [
-            SwapFormKeyHelper.getChainKey('from'),
-            SwapFormKeyHelper.getChainKey('to'),
-            SwapFormKey.FromToken,
-        ],
-    });
-    const fromAmount = useDebouncedWatch(SwapFormKey.FromAmount, 250);
-    const lastStep = route === null || route === void 0 ? void 0 : route.steps.at(-1);
-    const { tokens: fromChainTokenBalances } = useTokenBalances(fromChainId);
-    const { tokens: toChainTokenBalances } = useTokenBalances((_a = lastStep === null || lastStep === void 0 ? void 0 : lastStep.action.fromChainId) !== null && _a !== void 0 ? _a : toChainId);
-    const hasGasOnStartChain = useMemo(() => {
-        var _a, _b, _c;
-        const gasToken = (_a = route === null || route === void 0 ? void 0 : route.steps[0].estimate.gasCosts) === null || _a === void 0 ? void 0 : _a[0].token;
-        if (!account.isActive || !gasToken || !fromAmount) {
-            return true;
-        }
-        const gasTokenBalance = Big((_c = (_b = fromChainTokenBalances === null || fromChainTokenBalances === void 0 ? void 0 : fromChainTokenBalances.find((t) => t.address === gasToken.address)) === null || _b === void 0 ? void 0 : _b.amount) !== null && _c !== void 0 ? _c : 0);
-        let requiredAmount = route.steps
-            .filter((step) => step.action.fromChainId === route.fromChainId)
-            .reduce((big, step) => { var _a; return big.plus(Big(((_a = step.estimate.gasCosts) === null || _a === void 0 ? void 0 : _a[0].amount) || 0)); }, Big(0))
-            .div(Math.pow(10, gasToken.decimals));
-        if (route.fromToken.address === gasToken.address) {
-            requiredAmount = requiredAmount.plus(Big(fromAmount));
-        }
-        return gasTokenBalance.gt(0) && gasTokenBalance.gte(requiredAmount);
-    }, [
-        account.isActive,
-        fromAmount,
-        fromChainTokenBalances,
-        route === null || route === void 0 ? void 0 : route.fromChainId,
-        route === null || route === void 0 ? void 0 : route.fromToken.address,
-        route === null || route === void 0 ? void 0 : route.steps,
-    ]);
-    const hasGasOnCrossChain = useMemo(() => {
-        var _a, _b, _c, _d, _e, _f;
-        const gasToken = (_a = lastStep === null || lastStep === void 0 ? void 0 : lastStep.estimate.gasCosts) === null || _a === void 0 ? void 0 : _a[0].token;
-        if (!account.isActive || !gasToken || !isSwapStep(lastStep)) {
-            return true;
-        }
-        const balance = Big((_c = (_b = toChainTokenBalances === null || toChainTokenBalances === void 0 ? void 0 : toChainTokenBalances.find((t) => t.address === gasToken.address)) === null || _b === void 0 ? void 0 : _b.amount) !== null && _c !== void 0 ? _c : 0);
-        const gasEstimate = (_d = lastStep.estimate.gasCosts) === null || _d === void 0 ? void 0 : _d[0].amount;
-        const requiredAmount = Big(gasEstimate || 0).div(Math.pow(10, ((_f = (_e = lastStep.estimate.gasCosts) === null || _e === void 0 ? void 0 : _e[0].token.decimals) !== null && _f !== void 0 ? _f : 0)));
-        return balance.gt(0) && balance.gte(requiredAmount);
-    }, [account.isActive, lastStep, toChainTokenBalances]);
-    const hasSufficientBalance = useMemo(() => {
-        var _a, _b;
-        if (!account.isActive || !fromToken || !fromAmount) {
-            return true;
-        }
-        const balance = Big((_b = (_a = fromChainTokenBalances === null || fromChainTokenBalances === void 0 ? void 0 : fromChainTokenBalances.find((t) => t.address === fromToken)) === null || _a === void 0 ? void 0 : _a.amount) !== null && _b !== void 0 ? _b : 0);
-        return Big(fromAmount).lte(balance);
-    }, [account.isActive, fromAmount, fromChainTokenBalances, fromToken]);
-    return {
-        hasGasOnStartChain,
-        hasGasOnCrossChain,
-        hasSufficientBalance,
-    };
-};

package/pages/SwapPage/StepItem.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { Step, TokenAmount } from '@lifi/sdk';
-export declare const StepItem: React.FC<{
-    step: Step;
-    fromToken?: TokenAmount;
-    toToken?: TokenAmount;
-}>;

package/stores/route/useCurrentRoute.d.ts

@@ -1,2 +0,0 @@
-import { Route } from '@lifi/sdk';
-export declare const useCurrentRoute: () => [Route | undefined, (route?: Route) => void];

package/stores/route/useCurrentRoute.js

@@ -1,5 +0,0 @@
-import shallow from 'zustand/shallow';
-import { useRouteStore } from './useRouteStore';
-export const useCurrentRoute = () => {
-    return useRouteStore((state) => [state.currentRoute, state.setCurrentRoute], shallow);
-};

package/utils/routes.d.ts

@@ -1,11 +0,0 @@
-export declare const routes: {
-    home: string;
-    selectWallet: string;
-    settings: string;
-    fromToken: string;
-    toToken: string;
-    swapRoutes: string;
-    swap: string;
-};
-export declare const routesValues: string[];
-export declare type RouteType = keyof typeof routes;

package/utils/routes.js

@@ -1,10 +0,0 @@
-export const routes = {
-    home: '/',
-    selectWallet: 'select-wallet',
-    settings: 'settings',
-    fromToken: 'select-from-token',
-    toToken: 'select-to-token',
-    swapRoutes: 'swap-routes',
-    swap: 'swap',
-};
-export const routesValues = Object.values(routes);