@lifi/widget 3.0.0-alpha.25 → 3.0.0-alpha.26

package/config/theme.ts

@@ -1,20 +1,22 @@
-import { loadingButtonClasses } from '@mui/lab/LoadingButton';
+import { loadingButtonClasses } from '@mui/lab';
 import type {} from '@mui/lab/themeAugmentation';
 import type { PaletteMode, SimplePaletteColorOptions } from '@mui/material';
-import { touchRippleClasses } from '@mui/material/ButtonBase';
-import { dialogActionsClasses } from '@mui/material/DialogActions';
-import { common } from '@mui/material/colors';
 import {
   alpha,
   createTheme as createMuiTheme,
   css,
   darken,
+  dialogActionsClasses,
   getContrastRatio,
   keyframes,
   lighten,
-} from '@mui/material/styles';
+  touchRippleClasses,
+} from '@mui/material';
 import type { ThemeConfig } from '../types/widget.js';
 
+// @mui/icons-material ESM issue
+// https://github.com/mui/material-ui/issues/30671
+
 // https://mui.com/customization/palette/
 declare module '@mui/material/styles' {
   interface TypographyVariants {
@@ -64,6 +66,10 @@ const palette = {
   info: {
     main: '#297EFF',
   },
+  common: {
+    black: '#000',
+    white: '#fff',
+  },
 };
 
 const paletteLight = {
@@ -110,13 +116,13 @@ export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) => {
     0.2,
   );
   const contrastButtonColor =
-    getContrastRatio(common.white, primaryMainColor) >= 3
-      ? common.white
-      : common.black;
+    getContrastRatio(palette.common.white, primaryMainColor) >= 3
+      ? palette.common.white
+      : palette.common.black;
   const contrastTextButtonColor =
-    getContrastRatio(common.white, alpha(primaryMainColor, 0.08)) >= 3
-      ? common.white
-      : common.black;
+    getContrastRatio(palette.common.white, alpha(primaryMainColor, 0.08)) >= 3
+      ? palette.common.white
+      : palette.common.black;
   return createMuiTheme({
     typography: {
       fontFamily: 'Inter var, Inter, sans-serif',
@@ -200,8 +206,8 @@ export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) => {
             [`&.Mui-disabled, &.Mui-disabled:hover`]: {
               color:
                 mode === 'light'
-                  ? alpha(common.black, 0.56)
-                  : alpha(common.white, 0.56),
+                  ? alpha(palette.common.black, 0.56)
+                  : alpha(palette.common.white, 0.56),
               cursor: 'not-allowed',
               pointerEvents: 'auto',
             },

package/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '3.0.0-alpha.25';
+export const version = '3.0.0-alpha.26';

package/i18n/index.ts

@@ -1,16 +1,16 @@
-import bn from './bn.json';
-import de from './de.json';
-import en from './en.json';
-import es from './es.json';
-import fr from './fr.json';
-import id from './id.json';
-import it from './it.json';
-import ko from './ko.json';
-import pt from './pt.json';
-import th from './th.json';
-import tr from './tr.json';
-import uk from './uk.json';
-import vi from './vi.json';
-import zh from './zh.json';
+import bn from './bn.json' assert { type: 'json' };
+import de from './de.json' assert { type: 'json' };
+import en from './en.json' assert { type: 'json' };
+import es from './es.json' assert { type: 'json' };
+import fr from './fr.json' assert { type: 'json' };
+import id from './id.json' assert { type: 'json' };
+import it from './it.json' assert { type: 'json' };
+import ko from './ko.json' assert { type: 'json' };
+import pt from './pt.json' assert { type: 'json' };
+import th from './th.json' assert { type: 'json' };
+import tr from './tr.json' assert { type: 'json' };
+import uk from './uk.json' assert { type: 'json' };
+import vi from './vi.json' assert { type: 'json' };
+import zh from './zh.json' assert { type: 'json' };
 
 export { bn, de, en, es, fr, id, it, ko, pt, th, tr, uk, vi, zh };

package/icons/InsuraceLogo.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from '@mui/material/styles';
+import { useTheme } from '@mui/material';
 import type { SVGProps } from 'react';
 
 export const InsuraceLogo = (props: SVGProps<SVGSVGElement>) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.0.0-alpha.25",
+  "version": "3.0.0-alpha.26",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./_esm/index.js",
@@ -35,7 +35,7 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@lifi/sdk": "^3.0.0-alpha.54",
-    "@lifi/wallet-management": "^3.0.0-alpha.17",
+    "@lifi/wallet-management": "^3.0.0-alpha.18",
     "@mui/icons-material": "^5.15.8",
     "@mui/lab": "^5.0.0-alpha.164",
     "@mui/material": "^5.15.8",

package/pages/MainPage/MainPage.style.tsx

@@ -1,5 +1,4 @@
-import { Container } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { Container, styled } from '@mui/material';
 
 export const FormContainer = styled(Container)({
   display: 'flex',

package/pages/RoutesPage/RoutesPage.style.ts

@@ -1,5 +1,4 @@
-import { Stack as MuiStack } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { Stack as MuiStack, styled } from '@mui/material';
 
 export const Stack = styled(MuiStack)(({ theme }) => ({
   position: 'relative',

package/pages/SelectTokenPage/SearchTokenInput.style.tsx

@@ -1,4 +1,4 @@
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import { Input as InputBase } from '../../components/Input.js';
 
 export const Input = styled(InputBase)(({ theme }) => ({

package/pages/SettingsPage/ResetSettingsButton.style.tsx

@@ -1,5 +1,4 @@
-import { Box } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { Box, styled } from '@mui/material';
 import { getContrastAlphaColor } from '../../utils/colors.js';
 
 export const ResetButtonContainer = styled(Box)(({ theme }) => ({

package/pages/SettingsPage/SettingsCard/SettingCard.style.tsx

@@ -1,6 +1,4 @@
-import { Box, Badge as MuiBadge } from '@mui/material';
-import { badgeClasses } from '@mui/material/Badge';
-import { styled } from '@mui/material/styles';
+import { Box, Badge as MuiBadge, badgeClasses, styled } from '@mui/material';
 
 export const SettingsList = styled(Box)(({ theme }) => ({
   display: 'flex',

package/pages/SettingsPage/SlippageSettings/SlippageSettings.style.tsx

@@ -1,7 +1,12 @@
 import type { Theme } from '@mui/material';
-import { Box, ButtonBase, InputBase } from '@mui/material';
-import { inputBaseClasses } from '@mui/material/InputBase';
-import { alpha, styled } from '@mui/material/styles';
+import {
+  Box,
+  ButtonBase,
+  InputBase,
+  alpha,
+  inputBaseClasses,
+  styled,
+} from '@mui/material';
 import { getCardFieldsetBackgroundColor } from '../../../utils/colors.js';
 
 export const SettingsFieldSet = styled(Box)(({ theme }) => ({

package/pages/TransactionPage/StatusBottomSheet.style.tsx

@@ -1,6 +1,5 @@
 import type { Theme } from '@mui/material';
-import { Box } from '@mui/material';
-import { alpha, darken, styled } from '@mui/material/styles';
+import { Box, alpha, darken, styled } from '@mui/material';
 import { RouteExecutionStatus } from '../../stores/routes/types.js';
 
 type StatusColor = RouteExecutionStatus | 'warning';

package/providers/ThemeProvider/ThemeProvider.tsx

@@ -1,6 +1,8 @@
 import type { PaletteMode } from '@mui/material';
-import { useMediaQuery } from '@mui/material';
-import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import {
+  ThemeProvider as MuiThemeProvider,
+  useMediaQuery,
+} from '@mui/material';
 import { useEffect, useMemo, useState } from 'react';
 import { createTheme } from '../../config/theme.js';
 import { useAppearance } from '../../stores/settings/useAppearance.js';

package/utils/colors.ts

@@ -1,6 +1,5 @@
 import type { PaletteMode, Theme } from '@mui/material';
-import { common } from '@mui/material/colors';
-import { alpha, getContrastRatio } from '@mui/material/styles';
+import { alpha } from '@mui/material';
 
 export const getContrastAlphaColor = (
   mode: PaletteMode,
@@ -8,11 +7,6 @@ export const getContrastAlphaColor = (
 ) =>
   mode === 'light' ? `rgb(0 0 0 / ${alpha})` : `rgb(255 255 255 / ${alpha})`;
 
-export const getContrastTextColor = (theme: Theme, background?: string) =>
-  getContrastRatio(common.white, background ?? theme.palette.primary.main) >= 3
-    ? common.white
-    : common.black;
-
 export const getWarningBackgroundColor = (theme: Theme) =>
   theme.palette.mode === 'light'
     ? alpha(theme.palette.warning.main, 0.32)