@lifi/widget 2.9.3 → 3.0.0-alpha.0

package/cjs/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/cjs/types/events.js

@@ -8,7 +8,7 @@ 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/cjs/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/cjs/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/cjs/utils/colors.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getContrastTextColor = exports.getContrastAlphaColor = void 0;
+exports.getCardFieldsetBackgroundColor = exports.getInfoBackgroundColor = exports.getWarningBackgroundColor = exports.getContrastTextColor = exports.getContrastAlphaColor = void 0;
 const colors_1 = require("@mui/material/colors");
 const styles_1 = require("@mui/material/styles");
 const getContrastAlphaColor = (mode, alpha) => mode === 'light' ? `rgb(0 0 0 / ${alpha})` : `rgb(255 255 255 / ${alpha})`;
@@ -9,3 +9,15 @@ const getContrastTextColor = (theme, background) => (0, styles_1.getContrastRati
     ? colors_1.common.white
     : colors_1.common.black;
 exports.getContrastTextColor = getContrastTextColor;
+const getWarningBackgroundColor = (theme) => theme.palette.mode === 'light'
+    ? (0, styles_1.alpha)(theme.palette.warning.main, 0.32)
+    : (0, styles_1.alpha)(theme.palette.warning.main, 0.16);
+exports.getWarningBackgroundColor = getWarningBackgroundColor;
+const getInfoBackgroundColor = (theme) => theme.palette.mode === 'light'
+    ? (0, styles_1.alpha)(theme.palette.info.main, 0.12)
+    : (0, styles_1.alpha)(theme.palette.info.main, 0.16);
+exports.getInfoBackgroundColor = getInfoBackgroundColor;
+const getCardFieldsetBackgroundColor = (theme) => theme.palette.mode === 'dark'
+    ? theme.palette.grey[800]
+    : (0, styles_1.alpha)(theme.palette.common.black, 0.04);
+exports.getCardFieldsetBackgroundColor = getCardFieldsetBackgroundColor;

package/cjs/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/cjs/utils/converters.js

@@ -0,0 +1,172 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildRouteFromTxHistory = void 0;
+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;
+};
+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;
+};
+exports.buildRouteFromTxHistory = buildRouteFromTxHistory;

package/cjs/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/cjs/utils/format.js

@@ -1,23 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.formatTokenPrice = exports.formatInputAmount = exports.formatSlippage = exports.formatTokenAmount = void 0;
-const big_js_1 = require("big.js");
-// JavaScript numbers use exponential notation for positive exponents of 21 and above. We need more.
-big_js_1.default.PE = 42;
-// JavaScript numbers use exponential notation for negative exponents of -7 and below. We need more.
-big_js_1.default.NE = -42;
+const viem_1 = require("viem");
 /**
  * Format token amount to at least 4 decimals.
  * @param amount amount to format.
  * @returns formatted amount.
  */
