@lifi/widget 2.2.3 → 2.2.5

package/App.js

@@ -9,11 +9,14 @@ import { Initializer } from './components/Initializer';
 import { PoweredBy } from './components/PoweredBy';
 import { RoutesExpanded } from './components/Routes';
 import { useExpandableVariant } from './hooks';
+import { useWidgetConfig } from './providers';
+import { ElementId, createElementId } from './utils';
 export const App = forwardRef(({ elementRef, open, integrator, ...other }, ref) => {
     const config = useMemo(() => ({ integrator, ...other, ...other.config }), [integrator, other]);
     return config?.variant !== 'drawer' ? (_jsx(AppProvider, { config: config, children: _jsx(AppDefault, {}) })) : (_jsx(AppDrawer, { ref: ref, elementRef: elementRef, integrator: integrator, config: config, open: open }));
 });
 export const AppDefault = () => {
+    const { elementId } = useWidgetConfig();
     const expandable = useExpandableVariant();
-    return (_jsxs(AppExpandedContainer, { children: [_jsxs(AppContainer, { children: [_jsx(Header, {}), _jsx(FlexContainer, { disableGutters: true, children: _jsx(AppRoutes, {}) }), _jsx(PoweredBy, {}), _jsx(Initializer, {})] }), expandable ? _jsx(RoutesExpanded, {}) : null] }));
+    return (_jsxs(AppExpandedContainer, { id: createElementId(ElementId.AppExpandedContainer, elementId), children: [_jsxs(AppContainer, { children: [_jsx(Header, {}), _jsx(FlexContainer, { disableGutters: true, children: _jsx(AppRoutes, {}) }), _jsx(PoweredBy, {}), _jsx(Initializer, {})] }), expandable ? _jsx(RoutesExpanded, {}) : null] }));
 };

package/cjs/App.js

@@ -12,12 +12,15 @@ const Initializer_1 = require("./components/Initializer");
 const PoweredBy_1 = require("./components/PoweredBy");
 const Routes_1 = require("./components/Routes");
 const hooks_1 = require("./hooks");
+const providers_1 = require("./providers");
+const utils_1 = require("./utils");
 exports.App = (0, react_1.forwardRef)(({ elementRef, open, integrator, ...other }, ref) => {
     const config = (0, react_1.useMemo)(() => ({ integrator, ...other, ...other.config }), [integrator, other]);
     return config?.variant !== 'drawer' ? ((0, jsx_runtime_1.jsx)(AppProvider_1.AppProvider, { config: config, children: (0, jsx_runtime_1.jsx)(exports.AppDefault, {}) })) : ((0, jsx_runtime_1.jsx)(AppDrawer_1.AppDrawer, { ref: ref, elementRef: elementRef, integrator: integrator, config: config, open: open }));
 });
 const AppDefault = () => {
+    const { elementId } = (0, providers_1.useWidgetConfig)();
     const expandable = (0, hooks_1.useExpandableVariant)();
-    return ((0, jsx_runtime_1.jsxs)(AppContainer_1.AppExpandedContainer, { children: [(0, jsx_runtime_1.jsxs)(AppContainer_1.AppContainer, { children: [(0, jsx_runtime_1.jsx)(Header_1.Header, {}), (0, jsx_runtime_1.jsx)(AppContainer_1.FlexContainer, { disableGutters: true, children: (0, jsx_runtime_1.jsx)(AppRoutes_1.AppRoutes, {}) }), (0, jsx_runtime_1.jsx)(PoweredBy_1.PoweredBy, {}), (0, jsx_runtime_1.jsx)(Initializer_1.Initializer, {})] }), expandable ? (0, jsx_runtime_1.jsx)(Routes_1.RoutesExpanded, {}) : null] }));
+    return ((0, jsx_runtime_1.jsxs)(AppContainer_1.AppExpandedContainer, { id: (0, utils_1.createElementId)(utils_1.ElementId.AppExpandedContainer, elementId), children: [(0, jsx_runtime_1.jsxs)(AppContainer_1.AppContainer, { children: [(0, jsx_runtime_1.jsx)(Header_1.Header, {}), (0, jsx_runtime_1.jsx)(AppContainer_1.FlexContainer, { disableGutters: true, children: (0, jsx_runtime_1.jsx)(AppRoutes_1.AppRoutes, {}) }), (0, jsx_runtime_1.jsx)(PoweredBy_1.PoweredBy, {}), (0, jsx_runtime_1.jsx)(Initializer_1.Initializer, {})] }), expandable ? (0, jsx_runtime_1.jsx)(Routes_1.RoutesExpanded, {}) : null] }));
 };
 exports.AppDefault = AppDefault;

package/cjs/components/AppContainer.js

