@lifi/widget 2.0.0-beta.8 → 2.0.0

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

@@ -4,24 +4,24 @@ import Big from 'big.js';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useChains, useGasRecommendation, useTokenAddressBalance, } from '../../hooks';
-import { SwapFormKeyHelper } from '../../providers';
+import { FormKeyHelper } from '../../providers';
 import { formatTokenAmount } from '../../utils';
-import { Button } from './SwapInputAdornment.style';
-export const SwapInputEndAdornment = ({ formType }) => {
+import { Button } from './AmountInputAdornment.style';
+export const AmountInputEndAdornment = ({ formType }) => {
     const { t } = useTranslation();
     const { setValue } = useFormContext();
     const { getChainById } = useChains();
     const [chainId, tokenAddress] = useWatch({
         name: [
-            SwapFormKeyHelper.getChainKey(formType),
-            SwapFormKeyHelper.getTokenKey(formType),
+            FormKeyHelper.getChainKey(formType),
+            FormKeyHelper.getTokenKey(formType),
         ],
     });
     const { data } = useGasRecommendation(chainId);
     const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
     const handleMax = () => {
         const chain = getChainById(chainId);
-        let maxAmount;
+        let maxAmount = token?.amount;
         if (chain?.nativeToken.address === tokenAddress &&
             data?.available &&
             data?.recommended) {
@@ -33,7 +33,7 @@ export const SwapInputEndAdornment = ({ formType }) => {
                 maxAmount = formatTokenAmount(tokenAmount.minus(recommendedAmount).toString());
             }
         }
-        setValue(SwapFormKeyHelper.getAmountKey(formType), maxAmount || token?.amount || '', {
+        setValue(FormKeyHelper.getAmountKey(formType), maxAmount || '', {
             shouldTouch: true,
         });
     };

package/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/components/{SwapInput/SwapInputStartAdornment.js → AmountInput/AmountInputStartAdornment.js}

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useWatch } from 'react-hook-form';
 import { useChain, useToken } from '../../hooks';
-import { SwapFormKeyHelper } from '../../providers';
+import { FormKeyHelper } from '../../providers';
 import { TokenAvatar, TokenAvatarDefault } from '../TokenAvatar';
-export const SwapInputStartAdornment = ({ formType, }) => {
+export const AmountInputStartAdornment = ({ formType, }) => {
     const [chainId, tokenAddress] = useWatch({
         name: [
-            SwapFormKeyHelper.getChainKey(formType),
-            SwapFormKeyHelper.getTokenKey(formType),
+            FormKeyHelper.getChainKey(formType),
+            FormKeyHelper.getTokenKey(formType),
         ],
     });
     const { chain } = useChain(chainId);

package/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/components/{SwapInput → AmountInput}/FormPriceHelperText.js

@@ -3,18 +3,23 @@ import { FormHelperText, Skeleton, Typography } from '@mui/material';
 import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useTokenAddressBalance } from '../../hooks';
-import { SwapFormKeyHelper } from '../../providers';
-import { formatTokenPrice } from '../../utils';
-export const FormPriceHelperText = ({ formType, }) => {
-    const { t } = useTranslation();
-    const [amount, chainId, tokenAddress] = useWatch({
+import { FormKeyHelper } from '../../providers';
+import { formatTokenAmount, formatTokenPrice } from '../../utils';
+export const FormPriceHelperText = ({ formType }) => {
+    const [chainId, tokenAddress] = useWatch({
         name: [
-            SwapFormKeyHelper.getAmountKey(formType),
-            SwapFormKeyHelper.getChainKey(formType),
-            SwapFormKeyHelper.getTokenKey(formType),
+            FormKeyHelper.getChainKey(formType),
+            FormKeyHelper.getTokenKey(formType),
         ],
     });
     const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
+    return (_jsx(FormPriceHelperTextBase, { formType: formType, isLoading: isLoading, tokenAddress: tokenAddress, token: token }));
+};
+export const FormPriceHelperTextBase = ({ formType, isLoading, tokenAddress, token }) => {
+    const { t } = useTranslation();
+    const amount = useWatch({
+        name: FormKeyHelper.getAmountKey(formType),
+    });
     const fromAmountTokenPrice = formatTokenPrice(amount, token?.priceUSD);
     return (_jsxs(FormHelperText, { component: "div", sx: { display: 'flex', justifyContent: 'space-between', margin: 0 }, children: [_jsx(Typography, { color: fromAmountTokenPrice ? 'text.secondary' : 'grey.600', fontWeight: 400, fontSize: 12, marginLeft: 8, lineHeight: 1.3334, flex: 1, sx: {
                     wordBreak: 'break-word',
@@ -22,6 +27,6 @@ export const FormPriceHelperText = ({ formType, }) => {
                 }, children: t(`format.currency`, {
                     value: fromAmountTokenPrice,
                 }) }), isLoading && tokenAddress ? (_jsx(Skeleton, { variant: "text", width: 48, height: 16, sx: { borderRadius: 0.25 } })) : token?.amount ? (_jsx(Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1.3334, pl: 0.25, children: `/ ${t(`format.number`, {
-                    value: token?.amount,
+                    value: formatTokenAmount(token?.amount),
                 })}` })) : null] }));
 };

package/components/AmountInput/index.d.ts

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

package/components/AmountInput/index.js

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

package/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/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/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/components/ChainSelect/ChainSelect.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar, Box, Skeleton, Tooltip, Typography } from '@mui/material';
 import { useWatch } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
-import { SwapFormKeyHelper } from '../../providers';
+import { FormKeyHelper } from '../../providers';
 import { maxChainToOrder } from '../../stores';
 import { navigationRoutes } from '../../utils';
 import { ChainCard, ChainContainer } from './ChainSelect.style';
@@ -11,7 +11,7 @@ export const ChainSelect = ({ formType }) => {
     const navigate = useNavigate();
     const { chainOrder, chains, getChains, isLoading, setChainOrder, setCurrentChain, } = useChainSelect(formType);
     const [chainId] = useWatch({
-        name: [SwapFormKeyHelper.getChainKey(formType)],
+        name: [FormKeyHelper.getChainKey(formType)],
     });
     const hasChainInOrderedList = chainOrder.includes(chainId);
     // If we don't have a chain in the ordered chain list we should add it.

package/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/components/ChainSelect/useChainSelect.js

@@ -1,9 +1,9 @@
 import { useController, useFormContext } from 'react-hook-form';
 import { useChains, useSwapOnly } from '../../hooks';
-import { SwapFormKey, SwapFormKeyHelper } from '../../providers';
+import { FormKey, FormKeyHelper } from '../../providers';
 import { useChainOrder } from '../../stores';
 export const useChainSelect = (formType) => {
-    const chainKey = SwapFormKeyHelper.getChainKey(formType);
+    const chainKey = FormKeyHelper.getChainKey(formType);
     const { field: { onChange, onBlur }, } = useController({ name: chainKey });
     const { setValue } = useFormContext();
     const { chains, isLoading } = useChains();
@@ -22,13 +22,13 @@ export const useChainSelect = (formType) => {
         onChange(chainId);
         onBlur();
         if (swapOnly) {
-            setValue(SwapFormKeyHelper.getChainKey('to'), chainId, {
+            setValue(FormKeyHelper.getChainKey('to'), chainId, {
                 shouldTouch: true,
             });
         }
-        setValue(SwapFormKeyHelper.getTokenKey(formType), '');
-        setValue(SwapFormKeyHelper.getAmountKey(formType), '');
-        setValue(SwapFormKey.TokenSearchFilter, '');
+        setValue(FormKeyHelper.getTokenKey(formType), '');
+        setValue(FormKeyHelper.getAmountKey(formType), '');
+        setValue(FormKey.TokenSearchFilter, '');
         setChainOrder(chainId);
     };
     return {

package/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/components/ContractComponent/ContractComponent.js

@@ -1,10 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useWidgetConfig } from '../../providers';
 import { Card } from '../Card';
-export const ContractComponent = (props) => {
-    const { contractComponent } = useWidgetConfig();
-    if (!contractComponent) {
+export const ContractComponent = ({ children, ...props }) => {
+    if (!children) {
         return null;
     }
-    return (_jsx(Card, { flex: 1, ...props, children: contractComponent }));
+    return _jsx(Card, { ...props, children: children });
 };

package/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/components/DefaultTransactionButton/DefaultTransactionButton.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LoadingButton } from '@mui/lab';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useWallet, useWidgetConfig } from '../../providers';
+import { navigationRoutes } from '../../utils';
+export const DefaultTransactionButton = ({ onClick, text, disabled, loading }) => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const { walletManagement } = useWidgetConfig();
+    const { account, connect } = useWallet();
+    const handleClick = async () => {
+        if (account.isActive) {
+            onClick?.();
+        }
+        else if (walletManagement) {
+            await connect();
+        }
+        else {
+            navigate(navigationRoutes.selectWallet);
+        }
+    };
+    const getButtonText = () => {
+        if (account.isActive) {
+            if (text) {
+                return text;
+            }
+        }
+        return t(`button.connectWallet`);
+    };
+    return (_jsx(LoadingButton, { variant: "contained", color: "primary", onClick: handleClick, disabled: disabled, loading: loading, loadingPosition: "center", fullWidth: true, children: getButtonText() }));
+};

package/components/DefaultTransactionButton/index.d.ts

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

package/components/DefaultTransactionButton/index.js

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

package/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/components/GasMessage/FundsSufficiencyMessage.js

@@ -8,5 +8,5 @@ export const FundsSufficiencyMessage = () => {
     return (_jsxs(WarningMessageCard, { display: "flex", children: [_jsx(WarningMessageCardTitle, { children: _jsx(WarningRoundedIcon, { sx: {
                         marginTop: 2,
                         marginLeft: 2,
-                    } }) }), _jsx(Typography, { variant: "body2", px: 2, pb: 2, pt: 2, children: t(`swap.warning.message.insufficientFunds`) })] }));
+                    } }) }), _jsx(Typography, { variant: "body2", px: 2, pb: 2, pt: 2, children: t(`warning.message.insufficientFunds`) })] }));
 };

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/GasMessage/GasRefuelMessage.js

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

