@lifi/widget 2.9.4 → 3.0.0-alpha.1

package/src/stores/settings/useSettingsStore.ts

@@ -0,0 +1,165 @@
+import type { StateCreator } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { createWithEqualityFn } from 'zustand/traditional';
+import type { WidgetConfig } from '../../types';
+import type { SettingsProps, SettingsState } from './types';
+import { SettingsToolTypes } from './types';
+
+export const defaultConfigurableSettings: Pick<
+  SettingsState,
+  'routePriority' | 'slippage' | 'gasPrice'
+> = {
+  routePriority: 'RECOMMENDED',
+  slippage: '0.5',
+  gasPrice: 'normal',
+};
+
+export const defaultSettings: SettingsProps = {
+  appearance: 'auto',
+  gasPrice: 'normal',
+  enabledAutoRefuel: true,
+  showDestinationWallet: true,
+  enabledBridges: [],
+  enabledExchanges: [],
+};
+
+export const useSettingsStore = createWithEqualityFn<SettingsState>(
+  persist(
+    (set, get) => ({
+      ...defaultSettings,
+      setValue: (key, value) =>
+        set(() => ({
+          [key]: value,
+        })),
+      setValues: (values) =>
+        set((state) => {
+          const updatedState: SettingsProps = { ...state };
+          for (const key in values) {
+            if (Object.hasOwn(state, key)) {
+              updatedState[key] = values[key];
+            }
+          }
+          return updatedState;
+        }),
+      initializeTools: (toolType, tools, reset) => {
+        if (!tools.length) {
+          return;
+        }
+        set((state) => {
+          const updatedState = { ...state };
+          if (updatedState[`_enabled${toolType}`] && !reset) {
+            // Add new tools
+            const enabledTools = tools
+              .filter(
+                (tool) =>
+                  !Object.hasOwn(
+                    updatedState[`_enabled${toolType}`] as object,
+                    tool,
+                  ),
+              )
+              .reduce(
+                (values, tool) => {
+                  values[tool] = true;
+                  return values;
+                },
+                updatedState[`_enabled${toolType}`] as Record<string, boolean>,
+              );
+            // Filter tools we no longer have
+            updatedState[`_enabled${toolType}`] = Object.fromEntries(
+              Object.entries(enabledTools).filter(([key]) =>
+                tools.includes(key),
+              ),
+            );
+          } else {
+            updatedState[`_enabled${toolType}`] = tools.reduce(
+              (values, tool) => {
+                values[tool] = true;
+                return values;
+              },
+              {} as Record<string, boolean>,
+            );
+          }
+          updatedState[`enabled${toolType}`] = Object.entries(
+            updatedState[`_enabled${toolType}`]!,
+          )
+            .filter(([_, value]) => value)
+            .map(([key]) => key);
+          return updatedState;
+        });
+      },
+      setTools: (toolType, tools, availableTools) =>
+        set(() => ({
+          [`enabled${toolType}`]: tools,
+          [`_enabled${toolType}`]: availableTools.reduce(
+            (values, toolKey) => {
+              values[toolKey] = tools.includes(toolKey);
+              return values;
+            },
+            {} as Record<string, boolean>,
+          ),
+        })),
+      reset: (config, bridges, exchanges) => {
+        const { appearance, ...restDefaultSettings } = defaultSettings;
+
+        set(() => ({
+          ...restDefaultSettings,
+          ...defaultConfigurableSettings,
+        }));
+        get().initializeTools('Bridges', bridges, true);
+        get().initializeTools('Exchanges', exchanges, true);
+      },
+    }),
+    {
+      name: `li.fi-widget-settings`,
+      version: 2,
+      partialize: (state) => {
+        const { enabledBridges, enabledExchanges, ...partializedState } = state;
+        return partializedState;
+      },
+      merge: (persistedState: any, currentState: SettingsState) => {
+        const state = { ...currentState, ...persistedState };
+        SettingsToolTypes.forEach((toolType) => {
+          state[`enabled${toolType}`] = Object.entries(
+            persistedState[`_enabled${toolType}`],
+          )
+            .filter(([_, value]) => value)
+            .map(([key]) => key);
+        });
+        return state;
+      },
+      migrate: (persistedState: any, version) => {
+        if (version === 0 && persistedState.appearance === 'system') {
+          persistedState.appearance = defaultSettings.appearance;
+        }
+        if (version === 1) {
+          persistedState.slippage = defaultConfigurableSettings.slippage;
+        }
+        return persistedState as SettingsState;
+      },
+    },
+  ) as StateCreator<SettingsState, [], [], SettingsState>,
+  Object.is,
+);
+
+export const setDefaultSettings = (config?: WidgetConfig) => {
+  const { slippage, routePriority, setValue, gasPrice } =
+    useSettingsStore.getState();
+  const defaultSlippage =
+    (config?.slippage || config?.sdkConfig?.routeOptions?.slippage || 0) * 100;
+  const defaultRoutePriority =
+    config?.routePriority || config?.sdkConfig?.routeOptions?.order;
+  defaultConfigurableSettings.slippage = (
+    defaultSlippage || defaultConfigurableSettings.slippage
+  )?.toString();
+  defaultConfigurableSettings.routePriority =
+    defaultRoutePriority || defaultConfigurableSettings.routePriority;
+  if (!slippage) {
+    setValue('slippage', defaultConfigurableSettings.slippage);
+  }
+  if (!routePriority) {
+    setValue('routePriority', defaultConfigurableSettings.routePriority);
+  }
+  if (!gasPrice) {
+    setValue('gasPrice', defaultConfigurableSettings.gasPrice);
+  }
+};

