@lifi/widget 1.10.0 → 1.10.3

package/AppDrawer.js

@@ -7,6 +7,7 @@ import { AppDefault } from './App';
 import { DrawerButton, DrawerButtonTypography } from './AppDrawer.style';
 import { AppProvider } from './AppProvider';
 export const AppDrawer = forwardRef(({ elementRef, open, config }, ref) => {
+    var _a, _b, _c, _d, _e, _f;
     const { t } = useTranslation();
     const openRef = useRef(open);
     const [drawerOpen, setDrawerOpen] = useState(open);
@@ -25,10 +26,16 @@ export const AppDrawer = forwardRef(({ elementRef, open, config }, ref) => {
         openDrawer,
         closeDrawer,
     }), [closeDrawer, openDrawer, toggleDrawer]);
-    return (_jsxs(AppProvider, Object.assign({ config: config }, { children: [_jsxs(DrawerButton, Object.assign({ variant: "contained", onClick: toggleDrawer, open: drawerOpen, disableElevation: true }, { children: [drawerOpen ? _jsx(KeyboardArrowRightIcon, {}) : _jsx(KeyboardArrowLeftIcon, {}), _jsx(DrawerButtonTypography, { children: drawerOpen ? t('button.hide') : t('button.lifiSwap') })] })), _jsx(Drawer, Object.assign({ ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
+    return (_jsxs(AppProvider, Object.assign({ config: config }, { children: [_jsxs(DrawerButton, Object.assign({ variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config === null || config === void 0 ? void 0 : config.containerStyle, disableElevation: true }, { children: [drawerOpen ? _jsx(KeyboardArrowRightIcon, {}) : _jsx(KeyboardArrowLeftIcon, {}), _jsx(DrawerButtonTypography, { children: drawerOpen ? t('button.hide') : t('button.lifiSwap') })] })), _jsx(Drawer, Object.assign({ ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
                     sx: {
                         backgroundColor: 'rgb(0 0 0 / 48%)',
                         backdropFilter: 'blur(3px)',
                     },
+                }, PaperProps: {
+                    sx: {
+                        width: (_b = (_a = config === null || config === void 0 ? void 0 : config.containerStyle) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : '100%',
+                        minWidth: (_d = (_c = config === null || config === void 0 ? void 0 : config.containerStyle) === null || _c === void 0 ? void 0 : _c.minWidth) !== null && _d !== void 0 ? _d : 375,
+                        maxWidth: (_f = (_e = config === null || config === void 0 ? void 0 : config.containerStyle) === null || _e === void 0 ? void 0 : _e.maxWidth) !== null && _f !== void 0 ? _f : 392,
+                    },
                 }, keepMounted: true }, { children: _jsx(AppDefault, {}) }))] })));
 });

package/AppDrawer.style.d.ts

@@ -33,6 +33,10 @@ export declare const DrawerButton: import("@emotion/styled").StyledComponent<{
     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" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "size" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     open?: boolean | undefined;
+    drawerProps?: {
+        width?: string | number | undefined;
+        maxWidth?: string | number | undefined;
+    } | undefined;
 }, {}, {}>;
 export declare const DrawerButtonTypography: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
     align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;

package/AppDrawer.style.js

@@ -1,8 +1,23 @@
 import { Button, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
+const getButtonTransformWidth = (drawerWidth, drawerMaxWidth) => {
+    if (typeof drawerWidth === 'number') {
+        return `${drawerWidth}px`;
+    }
+    if (typeof drawerWidth === 'string' && !drawerWidth.includes('%')) {
+        return drawerWidth;
+    }
+    if (typeof drawerMaxWidth === 'number') {
+        return `${drawerMaxWidth}px`;
+    }
+    if (typeof drawerMaxWidth === 'string' && !drawerMaxWidth.includes('%')) {
+        return drawerMaxWidth;
+    }
+    return '392px';
+};
 export const DrawerButton = styled(Button, {
-    shouldForwardProp: (prop) => prop !== 'open',
-})(({ theme, open }) => ({
+    shouldForwardProp: (prop) => !['open', 'drawerProps'].includes(prop),
+})(({ theme, open, drawerProps }) => ({
     background: theme.palette.mode === 'light'
         ? theme.palette.common.black
         : theme.palette.common.white,
@@ -20,7 +35,9 @@ export const DrawerButton = styled(Button, {
     position: 'absolute',
     right: 0,
     top: 'calc(50% - 74px)',
-    transform: `translate3d(calc(${open ? '392px' : '0px'} * -1), 0, 0)`,
+    transform: `translate3d(calc(${open
+        ? getButtonTransformWidth(drawerProps === null || drawerProps === void 0 ? void 0 : drawerProps.width, drawerProps === null || drawerProps === void 0 ? void 0 : drawerProps.maxWidth)
+        : '0px'} * -1), 0, 0)`,
     transition: theme.transitions.create(['transform'], {
         duration: theme.transitions.duration.enteringScreen,
         easing: theme.transitions.easing.easeOut,

package/components/StepActions/StepActions.js

@@ -26,7 +26,7 @@ export const StepActions = (_a) => {
     const isFullView = !dense && ((_b = step.includedSteps) === null || _b === void 0 ? void 0 : _b.length) > 1;
     return (_jsxs(Box, Object.assign({}, other, { children: [_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' }, mb: isFullView ? 1 : 0 }, { children: [_jsx(StepAvatar, Object.assign({ variant: step.type === 'lifi' ? 'square' : 'circular', src: step.type !== 'lifi' ? step.toolDetails.logoURI : undefined, alt: step.toolDetails.name }, { children: step.type === 'lifi' ? _jsx(LiFiLogo, {}) : step.toolDetails.name[0] })), _jsx(Typography, Object.assign({ ml: 2, fontSize: 18, fontWeight: "500", textTransform: "capitalize" }, { children: step.type === 'lifi'
                             ? 'LI.FI Smart Contract'
-                            : step.toolDetails.name }))] })), isFullView ? (_jsx(Stepper, Object.assign({ orientation: "vertical", connector: _jsx(StepConnector, {}), activeStep: -1 }, { children: step.includedSteps.map((step) => (_jsxs(MuiStep, Object.assign({ expanded: true }, { children: [_jsx(StepLabel, Object.assign({ StepIconComponent: StepIcon }, { children: _jsx(StepDetailsLabel, { step: step }) })), _jsx(StepContent, { children: _jsx(StepDetailsContent, { step: step }) })] }), step.id))) }))) : (_jsxs(Box, Object.assign({ ml: 6 }, { children: [_jsx(StepDetailsLabel, { step: step }), _jsx(StepDetailsContent, { step: step })] })))] })));
+                            : step.toolDetails.name }))] })), isFullView ? (_jsx(Stepper, Object.assign({ orientation: "vertical", connector: _jsx(StepConnector, {}), activeStep: -1 }, { children: step.includedSteps.map((step) => (_jsxs(MuiStep, Object.assign({ expanded: true }, { children: [_jsx(StepLabel, Object.assign({ StepIconComponent: StepIcon }, { children: step.type === 'cross' || step.type === 'lifi' ? (_jsx(CrossStepDetailsLabel, { step: step })) : (_jsx(SwapStepDetailsLabel, { step: step })) })), _jsx(StepContent, { children: _jsx(StepDetailsContent, { step: step }) })] }), step.id))) }))) : (_jsxs(Box, Object.assign({ ml: 6 }, { children: [_jsx(StepDetailsLabel, { step: step }), _jsx(StepDetailsContent, { step: step })] })))] })));
 };
 export const StepDetailsContent = ({ step }) => {
     return (_jsxs(Typography, Object.assign({ fontSize: 12, fontWeight: "500", color: "text.secondary", alignItems: "center", display: "flex" }, { children: [formatTokenAmount(step.estimate.fromAmount, step.action.fromToken.decimals), ' ', step.action.fromToken.symbol, _jsx(ArrowForwardIcon, { sx: { fontSize: 18, paddingX: 0.5 } }), formatTokenAmount(step.estimate.toAmount, step.action.toToken.decimals), ' ', step.action.toToken.symbol] })));
@@ -42,8 +42,11 @@ export const CrossStepDetailsLabel = ({ step }) => {
         }) })));
 };
 export const SwapStepDetailsLabel = ({ step }) => {
+    var _a;
     const { t } = useTranslation();
+    const { getChainById } = useChains();
     return (_jsx(Typography, Object.assign({ fontSize: 12, fontWeight: "500", color: "text.secondary" }, { children: t('swap.swapStepDetails', {
-            value: step.toolDetails.name,
+            chain: (_a = getChainById(step.action.fromChainId)) === null || _a === void 0 ? void 0 : _a.name,
+            tool: step.toolDetails.name,
         }) })));
 };

