@lifi/widget 3.7.0 → 3.8.0-beta.1

package/themes/utils.ts

@@ -1,18 +0,0 @@
-import type { WidgetTheme, WidgetThemeComponents } from '../types/widget.js';
-
-type ComponentName = keyof WidgetThemeComponents;
-
-export const getStyleOverrides = (
-  componentName: ComponentName,
-  styleOverrideProp: string,
-  theme: WidgetTheme,
-  ownerState?: any,
-) => {
-  const component = theme.components?.[componentName];
-  const property = (component?.styleOverrides as any)?.[styleOverrideProp];
-
-  if (typeof property === 'function') {
-    return property({ theme, ownerState });
-  }
-  return property;
-};

package/themes/watermelonLight.ts

@@ -1,64 +0,0 @@
-import type { WidgetTheme } from '../types/widget.js';
-
-export const watermelonLightTheme: WidgetTheme = {
-  palette: {
-    primary: {
-      main: '#f7557c',
-    },
-    secondary: {
-      main: '#027944',
-    },
-    background: {
-      default: '#ffeff3',
-      paper: '#ffffff',
-    },
-    text: {
-      primary: '#190006',
-      secondary: '#766066',
-    },
-    grey: {
-      200: '#F0E5E8',
-      300: '#E5D7DA',
-      700: '#7A666B',
-      800: '#58373F',
-    },
-  },
-  shape: {
-    borderRadius: 16,
-    borderRadiusSecondary: 16,
-    borderRadiusTertiary: 24,
-  },
-  typography: {
-    fontFamily: 'Inter, sans-serif',
-  },
-  container: {
-    boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.12)',
-    borderRadius: '16px',
-  },
-  playground: {
-    background: '#f7557c',
-  },
-  components: {
-    MuiCard: {
-      defaultProps: { variant: 'elevation' },
-    },
-    // MuiIconButton: {
-    //   styleOverrides: {
-    //     root: ({ theme }) => ({
-    //       backgroundColor: alpha(theme.palette.common.white, 0.04),
-    //       color: 'inherit',
-    //       borderRadius: theme.shape.borderRadiusSecondary,
-    //       '&:hover': {
-    //         backgroundColor: alpha(
-    //           theme.palette.mode === 'light'
-    //             ? theme.palette.common.black
-    //             : theme.palette.common.white,
-    //           0.08,
-    //         ),
-    //         color: 'inherit',
-    //       },
-    //     }),
-    //   },
-    // },
-  },
-} as WidgetTheme;

package/themes/windows95.ts

@@ -1,101 +0,0 @@
-import type { WidgetTheme } from '../types/widget.js';
-
-export const windows95Theme: WidgetTheme = {
-  palette: {
-    primary: {
-      main: '#0000ff',
-    },
-    secondary: {
-      main: '#f7c303',
-    },
-    text: {
-      primary: '#30313d',
-      secondary: '#6d6e78',
-    },
-    background: {
-      default: '#c0c9d2',
-      paper: '#dfdfdf',
-    },
-    grey: {
-      300: '#bbbbbb',
-    },
-  },
-  shape: {
-    borderRadius: 0,
-    borderRadiusSecondary: 0,
-    borderRadiusTertiary: 0,
-  },
-  container: {
-    border: '1px solid #0a0a0a',
-  },
-  navigation: {
-    edge: false,
-  },
-  playground: {
-    background: '#008080',
-  },
-  components: {
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          boxShadow:
-            'inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf',
-          '&:hover': {
-            boxShadow:
-              'inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf',
-          },
-        },
-      },
-    },
-    MuiCard: {
-      defaultProps: {
-        variant: 'outlined',
-      },
-      styleOverrides: {
-        root: {
-          boxShadow:
-            'inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf',
-          borderWidth: 0,
-          '&:hover': {
-            cursor: 'pointer',
-            backgroundColor: '#cccccc',
-          },
-        },
-      },
-      variants: [
-        {
-          props: { variant: 'outlined' },
-          style: {
-            borderWidth: 0,
-          },
-        },
-      ],
-    },
-    MuiInputCard: {
-      styleOverrides: {
-        root: {
-          backgroundColor: '#ffffff',
-          boxShadow:
-            'inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080',
-        },
-      },
-    },
-    MuiIconButton: {
-      defaultProps: {
-        // disableRipple: true,
-      },
-      styleOverrides: {
-        root: {
-          borderRadius: 0,
-          boxShadow:
-            'inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf',
-          backgroundColor: '#dfdfdf',
-          '&:hover': {
-            color: 'inherit',
-            backgroundColor: '#cccccc',
-          },
-        },
-      },
-    },
-  },
-};

