@lifi/widget 1.21.0 → 1.22.1

package/AppDrawer.style.d.ts

@@ -2,7 +2,7 @@
 export declare const DrawerButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "primary" | "secondary" | "error" | "warning" | "info" | "success" | undefined;
+    color?: "inherit" | "error" | "success" | "warning" | "primary" | "secondary" | "info" | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;

package/AppProvider.js

@@ -1,14 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { QueryClientProvider } from '@tanstack/react-query';
 import { Fragment } from 'react';
-import { I18nextProvider } from 'react-i18next';
 import { MemoryRouter, useInRouterContext } from 'react-router-dom';
 import { queryClient } from './config/queryClient';
-import { i18n } from './i18n';
-import { SDKProvider, SwapFormProvider, TelemetryProvider, ThemeProvider, WalletProvider, WidgetProvider, } from './providers';
+import { I18nProvider, SDKProvider, SwapFormProvider, TelemetryProvider, ThemeProvider, WalletProvider, WidgetProvider, } from './providers';
 const QueryProvider = QueryClientProvider;
 export const AppProvider = ({ children, config, }) => {
-    return (_jsx(QueryProvider, Object.assign({ client: queryClient }, { children: _jsx(WidgetProvider, Object.assign({ config: config }, { children: _jsx(SDKProvider, { children: _jsx(TelemetryProvider, { children: _jsx(SwapFormProvider, { children: _jsx(ThemeProvider, { children: _jsx(WalletProvider, { children: _jsx(I18nextProvider, Object.assign({ i18n: i18n }, { children: _jsx(AppRouter, { children: children }) })) }) }) }) }) }) })) })));
+    return (_jsx(QueryProvider, Object.assign({ client: queryClient }, { children: _jsx(WidgetProvider, Object.assign({ config: config }, { children: _jsx(SDKProvider, { children: _jsx(TelemetryProvider, { children: _jsx(SwapFormProvider, { children: _jsx(ThemeProvider, { children: _jsx(I18nProvider, { children: _jsx(WalletProvider, { children: _jsx(AppRouter, { children: children }) }) }) }) }) }) }) })) })));
 };
 export const AppRouter = ({ children }) => {
     const inRouterContext = useInRouterContext();

package/AppRoutes.js

@@ -30,6 +30,10 @@ export const AppRoutes = () => {
             path: navigationRoutes.toToken,
             element: _jsx(SelectTokenPage, { formType: "to" }),
         },
+        {
+            path: navigationRoutes.toTokenNative,
+            element: _jsx(SelectChainPage, { formType: "to", selectNativeToken: true }),
+        },
         ...[
             navigationRoutes.fromChain,
             `${navigationRoutes.fromToken}/${navigationRoutes.fromChain}`,

package/cjs/AppDrawer.style.d.ts

@@ -2,7 +2,7 @@
 export declare const DrawerButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "primary" | "secondary" | "error" | "warning" | "info" | "success" | undefined;
+    color?: "inherit" | "error" | "success" | "warning" | "primary" | "secondary" | "info" | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;

package/cjs/AppProvider.js

@@ -4,14 +4,12 @@ exports.AppRouter = exports.AppProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
-const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
 const queryClient_1 = require("./config/queryClient");
-const i18n_1 = require("./i18n");
 const providers_1 = require("./providers");
 const QueryProvider = react_query_1.QueryClientProvider;
 const AppProvider = ({ children, config, }) => {
-    return ((0, jsx_runtime_1.jsx)(QueryProvider, Object.assign({ client: queryClient_1.queryClient }, { children: (0, jsx_runtime_1.jsx)(providers_1.WidgetProvider, Object.assign({ config: config }, { children: (0, jsx_runtime_1.jsx)(providers_1.SDKProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.TelemetryProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.SwapFormProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.ThemeProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.WalletProvider, { children: (0, jsx_runtime_1.jsx)(react_i18next_1.I18nextProvider, Object.assign({ i18n: i18n_1.i18n }, { children: (0, jsx_runtime_1.jsx)(exports.AppRouter, { children: children }) })) }) }) }) }) }) })) })));
+    return ((0, jsx_runtime_1.jsx)(QueryProvider, Object.assign({ client: queryClient_1.queryClient }, { children: (0, jsx_runtime_1.jsx)(providers_1.WidgetProvider, Object.assign({ config: config }, { children: (0, jsx_runtime_1.jsx)(providers_1.SDKProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.TelemetryProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.SwapFormProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.ThemeProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.I18nProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.WalletProvider, { children: (0, jsx_runtime_1.jsx)(exports.AppRouter, { children: children }) }) }) }) }) }) }) })) })));
 };
 exports.AppProvider = AppProvider;
 const AppRouter = ({ children }) => {

package/cjs/AppRoutes.js

@@ -33,6 +33,10 @@ const AppRoutes = () => {
             path: utils_1.navigationRoutes.toToken,
             element: (0, jsx_runtime_1.jsx)(SelectTokenPage_1.SelectTokenPage, { formType: "to" }),
         },
+        {
+            path: utils_1.navigationRoutes.toTokenNative,
+            element: (0, jsx_runtime_1.jsx)(SelectChainPage_1.SelectChainPage, { formType: "to", selectNativeToken: true }),
+        },
         ...[
             utils_1.navigationRoutes.fromChain,
             `${utils_1.navigationRoutes.fromToken}/${utils_1.navigationRoutes.fromChain}`,

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

@@ -33,7 +33,7 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
 export declare const ShowAllButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "primary" | "secondary" | "error" | "warning" | "info" | "success" | undefined;
+    color?: "inherit" | "error" | "success" | "warning" | "primary" | "secondary" | "info" | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;

package/cjs/components/BottomSheet/BottomSheet.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { BottomSheetBase, BottomSheetProps } from './types';
-export declare const BottomSheet: import("react").ForwardRefExoticComponent<Pick<BottomSheetProps, "className" | "style" | "classes" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "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" | "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" | "key" | "transitionDuration" | "variant" | "open" | "anchor" | "components" | "elementRef" | "componentsProps" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "container" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "onBackdropClick" | "onClose" | "elevation" | "PaperProps" | "ModalProps" | "SlideProps"> & import("react").RefAttributes<BottomSheetBase>>;
+export declare const BottomSheet: import("react").ForwardRefExoticComponent<Pick<BottomSheetProps, "className" | "style" | "classes" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "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" | "key" | "transitionDuration" | "variant" | "open" | "anchor" | "components" | "elementRef" | "componentsProps" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "container" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "onBackdropClick" | "onClose" | "slotProps" | "slots" | "elevation" | "PaperProps" | "ModalProps" | "SlideProps"> & import("react").RefAttributes<BottomSheetBase>>;

package/cjs/components/ChainSelect/ChainSelect.js

@@ -18,9 +18,7 @@ const ChainSelect = ({ formType }) => {
         name: [providers_1.SwapFormKeyHelper.getChainKey(formType)],
     });
     const showAllChains = () => {
-        navigate(utils_1.navigationRoutes[`${formType}Chain`], {
-            state: { formType },
-        });
+        navigate(utils_1.navigationRoutes[`${formType}Chain`]);
     };
     const chainsToHide = ((_a = chains === null || chains === void 0 ? void 0 : chains.length) !== null && _a !== void 0 ? _a : 0) - stores_1.maxChainToOrder;
     return ((0, jsx_runtime_1.jsxs)(ChainSelect_style_1.ChainContainer, { children: [isLoading

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

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

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

@@ -7,7 +7,7 @@ export declare const HeaderAppBar: import("@emotion/styled").StyledComponent<Omi
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof import("react").HTMLAttributes<HTMLElement> | "key"> & {
     ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "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" | "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 | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "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>, {}, {}>;
 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;
@@ -18,3 +18,36 @@ export declare const Container: import("@emotion/styled").StyledComponent<import
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "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> & {
     sticky?: boolean | undefined;
 }, {}, {}>;
+export declare const WalletButton: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
+    color?: "inherit" | "error" | "success" | "warning" | "primary" | "secondary" | "info" | undefined;
+    disabled?: boolean | undefined;
+    disableElevation?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    endIcon?: import("react").ReactNode;
+    fullWidth?: boolean | undefined;
+    href?: string | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    startIcon?: import("react").ReactNode;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "text" | "outlined" | "contained" | 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<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "size" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Container = exports.HeaderAppBar = void 0;
+exports.WalletButton = exports.Container = exports.HeaderAppBar = void 0;
 const material_1 = require("@mui/material");
+const Button_1 = require("@mui/material/Button");
 const styles_1 = require("@mui/material/styles");
 exports.HeaderAppBar = (0, styles_1.styled)(material_1.AppBar)(({ theme }) => ({
     backgroundColor: 'transparent',
@@ -25,3 +26,20 @@ exports.Container = (0, styles_1.styled)(material_1.Box, {
     top: 0,
     zIndex: 1200,
 }));
+exports.WalletButton = (0, styles_1.styled)(material_1.Button)(({ theme }) => ({
+    color: theme.palette.text.primary,
+    backgroundColor: 'transparent',
+    padding: theme.spacing(1, 1.5),
+    maxHeight: 40,
+    fontSize: '0.875rem',
+    fontWeight: 600,
+    borderRadius: theme.shape.borderRadius * 2,
+    '&:hover': {
+        backgroundColor: theme.palette.mode === 'light'
+            ? (0, styles_1.alpha)(theme.palette.common.black, 0.04)
+            : (0, styles_1.alpha)(theme.palette.common.white, 0.08),
+    },
+    [`.${Button_1.buttonClasses.endIcon} > *:nth-of-type(1)`]: {
+        fontSize: '24px',
+    },
+}));

package/cjs/components/Header/NavigationHeader.js

@@ -13,6 +13,7 @@ const Header_style_1 = require("./Header.style");
 const useHeaderActionStore_1 = require("./useHeaderActionStore");
 const NavigationHeader = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
+    const { variant } = (0, providers_1.useWidgetConfig)();
     const { navigate, navigateBack } = (0, hooks_1.useNavigateBack)();
     const { account } = (0, providers_1.useWallet)();
     const { element } = (0, useHeaderActionStore_1.useHeaderActionStore)();
@@ -36,6 +37,7 @@ const NavigationHeader = () => {
                 return t(`header.to`);
             case utils_1.navigationRoutes.fromChain:
             case utils_1.navigationRoutes.toChain:
+            case utils_1.navigationRoutes.toTokenNative:
                 return t(`header.selectChain`);
             case utils_1.navigationRoutes.swapRoutes:
                 return t(`header.routes`);
@@ -46,9 +48,11 @@ const NavigationHeader = () => {
             case utils_1.navigationRoutes.swapDetails:
                 return t(`header.swapDetails`);
             default:
-                return t(`header.swap`);
+                return variant !== 'refuel' ? t(`header.swap`) : t(`header.gas`);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(Header_style_1.HeaderAppBar, Object.assign({ elevation: 0 }, { children: [utils_1.backButtonRoutes.includes(path) ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", edge: "start", onClick: navigateBack }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.ArrowBack, {}) }))) : null, (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ 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 ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t(`header.swapHistory`), enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", edge: "start", onClick: () => navigate(utils_1.navigationRoutes.swapHistory) }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.History, {}) })) }))) : null, (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t(`header.settings`), enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", edge: "end", onClick: () => navigate(utils_1.navigationRoutes.settings) }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.SettingsOutlined, {}) })) }))] }) }), (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 }) })] })] })));
+    return ((0, jsx_runtime_1.jsxs)(Header_style_1.HeaderAppBar, Object.assign({ elevation: 0 }, { children: [utils_1.backButtonRoutes.includes(path) ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", edge: "start", onClick: navigateBack }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.ArrowBack, {}) }))) : null, (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ 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 ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t(`header.swapHistory`), enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", edge: "start", onClick: () => navigate(utils_1.navigationRoutes.swapHistory) }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.History, {}) })) }))) : null, (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t(`header.settings`), enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", onClick: () => navigate(utils_1.navigationRoutes.settings), sx: {
+                                            marginRight: -1.25,
+                                        } }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.SettingsOutlined, {}) })) }))] }) }), (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 }) })] })] })));
 };
 exports.NavigationHeader = NavigationHeader;

