@lifi/widget 1.24.0 → 1.25.0

package/cjs/stores/routes/useRouteExecutionStore.js

@@ -4,42 +4,50 @@ exports.useRouteExecutionStore = void 0;
 const zustand_1 = require("zustand");
 const middleware_1 = require("zustand/middleware");
 const immer_1 = require("zustand/middleware/immer");
-const utils_1 = require("./utils");
+const utils_1 = require("../../utils");
+const types_1 = require("./types");
+const utils_2 = require("./utils");
 exports.useRouteExecutionStore = (0, zustand_1.default)()((0, middleware_1.persist)((0, immer_1.immer)((set) => ({
     routes: {},
     setExecutableRoute: (route) => set((state) => {
         if (!state.routes[route.id]) {
             // clean previous idle routes that were not executed
             Object.keys(state.routes)
-                .filter((routeId) => { var _a; return ((_a = state.routes[routeId]) === null || _a === void 0 ? void 0 : _a.status) === 'idle'; })
+                .filter((routeId) => { var _a; return ((_a = state.routes[routeId]) === null || _a === void 0 ? void 0 : _a.status) === types_1.RouteExecutionStatus.Idle; })
                 .forEach((routeId) => delete state.routes[routeId]);
             state.routes[route.id] = {
                 route,
-                status: 'idle',
+                status: types_1.RouteExecutionStatus.Idle,
             };
         }
     }),
     updateRoute: (route) => set((state) => {
         if (state.routes[route.id]) {
             state.routes[route.id].route = route;
-            const isFailed = (0, utils_1.isRouteFailed)(route);
+            const isFailed = (0, utils_2.isRouteFailed)(route);
             if (isFailed) {
-                state.routes[route.id].status = 'error';
+                state.routes[route.id].status = types_1.RouteExecutionStatus.Failed;
                 return;
             }
-            const isDone = (0, utils_1.isRouteCompleted)(route);
+            const isDone = (0, utils_2.isRouteDone)(route);
             if (isDone) {
-                state.routes[route.id].status = 'success';
+                state.routes[route.id].status = types_1.RouteExecutionStatus.Done;
+                if ((0, utils_2.isRoutePartiallyDone)(route)) {
+                    state.routes[route.id].status |= types_1.RouteExecutionStatus.Partial;
+                }
+                else if ((0, utils_2.isRouteRefunded)(route)) {
+                    state.routes[route.id].status |= types_1.RouteExecutionStatus.Refunded;
+                }
                 return;
             }
             const isLoading = route.steps.some((step) => step.execution);
             if (isLoading) {
-                state.routes[route.id].status = 'loading';
+                state.routes[route.id].status = types_1.RouteExecutionStatus.Pending;
             }
         }
     }),
     restartRoute: (routeId) => set((state) => {
-        state.routes[routeId].status = 'loading';
+        state.routes[routeId].status = types_1.RouteExecutionStatus.Pending;
     }),
     deleteRoute: (routeId) => set((state) => {
         if (state.routes[routeId]) {
@@ -49,15 +57,16 @@ exports.useRouteExecutionStore = (0, zustand_1.default)()((0, middleware_1.persi
     deleteRoutes: (type) => set((state) => {
         Object.keys(state.routes)
             .filter((routeId) => {
-            var _a, _b;
+            var _a, _b, _c, _d;
             return type === 'completed'
-                ? ((_a = state.routes[routeId]) === null || _a === void 0 ? void 0 : _a.status) === 'success'
-                : ((_b = state.routes[routeId]) === null || _b === void 0 ? void 0 : _b.status) !== 'success';
+                ? (0, utils_1.hasEnumFlag)((_b = (_a = state.routes[routeId]) === null || _a === void 0 ? void 0 : _a.status) !== null && _b !== void 0 ? _b : 0, types_1.RouteExecutionStatus.Done)
+                : !(0, utils_1.hasEnumFlag)((_d = (_c = state.routes[routeId]) === null || _c === void 0 ? void 0 : _c.status) !== null && _d !== void 0 ? _d : 0, types_1.RouteExecutionStatus.Done);
         })
             .forEach((routeId) => delete state.routes[routeId]);
     }),
 })), {
     name: 'li.fi-widget-routes',
+    version: 1,
     partialize: (state) => ({ routes: state.routes }),
     merge: (persistedState, currentState) => {
         const state = Object.assign(Object.assign({}, currentState), persistedState);
@@ -71,21 +80,21 @@ exports.useRouteExecutionStore = (0, zustand_1.default)()((0, middleware_1.persi
                     }
                     state.routes[route.id] = {
                         route,
-                        status: 'idle',
+                        status: types_1.RouteExecutionStatus.Idle,
                     };
-                    const isFailed = (0, utils_1.isRouteFailed)(route);
+                    const isFailed = (0, utils_2.isRouteFailed)(route);
                     if (isFailed) {
-                        state.routes[route.id].status = 'error';
+                        state.routes[route.id].status = types_1.RouteExecutionStatus.Failed;
                         return;
                     }
-                    const isDone = (0, utils_1.isRouteCompleted)(route);
+                    const isDone = (0, utils_2.isRouteDone)(route);
                     if (isDone) {
-                        state.routes[route.id].status = 'success';
+                        state.routes[route.id].status = types_1.RouteExecutionStatus.Done;
                         return;
                     }
                     const isLoading = route.steps.some((step) => step.execution);
                     if (isLoading) {
-                        state.routes[route.id].status = 'loading';
+                        state.routes[route.id].status = types_1.RouteExecutionStatus.Pending;
                     }
                 });
             }
@@ -96,4 +105,30 @@ exports.useRouteExecutionStore = (0, zustand_1.default)()((0, middleware_1.persi
         }
         return state;
     },
+    migrate: (persistedState, version) => {
+        if (version === 0) {
+            Object.values(persistedState.routes).forEach((route) => {
+                if (route) {
+                    switch (route.status) {
+                        case 'idle':
+                            route.status = types_1.RouteExecutionStatus.Idle;
+                            break;
+                        case 'loading':
+                            route.status = types_1.RouteExecutionStatus.Pending;
+                            break;
+                        case 'success':
+                        case 'warning':
+                            route.status = types_1.RouteExecutionStatus.Done;
+                            break;
+                        case 'error':
+                            route.status = types_1.RouteExecutionStatus.Failed;
+                            break;
+                        default:
+                            break;
+                    }
+                }
+            });
+        }
+        return persistedState;
+    },
 }));

package/cjs/stores/routes/useSwapHistory.js

@@ -2,10 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSwapHistory = void 0;
 const shallow_1 = require("zustand/shallow");
+const utils_1 = require("../../utils");
+const types_1 = require("./types");
 const useRouteExecutionStore_1 = require("./useRouteExecutionStore");
 const useSwapHistory = (address) => {
     return (0, useRouteExecutionStore_1.useRouteExecutionStore)((state) => Object.values(state.routes)
-        .filter((item) => (item === null || item === void 0 ? void 0 : item.route.fromAddress) === address && (item === null || item === void 0 ? void 0 : item.status) === 'success')
+        .filter((item) => (item === null || item === void 0 ? void 0 : item.route.fromAddress) === address &&
+        (0, utils_1.hasEnumFlag)(item.status, types_1.RouteExecutionStatus.Done))
         .sort((a, b) => {
         var _a, _b, _c, _d;
         return ((_b = (_a = b === null || b === void 0 ? void 0 : b.route.steps[0].execution) === null || _a === void 0 ? void 0 : _a.process[0].startedAt) !== null && _b !== void 0 ? _b : 0) -

package/cjs/stores/routes/utils.d.ts

@@ -1,5 +1,7 @@
 import type { Process, Route } from '@lifi/sdk';
-export declare const isRouteCompleted: (route: Route) => boolean;
+export declare const isRouteDone: (route: Route) => boolean;
+export declare const isRoutePartiallyDone: (route: Route) => boolean;
+export declare const isRouteRefunded: (route: Route) => boolean;
 export declare const isRouteFailed: (route: Route) => boolean;
 export declare const isRouteActive: (route?: Route) => boolean;
 export declare const getUpdatedProcess: (currentRoute: Route, updatedRoute: Route) => Process | undefined;

package/cjs/stores/routes/utils.js

@@ -1,11 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getUpdatedProcess = exports.isRouteActive = exports.isRouteFailed = exports.isRouteCompleted = void 0;
+exports.getUpdatedProcess = exports.isRouteActive = exports.isRouteFailed = exports.isRouteRefunded = exports.isRoutePartiallyDone = exports.isRouteDone = void 0;
 const microdiff_1 = require("microdiff");
-const isRouteCompleted = (route) => {
+const isRouteDone = (route) => {
     return route.steps.every((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE'; });
 };
-exports.isRouteCompleted = isRouteCompleted;
+exports.isRouteDone = isRouteDone;
+const isRoutePartiallyDone = (route) => {
+    return route.steps.some((step) => { var _a; return (_a = step.execution) === null || _a === void 0 ? void 0 : _a.process.some((process) => process.substatus === 'PARTIAL'); });
+};
+exports.isRoutePartiallyDone = isRoutePartiallyDone;
+const isRouteRefunded = (route) => {
+    return route.steps.some((step) => { var _a; return (_a = step.execution) === null || _a === void 0 ? void 0 : _a.process.some((process) => process.substatus === 'REFUNDED'); });
+};
+exports.isRouteRefunded = isRouteRefunded;
 const isRouteFailed = (route) => {
     return route.steps.some((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED'; });
 };
@@ -14,7 +22,7 @@ const isRouteActive = (route) => {
     if (!route) {
         return false;
     }
-    const isDone = (0, exports.isRouteCompleted)(route);
+    const isDone = (0, exports.isRouteDone)(route);
     const isFailed = (0, exports.isRouteFailed)(route);
     const alreadyStarted = route.steps.some((step) => step.execution);
     return !isDone && !isFailed && alreadyStarted;

package/cjs/stores/settings/types.d.ts

@@ -1,17 +1,17 @@
 import type { Bridge, Exchange, Order } from '@lifi/sdk';
 import type { Appearance } from '../../types';
-export declare type ValueSetter<S> = <K extends keyof S>(key: K, value: S[Extract<K, string>]) => void;
-export declare type ValuesSetter<S> = <K extends keyof S>(values: Record<K, S[Extract<K, string>]>) => void;
-export declare type SettingsToolType = 'Bridges' | 'Exchanges';
+export type ValueSetter<S> = <K extends keyof S>(key: K, value: S[Extract<K, string>]) => void;
+export type ValuesSetter<S> = <K extends keyof S>(values: Record<K, S[Extract<K, string>]>) => void;
+export type SettingsToolType = 'Bridges' | 'Exchanges';
 export declare const SettingsToolTypes: SettingsToolType[];
 export interface SettingsState {
     advancedPreferences: boolean;
     appearance: Appearance;
-    gasPrice: string;
+    gasPrice?: string;
     language?: string;
-    routePriority: Order;
+    routePriority?: Order;
     showDestinationWallet: boolean;
-    slippage: string;
+    slippage?: string;
     enabledBridges?: string[];
     _enabledBridges?: Record<string, boolean>;
     enabledExchanges?: string[];

package/cjs/stores/settings/useSettingsStore.d.ts

@@ -1,5 +1,7 @@
+import type { WidgetConfig } from '../../types';
 import type { SettingsState, SettingsStore } from './types';
-export declare const defaultSettings: Omit<SettingsState, 'enabledBridges' | 'enabledExchanges' | '_enabledBridges' | '_enabledExchanges'>;
+export declare const defaultConfigurableSettings: Pick<SettingsState, 'routePriority' | 'slippage'>;
+export declare const defaultSettings: SettingsState;
 export declare const useSettingsStore: import("zustand").UseBoundStore<Omit<Omit<import("zustand").StoreApi<SettingsStore>, "persist"> & {
     persist: {
         setOptions: (options: Partial<import("zustand/middleware").PersistOptions<SettingsStore, {
@@ -8,12 +10,12 @@ export declare const useSettingsStore: import("zustand").UseBoundStore<Omit<Omit
             initializeTools(toolType: import("./types").SettingsToolType, tools: string[]): void;
             setTools(toolType: import("./types").SettingsToolType, tools: string[], availableTools: (Pick<import("@lifi/types").Bridge, "key"> | Pick<import("@lifi/types").Exchange, "key">)[]): void;
             advancedPreferences: boolean;
-            appearance: import("../..").Appearance;
-            gasPrice: string;
+            appearance: import("../../types").Appearance;
+            gasPrice?: string | undefined;
             language?: string | undefined;
-            routePriority: "RECOMMENDED" | "FASTEST" | "CHEAPEST" | "SAFEST";
+            routePriority?: "RECOMMENDED" | "FASTEST" | "CHEAPEST" | "SAFEST" | undefined;
             showDestinationWallet: boolean;
-            slippage: string;
+            slippage?: string | undefined;
             _enabledBridges?: Record<string, boolean> | undefined;
             _enabledExchanges?: Record<string, boolean> | undefined;
         }>>) => void;
@@ -28,12 +30,12 @@ export declare const useSettingsStore: import("zustand").UseBoundStore<Omit<Omit
             initializeTools(toolType: import("./types").SettingsToolType, tools: string[]): void;
             setTools(toolType: import("./types").SettingsToolType, tools: string[], availableTools: (Pick<import("@lifi/types").Bridge, "key"> | Pick<import("@lifi/types").Exchange, "key">)[]): void;
             advancedPreferences: boolean;
-            appearance: import("../..").Appearance;
-            gasPrice: string;
+            appearance: import("../../types").Appearance;
+            gasPrice?: string | undefined;
             language?: string | undefined;
-            routePriority: "RECOMMENDED" | "FASTEST" | "CHEAPEST" | "SAFEST";
+            routePriority?: "RECOMMENDED" | "FASTEST" | "CHEAPEST" | "SAFEST" | undefined;
             showDestinationWallet: boolean;
-            slippage: string;
+            slippage?: string | undefined;
             _enabledBridges?: Record<string, boolean> | undefined;
             _enabledExchanges?: Record<string, boolean> | undefined;
         }>>;
@@ -41,3 +43,4 @@ export declare const useSettingsStore: import("zustand").UseBoundStore<Omit<Omit
 }, "setState"> & {
     setState(nextStateOrUpdater: SettingsStore | Partial<SettingsStore> | ((state: import("immer/dist/internal").WritableDraft<SettingsStore>) => void), shouldReplace?: boolean | undefined): void;
 }>;
+export declare const setDefaultSettings: (config?: WidgetConfig) => void;

package/cjs/stores/settings/useSettingsStore.js

@@ -11,17 +11,19 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSettingsStore = exports.defaultSettings = void 0;
+exports.setDefaultSettings = exports.useSettingsStore = exports.defaultSettings = exports.defaultConfigurableSettings = void 0;
 /* eslint-disable no-underscore-dangle */
 const zustand_1 = require("zustand");
 const middleware_1 = require("zustand/middleware");
 const immer_1 = require("zustand/middleware/immer");
 const types_1 = require("./types");
+exports.defaultConfigurableSettings = {
+    routePriority: 'RECOMMENDED',
+    slippage: '0.5',
+};
 exports.defaultSettings = {
     appearance: 'auto',
     gasPrice: 'normal',
-    routePriority: 'RECOMMENDED',
-    slippage: '0.5',
     advancedPreferences: false,
     showDestinationWallet: true,
 };
@@ -81,11 +83,26 @@ exports.useSettingsStore = (0, zustand_1.default)()((0, middleware_1.persist)((0
     },
     migrate: (persistedState, version) => {
         if (version === 0 && persistedState.appearance === 'system') {
-            persistedState.appearance = 'auto';
+            persistedState.appearance = exports.defaultSettings.appearance;
         }
         if (version === 1) {
-            persistedState.slippage = '0.5';
+            persistedState.slippage = exports.defaultConfigurableSettings.slippage;
         }
         return persistedState;
     },
 }));
+const setDefaultSettings = (config) => {
+    var _a, _b, _c, _d, _e;
+    const { slippage, routePriority, setValue } = exports.useSettingsStore.getState();
+    const defaultSlippage = ((config === null || config === void 0 ? void 0 : config.slippage) ||
+        ((_b = (_a = config === null || config === void 0 ? void 0 : config.sdkConfig) === null || _a === void 0 ? void 0 : _a.defaultRouteOptions) === null || _b === void 0 ? void 0 : _b.slippage) ||
+        0) * 100;
+    const defaultRoutePriority = (config === null || config === void 0 ? void 0 : config.routePriority) || ((_d = (_c = config === null || config === void 0 ? void 0 : config.sdkConfig) === null || _c === void 0 ? void 0 : _c.defaultRouteOptions) === null || _d === void 0 ? void 0 : _d.order);
+    if (!slippage) {
+        setValue('slippage', (_e = (defaultSlippage || exports.defaultConfigurableSettings.slippage)) === null || _e === void 0 ? void 0 : _e.toString());
+    }
+    if (!routePriority) {
+        setValue('routePriority', defaultRoutePriority || exports.defaultConfigurableSettings.routePriority);
+    }
+};
+exports.setDefaultSettings = setDefaultSettings;

package/cjs/types/events.d.ts

@@ -5,7 +5,7 @@ export declare enum WidgetEvent {
     RouteExecutionCompleted = "routeExecutionCompleted",
     RouteExecutionFailed = "routeExecutionFailed"
 }
-export declare type WidgetEvents = {
+export type WidgetEvents = {
     routeExecutionStarted: Route;
     routeExecutionUpdated: RouteExecutionUpdate;
     routeExecutionCompleted: Route;

package/cjs/types/widget.d.ts

@@ -1,19 +1,19 @@
-import type { ChainKey, ConfigUpdate, Token } from '@lifi/sdk';
+import type { Signer } from '@ethersproject/abstract-signer';
+import type { ChainKey, ConfigUpdate, Order, RouteOptions, Token } from '@lifi/sdk';
 import type { PaletteMode, PaletteOptions, Shape } from '@mui/material';
 import type { TypographyOptions } from '@mui/material/styles/createTypography';
-import type { Signer } from 'ethers';
 import type { CSSProperties, RefObject } from 'react';
 import type { LanguageKey, LanguageResources } from '../providers';
-export declare type WidgetVariant = 'default' | 'expandable' | 'drawer' | 'refuel';
+export type WidgetVariant = 'default' | 'expandable' | 'drawer' | 'refuel';
 export declare enum DisabledUI {
     FromToken = "fromToken",
     ToToken = "toToken",
     FromAmount = "fromAmount",
     ToAddress = "toAddress"
 }
-export declare type DisabledUIType = `${DisabledUI}`;
-export declare type Appearance = PaletteMode | 'auto';
-export declare type ThemeConfig = {
+export type DisabledUIType = `${DisabledUI}`;
+export type Appearance = PaletteMode | 'auto';
+export type ThemeConfig = {
     palette?: Pick<PaletteOptions, 'primary' | 'secondary'>;
     shape?: Shape;
     typography?: TypographyOptions;
@@ -26,6 +26,9 @@ export interface WidgetWalletManagement {
     addChain?(chainId: number): Promise<boolean>;
     signer?: Signer;
 }
+export interface SDKConfig extends Omit<ConfigUpdate, 'defaultExecutionSettings' | 'defaultRouteOptions' | 'disableVersionCheck'> {
+    defaultRouteOptions?: Omit<RouteOptions, 'bridges' | 'exchanges'>;
+}
 export interface WidgetConfig {
     fromChain?: `${ChainKey}` | number;
     toChain?: `${ChainKey}` | number;
@@ -34,6 +37,8 @@ export interface WidgetConfig {
     toAddress?: string;
     fromAmount?: number | string;
     integrator?: string;
+    slippage?: number;
+    routePriority?: Order;
     variant?: WidgetVariant;
     appearance?: Appearance;
     theme?: ThemeConfig;
@@ -43,7 +48,7 @@ export interface WidgetConfig {
     disabledUI?: DisabledUIType[];
     useRecommendedRoute?: boolean;
     walletManagement?: WidgetWalletManagement;
-    sdkConfig?: ConfigUpdate;
+    sdkConfig?: SDKConfig;
     buildSwapUrl?: boolean;
     bridges?: {
         allow?: string[];
@@ -74,7 +79,7 @@ export interface WidgetConfig {
     /** @deprecated Use tokens.featured instead */
     featuredTokens?: Token[];
 }
-export declare type WidgetProps = {
+export type WidgetProps = {
     elementRef?: RefObject<HTMLDivElement>;
     config?: WidgetConfig;
     open?: boolean;

package/cjs/utils/enum.d.ts

@@ -0,0 +1 @@
+export declare const hasEnumFlag: <T extends number | bigint>(flags: T, flag: T) => boolean;

package/cjs/utils/enum.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasEnumFlag = void 0;
+const hasEnumFlag = (flags, flag) => (flags & flag) === flag;
+exports.hasEnumFlag = hasEnumFlag;

package/cjs/utils/index.d.ts

@@ -2,6 +2,7 @@ export * from './colors';
 export * from './deepClone';
 export * from './deepMerge';
 export * from './elements';
+export * from './enum';
 export * from './format';
 export * from './input';
 export * from './navigationRoutes';

package/cjs/utils/index.js

@@ -18,6 +18,7 @@ __exportStar(require("./colors"), exports);
 __exportStar(require("./deepClone"), exports);
 __exportStar(require("./deepMerge"), exports);
 __exportStar(require("./elements"), exports);
+__exportStar(require("./enum"), exports);
 __exportStar(require("./format"), exports);
 __exportStar(require("./input"), exports);
 __exportStar(require("./navigationRoutes"), exports);

package/cjs/utils/navigationRoutes.d.ts

@@ -16,4 +16,4 @@ export declare const navigationRoutes: {
 export declare const navigationRoutesValues: string[];
 export declare const stickyHeaderRoutes: string[];
 export declare const backButtonRoutes: string[];
-export declare type NavigationRouteType = keyof typeof navigationRoutes;
+export type NavigationRouteType = keyof typeof navigationRoutes;

package/components/ActiveSwaps/ActiveSwapItem.js

@@ -3,6 +3,7 @@ import { ArrowForward as ArrowForwardIcon, Info as InfoIcon, Warning as WarningI
 import { ListItemAvatar, ListItemText, Typography } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 import { useProcessMessage, useRouteExecution } from '../../hooks';
+import { RouteExecutionStatus } from '../../stores';
 import { navigationRoutes } from '../../utils';
 import { StepTimer } from '../Step/StepTimer';
 import { TokenAvatar, TokenAvatarGroup } from '../TokenAvatar';
@@ -37,5 +38,5 @@ export const ActiveSwapItem = ({ routeId, dense }) => {
                         alignItems: 'center',
                         marginLeft: 2,
                         height: 16,
-                    } }, { children: [route.fromToken.symbol, _jsx(ArrowForwardIcon, { sx: { paddingX: 0.5 } }), route.toToken.symbol] })), secondary: status !== 'success' ? (_jsx(Typography, Object.assign({ fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1, mt: 0.75, ml: 2 }, { children: title }))) : null }), getStatusComponent()] })));
+                    } }, { children: [route.fromToken.symbol, _jsx(ArrowForwardIcon, { sx: { paddingX: 0.5 } }), route.toToken.symbol] })), secondary: status !== RouteExecutionStatus.Done ? (_jsx(Typography, Object.assign({ fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1, mt: 0.75, ml: 2 }, { children: title }))) : null }), getStatusComponent()] })));
 };

package/components/BottomSheet/types.d.ts

@@ -1,6 +1,6 @@
 import type { DrawerProps } from '@mui/material';
 import type { RefObject } from 'react';
-export declare type BottomSheetProps = DrawerProps & {
+export type BottomSheetProps = DrawerProps & {
     elementRef?: RefObject<HTMLDivElement>;
 };
 export interface BottomSheetBase {

package/components/Card/Card.d.ts

@@ -1,7 +1,7 @@
 import type { BoxProps, Theme } from '@mui/material';
 import type { MouseEventHandler } from 'react';
-declare type CardVariant = 'default' | 'selected' | 'error';
-export declare type CardProps = {
+type CardVariant = 'default' | 'selected' | 'error';
+export type CardProps = {
     variant?: CardVariant;
     selectionColor?: 'primary' | 'secondary';
     dense?: boolean;

package/components/Card/CardTitle.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare const CardTitle: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
-    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
+    align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
     gutterBottom?: boolean | undefined;

package/components/ChainSelect/ChainSelect.js

@@ -10,10 +10,15 @@ import { useChainSelect } from './useChainSelect';
 export const ChainSelect = ({ formType }) => {
     var _a;
     const navigate = useNavigate();
-    const { chains, getChains, setCurrentChain, isLoading } = useChainSelect(formType);
+    const { chainOrder, chains, getChains, isLoading, setChainOrder, setCurrentChain, } = useChainSelect(formType);
     const [chainId] = useWatch({
         name: [SwapFormKeyHelper.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);
+    }
     const showAllChains = () => {
         navigate(navigationRoutes[`${formType}Chain`]);
     };

package/components/ChainSelect/useChainSelect.d.ts

@@ -1,8 +1,10 @@
 import type { EVMChain } from '@lifi/sdk';
 import type { SwapFormType } from '../../providers';
 export declare const useChainSelect: (formType: SwapFormType) => {
+    chainOrder: number[];
     chains: import("@lifi/sdk").ExtendedChain[] | undefined;
     getChains: () => EVMChain[];
-    setCurrentChain: (chainId: number) => void;
     isLoading: boolean;
+    setChainOrder: (chainId: number) => void;
+    setCurrentChain: (chainId: number) => void;
 };

package/components/ChainSelect/useChainSelect.js

@@ -1,12 +1,13 @@
-import { useFormContext } from 'react-hook-form';
+import { useController, useFormContext } from 'react-hook-form';
 import { useChains } from '../../hooks';
 import { SwapFormKey, SwapFormKeyHelper } from '../../providers';
 import { useChainOrder } from '../../stores';
 export const useChainSelect = (formType) => {
+    const chainKey = SwapFormKeyHelper.getChainKey(formType);
+    const { field: { onChange, onBlur }, } = useController({ name: chainKey });
     const { setValue } = useFormContext();
     const { chains, isLoading } = useChains();
     const [chainOrder, setChainOrder] = useChainOrder();
-    const chainKey = SwapFormKeyHelper.getChainKey(formType);
     const getChains = () => {
         if (!chains) {
             return [];
@@ -17,11 +18,19 @@ export const useChainSelect = (formType) => {
         return selectedChains;
     };
     const setCurrentChain = (chainId) => {
-        setValue(chainKey, chainId, { shouldTouch: true });
+        onChange(chainId);
+        onBlur();
         setValue(SwapFormKeyHelper.getTokenKey(formType), '');
         setValue(SwapFormKeyHelper.getAmountKey(formType), '');
         setValue(SwapFormKey.TokenSearchFilter, '');
         setChainOrder(chainId);
     };
-    return { chains, getChains, setCurrentChain, isLoading };
+    return {
+        chainOrder,
+        chains,
+        getChains,
+        isLoading,
+        setChainOrder,
+        setCurrentChain,
+    };
 };

package/components/SendToWallet/SendToWallet.style.d.ts

@@ -8,7 +8,7 @@ export declare const FormControl: import("@emotion/styled").StyledComponent<{
     fullWidth?: boolean | undefined;
     focused?: boolean | undefined;
     hiddenLabel?: boolean | undefined;
-    margin?: "none" | "normal" | "dense" | undefined;
+    margin?: "normal" | "none" | "dense" | undefined;
     required?: boolean | undefined;
     size?: "small" | "medium" | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;

package/components/SwapInput/FitInputText.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { SwapFormTypeProps } from '../../providers';
+export declare const FitInputText: import("react").ForwardRefExoticComponent<SwapFormTypeProps & import("react").RefAttributes<HTMLInputElement>>;

package/components/SwapInput/FitInputText.js

@@ -0,0 +1,16 @@
+import { forwardRef, useLayoutEffect } from 'react';
+import { useWatch } from 'react-hook-form';
+import { SwapFormKeyHelper } from '../../providers';
+import { fitInputText } from '../../utils';
+import { maxInputFontSize, minInputFontSize } from './SwapInput.style';
+export const FitInputText = forwardRef(({ formType }, ref) => {
+    const amountKey = SwapFormKeyHelper.getAmountKey(formType);
+    const [amount] = useWatch({
+        name: [amountKey],
+    });
+    useLayoutEffect(() => {
+        fitInputText(maxInputFontSize, minInputFontSize, ref
+            .current);
+    }, [amount, ref]);
+    return null;
+});

package/components/SwapInput/FormPriceHelperText.d.ts

@@ -1,5 +1,3 @@
 /// <reference types="react" />
 import type { SwapFormTypeProps } from '../../providers';
-export declare const FormPriceHelperText: React.FC<SwapFormTypeProps & {
-    selected: boolean;
-}>;
+export declare const FormPriceHelperText: React.FC<SwapFormTypeProps>;

package/components/SwapInput/FormPriceHelperText.js

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { useTokenAddressBalance } from '../../hooks';
 import { SwapFormKeyHelper } from '../../providers';
 import { formatTokenPrice } from '../../utils';
-export const FormPriceHelperText = ({ formType, selected }) => {
+export const FormPriceHelperText = ({ formType, }) => {
     const { t } = useTranslation();
     const [amount, chainId, tokenAddress] = useWatch({
         name: [