@lifi/widget 2.0.0-beta.9 → 2.0.0

package/cjs/components/{SwapInput/SwapInputEndAdornment.js → AmountInput/AmountInputEndAdornment.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SwapInputEndAdornment = void 0;
+exports.AmountInputEndAdornment = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const big_js_1 = require("big.js");
@@ -9,22 +9,22 @@ const react_i18next_1 = require("react-i18next");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const utils_1 = require("../../utils");
-const SwapInputAdornment_style_1 = require("./SwapInputAdornment.style");
-const SwapInputEndAdornment = ({ formType }) => {
+const AmountInputAdornment_style_1 = require("./AmountInputAdornment.style");
+const AmountInputEndAdornment = ({ formType }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { setValue } = (0, react_hook_form_1.useFormContext)();
     const { getChainById } = (0, hooks_1.useChains)();
     const [chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
         name: [
-            providers_1.SwapFormKeyHelper.getChainKey(formType),
-            providers_1.SwapFormKeyHelper.getTokenKey(formType),
+            providers_1.FormKeyHelper.getChainKey(formType),
+            providers_1.FormKeyHelper.getTokenKey(formType),
         ],
     });
     const { data } = (0, hooks_1.useGasRecommendation)(chainId);
     const { token, isLoading } = (0, hooks_1.useTokenAddressBalance)(chainId, tokenAddress);
     const handleMax = () => {
         const chain = getChainById(chainId);
-        let maxAmount;
+        let maxAmount = token?.amount;
         if (chain?.nativeToken.address === tokenAddress &&
             data?.available &&
             data?.recommended) {
@@ -36,10 +36,10 @@ const SwapInputEndAdornment = ({ formType }) => {
                 maxAmount = (0, utils_1.formatTokenAmount)(tokenAmount.minus(recommendedAmount).toString());
             }
         }
-        setValue(providers_1.SwapFormKeyHelper.getAmountKey(formType), maxAmount || token?.amount || '', {
+        setValue(providers_1.FormKeyHelper.getAmountKey(formType), maxAmount || '', {
             shouldTouch: true,
         });
     };
-    return ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: isLoading && tokenAddress ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 46, height: 24, sx: { borderRadius: 0.5 } })) : formType === 'from' && token?.amount ? ((0, jsx_runtime_1.jsx)(SwapInputAdornment_style_1.Button, { onClick: handleMax, children: t('button.max') })) : null }));
+    return ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: isLoading && tokenAddress ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 46, height: 24, sx: { borderRadius: 0.5 } })) : formType === 'from' && token?.amount ? ((0, jsx_runtime_1.jsx)(AmountInputAdornment_style_1.Button, { onClick: handleMax, children: t('button.max') })) : null }));
 };
-exports.SwapInputEndAdornment = SwapInputEndAdornment;
+exports.AmountInputEndAdornment = AmountInputEndAdornment;

package/cjs/components/AmountInput/AmountInputStartAdornment.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { FormTypeProps } from '../../providers';
+export declare const AmountInputStartAdornment: React.FC<FormTypeProps>;

package/cjs/components/{SwapInput/SwapInputStartAdornment.js → AmountInput/AmountInputStartAdornment.js}

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SwapInputStartAdornment = void 0;
+exports.AmountInputStartAdornment = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_hook_form_1 = require("react-hook-form");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const TokenAvatar_1 = require("../TokenAvatar");
-const SwapInputStartAdornment = ({ formType, }) => {
+const AmountInputStartAdornment = ({ formType, }) => {
     const [chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
         name: [
-            providers_1.SwapFormKeyHelper.getChainKey(formType),
-            providers_1.SwapFormKeyHelper.getTokenKey(formType),
+            providers_1.FormKeyHelper.getChainKey(formType),
+            providers_1.FormKeyHelper.getTokenKey(formType),
         ],
     });
     const { chain } = (0, hooks_1.useChain)(chainId);
@@ -18,4 +18,4 @@ const SwapInputStartAdornment = ({ formType, }) => {
     const isSelected = !!(chain && token);
     return isSelected ? ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain, sx: { marginLeft: 2 } })) : ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatarDefault, { sx: { marginLeft: 2 } }));
 };