package/types/events.ts

@@ -1,67 +0,0 @@
-import type { ChainId, ChainType, Process, Route } from '@lifi/sdk';
-import type { NavigationRouteType } from '../utils/navigationRoutes.js';
-
-export enum WidgetEvent {
-  RouteExecutionStarted = 'routeExecutionStarted',
-  RouteExecutionUpdated = 'routeExecutionUpdated',
-  RouteExecutionCompleted = 'routeExecutionCompleted',
-  RouteExecutionFailed = 'routeExecutionFailed',
-  RouteHighValueLoss = 'routeHighValueLoss',
-  AvailableRoutes = 'availableRoutes',
-  ContactSupport = 'contactSupport',
-  SourceChainTokenSelected = 'sourceChainTokenSelected',
-  DestinationChainTokenSelected = 'destinationChainTokenSelected',
-  SendToWalletToggled = 'sendToWalletToggled',
-  /**
-   * @deprecated Use `PageEntered` event instead.
-   */
-  ReviewTransactionPageEntered = 'reviewTransactionPageEntered',
-  WalletConnected = 'walletConnected',
-  WidgetExpanded = 'widgetExpanded',
-  PageEntered = 'pageEntered',
-}
-
-export type WidgetEvents = {
-  routeExecutionStarted: Route;
-  routeExecutionUpdated: RouteExecutionUpdate;
-  routeExecutionCompleted: Route;
-  routeExecutionFailed: RouteExecutionUpdate;
-  routeHighValueLoss: RouteHighValueLossUpdate;
-  availableRoutes: Route[];
-  contactSupport: ContactSupport;
-  sourceChainTokenSelected: ChainTokenSelected;
-  destinationChainTokenSelected: ChainTokenSelected;
-  sendToWalletToggled: boolean;
-  reviewTransactionPageEntered?: Route;
-  walletConnected: WalletConnected;
-  widgetExpanded: boolean;
-  pageEntered: NavigationRouteType;
-};
-
-export interface ContactSupport {
-  supportId?: string;
-}
-
-export interface RouteHighValueLossUpdate {
-  fromAmountUSD: number;
-  toAmountUSD: number;
-  gasCostUSD?: number;
-  feeCostUSD?: number;
-  valueLoss: number;
-}
-
-export interface RouteExecutionUpdate {
-  route: Route;
-  process: Process;
-}
-
-export interface ChainTokenSelected {
-  chainId: ChainId;
-  tokenAddress: string;
-}
-
-export interface WalletConnected {
-  address?: string;
-  chainId?: number;
-  chainType?: ChainType;
-}

package/types/token.ts

@@ -1,6 +0,0 @@
-import type { TokenAmount as SDKTokenAmount } from '@lifi/sdk';
-
-export interface TokenAmount extends SDKTokenAmount {
-  featured?: boolean;
-  popular?: boolean;
-}

package/types/widget.ts