package/cjs/components/Header/WalletHeader.js

@@ -13,23 +13,21 @@ exports.WalletHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
+const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
+const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const utils_1 = require("../../utils");
+const Menu_1 = require("../Menu");
 const Header_style_1 = require("./Header.style");
 const WalletHeader = () => {
-    const { t } = (0, react_i18next_1.useTranslation)();
-    const { account, disconnect } = (0, providers_1.useWallet)();
-    const walletAddress = (0, utils_1.shortenWalletAddress)(account.address);
-    return ((0, jsx_runtime_1.jsx)(Header_style_1.HeaderAppBar, Object.assign({ elevation: 0 }, { children: walletAddress ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
-                        display: 'flex',
-                        flex: 1,
-                        flexDirection: 'column',
-                    }, mr: 0.5 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption", align: "right" }, { children: t(`header.walletConnected`) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", align: "right", fontWeight: "600" }, { children: walletAddress }))] })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", edge: "end", onClick: disconnect }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Logout, {}) }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", align: "right", fontWeight: "600", flex: 1, mr: 0.5 }, { children: t(`header.connectWallet`) })), (0, jsx_runtime_1.jsx)(ConnectButton, {})] })) })));
+    const { account } = (0, providers_1.useWallet)();
+    return ((0, jsx_runtime_1.jsx)(Header_style_1.HeaderAppBar, Object.assign({ elevation: 0, sx: { justifyContent: 'flex-end' } }, { children: account.isActive ? (0, jsx_runtime_1.jsx)(ConnectedButton, {}) : (0, jsx_runtime_1.jsx)(ConnectButton, {}) })));
 };
 exports.WalletHeader = WalletHeader;
 const ConnectButton = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
     const { pathname } = (0, react_router_dom_1.useLocation)();
     const config = (0, providers_1.useWidgetConfig)();
     const { connect: walletConnect } = (0, providers_1.useWallet)();
