@lifi/widget 3.0.0-alpha.9 → 3.0.0-beta.1

package/themes/windows95.ts

@@ -0,0 +1,101 @@
+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

@@ -6,12 +6,14 @@ export enum WidgetEvent {
   RouteExecutionCompleted = 'routeExecutionCompleted',
   RouteExecutionFailed = 'routeExecutionFailed',
   RouteHighValueLoss = 'routeHighValueLoss',
+  AvailableRoutes = 'availableRoutes',
   ContactSupport = 'contactSupport',
   SourceChainTokenSelected = 'sourceChainTokenSelected',
   DestinationChainTokenSelected = 'destinationChainTokenSelected',
   SendToWalletToggled = 'sendToWalletToggled',
   ReviewTransactionPageEntered = 'reviewTransactionPageEntered',
   WalletConnected = 'walletConnected',
+  WidgetExpanded = 'widgetExpanded',
 }
 
 export type WidgetEvents = {
@@ -20,12 +22,14 @@ export type WidgetEvents = {
   routeExecutionCompleted: Route;
   routeExecutionFailed: RouteExecutionUpdate;
   routeHighValueLoss: RouteHighValueLossUpdate;
+  availableRoutes: Route[];
   contactSupport: ContactSupport;
   sourceChainTokenSelected: ChainTokenSelected;
   destinationChainTokenSelected: ChainTokenSelected;
   sendToWalletToggled: boolean;
   reviewTransactionPageEntered?: Route;
   walletConnected: WalletConnected;
+  widgetExpanded: boolean;
 };
 
 export interface ContactSupport {

package/types/token.ts

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

package/types/widget.ts

@@ -1,8 +1,10 @@
 import type {
   BaseToken,
+  ChainType,
+  ContractCall,
   Order,
   RouteOptions,
-  SDKOptions,
+  SDKConfig,
   StaticToken,
   Token,
 } from '@lifi/sdk';
@@ -13,14 +15,56 @@ import type {
   Shape,
   Theme,
 } from '@mui/material';
-import type { TypographyOptions } from '@mui/material/styles/createTypography';
+import type { TypographyOptions } from '@mui/material/styles/createTypography.js';
+import type {
+  CoinbaseWalletParameters,
+  WalletConnectParameters,
+} from '@wagmi/connectors';
 import type { CSSProperties, ReactNode, RefObject } from 'react';
-import type { LanguageKey, LanguageResources } from '../providers';
-import type { SplitSubvariantOptions } from '../stores';
-
-export type WidgetVariant = 'default' | 'expandable' | 'drawer';
+import type {
+  LanguageKey,
+  LanguageResources,
+} from '../providers/I18nProvider/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 WidgetSubvariant = 'default' | 'split' | 'nft' | 'refuel';
+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;
+  playground?: CSSProperties;
+  navigation?: NavigationProps;
+};
 
 export enum DisabledUI {
   FromAmount = 'fromAmount',
@@ -32,7 +76,7 @@ export type DisabledUIType = `${DisabledUI}`;
 
 export enum HiddenUI {
   Appearance = 'appearance',
-  DrawerButton = 'drawerButton',
+  DrawerCloseButton = 'drawerCloseButton',
   History = 'history',
   Language = 'language',
   PoweredBy = 'poweredBy',
@@ -47,24 +91,15 @@ export enum RequiredUI {
 }
 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 WidgetWalletConfig {
+  onConnect?(): void;
+  walletConnect?: WalletConnectParameters;
+  coinbase?: CoinbaseWalletParameters;
 }
 
-export interface WidgetSDKOptions
+export interface WidgetSDKConfig
   extends Omit<
-    SDKOptions,
+    SDKConfig,
     | 'apiKey'
     | 'disableVersionCheck'
     | 'integrator'
@@ -79,13 +114,16 @@ export interface WidgetContractTool {
   name: string;
 }
 
-export interface WidgetContract {
-  address?: string;
-  callData?: string;
-  gasLimit?: string;
-  approvalAddress?: string;
-  outputToken?: string;
-  fallbackAddress?: string;
+export interface ToAddress {
+  name?: string;
+  address: string;
+  chainType: ChainType;
+  logoURI?: string;
+}
+
+export interface AllowDeny<T> {
+  allow?: T[];
+  deny?: T[];
 }
 
 export interface WidgetConfig {
@@ -93,11 +131,12 @@ export interface WidgetConfig {
   toChain?: number;
   fromToken?: string;
   toToken?: string;
-  toAddress?: string;
+  toAddress?: ToAddress;
+  toAddresses?: ToAddress[];
   fromAmount?: number | string;
   toAmount?: number | string;
 
-  contract?: WidgetContract;
+  contractCalls?: ContractCall[];
   contractComponent?: ReactNode;
   contractSecondaryComponent?: ReactNode;
   contractCompactComponent?: ReactNode;
@@ -114,54 +153,40 @@ export interface WidgetConfig {
 
   variant?: WidgetVariant;
   subvariant?: WidgetSubvariant;
-  subvariantOptions?: SplitSubvariantOptions;
+  subvariantOptions?: SubvariantOptions;
 
   appearance?: Appearance;
-  theme?: ThemeConfig;
-  containerStyle?: CSSProperties;
+  theme?: WidgetTheme;
 
   disabledUI?: DisabledUIType[];
   hiddenUI?: HiddenUIType[];
   requiredUI?: RequiredUIType[];
   useRecommendedRoute?: boolean;
 
-  walletManagement?: WidgetWalletManagement;
-  sdkConfig?: WidgetSDKOptions;
+  walletConfig?: WidgetWalletConfig;
+  sdkConfig?: WidgetSDKConfig;
 
   buildUrl?: boolean;
   keyPrefix?: string;
 
-  bridges?: {
-    allow?: string[];
-    deny?: string[];
-  };
-  exchanges?: {
-    allow?: string[];
-    deny?: string[];
-  };
+  bridges?: AllowDeny<string>;
+  exchanges?: AllowDeny<string>;
   chains?: {
-    allow?: number[];
-    deny?: number[];
-  };
+    from?: AllowDeny<number>;
+    to?: AllowDeny<number>;
+    types?: AllowDeny<ChainType>;
+  } & AllowDeny<number>;
   tokens?: {
     featured?: StaticToken[];
     include?: Token[];
-    allow?: BaseToken[];
-    deny?: BaseToken[];
-  };
+    popular?: StaticToken[];
+  } & AllowDeny<BaseToken>;
   languages?: {
     default?: LanguageKey;
-    allow?: LanguageKey[];
-    deny?: LanguageKey[];
-  };
+  } & AllowDeny<LanguageKey>;
   languageResources?: LanguageResources;
 }
 
-export type WidgetDrawerProps = {
-  elementRef?: RefObject<HTMLDivElement>;
-  open?: boolean;
-};
-
 export interface WidgetConfigProps {
   config: WidgetConfig;
 }
@@ -173,3 +198,12 @@ export interface WidgetConfigPartialProps {
 export type WidgetProps = WidgetDrawerProps &
   WidgetConfig &
   WidgetConfigPartialProps;
+
+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

@@ -0,0 +1,27 @@
+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,17 +1,10 @@
-import type { PaletteMode, Theme } from '@mui/material';
-import { common } from '@mui/material/colors';
-import { alpha, getContrastRatio } from '@mui/material/styles';
+import type { Theme } from '@mui/material';
+import { alpha, decomposeColor, recomposeColor } from '@mui/material';
 
-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 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'
@@ -23,7 +16,38 @@ export const getInfoBackgroundColor = (theme: Theme) =>
     ? 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);
+/**
+ * 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,
+  });
+}

package/utils/converters.ts

@@ -1,16 +1,17 @@
 import type {
   ExtendedTransactionInfo,
+  FeeCost,
   FullStatusData,
   Process,
   Status,
-  StatusResponse,
   Substatus,
   TokenAmount,
   ToolsResponse,
 } from '@lifi/sdk';
-import type { RouteExecution } from '../stores';
+import { formatUnits } from 'viem';
+import type { RouteExecution } from '../stores/routes/types.js';
 
-const buildProcessFromTxHistory = (tx: StatusResponse): Process[] => {
+const buildProcessFromTxHistory = (tx: FullStatusData): Process[] => {
   const sending = tx.sending as ExtendedTransactionInfo;
   const receiving = tx.receiving as ExtendedTransactionInfo;
 
@@ -65,7 +66,7 @@ const buildProcessFromTxHistory = (tx: StatusResponse): Process[] => {
 };
 
 export const buildRouteFromTxHistory = (
-  tx: StatusResponse,
+  tx: FullStatusData,
   tools?: ToolsResponse,
 ) => {
   const sending = tx.sending as ExtendedTransactionInfo;
@@ -109,6 +110,32 @@ export const buildRouteFromTxHistory = (
     chainId: receiving.token?.chainId,
   };
 
+  const sendingValue = sending.value ? BigInt(sending.value) : 0n;
+  const sendingFeeAmount =
+    sending.gasToken.address === sending.token.address && sending.amount
+      ? sendingValue - BigInt(sending.amount)
+      : sendingValue;
+  const sendingFeeAmountUsd =
+    sending.gasToken.priceUSD && sendingFeeAmount
+      ? parseFloat(formatUnits(sendingFeeAmount, sending.gasToken.decimals)) *
+        parseFloat(sending.gasToken.priceUSD)
+      : 0;
+
+  const feeCosts: FeeCost[] | undefined = sendingValue
+    ? [
+        {
+          amount: sendingFeeAmount.toString(),
+          amountUSD: sendingFeeAmountUsd.toFixed(2),
+          token: sending.gasToken,
+          included: false,
+          // Not used
+          description: '',
+          name: '',
+          percentage: '',
+        },
+      ]
+    : undefined;
+
   const routeExecution: RouteExecution = {
     status: 1,
     route: {
@@ -170,7 +197,7 @@ export const buildRouteFromTxHistory = (
                 toAmount: receiving.amount ?? '',
                 toAmountMin: receiving.amount ?? '',
                 approvalAddress: '',
-                executionDuration: 30,
+                executionDuration: 0,
               },
               tool: tx.tool,
               toolDetails: usedTool,
@@ -183,11 +210,18 @@ export const buildRouteFromTxHistory = (
             fromAmount: sending.amount,
             toAmount: receiving.amount,
             toToken: receiving.token,
-            gasAmount: sending.gasAmount,
-            gasAmountUSD: sending.gasAmountUSD,
-            gasPrice: sending.gasPrice,
-            gasToken: sending.gasToken,
-            gasUsed: sending.gasUsed,
+            gasCosts: [
+              {
+                amount: sending.gasAmount,
+                amountUSD: sending.gasAmountUSD,
+                token: sending.gasToken,
+                estimate: '0',
+                limit: '0',
+                price: '0',
+                type: 'SEND',
+              },
+            ],
+            feeCosts,
           },
         },
       ],

package/utils/fees.ts

@@ -0,0 +1,97 @@
+import type { FeeCost, GasCost, Route, Token } from '@lifi/sdk';
+
+export interface FeesBreakdown {
+  amount: bigint;
+  amountUSD: number;
+  token: Token;
+}
+
+export const getGasCostsBreakdown = (route: Route): FeesBreakdown[] => {
+  return Object.values(
+    route.steps.reduce(
+      (groupedGasCosts, step) => {
+        if (step.estimate.gasCosts?.length) {
+          const {
+            token,
+            amount: gasCostAmount,
+            amountUSD: gasCostAmountUSD,
+          } = getStepFeeCostsBreakdown(step.estimate.gasCosts);
+          const groupedGasCost = groupedGasCosts[token.chainId];
+          const amount = groupedGasCost
+            ? groupedGasCost.amount + gasCostAmount
+            : gasCostAmount;
+          const amountUSD = groupedGasCost
+            ? groupedGasCost.amountUSD + gasCostAmountUSD
+            : gasCostAmountUSD;
+          groupedGasCosts[token.chainId] = {
+            amount,
+            amountUSD,
+            token,
+          };
+          return groupedGasCosts;
+        }
+        return groupedGasCosts;
+      },
+      {} as Record<number, FeesBreakdown>,
+    ),
+  );
+};
+
+export const getFeeCostsBreakdown = (
+  route: Route,
+  included?: boolean,
+): FeesBreakdown[] => {
+  return Object.values(
+    route.steps.reduce(
+      (groupedFeeCosts, step) => {
+        let feeCosts = step.estimate.feeCosts;
+        if (typeof included === 'boolean') {
+          feeCosts = feeCosts?.filter(
+            (feeCost) => feeCost.included === included,
+          );
+        }
+        if (feeCosts?.length) {
+          const {
+            token,
+            amount: feeCostAmount,
+            amountUSD: feeCostAmountUSD,
+          } = getStepFeeCostsBreakdown(feeCosts);
+          const groupedFeeCost = groupedFeeCosts[token.chainId];
+          const amount = groupedFeeCost
+            ? groupedFeeCost.amount + feeCostAmount
+            : feeCostAmount;
+          const amountUSD = groupedFeeCost
+            ? groupedFeeCost.amountUSD + feeCostAmountUSD
+            : feeCostAmountUSD;
+          groupedFeeCosts[token.chainId] = {
+            amount,
+            amountUSD,
+            token,
+          };
+          return groupedFeeCosts;
+        }
+        return groupedFeeCosts;
+      },
+      {} as Record<number, FeesBreakdown>,
+    ),
+  );
+};
+
+export const getStepFeeCostsBreakdown = (
+  feeCosts: FeeCost[] | GasCost[],
+): FeesBreakdown => {
+  const token = feeCosts[0].token;
+  const amount = feeCosts.reduce(
+    (amount, feeCost) => amount + BigInt(feeCost.amount || 0),
+    0n,
+  );
+  const amountUSD = feeCosts.reduce(
+    (amount, feeCost) => amount + parseFloat(feeCost.amountUSD || '0'),
+    0,
+  );
+  return {
+    amount,
+    amountUSD,
+    token,
+  };
+};

package/utils/item.ts

@@ -0,0 +1,8 @@
+import type { AllowDeny } from '../types/widget.js';
+
+export const isItemAllowed = <T>(itemId: T, items?: AllowDeny<T>) => {
+  if (items?.allow?.length) {
+    return items.allow.includes(itemId);
+  }
+  return !items?.deny?.includes(itemId);
+};