package/components/SwapRouteCard/SwapRouteCard.js

@@ -17,7 +17,7 @@ import { StepActions } from '../StepActions';
 import { StepToken } from '../StepToken';
 import { Card, Check, Label } from './SwapRouteCard.style';
 export const SwapRouteCard = (_a) => {
-    var _b;
+    var _b, _c;
     var { route, active, dense } = _a, other = __rest(_a, ["route", "active", "dense"]);
     const { t } = useTranslation();
     const label = ((_b = route.tags) === null || _b === void 0 ? void 0 : _b.length)
@@ -32,7 +32,7 @@ export const SwapRouteCard = (_a) => {
                     : null, _jsxs(Box, Object.assign({ sx: {
                         display: 'flex',
                         justifyContent: 'space-between',
-                    } }, { children: [_jsxs(Box, { children: [_jsx(Typography, Object.assign({ fontSize: 18, fontWeight: "500" }, { children: t(`swap.currency`, { value: route.gasCostUSD }) })), _jsx(Typography, Object.assign({ fontSize: 12, color: "text.secondary" }, { children: t(`swap.gas`) }))] }), _jsxs(Box, { children: [_jsxs(Typography, Object.assign({ fontSize: 18, fontWeight: "500", display: "flex", justifyContent: "flex-end" }, { children: ["~", (route.steps
+                    } }, { children: [_jsxs(Box, { children: [_jsx(Typography, Object.assign({ fontSize: 18, fontWeight: "500" }, { children: t(`swap.currency`, { value: (_c = route.gasCostUSD) !== null && _c !== void 0 ? _c : 0 }) })), _jsx(Typography, Object.assign({ fontSize: 12, color: "text.secondary" }, { children: t(`swap.gas`) }))] }), _jsxs(Box, { children: [_jsxs(Typography, Object.assign({ fontSize: 18, fontWeight: "500", display: "flex", justifyContent: "flex-end" }, { children: ["~", (route.steps
                                             .map((step) => step.estimate.executionDuration)
                                             .reduce((cumulated, x) => cumulated + x) / 60).toFixed(0)] })), _jsx(Typography, Object.assign({ fontSize: 12, color: "text.secondary", textAlign: "end" }, { children: t(`swap.minutes`) }))] })] }))] }) })));
 };

package/config/sentry.js

@@ -13,7 +13,7 @@ export const initSentry = (enabled) => {
         ],
         sampleRate: 1,
         tracesSampleRate: 0.2,
-        enabled: enabled && process.env.NODE_ENV === 'production',
+        enabled,
         environment: process.env.NODE_ENV,
         release: version,
     });

