@lifi/widget 2.0.0-beta.1 → 2.0.0-beta.10

package/cjs/providers/WalletProvider/WalletProvider.js

@@ -24,19 +24,6 @@ const WalletProvider = ({ children }) => {
     const { walletManagement } = (0, WidgetProvider_1.useWidgetConfig)();
     const [account, setAccount] = (0, react_1.useState)({});
     const [currentWallet, setCurrentWallet] = (0, react_1.useState)();
-    (0, react_1.useEffect)(() => {
-        const autoConnect = async () => {
-            const persistedActiveWallets = (0, wallet_management_1.readActiveWallets)();
-            const activeWallets = wallet_management_1.supportedWallets.filter((wallet) => persistedActiveWallets.some((perstistedWallet) => perstistedWallet.name === wallet.name));
-            if (!activeWallets.length) {
-                return;
-            }
-            await liFiWalletManagement.autoConnect(activeWallets);
-            activeWallets[0].on('walletAccountChanged', handleWalletUpdate);
-            handleWalletUpdate(activeWallets[0]);
-        };
-        autoConnect();
-    }, []);
     const handleWalletUpdate = async (wallet) => {
         setCurrentWallet(wallet);
         const account = await (0, exports.extractAccountFromSigner)(wallet?.account?.signer);
@@ -64,54 +51,104 @@ const WalletProvider = ({ children }) => {
             currentWallet.removeAllListeners();
             handleWalletUpdate(undefined);
         }
-    }, [walletManagement, currentWallet]);
+    }, [currentWallet, walletManagement]);
     const switchChain = (0, react_1.useCallback)(async (chainId) => {
-        if (walletManagement?.switchChain) {
-            const signer = await walletManagement.switchChain(chainId);
-            const account = await (0, exports.extractAccountFromSigner)(signer);
-            setAccount(account);
-            return true;
-        }
         try {
-            await currentWallet?.switchChain(chainId);
-            handleWalletUpdate(currentWallet);
-            return true;
+            if (walletManagement?.switchChain) {
+                const signer = await walletManagement.switchChain(chainId);
+                const account = await (0, exports.extractAccountFromSigner)(signer);
+                setAccount(account);
+                return signer;
+            }
+            else if (!currentWallet) {
+                const provider = account.signer?.provider;
+                if (!provider) {
+                    throw new Error(`Switch chain: No provider available`);
+                }
+                await (0, wallet_management_1.switchChain)(provider, chainId);
+            }
+            else {
+                await currentWallet?.switchChain(chainId);
+                handleWalletUpdate(currentWallet);
+            }
+            // TODO: this will fail if it's not created with ethers 'any' network, replace with the new signer when possible
+            return account.signer;
         }
         catch {
-            return false;
+            return account.signer;
         }
-    }, [walletManagement, currentWallet]);
+    }, [account.signer, currentWallet, walletManagement]);
     const addChain = (0, react_1.useCallback)(async (chainId) => {
-        if (walletManagement?.addChain) {
-            return walletManagement.addChain(chainId);
-        }
         try {
-            await currentWallet?.addChain(chainId);
-            handleWalletUpdate(currentWallet);
+            if (walletManagement?.addChain) {
+                return walletManagement.addChain(chainId);
+            }
+            else if (!currentWallet) {
+                const provider = account.signer?.provider;
+                if (!provider) {
+                    throw new Error(`Add chain: No provider available`);
+                }
+                await (0, wallet_management_1.addChain)(provider, chainId);
+            }
+            else {
+                await currentWallet?.addChain(chainId);
+                handleWalletUpdate(currentWallet);
+            }
             return true;
         }
         catch {
             return false;
         }
-    }, [walletManagement, currentWallet]);
+    }, [account.signer?.provider, currentWallet, walletManagement]);
     const addToken = (0, react_1.useCallback)(async (chainId, token) => {
-        if (walletManagement?.addToken) {
-            return walletManagement.addToken(token, chainId);
+        try {
+            if (walletManagement?.addToken) {
+                return walletManagement.addToken(token, chainId);
+            }
+            else if (!currentWallet) {
+                const provider = account.signer?.provider;
+                if (!provider) {
+                    throw new Error(`Add token: No provider available`);
+                }
+                await (0, wallet_management_1.switchChainAndAddToken)(provider, chainId, token);
+            }
+            else {
+                await currentWallet?.addToken(chainId, token);
+                handleWalletUpdate(currentWallet);
+            }
         }
-        await currentWallet?.addToken(chainId, token);
-        handleWalletUpdate(currentWallet);
-        return;
-    }, [walletManagement, currentWallet]);
+        catch { }
+    }, [account.signer?.provider, currentWallet, walletManagement]);
+    (0, react_1.useEffect)(() => {
+        const autoConnect = async () => {
+            const persistedActiveWallets = (0, wallet_management_1.readActiveWallets)();
+            const activeWallets = wallet_management_1.supportedWallets.filter((wallet) => persistedActiveWallets.some((perstistedWallet) => perstistedWallet.name === wallet.name));
+            if (!activeWallets.length) {
+                return;
+            }
+            await liFiWalletManagement.autoConnect(activeWallets);
+            activeWallets[0].on('walletAccountChanged', handleWalletUpdate);
+            handleWalletUpdate(activeWallets[0]);
+        };
+        autoConnect();
+    }, []);
     // keep widget in sync with changing external signer object
     (0, react_1.useEffect)(() => {
         if (walletManagement) {
+            let ignore = false;
             const updateAccount = async () => {
                 const account = await (0, exports.extractAccountFromSigner)(walletManagement?.signer);
-                setAccount(account);
+                // we should ignore the update if there is a newer one
+                if (!ignore) {
+                    setAccount(account);
+                }
             };
             updateAccount();
+            return () => {
+                ignore = true;
+            };
         }
-    }, [walletManagement, walletManagement?.signer]);
+    }, [walletManagement]);
     const value = (0, react_1.useMemo)(() => ({
         connect,
         disconnect,
@@ -119,16 +156,7 @@ const WalletProvider = ({ children }) => {
         addChain,
         addToken,
         account,
-        provider: currentWallet?.account?.provider,
-    }), [
-        account,
-        addChain,
-        addToken,
-        connect,
-        disconnect,
-        currentWallet,
-        switchChain,
-    ]);
+    }), [account, addChain, addToken, connect, disconnect, switchChain]);
     return ((0, jsx_runtime_1.jsx)(WalletContext.Provider, { value: value, children: children }));
 };
 exports.WalletProvider = WalletProvider;

