@lifi/widget 4.0.0 → 4.2.0

package/dist/esm/pages/SendToWallet/ConfirmAddressSheet.js

@@ -4,14 +4,14 @@ import { AlertMessage } from "../../components/Messages/AlertMessage.js";
 import { BottomSheet } from "../../components/BottomSheet/BottomSheet.js";
 import { IconContainer, SendToWalletButtonRow, SendToWalletSheetContainer, SheetAddressContainer, SheetTitle } from "./SendToWalletPage.style.js";
 import { useSetContentHeight } from "../../hooks/useSetContentHeight.js";
-import { forwardRef, useRef } from "react";
+import { useRef } from "react";
 import { Button, Typography } from "@mui/material";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import Wallet from "@mui/icons-material/Wallet";
 import WarningRounded from "@mui/icons-material/WarningRounded";
 //#region src/pages/SendToWallet/ConfirmAddressSheet.tsx
-const ConfirmAddressSheet = forwardRef((props, ref) => {
+const ConfirmAddressSheet = ({ ref, ...props }) => {
 	const handleClose = () => {
 		ref.current?.close();
 	};
@@ -22,7 +22,7 @@ const ConfirmAddressSheet = forwardRef((props, ref) => {
 			onClose: handleClose
 		})
 	});
-});
+};
 const ConfirmAddressSheetContent = ({ validatedBookmark, onConfirm, onClose }) => {
 	const { t } = useTranslation();
 	const navigateBack = useNavigateBack();

package/dist/esm/pages/SendToWallet/ConfirmAddressSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmAddressSheet.js","names":[],"sources":["../../../../src/pages/SendToWallet/ConfirmAddressSheet.tsx"],"sourcesContent":["import Wallet from '@mui/icons-material/Wallet'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Button, Typography } from '@mui/material'\nimport type { ForwardRefExoticComponent, RefAttributes, RefObject } from 'react'\nimport { forwardRef, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { AlertMessage } from '../../components/Messages/AlertMessage.js'\nimport { useNavigateBack } from '../../hooks/useNavigateBack.js'\nimport { useSetContentHeight } from '../../hooks/useSetContentHeight.js'\nimport type { Bookmark } from '../../stores/bookmarks/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport {\n  IconContainer,\n  SendToWalletButtonRow,\n  SendToWalletSheetContainer,\n  SheetAddressContainer,\n  SheetTitle,\n} from './SendToWalletPage.style.js'\n\ninterface ConfirmAddressSheetProps {\n  onConfirm: (wallet: Bookmark) => void\n  validatedBookmark?: Bookmark\n}\n\ninterface ConfirmAddressSheetContentProps extends ConfirmAddressSheetProps {\n  onClose: () => void\n}\n\nexport const ConfirmAddressSheet: ForwardRefExoticComponent<\n  ConfirmAddressSheetProps & RefAttributes<BottomSheetBase>\n> = forwardRef<BottomSheetBase, ConfirmAddressSheetProps>((props, ref) => {\n  const handleClose = () => {\n    ;(ref as RefObject<BottomSheetBase>).current?.close()\n  }\n\n  return (\n    <BottomSheet ref={ref}>\n      <ConfirmAddressSheetContent {...props} onClose={handleClose} />\n    </BottomSheet>\n  )\n})\n\nconst ConfirmAddressSheetContent: React.FC<ConfirmAddressSheetContentProps> = ({\n  validatedBookmark,\n  onConfirm,\n  onClose,\n}) => {\n  const { t } = useTranslation()\n  const navigateBack = useNavigateBack()\n  const { setFieldValue } = useFieldActions()\n  const containerRef = useRef<HTMLElement>(null)\n  useSetContentHeight(containerRef)\n\n  const handleConfirm = () => {\n    if (validatedBookmark) {\n      setFieldValue('toAddress', validatedBookmark.address, {\n        isTouched: true,\n        isDirty: true,\n      })\n      onConfirm?.(validatedBookmark)\n      onClose()\n      navigateBack()\n    }\n  }\n\n  return (\n    <SendToWalletSheetContainer ref={containerRef}>\n      <IconContainer>\n        <Wallet sx={{ fontSize: 40 }} />\n      </IconContainer>\n      <SheetTitle>{t('sendToWallet.confirmWalletAddress')}</SheetTitle>\n      <SheetAddressContainer>\n        {validatedBookmark?.name ? (\n          <Typography\n            sx={{\n              fontWeight: 600,\n              mb: 0.5,\n            }}\n          >\n            {validatedBookmark?.name}\n          </Typography>\n        ) : null}\n        <Typography>{validatedBookmark?.address}</Typography>\n      </SheetAddressContainer>\n      <AlertMessage\n        severity=\"warning\"\n        title={\n          <Typography variant=\"body2\" sx={{ color: 'text.primary' }}>\n            {t('warning.message.fundsLossPrevention')}\n          </Typography>\n        }\n        icon={<WarningRounded />}\n        multiline\n      />\n      <SendToWalletButtonRow>\n        <Button variant=\"text\" onClick={onClose} fullWidth>\n          {t('button.cancel')}\n        </Button>\n        <Button variant=\"contained\" onClick={handleConfirm} fullWidth>\n          {t('button.confirm')}\n        </Button>\n      </SendToWalletButtonRow>\n    </SendToWalletSheetContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AA8BA,MAAa,sBAET,YAAuD,OAAO,QAAQ;CACxE,MAAM,oBAAoB;EACvB,IAAoC,SAAS,MAAM;CACtD;CAEA,OACE,oBAAC,aAAD;EAAkB;YAChB,oBAAC,4BAAD;GAA4B,GAAI;GAAO,SAAS;EAAc,CAAA;CACnD,CAAA;AAEjB,CAAC;AAED,MAAM,8BAAyE,EAC7E,mBACA,WACA,cACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,eAAe,gBAAgB;CACrC,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,eAAe,OAAoB,IAAI;CAC7C,oBAAoB,YAAY;CAEhC,MAAM,sBAAsB;EAC1B,IAAI,mBAAmB;GACrB,cAAc,aAAa,kBAAkB,SAAS;IACpD,WAAW;IACX,SAAS;GACX,CAAC;GACD,YAAY,iBAAiB;GAC7B,QAAQ;GACR,aAAa;EACf;CACF;CAEA,OACE,qBAAC,4BAAD;EAA4B,KAAK;YAAjC;GACE,oBAAC,eAAD,EAAA,UACE,oBAAC,QAAD,EAAQ,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA,EAClB,CAAA;GACf,oBAAC,YAAD,EAAA,UAAa,EAAE,mCAAmC,EAAc,CAAA;GAChE,qBAAC,uBAAD,EAAA,UAAA,CACG,mBAAmB,OAClB,oBAAC,YAAD;IACE,IAAI;KACF,YAAY;KACZ,IAAI;IACN;cAEC,mBAAmB;GACV,CAAA,IACV,MACJ,oBAAC,YAAD,EAAA,UAAa,mBAAmB,QAAoB,CAAA,CAC/B,EAAA,CAAA;GACvB,oBAAC,cAAD;IACE,UAAS;IACT,OACE,oBAAC,YAAD;KAAY,SAAQ;KAAQ,IAAI,EAAE,OAAO,eAAe;eACrD,EAAE,qCAAqC;IAC9B,CAAA;IAEd,MAAM,oBAAC,gBAAD,CAAiB,CAAA;IACvB,WAAA;GACD,CAAA;GACD,qBAAC,uBAAD,EAAA,UAAA,CACE,oBAAC,QAAD;IAAQ,SAAQ;IAAO,SAAS;IAAS,WAAA;cACtC,EAAE,eAAe;GACZ,CAAA,GACR,oBAAC,QAAD;IAAQ,SAAQ;IAAY,SAAS;IAAe,WAAA;cACjD,EAAE,gBAAgB;GACb,CAAA,CACa,EAAA,CAAA;EACG;;AAEhC"}
+{"version":3,"file":"ConfirmAddressSheet.js","names":[],"sources":["../../../../src/pages/SendToWallet/ConfirmAddressSheet.tsx"],"sourcesContent":["import Wallet from '@mui/icons-material/Wallet'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Button, Typography } from '@mui/material'\nimport type { JSX, Ref, RefObject } from 'react'\nimport { useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { AlertMessage } from '../../components/Messages/AlertMessage.js'\nimport { useNavigateBack } from '../../hooks/useNavigateBack.js'\nimport { useSetContentHeight } from '../../hooks/useSetContentHeight.js'\nimport type { Bookmark } from '../../stores/bookmarks/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport {\n  IconContainer,\n  SendToWalletButtonRow,\n  SendToWalletSheetContainer,\n  SheetAddressContainer,\n  SheetTitle,\n} from './SendToWalletPage.style.js'\n\ninterface ConfirmAddressSheetProps {\n  onConfirm: (wallet: Bookmark) => void\n  validatedBookmark?: Bookmark\n}\n\ninterface ConfirmAddressSheetContentProps extends ConfirmAddressSheetProps {\n  onClose: () => void\n}\n\nexport const ConfirmAddressSheet = ({\n  ref,\n  ...props\n}: ConfirmAddressSheetProps & {\n  ref?: Ref<BottomSheetBase>\n}): JSX.Element => {\n  const handleClose = () => {\n    ;(ref as RefObject<BottomSheetBase>).current?.close()\n  }\n\n  return (\n    <BottomSheet ref={ref}>\n      <ConfirmAddressSheetContent {...props} onClose={handleClose} />\n    </BottomSheet>\n  )\n}\n\nconst ConfirmAddressSheetContent: React.FC<ConfirmAddressSheetContentProps> = ({\n  validatedBookmark,\n  onConfirm,\n  onClose,\n}) => {\n  const { t } = useTranslation()\n  const navigateBack = useNavigateBack()\n  const { setFieldValue } = useFieldActions()\n  const containerRef = useRef<HTMLElement>(null)\n  useSetContentHeight(containerRef)\n\n  const handleConfirm = () => {\n    if (validatedBookmark) {\n      setFieldValue('toAddress', validatedBookmark.address, {\n        isTouched: true,\n        isDirty: true,\n      })\n      onConfirm?.(validatedBookmark)\n      onClose()\n      navigateBack()\n    }\n  }\n\n  return (\n    <SendToWalletSheetContainer ref={containerRef}>\n      <IconContainer>\n        <Wallet sx={{ fontSize: 40 }} />\n      </IconContainer>\n      <SheetTitle>{t('sendToWallet.confirmWalletAddress')}</SheetTitle>\n      <SheetAddressContainer>\n        {validatedBookmark?.name ? (\n          <Typography\n            sx={{\n              fontWeight: 600,\n              mb: 0.5,\n            }}\n          >\n            {validatedBookmark?.name}\n          </Typography>\n        ) : null}\n        <Typography>{validatedBookmark?.address}</Typography>\n      </SheetAddressContainer>\n      <AlertMessage\n        severity=\"warning\"\n        title={\n          <Typography variant=\"body2\" sx={{ color: 'text.primary' }}>\n            {t('warning.message.fundsLossPrevention')}\n          </Typography>\n        }\n        icon={<WarningRounded />}\n        multiline\n      />\n      <SendToWalletButtonRow>\n        <Button variant=\"text\" onClick={onClose} fullWidth>\n          {t('button.cancel')}\n        </Button>\n        <Button variant=\"contained\" onClick={handleConfirm} fullWidth>\n          {t('button.confirm')}\n        </Button>\n      </SendToWalletButtonRow>\n    </SendToWalletSheetContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AA8BA,MAAa,uBAAuB,EAClC,KACA,GAAG,YAGc;CACjB,MAAM,oBAAoB;EACvB,IAAoC,SAAS,MAAM;CACtD;CAEA,OACE,oBAAC,aAAD;EAAkB;YAChB,oBAAC,4BAAD;GAA4B,GAAI;GAAO,SAAS;EAAc,CAAA;CACnD,CAAA;AAEjB;AAEA,MAAM,8BAAyE,EAC7E,mBACA,WACA,cACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,eAAe,gBAAgB;CACrC,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,eAAe,OAAoB,IAAI;CAC7C,oBAAoB,YAAY;CAEhC,MAAM,sBAAsB;EAC1B,IAAI,mBAAmB;GACrB,cAAc,aAAa,kBAAkB,SAAS;IACpD,WAAW;IACX,SAAS;GACX,CAAC;GACD,YAAY,iBAAiB;GAC7B,QAAQ;GACR,aAAa;EACf;CACF;CAEA,OACE,qBAAC,4BAAD;EAA4B,KAAK;YAAjC;GACE,oBAAC,eAAD,EAAA,UACE,oBAAC,QAAD,EAAQ,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA,EAClB,CAAA;GACf,oBAAC,YAAD,EAAA,UAAa,EAAE,mCAAmC,EAAc,CAAA;GAChE,qBAAC,uBAAD,EAAA,UAAA,CACG,mBAAmB,OAClB,oBAAC,YAAD;IACE,IAAI;KACF,YAAY;KACZ,IAAI;IACN;cAEC,mBAAmB;GACV,CAAA,IACV,MACJ,oBAAC,YAAD,EAAA,UAAa,mBAAmB,QAAoB,CAAA,CAC/B,EAAA,CAAA;GACvB,oBAAC,cAAD;IACE,UAAS;IACT,OACE,oBAAC,YAAD;KAAY,SAAQ;KAAQ,IAAI,EAAE,OAAO,eAAe;eACrD,EAAE,qCAAqC;IAC9B,CAAA;IAEd,MAAM,oBAAC,gBAAD,CAAiB,CAAA;IACvB,WAAA;GACD,CAAA;GACD,qBAAC,uBAAD,EAAA,UAAA,CACE,oBAAC,QAAD;IAAQ,SAAQ;IAAO,SAAS;IAAS,WAAA;cACtC,EAAE,eAAe;GACZ,CAAA,GACR,oBAAC,QAAD;IAAQ,SAAQ;IAAY,SAAS;IAAe,WAAA;cACjD,EAAE,gBAAgB;GACb,CAAA,CACa,EAAA,CAAA;EACG;;AAEhC"}

package/dist/esm/pages/SendToWallet/SendToWalletPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SendToWalletPage.js","names":[],"sources":["../../../../src/pages/SendToWallet/SendToWalletPage.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet'\nimport ErrorIcon from '@mui/icons-material/Error'\nimport TurnedIn from '@mui/icons-material/TurnedIn'\nimport Wallet from '@mui/icons-material/Wallet'\nimport { Box, Tooltip, Typography } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { ChangeEvent } from 'react'\nimport { useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { ButtonTertiary } from '../../components/ButtonTertiary.js'\nimport { CardButton } from '../../components/Card/CardButton.js'\nimport { AccountDeployedMessage } from '../../components/Messages/AccountDeployedMessage.js'\nimport {\n  AddressType,\n  useAddressValidation,\n} from '../../hooks/useAddressValidation.js'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport type { Bookmark } from '../../stores/bookmarks/types.js'\nimport { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'\nimport { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { BookmarkAddressSheet } from './BookmarkAddressSheet.js'\nimport { ConfirmAddressSheet } from './ConfirmAddressSheet.js'\nimport {\n  AddressInput,\n  FullHeightAdjustablePageContainer,\n  SendToWalletButtonRow,\n  SendToWalletCard,\n  SendToWalletIconButton,\n  ValidationAlert,\n} from './SendToWalletPage.style.js'\n\nexport const SendToWalletPage: React.FC = () => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const bookmarkAddressSheetRef = useRef<BottomSheetBase>(null)\n  const confirmAddressSheetRef = useRef<BottomSheetBase>(null)\n  const { bookmarks, recentWallets } = useBookmarks()\n  const {\n    addBookmark,\n    getBookmark,\n    setSelectedBookmark,\n    getSelectedBookmark,\n    addRecentWallet,\n  } = useBookmarkActions()\n  const { setFieldValue } = useFieldActions()\n  const [inputAddressValue, setInputAddressValue] = useState(\n    () => getSelectedBookmark()?.address ?? ''\n  )\n  const [validatedWallet, setValidatedWallet] = useState<Bookmark>()\n  const [errorMessage, setErrorMessage] = useState('')\n  const { validateAddress, isValidating } = useAddressValidation()\n  const { requiredToChainType } = useToAddressRequirements()\n  const [toChainId] = useFieldValues('toChain')\n  const { chain: toChain } = useChain(toChainId)\n  const [isDoneButtonLoading, setIsDoneButtonLoading] = useState(false)\n  const [isBookmarkButtonLoading, setIsBookmarkButtonLoading] = useState(false)\n  const { variant, hiddenUI, requiredUI } = useWidgetConfig()\n\n  const { accounts } = useAccount()\n  const connectedWallets = accounts.filter((account) => account.isConnected)\n\n  useHeader(t('header.sendToWallet'))\n\n  const handleInputChange = (e: ChangeEvent) => {\n    if (errorMessage) {\n      setErrorMessage('')\n    }\n    if (getSelectedBookmark()) {\n      setFieldValue('toAddress', '', { isTouched: true })\n      setSelectedBookmark()\n    }\n    setInputAddressValue((e.target as HTMLInputElement).value.trim())\n  }\n\n  const handleDone = async () => {\n    if (isValidating) {\n      return\n    }\n    if (!inputAddressValue) {\n      setErrorMessage(t('error.title.walletAddressRequired'))\n      return\n    }\n    setIsDoneButtonLoading(true)\n    const validationResult = await validateAddress({\n      value: inputAddressValue,\n      chainType: requiredToChainType,\n      chain: toChain,\n    })\n    setIsDoneButtonLoading(false)\n    if (!validationResult.isValid) {\n      setErrorMessage(validationResult.error)\n      return\n    }\n\n    if (\n      requiredToChainType &&\n      requiredToChainType !== validationResult.chainType\n    ) {\n      setErrorMessage(\n        t('error.title.walletChainTypeInvalid', {\n          chainName: toChain?.name,\n        })\n      )\n      return\n    }\n\n    setValidatedWallet({\n      name:\n        validationResult.addressType === AddressType.NameService\n          ? inputAddressValue\n          : undefined,\n      address: validationResult.address,\n      chainType: validationResult.chainType,\n    })\n    confirmAddressSheetRef.current?.open()\n  }\n\n  const handleBookmarkAddress = async () => {\n    if (isValidating) {\n      return\n    }\n    if (!inputAddressValue) {\n      setErrorMessage(t('error.title.walletAddressRequired'))\n      return\n    }\n\n    const existingBookmarkWallet = getBookmark(inputAddressValue)\n    if (existingBookmarkWallet) {\n      setErrorMessage(\n        t('error.title.bookmarkAlreadyExists', {\n          name: existingBookmarkWallet.name,\n        })\n      )\n      return\n    }\n    setIsBookmarkButtonLoading(true)\n    const validationResult = await validateAddress({\n      value: inputAddressValue,\n    })\n    setIsBookmarkButtonLoading(false)\n\n    if (validationResult.isValid) {\n      setValidatedWallet({\n        name:\n          validationResult.addressType === AddressType.NameService\n            ? inputAddressValue\n            : undefined,\n        address: validationResult.address,\n        chainType: validationResult.chainType,\n      })\n      bookmarkAddressSheetRef.current?.open()\n    } else {\n      setErrorMessage(validationResult.error)\n    }\n  }\n\n  const handleRecentWalletsClick = () => {\n    navigate({ to: navigationRoutes.recentWallets })\n  }\n\n  const handleConnectedWalletsClick = () => {\n    navigate({ to: navigationRoutes.connectedWallets })\n  }\n  const handleBookmarkedWalletsClick = () => {\n    navigate({ to: navigationRoutes.bookmarks })\n  }\n\n  const handleAddBookmark = (bookmark: Bookmark) => {\n    addBookmark(bookmark)\n    navigate({ to: navigationRoutes.bookmarks })\n  }\n\n  const handleOnConfirm = (confirmedWallet: Bookmark) => {\n    setSelectedBookmark(confirmedWallet)\n    addRecentWallet(confirmedWallet)\n  }\n\n  const placeholder = t('sendToWallet.enterAddress', {\n    context: 'long',\n  })\n\n  return (\n    <FullHeightAdjustablePageContainer\n      topGutters\n      bottomGutters\n      enableFullHeight={variant !== 'drawer'}\n    >\n      <Box\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: 2,\n          marginBottom: 6,\n        }}\n      >\n        <SendToWalletCard type={errorMessage ? 'error' : 'default'}>\n          <AddressInput\n            size=\"small\"\n            autoComplete=\"off\"\n            autoCorrect=\"off\"\n            autoCapitalize=\"off\"\n            spellCheck=\"false\"\n            onChange={handleInputChange}\n            value={inputAddressValue}\n            placeholder={placeholder}\n            aria-label={placeholder}\n            maxRows={2}\n            inputProps={{ maxLength: 128 }}\n            multiline\n          />\n          {errorMessage ? (\n            <ValidationAlert icon={<ErrorIcon />} sx={{ pb: 2, paddingX: 2 }}>\n              {errorMessage}\n            </ValidationAlert>\n          ) : null}\n          <SendToWalletButtonRow sx={{ paddingX: 2, paddingBottom: 2 }}>\n            <ButtonTertiary\n              variant=\"text\"\n              onClick={handleDone}\n              loading={isDoneButtonLoading}\n              loadingPosition=\"center\"\n              sx={{ flexGrow: 1 }}\n            >\n              {t('button.done')}\n            </ButtonTertiary>\n            <Tooltip title={t('button.bookmark')}>\n              <SendToWalletIconButton\n                onClick={handleBookmarkAddress}\n                loading={isBookmarkButtonLoading}\n                loadingPosition=\"center\"\n              >\n                <TurnedIn fontSize=\"small\" />\n              </SendToWalletIconButton>\n            </Tooltip>\n          </SendToWalletButtonRow>\n          <ConfirmAddressSheet\n            ref={confirmAddressSheetRef}\n            validatedBookmark={validatedWallet}\n            onConfirm={handleOnConfirm}\n          />\n          <BookmarkAddressSheet\n            ref={bookmarkAddressSheetRef}\n            validatedWallet={validatedWallet}\n            onAddBookmark={handleAddBookmark}\n          />\n        </SendToWalletCard>\n        {requiredUI?.accountDeployedMessage && <AccountDeployedMessage />}\n      </Box>\n      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>\n        <CardButton\n          title={t('header.recentWallets')}\n          icon={<AccountBalanceWalletIcon />}\n          onClick={handleRecentWalletsClick}\n        >\n          {!!recentWallets.length && (\n            <Typography\n              sx={{\n                color: 'text.secondary',\n              }}\n            >\n              {recentWallets.length}\n            </Typography>\n          )}\n        </CardButton>\n        {!hiddenUI?.addressBookConnectedWallets && (\n          <CardButton\n            title={t('sendToWallet.connectedWallets')}\n            icon={<Wallet />}\n            onClick={handleConnectedWalletsClick}\n          >\n            {!!connectedWallets.length && (\n              <Typography\n                sx={{\n                  color: 'text.secondary',\n                }}\n              >\n                {connectedWallets.length}\n              </Typography>\n            )}\n          </CardButton>\n        )}\n        <CardButton\n          title={t('header.bookmarkedWallets')}\n          icon={<TurnedIn />}\n          onClick={handleBookmarkedWalletsClick}\n        >\n          {!!bookmarks.length && (\n            <Typography\n              sx={{\n                color: 'text.secondary',\n              }}\n            >\n              {bookmarks.length}\n            </Typography>\n          )}\n        </CardButton>\n      </Box>\n    </FullHeightAdjustablePageContainer>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"SendToWalletPage.js","names":[],"sources":["../../../../src/pages/SendToWallet/SendToWalletPage.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet'\nimport ErrorIcon from '@mui/icons-material/Error'\nimport TurnedIn from '@mui/icons-material/TurnedIn'\nimport Wallet from '@mui/icons-material/Wallet'\nimport { Box, Tooltip, Typography } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { ChangeEvent } from 'react'\nimport { useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { BottomSheetBase } from '../../components/BottomSheet/types.js'\nimport { ButtonTertiary } from '../../components/ButtonTertiary.js'\nimport { CardButton } from '../../components/Card/CardButton.js'\nimport { AccountDeployedMessage } from '../../components/Messages/AccountDeployedMessage.js'\nimport {\n  AddressType,\n  useAddressValidation,\n} from '../../hooks/useAddressValidation.js'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport type { Bookmark } from '../../stores/bookmarks/types.js'\nimport { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'\nimport { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { BookmarkAddressSheet } from './BookmarkAddressSheet.js'\nimport { ConfirmAddressSheet } from './ConfirmAddressSheet.js'\nimport {\n  AddressInput,\n  FullHeightAdjustablePageContainer,\n  SendToWalletButtonRow,\n  SendToWalletCard,\n  SendToWalletIconButton,\n  ValidationAlert,\n} from './SendToWalletPage.style.js'\n\nexport const SendToWalletPage: React.FC = () => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const bookmarkAddressSheetRef = useRef<BottomSheetBase>(null)\n  const confirmAddressSheetRef = useRef<BottomSheetBase>(null)\n  const { bookmarks, recentWallets } = useBookmarks()\n  const {\n    addBookmark,\n    getBookmark,\n    setSelectedBookmark,\n    getSelectedBookmark,\n    addRecentWallet,\n  } = useBookmarkActions()\n  const { setFieldValue } = useFieldActions()\n  const [inputAddressValue, setInputAddressValue] = useState(\n    () => getSelectedBookmark()?.address ?? ''\n  )\n  const [validatedWallet, setValidatedWallet] = useState<Bookmark>()\n  const [errorMessage, setErrorMessage] = useState('')\n  const { validateAddress, isValidating } = useAddressValidation()\n  const { requiredToChainType } = useToAddressRequirements()\n  const [toChainId] = useFieldValues('toChain')\n  const { chain: toChain } = useChain(toChainId)\n  const [isDoneButtonLoading, setIsDoneButtonLoading] = useState(false)\n  const [isBookmarkButtonLoading, setIsBookmarkButtonLoading] = useState(false)\n  const { variant, hiddenUI, requiredUI } = useWidgetConfig()\n\n  const { accounts } = useAccount()\n  const connectedWallets = accounts.filter((account) => account.isConnected)\n\n  useHeader(t('header.sendToWallet'))\n\n  const handleInputChange = (e: ChangeEvent) => {\n    if (errorMessage) {\n      setErrorMessage('')\n    }\n    if (getSelectedBookmark()) {\n      setFieldValue('toAddress', '', { isTouched: true })\n      setSelectedBookmark()\n    }\n    setInputAddressValue((e.target as HTMLInputElement).value.trim())\n  }\n\n  const handleDone = async () => {\n    if (isValidating) {\n      return\n    }\n    if (!inputAddressValue) {\n      setErrorMessage(t('error.title.walletAddressRequired'))\n      return\n    }\n    setIsDoneButtonLoading(true)\n    const validationResult = await validateAddress({\n      value: inputAddressValue,\n      chainType: requiredToChainType,\n      chain: toChain,\n    })\n    setIsDoneButtonLoading(false)\n    if (!validationResult.isValid) {\n      setErrorMessage(validationResult.error)\n      return\n    }\n\n    if (\n      requiredToChainType &&\n      requiredToChainType !== validationResult.chainType\n    ) {\n      setErrorMessage(\n        t('error.title.walletChainTypeInvalid', {\n          chainName: toChain?.name,\n        })\n      )\n      return\n    }\n\n    setValidatedWallet({\n      name:\n        validationResult.addressType === AddressType.NameService\n          ? inputAddressValue\n          : undefined,\n      address: validationResult.address,\n      chainType: validationResult.chainType,\n    })\n    confirmAddressSheetRef.current?.open()\n  }\n\n  const handleBookmarkAddress = async () => {\n    if (isValidating) {\n      return\n    }\n    if (!inputAddressValue) {\n      setErrorMessage(t('error.title.walletAddressRequired'))\n      return\n    }\n\n    const existingBookmarkWallet = getBookmark(inputAddressValue)\n    if (existingBookmarkWallet) {\n      setErrorMessage(\n        t('error.title.bookmarkAlreadyExists', {\n          name: existingBookmarkWallet.name,\n        })\n      )\n      return\n    }\n    setIsBookmarkButtonLoading(true)\n    const validationResult = await validateAddress({\n      value: inputAddressValue,\n    })\n    setIsBookmarkButtonLoading(false)\n\n    if (validationResult.isValid) {\n      setValidatedWallet({\n        name:\n          validationResult.addressType === AddressType.NameService\n            ? inputAddressValue\n            : undefined,\n        address: validationResult.address,\n        chainType: validationResult.chainType,\n      })\n      bookmarkAddressSheetRef.current?.open()\n    } else {\n      setErrorMessage(validationResult.error)\n    }\n  }\n\n  const handleRecentWalletsClick = () => {\n    navigate({ to: navigationRoutes.recentWallets })\n  }\n\n  const handleConnectedWalletsClick = () => {\n    navigate({ to: navigationRoutes.connectedWallets })\n  }\n  const handleBookmarkedWalletsClick = () => {\n    navigate({ to: navigationRoutes.bookmarks })\n  }\n\n  const handleAddBookmark = (bookmark: Bookmark) => {\n    addBookmark(bookmark)\n    navigate({ to: navigationRoutes.bookmarks })\n  }\n\n  const handleOnConfirm = (confirmedWallet: Bookmark) => {\n    setSelectedBookmark(confirmedWallet)\n    addRecentWallet(confirmedWallet)\n  }\n\n  const placeholder = t('sendToWallet.enterAddress', {\n    context: 'long',\n  })\n\n  return (\n    <FullHeightAdjustablePageContainer\n      topGutters\n      bottomGutters\n      enableFullHeight={variant !== 'drawer'}\n    >\n      <Box\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: 2,\n          marginBottom: 6,\n        }}\n      >\n        <SendToWalletCard type={errorMessage ? 'error' : 'default'}>\n          <AddressInput\n            size=\"small\"\n            autoComplete=\"off\"\n            autoCorrect=\"off\"\n            autoCapitalize=\"off\"\n            spellCheck=\"false\"\n            onChange={handleInputChange}\n            value={inputAddressValue}\n            placeholder={placeholder}\n            aria-label={placeholder}\n            maxRows={2}\n            inputProps={{ maxLength: 128 }}\n            multiline\n          />\n          {errorMessage ? (\n            <ValidationAlert icon={<ErrorIcon />} sx={{ pb: 2, paddingX: 2 }}>\n              {errorMessage}\n            </ValidationAlert>\n          ) : null}\n          <SendToWalletButtonRow sx={{ paddingX: 2, paddingBottom: 2 }}>\n            <ButtonTertiary\n              variant=\"text\"\n              onClick={handleDone}\n              loading={isDoneButtonLoading}\n              loadingPosition=\"center\"\n              sx={{ flexGrow: 1 }}\n            >\n              {t('button.done')}\n            </ButtonTertiary>\n            <Tooltip title={t('button.bookmark')}>\n              <SendToWalletIconButton\n                onClick={handleBookmarkAddress}\n                loading={isBookmarkButtonLoading}\n                loadingPosition=\"center\"\n              >\n                <TurnedIn fontSize=\"small\" />\n              </SendToWalletIconButton>\n            </Tooltip>\n          </SendToWalletButtonRow>\n          <ConfirmAddressSheet\n            ref={confirmAddressSheetRef}\n            validatedBookmark={validatedWallet}\n            onConfirm={handleOnConfirm}\n          />\n          <BookmarkAddressSheet\n            ref={bookmarkAddressSheetRef}\n            validatedWallet={validatedWallet}\n            onAddBookmark={handleAddBookmark}\n          />\n        </SendToWalletCard>\n        {requiredUI?.accountDeployedMessage && <AccountDeployedMessage />}\n      </Box>\n      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>\n        <CardButton\n          title={t('header.recentWallets')}\n          icon={<AccountBalanceWalletIcon />}\n          onClick={handleRecentWalletsClick}\n        >\n          {!!recentWallets.length && (\n            <Typography\n              sx={{\n                color: 'text.secondary',\n              }}\n            >\n              {recentWallets.length}\n            </Typography>\n          )}\n        </CardButton>\n        {!hiddenUI?.addressBookConnectedWallets && (\n          <CardButton\n            title={t('sendToWallet.connectedWallets')}\n            icon={<Wallet />}\n            onClick={handleConnectedWalletsClick}\n          >\n            {!!connectedWallets.length && (\n              <Typography\n                sx={{\n                  color: 'text.secondary',\n                }}\n              >\n                {connectedWallets.length}\n              </Typography>\n            )}\n          </CardButton>\n        )}\n        <CardButton\n          title={t('header.bookmarkedWallets')}\n          icon={<TurnedIn />}\n          onClick={handleBookmarkedWalletsClick}\n        >\n          {!!bookmarks.length && (\n            <Typography\n              sx={{\n                color: 'text.secondary',\n              }}\n            >\n              {bookmarks.length}\n            </Typography>\n          )}\n        </CardButton>\n      </Box>\n    </FullHeightAdjustablePageContainer>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/pages/SendToWallet/SendToWalletPage.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"SendToWalletPage.style.js","names":[],"sources":["../../../../src/pages/SendToWallet/SendToWalletPage.style.tsx"],"sourcesContent":["import {\n  Alert,\n  alertClasses,\n  Box,\n  inputBaseClasses,\n  styled,\n  Typography,\n} from '@mui/material'\nimport type React from 'react'\nimport { ButtonTertiary } from '../../components/ButtonTertiary.js'\nimport { InputCard } from '../../components/Card/InputCard.js'\nimport { Input } from '../../components/Input.js'\nimport type { PageContainerProps } from '../../components/PageContainer.js'\nimport { PageContainer } from '../../components/PageContainer.js'\n\nexport const AddressInput: React.FC<\n  React.ComponentProps<typeof Input> & PageContainerProps\n> = styled(Input)(({ theme }) => ({\n  padding: 0,\n  [`.${inputBaseClasses.input}`]: {\n    padding: theme.spacing(2),\n    minHeight: 48,\n  },\n}))\n\nexport const BookmarkInputFields: React.FC<\n  React.ComponentProps<typeof Box> & PageContainerProps\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  width: '100%',\n}))\n\ninterface FullHeightAdjustablePageContainerProps extends PageContainerProps {\n  enableFullHeight?: boolean\n}\n\nexport const FullHeightAdjustablePageContainer: React.FC<\n  React.ComponentProps<typeof PageContainer> &\n    FullHeightAdjustablePageContainerProps\n> = styled(PageContainer, {\n  shouldForwardProp: (prop) => prop !== 'enableFullHeight',\n})<FullHeightAdjustablePageContainerProps>(({ theme, enableFullHeight }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(1),\n  justifyContent: 'space-between',\n  ...(enableFullHeight && theme.container?.height === '100%'\n    ? {\n        height: '100%',\n      }\n    : {}),\n}))\n\nexport const SendToWalletCard: React.FC<\n  React.ComponentProps<typeof InputCard>\n> = styled(InputCard)({\n  display: 'flex',\n  flexDirection: 'column',\n})\n\nexport const SendToWalletSheetContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  padding: theme.spacing(4, 3, 3),\n  gap: theme.spacing(2),\n}))\n\nexport const SendToWalletButtonRow: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    width: '100%',\n    gap: theme.spacing(1),\n  }))\n\nexport const SendToWalletIconButton: React.FC<\n  React.ComponentProps<typeof ButtonTertiary>\n> = styled(ButtonTertiary)(({ theme }) => ({\n  padding: theme.spacing(1.25),\n  minWidth: 40,\n}))\n\nexport const IconContainer: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  width: 80,\n  height: 80,\n  borderRadius: '50%',\n  color: theme.vars.palette.grey[800],\n  background: theme.vars.palette.grey[300],\n  ...theme.applyStyles('dark', {\n    color: theme.vars.palette.grey[300],\n    background: theme.vars.palette.grey[800],\n  }),\n}))\n\nexport const SheetTitle: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)(() => ({\n    fontSize: 18,\n    fontWeight: 700,\n  }))\n\nexport const SheetAddressContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(() => ({\n    width: '100%',\n    wordWrap: 'break-word',\n  }))\n\nexport const BookmarkButtonContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  background: theme.vars.palette.background.default,\n  display: 'flex',\n  flexDirection: 'column',\n  flexShrink: 0,\n  padding: theme.spacing(2, 3, 3),\n  width: '100%',\n}))\n\nexport const ValidationAlert: React.FC<React.ComponentProps<typeof Alert>> =\n  styled(Alert)(({ theme }) => ({\n    backgroundColor: 'transparent',\n    padding: 0,\n    color: theme.vars.palette.text.primary,\n    [`.${alertClasses.icon}`]: {\n      padding: 0,\n      color: theme.vars.palette.error.main,\n    },\n    [`.${alertClasses.message}`]: { padding: theme.spacing(0.25, 0, 0, 0) },\n  }))\n"],"mappings":";;;;;;AAeA,MAAa,eAET,OAAO,KAAK,GAAG,EAAE,aAAa;CAChC,SAAS;EACR,IAAI,iBAAiB,UAAU;EAC9B,SAAS,MAAM,QAAQ,CAAC;EACxB,WAAW;CACb;AACF,EAAE;AAEF,MAAa,sBAET,OAAO,GAAG,GAAG,EAAE,aAAa;CAC9B,SAAS;CACT,eAAe;CACf,KAAK,MAAM,QAAQ,CAAC;CACpB,OAAO;AACT,EAAE;AAMF,MAAa,oCAGT,OAAO,eAAe,EACxB,oBAAoB,SAAS,SAAS,mBACxC,CAAC,GAA2C,EAAE,OAAO,wBAAwB;CAC3E,SAAS;CACT,eAAe;CACf,KAAK,MAAM,QAAQ,CAAC;CACpB,gBAAgB;CAChB,GAAI,oBAAoB,MAAM,WAAW,WAAW,SAChD,EACE,QAAQ,OACV,IACA,CAAC;AACP,EAAE;AAEF,MAAa,mBAET,OAAO,SAAS,EAAE;CACpB,SAAS;CACT,eAAe;AACjB,CAAC;AAED,MAAa,6BAET,OAAO,GAAG,GAAG,EAAE,aAAa;CAC9B,SAAS;CACT,eAAe;CACf,YAAY;CACZ,SAAS,MAAM,QAAQ,GAAG,GAAG,CAAC;CAC9B,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;AAEF,MAAa,wBACX,OAAO,GAAG,GAAG,EAAE,aAAa;CAC1B,SAAS;CACT,OAAO;CACP,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;AAEJ,MAAa,yBAET,OAAO,cAAc,GAAG,EAAE,aAAa;CACzC,SAAS,MAAM,QAAQ,IAAI;CAC3B,UAAU;AACZ,EAAE;AAEF,MAAa,gBAA4D,OACvE,GACF,GAAG,EAAE,aAAa;CAChB,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,OAAO;CACP,QAAQ;CACR,cAAc;CACd,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,YAAY,MAAM,KAAK,QAAQ,KAAK;CACpC,GAAG,MAAM,YAAY,QAAQ;EAC3B,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,YAAY,MAAM,KAAK,QAAQ,KAAK;CACtC,CAAC;AACH,EAAE;AAEF,MAAa,aACX,OAAO,UAAU,SAAS;CACxB,UAAU;CACV,YAAY;AACd,EAAE;AAEJ,MAAa,wBACX,OAAO,GAAG,SAAS;CACjB,OAAO;CACP,UAAU;AACZ,EAAE;AAEJ,MAAa,0BAET,OAAO,GAAG,GAAG,EAAE,aAAa;CAC9B,YAAY,MAAM,KAAK,QAAQ,WAAW;CAC1C,SAAS;CACT,eAAe;CACf,YAAY;CACZ,SAAS,MAAM,QAAQ,GAAG,GAAG,CAAC;CAC9B,OAAO;AACT,EAAE;AAEF,MAAa,kBACX,OAAO,KAAK,GAAG,EAAE,aAAa;CAC5B,iBAAiB;CACjB,SAAS;CACT,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC9B,IAAI,aAAa,SAAS;EACzB,SAAS;EACT,OAAO,MAAM,KAAK,QAAQ,MAAM;CAClC;EACC,IAAI,aAAa,YAAY,EAAE,SAAS,MAAM,QAAQ,KAAM,GAAG,GAAG,CAAC,EAAE;AACxE,EAAE"}
+{"version":3,"file":"SendToWalletPage.style.js","names":[],"sources":["../../../../src/pages/SendToWallet/SendToWalletPage.style.tsx"],"sourcesContent":["import {\n  Alert,\n  alertClasses,\n  Box,\n  inputBaseClasses,\n  styled,\n  Typography,\n} from '@mui/material'\nimport type React from 'react'\nimport { ButtonTertiary } from '../../components/ButtonTertiary.js'\nimport { InputCard } from '../../components/Card/InputCard.js'\nimport { Input } from '../../components/Input.js'\nimport type { PageContainerProps } from '../../components/PageContainer.js'\nimport { PageContainer } from '../../components/PageContainer.js'\n\nexport const AddressInput: React.FC<\n  React.ComponentProps<typeof Input> & PageContainerProps\n> = styled(Input)(({ theme }) => ({\n  padding: 0,\n  [`.${inputBaseClasses.input}`]: {\n    padding: theme.spacing(2),\n    minHeight: 48,\n  },\n}))\n\nexport const BookmarkInputFields: React.FC<\n  React.ComponentProps<typeof Box> & PageContainerProps\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  width: '100%',\n}))\n\ninterface FullHeightAdjustablePageContainerProps extends PageContainerProps {\n  enableFullHeight?: boolean\n}\n\nexport const FullHeightAdjustablePageContainer: React.FC<\n  React.ComponentProps<typeof PageContainer> &\n    FullHeightAdjustablePageContainerProps\n> = styled(PageContainer, {\n  shouldForwardProp: (prop) => prop !== 'enableFullHeight',\n})<FullHeightAdjustablePageContainerProps>(({ theme, enableFullHeight }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(1),\n  justifyContent: 'space-between',\n  ...(enableFullHeight && theme.container?.height === '100%'\n    ? {\n        height: '100%',\n      }\n    : {}),\n}))\n\nexport const SendToWalletCard: React.FC<\n  React.ComponentProps<typeof InputCard>\n> = styled(InputCard)({\n  display: 'flex',\n  flexDirection: 'column',\n})\n\nexport const SendToWalletSheetContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  padding: theme.spacing(4, 3, 3),\n  gap: theme.spacing(2),\n}))\n\nexport const SendToWalletButtonRow: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    width: '100%',\n    gap: theme.spacing(1),\n  }))\n\nexport const SendToWalletIconButton: React.FC<\n  React.ComponentProps<typeof ButtonTertiary>\n> = styled(ButtonTertiary)(({ theme }) => ({\n  padding: theme.spacing(1.25),\n  minWidth: 40,\n}))\n\nexport const IconContainer: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  width: 80,\n  height: 80,\n  borderRadius: '50%',\n  color: theme.vars.palette.grey[800],\n  background: theme.vars.palette.grey[300],\n  ...theme.applyStyles('dark', {\n    color: theme.vars.palette.grey[300],\n    background: theme.vars.palette.grey[800],\n  }),\n}))\n\nexport const SheetTitle: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)(() => ({\n    fontSize: 18,\n    fontWeight: 700,\n  }))\n\nexport const SheetAddressContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(() => ({\n    width: '100%',\n    wordWrap: 'break-word',\n  }))\n\nexport const BookmarkButtonContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  background: theme.vars.palette.background.default,\n  display: 'flex',\n  flexDirection: 'column',\n  flexShrink: 0,\n  padding: theme.spacing(2, 3, 3),\n  width: '100%',\n}))\n\nexport const ValidationAlert: React.FC<React.ComponentProps<typeof Alert>> =\n  styled(Alert)(({ theme }) => ({\n    backgroundColor: 'transparent',\n    padding: 0,\n    color: theme.vars.palette.text.primary,\n    [`.${alertClasses.icon}`]: {\n      padding: 0,\n      color: theme.vars.palette.error.main,\n    },\n    [`.${alertClasses.message}`]: { padding: theme.spacing(0.25, 0, 0, 0) },\n  }))\n"],"mappings":";;;;;;AAeA,MAAa,eAET,OAAO,KAAK,CAAC,EAAE,EAAE,aAAa;CAChC,SAAS;EACR,IAAI,iBAAiB,UAAU;EAC9B,SAAS,MAAM,QAAQ,CAAC;EACxB,WAAW;CACb;AACF,EAAE;AAEF,MAAa,sBAET,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,eAAe;CACf,KAAK,MAAM,QAAQ,CAAC;CACpB,OAAO;AACT,EAAE;AAMF,MAAa,oCAGT,OAAO,eAAe,EACxB,oBAAoB,SAAS,SAAS,mBACxC,CAAC,CAAC,EAA0C,EAAE,OAAO,wBAAwB;CAC3E,SAAS;CACT,eAAe;CACf,KAAK,MAAM,QAAQ,CAAC;CACpB,gBAAgB;CAChB,GAAI,oBAAoB,MAAM,WAAW,WAAW,SAChD,EACE,QAAQ,OACV,IACA,CAAC;AACP,EAAE;AAEF,MAAa,mBAET,OAAO,SAAS,CAAC,CAAC;CACpB,SAAS;CACT,eAAe;AACjB,CAAC;AAED,MAAa,6BAET,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,eAAe;CACf,YAAY;CACZ,SAAS,MAAM,QAAQ,GAAG,GAAG,CAAC;CAC9B,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;AAEF,MAAa,wBACX,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,OAAO;CACP,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;AAEJ,MAAa,yBAET,OAAO,cAAc,CAAC,EAAE,EAAE,aAAa;CACzC,SAAS,MAAM,QAAQ,IAAI;CAC3B,UAAU;AACZ,EAAE;AAEF,MAAa,gBAA4D,OACvE,GACF,CAAC,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,OAAO;CACP,QAAQ;CACR,cAAc;CACd,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,YAAY,MAAM,KAAK,QAAQ,KAAK;CACpC,GAAG,MAAM,YAAY,QAAQ;EAC3B,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,YAAY,MAAM,KAAK,QAAQ,KAAK;CACtC,CAAC;AACH,EAAE;AAEF,MAAa,aACX,OAAO,UAAU,CAAC,QAAQ;CACxB,UAAU;CACV,YAAY;AACd,EAAE;AAEJ,MAAa,wBACX,OAAO,GAAG,CAAC,QAAQ;CACjB,OAAO;CACP,UAAU;AACZ,EAAE;AAEJ,MAAa,0BAET,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC9B,YAAY,MAAM,KAAK,QAAQ,WAAW;CAC1C,SAAS;CACT,eAAe;CACf,YAAY;CACZ,SAAS,MAAM,QAAQ,GAAG,GAAG,CAAC;CAC9B,OAAO;AACT,EAAE;AAEF,MAAa,kBACX,OAAO,KAAK,CAAC,EAAE,EAAE,aAAa;CAC5B,iBAAiB;CACjB,SAAS;CACT,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC9B,IAAI,aAAa,SAAS;EACzB,SAAS;EACT,OAAO,MAAM,KAAK,QAAQ,MAAM;CAClC;EACC,IAAI,aAAa,YAAY,EAAE,SAAS,MAAM,QAAQ,KAAM,GAAG,GAAG,CAAC,EAAE;AACxE,EAAE"}