package/src/stores/settings/useSplitSubvariantStore.tsx

@@ -0,0 +1,69 @@
+import { createContext, useContext, useRef } from 'react';
+import { createWithEqualityFn } from 'zustand/traditional';
+import type {
+  SplitSubvariantProps,
+  SplitSubvariantProviderProps,
+  SplitSubvariantState,
+  SplitSubvariantStore,
+} from './types';
+
+export const SplitSubvariantStoreContext =
+  createContext<SplitSubvariantStore | null>(null);
+
+const shouldRecreateStore = (
+  store: SplitSubvariantStore,
+  props: SplitSubvariantProps,
+) => {
+  const { state } = store.getState();
+  return state !== props.state;
+};
+
+export function SplitSubvariantStoreProvider({
+  children,
+  ...props
+}: SplitSubvariantProviderProps) {
+  const storeRef = useRef<SplitSubvariantStore>();
+  if (!storeRef.current || shouldRecreateStore(storeRef.current, props)) {
+    storeRef.current = createSplitSubvariantStore(props);
+  }
+  return (
+    <SplitSubvariantStoreContext.Provider value={storeRef.current}>
+      {children}
+    </SplitSubvariantStoreContext.Provider>
+  );
+}
+
+export function useSplitSubvariantStore<T>(
+  selector: (state: SplitSubvariantState) => T,
+): T {
+  const useStore = useContext(SplitSubvariantStoreContext);
+  if (!useStore) {
+    throw new Error(
+      `You forgot to wrap your component in <${SplitSubvariantStoreProvider.name}>.`,
+    );
+  }
+  return useStore(selector);
+}
+
+export function useSplitSubvariantStoreContext() {
+  const useStore = useContext(SplitSubvariantStoreContext);
+  if (!useStore) {
+    throw new Error(
+      `You forgot to wrap your component in <${SplitSubvariantStoreProvider.name}>.`,
+    );
+  }
+  return useStore;
+}
+
+export const createSplitSubvariantStore = ({ state }: SplitSubvariantProps) =>
+  createWithEqualityFn<SplitSubvariantState>(
+    (set) => ({
+      state,
+      setState(state) {
+        set(() => ({
+          state,
+        }));
+      },
+    }),
+    Object.is,
+  );

package/src/stores/types.ts

@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from 'react';
+
+export interface PersistStoreProps {
+  namePrefix?: string;
+}
+
+export type PersistStoreProviderProps = PropsWithChildren<PersistStoreProps>;