@@ -41,5 +39,32 @@ const ConnectButton = () => {
         }
         navigate(utils_1.navigationRoutes.selectWallet);
     });
-    return ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", edge: "end", onClick: !pathname.includes(utils_1.navigationRoutes.selectWallet) ? connect : undefined }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.WalletOutlined, {}) })));
+    return ((0, jsx_runtime_1.jsx)(Header_style_1.WalletButton, Object.assign({ endIcon: (0, jsx_runtime_1.jsx)(icons_material_1.WalletOutlined, {}), onClick: !pathname.includes(utils_1.navigationRoutes.selectWallet) ? connect : undefined, sx: {
+            marginRight: -1.25,
+        } }, { children: t(`button.connectWallet`) })));
+};
+const ConnectedButton = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { account, disconnect } = (0, providers_1.useWallet)();
+    const walletAddress = (0, utils_1.shortenWalletAddress)(account.address);
+    const { chain } = (0, hooks_1.useChain)(account.chainId);
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleDisconnect = () => {
+        disconnect();
+        handleClose();
+    };
+    const handleCopyAddress = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        yield navigator.clipboard.writeText((_a = account.address) !== null && _a !== void 0 ? _a : '');
+        handleClose();
+    });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Header_style_1.WalletButton, Object.assign({ endIcon: (0, jsx_runtime_1.jsx)(icons_material_1.ExpandMore, {}), startIcon: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ src: chain === null || chain === void 0 ? void 0 : chain.logoURI, alt: chain === null || chain === void 0 ? void 0 : chain.key, sx: { width: 24, height: 24 } }, { children: chain === null || chain === void 0 ? void 0 : chain.name[0] })), sx: {
+                    marginRight: -1.25,
+                }, onClick: handleClick }, { children: walletAddress })), (0, jsx_runtime_1.jsxs)(Menu_1.Menu, Object.assign({ elevation: 2, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose }, { children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ onClick: handleCopyAddress, disableRipple: true, dense: true }, { children: [(0, jsx_runtime_1.jsx)(icons_material_1.ContentCopy, {}), t(`button.copyAddress`)] })), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ onClick: handleDisconnect, disableRipple: true, dense: true }, { children: [(0, jsx_runtime_1.jsx)(icons_material_1.PowerSettingsNew, {}), t(`button.disconnectWallet`)] }))] }))] }));
 };