package/components/GasMessage/GasSufficiencyMessage.js

@@ -7,9 +7,9 @@ export const GasSufficiencyMessage = ({ insufficientGas, }) => {
     const { t } = useTranslation();
     return (_jsxs(WarningMessageCard, { children: [_jsxs(WarningMessageCardTitle, { display: "flex", alignItems: "center", px: 2, pt: 2, children: [_jsx(EvStationIcon, { sx: {
                             marginRight: 1,
-                        } }), _jsx(Typography, { variant: "body2", fontWeight: 700, children: t(`swap.warning.title.insufficientGas`) })] }), _jsx(Typography, { variant: "body2", px: 2, pt: 1, children: t(`swap.warning.message.insufficientGas`) }), insufficientGas?.map((item, index) => (_jsx(Typography
+                        } }), _jsx(Typography, { variant: "body2", fontWeight: 700, children: t(`warning.title.insufficientGas`) })] }), _jsx(Typography, { variant: "body2", px: 2, pt: 1, children: t(`warning.message.insufficientGas`) }), insufficientGas?.map((item, index) => (_jsx(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/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/components/Header/NavigationHeader.js

@@ -12,13 +12,13 @@ import { backButtonRoutes, navigationRoutes, navigationRoutesValues, } from '../
 import { HeaderAppBar } from './Header.style';
 import { NavigationTabs } from './NavigationTabs';
 import { WalletMenuButton } from './WalletHeader';
-import { useHeaderActionStore } from './useHeaderActionStore';
+import { useHeaderStore } from './useHeaderStore';
 export const NavigationHeader = () => {
     const { t } = useTranslation();
-    const { variant, subvariant, hiddenUI } = useWidgetConfig();
+    const { subvariant, hiddenUI } = useWidgetConfig();
     const { navigate, navigateBack } = useNavigateBack();
     const { account } = useWallet();
-    const { element } = useHeaderActionStore();
+    const { element, title } = useHeaderStore();
     const { pathname } = useLocation();
     const cleanedPathname = pathname.endsWith('/')
         ? pathname.slice(0, -1)
@@ -36,10 +36,10 @@ export const NavigationHeader = () => {
                 return t(`settings.enabledBridges`);
             case navigationRoutes.exchanges:
                 return t(`settings.enabledExchanges`);
-            case navigationRoutes.swapHistory:
-                return t(`header.swapHistory`);
+            case navigationRoutes.transactionHistory:
+                return t(`header.transactionHistory`);
             case navigationRoutes.fromToken: {
-                if (variant === 'nft') {
+                if (subvariant === 'nft') {
                     return t(`header.payWith`);
                 }
                 return t(`header.from`);
@@ -50,35 +50,35 @@ export const NavigationHeader = () => {
             case navigationRoutes.toChain:
             case navigationRoutes.toTokenNative:
                 return t(`header.selectChain`);
-            case navigationRoutes.swapRoutes:
-                return t(`header.routes`);
-            case navigationRoutes.activeSwaps:
-                return t(`header.activeSwaps`);
-            case navigationRoutes.swapExecution: {
-                if (variant === 'nft') {
+            case navigationRoutes.routes:
+                return t(`header.youGet`);
+            case navigationRoutes.activeTransactions:
+                return t(`header.activeTransactions`);
+            case navigationRoutes.transactionExecution: {
+                if (subvariant === 'nft') {
                     return t(`header.purchase`);
                 }
-                return t(`header.swap`);
+                return t(`header.exchange`);
             }
-            case navigationRoutes.swapDetails: {
-                if (variant === 'nft') {
+            case 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 (_jsxs(_Fragment, { children: [_jsxs(HeaderAppBar, { elevation: 0, children: [backButtonRoutes.includes(path) ? (_jsx(IconButton, { size: "medium", edge: "start", onClick: navigateBack, children: _jsx(ArrowBackIcon, {}) })) : null, splitSubvariant ? (_jsx(Box, { flex: 1, children: !hiddenUI?.includes(HiddenUI.WalletMenu) ? (_jsx(WalletMenuButton, {})) : null })) : (_jsx(Typography, { fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true, children: handleHeaderTitle() })), _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.home, element: _jsxs(_Fragment, { children: [account.isActive && !hiddenUI?.includes(HiddenUI.History) ? (_jsx(Tooltip, { title: t(`header.swapHistory`), enterDelay: 400, arrow: true, children: _jsx(IconButton, { size: "medium", edge: "start", onClick: () => navigate(navigationRoutes.swapHistory), children: _jsx(ReceiptLongIcon, {}) }) })) : null, _jsx(Tooltip, { title: t(`header.settings`), enterDelay: 400, arrow: true, children: _jsx(IconButton, { size: "medium", onClick: () => navigate(navigationRoutes.settings), sx: {
+    return (_jsxs(_Fragment, { children: [_jsxs(HeaderAppBar, { elevation: 0, children: [backButtonRoutes.includes(path) ? (_jsx(IconButton, { size: "medium", edge: "start", onClick: navigateBack, children: _jsx(ArrowBackIcon, {}) })) : null, splitSubvariant ? (_jsx(Box, { flex: 1, children: !hiddenUI?.includes(HiddenUI.WalletMenu) ? (_jsx(WalletMenuButton, {})) : null })) : (_jsx(Typography, { fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true, children: title || handleHeaderTitle() })), _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.home, element: _jsxs(_Fragment, { children: [account.isActive && !hiddenUI?.includes(HiddenUI.History) ? (_jsx(Tooltip, { title: t(`header.transactionHistory`), enterDelay: 400, arrow: true, children: _jsx(IconButton, { size: "medium", edge: "start", onClick: () => navigate(navigationRoutes.transactionHistory), children: _jsx(ReceiptLongIcon, {}) }) })) : null, _jsx(Tooltip, { title: t(`header.settings`), enterDelay: 400, arrow: true, children: _jsx(IconButton, { size: "medium", onClick: () => navigate(navigationRoutes.settings), sx: {
                                                     marginRight: -1.25,
                                                 }, children: _jsx(SettingsIcon, {}) }) })] }) }), _jsx(Route, { path: "*", element: element || _jsx(Box, { width: 28, height: 40 }) })] })] }), splitSubvariant ? _jsx(NavigationTabs, {}) : null] }));
 };

package/components/Header/NavigationTabs.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { SwapFormKey } from '../../providers';
+import { FormKey } from '../../providers';
 import { useSplitSubvariantStore } from '../../stores';
 import { HeaderAppBar } from './Header.style';
 import { NavbarTab, NavbarTabs } from './NavigationTabs.style';
@@ -13,9 +13,9 @@ export const NavigationTabs = () => {
     ]);
     const { setValue } = useFormContext();
     const handleChange = (_, value) => {
-        setValue(SwapFormKey.FromAmount, '');
-        setValue(SwapFormKey.FromToken, '');
-        setValue(SwapFormKey.ToToken, '');
+        setValue(FormKey.FromAmount, '');
+        setValue(FormKey.FromToken, '');
+        setValue(FormKey.ToToken, '');
         setState(value === 0 ? 'swap' : 'bridge');
     };
     return (_jsx(HeaderAppBar, { elevation: 0, sx: { py: 1 }, children: _jsxs(NavbarTabs, { value: state === 'swap' ? 0 : 1, onChange: handleChange, "aria-label": "tabs", indicatorColor: "primary", children: [_jsx(NavbarTab, { label: t('header.swap'), disableRipple: true }), _jsx(NavbarTab, { label: t('header.bridge'), disableRipple: true })] }) }));

package/components/Header/NavigationTabs.style.js

@@ -2,9 +2,9 @@ import { Tab, Tabs, tabClasses, tabsClasses } from '@mui/material';
 import { alpha, styled } from '@mui/material/styles';
 export const NavbarTabs = styled(Tabs)(({ theme }) => ({
     backgroundColor: theme.palette.mode === 'dark'
-        ? theme.palette.common.white
+        ? theme.palette.background.paper
         : 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',
@@ -22,7 +22,7 @@ export const NavbarTabs = styled(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 ${alpha(theme.palette.common.black, 0.04)}`,

package/components/Header/index.d.ts

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

package/components/Header/index.js

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

package/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/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/components/Header/useHeaderStore.js

@@ -0,0 +1,25 @@
+import { create } from 'zustand';
+export const useHeaderStore = 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/components/Insurance/Insurance.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { RouteExecutionStatus } from '../../stores';
 import { InsuranceCard } from './InsuranceCard';
 import { InsuranceCollapsed } from './InsuranceCollapsed';
-export const Insurance = ({ status, insurableRouteId, feeAmountUsd, insuranceCoverageId, onChange, ...props }) => {
-    return status === RouteExecutionStatus.Idle ? (_jsx(InsuranceCollapsed, { insurableRouteId: insurableRouteId, feeAmountUsd: feeAmountUsd, insuranceCoverageId: insuranceCoverageId, status: status, onChange: onChange, ...props })) : (_jsx(InsuranceCard, { feeAmountUsd: feeAmountUsd, status: status, insuranceCoverageId: insuranceCoverageId, ...props }));
+export const Insurance = ({ status, insurableRouteId, onChange, ...props }) => {
+    return status === RouteExecutionStatus.Idle ? (_jsx(InsuranceCollapsed, { status: status, insurableRouteId: insurableRouteId, onChange: onChange, ...props })) : (_jsx(InsuranceCard, { status: status, ...props }));
 };

package/components/Insurance/InsuranceCard.js

@@ -4,12 +4,12 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
 import { Box, Collapse, Link, Typography } from '@mui/material';
 import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { InsuraceLogo } from '../../icons';
 import { RouteExecutionStatus } from '../../stores';
 import { Card, CardIconButton, CardLabel, CardLabelTypography } from '../Card';
 import { Switch } from '../Switch';
-export const InsuranceCard = ({ status, feeAmountUsd, insuranceCoverageId, onChange, ...props }) => {
+export const InsuranceCard = ({ status, feeAmountUsd, insuredAmount, insuredTokenSymbol, insuranceCoverageId, onChange, ...props }) => {
     const { t } = useTranslation();
     const [enabled, setEnabled] = useState(false);
     const [cardExpanded, setCardExpanded] = useState(status === RouteExecutionStatus.Idle);
@@ -22,15 +22,18 @@ export const InsuranceCard = ({ status, feeAmountUsd, insuranceCoverageId, onCha
         onChange?.(checked);
     };
     return (_jsxs(Card, { selectionColor: "secondary", indented: true, ...props, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [_jsxs(CardLabel, { type: 'insurance', children: [_jsx(VerifiedUserIcon, { fontSize: "inherit" }), _jsx(CardLabelTypography, { type: "icon", children: status === RouteExecutionStatus.Idle
-                                    ? t('swap.tags.insurance')
-                                    : t('swap.tags.insured') })] }), status === RouteExecutionStatus.Idle ? (_jsx(Switch, { onChange: handleSwitch, value: enabled })) : (_jsx(Box, { my: -0.5, children: _jsx(CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) }) }))] }), _jsx(Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: _jsxs(Box, { mt: 2, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [_jsx(Typography, { fontSize: 24, fontWeight: 700, lineHeight: 1, children: t('format.currency', {
+                                    ? t('main.tags.insurance')
+                                    : t('main.tags.insured') })] }), status === RouteExecutionStatus.Idle ? (_jsx(Switch, { onChange: handleSwitch, value: enabled })) : (_jsx(Box, { my: -0.5, children: _jsx(CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) }) }))] }), _jsx(Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: _jsxs(Box, { mt: 2, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [_jsx(Typography, { fontSize: 24, fontWeight: 700, lineHeight: 1, children: t('format.currency', {
                                         value: feeAmountUsd,
-                                    }) }), _jsx(InsuraceLogo, {})] }), _jsxs(Box, { children: [_jsx(Typography, { fontSize: 14, children: status === RouteExecutionStatus.Idle
-                                        ? t('swap.insurance.insure')
-                                        : t('swap.insurance.insured') }), _jsx(Collapse, { timeout: 225, in: enabled || status !== RouteExecutionStatus.Idle, mountOnEnter: true, unmountOnExit: true, children: _jsxs(Box, { sx: {
+                                    }) }), _jsx(InsuraceLogo, {})] }), _jsxs(Box, { children: [_jsx(Typography, { fontSize: 14, children: _jsx(Trans, { i18nKey: status === RouteExecutionStatus.Idle
+                                            ? 'insurance.insure'
+                                            : 'insurance.insured', values: {
+                                            amount: insuredAmount,
+                                            tokenSymbol: insuredTokenSymbol,
+                                        }, components: [_jsx("strong", {})] }) }), _jsx(Collapse, { timeout: 225, in: enabled || status !== RouteExecutionStatus.Idle, mountOnEnter: true, unmountOnExit: true, children: _jsxs(Box, { sx: {
                                             listStyleType: 'disc',
                                             pl: 2,
-                                        }, children: [_jsx(Typography, { fontSize: 14, display: "list-item", children: t('swap.insurance.bridgeExploits') }), _jsx(Typography, { fontSize: 14, display: "list-item", children: t('swap.insurance.slippageError') })] }) }), _jsx(Link, { href: status === RouteExecutionStatus.Idle
+                                        }, children: [_jsx(Typography, { fontSize: 14, display: "list-item", children: t('insurance.bridgeExploits') }), _jsx(Typography, { fontSize: 14, display: "list-item", children: t('insurance.slippageError') })] }) }), _jsx(Link, { href: status === RouteExecutionStatus.Idle
                                         ? 'https://docs.insurace.io/landing-page/documentation/cover-products/bridge-cover/li.fi'
                                         : `https://app.insurace.io/bridge-cover?search=${insuranceCoverageId}`, target: "_blank", underline: "none", color: "text.primary", children: _jsx(Typography, { pt: 0.5, color: "primary", fontSize: 14, fontWeight: 600, children: status === RouteExecutionStatus.Idle
                                             ? t('button.learnMore')