package/src/types/events.ts

@@ -0,0 +1,56 @@
+import type { ChainId, ChainType, Process, Route } from '@lifi/sdk';
+
+export enum WidgetEvent {
+  RouteExecutionStarted = 'routeExecutionStarted',
+  RouteExecutionUpdated = 'routeExecutionUpdated',
+  RouteExecutionCompleted = 'routeExecutionCompleted',
+  RouteExecutionFailed = 'routeExecutionFailed',
+  RouteHighValueLoss = 'routeHighValueLoss',
+  ContactSupport = 'contactSupport',
+  SourceChainTokenSelected = 'sourceChainTokenSelected',
+  DestinationChainTokenSelected = 'destinationChainTokenSelected',
+  SendToWalletToggled = 'sendToWalletToggled',
+  ReviewTransactionPageEntered = 'reviewTransactionPageEntered',
+  WalletConnected = 'walletConnected',
+}
+
+export type WidgetEvents = {
+  routeExecutionStarted: Route;
+  routeExecutionUpdated: RouteExecutionUpdate;
+  routeExecutionCompleted: Route;
+  routeExecutionFailed: RouteExecutionUpdate;
+  routeHighValueLoss: RouteHighValueLossUpdate;
+  contactSupport: ContactSupport;
+  sourceChainTokenSelected: ChainTokenSelected;
+  destinationChainTokenSelected: ChainTokenSelected;
+  sendToWalletToggled: boolean;
+  reviewTransactionPageEntered?: Route;
+  walletConnected: WalletConnected;
+};
+
+export interface ContactSupport {
+  supportId?: string;
+}
+
+export interface RouteHighValueLossUpdate {
+  fromAmountUsd: string;
+  gasCostUSD?: string;
+  toAmountUSD: string;
+  valueLoss: string;
+}
+
+export interface RouteExecutionUpdate {
+  route: Route;
+  process: Process;
+}
+
+export interface ChainTokenSelected {
+  chainId: ChainId;
+  tokenAddress: string;
+}
+
+export interface WalletConnected {
+  address?: string;
+  chainId?: number;
+  chainType?: ChainType;
+}

package/src/types/token.ts

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

package/src/types/widget.ts