package/cjs/components/Menu.d.ts

@@ -0,0 +1 @@
+export declare const Menu: import("@emotion/styled").StyledComponent<import("@mui/material").MenuProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/components/Menu.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menu = void 0;
+const material_1 = require("@mui/material");
+const Menu_1 = require("@mui/material/Menu");
+const MenuItem_1 = require("@mui/material/MenuItem");
+const styles_1 = require("@mui/material/styles");
+const SvgIcon_1 = require("@mui/material/SvgIcon");
+exports.Menu = (0, styles_1.styled)(material_1.Menu)(({ theme }) => ({
+    [`& .${Menu_1.menuClasses.paper}`]: {
+        borderRadius: theme.shape.borderRadiusSecondary,
+        color: theme.palette.text.primary,
+        [`& .${Menu_1.menuClasses.list}`]: {
+            padding: theme.spacing(0.5, 0),
+        },
+        [`& .${MenuItem_1.menuItemClasses.root}`]: {
+            [`& .${SvgIcon_1.svgIconClasses.root}`]: {
+                fontSize: 18,
+                color: theme.palette.text.primary,
+                marginRight: theme.spacing(1.5),
+            },
+        },
+    },
+}));

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

@@ -9,4 +9,4 @@ export declare const Link: import("@emotion/styled").StyledComponent<Omit<import
     variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)" | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof import("react").AnchorHTMLAttributes<HTMLAnchorElement>> & {
     ref?: ((instance: HTMLAnchorElement | null) => void) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "p" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "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" | "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" | "key" | "download" | "href" | "hrefLang" | "media" | "ping" | "rel" | "target" | "type" | "referrerPolicy" | "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" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping" | "underline" | "TypographyClasses"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "p" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "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" | "key" | "download" | "href" | "hrefLang" | "media" | "ping" | "rel" | "target" | "type" | "referrerPolicy" | "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" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping" | "underline" | "TypographyClasses"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -2,7 +2,7 @@
 export declare const IconButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