package/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "1.10.0";
+export declare const version = "1.10.3";

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '1.10.0';
+export const version = '1.10.3';

package/hooks/useHasSufficientBalance.js

@@ -23,9 +23,9 @@ export const useHasSufficientBalance = () => {
     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, _d, _e;
+        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) {
+        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);
@@ -34,12 +34,12 @@ export const useHasSufficientBalance = () => {
             .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) {
-            const tokenBalance = Big((_e = (_d = fromChainTokenBalances === null || fromChainTokenBalances === void 0 ? void 0 : fromChainTokenBalances.find((t) => t.address === route.fromToken.address)) === null || _d === void 0 ? void 0 : _d.amount) !== null && _e !== void 0 ? _e : 0);
-            requiredAmount = requiredAmount.plus(tokenBalance);
+            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,

package/hooks/useSwapRoutes.js

@@ -44,8 +44,8 @@ export const useSwapRoutes = () => {
         !isNaN(toChainId) &&
         Boolean(fromTokenAddress) &&
         Boolean(toTokenAddress) &&
-        Boolean(fromTokenAmount) &&
         !isNaN(fromTokenAmount) &&
+        Number(fromTokenAmount) > 0 &&
         !Number.isNaN(slippage);
     const queryKey = [
         'routes',
@@ -96,11 +96,12 @@ export const useSwapRoutes = () => {
         // check that the current route is selected from existing routes
         const isCurrentRouteInSet = data === null || data === void 0 ? void 0 : data.routes.some((route) => route.id === (currentRoute === null || currentRoute === void 0 ? void 0 : currentRoute.id));
         const recommendedRoute = data === null || data === void 0 ? void 0 : data.routes[0];
-        // we don't want to set the current route again if it's already selected from existing routes
-        if (!isCurrentRouteInSet && currentRoute !== recommendedRoute) {
+        // we don't want to set the current route again on mount if it's already selected from existing routes
+        if (!isCurrentRouteInSet) {
             setCurrentRoute(recommendedRoute);
         }
-    }, [currentRoute, data === null || data === void 0 ? void 0 : data.routes, setCurrentRoute]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [data === null || data === void 0 ? void 0 : data.routes, setCurrentRoute]);
     return {
         routes: data === null || data === void 0 ? void 0 : data.routes,
         isLoading: isEnabled && isLoading,

package/hooks/useTelemetry.js

@@ -1,10 +1,16 @@
+/* eslint-disable consistent-return */
 import { useEffect } from 'react';
 import { initSentry } from '../config/sentry';
 export const useTelemetry = (disabled) => {
     useEffect(() => {
-        if (process.env.NODE_ENV === 'production' && disabled) {
+        if (disabled) {
             console.warn('Enable crash reports and diagnostic data to be collected. This helps us to better understand how the widget is performing and where improvements need to be made.');
-            initSentry(false);
+        }
+        else {
+            initSentry(true);
+            return () => {
+                initSentry(false);
+            };
         }
     }, [disabled]);
 };

package/i18n/en/translation.json

@@ -52,7 +52,7 @@
     "estimatedTime": "~{{value}} min.",
     "networkIsBusy": "Network is busy...",
     "crossStepDetails": "Bridge {{from}} to {{to}} via {{tool}}",
-    "swapStepDetails": "Swap on {{value}}",
+    "swapStepDetails": "Swap on {{chain}} via {{tool}}",
     "tags": {
       "recommended": "Recommended",
       "fastest": "Fast",

package/index.js

@@ -1,10 +1,8 @@
 import { App } from './App';
 import { AppDrawer } from './AppDrawer';
-import { initSentry } from './config/sentry';
 import './fonts/inter.css';
 import { configureReactI18next } from './i18n';
 export * from './types';
-initSentry(true);
 configureReactI18next();
 // ClassNameGenerator.configure((componentName) => componentName.replace('Mui', ''));
 export const LiFiWidget = App;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.10.0",
+  "version": "1.10.3",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "sideEffects": false,
   "main": "./index.js",

package/pages/SwapPage/SwapPage.js

@@ -38,5 +38,5 @@ export const SwapPage = () => {
     };
     return (_jsxs(Container, { children: [route === null || route === void 0 ? void 0 : route.steps.map((step, index, steps) => (_jsxs(Fragment, { children: [_jsx(StepItem, { step: step, fromToken: index === 0
                             ? Object.assign(Object.assign({}, route.fromToken), { amount: route.fromAmount }) : undefined, toToken: index === steps.length - 1
-                            ? Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }) : undefined }), steps.length > 1 && index !== steps.length - 1 ? (_jsx(StepDivider, {})) : null] }, step.id))), _jsx(InsufficientGasOrFundsMessage, { mt: 2 }), status === 'idle' || status === 'error' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(SwapButton, { onClick: handleSwapClick, text: getSwapButtonText() }) }))) : null, status === 'error' ? (_jsx(Button, Object.assign({ variant: "outlined", disableElevation: true, fullWidth: true, onClick: handleRemoveRoute }, { children: t('button.removeSwap') }))) : null, _jsx(StatusBottomSheet, { status: status, route: route })] }));
+                            ? Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }) : undefined }), steps.length > 1 && index !== steps.length - 1 ? (_jsx(StepDivider, {})) : null] }, step.id))), status === 'idle' ? _jsx(InsufficientGasOrFundsMessage, { mt: 2 }) : null, status === 'idle' || status === 'error' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(SwapButton, { onClick: handleSwapClick, text: getSwapButtonText() }) }))) : null, status === 'error' ? (_jsx(Button, Object.assign({ variant: "outlined", disableElevation: true, fullWidth: true, onClick: handleRemoveRoute }, { children: t('button.removeSwap') }))) : null, _jsx(StatusBottomSheet, { status: status, route: route })] }));
 };