-exports.SwapInputStartAdornment = SwapInputStartAdornment;
+exports.AmountInputStartAdornment = AmountInputStartAdornment;

package/cjs/components/AmountInput/FormPriceHelperText.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { TokenAmount } from '@lifi/sdk';
+import type { FormTypeProps } from '../../providers';
+export declare const FormPriceHelperText: React.FC<FormTypeProps>;
+export declare const FormPriceHelperTextBase: React.FC<FormTypeProps & {
+    isLoading?: boolean;
+    tokenAddress?: string;
+    token?: TokenAmount;
+}>;

package/cjs/components/{SwapInput → AmountInput}/FormPriceHelperText.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormPriceHelperText = void 0;
+exports.FormPriceHelperTextBase = exports.FormPriceHelperText = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_hook_form_1 = require("react-hook-form");
@@ -8,16 +8,22 @@ const react_i18next_1 = require("react-i18next");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const utils_1 = require("../../utils");
-const FormPriceHelperText = ({ formType, }) => {
-    const { t } = (0, react_i18next_1.useTranslation)();
-    const [amount, chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
+const FormPriceHelperText = ({ formType }) => {
+    const [chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
         name: [
-            providers_1.SwapFormKeyHelper.getAmountKey(formType),
-            providers_1.SwapFormKeyHelper.getChainKey(formType),
-            providers_1.SwapFormKeyHelper.getTokenKey(formType),
+            providers_1.FormKeyHelper.getChainKey(formType),
+            providers_1.FormKeyHelper.getTokenKey(formType),
         ],
     });
     const { token, isLoading } = (0, hooks_1.useTokenAddressBalance)(chainId, tokenAddress);
+    return ((0, jsx_runtime_1.jsx)(exports.FormPriceHelperTextBase, { formType: formType, isLoading: isLoading, tokenAddress: tokenAddress, token: token }));
+};
+exports.FormPriceHelperText = FormPriceHelperText;
+const FormPriceHelperTextBase = ({ formType, isLoading, tokenAddress, token }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const amount = (0, react_hook_form_1.useWatch)({
+        name: providers_1.FormKeyHelper.getAmountKey(formType),
+    });
     const fromAmountTokenPrice = (0, utils_1.formatTokenPrice)(amount, token?.priceUSD);
     return ((0, jsx_runtime_1.jsxs)(material_1.FormHelperText, { component: "div", sx: { display: 'flex', justifyContent: 'space-between', margin: 0 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { color: fromAmountTokenPrice ? 'text.secondary' : 'grey.600', fontWeight: 400, fontSize: 12, marginLeft: 8, lineHeight: 1.3334, flex: 1, sx: {
                     wordBreak: 'break-word',
@@ -25,7 +31,7 @@ const FormPriceHelperText = ({ formType, }) => {
                 }, children: t(`format.currency`, {
                     value: fromAmountTokenPrice,
                 }) }), isLoading && tokenAddress ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 16, sx: { borderRadius: 0.25 } })) : token?.amount ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1.3334, pl: 0.25, children: `/ ${t(`format.number`, {
-                    value: token?.amount,
+                    value: (0, utils_1.formatTokenAmount)(token?.amount),
                 })}` })) : null] }));
 };
-exports.FormPriceHelperText = FormPriceHelperText;
+exports.FormPriceHelperTextBase = FormPriceHelperTextBase;

package/cjs/components/AmountInput/index.d.ts

@@ -0,0 +1 @@
+export * from './AmountInput';

package/cjs/{pages/SwapPage → components/AmountInput}/index.js

@@ -14,4 +14,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./SwapPage"), exports);
+__exportStar(require("./AmountInput"), exports);

package/cjs/components/Card/CardIconButton.d.ts

@@ -2,11 +2,11 @@
 export declare const CardIconButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