-    color?: "inherit" | "default" | "primary" | "secondary" | "error" | "warning" | "info" | "success" | undefined;
+    color?: "inherit" | "default" | "error" | "success" | "warning" | "primary" | "secondary" | "info" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     edge?: false | "end" | "start" | undefined;

package/cjs/components/SelectChainAndToken.js

@@ -7,8 +7,10 @@ const react_hook_form_1 = require("react-hook-form");
 const ReverseTokensButton_1 = require("../components/ReverseTokensButton");
 const SelectTokenButton_1 = require("../components/SelectTokenButton");
 const providers_1 = require("../providers");
+const types_1 = require("../types");
 const SelectChainAndToken = (props) => {
     const prefersNarrowView = (0, material_1.useMediaQuery)((theme) => theme.breakpoints.down('sm'));
+    const { disabledUI, variant } = (0, providers_1.useWidgetConfig)();
     const [fromChain, toChain, fromToken, toToken] = (0, react_hook_form_1.useWatch)({
         name: [
             providers_1.SwapFormKey.FromChain,
@@ -17,7 +19,10 @@ const SelectChainAndToken = (props) => {
             providers_1.SwapFormKey.ToToken,
         ],
     });
+    const disabledReverse = variant === 'refuel' ||
+        (disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(types_1.DisabledUI.FromToken)) ||
+        (disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(types_1.DisabledUI.ToToken));
     const isCompact = fromChain && toChain && fromToken && toToken && !prefersNarrowView;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex', flexDirection: isCompact ? 'row' : 'column' } }, props, { children: [(0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "from", compact: isCompact }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', justifyContent: 'center', alignItems: 'center' }, m: -1.25 }, { children: (0, jsx_runtime_1.jsx)(ReverseTokensButton_1.ReverseTokensButton, { vertical: !isCompact }) })), (0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "to", compact: isCompact })] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex', flexDirection: isCompact ? 'row' : 'column' } }, props, { children: [(0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "from", compact: isCompact }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', justifyContent: 'center', alignItems: 'center' }, m: !disabledReverse ? -1.25 : 1 }, { children: !disabledReverse ? ((0, jsx_runtime_1.jsx)(ReverseTokensButton_1.ReverseTokensButton, { vertical: !isCompact })) : null })), (0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "to", compact: isCompact })] })));
 };
 exports.SelectChainAndToken = SelectChainAndToken;

package/cjs/components/SelectTokenButton/SelectTokenButton.js