-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))) {
+const formatTokenAmount = (amount = 0n, decimals, decimalPlaces = 3) => {
+    const formattedAmount = amount ? (0, viem_1.formatUnits)(amount, decimals) : '0';
+    const parsedAmount = parseFloat(formattedAmount);
+    if (parsedAmount === 0 || isNaN(Number(formattedAmount))) {
         return '0';
     }
     const absAmount = Math.abs(parsedAmount);

package/cjs/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/cjs/utils/index.js

@@ -21,4 +21,5 @@ __exportStar(require("./enum"), exports);
 __exportStar(require("./format"), exports);
 __exportStar(require("./input"), exports);
 __exportStar(require("./navigationRoutes"), exports);
+__exportStar(require("./svm"), exports);
 __exportStar(require("./wallet"), exports);

package/cjs/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/cjs/utils/navigationRoutes.js

@@ -8,8 +8,9 @@ exports.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',
@@ -38,6 +39,7 @@ exports.backButtonRoutes = [
     exports.navigationRoutes.activeTransactions,
     exports.navigationRoutes.bridges,
     exports.navigationRoutes.exchanges,
+    exports.navigationRoutes.languages,
     exports.navigationRoutes.fromChain,
     exports.navigationRoutes.fromToken,
     exports.navigationRoutes.routes,

package/cjs/utils/svm.d.ts

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

package/cjs/utils/svm.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isSVMAddress = void 0;
+const web3_js_1 = require("@solana/web3.js");
+const isSVMAddress = (address) => {
+    try {
+        new web3_js_1.PublicKey(address);
+        return true;
+    }
+    catch {
+        return false;
+    }
+};
+exports.isSVMAddress = isSVMAddress;

package/components/ActiveTransactions/ActiveTransactionItem.js

@@ -16,11 +16,7 @@ export const ActiveTransactionItem = ({ routeId, dense }) => {
         routeId,
         executeInBackground: true,
     });
-    // TODO: replace with ES2023 findLast
-    const lastActiveStep = route?.steps
-        .slice()
-        .reverse()
-        .find((step) => step.execution);
+    const lastActiveStep = route?.steps.findLast((step) => step.execution);
     const lastActiveProcess = lastActiveStep?.execution?.process.at(-1);
     const { title } = useProcessMessage(lastActiveStep, lastActiveProcess);
     if (!route || !lastActiveStep) {

package/components/ActiveTransactions/ActiveTransactions.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Stack } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { useWallet } from '../../providers';
+import { useAccount } from '../../hooks';
 import { useExecutingRoutesIds } from '../../stores';
 import { navigationRoutes } from '../../utils';
 import { Card, CardTitle } from '../Card';
@@ -11,7 +11,7 @@ import { ShowAllButton } from './ActiveTransactions.style';
 export const ActiveTransactions = (props) => {
     const { t } = useTranslation();
     const navigate = useNavigate();
-    const { account } = useWallet();
+    const { account } = useAccount();
     const executingRoutes = useExecutingRoutesIds(account.address);
     if (!executingRoutes?.length) {
         return null;

package/components/AmountInput/AmountInputEndAdornment.js

@@ -1,22 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { InputAdornment, Skeleton } from '@mui/material';
-import Big from 'big.js';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { useChains, useGasRecommendation, useTokenAddressBalance, } from '../../hooks';
+import { formatUnits } from 'viem';
+import { useAvailableChains, useGasRecommendation, useTokenAddressBalance, } from '../../hooks';
 import { FormKeyHelper } from '../../providers';
-import { formatTokenAmount } from '../../utils';
 import { Button } from './AmountInputAdornment.style';
 export const AmountInputEndAdornment = ({ formType }) => {
     const { t } = useTranslation();
     const { setValue } = useFormContext();
-    const { getChainById } = useChains();
+    const { getChainById } = useAvailableChains();
     const [chainId, tokenAddress] = useWatch({
         name: [
             FormKeyHelper.getChainKey(formType),
             FormKeyHelper.getTokenKey(formType),
         ],
     });
+    // We get gas recommendations for the source chain to make sure that after pressing the Max button
+    // the user will have enough funds remaining to cover gas costs
     const { data } = useGasRecommendation(chainId);
     const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
     const handleMax = () => {
@@ -25,15 +26,13 @@ export const AmountInputEndAdornment = ({ formType }) => {
         if (chain?.nativeToken.address === tokenAddress &&
             data?.available &&
             data?.recommended) {
-            const tokenAmount = Big(token?.amount ?? 0);
-            const recommendedAmount = Big(data.recommended.amount)
-                .div(10 ** data.recommended.token.decimals)
-                .div(2);
-            if (tokenAmount.gt(recommendedAmount)) {
-                maxAmount = formatTokenAmount(tokenAmount.minus(recommendedAmount).toString());
+            const tokenAmount = token?.amount ?? 0n;
+            const recommendedAmount = BigInt(data.recommended.amount) / 2n;
+            if (tokenAmount > recommendedAmount) {
+                maxAmount = tokenAmount - recommendedAmount;
             }
         }
-        setValue(FormKeyHelper.getAmountKey(formType), maxAmount || '', {
+        setValue(FormKeyHelper.getAmountKey(formType), maxAmount && token ? formatUnits(maxAmount, token.decimals) : '', {
             shouldTouch: true,
         });
     };

package/components/AmountInput/FormPriceHelperText.js

@@ -27,6 +27,6 @@ export const FormPriceHelperTextBase = ({ formType, isLoading, tokenAddress, tok
                 }, children: t(`format.currency`, {
                     value: fromAmountTokenPrice,
                 }) }), isLoading && tokenAddress ? (_jsx(Skeleton, { variant: "text", width: 48, height: 16, sx: { borderRadius: 0.25 } })) : token?.amount ? (_jsx(Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1.3334, pl: 0.25, children: `/ ${t(`format.number`, {
-                    value: formatTokenAmount(token?.amount),
+                    value: formatTokenAmount(token.amount, token.decimals),
                 })}` })) : null] }));
 };

package/components/BaseTransactionButton/BaseTransactionButton.js

@@ -2,26 +2,27 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { LoadingButton } from '@mui/lab';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { useWallet, useWidgetConfig } from '../../providers';
+import { useAccount } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
 import { navigationRoutes } from '../../utils';
 export const BaseTransactionButton = ({ onClick, text, disabled, loading, }) => {
     const { t } = useTranslation();
     const navigate = useNavigate();
     const { walletManagement } = useWidgetConfig();
-    const { account, connect } = useWallet();
+    const { account } = useAccount();
     const handleClick = async () => {
-        if (account.isActive) {
+        if (account.isConnected) {
             onClick?.();
         }
         else if (walletManagement) {
-            await connect();
+            await walletManagement.connect();
         }
         else {
             navigate(navigationRoutes.selectWallet);
         }
     };
     const getButtonText = () => {
-        if (account.isActive) {
+        if (account.isConnected) {
             if (text) {
                 return text;
             }

package/components/Card/CardLabel.d.ts

@@ -2,7 +2,7 @@
 export declare const CardLabel: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    type?: "active" | "insurance" | "insurance-icon" | undefined;
+    type?: "insurance" | "active" | "insurance-icon" | undefined;
 }, {}, {}>;
 export declare const CardLabelTypography: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;

package/components/ChainSelect/ChainSelect.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar, Box, Skeleton, Tooltip, Typography } from '@mui/material';
+import { useEffect } from 'react';
 import { useWatch } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { FormKeyHelper } from '../../providers';
@@ -13,11 +14,13 @@ export const ChainSelect = ({ formType }) => {
     const [chainId] = useWatch({
         name: [FormKeyHelper.getChainKey(formType)],
     });
-    const hasChainInOrderedList = chainOrder.includes(chainId);
-    // If we don't have a chain in the ordered chain list we should add it.
-    if (!hasChainInOrderedList) {
-        setChainOrder(chainId);
-    }
+    useEffect(() => {
+        const hasChainInOrderedList = chainOrder.includes(chainId);
+        // If we don't have a chain in the ordered chain list we should add it.
+        if (!hasChainInOrderedList) {
+            setChainOrder(chainId);
+        }
+    }, [chainId, chainOrder, setChainOrder]);
     const showAllChains = () => {
         navigate(navigationRoutes[`${formType}Chain`]);
     };

package/components/ChainSelect/useChainSelect.js

@@ -1,12 +1,14 @@
 import { useController, useFormContext } from 'react-hook-form';
 import { useChains, useSwapOnly } from '../../hooks';
-import { FormKey, FormKeyHelper } from '../../providers';
+import { FormKey, FormKeyHelper, useWidgetConfig } from '../../providers';
 import { useChainOrder } from '../../stores';
+import { RequiredUI } from '../../types';
 export const useChainSelect = (formType) => {
+    const { requiredUI } = useWidgetConfig();
     const chainKey = FormKeyHelper.getChainKey(formType);
     const { field: { onChange, onBlur }, } = useController({ name: chainKey });
-    const { setValue } = useFormContext();
-    const { chains, isLoading } = useChains();
+    const { setValue, getValues } = useFormContext();
+    const { chains, isLoading, getChainById } = useChains();
     const [chainOrder, setChainOrder] = useChainOrder();
     const swapOnly = useSwapOnly();
     const getChains = () => {
@@ -29,6 +31,23 @@ export const useChainSelect = (formType) => {
         setValue(FormKeyHelper.getTokenKey(formType), '');
         setValue(FormKeyHelper.getAmountKey(formType), '');
         setValue(FormKey.TokenSearchFilter, '');
+        const [fromChainId, toChainId] = getValues([
+            FormKey.FromChain,
+            FormKey.ToChain,
+        ]);
+        const fromChain = getChainById(fromChainId);
+        const toChain = getChainById(toChainId);
+        const differentChainType = fromChain && toChain && fromChain.chainType !== toChain.chainType;
+        const requiredToAddress = requiredUI?.includes(RequiredUI.ToAddress) || differentChainType;
+        // toAddress field is required (always visible) when bridging between
+        // two ecosystems (fromChain and toChain have different chain types).
+        // We clean up toAddress on every chain change if toAddress is not required.
+        // This is used when we switch between different chain ecosystems (chain types) and
+        // prevents cases when after we switch the chain from one type to another "Send to wallet" field hides,
+        // but it keeps toAddress value set for the previous chain pair.
+        if (!requiredToAddress) {
+            setValue(FormKey.ToAddress, '');
+        }
         setChainOrder(chainId);
     };
     return {

package/components/GasMessage/GasMessage.style.js

@@ -2,15 +2,14 @@ import { Box } from '@mui/material';
 import { switchClasses } from '@mui/material/Switch';
 import { alpha, darken, lighten, styled } from '@mui/material/styles';
 import { Switch } from '../Switch';
+import { getInfoBackgroundColor, getWarningBackgroundColor } from '../../utils';
 const MessageCard = styled(Box)(({ theme }) => ({
     borderRadius: theme.shape.borderRadius,
     position: 'relative',
     whiteSpace: 'pre-line',
 }));
 export const WarningMessageCard = styled(MessageCard)(({ theme }) => ({
-    backgroundColor: theme.palette.mode === 'light'
-        ? alpha(theme.palette.warning.main, 0.32)
-        : alpha(theme.palette.warning.main, 0.16),
+    backgroundColor: getWarningBackgroundColor(theme),
 }));
 export const WarningMessageCardTitle = styled(Box)(({ theme }) => ({
     color: theme.palette.mode === 'light'
@@ -18,9 +17,7 @@ export const WarningMessageCardTitle = styled(Box)(({ theme }) => ({
         : alpha(theme.palette.warning.main, 1),
 }));
 export const InfoMessageCard = styled(MessageCard)(({ theme }) => ({
-    backgroundColor: theme.palette.mode === 'light'
-        ? alpha(theme.palette.info.main, 0.12)
-        : alpha(theme.palette.info.main, 0.16),
+    backgroundColor: getInfoBackgroundColor(theme),
 }));
 export const InfoMessageCardTitle = styled(Box)(({ theme }) => ({
     color: theme.palette.mode === 'light'