package/cjs/providers/WalletProvider/types.d.ts

@@ -1,14 +1,12 @@
 import type { Signer } from '@ethersproject/abstract-signer';
-import type { Provider } from '@ethersproject/providers';
-import type { Token } from '@lifi/sdk';
+import type { StaticToken } from '@lifi/sdk';
 import type { Wallet } from '@lifi/wallet-management';
 export interface WalletContextProps {
     account: WalletAccount;
-    provider?: Provider;
     addChain(chainId: number): Promise<boolean>;
-    addToken(chainId: number, token: Token): Promise<void>;
+    addToken(chainId: number, token: StaticToken): Promise<void>;
     disconnect(wallet?: Wallet): void;
-    switchChain(chainId: number): Promise<boolean>;
+    switchChain(chainId: number): Promise<Signer | undefined>;
     connect(wallet?: Wallet | undefined): Promise<void>;
 }
 export interface WalletAccount {

package/cjs/providers/WidgetProvider/WidgetProvider.js

@@ -50,7 +50,7 @@ const WidgetProvider = ({ children, config: { fromChain, fromToken, toChain, toT
                 toToken: searchParams.toToken?.toLowerCase() || toToken?.toLowerCase(),
                 fromAmount: typeof searchParams.fromAmount === 'string' &&
                     !isNaN(parseFloat(searchParams.fromAmount))
-                    ? (0, utils_1.formatAmount)(searchParams.fromAmount)
+                    ? (0, utils_1.formatInputAmount)(searchParams.fromAmount)
                     : fromAmount,
                 elementId,
                 integrator,

package/cjs/stores/StoreProvider.d.ts

@@ -1,3 +1,3 @@
 import type { PropsWithChildren } from 'react';
-import type { PersistStoreProviderProps } from './types';
-export declare const StoreProvider: React.FC<PropsWithChildren<PersistStoreProviderProps>>;
+import type { WidgetConfigProps } from '../types';
+export declare const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>>;

package/cjs/stores/StoreProvider.js

@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StoreProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const routes_1 = require("./routes");
-const StoreProvider = ({ children, namePrefix }) => {
-    return ((0, jsx_runtime_1.jsx)(routes_1.RouteExecutionStoreProvider, { namePrefix: namePrefix, children: children }));
+const settings_1 = require("./settings");
+const StoreProvider = ({ children, config, }) => {
+    return ((0, jsx_runtime_1.jsx)(settings_1.SplitSubvariantStoreProvider, { state: config.subvariant === 'split' ? 'swap' : undefined, children: (0, jsx_runtime_1.jsx)(routes_1.RouteExecutionStoreProvider, { namePrefix: config?.localStorageKeyPrefix, children: children }) }));
 };
 exports.StoreProvider = StoreProvider;

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

@@ -4,6 +4,6 @@ import type { PersistStoreProviderProps } from '../types';
 import type { RouteExecutionState } from './types';
 export type RouteExecutionStore = UseBoundStore<StoreApi<RouteExecutionState>>;
 export declare const RouteExecutionStoreContext: import("react").Context<RouteExecutionStore | null>;
-export declare function RouteExecutionStoreProvider({ children, ...props }: PersistStoreProviderProps): JSX.Element;
+export declare function RouteExecutionStoreProvider({ children, ...props }: PersistStoreProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useRouteExecutionStore<T>(selector: (state: RouteExecutionState) => T, equalityFn?: (left: T, right: T) => boolean): T;
 export declare function useRouteExecutionStoreContext(): RouteExecutionStore;

package/cjs/stores/routes/RouteExecutionStore.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRouteExecutionStoreContext = exports.useRouteExecutionStore = exports.RouteExecutionStoreProvider = exports.RouteExecutionStoreContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable no-underscore-dangle */
 const react_1 = require("react");
 const createRouteExecutionStore_1 = require("./createRouteExecutionStore");
 exports.RouteExecutionStoreContext = (0, react_1.createContext)(null);

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

@@ -3,3 +3,4 @@ export * from './useAppearance';
 export * from './useSendToWalletStore';
 export * from './useSettings';
 export * from './useSettingsStore';
+export * from './useSplitSubvariantStore';

package/cjs/stores/settings/index.js

@@ -19,3 +19,4 @@ __exportStar(require("./useAppearance"), exports);
 __exportStar(require("./useSendToWalletStore"), exports);
 __exportStar(require("./useSettings"), exports);
 __exportStar(require("./useSettingsStore"), exports);
+__exportStar(require("./useSplitSubvariantStore"), exports);

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

@@ -1,4 +1,6 @@
 import type { Order } from '@lifi/sdk';
+import type { PropsWithChildren } from 'react';
+import type { StoreApi, UseBoundStore } from 'zustand';
 import type { Appearance, WidgetConfig } from '../../types';
 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;
@@ -32,3 +34,12 @@ export interface SendToWalletStore extends SendToWalletState {
     toggleSendToWallet(): void;
     setSendToWallet(value: boolean): void;
 }
+export interface SplitSubvariantState {
+    state?: 'swap' | 'bridge';
+    setState(state: 'swap' | 'bridge'): void;
+}
+export type SplitSubvariantStore = UseBoundStore<StoreApi<SplitSubvariantState>>;
+export interface SplitSubvariantProps {
+    state?: 'swap' | 'bridge';
+}
+export type SplitSubvariantProviderProps = PropsWithChildren<SplitSubvariantProps>;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { SplitSubvariantProps, SplitSubvariantProviderProps, SplitSubvariantState, SplitSubvariantStore } from './types';
+export declare const SplitSubvariantStoreContext: import("react").Context<SplitSubvariantStore | null>;
+export declare function SplitSubvariantStoreProvider({ children, ...props }: SplitSubvariantProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useSplitSubvariantStore<T>(selector: (state: SplitSubvariantState) => T, equalityFn?: (left: T, right: T) => boolean): T;
+export declare function useSplitSubvariantStoreContext(): SplitSubvariantStore;
+export declare const createSplitSubvariantStore: ({ state }: SplitSubvariantProps) => import("zustand").UseBoundStore<import("zustand").StoreApi<SplitSubvariantState>>;

package/cjs/stores/settings/useSplitSubvariantStore.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSplitSubvariantStore = exports.useSplitSubvariantStoreContext = exports.useSplitSubvariantStore = exports.SplitSubvariantStoreProvider = exports.SplitSubvariantStoreContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const zustand_1 = require("zustand");
+exports.SplitSubvariantStoreContext = (0, react_1.createContext)(null);
+const shouldRecreateStore = (store, props) => {
+    const { state } = store.getState();
+    return (!state && props.state) || (state && !props.state);
+};
+function SplitSubvariantStoreProvider({ children, ...props }) {
+    const storeRef = (0, react_1.useRef)();
+    if (!storeRef.current || shouldRecreateStore(storeRef.current, props)) {
+        storeRef.current = (0, exports.createSplitSubvariantStore)(props);
+    }
+    return ((0, jsx_runtime_1.jsx)(exports.SplitSubvariantStoreContext.Provider, { value: storeRef.current, children: children }));
+}
+exports.SplitSubvariantStoreProvider = SplitSubvariantStoreProvider;
+function useSplitSubvariantStore(selector, equalityFn) {
+    const useStore = (0, react_1.useContext)(exports.SplitSubvariantStoreContext);
+    if (!useStore) {
+        throw new Error(`You forgot to wrap your component in <${SplitSubvariantStoreProvider.name}>.`);
+    }
+    return useStore(selector, equalityFn);
+}
+exports.useSplitSubvariantStore = useSplitSubvariantStore;
+function useSplitSubvariantStoreContext() {
+    const useStore = (0, react_1.useContext)(exports.SplitSubvariantStoreContext);
+    if (!useStore) {
+        throw new Error(`You forgot to wrap your component in <${SplitSubvariantStoreProvider.name}>.`);
+    }
+    return useStore;
+}
+exports.useSplitSubvariantStoreContext = useSplitSubvariantStoreContext;
+const createSplitSubvariantStore = ({ state }) => (0, zustand_1.create)((set) => ({
+    state,
+    setState(state) {
+        set(() => ({
+            state,
+        }));
+    },
+}));
+exports.createSplitSubvariantStore = createSplitSubvariantStore;

package/cjs/types/events.d.ts

@@ -3,13 +3,21 @@ export declare enum WidgetEvent {
     RouteExecutionStarted = "routeExecutionStarted",
     RouteExecutionUpdated = "routeExecutionUpdated",
     RouteExecutionCompleted = "routeExecutionCompleted",
-    RouteExecutionFailed = "routeExecutionFailed"
+    RouteExecutionFailed = "routeExecutionFailed",
+    RouteHighValueLoss = "routeHighValueLoss"
+}
+export interface RouteHighValueLossUpdate {
+    fromAmountUsd: string;
+    gasCostUSD: string | undefined;
+    toAmountUSD: string;
+    valueLoss: string;
 }
 export type WidgetEvents = {
     routeExecutionStarted: Route;
     routeExecutionUpdated: RouteExecutionUpdate;
     routeExecutionCompleted: Route;
     routeExecutionFailed: RouteExecutionUpdate;
+    routeHighValueLoss: RouteHighValueLossUpdate;
 };
 export interface RouteExecutionUpdate {
     route: Route;

package/cjs/types/events.js

@@ -7,4 +7,5 @@ var WidgetEvent;
     WidgetEvent["RouteExecutionUpdated"] = "routeExecutionUpdated";
     WidgetEvent["RouteExecutionCompleted"] = "routeExecutionCompleted";
     WidgetEvent["RouteExecutionFailed"] = "routeExecutionFailed";
+    WidgetEvent["RouteHighValueLoss"] = "routeHighValueLoss";
 })(WidgetEvent = exports.WidgetEvent || (exports.WidgetEvent = {}));

package/cjs/types/token.d.ts

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

package/cjs/types/widget.d.ts

@@ -1,10 +1,11 @@
 import type { Signer } from '@ethersproject/abstract-signer';
-import type { ChainKey, ConfigUpdate, Order, RouteOptions, Token } from '@lifi/sdk';
+import type { BaseToken, ChainKey, ConfigUpdate, Order, RouteOptions, StaticToken } from '@lifi/sdk';
 import type { Components, PaletteMode, PaletteOptions, Shape, Theme } from '@mui/material';
 import type { TypographyOptions } from '@mui/material/styles/createTypography';
 import type { CSSProperties, ReactNode, RefObject } from 'react';
 import type { LanguageKey, LanguageResources } from '../providers';
 export type WidgetVariant = 'default' | 'expandable' | 'drawer' | 'refuel' | 'nft';
+export type WidgetSubvariant = 'default' | 'split';
 export declare enum DisabledUI {
     FromAmount = "fromAmount",
     FromToken = "fromToken",
@@ -14,9 +15,13 @@ export declare enum DisabledUI {
 export type DisabledUIType = `${DisabledUI}`;
 export declare enum HiddenUI {
     Appearance = "appearance",
+    DrawerButton = "drawerButton",
+    History = "history",
     Language = "language",
     PoweredBy = "poweredBy",
-    ToAddress = "toAddress"
+    ToAddress = "toAddress",
+    ToToken = "toToken",
+    WalletMenu = "walletMenu"
 }
 export type HiddenUIType = `${HiddenUI}`;
 export declare enum RequiredUI {
@@ -34,7 +39,7 @@ export interface WidgetWalletManagement {
     connect(): Promise<Signer>;
     disconnect(): Promise<void>;
     switchChain?(chainId: number): Promise<Signer>;
-    addToken?(token: Token, chainId: number): Promise<void>;
+    addToken?(token: StaticToken, chainId: number): Promise<void>;
     addChain?(chainId: number): Promise<boolean>;
     signer?: Signer;
 }
@@ -72,10 +77,10 @@ export interface WidgetConfig {
     slippage?: number;
     insurance?: boolean;
     variant?: WidgetVariant;
+    subvariant?: WidgetSubvariant;
     appearance?: Appearance;
     theme?: ThemeConfig;
     containerStyle?: CSSProperties;
-    disableTelemetry?: boolean;
     disabledUI?: DisabledUIType[];
     hiddenUI?: HiddenUIType[];
     requiredUI?: RequiredUIType[];
@@ -97,9 +102,9 @@ export interface WidgetConfig {
         deny?: number[];
     };
     tokens?: {
-        featured?: Token[];
-        allow?: Token[];
-        deny?: (Partial<Token> & Pick<Token, 'address' | 'chainId'>)[];
+        featured?: StaticToken[];
+        allow?: BaseToken[];
+        deny?: BaseToken[];
     };
     languages?: {
         default?: LanguageKey;
@@ -107,7 +112,7 @@ export interface WidgetConfig {
         deny?: LanguageKey[];
     };
     languageResources?: LanguageResources;
-    disableI18n?: boolean;
+    disableLanguageDetector?: boolean;
 }
 export type WidgetDrawerProps = {
     elementRef?: RefObject<HTMLDivElement>;

package/cjs/types/widget.js

@@ -11,11 +11,13 @@ var DisabledUI;
 var HiddenUI;
 (function (HiddenUI) {
     HiddenUI["Appearance"] = "appearance";
-    // FromAmount = 'fromAmount',
+    HiddenUI["DrawerButton"] = "drawerButton";
+    HiddenUI["History"] = "history";
     HiddenUI["Language"] = "language";
     HiddenUI["PoweredBy"] = "poweredBy";
     HiddenUI["ToAddress"] = "toAddress";
-    // ToToken = 'toToken',
+    HiddenUI["ToToken"] = "toToken";
+    HiddenUI["WalletMenu"] = "walletMenu";
 })(HiddenUI = exports.HiddenUI || (exports.HiddenUI = {}));
 var RequiredUI;
 (function (RequiredUI) {

package/cjs/utils/format.d.ts

@@ -5,5 +5,5 @@
  */
 export declare const formatTokenAmount: (amount?: string, decimals?: number, decimalPlaces?: number) => string;
 export declare const formatSlippage: (slippage?: string, defaultValue?: string, returnInitial?: boolean) => string;
-export declare const formatAmount: (amount?: string, returnInitial?: boolean) => string;
+export declare const formatInputAmount: (amount: string, returnInitial?: boolean) => string;
 export declare const formatTokenPrice: (amount?: string, price?: string) => number;

package/cjs/utils/format.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatTokenPrice = exports.formatAmount = exports.formatSlippage = exports.formatTokenAmount = void 0;
+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;
@@ -24,7 +24,7 @@ const formatTokenAmount = (amount = '0', decimals = 0, decimalPlaces = 3) => {
     while (absAmount < 1 / 10 ** decimalPlaces) {
         decimalPlaces++;
     }
-    return (0, big_js_1.default)(parseFloat((0, big_js_1.default)(parsedAmount).toFixed(decimalPlaces + 1, 0))).toString();
+    return (0, big_js_1.default)(parsedAmount).toFixed(decimalPlaces + 1, 0);
 };
 exports.formatTokenAmount = formatTokenAmount;
 const formatSlippage = (slippage = '', defaultValue = '', returnInitial = false) => {
@@ -50,7 +50,7 @@ const formatSlippage = (slippage = '', defaultValue = '', returnInitial = false)
     return parsedSlippage.toString();
 };
 exports.formatSlippage = formatSlippage;
-const formatAmount = (amount = '', returnInitial = false) => {
+const formatInputAmount = (amount, returnInitial = false) => {
     if (!amount) {
         return amount;
     }
@@ -62,23 +62,18 @@ const formatAmount = (amount = '', returnInitial = false) => {
     if (isNaN(Number(formattedAmount)) && !isNaN(parsedAmount)) {
         return parsedAmount.toString();
     }
-    if (isNaN(parsedAmount)) {
-        return '';
-    }
-    if (parsedAmount < 0) {
-        return Math.abs(parsedAmount).toString();
-    }
     try {
-        if (returnInitial && (0, big_js_1.default)(formattedAmount)) {
+        const absFormattedAmount = (0, big_js_1.default)(formattedAmount).abs();
+        if (returnInitial) {
             return formattedAmount;
         }
+        return absFormattedAmount.toString();
     }
     catch {
         return '';
     }
-    return (0, big_js_1.default)(parsedAmount).toString();
 };
-exports.formatAmount = formatAmount;
+exports.formatInputAmount = formatInputAmount;
 const formatTokenPrice = (amount, price) => {
     if (!amount || !price) {
         return 0;

package/cjs/utils/wallet.d.ts

@@ -1 +1 @@
-export declare const shortenWalletAddress: (address?: string) => string | null;
+export declare const shortenAddress: (address?: string) => string | null;

package/cjs/utils/wallet.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.shortenWalletAddress = void 0;
-const shortenWalletAddress = (address) => address
+exports.shortenAddress = void 0;
+const shortenAddress = (address) => address
     ? `${address.substring(0, 5)}...${address.substring(address.length - 4)}`
     : null;
-exports.shortenWalletAddress = shortenWalletAddress;
+exports.shortenAddress = shortenAddress;

package/components/ChainSelect/ChainSelect.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { SwapFormTypeProps } from '../../providers';
-export declare const ChainSelect: ({ formType }: SwapFormTypeProps) => JSX.Element;
+export declare const ChainSelect: ({ formType }: SwapFormTypeProps) => import("react/jsx-runtime").JSX.Element;

package/components/ChainSelect/ChainSelect.style.js

@@ -9,7 +9,7 @@ export const ChainCard = styled(Card)({
 });
 export const ChainContainer = styled(Box)(({ theme }) => ({
     display: 'grid',
-    gridTemplateColumns: 'repeat(5, 1fr)',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(52px, 1fr))',
     gridAutoRows: '56px',
     justifyContent: 'space-between',
     gap: theme.spacing(1.5),

package/components/ChainSelect/useChainSelect.js

@@ -1,5 +1,5 @@
 import { useController, useFormContext } from 'react-hook-form';
-import { useChains } from '../../hooks';
+import { useChains, useSwapOnly } from '../../hooks';
 import { SwapFormKey, SwapFormKeyHelper } from '../../providers';
 import { useChainOrder } from '../../stores';
 export const useChainSelect = (formType) => {
@@ -8,6 +8,7 @@ export const useChainSelect = (formType) => {
     const { setValue } = useFormContext();
     const { chains, isLoading } = useChains();
     const [chainOrder, setChainOrder] = useChainOrder();
+    const swapOnly = useSwapOnly();
     const getChains = () => {
         if (!chains) {
             return [];
@@ -20,6 +21,11 @@ export const useChainSelect = (formType) => {
     const setCurrentChain = (chainId) => {
         onChange(chainId);
         onBlur();
+        if (swapOnly) {
+            setValue(SwapFormKeyHelper.getChainKey('to'), chainId, {
+                shouldTouch: true,
+            });
+        }
         setValue(SwapFormKeyHelper.getTokenKey(formType), '');
         setValue(SwapFormKeyHelper.getAmountKey(formType), '');
         setValue(SwapFormKey.TokenSearchFilter, '');

package/components/GasMessage/FundsSufficiencyMessage.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare const FundsSufficiencyMessage: () => JSX.Element;
+export declare const FundsSufficiencyMessage: () => import("react/jsx-runtime").JSX.Element;

package/components/GasMessage/GasMessage.js

@@ -1,15 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Collapse } from '@mui/material';
-import { useFundsSufficiency, useGasRefuel, useGasSufficiency, } from '../../hooks';
-import { useSettings } from '../../stores';
+import { useFundsSufficiency, useGasSufficiency } from '../../hooks';
 import { FundsSufficiencyMessage } from './FundsSufficiencyMessage';
 import { GasSufficiencyMessage } from './GasSufficiencyMessage';
 export const GasMessage = ({ route, ...props }) => {
     const { insufficientGas } = useGasSufficiency(route);
     const { insufficientFunds } = useFundsSufficiency(route);
-    const { enabledAutoRefuel } = useSettings(['enabledAutoRefuel']);
-    const { enabled, isLoading: isRefuelLoading } = useGasRefuel();
-    const enabledRefuel = enabled && enabledAutoRefuel;
-    const showGasSufficiencyMessage = insufficientGas?.length && !isRefuelLoading && !enabledRefuel;
-    return (_jsx(Collapse, { timeout: 225, in: Boolean(insufficientFunds || showGasSufficiencyMessage), unmountOnExit: true, mountOnEnter: true, children: _jsx(Box, { ...props, children: insufficientFunds ? (_jsx(FundsSufficiencyMessage, {})) : showGasSufficiencyMessage ? (_jsx(GasSufficiencyMessage, { insufficientGas: insufficientGas })) : null }) }));
+    return (_jsx(Collapse, { timeout: 225, in: Boolean(insufficientFunds || insufficientGas?.length), unmountOnExit: true, mountOnEnter: true, children: _jsx(Box, { ...props, children: insufficientFunds ? (_jsx(FundsSufficiencyMessage, {})) : insufficientGas?.length ? (_jsx(GasSufficiencyMessage, { insufficientGas: insufficientGas })) : null }) }));
 };

package/components/Header/Header.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLocation } from 'react-router-dom';
 import { useDefaultElementId } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
-import { createElementId, ElementId, stickyHeaderRoutes } from '../../utils';
+import { ElementId, createElementId, stickyHeaderRoutes } from '../../utils';
 import { Container } from './Header.style';
 import { NavigationHeader } from './NavigationHeader';
 import { WalletHeader } from './WalletHeader';
@@ -12,6 +12,6 @@ export const HeaderContainer = ({ children }) => {
     return (_jsx(Container, { id: createElementId(ElementId.Header, elementId), sticky: stickyHeaderRoutes.some((route) => pathname.includes(route)), children: children }));
 };
 export const Header = () => {
-    const { walletManagement } = useWidgetConfig();
-    return (_jsxs(HeaderContainer, { children: [!walletManagement ? _jsx(WalletHeader, {}) : null, _jsx(NavigationHeader, {})] }));
+    const { walletManagement, subvariant } = useWidgetConfig();
+    return (_jsxs(HeaderContainer, { children: [!walletManagement && subvariant !== 'split' ? _jsx(WalletHeader, {}) : null, _jsx(NavigationHeader, {})] }));
 };