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

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

@@ -1,13 +1,20 @@
 /// <reference types="react" />
-export declare const HeaderAppBar: import("@emotion/styled").StyledComponent<Omit<import("@mui/material").PaperProps, "classes" | "color" | "position"> & {
+export declare const HeaderAppBar: import("@emotion/styled").StyledComponent<{
     classes?: Partial<import("@mui/material").AppBarClasses> | undefined;
     color?: import("@mui/types").OverridableStringUnion<"transparent" | import("@mui/material").PropTypes.Color, import("@mui/material").AppBarPropsColorOverrides> | undefined;
     enableColorOnDark?: boolean | undefined;
     position?: "fixed" | "absolute" | "relative" | "static" | "sticky" | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+} & Omit<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").PaperClasses> | undefined;
+    elevation?: number | undefined;
+    square?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"outlined" | "elevation", import("@mui/material").PaperPropsVariantOverrides> | undefined;
+}, "classes" | "color" | "position"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
     ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "ref" | "key" | "position" | "variant" | "square" | "elevation" | "enableColorOnDark"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "children" | "sx" | "position" | "variant" | "square" | "elevation" | "enableColorOnDark"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const Container: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
     children?: import("react").ReactNode;
     component?: import("react").ElementType<any> | undefined;

package/components/Header/Header.style.js

@@ -39,4 +39,7 @@ export const WalletButton = styled(Button)(({ theme }) => ({
     [`.${buttonClasses.endIcon} > *:nth-of-type(1)`]: {
         fontSize: '24px',
     },
+    [`.${buttonClasses.startIcon} > *:nth-of-type(1)`]: {
+        fontSize: '24px',
+    },
 }));

package/components/Header/NavigationHeader.js

@@ -7,12 +7,15 @@ import { useTranslation } from 'react-i18next';
 import { Route, Routes, useLocation } from 'react-router-dom';
 import { useNavigateBack } from '../../hooks';
 import { useWallet, useWidgetConfig } from '../../providers';
+import { HiddenUI } from '../../types';
 import { backButtonRoutes, navigationRoutes, navigationRoutesValues, } from '../../utils';
 import { HeaderAppBar } from './Header.style';