-    color?: import("@mui/types").OverridableStringUnion<"inherit" | "default" | "success" | "warning" | "error" | "primary" | "secondary" | "info", import("@mui/material").IconButtonPropsColorOverrides> | undefined;
+    color?: import("@mui/types").OverridableStringUnion<"inherit" | "default" | "primary" | "secondary" | "error" | "warning" | "info" | "success", import("@mui/material").IconButtonPropsColorOverrides> | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     edge?: false | "end" | "start" | undefined;
-    size?: import("@mui/types").OverridableStringUnion<"small" | "medium" | "large", import("@mui/material").IconButtonPropsSizeOverrides> | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"small" | "large" | "medium", import("@mui/material").IconButtonPropsSizeOverrides> | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
 } & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;

package/cjs/components/Card/CardLabel.d.ts

@@ -7,7 +7,7 @@ export declare const CardLabel: import("@emotion/styled").StyledComponent<import
 } & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & 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/system").SystemProps<import("@mui/material").Theme> & {
     align?: "center" | "left" | "right" | "inherit" | "justify" | undefined;

package/cjs/components/ChainSelect/ChainSelect.d.ts

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

package/cjs/components/ChainSelect/ChainSelect.js

@@ -14,7 +14,7 @@ const ChainSelect = ({ formType }) => {
     const navigate = (0, react_router_dom_1.useNavigate)();
     const { chainOrder, chains, getChains, isLoading, setChainOrder, setCurrentChain, } = (0, useChainSelect_1.useChainSelect)(formType);
     const [chainId] = (0, react_hook_form_1.useWatch)({
-        name: [providers_1.SwapFormKeyHelper.getChainKey(formType)],
+        name: [providers_1.FormKeyHelper.getChainKey(formType)],
     });
     const hasChainInOrderedList = chainOrder.includes(chainId);
     // If we don't have a chain in the ordered chain list we should add it.

package/cjs/components/ChainSelect/useChainSelect.d.ts

@@ -1,6 +1,6 @@
 import type { EVMChain } from '@lifi/sdk';
-import type { SwapFormType } from '../../providers';
-export declare const useChainSelect: (formType: SwapFormType) => {
+import type { FormType } from '../../providers';
+export declare const useChainSelect: (formType: FormType) => {
     chainOrder: number[];
     chains: import("@lifi/sdk").ExtendedChain[] | undefined;
     getChains: () => EVMChain[];

package/cjs/components/ChainSelect/useChainSelect.js

@@ -6,7 +6,7 @@ const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
 const useChainSelect = (formType) => {
-    const chainKey = providers_1.SwapFormKeyHelper.getChainKey(formType);
+    const chainKey = providers_1.FormKeyHelper.getChainKey(formType);
     const { field: { onChange, onBlur }, } = (0, react_hook_form_1.useController)({ name: chainKey });
     const { setValue } = (0, react_hook_form_1.useFormContext)();
     const { chains, isLoading } = (0, hooks_1.useChains)();
@@ -25,13 +25,13 @@ const useChainSelect = (formType) => {
         onChange(chainId);
         onBlur();
         if (swapOnly) {
-            setValue(providers_1.SwapFormKeyHelper.getChainKey('to'), chainId, {
+            setValue(providers_1.FormKeyHelper.getChainKey('to'), chainId, {
                 shouldTouch: true,
             });
         }
-        setValue(providers_1.SwapFormKeyHelper.getTokenKey(formType), '');
-        setValue(providers_1.SwapFormKeyHelper.getAmountKey(formType), '');
-        setValue(providers_1.SwapFormKey.TokenSearchFilter, '');
+        setValue(providers_1.FormKeyHelper.getTokenKey(formType), '');
+        setValue(providers_1.FormKeyHelper.getAmountKey(formType), '');
+        setValue(providers_1.FormKey.TokenSearchFilter, '');
         setChainOrder(chainId);
     };
     return {

package/cjs/components/ContractComponent/ContractComponent.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
 import type { BoxProps } from '@mui/material';
-export declare const ContractComponent: React.FC<BoxProps>;
+import type { PropsWithChildren } from 'react';
+export declare const ContractComponent: React.FC<PropsWithChildren<BoxProps>>;

package/cjs/components/ContractComponent/ContractComponent.js

@@ -2,13 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContractComponent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const providers_1 = require("../../providers");
 const Card_1 = require("../Card");
-const ContractComponent = (props) => {
-    const { contractComponent } = (0, providers_1.useWidgetConfig)();
-    if (!contractComponent) {
+const ContractComponent = ({ children, ...props }) => {
+    if (!children) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Card_1.Card, { flex: 1, ...props, children: contractComponent }));
+    return (0, jsx_runtime_1.jsx)(Card_1.Card, { ...props, children: children });
 };
 exports.ContractComponent = ContractComponent;

package/cjs/components/DefaultTransactionButton/DefaultTransactionButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { DefaultTransactionButtonProps } from './types';
+export declare const DefaultTransactionButton: React.FC<DefaultTransactionButtonProps>;

package/cjs/components/DefaultTransactionButton/DefaultTransactionButton.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultTransactionButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lab_1 = require("@mui/lab");
+const react_i18next_1 = require("react-i18next");
+const react_router_dom_1 = require("react-router-dom");
+const providers_1 = require("../../providers");
+const utils_1 = require("../../utils");
+const DefaultTransactionButton = ({ onClick, text, disabled, loading }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const { walletManagement } = (0, providers_1.useWidgetConfig)();
+    const { account, connect } = (0, providers_1.useWallet)();
+    const handleClick = async () => {
+        if (account.isActive) {
+            onClick?.();
+        }
+        else if (walletManagement) {
+            await connect();
+        }
+        else {
+            navigate(utils_1.navigationRoutes.selectWallet);
+        }
+    };
+    const getButtonText = () => {
+        if (account.isActive) {
+            if (text) {
+                return text;
+            }
+        }
+        return t(`button.connectWallet`);
+    };
+    return ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, { variant: "contained", color: "primary", onClick: handleClick, disabled: disabled, loading: loading, loadingPosition: "center", fullWidth: true, children: getButtonText() }));
+};
+exports.DefaultTransactionButton = DefaultTransactionButton;

package/cjs/components/DefaultTransactionButton/index.d.ts

@@ -0,0 +1,2 @@
+export { DefaultTransactionButton } from './DefaultTransactionButton';
+export * from './types';

package/cjs/components/{SwapButton → DefaultTransactionButton}/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SwapButton = void 0;
-var SwapButton_1 = require("./SwapButton");
-Object.defineProperty(exports, "SwapButton", { enumerable: true, get: function () { return SwapButton_1.SwapButton; } });
+exports.DefaultTransactionButton = void 0;
+var DefaultTransactionButton_1 = require("./DefaultTransactionButton");
+Object.defineProperty(exports, "DefaultTransactionButton", { enumerable: true, get: function () { return DefaultTransactionButton_1.DefaultTransactionButton; } });
 __exportStar(require("./types"), exports);

package/cjs/components/{SwapButton → DefaultTransactionButton}/types.d.ts

@@ -1,6 +1,5 @@
-export interface SwapButtonProps {
+export interface DefaultTransactionButtonProps {
     onClick?(): void;
-    hasRoute?: boolean;
     text?: string;
     disabled?: boolean;
     loading?: boolean;

package/cjs/components/GasMessage/FundsSufficiencyMessage.js

@@ -11,6 +11,6 @@ const FundsSufficiencyMessage = () => {
     return ((0, jsx_runtime_1.jsxs)(GasMessage_style_1.WarningMessageCard, { display: "flex", children: [(0, jsx_runtime_1.jsx)(GasMessage_style_1.WarningMessageCardTitle, { children: (0, jsx_runtime_1.jsx)(WarningRounded_1.default, { sx: {
                         marginTop: 2,
                         marginLeft: 2,
-                    } }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", px: 2, pb: 2, pt: 2, children: t(`swap.warning.message.insufficientFunds`) })] }));
+                    } }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", px: 2, pb: 2, pt: 2, children: t(`warning.message.insufficientFunds`) })] }));
 };
 exports.FundsSufficiencyMessage = FundsSufficiencyMessage;

package/cjs/components/GasMessage/GasRefuelMessage.js

@@ -19,7 +19,7 @@ const GasRefuelMessage = (props) => {
     const showGasRefuelMessage = chain && enabled && !isRefuelLoading;
     return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: showGasRefuelMessage, unmountOnExit: true, mountOnEnter: true, children: (0, jsx_runtime_1.jsxs)(GasMessage_style_1.InfoMessageCard, { ...props, children: [(0, jsx_runtime_1.jsxs)(GasMessage_style_1.InfoMessageCardTitle, { display: "flex", alignItems: "center", justifyContent: "space-between", p: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(EvStation_1.default, { sx: {
                                         marginRight: 1,
-                                    } }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", fontWeight: 700, children: t(`swap.info.title.autoRefuel`) })] }), (0, jsx_runtime_1.jsx)(GasMessage_style_1.InfoMessageSwitch, { checked: enabledAutoRefuel, onChange: onChange })] }), (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: enabledAutoRefuel, unmountOnExit: true, mountOnEnter: true, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", px: 2, pb: 2, children: t(`swap.info.message.autoRefuel`, {
+                                    } }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", fontWeight: 700, children: t(`info.title.autoRefuel`) })] }), (0, jsx_runtime_1.jsx)(GasMessage_style_1.InfoMessageSwitch, { checked: enabledAutoRefuel, onChange: onChange })] }), (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: enabledAutoRefuel, unmountOnExit: true, mountOnEnter: true, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", px: 2, pb: 2, children: t(`info.message.autoRefuel`, {
                             chainName: chain?.name,
                         }) }) })] }) }));
 };

package/cjs/components/GasMessage/GasSufficiencyMessage.js

@@ -10,9 +10,9 @@ const GasSufficiencyMessage = ({ insufficientGas, }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     return ((0, jsx_runtime_1.jsxs)(GasMessage_style_1.WarningMessageCard, { children: [(0, jsx_runtime_1.jsxs)(GasMessage_style_1.WarningMessageCardTitle, { display: "flex", alignItems: "center", px: 2, pt: 2, children: [(0, jsx_runtime_1.jsx)(EvStation_1.default, { sx: {
                             marginRight: 1,
-                        } }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", fontWeight: 700, children: t(`swap.warning.title.insufficientGas`) })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", px: 2, pt: 1, children: t(`swap.warning.message.insufficientGas`) }), insufficientGas?.map((item, index) => ((0, jsx_runtime_1.jsx)(material_1.Typography
+                        } }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", fontWeight: 700, children: t(`warning.title.insufficientGas`) })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", px: 2, pt: 1, children: t(`warning.message.insufficientGas`) }), insufficientGas?.map((item, index) => ((0, jsx_runtime_1.jsx)(material_1.Typography
             // eslint-disable-next-line react/no-array-index-key
-            , { variant: "body2", px: 2, pb: insufficientGas?.length - 1 === index ? 2 : 0, pt: 0.5, children: t(`swap.tokenOnChainAmount`, {
+            , { variant: "body2", px: 2, pb: insufficientGas?.length - 1 === index ? 2 : 0, pt: 0.5, children: t(`main.tokenOnChainAmount`, {
                     amount: item.insufficientAmount?.toString(),
                     tokenSymbol: item.token.symbol,
                     chainName: item.chain?.name,

package/cjs/components/Header/Header.style.d.ts

@@ -28,14 +28,14 @@ export declare const Container: import("@emotion/styled").StyledComponent<import
 export declare const WalletButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: import("@mui/types").OverridableStringUnion<"inherit" | "success" | "warning" | "error" | "primary" | "secondary" | "info", import("@mui/material").ButtonPropsColorOverrides> | undefined;
+    color?: import("@mui/types").OverridableStringUnion<"inherit" | "primary" | "secondary" | "error" | "warning" | "info" | "success", import("@mui/material").ButtonPropsColorOverrides> | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     endIcon?: import("react").ReactNode;
     fullWidth?: boolean | undefined;
     href?: string | undefined;
-    size?: import("@mui/types").OverridableStringUnion<"small" | "medium" | "large", import("@mui/material").ButtonPropsSizeOverrides> | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"small" | "large" | "medium", import("@mui/material").ButtonPropsSizeOverrides> | undefined;
     startIcon?: import("react").ReactNode;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
     variant?: import("@mui/types").OverridableStringUnion<"text" | "outlined" | "contained", import("@mui/material").ButtonPropsVariantOverrides> | undefined;

package/cjs/components/Header/NavigationHeader.js

@@ -15,13 +15,13 @@ const utils_1 = require("../../utils");
 const Header_style_1 = require("./Header.style");
 const NavigationTabs_1 = require("./NavigationTabs");
 const WalletHeader_1 = require("./WalletHeader");
-const useHeaderActionStore_1 = require("./useHeaderActionStore");
+const useHeaderStore_1 = require("./useHeaderStore");
 const NavigationHeader = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { variant, subvariant, hiddenUI } = (0, providers_1.useWidgetConfig)();
+    const { subvariant, hiddenUI } = (0, providers_1.useWidgetConfig)();
     const { navigate, navigateBack } = (0, hooks_1.useNavigateBack)();
     const { account } = (0, providers_1.useWallet)();
-    const { element } = (0, useHeaderActionStore_1.useHeaderActionStore)();
+    const { element, title } = (0, useHeaderStore_1.useHeaderStore)();
     const { pathname } = (0, react_router_dom_1.useLocation)();
     const cleanedPathname = pathname.endsWith('/')
         ? pathname.slice(0, -1)
@@ -39,10 +39,10 @@ const NavigationHeader = () => {
                 return t(`settings.enabledBridges`);
             case utils_1.navigationRoutes.exchanges:
                 return t(`settings.enabledExchanges`);
-            case utils_1.navigationRoutes.swapHistory:
-                return t(`header.swapHistory`);
+            case utils_1.navigationRoutes.transactionHistory:
+                return t(`header.transactionHistory`);
             case utils_1.navigationRoutes.fromToken: {
-                if (variant === 'nft') {
+                if (subvariant === 'nft') {
                     return t(`header.payWith`);
                 }
                 return t(`header.from`);
@@ -53,35 +53,35 @@ const NavigationHeader = () => {
             case utils_1.navigationRoutes.toChain:
             case utils_1.navigationRoutes.toTokenNative:
                 return t(`header.selectChain`);
-            case utils_1.navigationRoutes.swapRoutes:
-                return t(`header.routes`);
-            case utils_1.navigationRoutes.activeSwaps:
-                return t(`header.activeSwaps`);
-            case utils_1.navigationRoutes.swapExecution: {
-                if (variant === 'nft') {
+            case utils_1.navigationRoutes.routes:
+                return t(`header.youGet`);
+            case utils_1.navigationRoutes.activeTransactions:
+                return t(`header.activeTransactions`);
+            case utils_1.navigationRoutes.transactionExecution: {
+                if (subvariant === 'nft') {
                     return t(`header.purchase`);
                 }
-                return t(`header.swap`);
+                return t(`header.exchange`);
             }
-            case utils_1.navigationRoutes.swapDetails: {
-                if (variant === 'nft') {
+            case utils_1.navigationRoutes.transactionDetails: {
+                if (subvariant === 'nft') {
                     return t(`header.purchaseDetails`);
                 }
-                return t(`header.swapDetails`);
+                return t(`header.transactionDetails`);
             }
             default: {
-                switch (variant) {
+                switch (subvariant) {
                     case 'nft':
                         return t(`header.checkout`);
                     case 'refuel':
                         return t(`header.gas`);
                     default:
-                        return t(`header.swap`);
+                        return t(`header.exchange`);
                 }
             }
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Header_style_1.HeaderAppBar, { elevation: 0, children: [utils_1.backButtonRoutes.includes(path) ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "start", onClick: navigateBack, children: (0, jsx_runtime_1.jsx)(ArrowBack_1.default, {}) })) : null, splitSubvariant ? ((0, jsx_runtime_1.jsx)(material_1.Box, { flex: 1, children: !hiddenUI?.includes(types_1.HiddenUI.WalletMenu) ? ((0, jsx_runtime_1.jsx)(WalletHeader_1.WalletMenuButton, {})) : null })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true, children: handleHeaderTitle() })), (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: utils_1.navigationRoutes.home, element: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [account.isActive && !hiddenUI?.includes(types_1.HiddenUI.History) ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`header.swapHistory`), enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "start", onClick: () => navigate(utils_1.navigationRoutes.swapHistory), children: (0, jsx_runtime_1.jsx)(ReceiptLong_1.default, {}) }) })) : null, (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`header.settings`), enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", onClick: () => navigate(utils_1.navigationRoutes.settings), sx: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Header_style_1.HeaderAppBar, { elevation: 0, children: [utils_1.backButtonRoutes.includes(path) ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "start", onClick: navigateBack, children: (0, jsx_runtime_1.jsx)(ArrowBack_1.default, {}) })) : null, splitSubvariant ? ((0, jsx_runtime_1.jsx)(material_1.Box, { flex: 1, children: !hiddenUI?.includes(types_1.HiddenUI.WalletMenu) ? ((0, jsx_runtime_1.jsx)(WalletHeader_1.WalletMenuButton, {})) : null })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true, children: title || handleHeaderTitle() })), (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: utils_1.navigationRoutes.home, element: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [account.isActive && !hiddenUI?.includes(types_1.HiddenUI.History) ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`header.transactionHistory`), enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "start", onClick: () => navigate(utils_1.navigationRoutes.transactionHistory), children: (0, jsx_runtime_1.jsx)(ReceiptLong_1.default, {}) }) })) : null, (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`header.settings`), enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", onClick: () => navigate(utils_1.navigationRoutes.settings), sx: {
                                                     marginRight: -1.25,
                                                 }, children: (0, jsx_runtime_1.jsx)(Settings_1.default, {}) }) })] }) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "*", element: element || (0, jsx_runtime_1.jsx)(material_1.Box, { width: 28, height: 40 }) })] })] }), splitSubvariant ? (0, jsx_runtime_1.jsx)(NavigationTabs_1.NavigationTabs, {}) : null] }));
 };

package/cjs/components/Header/NavigationTabs.js

@@ -16,9 +16,9 @@ const NavigationTabs = () => {
     ]);
     const { setValue } = (0, react_hook_form_1.useFormContext)();
     const handleChange = (_, value) => {
-        setValue(providers_1.SwapFormKey.FromAmount, '');
-        setValue(providers_1.SwapFormKey.FromToken, '');
-        setValue(providers_1.SwapFormKey.ToToken, '');
+        setValue(providers_1.FormKey.FromAmount, '');
+        setValue(providers_1.FormKey.FromToken, '');
+        setValue(providers_1.FormKey.ToToken, '');
         setState(value === 0 ? 'swap' : 'bridge');
     };
     return ((0, jsx_runtime_1.jsx)(Header_style_1.HeaderAppBar, { elevation: 0, sx: { py: 1 }, children: (0, jsx_runtime_1.jsxs)(NavigationTabs_style_1.NavbarTabs, { value: state === 'swap' ? 0 : 1, onChange: handleChange, "aria-label": "tabs", indicatorColor: "primary", children: [(0, jsx_runtime_1.jsx)(NavigationTabs_style_1.NavbarTab, { label: t('header.swap'), disableRipple: true }), (0, jsx_runtime_1.jsx)(NavigationTabs_style_1.NavbarTab, { label: t('header.bridge'), disableRipple: true })] }) }));

package/cjs/components/Header/NavigationTabs.style.js

@@ -5,9 +5,9 @@ const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 exports.NavbarTabs = (0, styles_1.styled)(material_1.Tabs)(({ theme }) => ({
     backgroundColor: theme.palette.mode === 'dark'
-        ? theme.palette.common.white
+        ? theme.palette.background.paper
         : (0, styles_1.alpha)(theme.palette.common.black, 0.04),
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: Math.max(theme.shape.borderRadius, theme.shape.borderRadiusSecondary),
     padding: theme.spacing(0.5),
     flex: 1,
     display: 'flex',
@@ -25,7 +25,7 @@ exports.NavbarTabs = (0, styles_1.styled)(material_1.Tabs)(({ theme }) => ({
         transform: 'translateY(-50%)',
         height: 48,
         backgroundColor: theme.palette.mode === 'dark'
-            ? theme.palette.common.black
+            ? theme.palette.background.default
             : theme.palette.common.white,
         borderRadius: theme.shape.borderRadiusSecondary,
         boxShadow: `0px 2px 4px ${(0, styles_1.alpha)(theme.palette.common.black, 0.04)}`,

package/cjs/components/Header/index.d.ts

@@ -1,2 +1,2 @@
 export * from './Header';
-export * from './useHeaderActionStore';
+export * from './useHeaderStore';

package/cjs/components/Header/index.js

@@ -15,4 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Header"), exports);
-__exportStar(require("./useHeaderActionStore"), exports);
+__exportStar(require("./useHeaderStore"), exports);

package/cjs/components/Header/types.d.ts

@@ -1,8 +1,11 @@
 /// <reference types="react" />
-export interface HeaderActionState {
+export interface HeaderState {
     element?: React.ReactNode | null;
+    title?: string;
 }
-export interface HeaderActionStore extends HeaderActionState {
+export interface HeaderStore extends HeaderState {
     setAction(element?: React.ReactNode | null): () => void;
+    setTitle(title?: string): () => void;
     removeAction(): void;
+    removeTitle(): void;
 }

package/cjs/components/Header/useHeaderStore.d.ts

@@ -0,0 +1,2 @@
+import type { HeaderStore } from './types';
+export declare const useHeaderStore: import("zustand").UseBoundStore<import("zustand").StoreApi<HeaderStore>>;

package/cjs/components/Header/{useHeaderActionStore.js → useHeaderStore.js}

@@ -1,17 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useHeaderActionStore = void 0;
+exports.useHeaderStore = void 0;
 const zustand_1 = require("zustand");
-exports.useHeaderActionStore = (0, zustand_1.create)((set, get) => ({
+exports.useHeaderStore = (0, zustand_1.create)((set, get) => ({
     setAction: (element) => {
         set(() => ({
             element,
         }));
         return get().removeAction;
     },
+    setTitle: (title) => {
+        set(() => ({
+            title,
+        }));
+        return get().removeTitle;
+    },
     removeAction: () => {
         set(() => ({
             element: null,
         }));
     },
+    removeTitle: () => {
+        set(() => ({
+            title: undefined,
+        }));
+    },
 }));

package/cjs/components/Insurance/Insurance.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const stores_1 = require("../../stores");
 const InsuranceCard_1 = require("./InsuranceCard");
 const InsuranceCollapsed_1 = require("./InsuranceCollapsed");
-const Insurance = ({ status, insurableRouteId, feeAmountUsd, insuranceCoverageId, onChange, ...props }) => {
-    return status === stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsx)(InsuranceCollapsed_1.InsuranceCollapsed, { insurableRouteId: insurableRouteId, feeAmountUsd: feeAmountUsd, insuranceCoverageId: insuranceCoverageId, status: status, onChange: onChange, ...props })) : ((0, jsx_runtime_1.jsx)(InsuranceCard_1.InsuranceCard, { feeAmountUsd: feeAmountUsd, status: status, insuranceCoverageId: insuranceCoverageId, ...props }));
+const Insurance = ({ status, insurableRouteId, onChange, ...props }) => {
+    return status === stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsx)(InsuranceCollapsed_1.InsuranceCollapsed, { status: status, insurableRouteId: insurableRouteId, onChange: onChange, ...props })) : ((0, jsx_runtime_1.jsx)(InsuranceCard_1.InsuranceCard, { status: status, ...props }));
 };
 exports.Insurance = Insurance;