@lifi/widget 2.9.3 → 3.0.0-alpha.0

package/types/events.d.ts

@@ -1,11 +1,11 @@
-import type { ChainId, Process, Route } from '@lifi/sdk';
+import type { ChainId, ChainType, Process, Route } from '@lifi/sdk';
 export declare enum WidgetEvent {
     RouteExecutionStarted = "routeExecutionStarted",
     RouteExecutionUpdated = "routeExecutionUpdated",
     RouteExecutionCompleted = "routeExecutionCompleted",
     RouteExecutionFailed = "routeExecutionFailed",
     RouteHighValueLoss = "routeHighValueLoss",
-    RouteContactSupport = "routeContactSupport",
+    ContactSupport = "contactSupport",
     SourceChainTokenSelected = "sourceChainTokenSelected",
     DestinationChainTokenSelected = "destinationChainTokenSelected",
     SendToWalletToggled = "sendToWalletToggled",
@@ -18,14 +18,14 @@ export type WidgetEvents = {
     routeExecutionCompleted: Route;
     routeExecutionFailed: RouteExecutionUpdate;
     routeHighValueLoss: RouteHighValueLossUpdate;
-    routeContactSupport: RouteContactSupport;
+    contactSupport: ContactSupport;
     sourceChainTokenSelected: ChainTokenSelected;
     destinationChainTokenSelected: ChainTokenSelected;
     sendToWalletToggled: boolean;
     reviewTransactionPageEntered?: Route;
     walletConnected: WalletConnected;
 };
-export interface RouteContactSupport {
+export interface ContactSupport {
     supportId?: string;
 }
 export interface RouteHighValueLossUpdate {
@@ -43,6 +43,7 @@ export interface ChainTokenSelected {
     tokenAddress: string;
 }
 export interface WalletConnected {
-    chainId?: number;
     address?: string;
+    chainId?: number;
+    chainType?: ChainType;
 }

package/types/events.js

@@ -5,7 +5,7 @@ export var WidgetEvent;
     WidgetEvent["RouteExecutionCompleted"] = "routeExecutionCompleted";
     WidgetEvent["RouteExecutionFailed"] = "routeExecutionFailed";
     WidgetEvent["RouteHighValueLoss"] = "routeHighValueLoss";
-    WidgetEvent["RouteContactSupport"] = "routeContactSupport";
+    WidgetEvent["ContactSupport"] = "contactSupport";
     WidgetEvent["SourceChainTokenSelected"] = "sourceChainTokenSelected";
     WidgetEvent["DestinationChainTokenSelected"] = "destinationChainTokenSelected";
     WidgetEvent["SendToWalletToggled"] = "sendToWalletToggled";

package/types/widget.d.ts

@@ -1,5 +1,4 @@
-import type { Signer } from '@ethersproject/abstract-signer';
-import type { BaseToken, ChainKey, ConfigUpdate, Order, RouteOptions, StaticToken, Token } from '@lifi/sdk';
+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';
@@ -37,15 +36,10 @@ export type ThemeConfig = {
     components?: Pick<Components<Omit<Theme, 'components'>>, 'MuiAvatar'>;
 };
 export interface WidgetWalletManagement {
-    connect(): Promise<Signer>;
-    disconnect(): Promise<void>;
-    switchChain?(chainId: number): Promise<Signer>;
-    addToken?(token: StaticToken, chainId: number): Promise<void>;
-    addChain?(chainId: number): Promise<boolean>;
-    signer?: Signer;
+    connect(): Promise<void>;
 }
-export interface SDKConfig extends Omit<ConfigUpdate, 'defaultExecutionSettings' | 'defaultRouteOptions' | 'disableVersionCheck' | 'integrator'> {
-    defaultRouteOptions?: Omit<RouteOptions, 'bridges' | 'exchanges' | 'insurance'>;
+export interface WidgetSDKOptions extends Omit<SDKOptions, 'apiKey' | 'disableVersionCheck' | 'integrator' | 'routeOptions' | 'widgetVersion'> {
+    routeOptions?: Omit<RouteOptions, 'bridges' | 'exchanges' | 'insurance'>;
 }
 export interface WidgetContractTool {
     logoURI: string;
@@ -60,8 +54,8 @@ export interface WidgetContract {
     fallbackAddress?: string;
 }
 export interface WidgetConfig {
-    fromChain?: `${ChainKey}` | number;
-    toChain?: `${ChainKey}` | number;
+    fromChain?: number;
+    toChain?: number;
     fromToken?: string;
     toToken?: string;
     toAddress?: string;
@@ -90,7 +84,7 @@ export interface WidgetConfig {
     requiredUI?: RequiredUIType[];
     useRecommendedRoute?: boolean;
     walletManagement?: WidgetWalletManagement;
-    sdkConfig?: SDKConfig;
+    sdkConfig?: WidgetSDKOptions;
     buildUrl?: boolean;
     keyPrefix?: string;
     bridges?: {
@@ -117,7 +111,6 @@ export interface WidgetConfig {
         deny?: LanguageKey[];
     };
     languageResources?: LanguageResources;
-    disableLanguageDetector?: boolean;
 }
 export type WidgetDrawerProps = {
     elementRef?: RefObject<HTMLDivElement>;

package/utils/colors.d.ts

@@ -1,3 +1,6 @@
 import type { PaletteMode, Theme } from '@mui/material';
 export declare const getContrastAlphaColor: (mode: PaletteMode, alpha: string | number) => string;
 export declare const getContrastTextColor: (theme: Theme, background?: string) => "#fff" | "#000";
+export declare const getWarningBackgroundColor: (theme: Theme) => string;
+export declare const getInfoBackgroundColor: (theme: Theme) => string;
+export declare const getCardFieldsetBackgroundColor: (theme: Theme) => string;

package/utils/colors.js

@@ -1,6 +1,15 @@
 import { common } from '@mui/material/colors';
-import { getContrastRatio } from '@mui/material/styles';
+import { alpha, getContrastRatio } from '@mui/material/styles';
 export const getContrastAlphaColor = (mode, alpha) => mode === 'light' ? `rgb(0 0 0 / ${alpha})` : `rgb(255 255 255 / ${alpha})`;
 export const getContrastTextColor = (theme, background) => getContrastRatio(common.white, background ?? theme.palette.primary.main) >= 3
     ? common.white
     : common.black;
+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);
+export const getCardFieldsetBackgroundColor = (theme) => theme.palette.mode === 'dark'
+    ? theme.palette.grey[800]
+    : alpha(theme.palette.common.black, 0.04);

package/utils/converters.d.ts

@@ -0,0 +1,3 @@
+import type { StatusResponse, ToolsResponse } from '@lifi/sdk';
+import type { RouteExecution } from '../stores';
+export declare const buildRouteFromTxHistory: (tx: StatusResponse, tools?: ToolsResponse) => RouteExecution | undefined;

package/utils/converters.js

@@ -0,0 +1,168 @@
+const buildProcessFromTxHistory = (tx) => {
+    const sending = tx.sending;
+    const receiving = tx.receiving;
+    if (!sending.token?.chainId || !receiving.token?.chainId) {
+        return [];
+    }
+    const processStatus = tx.status === 'DONE' ? 'DONE' : 'FAILED';
+    const substatus = processStatus === 'FAILED' ? 'UNKNOWN_ERROR' : 'COMPLETED';
+    if (sending.chainId === receiving.chainId) {
+        return [
+            {
+                type: 'SWAP', // operations on same chain will be swaps
+                startedAt: sending.timestamp ?? Date.now(),
+                message: '',
+                status: processStatus,
+                txHash: sending.txHash,
+                txLink: sending.txLink,
+                doneAt: receiving.timestamp ?? Date.now(),
+                substatus,
+                substatusMessage: '',
+            },
+        ];
+    }
+    const process = [
+        {
+            type: 'CROSS_CHAIN', // first step of bridging, ignoring the approvals
+            startedAt: sending.timestamp ?? Date.now(),
+            message: '',
+            status: processStatus, // can be FAILED
+            txHash: sending.txHash,
+            txLink: sending.txLink,
+            doneAt: sending.timestamp,
+        },
+        {
+            type: 'RECEIVING_CHAIN', // final step of bridging, post swaps
+            startedAt: receiving.timestamp ?? Date.now(),
+            message: '',
+            status: processStatus,
+            substatus,
+            substatusMessage: '',
+            doneAt: receiving.timestamp ?? Date.now(),
+            txHash: receiving.txHash,
+            txLink: receiving.txLink,
+        },
+    ];
+    return process;
+};
+export const buildRouteFromTxHistory = (tx, tools) => {
+    const sending = tx.sending;
+    const receiving = tx.receiving;
+    if (!sending.token?.chainId || !receiving.token?.chainId) {
+        return;
+    }
+    const selectedBridge = tools?.bridges.find((bridge) => bridge.key === tx.tool);
+    const selectedExchange = tools?.exchanges.find((exchange) => exchange.key === tx.tool);
+    const usedTool = {
+        key: tx.tool,
+        name: selectedBridge?.name ?? selectedExchange?.name ?? tx.tool,
+        logoURI: selectedBridge?.logoURI ?? selectedExchange?.logoURI ?? '',
+    };
+    const fromToken = {
+        ...sending.token,
+        amount: BigInt(sending.amount ?? 0),
+        priceUSD: sending.amountUSD ?? '0',
+        symbol: sending.token?.symbol ?? '',
+        decimals: sending.token?.decimals ?? 0,
+        name: sending.token?.name ?? '',
+        chainId: sending.token?.chainId,
+    };
+    const toToken = {
+        ...receiving.token,
+        amount: BigInt(receiving.amount ?? 0),
+        priceUSD: receiving.amountUSD ?? '0',
+        symbol: receiving.token?.symbol ?? '',
+        decimals: receiving.token?.decimals ?? 0,
+        name: receiving.token?.name ?? '',
+        chainId: receiving.token?.chainId,
+    };
+    const routeExecution = {
+        status: 1,
+        route: {
+            id: tx.transactionId,
+            fromAddress: tx.fromAddress,
+            toAddress: tx.toAddress,
+            fromChainId: sending.chainId,
+            fromAmount: sending.amount ?? '',
+            fromAmountUSD: sending.amountUSD ?? '',
+            toAmount: receiving.amount ?? '',
+            toAmountMin: receiving.amount ?? '',
+            toAmountUSD: receiving.amountUSD ?? '',
+            toChainId: receiving.chainId,
+            fromToken,
+            toToken,
+            steps: [
+                {
+                    id: '',
+                    type: 'lifi',
+                    tool: tx.tool,
+                    toolDetails: usedTool,
+                    action: {
+                        fromToken: sending.token,
+                        fromAmount: sending.amount ?? '',
+                        fromChainId: sending.chainId,
+                        fromAddress: tx.fromAddress,
+                        toToken: receiving.token,
+                        toChainId: receiving.chainId,
+                        toAddress: tx.toAddress,
+                        slippage: 0,
+                    },
+                    estimate: {
+                        tool: tx.tool,
+                        approvalAddress: '',
+                        fromAmount: sending.amount ?? '',
+                        fromAmountUSD: sending.amountUSD ?? '',
+                        toAmountMin: receiving.amount ?? '',
+                        toAmount: receiving.amount ?? '',
+                        toAmountUSD: receiving.amountUSD ?? '',
+                        executionDuration: 30,
+                    },
+                    includedSteps: [
+                        {
+                            id: '',
+                            type: sending.chainId === receiving.chainId ? 'swap' : 'cross',
+                            action: {
+                                fromChainId: sending.chainId,
+                                fromAmount: sending.amount ?? '',
+                                fromToken: sending.token,
+                                toChainId: receiving.chainId,
+                                toToken: receiving.token,
+                                slippage: 0,
+                                fromAddress: tx.fromAddress,
+                                toAddress: tx.toAddress,
+                            },
+                            estimate: {
+                                tool: tx.tool,
+                                fromAmount: sending.amount ?? '',
+                                toAmount: receiving.amount ?? '',
+                                toAmountMin: receiving.amount ?? '',
+                                approvalAddress: '',
+                                executionDuration: 30,
+                            },
+                            tool: tx.tool,
+                            toolDetails: usedTool,
+                        },
+                    ],
+                    integrator: '',
+                    execution: {
+                        status: 'DONE', // can be FAILED
+                        process: buildProcessFromTxHistory(tx),
+                        fromAmount: sending.amount,
+                        toAmount: receiving.amount,
+                        toToken: receiving.token,
+                        gasAmount: sending.gasAmount,
+                        gasAmountUSD: sending.gasAmountUSD,
+                        gasPrice: sending.gasPrice,
+                        gasToken: sending.gasToken,
+                        gasUsed: sending.gasUsed,
+                    },
+                },
+            ],
+            insurance: {
+                state: 'NOT_INSURABLE',
+                feeAmountUsd: '0',
+            },
+        },
+    };
+    return routeExecution;
+};

package/utils/format.d.ts

@@ -3,7 +3,7 @@
  * @param amount amount to format.
  * @returns formatted amount.
  */
-export declare const formatTokenAmount: (amount?: string, decimals?: number, decimalPlaces?: number) => string;
+export declare const formatTokenAmount: (amount: bigint | undefined, decimals: number, decimalPlaces?: number) => string;
 export declare const formatSlippage: (slippage?: string, defaultValue?: string, returnInitial?: boolean) => string;
 export declare const formatInputAmount: (amount: string, decimals?: number | null, returnInitial?: boolean) => string;
 export declare const formatTokenPrice: (amount?: string, price?: string) => number;

package/utils/format.js

@@ -1,20 +1,13 @@
-import Big from 'big.js';
-// JavaScript numbers use exponential notation for positive exponents of 21 and above. We need more.
-Big.PE = 42;
-// JavaScript numbers use exponential notation for negative exponents of -7 and below. We need more.
-Big.NE = -42;
+import { formatUnits } from 'viem';
 /**
  * Format token amount to at least 4 decimals.
  * @param amount amount to format.
  * @returns formatted amount.
  */
-export const formatTokenAmount = (amount = '0', decimals = 0, decimalPlaces = 3) => {
-    let shiftedAmount = amount;
-    if (decimals) {
-        shiftedAmount = (Number(amount) / 10 ** decimals).toString();
-    }
-    const parsedAmount = parseFloat(shiftedAmount);
-    if (parsedAmount === 0 || isNaN(Number(shiftedAmount))) {
+export const formatTokenAmount = (amount = 0n, decimals, decimalPlaces = 3) => {
+    const formattedAmount = amount ? formatUnits(amount, decimals) : '0';
+    const parsedAmount = parseFloat(formattedAmount);
+    if (parsedAmount === 0 || isNaN(Number(formattedAmount))) {
         return '0';
     }
     const absAmount = Math.abs(parsedAmount);

package/utils/index.d.ts

@@ -5,4 +5,5 @@ export * from './enum';
 export * from './format';
 export * from './input';
 export * from './navigationRoutes';
+export * from './svm';
 export * from './wallet';

package/utils/index.js

@@ -5,4 +5,5 @@ export * from './enum';
 export * from './format';
 export * from './input';
 export * from './navigationRoutes';
+export * from './svm';
 export * from './wallet';

package/utils/navigationRoutes.d.ts

@@ -5,6 +5,7 @@ export declare const navigationRoutes: {
     exchanges: string;
     fromChain: string;
     fromToken: string;
+    languages: string;
     routes: string;
     selectWallet: string;
     settings: string;

package/utils/navigationRoutes.js

@@ -5,8 +5,9 @@ export const navigationRoutes = {
     exchanges: 'exchanges',
     fromChain: 'from-chain',
     fromToken: 'from-token',
+    languages: 'languages',
     routes: 'routes',
-    selectWallet: 'wallet',
+    selectWallet: 'select-wallet',
     settings: 'settings',
     toChain: 'to-chain',
     toToken: 'to-token',
@@ -35,6 +36,7 @@ export const backButtonRoutes = [
     navigationRoutes.activeTransactions,
     navigationRoutes.bridges,
     navigationRoutes.exchanges,
+    navigationRoutes.languages,
     navigationRoutes.fromChain,
     navigationRoutes.fromToken,
     navigationRoutes.routes,

package/utils/svm.d.ts

@@ -0,0 +1 @@
+export declare const isSVMAddress: (address: string) => boolean;

package/utils/svm.js

@@ -0,0 +1,10 @@
+import { PublicKey } from '@solana/web3.js';
+export const isSVMAddress = (address) => {
+    try {
+        new PublicKey(address);
+        return true;
+    }
+    catch {
+        return false;
+    }
+};

package/cjs/components/LiFiLogo.d.ts

@@ -1,5 +0,0 @@
-import type { CSSProperties } from 'react';
-export declare const LiFiLogo: React.FC<{
-    variant?: 'icon' | 'full';
-    style?: CSSProperties;
-}>;

package/cjs/components/LiFiLogo.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LiFiLogo = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_1 = require("../icons");
-const LiFiLogo = ({ variant = 'icon', style }) => {
-    const Component = variant === 'icon' ? icons_1.LiFiLogo : icons_1.LiFiFullLogo;
-    return (0, jsx_runtime_1.jsx)(Component, { style: style, fill: "currentColor", color: "currentColor" });
-};
-exports.LiFiLogo = LiFiLogo;