package/dist/esm/pages/SettingsPage/BridgeAndExchangeSettings.js

@@ -7,12 +7,12 @@ import { BadgedValue } from "./SettingsCard/BadgedValue.js";
 import { useNavigate } from "@tanstack/react-router";
 import { jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
+import SwapHorizIcon from "@mui/icons-material/SwapHoriz";
 import AirlineStops from "@mui/icons-material/AirlineStops";
-import SwapHoriz from "@mui/icons-material/SwapHoriz";
 //#region src/pages/SettingsPage/BridgeAndExchangeSettings.tsx
 const supportedIcons = {
 	Bridges: AirlineStops,
-	Exchanges: SwapHoriz
+	Exchanges: SwapHorizIcon
 };
 const BridgeAndExchangeSettings = ({ type }) => {
 	const { isBridgesChanged, isExchangesChanged } = useSettingMonitor();

package/dist/esm/pages/SettingsPage/BridgeAndExchangeSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"BridgeAndExchangeSettings.js","names":[],"sources":["../../../../src/pages/SettingsPage/BridgeAndExchangeSettings.tsx"],"sourcesContent":["import AirlineStops from '@mui/icons-material/AirlineStops'\nimport SwapHoriz from '@mui/icons-material/SwapHoriz'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useTranslation } from 'react-i18next'\nimport { CardButton } from '../../components/Card/CardButton.js'\nimport { useSettingMonitor } from '../../hooks/useSettingMonitor.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useSettingsStore } from '../../stores/settings/SettingsStore.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { BadgedValue } from './SettingsCard/BadgedValue.js'\n\nconst supportedIcons = {\n  Bridges: AirlineStops,\n  Exchanges: SwapHoriz,\n}\n\nexport const BridgeAndExchangeSettings: React.FC<{\n  type: 'Bridges' | 'Exchanges'\n}> = ({ type }) => {\n  const { isBridgesChanged, isExchangesChanged } = useSettingMonitor()\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const [enabledTools, tools] = useSettingsStore((state) => {\n    const enabledTools = Object.values(state[`_enabled${type}`])\n    return [enabledTools.filter(Boolean).length, enabledTools.length]\n  })\n\n  const { hiddenUI } = useWidgetConfig()\n\n  if (type === 'Bridges' && hiddenUI?.bridgesSettings) {\n    return null\n  }\n\n  const customisationLookUp = {\n    Bridges: isBridgesChanged,\n    Exchanges: isExchangesChanged,\n  }\n\n  const handleClick = () => {\n    navigate({\n      to: navigationRoutes[type.toLowerCase() as 'bridges' | 'exchanges'],\n    })\n  }\n\n  const Icon = supportedIcons[type]\n\n  return (\n    <CardButton\n      onClick={handleClick}\n      icon={<Icon />}\n      title={t(`settings.enabled${type}`)}\n    >\n      <BadgedValue\n        badgeColor=\"info\"\n        showBadge={customisationLookUp[type]}\n      >{`${enabledTools}/${tools}`}</BadgedValue>\n    </CardButton>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAWA,MAAM,iBAAiB;CACrB,SAAS;CACT,WAAW;AACb;AAEA,MAAa,6BAEP,EAAE,WAAW;CACjB,MAAM,EAAE,kBAAkB,uBAAuB,kBAAkB;CACnE,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,CAAC,cAAc,SAAS,kBAAkB,UAAU;EACxD,MAAM,eAAe,OAAO,OAAO,MAAM,WAAW,OAAO;EAC3D,OAAO,CAAC,aAAa,OAAO,OAAO,EAAE,QAAQ,aAAa,MAAM;CAClE,CAAC;CAED,MAAM,EAAE,aAAa,gBAAgB;CAErC,IAAI,SAAS,aAAa,UAAU,iBAClC,OAAO;CAGT,MAAM,sBAAsB;EAC1B,SAAS;EACT,WAAW;CACb;CAEA,MAAM,oBAAoB;EACxB,SAAS,EACP,IAAI,iBAAiB,KAAK,YAAY,GACxC,CAAC;CACH;CAEA,MAAM,OAAO,eAAe;CAE5B,OACE,oBAAC,YAAD;EACE,SAAS;EACT,MAAM,oBAAC,MAAD,CAAO,CAAA;EACb,OAAO,EAAE,mBAAmB,MAAM;YAElC,oBAAC,aAAD;GACE,YAAW;GACX,WAAW,oBAAoB;aAC/B,GAAG,aAAa,GAAG;EAAqB,CAAA;CAChC,CAAA;AAEhB"}
+{"version":3,"file":"BridgeAndExchangeSettings.js","names":["SwapHoriz"],"sources":["../../../../src/pages/SettingsPage/BridgeAndExchangeSettings.tsx"],"sourcesContent":["import AirlineStops from '@mui/icons-material/AirlineStops'\nimport SwapHoriz from '@mui/icons-material/SwapHoriz'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useTranslation } from 'react-i18next'\nimport { CardButton } from '../../components/Card/CardButton.js'\nimport { useSettingMonitor } from '../../hooks/useSettingMonitor.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useSettingsStore } from '../../stores/settings/SettingsStore.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { BadgedValue } from './SettingsCard/BadgedValue.js'\n\nconst supportedIcons = {\n  Bridges: AirlineStops,\n  Exchanges: SwapHoriz,\n}\n\nexport const BridgeAndExchangeSettings: React.FC<{\n  type: 'Bridges' | 'Exchanges'\n}> = ({ type }) => {\n  const { isBridgesChanged, isExchangesChanged } = useSettingMonitor()\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const [enabledTools, tools] = useSettingsStore((state) => {\n    const enabledTools = Object.values(state[`_enabled${type}`])\n    return [enabledTools.filter(Boolean).length, enabledTools.length]\n  })\n\n  const { hiddenUI } = useWidgetConfig()\n\n  if (type === 'Bridges' && hiddenUI?.bridgesSettings) {\n    return null\n  }\n\n  const customisationLookUp = {\n    Bridges: isBridgesChanged,\n    Exchanges: isExchangesChanged,\n  }\n\n  const handleClick = () => {\n    navigate({\n      to: navigationRoutes[type.toLowerCase() as 'bridges' | 'exchanges'],\n    })\n  }\n\n  const Icon = supportedIcons[type]\n\n  return (\n    <CardButton\n      onClick={handleClick}\n      icon={<Icon />}\n      title={t(`settings.enabled${type}`)}\n    >\n      <BadgedValue\n        badgeColor=\"info\"\n        showBadge={customisationLookUp[type]}\n      >{`${enabledTools}/${tools}`}</BadgedValue>\n    </CardButton>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAWA,MAAM,iBAAiB;CACrB,SAAS;CACT,WAAWA;AACb;AAEA,MAAa,6BAEP,EAAE,WAAW;CACjB,MAAM,EAAE,kBAAkB,uBAAuB,kBAAkB;CACnE,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,CAAC,cAAc,SAAS,kBAAkB,UAAU;EACxD,MAAM,eAAe,OAAO,OAAO,MAAM,WAAW,OAAO;EAC3D,OAAO,CAAC,aAAa,OAAO,OAAO,CAAC,CAAC,QAAQ,aAAa,MAAM;CAClE,CAAC;CAED,MAAM,EAAE,aAAa,gBAAgB;CAErC,IAAI,SAAS,aAAa,UAAU,iBAClC,OAAO;CAGT,MAAM,sBAAsB;EAC1B,SAAS;EACT,WAAW;CACb;CAEA,MAAM,oBAAoB;EACxB,SAAS,EACP,IAAI,iBAAiB,KAAK,YAAY,GACxC,CAAC;CACH;CAEA,MAAM,OAAO,eAAe;CAE5B,OACE,oBAAC,YAAD;EACE,SAAS;EACT,MAAM,oBAAC,MAAD,CAAO,CAAA;EACb,OAAO,EAAE,mBAAmB,MAAM;YAElC,oBAAC,aAAD;GACE,YAAW;GACX,WAAW,oBAAoB;aAC/B,GAAG,aAAa,GAAG;EAAqB,CAAA;CAChC,CAAA;AAEhB"}

package/dist/esm/pages/SettingsPage/GasPriceSettings.js

@@ -1,7 +1,7 @@
 import { useSettingsActions } from "../../stores/settings/useSettingsActions.js";
 import { useSettings } from "../../stores/settings/useSettings.js";
-import { useSettingMonitor } from "../../hooks/useSettingMonitor.js";
 import { CardTabs, Tab } from "../../components/Tabs/Tabs.style.js";
+import { useSettingMonitor } from "../../hooks/useSettingMonitor.js";
 import { BadgedValue } from "./SettingsCard/BadgedValue.js";
 import { SettingCardExpandable } from "./SettingsCard/SettingCardExpandable.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/esm/pages/SettingsPage/ResetSettingsButton.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResetSettingsButton.style.js","names":[],"sources":["../../../../src/pages/SettingsPage/ResetSettingsButton.style.tsx"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const ResetButtonContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    background: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n    borderRadius: '16px',\n    padding: '16px',\n    svg: {\n      fill: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 40%, transparent)`,\n    },\n  }))\n"],"mappings":";;AAGA,MAAa,uBACX,OAAO,GAAG,GAAG,EAAE,aAAa;CAC1B,YAAY,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CACzE,cAAc;CACd,SAAS;CACT,KAAK,EACH,MAAM,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBACrE;AACF,EAAE"}
+{"version":3,"file":"ResetSettingsButton.style.js","names":[],"sources":["../../../../src/pages/SettingsPage/ResetSettingsButton.style.tsx"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const ResetButtonContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    background: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n    borderRadius: '16px',\n    padding: '16px',\n    svg: {\n      fill: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 40%, transparent)`,\n    },\n  }))\n"],"mappings":";;AAGA,MAAa,uBACX,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC1B,YAAY,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CACzE,cAAc;CACd,SAAS;CACT,KAAK,EACH,MAAM,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBACrE;AACF,EAAE"}