@@ -51,6 +51,6 @@ exports.FlexContainer = (0, styles_1.styled)(material_1.Container)({
 const AppContainer = ({ children }) => {
     // const ref = useRef<HTMLDivElement>(null);
     const { containerStyle, variant, elementId } = (0, providers_1.useWidgetConfig)();
-    return ((0, jsx_runtime_1.jsx)(RelativeContainer, { sx: containerStyle, variant: variant, children: (0, jsx_runtime_1.jsx)(CssBaselineContainer, { id: (0, utils_1.createElementId)(utils_1.ElementId.ScrollableContainer, elementId), variant: variant, enableColorScheme: true, children: (0, jsx_runtime_1.jsx)(exports.FlexContainer, { disableGutters: true, children: children }) }) }));
+    return ((0, jsx_runtime_1.jsx)(RelativeContainer, { sx: containerStyle, variant: variant, id: (0, utils_1.createElementId)(utils_1.ElementId.RelativeContainer, elementId), children: (0, jsx_runtime_1.jsx)(CssBaselineContainer, { id: (0, utils_1.createElementId)(utils_1.ElementId.ScrollableContainer, elementId), variant: variant, enableColorScheme: true, children: (0, jsx_runtime_1.jsx)(exports.FlexContainer, { disableGutters: true, children: children }) }) }));
 };
 exports.AppContainer = AppContainer;

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

@@ -20,7 +20,7 @@ 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: (0, styles_1.alpha)(theme.palette.background.default, 0.84),
+    backgroundColor: theme.palette.background.default,
     backdropFilter: 'blur(12px)',
     position: sticky ? 'sticky' : 'relative',
     top: 0,

package/cjs/components/Routes/RoutesExpanded.style.js

@@ -26,7 +26,7 @@ exports.Container = (0, styles_1.styled)(material_1.ScopedCssBaseline)(({ theme
     flexDirection: 'column',
 }));
 exports.Header = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
-    backgroundColor: (0, styles_1.alpha)(theme.palette.background.default, 0.84),
+    backgroundColor: theme.palette.background.default,
     backdropFilter: 'blur(12px)',
     display: 'flex',
     justifyContent: 'space-between',

package/cjs/config/version.d.ts

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

package/cjs/config/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = exports.name = void 0;
 exports.name = '@lifi/widget';
-exports.version = '2.2.3';
+exports.version = '2.2.5';

package/cjs/utils/elements.d.ts

@@ -1,5 +1,7 @@
 export declare enum ElementId {
-    ScrollableContainer = "widget-scrollable-container",
-    Header = "widget-header"
+    AppExpandedContainer = "widget-app-expanded-container",
+    Header = "widget-header",
+    RelativeContainer = "widget-relative-container",
+    ScrollableContainer = "widget-scrollable-container"
 }
 export declare const createElementId: (ElementId: ElementId, elementId: string) => string;

package/cjs/utils/elements.js

@@ -3,8 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createElementId = exports.ElementId = void 0;
 var ElementId;
 (function (ElementId) {
-    ElementId["ScrollableContainer"] = "widget-scrollable-container";
+    ElementId["AppExpandedContainer"] = "widget-app-expanded-container";
     ElementId["Header"] = "widget-header";
+    ElementId["RelativeContainer"] = "widget-relative-container";
+    ElementId["ScrollableContainer"] = "widget-scrollable-container";
 })(ElementId || (exports.ElementId = ElementId = {}));
-const createElementId = (ElementId, elementId) => `${ElementId}-${elementId}`;
+const createElementId = (ElementId, elementId) => elementId ? `${ElementId}-${elementId}` : ElementId;
 exports.createElementId = createElementId;

package/components/AppContainer.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Container, ScopedCssBaseline } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useWidgetConfig } from '../providers';
-import { createElementId, ElementId } from '../utils';
+import { ElementId, createElementId } from '../utils';
 export const maxHeight = 680;
 export const AppExpandedContainer = styled(Box, {
     shouldForwardProp: (prop) => prop !== 'variant',
@@ -48,5 +48,5 @@ export const FlexContainer = styled(Container)({
 export const AppContainer = ({ children }) => {
     // const ref = useRef<HTMLDivElement>(null);
     const { containerStyle, variant, elementId } = useWidgetConfig();
-    return (_jsx(RelativeContainer, { sx: containerStyle, variant: variant, children: _jsx(CssBaselineContainer, { id: createElementId(ElementId.ScrollableContainer, elementId), variant: variant, enableColorScheme: true, children: _jsx(FlexContainer, { disableGutters: true, children: children }) }) }));
+    return (_jsx(RelativeContainer, { sx: containerStyle, variant: variant, id: createElementId(ElementId.RelativeContainer, elementId), children: _jsx(CssBaselineContainer, { id: createElementId(ElementId.ScrollableContainer, elementId), variant: variant, enableColorScheme: true, children: _jsx(FlexContainer, { disableGutters: true, children: children }) }) }));
 };

package/components/Header/Header.style.js

@@ -17,7 +17,7 @@ export const HeaderAppBar = styled(AppBar)(({ theme }) => ({
 export const Container = styled(Box, {
     shouldForwardProp: (prop) => prop !== 'sticky',
 })(({ theme, sticky }) => ({
-    backgroundColor: alpha(theme.palette.background.default, 0.84),
+    backgroundColor: theme.palette.background.default,
     backdropFilter: 'blur(12px)',
     position: sticky ? 'sticky' : 'relative',
     top: 0,

package/components/Routes/RoutesExpanded.style.js

@@ -1,5 +1,5 @@
 import { Box, ScopedCssBaseline } from '@mui/material';
-import { alpha, styled } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import { maxHeight } from '../AppContainer';
 export const CollapseContainer = styled(Box)(({ theme }) => ({
     height: maxHeight,
@@ -23,7 +23,7 @@ export const Container = styled(ScopedCssBaseline)(({ theme }) => ({
     flexDirection: 'column',
 }));
 export const Header = styled(Box)(({ theme }) => ({
-    backgroundColor: alpha(theme.palette.background.default, 0.84),
+    backgroundColor: theme.palette.background.default,
     backdropFilter: 'blur(12px)',
     display: 'flex',
     justifyContent: 'space-between',

package/config/version.d.ts

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

package/config/version.js

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

package/package.json

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