@@ -1,293 +0,0 @@
-import type {
-  BaseToken,
-  ChainType,
-  ContractCall,
-  Order,
-  RouteExtended,
-  RouteOptions,
-  SDKConfig,
-  StaticToken,
-  Token,
-} from '@lifi/sdk';
-import type {
-  Components,
-  PaletteMode,
-  PaletteOptions,
-  Shape,
-  Theme,
-} from '@mui/material';
-import type { TypographyOptions } from '@mui/material/styles/createTypography.js';
-import type {
-  CoinbaseWalletParameters,
-  MetaMaskParameters,
-  WalletConnectParameters,
-} from '@wagmi/connectors';
-import type {
-  CSSProperties,
-  FC,
-  MutableRefObject,
-  ReactNode,
-  RefObject,
-} from 'react';
-import type {
-  LanguageKey,
-  LanguageResources,
-} from '../providers/I18nProvider/types.js';
-import type { DefaultFieldValues } from '../stores/form/types.js';
-
-export type WidgetVariant = 'compact' | 'wide' | 'drawer';
-export type WidgetSubvariant = 'default' | 'split' | 'custom' | 'refuel';
-export type SplitSubvariant = 'bridge' | 'swap';
-export type CustomSubvariant = 'checkout' | 'deposit';
-export interface SubvariantOptions {
-  split?: SplitSubvariant;
-  custom?: CustomSubvariant;
-}
-
-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.
-   * @default true
-   */
-  edge?: boolean;
-}
-export type WidgetThemeComponents = Pick<
-  Components<Theme>,
-  | 'MuiAppBar'
-  | 'MuiAvatar'
-  | 'MuiButton'
-  | 'MuiCard'
-  | 'MuiIconButton'
-  | 'MuiInputCard'
-  | 'MuiTabs'
->;
-
-export type WidgetTheme = {
-  palette?: Pick<
-    PaletteOptions,
-    'background' | 'grey' | 'primary' | 'secondary' | 'text'
-  >;
-  shape?: Partial<Shape>;
-  typography?: TypographyOptions;
-  components?: WidgetThemeComponents;
-  container?: CSSProperties;
-  header?: CSSProperties;
-  playground?: CSSProperties;
-  navigation?: NavigationProps;
-};
-
-export enum DisabledUI {
-  FromAmount = 'fromAmount',
-  FromToken = 'fromToken',
-  ToAddress = 'toAddress',
-  ToToken = 'toToken',
-}
-export type DisabledUIType = `${DisabledUI}`;
-
-export enum HiddenUI {
-  Appearance = 'appearance',
-  DrawerCloseButton = 'drawerCloseButton',
-  History = 'history',
-  Language = 'language',
-  PoweredBy = 'poweredBy',
-  ToAddress = 'toAddress',
-  ToToken = 'toToken',
-  WalletMenu = 'walletMenu',
-  IntegratorStepDetails = 'integratorStepDetails',
-}
-export type HiddenUIType = `${HiddenUI}`;
-
-export enum RequiredUI {
-  ToAddress = 'toAddress',
-}
-export type RequiredUIType = `${RequiredUI}`;
-
-export interface WidgetWalletConfig {
-  onConnect?(): void;
-  walletConnect?: WalletConnectParameters;
-  coinbase?: CoinbaseWalletParameters;
-  metaMask?: MetaMaskParameters;
-}
-
-export interface WidgetSDKConfig
-  extends Omit<
-    SDKConfig,
-    | 'apiKey'
-    | 'disableVersionCheck'
-    | 'integrator'
-    | 'routeOptions'
-    | 'widgetVersion'
-  > {
-  routeOptions?: Omit<RouteOptions, 'bridges' | 'exchanges'>;
-}
-
-export interface WidgetContractTool {
-  name: string;
-  logoURI: string;
-}
-
-export interface CalculateFeeParams {
-  fromChainId: number;
-  toChainId: number;
-  fromTokenAddress: string;
-  toTokenAddress: string;
-  fromAddress?: string;
-  toAddress?: string;
-  fromAmount: bigint;
-  slippage: number;
-}
-
-export interface WidgetFeeConfig {
-  name?: string;
-  logoURI?: string;
-  fee?: number;
-  /**
-   * Function to calculate fees before fetching quotes.
-   * If provided, this function will be used instead of the `fee` parameter.
-   * Only one of `fee` or `calculateFee` should be used.
-   *
-   * @param params Object containing the fee calculation parameters
-   * @returns A promise that resolves to the calculated fee as a number (e.g., 0.03 represents a 3% fee)
-   */
-  calculateFee?(params: CalculateFeeParams): Promise<number | undefined>;
-  /**
-   * @internal
-   */
-  _vcComponent: FC<{ route: RouteExtended }>;
-}
-
-export interface ToAddress {
-  name?: string;
-  address: string;
-  chainType: ChainType;
-  logoURI?: string;
-}
-
-export interface AllowDeny<T> {
-  allow?: T[];
-  deny?: T[];
-}
-
-export type WidgetChains = {
-  from?: AllowDeny<number>;
-  to?: AllowDeny<number>;
-  types?: AllowDeny<ChainType>;
-} & AllowDeny<number>;
-
-export type WidgetTokens = {
-  featured?: StaticToken[];
-  include?: Token[];
-  popular?: StaticToken[];
-} & AllowDeny<BaseToken>;
-
-export type WidgetLanguages = {
-  default?: LanguageKey;
-} & AllowDeny<LanguageKey>;
-
-export interface WidgetConfig {
-  fromChain?: number;
-  toChain?: number;
-  fromToken?: string;
-  toToken?: string;
-  toAddress?: ToAddress;
-  toAddresses?: ToAddress[];
-  fromAmount?: number | string;
-  toAmount?: number | string;
-  formUpdateKey?: string;
-
-  contractCalls?: ContractCall[];
-  contractComponent?: ReactNode;
-  contractSecondaryComponent?: ReactNode;
-  contractCompactComponent?: ReactNode;
-  contractTool?: WidgetContractTool;
-  integrator: string;
-  apiKey?: string;
-  /**
-   * @deprecated Use `feeConfig` instead.
-   */
-  fee?: number;
-  feeConfig?: WidgetFeeConfig;
-  referrer?: string;
-
-  routePriority?: Order;
-  slippage?: number;
-
-  variant?: WidgetVariant;
-  subvariant?: WidgetSubvariant;
-  subvariantOptions?: SubvariantOptions;
-
-  appearance?: Appearance;
-  theme?: WidgetTheme;
-
-  disabledUI?: DisabledUIType[];
-  hiddenUI?: HiddenUIType[];
-  requiredUI?: RequiredUIType[];
-  useRecommendedRoute?: boolean;
-
-  walletConfig?: WidgetWalletConfig;
-  sdkConfig?: WidgetSDKConfig;
-
-  buildUrl?: boolean;
-  keyPrefix?: string;
-
-  bridges?: AllowDeny<string>;
-  exchanges?: AllowDeny<string>;
-  chains?: WidgetChains;
-  tokens?: WidgetTokens;
-  languages?: WidgetLanguages;
-  languageResources?: LanguageResources;
-  explorerUrls?: Record<number, string[]> &
-    Partial<Record<'internal', string[]>>;
-}
-
-export interface FormFieldOptions {
-  setUrlSearchParam: boolean;
-}
-
-export interface FieldValues
-  extends Omit<DefaultFieldValues, 'fromAmount' | 'toAmount' | 'toAddress'> {
-  fromAmount?: number | string;
-  toAmount?: number | string;
-  toAddress?: ToAddress | string;
-}
-
-export type FieldNames = keyof FieldValues;
-
-export type SetFieldValueFunction = <K extends FieldNames>(
-  key: K,
-  value: FieldValues[K],
-  options?: FormFieldOptions,
-) => void;
-
-export type FormState = {
-  setFieldValue: SetFieldValueFunction;
-};
-
-export type FormRef = MutableRefObject<FormState | null>;
-
-export interface FormRefProps {
-  formRef?: FormRef;
-}
-
-export interface WidgetConfigProps extends FormRefProps {
-  config: WidgetConfig;
-}
-
-export interface WidgetConfigPartialProps {
-  config?: Partial<WidgetConfig>;
-}
-
-export type WidgetProps = WidgetDrawerProps &
-  WidgetConfig &
-  WidgetConfigPartialProps &
-  FormRefProps;
-
-export interface WidgetDrawerProps extends WidgetConfigPartialProps {
-  elementRef?: RefObject<HTMLDivElement>;
-  open?: boolean;
-  /**
-   * Make sure to make the onClose callback stable (e.g. using useCallback) to avoid causing re-renders of the entire widget
-   */
-  onClose?(): void;
-}

package/utils/chainType.ts

@@ -1,27 +0,0 @@
-import { ChainId, ChainType } from '@lifi/sdk';
-import { isAddress as isEVMAddress } from 'viem';
-import { isSVMAddress } from './svm.js';
-
-const chainTypeAddressValidation = {
-  [ChainType.EVM]: isEVMAddress,
-  [ChainType.SVM]: isSVMAddress,
-  [ChainType.UTXO]: () => false,
-};
-
-export const getChainTypeFromAddress = (
-  address: string,
-): ChainType | undefined => {
-  for (const chainType in chainTypeAddressValidation) {
-    const isChainType =
-      chainTypeAddressValidation[chainType as ChainType](address);
-    if (isChainType) {
-      return chainType as ChainType;
-    }
-  }
-};
-
-export const defaultChainIdsByType = {
-  [ChainType.EVM]: ChainId.ETH,
-  [ChainType.SVM]: ChainId.SOL,
-  [ChainType.UTXO]: ChainId.BTC,
-};

package/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: number = 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,
-  });
-}