package/dist/esm/pages/SettingsPage/RoutePrioritySettings.js

@@ -1,44 +1,29 @@
-import { useSettingsActions } from "../../stores/settings/useSettingsActions.js";
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
 import { useSettings } from "../../stores/settings/useSettings.js";
 import { useSettingMonitor } from "../../hooks/useSettingMonitor.js";
-import { CardTabs, Tab } from "../../components/Tabs/Tabs.style.js";
+import { CardButton } from "../../components/Card/CardButton.js";
 import { BadgedValue } from "./SettingsCard/BadgedValue.js";
-import { SettingCardExpandable } from "./SettingsCard/SettingCardExpandable.js";
+import { useNavigate } from "@tanstack/react-router";
 import { jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import Route from "@mui/icons-material/Route";
 //#region src/pages/SettingsPage/RoutePrioritySettings.tsx
-const Priorities = ["CHEAPEST", "FASTEST"];
 const RoutePrioritySettings = () => {
 	const { t } = useTranslation();
-	const { setValue } = useSettingsActions();
+	const navigate = useNavigate();
 	const { isRoutePriorityChanged } = useSettingMonitor();
 	const { routePriority } = useSettings(["routePriority"]);
-	const currentRoutePriority = routePriority ?? "";
-	const handleRoutePriorityChange = (_, routePriority) => {
-		setValue("routePriority", routePriority);
+	const handleClick = () => {
+		navigate({ to: navigationRoutes.routePriority });
 	};
-	return /* @__PURE__ */ jsx(SettingCardExpandable, {
-		value: /* @__PURE__ */ jsx(BadgedValue, {
-			badgeColor: "info",
-			showBadge: isRoutePriorityChanged,
-			children: t(`main.tags.${currentRoutePriority.toLowerCase()}`)
-		}),
+	return /* @__PURE__ */ jsx(CardButton, {
+		onClick: handleClick,
 		icon: /* @__PURE__ */ jsx(Route, {}),
 		title: t("settings.routePriority"),
-		children: /* @__PURE__ */ jsx(CardTabs, {
-			value: currentRoutePriority,
-			"aria-label": "tabs",
-			indicatorColor: "primary",
-			onChange: handleRoutePriorityChange,
-			sx: { mt: 1.5 },
-			children: Priorities.map((priority) => {
-				return /* @__PURE__ */ jsx(Tab, {
-					label: t(`main.tags.${priority.toLowerCase()}`),
-					value: priority,
-					disableRipple: true
-				}, priority);
-			})
+		children: /* @__PURE__ */ jsx(BadgedValue, {
+			badgeColor: "info",
+			showBadge: isRoutePriorityChanged,
+			children: routePriority === "FASTEST" ? t("settings.routePriorityOptions.fastest.title") : t("settings.routePriorityOptions.cheapest.title")
 		})
 	});
 };

package/dist/esm/pages/SettingsPage/RoutePrioritySettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"RoutePrioritySettings.js","names":[],"sources":["../../../../src/pages/SettingsPage/RoutePrioritySettings.tsx"],"sourcesContent":["import type { Order } from '@lifi/sdk'\nimport Route from '@mui/icons-material/Route'\nimport { useTranslation } from 'react-i18next'\nimport { CardTabs, Tab } from '../../components/Tabs/Tabs.style.js'\nimport { useSettingMonitor } from '../../hooks/useSettingMonitor.js'\nimport { useSettings } from '../../stores/settings/useSettings.js'\nimport { useSettingsActions } from '../../stores/settings/useSettingsActions.js'\nimport { BadgedValue } from './SettingsCard/BadgedValue.js'\nimport { SettingCardExpandable } from './SettingsCard/SettingCardExpandable.js'\n\nconst Priorities: Order[] = ['CHEAPEST', 'FASTEST']\n\nexport const RoutePrioritySettings: React.FC = () => {\n  const { t } = useTranslation()\n  const { setValue } = useSettingsActions()\n  const { isRoutePriorityChanged } = useSettingMonitor()\n  const { routePriority } = useSettings(['routePriority'])\n  const currentRoutePriority = routePriority ?? ''\n\n  const handleRoutePriorityChange = (\n    _: React.SyntheticEvent,\n    routePriority: Order\n  ) => {\n    setValue('routePriority', routePriority)\n  }\n\n  return (\n    <SettingCardExpandable\n      value={\n        <BadgedValue badgeColor=\"info\" showBadge={isRoutePriorityChanged}>\n          {t(`main.tags.${currentRoutePriority.toLowerCase()}` as any)}\n        </BadgedValue>\n      }\n      icon={<Route />}\n      title={t('settings.routePriority')}\n    >\n      <CardTabs\n        value={currentRoutePriority}\n        aria-label=\"tabs\"\n        indicatorColor=\"primary\"\n        onChange={handleRoutePriorityChange}\n        sx={{ mt: 1.5 }}\n      >\n        {Priorities.map((priority) => {\n          return (\n            <Tab\n              key={priority}\n              label={t(`main.tags.${priority.toLowerCase()}` as any)}\n              value={priority}\n              disableRipple\n            />\n          )\n        })}\n      </CardTabs>\n    </SettingCardExpandable>\n  )\n}\n"],"mappings":";;;;;;;;;;AAUA,MAAM,aAAsB,CAAC,YAAY,SAAS;AAElD,MAAa,8BAAwC;CACnD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,aAAa,mBAAmB;CACxC,MAAM,EAAE,2BAA2B,kBAAkB;CACrD,MAAM,EAAE,kBAAkB,YAAY,CAAC,eAAe,CAAC;CACvD,MAAM,uBAAuB,iBAAiB;CAE9C,MAAM,6BACJ,GACA,kBACG;EACH,SAAS,iBAAiB,aAAa;CACzC;CAEA,OACE,oBAAC,uBAAD;EACE,OACE,oBAAC,aAAD;GAAa,YAAW;GAAO,WAAW;aACvC,EAAE,aAAa,qBAAqB,YAAY,GAAU;EAChD,CAAA;EAEf,MAAM,oBAAC,OAAD,CAAQ,CAAA;EACd,OAAO,EAAE,wBAAwB;YAEjC,oBAAC,UAAD;GACE,OAAO;GACP,cAAW;GACX,gBAAe;GACf,UAAU;GACV,IAAI,EAAE,IAAI,IAAI;aAEb,WAAW,KAAK,aAAa;IAC5B,OACE,oBAAC,KAAD;KAEE,OAAO,EAAE,aAAa,SAAS,YAAY,GAAU;KACrD,OAAO;KACP,eAAA;IACD,GAJM,QAIN;GAEL,CAAC;EACO,CAAA;CACW,CAAA;AAE3B"}
+{"version":3,"file":"RoutePrioritySettings.js","names":[],"sources":["../../../../src/pages/SettingsPage/RoutePrioritySettings.tsx"],"sourcesContent":["import Route from '@mui/icons-material/Route'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useTranslation } from 'react-i18next'\nimport { CardButton } from '../../components/Card/CardButton.js'\nimport { useSettingMonitor } from '../../hooks/useSettingMonitor.js'\nimport { useSettings } from '../../stores/settings/useSettings.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { BadgedValue } from './SettingsCard/BadgedValue.js'\n\nexport const RoutePrioritySettings: React.FC = () => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { isRoutePriorityChanged } = useSettingMonitor()\n  const { routePriority } = useSettings(['routePriority'])\n\n  const handleClick = () => {\n    navigate({ to: navigationRoutes.routePriority })\n  }\n\n  return (\n    <CardButton\n      onClick={handleClick}\n      icon={<Route />}\n      title={t('settings.routePriority')}\n    >\n      <BadgedValue badgeColor=\"info\" showBadge={isRoutePriorityChanged}>\n        {routePriority === 'FASTEST'\n          ? t('settings.routePriorityOptions.fastest.title')\n          : t('settings.routePriorityOptions.cheapest.title')}\n      </BadgedValue>\n    </CardButton>\n  )\n}\n"],"mappings":";;;;;;;;;;AASA,MAAa,8BAAwC;CACnD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,2BAA2B,kBAAkB;CACrD,MAAM,EAAE,kBAAkB,YAAY,CAAC,eAAe,CAAC;CAEvD,MAAM,oBAAoB;EACxB,SAAS,EAAE,IAAI,iBAAiB,cAAc,CAAC;CACjD;CAEA,OACE,oBAAC,YAAD;EACE,SAAS;EACT,MAAM,oBAAC,OAAD,CAAQ,CAAA;EACd,OAAO,EAAE,wBAAwB;YAEjC,oBAAC,aAAD;GAAa,YAAW;GAAO,WAAW;aACvC,kBAAkB,YACf,EAAE,6CAA6C,IAC/C,EAAE,8CAA8C;EACzC,CAAA;CACH,CAAA;AAEhB"}

package/dist/esm/pages/SettingsPage/SettingsCard/SettingCard.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingCard.style.js","names":["Badge","MuiBadge"],"sources":["../../../../../src/pages/SettingsPage/SettingsCard/SettingCard.style.tsx"],"sourcesContent":["import { Box, badgeClasses, Badge as MuiBadge, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const SettingsList: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(1),\n}))\n\nexport const Badge: React.FC<React.ComponentProps<typeof MuiBadge>> = styled(\n  MuiBadge\n)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1.25),\n  [`.${badgeClasses.badge}`]: {\n    width: 10,\n    height: 10,\n    // the following removes MUI styling so we can position the badge with flex\n    position: 'relative',\n    transform: 'translateX(0)',\n    borderRadius: '50%',\n  },\n}))\n"],"mappings":";;AAGA,MAAa,eAA2D,OACtE,GACF,GAAG,EAAE,aAAa;CAChB,SAAS;CACT,eAAe;CACf,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;AAEF,MAAaA,UAAyD,OACpEC,KACF,GAAG,EAAE,aAAa;CAChB,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,IAAI;EACtB,IAAI,aAAa,UAAU;EAC1B,OAAO;EACP,QAAQ;EAER,UAAU;EACV,WAAW;EACX,cAAc;CAChB;AACF,EAAE"}
+{"version":3,"file":"SettingCard.style.js","names":["Badge","MuiBadge"],"sources":["../../../../../src/pages/SettingsPage/SettingsCard/SettingCard.style.tsx"],"sourcesContent":["import { Box, badgeClasses, Badge as MuiBadge, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const SettingsList: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(1),\n}))\n\nexport const Badge: React.FC<React.ComponentProps<typeof MuiBadge>> = styled(\n  MuiBadge\n)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1.25),\n  [`.${badgeClasses.badge}`]: {\n    width: 10,\n    height: 10,\n    // the following removes MUI styling so we can position the badge with flex\n    position: 'relative',\n    transform: 'translateX(0)',\n    borderRadius: '50%',\n  },\n}))\n"],"mappings":";;AAGA,MAAa,eAA2D,OACtE,GACF,CAAC,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,eAAe;CACf,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;AAEF,MAAaA,UAAyD,OACpEC,KACF,CAAC,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,IAAI;EACtB,IAAI,aAAa,UAAU;EAC1B,OAAO;EACP,QAAQ;EAER,UAAU;EACV,WAAW;EACX,cAAc;CAChB;AACF,EAAE"}

package/dist/esm/pages/SettingsPage/SettingsCard/SettingCardExpandable.js

@@ -1,11 +1,11 @@
 import { Card as Card$1 } from "../../../components/Card/Card.js";
 import { CardRowButton, CardTitleContainer, CardValue } from "../../../components/Card/CardButton.style.js";
 import { useSettingsCardExpandable } from "./SettingsAccordian.js";
-import { forwardRef, useId, useImperativeHandle, useRef } from "react";
+import { useId, useImperativeHandle, useRef } from "react";
 import { Collapse } from "@mui/material";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/pages/SettingsPage/SettingsCard/SettingCardExpandable.tsx
-const SettingCardExpandable = forwardRef(({ icon, title, value, children, disabled, keepValueVisible, onEntered }, ref) => {
+const SettingCardExpandable = ({ icon, title, value, children, disabled, keepValueVisible, onEntered, ref }) => {
 	const { expanded, toggleExpanded } = useSettingsCardExpandable();
 	const buttonId = useId();
 	const collapseId = useId();
@@ -40,7 +40,7 @@ const SettingCardExpandable = forwardRef(({ icon, title, value, children, disabl
 			children
 		})]
 	});
-});
+};
 //#endregion
 export { SettingCardExpandable };
 

package/dist/esm/pages/SettingsPage/SettingsCard/SettingCardExpandable.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingCardExpandable.js","names":["Card"],"sources":["../../../../../src/pages/SettingsPage/SettingsCard/SettingCardExpandable.tsx"],"sourcesContent":["import { Collapse } from '@mui/material'\nimport type { PropsWithChildren, ReactNode } from 'react'\nimport {\n  type ForwardRefExoticComponent,\n  forwardRef,\n  type RefAttributes,\n  useId,\n  useImperativeHandle,\n  useRef,\n} from 'react'\nimport { Card } from '../../../components/Card/Card.js'\nimport {\n  CardRowButton,\n  CardTitleContainer,\n  CardValue,\n} from '../../../components/Card/CardButton.style.js'\nimport { useSettingsCardExpandable } from './SettingsAccordian.js'\nimport type { SettingCardTitle } from './types.js'\n\ninterface SettingCardExpandableProps extends SettingCardTitle {\n  value: ReactNode\n  disabled?: boolean\n  keepValueVisible?: boolean\n  onEntered?: () => void\n}\n\nexport interface SettingCardExpandableRef {\n  element: HTMLButtonElement | null\n  isExpanded: boolean\n  toggleExpanded: (forceExpanded?: boolean) => void\n}\n\nexport const SettingCardExpandable: ForwardRefExoticComponent<\n  PropsWithChildren<SettingCardExpandableProps> &\n    RefAttributes<SettingCardExpandableRef>\n> = forwardRef<\n  SettingCardExpandableRef,\n  PropsWithChildren<SettingCardExpandableProps>\n>(\n  (\n    { icon, title, value, children, disabled, keepValueVisible, onEntered },\n    ref\n  ) => {\n    const { expanded, toggleExpanded } = useSettingsCardExpandable()\n    const buttonId = useId()\n    const collapseId = useId()\n    const buttonRef = useRef<HTMLButtonElement>(null)\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        element: buttonRef.current,\n        isExpanded: expanded,\n        toggleExpanded,\n      }),\n      [expanded, toggleExpanded]\n    )\n\n    return (\n      <Card sx={{ p: 1 }}>\n        <CardRowButton\n          ref={buttonRef}\n          id={buttonId}\n          aria-expanded={expanded}\n          aria-controls={collapseId}\n          onClick={disabled ? undefined : () => toggleExpanded()}\n          disableRipple\n          sx={{ p: 1, cursor: disabled ? 'default' : 'pointer' }}\n        >\n          <CardTitleContainer>\n            {icon}\n            <CardValue>{title}</CardValue>\n          </CardTitleContainer>\n          {(!expanded || keepValueVisible) && value}\n        </CardRowButton>\n        <Collapse\n          id={collapseId}\n          role=\"region\"\n          aria-labelledby={buttonId}\n          in={expanded}\n          mountOnEnter\n          unmountOnExit\n          onEntered={onEntered}\n        >\n          {children}\n        </Collapse>\n      </Card>\n    )\n  }\n)\n"],"mappings":";;;;;;;AAgCA,MAAa,wBAGT,YAKA,EAAE,MAAM,OAAO,OAAO,UAAU,UAAU,kBAAkB,aAC5D,QACG;CACH,MAAM,EAAE,UAAU,mBAAmB,0BAA0B;CAC/D,MAAM,WAAW,MAAM;CACvB,MAAM,aAAa,MAAM;CACzB,MAAM,YAAY,OAA0B,IAAI;CAEhD,oBACE,YACO;EACL,SAAS,UAAU;EACnB,YAAY;EACZ;CACF,IACA,CAAC,UAAU,cAAc,CAC3B;CAEA,OACE,qBAACA,QAAD;EAAM,IAAI,EAAE,GAAG,EAAE;YAAjB,CACE,qBAAC,eAAD;GACE,KAAK;GACL,IAAI;GACJ,iBAAe;GACf,iBAAe;GACf,SAAS,WAAW,KAAA,UAAkB,eAAe;GACrD,eAAA;GACA,IAAI;IAAE,GAAG;IAAG,QAAQ,WAAW,YAAY;GAAU;aAPvD,CASE,qBAAC,oBAAD,EAAA,UAAA,CACG,MACD,oBAAC,WAAD,EAAA,UAAY,MAAiB,CAAA,CACX,EAAA,CAAA,IAClB,CAAC,YAAY,qBAAqB,KACvB;MACf,oBAAC,UAAD;GACE,IAAI;GACJ,MAAK;GACL,mBAAiB;GACjB,IAAI;GACJ,cAAA;GACA,eAAA;GACW;GAEV;EACO,CAAA,CACN;;AAEV,CACF"}
+{"version":3,"file":"SettingCardExpandable.js","names":["Card"],"sources":["../../../../../src/pages/SettingsPage/SettingsCard/SettingCardExpandable.tsx"],"sourcesContent":["import { Collapse } from '@mui/material'\nimport type { JSX, PropsWithChildren, ReactNode, Ref } from 'react'\nimport { useId, useImperativeHandle, useRef } from 'react'\nimport { Card } from '../../../components/Card/Card.js'\nimport {\n  CardRowButton,\n  CardTitleContainer,\n  CardValue,\n} from '../../../components/Card/CardButton.style.js'\nimport { useSettingsCardExpandable } from './SettingsAccordian.js'\nimport type { SettingCardTitle } from './types.js'\n\ninterface SettingCardExpandableProps extends SettingCardTitle {\n  value: ReactNode\n  disabled?: boolean\n  keepValueVisible?: boolean\n  onEntered?: () => void\n}\n\nexport interface SettingCardExpandableRef {\n  element: HTMLButtonElement | null\n  isExpanded: boolean\n  toggleExpanded: (forceExpanded?: boolean) => void\n}\n\nexport const SettingCardExpandable = ({\n  icon,\n  title,\n  value,\n  children,\n  disabled,\n  keepValueVisible,\n  onEntered,\n  ref,\n}: PropsWithChildren<SettingCardExpandableProps> & {\n  ref?: Ref<SettingCardExpandableRef>\n}): JSX.Element => {\n  const { expanded, toggleExpanded } = useSettingsCardExpandable()\n  const buttonId = useId()\n  const collapseId = useId()\n  const buttonRef = useRef<HTMLButtonElement>(null)\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      element: buttonRef.current,\n      isExpanded: expanded,\n      toggleExpanded,\n    }),\n    [expanded, toggleExpanded]\n  )\n\n  return (\n    <Card sx={{ p: 1 }}>\n      <CardRowButton\n        ref={buttonRef}\n        id={buttonId}\n        aria-expanded={expanded}\n        aria-controls={collapseId}\n        onClick={disabled ? undefined : () => toggleExpanded()}\n        disableRipple\n        sx={{ p: 1, cursor: disabled ? 'default' : 'pointer' }}\n      >\n        <CardTitleContainer>\n          {icon}\n          <CardValue>{title}</CardValue>\n        </CardTitleContainer>\n        {(!expanded || keepValueVisible) && value}\n      </CardRowButton>\n      <Collapse\n        id={collapseId}\n        role=\"region\"\n        aria-labelledby={buttonId}\n        in={expanded}\n        mountOnEnter\n        unmountOnExit\n        onEntered={onEntered}\n      >\n        {children}\n      </Collapse>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;AAyBA,MAAa,yBAAyB,EACpC,MACA,OACA,OACA,UACA,UACA,kBACA,WACA,UAGiB;CACjB,MAAM,EAAE,UAAU,mBAAmB,0BAA0B;CAC/D,MAAM,WAAW,MAAM;CACvB,MAAM,aAAa,MAAM;CACzB,MAAM,YAAY,OAA0B,IAAI;CAEhD,oBACE,YACO;EACL,SAAS,UAAU;EACnB,YAAY;EACZ;CACF,IACA,CAAC,UAAU,cAAc,CAC3B;CAEA,OACE,qBAACA,QAAD;EAAM,IAAI,EAAE,GAAG,EAAE;YAAjB,CACE,qBAAC,eAAD;GACE,KAAK;GACL,IAAI;GACJ,iBAAe;GACf,iBAAe;GACf,SAAS,WAAW,KAAA,UAAkB,eAAe;GACrD,eAAA;GACA,IAAI;IAAE,GAAG;IAAG,QAAQ,WAAW,YAAY;GAAU;aAPvD,CASE,qBAAC,oBAAD,EAAA,UAAA,CACG,MACD,oBAAC,WAAD,EAAA,UAAY,MAAiB,CAAA,CACX,EAAA,CAAA,IAClB,CAAC,YAAY,qBAAqB,KACvB;MACf,oBAAC,UAAD;GACE,IAAI;GACJ,MAAK;GACL,mBAAiB;GACjB,IAAI;GACJ,cAAA;GACA,eAAA;GACW;GAEV;EACO,CAAA,CACN;;AAEV"}

package/dist/esm/pages/SettingsPage/SettingsCard/SettingsAccordian.js

@@ -1,4 +1,4 @@
-import { createContext, useContext, useEffect, useId, useState } from "react";
+import { createContext, use, useEffect, useId, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/pages/SettingsPage/SettingsCard/SettingsAccordian.tsx
 const SettingsAccordionContext = createContext({
@@ -7,7 +7,7 @@ const SettingsAccordionContext = createContext({
 });
 const SettingsCardAccordion = ({ children }) => {
 	const [openCard, setOpenCard] = useState("");
-	return /* @__PURE__ */ jsx(SettingsAccordionContext.Provider, {
+	return /* @__PURE__ */ jsx(SettingsAccordionContext, {
 		value: {
 			openCard,
 			setOpenCard
@@ -18,7 +18,7 @@ const SettingsCardAccordion = ({ children }) => {
 const useSettingsCardExpandable = () => {
 	const settingCardExpandableId = useId();
 	const [expanded, setExpanded] = useState(false);
-	const { openCard, setOpenCard } = useContext(SettingsAccordionContext);
+	const { openCard, setOpenCard } = use(SettingsAccordionContext);
 	const toggleExpanded = (forceExpanded) => {
 		const newExpanded = forceExpanded ?? !expanded;
 		setExpanded(newExpanded);

package/dist/esm/pages/SettingsPage/SettingsCard/SettingsAccordian.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsAccordian.js","names":[],"sources":["../../../../../src/pages/SettingsPage/SettingsCard/SettingsAccordian.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react'\nimport { createContext, useContext, useEffect, useId, useState } from 'react'\n\nconst SettingsAccordionContext = createContext({\n  setOpenCard: (_id: string) => {},\n  openCard: '',\n})\n\nexport const SettingsCardAccordion: React.FC<PropsWithChildren> = ({\n  children,\n}) => {\n  const [openCard, setOpenCard] = useState('')\n\n  return (\n    <SettingsAccordionContext.Provider value={{ openCard, setOpenCard }}>\n      {children}\n    </SettingsAccordionContext.Provider>\n  )\n}\n\nexport const useSettingsCardExpandable = (): {\n  expanded: boolean\n  toggleExpanded: (forceExpanded?: boolean) => void\n} => {\n  const settingCardExpandableId = useId()\n  const [expanded, setExpanded] = useState(false)\n  const { openCard, setOpenCard } = useContext(SettingsAccordionContext)\n\n  const toggleExpanded = (forceExpanded?: boolean) => {\n    const newExpanded = forceExpanded ?? !expanded\n    setExpanded(newExpanded)\n\n    if (newExpanded && openCard !== settingCardExpandableId) {\n      setOpenCard(settingCardExpandableId)\n    }\n  }\n\n  useEffect(() => {\n    if (openCard !== settingCardExpandableId) {\n      setExpanded(false)\n    }\n  }, [settingCardExpandableId, openCard])\n\n  return {\n    expanded: expanded,\n    toggleExpanded: toggleExpanded,\n  }\n}\n"],"mappings":";;;AAGA,MAAM,2BAA2B,cAAc;CAC7C,cAAc,QAAgB,CAAC;CAC/B,UAAU;AACZ,CAAC;AAED,MAAa,yBAAsD,EACjE,eACI;CACJ,MAAM,CAAC,UAAU,eAAe,SAAS,EAAE;CAE3C,OACE,oBAAC,yBAAyB,UAA1B;EAAmC,OAAO;GAAE;GAAU;EAAY;EAC/D;CACgC,CAAA;AAEvC;AAEA,MAAa,kCAGR;CACH,MAAM,0BAA0B,MAAM;CACtC,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,EAAE,UAAU,gBAAgB,WAAW,wBAAwB;CAErE,MAAM,kBAAkB,kBAA4B;EAClD,MAAM,cAAc,iBAAiB,CAAC;EACtC,YAAY,WAAW;EAEvB,IAAI,eAAe,aAAa,yBAC9B,YAAY,uBAAuB;CAEvC;CAEA,gBAAgB;EACd,IAAI,aAAa,yBACf,YAAY,KAAK;CAErB,GAAG,CAAC,yBAAyB,QAAQ,CAAC;CAEtC,OAAO;EACK;EACM;CAClB;AACF"}
+{"version":3,"file":"SettingsAccordian.js","names":[],"sources":["../../../../../src/pages/SettingsPage/SettingsCard/SettingsAccordian.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react'\nimport { createContext, use, useEffect, useId, useState } from 'react'\n\nconst SettingsAccordionContext = createContext({\n  setOpenCard: (_id: string) => {},\n  openCard: '',\n})\n\nexport const SettingsCardAccordion: React.FC<PropsWithChildren> = ({\n  children,\n}) => {\n  const [openCard, setOpenCard] = useState('')\n\n  return (\n    <SettingsAccordionContext value={{ openCard, setOpenCard }}>\n      {children}\n    </SettingsAccordionContext>\n  )\n}\n\nexport const useSettingsCardExpandable = (): {\n  expanded: boolean\n  toggleExpanded: (forceExpanded?: boolean) => void\n} => {\n  const settingCardExpandableId = useId()\n  const [expanded, setExpanded] = useState(false)\n  const { openCard, setOpenCard } = use(SettingsAccordionContext)\n\n  const toggleExpanded = (forceExpanded?: boolean) => {\n    const newExpanded = forceExpanded ?? !expanded\n    setExpanded(newExpanded)\n\n    if (newExpanded && openCard !== settingCardExpandableId) {\n      setOpenCard(settingCardExpandableId)\n    }\n  }\n\n  useEffect(() => {\n    if (openCard !== settingCardExpandableId) {\n      setExpanded(false)\n    }\n  }, [settingCardExpandableId, openCard])\n\n  return {\n    expanded: expanded,\n    toggleExpanded: toggleExpanded,\n  }\n}\n"],"mappings":";;;AAGA,MAAM,2BAA2B,cAAc;CAC7C,cAAc,QAAgB,CAAC;CAC/B,UAAU;AACZ,CAAC;AAED,MAAa,yBAAsD,EACjE,eACI;CACJ,MAAM,CAAC,UAAU,eAAe,SAAS,EAAE;CAE3C,OACE,oBAAC,0BAAD;EAA0B,OAAO;GAAE;GAAU;EAAY;EACtD;CACuB,CAAA;AAE9B;AAEA,MAAa,kCAGR;CACH,MAAM,0BAA0B,MAAM;CACtC,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,EAAE,UAAU,gBAAgB,IAAI,wBAAwB;CAE9D,MAAM,kBAAkB,kBAA4B;EAClD,MAAM,cAAc,iBAAiB,CAAC;EACtC,YAAY,WAAW;EAEvB,IAAI,eAAe,aAAa,yBAC9B,YAAY,uBAAuB;CAEvC;CAEA,gBAAgB;EACd,IAAI,aAAa,yBACf,YAAY,KAAK;CAErB,GAAG,CAAC,yBAAyB,QAAQ,CAAC;CAEtC,OAAO;EACK;EACM;CAClB;AACF"}

package/dist/esm/pages/SettingsPage/SlippageSettings/SlippagePage.js

@@ -0,0 +1,133 @@
+import { useSettingsActions } from "../../../stores/settings/useSettingsActions.js";
+import { formatInputAmount, formatSlippage } from "../../../utils/format.js";
+import { PageContainer } from "../../../components/PageContainer.js";
+import { useSettings } from "../../../stores/settings/useSettings.js";
+import { useSettingMonitor } from "../../../hooks/useSettingMonitor.js";
+import { useHeader } from "../../../hooks/useHeader.js";
+import { useListHeight } from "../../../hooks/useListHeight.js";
+import { ListItemText as ListItemText$1 } from "../../../components/ListItemText.js";
+import { SettingsListItemButton } from "../../../components/SettingsListItemButton.js";
+import { SlippageClearButton, SlippageInput, SlippageLimitsWarningContainer } from "./SlippageSettings.style.js";
+import { useRef, useState } from "react";
+import { Box, Collapse, List, Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import CloseRounded from "@mui/icons-material/CloseRounded";
+import WarningRounded from "@mui/icons-material/WarningRounded";
+import Check from "@mui/icons-material/Check";
+//#region src/pages/SettingsPage/SlippageSettings/SlippagePage.tsx
+const slippagePresets = ["0.5", "1"];
+const maxFractionDigits = 5;
+const SlippagePage = () => {
+	const { t } = useTranslation();
+	const { isSlippageNotRecommended, isSlippageUnderRecommendedLimits, isSlippageOutsideRecommendedLimits } = useSettingMonitor();
+	const { slippage } = useSettings(["slippage"]);
+	const { setValue } = useSettingsActions();
+	const defaultValue = useRef(slippage);
+	const listParentRef = useRef(null);
+	const { listHeight } = useListHeight({ listParentRef });
+	useHeader(t("settings.slippage"));
+	const isAuto = !slippage || slippage === void 0;
+	const isPreset = !!slippage && slippagePresets.includes(slippage);
+	const isCustom = !isAuto && !isPreset;
+	const [customMode, setCustomMode] = useState(isCustom);
+	const [inputValue, setInputValue] = useState(isCustom ? slippage ?? "" : "");
+	const handleAuto = () => {
+		setCustomMode(false);
+		setInputValue("");
+		setValue("slippage", void 0);
+	};
+	const handlePreset = (preset) => {
+		setCustomMode(false);
+		setValue("slippage", preset);
+	};
+	const handleCustom = () => {
+		setCustomMode(true);
+		const initialValue = slippage || "";
+		if (initialValue) {
+			setInputValue(initialValue);
+			setValue("slippage", initialValue);
+		}
+	};
+	const formatAndSetSlippage = (value, returnInitial = false) => {
+		const formattedSlippage = formatSlippage(value, defaultValue.current, returnInitial);
+		const formattedValue = Number(formattedSlippage) === 0 && !returnInitial ? "0" : formatInputAmount(formattedSlippage, maxFractionDigits, returnInitial);
+		const maxLength = Number(formattedValue) < 10 ? 7 : 8;
+		const slicedValue = formattedValue.slice(0, maxLength);
+		setInputValue(slicedValue);
+		setValue("slippage", slicedValue.length ? slicedValue : void 0);
+	};
+	const handleInputUpdate = (event) => {
+		formatAndSetSlippage(event.target.value, true);
+	};
+	const handleInputFocus = (event) => {
+		formatAndSetSlippage(event.target.value);
+	};
+	const handleInputBlur = (event) => {
+		formatAndSetSlippage(event.target.value);
+	};
+	const slippageWarningText = isSlippageOutsideRecommendedLimits ? t("warning.message.slippageOutsideRecommendedLimits") : isSlippageUnderRecommendedLimits ? t("warning.message.slippageUnderRecommendedLimits") : "";
+	return /* @__PURE__ */ jsx(PageContainer, {
+		disableGutters: true,
+		children: /* @__PURE__ */ jsxs(List, {
+			className: "long-list",
+			ref: listParentRef,
+			style: {
+				height: listHeight,
+				overflow: "auto"
+			},
+			sx: { padding: 1.5 },
+			children: [
+				/* @__PURE__ */ jsxs(SettingsListItemButton, {
+					onClick: handleAuto,
+					children: [/* @__PURE__ */ jsx(ListItemText$1, {
+						primary: t("button.auto"),
+						secondary: t("settings.slippageAutoDescription")
+					}), !customMode && isAuto && /* @__PURE__ */ jsx(Check, { color: "primary" })]
+				}),
+				slippagePresets.map((preset) => /* @__PURE__ */ jsxs(SettingsListItemButton, {
+					onClick: () => handlePreset(preset),
+					children: [/* @__PURE__ */ jsx(ListItemText$1, { primary: `${preset}%` }), !customMode && slippage === preset && /* @__PURE__ */ jsx(Check, { color: "primary" })]
+				}, preset)),
+				/* @__PURE__ */ jsxs(SettingsListItemButton, {
+					onClick: handleCustom,
+					children: [/* @__PURE__ */ jsx(ListItemText$1, { primary: t("settings.custom") }), customMode && /* @__PURE__ */ jsx(Check, { color: "primary" })]
+				}),
+				/* @__PURE__ */ jsx(Collapse, {
+					in: customMode,
+					children: /* @__PURE__ */ jsxs(Box, {
+						sx: {
+							px: 1.5,
+							pt: 1
+						},
+						children: [/* @__PURE__ */ jsx(SlippageInput, {
+							placeholder: "0.5",
+							inputProps: { inputMode: "decimal" },
+							value: inputValue,
+							onChange: handleInputUpdate,
+							onFocus: handleInputFocus,
+							onBlur: handleInputBlur,
+							autoComplete: "off",
+							endAdornment: !isAuto && /* @__PURE__ */ jsx(SlippageClearButton, {
+								size: "small",
+								onClick: handleAuto,
+								"aria-label": "Clear",
+								children: /* @__PURE__ */ jsx(CloseRounded, { fontSize: "small" })
+							})
+						}), isSlippageNotRecommended && /* @__PURE__ */ jsxs(SlippageLimitsWarningContainer, { children: [/* @__PURE__ */ jsx(WarningRounded, { color: "warning" }), /* @__PURE__ */ jsx(Typography, {
+							sx: {
+								fontSize: 13,
+								fontWeight: 400
+							},
+							children: slippageWarningText
+						})] })]
+					})
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { SlippagePage };
+
+//# sourceMappingURL=SlippagePage.js.map

package/dist/esm/pages/SettingsPage/SlippageSettings/SlippagePage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlippagePage.js","names":["ListItemText"],"sources":["../../../../../src/pages/SettingsPage/SlippageSettings/SlippagePage.tsx"],"sourcesContent":["import Check from '@mui/icons-material/Check'\nimport CloseRounded from '@mui/icons-material/CloseRounded'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Box, Collapse, List, Typography } from '@mui/material'\nimport type { ChangeEventHandler, FocusEventHandler } from 'react'\nimport { useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ListItemText } from '../../../components/ListItemText.js'\nimport { PageContainer } from '../../../components/PageContainer.js'\nimport { SettingsListItemButton } from '../../../components/SettingsListItemButton.js'\nimport { useHeader } from '../../../hooks/useHeader.js'\nimport { useListHeight } from '../../../hooks/useListHeight.js'\nimport { useSettingMonitor } from '../../../hooks/useSettingMonitor.js'\nimport { defaultSlippage } from '../../../stores/settings/createSettingsStore.js'\nimport { useSettings } from '../../../stores/settings/useSettings.js'\nimport { useSettingsActions } from '../../../stores/settings/useSettingsActions.js'\nimport { formatInputAmount, formatSlippage } from '../../../utils/format.js'\nimport {\n  SlippageClearButton,\n  SlippageInput,\n  SlippageLimitsWarningContainer,\n} from './SlippageSettings.style.js'\n\nconst slippagePresets = ['0.5', '1']\nconst maxFractionDigits = 5\n\nexport const SlippagePage: React.FC = () => {\n  const { t } = useTranslation()\n  const {\n    isSlippageNotRecommended,\n    isSlippageUnderRecommendedLimits,\n    isSlippageOutsideRecommendedLimits,\n  } = useSettingMonitor()\n  const { slippage } = useSettings(['slippage'])\n  const { setValue } = useSettingsActions()\n  const defaultValue = useRef(slippage)\n  const listParentRef = useRef<HTMLUListElement | null>(null)\n  const { listHeight } = useListHeight({ listParentRef })\n\n  useHeader(t('settings.slippage'))\n\n  const isAuto = !slippage || slippage === defaultSlippage\n  const isPreset = !!slippage && slippagePresets.includes(slippage)\n  const isCustom = !isAuto && !isPreset\n\n  const [customMode, setCustomMode] = useState(isCustom)\n  const [inputValue, setInputValue] = useState(isCustom ? (slippage ?? '') : '')\n\n  const handleAuto = () => {\n    setCustomMode(false)\n    setInputValue('')\n    setValue('slippage', defaultSlippage)\n  }\n\n  const handlePreset = (preset: string) => {\n    setCustomMode(false)\n    setValue('slippage', preset)\n  }\n\n  const handleCustom = () => {\n    setCustomMode(true)\n    const initialValue = slippage || ''\n    if (initialValue) {\n      setInputValue(initialValue)\n      setValue('slippage', initialValue)\n    }\n  }\n\n  const formatAndSetSlippage = (value: string, returnInitial = false) => {\n    const formattedSlippage = formatSlippage(\n      value,\n      defaultValue.current,\n      returnInitial\n    )\n    const formattedValue =\n      Number(formattedSlippage) === 0 && !returnInitial\n        ? '0'\n        : formatInputAmount(formattedSlippage, maxFractionDigits, returnInitial)\n    const maxLength =\n      Number(formattedValue) < 10\n        ? maxFractionDigits + 2\n        : maxFractionDigits + 3\n    const slicedValue = formattedValue.slice(0, maxLength)\n    setInputValue(slicedValue)\n    setValue('slippage', slicedValue.length ? slicedValue : defaultSlippage)\n  }\n\n  const handleInputUpdate: ChangeEventHandler<HTMLInputElement> = (event) => {\n    formatAndSetSlippage(event.target.value, true)\n  }\n\n  const handleInputFocus: FocusEventHandler<HTMLInputElement> = (event) => {\n    formatAndSetSlippage(event.target.value)\n  }\n\n  const handleInputBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n    formatAndSetSlippage(event.target.value)\n  }\n\n  const slippageWarningText = isSlippageOutsideRecommendedLimits\n    ? t('warning.message.slippageOutsideRecommendedLimits')\n    : isSlippageUnderRecommendedLimits\n      ? t('warning.message.slippageUnderRecommendedLimits')\n      : ''\n\n  return (\n    <PageContainer disableGutters>\n      <List\n        className=\"long-list\"\n        ref={listParentRef}\n        style={{ height: listHeight, overflow: 'auto' }}\n        sx={{\n          padding: 1.5,\n        }}\n      >\n        <SettingsListItemButton onClick={handleAuto}>\n          <ListItemText\n            primary={t('button.auto')}\n            secondary={t('settings.slippageAutoDescription')}\n          />\n          {!customMode && isAuto && <Check color=\"primary\" />}\n        </SettingsListItemButton>\n        {slippagePresets.map((preset) => (\n          <SettingsListItemButton\n            key={preset}\n            onClick={() => handlePreset(preset)}\n          >\n            <ListItemText primary={`${preset}%`} />\n            {!customMode && slippage === preset && <Check color=\"primary\" />}\n          </SettingsListItemButton>\n        ))}\n        <SettingsListItemButton onClick={handleCustom}>\n          <ListItemText primary={t('settings.custom')} />\n          {customMode && <Check color=\"primary\" />}\n        </SettingsListItemButton>\n        <Collapse in={customMode}>\n          <Box sx={{ px: 1.5, pt: 1 }}>\n            <SlippageInput\n              placeholder=\"0.5\"\n              inputProps={{ inputMode: 'decimal' }}\n              value={inputValue}\n              onChange={handleInputUpdate}\n              onFocus={handleInputFocus}\n              onBlur={handleInputBlur}\n              autoComplete=\"off\"\n              endAdornment={\n                !isAuto && (\n                  <SlippageClearButton\n                    size=\"small\"\n                    onClick={handleAuto}\n                    aria-label=\"Clear\"\n                  >\n                    <CloseRounded fontSize=\"small\" />\n                  </SlippageClearButton>\n                )\n              }\n            />\n            {isSlippageNotRecommended && (\n              <SlippageLimitsWarningContainer>\n                <WarningRounded color=\"warning\" />\n                <Typography\n                  sx={{\n                    fontSize: 13,\n                    fontWeight: 400,\n                  }}\n                >\n                  {slippageWarningText}\n                </Typography>\n              </SlippageLimitsWarningContainer>\n            )}\n          </Box>\n        </Collapse>\n      </List>\n    </PageContainer>\n  )\n}\n"],"mappings":"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"}