@@ -16,20 +16,25 @@ const SelectTokenButton_style_1 = require("./SelectTokenButton.style");
 const SelectTokenButton = ({ formType, compact }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
+    const { disabledUI, variant } = (0, providers_1.useWidgetConfig)();
+    const tokenKey = providers_1.SwapFormKeyHelper.getTokenKey(formType);
     const [chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
-        name: [
-            providers_1.SwapFormKeyHelper.getChainKey(formType),
-            providers_1.SwapFormKeyHelper.getTokenKey(formType),
-        ],
+        name: [providers_1.SwapFormKeyHelper.getChainKey(formType), tokenKey],
     });
     const { chain, isLoading: isChainLoading } = (0, hooks_1.useChain)(chainId);
     const { token, isLoading: isTokenLoading } = (0, hooks_1.useToken)(chainId, tokenAddress);
     const handleClick = () => {
         navigate(formType === 'from'
             ? utils_1.navigationRoutes.fromToken
-            : utils_1.navigationRoutes.toToken);
+            : variant === 'refuel'
+                ? utils_1.navigationRoutes.toTokenNative
+                : utils_1.navigationRoutes.toToken);
     };
     const isSelected = !!(chain && token);
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ flex: 1, onClick: handleClick }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`swap.${formType}`) }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32 }), title: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 24 }), subheader: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: isSelected ? (0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token }) : null, action: !compact ? (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowRight, {}) : null, title: isSelected ? token.symbol : t(`swap.selectChainAndToken`), subheader: isSelected ? `on ${chain.name}` : null, selected: isSelected, compact: compact }))] })));
+    const onClick = !(disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(tokenKey)) ? handleClick : undefined;
+    const defaultTitle = formType === 'to' && variant === 'refuel'
+        ? t(`header.selectChain`)
+        : t(`swap.selectChainAndToken`);
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ flex: 1, onClick: onClick }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`swap.${formType}`) }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32 }), title: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 24 }), subheader: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: isSelected ? (0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain }) : null, action: !compact ? (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowRight, {}) : null, title: isSelected ? token.symbol : defaultTitle, subheader: isSelected ? t(`swap.onChain`, { chainName: chain.name }) : null, selected: isSelected, compact: compact }))] })));
 };
 exports.SelectTokenButton = SelectTokenButton;

package/cjs/components/SelectTokenButton/SelectTokenButton.style.js

@@ -15,8 +15,9 @@ exports.SelectTokenCardHeader = (0, styles_1.styled)(Card_1.CardHeader, {
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
-        width: compact ? 92 : 224,
+        width: compact ? (selected ? 92 : 142) : 224,
         fontWeight: selected ? 500 : 400,
+        fontSize: compact && !selected ? '1rem' : '1.125rem',
     },
     [`.${CardHeader_1.cardHeaderClasses.subheader}`]: {
         textOverflow: 'ellipsis',

package/cjs/components/SendToWallet/SendToWallet.js

@@ -17,17 +17,22 @@ const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
 const providers_1 = require("../../providers");
+const types_1 = require("../../types");
 const Card_1 = require("../Card");
 const SendToWallet_style_1 = require("./SendToWallet.style");
 const store_1 = require("./store");
 exports.SendToWallet = (0, react_1.forwardRef)((props, ref) => {
     const { t } = (0, react_i18next_1.useTranslation)();
+    const { disabledUI } = (0, providers_1.useWidgetConfig)();
     const showSendToWallet = (0, store_1.useSendToWalletStore)((state) => state.showSendToWallet);
     const { account, provider } = (0, providers_1.useWallet)();
     const { register, trigger } = (0, react_hook_form_1.useFormContext)();
     (0, react_1.useEffect)(() => {
         trigger(providers_1.SwapFormKey.ToAddress);
     }, [account.chainId, trigger]);
+    if (disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(types_1.DisabledUI.ToAddress)) {
+        return null;
+    }
     const { onChange, onBlur, name, ref: inputRef, } = register(providers_1.SwapFormKey.ToAddress, {
         validate: (value) => __awaiter(void 0, void 0, void 0, function* () {
             try {

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

@@ -2,7 +2,7 @@
 export declare const FormControl: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").FormControlClasses> | undefined;
-    color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | undefined;
+    color?: "error" | "success" | "warning" | "primary" | "secondary" | "info" | undefined;
     disabled?: boolean | undefined;
     error?: boolean | undefined;
     fullWidth?: boolean | undefined;

package/cjs/components/SendToWallet/SendToWalletButton.js

@@ -8,14 +8,18 @@ const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
 const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
+const types_1 = require("../../types");
 const store_1 = require("./store");
 const SendToWalletButton = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
+    const { disabledUI } = (0, providers_1.useWidgetConfig)();
     const { account } = (0, providers_1.useWallet)();
     const { setValue } = (0, react_hook_form_1.useFormContext)();
     const { showDestinationWallet } = (0, stores_1.useSettings)(['showDestinationWallet']);
     const { showSendToWallet, toggleSendToWallet } = (0, store_1.useSendToWalletStore)();
-    if (!showDestinationWallet || !account.isActive) {
+    if (!showDestinationWallet ||
+        !account.isActive ||
+        (disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(types_1.DisabledUI.ToAddress))) {
         return null;
     }
     const handleClick = () => {