+import { NavigationTabs } from './NavigationTabs';
+import { WalletMenuButton } from './WalletHeader';
 import { useHeaderActionStore } from './useHeaderActionStore';
 export const NavigationHeader = () => {
     const { t } = useTranslation();
-    const { variant } = useWidgetConfig();
+    const { variant, subvariant, hiddenUI } = useWidgetConfig();
     const { navigate, navigateBack } = useNavigateBack();
     const { account } = useWallet();
     const { element } = useHeaderActionStore();
@@ -22,6 +25,7 @@ export const NavigationHeader = () => {
         : pathname;
     const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1);
     const hasPath = navigationRoutesValues.includes(path);
+    const splitSubvariant = subvariant === 'split' && !hasPath;
     const handleHeaderTitle = () => {
         switch (path) {
             case navigationRoutes.selectWallet:
@@ -34,8 +38,12 @@ export const NavigationHeader = () => {
                 return t(`settings.enabledExchanges`);
             case navigationRoutes.swapHistory:
                 return t(`header.swapHistory`);
-            case navigationRoutes.fromToken:
+            case navigationRoutes.fromToken: {
+                if (variant === 'nft') {
+                    return t(`header.payWith`);
+                }
                 return t(`header.from`);
+            }
             case navigationRoutes.toToken:
                 return t(`header.to`);
             case navigationRoutes.fromChain:
@@ -46,10 +54,18 @@ export const NavigationHeader = () => {
                 return t(`header.routes`);
             case navigationRoutes.activeSwaps:
                 return t(`header.activeSwaps`);
-            case navigationRoutes.swapExecution:
+            case navigationRoutes.swapExecution: {
+                if (variant === 'nft') {
+                    return t(`header.purchase`);
+                }
                 return t(`header.swap`);
-            case navigationRoutes.swapDetails:
+            }
+            case navigationRoutes.swapDetails: {
+                if (variant === 'nft') {
+                    return t(`header.purchaseDetails`);
+                }
                 return t(`header.swapDetails`);
+            }
             default: {
                 switch (variant) {
                     case 'nft':
@@ -62,7 +78,7 @@ export const NavigationHeader = () => {
             }
         }
     };
-    return (_jsxs(HeaderAppBar, { elevation: 0, children: [backButtonRoutes.includes(path) ? (_jsx(IconButton, { size: "medium", edge: "start", onClick: navigateBack, children: _jsx(ArrowBackIcon, {}) })) : 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 ? (_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: {
-                                            marginRight: -1.25,
-                                        }, children: _jsx(SettingsIcon, {}) }) })] }) }), _jsx(Route, { path: "*", element: element || _jsx(Box, { width: 28, height: 40 }) })] })] }));
+    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: {
+                                                    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.d.ts

@@ -0,0 +1 @@
+export declare const NavigationTabs: () => import("react/jsx-runtime").JSX.Element;

package/components/Header/NavigationTabs.js

@@ -0,0 +1,22 @@
+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 { useSplitSubvariantStore } from '../../stores';
+import { HeaderAppBar } from './Header.style';
+import { NavbarTab, NavbarTabs } from './NavigationTabs.style';
+export const NavigationTabs = () => {
+    const { t } = useTranslation();
+    const [state, setState] = useSplitSubvariantStore((state) => [
+        state.state,
+        state.setState,
+    ]);
+    const { setValue } = useFormContext();
+    const handleChange = (_, value) => {
+        setValue(SwapFormKey.FromAmount, '');
+        setValue(SwapFormKey.FromToken, '');
+        setValue(SwapFormKey.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.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import type { StyledComponent } from '@emotion/styled';
+import type { TabsProps } from '@mui/material';
+export declare const NavbarTabs: StyledComponent<TabsProps>;
+export declare const NavbarTab: StyledComponent<{
+    children?: null | undefined;
+    classes?: Partial<import("@mui/material").TabClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    icon?: string | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    iconPosition?: "bottom" | "top" | "end" | "start" | undefined;
+    label?: import("react").ReactNode;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    value?: any;
+    wrapped?: boolean | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "label" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "value" | "icon" | "iconPosition" | "wrapped"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/Header/NavigationTabs.style.js

@@ -0,0 +1,58 @@
+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
+        : alpha(theme.palette.common.black, 0.04),
+    borderRadius: theme.shape.borderRadius,
+    padding: theme.spacing(0.5),
+    flex: 1,
+    display: 'flex',
+    alignItems: 'center',
+    height: 56,
+    [`.${tabsClasses.flexContainer}`]: {
+        alignItems: 'center',
+    },
+    [`.${tabsClasses.scroller}`]: {
+        overflow: 'initial !important',
+    },
+    [`.${tabsClasses.indicator}`]: {
+        position: 'absolute',
+        top: '50%',
+        transform: 'translateY(-50%)',
+        height: 48,
+        backgroundColor: theme.palette.mode === 'dark'
+            ? theme.palette.common.black
+            : theme.palette.common.white,
+        borderRadius: theme.shape.borderRadiusSecondary,
+        boxShadow: `0px 2px 4px ${alpha(theme.palette.common.black, 0.04)}`,
+    },
+}));
+export const NavbarTab = styled(Tab, {
+    shouldForwardProp: (prop) => prop !== 'isDarkMode',
+})(({ theme }) => ({
+    zIndex: 1,
+    display: 'flex',
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+    textTransform: 'none',
+    height: 48,
+    minHeight: 48,
+    fontSize: '1rem',
+    fontWeight: 700,
+    color: theme.palette.mode === 'dark'
+        ? theme.palette.common.white
+        : theme.palette.common.black,
+    textDecoration: 'none',
+    [`&.${tabClasses.selected}`]: {
+        color: theme.palette.mode === 'dark'
+            ? theme.palette.common.white
+            : theme.palette.common.black,
+        backgroundColor: 'transparent',
+    },
+    [`.${tabClasses.iconWrapper}`]: {
+        margin: theme.spacing(0, 1, 0, 0),
+    },
+}));

package/components/Header/WalletHeader.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="react" />
 export declare const WalletHeader: React.FC;
+export declare const WalletMenuButton: React.FC;

package/components/Header/WalletHeader.js

@@ -10,34 +10,39 @@ import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useChain } from '../../hooks';
 import { useWallet, useWidgetConfig } from '../../providers';
-import { navigationRoutes, shortenWalletAddress } from '../../utils';
+import { navigationRoutes, shortenAddress } from '../../utils';
 import { HeaderAppBar, WalletButton } from './Header.style';
 import { WalletMenu } from './WalletMenu';
 export const WalletHeader = () => {
+    return (_jsx(HeaderAppBar, { elevation: 0, sx: { justifyContent: 'flex-end' }, children: _jsx(WalletMenuButton, {}) }));
+};
+export const WalletMenuButton = () => {
     const { account } = useWallet();
-    return (_jsx(HeaderAppBar, { elevation: 0, sx: { justifyContent: 'flex-end' }, children: account.isActive ? _jsx(ConnectedButton, {}) : _jsx(ConnectButton, {}) }));
+    return account.isActive ? _jsx(ConnectedButton, {}) : _jsx(ConnectButton, {});
 };
 const ConnectButton = () => {
     const { t } = useTranslation();
     const { pathname } = useLocation();
-    const config = useWidgetConfig();
+    const { walletManagement, subvariant } = useWidgetConfig();
     const { connect: connectWallet } = useWallet();
     const navigate = useNavigate();
     const connect = async () => {
-        if (config.walletManagement) {
+        if (walletManagement) {
             await connectWallet();
             return;
         }
         navigate(navigationRoutes.selectWallet);
     };
-    return (_jsx(WalletButton, { endIcon: _jsx(WalletIcon, {}), onClick: !pathname.includes(navigationRoutes.selectWallet) ? connect : undefined, sx: {
-            marginRight: -1.25,
+    return (_jsx(WalletButton, { endIcon: subvariant !== 'split' ? _jsx(WalletIcon, {}) : undefined, startIcon: subvariant === 'split' ? _jsx(WalletIcon, {}) : undefined, onClick: !pathname.includes(navigationRoutes.selectWallet) ? connect : undefined, sx: {
+            marginRight: subvariant === 'split' ? 0 : -1.25,
+            marginLeft: subvariant === 'split' ? -1.25 : 0,
         }, children: t(`button.connectWallet`) }));
 };
 const ConnectedButton = () => {
     const { t } = useTranslation();
+    const { subvariant } = useWidgetConfig();
     const { account, disconnect } = useWallet();
-    const walletAddress = shortenWalletAddress(account.address);
+    const walletAddress = shortenAddress(account.address);
     const { chain } = useChain(account.chainId);
     const [anchorEl, setAnchorEl] = useState(null);
     const handleClick = (event) => {
@@ -55,7 +60,8 @@ const ConnectedButton = () => {
         handleClose();
     };
     return (_jsxs(_Fragment, { children: [_jsx(WalletButton, { endIcon: _jsx(ExpandMoreIcon, {}), startIcon: _jsx(Avatar, { src: chain?.logoURI, alt: chain?.key, sx: { width: 24, height: 24 }, children: chain?.name[0] }), sx: {
-                    marginRight: -1.25,
+                    marginRight: subvariant === 'split' ? 0 : -1.25,
+                    marginLeft: subvariant === 'split' ? -1 : 0,
                 }, onClick: handleClick, children: walletAddress }), _jsxs(WalletMenu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, children: [_jsxs(MenuItem, { onClick: handleCopyAddress, children: [_jsx(ContentCopyIcon, {}), t(`button.copyAddress`)] }), _jsxs(MenuItem, { component: "a", onClick: handleClose, href: `${chain?.metamask.blockExplorerUrls[0]}address/${account.address}`, target: "_blank", children: [_jsx(OpenInNewIcon, {}), t(`button.viewOnExplorer`)] }), _jsx(Button, { onClick: handleDisconnect, fullWidth: true, startIcon: _jsx(PowerSettingsNewIcon, {}), sx: {
                             marginTop: 1,
                         }, children: t(`button.disconnect`) })] })] }));

package/components/Header/useHeaderActionStore.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-underscore-dangle */
 import { create } from 'zustand';
 export const useHeaderActionStore = create((set, get) => ({
     setAction: (element) => {

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

@@ -1,22 +1,44 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
-import { Box, Link, Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
+import { Box, Collapse, Link, Typography } from '@mui/material';
+import { useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 import { InsuraceLogo } from '../../icons';
 import { RouteExecutionStatus } from '../../stores';
-import { Card, CardLabel, CardLabelTypography } from '../Card';
+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();
-    return (_jsxs(Card, { selectionColor: "secondary", indented: true, ...props, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, 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`) })] }), _jsx(InsuraceLogo, {})] }), _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,
-                        }) }), status === RouteExecutionStatus.Idle ? (_jsx(Switch, { onChange: onChange })) : null] }), _jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(Typography, { fontSize: 12, children: status === RouteExecutionStatus.Idle
-                            ? 'Get 100% coverage for lost tokens.'
-                            : '100% coverage for lost tokens.' }), _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, { px: 0.5, color: "primary", fontSize: 12, fontWeight: 600, children: status === RouteExecutionStatus.Idle
-                                ? 'Learn more'
-                                : 'View coverage' }) })] })] }));
+    const [enabled, setEnabled] = useState(false);
+    const [cardExpanded, setCardExpanded] = useState(status === RouteExecutionStatus.Idle);
+    const handleExpand = (e) => {
+        e.stopPropagation();
+        setCardExpanded((expanded) => !expanded);
+    };
+    const handleSwitch = (_, checked) => {
+        setEnabled(checked);
+        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', {
+                                        value: feeAmountUsd,
+                                    }) }), _jsx(InsuraceLogo, {})] }), _jsxs(Box, { children: [_jsx(Typography, { fontSize: 14, children: _jsx(Trans, { children: status === RouteExecutionStatus.Idle
+                                            ? t('swap.insurance.insure', {
+                                                amount: insuredAmount,
+                                                tokenSymbol: insuredTokenSymbol,
+                                            })
+                                            : t('swap.insurance.insured', {
+                                                amount: insuredAmount,
+                                                tokenSymbol: insuredTokenSymbol,
+                                            }) }) }), _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
+                                        ? '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')
+                                            : t('button.viewCoverage') }) })] })] }) })] }));
 };

package/components/Insurance/InsuranceCollapsed.js

@@ -1,22 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Collapse } from '@mui/material';
-import { useState } from 'react';
 import { useSwapRoutes } from '../../hooks';
 import { RouteExecutionStatus, useRouteExecutionStore, useSetExecutableRoute, } from '../../stores';
+import { formatTokenAmount } from '../../utils';
 import { InsuranceCard } from './InsuranceCard';
-export const InsuranceCollapsed = ({ status, insurableRouteId, insuranceCoverageId, feeAmountUsd, onChange, ...props }) => {
-    const [insuredRoute, setInsuredRoute] = useState();
+export const InsuranceCollapsed = ({ status, insurableRouteId, onChange, ...props }) => {
     const setExecutableRoute = useSetExecutableRoute();
     const routeExecution = useRouteExecutionStore((state) => state.routes[insurableRouteId]);
-    useSwapRoutes({
+    const { routes } = useSwapRoutes({
         insurableRoute: routeExecution?.route,
-        onSettled(data) {
-            if (data?.routes?.[0]) {
-                setInsuredRoute(data.routes[0]);
-            }
-        },
     });
-    const toggleInsurance = (_, checked) => {
+    const insuredRoute = routes?.[0];
+    const toggleInsurance = (checked) => {
         if (insuredRoute) {
             if (checked) {
                 setExecutableRoute(insuredRoute, insurableRouteId);
@@ -24,5 +19,8 @@ export const InsuranceCollapsed = ({ status, insurableRouteId, insuranceCoverage
             onChange?.(checked ? insuredRoute.id : insurableRouteId);
         }
     };
-    return (_jsx(Collapse, { timeout: 225, in: insuredRoute?.insurance?.state === 'INSURED', unmountOnExit: true, mountOnEnter: true, appear: status === RouteExecutionStatus.Idle, children: _jsx(InsuranceCard, { feeAmountUsd: feeAmountUsd, status: status, insuranceCoverageId: insuranceCoverageId, onChange: toggleInsurance, ...props }) }));
+    if (!insuredRoute) {
+        return null;
+    }
+    return (_jsx(Collapse, { timeout: 225, in: insuredRoute.insurance.state === 'INSURED', unmountOnExit: true, mountOnEnter: true, appear: status === RouteExecutionStatus.Idle, children: _jsx(InsuranceCard, { ...props, status: status, insuredAmount: formatTokenAmount(insuredRoute.toAmountMin, insuredRoute.toToken.decimals), insuredTokenSymbol: insuredRoute.toToken.symbol, onChange: toggleInsurance }) }));
 };

package/components/Insurance/index.d.ts

@@ -1 +1,2 @@
 export * from './Insurance';
+export * from './types';

package/components/Insurance/index.js

@@ -1 +1,2 @@
 export * from './Insurance';
+export * from './types';

package/components/Insurance/types.d.ts

@@ -1,16 +1,19 @@
-/// <reference types="react" />
 import type { BoxProps } from '@mui/material';
 import type { RouteExecutionStatus } from '../../stores';
-export interface InsuranceProps extends Omit<BoxProps, 'onChange'> {
-    insurableRouteId: string;
-    feeAmountUsd?: string;
+export interface InsuredAmount {
+    insuredAmount: string;
+    insuredTokenSymbol: string;
+}
+interface Insurance extends InsuredAmount {
+    feeAmountUsd: string;
     insuranceCoverageId?: string;
     status?: RouteExecutionStatus;
+}
+export interface InsuranceProps extends Insurance, Omit<BoxProps, 'onChange'> {
+    insurableRouteId: string;
     onChange?: (routeId: string) => void;
 }
-export interface InsuranceCardProps {
-    feeAmountUsd?: string;
-    status?: RouteExecutionStatus;
-    insuranceCoverageId?: string;
-    onChange?: (_: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+export interface InsuranceCardProps extends Insurance, Omit<BoxProps, 'onChange'> {
+    onChange?: (checked: boolean) => void;
 }
+export {};

package/components/NFT/NFT.js

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { SwapFormKey } from '../../providers';
 import { Token } from '../Token';
 import { PreviewAvatar } from './NFT.style';
-export const NFT = ({ imageUrl, isLoading, collectonName, assetName, owner, token, contract, ...props }) => {
+export const NFT = ({ imageUrl, isLoading, collectionName, assetName, owner, token, contract, ...props }) => {
     const { t } = useTranslation();
     const { setValue } = useFormContext();
     useEffect(() => {
@@ -21,5 +21,5 @@ export const NFT = ({ imageUrl, isLoading, collectonName, assetName, owner, toke
             setValue(SwapFormKey.ToContractGasLimit, contract.gasLimit);
         }
     }, [contract, setValue, token]);
-    return (_jsxs(Box, { p: 2, children: [_jsxs(Box, { display: "flex", children: [isLoading ? (_jsx(Skeleton, { width: 96, height: 96, variant: "rectangular", sx: { borderRadius: 1 } })) : (_jsx(PreviewAvatar, { src: imageUrl })), _jsxs(Box, { ml: 2, children: [isLoading ? (_jsx(Skeleton, { width: 144, height: 21, variant: "text" })) : (_jsx(Typography, { fontSize: 14, color: "text.secondary", children: collectonName })), isLoading ? (_jsx(Skeleton, { width: 112, height: 27, variant: "text" })) : (_jsx(Typography, { fontSize: 18, fontWeight: 600, children: assetName })), isLoading ? (_jsx(Skeleton, { width: 128, height: 21, variant: "text" })) : owner ? (_jsxs(Typography, { fontSize: 14, color: "text.secondary", children: [t('swap.ownedBy'), ' ', _jsx(Link, { href: owner.url, target: "_blank", underline: "none", color: "primary", children: owner.name })] })) : null] })] }), _jsx(Token, { token: token, isLoading: isLoading, mt: 2 })] }));
+    return (_jsxs(Box, { p: 2, children: [_jsxs(Box, { display: "flex", children: [isLoading ? (_jsx(Skeleton, { width: 96, height: 96, variant: "rectangular", sx: { borderRadius: 1 } })) : (_jsx(PreviewAvatar, { src: imageUrl })), _jsxs(Box, { ml: 2, children: [isLoading ? (_jsx(Skeleton, { width: 144, height: 21, variant: "text" })) : (_jsx(Typography, { fontSize: 14, color: "text.secondary", children: collectionName })), isLoading ? (_jsx(Skeleton, { width: 112, height: 27, variant: "text" })) : (_jsx(Typography, { fontSize: 18, fontWeight: 600, children: assetName })), isLoading ? (_jsx(Skeleton, { width: 128, height: 21, variant: "text" })) : owner ? (_jsxs(Typography, { fontSize: 14, color: "text.secondary", children: [t('swap.ownedBy'), ' ', _jsx(Link, { href: owner.url, target: "_blank", underline: "none", color: "primary", children: owner.name })] })) : null] })] }), _jsx(Token, { token: token, isLoading: isLoading, mt: 2 })] }));
 };

package/components/NFT/types.d.ts

@@ -2,7 +2,7 @@ import type { TokenAmount } from '@lifi/sdk';
 import type { WidgetContract } from '../../types';
 export interface NFTProps {
     imageUrl?: string;
-    collectonName?: string;
+    collectionName?: string;
     assetName?: string;
     isLoading?: boolean;
     owner?: NFTOwner;

package/components/PoweredBy/PoweredBy.js

@@ -5,7 +5,6 @@ import { version } from '../../config/version';
 import { useWidgetConfig } from '../../providers';
 import { HiddenUI } from '../../types';
 import { navigationRoutes } from '../../utils';
-import { LiFiLogo } from '../LiFiLogo';
 import { Link } from './PoweredBy.style';
 export const PoweredBy = () => {
     const { hiddenUI } = useWidgetConfig();
@@ -14,9 +13,9 @@ export const PoweredBy = () => {
         pathname.includes(navigationRoutes.toToken)) {
         return null;
     }
-    return (_jsx(Box, { px: 3, py: hiddenUI?.includes(HiddenUI.PoweredBy) ? 1 : 2, sx: {
+    return (_jsx(Box, { px: 3, pt: 1, pb: hiddenUI?.includes(HiddenUI.PoweredBy) ? 1 : 2, sx: {
             display: 'flex',
             alignItems: 'flex-end',
             justifyContent: 'flex-end',
-        }, children: !hiddenUI?.includes(HiddenUI.PoweredBy) ? (_jsx(Tooltip, { title: `v${version}`, placement: "top", enterDelay: 3000, arrow: true, children: _jsxs(Link, { href: "https://li.fi", target: "_blank", underline: "none", color: "text.primary", children: [_jsx(Typography, { color: "text.secondary", fontSize: 12, px: 0.5, children: "Powered by" }), _jsx(LiFiLogo, { variant: "full", style: { height: 16, width: 42 } })] }) })) : null }));
+        }, children: !hiddenUI?.includes(HiddenUI.PoweredBy) ? (_jsx(Tooltip, { title: `v${version}`, placement: "top", enterDelay: 1000, arrow: true, children: _jsxs(Link, { href: "https://li.fi", target: "_blank", underline: "none", color: "text.primary", children: [_jsx(Typography, { color: "text.secondary", fontSize: 12, fontWeight: 500, px: 0.5, children: "Powered by" }), _jsx(Typography, { color: "text.primary", fontSize: 12, fontWeight: 500, children: "LI.FI" })] }) })) : null }));
 };

package/components/SelectChainAndToken.js

@@ -4,10 +4,10 @@ import { useWatch } from 'react-hook-form';
 import { ReverseTokensButton } from '../components/ReverseTokensButton';
 import { SelectTokenButton } from '../components/SelectTokenButton';
 import { SwapFormKey, useWidgetConfig } from '../providers';
-import { DisabledUI } from '../types';
+import { DisabledUI, HiddenUI } from '../types';
 export const SelectChainAndToken = (props) => {
     const prefersNarrowView = useMediaQuery((theme) => theme.breakpoints.down('sm'));
-    const { disabledUI, variant } = useWidgetConfig();
+    const { disabledUI, hiddenUI, variant } = useWidgetConfig();
     const [fromChain, toChain, fromToken, toToken] = useWatch({
         name: [
             SwapFormKey.FromChain,
@@ -16,19 +16,20 @@ export const SelectChainAndToken = (props) => {
             SwapFormKey.ToToken,
         ],
     });
-    const disabledReverse = variant === 'refuel' ||
+    const hiddenReverse = variant === 'refuel' ||
         disabledUI?.includes(DisabledUI.FromToken) ||
-        disabledUI?.includes(DisabledUI.ToToken);
-    const nftVariant = variant === 'nft';
+        disabledUI?.includes(DisabledUI.ToToken) ||
+        hiddenUI?.includes(HiddenUI.ToToken);
+    const hiddenToToken = variant === 'nft' || hiddenUI?.includes(HiddenUI.ToToken);
     const isCompact = fromChain &&
         toChain &&
         fromToken &&
         toToken &&
         !prefersNarrowView &&
-        !nftVariant;
-    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: isCompact ? 'row' : 'column' }, ...props, children: [_jsx(SelectTokenButton, { formType: "from", compact: isCompact }), !nftVariant ? (_jsx(Box, { sx: {
+        !hiddenToToken;
+    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: isCompact ? 'row' : 'column' }, ...props, children: [_jsx(SelectTokenButton, { formType: "from", compact: isCompact }), !hiddenToToken ? (_jsx(Box, { sx: {
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center',
-                }, m: !disabledReverse ? -1.125 : 1, children: !disabledReverse ? (_jsx(ReverseTokensButton, { vertical: !isCompact })) : null })) : null, !nftVariant ? (_jsx(SelectTokenButton, { formType: "to", compact: isCompact })) : null] }));
+                }, m: !hiddenReverse ? -1.125 : 1, children: !hiddenReverse ? (_jsx(ReverseTokensButton, { vertical: !isCompact })) : null })) : null, !hiddenToToken ? (_jsx(SelectTokenButton, { formType: "to", compact: isCompact })) : null] }));
 };

package/components/SelectTokenButton/SelectTokenButton.js

@@ -3,7 +3,7 @@ import { Skeleton } from '@mui/material';
 import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { useChain, useToken } from '../../hooks';
+import { useChain, useSwapOnly, useToken } from '../../hooks';
 import { SwapFormKeyHelper, useWidgetConfig } from '../../providers';
 import { navigationRoutes } from '../../utils';
 import { Card, CardTitle } from '../Card';
@@ -13,6 +13,7 @@ export const SelectTokenButton = ({ formType, compact }) => {
     const { t } = useTranslation();
     const navigate = useNavigate();
     const { disabledUI, variant } = useWidgetConfig();
+    const swapOnly = useSwapOnly();
     const tokenKey = SwapFormKeyHelper.getTokenKey(formType);
     const [chainId, tokenAddress] = useWatch({
         name: [SwapFormKeyHelper.getChainKey(formType), tokenKey],
@@ -29,10 +30,12 @@ export const SelectTokenButton = ({ formType, compact }) => {
     const isSelected = !!(chain && token);
     const onClick = !disabledUI?.includes(tokenKey) ? handleClick : undefined;
     const defaultPlaceholder = formType === 'to' && variant === 'refuel'
-        ? t(`header.selectChain`)
-        : t(`swap.selectChainAndToken`);
+        ? t('swap.selectChain')
+        : formType === 'to' && swapOnly
+            ? t('swap.selectToken')
+            : t('swap.selectChainAndToken');
     const cardTitle = formType === 'from' && variant === 'nft'
-        ? t(`swap.payWith`)
+        ? t(`header.payWith`)
         : t(`swap.${formType}`);
     return (_jsxs(Card, { flex: 1, onClick: onClick, children: [_jsx(CardTitle, { children: cardTitle }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (_jsx(SelectTokenCardHeader, { avatar: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }), title: _jsx(Skeleton, { variant: "text", width: 64, height: 24 }), subheader: _jsx(Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : (_jsx(SelectTokenCardHeader, { avatar: isSelected ? (_jsx(TokenAvatar, { token: token, chain: chain })) : (_jsx(TokenAvatarDefault, {})), title: isSelected ? token.symbol : defaultPlaceholder, subheader: isSelected ? t(`swap.onChain`, { chainName: chain.name }) : null, selected: isSelected, compact: compact }))] }));
 };

package/components/SendToWallet/SendToWallet.js

@@ -12,7 +12,7 @@ import { FormControl, Input } from './SendToWallet.style';
 export const SendToWallet = forwardRef((props, ref) => {
     const { t } = useTranslation();
     const { trigger, getValues, clearErrors } = useFormContext();
-    const { account, provider } = useWallet();
+    const { account } = useWallet();
     const { disabledUI, hiddenUI, requiredUI, toAddress } = useWidgetConfig();
     const { showSendToWallet, showSendToWalletDirty, setSendToWallet } = useSendToWalletStore();
     const { showDestinationWallet } = useSettings(['showDestinationWallet']);
@@ -30,7 +30,7 @@ export const SendToWallet = forwardRef((props, ref) => {
                     if (!value) {
                         return true;
                     }
-                    const address = await provider?.resolveName(value);
+                    const address = await account.signer?.provider?.resolveName(value);
                     return (isAddress(address || value) ||
                         t('swap.error.title.walletAddressInvalid'));
                 }