@lifi/widget 3.19.0-beta.3 → 3.19.0

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.
@@ -47,37 +54,28 @@ export interface NavigationProps {
    */
   edge?: boolean
 }
-export type WidgetThemeComponents = Partial<
-  Pick<
-    Components<Theme>,
-    | 'MuiAppBar'
-    | 'MuiAvatar'
-    | 'MuiButton'
-    | 'MuiCard'
-    | 'MuiIconButton'
-    | 'MuiInputCard'
-    | 'MuiTabs'
-  >
+export type WidgetThemeComponents = Pick<
+  Components<Theme>,
+  | 'MuiAppBar'
+  | 'MuiAvatar'
+  | 'MuiButton'
+  | 'MuiCard'
+  | 'MuiIconButton'
+  | 'MuiInputCard'
+  | 'MuiTabs'
 >
 
 export type WidgetTheme = {
-  /**
-   * @deprecated Use `colorScheme` instead.
-   */
-  palette?: PaletteOptions
-  colorSchemes?: {
-    light?: {
-      palette: PaletteOptions
-    }
-    dark?: {
-      palette: PaletteOptions
-    }
-  }
+  palette?: Pick<
+    PaletteOptions,
+    'background' | 'grey' | 'primary' | 'secondary' | 'text'
+  >
   shape?: Partial<Shape>
-  typography?: TypographyVariantsOptions
+  typography?: TypographyOptions
   components?: WidgetThemeComponents
   container?: CSSProperties
   header?: CSSProperties
+  playground?: CSSProperties
   navigation?: NavigationProps
 }
 
@@ -101,6 +99,7 @@ export enum HiddenUI {
   IntegratorStepDetails = 'integratorStepDetails',
   ReverseTokensButton = 'reverseTokensButton',
   RouteTokenDescription = 'routeTokenDescription',
+  ChainSelect = 'chainSelect',
 }
 export type HiddenUIType = `${HiddenUI}`
 
@@ -143,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
@@ -170,7 +169,7 @@ export interface WidgetFeeConfig {
   /**
    * @internal
    */
-  _vcComponent?: FC<{ route: RouteExtended }>
+  _vcComponent: FC<{ route: RouteExtended }>
 }
 
 export interface ToAddress {
@@ -302,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,
+  })
+}