@lifi/widget 3.19.0-beta.2 → 3.19.0

package/src/stores/settings/types.ts

@@ -2,7 +2,7 @@ import type { Order } from '@lifi/sdk'
 import type { PropsWithChildren } from 'react'
 import type { StoreApi } from 'zustand'
 import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'
-import type { SplitSubvariant } from '../../types/widget.js'
+import type { Appearance, SplitSubvariant } from '../../types/widget.js'
 
 export type ValueSetter<S> = <K extends keyof S>(
   key: K,
@@ -19,6 +19,7 @@ export const SettingsToolTypes = ['Bridges', 'Exchanges'] as const
 export type SettingsToolType = (typeof SettingsToolTypes)[number]
 
 export interface SettingsProps {
+  appearance: Appearance
   gasPrice?: string
   language?: string
   routePriority?: Order

package/src/stores/settings/useAppearance.ts

@@ -0,0 +1,15 @@
+import { useSettingsActions } from '../../stores/settings/useSettingsActions.js'
+import type { Appearance } from '../../types/widget.js'
+import { useSettingsStore } from './useSettingsStore.js'
+
+export const useAppearance = (): [
+  Appearance,
+  (appearance: Appearance) => void,
+] => {
+  const { setValue } = useSettingsActions()
+  const appearance = useSettingsStore((state) => state.appearance)
+  const setAppearance = (appearance: Appearance) => {
+    setValue('appearance', appearance)
+  }
+  return [appearance, setAppearance]
+}

package/src/stores/settings/useSettingsStore.ts

@@ -17,6 +17,7 @@ export const defaultConfigurableSettings: Pick<
 }
 
 export const defaultSettings: SettingsProps = {
+  appearance: 'auto',
   gasPrice: 'normal',
   enabledAutoRefuel: true,
   disabledBridges: [],
@@ -125,8 +126,9 @@ export const useSettingsStore = createWithEqualityFn<SettingsState>(
           }
         }),
       reset: (bridges, exchanges) => {
+        const { appearance, ...restDefaultSettings } = defaultSettings
         set(() => ({
-          ...defaultSettings,
+          ...restDefaultSettings,
           ...defaultConfigurableSettings,
         }))
         get().initializeTools('Bridges', bridges, true)
@@ -136,7 +138,7 @@ export const useSettingsStore = createWithEqualityFn<SettingsState>(
     }),
     {
       name: 'li.fi-widget-settings',
-      version: 5,
+      version: 4,
       partialize: (state) => {
         const {
           disabledBridges,
@@ -163,6 +165,9 @@ export const useSettingsStore = createWithEqualityFn<SettingsState>(
         return state
       },
       migrate: (persistedState: any, version) => {
+        if (version === 0 && persistedState.appearance === 'system') {
+          persistedState.appearance = defaultSettings.appearance
+        }
         if (version === 1) {
           persistedState.slippage = defaultConfigurableSettings.slippage
         }

package/src/stores/settings/utils/getStateValues.ts

@@ -1,6 +1,7 @@
 import type { SettingsProps, SettingsState } from '../types.js'
 
 export const getStateValues = (state: SettingsState): SettingsProps => ({
+  appearance: state.appearance,
   gasPrice: state.gasPrice,
   language: state.language,
   routePriority: state.routePriority,

package/src/themes/createTheme.ts

@@ -1,4 +1,9 @@
-import type { CSSObject, Shape, SimplePaletteColorOptions } from '@mui/material'
+import type {
+  CSSObject,
+  PaletteMode,
+  Shape,
+  SimplePaletteColorOptions,
+} from '@mui/material'
 import {
   alpha,
   buttonClasses,
@@ -6,6 +11,7 @@ import {
   css,
   darken,
   dialogActionsClasses,
+  getContrastRatio,
   keyframes,
   lighten,
   tabsClasses,
@@ -33,86 +39,30 @@ const enterKeyframe = keyframes`
   }
 `
 
-export const createTheme = (widgetTheme: WidgetTheme = {}) => {
-  const configuredPaletteLight =
-    widgetTheme.colorSchemes?.light?.palette ?? widgetTheme.palette
-  const configuredPaletteDark =
-    widgetTheme.colorSchemes?.dark?.palette ?? widgetTheme.palette
-
-  const primaryMainColorLight =
-    (configuredPaletteLight?.primary as SimplePaletteColorOptions)?.main ??
+export const createTheme = (
+  mode: PaletteMode,
+  widgetTheme: WidgetTheme = {}
+) => {
+  const primaryMainColor =
+    (widgetTheme.palette?.primary as SimplePaletteColorOptions)?.main ??
     palette.primary.main
-  const primaryMainColorDark =
-    (configuredPaletteDark?.primary as SimplePaletteColorOptions)?.main ??
-    palette.primary.main
-
-  const primaryLightenColorLight = lighten(primaryMainColorLight, 0.84)
-  const primaryDarkenColorLight = darken(primaryMainColorLight, 0.2)
-  const primaryLightenColorDark =
-    primaryMainColorLight === primaryMainColorDark
-      ? primaryLightenColorLight
-      : lighten(primaryMainColorDark, 0.84)
-  const primaryDarkenColorDark =
-    primaryMainColorLight === primaryMainColorDark
-      ? primaryDarkenColorLight
-      : darken(primaryMainColorDark, 0.2)
-
-  const secondaryMainColorLight =
-    (configuredPaletteLight?.secondary as SimplePaletteColorOptions)?.main ??
-    palette.secondary.main
-  const secondaryMainColorDark =
-    (configuredPaletteDark?.secondary as SimplePaletteColorOptions)?.main ??
+  const primaryLightColor = lighten(primaryMainColor, 0.84)
+  const primaryDarkColor = darken(primaryMainColor, 0.2)
+  const secondaryMainColor =
+    (widgetTheme.palette?.secondary as SimplePaletteColorOptions)?.main ??
     palette.secondary.main
-
-  const secondaryLightenColorLight = lighten(secondaryMainColorLight, 0.84)
-  const secondaryDarkenColorLight = darken(secondaryMainColorLight, 0.2)
-  const secondaryLightenColorDark =
-    secondaryMainColorLight === secondaryMainColorDark
-      ? secondaryLightenColorLight
-      : lighten(secondaryMainColorDark, 0.84)
-  const secondaryDarkenColorDark =
-    secondaryMainColorLight === secondaryMainColorDark
-      ? secondaryDarkenColorLight
-      : darken(secondaryMainColorDark, 0.2)
+  const contrastButtonColor =
+    getContrastRatio(palette.common.white, primaryMainColor) >= 3
+      ? palette.common.white
+      : palette.common.black
+  const contrastTextButtonColor =
+    getContrastRatio(palette.common.white, alpha(primaryMainColor, 0.08)) >= 3
+      ? palette.common.white
+      : palette.common.black
+  const borderRadiusSecondary =
+    widgetTheme.shape?.borderRadiusSecondary ?? shape.borderRadiusSecondary
 
   const theme = createMuiTheme({
-    cssVariables: { cssVarPrefix: 'lifi', colorSchemeSelector: 'class' },
-    colorSchemes: {
-      light: {
-        palette: {
-          ...palette,
-          ...paletteLight,
-          ...(widgetTheme.colorSchemes?.light?.palette ?? widgetTheme.palette),
-          primary: {
-            main: primaryMainColorLight,
-            light: primaryLightenColorLight,
-            dark: primaryDarkenColorLight,
-          },
-          secondary: {
-            main: secondaryMainColorLight,
-            light: secondaryLightenColorLight,
-            dark: secondaryDarkenColorLight,
-          },
-        },
-      },
-      dark: {
-        palette: {
-          ...palette,
-          ...paletteDark,
-          ...(widgetTheme.colorSchemes?.dark?.palette ?? widgetTheme.palette),
-          primary: {
-            main: primaryMainColorDark,
-            light: primaryLightenColorDark,
-            dark: primaryDarkenColorDark,
-          },
-          secondary: {
-            main: secondaryMainColorDark,
-            light: secondaryLightenColorDark,
-            dark: secondaryDarkenColorDark,
-          },
-        },
-      },
-    },
     container: widgetTheme.container,
     header: widgetTheme.header,
     navigation: {
@@ -123,6 +73,22 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
       fontFamily: 'Inter var, Inter, sans-serif',
       ...widgetTheme.typography,
     },
+    palette: {
+      mode,
+      ...palette,
+      ...(mode === 'light' ? paletteLight : paletteDark),
+      ...widgetTheme.palette,
+      primary: {
+        main: primaryMainColor,
+        light: primaryLightColor,
+        dark: primaryDarkColor,
+      },
+      secondary: {
+        main: secondaryMainColor,
+        light: lighten(secondaryMainColor, 0.84),
+        dark: darken(secondaryMainColor, 0.2),
+      },
+    },
     shape: {
       ...shape,
       ...widgetTheme.shape,
@@ -169,8 +135,8 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
               ?.root as CSSObject
             const rootHover = root?.['&:hover']
             return {
-              backgroundColor: theme.vars.palette.background.paper,
-              borderRadius: theme.vars.shape.borderRadius,
+              backgroundColor: theme.palette.background.paper,
+              borderRadius: theme.shape.borderRadius,
               overflow: 'hidden',
               position: 'relative',
               boxSizing: 'border-box',
@@ -191,17 +157,17 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
                   ownerState.variant === 'filled') && {
                   '&:hover': {
                     cursor: 'pointer',
-                    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, black)`,
-                    ...theme.applyStyles('dark', {
-                      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, white)`,
-                    }),
+                    backgroundColor:
+                      theme.palette.mode === 'light'
+                        ? darken(theme.palette.background.paper, 0.02)
+                        : lighten(theme.palette.background.paper, 0.02),
                   },
                 }),
               ...(!!ownerState.onClick &&
                 ownerState.variant === 'elevation' && {
                   '&:hover': {
                     cursor: 'pointer',
-                    filter: `drop-shadow(0 1px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08))`,
+                    filter: `drop-shadow(0 1px 4px ${alpha(theme.palette.common.black, 0.08)})`,
                   },
                 }),
               ...(typeof root === 'object' && root),
@@ -223,10 +189,10 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
             style: ({ theme }) => ({
               borderWidth: 1,
               borderStyle: 'solid',
-              borderColor: theme.vars.palette.grey[300],
-              ...theme.applyStyles('dark', {
-                borderColor: theme.vars.palette.grey[800],
-              }),
+              borderColor:
+                theme.palette.mode === 'light'
+                  ? theme.palette.grey[300]
+                  : theme.palette.grey[800],
             }),
           },
           {
@@ -234,7 +200,7 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
             style: ({ theme }) => ({
               border: 'none',
               boxShadow: 'none',
-              filter: `drop-shadow(0 1px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04))`,
+              filter: `drop-shadow(0 1px 4px ${alpha(theme.palette.common.black, 0.04)})`,
             }),
           },
           {
@@ -267,50 +233,51 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
           ...widgetTheme.components?.MuiButton?.defaultProps,
         },
         styleOverrides: {
-          root: ({ theme, ownerState }) => ({
-            borderRadius: theme.vars.shape.borderRadiusSecondary,
+          root: ({ ownerState }) => ({
+            borderRadius: borderRadiusSecondary,
             textTransform: 'none',
             fontSize: 16,
             fontWeight: 600,
             '&.Mui-disabled, &.Mui-disabled:hover': {
-              color: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.56)`,
+              color: alpha(
+                mode === 'light' ? palette.common.black : palette.common.white,
+                0.56
+              ),
               cursor: 'not-allowed',
               pointerEvents: 'auto',
             },
             [`&.${buttonClasses.loading}.Mui-disabled`]: {
-              backgroundColor: theme.vars.palette.primary.main,
-              color: theme.palette.getContrastText(theme.palette.primary.main),
+              backgroundColor: primaryMainColor,
+              color: contrastButtonColor,
               cursor: 'auto',
               pointerEvents: 'auto',
             },
             [`.${buttonClasses.loadingIndicator}`]: {
-              color: theme.palette.getContrastText(theme.palette.primary.main),
+              color: contrastButtonColor,
             },
             [`&.${buttonClasses.root}.${buttonClasses.loading}`]: {
               color: 'transparent',
             },
             ...getStyleOverrides('MuiButton', 'root', widgetTheme, ownerState),
           }),
-          text: ({ theme, ownerState }) => ({
-            backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.08)`,
-            color: theme.vars.palette.primary.main,
+          text: ({ ownerState }) => ({
+            backgroundColor:
+              mode === 'light'
+                ? alpha(primaryMainColor, 0.08)
+                : alpha(primaryMainColor, 0.42),
             '&:hover': {
-              backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.12)`,
+              backgroundColor:
+                mode === 'light'
+                  ? alpha(primaryMainColor, 0.12)
+                  : alpha(primaryMainColor, 0.56),
             },
-            ...theme.applyStyles('dark', {
-              backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.42)`,
-              color: theme.palette.getContrastText(
-                alpha(theme.palette.primary.main, 0.08)
-              ),
-              '&:hover': {
-                backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.56)`,
-              },
-            }),
+            color:
+              mode === 'light' ? primaryMainColor : contrastTextButtonColor,
             ...getStyleOverrides('MuiButton', 'text', widgetTheme, ownerState),
           }),
           contained: ({ ownerState }) => ({
             '&:hover': {
-              color: theme.palette.getContrastText(theme.palette.primary.main),
+              color: contrastButtonColor,
             },
             ...getStyleOverrides(
               'MuiButton',
@@ -369,12 +336,12 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
             fontWeight: 600,
             fontSize: '1.125rem',
             lineHeight: '1.2778',
-            color: theme.vars.palette.text.primary,
+            color: theme.palette.text.primary,
           }),
           secondary: ({ theme }) => ({
             fontWeight: 500,
             fontSize: '0.75rem',
-            color: theme.vars.palette.text.secondary,
+            color: theme.palette.text.secondary,
           }),
         },
       },
@@ -400,7 +367,7 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
       MuiMenu: {
         styleOverrides: {
           paper: ({ theme }) => ({
-            backgroundColor: theme.vars.palette.background.default,
+            backgroundColor: theme.palette.background.default,
           }),
         },
       },
@@ -416,22 +383,22 @@ export const createTheme = (widgetTheme: WidgetTheme = {}) => {
               ownerState
             )
             return {
-              backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-              ...theme.applyStyles('dark', {
-                backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
-              }),
-              borderRadius: theme.vars.shape.borderRadius,
+              backgroundColor:
+                theme.palette.mode === 'light'
+                  ? alpha(theme.palette.common.black, 0.04)
+                  : alpha(theme.palette.common.white, 0.08),
+              borderRadius: theme.shape.borderRadius,
               ...rootStyleOverrides,
               [`.${tabsClasses.indicator}`]: {
-                backgroundColor: theme.vars.palette.background.paper,
-                ...theme.applyStyles('dark', {
-                  backgroundColor: `rgba(${theme.vars.palette.common.backgroundChannel} / 0.56)`,
-                }),
+                backgroundColor:
+                  theme.palette.mode === 'light'
+                    ? theme.palette.background.paper
+                    : alpha(theme.palette.common.black, 0.56),
                 borderRadius:
                   theme.shape.borderRadius > 0
-                    ? `calc(${theme.vars.shape.borderRadius} - 4px)`
-                    : theme.vars.shape.borderRadius,
-                boxShadow: `0px 2px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+                    ? theme.shape.borderRadius - 4
+                    : theme.shape.borderRadius,
+                boxShadow: `0px 2px 4px ${alpha(theme.palette.common.black, 0.04)}`,
                 ...rootStyleOverrides?.[`.${tabsClasses.indicator}`],
               },
             }

package/src/themes/jumper.ts

@@ -20,7 +20,7 @@ export const jumperTheme: WidgetTheme = {
         //     0.04,
         //   ),
         //   color: 'inherit',
-        //   borderRadius: theme.vars.shape.borderRadiusSecondary,
+        //   borderRadius: theme.shape.borderRadiusSecondary,
         //   '&:hover': {
         //     backgroundColor: alpha(
         //       theme.palette.mode === 'light'

package/src/themes/types.ts

@@ -3,7 +3,6 @@ import type {
   ComponentsOverrides,
   ComponentsVariants,
 } from '@mui/material'
-import type {} from '@mui/material/themeCssVarsAugmentation'
 import type { CSSProperties } from 'react'
 import type { NavigationProps } from '../types/widget.js'
 

package/src/themes/watermelonLight.ts

@@ -47,7 +47,7 @@ export const watermelonLightTheme: WidgetTheme = {
     //     root: ({ theme }) => ({
     //       backgroundColor: alpha(theme.palette.common.white, 0.04),
     //       color: 'inherit',
-    //       borderRadius: theme.vars.shape.borderRadiusSecondary,
+    //       borderRadius: theme.shape.borderRadiusSecondary,
     //       '&:hover': {
     //         backgroundColor: alpha(
     //           theme.palette.mode === 'light'

package/src/types/widget.ts

@@ -2,6 +2,7 @@ import type {
   BaseToken,
   ChainType,
   ContractCall,
+  ExtendedChain,
   Order,
   RouteExtended,
   RouteOptions,
@@ -17,8 +18,14 @@ import type {
   SxProps,
   Theme,
 } from '@mui/material'
-import type { TypographyVariantsOptions } from '@mui/material/styles'
-import type { CSSProperties, FC, ReactNode, RefObject } from 'react'
+import type { TypographyOptions } from '@mui/material/styles/createTypography.js'
+import type {
+  CSSProperties,
+  FC,
+  MutableRefObject,
+  ReactNode,
+  RefObject,
+} from 'react'
 import type {
   CoinbaseWalletParameters,
   MetaMaskParameters,
@@ -39,7 +46,7 @@ export interface SubvariantOptions {
   custom?: CustomSubvariant
 }
 
-export type Appearance = PaletteMode | 'system'
+export type Appearance = PaletteMode | 'auto'
 export interface NavigationProps {
   /**
    * If given, uses a negative margin to counteract the padding on sides for navigation elements like icon buttons.
@@ -59,29 +66,12 @@ export type WidgetThemeComponents = Pick<
 >
 
 export type WidgetTheme = {
-  /**
-   * @deprecated Use `colorScheme` instead.
-   */
   palette?: Pick<
     PaletteOptions,
     'background' | 'grey' | 'primary' | 'secondary' | 'text'
   >
-  colorSchemes?: {
-    light?: {
-      palette: Pick<
-        PaletteOptions,
-        'background' | 'grey' | 'primary' | 'secondary' | 'text'
-      >
-    }
-    dark?: {
-      palette: Pick<
-        PaletteOptions,
-        'background' | 'grey' | 'primary' | 'secondary' | 'text'
-      >
-    }
-  }
   shape?: Partial<Shape>
-  typography?: TypographyVariantsOptions
+  typography?: TypographyOptions
   components?: WidgetThemeComponents
   container?: CSSProperties
   header?: CSSProperties
@@ -109,6 +99,7 @@ export enum HiddenUI {
   IntegratorStepDetails = 'integratorStepDetails',
   ReverseTokensButton = 'reverseTokensButton',
   RouteTokenDescription = 'routeTokenDescription',
+  ChainSelect = 'chainSelect',
 }
 export type HiddenUIType = `${HiddenUI}`
 
@@ -151,10 +142,10 @@ export interface WidgetContractTool {
 }
 
 export interface CalculateFeeParams {
-  fromChainId: number
-  toChainId: number
-  fromTokenAddress: string
-  toTokenAddress: string
+  fromChain: ExtendedChain
+  toChain: ExtendedChain
+  fromToken: Token
+  toToken: Token
   fromAddress?: string
   toAddress?: string
   fromAmount?: bigint
@@ -310,7 +301,7 @@ export type FormState = {
   setFieldValue: SetFieldValueFunction
 }
 
-export type FormRef = RefObject<FormState | null>
+export type FormRef = MutableRefObject<FormState | null>
 
 export interface FormRefProps {
   formRef?: FormRef

package/src/utils/colors.ts

@@ -0,0 +1,53 @@
+import type { Theme } from '@mui/material'
+import { alpha, decomposeColor, recomposeColor } from '@mui/material'
+
+export const getContrastAlphaColor = (theme: Theme, value: number) =>
+  theme.palette.mode === 'light'
+    ? alpha(theme.palette.common.black, value)
+    : alpha(theme.palette.common.white, value)
+
+export const getWarningBackgroundColor = (theme: Theme) =>
+  theme.palette.mode === 'light'
+    ? alpha(theme.palette.warning.main, 0.32)
+    : alpha(theme.palette.warning.main, 0.16)
+
+export const getInfoBackgroundColor = (theme: Theme) =>
+  theme.palette.mode === 'light'
+    ? alpha(theme.palette.info.main, 0.12)
+    : alpha(theme.palette.info.main, 0.16)
+
+/**
+ * https://github.com/mui/material-ui/blob/next/packages/mui-system/src/colorManipulator/colorManipulator.js
+ * Blend a transparent overlay color with a background color, resulting in a single
+ * RGB color.
+ * Remove in favor of MUI one once the next major version is released.
+ * @param {string} background - CSS color
+ * @param {string} overlay - CSS color
+ * @param {number} opacity - Opacity multiplier in the range 0 - 1
+ * @param {number} [gamma=1.0] - Gamma correction factor. For gamma-correct blending, 2.2 is usual.
+ */
+export function blend(
+  background: string,
+  overlay: string,
+  opacity: number,
+  gamma = 1.0
+) {
+  const blendChannel = (b: number, o: number) =>
+    Math.round(
+      (b ** (1 / gamma) * (1 - opacity) + o ** (1 / gamma) * opacity) ** gamma
+    )
+
+  const backgroundColor = decomposeColor(background)
+  const overlayColor = decomposeColor(overlay)
+
+  const rgb: [number, number, number] = [
+    blendChannel(backgroundColor.values[0], overlayColor.values[0]),
+    blendChannel(backgroundColor.values[1], overlayColor.values[1]),
+    blendChannel(backgroundColor.values[2], overlayColor.values[2]),
+  ]
+
+  return recomposeColor({
+    type: 'rgb',
+    values: rgb,
+  })
+}