@lifi/widget 4.3.1 → 4.5.0

package/dist/esm/components/RouteCard/RouteTokens.js

@@ -5,7 +5,7 @@ import { Box } from "@mui/material";
 import { jsx, jsxs } from "react/jsx-runtime";
 import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
 //#region src/components/RouteCard/RouteTokens.tsx
-const RouteTokens = ({ route, showEssentials, defaultExpanded }) => {
+const RouteTokens = ({ route, showEssentials, defaultExpanded, fromSlot }) => {
 	const { mode } = useWidgetConfig();
 	const fromToken = {
 		...route.steps[0].action.fromToken,
@@ -23,7 +23,7 @@ const RouteTokens = ({ route, showEssentials, defaultExpanded }) => {
 			gap: 1.5
 		},
 		children: [
-			fromToken ? /* @__PURE__ */ jsx(Token, { token: fromToken }) : null,
+			fromSlot ?? (fromToken ? /* @__PURE__ */ jsx(Token, { token: fromToken }) : null),
 			/* @__PURE__ */ jsx(Box, {
 				sx: {
 					width: 40,

package/dist/esm/components/RouteCard/RouteTokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"RouteTokens.js","names":[],"sources":["../../../../src/components/RouteCard/RouteTokens.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'\nimport { Box } from '@mui/material'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { Token } from '../Token/Token.js'\nimport { RouteToken } from './RouteToken.js'\n\nexport const RouteTokens: React.FC<{\n  route: RouteExtended\n  showEssentials?: boolean\n  defaultExpanded?: boolean\n}> = ({ route, showEssentials, defaultExpanded }) => {\n  const { mode } = useWidgetConfig()\n\n  const fromToken = {\n    ...route.steps[0].action.fromToken,\n    amount: BigInt(route.steps[0].action.fromAmount),\n  }\n\n  const lastStepIndex = route.steps.length - 1\n  const toToken = {\n    ...(route.steps[lastStepIndex].execution?.toToken ??\n      route.steps[lastStepIndex].action.toToken),\n    amount: route.steps[lastStepIndex].execution?.toAmount\n      ? BigInt(route.steps[lastStepIndex].execution.toAmount)\n      : mode === 'custom'\n        ? BigInt(route.toAmount)\n        : BigInt(route.steps[lastStepIndex].estimate.toAmount),\n  }\n\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n      {fromToken ? <Token token={fromToken} /> : null}\n      <Box\n        sx={{\n          width: 40,\n          height: 20,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n      >\n        <ArrowDownwardIcon sx={{ fontSize: 16 }} />\n      </Box>\n      {toToken ? (\n        <RouteToken\n          route={route}\n          token={toToken}\n          impactToken={fromToken}\n          showEssentials={showEssentials}\n          defaultExpanded={defaultExpanded}\n        />\n      ) : null}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;AAOA,MAAa,eAIP,EAAE,OAAO,gBAAgB,sBAAsB;CACnD,MAAM,EAAE,SAAS,gBAAgB;CAEjC,MAAM,YAAY;EAChB,GAAG,MAAM,MAAM,EAAE,CAAC,OAAO;EACzB,QAAQ,OAAO,MAAM,MAAM,EAAE,CAAC,OAAO,UAAU;CACjD;CAEA,MAAM,gBAAgB,MAAM,MAAM,SAAS;CAC3C,MAAM,UAAU;EACd,GAAI,MAAM,MAAM,cAAc,CAAC,WAAW,WACxC,MAAM,MAAM,cAAc,CAAC,OAAO;EACpC,QAAQ,MAAM,MAAM,cAAc,CAAC,WAAW,WAC1C,OAAO,MAAM,MAAM,cAAc,CAAC,UAAU,QAAQ,IACpD,SAAS,WACP,OAAO,MAAM,QAAQ,IACrB,OAAO,MAAM,MAAM,cAAc,CAAC,SAAS,QAAQ;CAC3D;CAEA,OACE,qBAAC,KAAD;EAAK,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,KAAK;EAAI;YAA9D;GACG,YAAY,oBAAC,OAAD,EAAO,OAAO,UAAY,CAAA,IAAI;GAC3C,oBAAC,KAAD;IACE,IAAI;KACF,OAAO;KACP,QAAQ;KACR,SAAS;KACT,YAAY;KACZ,gBAAgB;IAClB;cAEA,oBAAC,mBAAD,EAAmB,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;GACvC,CAAA;GACJ,UACC,oBAAC,YAAD;IACS;IACP,OAAO;IACP,aAAa;IACG;IACC;GAClB,CAAA,IACC;EACD;;AAET"}
+{"version":3,"file":"RouteTokens.js","names":[],"sources":["../../../../src/components/RouteCard/RouteTokens.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'\nimport { Box } from '@mui/material'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { Token } from '../Token/Token.js'\nimport { RouteToken } from './RouteToken.js'\n\nexport const RouteTokens: React.FC<{\n  route: RouteExtended\n  showEssentials?: boolean\n  defaultExpanded?: boolean\n  fromSlot?: React.ReactNode\n}> = ({ route, showEssentials, defaultExpanded, fromSlot }) => {\n  const { mode } = useWidgetConfig()\n\n  const fromToken = {\n    ...route.steps[0].action.fromToken,\n    amount: BigInt(route.steps[0].action.fromAmount),\n  }\n\n  const lastStepIndex = route.steps.length - 1\n  const toToken = {\n    ...(route.steps[lastStepIndex].execution?.toToken ??\n      route.steps[lastStepIndex].action.toToken),\n    amount: route.steps[lastStepIndex].execution?.toAmount\n      ? BigInt(route.steps[lastStepIndex].execution.toAmount)\n      : mode === 'custom'\n        ? BigInt(route.toAmount)\n        : BigInt(route.steps[lastStepIndex].estimate.toAmount),\n  }\n\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n      {fromSlot ?? (fromToken ? <Token token={fromToken} /> : null)}\n      <Box\n        sx={{\n          width: 40,\n          height: 20,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n      >\n        <ArrowDownwardIcon sx={{ fontSize: 16 }} />\n      </Box>\n      {toToken ? (\n        <RouteToken\n          route={route}\n          token={toToken}\n          impactToken={fromToken}\n          showEssentials={showEssentials}\n          defaultExpanded={defaultExpanded}\n        />\n      ) : null}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;AAOA,MAAa,eAKP,EAAE,OAAO,gBAAgB,iBAAiB,eAAe;CAC7D,MAAM,EAAE,SAAS,gBAAgB;CAEjC,MAAM,YAAY;EAChB,GAAG,MAAM,MAAM,EAAE,CAAC,OAAO;EACzB,QAAQ,OAAO,MAAM,MAAM,EAAE,CAAC,OAAO,UAAU;CACjD;CAEA,MAAM,gBAAgB,MAAM,MAAM,SAAS;CAC3C,MAAM,UAAU;EACd,GAAI,MAAM,MAAM,cAAc,CAAC,WAAW,WACxC,MAAM,MAAM,cAAc,CAAC,OAAO;EACpC,QAAQ,MAAM,MAAM,cAAc,CAAC,WAAW,WAC1C,OAAO,MAAM,MAAM,cAAc,CAAC,UAAU,QAAQ,IACpD,SAAS,WACP,OAAO,MAAM,QAAQ,IACrB,OAAO,MAAM,MAAM,cAAc,CAAC,SAAS,QAAQ;CAC3D;CAEA,OACE,qBAAC,KAAD;EAAK,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,KAAK;EAAI;EAA9D,UAAA;GACG,aAAa,YAAY,oBAAC,OAAD,EAAO,OAAO,UAAY,CAAA,IAAI;GACxD,oBAAC,KAAD;IACE,IAAI;KACF,OAAO;KACP,QAAQ;KACR,SAAS;KACT,YAAY;KACZ,gBAAgB;IAClB;IAEA,UAAA,oBAAC,mBAAD,EAAmB,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;GACvC,CAAA;GACJ,UACC,oBAAC,YAAD;IACS;IACP,OAAO;IACP,aAAa;IACG;IACC;GAClB,CAAA,IACC;EACD;;AAET"}

package/dist/esm/components/RouteCard/types.d.ts

@@ -0,0 +1,14 @@
+import { Route, RouteExtended } from "@lifi/sdk";
+//#region src/components/RouteCard/types.d.ts
+interface RouteCardProps {
+  route: Route;
+  variant?: "default" | "cardless";
+  active?: boolean;
+  expanded?: boolean;
+}
+interface RouteCardSkeletonProps {
+  variant?: "default" | "cardless";
+}
+//#endregion
+export { RouteCardProps, RouteCardSkeletonProps };
+//# sourceMappingURL=types.d.ts.map

package/dist/esm/components/RouteCard/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../../src/components/RouteCard/types.ts"],"mappings":";;UAEiB;EACf,OAAO;EACP;EACA;EACA;;UAOe;EACf"}

package/dist/esm/components/Routes/LimitOrderRoutes.js.map

@@ -1 +1 @@
-{"version":3,"file":"LimitOrderRoutes.js","names":[],"sources":["../../../../src/components/Routes/LimitOrderRoutes.tsx"],"sourcesContent":["import { Stack } from '@mui/material'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'\nimport {\n  RouteProviderCard,\n  RouteProviderCardSkeleton,\n} from '../RouteCard/RouteProviderCard.js'\n\nexport const LimitOrderRoutes: React.FC<CardProps> = (props) => {\n  const { routes, isLoading, isFetching, isFetched } = useRoutes()\n  const [toAddress, selectedRouteId] = useFieldValues(\n    'toAddress',\n    'selectedRouteId'\n  )\n  const { setFieldValue } = useFieldActions()\n  const { requiredToAddress } = useToAddressRequirements()\n\n  const currentRoute = routes?.[0]\n\n  if (!currentRoute && !isLoading && !isFetching && !isFetched) {\n    return null\n  }\n\n  const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress\n  const allowInteraction = !toAddressUnsatisfied\n\n  const activeRouteId =\n    routes?.find((route) => route.id === selectedRouteId)?.id ??\n    currentRoute?.id\n\n  return (\n    <Stack\n      direction=\"column\"\n      spacing={1}\n      sx={props.sx}\n      className={props.className}\n    >\n      {isLoading && !currentRoute ? (\n        Array.from({ length: 2 }).map((_, index) => (\n          <RouteProviderCardSkeleton key={index} />\n        ))\n      ) : !currentRoute ? (\n        <RouteNotFoundCard />\n      ) : (\n        routes?.map((route) => (\n          <RouteProviderCard\n            key={route.id}\n            route={route}\n            active={route.id === activeRouteId}\n            onClick={\n              allowInteraction\n                ? () => setFieldValue('selectedRouteId', route.id)\n                : undefined\n            }\n          />\n        ))\n      )}\n    </Stack>\n  )\n}\n"],"mappings":";;;;;;;;;AAYA,MAAa,oBAAyC,UAAU;CAC9D,MAAM,EAAE,QAAQ,WAAW,YAAY,cAAc,UAAU;CAC/D,MAAM,CAAC,WAAW,mBAAmB,eACnC,aACA,iBACF;CACA,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,EAAE,sBAAsB,yBAAyB;CAEvD,MAAM,eAAe,SAAS;CAE9B,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,cAAc,CAAC,WACjD,OAAO;CAIT,MAAM,mBAAmB,EADI,gBAAgB,qBAAqB,CAAC;CAGnE,MAAM,gBACJ,QAAQ,MAAM,UAAU,MAAM,OAAO,eAAe,CAAC,EAAE,MACvD,cAAc;CAEhB,OACE,oBAAC,OAAD;EACE,WAAU;EACV,SAAS;EACT,IAAI,MAAM;EACV,WAAW,MAAM;YAEhB,aAAa,CAAC,eACb,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,UAChC,oBAAC,2BAAD,CAAwC,GAAR,KAAQ,CACzC,IACC,CAAC,eACH,oBAAC,mBAAD,CAAoB,CAAA,IAEpB,QAAQ,KAAK,UACX,oBAAC,mBAAD;GAES;GACP,QAAQ,MAAM,OAAO;GACrB,SACE,yBACU,cAAc,mBAAmB,MAAM,EAAE,IAC/C,KAAA;EAEP,GARM,MAAM,EAQZ,CACF;CAEE,CAAA;AAEX"}
+{"version":3,"file":"LimitOrderRoutes.js","names":[],"sources":["../../../../src/components/Routes/LimitOrderRoutes.tsx"],"sourcesContent":["import { Stack } from '@mui/material'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'\nimport {\n  RouteProviderCard,\n  RouteProviderCardSkeleton,\n} from '../RouteCard/RouteProviderCard.js'\n\nexport const LimitOrderRoutes: React.FC<CardProps> = (props) => {\n  const { routes, isLoading, isFetching, isFetched } = useRoutes()\n  const [toAddress, selectedRouteId] = useFieldValues(\n    'toAddress',\n    'selectedRouteId'\n  )\n  const { setFieldValue } = useFieldActions()\n  const { requiredToAddress } = useToAddressRequirements()\n\n  const currentRoute = routes?.[0]\n\n  if (!currentRoute && !isLoading && !isFetching && !isFetched) {\n    return null\n  }\n\n  const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress\n  const allowInteraction = !toAddressUnsatisfied\n\n  const activeRouteId =\n    routes?.find((route) => route.id === selectedRouteId)?.id ??\n    currentRoute?.id\n\n  return (\n    <Stack\n      direction=\"column\"\n      spacing={1}\n      sx={props.sx}\n      className={props.className}\n    >\n      {isLoading && !currentRoute ? (\n        Array.from({ length: 2 }).map((_, index) => (\n          <RouteProviderCardSkeleton key={index} />\n        ))\n      ) : !currentRoute ? (\n        <RouteNotFoundCard />\n      ) : (\n        routes?.map((route) => (\n          <RouteProviderCard\n            key={route.id}\n            route={route}\n            active={route.id === activeRouteId}\n            onClick={\n              allowInteraction\n                ? () => setFieldValue('selectedRouteId', route.id)\n                : undefined\n            }\n          />\n        ))\n      )}\n    </Stack>\n  )\n}\n"],"mappings":";;;;;;;;;AAYA,MAAa,oBAAyC,UAAU;CAC9D,MAAM,EAAE,QAAQ,WAAW,YAAY,cAAc,UAAU;CAC/D,MAAM,CAAC,WAAW,mBAAmB,eACnC,aACA,iBACF;CACA,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,EAAE,sBAAsB,yBAAyB;CAEvD,MAAM,eAAe,SAAS;CAE9B,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,cAAc,CAAC,WACjD,OAAO;CAIT,MAAM,mBAAmB,EADI,gBAAgB,qBAAqB,CAAC;CAGnE,MAAM,gBACJ,QAAQ,MAAM,UAAU,MAAM,OAAO,eAAe,CAAC,EAAE,MACvD,cAAc;CAEhB,OACE,oBAAC,OAAD;EACE,WAAU;EACV,SAAS;EACT,IAAI,MAAM;EACV,WAAW,MAAM;EAEhB,UAAA,aAAa,CAAC,eACb,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,UAChC,oBAAC,2BAAD,CAAwC,GAAR,KAAQ,CACzC,IACC,CAAC,eACH,oBAAC,mBAAD,CAAoB,CAAA,IAEpB,QAAQ,KAAK,UACX,oBAAC,mBAAD;GAES;GACP,QAAQ,MAAM,OAAO;GACrB,SACE,yBACU,cAAc,mBAAmB,MAAM,EAAE,IAC/C,KAAA;EAEP,GARM,MAAM,EAQZ,CACF;CAEE,CAAA;AAEX"}

package/dist/esm/components/Routes/Routes.js.map

@@ -1 +1 @@
-{"version":3,"file":"Routes.js","names":["Card"],"sources":["../../../../src/components/Routes/Routes.tsx"],"sourcesContent":["import { Box, Collapse } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useTranslation } from 'react-i18next'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { ButtonTertiary } from '../ButtonTertiary.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport { ProgressToNextUpdate } from '../ProgressToNextUpdate.js'\nimport { RouteCard } from '../RouteCard/RouteCard.js'\nimport { RouteCardSkeleton } from '../RouteCard/RouteCardSkeleton.js'\nimport { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'\n\nexport const Routes: React.FC<CardProps> = (props) => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { mode, modeOptions, showSingleRoute, defaultUI } = useWidgetConfig()\n  const {\n    routes,\n    isLoading,\n    isFetching,\n    isFetched,\n    dataUpdatedAt,\n    refetchTime,\n    refetch,\n  } = useRoutes()\n\n  const currentRoute = routes?.[0]\n\n  if (!currentRoute && !isLoading && !isFetching && !isFetched) {\n    return null\n  }\n\n  const handleCardClick = () => {\n    navigate({ to: navigationRoutes.routes })\n  }\n\n  const routeNotFound = !currentRoute && !isLoading && !isFetching\n  const onlySingleRoute = mode === 'refuel' || showSingleRoute\n  const showAll =\n    !onlySingleRoute && !routeNotFound && (routes?.length ?? 0) > 1\n\n  const title =\n    mode === 'custom'\n      ? modeOptions?.custom?.type === 'deposit'\n        ? t('header.receive')\n        : t('header.youPay')\n      : t('header.receive')\n\n  return (\n    <Card {...props}>\n      {/* The cards layout's Receive card already carries this header. */}\n      {defaultUI?.layout === 'cards' ? null : <CardTitle>{title}</CardTitle>}\n      <ProgressToNextUpdate\n        updatedAt={dataUpdatedAt || Date.now()}\n        timeToUpdate={refetchTime}\n        isLoading={isFetching}\n        onClick={() => refetch()}\n        sx={{\n          position: 'absolute',\n          top: 8,\n          right: 8,\n        }}\n      />\n      <Box\n        sx={{\n          p: 2,\n        }}\n      >\n        {isLoading && !currentRoute ? (\n          <RouteCardSkeleton variant=\"cardless\" />\n        ) : !currentRoute ? (\n          <RouteNotFoundCard />\n        ) : (\n          <RouteCard route={currentRoute} variant=\"cardless\" active />\n        )}\n\n        <Collapse timeout={225} in={showAll} unmountOnExit mountOnEnter>\n          <Box\n            sx={{\n              mt: 2,\n            }}\n          >\n            <ButtonTertiary onClick={handleCardClick} fullWidth>\n              {t('button.showAll')}\n            </ButtonTertiary>\n          </Box>\n        </Collapse>\n      </Box>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAa,UAA+B,UAAU;CACpD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,MAAM,aAAa,iBAAiB,cAAc,gBAAgB;CAC1E,MAAM,EACJ,QACA,WACA,YACA,WACA,eACA,aACA,YACE,UAAU;CAEd,MAAM,eAAe,SAAS;CAE9B,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,cAAc,CAAC,WACjD,OAAO;CAGT,MAAM,wBAAwB;EAC5B,SAAS,EAAE,IAAI,iBAAiB,OAAO,CAAC;CAC1C;CAIA,MAAM,UACJ,EAFsB,SAAS,YAAY,oBAEvB,EAHA,CAAC,gBAAgB,CAAC,aAAa,CAAC,gBAGb,QAAQ,UAAU,KAAK;CAEhE,MAAM,QACJ,SAAS,WACL,aAAa,QAAQ,SAAS,YAC5B,EAAE,gBAAgB,IAClB,EAAE,eAAe,IACnB,EAAE,gBAAgB;CAExB,OACE,qBAACA,QAAD;EAAM,GAAI;YAAV;GAEG,WAAW,WAAW,UAAU,OAAO,oBAAC,WAAD,EAAA,UAAY,MAAiB,CAAA;GACrE,oBAAC,sBAAD;IACE,WAAW,iBAAiB,KAAK,IAAI;IACrC,cAAc;IACd,WAAW;IACX,eAAe,QAAQ;IACvB,IAAI;KACF,UAAU;KACV,KAAK;KACL,OAAO;IACT;GACD,CAAA;GACD,qBAAC,KAAD;IACE,IAAI,EACF,GAAG,EACL;cAHF,CAKG,aAAa,CAAC,eACb,oBAAC,mBAAD,EAAmB,SAAQ,WAAY,CAAA,IACrC,CAAC,eACH,oBAAC,mBAAD,CAAoB,CAAA,IAEpB,oBAAC,WAAD;KAAW,OAAO;KAAc,SAAQ;KAAW,QAAA;IAAQ,CAAA,GAG7D,oBAAC,UAAD;KAAU,SAAS;KAAK,IAAI;KAAS,eAAA;KAAc,cAAA;eACjD,oBAAC,KAAD;MACE,IAAI,EACF,IAAI,EACN;gBAEA,oBAAC,gBAAD;OAAgB,SAAS;OAAiB,WAAA;iBACvC,EAAE,gBAAgB;MACL,CAAA;KACb,CAAA;IACG,CAAA,CACP;;EACD;;AAEV"}
+{"version":3,"file":"Routes.js","names":["Card"],"sources":["../../../../src/components/Routes/Routes.tsx"],"sourcesContent":["import { Box, Collapse } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useTranslation } from 'react-i18next'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { ButtonTertiary } from '../ButtonTertiary.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport { ProgressToNextUpdate } from '../ProgressToNextUpdate.js'\nimport { RouteCard } from '../RouteCard/RouteCard.js'\nimport { RouteCardSkeleton } from '../RouteCard/RouteCardSkeleton.js'\nimport { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'\n\nexport const Routes: React.FC<CardProps> = (props) => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { mode, modeOptions, showSingleRoute, defaultUI } = useWidgetConfig()\n  const {\n    routes,\n    isLoading,\n    isFetching,\n    isFetched,\n    dataUpdatedAt,\n    refetchTime,\n    refetch,\n  } = useRoutes()\n\n  const currentRoute = routes?.[0]\n\n  if (!currentRoute && !isLoading && !isFetching && !isFetched) {\n    return null\n  }\n\n  const handleCardClick = () => {\n    navigate({ to: navigationRoutes.routes })\n  }\n\n  const routeNotFound = !currentRoute && !isLoading && !isFetching\n  const onlySingleRoute = mode === 'refuel' || showSingleRoute\n  const showAll =\n    !onlySingleRoute && !routeNotFound && (routes?.length ?? 0) > 1\n\n  const title =\n    mode === 'custom'\n      ? modeOptions?.custom?.type === 'deposit'\n        ? t('header.receive')\n        : t('header.youPay')\n      : t('header.receive')\n\n  return (\n    <Card {...props}>\n      {/* The cards layout's Receive card already carries this header. */}\n      {defaultUI?.layout === 'cards' ? null : <CardTitle>{title}</CardTitle>}\n      <ProgressToNextUpdate\n        updatedAt={dataUpdatedAt || Date.now()}\n        timeToUpdate={refetchTime}\n        isLoading={isFetching}\n        onClick={() => refetch()}\n        sx={{\n          position: 'absolute',\n          top: 8,\n          right: 8,\n        }}\n      />\n      <Box\n        sx={{\n          p: 2,\n        }}\n      >\n        {isLoading && !currentRoute ? (\n          <RouteCardSkeleton variant=\"cardless\" />\n        ) : !currentRoute ? (\n          <RouteNotFoundCard />\n        ) : (\n          <RouteCard route={currentRoute} variant=\"cardless\" active />\n        )}\n\n        <Collapse timeout={225} in={showAll} unmountOnExit mountOnEnter>\n          <Box\n            sx={{\n              mt: 2,\n            }}\n          >\n            <ButtonTertiary onClick={handleCardClick} fullWidth>\n              {t('button.showAll')}\n            </ButtonTertiary>\n          </Box>\n        </Collapse>\n      </Box>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAa,UAA+B,UAAU;CACpD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,MAAM,aAAa,iBAAiB,cAAc,gBAAgB;CAC1E,MAAM,EACJ,QACA,WACA,YACA,WACA,eACA,aACA,YACE,UAAU;CAEd,MAAM,eAAe,SAAS;CAE9B,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,cAAc,CAAC,WACjD,OAAO;CAGT,MAAM,wBAAwB;EAC5B,SAAS,EAAE,IAAI,iBAAiB,OAAO,CAAC;CAC1C;CAIA,MAAM,UACJ,EAFsB,SAAS,YAAY,oBAEvB,EAHA,CAAC,gBAAgB,CAAC,aAAa,CAAC,gBAGb,QAAQ,UAAU,KAAK;CAEhE,MAAM,QACJ,SAAS,WACL,aAAa,QAAQ,SAAS,YAC5B,EAAE,gBAAgB,IAClB,EAAE,eAAe,IACnB,EAAE,gBAAgB;CAExB,OACE,qBAACA,QAAD;EAAM,GAAI;EAAV,UAAA;GAEG,WAAW,WAAW,UAAU,OAAO,oBAAC,WAAD,EAAA,UAAY,MAAiB,CAAA;GACrE,oBAAC,sBAAD;IACE,WAAW,iBAAiB,KAAK,IAAI;IACrC,cAAc;IACd,WAAW;IACX,eAAe,QAAQ;IACvB,IAAI;KACF,UAAU;KACV,KAAK;KACL,OAAO;IACT;GACD,CAAA;GACD,qBAAC,KAAD;IACE,IAAI,EACF,GAAG,EACL;IAHF,UAAA,CAKG,aAAa,CAAC,eACb,oBAAC,mBAAD,EAAmB,SAAQ,WAAY,CAAA,IACrC,CAAC,eACH,oBAAC,mBAAD,CAAoB,CAAA,IAEpB,oBAAC,WAAD;KAAW,OAAO;KAAc,SAAQ;KAAW,QAAA;IAAQ,CAAA,GAG7D,oBAAC,UAAD;KAAU,SAAS;KAAK,IAAI;KAAS,eAAA;KAAc,cAAA;KACjD,UAAA,oBAAC,KAAD;MACE,IAAI,EACF,IAAI,EACN;MAEA,UAAA,oBAAC,gBAAD;OAAgB,SAAS;OAAiB,WAAA;OACvC,UAAA,EAAE,gBAAgB;MACL,CAAA;KACb,CAAA;IACG,CAAA,CACP;;EACD;;AAEV"}

package/dist/esm/components/Routes/RoutesContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"RoutesContent.js","names":["Container"],"sources":["../../../../src/components/Routes/RoutesContent.tsx"],"sourcesContent":["import type { ExtendedChain, Route } from '@lifi/sdk'\nimport { useAccount } from '@lifi/wallet-management'\nimport { Stack, Typography } from '@mui/material'\nimport type React from 'react'\nimport { memo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { PageContainer } from '../PageContainer.js'\nimport { ProgressToNextUpdate } from '../ProgressToNextUpdate.js'\nimport { RouteCard } from '../RouteCard/RouteCard.js'\nimport { RouteCardSkeleton } from '../RouteCard/RouteCardSkeleton.js'\nimport { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'\nimport { Container, Header } from './RoutesExpanded.style.js'\n\ninterface RoutesContentProps {\n  routes?: Route[]\n  isFetching: boolean\n  isLoading: boolean\n  dataUpdatedAt: number\n  refetchTime: number\n  fromChain: ExtendedChain | undefined\n  refetch: () => void\n  onRouteClick: (route: Route) => void\n}\n\nconst headerHeight = '52px'\n\nexport const RoutesContent: React.NamedExoticComponent<RoutesContentProps> =\n  memo(function RoutesContent({\n    routes,\n    isFetching,\n    isLoading,\n    dataUpdatedAt,\n    refetchTime,\n    fromChain,\n    refetch,\n    onRouteClick,\n  }: RoutesContentProps) {\n    const { t } = useTranslation()\n    const { mode, modeOptions } = useWidgetConfig()\n\n    const { account } = useAccount({ chainType: fromChain?.chainType })\n    const [toAddress] = useFieldValues('toAddress')\n    const { requiredToAddress } = useToAddressRequirements()\n\n    const currentRoute = routes?.[0]\n\n    const routeNotFound = !currentRoute && !isLoading && !isFetching\n    const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress\n    const allowInteraction = account.isConnected && !toAddressUnsatisfied\n\n    const title =\n      mode === 'custom'\n        ? modeOptions?.custom?.type === 'deposit'\n          ? t('header.deposit')\n          : t('header.youPay')\n        : t('header.receive')\n\n    return (\n      <Container enableColorScheme minimumHeight={isLoading}>\n        <Header sx={{ height: headerHeight }}>\n          <Typography\n            noWrap\n            sx={{\n              fontSize: 18,\n              fontWeight: '700',\n              flex: 1,\n            }}\n          >\n            {title}\n          </Typography>\n          <ProgressToNextUpdate\n            updatedAt={dataUpdatedAt || Date.now()}\n            timeToUpdate={refetchTime}\n            isLoading={isFetching}\n            onClick={() => refetch()}\n            sx={{ marginRight: -1 }}\n          />\n        </Header>\n        <PageContainer\n          sx={{ height: `calc(100% - ${headerHeight})`, overflow: 'auto' }}\n        >\n          <Stack\n            direction=\"column\"\n            spacing={2}\n            sx={{\n              flex: 1,\n              paddingTop: 1.5,\n              paddingBottom: 3,\n            }}\n          >\n            {routeNotFound ? (\n              <RouteNotFoundCard />\n            ) : (isLoading || isFetching) && !routes?.length ? (\n              Array.from({ length: 3 }).map((_, index) => (\n                <RouteCardSkeleton key={index} />\n              ))\n            ) : (\n              routes?.map((route: Route, index: number) => (\n                <RouteCard\n                  key={index}\n                  route={route}\n                  onClick={\n                    allowInteraction ? () => onRouteClick(route) : undefined\n                  }\n                  active={index === 0}\n                  expanded={routes?.length === 1}\n                />\n              ))\n            )}\n          </Stack>\n        </PageContainer>\n      </Container>\n    )\n  })\n"],"mappings":";;;;;;;;;;;;;;;AA2BA,MAAM,eAAe;AAErB,MAAa,gBACX,KAAK,SAAS,cAAc,EAC1B,QACA,YACA,WACA,eACA,aACA,WACA,SACA,gBACqB;CACrB,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,MAAM,gBAAgB,gBAAgB;CAE9C,MAAM,EAAE,YAAY,WAAW,EAAE,WAAW,WAAW,UAAU,CAAC;CAClE,MAAM,CAAC,aAAa,eAAe,WAAW;CAC9C,MAAM,EAAE,sBAAsB,yBAAyB;CAEvD,MAAM,eAAe,SAAS;CAE9B,MAAM,gBAAgB,CAAC,gBAAgB,CAAC,aAAa,CAAC;CACtD,MAAM,uBAAuB,gBAAgB,qBAAqB,CAAC;CACnE,MAAM,mBAAmB,QAAQ,eAAe,CAAC;CAEjD,MAAM,QACJ,SAAS,WACL,aAAa,QAAQ,SAAS,YAC5B,EAAE,gBAAgB,IAClB,EAAE,eAAe,IACnB,EAAE,gBAAgB;CAExB,OACE,qBAACA,aAAD;EAAW,mBAAA;EAAkB,eAAe;YAA5C,CACE,qBAAC,QAAD;GAAQ,IAAI,EAAE,QAAQ,aAAa;aAAnC,CACE,oBAAC,YAAD;IACE,QAAA;IACA,IAAI;KACF,UAAU;KACV,YAAY;KACZ,MAAM;IACR;cAEC;GACS,CAAA,GACZ,oBAAC,sBAAD;IACE,WAAW,iBAAiB,KAAK,IAAI;IACrC,cAAc;IACd,WAAW;IACX,eAAe,QAAQ;IACvB,IAAI,EAAE,aAAa,GAAG;GACvB,CAAA,CACK;MACR,oBAAC,eAAD;GACE,IAAI;IAAE,QAAQ,eAAe,aAAa;IAAI,UAAU;GAAO;aAE/D,oBAAC,OAAD;IACE,WAAU;IACV,SAAS;IACT,IAAI;KACF,MAAM;KACN,YAAY;KACZ,eAAe;IACjB;cAEC,gBACC,oBAAC,mBAAD,CAAoB,CAAA,KACjB,aAAa,eAAe,CAAC,QAAQ,SACxC,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,UAChC,oBAAC,mBAAD,CAAgC,GAAR,KAAQ,CACjC,IAED,QAAQ,KAAK,OAAc,UACzB,oBAAC,WAAD;KAES;KACP,SACE,yBAAyB,aAAa,KAAK,IAAI,KAAA;KAEjD,QAAQ,UAAU;KAClB,UAAU,QAAQ,WAAW;IAC9B,GAPM,KAON,CACF;GAEE,CAAA;EACM,CAAA,CACN;;AAEf,CAAC"}
+{"version":3,"file":"RoutesContent.js","names":["Container"],"sources":["../../../../src/components/Routes/RoutesContent.tsx"],"sourcesContent":["import type { ExtendedChain, Route } from '@lifi/sdk'\nimport { useAccount } from '@lifi/wallet-management'\nimport { Stack, Typography } from '@mui/material'\nimport type React from 'react'\nimport { memo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { PageContainer } from '../PageContainer.js'\nimport { ProgressToNextUpdate } from '../ProgressToNextUpdate.js'\nimport { RouteCard } from '../RouteCard/RouteCard.js'\nimport { RouteCardSkeleton } from '../RouteCard/RouteCardSkeleton.js'\nimport { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'\nimport { Container, Header } from './RoutesExpanded.style.js'\n\ninterface RoutesContentProps {\n  routes?: Route[]\n  isFetching: boolean\n  isLoading: boolean\n  dataUpdatedAt: number\n  refetchTime: number\n  fromChain: ExtendedChain | undefined\n  refetch: () => void\n  onRouteClick: (route: Route) => void\n}\n\nconst headerHeight = '52px'\n\nexport const RoutesContent: React.NamedExoticComponent<RoutesContentProps> =\n  memo(function RoutesContent({\n    routes,\n    isFetching,\n    isLoading,\n    dataUpdatedAt,\n    refetchTime,\n    fromChain,\n    refetch,\n    onRouteClick,\n  }: RoutesContentProps) {\n    const { t } = useTranslation()\n    const { mode, modeOptions } = useWidgetConfig()\n\n    const { account } = useAccount({ chainType: fromChain?.chainType })\n    const [toAddress] = useFieldValues('toAddress')\n    const { requiredToAddress } = useToAddressRequirements()\n\n    const currentRoute = routes?.[0]\n\n    const routeNotFound = !currentRoute && !isLoading && !isFetching\n    const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress\n    const allowInteraction = account.isConnected && !toAddressUnsatisfied\n\n    const title =\n      mode === 'custom'\n        ? modeOptions?.custom?.type === 'deposit'\n          ? t('header.deposit')\n          : t('header.youPay')\n        : t('header.receive')\n\n    return (\n      <Container enableColorScheme minimumHeight={isLoading}>\n        <Header sx={{ height: headerHeight }}>\n          <Typography\n            noWrap\n            sx={{\n              fontSize: 18,\n              fontWeight: '700',\n              flex: 1,\n            }}\n          >\n            {title}\n          </Typography>\n          <ProgressToNextUpdate\n            updatedAt={dataUpdatedAt || Date.now()}\n            timeToUpdate={refetchTime}\n            isLoading={isFetching}\n            onClick={() => refetch()}\n            sx={{ marginRight: -1 }}\n          />\n        </Header>\n        <PageContainer\n          sx={{ height: `calc(100% - ${headerHeight})`, overflow: 'auto' }}\n        >\n          <Stack\n            direction=\"column\"\n            spacing={2}\n            sx={{\n              flex: 1,\n              paddingTop: 1.5,\n              paddingBottom: 3,\n            }}\n          >\n            {routeNotFound ? (\n              <RouteNotFoundCard />\n            ) : (isLoading || isFetching) && !routes?.length ? (\n              Array.from({ length: 3 }).map((_, index) => (\n                <RouteCardSkeleton key={index} />\n              ))\n            ) : (\n              routes?.map((route: Route, index: number) => (\n                <RouteCard\n                  key={index}\n                  route={route}\n                  onClick={\n                    allowInteraction ? () => onRouteClick(route) : undefined\n                  }\n                  active={index === 0}\n                  expanded={routes?.length === 1}\n                />\n              ))\n            )}\n          </Stack>\n        </PageContainer>\n      </Container>\n    )\n  })\n"],"mappings":";;;;;;;;;;;;;;;AA2BA,MAAM,eAAe;AAErB,MAAa,gBACX,KAAK,SAAS,cAAc,EAC1B,QACA,YACA,WACA,eACA,aACA,WACA,SACA,gBACqB;CACrB,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,MAAM,gBAAgB,gBAAgB;CAE9C,MAAM,EAAE,YAAY,WAAW,EAAE,WAAW,WAAW,UAAU,CAAC;CAClE,MAAM,CAAC,aAAa,eAAe,WAAW;CAC9C,MAAM,EAAE,sBAAsB,yBAAyB;CAEvD,MAAM,eAAe,SAAS;CAE9B,MAAM,gBAAgB,CAAC,gBAAgB,CAAC,aAAa,CAAC;CACtD,MAAM,uBAAuB,gBAAgB,qBAAqB,CAAC;CACnE,MAAM,mBAAmB,QAAQ,eAAe,CAAC;CAEjD,MAAM,QACJ,SAAS,WACL,aAAa,QAAQ,SAAS,YAC5B,EAAE,gBAAgB,IAClB,EAAE,eAAe,IACnB,EAAE,gBAAgB;CAExB,OACE,qBAACA,aAAD;EAAW,mBAAA;EAAkB,eAAe;EAA5C,UAAA,CACE,qBAAC,QAAD;GAAQ,IAAI,EAAE,QAAQ,aAAa;GAAnC,UAAA,CACE,oBAAC,YAAD;IACE,QAAA;IACA,IAAI;KACF,UAAU;KACV,YAAY;KACZ,MAAM;IACR;IAEC,UAAA;GACS,CAAA,GACZ,oBAAC,sBAAD;IACE,WAAW,iBAAiB,KAAK,IAAI;IACrC,cAAc;IACd,WAAW;IACX,eAAe,QAAQ;IACvB,IAAI,EAAE,aAAa,GAAG;GACvB,CAAA,CACK;EACR,CAAA,GAAA,oBAAC,eAAD;GACE,IAAI;IAAE,QAAQ,eAAe,aAAa;IAAI,UAAU;GAAO;GAE/D,UAAA,oBAAC,OAAD;IACE,WAAU;IACV,SAAS;IACT,IAAI;KACF,MAAM;KACN,YAAY;KACZ,eAAe;IACjB;IAEC,UAAA,gBACC,oBAAC,mBAAD,CAAoB,CAAA,KACjB,aAAa,eAAe,CAAC,QAAQ,SACxC,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,UAChC,oBAAC,mBAAD,CAAgC,GAAR,KAAQ,CACjC,IAED,QAAQ,KAAK,OAAc,UACzB,oBAAC,WAAD;KAES;KACP,SACE,yBAAyB,aAAa,KAAK,IAAI,KAAA;KAEjD,QAAQ,UAAU;KAClB,UAAU,QAAQ,WAAW;IAC9B,GAPM,KAON,CACF;GAEE,CAAA;EACM,CAAA,CACN;;AAEf,CAAC"}

package/dist/esm/components/Routes/RoutesExpanded.js.map

@@ -1 +1 @@
-{"version":3,"file":"RoutesExpanded.js","names":[],"sources":["../../../../src/components/Routes/RoutesExpanded.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport { useNavigate } from '@tanstack/react-router'\nimport type React from 'react'\nimport { memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { ExpansionTransition } from '../Expansion/ExpansionTransition.js'\nimport { RoutesContent } from './RoutesContent.js'\nimport { routesExpansionWidth } from './RoutesExpanded.style.js'\n\ninterface RoutesExpandedProps {\n  canOpen: boolean\n  setOpenExpansion: (open: boolean) => void\n}\n\nexport const RoutesExpanded: React.NamedExoticComponent<RoutesExpandedProps> =\n  memo(function RoutesExpanded({\n    canOpen,\n    setOpenExpansion,\n  }: RoutesExpandedProps) {\n    const emitter = useWidgetEvents()\n    const navigate = useNavigate()\n    const routesRef = useRef<Route[]>(undefined)\n    const routesActiveRef = useRef(false)\n\n    const {\n      routes,\n      isLoading,\n      isFetching,\n      isFetched,\n      dataUpdatedAt,\n      refetchTime,\n      fromChain,\n      refetch,\n      setReviewableRoute,\n    } = useRoutes()\n\n    const onExit = useCallback(() => {\n      // Clean routes cache on exit\n      routesRef.current = undefined\n    }, [])\n\n    // We cache routes results in ref for a better exit animation\n    if (routesRef.current && !routes) {\n      routesActiveRef.current = false\n      // If we are loading routes with a new queryKey, we need to clear the cache\n      if (isLoading) {\n        routesRef.current = undefined\n      }\n    } else {\n      routesRef.current = routes\n      routesActiveRef.current = Boolean(routes)\n    }\n\n    const expanded =\n      Boolean(\n        routesActiveRef.current || isLoading || isFetching || isFetched\n      ) && canOpen\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: stable navigation callback that won't cause rerenders in RoutesContent\n    const onRouteClick = useCallback(\n      (route: Route) => {\n        setReviewableRoute(route)\n        navigate({\n          to: navigationRoutes.transactionExecution,\n          search: { routeId: route.id },\n        })\n        emitter.emit(WidgetEvent.RouteSelected, { route, routes: routes! })\n      },\n      [emitter, routes, setReviewableRoute]\n    )\n\n    // Use layout effect to update parent's width when expansion changes\n    useLayoutEffect(() => {\n      setOpenExpansion(expanded)\n    }, [expanded, setOpenExpansion])\n\n    useEffect(() => {\n      emitter.emit(WidgetEvent.WidgetExpanded, expanded)\n    }, [emitter, expanded])\n\n    return (\n      <ExpansionTransition\n        in={expanded}\n        width={routesExpansionWidth}\n        onExited={onExit}\n      >\n        <RoutesContent\n          routes={routesRef.current}\n          isFetching={isFetching}\n          isLoading={isLoading}\n          dataUpdatedAt={dataUpdatedAt}\n          refetchTime={refetchTime}\n          fromChain={fromChain}\n          refetch={refetch}\n          onRouteClick={onRouteClick}\n        />\n      </ExpansionTransition>\n    )\n  })\n"],"mappings":";;;;;;;;;;;AAiBA,MAAa,iBACX,KAAK,SAAS,eAAe,EAC3B,SACA,oBACsB;CACtB,MAAM,UAAU,gBAAgB;CAChC,MAAM,WAAW,YAAY;CAC7B,MAAM,YAAY,OAAgB,KAAA,CAAS;CAC3C,MAAM,kBAAkB,OAAO,KAAK;CAEpC,MAAM,EACJ,QACA,WACA,YACA,WACA,eACA,aACA,WACA,SACA,uBACE,UAAU;CAEd,MAAM,SAAS,kBAAkB;EAE/B,UAAU,UAAU,KAAA;CACtB,GAAG,CAAC,CAAC;CAGL,IAAI,UAAU,WAAW,CAAC,QAAQ;EAChC,gBAAgB,UAAU;EAE1B,IAAI,WACF,UAAU,UAAU,KAAA;CAExB,OAAO;EACL,UAAU,UAAU;EACpB,gBAAgB,UAAU,QAAQ,MAAM;CAC1C;CAEA,MAAM,WACJ,QACE,gBAAgB,WAAW,aAAa,cAAc,SACxD,KAAK;CAGP,MAAM,eAAe,aAClB,UAAiB;EAChB,mBAAmB,KAAK;EACxB,SAAS;GACP,IAAI,iBAAiB;GACrB,QAAQ,EAAE,SAAS,MAAM,GAAG;EAC9B,CAAC;EACD,QAAQ,KAAA,iBAAgC;GAAE;GAAe;EAAQ,CAAC;CACpE,GACA;EAAC;EAAS;EAAQ;CAAkB,CACtC;CAGA,sBAAsB;EACpB,iBAAiB,QAAQ;CAC3B,GAAG,CAAC,UAAU,gBAAgB,CAAC;CAE/B,gBAAgB;EACd,QAAQ,KAAA,kBAAiC,QAAQ;CACnD,GAAG,CAAC,SAAS,QAAQ,CAAC;CAEtB,OACE,oBAAC,qBAAD;EACE,IAAI;EACJ,OAAO;EACP,UAAU;YAEV,oBAAC,eAAD;GACE,QAAQ,UAAU;GACN;GACD;GACI;GACF;GACF;GACF;GACK;EACf,CAAA;CACkB,CAAA;AAEzB,CAAC"}
+{"version":3,"file":"RoutesExpanded.js","names":[],"sources":["../../../../src/components/Routes/RoutesExpanded.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport { useNavigate } from '@tanstack/react-router'\nimport type React from 'react'\nimport { memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { ExpansionTransition } from '../Expansion/ExpansionTransition.js'\nimport { RoutesContent } from './RoutesContent.js'\nimport { routesExpansionWidth } from './RoutesExpanded.style.js'\n\ninterface RoutesExpandedProps {\n  canOpen: boolean\n  setOpenExpansion: (open: boolean) => void\n}\n\nexport const RoutesExpanded: React.NamedExoticComponent<RoutesExpandedProps> =\n  memo(function RoutesExpanded({\n    canOpen,\n    setOpenExpansion,\n  }: RoutesExpandedProps) {\n    const emitter = useWidgetEvents()\n    const navigate = useNavigate()\n    const routesRef = useRef<Route[]>(undefined)\n    const routesActiveRef = useRef(false)\n\n    const {\n      routes,\n      isLoading,\n      isFetching,\n      isFetched,\n      dataUpdatedAt,\n      refetchTime,\n      fromChain,\n      refetch,\n      setReviewableRoute,\n    } = useRoutes()\n\n    const onExit = useCallback(() => {\n      // Clean routes cache on exit\n      routesRef.current = undefined\n    }, [])\n\n    // We cache routes results in ref for a better exit animation\n    if (routesRef.current && !routes) {\n      routesActiveRef.current = false\n      // If we are loading routes with a new queryKey, we need to clear the cache\n      if (isLoading) {\n        routesRef.current = undefined\n      }\n    } else {\n      routesRef.current = routes\n      routesActiveRef.current = Boolean(routes)\n    }\n\n    const expanded =\n      Boolean(\n        routesActiveRef.current || isLoading || isFetching || isFetched\n      ) && canOpen\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: stable navigation callback that won't cause rerenders in RoutesContent\n    const onRouteClick = useCallback(\n      (route: Route) => {\n        setReviewableRoute(route)\n        navigate({\n          to: navigationRoutes.transactionExecution,\n          search: { routeId: route.id },\n        })\n        emitter.emit(WidgetEvent.RouteSelected, { route, routes: routes! })\n      },\n      [emitter, routes, setReviewableRoute]\n    )\n\n    // Use layout effect to update parent's width when expansion changes\n    useLayoutEffect(() => {\n      setOpenExpansion(expanded)\n    }, [expanded, setOpenExpansion])\n\n    useEffect(() => {\n      emitter.emit(WidgetEvent.WidgetExpanded, expanded)\n    }, [emitter, expanded])\n\n    return (\n      <ExpansionTransition\n        in={expanded}\n        width={routesExpansionWidth}\n        onExited={onExit}\n      >\n        <RoutesContent\n          routes={routesRef.current}\n          isFetching={isFetching}\n          isLoading={isLoading}\n          dataUpdatedAt={dataUpdatedAt}\n          refetchTime={refetchTime}\n          fromChain={fromChain}\n          refetch={refetch}\n          onRouteClick={onRouteClick}\n        />\n      </ExpansionTransition>\n    )\n  })\n"],"mappings":";;;;;;;;;;;AAiBA,MAAa,iBACX,KAAK,SAAS,eAAe,EAC3B,SACA,oBACsB;CACtB,MAAM,UAAU,gBAAgB;CAChC,MAAM,WAAW,YAAY;CAC7B,MAAM,YAAY,OAAgB,KAAA,CAAS;CAC3C,MAAM,kBAAkB,OAAO,KAAK;CAEpC,MAAM,EACJ,QACA,WACA,YACA,WACA,eACA,aACA,WACA,SACA,uBACE,UAAU;CAEd,MAAM,SAAS,kBAAkB;EAE/B,UAAU,UAAU,KAAA;CACtB,GAAG,CAAC,CAAC;CAGL,IAAI,UAAU,WAAW,CAAC,QAAQ;EAChC,gBAAgB,UAAU;EAE1B,IAAI,WACF,UAAU,UAAU,KAAA;CAExB,OAAO;EACL,UAAU,UAAU;EACpB,gBAAgB,UAAU,QAAQ,MAAM;CAC1C;CAEA,MAAM,WACJ,QACE,gBAAgB,WAAW,aAAa,cAAc,SACxD,KAAK;CAGP,MAAM,eAAe,aAClB,UAAiB;EAChB,mBAAmB,KAAK;EACxB,SAAS;GACP,IAAI,iBAAiB;GACrB,QAAQ,EAAE,SAAS,MAAM,GAAG;EAC9B,CAAC;EACD,QAAQ,KAAA,iBAAgC;GAAE;GAAe;EAAQ,CAAC;CACpE,GACA;EAAC;EAAS;EAAQ;CAAkB,CACtC;CAGA,sBAAsB;EACpB,iBAAiB,QAAQ;CAC3B,GAAG,CAAC,UAAU,gBAAgB,CAAC;CAE/B,gBAAgB;EACd,QAAQ,KAAA,kBAAiC,QAAQ;CACnD,GAAG,CAAC,SAAS,QAAQ,CAAC;CAEtB,OACE,oBAAC,qBAAD;EACE,IAAI;EACJ,OAAO;EACP,UAAU;EAEV,UAAA,oBAAC,eAAD;GACE,QAAQ,UAAU;GACN;GACD;GACI;GACF;GACF;GACF;GACK;EACf,CAAA;CACkB,CAAA;AAEzB,CAAC"}

package/dist/esm/components/Search/SearchInput.d.ts

@@ -0,0 +1,17 @@
+import { ChangeEventHandler, FocusEventHandler, JSX, RefObject } from "react";
+//#region src/components/Search/SearchInput.d.ts
+interface SearchInputProps {
+  inputRef?: RefObject<HTMLInputElement | null>;
+  name?: string;
+  value?: string;
+  placeholder?: string;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+  onClear?: () => void;
+  autoFocus?: boolean;
+  size?: "small" | "medium";
+}
+declare const SearchInput: ({ inputRef, name, placeholder, onChange, onBlur, onClear, value, autoFocus, size }: SearchInputProps) => JSX.Element;
+//#endregion
+export { SearchInput };
+//# sourceMappingURL=SearchInput.d.ts.map

package/dist/esm/components/Search/SearchInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.d.ts","names":[],"sources":["../../../../src/components/Search/SearchInput.tsx"],"mappings":";;UAYU;EACR,WAAW,UAAU;EACrB;EACA;EACA;EACA,WAAW,mBAAmB;EAC9B,SAAS,kBAAkB;EAC3B;EACA;EACA;;cAGW,gBACX,UACA,MACA,aACA,UACA,QACA,SACA,OACA,WACA,QACC,qBAAmB,IAAI"}

package/dist/esm/components/Search/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","names":[],"sources":["../../../../src/components/Search/SearchInput.tsx"],"sourcesContent":["import ClearIcon from '@mui/icons-material/Clear'\nimport Search from '@mui/icons-material/Search'\nimport { FormControl, IconButton, InputAdornment } from '@mui/material'\nimport type {\n  ChangeEventHandler,\n  FocusEventHandler,\n  JSX,\n  RefObject,\n} from 'react'\nimport { InputCard } from '../../components/Card/InputCard.js'\nimport { Input } from './SearchInput.style.js'\n\ninterface SearchInputProps {\n  inputRef?: RefObject<HTMLInputElement | null>\n  name?: string\n  value?: string\n  placeholder?: string\n  onChange?: ChangeEventHandler<HTMLInputElement>\n  onBlur?: FocusEventHandler<HTMLInputElement>\n  onClear?: () => void\n  autoFocus?: boolean\n  size?: 'small' | 'medium'\n}\n\nexport const SearchInput = ({\n  inputRef,\n  name,\n  placeholder,\n  onChange,\n  onBlur,\n  onClear,\n  value,\n  autoFocus,\n  size = 'medium',\n}: SearchInputProps): JSX.Element => {\n  return (\n    <InputCard>\n      <FormControl fullWidth>\n        <Input\n          inputRef={inputRef}\n          size={size}\n          placeholder={placeholder}\n          startAdornment={\n            <InputAdornment position=\"start\">\n              <Search />\n            </InputAdornment>\n          }\n          endAdornment={\n            (value || inputRef?.current?.value) &&\n            onClear && (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  size={size}\n                  onClick={onClear}\n                  aria-label=\"Clear\"\n                  tabIndex={-1}\n                  sx={{\n                    padding: 0.5,\n                  }}\n                >\n                  <ClearIcon fontSize={size} />\n                </IconButton>\n              </InputAdornment>\n            )\n          }\n          inputProps={{\n            inputMode: 'search',\n            onChange,\n            onBlur,\n            name,\n            value,\n            maxLength: 128,\n          }}\n          autoComplete=\"off\"\n          autoFocus={autoFocus}\n        />\n      </FormControl>\n    </InputCard>\n  )\n}\n"],"mappings":";;;;;;;AAwBA,MAAa,eAAe,EAC1B,UACA,MACA,aACA,UACA,QACA,SACA,OACA,WACA,OAAO,eAC4B;CACnC,OACE,oBAAC,WAAD,EAAA,UACE,oBAAC,aAAD;EAAa,WAAA;YACX,oBAAC,OAAD;GACY;GACJ;GACO;GACb,gBACE,oBAAC,gBAAD;IAAgB,UAAS;cACvB,oBAAC,QAAD,CAAS,CAAA;GACK,CAAA;GAElB,eACG,SAAS,UAAU,SAAS,UAC7B,WACE,oBAAC,gBAAD;IAAgB,UAAS;cACvB,oBAAC,YAAD;KACQ;KACN,SAAS;KACT,cAAW;KACX,UAAU;KACV,IAAI,EACF,SAAS,GACX;eAEA,oBAAC,WAAD,EAAW,UAAU,KAAO,CAAA;IAClB,CAAA;GACE,CAAA;GAGpB,YAAY;IACV,WAAW;IACX;IACA;IACA;IACA;IACA,WAAW;GACb;GACA,cAAa;GACF;EACZ,CAAA;CACU,CAAA,EACJ,CAAA;AAEf"}
+{"version":3,"file":"SearchInput.js","names":[],"sources":["../../../../src/components/Search/SearchInput.tsx"],"sourcesContent":["import ClearIcon from '@mui/icons-material/Clear'\nimport Search from '@mui/icons-material/Search'\nimport { FormControl, IconButton, InputAdornment } from '@mui/material'\nimport type {\n  ChangeEventHandler,\n  FocusEventHandler,\n  JSX,\n  RefObject,\n} from 'react'\nimport { InputCard } from '../../components/Card/InputCard.js'\nimport { Input } from './SearchInput.style.js'\n\ninterface SearchInputProps {\n  inputRef?: RefObject<HTMLInputElement | null>\n  name?: string\n  value?: string\n  placeholder?: string\n  onChange?: ChangeEventHandler<HTMLInputElement>\n  onBlur?: FocusEventHandler<HTMLInputElement>\n  onClear?: () => void\n  autoFocus?: boolean\n  size?: 'small' | 'medium'\n}\n\nexport const SearchInput = ({\n  inputRef,\n  name,\n  placeholder,\n  onChange,\n  onBlur,\n  onClear,\n  value,\n  autoFocus,\n  size = 'medium',\n}: SearchInputProps): JSX.Element => {\n  return (\n    <InputCard>\n      <FormControl fullWidth>\n        <Input\n          inputRef={inputRef}\n          size={size}\n          placeholder={placeholder}\n          startAdornment={\n            <InputAdornment position=\"start\">\n              <Search />\n            </InputAdornment>\n          }\n          endAdornment={\n            (value || inputRef?.current?.value) &&\n            onClear && (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  size={size}\n                  onClick={onClear}\n                  aria-label=\"Clear\"\n                  tabIndex={-1}\n                  sx={{\n                    padding: 0.5,\n                  }}\n                >\n                  <ClearIcon fontSize={size} />\n                </IconButton>\n              </InputAdornment>\n            )\n          }\n          inputProps={{\n            inputMode: 'search',\n            onChange,\n            onBlur,\n            name,\n            value,\n            maxLength: 128,\n          }}\n          autoComplete=\"off\"\n          autoFocus={autoFocus}\n        />\n      </FormControl>\n    </InputCard>\n  )\n}\n"],"mappings":";;;;;;;AAwBA,MAAa,eAAe,EAC1B,UACA,MACA,aACA,UACA,QACA,SACA,OACA,WACA,OAAO,eAC4B;CACnC,OACE,oBAAC,WAAD,EAAA,UACE,oBAAC,aAAD;EAAa,WAAA;EACX,UAAA,oBAAC,OAAD;GACY;GACJ;GACO;GACb,gBACE,oBAAC,gBAAD;IAAgB,UAAS;IACvB,UAAA,oBAAC,QAAD,CAAS,CAAA;GACK,CAAA;GAElB,eACG,SAAS,UAAU,SAAS,UAC7B,WACE,oBAAC,gBAAD;IAAgB,UAAS;IACvB,UAAA,oBAAC,YAAD;KACQ;KACN,SAAS;KACT,cAAW;KACX,UAAU;KACV,IAAI,EACF,SAAS,GACX;KAEA,UAAA,oBAAC,WAAD,EAAW,UAAU,KAAO,CAAA;IAClB,CAAA;GACE,CAAA;GAGpB,YAAY;IACV,WAAW;IACX;IACA;IACA;IACA;IACA,WAAW;GACb;GACA,cAAa;GACF;EACZ,CAAA;CACU,CAAA,EACJ,CAAA;AAEf"}

package/dist/esm/components/SelectChainAndToken.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectChainAndToken.js","names":[],"sources":["../../../src/components/SelectChainAndToken.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { Box } from '@mui/material'\nimport { ReverseTokensButton } from '../components/ReverseTokensButton/ReverseTokensButton.js'\nimport { SelectTokenButton } from '../components/SelectTokenButton/SelectTokenButton.js'\nimport { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'\nimport { ReverseTokensButtonEmpty } from './ReverseTokensButton/ReverseTokensButton.style.js'\n\nexport const SelectChainAndToken: React.FC<BoxProps> = (props) => {\n  const { disabledUI, hiddenUI, mode } = useWidgetConfig()\n\n  const hiddenReverse =\n    mode === 'refuel' ||\n    disabledUI?.fromToken ||\n    disabledUI?.toToken ||\n    hiddenUI?.fromToken ||\n    hiddenUI?.toToken ||\n    hiddenUI?.reverseTokensButton\n\n  const hiddenFromToken = hiddenUI?.fromToken\n  const hiddenToToken = mode === 'custom' || hiddenUI?.toToken\n\n  const showReverseButton = !hiddenToToken && !hiddenFromToken\n\n  return (\n    <Box {...props} sx={{ display: 'flex', ...props.sx }}>\n      {!hiddenFromToken ? (\n        <SelectTokenButton formType=\"from\" hiddenReverse={hiddenReverse} />\n      ) : null}\n      {showReverseButton ? (\n        !hiddenReverse ? (\n          <ReverseTokensButton />\n        ) : (\n          <ReverseTokensButtonEmpty />\n        )\n      ) : null}\n      {!hiddenToToken ? (\n        <SelectTokenButton formType=\"to\" hiddenReverse={hiddenReverse} />\n      ) : null}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;AAOA,MAAa,uBAA2C,UAAU;CAChE,MAAM,EAAE,YAAY,UAAU,SAAS,gBAAgB;CAEvD,MAAM,gBACJ,SAAS,YACT,YAAY,aACZ,YAAY,WACZ,UAAU,aACV,UAAU,WACV,UAAU;CAEZ,MAAM,kBAAkB,UAAU;CAClC,MAAM,gBAAgB,SAAS,YAAY,UAAU;CAErD,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;CAE7C,OACE,qBAAC,KAAD;EAAK,GAAI;EAAO,IAAI;GAAE,SAAS;GAAQ,GAAG,MAAM;EAAG;YAAnD;GACG,CAAC,kBACA,oBAAC,mBAAD;IAAmB,UAAS;IAAsB;GAAgB,CAAA,IAChE;GACH,oBACC,CAAC,gBACC,oBAAC,qBAAD,CAAsB,CAAA,IAEtB,oBAAC,0BAAD,CAA2B,CAAA,IAE3B;GACH,CAAC,gBACA,oBAAC,mBAAD;IAAmB,UAAS;IAAoB;GAAgB,CAAA,IAC9D;EACD;;AAET"}
+{"version":3,"file":"SelectChainAndToken.js","names":[],"sources":["../../../src/components/SelectChainAndToken.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { Box } from '@mui/material'\nimport { ReverseTokensButton } from '../components/ReverseTokensButton/ReverseTokensButton.js'\nimport { SelectTokenButton } from '../components/SelectTokenButton/SelectTokenButton.js'\nimport { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'\nimport { ReverseTokensButtonEmpty } from './ReverseTokensButton/ReverseTokensButton.style.js'\n\nexport const SelectChainAndToken: React.FC<BoxProps> = (props) => {\n  const { disabledUI, hiddenUI, mode } = useWidgetConfig()\n\n  const hiddenReverse =\n    mode === 'refuel' ||\n    disabledUI?.fromToken ||\n    disabledUI?.toToken ||\n    hiddenUI?.fromToken ||\n    hiddenUI?.toToken ||\n    hiddenUI?.reverseTokensButton\n\n  const hiddenFromToken = hiddenUI?.fromToken\n  const hiddenToToken = mode === 'custom' || hiddenUI?.toToken\n\n  const showReverseButton = !hiddenToToken && !hiddenFromToken\n\n  return (\n    <Box {...props} sx={{ display: 'flex', ...props.sx }}>\n      {!hiddenFromToken ? (\n        <SelectTokenButton formType=\"from\" hiddenReverse={hiddenReverse} />\n      ) : null}\n      {showReverseButton ? (\n        !hiddenReverse ? (\n          <ReverseTokensButton />\n        ) : (\n          <ReverseTokensButtonEmpty />\n        )\n      ) : null}\n      {!hiddenToToken ? (\n        <SelectTokenButton formType=\"to\" hiddenReverse={hiddenReverse} />\n      ) : null}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;AAOA,MAAa,uBAA2C,UAAU;CAChE,MAAM,EAAE,YAAY,UAAU,SAAS,gBAAgB;CAEvD,MAAM,gBACJ,SAAS,YACT,YAAY,aACZ,YAAY,WACZ,UAAU,aACV,UAAU,WACV,UAAU;CAEZ,MAAM,kBAAkB,UAAU;CAClC,MAAM,gBAAgB,SAAS,YAAY,UAAU;CAErD,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;CAE7C,OACE,qBAAC,KAAD;EAAK,GAAI;EAAO,IAAI;GAAE,SAAS;GAAQ,GAAG,MAAM;EAAG;EAAnD,UAAA;GACG,CAAC,kBACA,oBAAC,mBAAD;IAAmB,UAAS;IAAsB;GAAgB,CAAA,IAChE;GACH,oBACC,CAAC,gBACC,oBAAC,qBAAD,CAAsB,CAAA,IAEtB,oBAAC,0BAAD,CAA2B,CAAA,IAE3B;GACH,CAAC,gBACA,oBAAC,mBAAD;IAAmB,UAAS;IAAoB;GAAgB,CAAA,IAC9D;EACD;;AAET"}

package/dist/esm/components/SelectTokenButton/SelectTokenButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectTokenButton.js","names":["CardContent"],"sources":["../../../../src/components/SelectTokenButton/SelectTokenButton.tsx"],"sourcesContent":["import { Skeleton } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport type { ChainOrderState } from '../../stores/chains/types.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport type { DisabledUIConfig } from '../../types/widget.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { AvatarBadgedDefault, AvatarBadgedSkeleton } from '../Avatar/Avatar.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport {\n  CardContent,\n  SelectTokenCard,\n  SelectTokenCardHeader,\n} from './SelectTokenButton.style.js'\n\nexport const SelectTokenButton: React.FC<\n  FormTypeProps & {\n    hiddenReverse?: boolean\n  }\n> = ({ formType, hiddenReverse }) => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { disabledUI, mode } = useWidgetConfig()\n  const tokenKey = FormKeyHelper.getTokenKey(formType)\n  const [chainId, tokenAddress] = useFieldValues(\n    FormKeyHelper.getChainKey(formType),\n    tokenKey\n  )\n  const { chain, isLoading: isChainLoading } = useChain(chainId)\n  const { token, isLoading: isTokenLoading } = useToken(chainId, tokenAddress)\n\n  const isAllNetworks = useChainOrderStore(\n    (state: ChainOrderState) => state[`${formType}IsAllNetworks`]\n  )\n\n  const handleClick = () => {\n    navigate({\n      to:\n        formType === 'from'\n          ? navigationRoutes.fromToken\n          : mode === 'refuel'\n            ? navigationRoutes.toTokenNative\n            : navigationRoutes.toToken,\n    })\n  }\n\n  const isSelected = !!(chain && token)\n  const onClick = !disabledUI?.[tokenKey as keyof DisabledUIConfig]\n    ? handleClick\n    : undefined\n  const defaultPlaceholder = `${t('main.select')}...`\n  const cardTitle: string =\n    formType === 'from' && mode === 'custom'\n      ? t('header.payWith')\n      : t(`main.${formType}`)\n  return (\n    <SelectTokenCard component=\"button\" onClick={onClick}>\n      <CardContent formType={formType} mask={!hiddenReverse}>\n        <CardTitle>{cardTitle}</CardTitle>\n        {chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (\n          <SelectTokenCardHeader\n            avatar={<AvatarBadgedSkeleton />}\n            title={<Skeleton variant=\"text\" width={64} height={24} />}\n            subheader={<Skeleton variant=\"text\" width={72} height={16} />}\n          />\n        ) : (\n          <SelectTokenCardHeader\n            avatar={\n              isSelected ? (\n                <TokenAvatar token={token} chain={chain} />\n              ) : (\n                <AvatarBadgedDefault\n                  chain={isAllNetworks ? undefined : chain}\n                />\n              )\n            }\n            title={isSelected ? token.symbol : defaultPlaceholder}\n            slotProps={{\n              title: {\n                title: isSelected ? token.symbol : defaultPlaceholder,\n              },\n              subheader: {\n                title: isSelected ? chain.name : undefined,\n              },\n            }}\n            subheader={isSelected ? chain.name : null}\n            selected={isSelected}\n          />\n        )}\n      </CardContent>\n    </SelectTokenCard>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAsBA,MAAa,qBAIR,EAAE,UAAU,oBAAoB;CACnC,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,YAAY,SAAS,gBAAgB;CAC7C,MAAM,WAAW,cAAc,YAAY,QAAQ;CACnD,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,QAAQ,GAClC,QACF;CACA,MAAM,EAAE,OAAO,WAAW,mBAAmB,SAAS,OAAO;CAC7D,MAAM,EAAE,OAAO,WAAW,mBAAmB,SAAS,SAAS,YAAY;CAE3E,MAAM,gBAAgB,oBACnB,UAA2B,MAAM,GAAG,SAAS,eAChD;CAEA,MAAM,oBAAoB;EACxB,SAAS,EACP,IACE,aAAa,SACT,iBAAiB,YACjB,SAAS,WACP,iBAAiB,gBACjB,iBAAiB,QAC3B,CAAC;CACH;CAEA,MAAM,aAAa,CAAC,EAAE,SAAS;CAC/B,MAAM,UAAU,CAAC,aAAa,YAC1B,cACA,KAAA;CACJ,MAAM,qBAAqB,GAAG,EAAE,aAAa,EAAE;CAC/C,MAAM,YACJ,aAAa,UAAU,SAAS,WAC5B,EAAE,gBAAgB,IAClB,EAAE,QAAQ,UAAU;CAC1B,OACE,oBAAC,iBAAD;EAAiB,WAAU;EAAkB;YAC3C,qBAACA,eAAD;GAAuB;GAAU,MAAM,CAAC;aAAxC,CACE,oBAAC,WAAD,EAAA,UAAY,UAAqB,CAAA,GAChC,WAAW,iBAAiB,kBAAkB,kBAC7C,oBAAC,uBAAD;IACE,QAAQ,oBAAC,sBAAD,CAAuB,CAAA;IAC/B,OAAO,oBAAC,UAAD;KAAU,SAAQ;KAAO,OAAO;KAAI,QAAQ;IAAK,CAAA;IACxD,WAAW,oBAAC,UAAD;KAAU,SAAQ;KAAO,OAAO;KAAI,QAAQ;IAAK,CAAA;GAC7D,CAAA,IAED,oBAAC,uBAAD;IACE,QACE,aACE,oBAAC,aAAD;KAAoB;KAAc;IAAQ,CAAA,IAE1C,oBAAC,qBAAD,EACE,OAAO,gBAAgB,KAAA,IAAY,MACpC,CAAA;IAGL,OAAO,aAAa,MAAM,SAAS;IACnC,WAAW;KACT,OAAO,EACL,OAAO,aAAa,MAAM,SAAS,mBACrC;KACA,WAAW,EACT,OAAO,aAAa,MAAM,OAAO,KAAA,EACnC;IACF;IACA,WAAW,aAAa,MAAM,OAAO;IACrC,UAAU;GACX,CAAA,CAEQ;;CACE,CAAA;AAErB"}
+{"version":3,"file":"SelectTokenButton.js","names":["CardContent"],"sources":["../../../../src/components/SelectTokenButton/SelectTokenButton.tsx"],"sourcesContent":["import { Skeleton } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport type { ChainOrderState } from '../../stores/chains/types.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport type { DisabledUIConfig } from '../../types/widget.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { AvatarBadgedDefault, AvatarBadgedSkeleton } from '../Avatar/Avatar.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport {\n  CardContent,\n  SelectTokenCard,\n  SelectTokenCardHeader,\n} from './SelectTokenButton.style.js'\n\nexport const SelectTokenButton: React.FC<\n  FormTypeProps & {\n    hiddenReverse?: boolean\n  }\n> = ({ formType, hiddenReverse }) => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { disabledUI, mode } = useWidgetConfig()\n  const tokenKey = FormKeyHelper.getTokenKey(formType)\n  const [chainId, tokenAddress] = useFieldValues(\n    FormKeyHelper.getChainKey(formType),\n    tokenKey\n  )\n  const { chain, isLoading: isChainLoading } = useChain(chainId)\n  const { token, isLoading: isTokenLoading } = useToken(chainId, tokenAddress)\n\n  const isAllNetworks = useChainOrderStore(\n    (state: ChainOrderState) => state[`${formType}IsAllNetworks`]\n  )\n\n  const handleClick = () => {\n    navigate({\n      to:\n        formType === 'from'\n          ? navigationRoutes.fromToken\n          : mode === 'refuel'\n            ? navigationRoutes.toTokenNative\n            : navigationRoutes.toToken,\n    })\n  }\n\n  const isSelected = !!(chain && token)\n  const onClick = !disabledUI?.[tokenKey as keyof DisabledUIConfig]\n    ? handleClick\n    : undefined\n  const defaultPlaceholder = `${t('main.select')}...`\n  const cardTitle: string =\n    formType === 'from' && mode === 'custom'\n      ? t('header.payWith')\n      : t(`main.${formType}`)\n  return (\n    <SelectTokenCard component=\"button\" onClick={onClick}>\n      <CardContent formType={formType} mask={!hiddenReverse}>\n        <CardTitle>{cardTitle}</CardTitle>\n        {chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (\n          <SelectTokenCardHeader\n            avatar={<AvatarBadgedSkeleton />}\n            title={<Skeleton variant=\"text\" width={64} height={24} />}\n            subheader={<Skeleton variant=\"text\" width={72} height={16} />}\n          />\n        ) : (\n          <SelectTokenCardHeader\n            avatar={\n              isSelected ? (\n                <TokenAvatar token={token} chain={chain} />\n              ) : (\n                <AvatarBadgedDefault\n                  chain={isAllNetworks ? undefined : chain}\n                />\n              )\n            }\n            title={isSelected ? token.symbol : defaultPlaceholder}\n            slotProps={{\n              title: {\n                title: isSelected ? token.symbol : defaultPlaceholder,\n              },\n              subheader: {\n                title: isSelected ? chain.name : undefined,\n              },\n            }}\n            subheader={isSelected ? chain.name : null}\n            selected={isSelected}\n          />\n        )}\n      </CardContent>\n    </SelectTokenCard>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAsBA,MAAa,qBAIR,EAAE,UAAU,oBAAoB;CACnC,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,YAAY,SAAS,gBAAgB;CAC7C,MAAM,WAAW,cAAc,YAAY,QAAQ;CACnD,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,QAAQ,GAClC,QACF;CACA,MAAM,EAAE,OAAO,WAAW,mBAAmB,SAAS,OAAO;CAC7D,MAAM,EAAE,OAAO,WAAW,mBAAmB,SAAS,SAAS,YAAY;CAE3E,MAAM,gBAAgB,oBACnB,UAA2B,MAAM,GAAG,SAAS,eAChD;CAEA,MAAM,oBAAoB;EACxB,SAAS,EACP,IACE,aAAa,SACT,iBAAiB,YACjB,SAAS,WACP,iBAAiB,gBACjB,iBAAiB,QAC3B,CAAC;CACH;CAEA,MAAM,aAAa,CAAC,EAAE,SAAS;CAC/B,MAAM,UAAU,CAAC,aAAa,YAC1B,cACA,KAAA;CACJ,MAAM,qBAAqB,GAAG,EAAE,aAAa,EAAE;CAC/C,MAAM,YACJ,aAAa,UAAU,SAAS,WAC5B,EAAE,gBAAgB,IAClB,EAAE,QAAQ,UAAU;CAC1B,OACE,oBAAC,iBAAD;EAAiB,WAAU;EAAkB;EAC3C,UAAA,qBAACA,eAAD;GAAuB;GAAU,MAAM,CAAC;GAAxC,UAAA,CACE,oBAAC,WAAD,EAAA,UAAY,UAAqB,CAAA,GAChC,WAAW,iBAAiB,kBAAkB,kBAC7C,oBAAC,uBAAD;IACE,QAAQ,oBAAC,sBAAD,CAAuB,CAAA;IAC/B,OAAO,oBAAC,UAAD;KAAU,SAAQ;KAAO,OAAO;KAAI,QAAQ;IAAK,CAAA;IACxD,WAAW,oBAAC,UAAD;KAAU,SAAQ;KAAO,OAAO;KAAI,QAAQ;IAAK,CAAA;GAC7D,CAAA,IAED,oBAAC,uBAAD;IACE,QACE,aACE,oBAAC,aAAD;KAAoB;KAAc;IAAQ,CAAA,IAE1C,oBAAC,qBAAD,EACE,OAAO,gBAAgB,KAAA,IAAY,MACpC,CAAA;IAGL,OAAO,aAAa,MAAM,SAAS;IACnC,WAAW;KACT,OAAO,EACL,OAAO,aAAa,MAAM,SAAS,mBACrC;KACA,WAAW,EACT,OAAO,aAAa,MAAM,OAAO,KAAA,EACnC;IACF;IACA,WAAW,aAAa,MAAM,OAAO;IACrC,UAAU;GACX,CAAA,CAEQ;;CACE,CAAA;AAErB"}

package/dist/esm/components/SendToWallet/SendToWalletButton.d.ts

@@ -0,0 +1,10 @@
+import { CardProps } from "../Card/Card.js";
+//#region src/components/SendToWallet/SendToWalletButton.d.ts
+declare const SendToWalletButton: React.FC<CardProps & {
+  onEditAddress?: (() => void) | null;
+  onClearAddress?: () => void;
+  requireAddress?: boolean;
+}>;
+//#endregion
+export { SendToWalletButton };
+//# sourceMappingURL=SendToWalletButton.d.ts.map

package/dist/esm/components/SendToWallet/SendToWalletButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SendToWalletButton.d.ts","names":[],"sources":["../../../../src/components/SendToWallet/SendToWalletButton.tsx"],"mappings":";;cA6Ba,oBAAoB,MAAM,GACrC;EACE;EACA;EAIA"}

package/dist/esm/components/SendToWallet/SendToWalletButton.js

@@ -22,7 +22,7 @@ import { useAccount } from "@lifi/wallet-management";
 import CloseRounded from "@mui/icons-material/CloseRounded";
 import WarningRounded from "@mui/icons-material/WarningRounded";
 //#region src/components/SendToWallet/SendToWalletButton.tsx
-const SendToWalletButton = (props) => {
+const SendToWalletButton = ({ onEditAddress, onClearAddress, requireAddress, ...props }) => {
 	const { t } = useTranslation();
 	const navigate = useNavigate();
 	const { disabledUI, hiddenUI, toAddress, toAddresses, mode, modeOptions } = useWidgetConfig();
@@ -44,12 +44,20 @@ const SendToWalletButton = (props) => {
 	const bookmarkName = selectedBookmark?.name;
 	const headerTitle = isConnectedAccount ? connectedAccountName || address : bookmarkName || connectedAccountName || address;
 	const headerSubheader = isConnectedAccount || bookmarkName || connectedAccountName ? address : null;
-	const disabledForChanges = Boolean(toAddressFieldValue) && disabledToAddress;
+	const readOnly = onEditAddress === null || Boolean(toAddressFieldValue) && disabledToAddress;
 	const handleOnClick = () => {
+		if (onEditAddress !== void 0) {
+			onEditAddress?.();
+			return;
+		}
 		navigate({ to: toAddresses?.length ? navigationRoutes.configuredWallets : navigationRoutes.sendToWallet });
 	};
 	const clearSelectedBookmark = (e) => {
 		e.stopPropagation();
+		if (onClearAddress) {
+			onClearAddress();
+			return;
+		}
 		setFieldValue("toAddress", "", { isTouched: true });
 		setSelectedBookmark();
 	};
@@ -60,7 +68,8 @@ const SendToWalletButton = (props) => {
 		}, 0);
 		return () => clearTimeout(timeout);
 	}, []);
-	const isOpenCollapse = !hiddenToAddress && (requiredToAddress || !!toAddressFieldValue);
+	const addressRequired = requireAddress || requiredToAddress;
+	const isOpenCollapse = !hiddenToAddress && (addressRequired || !!toAddressFieldValue);
 	const title = mode === "custom" && modeOptions?.custom?.type === "deposit" ? t("header.depositTo") : t("header.sendToWallet");
 	return /* @__PURE__ */ jsx(Collapse, {
 		timeout: collapseTransitionTime.current,
@@ -69,7 +78,7 @@ const SendToWalletButton = (props) => {
 		unmountOnExit: true,
 		children: /* @__PURE__ */ jsxs(Card$1, {
 			role: "button",
-			onClick: disabledForChanges ? void 0 : handleOnClick,
+			onClick: readOnly ? void 0 : handleOnClick,
 			sx: {
 				width: "100%",
 				...props.sx
@@ -77,7 +86,7 @@ const SendToWalletButton = (props) => {
 			children: [/* @__PURE__ */ jsxs(SendToWalletCardTitleRow, { children: [/* @__PURE__ */ jsx(CardTitle, {
 				sx: { p: 0 },
 				children: title
-			}), requiredToAddress && !toAddressFieldValue ? /* @__PURE__ */ jsxs(SendToWalletRequiredLabel, {
+			}), addressRequired && !toAddressFieldValue ? /* @__PURE__ */ jsxs(SendToWalletRequiredLabel, {
 				variant: "warning",
 				children: [/* @__PURE__ */ jsx(WarningRounded, { sx: { fontSize: 14 } }), /* @__PURE__ */ jsx(SendToWalletRequiredLabelText, {
 					type: "icon",
@@ -99,7 +108,7 @@ const SendToWalletButton = (props) => {
 					title: headerTitle,
 					subheader: headerSubheader,
 					selected: !!toAddressFieldValue || disabledToAddress,
-					action: toAddressFieldValue && !disabledForChanges ? /* @__PURE__ */ jsx(CardIconButton, {
+					action: toAddressFieldValue && !readOnly ? /* @__PURE__ */ jsx(CardIconButton, {
 						onClick: clearSelectedBookmark,
 						size: "small",
 						children: /* @__PURE__ */ jsx(CloseRounded, { fontSize: "inherit" })

package/dist/esm/components/SendToWallet/SendToWalletButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SendToWalletButton.js","names":["Card"],"sources":["../../../../src/components/SendToWallet/SendToWalletButton.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport { useChainTypeFromAddress } from '@lifi/widget-provider'\nimport CloseRounded from '@mui/icons-material/CloseRounded'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Box, Collapse } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { type MouseEventHandler, useEffect, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.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 { defaultChainIdsByType } from '../../utils/chainType.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { AccountAvatar } from '../Avatar/AccountAvatar.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport {\n  SendToWalletCardHeader,\n  SendToWalletCardTitleRow,\n  SendToWalletRequiredLabel,\n  SendToWalletRequiredLabelText,\n} from './SendToWalletButton.style.js'\n\nexport const SendToWalletButton: React.FC<CardProps> = (props) => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { disabledUI, hiddenUI, toAddress, toAddresses, mode, modeOptions } =\n    useWidgetConfig()\n  const [toAddressFieldValue, toChainId, toTokenAddress] = useFieldValues(\n    'toAddress',\n    'toChain',\n    'toToken'\n  )\n  const { setFieldValue } = useFieldActions()\n  const { selectedBookmark } = useBookmarks()\n  const { setSelectedBookmark } = useBookmarkActions()\n  const { accounts } = useAccount()\n  const { getChainTypeFromAddress } = useChainTypeFromAddress()\n  const { requiredToAddress } = useToAddressRequirements()\n  const disabledToAddress = disabledUI?.toAddress\n  const hiddenToAddress = hiddenUI?.toAddress\n\n  const address = toAddressFieldValue\n    ? shortenAddress(toAddressFieldValue)\n    : t('sendToWallet.enterAddress', {\n        context: 'short',\n      })\n\n  const matchingConnectedAccount = accounts.find(\n    (account) => account.address === toAddressFieldValue\n  )\n\n  const chainType = !matchingConnectedAccount\n    ? selectedBookmark?.chainType ||\n      (toAddressFieldValue\n        ? getChainTypeFromAddress(toAddressFieldValue)\n        : undefined)\n    : undefined\n\n  const chainId =\n    toChainId && toTokenAddress\n      ? toChainId\n      : matchingConnectedAccount\n        ? matchingConnectedAccount.chainId\n        : chainType\n          ? defaultChainIdsByType[chainType]\n          : undefined\n\n  const isConnectedAccount =\n    selectedBookmark?.isConnectedAccount &&\n    matchingConnectedAccount?.isConnected\n  const connectedAccountName = matchingConnectedAccount?.connector?.name\n  const bookmarkName = selectedBookmark?.name\n\n  const headerTitle = isConnectedAccount\n    ? connectedAccountName || address\n    : bookmarkName || connectedAccountName || address\n\n  const headerSubheader =\n    isConnectedAccount || bookmarkName || connectedAccountName ? address : null\n\n  const disabledForChanges = Boolean(toAddressFieldValue) && disabledToAddress\n\n  const handleOnClick = () => {\n    navigate({\n      to: toAddresses?.length\n        ? navigationRoutes.configuredWallets\n        : navigationRoutes.sendToWallet,\n    })\n  }\n\n  const clearSelectedBookmark: MouseEventHandler<HTMLButtonElement> = (e) => {\n    e.stopPropagation()\n    setFieldValue('toAddress', '', { isTouched: true })\n    setSelectedBookmark()\n  }\n\n  // The collapse opens instantly on first page load/component mount when there is an address to display\n  // After which it needs an animated transition for open and closing.\n  // collapseTransitionTime is used specify the transition time for opening and closing\n  const collapseTransitionTime = useRef(0)\n\n  // Timeout is needed here to push the collapseTransitionTime update to the back of the event loop so that it doesn't fired too quickly\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      collapseTransitionTime.current = 225\n    }, 0)\n    return () => clearTimeout(timeout)\n  }, [])\n\n  const isOpenCollapse =\n    !hiddenToAddress && (requiredToAddress || !!toAddressFieldValue)\n\n  const title =\n    mode === 'custom' && modeOptions?.custom?.type === 'deposit'\n      ? t('header.depositTo')\n      : t('header.sendToWallet')\n\n  return (\n    <Collapse\n      timeout={collapseTransitionTime.current as number}\n      in={isOpenCollapse}\n      mountOnEnter\n      unmountOnExit\n    >\n      <Card\n        role=\"button\"\n        onClick={disabledForChanges ? undefined : handleOnClick}\n        sx={{ width: '100%', ...props.sx }}\n      >\n        <SendToWalletCardTitleRow>\n          <CardTitle sx={{ p: 0 }}>{title}</CardTitle>\n          {requiredToAddress && !toAddressFieldValue ? (\n            <SendToWalletRequiredLabel variant=\"warning\">\n              <WarningRounded sx={{ fontSize: 14 }} />\n              <SendToWalletRequiredLabelText type=\"icon\">\n                {t('sendToWallet.required')}\n              </SendToWalletRequiredLabelText>\n            </SendToWalletRequiredLabel>\n          ) : null}\n        </SendToWalletCardTitleRow>\n        <Box\n          sx={{\n            display: 'flex',\n            justifyContent: 'center',\n            alignItems: 'center',\n          }}\n        >\n          <SendToWalletCardHeader\n            avatar={\n              <AccountAvatar\n                chainId={chainId}\n                account={matchingConnectedAccount}\n                toAddress={toAddress}\n                empty={!toAddressFieldValue}\n              />\n            }\n            title={headerTitle}\n            subheader={headerSubheader}\n            selected={!!toAddressFieldValue || disabledToAddress}\n            action={\n              toAddressFieldValue && !disabledForChanges ? (\n                <CardIconButton onClick={clearSelectedBookmark} size=\"small\">\n                  <CloseRounded fontSize=\"inherit\" />\n                </CardIconButton>\n              ) : null\n            }\n          />\n        </Box>\n      </Card>\n    </Collapse>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAa,sBAA2C,UAAU;CAChE,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,YAAY,UAAU,WAAW,aAAa,MAAM,gBAC1D,gBAAgB;CAClB,MAAM,CAAC,qBAAqB,WAAW,kBAAkB,eACvD,aACA,WACA,SACF;CACA,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,EAAE,qBAAqB,aAAa;CAC1C,MAAM,EAAE,wBAAwB,mBAAmB;CACnD,MAAM,EAAE,aAAa,WAAW;CAChC,MAAM,EAAE,4BAA4B,wBAAwB;CAC5D,MAAM,EAAE,sBAAsB,yBAAyB;CACvD,MAAM,oBAAoB,YAAY;CACtC,MAAM,kBAAkB,UAAU;CAElC,MAAM,UAAU,sBACZ,eAAe,mBAAmB,IAClC,EAAE,6BAA6B,EAC7B,SAAS,QACX,CAAC;CAEL,MAAM,2BAA2B,SAAS,MACvC,YAAY,QAAQ,YAAY,mBACnC;CAEA,MAAM,YAAY,CAAC,2BACf,kBAAkB,cACjB,sBACG,wBAAwB,mBAAmB,IAC3C,KAAA,KACJ,KAAA;CAEJ,MAAM,UACJ,aAAa,iBACT,YACA,2BACE,yBAAyB,UACzB,YACE,sBAAsB,aACtB,KAAA;CAEV,MAAM,qBACJ,kBAAkB,sBAClB,0BAA0B;CAC5B,MAAM,uBAAuB,0BAA0B,WAAW;CAClE,MAAM,eAAe,kBAAkB;CAEvC,MAAM,cAAc,qBAChB,wBAAwB,UACxB,gBAAgB,wBAAwB;CAE5C,MAAM,kBACJ,sBAAsB,gBAAgB,uBAAuB,UAAU;CAEzE,MAAM,qBAAqB,QAAQ,mBAAmB,KAAK;CAE3D,MAAM,sBAAsB;EAC1B,SAAS,EACP,IAAI,aAAa,SACb,iBAAiB,oBACjB,iBAAiB,aACvB,CAAC;CACH;CAEA,MAAM,yBAA+D,MAAM;EACzE,EAAE,gBAAgB;EAClB,cAAc,aAAa,IAAI,EAAE,WAAW,KAAK,CAAC;EAClD,oBAAoB;CACtB;CAKA,MAAM,yBAAyB,OAAO,CAAC;CAGvC,gBAAgB;EACd,MAAM,UAAU,iBAAiB;GAC/B,uBAAuB,UAAU;EACnC,GAAG,CAAC;EACJ,aAAa,aAAa,OAAO;CACnC,GAAG,CAAC,CAAC;CAEL,MAAM,iBACJ,CAAC,oBAAoB,qBAAqB,CAAC,CAAC;CAE9C,MAAM,QACJ,SAAS,YAAY,aAAa,QAAQ,SAAS,YAC/C,EAAE,kBAAkB,IACpB,EAAE,qBAAqB;CAE7B,OACE,oBAAC,UAAD;EACE,SAAS,uBAAuB;EAChC,IAAI;EACJ,cAAA;EACA,eAAA;YAEA,qBAACA,QAAD;GACE,MAAK;GACL,SAAS,qBAAqB,KAAA,IAAY;GAC1C,IAAI;IAAE,OAAO;IAAQ,GAAG,MAAM;GAAG;aAHnC,CAKE,qBAAC,0BAAD,EAAA,UAAA,CACE,oBAAC,WAAD;IAAW,IAAI,EAAE,GAAG,EAAE;cAAI;GAAiB,CAAA,GAC1C,qBAAqB,CAAC,sBACrB,qBAAC,2BAAD;IAA2B,SAAQ;cAAnC,CACE,oBAAC,gBAAD,EAAgB,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA,GACvC,oBAAC,+BAAD;KAA+B,MAAK;eACjC,EAAE,uBAAuB;IACG,CAAA,CACN;QACzB,IACoB,EAAA,CAAA,GAC1B,oBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,gBAAgB;KAChB,YAAY;IACd;cAEA,oBAAC,wBAAD;KACE,QACE,oBAAC,eAAD;MACW;MACT,SAAS;MACE;MACX,OAAO,CAAC;KACT,CAAA;KAEH,OAAO;KACP,WAAW;KACX,UAAU,CAAC,CAAC,uBAAuB;KACnC,QACE,uBAAuB,CAAC,qBACtB,oBAAC,gBAAD;MAAgB,SAAS;MAAuB,MAAK;gBACnD,oBAAC,cAAD,EAAc,UAAS,UAAW,CAAA;KACpB,CAAA,IACd;IAEP,CAAA;GACE,CAAA,CACD;;CACE,CAAA;AAEd"}
+{"version":3,"file":"SendToWalletButton.js","names":["Card"],"sources":["../../../../src/components/SendToWallet/SendToWalletButton.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport { useChainTypeFromAddress } from '@lifi/widget-provider'\nimport CloseRounded from '@mui/icons-material/CloseRounded'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport { Box, Collapse } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { type MouseEventHandler, useEffect, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.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 { defaultChainIdsByType } from '../../utils/chainType.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { AccountAvatar } from '../Avatar/AccountAvatar.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport {\n  SendToWalletCardHeader,\n  SendToWalletCardTitleRow,\n  SendToWalletRequiredLabel,\n  SendToWalletRequiredLabelText,\n} from './SendToWalletButton.style.js'\n\nexport const SendToWalletButton: React.FC<\n  CardProps & {\n    onEditAddress?: (() => void) | null\n    onClearAddress?: () => void\n    // Keep the card visible (and flag it required when empty) even when the\n    // widget's own toAddress requirement is off, e.g. a user-settable checkout\n    // recipient that must be filled before continuing.\n    requireAddress?: boolean\n  }\n> = ({ onEditAddress, onClearAddress, requireAddress, ...props }) => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { disabledUI, hiddenUI, toAddress, toAddresses, mode, modeOptions } =\n    useWidgetConfig()\n  const [toAddressFieldValue, toChainId, toTokenAddress] = useFieldValues(\n    'toAddress',\n    'toChain',\n    'toToken'\n  )\n  const { setFieldValue } = useFieldActions()\n  const { selectedBookmark } = useBookmarks()\n  const { setSelectedBookmark } = useBookmarkActions()\n  const { accounts } = useAccount()\n  const { getChainTypeFromAddress } = useChainTypeFromAddress()\n  const { requiredToAddress } = useToAddressRequirements()\n  const disabledToAddress = disabledUI?.toAddress\n  const hiddenToAddress = hiddenUI?.toAddress\n\n  const address = toAddressFieldValue\n    ? shortenAddress(toAddressFieldValue)\n    : t('sendToWallet.enterAddress', {\n        context: 'short',\n      })\n\n  const matchingConnectedAccount = accounts.find(\n    (account) => account.address === toAddressFieldValue\n  )\n\n  const chainType = !matchingConnectedAccount\n    ? selectedBookmark?.chainType ||\n      (toAddressFieldValue\n        ? getChainTypeFromAddress(toAddressFieldValue)\n        : undefined)\n    : undefined\n\n  const chainId =\n    toChainId && toTokenAddress\n      ? toChainId\n      : matchingConnectedAccount\n        ? matchingConnectedAccount.chainId\n        : chainType\n          ? defaultChainIdsByType[chainType]\n          : undefined\n\n  const isConnectedAccount =\n    selectedBookmark?.isConnectedAccount &&\n    matchingConnectedAccount?.isConnected\n  const connectedAccountName = matchingConnectedAccount?.connector?.name\n  const bookmarkName = selectedBookmark?.name\n\n  const headerTitle = isConnectedAccount\n    ? connectedAccountName || address\n    : bookmarkName || connectedAccountName || address\n\n  const headerSubheader =\n    isConnectedAccount || bookmarkName || connectedAccountName ? address : null\n\n  const disabledForChanges = Boolean(toAddressFieldValue) && disabledToAddress\n\n  // `onEditAddress === null` renders the card read-only (consumer-controlled,\n  // e.g. a fixed checkout recipient); a function overrides the default route nav.\n  const readOnly = onEditAddress === null || disabledForChanges\n\n  const handleOnClick = () => {\n    if (onEditAddress !== undefined) {\n      onEditAddress?.()\n      return\n    }\n    navigate({\n      to: toAddresses?.length\n        ? navigationRoutes.configuredWallets\n        : navigationRoutes.sendToWallet,\n    })\n  }\n\n  const clearSelectedBookmark: MouseEventHandler<HTMLButtonElement> = (e) => {\n    e.stopPropagation()\n    if (onClearAddress) {\n      onClearAddress()\n      return\n    }\n    setFieldValue('toAddress', '', { isTouched: true })\n    setSelectedBookmark()\n  }\n\n  // The collapse opens instantly on first page load/component mount when there is an address to display\n  // After which it needs an animated transition for open and closing.\n  // collapseTransitionTime is used specify the transition time for opening and closing\n  const collapseTransitionTime = useRef(0)\n\n  // Timeout is needed here to push the collapseTransitionTime update to the back of the event loop so that it doesn't fired too quickly\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      collapseTransitionTime.current = 225\n    }, 0)\n    return () => clearTimeout(timeout)\n  }, [])\n\n  const addressRequired = requireAddress || requiredToAddress\n  const isOpenCollapse =\n    !hiddenToAddress && (addressRequired || !!toAddressFieldValue)\n\n  const title =\n    mode === 'custom' && modeOptions?.custom?.type === 'deposit'\n      ? t('header.depositTo')\n      : t('header.sendToWallet')\n\n  return (\n    <Collapse\n      timeout={collapseTransitionTime.current as number}\n      in={isOpenCollapse}\n      mountOnEnter\n      unmountOnExit\n    >\n      <Card\n        role=\"button\"\n        onClick={readOnly ? undefined : handleOnClick}\n        sx={{ width: '100%', ...props.sx }}\n      >\n        <SendToWalletCardTitleRow>\n          <CardTitle sx={{ p: 0 }}>{title}</CardTitle>\n          {addressRequired && !toAddressFieldValue ? (\n            <SendToWalletRequiredLabel variant=\"warning\">\n              <WarningRounded sx={{ fontSize: 14 }} />\n              <SendToWalletRequiredLabelText type=\"icon\">\n                {t('sendToWallet.required')}\n              </SendToWalletRequiredLabelText>\n            </SendToWalletRequiredLabel>\n          ) : null}\n        </SendToWalletCardTitleRow>\n        <Box\n          sx={{\n            display: 'flex',\n            justifyContent: 'center',\n            alignItems: 'center',\n          }}\n        >\n          <SendToWalletCardHeader\n            avatar={\n              <AccountAvatar\n                chainId={chainId}\n                account={matchingConnectedAccount}\n                toAddress={toAddress}\n                empty={!toAddressFieldValue}\n              />\n            }\n            title={headerTitle}\n            subheader={headerSubheader}\n            selected={!!toAddressFieldValue || disabledToAddress}\n            action={\n              toAddressFieldValue && !readOnly ? (\n                <CardIconButton onClick={clearSelectedBookmark} size=\"small\">\n                  <CloseRounded fontSize=\"inherit\" />\n                </CardIconButton>\n              ) : null\n            }\n          />\n        </Box>\n      </Card>\n    </Collapse>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAa,sBASR,EAAE,eAAe,gBAAgB,gBAAgB,GAAG,YAAY;CACnE,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,YAAY,UAAU,WAAW,aAAa,MAAM,gBAC1D,gBAAgB;CAClB,MAAM,CAAC,qBAAqB,WAAW,kBAAkB,eACvD,aACA,WACA,SACF;CACA,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,EAAE,qBAAqB,aAAa;CAC1C,MAAM,EAAE,wBAAwB,mBAAmB;CACnD,MAAM,EAAE,aAAa,WAAW;CAChC,MAAM,EAAE,4BAA4B,wBAAwB;CAC5D,MAAM,EAAE,sBAAsB,yBAAyB;CACvD,MAAM,oBAAoB,YAAY;CACtC,MAAM,kBAAkB,UAAU;CAElC,MAAM,UAAU,sBACZ,eAAe,mBAAmB,IAClC,EAAE,6BAA6B,EAC7B,SAAS,QACX,CAAC;CAEL,MAAM,2BAA2B,SAAS,MACvC,YAAY,QAAQ,YAAY,mBACnC;CAEA,MAAM,YAAY,CAAC,2BACf,kBAAkB,cACjB,sBACG,wBAAwB,mBAAmB,IAC3C,KAAA,KACJ,KAAA;CAEJ,MAAM,UACJ,aAAa,iBACT,YACA,2BACE,yBAAyB,UACzB,YACE,sBAAsB,aACtB,KAAA;CAEV,MAAM,qBACJ,kBAAkB,sBAClB,0BAA0B;CAC5B,MAAM,uBAAuB,0BAA0B,WAAW;CAClE,MAAM,eAAe,kBAAkB;CAEvC,MAAM,cAAc,qBAChB,wBAAwB,UACxB,gBAAgB,wBAAwB;CAE5C,MAAM,kBACJ,sBAAsB,gBAAgB,uBAAuB,UAAU;CAMzE,MAAM,WAAW,kBAAkB,QAJR,QAAQ,mBAAmB,KAAK;CAM3D,MAAM,sBAAsB;EAC1B,IAAI,kBAAkB,KAAA,GAAW;GAC/B,gBAAgB;GAChB;EACF;EACA,SAAS,EACP,IAAI,aAAa,SACb,iBAAiB,oBACjB,iBAAiB,aACvB,CAAC;CACH;CAEA,MAAM,yBAA+D,MAAM;EACzE,EAAE,gBAAgB;EAClB,IAAI,gBAAgB;GAClB,eAAe;GACf;EACF;EACA,cAAc,aAAa,IAAI,EAAE,WAAW,KAAK,CAAC;EAClD,oBAAoB;CACtB;CAKA,MAAM,yBAAyB,OAAO,CAAC;CAGvC,gBAAgB;EACd,MAAM,UAAU,iBAAiB;GAC/B,uBAAuB,UAAU;EACnC,GAAG,CAAC;EACJ,aAAa,aAAa,OAAO;CACnC,GAAG,CAAC,CAAC;CAEL,MAAM,kBAAkB,kBAAkB;CAC1C,MAAM,iBACJ,CAAC,oBAAoB,mBAAmB,CAAC,CAAC;CAE5C,MAAM,QACJ,SAAS,YAAY,aAAa,QAAQ,SAAS,YAC/C,EAAE,kBAAkB,IACpB,EAAE,qBAAqB;CAE7B,OACE,oBAAC,UAAD;EACE,SAAS,uBAAuB;EAChC,IAAI;EACJ,cAAA;EACA,eAAA;EAEA,UAAA,qBAACA,QAAD;GACE,MAAK;GACL,SAAS,WAAW,KAAA,IAAY;GAChC,IAAI;IAAE,OAAO;IAAQ,GAAG,MAAM;GAAG;GAHnC,UAAA,CAKE,qBAAC,0BAAD,EAAA,UAAA,CACE,oBAAC,WAAD;IAAW,IAAI,EAAE,GAAG,EAAE;IAAI,UAAA;GAAiB,CAAA,GAC1C,mBAAmB,CAAC,sBACnB,qBAAC,2BAAD;IAA2B,SAAQ;IAAnC,UAAA,CACE,oBAAC,gBAAD,EAAgB,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA,GACvC,oBAAC,+BAAD;KAA+B,MAAK;KACjC,UAAA,EAAE,uBAAuB;IACG,CAAA,CACN;GACzB,CAAA,IAAA,IACoB,EAAA,CAAA,GAC1B,oBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,gBAAgB;KAChB,YAAY;IACd;IAEA,UAAA,oBAAC,wBAAD;KACE,QACE,oBAAC,eAAD;MACW;MACT,SAAS;MACE;MACX,OAAO,CAAC;KACT,CAAA;KAEH,OAAO;KACP,WAAW;KACX,UAAU,CAAC,CAAC,uBAAuB;KACnC,QACE,uBAAuB,CAAC,WACtB,oBAAC,gBAAD;MAAgB,SAAS;MAAuB,MAAK;MACnD,UAAA,oBAAC,cAAD,EAAc,UAAS,UAAW,CAAA;KACpB,CAAA,IACd;IAEP,CAAA;GACE,CAAA,CACD;;CACE,CAAA;AAEd"}

package/dist/esm/components/SendToWallet/SendToWalletExpandButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SendToWalletExpandButton.js","names":[],"sources":["../../../../src/components/SendToWallet/SendToWalletExpandButton.tsx"],"sourcesContent":["import Wallet from '@mui/icons-material/Wallet'\nimport Button from '@mui/material/Button'\nimport Collapse from '@mui/material/Collapse'\nimport Tooltip from '@mui/material/Tooltip'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\n\nexport const SendToWalletExpandButton = (): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { toAddresses, disabledUI, hiddenUI } = useWidgetConfig()\n  const hiddenToAddress = hiddenUI?.toAddress\n  const disabledToAddress = disabledUI?.toAddress\n  const { requiredToAddress } = useToAddressRequirements()\n  const [toAddressValue] = useFieldValues('toAddress')\n\n  const visible =\n    !hiddenToAddress &&\n    !disabledToAddress &&\n    !toAddressValue &&\n    !requiredToAddress\n\n  const handleClick = () =>\n    navigate({\n      to: toAddresses?.length\n        ? navigationRoutes.configuredWallets\n        : navigationRoutes.sendToWallet,\n    })\n\n  return (\n    <Collapse\n      orientation=\"horizontal\"\n      in={visible}\n      timeout={225}\n      mountOnEnter\n      unmountOnExit\n    >\n      <Tooltip title={t('main.sendToWallet')} placement=\"bottom-end\">\n        <Button\n          variant=\"text\"\n          onClick={handleClick}\n          sx={{\n            ml: 1.5,\n            minWidth: 48,\n            width: 48,\n            height: 48,\n          }}\n        >\n          <Wallet />\n        </Button>\n      </Tooltip>\n    </Collapse>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAYA,MAAa,iCAA8C;CACzD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,aAAa,YAAY,aAAa,gBAAgB;CAC9D,MAAM,kBAAkB,UAAU;CAClC,MAAM,oBAAoB,YAAY;CACtC,MAAM,EAAE,sBAAsB,yBAAyB;CACvD,MAAM,CAAC,kBAAkB,eAAe,WAAW;CAEnD,MAAM,UACJ,CAAC,mBACD,CAAC,qBACD,CAAC,kBACD,CAAC;CAEH,MAAM,oBACJ,SAAS,EACP,IAAI,aAAa,SACb,iBAAiB,oBACjB,iBAAiB,aACvB,CAAC;CAEH,OACE,oBAAC,UAAD;EACE,aAAY;EACZ,IAAI;EACJ,SAAS;EACT,cAAA;EACA,eAAA;YAEA,oBAAC,SAAD;GAAS,OAAO,EAAE,mBAAmB;GAAG,WAAU;aAChD,oBAAC,QAAD;IACE,SAAQ;IACR,SAAS;IACT,IAAI;KACF,IAAI;KACJ,UAAU;KACV,OAAO;KACP,QAAQ;IACV;cAEA,oBAAC,QAAD,CAAS,CAAA;GACH,CAAA;EACD,CAAA;CACD,CAAA;AAEd"}
+{"version":3,"file":"SendToWalletExpandButton.js","names":[],"sources":["../../../../src/components/SendToWallet/SendToWalletExpandButton.tsx"],"sourcesContent":["import Wallet from '@mui/icons-material/Wallet'\nimport Button from '@mui/material/Button'\nimport Collapse from '@mui/material/Collapse'\nimport Tooltip from '@mui/material/Tooltip'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\n\nexport const SendToWalletExpandButton = (): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { toAddresses, disabledUI, hiddenUI } = useWidgetConfig()\n  const hiddenToAddress = hiddenUI?.toAddress\n  const disabledToAddress = disabledUI?.toAddress\n  const { requiredToAddress } = useToAddressRequirements()\n  const [toAddressValue] = useFieldValues('toAddress')\n\n  const visible =\n    !hiddenToAddress &&\n    !disabledToAddress &&\n    !toAddressValue &&\n    !requiredToAddress\n\n  const handleClick = () =>\n    navigate({\n      to: toAddresses?.length\n        ? navigationRoutes.configuredWallets\n        : navigationRoutes.sendToWallet,\n    })\n\n  return (\n    <Collapse\n      orientation=\"horizontal\"\n      in={visible}\n      timeout={225}\n      mountOnEnter\n      unmountOnExit\n    >\n      <Tooltip title={t('main.sendToWallet')} placement=\"bottom-end\">\n        <Button\n          variant=\"text\"\n          onClick={handleClick}\n          sx={{\n            ml: 1.5,\n            minWidth: 48,\n            width: 48,\n            height: 48,\n          }}\n        >\n          <Wallet />\n        </Button>\n      </Tooltip>\n    </Collapse>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAYA,MAAa,iCAA8C;CACzD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,aAAa,YAAY,aAAa,gBAAgB;CAC9D,MAAM,kBAAkB,UAAU;CAClC,MAAM,oBAAoB,YAAY;CACtC,MAAM,EAAE,sBAAsB,yBAAyB;CACvD,MAAM,CAAC,kBAAkB,eAAe,WAAW;CAEnD,MAAM,UACJ,CAAC,mBACD,CAAC,qBACD,CAAC,kBACD,CAAC;CAEH,MAAM,oBACJ,SAAS,EACP,IAAI,aAAa,SACb,iBAAiB,oBACjB,iBAAiB,aACvB,CAAC;CAEH,OACE,oBAAC,UAAD;EACE,aAAY;EACZ,IAAI;EACJ,SAAS;EACT,cAAA;EACA,eAAA;EAEA,UAAA,oBAAC,SAAD;GAAS,OAAO,EAAE,mBAAmB;GAAG,WAAU;GAChD,UAAA,oBAAC,QAAD;IACE,SAAQ;IACR,SAAS;IACT,IAAI;KACF,IAAI;KACJ,UAAU;KACV,OAAO;KACP,QAAQ;IACV;IAEA,UAAA,oBAAC,QAAD,CAAS,CAAA;GACH,CAAA;EACD,CAAA;CACD,CAAA;AAEd"}

package/dist/esm/components/SettingsPanel/SettingsPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsPanel.js","names":[],"sources":["../../../../src/components/SettingsPanel/SettingsPanel.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useSplitMode } from '../../stores/navigationTabs/useNavigationTabsStore.js'\nimport { useSettingsStore } from '../../stores/settings/SettingsStore.js'\nimport { useSettings } from '../../stores/settings/useSettings.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { Card } from '../Card/Card.js'\nimport {\n  SettingsPanelButton,\n  SettingsPanelContainer,\n  SettingsPanelTitle,\n  SettingsPanelValue,\n} from './SettingsPanel.style.js'\nimport {\n  bridgeSettingsPanelKeys,\n  type SettingsPanelKey,\n  swapSettingsPanelKeys,\n} from './utils.js'\n\nexport const SettingsPanel: React.FC<BoxProps> = (props): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const splitMode = useSplitMode()\n  const { slippage, routePriority } = useSettings(['slippage', 'routePriority'])\n  const [enabledBridges, totalBridges, enabledExchanges, totalExchanges] =\n    useSettingsStore((state) => [\n      Object.values(state._enabledBridges).filter(Boolean).length,\n      Object.values(state._enabledBridges).length,\n      Object.values(state._enabledExchanges).filter(Boolean).length,\n      Object.values(state._enabledExchanges).length,\n    ])\n\n  const rows =\n    splitMode === 'bridge' ? bridgeSettingsPanelKeys : swapSettingsPanelKeys\n\n  const labelByKey: Record<SettingsPanelKey, string> = {\n    routePriority: t('settings.routePriority'),\n    exchanges: t('settings.enabledExchanges'),\n    bridges: t('settings.enabledBridges'),\n    slippage: t('settings.slippage'),\n  }\n\n  const valueByKey: Record<SettingsPanelKey, string> = {\n    routePriority:\n      routePriority === 'FASTEST'\n        ? t('settings.routePriorityOptions.fastest.title')\n        : t('settings.routePriorityOptions.cheapest.title'),\n    exchanges: `${enabledExchanges}/${totalExchanges}`,\n    bridges: `${enabledBridges}/${totalBridges}`,\n    slippage: slippage ? `${slippage}%` : t('button.auto'),\n  }\n\n  const handleClick = (key: SettingsPanelKey) => {\n    navigate({\n      to: `/${navigationRoutes.settings}/${navigationRoutes[key]}`,\n    })\n  }\n\n  return (\n    <SettingsPanelContainer {...props}>\n      {rows.map((key) => (\n        <Card key={key}>\n          <SettingsPanelButton onClick={() => handleClick(key)} disableRipple>\n            <SettingsPanelTitle>{labelByKey[key]}</SettingsPanelTitle>\n            <SettingsPanelValue>{valueByKey[key]}</SettingsPanelValue>\n          </SettingsPanelButton>\n        </Card>\n      ))}\n    </SettingsPanelContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAqBA,MAAa,iBAAqC,UAAuB;CACvE,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,YAAY,aAAa;CAC/B,MAAM,EAAE,UAAU,kBAAkB,YAAY,CAAC,YAAY,eAAe,CAAC;CAC7E,MAAM,CAAC,gBAAgB,cAAc,kBAAkB,kBACrD,kBAAkB,UAAU;EAC1B,OAAO,OAAO,MAAM,eAAe,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC;EACrD,OAAO,OAAO,MAAM,eAAe,CAAC,CAAC;EACrC,OAAO,OAAO,MAAM,iBAAiB,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC;EACvD,OAAO,OAAO,MAAM,iBAAiB,CAAC,CAAC;CACzC,CAAC;CAEH,MAAM,OACJ,cAAc,WAAW,0BAA0B;CAErD,MAAM,aAA+C;EACnD,eAAe,EAAE,wBAAwB;EACzC,WAAW,EAAE,2BAA2B;EACxC,SAAS,EAAE,yBAAyB;EACpC,UAAU,EAAE,mBAAmB;CACjC;CAEA,MAAM,aAA+C;EACnD,eACE,kBAAkB,YACd,EAAE,6CAA6C,IAC/C,EAAE,8CAA8C;EACtD,WAAW,GAAG,iBAAiB,GAAG;EAClC,SAAS,GAAG,eAAe,GAAG;EAC9B,UAAU,WAAW,GAAG,SAAS,KAAK,EAAE,aAAa;CACvD;CAEA,MAAM,eAAe,QAA0B;EAC7C,SAAS,EACP,IAAI,IAAI,iBAAiB,SAAS,GAAG,iBAAiB,OACxD,CAAC;CACH;CAEA,OACE,oBAAC,wBAAD;EAAwB,GAAI;YACzB,KAAK,KAAK,QACT,oBAAC,MAAD,EAAA,UACE,qBAAC,qBAAD;GAAqB,eAAe,YAAY,GAAG;GAAG,eAAA;aAAtD,CACE,oBAAC,oBAAD,EAAA,UAAqB,WAAW,KAAyB,CAAA,GACzD,oBAAC,oBAAD,EAAA,UAAqB,WAAW,KAAyB,CAAA,CACtC;KACjB,GALK,GAKL,CACP;CACqB,CAAA;AAE5B"}
+{"version":3,"file":"SettingsPanel.js","names":[],"sources":["../../../../src/components/SettingsPanel/SettingsPanel.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useSplitMode } from '../../stores/navigationTabs/useNavigationTabsStore.js'\nimport { useSettingsStore } from '../../stores/settings/SettingsStore.js'\nimport { useSettings } from '../../stores/settings/useSettings.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { Card } from '../Card/Card.js'\nimport {\n  SettingsPanelButton,\n  SettingsPanelContainer,\n  SettingsPanelTitle,\n  SettingsPanelValue,\n} from './SettingsPanel.style.js'\nimport {\n  bridgeSettingsPanelKeys,\n  type SettingsPanelKey,\n  swapSettingsPanelKeys,\n} from './utils.js'\n\nexport const SettingsPanel: React.FC<BoxProps> = (props): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const splitMode = useSplitMode()\n  const { slippage, routePriority } = useSettings(['slippage', 'routePriority'])\n  const [enabledBridges, totalBridges, enabledExchanges, totalExchanges] =\n    useSettingsStore((state) => [\n      Object.values(state._enabledBridges).filter(Boolean).length,\n      Object.values(state._enabledBridges).length,\n      Object.values(state._enabledExchanges).filter(Boolean).length,\n      Object.values(state._enabledExchanges).length,\n    ])\n\n  const rows =\n    splitMode === 'bridge' ? bridgeSettingsPanelKeys : swapSettingsPanelKeys\n\n  const labelByKey: Record<SettingsPanelKey, string> = {\n    routePriority: t('settings.routePriority'),\n    exchanges: t('settings.enabledExchanges'),\n    bridges: t('settings.enabledBridges'),\n    slippage: t('settings.slippage'),\n  }\n\n  const valueByKey: Record<SettingsPanelKey, string> = {\n    routePriority:\n      routePriority === 'FASTEST'\n        ? t('settings.routePriorityOptions.fastest.title')\n        : t('settings.routePriorityOptions.cheapest.title'),\n    exchanges: `${enabledExchanges}/${totalExchanges}`,\n    bridges: `${enabledBridges}/${totalBridges}`,\n    slippage: slippage ? `${slippage}%` : t('button.auto'),\n  }\n\n  const handleClick = (key: SettingsPanelKey) => {\n    navigate({\n      to: `/${navigationRoutes.settings}/${navigationRoutes[key]}`,\n    })\n  }\n\n  return (\n    <SettingsPanelContainer {...props}>\n      {rows.map((key) => (\n        <Card key={key}>\n          <SettingsPanelButton onClick={() => handleClick(key)} disableRipple>\n            <SettingsPanelTitle>{labelByKey[key]}</SettingsPanelTitle>\n            <SettingsPanelValue>{valueByKey[key]}</SettingsPanelValue>\n          </SettingsPanelButton>\n        </Card>\n      ))}\n    </SettingsPanelContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAqBA,MAAa,iBAAqC,UAAuB;CACvE,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,YAAY,aAAa;CAC/B,MAAM,EAAE,UAAU,kBAAkB,YAAY,CAAC,YAAY,eAAe,CAAC;CAC7E,MAAM,CAAC,gBAAgB,cAAc,kBAAkB,kBACrD,kBAAkB,UAAU;EAC1B,OAAO,OAAO,MAAM,eAAe,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC;EACrD,OAAO,OAAO,MAAM,eAAe,CAAC,CAAC;EACrC,OAAO,OAAO,MAAM,iBAAiB,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC;EACvD,OAAO,OAAO,MAAM,iBAAiB,CAAC,CAAC;CACzC,CAAC;CAEH,MAAM,OACJ,cAAc,WAAW,0BAA0B;CAErD,MAAM,aAA+C;EACnD,eAAe,EAAE,wBAAwB;EACzC,WAAW,EAAE,2BAA2B;EACxC,SAAS,EAAE,yBAAyB;EACpC,UAAU,EAAE,mBAAmB;CACjC;CAEA,MAAM,aAA+C;EACnD,eACE,kBAAkB,YACd,EAAE,6CAA6C,IAC/C,EAAE,8CAA8C;EACtD,WAAW,GAAG,iBAAiB,GAAG;EAClC,SAAS,GAAG,eAAe,GAAG;EAC9B,UAAU,WAAW,GAAG,SAAS,KAAK,EAAE,aAAa;CACvD;CAEA,MAAM,eAAe,QAA0B;EAC7C,SAAS,EACP,IAAI,IAAI,iBAAiB,SAAS,GAAG,iBAAiB,OACxD,CAAC;CACH;CAEA,OACE,oBAAC,wBAAD;EAAwB,GAAI;EACzB,UAAA,KAAK,KAAK,QACT,oBAAC,MAAD,EAAA,UACE,qBAAC,qBAAD;GAAqB,eAAe,YAAY,GAAG;GAAG,eAAA;GAAtD,UAAA,CACE,oBAAC,oBAAD,EAAA,UAAqB,WAAW,KAAyB,CAAA,GACzD,oBAAC,oBAAD,EAAA,UAAqB,WAAW,KAAyB,CAAA,CACtC;EACjB,CAAA,EAAA,GALK,GAKL,CACP;CACqB,CAAA;AAE5B"}

package/dist/esm/components/Skeleton/WidgetSkeleton.d.ts

@@ -1,10 +1,7 @@
 import { WidgetConfigPartialProps } from "../../types/widget.js";
 import { JSX } from "react";
-
 //#region src/components/Skeleton/WidgetSkeleton.d.ts
-declare const WidgetSkeleton: ({
-  config
-}: WidgetConfigPartialProps) => JSX.Element;
+declare const WidgetSkeleton: ({ config }: WidgetConfigPartialProps) => JSX.Element;
 //#endregion
 export { WidgetSkeleton };
 //# sourceMappingURL=WidgetSkeleton.d.ts.map

package/dist/esm/components/Skeleton/WidgetSkeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetSkeleton.d.ts","names":[],"sources":["../../../../src/components/Skeleton/WidgetSkeleton.tsx"],"mappings":";;;;cAkEa,cAAA;EACX;AAAA,GACC,wBAAA,KAA2B,GAAA,CAAI,OAAA"}
+{"version":3,"file":"WidgetSkeleton.d.ts","names":[],"sources":["../../../../src/components/Skeleton/WidgetSkeleton.tsx"],"mappings":";;;cAkEa,mBACX,UACC,6BAA2B,IAAI"}

package/dist/esm/components/Skeleton/WidgetSkeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetSkeleton.js","names":["createTheme"],"sources":["../../../../src/components/Skeleton/WidgetSkeleton.tsx"],"sourcesContent":["import { Skeleton, ThemeProvider, useMediaQuery } from '@mui/material'\nimport { type JSX, useMemo } from 'react'\nimport { createTheme } from '../../themes/createTheme.js'\nimport type { WidgetConfigPartialProps } from '../../types/widget.js'\nimport {\n  AppExpandedContainer,\n  FlexContainer,\n  RelativeContainer,\n} from '../AppContainer.js'\nimport {\n  SkeletonAmountContainer,\n  SkeletonCard,\n  SkeletonCardRow,\n  SkeletonHeaderAppBar,\n  SkeletonHeaderContainer,\n  SkeletonInputCard,\n  SkeletonPoweredByContainer,\n  SkeletonReviewButton,\n  SkeletonReviewButtonContainer,\n  SkeletonSendToWalletButton,\n  SkeletonWalletMenuButtonContainer,\n} from './WidgetSkeleton.style.js'\n\nconst SkeletonIcon = () => <Skeleton width={24} height={24} variant=\"rounded\" />\nconst SkeletonWalletMenuButton = () => (\n  <SkeletonWalletMenuButtonContainer>\n    <Skeleton width={98} height={24} variant=\"text\" />\n    <SkeletonIcon />\n  </SkeletonWalletMenuButtonContainer>\n)\n\ninterface SkeletonSelectCardProps {\n  titleWidth?: number\n  placeholderWidth?: number\n}\nconst SkeletonSelectCard = ({\n  titleWidth = 36,\n  placeholderWidth = 195,\n}: SkeletonSelectCardProps) => (\n  <SkeletonCard elevation={0}>\n    <Skeleton width={titleWidth} height={22} variant=\"text\" />\n    <SkeletonCardRow>\n      <Skeleton width={40} height={40} variant=\"circular\" />\n      <Skeleton width={placeholderWidth} height={27} variant=\"text\" />\n    </SkeletonCardRow>\n  </SkeletonCard>\n)\n\nconst SkeletonYouPayCard = () => (\n  <SkeletonInputCard elevation={0}>\n    <Skeleton width={55} height={22} variant=\"text\" />\n    <SkeletonCardRow>\n      <Skeleton width={40} height={40} variant=\"circular\" />\n      <SkeletonAmountContainer>\n        <Skeleton\n          width={48}\n          height={37}\n          variant=\"text\"\n          sx={{ marginTop: -0.75 }}\n        />\n        <Skeleton width={48} height={12} variant=\"text\" />\n      </SkeletonAmountContainer>\n    </SkeletonCardRow>\n  </SkeletonInputCard>\n)\n\nexport const WidgetSkeleton = ({\n  config,\n}: WidgetConfigPartialProps): JSX.Element => {\n  const appearance = config?.appearance\n  const hiddenUI = config?.hiddenUI\n  const requiredUI = config?.requiredUI\n  const configTheme = config?.theme\n  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')\n  const appearanceMode =\n    !appearance || appearance === 'system'\n      ? prefersDarkMode\n        ? 'dark'\n        : 'light'\n      : appearance\n\n  const theme = useMemo(() => createTheme(configTheme), [configTheme])\n\n  return (\n    <ThemeProvider\n      theme={theme}\n      defaultMode={appearanceMode}\n      modeStorageKey=\"li.fi-widget-mode\"\n      colorSchemeStorageKey=\"li.fi-widget-color-scheme\"\n      disableTransitionOnChange\n    >\n      <AppExpandedContainer data-testid=\"widget-skeleton-container\">\n        <RelativeContainer sx={{ display: 'flex', flexDirection: 'column' }}>\n          <SkeletonHeaderContainer>\n            {!hiddenUI?.walletMenu ? (\n              <SkeletonHeaderAppBar>\n                <SkeletonWalletMenuButton />\n              </SkeletonHeaderAppBar>\n            ) : null}\n            <SkeletonHeaderAppBar\n              sx={{ justifyContent: 'space-between', height: 52 }}\n            >\n              <Skeleton width={124} height={36} variant=\"text\" />\n              <SkeletonIcon />\n            </SkeletonHeaderAppBar>\n          </SkeletonHeaderContainer>\n\n          <FlexContainer\n            sx={{\n              gap: 2,\n              paddingBottom: hiddenUI?.poweredBy ? 3 : 2,\n            }}\n          >\n            <SkeletonSelectCard />\n            <SkeletonSelectCard />\n            <SkeletonYouPayCard />\n            {requiredUI?.toAddress ? (\n              <SkeletonSelectCard titleWidth={104} placeholderWidth={175} />\n            ) : null}\n            <SkeletonReviewButtonContainer>\n              <SkeletonReviewButton variant=\"contained\" fullWidth>\n                &nbsp;\n              </SkeletonReviewButton>\n              {!requiredUI?.toAddress ? (\n                <SkeletonSendToWalletButton variant=\"text\" fullWidth>\n                  &nbsp;\n                </SkeletonSendToWalletButton>\n              ) : null}\n            </SkeletonReviewButtonContainer>\n          </FlexContainer>\n          {!hiddenUI?.poweredBy ? (\n            <SkeletonPoweredByContainer>\n              <Skeleton width={96} height={18} variant=\"text\" />\n            </SkeletonPoweredByContainer>\n          ) : null}\n        </RelativeContainer>\n      </AppExpandedContainer>\n    </ThemeProvider>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"WidgetSkeleton.js","names":["createTheme"],"sources":["../../../../src/components/Skeleton/WidgetSkeleton.tsx"],"sourcesContent":["import { Skeleton, ThemeProvider, useMediaQuery } from '@mui/material'\nimport { type JSX, useMemo } from 'react'\nimport { createTheme } from '../../themes/createTheme.js'\nimport type { WidgetConfigPartialProps } from '../../types/widget.js'\nimport {\n  AppExpandedContainer,\n  FlexContainer,\n  RelativeContainer,\n} from '../AppContainer.js'\nimport {\n  SkeletonAmountContainer,\n  SkeletonCard,\n  SkeletonCardRow,\n  SkeletonHeaderAppBar,\n  SkeletonHeaderContainer,\n  SkeletonInputCard,\n  SkeletonPoweredByContainer,\n  SkeletonReviewButton,\n  SkeletonReviewButtonContainer,\n  SkeletonSendToWalletButton,\n  SkeletonWalletMenuButtonContainer,\n} from './WidgetSkeleton.style.js'\n\nconst SkeletonIcon = () => <Skeleton width={24} height={24} variant=\"rounded\" />\nconst SkeletonWalletMenuButton = () => (\n  <SkeletonWalletMenuButtonContainer>\n    <Skeleton width={98} height={24} variant=\"text\" />\n    <SkeletonIcon />\n  </SkeletonWalletMenuButtonContainer>\n)\n\ninterface SkeletonSelectCardProps {\n  titleWidth?: number\n  placeholderWidth?: number\n}\nconst SkeletonSelectCard = ({\n  titleWidth = 36,\n  placeholderWidth = 195,\n}: SkeletonSelectCardProps) => (\n  <SkeletonCard elevation={0}>\n    <Skeleton width={titleWidth} height={22} variant=\"text\" />\n    <SkeletonCardRow>\n      <Skeleton width={40} height={40} variant=\"circular\" />\n      <Skeleton width={placeholderWidth} height={27} variant=\"text\" />\n    </SkeletonCardRow>\n  </SkeletonCard>\n)\n\nconst SkeletonYouPayCard = () => (\n  <SkeletonInputCard elevation={0}>\n    <Skeleton width={55} height={22} variant=\"text\" />\n    <SkeletonCardRow>\n      <Skeleton width={40} height={40} variant=\"circular\" />\n      <SkeletonAmountContainer>\n        <Skeleton\n          width={48}\n          height={37}\n          variant=\"text\"\n          sx={{ marginTop: -0.75 }}\n        />\n        <Skeleton width={48} height={12} variant=\"text\" />\n      </SkeletonAmountContainer>\n    </SkeletonCardRow>\n  </SkeletonInputCard>\n)\n\nexport const WidgetSkeleton = ({\n  config,\n}: WidgetConfigPartialProps): JSX.Element => {\n  const appearance = config?.appearance\n  const hiddenUI = config?.hiddenUI\n  const requiredUI = config?.requiredUI\n  const configTheme = config?.theme\n  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')\n  const appearanceMode =\n    !appearance || appearance === 'system'\n      ? prefersDarkMode\n        ? 'dark'\n        : 'light'\n      : appearance\n\n  const theme = useMemo(() => createTheme(configTheme), [configTheme])\n\n  return (\n    <ThemeProvider\n      theme={theme}\n      defaultMode={appearanceMode}\n      modeStorageKey=\"li.fi-widget-mode\"\n      colorSchemeStorageKey=\"li.fi-widget-color-scheme\"\n      disableTransitionOnChange\n    >\n      <AppExpandedContainer data-testid=\"widget-skeleton-container\">\n        <RelativeContainer sx={{ display: 'flex', flexDirection: 'column' }}>\n          <SkeletonHeaderContainer>\n            {!hiddenUI?.walletMenu ? (\n              <SkeletonHeaderAppBar>\n                <SkeletonWalletMenuButton />\n              </SkeletonHeaderAppBar>\n            ) : null}\n            <SkeletonHeaderAppBar\n              sx={{ justifyContent: 'space-between', height: 52 }}\n            >\n              <Skeleton width={124} height={36} variant=\"text\" />\n              <SkeletonIcon />\n            </SkeletonHeaderAppBar>\n          </SkeletonHeaderContainer>\n\n          <FlexContainer\n            sx={{\n              gap: 2,\n              paddingBottom: hiddenUI?.poweredBy ? 3 : 2,\n            }}\n          >\n            <SkeletonSelectCard />\n            <SkeletonSelectCard />\n            <SkeletonYouPayCard />\n            {requiredUI?.toAddress ? (\n              <SkeletonSelectCard titleWidth={104} placeholderWidth={175} />\n            ) : null}\n            <SkeletonReviewButtonContainer>\n              <SkeletonReviewButton variant=\"contained\" fullWidth>\n                &nbsp;\n              </SkeletonReviewButton>\n              {!requiredUI?.toAddress ? (\n                <SkeletonSendToWalletButton variant=\"text\" fullWidth>\n                  &nbsp;\n                </SkeletonSendToWalletButton>\n              ) : null}\n            </SkeletonReviewButtonContainer>\n          </FlexContainer>\n          {!hiddenUI?.poweredBy ? (\n            <SkeletonPoweredByContainer>\n              <Skeleton width={96} height={18} variant=\"text\" />\n            </SkeletonPoweredByContainer>\n          ) : null}\n        </RelativeContainer>\n      </AppExpandedContainer>\n    </ThemeProvider>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/Step/StepActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepActions.js","names":["Card"],"sources":["../../../../src/components/Step/StepActions.tsx"],"sourcesContent":["import type { LiFiStep, RouteExtended, StepExtended } from '@lifi/sdk'\nimport { useEthereumContext } from '@lifi/widget-provider'\nimport ArrowForward from '@mui/icons-material/ArrowForward'\nimport { Box, Divider, Tooltip } from '@mui/material'\nimport { Fragment } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport type {\n  ModeOptions,\n  WidgetFeeConfig,\n  WidgetMode,\n} from '../../types/widget.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { Card } from '../Card/Card.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport {\n  StepActionsHeader,\n  StepActionsTitle,\n  StepLabelTypography,\n} from './StepActions.style.js'\n\ninterface StepDetailsLabelProps {\n  step: StepExtended\n  mode?: Extract<WidgetMode, 'custom'>\n  modeOptions?: ModeOptions\n  feeConfig?: WidgetFeeConfig\n  relayerSupport?: boolean\n}\n\nexport const StepActions: React.FC<{\n  route: RouteExtended\n}> = ({ route }) => {\n  const { t } = useTranslation()\n  const { mode, modeOptions, feeConfig, hiddenUI } = useWidgetConfig()\n  const { isGaslessStep } = useEthereumContext()\n\n  const headerIncludedSteps = route.steps.flatMap((step) => step.includedSteps)\n\n  const flatSteps = route.steps.flatMap((routeStep) => {\n    let steps = routeStep.includedSteps\n    if (hiddenUI?.integratorStepDetails) {\n      const feeCollectionStep = steps.find((s) => s.tool === 'feeCollection')\n      if (feeCollectionStep) {\n        steps = structuredClone(steps.filter((s) => s.tool !== 'feeCollection'))\n        steps[0].estimate.fromAmount = feeCollectionStep.estimate.fromAmount\n      }\n    }\n    const hasGaslessSupport = !!isGaslessStep?.(routeStep)\n    return steps.map((includedStep) => ({ includedStep, hasGaslessSupport }))\n  })\n\n  const tooltipContent = (\n    <Card indented>\n      <Box\n        sx={{\n          display: 'grid',\n          gridTemplateColumns: '32px 1fr',\n          columnGap: 1.5,\n        }}\n      >\n        {flatSteps.map(({ includedStep: step, hasGaslessSupport }, i, arr) => {\n          const showDivider = i !== arr.length - 1\n          const isFeeCollection =\n            step.type === 'protocol' && step.tool === 'feeCollection'\n          const toolName =\n            isFeeCollection && feeConfig?.name\n              ? feeConfig.name\n              : step.toolDetails.name\n          const toolLogoURI =\n            isFeeCollection && feeConfig?.logoURI\n              ? feeConfig.logoURI\n              : step.toolDetails.logoURI\n\n          return (\n            <Fragment key={step.id}>\n              <Box sx={{ display: 'flex', justifyContent: 'center' }}>\n                {toolLogoURI ? (\n                  <SmallAvatar\n                    src={toolLogoURI}\n                    alt={toolName}\n                    sx={{ width: 32, height: 32 }}\n                  >\n                    {toolName?.[0]}\n                  </SmallAvatar>\n                ) : null}\n              </Box>\n              <Box\n                sx={{ display: 'flex', flexDirection: 'column', minHeight: 32 }}\n              >\n                {step.type === 'custom' && mode === 'custom' ? (\n                  <CustomStepDetailsLabel\n                    step={step}\n                    mode={mode}\n                    modeOptions={modeOptions}\n                  />\n                ) : step.type === 'cross' ? (\n                  <BridgeStepDetailsLabel step={step} />\n                ) : step.type === 'protocol' ? (\n                  <ProtocolStepDetailsLabel\n                    step={step}\n                    feeConfig={feeConfig}\n                    relayerSupport={hasGaslessSupport}\n                  />\n                ) : (\n                  <SwapStepDetailsLabel step={step} />\n                )}\n                <StepDetailsContent step={step} />\n              </Box>\n              {showDivider && (\n                <Box sx={{ display: 'flex', alignItems: 'center', px: '15px' }}>\n                  <Divider\n                    orientation=\"vertical\"\n                    sx={{ my: 0.5, height: 8, borderRightWidth: 2 }}\n                  />\n                </Box>\n              )}\n              {showDivider && <Box />}\n            </Fragment>\n          )\n        })}\n      </Box>\n    </Card>\n  )\n\n  return (\n    <StepActionsHeader>\n      <StepActionsTitle>{t('main.route')}</StepActionsTitle>\n      <Tooltip\n        title={tooltipContent}\n        placement=\"bottom-end\"\n        arrow={false}\n        slotProps={{\n          tooltip: {\n            sx: {\n              bgcolor: 'transparent',\n              p: 0,\n              boxShadow: 'none',\n              maxWidth: 'none',\n            },\n          },\n          transition: {\n            style: { transformOrigin: 'right top' },\n          },\n        }}\n      >\n        <CardIconButton\n          size=\"small\"\n          sx={(theme) => ({\n            borderRadius: theme.vars.shape.borderRadiusSecondary,\n          })}\n        >\n          <Box sx={{ display: 'flex', alignItems: 'center' }}>\n            {headerIncludedSteps.map((includedStep, index) => (\n              <Fragment key={index}>\n                {index > 0 ? (\n                  <Divider sx={{ width: 8, mx: 0.5, borderWidth: 1 }} />\n                ) : null}\n                <SmallAvatar\n                  src={includedStep.toolDetails.logoURI}\n                  alt={includedStep.toolDetails.name}\n                  sx={{ width: 16, height: 16 }}\n                >\n                  {includedStep.toolDetails.name[0]}\n                </SmallAvatar>\n              </Fragment>\n            ))}\n          </Box>\n        </CardIconButton>\n      </Tooltip>\n    </StepActionsHeader>\n  )\n}\n\nconst StepDetailsContent: React.FC<{\n  step: StepExtended\n}> = ({ step }) => {\n  const { t } = useTranslation()\n\n  const sameTokenProtocolStep =\n    step.action.fromToken.chainId === step.action.toToken.chainId &&\n    step.action.fromToken.address === step.action.toToken.address\n\n  let fromAmount: string | undefined\n  if (sameTokenProtocolStep) {\n    const estimatedFromAmount =\n      BigInt(step.estimate.fromAmount) - BigInt(step.estimate.toAmount)\n\n    fromAmount =\n      estimatedFromAmount > 0n\n        ? formatTokenAmount(estimatedFromAmount, step.action.fromToken.decimals)\n        : formatTokenAmount(\n            BigInt(step.estimate.fromAmount),\n            step.action.fromToken.decimals\n          )\n  } else {\n    fromAmount = formatTokenAmount(\n      BigInt(step.estimate.fromAmount),\n      step.action.fromToken.decimals\n    )\n  }\n\n  const showToAmount =\n    step.type !== 'custom' && step.tool !== 'custom' && !sameTokenProtocolStep\n\n  return (\n    <StepLabelTypography>\n      {!showToAmount ? (\n        <>\n          {t('format.tokenAmount', {\n            value: formatTokenAmount(\n              BigInt(step.estimate.fromAmount),\n              step.action.fromToken.decimals\n            ),\n          })}{' '}\n          {step.action.fromToken.symbol}\n          {' - '}\n        </>\n      ) : null}\n      {t('format.tokenAmount', {\n        value: fromAmount,\n      })}{' '}\n      {step.action.fromToken.symbol}\n      {showToAmount ? (\n        <>\n          <ArrowForward sx={{ fontSize: 18, paddingX: 0.5, height: 12 }} />\n          {t('format.tokenAmount', {\n            value: formatTokenAmount(\n              BigInt(step.execution?.toAmount ?? step.estimate.toAmount),\n              step.execution?.toToken?.decimals ?? step.action.toToken.decimals\n            ),\n          })}{' '}\n          {step.execution?.toToken?.symbol ?? step.action.toToken.symbol}\n        </>\n      ) : (\n        ` (${t('format.currency', {\n          value: formatTokenPrice(\n            fromAmount,\n            step.action.fromToken.priceUSD,\n            step.action.fromToken.decimals\n          ),\n        })})`\n      )}\n    </StepLabelTypography>\n  )\n}\n\nconst CustomStepDetailsLabel: React.FC<StepDetailsLabelProps> = ({\n  step,\n  mode,\n  modeOptions,\n}) => {\n  const { t } = useTranslation()\n\n  if (!mode) {\n    return null\n  }\n\n  // FIXME: step transaction request overrides step tool details, but not included step tool details\n  const toolDetails =\n    mode === 'custom' && (step as unknown as LiFiStep).includedSteps?.length > 0\n      ? (step as unknown as LiFiStep).includedSteps.find(\n          (step) => step.tool === 'custom' && step.toolDetails.key !== 'custom'\n        )?.toolDetails || step.toolDetails\n      : step.toolDetails\n\n  const stepDetailsKey =\n    (mode === 'custom' && modeOptions?.custom?.type) || 'checkout'\n\n  return (\n    <StepLabelTypography>\n      {t(`main.${stepDetailsKey}StepDetails`, {\n        tool: toolDetails.name,\n      })}\n    </StepLabelTypography>\n  )\n}\n\nconst BridgeStepDetailsLabel: React.FC<\n  Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step }) => {\n  const { t } = useTranslation()\n  const { getChainById } = useAvailableChains()\n  return (\n    <StepLabelTypography>\n      {t('main.bridgeStepDetails', {\n        from: getChainById(step.action.fromChainId)?.name,\n        to: getChainById(step.action.toChainId)?.name,\n        tool: step.toolDetails.name,\n      })}\n    </StepLabelTypography>\n  )\n}\n\nconst SwapStepDetailsLabel: React.FC<\n  Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step }) => {\n  const { t } = useTranslation()\n  const { getChainById } = useAvailableChains()\n  return (\n    <StepLabelTypography>\n      {t('main.swapStepDetails', {\n        chain: getChainById(step.action.fromChainId)?.name,\n        tool: step.toolDetails.name,\n      })}\n    </StepLabelTypography>\n  )\n}\n\nconst ProtocolStepDetailsLabel: React.FC<\n  Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step, feeConfig, relayerSupport }) => {\n  const { t } = useTranslation()\n  return (\n    <StepLabelTypography>\n      {step.toolDetails.key === 'feeCollection'\n        ? feeConfig?.name ||\n          (relayerSupport\n            ? t('main.fees.relayerService')\n            : t('main.fees.defaultIntegrator'))\n        : step.toolDetails.key === 'gasZip'\n          ? t('main.refuelStepDetails', {\n              tool: step.toolDetails.name,\n            })\n          : step.toolDetails.name}\n    </StepLabelTypography>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"StepActions.js","names":["Card"],"sources":["../../../../src/components/Step/StepActions.tsx"],"sourcesContent":["import type { LiFiStep, RouteExtended, StepExtended } from '@lifi/sdk'\nimport { useEthereumContext } from '@lifi/widget-provider'\nimport ArrowForward from '@mui/icons-material/ArrowForward'\nimport { Box, Divider, Tooltip } from '@mui/material'\nimport { Fragment } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport type {\n  ModeOptions,\n  WidgetFeeConfig,\n  WidgetMode,\n} from '../../types/widget.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { Card } from '../Card/Card.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport {\n  StepActionsHeader,\n  StepActionsTitle,\n  StepLabelTypography,\n} from './StepActions.style.js'\n\ninterface StepDetailsLabelProps {\n  step: StepExtended\n  mode?: Extract<WidgetMode, 'custom'>\n  modeOptions?: ModeOptions\n  feeConfig?: WidgetFeeConfig\n  relayerSupport?: boolean\n}\n\nexport const StepActions: React.FC<{\n  route: RouteExtended\n}> = ({ route }) => {\n  const { t } = useTranslation()\n  const { mode, modeOptions, feeConfig, hiddenUI } = useWidgetConfig()\n  const { isGaslessStep } = useEthereumContext()\n\n  const headerIncludedSteps = route.steps.flatMap((step) => step.includedSteps)\n\n  const flatSteps = route.steps.flatMap((routeStep) => {\n    let steps = routeStep.includedSteps\n    if (hiddenUI?.integratorStepDetails) {\n      const feeCollectionStep = steps.find((s) => s.tool === 'feeCollection')\n      if (feeCollectionStep) {\n        steps = structuredClone(steps.filter((s) => s.tool !== 'feeCollection'))\n        steps[0].estimate.fromAmount = feeCollectionStep.estimate.fromAmount\n      }\n    }\n    const hasGaslessSupport = !!isGaslessStep?.(routeStep)\n    return steps.map((includedStep) => ({ includedStep, hasGaslessSupport }))\n  })\n\n  const tooltipContent = (\n    <Card indented>\n      <Box\n        sx={{\n          display: 'grid',\n          gridTemplateColumns: '32px 1fr',\n          columnGap: 1.5,\n        }}\n      >\n        {flatSteps.map(({ includedStep: step, hasGaslessSupport }, i, arr) => {\n          const showDivider = i !== arr.length - 1\n          const isFeeCollection =\n            step.type === 'protocol' && step.tool === 'feeCollection'\n          const toolName =\n            isFeeCollection && feeConfig?.name\n              ? feeConfig.name\n              : step.toolDetails.name\n          const toolLogoURI =\n            isFeeCollection && feeConfig?.logoURI\n              ? feeConfig.logoURI\n              : step.toolDetails.logoURI\n\n          return (\n            <Fragment key={step.id}>\n              <Box sx={{ display: 'flex', justifyContent: 'center' }}>\n                {toolLogoURI ? (\n                  <SmallAvatar\n                    src={toolLogoURI}\n                    alt={toolName}\n                    sx={{ width: 32, height: 32 }}\n                  >\n                    {toolName?.[0]}\n                  </SmallAvatar>\n                ) : null}\n              </Box>\n              <Box\n                sx={{ display: 'flex', flexDirection: 'column', minHeight: 32 }}\n              >\n                {step.type === 'custom' && mode === 'custom' ? (\n                  <CustomStepDetailsLabel\n                    step={step}\n                    mode={mode}\n                    modeOptions={modeOptions}\n                  />\n                ) : step.type === 'cross' ? (\n                  <BridgeStepDetailsLabel step={step} />\n                ) : step.type === 'protocol' ? (\n                  <ProtocolStepDetailsLabel\n                    step={step}\n                    feeConfig={feeConfig}\n                    relayerSupport={hasGaslessSupport}\n                  />\n                ) : (\n                  <SwapStepDetailsLabel step={step} />\n                )}\n                <StepDetailsContent step={step} />\n              </Box>\n              {showDivider && (\n                <Box sx={{ display: 'flex', alignItems: 'center', px: '15px' }}>\n                  <Divider\n                    orientation=\"vertical\"\n                    sx={{ my: 0.5, height: 8, borderRightWidth: 2 }}\n                  />\n                </Box>\n              )}\n              {showDivider && <Box />}\n            </Fragment>\n          )\n        })}\n      </Box>\n    </Card>\n  )\n\n  return (\n    <StepActionsHeader>\n      <StepActionsTitle>{t('main.route')}</StepActionsTitle>\n      <Tooltip\n        title={tooltipContent}\n        placement=\"bottom-end\"\n        arrow={false}\n        slotProps={{\n          tooltip: {\n            sx: {\n              bgcolor: 'transparent',\n              p: 0,\n              boxShadow: 'none',\n              maxWidth: 'none',\n            },\n          },\n          transition: {\n            style: { transformOrigin: 'right top' },\n          },\n        }}\n      >\n        <CardIconButton\n          size=\"small\"\n          sx={(theme) => ({\n            borderRadius: theme.vars.shape.borderRadiusSecondary,\n          })}\n        >\n          <Box sx={{ display: 'flex', alignItems: 'center' }}>\n            {headerIncludedSteps.map((includedStep, index) => (\n              <Fragment key={index}>\n                {index > 0 ? (\n                  <Divider sx={{ width: 8, mx: 0.5, borderWidth: 1 }} />\n                ) : null}\n                <SmallAvatar\n                  src={includedStep.toolDetails.logoURI}\n                  alt={includedStep.toolDetails.name}\n                  sx={{ width: 16, height: 16 }}\n                >\n                  {includedStep.toolDetails.name[0]}\n                </SmallAvatar>\n              </Fragment>\n            ))}\n          </Box>\n        </CardIconButton>\n      </Tooltip>\n    </StepActionsHeader>\n  )\n}\n\nconst StepDetailsContent: React.FC<{\n  step: StepExtended\n}> = ({ step }) => {\n  const { t } = useTranslation()\n\n  const sameTokenProtocolStep =\n    step.action.fromToken.chainId === step.action.toToken.chainId &&\n    step.action.fromToken.address === step.action.toToken.address\n\n  let fromAmount: string | undefined\n  if (sameTokenProtocolStep) {\n    const estimatedFromAmount =\n      BigInt(step.estimate.fromAmount) - BigInt(step.estimate.toAmount)\n\n    fromAmount =\n      estimatedFromAmount > 0n\n        ? formatTokenAmount(estimatedFromAmount, step.action.fromToken.decimals)\n        : formatTokenAmount(\n            BigInt(step.estimate.fromAmount),\n            step.action.fromToken.decimals\n          )\n  } else {\n    fromAmount = formatTokenAmount(\n      BigInt(step.estimate.fromAmount),\n      step.action.fromToken.decimals\n    )\n  }\n\n  const showToAmount =\n    step.type !== 'custom' && step.tool !== 'custom' && !sameTokenProtocolStep\n\n  return (\n    <StepLabelTypography>\n      {!showToAmount ? (\n        <>\n          {t('format.tokenAmount', {\n            value: formatTokenAmount(\n              BigInt(step.estimate.fromAmount),\n              step.action.fromToken.decimals\n            ),\n          })}{' '}\n          {step.action.fromToken.symbol}\n          {' - '}\n        </>\n      ) : null}\n      {t('format.tokenAmount', {\n        value: fromAmount,\n      })}{' '}\n      {step.action.fromToken.symbol}\n      {showToAmount ? (\n        <>\n          <ArrowForward sx={{ fontSize: 18, paddingX: 0.5, height: 12 }} />\n          {t('format.tokenAmount', {\n            value: formatTokenAmount(\n              BigInt(step.execution?.toAmount ?? step.estimate.toAmount),\n              step.execution?.toToken?.decimals ?? step.action.toToken.decimals\n            ),\n          })}{' '}\n          {step.execution?.toToken?.symbol ?? step.action.toToken.symbol}\n        </>\n      ) : (\n        ` (${t('format.currency', {\n          value: formatTokenPrice(\n            fromAmount,\n            step.action.fromToken.priceUSD,\n            step.action.fromToken.decimals\n          ),\n        })})`\n      )}\n    </StepLabelTypography>\n  )\n}\n\nconst CustomStepDetailsLabel: React.FC<StepDetailsLabelProps> = ({\n  step,\n  mode,\n  modeOptions,\n}) => {\n  const { t } = useTranslation()\n\n  if (!mode) {\n    return null\n  }\n\n  // FIXME: step transaction request overrides step tool details, but not included step tool details\n  const toolDetails =\n    mode === 'custom' && (step as unknown as LiFiStep).includedSteps?.length > 0\n      ? (step as unknown as LiFiStep).includedSteps.find(\n          (step) => step.tool === 'custom' && step.toolDetails.key !== 'custom'\n        )?.toolDetails || step.toolDetails\n      : step.toolDetails\n\n  const stepDetailsKey =\n    (mode === 'custom' && modeOptions?.custom?.type) || 'checkout'\n\n  return (\n    <StepLabelTypography>\n      {t(`main.${stepDetailsKey}StepDetails`, {\n        tool: toolDetails.name,\n      })}\n    </StepLabelTypography>\n  )\n}\n\nconst BridgeStepDetailsLabel: React.FC<\n  Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step }) => {\n  const { t } = useTranslation()\n  const { getChainById } = useAvailableChains()\n  return (\n    <StepLabelTypography>\n      {t('main.bridgeStepDetails', {\n        from: getChainById(step.action.fromChainId)?.name,\n        to: getChainById(step.action.toChainId)?.name,\n        tool: step.toolDetails.name,\n      })}\n    </StepLabelTypography>\n  )\n}\n\nconst SwapStepDetailsLabel: React.FC<\n  Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step }) => {\n  const { t } = useTranslation()\n  const { getChainById } = useAvailableChains()\n  return (\n    <StepLabelTypography>\n      {t('main.swapStepDetails', {\n        chain: getChainById(step.action.fromChainId)?.name,\n        tool: step.toolDetails.name,\n      })}\n    </StepLabelTypography>\n  )\n}\n\nconst ProtocolStepDetailsLabel: React.FC<\n  Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step, feeConfig, relayerSupport }) => {\n  const { t } = useTranslation()\n  return (\n    <StepLabelTypography>\n      {step.toolDetails.key === 'feeCollection'\n        ? feeConfig?.name ||\n          (relayerSupport\n            ? t('main.fees.relayerService')\n            : t('main.fees.defaultIntegrator'))\n        : step.toolDetails.key === 'gasZip'\n          ? t('main.refuelStepDetails', {\n              tool: step.toolDetails.name,\n            })\n          : step.toolDetails.name}\n    </StepLabelTypography>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/StepActions/SentToWalletRow.d.ts

@@ -0,0 +1,9 @@
+//#region src/components/StepActions/SentToWalletRow.d.ts
+interface SentToWalletRowProps {
+  toAddress: string;
+  toChainId: number;
+}
+declare const SentToWalletRow: React.FC<SentToWalletRowProps>;
+//#endregion
+export { SentToWalletRow };
+//# sourceMappingURL=SentToWalletRow.d.ts.map

package/dist/esm/components/StepActions/SentToWalletRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SentToWalletRow.d.ts","names":[],"sources":["../../../../src/components/StepActions/SentToWalletRow.tsx"],"mappings":";UAWU;EACR;EACA;;cAGW,iBAAiB,MAAM,GAAG"}