@lifi/widget 3.19.2 → 3.20.0-beta.1

package/src/types/widget.ts

@@ -18,14 +18,8 @@ import type {
   SxProps,
   Theme,
 } from '@mui/material'
-import type { TypographyOptions } from '@mui/material/styles/createTypography.js'
-import type {
-  CSSProperties,
-  FC,
-  MutableRefObject,
-  ReactNode,
-  RefObject,
-} from 'react'
+import type { TypographyVariantsOptions } from '@mui/material/styles'
+import type { CSSProperties, FC, ReactNode, RefObject } from 'react'
 import type {
   CoinbaseWalletParameters,
   MetaMaskParameters,
@@ -46,7 +40,7 @@ export interface SubvariantOptions {
   custom?: CustomSubvariant
 }
 
-export type Appearance = PaletteMode | 'auto'
+export type Appearance = PaletteMode | 'system'
 export interface NavigationProps {
   /**
    * If given, uses a negative margin to counteract the padding on sides for navigation elements like icon buttons.
@@ -54,28 +48,37 @@ export interface NavigationProps {
    */
   edge?: boolean
 }
-export type WidgetThemeComponents = Pick<
-  Components<Theme>,
-  | 'MuiAppBar'
-  | 'MuiAvatar'
-  | 'MuiButton'
-  | 'MuiCard'
-  | 'MuiIconButton'
-  | 'MuiInputCard'
-  | 'MuiTabs'
+export type WidgetThemeComponents = Partial<
+  Pick<
+    Components<Theme>,
+    | 'MuiAppBar'
+    | 'MuiAvatar'
+    | 'MuiButton'
+    | 'MuiCard'
+    | 'MuiIconButton'
+    | 'MuiInputCard'
+    | 'MuiTabs'
+  >
 >
 
 export type WidgetTheme = {
-  palette?: Pick<
-    PaletteOptions,
-    'background' | 'grey' | 'primary' | 'secondary' | 'text'
-  >
+  /**
+   * @deprecated Use `colorScheme` instead.
+   */
+  palette?: PaletteOptions
+  colorSchemes?: {
+    light?: {
+      palette: PaletteOptions
+    }
+    dark?: {
+      palette: PaletteOptions
+    }
+  }
   shape?: Partial<Shape>
-  typography?: TypographyOptions
+  typography?: TypographyVariantsOptions
   components?: WidgetThemeComponents
   container?: CSSProperties
   header?: CSSProperties
-  playground?: CSSProperties
   navigation?: NavigationProps
 }
 
@@ -183,7 +186,7 @@ export interface WidgetFeeConfig {
   /**
    * @internal
    */
-  _vcComponent: FC<{ route: RouteExtended }>
+  _vcComponent?: FC<{ route: RouteExtended }>
 }
 
 export interface ToAddress {
@@ -315,7 +318,7 @@ export type FormState = {
   setFieldValue: SetFieldValueFunction
 }
 
-export type FormRef = MutableRefObject<FormState | null>
+export type FormRef = RefObject<FormState | null>
 
 export interface FormRefProps {
   formRef?: FormRef

package/dist/esm/stores/settings/useAppearance.d.ts

@@ -1,2 +0,0 @@
-import type { Appearance } from '../../types/widget.js';
-export declare const useAppearance: () => [Appearance, (appearance: Appearance) => void];

package/dist/esm/stores/settings/useAppearance.js

@@ -1,11 +0,0 @@
-import { useSettingsActions } from '../../stores/settings/useSettingsActions.js';
-import { useSettingsStore } from './useSettingsStore.js';
-export const useAppearance = () => {
-    const { setValue } = useSettingsActions();
-    const appearance = useSettingsStore((state) => state.appearance);
-    const setAppearance = (appearance) => {
-        setValue('appearance', appearance);
-    };
-    return [appearance, setAppearance];
-};
-//# sourceMappingURL=useAppearance.js.map

package/dist/esm/stores/settings/useAppearance.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useAppearance.js","sourceRoot":"","sources":["../../../../src/stores/settings/useAppearance.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAA;AAEhF,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAExD,MAAM,CAAC,MAAM,aAAa,GAAG,GAG3B,EAAE;IACF,MAAM,EAAE,QAAQ,EAAE,GAAG,kBAAkB,EAAE,CAAA;IACzC,MAAM,UAAU,GAAG,gBAAgB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAA;IAChE,MAAM,aAAa,GAAG,CAAC,UAAsB,EAAE,EAAE;QAC/C,QAAQ,CAAC,YAAY,EAAE,UAAU,CAAC,CAAA;IACpC,CAAC,CAAA;IACD,OAAO,CAAC,UAAU,EAAE,aAAa,CAAC,CAAA;AACpC,CAAC,CAAA"}

package/dist/esm/utils/colors.d.ts

@@ -1,15 +0,0 @@
-import type { Theme } from '@mui/material';
-export declare const getContrastAlphaColor: (theme: Theme, value: number) => string;
-export declare const getWarningBackgroundColor: (theme: Theme) => string;
-export declare const getInfoBackgroundColor: (theme: Theme) => string;
-/**
- * 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 declare function blend(background: string, overlay: string, opacity: number, gamma?: number): string;

package/dist/esm/utils/colors.js

@@ -1,35 +0,0 @@
-import { alpha, decomposeColor, recomposeColor } from '@mui/material';
-export const getContrastAlphaColor = (theme, value) => theme.palette.mode === 'light'
-    ? alpha(theme.palette.common.black, value)
-    : alpha(theme.palette.common.white, value);
-export const getWarningBackgroundColor = (theme) => theme.palette.mode === 'light'
-    ? alpha(theme.palette.warning.main, 0.32)
-    : alpha(theme.palette.warning.main, 0.16);
-export const getInfoBackgroundColor = (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, overlay, opacity, gamma = 1.0) {
-    const blendChannel = (b, o) => Math.round((b ** (1 / gamma) * (1 - opacity) + o ** (1 / gamma) * opacity) ** gamma);
-    const backgroundColor = decomposeColor(background);
-    const overlayColor = decomposeColor(overlay);
-    const rgb = [
-        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,
-    });
-}
-//# sourceMappingURL=colors.js.map

package/dist/esm/utils/colors.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../src/utils/colors.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAErE,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAAE,KAAa,EAAE,EAAE,CACnE,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO;IAC5B,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC;IAC1C,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;AAE9C,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAY,EAAE,EAAE,CACxD,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO;IAC5B,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC;IACzC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;AAE7C,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAY,EAAE,EAAE,CACrD,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO;IAC5B,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;IACtC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;AAE1C;;;;;;;;;GASG;AACH,MAAM,UAAU,KAAK,CACnB,UAAkB,EAClB,OAAe,EACf,OAAe,EACf,KAAK,GAAG,GAAG;IAEX,MAAM,YAAY,GAAG,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE,CAC5C,IAAI,CAAC,KAAK,CACR,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,IAAI,KAAK,CACzE,CAAA;IAEH,MAAM,eAAe,GAAG,cAAc,CAAC,UAAU,CAAC,CAAA;IAClD,MAAM,YAAY,GAAG,cAAc,CAAC,OAAO,CAAC,CAAA;IAE5C,MAAM,GAAG,GAA6B;QACpC,YAAY,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QAC/D,YAAY,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QAC/D,YAAY,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;KAChE,CAAA;IAED,OAAO,cAAc,CAAC;QACpB,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,GAAG;KACZ,CAAC,CAAA;AACJ,CAAC"}

package/src/stores/settings/useAppearance.ts

@@ -1,15 +0,0 @@
-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/utils/colors.ts

@@ -1,53 +0,0 @@
-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,
-  })
-}