@@ -0,0 +1,175 @@
+import type {
+  BaseToken,
+  Order,
+  RouteOptions,
+  SDKOptions,
+  StaticToken,
+  Token,
+} from '@lifi/sdk';
+import type {
+  Components,
+  PaletteMode,
+  PaletteOptions,
+  Shape,
+  Theme,
+} from '@mui/material';
+import type { TypographyOptions } from '@mui/material/styles/createTypography';
+import type { CSSProperties, ReactNode, RefObject } from 'react';
+import type { LanguageKey, LanguageResources } from '../providers';
+import type { SplitSubvariantOptions } from '../stores';
+
+export type WidgetVariant = 'default' | 'expandable' | 'drawer';
+
+export type WidgetSubvariant = 'default' | 'split' | 'nft' | 'refuel';
+
+export enum DisabledUI {
+  FromAmount = 'fromAmount',
+  FromToken = 'fromToken',
+  ToAddress = 'toAddress',
+  ToToken = 'toToken',
+}
+export type DisabledUIType = `${DisabledUI}`;
+
+export enum HiddenUI {
+  Appearance = 'appearance',
+  DrawerButton = 'drawerButton',
+  History = 'history',
+  Language = 'language',
+  PoweredBy = 'poweredBy',
+  ToAddress = 'toAddress',
+  ToToken = 'toToken',
+  WalletMenu = 'walletMenu',
+}
+export type HiddenUIType = `${HiddenUI}`;
+
+export enum RequiredUI {
+  ToAddress = 'toAddress',
+}
+export type RequiredUIType = `${RequiredUI}`;
+
+export type Appearance = PaletteMode | 'auto';
+export type ThemeConfig = {
+  palette?: Pick<
+    PaletteOptions,
+    'background' | 'grey' | 'primary' | 'secondary' | 'text'
+  >;
+  shape?: Shape;
+  typography?: TypographyOptions;
+  components?: Pick<Components<Omit<Theme, 'components'>>, 'MuiAvatar'>;
+};
+
+export interface WidgetWalletManagement {
+  connect(): Promise<void>;
+}
+
+export interface WidgetSDKOptions
+  extends Omit<
+    SDKOptions,
+    | 'apiKey'
+    | 'disableVersionCheck'
+    | 'integrator'
+    | 'routeOptions'
+    | 'widgetVersion'
+  > {
+  routeOptions?: Omit<RouteOptions, 'bridges' | 'exchanges' | 'insurance'>;
+}
+
+export interface WidgetContractTool {
+  logoURI: string;
+  name: string;
+}
+
+export interface WidgetContract {
+  address?: string;
+  callData?: string;
+  gasLimit?: string;
+  approvalAddress?: string;
+  outputToken?: string;
+  fallbackAddress?: string;
+}
+
+export interface WidgetConfig {
+  fromChain?: number;
+  toChain?: number;
+  fromToken?: string;
+  toToken?: string;
+  toAddress?: string;
+  fromAmount?: number | string;
+  toAmount?: number | string;
+
+  contract?: WidgetContract;
+  contractComponent?: ReactNode;
+  contractSecondaryComponent?: ReactNode;
+  contractCompactComponent?: ReactNode;
+  contractTool?: WidgetContractTool;
+
+  integrator: string;
+  apiKey?: string;
+  fee?: number;
+  referrer?: string;
+
+  routePriority?: Order;
+  slippage?: number;
+  insurance?: boolean;
+
+  variant?: WidgetVariant;
+  subvariant?: WidgetSubvariant;
+  subvariantOptions?: SplitSubvariantOptions;
+
+  appearance?: Appearance;
+  theme?: ThemeConfig;
+  containerStyle?: CSSProperties;
+
+  disabledUI?: DisabledUIType[];
+  hiddenUI?: HiddenUIType[];
+  requiredUI?: RequiredUIType[];
+  useRecommendedRoute?: boolean;
+
+  walletManagement?: WidgetWalletManagement;
+  sdkConfig?: WidgetSDKOptions;
+
+  buildUrl?: boolean;
+  keyPrefix?: string;
+
+  bridges?: {
+    allow?: string[];
+    deny?: string[];
+  };
+  exchanges?: {
+    allow?: string[];
+    deny?: string[];
+  };
+  chains?: {
+    allow?: number[];
+    deny?: number[];
+  };
+  tokens?: {
+    featured?: StaticToken[];
+    include?: Token[];
+    allow?: BaseToken[];
+    deny?: BaseToken[];
+  };
+  languages?: {
+    default?: LanguageKey;
+    allow?: LanguageKey[];
+    deny?: LanguageKey[];
+  };
+  languageResources?: LanguageResources;
+}
+
+export type WidgetDrawerProps = {
+  elementRef?: RefObject<HTMLDivElement>;
+  open?: boolean;
+};
+
+export interface WidgetConfigProps {
+  config: WidgetConfig;
+}
+
+export interface WidgetConfigPartialProps {
+  config?: Partial<WidgetConfig>;
+}
+
+export type WidgetProps = WidgetDrawerProps &
+  WidgetConfig &
+  WidgetConfigPartialProps;

package/src/utils/colors.ts

@@ -0,0 +1,29 @@
+import type { PaletteMode, Theme } from '@mui/material';
+import { common } from '@mui/material/colors';
+import { alpha, getContrastRatio } from '@mui/material/styles';
+
+export const getContrastAlphaColor = (
+  mode: PaletteMode,
+  alpha: string | number,
+) =>
+  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)
+    : 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);
+
+export const getCardFieldsetBackgroundColor = (theme: Theme) =>
+  theme.palette.mode === 'dark'
+    ? theme.palette.grey[800]
+    : alpha(theme.palette.common.black, 0.04);